:root, [data-theme="colorful"]{
  --bg-a: #EAF2FF;
  --bg-b: #FDF0F7;
  --panel: #FFFFFF;
  --panel-line: #E4E2F5;
  --accent: #7C5CFC;
  --accent-dim: #C9BBFF;
  --on-accent: #FFFFFF;
  --text: #262338;
  --text-dim: #8B87A3;
  --good: #22C55E;
  --bad: #F4415A;
  --even: #2F8CF0;
  --odd: #FF8A3D;
  --overlay-bg: rgba(38, 35, 56, 0.55);
}
[data-theme="light"]{
  --bg-a: #F6F4EF;
  --bg-b: #F6F4EF;
  --panel: #FFFFFF;
  --panel-line: #E1DCCF;
  --accent: #C9974A;
  --accent-dim: #E3C88F;
  --on-accent: #2B2109;
  --text: #2B2A26;
  --text-dim: #8C8778;
  --good: #4E8F6C;
  --bad: #B65A4F;
  --even: #2F8CF0;
  --odd: #E8631A;
  --overlay-bg: rgba(30, 27, 20, 0.55);
}
[data-theme="dark"]{
  --bg-a: #1B2430;
  --bg-b: #141B25;
  --panel: #232D3D;
  --panel-line: #313E52;
  --accent: #D8AE5C;
  --accent-dim: #9A824E;
  --on-accent: #211A0D;
  --text: #E7E2D6;
  --text-dim: #8A96A8;
  --good: #5A9A78;
  --bad: #C06A62;
  --even: #5FA8F5;
  --odd: #F5A05C;
  --overlay-bg: rgba(0, 0, 0, 0.6);
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; min-height:100%;
  background: linear-gradient(160deg, var(--bg-a) 0%, var(--bg-b) 100%);
  background-attachment: fixed;
  color: var(--text);
  transition: background 0.25s ease, color 0.25s ease;
  font-family: 'IBM Plex Sans', sans-serif;
  overflow-x:hidden;
}
a{ color: var(--accent); }

/* --- top bar (login state / nav), now living inside the sidebar --- */
.topbar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.topbar a.navlink{
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration:none;
}
.topbar a.navlink:hover{ color: var(--text); }
.user-chip{
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.user-chip img{
  width:24px; height:24px; border-radius:50%;
}
.btn-google{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  color: var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration:none;
}
.btn-google:hover{ border-color: var(--accent-dim); }

/* --- overall layout: game centered, chrome text pushed to a side panel --- */
.layout{
  width:100%;
  max-width: 480px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 14px;
  padding: 12px 14px 32px;
}
.game-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.sidebar{
  display:flex;
  flex-direction:column;
  gap: 10px;
  width:100%;
  order:-1;
}
.sidebar .topbar{ flex-direction:column; align-items:flex-start; gap:6px; }

@media (min-width: 860px){
  .layout{
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    max-width: 880px;
    gap: 48px;
    padding: 48px 18px 40px;
  }
  .game-col{ width:420px; flex-shrink:0; order:1; }
  .sidebar{ width:220px; flex-shrink:0; order:2; position:sticky; top:48px; gap:16px; }
}

.theme-switch{
  display:flex;
  align-items:center;
  gap: 8px;
}
.theme-btn{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding:0;
  cursor:pointer;
  box-shadow: inset 0 0 0 1px var(--panel-line);
}
.theme-btn[data-theme-choice="colorful"]{ background: linear-gradient(135deg, #7C5CFC, #FF8A3D); }
.theme-btn[data-theme-choice="light"]{ background: #F6F4EF; }
.theme-btn[data-theme-choice="dark"]{ background: #1B2430; }
.theme-btn.active{ border-color: var(--accent); }

.brand{
  display:flex;
  align-items:center;
  gap: 8px;
}
.brand-logo{
  width: 26px;
  height: 26px;
  flex-shrink:0;
}
h1{
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, var(--accent), var(--odd));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 2px;
}
.subtitle{
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 2px;
  text-align:left;
}

/* On phones, the sidebar sits above the game — keep it small so the
   grid is visible without scrolling. */
@media (max-width: 859px){
  .sidebar{ gap: 6px; }
  .sidebar h1{ font-size: 0.95rem; margin-bottom: 0; }
  .sidebar .brand-logo{ width: 20px; height: 20px; }
  .sidebar .subtitle{ display:none; }
  .sidebar .topbar{ flex-direction:row; align-items:center; }
}

.hud{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom: 10px;
  font-family:'IBM Plex Mono', monospace;
}
.hud .stat{ display:flex; flex-direction:column; gap:2px; }
.hud .label{ font-size:0.68rem; color:var(--text-dim); letter-spacing:0.04em; }
.hud .value{ font-size:1.15rem; color:var(--text); }
.hud .value.gold{ color:var(--accent); }

.timerbar{
  width:100%;
  height:5px;
  background: var(--panel-line);
  border-radius: 3px;
  overflow:hidden;
  margin-bottom: 12px;
}
.timerbar-fill{
  height:100%;
  background: var(--accent);
  width:100%;
  transition: width 0.1s linear, background 0.3s ease;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
  width:100%;
  max-width: 360px;
  aspect-ratio: 1;
}
.cell.pos-top{ grid-column: 2; grid-row: 1; }
.cell.pos-left{ grid-column: 1; grid-row: 2; }
.cell.pos-center{ grid-column: 2; grid-row: 2; }
.cell.pos-right{ grid-column: 3; grid-row: 2; }
.cell.pos-bottom{ grid-column: 2; grid-row: 3; }
.cell{
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  font-size: clamp(1.1rem, 4.5vw, 1.6rem);
  font-weight:600;
  cursor:pointer;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  color: var(--text);
  box-shadow: 0 2px 0 var(--panel-line);
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
  user-select:none;
}
.cell:hover{ transform: translateY(-2px); border-color: var(--accent-dim); }
.cell:active{ transform: translateY(0px) scale(0.97); }
.cell.center{
  color: #FFFFFF;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight:700;
  cursor: default;
  border: none;
  box-shadow: none;
}
.cell.center.even{ background: linear-gradient(135deg, var(--even), #1E6FD9); }
.cell.center.odd{ background: linear-gradient(135deg, var(--odd), #E8631A); }
.cell.center:hover{ transform:none; }
.cell.correct{ background: var(--good); border-color: var(--good); color:#FFFFFF; }
.cell.wrong{ background: var(--bad); border-color: var(--bad); color:#FFFFFF; }
.cell.dim{ opacity: 0.35; }

.rule{
  width:100%;
  display:flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 10px 12px;
}
.rule .rule-row{ display:flex; align-items:center; gap:8px; }
.rule .tag{
  font-size: 0.62rem;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:700;
  letter-spacing:0.03em;
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink:0;
  width: 36px;
  text-align:center;
}
.rule .tag-even{ background: var(--even); }
.rule .tag-odd{ background: var(--odd); }
.rule .op{
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.92rem;
  font-weight:700;
  color: var(--text);
  flex-shrink:0;
}
.rule .ex{
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-left:auto;
}

@media (max-width: 859px){
  .rule{ padding: 6px 10px; gap: 4px; border-radius: 8px; }
  .rule .tag{ font-size: 0.54rem; width: 30px; padding: 1px 5px; }
  .rule .op{ font-size: 0.78rem; }
  .rule .ex{ font-size: 0.58rem; }
}

.footer-msg{
  margin-top: 16px;
  min-height: 1.4em;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align:center;
}

.overlay{
  position:fixed; inset:0;
  background: var(--overlay-bg);
  backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.overlay.hidden{ display:none; }
.card{
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 380px;
  text-align:center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  position: relative;
}
.close-x{
  position:absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor:pointer;
  padding: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.close-x svg{ width:16px; height:16px; }
.close-x:hover{ color: var(--text); }
.cell.idle-play{
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #FFFFFF;
  font-size: clamp(1rem, 4vw, 1.3rem);
  letter-spacing: 0.05em;
  cursor:pointer;
}
.card h2{
  font-family:'IBM Plex Mono', monospace;
  color: var(--accent);
  font-size:1.3rem;
  margin: 0 0 6px;
}
.card p{ color: var(--text-dim); font-size:0.9rem; margin: 4px 0 20px; line-height:1.5; }
.card.start-card{ max-width: 380px; }

.rule-big{
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 20px;
  background: linear-gradient(160deg, var(--bg-a), var(--bg-b));
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.rule-big-row{
  display:flex;
  align-items:center;
  gap: 12px;
}
.rule-big .tag{
  font-family:'IBM Plex Sans', sans-serif;
  font-size: 0.68rem;
  font-weight:700;
  letter-spacing:0.03em;
  color: #FFFFFF;
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 0;
  width: 44px;
  text-align:center;
}
.rule-big .tag-even{ background: var(--even); }
.rule-big .tag-odd{ background: var(--odd); }
.rule-big .op{
  font-family:'IBM Plex Mono', monospace;
  font-size: 1.3rem;
  font-weight:700;
  color: var(--text);
  flex-shrink: 0;
}
.rule-big .ex{
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-left: auto;
}
.card.start-card button.primary{ display:block; margin: 0 auto; }
.card .bigscore{ font-family:'IBM Plex Mono', monospace; font-size:2.2rem; color:var(--text); margin-bottom:2px; }
.card .bestscore{ font-size:0.8rem; color: var(--text-dim); margin-bottom: 20px; }
button.primary{
  background: linear-gradient(120deg, var(--accent), var(--accent-dim));
  color: var(--on-accent);
  border:none;
  padding: 12px 26px;
  border-radius: 10px;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
button.primary:hover{ filter: brightness(1.06); }

.save-status{
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 18px;
  min-height: 1.2em;
}
.save-status.success{ color: var(--good); }
.save-status.error{ color: var(--bad); }
.save-status a{ font-weight:600; }

.check-badge{
  width:64px; height:64px;
  border-radius:50%;
  background: var(--good);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px;
  position: relative;
  animation: pop 0.45s cubic-bezier(.34,1.56,.64,1);
}
.check-badge::before{
  content:'';
  position:absolute; inset:-8px;
  border-radius:50%;
  border:2px solid var(--good);
  animation: ring 0.9s ease-out;
}
.check-badge svg{ width:30px; height:30px; }
@keyframes pop{ 0%{ transform:scale(0);} 70%{ transform:scale(1.15);} 100%{ transform:scale(1);} }
@keyframes ring{ 0%{ transform:scale(0.6); opacity:0.6;} 100%{ transform:scale(1.7); opacity:0;} }

.stage-next-preview{
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.stage-next-preview b{ color: var(--accent); font-weight:600; }

.banner-error{
  max-width: 880px;
  margin: 14px auto 0;
  padding: 10px 16px;
  background: var(--bad);
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align:center;
}

/* --- shared site footer nav --- */
.site-footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--panel-line);
}
.site-footer-nav a{
  font-family:'IBM Plex Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration:none;
}
.site-footer-nav a:hover{ color: var(--accent); }
.sidebar .site-footer-nav{ flex-direction:column; gap:8px; margin-top:20px; padding-top:14px; }

/* --- collapsible drawers (rule reminder + menu), mobile only --- */
.rule-summary, .nav-summary{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.rule-summary::-webkit-details-marker,
.nav-summary::-webkit-details-marker{ display:none; }
.rule-summary{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  color: var(--text-dim);
  font-family:'IBM Plex Mono', monospace;
  font-weight:700;
  font-size: 0.85rem;
}
.nav-summary{
  font-family:'IBM Plex Sans', sans-serif;
  font-size: 0.8rem;
  font-weight:600;
  color: var(--text-dim);
  padding: 8px 0;
}
.rule-toggle[open] .rule-summary{ color: var(--accent); border-color: var(--accent-dim); }
.rule-toggle .rule{ margin-top: 8px; }
.nav-toggle .site-footer-nav{ margin-top: 8px; padding-top: 0; border-top: none; }

@media (min-width: 860px){
  /* Enough room on desktop — show both fully expanded, hide the toggles. */
  .rule-summary, .nav-summary{ display:none; }
  .rule-toggle .rule{ display:flex !important; margin-top:0; }
  .nav-toggle .site-footer-nav{ display:flex !important; margin-top:32px; padding-top:16px; border-top:1px solid var(--panel-line); }
  .sidebar .nav-toggle .site-footer-nav{ margin-top:20px; padding-top:14px; }
}

/* --- FAQ page --- */
.faq-list{ display:flex; flex-direction:column; gap: 14px; }
.faq-item{
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.faq-q{
  font-weight:600;
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 6px;
}
.faq-a{
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.55;
}

/* --- admin page --- */
.admin-stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0 22px;
}
@media (max-width: 500px){
  .admin-stats{ grid-template-columns: repeat(2, 1fr); }
  .admin-table{ font-size: 0.72rem; }
}
.admin-stat{
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 12px 8px;
  text-align:center;
}
.admin-stat .value{ font-family:'IBM Plex Mono', monospace; font-size:1.3rem; color:var(--accent); font-weight:700; }
.admin-stat .label{ font-size:0.68rem; color:var(--text-dim); letter-spacing:0.03em; margin-top:2px; }
.admin-table{ max-width: none; font-size: 0.82rem; }
.admin-btn{
  font-family:'IBM Plex Sans', sans-serif;
  font-size: 0.72rem;
  font-weight:600;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--text);
  cursor:pointer;
  margin: 2px;
}
.admin-btn:hover{ border-color: var(--accent-dim); }
.admin-btn-danger{ color: var(--bad); border-color: var(--bad); }

/* --- standalone centered pages (leaderboard) --- */
.page-wrap{
  width:100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 18px 40px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.page-wrap .topbar{ margin-bottom: 14px; }
.page-wrap .brand{ margin-top: 4px; }

/* --- leaderboard page --- */
.leaderboard-table{
  width:100%;
  max-width: 480px;
  border-collapse: collapse;
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.9rem;
}
.leaderboard-table th{
  text-align:left;
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-bottom: 1px solid var(--panel-line);
}
.leaderboard-table td{
  padding: 10px;
  border-bottom: 1px solid var(--panel-line);
}
.leaderboard-table tr:last-child td{ border-bottom:none; }
.leaderboard-table td.rank{ color: var(--accent); font-weight:600; width: 2.2em; }
.leaderboard-table td.score{ text-align:right; }