/* ============================================================
   Simple Games — app styles (dark-arcade, light/dark)
   Mobile-first column, centered as a device panel on desktop.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root, [data-theme="dark"] {
  --bg:#08090f; --bg-2:#0d0f1a;
  --surface:#14182a; --surface-2:#1c2238; --surface-3:#252c47;
  --border:rgba(255,255,255,0.09); --border-soft:rgba(255,255,255,0.05);
  --text:#eef0fa; --text-dim:#9aa1bd; --text-faint:#646b88;
  --primary:#7c5cff; --primary-bright:#9d83ff; --primary-glow:rgba(124,92,255,0.45);
  --lime:#b8ff34; --lime-ink:#0b1400; --cyan:#2ee6e6; --coral:#ff5d6c; --amber:#ffb13c;
  --shadow:0 18px 50px rgba(0,0,0,0.55); --shadow-sm:0 8px 22px rgba(0,0,0,0.4);
  --app-bg:#0a0c15;
}
[data-theme="light"] {
  --bg:#e7eaf4; --bg-2:#dde1ef;
  --surface:#ffffff; --surface-2:#f4f5fc; --surface-3:#e9ebf7;
  --border:rgba(20,24,48,0.12); --border-soft:rgba(20,24,48,0.06);
  --text:#141831; --text-dim:#545b78; --text-faint:#8b91ab;
  --primary:#6a45ff; --primary-bright:#5733e8; --primary-glow:rgba(106,69,255,0.26);
  --lime:#52ae00; --lime-ink:#ffffff; --cyan:#0bb5b5; --coral:#e23a4c; --amber:#d07f0e;
  --shadow:0 18px 44px rgba(40,44,80,0.16); --shadow-sm:0 8px 20px rgba(40,44,80,0.1);
  --app-bg:#f7f8fd;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; }
body {
  background:var(--bg);
  background-image: radial-gradient(700px 500px at 80% -5%, var(--primary-glow), transparent 60%),
                    radial-gradient(600px 460px at 0% 105%, color-mix(in srgb,var(--cyan) 22%, transparent), transparent 60%);
  color:var(--text);
  font-family:"Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center;
}
.mono { font-family:"JetBrains Mono", monospace; }
h1,h2,h3,h4 { margin:0; line-height:1.1; letter-spacing:-0.01em; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---- App column ---- */
.app {
  width:100%; max-width:480px; height:100dvh;
  background:var(--app-bg);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:background .35s ease;
}
@media (min-width:520px) {
  body { padding:22px 0; align-items:center; }
  .app { min-height:auto; height:calc(100dvh - 44px); border-radius:34px;
    box-shadow:var(--shadow), inset 0 0 0 1px var(--border-soft); }
}

/* ---- Scroll view ---- */
.view { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.view::-webkit-scrollbar { width:0; }
.pad { padding:0 30px; }
.safe-bottom { height:calc(78px + env(safe-area-inset-bottom)); }

/* ---- Top app header ---- */
.appbar { display:flex; align-items:center; justify-content:space-between; padding:16px 30px 8px; flex:none; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; }
.brand-mark { width:30px; height:30px; border-radius:9px; background:linear-gradient(140deg,var(--primary),var(--cyan));
  display:grid; place-items:center; box-shadow:0 0 18px var(--primary-glow); flex:none; }
.brand-mark::before { content:""; width:11px; height:11px; border-radius:3px; background:var(--app-bg); transform:rotate(45deg); }
.icon-btn { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface);
  border:1px solid var(--border); color:var(--text); font-size:18px; transition:.18s; }
.icon-btn:active { transform:scale(.92); }
.appbar-actions { display:flex; gap:9px; }

/* ---- Search ---- */
.search { display:flex; align-items:center; gap:9px; margin:6px 30px 10px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:15px; padding:13px 15px; }
.search input { flex:1; background:none; border:none; outline:none; color:var(--text); font-size:15px; font-family:inherit; }
.search input::placeholder { color:var(--text-faint); }
.search svg { flex:none; color:var(--text-faint); }

/* ---- Section labels ---- */
.sec-label { display:flex; align-items:baseline; justify-content:space-between; margin:22px 0 12px; }
.sec-label h3 { font-size:17px; font-weight:700; }
.sec-label .meta { font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--primary-bright); font-weight:700; letter-spacing:.06em; }

/* ---- Continue row ---- */
.hrow { display:flex; gap:12px; overflow-x:auto; padding:2px 30px 4px; scroll-snap-type:x mandatory; scroll-padding-inline:30px; }
.hrow::-webkit-scrollbar { height:0; }
.cont-card { flex:none; width:140px; border-radius:16px; overflow:hidden; background:var(--surface); border:1px solid var(--border);
  scroll-snap-align:start; transition:.18s; }
.cont-card:active { transform:scale(.97); }
.cont-thumb { height:80px; display:grid; place-items:center; font-size:34px; position:relative; }
.cont-card .cc-meta { padding:10px 11px; }
.cont-card .cc-meta b { font-size:13.5px; display:block; }
.cont-card .cc-meta span { font-size:11px; color:var(--text-faint); font-family:"JetBrains Mono",monospace; }

/* ---- Feature card ---- */
.feature { margin:4px 30px; border-radius:20px; padding:20px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 75%, #000), color-mix(in srgb,var(--cyan) 50%, #000)); }
.feature .ftag { font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700; letter-spacing:.16em; opacity:.9; }
.feature h4 { font-size:23px; margin:7px 0 5px; }
.feature p { font-size:13px; margin:0 0 16px; opacity:.92; }
.feature .play-pill { display:inline-flex; align-items:center; gap:7px; background:var(--lime); color:var(--lime-ink);
  font-weight:700; font-size:14px; padding:10px 18px; border-radius:999px; }

/* ---- Category chips ---- */
.chips { display:flex; gap:8px; overflow-x:auto; padding:4px 30px; scroll-padding-inline:30px; }
.chips::-webkit-scrollbar { height:0; }
.chip { flex:none; font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:999px; background:var(--surface);
  border:1px solid var(--border); color:var(--text-dim); transition:.18s; }
.chip.on { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 0 18px var(--primary-glow); }
.chip:active { transform:scale(.95); }

/* ---- Game grid ---- */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:0 30px; }
.tile { border-radius:18px; overflow:hidden; background:var(--surface); border:1px solid var(--border); transition:.18s; }
.tile:active { transform:scale(.96); }
.tile .thumb { height:104px; display:grid; place-items:center; position:relative; }
.tile .thumb .glyph { font-size:42px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.tile .tag { position:absolute; top:9px; left:9px; font-family:"JetBrains Mono",monospace; font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:999px; background:rgba(0,0,0,.42);
  color:#fff; backdrop-filter:blur(4px); }
.tile .t-meta { padding:11px 12px 13px; }
.tile .t-meta b { font-size:15px; display:block; }
.tile .t-meta span { font-size:11px; color:var(--text-faint); font-family:"JetBrains Mono",monospace; }

/* gradient helpers (thumbs / icons) */
.g-violet{background:linear-gradient(140deg,#7c5cff,#b14bff);}
.g-cyan{background:linear-gradient(140deg,#1f9fff,#2ee6e6);}
.g-lime{background:linear-gradient(140deg,#5fbf00,#b8ff34);}
.g-coral{background:linear-gradient(140deg,#ff5d6c,#ff9f43);}
.g-amber{background:linear-gradient(140deg,#ffb13c,#ff7a3c);}
.g-pink{background:linear-gradient(140deg,#ff4fa3,#a44bff);}
.g-grape{background:linear-gradient(140deg,#9d50ff,#5667ff);}

/* ---- Tab bar ---- */
.tabbar { flex:none; display:flex; justify-content:space-around; align-items:center;
  padding:10px 6px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--app-bg) 88%, transparent); backdrop-filter:blur(12px); }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-faint); font-size:10px; font-weight:600;
  padding:4px 14px; transition:.15s; }
.tab svg { width:23px; height:23px; }
.tab.on { color:var(--primary-bright); }
.tab:active { transform:translateY(1px); }

/* ============================================================
   GAME HOST
   ============================================================ */
.gamehost { position:absolute; inset:0; background:var(--app-bg); display:flex; flex-direction:column; z-index:40;
  animation:slideUp .28s cubic-bezier(.2,.7,.3,1); }
@keyframes slideUp { from{ transform:translateY(16px); } to{ transform:none; } }
.gamebar { flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px max(30px, env(safe-area-inset-right)) 10px max(30px, env(safe-area-inset-left)); }
.gamebar .gname { font-weight:700; font-size:17px; }
.gamebar .gright { display:flex; gap:9px; }
.gamebar .ib { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--surface);
  border:1px solid var(--border); color:var(--text); font-size:17px; transition:.16s; }
.gamebar .ib:active { transform:scale(.9); }
.gamebar .ib.restart { color:var(--primary-bright); }

.gamebody { flex:1; display:flex; flex-direction:column; overflow:hidden;
  padding:0 max(30px, env(safe-area-inset-right)) 0 max(30px, env(safe-area-inset-left)); }

/* stat pills */
.pills { display:flex; gap:10px; padding:6px 0 4px; flex:none; }
.pill { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 13px; }
.pill .pl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); }
.pill .pv { font-family:"JetBrains Mono",monospace; font-size:24px; font-weight:700; line-height:1.1; }
.pill.alert .pv { color:var(--coral); }
.pill.alert { border-color:color-mix(in srgb,var(--coral) 55%, var(--border));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--coral) 35%, transparent), 0 0 20px color-mix(in srgb,var(--coral) 26%, transparent); }
.pill.good .pv { color:var(--lime); }

/* generic timer bar */
.tbar { height:7px; border-radius:4px; background:var(--surface-3); overflow:hidden; margin:8px 0 2px; flex:none; }
.tbar i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--lime),var(--cyan)); transition:width 1s linear, background .3s; }
.tbar.low i { background:linear-gradient(90deg,var(--coral),var(--amber)); }

/* board area centering */
.board-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; padding:8px 0; }
.bottom-actions { flex:none; display:flex; gap:11px; padding:10px 0 calc(14px + env(safe-area-inset-bottom)); }
.btn { flex:1; height:54px; border-radius:16px; display:grid; place-items:center; font-weight:700; font-size:15px;
  background:var(--surface); border:1px solid var(--border); color:var(--text); transition:.16s; }
.btn:active { transform:scale(.97); }
.btn.primary { background:var(--lime); color:var(--lime-ink); border-color:var(--lime); }
.btn.violet { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 0 20px var(--primary-glow); }
.hint-note { flex:none; text-align:center; font-size:12px; color:var(--text-faint); padding:4px 0; }
.status-note { flex:none; text-align:center; font-size:13px; color:var(--text-dim); min-height:20px; padding:2px 0; }

/* ---- Math keypad ---- */
.equation { text-align:center; padding:10px 0 2px; flex:none; }
.equation .eq { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:clamp(34px,9vw,46px); }
.equation .eq u { color:var(--primary-bright); text-decoration:none; border-bottom:3px solid var(--primary); padding:0 8px; }
.equation .eq.stacked { display:inline-grid; grid-template-columns:auto auto; column-gap:14px; text-align:right; line-height:1.15; }
.equation .eq.stacked .op { color:var(--primary-bright); text-align:left; }
.equation .eq.stacked .addend { border-bottom:3px solid var(--primary); padding-bottom:2px; }
.answer { margin:10px auto 4px; width:180px; height:clamp(54px,8vh,66px); border-radius:16px; background:var(--surface);
  border:2px solid var(--primary); display:grid; place-items:center; font-family:"JetBrains Mono",monospace;
  font-size:34px; font-weight:700; box-shadow:0 0 24px var(--primary-glow); transition:.12s; }
.answer.correct { border-color:var(--lime); color:var(--lime); box-shadow:0 0 28px color-mix(in srgb,var(--lime) 55%, transparent); }
.answer.wrong { border-color:var(--coral); color:var(--coral); animation:shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }
.streak { text-align:center; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--text-dim); margin-top:8px; }
.streak b { color:var(--amber); }
.keypad { margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:10px 0 calc(14px + env(safe-area-inset-bottom)); flex:none; }
.key { height:clamp(48px,7.6vh,62px); border-radius:16px; background:var(--surface); border:1px solid var(--border); display:grid; place-items:center;
  font-family:"JetBrains Mono",monospace; font-size:26px; font-weight:700; transition:.1s; }
.key:active { transform:scale(.93); background:var(--surface-2); }
.key.enter { background:var(--lime); color:var(--lime-ink); border-color:var(--lime); }
.key.del { color:var(--coral); }

/* ---- Scramble / square grids ---- */
.grid4 { width:min(100%, 56vh); aspect-ratio:1; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:9px; }
.sq { border-radius:15px; background:var(--surface); border:1px solid var(--border); display:grid; place-items:center;
  font-family:"JetBrains Mono",monospace; font-size:clamp(24px,7vw,32px); font-weight:700; transition:.12s; }
.sq:active { transform:scale(.95); }
.sq.empty { background:transparent; border-style:dashed; }
.sq.solved { background:color-mix(in srgb,var(--lime) 20%, var(--surface)); border-color:var(--lime); color:var(--lime); }
[data-theme="light"] .sq.solved { color:#3d7a00; }

/* ---- Traffic jam (vertical lane) ---- */
.lane { width:100%; max-width:300px; height:100%; max-height:480px; display:flex; flex-direction:column; gap:7px; justify-content:center; }
.lane-cell { flex:1 1 0; min-height:34px; max-height:54px; border-radius:13px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; border:1px solid var(--border); transition:.14s; position:relative; }
.lane-cell:active { transform:scale(.98); }
.lane-cell.teamA { background:linear-gradient(135deg,#43e97b,#1fb96a); color:#04210f; }
.lane-cell.teamB { background:linear-gradient(135deg,#ffb13c,#ff7a3c); color:#2a1400; }
.lane-cell.empty { background:transparent; border-style:dashed; color:var(--text-faint); font-size:12px; font-weight:600; }
.lane-cell .dir { font-size:12px; opacity:.7; }

/* ---- Bulls ---- */
.bulls-display { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:clamp(40px,12vw,60px); letter-spacing:.1em;
  text-align:center; padding:6px 0; flex:none; }
.bulls-display .ph { color:var(--text-faint); }
.bulls-display .filled { color:var(--primary-bright); }
.bulls-history { flex:1; overflow-y:auto; min-height:0; padding:4px 0; }
.bulls-history::-webkit-scrollbar { width:0; }
.guess-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border); margin-bottom:8px; }
.guess-row .gdigits { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:22px; letter-spacing:.18em; }
.guess-row .gbulls { display:flex; gap:5px; align-items:center; font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--text-dim); }
.bull-dot { width:13px; height:13px; border-radius:50%; background:var(--surface-3); }
.bull-dot.on { background:var(--lime); box-shadow:0 0 8px color-mix(in srgb,var(--lime) 55%, transparent); }
.empty-hint { text-align:center; color:var(--text-faint); font-size:13px; padding:30px 0; }

/* ---- Fill squares ---- */
.grid10 { width:min(100%, 56vh); aspect-ratio:1; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(10,1fr); gap:3px; }
.fs { border-radius:5px; background:var(--surface-2); display:grid; place-items:center; font-family:"JetBrains Mono",monospace;
  font-size:14px; font-weight:700; transition:.1s; }
.fs.closed { background:#0a0c15; border:1px solid var(--border-soft); }
[data-theme="light"] .fs.closed { background:#cfd3e6; }
.fs.filled { background:var(--primary); }
.fs.cursor { background:var(--cyan); box-shadow:0 0 10px color-mix(in srgb,var(--cyan) 60%, transparent); }
.fs.arrow { background:color-mix(in srgb,var(--lime) 26%, var(--surface-2)); color:var(--lime); border:1px solid var(--lime); }
[data-theme="light"] .fs.arrow { color:#3d7a00; }
.fs.arrow:active { transform:scale(.9); }
.fs.win { background:var(--lime); }

/* ---- Rubik ---- */
.rubik-net { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; max-width:360px; }
.rface { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:3px; padding:4px;
  border-radius:8px; background:var(--surface); border:1px solid var(--border); aspect-ratio:1; }
.rcell { border-radius:3px; }
.rcell.red{background:#ff4d4d;} .rcell.orange{background:#ff9f1c;} .rcell.yellow{background:#ffe600;}
.rcell.white{background:#f4f6ff;} .rcell.blue{background:#3a7bff;} .rcell.green{background:#37d67a;}
.rubik-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; max-width:360px; margin-top:14px; }
.rbtn { height:46px; border-radius:13px; background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-weight:700; font-size:13px; display:grid; place-items:center; }
.rbtn:active { transform:scale(.95); background:var(--surface-2); }

/* ---- Patterns ---- */
.pat-base { display:grid; gap:4px; width:150px; height:150px; margin:0 auto; }
.pat-cell { border-radius:6px; transition:.12s; }
.pat-cell:active { transform:scale(.9); }
.pat-result { display:grid; gap:1px; width:min(100%, 320px, 46vh); aspect-ratio:1; margin:14px auto 0; border-radius:10px; overflow:hidden; }
.pat-palette { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:12px 0; }
.pat-swatch { width:34px; height:34px; border-radius:9px; border:2px solid transparent; }
.pat-swatch.on { border-color:var(--text); transform:scale(1.08); }

/* ============================================================
   WIN SCREEN
   ============================================================ */
.win { position:absolute; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px max(22px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); overflow:hidden;
  background:color-mix(in srgb,var(--app-bg) 92%, transparent); backdrop-filter:blur(8px); animation:winIn .4s ease; }
@keyframes winIn { from{ transform:scale(.985); } to{ transform:none; } }
.win .burst { position:absolute; inset:0; background:radial-gradient(circle at 50% 32%, var(--primary-glow), transparent 60%); pointer-events:none; }
.win .trophy { width:92px; height:92px; border-radius:26px; display:grid; place-items:center; font-size:46px;
  background:linear-gradient(140deg,var(--amber),var(--coral)); box-shadow:0 14px 34px rgba(0,0,0,.4); position:relative; z-index:2;
  animation:pop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0%{transform:scale(.55) rotate(-10deg);} 100%{transform:none;} }
.win h2 { font-size:36px; margin:18px 0 5px; position:relative; z-index:2; }
.win .sub { font-size:14px; color:var(--text-dim); position:relative; z-index:2; }
.record-badge { margin-top:14px; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:7px 15px; border-radius:999px; background:color-mix(in srgb,var(--lime) 20%, transparent);
  color:var(--lime); position:relative; z-index:2; }
[data-theme="light"] .record-badge { color:#3d7a00; }
.win-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; width:100%; max-width:340px; margin:24px 0; position:relative; z-index:2; }
.win-stat { background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:15px 6px; }
.win-stat .wv { font-family:"JetBrains Mono",monospace; font-size:22px; font-weight:700; }
.win-stat .wl { font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
.win-btns { width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:2; }
.win-btns .row2 { display:flex; gap:10px; }
.confetti { position:absolute; width:9px; height:14px; border-radius:2px; z-index:1; will-change:transform; }

/* ---- How to play sheet ---- */
.sheet-scrim { position:absolute; inset:0; z-index:70; background:rgba(0,0,0,.55); display:flex; align-items:flex-end;
  animation:winIn .25s ease; }
.sheet { width:100%; background:var(--surface); border-radius:24px 24px 0 0; padding:10px 22px calc(26px + env(safe-area-inset-bottom));
  animation:sheetUp .3s cubic-bezier(.2,.7,.3,1); max-height:80%; overflow-y:auto; }
@keyframes sheetUp { from{transform:translateY(28px);} to{transform:none;} }
.sheet .grip { width:42px; height:5px; border-radius:3px; background:var(--border); margin:0 auto 16px; }
.sheet h3 { font-size:22px; margin-bottom:4px; display:flex; align-items:center; gap:10px; }
.sheet .htag { font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--primary-bright); letter-spacing:.1em; }
.sheet ol { margin:16px 0 6px; padding:0; list-style:none; counter-reset:step; }
.sheet li { position:relative; padding:11px 0 11px 42px; color:var(--text-dim); font-size:15px; border-top:1px solid var(--border-soft); counter-increment:step; }
.sheet li:first-child { border-top:none; }
.sheet li::before { content:counter(step); position:absolute; left:0; top:10px; width:28px; height:28px; border-radius:9px;
  background:var(--primary); color:#fff; display:grid; place-items:center; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:14px; }

/* ---- Scores / You pages ---- */
.page-title { font-size:27px; font-weight:700; padding:8px 0 4px; }
.best-card { display:flex; align-items:center; gap:15px; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:17px; margin-bottom:12px; }
.best-card .bi { width:50px; height:50px; border-radius:15px; display:grid; place-items:center; font-size:26px; flex:none; }
.best-card .bv { font-family:"JetBrains Mono",monospace; font-size:25px; font-weight:700; }
.best-card .bl { font-size:12px; color:var(--text-dim); }
.best-card .brank { text-align:right; }
.best-card .brank .rk { font-family:"JetBrains Mono",monospace; font-size:19px; font-weight:700; color:var(--amber); }
.best-card .brank .rl { font-family:"JetBrains Mono",monospace; font-size:9px; color:var(--text-faint); letter-spacing:.1em; }
.local-note { display:flex; gap:9px; align-items:center; font-size:12px; color:var(--text-faint); background:var(--surface);
  border:1px dashed var(--border); border-radius:13px; padding:11px 13px; margin-bottom:14px; }
.hist-row { display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--border-soft); font-size:14px; }
.hist-row .rank { font-family:"JetBrains Mono",monospace; color:var(--text-faint); width:26px; }
.hist-row .rank.top { color:var(--amber); }
.hist-row .when { flex:1; color:var(--text-dim); }
.hist-row .res { font-family:"JetBrains Mono",monospace; font-weight:700; }
.empty-state { text-align:center; padding:50px 20px; color:var(--text-faint); }
.empty-state .es-glyph { font-size:48px; margin-bottom:14px; opacity:.6; }

/* settings rows */
.set-row { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--border-soft); }
.set-row .sl { font-size:15px; font-weight:600; }
.set-row .sd { font-size:12.5px; color:var(--text-faint); margin-top:2px; }
.toggle { width:52px; height:30px; border-radius:999px; background:var(--surface-3); position:relative; transition:.2s; flex:none; }
.toggle.on { background:var(--primary); }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:.2s; }
.toggle.on::after { transform:translateX(22px); }

/* misc */
.no-results { text-align:center; color:var(--text-faint); padding:40px 0; font-size:14px; }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;} }