/* ===== Design tokens ===== */
:root {
  --bg: #f1f4ff; --bg-glow: #dbe3ff; --dot: #4f46e512;
  --text: #1e2150; --muted: #5b5f93; --faint: #9aa0cf;
  --surface: #ffffff; --surface-2: #eef1ff; --border: #d6dbf5; --edge: #c9d0f5; --frame: #c9d0f5;

  --indigo: #4f46e5; --indigo-d: #3730a3;
  --amber: #ffb020; --amber-d: #b87400; --on-amber: #1a1200; --amber-text: #b45309;
  --purple: #8b5cf6; --purple-d: #5b21b6; --purple-edge: #2e1065; --purple-ring: #c4b5fd;
  --teal: #0d9488; --teal-d: #115e59; --teal-edge: #042f2e; --teal-ring: #99f6e4;
  --rose: #e11d74; --rose-d: #9d174d;
  --live: #22c55e;

  --c-duel: #e11d74; --c-stages: #0d9488; --c-classic: #4f46e5;
  --hero-from: #ffffff; --hero-to: #eef1ff; --hero-shadow: 0 0 18px #ffb02022, 0 4px 0 #c9d0f5;
  --xp-fill: linear-gradient(90deg, #38bdf8, #3b82f6); --xp-glow: 0 0 12px #38bdf8, 0 0 4px #7dd3fc; --level-label: #0369a1;

  --cell-hi: #e0e5ff; --box-line: #3b3f8f; --user-digit: #4f46e5;
  --badge-bg: #e3e6fb; --badge-fg: #4f46e5;
  --sel-ring: #ffffff; --sel-grad: linear-gradient(160deg, #ffc94d, #ffb020);

  --road-edge: #c9d0f5; --road: #eef1ff; --road-done: #2dd4bf; --panel: #ffffff99;
  --locked-bg: #e9ecfb; --locked-border: #c3c9ee; --locked-ink: #6b70a8; --lock-badge: #6b70a8; --ring: #ffffff;
  --star-empty: #d6dbf5; --ghost: #1e215010;

  --f-display: 'Fredoka', 'Rubik', system-ui, sans-serif;
  --f-body: 'Rubik', system-ui, sans-serif;
  --focus: #4f46e5;
  color-scheme: light;
}
[data-theme='dark'] {
  --bg: #0e1128; --bg-glow: #2b3290; --dot: #ffffff0a;
  --text: #f1f2ff; --muted: #aab0e6; --faint: #6c72b8;
  --surface: #1a1f45; --surface-2: #232a6b; --border: #343a7a; --edge: #070918; --frame: #4b53b0;
  --amber-text: #ffb020;
  --c-duel: #ff8fab; --c-stages: #5eead4; --c-classic: #8b93ff; --rose: #ff8fab;
  --hero-from: #232a6b; --hero-to: #1a1f45; --hero-shadow: 0 0 22px #ffb0201a, 0 4px 0 #070918; --level-label: #7dd3fc;
  --cell-hi: #2c3375; --box-line: #8b93ff; --user-digit: #7dd3fc;
  --badge-bg: #232a6b; --badge-fg: #aab0e6; --sel-ring: #0e1128;
  --road-edge: #070918; --road: #232a6b; --panel: #1a1f4599;
  --locked-bg: #151a3c; --locked-border: #343a7a; --locked-ink: #7a81c9; --lock-badge: #4b53b0; --ring: #0e1128;
  --star-empty: #343a7a; --ghost: #f1f2ff10;
  --focus: #7dd3fc;
  color-scheme: dark;
}

/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--f-body); color: var(--text); background: color-mix(in srgb, var(--bg) 85%, #000); min-height: 100dvh; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
i[class^="ph"] { line-height: 1; }
.num { font-family: var(--f-display); }
.flag { width: 1.25em; line-height: 1em; border-radius: 3px; box-shadow: 0 0 0 1px #0000001a; vertical-align: -.12em; }
.flag.hidden { display: none; }

/* Pressable 3D element: lowers by --sy and swaps to --press-shadow */
.thick { transition: transform 80ms, box-shadow 80ms, background-color .2s, color .2s; }
.thick:active, .thick.is-pressed { transform: translateY(var(--sy, 3px)); box-shadow: var(--press-shadow, none); }

/* ===== App frame ===== */
.phone {
  position: relative; width: 100%; height: 100dvh; overflow: hidden; overflow: clip;  /* clip: nothing can scroll the frame itself */ color: var(--text);
  background: radial-gradient(var(--dot) 1.5px, transparent 1.6px) 0 0 / 22px 22px,
              radial-gradient(circle at 85% 8%, var(--bg-glow) 0, transparent 55%), var(--bg);
}
/* Desktop browser (mouse + wide window): keep the phone proportions, centered, instead of stretching */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  .phone { max-width: 480px; margin-inline: auto; box-shadow: 0 0 0 1px var(--border), 0 0 60px #0004; }
}
.screen {
  position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateX(-14px);
  transition: opacity .22s, transform .22s, visibility .22s;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active { opacity: 1; visibility: visible; transform: none; }

/* ===== Shared components ===== */
.pill, .circle {
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 3px 0 var(--edge); color: var(--text);
  --sy: 2px; --press-shadow: 0 1px 0 var(--edge);
}
.pill { height: 42px; border-radius: 21px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-weight: 800; font-size: 15px; }
.pill i { font-size: 20px; }
.circle { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex: none; }
.topbar { flex: none; display: flex; align-items: center; gap: 8px; height: 42px; }
.topbar .spacer { flex: 1; }
.btn {
  --c: var(--indigo); --cd: var(--indigo-d); --fg: #fff;
  height: 56px; border-radius: 20px; padding: 0 22px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--c); color: var(--fg); font: 700 20px var(--f-display);
  box-shadow: 0 4px 0 var(--cd); --press-shadow: 0 1px 0 var(--cd);
}
.btn.amber { --c: var(--amber); --cd: var(--amber-d); --fg: var(--on-amber); }
.btn.teal { --c: var(--teal); --cd: var(--teal-edge); }
.btn.rose { --c: var(--rose); --cd: var(--rose-d); }
[data-theme='dark'] .btn.rose { --fg: #2a0714; }
.btn.ghost { --c: var(--surface-2); --cd: var(--edge); --fg: var(--muted); font-size: 17px; }
.btn:disabled { background: var(--border); color: var(--muted); box-shadow: none; cursor: default; transform: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); display: inline-block; animation: ping 1.6s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 #22c55e99; } 70%, 100% { box-shadow: 0 0 0 7px #22c55e00; } }
.seg { flex: none; height: 48px; padding: 3px; display: flex; gap: 4px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 0 var(--edge); }
.seg button { flex: 1; border-radius: 14px; color: var(--muted); font: 600 15px var(--f-display); }
.seg button[aria-pressed="true"] { background: linear-gradient(160deg, var(--purple), var(--purple-d)); color: #fff; }
.switch { width: 46px; height: 28px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); position: relative; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0003; transition: right .15s; }
.switch[aria-checked="true"] { background: var(--indigo); border-color: var(--indigo); }
.switch[aria-checked="true"]::after { right: 21px; }
.toast {
  position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--text); color: var(--bg); font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 12px;
  opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 320px; text-align: center; white-space: nowrap;
}
.toast.show { opacity: 1; }

/* ===== Welcome ===== */
#welcome { padding: 20px; justify-content: center; }
.float-tiles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float-tiles span {
  position: absolute; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font: 700 28px var(--f-display); color: #fff; animation: float 6s ease-in-out infinite;
}
@keyframes float { 50% { translate: 0 -14px; } }
.wordmark { display: flex; justify-content: center; align-items: center; gap: 8px; font: 700 46px var(--f-display); }
.wordmark .sticker { background: var(--amber); color: var(--on-amber); padding: 0 12px 4px; border-radius: 14px; rotate: -6deg; box-shadow: 0 5px 0 var(--amber-d); }
.welcome-sub { text-align: center; color: var(--muted); margin: 12px 0 26px; font-size: 16px; }
.welcome-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 22px; box-shadow: 0 4px 0 var(--edge); }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: 14px; color: var(--muted); margin: 0 4px 6px; }
.field input, .field select { width: 100%; height: 54px; padding: 0 16px; border-radius: 18px; border: 2px solid var(--border); background: var(--surface-2); font-size: 17px; outline: none; }
.field input:focus, .field select:focus { border-color: var(--indigo); }
.detected { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); margin: -4px 0 18px; }

/* ===== Home ===== */
/* Spare height is shared equally between all the blocks (header, daily, random, modes, nav), never piled up under the last one */
#home { padding: 20px 18px 18px; gap: 16px; justify-content: space-between; }
.header { flex: none; display: flex; align-items: center; gap: 12px; }
.avatar-btn {
  width: 52px; height: 52px; flex: none; border-radius: 50%; position: relative;
  background: var(--surface); border: 3px solid var(--amber); display: grid; place-items: center;
  font: 700 22px var(--f-display); color: var(--amber-text);
}
.level-badge { position: absolute; bottom: -6px; left: -6px; background: var(--amber); color: var(--on-amber); font: 700 11px var(--f-display); border-radius: 10px; padding: 2px 6px; }
.header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.greeting { font-size: 13px; color: var(--muted); }
.player-name { font-size: 18px; font-weight: 700; }
.xp-row { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.xp-track { flex: 1; height: 10px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); }
.xp-fill { height: 100%; border-radius: 5px; background: var(--xp-fill); box-shadow: var(--xp-glow); }
.xp-label { font-size: 11px; font-weight: 700; color: var(--level-label); }
.xp-num { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.header .circle { width: 46px; height: 46px; color: var(--c-classic); }

.daily-card {
  flex: none; display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 30px;
  background: linear-gradient(160deg, var(--hero-from), var(--hero-to)); border: 1px solid var(--frame); box-shadow: var(--hero-shadow);
}
.daily-top { display: flex; align-items: center; gap: 18px; }
.streak-ring { width: 100px; height: 100px; flex: none; position: relative; }
.streak-ring svg { position: absolute; inset: 0; }
.streak-ring .val { position: absolute; inset: 0; display: grid; place-items: center; font: 700 36px var(--f-display); }
.streak-ring .val small { display: block; font: 600 11px var(--f-body); color: var(--muted); margin-top: -4px; }
.streak-ring .flame { position: absolute; top: -6px; left: 50%; translate: -50% 0; font-size: 22px; color: var(--amber); filter: drop-shadow(0 2px 0 var(--amber-d)); }
.daily-title { font: 700 24px var(--f-display); }
.daily-date { font-size: 14px; color: var(--muted); margin-top: 2px; }
.daily-streak { font-size: 15px; font-weight: 700; color: var(--amber-text); margin-top: 6px; }
.daily-card .btn { height: 58px; font-size: 22px; }
.daily-card.solved .daily-streak { color: var(--teal); }

.random-row { display: flex; gap: 10px; height: 168px; flex: none; }
.rand-btn { border-radius: 28px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #fff; --sy: 2px; }
.rand-icon { width: 42px; height: 42px; border-radius: 50%; background: #ffffff26; display: grid; place-items: center; font-size: 24px; flex: none; }
.rand-title { font: 600 17px var(--f-display); white-space: nowrap; }
.rand-bottom { height: 38px; width: 100%; display: flex; align-items: center; justify-content: center; }
.rand-hint { font-size: 12px; color: #ede9fe; }
.rand-full {
  flex: .8; background: linear-gradient(160deg, var(--purple), var(--purple-d)); border: 4px solid var(--purple-ring);
  box-shadow: 0 2px 0 var(--purple-edge), 0 0 14px #8b5cf633; --press-shadow: 0 0 0 var(--purple-edge), 0 0 14px #8b5cf633;
}
.rand-level {
  flex: 1.2; background: linear-gradient(160deg, var(--teal), var(--teal-d)); border: 4px solid var(--teal-ring);
  box-shadow: 0 2px 0 var(--teal-edge), 0 0 14px #14b8a633; --press-shadow: 0 0 0 var(--teal-edge), 0 0 14px #14b8a633;
}
.rand-level:active:has(.level-sq:active), .rand-level.is-pressed:has(.level-sq.is-pressed) { transform: none; box-shadow: 0 2px 0 var(--teal-edge), 0 0 14px #14b8a633; }
.rand-main { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; color: inherit; }
.level-squares { display: flex; gap: 6px; width: 100%; }
.level-sq {
  flex: 1; height: 38px; min-width: 0; border-radius: 12px; font: 600 13px var(--f-display); color: #fff;
  background: linear-gradient(160deg, var(--teal), var(--teal-d)); border: 3px solid var(--teal-ring); box-shadow: 0 3px 0 var(--teal-edge);
  --sy: 2px; --press-shadow: 0 1px 0 var(--teal-edge);
}
.level-sq.selected { background: #ccfbf1; color: var(--teal-d); border-color: #fff; }

.modes { flex: 1 1 160px; max-height: 200px; display: flex; gap: 10px; }  /* takes spare height first (up to 200px), the rest goes between the blocks */
.mode-card {
  flex: 1; min-width: 0; min-height: 160px; padding: 0 4px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 3px 0 var(--edge);
  --sy: 2px; --press-shadow: 0 1px 0 var(--edge);
}
.mode-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: var(--mc); background: color-mix(in srgb, var(--mc) 15%, transparent); }
.mode-duel { --mc: var(--c-duel); } .mode-stages { --mc: var(--c-stages); } .mode-classic { --mc: var(--c-classic); }
.vs-text { font: italic 800 22px var(--f-body); letter-spacing: -1px; }
.mode-title { font: 600 17px var(--f-display); }
/* Shorter phones (≈360×740): tighter home so it still fits one screen without scrolling */
@media (max-height: 780px) {
  #home { padding: 14px 16px 14px; gap: 12px; }
  .modes { flex-basis: 140px; }
  .mode-card { min-height: 140px; gap: 6px; }
  .mode-icon { width: 52px; height: 52px; font-size: 26px; }
}
.mode-sub { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; min-height: 26px; }  /* same height with or without the league pill, so the three cards line up */

.bottom-nav {
  flex: none; display: flex; justify-content: space-around; padding: 8px 10px;
  background: var(--surface); border: 4px solid var(--frame); border-radius: 28px; box-shadow: 0 3px 0 var(--edge);
}
.nav-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 84px; min-height: 48px; padding: 4px 6px; border-radius: 16px; font-size: 12px; font-weight: 700; color: var(--muted); }
.nav-item i { font-size: 24px; }
.bottom-nav { position: relative; }
.nav-item { z-index: 1; transition: color .2s; }
.nav-item.active { color: var(--on-amber); }
.nav-indicator {
  position: absolute; top: 8px; height: calc(100% - 16px); border-radius: 16px; background: var(--amber);
  box-shadow: 0 2px 0 var(--amber-d);
  transition: left .32s cubic-bezier(.3, 1.35, .5, 1), width .32s cubic-bezier(.3, 1.35, .5, 1);
}
.nav-indicator.no-anim { transition: none; }
.nav-dot { position: absolute; top: 2px; right: 26px; width: 12px; height: 12px; border-radius: 50%; background: #ff3d71; border: 2px solid var(--surface); }

/* ===== v2 round-3 additions ===== */
[hidden] { display: none !important; }
.my-avatar { background: var(--av, var(--indigo)) !important; color: #fff !important; }
.av-face { display: grid; place-items: center; }
.avatar-btn .av-face i { font-size: 26px; }
.pf-avatar .av-face i { font-size: 38px; }
.daily-card { position: relative; }
.info-btn { position: absolute; top: 14px; left: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.league-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 11px; font: 600 12px var(--f-display); color: var(--text); background: color-mix(in srgb, var(--lc) 22%, var(--surface)); white-space: nowrap; }
.league-chip i { color: var(--lc); font-size: 14px; }
.lobby-card { padding: 14px; border-radius: 22px; background: var(--surface-2); margin-bottom: 12px; }
.lc-head { display: flex; justify-content: space-between; align-items: center; }
.lc-title { display: inline-flex; align-items: center; gap: 6px; font: 600 18px var(--f-display); }
.lc-sub { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.lobby-card .diffs { margin-bottom: 0; }
.league-progress { margin-top: 10px; }
.league-progress .xp-track { height: 8px; }
.league-progress .xp-fill { background: var(--lc); box-shadow: none; }
.league-progress small { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.field-err { color: var(--rose); font-size: 13px; font-weight: 500; margin: -8px 4px 10px; min-height: 0; }
.field input.invalid { border-color: var(--rose); }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.sugg button { padding: 6px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 500; }
.av-icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 14px; }
.av-icons button { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: var(--surface-2); color: var(--muted); }
.av-icons button[aria-pressed="true"] { background: var(--av); color: #fff; }
.av-colors { display: flex; justify-content: space-between; margin-bottom: 18px; }
.av-colors button { width: 34px; height: 34px; border-radius: 50%; background: var(--sw); outline: 3px solid transparent; outline-offset: 2px; }
.av-colors button[aria-pressed="true"] { outline-color: var(--text); }
#epPreview { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 24px var(--f-display); background: var(--av); flex: none; }
#epPreview i { font-size: 30px; }
.breakdown { background: var(--surface-2); border-radius: 16px; padding: 10px 14px; margin-bottom: 14px; text-align: start; }
.breakdown div { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.breakdown div span:last-child { font: 600 15px var(--f-display); font-variant-numeric: tabular-nums; }
.breakdown .tot { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 7px; font-weight: 700; }
.breakdown .tot span:last-child { color: var(--c-classic); font-size: 18px; }
.breakdown .plus { color: var(--teal); } .breakdown .minus { color: var(--rose); }
.win .stars3 i.off { color: var(--star-empty); filter: none; }
.win.fail .medal { background: radial-gradient(circle at 35% 30%, #e2e8f0, #94a3b8 60%, #64748b); box-shadow: 0 4px 0 #475569, 0 0 0 10px var(--surface); color: #fff; }
.share-btn { margin-bottom: 10px; height: 48px; font-size: 17px; }
.de-rewards { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; }
.de-rewards .line { display: flex; gap: 14px; font: 600 16px var(--f-display); }
.de-rewards .xp { color: var(--c-classic); }
.de-rewards .tr-up { color: var(--teal); } .de-rewards .tr-down { color: var(--rose); }
.de-rewards .league-progress { width: 80%; }
.friendly-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 12px; background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal); font: 600 13px var(--f-display); }
.h2h { font-size: 12px; color: var(--muted); font-weight: 500; }
.share-preview { display: flex; justify-content: center; margin-bottom: 12px; }
.share-preview canvas { max-width: 100%; max-height: 46vh; border-radius: 16px; box-shadow: 0 6px 20px #0003; }
.share-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.pf-league { margin-bottom: 14px; }
.title-next { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ===== Round 4: secondary screens ===== */
.mode-bar { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 0 var(--edge); }
.mb-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.mb-row .who { width: 64px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.mb-row .xp-track { flex: 1; height: 10px; }
.mb-row .xp-fill { box-shadow: none; transition: width .4s; }
.mb-row .xp-fill.opp { background: linear-gradient(90deg, #fb7185, var(--rose)); }
.mb-row .cnt { min-width: 44px; font: 600 13px var(--f-display); direction: ltr; text-align: left; font-variant-numeric: tabular-nums; }
.mb-time .xp-fill { background: var(--amber); }
.mb-time.low, .mb-time.low .cnt { color: var(--rose); }
.mb-time.low .xp-fill { background: var(--rose); }
.hearts { font-size: 17px; letter-spacing: 2px; }
.board-wrap.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.ds-card { width: 100%; background: var(--surface); border: 4px solid var(--frame); border-radius: 30px; padding: 24px 18px 18px; text-align: center; scale: .9; transition: scale .25s cubic-bezier(.2, 1.4, .4, 1); }
.overlay.open .ds-card { scale: 1; }
.ds-arena { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.ds-side { width: 112px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ds-side .fr-av { width: 72px; height: 72px; font-size: 30px; }
.ds-side .fr-av i { font-size: 36px; }
.ds-side b { font-weight: 700; display: flex; align-items: center; gap: 5px; }
.ds-unknown { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--faint); font: 700 30px var(--f-display); }
.ds-unknown::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--c-duel); animation: dsSpin 1s linear infinite; }
.ds-waiting .fr-av { opacity: .55; animation: dsPulse 1.4s ease-in-out infinite; }
@keyframes dsSpin { to { rotate: 360deg; } }
@keyframes dsPulse { 50% { opacity: 1; } }
.ds-vs { font-size: 30px; color: var(--c-duel); }
.ds-card h2 { font: 700 26px var(--f-display); }
.ds-card .sub { color: var(--muted); font-size: 14px; margin: 4px 0 6px; }
.ds-timer { font: 600 15px var(--f-display); color: var(--faint); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.ds-count { font: 700 80px/1 var(--f-display); color: var(--c-duel); margin: 6px 0 12px; }
.ds-count.tick { animation: countPop .9s; }
@keyframes countPop { from { scale: 1.6; opacity: 0; } 30% { scale: 1; opacity: 1; } }
.ds-actions { display: flex; flex-direction: column; gap: 8px; }
.invite-banner { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; background: var(--surface); border: 2px solid var(--c-duel); box-shadow: 0 10px 24px #0004; translate: 0 -150%; transition: translate .4s cubic-bezier(.2, 1.2, .4, 1); }
.invite-banner.show { translate: 0 0; }
.friend-banner { border-color: var(--teal); }
a.btn { text-decoration: none; }
.invite-banner.show ~ .friend-banner.show { translate: 0 -150%; }
.invite-banner .grow { flex: 1; min-width: 0; }
.invite-banner b { display: block; font-size: 14px; }
.invite-banner small { font-size: 12px; color: var(--muted); }
.invite-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 16px; }
.invite-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 12px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
.dialog .dlg-ic { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 32px; color: var(--ic); background: color-mix(in srgb, var(--ic) 15%, transparent); }
.dialog h3 { text-align: center; }
.dialog p { text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: -8px; }
.dialog .stack { display: flex; flex-direction: column; gap: 8px; }
.dialog .stack .btn { height: 50px; }
.ver-pill { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 14px; font: 600 15px var(--f-display); }
.ver-pill span { padding: 4px 12px; border-radius: 12px; background: var(--surface-2); }
.ver-pill .new { background: color-mix(in srgb, var(--teal) 18%, var(--surface)); color: var(--teal); }
.pwa-icon { width: 72px; height: 72px; margin: 0 auto 10px; }

.rank-banner { margin-bottom: 14px; padding: 12px 14px; border-radius: 18px; text-align: center; font: 600 16px/1.35 var(--f-display); background: color-mix(in srgb, var(--rc) 18%, var(--surface)); border: 2px solid var(--rc); }
.rank-banner small { display: block; font: 500 12px var(--f-body); color: var(--muted); margin-top: 3px; }

/* ===== Journey 2.0 levels ===== */
.lives-pill { color: var(--rose); gap: 2px; padding: 0 12px; }
.lives-pill #livesTxt { display: flex; gap: 1px; font-size: 17px; }
#stages { padding-inline: 14px; }
#stages .map-panel { margin-inline: -6px; }
.lv-top { display: flex; align-items: center; gap: 10px; }
.lv-score { min-width: 70px; text-align: center; }
.lv-score b { display: block; font: 700 24px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.lv-score small { font-size: 11px; color: var(--muted); }
.lv-meter { flex: 1; position: relative; padding-top: 6px; }
.lv-meter .xp-track { height: 12px; }
.lv-meter .xp-fill { background: linear-gradient(90deg, #ffd24d, var(--amber)); box-shadow: none; transition: width .35s; }
.lv-mk { position: absolute; top: 0; translate: 50% 0; font-size: 20px; color: var(--star-empty); }
.lv-mk.on { color: var(--amber); filter: drop-shadow(0 1px 0 var(--amber-d)); }
.lv-goals { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 13px var(--f-display); }
.lv-goals .g { padding: 3px 9px; border-radius: 10px; background: var(--surface-2); white-space: nowrap; }
.lv-goals .g.done { background: color-mix(in srgb, var(--teal) 18%, var(--surface)); color: var(--teal); }
.lv-goals .sp { flex: 1; }
.lv-goals .combo { color: var(--purple); }
.lv-goals .low { color: var(--rose); }
.cell.m-gem { background: color-mix(in srgb, #22b8cf 16%, var(--surface)); }
.cell.m-ice { background: linear-gradient(135deg, #e0f2fe, #bae6fd); cursor: not-allowed; }
[data-theme='dark'] .cell.m-ice { background: linear-gradient(135deg, #1e3a5f, #164e63); }
.cell.m-ice::after { content: '❄️'; font-size: calc(var(--cell) * .42); opacity: .85; }
.cell .mk { position: absolute; font-size: calc(var(--cell) * .44); pointer-events: none; line-height: 1; }
.cell.m-bomb { background: color-mix(in srgb, var(--rose) 12%, var(--surface)); }
.cell .mk b { position: absolute; top: -6px; right: -10px; min-width: 16px; padding: 0 3px; border-radius: 8px; background: var(--rose); color: #fff; font: 700 calc(var(--cell) * .26) / 1.3 var(--f-display); text-align: center; }
.cell.m-bomb.low .mk { animation: shake .6s infinite; }
.cell.blast { animation: blast .7s; }
@keyframes blast { 0% { box-shadow: inset 0 0 0 40px #ffd24dcc; } 100% { box-shadow: inset 0 0 0 0 transparent; } }
/* ===== Twists (boards.html): bombs, golden coins, ordered cells ===== */
.cell.tw { position: relative; }
.cell .twm { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.cell.tw-bomb { background: color-mix(in srgb, var(--rose) 12%, var(--surface)); }
.cell.tw-bomb .ico { position: relative; font-size: calc(var(--cell) * .48); }
.cell.tw-bomb .ico em { position: absolute; top: -8%; right: -18%; font-style: normal; font-size: .45em; color: var(--amber); animation: fuseFlick .35s steps(2) infinite; }
@keyframes fuseFlick { 50% { opacity: .3; scale: .7; } }
.cell.tw-bomb .cnt { position: absolute; top: 1px; right: 1px; background: var(--rose); color: #fff; border-radius: 9px; padding: 2px 5px; font: 700 calc(var(--cell) * .3) / 1 var(--f-display); }
.cell.tw-bomb.low { box-shadow: inset 0 0 0 3px var(--rose); }
.cell.tw-bomb.low .twm { animation: shake .5s infinite; }
.cell.tw-gold { background: color-mix(in srgb, var(--amber) 16%, var(--surface)); perspective: 260px; }
.cell.tw-gold .twm svg { position: absolute; width: 92%; height: 92%; rotate: -90deg; }
.cell.tw-gold .twm circle { fill: none; stroke-width: 8; stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 100; animation: coinDrain 10s linear forwards; animation-delay: var(--del); }
@keyframes coinDrain { to { stroke-dashoffset: 100; } }
.cell .coin { position: relative; width: 64%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #fff8d6, #ffc94d 45%, #d18a00); border: 3px solid #e7a100;
  box-shadow: inset 0 0 0 3px #ffe08a, inset 0 -3px 0 #b87400, 0 3px 0 #b87400, 0 4px 8px #b8740066;
  font: 700 calc(var(--cell) * .27) var(--f-display); color: #8a5600; transform-style: preserve-3d; animation: coinSpin 1.3s linear infinite; animation-delay: var(--spin, 0s); }
.cell .coin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 30%, #fffffff0 48%, transparent 62%); animation: coinShine 1.3s linear infinite; animation-delay: var(--spin, 0s); }
@keyframes coinSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes coinShine { 0%, 100% { opacity: 0; } 20%, 30% { opacity: .9; } 50% { opacity: 0; } 70%, 80% { opacity: .9; } }
.is-paused .cell .coin, .is-paused .cell .coin::after, .is-paused .cell.tw-gold circle { animation-play-state: paused; }
.cell.tw-ord { cursor: pointer; }
.cell.tw-ord.locked { cursor: not-allowed; }
.cell.tw-ord b { position: relative; display: grid; place-items: center; font-size: calc(var(--cell) * .58); }
.cell.tw-ord b small { position: absolute; bottom: -10%; right: -30%; font: 700 calc(var(--cell) * .24) / 1 var(--f-display); color: #fff; background: var(--indigo); border-radius: 7px; padding: 2px 4px; }
.cell.tw-ord.locked .twm { opacity: .55; }
.cell.tw-ord.cur { background: color-mix(in srgb, var(--amber) 22%, var(--surface)); box-shadow: inset 0 0 0 3px var(--amber); }
.lens .lb { position: absolute; top: -9px; right: -9px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; border: 2px solid #fff; color: #fff;
  font: 700 12px / 1 var(--f-display); font-style: normal; display: flex; align-items: center; justify-content: center; gap: 2px; direction: ltr; box-shadow: 0 2px 0 #0003; }
.lens .ghost { position: absolute; font-size: .55em; opacity: .5; display: grid; place-items: center; }
.tw-hud { justify-content: flex-start; }
.tw-hud .sp { flex: 1; } .tw-hud .sub { color: var(--muted); font-weight: 500; }
.tw-hud .pips { display: flex; gap: 6px; }
.tw-hud .pip { min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px; display: grid; place-items: center; font-size: 13px; white-space: nowrap; background: var(--surface-2); color: var(--faint); border: 2px dashed var(--border); }
.tw-hud .pip.got { background: radial-gradient(circle at 35% 30%, #fff8d6, #ffc94d 55%, #d18a00); color: #6b4300; border: 2px solid #e7a100; }
.tw-hud .dots { display: flex; gap: 5px; } .tw-hud .dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); }
.tw-hud .dots i.cur { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 40%, var(--surface)); } .tw-hud .dots i.done { background: var(--teal); border-color: var(--teal); }
/* Time attack: burning fuse */
.mb-time .fuse { flex: 1; height: 10px; border-radius: 5px; background: var(--surface-2); position: relative; }
.mb-time .fuse i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--tc) 0 8px, color-mix(in srgb, var(--tc) 70%, #000) 8px 10px); transition: width 1s linear; }
/* Duel: race track */
.race { position: relative; height: 64px; border-radius: 14px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 18px, var(--surface) 18px 36px); direction: ltr; overflow: hidden; }
.race .lane { position: absolute; left: 22px; right: 44px; height: 26px; } .race .lane.a { top: 4px; } .race .lane.b { bottom: 4px; }
.race .av { position: absolute; top: 0; translate: -50% 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 13px var(--f-display); transition: left .5s; box-shadow: 0 2px 0 #0002; }
.race .av.me { background: var(--indigo); } .race .av.op { background: var(--rose); }
.race .finish { position: absolute; right: 0; top: 0; bottom: 0; width: 26px; background: repeating-conic-gradient(#1e2150 0 25%, #fff 0 50%) 0 0 / 13px 13px; opacity: .8; }
.cell.err-flash { animation: errFlash .6s; }
@keyframes errFlash { 0%, 60% { box-shadow: inset 0 0 0 40px #e11d7466; } 100% { box-shadow: none; } }
.lv-pop { position: absolute; z-index: 6; translate: -50% 0; font: 700 18px var(--f-display); color: var(--c-classic); pointer-events: none; white-space: nowrap; animation: popUp .9s forwards; text-shadow: 0 2px 0 var(--surface); }
.lv-pop.bad { color: var(--rose); }
.lv-pop.big { font-size: 24px; color: var(--amber-d); }
@keyframes popUp { from { opacity: 0; transform: translateY(6px) scale(.8); } 20% { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-38px); } }
.lv-banner { position: absolute; top: 34%; left: 50%; translate: -50% 0; z-index: 7; padding: 8px 18px; border-radius: 16px; background: var(--purple); color: #fff; font: 700 22px var(--f-display); white-space: nowrap; box-shadow: 0 4px 0 var(--purple-edge); opacity: 0; pointer-events: none; }
.lv-banner.show { animation: bannerPop 1.1s; }
@keyframes bannerPop { 0% { opacity: 0; scale: .5; } 15% { opacity: 1; scale: 1.12; } 25% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; scale: .9; } }
.li-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.li-head .circle { margin-inline-start: auto; }
.li-num { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--sel-grad); color: var(--on-amber); font: 700 28px var(--f-display); box-shadow: 0 3px 0 var(--amber-d); flex: none; }
.li-head h2 { font: 700 24px var(--f-display); }
.li-head small { color: var(--muted); font-size: 14px; }
.li-goal { padding: 14px; border-radius: 18px; background: var(--surface-2); text-align: center; margin-bottom: 12px; }
.li-goal b { display: block; font: 700 22px var(--f-display); margin: 2px 0; }
.li-goal small { color: var(--muted); font-size: 13px; }
.li-stars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.li-stars div { padding: 8px 4px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.li-stars span { display: block; color: var(--amber); font-size: 14px; letter-spacing: 1px; }
.li-stars b { font: 600 15px var(--f-display); }
.li-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; }
.ds-card .row { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.le-stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px; font-size: 50px; color: var(--star-empty); margin: 8px 0 4px; }
.le-stars i:nth-child(2) { font-size: 64px; }
.le-stars i.on { color: var(--amber); filter: drop-shadow(0 3px 0 var(--amber-d)); animation: starIn .5s backwards cubic-bezier(.2, 1.6, .4, 1); }
.le-stars i.on:nth-child(2) { animation-delay: .25s; } .le-stars i.on:nth-child(3) { animation-delay: .5s; }
.le-score { font: 700 44px var(--f-display); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.le-friend { font-size: 14px; font-weight: 600; color: var(--teal); margin-bottom: 12px; }
.nl-heart { font-size: 72px; line-height: 1; margin: 6px 0; }
.nl-times { display: flex; justify-content: center; gap: 10px; margin: 10px 0 16px; }
.nl-times div { padding: 8px 14px; border-radius: 14px; background: var(--surface-2); }
.nl-times b { display: block; font: 700 20px var(--f-display); font-variant-numeric: tabular-nums; }
.nl-times small { font-size: 12px; color: var(--muted); }

/* Clear / combo celebration */
.fx-sweep { position: absolute; z-index: 5; pointer-events: none; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 3px #ffd24d, 0 0 26px 6px #ffb020aa; animation: sweepGlow .75s ease-out forwards; }
.fx-sweep::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #fff8 45%, #ffe7a8 50%, #fff8 55%, transparent); transform: translateX(-110%); animation: sweepShine .6s ease-out forwards; }
.fx-sweep.v::after { background: linear-gradient(180deg, transparent, #fff8 45%, #ffe7a8 50%, #fff8 55%, transparent); transform: translateY(-110%); animation-name: sweepShineV; }
@keyframes sweepGlow { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sweepShine { to { transform: translateX(110%); } }
@keyframes sweepShineV { to { transform: translateY(110%); } }
.cell.wave { animation: cellWave .5s cubic-bezier(.2, 1.6, .4, 1) backwards; }
@keyframes cellWave { 0% { transform: scale(1); background: var(--surface); } 40% { transform: scale(1.18); background: #ffe08a; color: #7a4a00; z-index: 2; } 100% { transform: scale(1); } }
.fx-spark { position: absolute; z-index: 6; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; animation: spark .75s ease-out forwards; }
.fx-spark.star { width: auto; height: auto; background: none !important; font-size: 14px; }
@keyframes spark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; } }
.board-wrap.mega { animation: megaFlash .6s; }
@keyframes megaFlash { 0% { filter: brightness(1); } 30% { filter: brightness(1.35) saturate(1.3); transform: scale(1.02); } 100% { filter: none; transform: none; } }
.lv-goals .combo { animation: comboPulse .35s; }
@keyframes comboPulse { 50% { transform: scale(1.3); } }

/* Board variants (chosen in boards.html): diagonal = gems, fog = mist in the cell, parity = bold blue/red */
.cell.diag::before { content: ''; position: absolute; inset: 3px; border-radius: 9px; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--purple) 55%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 24%, transparent), color-mix(in srgb, var(--purple) 5%, transparent) 60%);
  box-shadow: inset 0 2px 0 #ffffff99, inset 0 -2px 0 color-mix(in srgb, var(--purple) 25%, transparent); }
.cell.diag.on::before { animation: gemPop .4s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--dk) * .05s); border-color: var(--purple);
  background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 42%, transparent), color-mix(in srgb, var(--purple) 14%, transparent) 60%); }
@keyframes gemPop { from { scale: .7; } }
.cell.diag, .cell.fog { position: relative; }
.cell.fog { cursor: not-allowed; overflow: hidden; background: var(--fog-a); }
.cell .fog-in { position: absolute; inset: -40%; pointer-events: none; z-index: 2; filter: blur(4px);
  background: radial-gradient(circle at 30% 35%, var(--fog-c) 0 12%, transparent 34%), radial-gradient(circle at 70% 65%, var(--fog-c) 0 10%, transparent 30%),
    radial-gradient(circle at 55% 25%, var(--fog-b) 0 12%, transparent 32%), var(--fog-a);
  animation: mistDrift 6s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.7s); }
.cell.fog.edge .fog-in { opacity: .78; }
.cell .fog-in.out { animation: mistAway .3s ease-out forwards; filter: none; will-change: opacity, transform; }
@keyframes mistDrift { from { translate: -12% -6%; } to { translate: 12% 8%; } }
@keyframes mistAway { to { opacity: 0; transform: scale(1.25); } }
:root { --fog-a: #dde3ee; --fog-b: #b8c3d6; --fog-c: #f8fafc; --ev: #3b82f6; --od: #ef4444; }
[data-theme='dark'] { --fog-a: #3a4266; --fog-b: #262c4f; --fog-c: #59628f; }
.cell.even { background: color-mix(in srgb, var(--ev) 30%, var(--surface)); }
.cell.odd { background: color-mix(in srgb, var(--od) 30%, var(--surface)); }
.cell.even.hi { background: color-mix(in srgb, var(--ev) 44%, var(--surface)); }
.cell.odd.hi { background: color-mix(in srgb, var(--od) 44%, var(--surface)); }
.key.k-ev { background: color-mix(in srgb, var(--ev) 30%, var(--surface)); }
.key.k-od { background: color-mix(in srgb, var(--od) 30%, var(--surface)); }
.key.off { opacity: .28; }
.big-time { font: 700 22px var(--f-display); font-variant-numeric: tabular-nums; min-width: 62px; color: var(--tc); }
.mb-time.low .big-time, .mb-time.low i { animation: heartbeat 1s infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.board-wrap.urgent .grid { animation: urgent 1s infinite; }
@keyframes urgent { 50% { box-shadow: 0 0 0 4px var(--rose), 0 0 26px #e11d7499; } }
.lives-pill .lt { font: 600 12px var(--f-display); color: var(--muted); margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.mb-info { font-size: 13px; font-weight: 600; color: var(--muted); }
.mb-info b { color: var(--text); }

/* ===== Classic game ===== */
#game { padding: 16px 8px 14px; gap: 12px; --cell: 40px; }
/* The board is as wide as the screen allows; spare height is split evenly above and below it */
#game .board-wrap { margin-block: auto; }
/* Classic size + difficulty pickers share one row */
.pickers { flex: none; display: flex; gap: 6px; }
.pickers[hidden] { display: none; }
.pickers .seg { flex: 1; height: 40px; min-width: 0; }
.pickers .seg button { font-size: 13px; min-width: 0; padding: 0 2px; }
.pickers #sizeSeg { flex: 1.15; }
#game .topbar .pill.timer { direction: ltr; padding: 0 12px; }
#game .timer .t { font: 600 17px var(--f-display); font-variant-numeric: tabular-nums; color: var(--user-digit); }
#cg-reset { color: var(--rose); } #cg-settings { color: var(--c-classic); }
.board-wrap { position: relative; width: 100%; aspect-ratio: 1; flex: none; }
.grid { width: 100%; height: 100%; display: grid; direction: ltr; border: 4px solid var(--box-line); border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: 0 3px 0 var(--edge); }
.cell { display: flex; align-items: center; justify-content: center; font: 600 calc(var(--cell) * .6) / 1 var(--f-display); color: var(--user-digit); background: var(--surface); min-width: 0; min-height: 0; user-select: none; cursor: pointer; }
.cell.given { font-weight: 700; color: var(--text); }
.cell.hi { background: var(--cell-hi); }
/* Same digit as the selected cell: a solid fill with white digits, so it stands out from the row / column / box
   tint on every board (also over special cells, parity colours and the diagonal tint). Errors keep their red. */
#grid .cell.same:not(.conflict):not(.wrong) { background: var(--indigo); color: #fff; }
#grid .cell.same:not(.conflict):not(.wrong) .notes span { color: #fff; }
.cell.conflict { background: color-mix(in srgb, var(--rose) 30%, var(--surface)); }
.cell.wrong { background: color-mix(in srgb, var(--rose) 40%, var(--surface)); }
.cell.pop { animation: cellPop .25s; }
@keyframes cellPop { 50% { transform: scale(1.2); } }
.notes { display: grid; width: 100%; height: 100%; padding: 1px; }
.notes span { display: grid; place-items: center; font: 600 calc(var(--cell) * .21) / 1 var(--f-display); color: var(--muted); }
.lens {
  position: absolute; display: none; align-items: center; justify-content: center; z-index: 3; pointer-events: none;
  border: 3px solid var(--sel-ring); border-radius: 14px; background: var(--sel-grad); color: var(--on-amber);
  font-family: var(--f-display); font-weight: 700; line-height: 1;
  box-shadow: 0 5px 10px #0003, 0 3px 0 var(--amber-d), 0 0 0 3px var(--ring, transparent);
}
.lens.show { display: flex; animation: lensPop .12s ease-out; }
.lens.is-given { background: var(--surface); color: var(--text); border-color: var(--box-line); box-shadow: 0 5px 10px #0003, 0 4px 0 var(--edge); }
.lens.is-wrong { background: linear-gradient(160deg, #ffb3c9, #e11d74); color: #2a0714; box-shadow: 0 5px 10px #0003, 0 4px 0 #7a0b3c; }
.lens.has-notes { padding: 2px; }
.lens .notes span { color: #5c3a00; font-size: calc(var(--cell) * .24); }
@keyframes lensPop { from { scale: .88; } }
.pause-veil {
  position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border-radius: 24px; background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(6px);
}
.pause-veil.show { display: flex; }
.pause-veil button { width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(160deg, var(--purple), var(--purple-d)); color: #fff; font-size: 28px; display: grid; place-items: center; box-shadow: 0 3px 0 var(--purple-edge); --press-shadow: 0 1px 0 var(--purple-edge); }
.pause-veil span { font: 600 16px var(--f-display); }
#game.is-paused .numpad { pointer-events: none; opacity: .55; }
.actions { flex: none; display: flex; gap: 6px; }
.action {
  flex: 1; min-width: 0; height: calc(62px + var(--act-grow, 0px)); border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 3px 0 var(--edge);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  --sy: 2px; --press-shadow: 0 1px 0 var(--edge);
}
.action i { font-size: 22px; }
.action .lbl { font-size: 11px; font-weight: 800; white-space: nowrap; }
#act-hint { color: var(--amber-text); } #act-erase { color: var(--rose); } #act-check { color: var(--teal); }
#act-hint:disabled { opacity: .45; }
#act-notes[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); border-color: var(--amber-d); box-shadow: 0 3px 0 var(--amber-d); }
.numpad { flex: none; display: grid; gap: 8px; }
.key, .tile { height: calc(64px + var(--key-grow, 0px)); border-radius: 20px; }
.key {
  position: relative; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 3px 0 var(--edge);
  font: 600 30px var(--f-display); display: grid; place-items: center;
  --sy: 2px; --press-shadow: 0 1px 0 var(--edge);
}
.key:disabled { opacity: .35; cursor: default; }
.key .badge { position: absolute; top: 5px; right: 6px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; background: var(--badge-bg); color: var(--badge-fg); font: 700 10px/17px var(--f-body); text-align: center; }
#game.notes-mode .key { color: var(--amber-text); }
.tile { background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tile .t1 { font-size: 11px; font-weight: 700; color: var(--muted); }
.tile .t2 { font: 700 22px var(--f-display); color: var(--user-digit); }
#game[data-n="16"] .key, #game[data-n="16"] .tile { height: calc(56px + var(--key-grow, 0px)); }
#game[data-n="16"] .key { font-size: 22px; border-radius: 14px; }
#game[data-n="16"] .key .badge { top: 3px; right: 3px; min-width: 14px; height: 14px; font-size: 9px; line-height: 14px; }

/* ===== Stages ===== */
#stages { padding: 16px 8px 14px; gap: 10px; }
.stars-pill { direction: ltr; }
.stars-pill i { color: var(--amber); filter: drop-shadow(0 1px 0 var(--amber-d)); }
.journey-progress { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 3px 0 var(--edge); }
.jp-top { display: flex; justify-content: space-between; align-items: baseline; }
.jp-top b { font: 600 18px var(--f-display); }
.jp-top span { font-size: 13px; color: var(--muted); }
.jp-top .num { font-size: 16px; font-weight: 700; color: var(--teal); }
.journey-progress .xp-track { flex: none; }
.journey-progress .xp-fill { background: linear-gradient(90deg, #2dd4bf, var(--teal)); box-shadow: none; }
.milestone { direction: rtl; position: absolute; translate: -50% -50%; z-index: 2; padding: 4px 10px; border-radius: 10px; white-space: nowrap; background: var(--surface); border: 1px dashed var(--border); color: var(--muted); font: 600 12px var(--f-display); }
.jump-btn { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; z-index: 7; height: 38px; padding: 0 14px; border-radius: 19px; display: flex; align-items: center; gap: 6px; background: var(--amber); color: var(--on-amber); font: 600 14px var(--f-display); box-shadow: 0 3px 0 var(--amber-d); --sy: 2px; --press-shadow: 0 1px 0 var(--amber-d); }
.jump-btn[hidden] { display: none; }
.map-panel { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 28px; border: 1px solid var(--border); background: var(--panel); box-shadow: 0 3px 0 var(--edge); overflow: hidden; direction: ltr; }
.map-scroll { width: 100%; height: 100%; overflow-y: auto; scrollbar-width: none; }
.map-scroll::-webkit-scrollbar { display: none; }
.map-inner { position: relative; width: 100%; }
.map-road { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.map-road path { vector-effect: non-scaling-stroke; }
.map-digits { position: absolute; inset: 0; pointer-events: none; font: 700 64px/1 var(--f-display); color: var(--ghost); }
.map-digits span { position: absolute; }
.map-fade { position: absolute; inset: auto 0 0 0; height: 46px; background: linear-gradient(transparent, color-mix(in srgb, var(--surface) 90%, transparent) 80%); pointer-events: none; z-index: 5; }
.stage-tile { position: absolute; width: 58px; height: 58px; translate: -50% -50%; z-index: 3; display: grid; place-items: center; }
.stage-tile.boss { width: 70px; height: 70px; }
.stage-tile.locked { cursor: default; }
.stage-inner {
  position: relative; width: 100%; height: 100%; border-radius: 17px; border: 3px solid var(--locked-border); background: var(--locked-bg);
  overflow: hidden; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}
.stage-tile.boss .stage-inner { border-radius: 20px; }
.stage-tile.locked .stage-inner { border-style: dashed; }
.stage-tile.completed .stage-inner { background: linear-gradient(160deg, var(--teal), var(--teal-d)); border-color: var(--teal-ring); box-shadow: 0 3px 0 var(--teal-edge); }
.stage-tile.current .stage-inner { background: var(--sel-grad); border-color: #ffe7a8; animation: stageGlow 1.6s ease-in-out infinite; }
@keyframes stageGlow { 0%, 100% { box-shadow: 0 3px 0 var(--amber-d), 0 0 12px #ffb02088; } 50% { box-shadow: 0 3px 0 var(--amber-d), 0 0 20px #ffb020bb; } }
.stage-cell { border-inline-start: 1px solid var(--locked-border); border-bottom: 1px solid var(--locked-border); display: grid; place-items: center; font: 600 9px/1 var(--f-display); color: var(--locked-ink); }
.stage-cell:nth-child(3n) { border-inline-start: 0; } .stage-cell:nth-child(n+7) { border-bottom: 0; }
.stage-tile.completed .stage-cell { border-color: #ffffff59; color: #ffffffb3; }
.stage-tile.current .stage-cell { border-color: #1a120040; color: #1a1200a6; }
.stage-tile.locked .stage-cell { opacity: .6; }
.stage-num {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 30px; height: 30px; border-radius: 9px; z-index: 4;
  display: grid; place-items: center; font: 700 18px/1 var(--f-display); color: var(--locked-ink);
}
.stage-tile.boss .stage-num { width: 36px; height: 36px; font-size: 22px; }
.stage-tile.completed .stage-num { background: #fff; color: var(--teal-d); box-shadow: 0 3px 0 var(--teal-edge); }
.stage-tile.current .stage-num { background: #fff; color: var(--on-amber); box-shadow: 0 3px 0 var(--amber-d); }
.stage-badge { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--lock-badge); border: 2px solid var(--ring); display: grid; place-items: center; color: #fff; font-size: 12px; z-index: 5; }
.stage-tile.boss .stage-badge { top: -14px; right: auto; left: 50%; translate: -50% 0; width: 28px; height: 28px; font-size: 14px; }
.stage-tile.boss.locked .stage-badge { background: var(--amber); color: var(--on-amber); }
.stage-stars { position: absolute; left: 50%; bottom: -11px; translate: -50% 0; display: flex; gap: 1px; padding: 2px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 0 var(--edge); z-index: 4; font-size: 12px; color: var(--star-empty); }
.stage-stars .on { color: var(--amber); }
.play-pill {
  position: absolute; top: 50%; height: 30px; padding: 0 12px 0 10px; border-radius: 15px; z-index: 6;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--amber); color: var(--on-amber); font: 600 14px var(--f-display); box-shadow: 0 3px 0 var(--amber-d);
  animation: playBob 1.6s ease-in-out infinite;
}
@keyframes playBob { 0%, 100% { transform: translateY(-50%) translateY(-3px); } 50% { transform: translateY(-50%); } }
.play-pill.left { right: calc(100% + 10px); } .play-pill.right { left: calc(100% + 10px); }

/* ===== Leaderboard ===== */
#leaderboard { padding: 16px 12px 20px; gap: 14px; }
#leaderboard .seg button { font-size: 14px; }
.podium { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; }
.podium .p { flex: 1; text-align: center; }
.podium .face { width: 58px; height: 58px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; font: 700 22px var(--f-display); color: #fff; border: 3px solid var(--surface); position: relative; }
.podium .p1 .face { width: 72px; height: 72px; font-size: 28px; border-color: var(--amber); }
.podium .crown { position: absolute; top: -26px; font-size: 28px; color: var(--amber); filter: drop-shadow(0 2px 0 var(--amber-d)); }
.podium b { font: 600 15px var(--f-display); display: block; }
.podium small { color: var(--muted); font-size: 12px; }
.podium .block { margin-top: 8px; border-radius: 18px 18px 6px 6px; color: #fff; font: 700 30px var(--f-display); display: grid; place-items: center; }
.podium .p1 .block { height: 104px; background: linear-gradient(var(--amber), var(--amber-d)); color: var(--on-amber); }
.podium .p2 .block { height: 78px; background: linear-gradient(#b8c3d9, #7d88a6); }
.podium .p3 .block { height: 60px; background: linear-gradient(#f0a577, #b8612f); }
.lb-list { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 3px 0 var(--edge); padding: 6px; }
.lb-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 16px; }
.lb-item .rank { width: 24px; text-align: center; font: 600 16px var(--f-display); color: var(--faint); }
.lb-item .face { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 16px var(--f-display); color: #fff; }
.lb-item .nm { flex: 1; font-weight: 500; }
.lb-item .sc { font: 600 16px var(--f-display); color: var(--c-classic); }
.lb-item.me { background: color-mix(in srgb, var(--amber) 22%, var(--surface)); box-shadow: inset 0 0 0 2px var(--amber); }
.lb-item .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.meta { display: flex; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta span { display: inline-flex; align-items: center; gap: 3px; }
.meta .bonus { color: var(--amber-text); font-weight: 700; }
.meta .pen { color: var(--rose); font-weight: 700; }
.podium .meta { justify-content: center; flex-wrap: wrap; gap: 1px 6px; font-size: 11px; margin-top: 3px; }
.lb-legend { display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--muted); margin-top: -4px; }
.lb-legend span { display: inline-flex; align-items: center; gap: 4px; }
.medals { display: flex; gap: 6px; }
.medals > span { display: inline-flex; align-items: center; gap: 3px; min-width: 42px; height: 28px; padding: 0 7px; border-radius: 14px; background: var(--surface-2); font: 600 14px var(--f-display); }
.medals svg { flex: none; filter: drop-shadow(0 1px 0 #0002); }
.medals > span.zero { opacity: .35; filter: grayscale(1); }
.podium .medals { justify-content: center; gap: 2px; margin-top: 4px; }
.podium .medals > span { min-width: 0; height: auto; padding: 0 2px; background: none; font-size: 13px; gap: 1px; }

/* ===== Profile ===== */
:root { --viz-a: #0d9488; --viz-c: #e11d74; }
#profile { padding: 16px 12px 24px; gap: 14px; }
.pf-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 18px; border-radius: 28px; background: linear-gradient(160deg, var(--hero-from), var(--hero-to)); border: 1px solid var(--frame); box-shadow: 0 3px 0 var(--edge); }
.pf-avatar { position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 4px solid var(--amber); font: 700 34px var(--f-display); color: var(--amber-text); }
.pf-avatar .level-badge { font-size: 13px; padding: 3px 8px; bottom: -4px; left: -4px; }
.pf-id h1 { font: 700 24px var(--f-display); display: flex; align-items: center; gap: 8px; }
.pf-title { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 2px; padding: 3px 10px; border-radius: 12px; background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); font: 600 13px var(--f-display); }
[data-theme='dark'] .pf-title { color: #c4b5fd; }
.pf-id small { display: block; color: var(--muted); font-size: 12px; }
.pf-xp { grid-column: 1 / -1; }
.pf-xp .xp-track { height: 12px; border-radius: 6px; }
.pf-xp-row { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.pf-xp-row span:first-child { color: var(--level-label); }
.pf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-tile { padding: 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 3px 0 var(--edge); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.pf-tile i { grid-row: span 2; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; color: var(--tc); background: color-mix(in srgb, var(--tc) 15%, transparent); }
.pf-tile b { font-size: 22px; line-height: 1.1; }
.pf-tile small { color: var(--muted); font-size: 12px; }
.pf-card { padding: 16px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 3px 0 var(--edge); }
.pf-card > header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.pf-card h2 { font: 600 19px var(--f-display); }
.pf-sum { font-size: 13px; color: var(--muted); }
.pf-sum b { font-size: 17px; color: var(--text); }
.pf-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--c-classic); }
.pf-row4 { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.pf-row4.three { grid-template-columns: repeat(3, 1fr); }
.pf-row4 > div + div { border-inline-start: 1px solid var(--border); }
.pf-row4 b { display: block; font-size: 22px; }
.pf-row4 small { font-size: 11px; color: var(--muted); }
.pf-medals { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.pf-medals span { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--surface-2); font: 600 18px var(--f-display); }
.pf-medals small { font: 500 12px var(--f-body); color: var(--muted); }
.pf-journey { margin-top: 16px; }
.pf-journey .xp-fill { background: linear-gradient(90deg, #2dd4bf, var(--teal)); box-shadow: none; }
/* Duel win/loss: one stacked bar, 2px surface gap, direct labels */
.wl { display: flex; gap: 2px; height: 30px; margin-bottom: 16px; }
.wl > div { display: flex; align-items: center; padding: 0 10px; color: #fff; font: 600 13px var(--f-display); white-space: nowrap; }
.wl .w { background: var(--viz-a); border-radius: 0 8px 8px 0; }
.wl .l { background: var(--viz-c); border-radius: 8px 0 0 8px; justify-content: flex-end; }
/* Shared chart tooltip */
.viz-tip { position: absolute; z-index: 40; pointer-events: none; padding: 6px 10px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 500; white-space: nowrap; translate: -50% calc(-100% - 8px); opacity: 0; transition: opacity .12s; }
.viz-tip.show { opacity: 1; }

/* ===== Friends ===== */
#friends { padding: 16px 12px 24px; gap: 14px; }
.fr-invite { padding: 18px; border-radius: 28px; color: #fff; background: linear-gradient(160deg, var(--purple), var(--purple-d)); border: 4px solid var(--purple-ring); box-shadow: 0 2px 0 var(--purple-edge), 0 0 14px #8b5cf633; }
.fr-invite-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.fr-invite h2 { font: 600 20px var(--f-display); }
.fr-invite p { font-size: 13px; color: #ede9fe; margin-top: 2px; }
.code-row { display: flex; gap: 8px; }
.code-box { flex: 1; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #ffffff26; border: 2px dashed #ffffff80; color: #fff; font-size: 22px; letter-spacing: .06em; --sy: 2px; }
.code-box i { font-size: 20px; opacity: .85; }
.white-btn { --c: #fff; --cd: var(--purple-edge); --fg: var(--purple-d); width: auto; height: 50px; font-size: 17px; border-radius: 16px; padding: 0 16px; box-shadow: 0 3px 0 var(--cd); --sy: 2px; }
.count-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3d71; color: #fff; font: 700 12px var(--f-body); vertical-align: 3px; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.fr-row + .fr-row { border-top: 1px solid var(--border); }
.fr-av { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 19px var(--f-display); }
.fr-av .on { position: absolute; bottom: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--live); border: 2.5px solid var(--surface); }
.fr-av .lvl { position: absolute; bottom: -4px; right: -6px; background: var(--amber); color: var(--on-amber); font: 700 10px var(--f-display); border-radius: 8px; padding: 1px 5px; }
.fr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fr-who b { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.fr-who small { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fr-who small.online { color: #16a34a; font-weight: 700; }
[data-theme='dark'] .fr-who small.online { color: #4ade80; }
.daily-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 8px; font-weight: 700; background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal); }
[data-theme='dark'] .daily-chip { color: #5eead4; }
.daily-chip.no { background: var(--surface-2); color: var(--faint); font-weight: 500; }
.btn.sm { width: auto; height: 38px; padding: 0 12px; font-size: 15px; border-radius: 13px; box-shadow: 0 2px 0 var(--cd); --sy: 2px; --press-shadow: 0 0 0 var(--cd); }
.btn.sm .vs-text { font-size: 15px; }
.round-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; flex: none; color: #fff; background: var(--teal); box-shadow: 0 2px 0 var(--teal-edge); --sy: 2px; --press-shadow: 0 0 0 var(--teal-edge); }
.round-btn.no { background: var(--surface-2); color: var(--muted); box-shadow: 0 2px 0 var(--edge); --press-shadow: 0 0 0 var(--edge); }
.or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.fr-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 8px 0; }

/* ===== Icons ===== */
#icons { padding: 16px 14px 24px; gap: 14px; }
#icons h1 { font: 700 26px var(--f-display); }
#icons > p { color: var(--muted); font-size: 14px; margin-top: -8px; }
.icon-opt { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 3px 0 var(--edge); padding: 16px; }
.icon-opt h3 { font: 600 19px var(--f-display); }
.icon-opt p { color: var(--muted); font-size: 13px; margin: 2px 0 14px; }
.icon-sizes { display: flex; align-items: flex-end; gap: 14px; }
.icon-sizes svg { display: block; filter: drop-shadow(0 6px 10px #1e215040); }
.launcher { margin-inline-start: auto; text-align: center; font-size: 11px; color: var(--muted); }
.launcher .wall { width: 88px; height: 88px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(160deg, #2d5b8a, #8e5a9b); margin-bottom: 5px; }

/* ===== Overlays ===== */
.overlay { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: #0e112880; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.overlay.open { opacity: 1; visibility: visible; }
.overlay.center { align-items: center; justify-content: center; padding: 20px; }
.sheet {
  width: 100%; max-height: 92%; overflow-y: auto; background: var(--surface); border-radius: 30px 30px 0 0; padding: 10px 20px 26px;
  border-top: 4px solid var(--frame); translate: 0 100%; transition: translate .32s cubic-bezier(.2, .9, .3, 1.12);
}
.overlay.open .sheet { translate: 0 0; }
.grab { width: 44px; height: 5px; border-radius: 5px; background: var(--border); margin: 0 auto 16px; }
.sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sheet-head .big-ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; color: #fff; flex: none; }
.sheet-head h2 { font: 700 23px var(--f-display); }
.sheet-head small { color: var(--muted); font-size: 14px; }
.sheet-head .circle { margin-inline-start: auto; }
.mode-banner { border-radius: 20px; padding: 14px; background: color-mix(in srgb, var(--amber) 16%, var(--surface)); display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.mode-banner i { font-size: 32px; color: var(--amber-text); }
.mode-banner b { font: 600 17px var(--f-display); }
.mode-banner p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.rule { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface-2); font-size: 14px; font-weight: 500; }
.rule i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; flex: none; color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, transparent); }
.sec-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font: 600 16px var(--f-display); }
.diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.diff { padding: 14px 6px 12px; border-radius: 20px; color: #fff; text-align: center; --sy: 2px; }
.diff i { font-size: 30px; }
.diff b { display: block; font: 600 19px var(--f-display); margin: 4px 0; }
.diff small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: #0000002e; padding: 3px 8px; border-radius: 999px; }
.diff.e { background: linear-gradient(160deg, var(--teal), var(--teal-d)); box-shadow: 0 3px 0 var(--teal-edge); --press-shadow: 0 1px 0 var(--teal-edge); }
.diff.m { background: var(--amber); color: var(--on-amber); box-shadow: 0 3px 0 var(--amber-d); --press-shadow: 0 1px 0 var(--amber-d); }
.diff.h { background: linear-gradient(160deg, #f43f8e, #be185d); box-shadow: 0 3px 0 #831843; --press-shadow: 0 1px 0 #831843; }
.room { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--surface-2); margin-bottom: 8px; }
.room .face { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 17px var(--f-display); }
.room .grow { flex: 1; }
.room small { color: var(--muted); font-size: 12px; display: block; }
.room .btn { width: auto; height: 38px; font-size: 15px; border-radius: 12px; padding: 0 14px; box-shadow: 0 3px 0 var(--cd); }
.set-label { font-weight: 700; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.theme-seg { margin-bottom: 14px; }
.theme-seg button { font-size: 14px; }
.set-row { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--border); }
.set-row:last-of-type { border: 0; }
.set-row .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex: none; color: var(--rc); background: color-mix(in srgb, var(--rc) 15%, transparent); }
.set-row span { flex: 1; font-weight: 500; }
.about { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.dialog { width: 100%; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 16px; scale: .9; transition: scale .2s; }
.overlay.open .dialog { scale: 1; }
.dialog h3 { font: 600 19px var(--f-display); }
.dialog .row { display: flex; gap: 10px; }
.dialog .btn { height: 48px; font-size: 17px; border-radius: 14px; box-shadow: 0 3px 0 var(--cd); }

/* Challenge a friend */
#chAvatar .fr-av { width: 54px; height: 54px; font-size: 22px; }
.diffs.pickable .diff { opacity: .5; transition: opacity .15s, outline-color .15s; outline: 3px solid transparent; outline-offset: 3px; }
.diffs.pickable .diff[aria-pressed="true"] { opacity: 1; outline-color: var(--text); }

/* Duel end */
.duel-end { width: 100%; background: var(--surface); border: 4px solid var(--frame); border-radius: 30px; padding: 24px 18px 18px; text-align: center; scale: .85; transition: scale .3s cubic-bezier(.2, 1.4, .4, 1); }
.overlay.open .duel-end { scale: 1; }
.duel-end h2 { font: 700 30px var(--f-display); }
.duel-end .sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.de-players { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 14px; }
.de-vs { color: var(--c-duel); font-size: 22px; }
.de-p { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 20px; background: var(--surface-2); position: relative; }
.de-p.winner { background: color-mix(in srgb, var(--amber) 20%, var(--surface)); box-shadow: inset 0 0 0 2px var(--amber); }
.de-p .crown { position: absolute; top: -16px; font-size: 26px; color: var(--amber); filter: drop-shadow(0 2px 0 var(--amber-d)); }
.de-p .fr-av { width: 52px; height: 52px; font-size: 22px; }
.de-p b { font-weight: 700; display: flex; align-items: center; gap: 5px; }
.de-p .t { font: 600 20px var(--f-display); font-variant-numeric: tabular-nums; }
.de-p small { font-size: 12px; color: var(--muted); }
.de-prog { width: 80%; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 2px; }
.de-prog .xp-track { width: 100%; height: 8px; flex: none; }
.de-prog .xp-fill { box-shadow: none; background: var(--faint); }
.de-prog span { font: 600 14px var(--f-display); color: var(--muted); }
.de-xp { font: 600 15px var(--f-display); color: var(--c-classic); margin-bottom: 14px; }
#deFriend { margin-bottom: 12px; }
#deFriend .btn { height: 48px; font-size: 17px; --c: var(--surface); --cd: var(--edge); --fg: var(--c-classic); border: 2px solid var(--c-classic); }
.friend-state { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 14px; background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); font: 600 15px var(--f-display); }
[data-theme='dark'] .friend-state { color: #5eead4; }
.duel-end .row { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }

/* Random roll */
.roll-card { width: 100%; max-width: 330px; background: var(--surface); border: 4px solid var(--frame); border-radius: 30px; padding: 26px 18px 22px; text-align: center; scale: .85; transition: scale .25s cubic-bezier(.2, 1.4, .4, 1); }
.overlay.open .roll-card { scale: 1; }
.roll-die { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 26px; display: grid; place-items: center; font-size: 62px; color: #fff; background: linear-gradient(160deg, var(--purple), var(--purple-d)); box-shadow: 0 3px 0 var(--purple-edge); }
.roll-die.spinning { animation: dieSpin .45s linear infinite, dieHop .3s ease-in-out infinite alternate; }
.roll-die.landed { animation: dieLand .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes dieSpin { to { rotate: 360deg; } }
@keyframes dieHop { to { translate: 0 -10px; } }
@keyframes dieLand { from { scale: 1.25; } }
.roll-title { font: 700 24px var(--f-display); margin-bottom: 14px; }
.roll-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.roll-chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--surface-2); border: 1px solid var(--border); font: 600 15px var(--f-display); min-width: 64px; justify-content: center; }
.roll-chip.variant { background: var(--vc, var(--indigo)); border-color: transparent; color: #fff; }
.roll-chip.pop { animation: chipPop .35s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.roll-chip.pop:nth-child(2) { animation-delay: .08s; } .roll-chip.pop:nth-child(3) { animation-delay: .16s; }
@keyframes chipPop { from { scale: .4; opacity: 0; } }
.rand-icon.rolling i { animation: dieSpin .45s linear infinite; }
.variant-tag { position: absolute; top: -13px; left: 50%; translate: -50% 0; z-index: 5; height: 26px; padding: 0 12px; border-radius: 13px; display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 600 13px var(--f-display); color: #fff; background: var(--vc); box-shadow: 0 2px 0 #0003; }
.variant-tag[hidden] { display: none; }

/* Win */
.win { width: 100%; background: var(--surface); border-radius: 30px; border: 4px solid var(--frame); padding: 70px 20px 20px; text-align: center; position: relative; scale: .7; opacity: 0; transition: scale .4s cubic-bezier(.2, 1.4, .4, 1), opacity .2s; }
.overlay.open .win { scale: 1; opacity: 1; }
.win .medal { position: absolute; top: -56px; left: 50%; margin-left: -56px; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; font-size: 58px; color: var(--on-amber); background: radial-gradient(circle at 35% 30%, #ffe08a, var(--amber) 55%, var(--amber-d)); box-shadow: 0 4px 0 #8a5600, 0 0 0 10px var(--surface), 0 0 30px #ffb02088; }
.win h2 { font: 700 32px var(--f-display); }
.win .sub { color: var(--muted); margin-top: 4px; }
.win .stars3 { display: flex; justify-content: center; gap: 6px; margin: 14px 0; font-size: 44px; color: var(--amber); }
.win .stars3 i { filter: drop-shadow(0 3px 0 var(--amber-d)); animation: starIn .5s backwards cubic-bezier(.2, 1.6, .4, 1); }
.win .stars3 i:nth-child(2) { animation-delay: .15s; font-size: 56px; margin-top: -10px; }
.win .stars3 i:nth-child(3) { animation-delay: .3s; }
@keyframes starIn { from { scale: 0; rotate: -60deg; } }
.win .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.win .stats div { background: var(--surface-2); border-radius: 16px; padding: 10px 4px; }
.win .stats b { display: block; font: 600 20px var(--f-display); }
.win .stats small { color: var(--muted); font-size: 12px; }
.win .row { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 31; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(950px) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Left-to-right (English): icons drawn for a right-to-left layout point the other way ===== */
html[dir="ltr"] .ph-caret-left, html[dir="ltr"] .ph-arrow-left { transform: scaleX(-1); }

/* ===== Journey: locked box, key, multipliers ===== */
.cell.m-lock { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--amber) 16%, var(--surface)) 0 6px, var(--surface) 6px 12px); cursor: not-allowed; position: relative; }
.cell.m-key { background: color-mix(in srgb, var(--amber) 28%, var(--surface)); box-shadow: inset 0 0 0 2px var(--amber); position: relative; }
.cell.m-mult { position: relative; }
.cell .mult { position: absolute; top: 1px; inset-inline-end: 2px; font: 700 calc(var(--cell) * .24) / 1 var(--f-display); color: #fff; background: var(--purple); border-radius: 6px; padding: 1px 3px; pointer-events: none; }
html[dir="ltr"] .lv-mk { translate: -50% 0; }

/* ===== Country picker ===== */
.cp-list { max-height: 50dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cp-list button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-align: start; font-weight: 500; }
.cp-list button[aria-pressed="true"] { background: var(--surface-2); font-weight: 700; }
.cp-list .fi { width: 24px; height: 18px; border-radius: 3px; flex: none; }
.lb-list:empty { display: none; }
.fr-hint { font-size: 13px; color: var(--muted); margin-bottom: 8px; }