/* ---- base ---- */
/* Design tokens — 9 ramps × 7 shades, lightest (1) → darkest (7) */
:root{
  /* red */
  --red-1:#F5DADB; --red-2:#EBA7A9; --red-3:#E36F73; --red-4:#C33F45;
  --red-5:#892A2E; --red-6:#531619; --red-7:#260607;

  /* coral (second red ramp) */
  --coral-1:#F8E1E2; --coral-2:#EFAEAF; --coral-3:#E87679; --coral-4:#D13D43;
  --coral-5:#95292D; --coral-6:#5D1619; --coral-7:#2A0607;

  /* teal-grey (used as "green" per callout — palest & second are the hub) */
  --teal-1:#D8F7F7; --teal-2:#A3D9D9; --teal-3:#84B0B0; --teal-4:#668989;
  --teal-5:#496464; --teal-6:#2E4141; --teal-7:#162121;

  /* terracotta */
  --terra-1:#F2DFDC; --terra-2:#E2B0A5; --terra-3:#D28068; --terra-4:#A0604E;
  --terra-5:#704235; --terra-6:#44261D; --terra-7:#1C0D08;

  /* ochre */
  --ochre-1:#FBEEE5; --ochre-2:#F4C9A0; --ochre-3:#D89F58; --ochre-4:#A97C43;
  --ochre-5:#7C5A2F; --ochre-6:#523B1D; --ochre-7:#2C1E0C;

  /* purple */
  --purple-1:#F0DBF2; --purple-2:#DCA8E0; --purple-3:#C874CF; --purple-4:#9C53A1;
  --purple-5:#6D3871; --purple-6:#411F44; --purple-7:#1C0A1D;

  /* blue */
  --blue-1:#EBEEFC; --blue-2:#B7C5F4; --blue-3:#7F9EED; --blue-4:#4278DB;
  --blue-5:#2D559F; --blue-6:#1A3567; --blue-7:#091834;

  /* turquoise */
  --turq-1:#D8F6FE; --turq-2:#3EDEF7; --turq-3:#30B4C8; --turq-4:#238B9B;
  --turq-5:#176571; --turq-6:#0B4149; --turq-7:#032025;

  /* grey */
  --grey-1:#E2E0E0; --grey-2:#BDB7B7; --grey-3:#9B9090; --grey-4:#786B6B;
  --grey-5:#534949; --grey-6:#302A2A; --grey-7:#131010;

  /* semantic mapping */
  --bg:var(--ochre-1);          /* palest yellow/cream page background */
  --bg-2:#ffffff;
  --ink:var(--grey-7);
  --muted:var(--grey-4);

  --nav-bg:var(--blue-6);       /* second-darkest blue */
  --nav-ink:#ffffff;            /* icons + labels */

  --wheel-border:var(--grey-6); /* second-darkest grey */
  --wheel-hub-fill:var(--teal-1);   /* palest "green" */
  --wheel-hub-border:var(--teal-2); /* second "green" */
  --wheel-triangle:var(--turq-2);   /* second-lightest turquoise */

  --slider-ink:var(--grey-6);   /* second-darkest grey only */

  --tile:#ffffff;
  --tile-locked:#e9effb;
  --tile-border:#e1e4e8;
  --accent:var(--blue-4);
  --accent-2:var(--blue-6);
  --danger:var(--red-4);
  --ok:var(--turq-5);

  /* shadows */
  --shadow:0 2px 6px rgba(19,16,16,.12);
  --shadow-lg:0 8px 24px rgba(19,16,16,.22);
  --shadow-wheel:0 14px 34px rgba(19,16,16,.28);
  --shadow-pointer:0 6px 14px rgba(19,16,16,.42);

  /* fonts */
  --font-ui:'Encode Sans','Encode Sans Condensed',-apple-system,Segoe UI,Roboto,sans-serif;
  --font-condensed:'Encode Sans Condensed','Encode Sans',-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);font-weight:400;
  min-height:100vh}
button{font:inherit;cursor:pointer;font-family:var(--font-ui)}
h1,h2,h3{font-family:var(--font-ui);font-weight:700}

/* leave room for the fixed sidebar */
body{padding-left:120px}

/* Icon system — inline <svg> injected by js/icons.js.
   Render with <span class="ficon ficon-NAME"></span>; paint color via the
   CSS `color` property (the SVG uses fill="currentColor"). */
.ficon,.ficon-grey{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  line-height:0;
}
.ficon  > svg,
.ficon-grey > svg{width:100%;height:100%;display:block}
.ficon{color:#fff}
.ficon-grey{color:var(--grey-6);width:38px;height:38px}
h1{margin:.4em 0 .6em;font-size:1.6rem}
h2{margin:.4em 0;font-size:1.3rem}
.muted{color:var(--muted);font-size:.9rem}
.hidden{display:none !important}

/* ---- sidebar ---- */
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:120px;
  background:var(--nav-bg);
  border-right:none;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:18px 10px 14px;
  z-index:20;
  box-shadow:2px 0 10px rgba(9,24,52,.25);
}
.sidebar .brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:#fff;
  text-align:center;
  margin-bottom:22px;
  line-height:1.05;
  user-select:none;
}
/* brand doubles as the Home button */
.sidebar .sidebrand{
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  padding:8px 6px;
  cursor:pointer;
  font-family:var(--font-condensed);
  transition:background .15s, transform .1s;
}
.sidebar .sidebrand:hover{background:rgba(255,255,255,.12)}
.sidebar .sidebrand:hover .ficon{transform:scale(1.06)}
.sidebar .sidebrand.active{background:rgba(255,255,255,.22)}
.sidebar .brand .ficon,
.sidebar .brand .brand-icon{width:52px;height:52px;color:#fff}
.sidebtn .ficon{width:34px;height:34px}
.admin-icon{display:inline-block;width:34px;height:34px;font-size:22px;line-height:34px;text-align:center;color:var(--ochre-3)}
.brand-text{font-size:1rem;letter-spacing:.3px;font-family:var(--font-condensed)}

.side-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.sidebtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:10px 6px;
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  color:#fff;
  font-size:.78rem;
  font-weight:600;
  font-family:var(--font-condensed);
  transition:background .15s, transform .1s;
}
.sidebtn .ficon{color:#fff;width:30px;height:30px}
.sidebtn:hover{background:rgba(255,255,255,.12)}
.sidebtn:hover .ficon{transform:scale(1.1)}
.sidebtn.active{background:rgba(255,255,255,.22)}
.login-btn{margin-top:8px}
.sidebar-privacy{
  display:block;text-align:center;
  font-size:.5rem;font-style:italic;
  color:rgba(255,255,255,.3);
  text-decoration:none;padding:6px 4px 0;
  font-family:var(--font-condensed);
}
.sidebar-privacy:hover{color:rgba(255,255,255,.55)}

/* mobile-only elements — hidden on desktop (never override these outside a media query) */
.burger-menu{display:none}
.mobile-drawer{display:none}
.mobile-diff{display:none}

/* legacy navbtn used inside views */
.navbtn{background:transparent;border:1px solid var(--tile-border);
  padding:6px 12px;border-radius:8px;color:var(--ink);margin-left:6px}
.navbtn:hover{background:var(--tile)}

/* ---- views ---- */
.view{display:none;padding:20px;max-width:980px;margin:0 auto}
.view.active{display:block}

/* home view fills the viewport (left of the sidebar) */
.home-view{
  max-width:none;
  padding:0;
  height:100vh;
}
.home-view.active{display:flex}
/* Spinner is visually centered to the browser window. The slider is
   absolutely positioned on the right so it doesn't push the wheel off-center. */
.home-stage{
  position:relative;
  flex:1;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---- difficulty slider (vertical, on right edge of viewport) ---- */
/* Slider is anchored to the wheel. Its whole column is 55% of the wheel's
   height, centered vertically on the wheel, hanging off to the right.
   Order top→bottom: skull icon, track, baby icon, current-level pill. */
.diff-slider-wrap.diff-vertical{
  position:absolute;
  top:50%;
  right:-120px;
  transform:translateY(-50%);
  height:55%;              /* 55% of wheel height */
  width:120px;
  padding:0;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.diff-vertical .diff-track{flex:1 1 auto;min-height:0}
/* Anchor the pill to the bottom of the column. When its text wraps,
   it grows downward out of the column instead of pushing the track up. */
.diff-vertical .diff-current-wrap{
  position:absolute;
  top:100%;                /* start at the column's bottom edge */
  left:50%;
  transform:translateX(-50%);
  margin-top:8px;
  white-space:nowrap;
  text-align:center;
}
.diff-vertical .diff-end{
  width:40px;height:40px;
  color:var(--slider-ink);
  flex:0 0 auto;
}
.diff-track{
  position:relative;
  flex:1;
  width:24px;
  display:flex;
  justify-content:center;
}
.diff-vertical #diff-slider{
  width:6px;
  height:100%;
  -webkit-appearance:none;
  appearance:none;
  background:var(--slider-ink);
  border-radius:3px;
  outline:none;
  writing-mode:vertical-lr;
  direction:rtl;
  margin:0;
}
.diff-vertical #diff-slider::-webkit-slider-runnable-track{
  width:6px;background:var(--slider-ink);border-radius:3px;
}
.diff-vertical #diff-slider::-moz-range-track{
  width:6px;background:var(--slider-ink);border-radius:3px;
}
/* hide the native thumb — the dot overlay is the visible thumb */
.diff-vertical #diff-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:6px;height:6px;background:transparent;border:none;
}
.diff-vertical #diff-slider::-moz-range-thumb{
  width:6px;height:6px;background:transparent;border:none;
}

/* dot markers along the track — top→bottom maps to skull(3)→easy(0) */
.diff-dots{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.diff-dot{
  width:22px;height:22px;
  border-radius:50%;
  background:var(--bg);
  border:4px solid var(--slider-ink);
  box-sizing:border-box;
}
.diff-dot.on{
  background:var(--slider-ink);
}
.diff-current-wrap{
  text-align:center;
  font-weight:600;
  color:var(--slider-ink);
  font-family:var(--font-condensed);
  font-size:.8rem;
  min-width:80px;
}

/* ---- wheel ---- */
.wheel-wrap{
  position:relative;
  width:min(82vh, 70vw, 720px);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(var(--shadow-wheel));
}
#wheel{
  width:100%;
  height:100%;
  display:block;
  cursor:pointer;
}
.wheel-result{display:none}
/* Rounded triangle pointer (SVG) — overlaps the bottom third onto the top
   of the wheel. Centered horizontally. */
.wheel-pointer{
  position:absolute;
  left:50%;
  top:-22px;
  transform:translateX(-50%);
  width:78px;
  height:86px;
  z-index:3;
  filter:drop-shadow(var(--shadow-pointer));
  pointer-events:none;
}
.wheel-controls{display:flex;gap:14px;justify-content:center;margin-top:14px}
.bigbtn{background:var(--accent);color:#fff;border:none;padding:12px 22px;
  border-radius:10px;font-size:1.05rem;font-weight:600;box-shadow:var(--shadow)}
.bigbtn:hover:not(:disabled){background:var(--accent-2)}
.bigbtn:disabled{opacity:.4;cursor:not-allowed}
.bigbtn.alt{background:var(--ok)}
.bigbtn.alt:hover:not(:disabled){background:#2f6a38}
.bigbtn.danger{background:var(--danger)}
.bigbtn.share{background:var(--blue-4)}
.bigbtn.share:hover:not(:disabled){background:var(--blue-6)}
.wheel-result{text-align:center;margin-top:10px;font-size:1.1rem;min-height:1.4em}

/* ---- game ---- */
.view#view-game{
  max-width:none;
  padding:0;
  font-family:var(--font-ui);
}
.view#view-game.active{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

.game-header{
  position:sticky;top:0;z-index:15;
  background:var(--bg);
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 24px 6px;
  margin-bottom:0;
  flex-shrink:0;
}
.game-header-left{
  display:flex;
  gap:6px;
  flex-shrink:0;
}
.game-title{
  flex:1;
  text-align:center;
  font-family:var(--font-ui);
  font-weight:800;
  font-size:1.6rem;
  color:var(--teal-6);
  letter-spacing:.3px;
}
.game-credit{
  width:100%;text-align:center;
  font-family:var(--font-condensed);
  font-size:.75rem;color:var(--grey-5);
  margin-top:-2px;
}
.game-credit a{color:var(--blue-4);text-decoration:none}
.game-credit a:hover{text-decoration:underline}
.game-stats{
  display:flex;
  gap:10px;
  align-items:center;
  flex-shrink:0;
}

/* stat pills — non-clickable display badges */
.stat-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  background:var(--grey-1);
  border:1px solid var(--grey-2);
  border-radius:8px;
  font-family:var(--font-condensed);
  font-weight:700;
  font-size:0.9rem;
  color:var(--grey-6);
  user-select:none;
  cursor:default;
  transition:color .25s, transform .25s, background .25s;
}
.stat-icon{
  font-size:0.75rem;
  color:var(--teal-5);
}
.stat-trophy{
  width:16px;height:16px;
  color:var(--ochre-3);
}
.stat-best{
  background:var(--ochre-1);
  border-color:var(--ochre-2);
}
#game-score.score-up{color:var(--turq-5);background:var(--teal-1);transform:scale(1.08)}
#game-score.score-down{color:var(--red-4);background:var(--red-1);transform:scale(1.08)}
#game-best.beating{
  color:var(--turq-5);
  background:var(--teal-1);
  border-color:var(--teal-2);
  animation:bestPulse 1s ease-in-out infinite;
}

/* difficulty indicator — filled dots (1-4) */
.game-diff{
  display:inline-flex;
  gap:3px;
  align-items:center;
  padding:4px 8px;
}
.game-diff .diff-pip{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--grey-3);
}
.game-diff .diff-pip.on{
  background:var(--teal-5);
}
@keyframes bestPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.1)}
}

/* tile dimensions are set by JS via custom properties */
:root{
  --tile-w:140px;
  --tile-h:64px;
  --tile-radius:10px;
  --tile-fs-front:18px;
  --tile-fs-back:11px;
  --tile-fs-locked-front:14px;
  --tile-fs-locked-back:9px;
}

.game-body{
  position:relative;
  width:100%;
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
}

#game-board{
  display:block;
}

/* Tile overlay layer sits exactly on top of the canvas */
.tile-layer{
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;  /* pass clicks through to tiles only */
}

/* tile — domino-style with drop shadow for depth */
.tile{
  position:absolute;
  pointer-events:auto;
  width:var(--tile-w);
  height:var(--tile-h);
  background:linear-gradient(135deg,#ffffff 0%, #faf8f2 50%, #f0ece0 100%);
  border:1px solid #d8d0b8;
  border-bottom:2.5px solid #b8b09a;
  border-right:2.5px solid #b8b09a;
  border-radius:var(--tile-radius);
  cursor:grab;
  user-select:none;
  font-family:var(--font-ui);
  font-weight:700;
  color:var(--grey-7);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:
    3px 3px 0 rgba(155,144,120,0.50),
    5px 5px 8px rgba(50,42,42,0.20),
    8px 8px 18px rgba(50,42,42,0.10);
  transition:box-shadow .12s ease, background .2s ease;
}
.tile:hover{z-index:5}
.tile:active{cursor:grabbing}

.tile.selected{z-index:100}
.tile.carrying{
  z-index:200;
  cursor:grabbing;
  box-shadow:
    4px 4px 0 rgba(155,144,120,0.40),
    8px 8px 14px rgba(50,42,42,0.25),
    14px 14px 30px rgba(50,42,42,0.12);
}

body.has-selection{cursor:grabbing}
body.has-selection .tile-layer{cursor:grabbing}

/* faces (flip) */
.tile-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.tile-face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  text-align:center;
  line-height:1.12;
  word-break:normal;
  overflow-wrap:normal;
}
.tile-front{
  font-size:var(--tile-fs-front);
  font-weight:700;
  color:var(--grey-7);
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:none;
  -webkit-hyphens:none;
}
.tile-back{
  font-size:var(--tile-fs-back);
  font-weight:400;
  color:var(--grey-5);
  display:none;
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.tile.flipped .tile-front{display:none}
.tile.flipped .tile-back{display:flex}
.tile.flipped{
  background:linear-gradient(180deg,#fffbe6 0%, #fff4c0 100%);
}

/* tile in slot — reduced shadow, seated in depression */
.tile.in-slot{
  z-index:10;
  cursor:grab;
  box-shadow:
    1px 1px 0 rgba(155,144,120,0.35),
    2px 2px 4px rgba(50,42,42,0.15);
}

/* loose tiles float above slotted tiles */
.tile:not(.in-slot):not(.carrying){
  z-index:20;
}

/* locked tile — matched, pale green, seated */
.tile.locked{
  background:linear-gradient(135deg,#e7f7e4 0%, #cee9c8 40%, #b8d9b0 100%);
  border-color:#a8cda0;
  border-bottom-color:#8cb884;
  border-right-color:#8cb884;
  cursor:default;
  z-index:11;
  box-shadow:
    1px 1px 0 rgba(100,160,80,0.30),
    2px 2px 4px rgba(60,100,50,0.15);
}
/* locked: front on top, back on bottom, stacked vertically */
.tile.locked .tile-inner{
  flex-direction:column;
  align-items:stretch;
}
.tile.locked .tile-face{
  position:relative;
  inset:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:4px 14px;
  text-align:center;
  word-break:normal;
  overflow-wrap:normal;
  line-height:1.1;
}
.tile.locked .tile-front{
  flex:0 0 var(--tile-locked-front-h, 38%);
  border-bottom:1px solid rgba(100,160,80,0.30);
  font-size:var(--tile-fs-locked-front);
  font-weight:700;
  color:var(--grey-7);
  padding:4px 14px 5px;
  white-space:normal;
  hyphens:none;
  -webkit-hyphens:none;
}
.tile.locked .tile-back{
  display:flex;
  flex:1 1 auto;
  font-size:var(--tile-fs-locked-back);
  color:var(--grey-5);
  padding:4px 14px;
  overflow:hidden;
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* ---- share popup ---- */
.share-popup{
  position:fixed;inset:0;
  background:rgba(19,16,16,.4);
  display:flex;align-items:center;justify-content:center;
  z-index:55;
  animation:fadeIn .15s ease;
}
.share-popup-inner{
  background:var(--bg-2);
  padding:24px 28px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(19,16,16,.3);
  max-width:460px;
  width:90vw;
  text-align:center;
}
.share-title{
  font-family:var(--font-ui);
  font-weight:700;
  font-size:1.1rem;
  color:var(--grey-6);
  margin:0 0 12px;
}
.share-url{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--grey-2);
  border-radius:6px;
  background:var(--grey-1);
  font-family:var(--font-condensed);
  font-size:0.85rem;
  color:var(--grey-6);
  text-align:left;
  resize:none;
  line-height:1.4;
}
.share-actions{
  display:flex;gap:8px;justify-content:center;margin-top:12px;
}

/* ---- ghost timer bar ---- */
.ghost-bar{
  padding:0 24px;
  margin-bottom:6px;
}
.ghost-track{
  position:relative;
  height:8px;
  background:var(--grey-1);
  border-radius:4px;
  overflow:hidden;
}
/* ghost best — faint marker line */
.ghost-best{
  position:absolute;
  top:0;bottom:0;
  width:3px;
  background:var(--grey-3);
  border-radius:2px;
  transition:left .3s ease;
  z-index:2;
}
/* current run — fills from left */
.ghost-now{
  position:absolute;
  top:0;bottom:0;left:0;
  border-radius:4px;
  transition:width .25s linear, background-color .5s ease;
  z-index:1;
}
.ghost-now.ahead{background:var(--teal-3)}
.ghost-now.behind{background:var(--ochre-3)}
.ghost-now.no-best{background:var(--grey-3)}
.ghost-labels{
  display:flex;
  justify-content:space-between;
  margin-top:3px;
  font-family:var(--font-condensed);
  font-size:0.72rem;
  color:var(--grey-4);
}
.ghost-best-label{
  font-style:italic;
}

/* small screen: let the board canvas shrink */
@media (max-width:400px){
  .game-body{min-height:auto}
}

/* ---- win banner / confetti / post-win bar ---- */
.win-banner{
  position:fixed;inset:0;
  background:rgba(19,16,16,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:50;cursor:default;
  animation:fadeIn .25s ease;
  font-family:var(--font-ui);
}
.win-inner{
  background:var(--bg-2);
  padding:36px 52px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 14px 44px rgba(19,16,16,.4);
  cursor:default;
  max-width:90vw;
  animation:popIn .35s cubic-bezier(.2,1.2,.4,1);
  font-family:var(--font-ui);
}
.win-inner h2{
  font-family:var(--font-ui);
  font-weight:700;
  font-size:2.4rem;
  color:var(--blue-6);
  margin:0 0 12px;
  letter-spacing:.5px;
}
.win-inner p{
  margin:8px 0;
  font-family:var(--font-ui);
  color:var(--grey-6);
  font-size:1rem;
}
.win-actions{
  display:flex;gap:12px;
  justify-content:center;
  margin:22px 0 6px;
  flex-wrap:wrap;
}
.win-brag-msg{
  font-style:italic;
  font-size:.78rem;
  color:var(--grey-5);
  margin-top:14px;
  font-family:var(--font-condensed);
  line-height:1.35;
  padding:8px 12px;
  background:var(--grey-1);
  border-radius:8px;
  word-break:break-word;
  overflow-wrap:break-word;
  white-space:pre-wrap;
  user-select:all;
  max-width:340px;
  margin-left:auto;margin-right:auto;
}

/* ── share globally modal ── */
.share-modal{
  position:fixed;inset:0;
  background:rgba(19,16,16,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:50;
  animation:fadeIn .25s ease;
}
.share-modal-inner{
  background:var(--bg-2);
  padding:32px 40px;
  border-radius:18px;
  box-shadow:0 14px 44px rgba(19,16,16,.4);
  max-width:480px;
  width:90vw;
  animation:popIn .35s cubic-bezier(.2,1.2,.4,1);
  font-family:var(--font-ui);
}
.share-modal-inner h2{
  font-size:1.3rem;font-weight:700;margin:0 0 12px;color:var(--blue-6);
}
.share-modal-inner p{margin:8px 0;font-size:.9rem;color:var(--grey-6)}
.share-modal-notes{
  margin:8px 0 16px;padding-left:20px;
  font-size:.85rem;color:var(--grey-5);line-height:1.5;
}
.share-modal-notes li{margin-bottom:6px}
.share-modal-notes a{color:var(--blue-4)}
.share-modal-actions{
  display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;
}
.share-modal-status{
  margin-top:12px;padding:8px 12px;border-radius:8px;font-size:.85rem;
}
.share-modal-status.share-ok{background:var(--teal-1);color:var(--teal-6)}
.share-modal-status.share-err{background:var(--red-1);color:var(--red-5)}

/* ── admin review queue ── */
.admin-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:2px solid var(--grey-2);padding-bottom:10px}
.admin-tab.on{background:var(--blue-4);color:#fff}
.admin-panel.hidden{display:none}
.admin-filters{display:flex;gap:8px;margin-bottom:16px}
.admin-filter.on{background:var(--blue-4);color:#fff}
.admin-card{
  background:var(--bg-2);border-radius:12px;padding:16px 20px;
  margin-bottom:12px;box-shadow:0 2px 8px rgba(19,16,16,.1);
}
.admin-card h3{margin:0 0 4px;font-size:1.1rem;color:var(--ink)}
.admin-preview{
  font-family:var(--font-condensed);font-size:.85rem;
  color:var(--grey-5);margin:6px 0;
}
.admin-topic-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.admin-topic-card.topic-hidden{opacity:.55}
.admin-actions{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.admin-note{
  flex:1;min-width:140px;padding:6px 10px;border:1px solid var(--grey-3);
  border-radius:6px;font-size:.85rem;font-family:var(--font-ui);
}
.admin-items{margin-top:8px;font-size:.85rem}
.admin-items summary{cursor:pointer;color:var(--blue-4);font-family:var(--font-condensed)}
.admin-items-table{
  width:100%;border-collapse:collapse;margin-top:6px;font-size:.8rem;
  font-family:var(--font-condensed);
}
.admin-items-table th{text-align:left;padding:4px 8px;border-bottom:2px solid var(--grey-3);color:var(--grey-5)}
.admin-items-table td{padding:3px 8px;border-bottom:1px solid var(--grey-2)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

#confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti-piece{
  position:absolute;
  top:-12px;
  width:8px;height:14px;
  border-radius:2px;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:.9}
}

.star-piece{
  position:absolute;
  left:50%;top:50%;
  font-size:32px;
  pointer-events:none;
  text-shadow:0 0 12px rgba(255,210,80,.8);
  animation:starBurst forwards cubic-bezier(.18,.7,.25,1);
}
@keyframes starBurst{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(0deg);opacity:0}
  15%{opacity:1}
  100%{
    transform:
      translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      scale(1.3) rotate(360deg);
    opacity:0;
  }
}

.post-win-bar{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;gap:10px;
  background:var(--bg-2);
  padding:10px 14px;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(19,16,16,.28);
  border:1px solid var(--grey-1);
  z-index:30;
  font-family:var(--font-ui);
}

/* ---- topics list ---- */
.topic-list{list-style:none;padding:0;margin:18px 0}
.topic-list li{background:var(--bg-2);padding:10px 14px;border-radius:8px;
  margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;
  transition:opacity .2s}
.topic-list li.topic-off{opacity:.55}
.topic-list .meta{color:var(--muted);font-size:.85rem;margin-left:10px}
.topic-actions{display:flex;gap:6px;align-items:center}
.topic-toggle{
  background:var(--ok);
  color:#fff;
  border:1px solid #2f6a38;
}
.topic-toggle:hover{background:#2f6a38}
.topic-toggle.off{
  background:transparent;
  color:var(--muted);
  border:1px dashed var(--tile-border);
}
.topic-toggle.off:hover{background:var(--tile)}

.topic-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

.import-panel{
  margin:14px 0;
  padding:14px;
  background:var(--bg-2);
  border:1px solid var(--tile-border);
  border-radius:10px;
}
.import-panel textarea{
  width:100%;
  font-family:ui-monospace,Consolas,monospace;
  font-size:.85rem;
  padding:8px;
  border:1px solid var(--tile-border);
  border-radius:6px;
  background:var(--tile);
  color:var(--ink);
}
.import-actions{display:flex;gap:10px;margin-top:10px}
.import-example{margin-top:12px}
.import-example summary{cursor:pointer;color:var(--accent-2);font-weight:600}
.import-example pre{
  background:var(--tile);
  border:1px solid var(--tile-border);
  border-radius:6px;
  padding:10px;
  font-size:.8rem;
  overflow-x:auto;
  margin-top:8px;
}

/* ---- editor ---- */
.editor-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.editor-header h2{flex:1;text-align:center;margin:0}
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-weight:600;margin-bottom:4px}
.field input,.field select,#ed-items{
  width:100%;padding:8px;border:1px solid var(--tile-border);
  border-radius:6px;background:var(--tile);font:inherit;color:var(--ink)}
#ed-items{font-family:ui-monospace,Consolas,monospace;font-size:.9rem}
.items-help{margin-bottom:6px}
.items-help code{background:var(--bg-2);padding:1px 5px;border-radius:4px}

/* ---- config / settings ---- */
.config-section{
  margin-bottom:24px;
  padding:16px 20px;
  background:var(--bg-2);
  border:1px solid var(--grey-1);
  border-radius:12px;
}
.config-section h3{
  font-family:var(--font-ui);
  font-weight:700;
  font-size:1rem;
  color:var(--grey-6);
  margin:0 0 12px;
}
.config-row{
  margin-bottom:14px;
}
.config-row:last-child{margin-bottom:0}
.config-label{
  display:block;
  font-family:var(--font-condensed);
  font-weight:600;
  font-size:0.85rem;
  color:var(--grey-5);
  margin-bottom:6px;
}
.config-input-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.config-input{
  flex:1;
  padding:7px 10px;
  border:1px solid var(--grey-2);
  border-radius:6px;
  background:var(--bg);
  font-family:var(--font-ui);
  font-size:0.9rem;
  color:var(--grey-7);
}
.config-avatar-input{flex:0 0 60px;text-align:center;font-size:1.4rem}
.config-avatar-preview{font-size:2rem;line-height:1}
.config-error{
  color:var(--red-4);
  font-size:0.8rem;
  margin-top:4px;
}

.config-toggle-row{
  display:flex;
  gap:0;
  border:1px solid var(--grey-2);
  border-radius:8px;
  overflow:hidden;
}
.config-toggle{
  flex:1;
  padding:6px 14px;
  background:var(--bg);
  border:none;
  font-family:var(--font-condensed);
  font-weight:600;
  font-size:0.85rem;
  color:var(--grey-5);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.config-toggle:not(:last-child){border-right:1px solid var(--grey-2)}
.config-toggle.on{
  background:var(--teal-3);
  color:#fff;
}
.config-toggle:hover:not(.on){background:var(--grey-1)}

.config-swatches{
  display:flex;
  gap:8px;
}
.swatch{
  width:32px;height:32px;
  border-radius:50%;
  border:3px solid transparent;
  cursor:pointer;
  transition:border-color .15s, transform .1s;
}
.swatch:hover{transform:scale(1.1)}
.swatch.on{border-color:var(--grey-7)}

.danger-text{color:var(--red-4) !important;border-color:var(--red-1) !important}
.danger-text:hover{background:var(--red-1) !important}

/* ---- leaderboard / scores ---- */
.lb-tabs{
  display:flex;
  gap:0;
  border:1px solid var(--grey-2);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:16px;
}
.lb-tab{
  flex:1;
  padding:8px 16px;
  background:var(--bg);
  border:none;
  font-family:var(--font-condensed);
  font-weight:600;
  font-size:0.9rem;
  color:var(--grey-5);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.lb-tab:not(:last-child){border-right:1px solid var(--grey-2)}
.lb-tab.on{
  background:var(--teal-3);
  color:#fff;
}
.lb-tab:hover:not(.on){background:var(--grey-1)}

.lb-topic-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.lb-topic-bar select{
  flex:1;
  max-width:300px;
}

.lb-panel{margin-bottom:16px}

.lb-scroll{
  max-height:60vh;
  overflow-y:auto;
  border:1px solid var(--grey-1);
  border-radius:8px;
}

.lb-table{
  width:100%;
  border-collapse:collapse;
}
.lb-table th,.lb-table td{
  text-align:left;
  padding:8px 12px;
  border-bottom:1px solid var(--grey-1);
  font-family:var(--font-condensed);
  font-size:0.88rem;
}
.lb-table th{
  background:var(--bg-2);
  font-weight:700;
  color:var(--grey-6);
  position:sticky;
  top:0;
  z-index:1;
}
.lb-rank{width:40px;text-align:center}
.lb-table td:first-child{text-align:center;font-weight:700;color:var(--grey-4)}

/* highlight the local player's row */
.lb-row-me{
  background:var(--teal-1) !important;
  font-weight:700;
}
.lb-row-me td{color:var(--teal-6) !important}

/* rank badges */
.lb-gold{color:#d4a017 !important}
.lb-silver{color:#9b9090 !important}
.lb-bronze{color:#b87333 !important}

/* personal bests */
#pb-table th{background:var(--bg-2)}

/* dark mode */
[data-theme="dark"] .lb-tab{background:var(--bg);color:var(--grey-3)}
[data-theme="dark"] .lb-tab:not(:last-child){border-right-color:var(--grey-5)}
[data-theme="dark"] .lb-tab.on{background:var(--teal-6);color:#fff}
[data-theme="dark"] .lb-scroll{border-color:var(--grey-6)}
[data-theme="dark"] .lb-table th{background:var(--bg-2);color:var(--grey-2)}
[data-theme="dark"] .lb-table td{border-bottom-color:var(--grey-6);color:var(--grey-2)}
[data-theme="dark"] .lb-row-me{background:var(--teal-7) !important}
[data-theme="dark"] .lb-row-me td{color:var(--teal-2) !important}
[data-theme="dark"] #pb-table th{background:var(--bg-2)}

/* ================================================================
   DARK MODE — override semantic tokens + component-specific colours
   Activated via [data-theme="dark"] on <html> (set by config.js)
   ================================================================ */
[data-theme="dark"]{
  /* semantic overrides */
  --bg:#1a1a18;
  --bg-2:#242420;
  --ink:#e2e0dc;
  --muted:#9b9090;
  --tile:#2c2c28;
  --tile-locked:#1e3328;
  --tile-border:#3a3830;
  --accent:var(--blue-3);
  --accent-2:var(--blue-2);
  --ok:var(--teal-3);
  --danger:var(--red-3);

  /* nav */
  --nav-bg:#0f1418;
  --nav-ink:#d8d4cc;

  /* slider */
  --slider-ink:#9b9090;
}

/* sidebar */
[data-theme="dark"] .sidebar{
  background:var(--nav-bg);
  box-shadow:2px 0 10px rgba(0,0,0,.5);
}

/* page surfaces */
[data-theme="dark"] .view{color:var(--ink)}

/* buttons */
[data-theme="dark"] .navbtn{
  border-color:var(--grey-5);
  color:var(--grey-2);
}
[data-theme="dark"] .navbtn:hover{background:var(--grey-6)}
[data-theme="dark"] .bigbtn{
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* wheel canvas — board.js reads --bg so it picks up the dark bg automatically */

/* game header */
[data-theme="dark"] .game-title{color:var(--teal-2)}
[data-theme="dark"] .game-stats{color:var(--grey-3)}
[data-theme="dark"] .stat-pill{
  background:var(--grey-6);
  border-color:var(--grey-5);
  color:var(--grey-2);
}
[data-theme="dark"] .stat-best{
  background:#3a2e18;
  border-color:#5a4828;
}
[data-theme="dark"] #game-score.score-up{
  background:var(--teal-7);
  color:var(--teal-2);
}
[data-theme="dark"] #game-score.score-down{
  background:var(--red-7);
  color:var(--red-2);
}

/* ghost bar */
[data-theme="dark"] .ghost-track{background:var(--grey-6)}
[data-theme="dark"] .ghost-best{background:var(--grey-4)}
[data-theme="dark"] .ghost-labels{color:var(--grey-4)}

/* tiles */
[data-theme="dark"] .tile{
  background:linear-gradient(135deg,#3a3a34 0%, #32322c 50%, #2a2a24 100%);
  border-color:#4a4840;
  border-bottom-color:#222018;
  border-right-color:#222018;
  color:var(--grey-1);
  box-shadow:
    3px 3px 0 rgba(0,0,0,0.5),
    5px 5px 8px rgba(0,0,0,0.3),
    8px 8px 18px rgba(0,0,0,0.15);
}
[data-theme="dark"] .tile.carrying{
  box-shadow:
    4px 4px 0 rgba(0,0,0,0.45),
    8px 8px 14px rgba(0,0,0,0.35),
    14px 14px 30px rgba(0,0,0,0.2);
}
[data-theme="dark"] .tile.in-slot{
  box-shadow:
    1px 1px 0 rgba(0,0,0,0.4),
    2px 2px 4px rgba(0,0,0,0.25);
}
[data-theme="dark"] .tile.locked{
  background:linear-gradient(135deg,#1e3328 0%, #1a2e24 50%, #162a20 100%);
  border-color:#2a5040;
  box-shadow:
    1px 1px 0 rgba(0,0,0,0.4),
    2px 2px 4px rgba(0,0,0,0.25);
}
[data-theme="dark"] .tile-front{color:var(--grey-1)}
[data-theme="dark"] .tile-back{color:var(--grey-3)}
[data-theme="dark"] .tile.flipped{
  background:linear-gradient(135deg,#3a3420 0%, #32301c 100%);
}
[data-theme="dark"] .tile.locked .tile-front{color:var(--teal-2)}
[data-theme="dark"] .tile.locked .tile-back{color:var(--teal-3)}
[data-theme="dark"] .tile.locked .tile-front{border-bottom-color:rgba(100,200,160,0.25)}

/* win banner */
[data-theme="dark"] .win-banner{background:rgba(0,0,0,.65)}
[data-theme="dark"] .win-inner{
  background:var(--bg-2);
  color:var(--ink);
  box-shadow:0 14px 44px rgba(0,0,0,.6);
}
[data-theme="dark"] .win-inner h2{color:var(--teal-2)}
[data-theme="dark"] .win-inner p{color:var(--grey-3)}
[data-theme="dark"] .win-brag-msg{
  background:var(--grey-6);
  color:var(--grey-2);
}
/* share modal */
[data-theme="dark"] .share-modal{background:rgba(0,0,0,.65)}
[data-theme="dark"] .share-modal-inner{background:var(--bg-2);box-shadow:0 14px 44px rgba(0,0,0,.6)}
[data-theme="dark"] .share-modal-inner h2{color:var(--teal-2)}
[data-theme="dark"] .share-modal-inner p{color:var(--grey-3)}
[data-theme="dark"] .share-modal-notes{color:var(--grey-4)}

/* share popup */
[data-theme="dark"] .share-popup-inner{
  background:var(--bg-2);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
[data-theme="dark"] .share-title{color:var(--grey-2)}
[data-theme="dark"] .share-url{
  background:var(--grey-6);
  border-color:var(--grey-5);
  color:var(--grey-2);
}

/* config settings page */
[data-theme="dark"] .config-section{
  background:var(--bg-2);
  border-color:var(--grey-6);
}
[data-theme="dark"] .config-section h3{color:var(--grey-2)}
[data-theme="dark"] .config-label{color:var(--grey-3)}
[data-theme="dark"] .config-input{
  background:var(--bg);
  border-color:var(--grey-5);
  color:var(--grey-1);
}
[data-theme="dark"] .config-toggle{
  background:var(--bg);
  color:var(--grey-3);
}
[data-theme="dark"] .config-toggle:not(:last-child){border-right-color:var(--grey-5)}
[data-theme="dark"] .config-toggle.on{
  background:var(--teal-6);
  color:#fff;
}
[data-theme="dark"] .swatch.on{border-color:var(--grey-1)}

/* topics list */
[data-theme="dark"] .topic-list li{
  background:var(--bg-2);
  border-bottom:1px solid var(--grey-6);
}
[data-theme="dark"] .topic-toggle{
  background:var(--teal-6);
  border-color:var(--teal-5);
}
[data-theme="dark"] .topic-toggle.off{
  background:transparent;
  color:var(--grey-4);
  border-color:var(--grey-5);
}

/* scores table */
[data-theme="dark"] #score-table th{background:var(--bg-2)}
[data-theme="dark"] #score-table th,
[data-theme="dark"] #score-table td{
  border-bottom-color:var(--grey-6);
  color:var(--grey-2);
}

/* editor */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] #ed-items{
  background:var(--bg);
  border-color:var(--grey-5);
  color:var(--grey-1);
}

/* import panel */
[data-theme="dark"] .import-panel{
  background:var(--bg-2);
  border-color:var(--grey-6);
}
[data-theme="dark"] .import-panel textarea{
  background:var(--bg);
  border-color:var(--grey-5);
  color:var(--grey-1);
}
[data-theme="dark"] .import-example pre{
  background:var(--bg);
  border-color:var(--grey-5);
  color:var(--grey-2);
}

/* ---- suggestion form ---- */
.suggest-form{max-width:560px}
.suggest-form .field{display:block;margin-bottom:14px}
.suggest-form .field span{display:block;font-weight:600;margin-bottom:4px;font-size:.9rem}
.suggest-form .field input,
.suggest-form .field textarea{
  width:100%;padding:8px 10px;border:1px solid var(--tile-border);
  border-radius:8px;font:inherit;font-size:.95rem;
  background:var(--bg-2);color:var(--ink);resize:vertical;
}
.suggest-form .field textarea{min-height:60px}
.suggest-status{margin-top:10px;font-size:.9rem;padding:8px 12px;border-radius:8px}
.suggest-ok{background:var(--teal-1);color:var(--turq-6)}
.suggest-error{background:var(--red-1);color:var(--red-5)}
.suggest-divider{border:none;border-top:1px solid var(--tile-border);margin:32px 0 24px}
.credits-placeholder{max-width:560px}
.policy-section{max-width:560px}
.policy-section p{line-height:1.6;margin-bottom:10px;font-size:.88rem;color:var(--muted)}
/* honeypot — invisible to humans */
.hp-field{position:absolute;left:-9999px;height:0;overflow:hidden}

/* ---- login panel ---- */
.login-panel{max-width:460px}
.login-panel p{line-height:1.5;margin-bottom:12px}
.login-state{}
.login-profile{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;
}
.login-avatar{
  width:48px;height:48px;border-radius:50%;
  border:2px solid var(--tile-border);
}
.login-name{font-weight:700;font-size:1.1rem;margin:0}
.login-profile .muted{margin:2px 0 0}

[data-theme="dark"] .suggest-form .field input,
[data-theme="dark"] .suggest-form .field textarea{
  background:var(--bg);border-color:var(--grey-5);color:var(--grey-1);
}

/* ============================================================
   MOBILE — bottom tab bar, burger menu during game
   ============================================================ */
@media (max-width:768px){
  body{padding-left:0;padding-bottom:40px}

  /* ── sidebar → narrow bottom tab bar ── */
  .sidebar{
    position:fixed;
    inset:auto 0 0 0;
    width:100%;height:40px;
    flex-direction:row;
    padding:0;
    gap:0;
    box-shadow:0 -1px 6px rgba(9,24,52,.2);
    justify-content:space-evenly;
    align-items:center;
  }
  .sidebar .sidebrand{
    margin-bottom:0;padding:0;
    flex-direction:column;gap:0;
  }
  .sidebar .brand .ficon,
  .sidebar .brand .brand-icon{width:18px;height:18px}
  .brand-text{display:none}
  .side-nav{
    flex-direction:row;gap:0;
    flex:none;
    display:contents; /* let children participate in parent's space-evenly */
  }
  .sidebtn{
    padding:4px;gap:0;
    font-size:0;       /* hide labels */
    line-height:0;
  }
  .sidebtn > span:not(.ficon){display:none} /* hide label text */
  .sidebtn .ficon{width:18px;height:18px}
  .login-btn{margin-top:0}
  .sidebar-privacy{display:none}

  /* ── hide sidebar during game, show burger ── */
  body.in-game .sidebar{display:none}
  body.in-game{padding-bottom:0}

  /* burger menu button — only visible on mobile during game */
  .burger-menu{display:none}
  body.in-game .burger-menu{
    display:flex;
    position:fixed;top:6px;left:6px;z-index:25;
    width:36px;height:36px;
    align-items:center;justify-content:center;
    background:var(--nav-bg);
    border:none;border-radius:8px;
    color:#fff;font-size:1.2rem;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(9,24,52,.3);
  }
  /* mobile nav drawer — slides in from left */
  .mobile-drawer{
    display:none;
    position:fixed;inset:0;z-index:30;
    background:rgba(0,0,0,.45);
  }
  .mobile-drawer.open{display:block}
  .mobile-drawer-panel{
    position:absolute;inset:0 auto 0 0;
    width:200px;
    background:var(--nav-bg);
    padding:18px 12px;
    display:flex;flex-direction:column;gap:6px;
    box-shadow:4px 0 20px rgba(0,0,0,.3);
  }
  .mobile-drawer .sidebtn{
    flex-direction:row;gap:8px;
    font-size:.85rem;padding:10px 8px;
    justify-content:flex-start;
  }
  .mobile-drawer .sidebtn .ficon{width:24px;height:24px}

  /* ── views ── */
  .view{padding:14px 10px}

  /* ── home — two stacked zones ── */
  .home-view{height:calc(100vh - 40px)} /* minus bottom nav */
  .home-view.active{display:flex}
  .home-stage{
    flex-direction:column;
    justify-content:center;
    padding:0;
    gap:0;
  }
  .wheel-wrap{
    width:96%;
    aspect-ratio:1/1;       /* stay square like the canvas */
    flex:0 1 auto;           /* can shrink but won't grow past square */
    max-height:100%;
    filter:drop-shadow(0 8px 18px rgba(19,16,16,.2));
  }
  #wheel{
    width:100%;
    height:100%;
  }
  .wheel-pointer{
    width:min(12vw, 50px);
    top:5px;                 /* 5px below wheel top edge */
    transform:translateX(-50%) translateY(-100%); /* shift up by own height so TIP lands at top:5px */
  }
  /* hide desktop vertical slider on mobile */
  .diff-slider-wrap.diff-vertical{display:none}

  /* zone 2: horizontal difficulty dots */
  .mobile-diff{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:12px 32px;
    flex-shrink:0;
  }
  body.in-game .mobile-diff{display:none}
  .mobile-diff-label{
    font-family:var(--font-condensed);
    font-size:.7rem;
    font-weight:600;
    color:var(--grey-4);
    text-transform:uppercase;
    letter-spacing:.5px;
    flex-shrink:0;
  }
  .mobile-diff-track{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:1;
    max-width:200px;
    height:24px;
  }
  /* connecting line behind dots */
  .mobile-diff-line{
    position:absolute;
    top:50%;left:0;right:0;
    height:3px;
    background:var(--grey-5);
    transform:translateY(-50%);
    border-radius:2px;
    pointer-events:none;
  }
  .mobile-diff-dot{
    position:relative;
    width:18px;height:18px;
    border-radius:50%;
    border:none;
    background:var(--grey-5);
    cursor:pointer;
    padding:0;
    transition:background .15s, transform .12s;
    z-index:1;
  }
  .mobile-diff-dot:hover{transform:scale(1.15)}
  .mobile-diff-dot.on{
    background:var(--blue-4);
    box-shadow:0 0 0 3px rgba(66,120,219,.25);
  }

  /* ── game view — full screen, no sidebar ── */
  .tile{touch-action:manipulation}  /* JS preventDefault handles drag vs scroll */
  .view#view-game.active{height:100vh}
  .game-header{
    padding:6px 10px 4px 48px; /* left room for burger */
    gap:4px;flex-wrap:wrap;
  }
  .game-title{font-size:.9rem;order:-1;width:100%;text-align:left}
  .game-header-left{gap:3px}
  .game-header-left .navbtn{padding:3px 7px;font-size:.75rem;margin-left:0}
  .game-stats{gap:4px}
  .stat-pill{padding:2px 6px;font-size:.72rem}

  /* ── topic list ── */
  .topic-list li{flex-direction:column;align-items:flex-start;gap:8px}
  .topic-actions{flex-wrap:wrap}

  /* ── win banner ── */
  .win-inner{padding:22px 18px;max-width:95vw}
  .win-inner h2{font-size:1.5rem}
  .win-actions{flex-direction:column;gap:8px}

  /* ── misc ── */
  .share-popup-inner{width:90vw;max-width:400px}
  .suggest-form,.login-panel,.credits-placeholder,
  .policy-section,.config-section{max-width:100%}
  .ghost-bar{margin:0 10px}
}

/* extra small phones */
@media (max-width:400px){
  .game-title{font-size:.8rem}
}