/* Layout: a scoreboard. Wordmark and stat readouts on top, a segmented tab bar, then the purple "up next" block and a stepped ladder of five ranks that narrows from #1 down. */
:root {
  --bg: #FFFFFF;
  --panel: #F4F2FA;
  --panel2: #E9E5F4;
  --ink: #0B0A12;
  --muted: #5E5973;
  --line: #DCD6EA;
  --accent: #7B2FFF;
  --on-accent: #FFFFFF;
  --accent-soft: #DCCBFF;
  --on-soft: #2E0A73;
  --accent-wash: #F4EEFF;
  --chip-grey: #E8E5EF;
  --on-grey: #2F2B3D;
  --fill-grey: #ABA5BF;
  --display: "Big Shoulders Display", "Oswald", "Arial Narrow", Impact, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --panel: #110F18; --panel2: #1C1928; --ink: #FFFFFF; --muted: #A7A1BC; --line: #2C2840;
    --accent: #8F4DFF; --on-accent: #FFFFFF; --accent-soft: #3A1F7A; --on-soft: #EBDDFF; --accent-wash: #160A33;
    --chip-grey: #24212F; --on-grey: #C9C4D8; --fill-grey: #4E4866;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --panel: #110F18; --panel2: #1C1928; --ink: #FFFFFF; --muted: #A7A1BC; --line: #2C2840;
  --accent: #8F4DFF; --on-accent: #FFFFFF; --accent-soft: #3A1F7A; --on-soft: #EBDDFF; --accent-wash: #160A33;
  --chip-grey: #24212F; --on-grey: #C9C4D8; --fill-grey: #4E4866;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.45;
  padding-block: 18px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-x: hidden;
}
.wrap { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.view { display: flex; flex-direction: column; gap: 16px; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, .tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Header */
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; }
.mark { width: 30px; height: 30px; flex: none; }
.mark rect { fill: var(--ink); }
.mark rect.b { fill: var(--accent); }
h1 { font-family: var(--display); font-weight: 900; font-size: 36px; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; margin: 0; }
.meta { display: flex; gap: 6px; }
.mi { display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 5px 9px; border-radius: 10px; background: var(--panel); }
.ml { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mi b { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Tabs: segmented control with a sliding indicator */
.tabs { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 4px; border-radius: 14px; background: var(--panel); --ti: 0; --n: 3; }
.tabs .ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 10px; background: var(--accent); transform: translateX(calc(var(--ti) * 100%)); }
.tab { position: relative; z-index: 1; background: transparent; border: 0; min-height: 44px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--muted); }
.tab[aria-pressed="true"] { color: var(--on-accent); }

h2 { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: 0.01em; margin: 0; text-wrap: balance; }
.intro { margin: 0; color: var(--muted); max-width: 65ch; font-size: 15px; }
.tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }

/* Prompt */
.prompt { background: var(--panel); border-radius: 18px; padding: 18px; min-width: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--ink); }
.chips .pill:first-child { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill.practice { border-color: var(--accent); color: var(--accent); }
.ends { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.end { font-family: var(--mono); padding: 3px 10px; border-radius: 8px; background: var(--bg); color: var(--muted); }

/* Up-next block */
.cur { background: var(--accent); color: var(--on-accent); border-radius: 18px; padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cur .tag { color: var(--on-accent); opacity: 0.8; margin: 0; }
.cur .name { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 9vw, 48px); line-height: 0.95; letter-spacing: 0.01em; overflow-wrap: anywhere; }

/* Ladder */
.slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.slots li { display: flex; }
.slot {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  background: transparent; border: 1.5px dashed var(--line); border-radius: 14px; padding: 8px 14px; min-height: 56px; width: 100%;
}
.slot .n { flex: none; font-family: var(--display); font-weight: 900; line-height: 1; color: var(--muted); min-width: 1.4em; font-variant-numeric: tabular-nums; }
.slot .t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.slot .t.e { color: var(--muted); font-weight: 500; }
.slot.r1 { min-height: 78px; } .slot.r1 .n { font-size: 40px; } .slot.r1 .t { font-size: 19px; }
.slot.r2 { width: 96%; min-height: 70px; } .slot.r2 .n { font-size: 34px; } .slot.r2 .t { font-size: 18px; }
.slot.r3 { width: 92%; min-height: 64px; } .slot.r3 .n { font-size: 29px; } .slot.r3 .t { font-size: 17px; }
.slot.r4 { width: 88%; min-height: 58px; } .slot.r4 .n { font-size: 25px; } .slot.r4 .t { font-size: 16px; }
.slot.r5 { width: 84%; min-height: 54px; } .slot.r5 .n { font-size: 22px; } .slot.r5 .t { font-size: 15px; }
.slot.filled { background: var(--panel); border: 1.5px solid var(--panel); }
.slot.filled .n { color: var(--ink); }
.slot.sel { background: var(--accent-wash); border: 2px solid var(--accent); }
.slot.sel .n, .slot.sel .t { color: var(--accent); }
.slot:disabled { cursor: default; opacity: 1; }
.slot.swappable { cursor: pointer; border-color: var(--ink); }

/* Buttons */
button.primary {
  font-weight: 700; letter-spacing: 0.02em; cursor: pointer; width: 100%; min-height: 56px; padding: 14px 18px;
  background: var(--ink); color: var(--bg); border: 0; border-radius: 14px;
}
button.primary.accent { background: var(--accent); color: var(--on-accent); }
button.primary:disabled { background: var(--panel2); color: var(--muted); cursor: default; }
button.plain {
  font-weight: 600; cursor: pointer; background: transparent; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 16px; min-height: 50px; flex: 1 1 140px;
}
button.plain:disabled { opacity: 0.5; cursor: default; }
@media (hover: hover) {
  button.primary:not(:disabled):hover { box-shadow: 0 10px 24px -12px var(--accent); }
  button.plain:not(:disabled):hover, .item:hover, .navbtn:not(:disabled):hover, button.day:hover { border-color: var(--ink); }
  .slot:not(:disabled):hover { border-color: var(--accent); }
  .tab:not([aria-pressed="true"]):hover { color: var(--ink); }
}
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.msg { margin: 0; min-height: 22px; font-size: 15px; color: var(--muted); }

/* Results */
.result { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.scorebox { background: var(--ink); color: var(--bg); border-radius: 18px; padding: 16px 20px 18px; display: flex; flex-direction: column; }
.scorebox .tag { color: inherit; opacity: 0.7; margin: 0; }
.score { font-family: var(--display); font-weight: 900; font-size: 92px; line-height: 0.9; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.score small { font-size: 30px; opacity: 0.6; font-weight: 800; }
.result.perfect .scorebox { background: var(--accent); color: var(--on-accent); }
.verdict { margin: 0; font-weight: 700; font-size: 18px; }
.match { margin: 0; font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--accent); }
.reveal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 10px 12px; background: var(--panel); flex-wrap: wrap; min-width: 0; }
.row .rk { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 22px; }
.row .nm { flex: 1 1 120px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.row .val { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.chip { font-family: var(--mono); font-size: 12px; font-weight: 500; border-radius: 999px; padding: 3px 10px; border: 1.5px solid transparent; }
.c0 { background: var(--accent); color: var(--on-accent); }
.c1 { background: var(--accent-soft); color: var(--on-soft); }
.c2 { background: transparent; border-color: var(--accent); color: var(--accent); }
.c3 { background: var(--chip-grey); color: var(--on-grey); }
.crowd { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.hist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.hc { display: flex; flex-direction: column; gap: 3px; align-items: stretch; min-width: 0; }
.hc .pc { font-family: var(--mono); font-size: 11px; text-align: center; color: var(--muted); min-height: 14px; }
.hbar { position: relative; height: 40px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.hbar .fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--fill-grey); }
.hc.right .fill { background: var(--accent); }
.hc.right .pc { color: var(--accent); font-weight: 700; }
.hc.mine .hbar { outline: 2px solid var(--ink); outline-offset: -2px; }
.hc .lb { font-family: var(--mono); font-size: 11px; text-align: center; color: var(--muted); white-space: nowrap; }
.hc.mine .lb { color: var(--ink); font-weight: 700; }
.crowdline { margin: 0; font-size: 13px; color: var(--muted); }
.fact { margin: 0; font-size: 15px; padding: 14px 16px; border-radius: 14px; background: var(--accent-wash); }
.share { font-family: var(--mono); font-size: 14px; white-space: pre-wrap; background: var(--panel); border-radius: 12px; padding: 12px 14px; user-select: all; overflow-wrap: anywhere; }
.small { margin: 0; font-size: 13px; color: var(--muted); }
.note { margin: 0; font-size: 13px; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 10px; }

/* Archive */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; background: var(--panel); border: 1.5px solid var(--panel); border-radius: 14px; padding: 12px 14px; min-height: 58px; }
.item .when { font-family: var(--mono); font-size: 12px; flex: none; width: 78px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.item .what { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.item .sc { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); }

/* Calendar */
.calhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calhead h2 { flex: 1; text-align: center; }
.navbtn { font-weight: 700; width: 48px; height: 48px; cursor: pointer; background: var(--panel); border: 1.5px solid var(--panel); border-radius: 12px; }
.navbtn:disabled { opacity: 0.35; cursor: default; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dow { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: center; padding-bottom: 2px; }
.day { min-height: 52px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 13px; background: var(--panel); border: 1.5px solid var(--panel); border-radius: 10px; padding: 2px; font-variant-numeric: tabular-nums; }
button.day { cursor: pointer; }
.day.blank { background: transparent; border-color: transparent; }
.day.played { background: var(--accent-soft); background: color-mix(in srgb, var(--accent) var(--h, 60%), var(--panel)); border-color: transparent; color: var(--ink); }
.day.played.hot { color: var(--on-accent); }
.day.today { outline: 2px solid var(--ink); outline-offset: -2px; }
.day.future { opacity: 0.35; }
.day .ds { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1; min-height: 16px; }
.legend { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.legend .ramp { width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, var(--panel)), var(--accent)); }

/* Stats */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { border-radius: 16px; background: var(--panel); padding: 14px 16px; min-width: 0; }
.tile .v { font-family: var(--display); font-weight: 900; font-size: 48px; line-height: 0.95; font-variant-numeric: tabular-nums; }
.tile .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.tile:last-child { grid-column: 1 / -1; background: var(--accent); color: var(--on-accent); }
.tile:last-child .k { color: var(--on-accent); opacity: 0.8; }
.chartcard { background: var(--panel); border-radius: 16px; padding: 16px; }
.dist { display: flex; flex-direction: column; gap: 10px; }
.dr { display: grid; grid-template-columns: 52px 1fr 28px; gap: 10px; align-items: center; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.dr .track { height: 22px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.dr .bar { height: 100%; background: var(--accent); border-radius: 6px; }
.dr .ct { text-align: right; font-weight: 700; }

.sectionhead { margin-top: 10px; }
.rankline { margin: 0; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink); }
.result:focus { outline: none; }

/* Leaderboard */
.boardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.boardhead .count { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.nickcard { background: var(--panel); border-radius: 16px; padding: 14px 16px; }
#nickform { display: flex; flex-direction: column; gap: 8px; }
.nickrow { display: flex; gap: 8px; }
.nickrow input { flex: 1 1 auto; min-width: 0; font: inherit; font-weight: 600; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 52px; }
.nickrow input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nickrow .primary { width: auto; min-height: 52px; padding: 10px 20px; flex: none; }
.nickmsg { margin: 0; font-size: 14px; font-weight: 600; }
.nickmsg:empty { display: none; }
#nickcancel { align-self: flex-start; flex: none; min-height: 44px; }
#nickshow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#nickshow b { font-weight: 800; }
#nickshow .plain { flex: none; min-height: 44px; }
.subtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sub { min-height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: transparent; font-weight: 600; font-size: 14px; cursor: pointer; }
.sub[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lbrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; background: var(--panel); border-radius: 12px; padding: 10px 14px 10px 8px; min-height: 54px; }
.lbrow .pos { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.lbrow .who { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.lbrow .sub2 { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.lbrow .val { font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.lbrow.p1 .pos { color: var(--accent); }
.lbrow.me { background: var(--accent); color: var(--on-accent); }
.lbrow.me .pos, .lbrow.me .sub2 { color: var(--on-accent); }
.lbgap { text-align: center; color: var(--muted); font-family: var(--mono); line-height: 1; }
.empty { margin: 0; background: var(--panel); border-radius: 14px; padding: 20px 16px; text-align: center; color: var(--muted); }
@media (hover: hover) { .sub:not([aria-pressed="true"]):hover { border-color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) { .sub { transition: transform 0.12s ease; } .sub:active { transform: scale(0.98); } }

/* Countdown, beat line, badges, settings, toast */
.beat { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--on-soft); font-weight: 700; font-size: 16px; }
.nextbox { background: var(--panel); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.nextbox .tag { margin: 0; }
.countdown { margin: 0; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.teaser { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.nextbox .primary { margin-top: 8px; }
.badgehead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.badgehead .tag { margin: 0; }
.badges { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.badge { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bart { width: 52px; height: 52px; flex: none; }
.bart .hex { fill: var(--panel2); }
.bart .hex2 { fill: none; stroke: var(--line); stroke-width: 2; }
.bart .glyph { fill: var(--muted); font-family: var(--display); font-weight: 900; }
.bart.on .hex { fill: var(--accent); }
.bart.on .hex2 { stroke: var(--on-accent); stroke-opacity: 0.45; }
.bart.on .glyph { fill: var(--on-accent); }
.btx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bname { font-weight: 800; }
.badge:not(.on) .bname { color: var(--muted); }
.bdesc { font-size: 13px; color: var(--muted); }
.bprog { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bbar { flex: 1 1 auto; max-width: 160px; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.bfill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.bnum, .bdone { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.bdone { color: var(--accent); font-weight: 700; }
.settings { display: flex; flex-direction: column; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: transparent; border: 0; padding: 10px 0; min-height: 58px; cursor: pointer; text-align: left; }
.switch + .switch { border-top: 1px solid var(--line); }
.sw-label { display: flex; flex-direction: column; font-weight: 700; }
.sw-sub { font-weight: 500; font-size: 13px; color: var(--muted); }
.sw-track { position: relative; width: 50px; height: 30px; border-radius: 15px; background: var(--panel2); border: 1.5px solid var(--line); flex: none; }
.sw-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--muted); }
.switch[aria-checked="true"] .sw-track { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .sw-knob { transform: translateX(20px); background: var(--on-accent); }
.toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; width: min(420px, calc(100% - 32px)); background: var(--ink); color: var(--bg); border-radius: 16px; padding: 10px 16px 10px 10px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45); cursor: pointer; }
.toast .bart { width: 46px; height: 46px; }
.toast .ttx { display: flex; flex-direction: column; min-width: 0; }
.toast .tag { margin: 0; color: inherit; opacity: 0.7; }
.toast .tname { font-weight: 800; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .sw-knob { transition: transform 0.2s ease; }
  .sw-track { transition: background 0.2s; }
  .toast.pop { animation: toastin 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
  @keyframes toastin { from { transform: translate(-50%, 30px) scale(0.9); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
  .toast.pop .bart { animation: spinin 0.6s ease-out; }
  @keyframes spinin { from { transform: rotate(-120deg) scale(0.4); } to { transform: none; } }
}

/* Packs, hard mode, explainer */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: transparent; cursor: pointer; }
.pack .pk-name { font-family: var(--display); font-weight: 900; font-size: 20px; line-height: 1; letter-spacing: 0.01em; }
.pack .pk-stat { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pack[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pack[aria-pressed="true"] .pk-stat { color: var(--bg); opacity: 0.75; }
@media (hover: hover) { .pack:not([aria-pressed="true"]):hover { border-color: var(--ink); } }
.hardstart { background: var(--panel); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.hardstart p { margin: 0; }
.hardstart .tag { margin: 0; color: var(--accent); }
.pill.hardpill { border-color: var(--accent); color: var(--accent); }
.timer { display: flex; align-items: center; gap: 10px; }
.tbar { flex: 1; height: 10px; border-radius: 5px; background: var(--panel2); overflow: hidden; }
.tfill { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 5px; }
.timer.low .tfill { background: var(--ink); }
.tnum { font-family: var(--display); font-weight: 900; font-size: 22px; min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }
.timer.rm .tbar { display: none; }
.timer.rm .tnum { font-size: 28px; text-align: left; }
.scorehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hpill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1.5px solid currentColor; }
.hmark { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 4px; border: 1.5px solid currentColor; vertical-align: 2px; }
.row { padding: 0; display: block; }
.rowbtn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; background: transparent; border: 0; border-radius: 14px; padding: 10px 12px; text-align: left; cursor: pointer; min-width: 0; }
.rowbtn .caret { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 4px 4px auto; flex: none; }
.row.open .rowbtn .caret { transform: rotate(-135deg); margin-bottom: -2px; }
.row .crowd { padding: 0 12px 12px; }
.explain { margin: 0 12px 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.explain p { margin: 0; }
.exval { font-weight: 800; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.exval .tag { margin: 0; }
.exfact { font-size: 15px; }
.exsrc { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.day { min-height: 60px; }
.day .dp { font-family: var(--mono); font-size: 10px; line-height: 1; min-height: 10px; }
.day .hm::after { content: "H"; font-family: var(--mono); font-size: 9px; vertical-align: super; margin-left: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .pack { transition: transform 0.12s ease, border-color 0.15s; }
  .pack:active { transform: scale(0.98); }
  .tfill { transition: width 0.1s linear; }
  .rowbtn .caret { transition: transform 0.2s ease; }
}

/* Labels on the ladder, two-list results, share card */
.slot .t { display: flex; flex-direction: column; gap: 1px; }
.slot .tm { font-weight: 700; overflow-wrap: anywhere; }
.slot .tl { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.slot.sel .tl { color: var(--accent); }
.hardstart .ready-big { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.05; }
.rsec { display: flex; flex-direction: column; gap: 8px; }
.rhead { margin: 6px 0 0; font-family: var(--display); font-weight: 900; font-size: 24px; letter-spacing: 0.01em; }
.rsec .small { margin: 0; }
.mine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); }
.mpos .mn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--ink); font-family: var(--display); font-weight: 900; font-size: 22px; }
.mbody { display: flex; flex-direction: column; min-width: 0; }
.mlab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.mname { font-weight: 700; overflow-wrap: anywhere; }
.mright { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.track5 { display: grid; grid-template-columns: repeat(5, 12px); gap: 3px; }
.t5 { position: relative; width: 12px; height: 12px; border-radius: 3px; background: var(--panel2); }
.t5.path::before, .t5.pstart::after, .t5.pend::before { content: ""; position: absolute; top: 5px; height: 2px; background: var(--muted); }
.t5.path::before { left: -3px; right: -3px; }
.t5.pstart::after { left: 12px; width: 3px; }
.t5.pend::before { left: -3px; width: 3px; }
.t5.true { background: var(--accent); }
.t5.you { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.t5.you.true { background: var(--accent); box-shadow: inset 0 0 0 2px var(--ink); }
.legend5 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.legend5 .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.legend5 .lg.you { box-shadow: inset 0 0 0 2px var(--ink); margin-left: 0; }
.legend5 .lg.true { background: var(--accent); margin-left: 8px; }
.nmw { display: flex; flex-direction: column; min-width: 0; flex: 1 1 120px; }
.nmw .nm { flex: none; font-weight: 700; overflow-wrap: anywhere; }
.rowbtn { flex-wrap: nowrap; }
.rowbtn .val { flex: none; text-align: right; }
.rlab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.exyou { font-weight: 600; }
.explain .crowd { padding: 4px 0 0; flex: none; }
.sharecard { background: var(--ink); color: var(--bg); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.sc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-mark { width: 22px; height: 22px; }
.sc-mark rect { fill: var(--bg); }
.sc-mark rect.b { fill: var(--accent); }
.sc-brand { font-family: var(--display); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 0.03em; }
.sc-meta { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.sc-title { margin: 4px 0 0; font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.sc-mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc-score { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 0.95; font-variant-numeric: tabular-nums; }
.sc-score small { font-size: 26px; opacity: 0.6; }
.perfect .sc-score { color: var(--accent); }
.sc-sq { display: flex; gap: 6px; }
.sq { width: 30px; height: 30px; border-radius: 7px; }
.sq.c0 { background: var(--accent); }
.sq.c1 { background: var(--accent-soft); }
.sq.c2 { background: transparent; box-shadow: inset 0 0 0 3px var(--accent); }
.sq.c3 { background: var(--fill-grey); opacity: 0.6; }
.sc-foot { margin: 0; font-weight: 700; font-size: 15px; }
.row-actions .plain { flex: 1 1 130px; }

/* Closeness scale: exact, 1 off, 2 off, 3+ off */
:root {
  --s0: #12A150; --s1: #E0A800; --s2: #F07A1A; --s3: #E5484D;
  --s0-tint: #E4F8EC; --s1-tint: #FFF5D1; --s2-tint: #FFEBDA; --s3-tint: #FDE5E6;
  --on-score: #0B0A12;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s0: #2BD97A; --s1: #FFD23F; --s2: #FF9442; --s3: #FF6369;
    --s0-tint: #0E2A1B; --s1-tint: #2C2408; --s2-tint: #2E1A0B; --s3-tint: #301214;
  }
}
:root[data-theme="dark"] {
  --s0: #2BD97A; --s1: #FFD23F; --s2: #FF9442; --s3: #FF6369;
  --s0-tint: #0E2A1B; --s1-tint: #2C2408; --s2-tint: #2E1A0B; --s3-tint: #301214;
}
.chip.c0 { background: var(--s0); color: var(--on-score); border-color: var(--s0); }
.chip.c1 { background: var(--s1); color: var(--on-score); border-color: var(--s1); }
.chip.c2 { background: var(--s2); color: var(--on-score); border-color: var(--s2); }
.chip.c3 { background: var(--s3); color: var(--on-score); border-color: var(--s3); }
.mrow { box-shadow: inset 5px 0 0 var(--edge, transparent); padding-left: 16px; }
.mrow.d0 { background: var(--s0-tint); --edge: var(--s0); }
.mrow.d1 { background: var(--s1-tint); --edge: var(--s1); }
.mrow.d2 { background: var(--s2-tint); --edge: var(--s2); }
.mrow.d3 { background: var(--s3-tint); --edge: var(--s3); }
.mrow .t5 { background: var(--bg); }
.mrow .t5.true { background: var(--edge); }
.mrow .t5.you { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.mrow .t5.you.true { background: var(--edge); }
.legend5 .lg.true { background: var(--muted); }
.sq.c0 { background: var(--s0); box-shadow: none; opacity: 1; }
.sq.c1 { background: var(--s1); box-shadow: none; opacity: 1; }
.sq.c2 { background: var(--s2); box-shadow: none; opacity: 1; }
.sq.c3 { background: var(--s3); box-shadow: none; opacity: 1; }

/* Help button */
.helpbtn { width: 44px; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel); font-family: var(--display); font-weight: 900; font-size: 22px; cursor: pointer; align-self: stretch; }
.helpbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .helpbtn:hover { border-color: var(--ink); } }
.howrow .howarrow { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); margin-right: 6px; }
.switch.howrow + .switch { border-top: 1px solid var(--line); }
body.noscroll { overflow: hidden; }

/* How to Play walkthrough */
.howto { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(11, 10, 18, 0.62);
  padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.ht-card { width: min(460px, 100%); max-height: 100%; overflow-y: auto; background: var(--bg); color: var(--ink); border-radius: 22px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); }
.ht-top { display: flex; justify-content: space-between; align-items: center; }
.ht-top .tag { margin: 0; }
.ht-skip { background: transparent; border: 0; color: var(--muted); font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 6px; }
.ht-skip:focus-visible, .ht-dots button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.ht-slide { display: flex; flex-direction: column; gap: 10px; }
.ht-slide h2 { font-size: 34px; line-height: 1; }
.ht-slide p { margin: 0; font-size: 16px; color: var(--ink); }
.ht-demo { position: relative; height: 150px; border-radius: 16px; background: var(--panel); overflow: hidden; }
.ht-dots { display: flex; justify-content: center; gap: 4px; }
.ht-dots button { background: transparent; border: 0; padding: 10px 6px; cursor: pointer; }
.ht-dots span { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--line); }
.ht-dots span.on { width: 22px; background: var(--accent); }
.ht-nav { display: flex; gap: 8px; }
.ht-nav .plain { flex: 0 0 auto; min-width: 96px; }
.ht-nav .primary { flex: 1; width: auto; }
/* demo 1: an item slides into a rung */
.demo-ladder { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.dm-item { position: absolute; right: 12px; top: 12px; z-index: 2; background: var(--accent); color: var(--on-accent); font-family: var(--display); font-weight: 900; font-size: 18px; padding: 6px 12px; border-radius: 10px; opacity: 0; }
.dm-rung { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1.5px dashed var(--line); background: var(--bg); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.dm-rung b { font-family: var(--display); font-weight: 900; font-size: 20px; color: var(--muted); }
.dm-rung.r1 { width: 100%; } .dm-rung.r2 { width: 94%; } .dm-rung.r3 { width: 88%; }
.dm-rung.r2 { border: 1.5px solid var(--panel); background: var(--panel2); }
.dm-rung.r2 b { color: var(--ink); }
.dm-rung .dm-fill { font-family: var(--body); font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.dm-rung .dm-lab { display: none; }
/* demo 2: timer */
.demo-timer { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px 18px; }
.dm-start { align-self: flex-start; background: var(--accent); color: var(--on-accent); font-weight: 700; padding: 8px 18px; border-radius: 10px; }
.dm-bar { height: 12px; border-radius: 6px; background: var(--panel2); overflow: hidden; }
.dm-bar span { display: block; height: 100%; width: 60%; background: var(--accent); border-radius: 6px; }
.dm-secs { font-family: var(--display); font-weight: 900; font-size: 28px; align-self: flex-end; margin-top: -48px; }
/* demo 3: scoring chips */
.demo-score { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; align-content: center; }
.dm-chip { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; font-weight: 700; color: var(--on-score); }
.dm-chip b { font-family: var(--display); font-weight: 900; font-size: 22px; }
.dm-chip.d0 { background: var(--s0); } .dm-chip.d1 { background: var(--s1); } .dm-chip.d2 { background: var(--s2); } .dm-chip.d3 { background: var(--s3); }
/* demo 4: packs */
.demo-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; align-content: center; }
.dm-pack { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); font-family: var(--display); font-weight: 900; font-size: 22px; }
.dm-pack small { font-family: var(--mono); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.dm-pack.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dm-pack.on small { color: var(--bg); opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
  .ht-slide.in-r { animation: htr 0.32s ease-out; }
  .ht-slide.in-l { animation: htl 0.32s ease-out; }
  @keyframes htr { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes htl { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
  .ht-dots span { transition: width 0.25s ease, background 0.25s; }
  .demo-ladder .dm-item { animation: dmItem 3.2s ease-in-out infinite; }
  .demo-ladder .dm-rung.r2 .dm-fill { animation: dmFill 3.2s ease-in-out infinite; }
  .demo-ladder .dm-rung.r2 { animation: dmRung 3.2s ease-in-out infinite; }
  @keyframes dmItem { 0%, 10% { opacity: 1; transform: translate(0, 0); } 45% { opacity: 1; transform: translate(-150px, 44px) scale(0.9); } 55%, 100% { opacity: 0; transform: translate(-150px, 44px) scale(0.9); } }
  @keyframes dmFill { 0%, 48% { opacity: 0; } 55%, 92% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes dmRung { 0%, 48% { background: var(--bg); border: 1.5px dashed var(--line); transform: none; } 52% { transform: scale(1.04); } 56%, 92% { background: var(--panel2); border: 1.5px solid var(--panel); transform: none; } 100% { background: var(--bg); } }
  .demo-timer .dm-bar span { animation: dmBar 4s linear infinite; }
  @keyframes dmBar { from { width: 100%; } to { width: 0%; } }
}

/* Clearer result wording */
.breakdown { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; opacity: 0.8; white-space: pre-wrap; }
.mwhere { font-size: 13px; color: var(--ink); opacity: 0.8; overflow-wrap: anywhere; }
.mwhere b { font-weight: 800; }
.mname { margin-bottom: 2px; }
.legend5 .lgnote { color: var(--muted); }

.pill.special { background: var(--s2); border-color: var(--s2); color: var(--on-score); }

/* Themes tab, bonus links, daily heading */
.tab { font-size: 13.5px; padding: 8px 2px; }
.gamehead { font-size: 30px; line-height: 1; margin: 0; }
.backlink { align-self: flex-start; background: transparent; border: 0; padding: 8px 2px; min-height: 44px; font-weight: 700; color: var(--accent); cursor: pointer; }
.backlink:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.bonus { display: flex; flex-direction: column; gap: 6px; }
.bonusbtn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; text-align: left; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--accent); background: var(--accent-wash); color: var(--ink); cursor: pointer; }
.bonusbtn .bn-lead { font-weight: 800; color: var(--accent); }
.bonusbtn .bn-name { font-weight: 700; }
.bonusbtn .bn-stat { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bonusbtn .bn-arrow { margin-left: auto; font-weight: 800; color: var(--accent); }
.themegrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .themegrid { grid-template-columns: 1fr 1fr; } }
.themecard { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; border-radius: 18px; border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; min-height: 140px; }
.themecard .tc-name { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.themecard .tc-desc { font-size: 14px; opacity: 0.9; }
.themecard .tc-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; }
.themecard .tc-stat { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.themecard.soon { background: var(--panel); color: var(--muted); cursor: default; border: 1.5px dashed var(--line); }
.themecard:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.packs.many { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: thin; }
.packs.many .pack { flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .themecard, .bonusbtn { transition: transform 0.12s ease; }
  .themecard:not(.soon):active, .bonusbtn:active { transform: scale(0.98); }
  @media (hover: hover) { .themecard:not(.soon):hover { transform: translateY(-2px); } }
}

/* Game name, archive, perfect-score moment */
h1 { font-size: clamp(26px, 8.5vw, 36px); line-height: 0.95; }
.ribbon { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--s0); color: var(--on-score); }
.scorebox.glow .score { text-shadow: 0 0 24px var(--accent), 0 0 48px var(--accent); }
.sharecard { position: relative; }
.sc-perfect { position: absolute; right: 16px; top: 52px; font-family: var(--display); font-weight: 900; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: var(--s0); color: var(--on-score); }
#fx.top { z-index: 95; }
.pfx { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(11, 10, 18, 0.72); cursor: pointer;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.pf-stamp { max-width: calc(100vw - 48px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 22px 16px; border: 6px solid #FFFFFF; border-radius: 18px; transform: rotate(-6deg); background: #8F4DFF; box-shadow: 0 0 0 6px #8F4DFF, 0 30px 80px -10px rgba(0, 0, 0, 0.7); }
.pf-word { font-family: var(--display); font-weight: 900; font-size: clamp(46px, 15vw, 110px); line-height: 0.9; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; }
.pf-sub { font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; }
.pfx.practice .pf-word { font-size: clamp(38px, 12vw, 84px); }
.pf-skip { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.pf-ring { position: fixed; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 6px solid #8F4DFF; opacity: 0; pointer-events: none; }
.pfx.go { animation: pfFade 0.25s ease-out; }
.pfx.out { opacity: 0; transition: opacity 0.25s ease; }
@keyframes pfFade { from { opacity: 0; } to { opacity: 1; } }
.mrow.flash { animation: rowFlash 0.7s ease-out both; animation-delay: var(--fd, 0ms); }
@keyframes rowFlash { 0% { box-shadow: inset 5px 0 0 var(--edge), 0 0 0 0 var(--s0); } 40% { box-shadow: inset 400px 0 0 var(--s0), 0 0 0 4px var(--s0); } 100% { box-shadow: inset 5px 0 0 var(--edge), 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .pfx.go .pf-stamp { animation: pfSlam 0.55s cubic-bezier(0.2, 1.6, 0.35, 1) both; }
  @keyframes pfSlam { 0% { transform: rotate(-6deg) scale(3.2); opacity: 0; } 60% { transform: rotate(-6deg) scale(0.92); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
  .pfx.go .pf-ring { animation: pfRing 1.1s ease-out 0.35s both; }
  @keyframes pfRing { 0% { opacity: 0.95; transform: scale(0.3); border-width: 10px; } 100% { opacity: 0; transform: scale(18); border-width: 1px; } }
  body.shake main { animation: pfShake 0.45s ease-in-out 0.38s both; }
  @keyframes pfShake { 0%, 100% { transform: none; } 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); } 45% { transform: translate(-4px, 2px); } 60% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, 1px); } }
  .scorebox.glow .score { transition: text-shadow 0.4s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .mrow.flash { animation: none; }
  .pf-ring { display: none; }
}

/* Today tab clean-up: hero, ready card, scale, pips, icons */
.hero { position: relative; overflow: hidden; background: var(--panel); border-radius: 20px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-eyebrow { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); position: relative; }
.hero-meta { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); position: relative; }
.hero-q { margin: 6px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 7.2vw, 34px); line-height: 1.02; letter-spacing: 0.01em; text-wrap: balance; padding-right: 64px; position: relative; }
.hero .chips { margin: 8px 0 0; position: relative; }
.hero .chips[hidden] { display: none; }
.hero-art { position: absolute; right: -8px; top: -6px; width: 104px; height: 104px; transform: rotate(-12deg); }
.hero-art::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 68%); }
.ticon { position: relative; width: 100%; height: 100%; display: block; }
.ticon .ia { fill: var(--accent); }
.ticon .ia2 { fill: color-mix(in srgb, var(--accent) 78%, var(--ink)); }
.ticon .ii { fill: var(--ink); }
.ticon .ib { fill: var(--bg); stroke: var(--bg); stroke-linecap: round; stroke-linejoin: round; }
.ticon path.ib[fill="none"] { fill: none; }
.ticon .ib2 { fill: var(--ink); }
.ticon .is { fill: none; stroke: var(--ink); stroke-width: 4; }
.play { gap: 12px; }
.ready { display: flex; align-items: center; gap: 14px; background: var(--panel); border-radius: 18px; padding: 14px; }
.ready-main { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ready-big { margin: 0; font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1.05; }
.startbtn { min-height: 52px; font-size: 18px; letter-spacing: 0.04em; }
.ready-demo { position: relative; flex: none; width: 64px; height: 84px; display: flex; flex-direction: column; gap: 4px; }
.rd-rung { display: block; height: 12px; border-radius: 4px; border: 1.5px dashed var(--line); background: var(--bg); }
.rd-rung:nth-child(2) { width: 94%; } .rd-rung:nth-child(3) { width: 88%; } .rd-rung:nth-child(4) { width: 82%; } .rd-rung:nth-child(5) { width: 76%; }
.rd-bar { position: absolute; left: 0; height: 12px; border-radius: 4px; background: var(--accent); }
.rd-bar.b1 { top: 0; width: 100%; } .rd-bar.b2 { top: 32px; width: 88%; } .rd-bar.b3 { top: 64px; width: 76%; }
.cur { padding: 14px 18px 18px; gap: 10px; }
.cur-top { display: flex; align-items: center; justify-content: space-between; }
.pips { display: flex; gap: 6px; }
.pip { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--on-accent) 30%, transparent); }
.pip.done { background: var(--on-accent); }
.pip.now { background: transparent; box-shadow: inset 0 0 0 2px var(--on-accent); }
.cur-count { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--on-accent); opacity: 0.85; }
.ladderwrap { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.scale { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6px 0; color: var(--muted); }
.sc-end { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-arrow { font-weight: 900; font-size: 16px; line-height: 1; color: var(--accent); }
.sc-lab { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; max-height: 120px; overflow: hidden; text-overflow: ellipsis; }
.sc-line { flex: 1; width: 2px; margin: 6px 0; border-radius: 1px; background: linear-gradient(var(--accent), var(--line)); }
.slot.r1 { min-height: 64px; } .slot.r1 .n { font-size: 34px; }
.slot.r2 { min-height: 60px; } .slot.r2 .n { font-size: 30px; }
.slot.r3 { min-height: 56px; } .slot.r3 .n { font-size: 26px; }
.slot.r4 { min-height: 52px; } .slot.r4 .n { font-size: 23px; }
.slot.r5 { min-height: 50px; } .slot.r5 .n { font-size: 21px; }
.slots { gap: 6px; }
.msg:empty { display: none; }
.bonus .bonusbtn { min-height: 44px; padding: 8px 14px 8px 10px; border-radius: 999px; font-size: 14px; align-items: center; flex-wrap: nowrap; }
.bonus .bonusbtn .bn-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bonus .bonusbtn .bn-stat { white-space: nowrap; }
.bn-ic { width: 22px; height: 22px; flex: none; }
@media (max-width: 360px) { .bonus .bonusbtn .bn-stat { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rd-bar.b1 { animation: rdDrop 2.4s ease-in-out infinite; }
  .rd-bar.b2 { animation: rdDrop 2.4s ease-in-out 0.35s infinite; }
  .rd-bar.b3 { animation: rdDrop 2.4s ease-in-out 0.7s infinite; }
  @keyframes rdDrop { 0% { transform: translateY(-14px); opacity: 0; } 18%, 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
  .timer.low .tnum { animation: tPulse 0.9s ease-in-out infinite; }
  @keyframes tPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
  .hero-art { animation: heroIn 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  @keyframes heroIn { from { transform: rotate(-30deg) scale(0.6); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
}

/* compact pass so Start and the ladder fit on a phone screen */
#v-game { gap: 12px; }
.hero { padding: 14px 16px 16px; gap: 2px; }
.hero-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; position: relative; padding-right: 70px; }
.hero-q { font-size: clamp(24px, 6.6vw, 30px); margin-top: 6px; padding-right: 58px; }
.hero-art { width: 84px; height: 84px; right: -4px; top: -4px; }
.ready { padding: 12px 14px; }
.ready-demo { height: 72px; width: 56px; gap: 3px; }
.rd-rung, .rd-bar { height: 11px; }
.rd-bar.b2 { top: 28px; } .rd-bar.b3 { top: 56px; }
.ready-big { font-size: 20px; }
.startbtn { min-height: 50px; }

/* Countdown block at the bottom of the game view */
.nextbox { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 14px 16px; border-radius: 18px; background: var(--panel); margin-top: 4px; }
.nb-ring { position: relative; width: 58px; height: 58px; }
.nb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.nb-track { fill: none; stroke: var(--panel2); stroke-width: 4; }
.nb-prog { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.nb-icon { position: absolute; inset: 13px; }
.nb-icon .ticon { width: 100%; height: 100%; }
.nb-main { min-width: 0; display: flex; flex-direction: column; }
.nb-label { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nextbox .countdown { margin: 0; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.nextbox .teaser { margin: 4px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.nb-new { grid-column: 1 / -1; margin-top: 8px; }

/* Leaderboard */
.boardhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.boardhead h2 { margin-right: auto; }
.countchip { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); }
.infobtn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); font-family: var(--mono); font-weight: 700; font-style: italic; cursor: pointer; }
.infobtn[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.infobtn:focus-visible, .linkbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lbrules { margin: -4px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--panel); font-size: 14px; color: var(--muted); }
.packs.segish { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; padding: 4px; border-radius: 14px; background: var(--panel); }
.packs.segish.many { display: flex; overflow-x: auto; }
.packs.segish .pack { border: 0; border-radius: 10px; min-height: 42px; padding: 8px 12px; align-items: center; background: transparent; }
.packs.segish .pack .pk-name { font-size: 18px; }
.packs.segish .pack[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.nickcard { background: transparent; padding: 0; }
.nickcard:has(#nickform:not([hidden])) { background: var(--panel); padding: 14px 16px; }
.nickline { margin: 0; font-size: 14px; color: var(--muted); }
.nickline b { color: var(--ink); }
.linkbtn { background: transparent; border: 0; padding: 6px 2px; min-height: 36px; color: var(--accent); font-weight: 700; text-decoration: underline; cursor: pointer; }
.segctl { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 14px; background: var(--panel); --si: 0; }
.seg-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; background: var(--accent); transform: translateX(calc(var(--si) * 100%)); }
.segctl .sub { position: relative; z-index: 1; border: 0; background: transparent; min-height: 42px; border-radius: 10px; color: var(--muted); }
.segctl .sub[aria-pressed="true"] { background: transparent; color: var(--on-accent); }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding-top: 8px; }
.pd { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.pd-top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px 8px; min-width: 0; text-align: center; }
.pd-avw { position: relative; display: flex; flex-direction: column; align-items: center; }
.crown { width: 30px; height: 19px; margin-bottom: -4px; fill: #E8B931; }
.pd-name { font-weight: 800; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-val { font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.pd-base { position: relative; display: grid; place-items: center; border-radius: 12px 12px 6px 6px; background: var(--panel2); border-top: 5px solid var(--medal); }
.pd-rank { font-family: var(--display); font-weight: 900; font-size: 30px; color: var(--medal); }
.pd1 { --medal: #E8B931; } .pd2 { --medal: #A8B0BF; } .pd3 { --medal: #C97A40; }
.pd1 .pd-base { height: 92px; } .pd2 .pd-base { height: 68px; } .pd3 .pd-base { height: 52px; }
.pd1 .pd-base { background: color-mix(in srgb, #E8B931 18%, var(--panel)); }
.pd.me .pd-name { color: var(--accent); }
.pd.open .pd-name { color: var(--muted); font-weight: 600; }
.av { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: #FFFFFF; font-family: var(--display); font-weight: 900; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
.av.big { width: 52px; height: 52px; font-size: 22px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--medal, transparent); }
.av.empty { background: var(--panel2); color: var(--muted); }
.youcard { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--accent); color: var(--on-accent); }
.youcard .av.big { box-shadow: 0 0 0 3px var(--on-accent); }
.yc-left { display: flex; flex-direction: column; align-items: center; }
.yc-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.yc-rank { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.yc-mid { display: flex; flex-direction: column; min-width: 0; }
.yc-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-msg { font-size: 13px; opacity: 0.9; }
.yc-val { font-family: var(--display); font-weight: 900; font-size: 26px; font-variant-numeric: tabular-nums; }
.youcard.cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: var(--accent-wash); color: var(--ink); border: 1.5px solid var(--accent); }
.yc-title { margin: 0; font-weight: 800; font-size: 16px; }
.yc-go { width: 100%; }
.lb { gap: 8px; }
.lbrow { grid-template-columns: 30px 36px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; min-height: 64px; border-radius: 16px; }
.lbrow .pos { font-size: 22px; }
.lbmid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lbmid .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbbar { display: block; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.lbfill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.lbrow.me .lbbar { background: color-mix(in srgb, var(--on-accent) 25%, transparent); }
.lbrow.me .lbfill { background: var(--on-accent); }
.lbmid .sub2 { font-size: 11px; }
.lbempty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 16px; border-radius: 18px; background: var(--panel); color: var(--muted); text-align: center; }
.lbempty p { margin: 0; font-weight: 600; }
.emptyart { width: 140px; height: 75px; }
.emptyart rect { fill: var(--panel2); stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 3; }
.emptyart text { font-family: var(--display); font-weight: 900; font-size: 16px; fill: var(--muted); }
.updated { margin: 0; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .seg-ind { transition: transform 0.28s cubic-bezier(0.3, 1.3, 0.5, 1); }
  .nb-prog { transition: stroke-dashoffset 0.6s linear; }
  .lbrow.anim { animation: lbIn 0.4s ease-out both; }
  @keyframes lbIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
  .pd .pd-base { animation: pdUp 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; transform-origin: bottom; }
  .pd2 .pd-base { animation-delay: 0.08s; } .pd3 .pd-base { animation-delay: 0.16s; }
  @keyframes pdUp { from { transform: scaleY(0.2); } to { transform: none; } }
}

#nickshow.nickline { display: flex; justify-content: flex-start; align-items: center; gap: 6px; flex-wrap: wrap; }

#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

@media (prefers-reduced-motion: no-preference) {
  .tabs .ind { transition: transform 0.28s cubic-bezier(0.3, 1.3, 0.5, 1); }
  .tab { transition: color 0.2s; }
  button.primary, button.plain, .item, .navbtn, button.day { transition: transform 0.12s ease, box-shadow 0.2s, border-color 0.15s; }
  .slot { transition: border-color 0.15s, background 0.15s; }
  @media (hover: hover) {
    button.primary:not(:disabled):hover, .item:hover { transform: translateY(-1px); }
  }
  button.primary:not(:disabled):active, button.plain:not(:disabled):active, .item:active, .navbtn:active, button.day:active, .slot:not(:disabled):active { transform: scale(0.98); }
  .cur.slide { animation: slidein 0.38s cubic-bezier(0.2, 1.2, 0.4, 1); }
  @keyframes slidein { from { transform: translateX(40px) rotate(1.5deg); opacity: 0; } to { transform: none; opacity: 1; } }
  .slot.snap { animation: snap 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }
  @keyframes snap {
    0% { transform: translateY(-14px) scale(1.04); box-shadow: 0 0 0 0 var(--accent); }
    55% { box-shadow: 0 0 0 6px var(--accent-soft); }
    100% { transform: none; box-shadow: 0 0 0 0 transparent; }
  }
  .row.anim { animation: rise 0.45s ease-out both; }
  @keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
  .hbar .fill { transition: height 0.6s ease-out; }
}

/* site footer */
.sitefoot { text-align: center; font: 500 13px/1.6 var(--body); color: var(--muted); padding: 8px 0 calc(20px + env(safe-area-inset-bottom, 0px)); }
.sitefoot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.sitefoot a:hover, .sitefoot a:focus-visible { color: var(--ink); }

/* In-round compact layout: once a round starts, the question card shrinks and the ladder
   tightens so the current item, timer, all five spots and the lock button fit on one phone screen. */
.inround .hero { padding: 10px 14px 12px; gap: 0; }
.inround .hero-eyebrow, .inround .hero-meta, .inround .hero .chips { display: none; }
.inround .hero-q { margin: 0; font-size: clamp(19px, 5.4vw, 23px); line-height: 1.06; padding-right: 46px; }
.inround .hero-art { width: 50px; height: 50px; top: calc(50% - 25px); right: 2px; }
.inround .play { gap: 10px; }
.inround .cur { padding: 10px 16px 12px; gap: 6px; }
.inround .cur .name { font-size: clamp(26px, 7.4vw, 34px); }
.inround .slots { gap: 5px; }
.inround .slot { padding: 6px 14px; }
.inround .slot.r1 { min-height: 54px; } .inround .slot.r1 .n { font-size: 30px; }
.inround .slot.r2 { min-height: 52px; } .inround .slot.r2 .n { font-size: 27px; }
.inround .slot.r3 { min-height: 50px; } .inround .slot.r3 .n { font-size: 24px; }
.inround .slot.r4 { min-height: 48px; } .inround .slot.r4 .n { font-size: 22px; }
.inround .slot.r5 { min-height: 46px; } .inround .slot.r5 .n { font-size: 20px; }
.inround .play { gap: 8px; }
.inround .hero { padding: 9px 14px 10px; }
.inround .cur { padding: 9px 16px 11px; }
.inround .tnum { font-size: 19px; }
@media (max-height: 600px) {
  .inround .hero-q { font-size: 18px; }
  .inround .cur .name { font-size: 26px; }
  .inround .slot.r1 { min-height: 50px; } .inround .slot.r2 { min-height: 48px; } .inround .slot.r3 { min-height: 46px; }
  .inround .slot.r4 { min-height: 45px; } .inround .slot.r5 { min-height: 44px; }
}

/* About / how to play / FAQ block under the game (also gives search engines readable text) */
.seo { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink); }
.seo h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: 26px; text-transform: uppercase; letter-spacing: 0.01em; }
.seo h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 800; }
.seo p, .seo li { font-size: 15px; line-height: 1.6; color: var(--muted); }
.seo p { margin: 0 0 8px; }
.seo-steps { margin: 0; padding-left: 20px; }
.seo details { border-top: 1px solid var(--line); padding: 10px 0; }
.seo details:last-of-type { border-bottom: 1px solid var(--line); }
.seo summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); }
.seo summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.seo details p { margin: 6px 0 0; }
.seo-links { margin-top: 14px !important; }
.seo a { color: var(--accent); font-weight: 700; }
.inround .seo { display: none; }

/* Final check: one optional swap after the fifth pick */
.fccard { background: var(--accent); color: var(--on-accent); border-radius: 18px; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fccard:focus { outline: none; }
.fc-top { display: flex; align-items: center; justify-content: space-between; }
.fc-tag { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fc-count { font-family: var(--mono); font-size: 12px; font-weight: 700; opacity: 0.85; }
.fc-q { margin: 0; font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1.05; letter-spacing: 0.01em; }
.fc-btns { display: flex; gap: 8px; }
.fc-btns button { flex: 1 1 0; min-height: 48px; margin: 0; }
#fccard .fc-swap { background: transparent; color: var(--on-accent); border-color: color-mix(in srgb, var(--on-accent) 55%, transparent); }
#fccard .fc-keep { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
.fccard .fc-swap:focus-visible, .fccard .fc-keep:focus-visible, .fccard .fc-cancel:focus-visible { outline: 3px solid var(--on-accent); outline-offset: 2px; }
#fccard .fc-cancel { color: var(--on-accent); background: transparent; border: 0; padding: 2px 0 2px 12px; min-height: 32px; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#fcrow button { width: 100%; }
.slot.swapsel { background: var(--accent-wash); border: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.slot.swapsel .n, .slot.swapsel .tm { color: var(--accent); }
.fcpick .slot.filled:not(:disabled) { cursor: pointer; }
.slot.swaptarget { border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent-wash) 60%, var(--panel)); }
.slot.swappreview { background: var(--accent-wash); border: 2px dashed var(--accent); box-shadow: none; }
.slot.swappreview .tm { color: var(--accent); font-style: italic; }
.slot .pvtag { margin-left: 8px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 10px; letter-spacing: 0.05em; }
@media (prefers-reduced-motion: no-preference) {
  .slot.swaptarget { animation: swapHint 1.4s ease-in-out infinite; }
  @keyframes swapHint { 50% { border-color: color-mix(in srgb, var(--accent) 35%, transparent); } }
}
.swapline { margin: 0; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.swapline::before { content: "\21C5"; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 14px; }
.swapline.up { color: var(--s0); } .swapline.down { color: var(--s3); } .swapline.even { color: var(--muted); }
@media (hover: hover) { button.day:not(.today):hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } }
button.day:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .fcpick .slot.filled:not(.swapsel):hover { border-color: var(--accent); } }
.mrow .swaptag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); vertical-align: 2px; }
.sc-swapmark { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.inround .fccard { padding: 10px 14px 12px; gap: 6px; }
.inround .fc-q { font-size: clamp(17px, 4.9vw, 22px); }
.inround .fc-btns button { min-height: 44px; padding: 8px 10px; font-size: 15px; white-space: nowrap; }
.inround .fc-top { min-height: 20px; }
@media (max-height: 600px) {
  .inround .fccard { padding: 9px 14px 10px; } .inround .fc-q { font-size: 17px; }
  /* short phones: during the final check the question shrinks to one line so the whole ladder fits */
  .infinal #v-game .hero-q { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
  .infinal #fcgo { min-height: 46px; }
}

/* Challenge banner and head-to-head card */
.chbanner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--accent-wash); border: 1.5px solid var(--accent); color: var(--ink); }
.chbanner .ch-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 17px; }
.chbanner .ch-text { flex: 1 1 180px; margin: 0; font-weight: 700; font-size: 15px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.chbanner .ch-go { flex: 0 0 auto; width: auto; min-height: 42px; padding: 8px 16px; font-size: 15px; }
.h2h { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--ink); color: var(--bg); }
.h2h-tag { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.h2h-verdict { margin: 0; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.h2h-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 10%, transparent); }
.h2h-row.me { background: var(--accent); color: var(--on-accent); }
.h2h-name { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-sq { display: flex; gap: 4px; }
.h2h-sq .sq { width: 18px; height: 18px; border-radius: 5px; }
.h2h-score { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.h2h-score small { font-size: 14px; opacity: 0.7; }
.h2h .h2h-back { margin-top: 2px; }
/* Message preview: exactly what Copy result sends, styled as a chat bubble */
.sharepreview { align-self: flex-end; max-width: 100%; white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.4; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--accent); color: var(--on-accent); }
.sharepreview:empty { display: none; }

/* ===================================================================================
   Tablet and desktop layouts. Everything below only applies at 720px and wider, so the
   phone layout above is untouched. Layout-only wrappers (.dcol) are invisible on phones.
   =================================================================================== */
.dcol { display: contents; }
.kbdhint { display: none; }
.lbhead { display: none; }
.lbnote { display: none; }

@media (min-width: 720px) {
  .wrap { max-width: 720px; }
  .s-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tile:last-child { grid-column: auto; }
  .tile .v { font-size: 42px; }
  .badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
  #archlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* About block: intro across the top, how-to-play on the left, questions on the right */
  .seo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .seo > h2, .seo > p:first-of-type { grid-column: 1 / -1; }
  .seo > h3:first-of-type { grid-column: 1; grid-row: 3; }
  .seo > .seo-steps { grid-column: 1; grid-row: 4 / span 7; }
  .seo > h3:nth-of-type(2) { grid-column: 2; grid-row: 3; }
  .seo > details, .seo > .seo-links { grid-column: 2; }
}

/* Wide screens (900px+, which includes laptops at 125-150% zoom): two-column layouts */
@media (min-width: 900px) {
  body { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); padding-block: 20px 48px; }
  .wrap { max-width: 1180px; }

  /* ---------- Today: two panels ---------- */
  #v-game {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 36px; row-gap: 0; align-items: start;
    grid-template-areas: "chal chal" "back back" "hero ladder" "ready ladder" "cur ladder" "timer ladder" "lock ladder" "hint ladder" "msg ladder" "bonus bonus" "h2h h2h" "result result" "next next" "seo seo";
    /* the flexible "msg" row soaks up any height difference, so the left panel stacks without gaps */
    grid-template-rows: auto auto auto auto auto auto auto auto minmax(0, 1fr) auto auto auto auto auto;
  }
  #v-game #play { display: contents; }
  #themeback, #intro { grid-area: back; }
  #chbanner { grid-area: chal; margin-bottom: 16px; }
  #h2h { grid-area: h2h; margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 24px; row-gap: 8px; align-items: center; }
  #h2h[hidden] { display: none; }
  #h2h .h2h-tag, #h2h .h2h-verdict { grid-column: 1 / -1; }
  #h2h .h2h-row.me { grid-column: 1; grid-row: 3; } #h2h .h2h-row:not(.me) { grid-column: 2; grid-row: 3; }
  #h2h .h2h-back { grid-column: 3; grid-row: 3; width: auto; padding: 10px 22px; margin: 0; }
  #v-game .hero { grid-area: hero; margin-bottom: 16px; padding: 18px 20px 20px; gap: 2px; }
  #v-game .hero-eyebrow, #v-game .hero-meta { display: block; }
  #v-game .hero .chips { display: flex; }
  #v-game .hero-q { margin-top: 8px; font-size: clamp(28px, 2.4vw, 36px); line-height: 1.04; padding-right: 92px; }
  #v-game .hero-art { width: 96px; height: 96px; right: 0; top: 0; }
  #hardstart { grid-area: ready; }
  #curcard { grid-area: cur; margin-bottom: 16px; padding: 16px 20px 20px; gap: 10px; }
  #v-game .cur .name { font-size: clamp(40px, 3.6vw, 54px); }
  #timer { grid-area: timer; margin-bottom: 16px; }
  #fccard { grid-area: cur; margin-bottom: 16px; padding: 16px 20px 18px; gap: 10px; }
  #v-game .fc-q { font-size: clamp(24px, 2.1vw, 30px); }
  #v-game .fc-btns button { min-height: 56px; font-size: 17px; }
  #fcrow { grid-area: lock; }
  #fcgo { min-height: 58px; font-size: 18px; }
  #v-game .tnum { font-size: 24px; }
  #lockrow { grid-area: lock; }
  #lock { min-height: 58px; font-size: 18px; }
  .kbdhint { grid-area: hint; }
  #msg { grid-area: msg; margin-top: 10px; }
  #v-game .ladderwrap { grid-area: ladder; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
  #v-game .slots { gap: clamp(8px, 1.2vh, 12px); }
  #v-game .slot { padding: 8px 20px; gap: 18px; }
  #v-game .slot .t { font-size: 19px; }
  #v-game .slot .tl { font-size: 12px; }
  #v-game .slot.r1 { min-height: clamp(66px, 10vh, 96px); } #v-game .slot.r1 .n { font-size: 42px; }
  #v-game .slot.r2 { min-height: clamp(64px, 9.6vh, 92px); } #v-game .slot.r2 .n { font-size: 38px; }
  #v-game .slot.r3 { min-height: clamp(62px, 9.2vh, 88px); } #v-game .slot.r3 .n { font-size: 34px; }
  #v-game .slot.r4 { min-height: clamp(60px, 8.8vh, 84px); } #v-game .slot.r4 .n { font-size: 31px; }
  #v-game .slot.r5 { min-height: clamp(58px, 8.4vh, 80px); } #v-game .slot.r5 .n { font-size: 28px; }
  #v-game .sc-lab { max-height: 200px; font-size: 11px; }
  #bonus { grid-area: bonus; margin-top: 22px; }
  /* before the round is finished, the bonus theme link and the countdown sit side by side */
  #v-game:has(#bonus:not([hidden])) { grid-template-areas: "back back" "hero ladder" "ready ladder" "cur ladder" "timer ladder" "lock ladder" "hint ladder" "msg ladder" "bonus next" "h2h h2h" "result result" "seo seo"; grid-template-rows: auto auto auto auto auto auto auto auto minmax(0, 1fr) auto auto auto auto; }
  #v-game:has(#bonus:not([hidden])) #bonus { align-self: stretch; }
  #v-game #bonus .bonusbtn { height: 100%; border-radius: 18px; padding: 16px 22px; font-size: 17px; gap: 10px; }
  #v-game #bonus .bonusbtn .bn-stat { font-size: 12px; }
  #result { grid-area: result; }
  #nextbox { grid-area: next; margin-top: 22px; }
  #v-game .seo { grid-area: seo; }
  /* once the round is over the question card spans the full width above the results */
  #v-game:has(#result:not([hidden])) .hero { grid-column: 1 / -1; margin-bottom: 18px; }

  @media (hover: hover) and (pointer: fine) {
    .inround .kbdhint { display: block; margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
    .kbdhint kbd { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
  }

  /* ---------- Results ---------- */
  /* Row 1: score card | share card. Row 2: messages | share buttons.
     Rows 3-9: the two lists share one set of rows (subgrid) so #1-#5 line up across. */
  #result {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 10px; align-items: start;
    grid-template-rows: auto auto auto auto repeat(5, auto);
  }
  #result > * { grid-column: 1 / -1; }
  #result > .r-sum, #result > .r-share, #result > .r-mine, #result > .r-true { display: contents; }
  #result .scorebox { grid-column: 1; grid-row: 1; align-self: stretch; justify-content: center; }
  #result .scorebox .score { font-size: 96px; }
  #result .sharecard { grid-column: 2; grid-row: 1; align-self: stretch; justify-content: center; }
  #result .r-msgs { display: flex; flex-direction: column; gap: 8px; grid-column: 1; grid-row: 2; align-self: start; padding: 14px 16px; border-radius: 16px; background: var(--panel); min-width: 0; }
  #result .r-msgs .beat { padding: 8px 12px; font-size: 15px; }
  #result .r-acts { display: flex; flex-direction: column; gap: 10px; grid-column: 2; grid-row: 2; align-self: start; min-width: 0; }
  #result .rsec { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-row: 3 / span 7; row-gap: 8px; margin-top: 18px; align-items: start; min-width: 0; }
  #result .rsec > * { grid-column: 1; }
  #result .r-mine .rsec { grid-column: 1; }
  #result .r-true .rsec { grid-column: 2; }
  #result .rsec > .rhead { grid-row: 1; margin: 0; align-self: end; }
  #result .rsec > .legend5 { grid-row: 1; justify-self: end; align-self: center; margin: 0; }
  #result .rsec > .legend5 .lgnote { display: none; }
  #result .rsec > p.small:not(.legend5) { grid-row: 2; }
  #result .rsec > ol { grid-row: 3 / span 5; display: grid; grid-template-rows: subgrid; row-gap: 8px; }
  #result .rsec > ol > li { align-self: stretch; min-width: 0; }
  #result .mine > li.mrow { min-height: 60px; }
  #result .reveal > li.row { display: flex; flex-direction: column; justify-content: center; }
  #result .reveal > li.row > .rowbtn { min-height: 60px; }
  #result #fact { grid-column: 1; grid-row: 10; margin-top: 18px; align-self: stretch; display: flex; align-items: center; }
  #result:has(#bonus2[hidden]) #fact { grid-column: 1 / -1; }
  #result #bonus2 { grid-column: 2; grid-row: 10; margin-top: 18px; align-self: stretch; }
  #result #bonus2 .bonusbtn { height: 100%; border-radius: 16px; padding: 14px 20px; font-size: 16px; }
  #result #src { grid-column: 1 / -1; grid-row: 11; }
  #result #tomorrow { grid-column: 1 / -1; grid-row: 12; }

  /* ---------- Themes ---------- */
  .themegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* ---------- Leaderboard ---------- */
  /* header row on top, podium + your spot on the left, the ranked table on the right */
  #v-board {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); column-gap: 32px; row-gap: 0; align-items: start;
    grid-template-areas: "head packs seg" "upd packs seg" "rules rules rules" "podium list list" "you list list" "nick list list" "rest list list";
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
  }
  #v-board .boardhead { grid-area: head; align-self: end; flex-wrap: nowrap; }
  #v-board .boardhead h2 { font-size: 34px; }
  #lbupdated { grid-area: upd; text-align: left; margin-top: 4px; }
  #v-board > .dcol > .packs { grid-area: packs; align-self: center; }
  #segctl { grid-area: seg; align-self: center; }
  #lbrules { grid-area: rules; margin: 14px 0 0; }
  #podium { grid-area: podium; margin-top: 28px; }
  #youcard { grid-area: you; margin-top: 18px; }
  #v-board .nickcard { grid-area: nick; margin-top: 16px; }
  #lb, #lbstate { grid-area: list; margin-top: 28px; }
  /* bigger podium */
  #v-board .podium { gap: 12px; padding-top: 12px; }
  #v-board .av.big { width: 68px; height: 68px; font-size: 28px; }
  #v-board .youcard .av.big { width: 58px; height: 58px; font-size: 24px; }
  #v-board .crown { width: 40px; height: 25px; }
  #v-board .pd-name { font-size: 16px; }
  #v-board .pd-val { font-size: 28px; }
  #v-board .pd-rank { font-size: 38px; }
  #v-board .pd1 .pd-base { height: 120px; } #v-board .pd2 .pd-base { height: 90px; } #v-board .pd3 .pd-base { height: 70px; }
  #v-board .youcard { padding: 16px 20px; }
  /* table-style rows: rank | avatar | player | days | bar | score */
  #v-board .lb { gap: 6px; }
  #v-board .lbrow, #v-board .lbhead { grid-template-columns: 40px 40px minmax(0, 1.4fr) auto minmax(60px, 1fr) 76px; column-gap: 14px; }
  #v-board .lbrow { min-height: 58px; padding: 10px 16px; border-radius: 14px; }
  #v-board .lbmid { display: contents; }
  #v-board .lbrow > *, #v-board .lbmid > * { grid-row: 1; }
  #v-board .lbrow .pos { grid-column: 1; } #v-board .lbrow .av { grid-column: 2; } #v-board .lbrow .who { grid-column: 3; }
  #v-board .lbrow .sub2 { grid-column: 4; } #v-board .lbrow .lbbar { grid-column: 5; } #v-board .lbrow .val { grid-column: 6; }
  #v-board .lbrow .who { font-size: 17px; }
  #v-board .lbrow .sub2 { font-size: 12px; white-space: nowrap; }
  #v-board .lbrow .lbbar { height: 8px; }
  #v-board .lbrow .pos { font-size: 24px; }
  #v-board .lbrow .val { font-size: 26px; }
  #v-board .lbhead { display: grid; align-items: end; padding: 0 16px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  #v-board .lbhead .h-player { grid-column: 2 / span 2; }
  #v-board .lbhead .h-val { grid-column: 6; text-align: right; }
  #v-board .lbgap { padding: 4px 0; }
  @media (hover: hover) {
    #v-board .lbrow:not(.me):hover { background: var(--panel2); }
  }
  /* empty, loading and error states fill the list column */
  #v-board .lbempty { min-height: 300px; justify-content: center; gap: 14px; padding: 32px 24px; font-size: 17px; }
  #v-board .lbempty .emptyart { width: 220px; height: 118px; }
  #v-board .lbnote { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 300px; padding: 32px 24px; border-radius: 18px; background: var(--panel); color: var(--muted); text-align: center; }
  #v-board .lbnote p { margin: 0; font-weight: 600; font-size: 16px; max-width: 34ch; }
  #v-board .lbnote .emptyart { width: 200px; height: 107px; }
  /* ---------- Archive ---------- */
  #v-hist { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 36px; align-items: start; }
  .h-cal, .h-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .h-list .sectionhead { margin-top: 0; }

  /* ---------- Stats ---------- */
  #v-stats > .packs { max-width: 560px; }
  .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile .v { font-size: 52px; }

  /* ---------- Overlays: keep them card-sized on big screens ---------- */
  .ht-card { width: min(520px, 100%); }
}

/* Narrower wide screens (900-1099px): the leaderboard switchers stack on the right instead of sharing one line */
@media (min-width: 900px) and (max-width: 1099px) {
  #v-board { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 28px; row-gap: 10px;
    grid-template-areas: "head packs" "upd seg" "rules rules" "podium list" "you list" "nick list" "rest list"; }
  #v-board .boardhead h2 { font-size: 30px; }
  #lbrules { margin-top: 4px; }
  #podium, #lb, #lbstate { margin-top: 16px; }
  #youcard { margin-top: 8px; }
  #v-board .nickcard { margin-top: 6px; }
  #v-board .av.big { width: 58px; height: 58px; font-size: 24px; }
  #v-board .lbrow, #v-board .lbhead { grid-template-columns: 34px 36px minmax(0, 1.4fr) auto minmax(40px, 1fr) 72px; column-gap: 10px; }
}

/* Full desktop (1100px+): app bar with wordmark left, tabs centered, today/streak/best on the right */
@media (min-width: 1100px) {
  body { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
  .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  header { grid-row: 1; grid-column: 1; flex-wrap: nowrap; min-height: 56px; }
  .tabs { grid-row: 1; grid-column: 1; justify-self: center; align-self: center; width: min(540px, calc(100% - 540px)); z-index: 2; }
}

/* short wide windows (e.g. 1280x720 with browser bars): tighten the round so it still fits */
@media (min-width: 900px) and (max-height: 760px) {
  body { padding-block: 14px 40px; }
  .wrap { gap: 16px; }
  #v-game .hero { padding: 14px 18px 16px; margin-bottom: 12px; }
  #v-game .hero-q { font-size: 28px; }
  #v-game .hero-art { width: 80px; height: 80px; }
  #curcard { margin-bottom: 12px; padding: 12px 18px 16px; }
  #v-game .cur .name { font-size: 42px; }
  #timer { margin-bottom: 12px; }
}