/* Wammy's House — a training room for the mind. Dark by default, one gold accent,
   teal for you and coral for the computer. */

@font-face { font-family: "Playfair"; font-weight: 700; src: url(fonts/PlayfairDisplay-700.ttf); font-display: swap; }
@font-face { font-family: "Playfair"; font-weight: 900; src: url(fonts/PlayfairDisplay-900.ttf); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url(fonts/Inter-500.ttf); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; src: url(fonts/Inter-700.ttf); font-display: swap; }
@font-face { font-family: "Literata"; font-weight: 400; src: url(fonts/Literata-400.ttf); font-display: swap; }
@font-face { font-family: "Literata"; font-weight: 700; src: url(fonts/Literata-700.ttf); font-display: swap; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; src: url(fonts/Literata-400i.ttf); font-display: swap; }
@font-face { font-family: "Chess"; src: url(fonts/ChessPieces.ttf); }

:root, :root[data-theme="dark"] {
  --bg: #0c0e12; --bg-2: #141820; --bg-3: #1b212c; --bg-4: #242b38;
  --ink: #eef1f5; --ink-2: #a3acbb; --ink-3: #6f7889; --rule: #262d3a;
  --gold: #e9b949; --gold-2: #f6d27e; --gold-soft: rgba(233, 185, 73, 0.14);
  --you: #33c7b9; --you-2: #7ce3d8; --you-soft: rgba(51, 199, 185, 0.16);
  --them: #ff7657; --them-2: #ffab93; --them-soft: rgba(255, 118, 87, 0.15);
  --good: #5ad28a; --good-soft: rgba(90, 210, 138, 0.14); --bad: #ff6b6b; --bad-soft: rgba(255, 107, 107, 0.14);
  --blue: #6ea8ff; --violet: #a98bff;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  --board: #1a2029; --board-2: #232b37; --wall: #07090c;
  --grain: radial-gradient(1200px 600px at 80% -10%, rgba(233, 185, 73, 0.07), transparent 60%),
           radial-gradient(900px 500px at -10% 10%, rgba(51, 199, 185, 0.06), transparent 60%);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3efe6; --bg-2: #fffdf8; --bg-3: #f0eadd; --bg-4: #e6dfcf;
  --ink: #1b1d22; --ink-2: #545a66; --ink-3: #8a8f99; --rule: #e0d8c6;
  --gold: #b8860b; --gold-2: #8a6508; --gold-soft: rgba(184, 134, 11, 0.12);
  --you: #0f8f84; --you-2: #0b6e66; --you-soft: rgba(15, 143, 132, 0.12);
  --them: #d4532f; --them-2: #a93d1f; --them-soft: rgba(212, 83, 47, 0.12);
  --good: #217a45; --good-soft: rgba(33, 122, 69, 0.12); --bad: #b3261e; --bad-soft: rgba(179, 38, 30, 0.1);
  --shadow: 0 16px 36px -24px rgba(60, 45, 20, 0.45);
  --board: #ece4d3; --board-2: #e2d8c3; --wall: #3b352b;
  --grain: radial-gradient(1200px 600px at 80% -10%, rgba(184, 134, 11, 0.08), transparent 60%);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
body { margin: 0; background: var(--bg); background-image: var(--grain); background-attachment: fixed; color: var(--ink);
  font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
a { color: var(--gold); }
p { margin: 0 0 0.75em; }
h1, h2, h3 { font-family: "Playfair", Georgia, serif; font-weight: 700; line-height: 1.12; margin: 0 0 0.4em; text-wrap: balance; }
strong { font-weight: 700; }
sup, sub { font-size: 0.7em; }
.muted { color: var(--ink-2); } .small { font-size: 0.85rem; }
.kicker { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.45rem; }
.label { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.6rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.8rem 0; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }

/* ---------- chrome ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top); }
.topbar-in { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: "Playfair"; font-weight: 900; font-size: 1.2rem; }
.logo { width: 2rem; height: 2rem; }
.logo-bg { fill: var(--ink); } .logo-l { fill: var(--bg); font-family: "Playfair"; font-weight: 900; font-size: 38px; text-anchor: middle; font-style: italic; }
.back { background: none; border: 0; font-weight: 700; font-size: 0.95rem; color: var(--ink); cursor: pointer; padding: 0.4rem 0.2rem; }
.tb { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 99px; padding: 0.4rem 0.85rem; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.tb.icon { width: 2.2rem; padding: 0.4rem 0; }
.view { max-width: 72rem; margin: 0 auto; padding: 1.2rem 1rem calc(5rem + env(safe-area-inset-bottom)); animation: rise 0.35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.loading { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 1rem; color: var(--ink-2); font-size: 0.95rem; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--rule); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.banner { background: var(--bg-3); border: 1px solid var(--rule); border-radius: 14px; padding: 0.65rem 1rem; font-size: 0.85rem; display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1rem; }
.banner.warn { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: var(--gold-soft); }

/* ---------- buttons ---------- */
.btn { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: var(--bg);
  border: 0; border-radius: 99px; padding: 0.8rem 1.3rem; min-height: 2.9rem; cursor: pointer; transition: transform 0.12s, box-shadow 0.2s, background 0.2s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1405; box-shadow: 0 8px 22px -12px var(--gold); }
:root[data-theme="light"] .btn.gold { color: #fff; background: linear-gradient(180deg, #c99a2a, var(--gold)); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.btn.small { padding: 0.5rem 0.9rem; min-height: 2.3rem; font-size: 0.7rem; }
.btn.big { padding: 1rem 2rem; font-size: 0.9rem; }
.btn:disabled { opacity: 0.35; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 99px; background: var(--bg-3); color: var(--ink-2); }
.chip.gold { background: var(--gold-soft); color: var(--gold); } .chip.done { background: var(--good-soft); color: var(--good); }
.chips { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.stars { letter-spacing: 0.05em; font-size: 1.05rem; } .stars i { font-style: normal; color: var(--rule); } .stars i.on { color: var(--gold); text-shadow: 0 0 12px var(--gold-soft); }

/* ---------- cards ---------- */
.card { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 22px; padding: 1.2rem 1.3rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
button.card { text-align: left; cursor: pointer; width: 100%; transition: transform 0.15s, border-color 0.2s; }
button.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }

/* ---------- home ---------- */
.hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: 0.8rem 0 1.4rem; }
.hero-title { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 900; margin: 0.1rem 0 0.4rem; }
.streak { display: grid; justify-items: center; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 20px; padding: 0.7rem 1.1rem; min-width: 5.5rem; }
.streak b { font-family: "Playfair"; font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--gold); }
.streak span { font-size: 0.72rem; color: var(--ink-2); } .streak small { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2rem; align-items: center; padding: 1.4rem;
  background: linear-gradient(135deg, var(--bg-2), color-mix(in srgb, var(--bg-3) 70%, var(--gold-soft))); }
.hero h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 900; }
.hero .scene { color: var(--ink-2); font-family: "Literata"; font-style: italic; }
.hero-art { display: grid; place-items: center; pointer-events: none; }
.hero-art .preview { width: 100%; } .hero-art .legend { display: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.tile { min-height: 10.5rem; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.tile h3 { font-size: 1.3rem; margin: 0.1rem 0 0.4rem; }
.tile .chip { margin-top: auto; align-self: flex-start; }
.tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; opacity: 0.16; }
.tile.maths::after { background: var(--blue); } .tile.phys::after { background: var(--violet); } .tile.leap::after { background: var(--you); }
.tile.case::after { background: var(--them); } .tile.chess::after { background: var(--gold); } .tile.hard::after { background: var(--ink-2); } .tile.course::after { background: var(--good); }
.footnote { text-align: center; font-size: 0.75rem; margin-top: 2rem; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .hero-art { order: -1; max-width: 22rem; margin: 0 auto; } }

/* ---------- lock ---------- */
.lock { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.lockcard { width: min(25rem, 100%); text-align: center; display: grid; gap: 0.8rem; justify-items: center; }
.lockcard .logo { width: 4.5rem; height: 4.5rem; }
.lockcard h1 { font-size: 2.6rem; font-weight: 900; margin: 0; }
input[type=password], input[type=text], input[type=number], textarea, select {
  font: inherit; width: 100%; padding: 0.8rem 1rem; border-radius: 14px; border: 1.5px solid var(--rule); background: var(--bg-2); color: var(--ink); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); }
select { width: auto; padding: 0.45rem 0.8rem; border-radius: 99px; font-size: 0.8rem; }

/* ---------- view headers + stepper ---------- */
.vhead { margin: 0.4rem 0 1.2rem; }
.vtitle { font-size: clamp(2rem, 5.5vw, 3rem); font-weight: 900; margin: 0.15rem 0 0.3rem; }
.scene { font-family: "Literata"; font-style: italic; color: var(--ink-2); font-size: 1.05rem; }
.stepper { display: flex; gap: 0.4rem; margin-top: 0.9rem; flex-wrap: wrap; }
.stepper span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem 0.35rem 0.4rem; border-radius: 99px; background: var(--bg-2);
  border: 1px solid var(--rule); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stepper i { font-style: normal; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); font-size: 0.7rem; }
.stepper span.on { color: var(--ink); border-color: var(--gold); } .stepper span.on i { background: var(--gold); color: #1a1405; }
.stepper span.done { color: var(--ink-2); } .stepper span.done i { background: var(--good-soft); color: var(--good); }

/* ---------- brief ---------- */
.brief { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.brief-board { position: sticky; top: 4.5rem; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 22px; padding: 1rem; box-shadow: var(--shadow); }
.brief-text .rules p:not(.label) { font-family: "Literata"; font-size: 1.02rem; }
.brief-board .preview { max-width: 30rem; margin: 0 auto; }
.predict .note { color: var(--ink-2); font-size: 0.9rem; }
@media (max-width: 860px) { .brief { grid-template-columns: 1fr; } .brief-board { position: static; } }
.opts { display: grid; gap: 0.55rem; margin: 0.8rem 0; }
.opts.grid { grid-template-columns: 1fr 1fr; }
.opt { display: flex; gap: 0.8rem; align-items: flex-start; text-align: left; background: var(--bg-3); border: 1.5px solid transparent; border-radius: 14px;
  padding: 0.8rem 1rem; cursor: pointer; line-height: 1.4; transition: border-color 0.15s, transform 0.12s; }
.opt:hover:not(:disabled) { border-color: var(--ink-3); transform: translateY(-1px); }
.opt b { color: var(--gold); min-width: 1rem; }
.opt.right { border-color: var(--good); background: var(--good-soft); } .opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opts.blind .opt.right, .opts.blind .opt.wrong { border-color: transparent; background: var(--bg-3); }
.opts.blind .opt.chosen, .opts.blind .opt.right:focus, .opt.chosen { border-color: var(--gold) !important; background: var(--gold-soft) !important; }
.opt:disabled { cursor: default; }
.confbox { background: var(--bg-3); border-radius: 14px; padding: 0.8rem 1rem; margin: 0.6rem 0; }
.conftop { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-2); } .conftop b { color: var(--gold); }
.conf { width: 100%; accent-color: var(--gold); margin: 0.4rem 0 0; }
.confscale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--ink-3); }
.opp { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--ink-2); margin-right: auto; }

/* ---------- play ---------- */
.playgrid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .playgrid { grid-template-columns: 1fr; } }
.board-col { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 24px; padding: 1rem; box-shadow: var(--shadow); min-width: 0; }
.side-col { display: grid; gap: 0.9rem; position: sticky; top: 4.5rem; }
@media (max-width: 900px) { .side-col { position: static; } }
.status { font-weight: 700; font-size: 0.98rem; padding: 0.85rem 1rem; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--rule); min-height: 3.2rem; }
.status.you { border-color: color-mix(in srgb, var(--you) 55%, transparent); box-shadow: inset 4px 0 0 var(--you); }
.status.wait { color: var(--ink-2); box-shadow: inset 4px 0 0 var(--them); }
.status.good { color: var(--good); box-shadow: inset 4px 0 0 var(--good); } .status.bad { color: var(--bad); box-shadow: inset 4px 0 0 var(--bad); }
.status.wait::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--them); margin-left: 0.5rem; animation: blink 0.9s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.board { display: grid; justify-items: center; }
.board-col .status { margin-bottom: 0.8rem; }
.board-col .result.show { margin-top: 1rem; }
@media (orientation: portrait) { .board-col .gsvg { max-height: 50vh; } }
.gsvg { width: 100%; height: auto; max-height: 72vh; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tip { font-size: 0.8rem; color: var(--ink-3); text-align: center; margin: 0.4rem 0 0; min-height: 1.2rem; }
.movelog { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; justify-content: center; }
.movelog span { font-size: 0.72rem; font-weight: 700; padding: 0.22rem 0.6rem; border-radius: 99px; background: var(--bg-3); }
.movelog span.you { color: var(--you); } .movelog span.them { color: var(--them); }
.legend { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-2); }
.legend .lg { display: inline-flex; align-items: center; gap: 0.4rem; } .legend .sw { width: 1.3rem; height: 0.7rem; border-radius: 4px; display: inline-block; }
.legend .you .sw { background: var(--you); } .legend .them .sw { background: var(--them); }

/* hint ladder */
.ladder { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 18px; padding: 0.9rem 1rem; }
.ladder .muted { font-weight: 500; letter-spacing: 0; text-transform: none; }
.rung { border-left: 2px solid var(--rule); margin-left: 0.7rem; padding: 0 0 0.35rem 0.9rem; position: relative; }
.rung.open { border-color: var(--gold); }
.rungbtn { background: none; border: 0; padding: 0.35rem 0; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.82rem; color: var(--ink-3); text-align: left; }
.rungbtn i { font-style: normal; position: absolute; left: -0.78rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-size: 0.68rem; color: var(--ink-2); border: 2px solid var(--bg-2); }
.rung.next .rungbtn { color: var(--ink); } .rung.next .rungbtn i { background: var(--gold); color: #1a1405; }
.rung.open .rungbtn { color: var(--gold); } .rung.open .rungbtn i { background: var(--gold-soft); color: var(--gold); }
.rungbtn:disabled { cursor: default; }
.rungbody { font-size: 0.9rem; color: var(--ink-2); padding: 0.1rem 0 0.4rem; animation: rise 0.25s; }
.rungbody p { margin-bottom: 0.5rem; }

/* result */
.result { display: none; }
.result.show { display: block; border-radius: 20px; padding: 1rem 1.1rem; animation: pop 0.35s ease; border: 1px solid var(--rule); background: var(--bg-2); }
.result.won { border-color: color-mix(in srgb, var(--good) 60%, transparent); background: linear-gradient(160deg, var(--good-soft), var(--bg-2) 60%); }
.result.lost { border-color: color-mix(in srgb, var(--them) 50%, transparent); background: linear-gradient(160deg, var(--them-soft), var(--bg-2) 60%); }
.rhead { display: flex; justify-content: space-between; align-items: center; font-family: "Playfair"; font-size: 1.5rem; margin-bottom: 0.4rem; }
.crit { background: var(--bg-3); border-radius: 14px; padding: 0.8rem 0.9rem 0.3rem; margin: 0.6rem 0; }
@keyframes pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

/* feedback + reveal */
.feedback { font-weight: 600; font-size: 0.92rem; padding: 0.7rem 0.9rem; border-radius: 12px; margin: 0.6rem 0; }
.feedback.good { background: var(--good-soft); color: var(--good); } .feedback.bad { background: var(--bad-soft); color: var(--bad); }
.feedback.info { background: var(--gold-soft); color: var(--gold); }
.feedback:empty { display: none; }
.reveal { margin: 0.6rem 0; } .reveal .hidden-body { display: none; } .reveal.open .hidden-body { display: block; animation: rise 0.25s; } .reveal.open > .btn { display: none; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); font-weight: 700; font-size: 0.82rem;
  padding: 0.6rem 1.1rem; border-radius: 99px; opacity: 0; transition: all 0.25s; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.installbar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 0.8rem; background: var(--bg-3);
  border: 1px solid var(--rule); border-radius: 18px; padding: 0.6rem 0.7rem 0.6rem 1.1rem; font-size: 0.85rem; box-shadow: var(--shadow); }
.installx { background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: var(--ink-2); }

/* debrief */
.debrief { max-width: 48rem; margin: 0 auto; }
.theory p:not(.label) { font-family: "Literata"; font-size: 1.02rem; }
.linestrip { display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.4rem 0 0.8rem; scroll-snap-type: x mandatory; }
.linestrip figure { margin: 0; flex: 0 0 8.5rem; scroll-snap-align: start; text-align: center; }
.linestrip figcaption { font-size: 0.7rem; color: var(--ink-2); margin-top: 0.2rem; }
.linestrip .gsvg { max-height: none; }

/* ---------- boards: shared ---------- */
.gsvg text { font-family: "Inter"; }
.pip { fill: rgba(255, 255, 255, 0.85); }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* territory */
.territory .tframe { fill: var(--board); stroke: var(--rule); }
.territory .tcell { fill: var(--board-2); transition: fill 0.2s; }
.territory .tcell.alt { fill: color-mix(in srgb, var(--board-2) 94%, var(--ink)); }
.territory .tcell.can { cursor: pointer; } .territory .tcell.can:hover { fill: color-mix(in srgb, var(--board-2) 70%, var(--you)); }
.territory .twall { fill: var(--wall); opacity: 0.9; }
.territory .tcoord { font-size: 9px; fill: var(--ink-3); font-weight: 700; opacity: 0.7; }
.territory .tpiece rect { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.territory .tpiece.you rect { fill: var(--you); } .territory .tpiece.them rect { fill: var(--them); }
.territory .tpiece { animation: drop 0.28s ease; }
.territory .tghost rect { fill: none; stroke-width: 3; stroke-dasharray: 6 5; } .territory .tghost .pip { display: none; }
.territory .tghost.bad rect { stroke: var(--bad); } .territory .tghost.best rect { stroke: var(--gold); stroke-width: 4; animation: glow 1.2s infinite; stroke-dasharray: none; }
.territory .tghost.pend rect { fill: color-mix(in srgb, var(--you) 55%, transparent); stroke: var(--you-2); stroke-dasharray: none; cursor: pointer; animation: glow 1.1s infinite; }
.territory .tghost.pend .pip { display: block; }
.territory .tlast rect { fill: none; stroke: var(--gold); stroke-width: 2.5; } .territory .tlast .pip { display: none; }
.territory.mini .tcoord { display: none; }

/* boxes */
.boxes .bframe { fill: var(--board); stroke: var(--rule); }
.boxes .bdot { fill: var(--ink); }
.boxes .bcoord { font-size: 12px; font-weight: 700; fill: var(--ink-3); text-anchor: middle; }
.boxes .bline.drawn { stroke: var(--ink-3); stroke-width: 6; stroke-linecap: round; }
.boxes .bline.drawn.you { stroke: var(--you); } .boxes .bline.drawn.them { stroke: var(--them); }
.boxes .bline.drawn.last { stroke-width: 8; filter: drop-shadow(0 0 6px var(--gold)); }
.boxes .bline.open .vis { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; opacity: 0.6; }
.boxes .bline.open .hit { stroke: transparent; stroke-width: 30; stroke-linecap: round; }
.boxes .bline.open.can { cursor: pointer; }
.boxes .bline.open.can:hover .vis { stroke: var(--you); stroke-width: 6; stroke-dasharray: none; opacity: 0.7; }
.boxes .bline.open.bad .vis { stroke: var(--bad); stroke-width: 4; stroke-dasharray: 6 6; opacity: 0.9; }
.boxes .bline.open.best .vis { stroke: var(--gold); stroke-width: 7; stroke-dasharray: none; opacity: 1; animation: glow 1.1s infinite; }
.boxes .bown rect { opacity: 0.9; animation: drop 0.3s ease; } .boxes .bown.you rect { fill: var(--you-soft); stroke: var(--you); stroke-width: 1.5; }
.boxes .bown.them rect { fill: var(--them-soft); stroke: var(--them); stroke-width: 1.5; }
.boxes .bown text { font-family: "Playfair"; font-weight: 900; font-size: 28px; text-anchor: middle; } .boxes .bown.you text { fill: var(--you); } .boxes .bown.them text { fill: var(--them); }
.boxes.mini .bline.drawn { stroke-width: 8; } .boxes.mini .bdot { r: 9; }
.scorebar { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin: 0 0.3rem 0.6rem; font-size: 0.95rem; }
.scorebar b { font-family: "Playfair"; font-size: 1.7rem; font-weight: 900; margin: 0 0.3rem; }
.scorebar .you { color: var(--you); } .scorebar .them { color: var(--them); } .scorebar .mid { font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }

/* hunt */
.hunt .hframe { fill: var(--board); stroke: var(--rule); }
.hunt .hhome { fill: var(--gold-soft); opacity: 0.9; }
.hunt .hhomelab { font-size: 11px; font-weight: 700; fill: var(--gold); text-anchor: middle; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.hunt .hline { stroke: var(--ink-3); stroke-width: 2.5; opacity: 0.55; }
.hunt .hpt { fill: var(--board-2); stroke: var(--ink-3); stroke-width: 2; }
.hunt .hname { font-size: 10px; font-weight: 700; fill: var(--ink-3); opacity: 0.75; }
.hunt .hpath { stroke: var(--gold); stroke-width: 7; stroke-linecap: round; opacity: 0.55; stroke-dasharray: 2 12; animation: glow 1.4s infinite; }
.hunt .hlast { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; opacity: 0.7; }
.hunt .token { transition: transform 0.35s cubic-bezier(.3,.7,.3,1); }
.hunt .token .tokbg { stroke: rgba(255,255,255,0.25); stroke-width: 2; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.4)); }
.hunt .token.you .tokbg { fill: var(--you); } .hunt .token.them .tokbg { fill: var(--them); }
.hunt .token .tokfg { fill: rgba(255,255,255,0.92); } .hunt .token .ear { fill: rgba(255,255,255,0.7); }
.hunt .token .eye { fill: #1a1d24; }
.hunt .token.can { cursor: pointer; } .hunt .token.can .tokbg { stroke: var(--gold); stroke-width: 3; }
.hunt .token.sel .tokbg { stroke: var(--gold); stroke-width: 5; }
.hunt .htarget { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 3; cursor: pointer; animation: glow 1.2s infinite; }
.hunt .htarget.soft { stroke-dasharray: 4 5; }
.hunt .htarget.bad { stroke: var(--bad); fill: var(--bad-soft); } .hunt .htarget.best { stroke-width: 6; fill: var(--gold); }
.hunt .hbad { stroke: var(--bad); stroke-width: 4; stroke-dasharray: 6 6; } .hunt .hbest { stroke: var(--gold); stroke-width: 7; animation: glow 1s infinite; }
.hunt.mini .hhome { opacity: 0.4; }

/* bidding */
.bidding .bdframe { fill: var(--board); stroke: var(--rule); }
.bidding .bdcell { fill: var(--board-2); } .bidding .bdcell.goalL { fill: color-mix(in srgb, var(--blue) 30%, var(--board-2)); } .bidding .bdcell.goalR { fill: color-mix(in srgb, var(--them) 30%, var(--board-2)); }
.bidding .bdgoal { font-size: 20px; text-anchor: middle; fill: var(--ink-2); }
.bidding .gem { transition: transform 0.5s cubic-bezier(.3,.7,.3,1); } .bidding .gemfg { fill: var(--gold); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); } .bidding .gemln { stroke: rgba(0,0,0,0.25); stroke-width: 1.5; fill: none; }
.bidding .coin { stroke: rgba(0,0,0,0.3); stroke-width: 1; } .bidding .coins.left .coin { fill: var(--blue); } .bidding .coins.right .coin { fill: var(--them); }
.bidding .coinn { font-family: "Playfair"; font-weight: 900; font-size: 20px; text-anchor: middle; fill: var(--ink); }
.bidding .bdside { font-size: 13px; font-weight: 700; text-anchor: middle; letter-spacing: 0.05em; text-transform: uppercase; }
.bidding .bdside.left { fill: var(--blue); } .bidding .bdside.right { fill: var(--them); }
.bidding .star { font-size: 22px; text-anchor: middle; fill: var(--gold); filter: drop-shadow(0 0 6px var(--gold)); }
.bidctl { margin-top: 0.8rem; }
.bidstrip { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bchip { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--rule); background: var(--bg-3); font-weight: 700; cursor: pointer; }
.bchip.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); transform: translateY(-2px); }
.bchip.bad { border-color: var(--bad); color: var(--bad); } .bchip.best { border-color: var(--gold); background: var(--gold); color: #1a1405; }
.bidbig { font-family: "Playfair"; font-weight: 900; font-size: 2.4rem; } .bidbig small { font-family: "Inter"; font-size: 0.8rem; color: var(--ink-2); font-weight: 500; }
.whatif { background: var(--bg-3); border-radius: 14px; padding: 0.8rem 1rem 0.3rem; font-size: 0.9rem; margin-top: 0.6rem; }
.reveal2 { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: center; padding: 0.6rem 0; }
.reveal2 p { flex-basis: 100%; text-align: center; font-weight: 700; margin: 0.4rem 0 0; }
.env { width: 7rem; height: 5rem; border-radius: 14px; display: grid; place-items: center; animation: flip 0.5s ease; }
.env small { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; } .env b { font-family: "Playfair"; font-size: 2rem; line-height: 1; }
.env.you { background: var(--you-soft); color: var(--you); border: 1.5px solid var(--you); } .env.them { background: var(--them-soft); color: var(--them); border: 1.5px solid var(--them); }
@keyframes flip { from { transform: rotateY(90deg); } to { transform: none; } }
table.mini-t { border-collapse: collapse; font-size: 0.85rem; margin: 0.5rem 0 1rem; }
table.mini-t th, table.mini-t td { border: 1px solid var(--rule); padding: 0.3rem 0.55rem; text-align: center; }
table.mini-t th { background: var(--bg-3); font-weight: 700; font-size: 0.75rem; }

/* push your luck */
.ptracks { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.plab { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 0.25rem; } .plab span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ptrack.you .plab b { color: var(--you); } .ptrack.them .plab b { color: var(--them); }
.pbar { height: 14px; border-radius: 99px; background: var(--bg-3); overflow: hidden; display: flex; }
.pbar i { display: block; height: 100%; transition: width 0.4s ease; }
.ptrack.you .banked { background: var(--you); } .ptrack.them .banked { background: var(--them); }
.pbar .turn { background: repeating-linear-gradient(45deg, var(--gold), var(--gold) 6px, var(--gold-2) 6px, var(--gold-2) 12px); opacity: 0.85; }
.table { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: 1.2rem 0 0.6rem; flex-wrap: wrap;
  background: radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--good) 18%, var(--board)), var(--board)); border-radius: 20px; min-height: 11rem; }
.dice { display: flex; gap: 0.8rem; }
.die { width: 92px; height: 92px; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.45)); transition: transform 0.3s; }
.die .dface { fill: #f7f3ea; stroke: #d8cfbd; stroke-width: 2; } .die .dpip { fill: #1b1d22; } .die .dnum { font-family: "Playfair"; font-weight: 900; font-size: 34px; text-anchor: middle; fill: #1b1d22; }
.die.bust .dface { fill: #ffd6cc; stroke: var(--bad); } .die.idle { opacity: 0.55; }
.dice.rolling .die { animation: tumble 0.4s ease-in-out infinite; }
@keyframes tumble { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(18deg) translateY(-8px); } 100% { transform: rotate(-12deg) translateY(0); } }
.turnbox { display: grid; justify-items: center; } .turnbox small { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.turnbox b { font-family: "Playfair"; font-weight: 900; font-size: 3.4rem; line-height: 1; color: var(--gold); }
.row.center { justify-content: center; }
.btn.bad { box-shadow: inset 0 0 0 2px var(--bad) !important; color: var(--bad) !important; background: var(--bad-soft) !important; }
.btn.glow { animation: glow 1s infinite; box-shadow: 0 0 0 4px var(--gold-soft), 0 0 22px var(--gold) !important; }
.meter { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; font-size: 0.82rem; color: var(--ink-2); margin-top: 0.8rem; }
.mbar { height: 10px; border-radius: 99px; background: var(--bg-3); overflow: hidden; } .mbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--them), var(--gold), var(--good)); transition: width 0.4s; }
.meter b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pigprev { display: grid; justify-items: center; gap: 0.6rem; padding: 1.5rem 0; } .pigtarget { font-size: 0.9rem; color: var(--ink-2); letter-spacing: 0.12em; text-transform: uppercase; }
.pigtarget b { font-family: "Playfair"; font-size: 2.2rem; color: var(--gold); letter-spacing: 0; }
.heat .axis { font-size: 11px; fill: var(--ink-2); text-anchor: middle; }

table.holdmap { border-collapse: separate; border-spacing: 3px; margin: 0.8rem auto 1.2rem; font-variant-numeric: tabular-nums; }
table.holdmap th { font-size: 0.72rem; color: var(--ink-2); font-weight: 700; padding: 0.2rem 0.4rem; }
table.holdmap th.corner { font-size: 0.62rem; font-weight: 500; }
table.holdmap td { width: 3rem; height: 2.3rem; text-align: center; border-radius: 8px; font-weight: 700; font-size: 0.85rem; color: var(--ink); }
table.holdmap td.go { font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: #1a1405; }

/* auction */
.pcard { width: 4.2rem; height: 6rem; border-radius: 12px; display: grid; place-items: center; align-content: center; position: relative;
  background: linear-gradient(160deg, #fbf7ee, #e9e1d0); color: #1b1d22; border: 0; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6); font-family: "Playfair"; font-weight: 900; }
.pcard .pv { font-size: 2rem; line-height: 1; } .pcard small { font-family: "Inter"; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; color: #6b6356; }
.pcard.back { background: repeating-linear-gradient(45deg, var(--them), var(--them) 5px, color-mix(in srgb, var(--them) 70%, #000) 5px, color-mix(in srgb, var(--them) 70%, #000) 10px); }
.pcard.mine { cursor: pointer; transition: transform 0.15s; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6), inset 0 0 0 3px var(--you); }
.pcard.mine:hover:not(:disabled) { transform: translateY(-8px); } .pcard.mine:disabled { cursor: default; opacity: 0.6; }
.pcard.mine.bad { box-shadow: inset 0 0 0 3px var(--bad); background: linear-gradient(160deg, #ffe6e0, #f6cfc4); }
.pcard.prize { background: linear-gradient(160deg, var(--gold-2), var(--gold)); } .pcard.prize.curse { background: linear-gradient(160deg, #6b2a37, #3b1119); color: #ffb3a6; }
.pcard.big { width: 6rem; height: 8.4rem; } .pcard.big .pv { font-size: 3rem; }
.pcard.theirs { box-shadow: inset 0 0 0 3px var(--them); } .pcard.flip { animation: flip 0.45s ease; }
.fan { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
.fan.them .pcard { width: 2.8rem; height: 4rem; }
.aucenter { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem;
  background: radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--good) 16%, var(--board)), var(--board)); border-radius: 20px; margin: 0.5rem 0; min-height: 11rem; }
.prizeslot { display: grid; justify-items: center; gap: 0.4rem; } .prizeslot small { font-size: 0.72rem; }
.bidcard { display: grid; place-items: center; min-height: 6rem; }
.auscore { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.auscore b { font-family: "Playfair"; font-weight: 900; font-size: 1.7rem; margin: 0 0.3rem; } .auscore .you { color: var(--you); } .auscore .them { color: var(--them); }
.auscore .mid { font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.auprev { display: grid; gap: 0.8rem; padding: 0.6rem 0; } .auprev .prizes { display: flex; justify-content: center; gap: 0.4rem; }
.auprev .prizes .pcard { width: 3.3rem; height: 4.8rem; } .auprev .prizes .pv { font-size: 1.5rem; }
.prizeslot .final { font-family: 'Playfair'; font-weight: 900; font-size: 2.6rem; color: var(--gold); }

/* bluff (poker) */
.pkhead { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 0.6rem; }
.pkhead b { font-family: "Playfair"; font-size: 1.5rem; } .pkhead b.up { color: var(--good); } .pkhead b.down { color: var(--them); }
.felt { position: relative; display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 0.8rem; padding: 1.2rem 1rem;
  border-radius: 120px / 60px; background: radial-gradient(70% 70% at 50% 45%, #1f6b4c, #0f3d2b 80%); box-shadow: inset 0 0 0 10px #3b2a1a, inset 0 0 0 12px #6b4a2a, 0 20px 40px -20px #000; }
:root[data-theme="light"] .felt { background: radial-gradient(70% 70% at 50% 45%, #2e8a63, #17553b 80%); }
.felt .seat { display: flex; align-items: center; gap: 0.8rem; }
.felt .avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--them); color: #fff; font-family: "Playfair"; font-weight: 900; font-size: 1.4rem; box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }
.felt .who { color: rgba(255,255,255,0.75); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.felt .middle { display: flex; gap: 2rem; align-items: center; }
.pot { display: grid; justify-items: center; color: #fff; } .pot b { font-family: "Playfair"; font-size: 1.6rem; line-height: 1; } .pot small { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.chipstack { display: flex; flex-direction: column-reverse; align-items: center; } .chipstack i { display: block; width: 34px; height: 8px; border-radius: 50%; margin-top: -3px;
  background: var(--gold); box-shadow: 0 1px 0 rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.35); }
.boardc { display: grid; justify-items: center; gap: 0.2rem; color: rgba(255,255,255,0.8); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pk-card { width: 4.4rem; height: 6.2rem; border-radius: 10px; background: linear-gradient(160deg, #fffdf8, #ece4d4); color: #1b1d22; position: relative; box-shadow: 0 10px 20px -8px rgba(0,0,0,0.7);
  font-family: "Playfair"; font-weight: 900; display: grid; place-items: center; }
.pk-card .r { position: absolute; font-size: 1.1rem; } .pk-card .tl { top: 0.3rem; left: 0.45rem; } .pk-card .br { bottom: 0.3rem; right: 0.45rem; transform: rotate(180deg); }
.pk-card .suitmark { font-size: 2rem; color: var(--them); }
.pk-card.back { background: repeating-linear-gradient(135deg, #7a1f2b, #7a1f2b 6px, #5c1520 6px, #5c1520 12px); box-shadow: 0 10px 20px -8px rgba(0,0,0,0.7), inset 0 0 0 3px rgba(255,255,255,0.3); }
.pk-card.mine { box-shadow: 0 10px 20px -8px rgba(0,0,0,0.7), 0 0 0 3px var(--you); } .pk-card.board { width: 3.6rem; height: 5rem; } .pk-card.flip { animation: flip 0.45s ease; }
.tape { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0.8rem 0 0.2rem; min-height: 1.6rem; }
.tape span { font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 99px; background: var(--bg-3); } .tape .you { color: var(--you); } .tape .them { color: var(--them); }
.belief { background: var(--bg-3); border-radius: 14px; padding: 0.8rem 1rem; margin-top: 0.6rem; }
.brow { display: grid; grid-template-columns: 1.5rem 1fr 3rem; gap: 0.6rem; align-items: center; font-weight: 700; font-size: 0.85rem; margin: 0.2rem 0; }
.bbar { height: 9px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .bbar i { display: block; height: 100%; background: var(--them); }
.pkacts { min-height: 3.4rem; }
.pkprev .felt { grid-template-rows: auto; grid-auto-flow: column; padding: 1.6rem; gap: 1.2rem; align-items: center; }
.pkprev { display: grid; justify-items: center; gap: 0.6rem; }

/* codebreaker */
.cbhead { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 0.6rem; } .cbhead b { color: var(--gold); }
.cbboard { display: grid; gap: 0.45rem; background: var(--board); border-radius: 18px; padding: 0.8rem; }
.cbrow { display: flex; align-items: center; gap: 0.9rem; background: var(--board-2); border-radius: 14px; padding: 0.45rem 0.8rem; }
.cbrow.cur { box-shadow: inset 0 0 0 2px var(--gold); } .cbrow.ghost { opacity: 0.45; }
.cbrow .rn { width: 1.4rem; font-weight: 700; color: var(--ink-3); font-size: 0.8rem; }
.cbrow .left { margin-left: auto; font-size: 0.75rem; color: var(--ink-2); font-weight: 700; }
.pegs { display: flex; gap: 0.45rem; }
.peg { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: inline-block; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.35); }
.peg.empty { background: var(--bg-3); box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
.pegbtn { background: none; border: 0; padding: 0; cursor: pointer; }
.fbgrid { display: grid; gap: 4px; margin-left: 0.4rem; } .fbgrid i { width: 0.8rem; height: 0.8rem; border-radius: 50%; display: block; }
.fbgrid i.gold { background: var(--gold); box-shadow: 0 0 6px var(--gold); } .fbgrid i.white { background: #f1f1f1; } .fbgrid i.none { background: var(--bg-3); }
.fbnum { font-family: "Playfair"; font-weight: 900; font-size: 1.5rem; color: var(--gold); } .fbnum small { font-family: "Inter"; font-size: 0.7rem; color: var(--ink-2); font-weight: 500; }
.palette { display: flex; gap: 0.6rem; justify-content: center; margin: 1rem 0 0.4rem; flex-wrap: wrap; }
.pswatch { width: 3rem; height: 3rem; border-radius: 50%; border: 3px solid var(--bg-2); box-shadow: 0 0 0 1.5px var(--rule), inset 0 -5px 0 rgba(0,0,0,0.25); cursor: pointer; transition: transform 0.12s; }
.pswatch:hover:not(:disabled) { transform: translateY(-3px); } .pswatch:disabled { opacity: 0.3; cursor: default; }
.cbprev { display: grid; gap: 0.5rem; justify-items: center; }

/* the problem */
.statement .stmt { font-family: "Literata"; font-size: 1.12rem; line-height: 1.6; }
.statement .stmt p { margin-bottom: 0.7em; }
.problem .card textarea { margin-top: 0.4rem; }
details.restate summary { cursor: pointer; font-weight: 700; font-size: 0.85rem; color: var(--ink-2); }
details.restate[open] summary { margin-bottom: 0.6rem; }
.checkq { border-bottom: 1px solid var(--rule); padding: 0.5rem 0; } .checkq:last-child { border: 0; }
.problem .result.show { margin-bottom: 1rem; }
.problem .theory p:not(.label) { font-family: "Literata"; font-size: 1.04rem; }

/* the leap */
:root, :root[data-theme="dark"] { --arc0: #232a36; } :root[data-theme="light"] { --arc0: #e6ddca; }
.leap .locked { display: none; }
.rcard { width: 72px; height: 96px; } .rcard-bg { fill: #fbf8f1; stroke: var(--rule); stroke-width: 1.5; }
:root[data-theme="dark"] .rcard-bg { fill: #1f2530; }
.badge-yes { fill: var(--good); } .badge-no { fill: var(--bad); } .badge-t { font-weight: 700; font-size: 13px; fill: #fff; text-anchor: middle; }
.nchip { font-weight: 700; font-size: 1.05rem; padding: 0.45rem 0.8rem; border-radius: 12px; background: var(--bg-3); border: 1.5px solid var(--rule); font-variant-numeric: tabular-nums; }
.nchip.yes { border-color: var(--good); color: var(--good); } .nchip.no { border-color: var(--bad); color: var(--bad); }
.startex { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.6rem; }
.notebook { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-height: 3rem; }
.builder { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; } .builder .rcard { width: 96px; height: 128px; }
.builder-rows { display: grid; gap: 0.45rem; } .seg { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.segbtn { min-width: 2.7rem; height: 2.7rem; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--bg-3); cursor: pointer; font-weight: 700; font-size: 0.8rem; padding: 0 0.6rem; display: grid; place-items: center; }
.segbtn.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); } .segicon { width: 22px; height: 22px; fill: var(--ink); } .swatch { width: 20px; height: 20px; border-radius: 50%; display: block; }
.numin { width: 8rem !important; font-size: 1.4rem; text-align: center; }
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.exam-item { background: var(--bg-3); border-radius: 14px; padding: 0.7rem; display: flex; flex-direction: column; align-items: center; }
.btn.ghost.on { background: var(--ink); color: var(--bg); }
.pairs { display: grid; gap: 0.8rem; margin: 1rem 0; } .pair { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 16px; padding: 0.7rem 0.9rem; }
.pair.test { border-color: var(--gold); } .pairrow { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.3rem; } .arrow { font-size: 1.6rem; color: var(--ink-2); }
.agrid { display: grid; gap: 2px; width: min(42%, 11rem); background: var(--rule); padding: 2px; border-radius: 8px; } .agrid.big { width: min(100%, 19rem); touch-action: none; }
.acell { aspect-ratio: 1; border-radius: 2px; } .agrid.big .acell { cursor: crosshair; border-radius: 3px; }
.answer-holder { flex: 1 1 12rem; max-width: 19rem; } .answer-holder .agrid.big { width: 100%; }
.leap .palette .pswatch { width: 2.6rem; height: 2.6rem; font-size: 0.9rem; color: var(--ink-2); } .leap .palette .pswatch.on { box-shadow: 0 0 0 3px var(--gold); }
.islanders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; margin: 1rem 0; }
.islander { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 18px; padding: 1rem; text-align: center; }
.islander.knight { box-shadow: inset 0 0 0 2px var(--good); } .islander.knave { box-shadow: inset 0 0 0 2px var(--bad); }
.islander .avatar { width: 3rem; height: 3rem; border-radius: 50%; margin: 0 auto 0.4rem; display: grid; place-items: center; font-family: "Playfair"; font-weight: 900; font-size: 1.4rem; background: var(--gold-soft); color: var(--gold); }
.said { font-family: "Literata"; font-style: italic; font-size: 0.98rem; min-height: 3.2rem; }
table.solve { border-collapse: collapse; width: 100%; margin: 0.5rem 0; } table.solve th, table.solve td { border: 1px solid var(--rule); padding: 0.35rem; text-align: center; }
table.solve th { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--bg-3); } table.solve select { width: 100%; border-radius: 10px; }
table.solve td.right select { border-color: var(--good); } table.solve td.wrong select { border-color: var(--bad); }
ol.clues li { margin-bottom: 0.3rem; font-family: "Literata"; }
/* possible or impossible */
.inv-board { display: grid; justify-items: center; } .inv-board .gsvg { max-height: 56vh; }
.inv .icell { fill: var(--board-2); } .inv .icell.sel { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 3; }
.inv .ihole { fill: var(--wall); }
.inv .icell.cA { fill: color-mix(in srgb, var(--blue) 45%, var(--board-2)); } .inv .icell.cB { fill: color-mix(in srgb, var(--gold) 35%, var(--board-2)); }
.inv .icell.c3-0 { fill: color-mix(in srgb, var(--you) 45%, var(--board-2)); } .inv .icell.c3-1 { fill: color-mix(in srgb, var(--them) 40%, var(--board-2)); } .inv .icell.c3-2 { fill: color-mix(in srgb, var(--violet) 45%, var(--board-2)); }
.inv .ipiece { fill: var(--you); stroke: rgba(255,255,255,0.3); stroke-width: 2; cursor: pointer; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.4)); animation: drop 0.2s; }
.inv .icell { cursor: pointer; }
.coins .flipbtn rect { fill: var(--bg-3); stroke: var(--rule); } .coins .flipbtn { cursor: pointer; } .coins .flipbtn:hover rect { fill: var(--gold-soft); stroke: var(--gold); }
.coins .flipbtn text { font-weight: 700; font-size: 18px; text-anchor: middle; fill: var(--ink-2); }
.coins .coin circle { stroke: rgba(0,0,0,0.3); stroke-width: 2; transition: fill 0.25s; } .coins .coin.heads circle { fill: var(--gold); } .coins .coin.tails circle { fill: #7c8697; }
.coins .coin text { font-family: "Playfair"; font-weight: 900; font-size: 22px; text-anchor: middle; fill: #1b1d22; } .coins .coin.wit circle { stroke: var(--bad); stroke-width: 5; }
.slide .sframe { fill: var(--board); stroke: var(--rule); }
.slide .stile rect { fill: var(--bg-4); stroke: rgba(255,255,255,0.12); stroke-width: 2; } .slide .stile text { font-family: "Playfair"; font-weight: 900; font-size: 28px; text-anchor: middle; fill: var(--ink); }
.slide .stile.home rect { fill: color-mix(in srgb, var(--good) 35%, var(--bg-4)); } .slide .stile.can { cursor: pointer; } .slide .stile.can rect { stroke: var(--gold); stroke-width: 3; }

/* the case */
.casehud { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; position: sticky; top: 3.6rem; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); padding: 0.6rem 0.2rem; font-weight: 700; font-size: 0.85rem; color: var(--ink-2); }
.casehud b { font-family: "Playfair"; font-size: 1.3rem; color: var(--gold); }
.suspects { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.7rem; }
.suspect { position: relative; display: grid; justify-items: center; gap: 0.25rem; text-align: center; background: var(--bg-3); border: 1.5px solid transparent; border-radius: 16px;
  padding: 0.8rem 0.6rem; cursor: pointer; transition: transform 0.15s, border-color 0.2s, opacity 0.3s; }
.suspect:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); } .suspect:disabled { cursor: default; }
.suspect.out { opacity: 0.38; } .suspect.accused { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.portrait { width: 3.6rem; height: 3.6rem; } .portrait .pinit { font-family: "Playfair"; font-weight: 900; font-size: 13px; text-anchor: middle; fill: rgba(0,0,0,0.55); }
.portrait.cleared { filter: grayscale(1); }
.suspect .motive { font-size: 0.7rem; color: var(--gold); letter-spacing: 0.05em; } .suspect .motive i { font-style: normal; color: var(--rule); }
.suspect .tags { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; } .suspect .tags span { font-size: 0.66rem; padding: 0.15rem 0.45rem; border-radius: 99px; background: var(--bg-2); color: var(--ink-2); }
.suspect .prob { position: absolute; top: 0.4rem; right: 0.5rem; font-weight: 700; font-size: 0.78rem; color: var(--gold); }
.suspect .stamp { position: absolute; top: 22%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); border: 2px solid var(--bad); color: var(--bad); font-weight: 900;
  letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 6px; opacity: 1; }
.tests { display: grid; gap: 0.55rem; }
.test { text-align: left; background: var(--bg-3); border: 1.5px solid transparent; border-radius: 14px; padding: 0.75rem 0.9rem; cursor: pointer; display: grid; gap: 0.2rem; }
.test:hover:not(:disabled) { border-color: var(--gold); } .test:disabled { opacity: 0.45; cursor: default; } .test.dud { opacity: 0.6; } .test.best { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.test .trow { display: flex; justify-content: space-between; gap: 1rem; } .test .cost { white-space: nowrap; font-weight: 700; color: var(--them); font-size: 0.85rem; }
.test small { color: var(--ink-2); font-size: 0.78rem; } .test small.split { color: var(--ink); } .test small.val { color: var(--gold); font-weight: 700; }
ol.findings li { margin-bottom: 0.4rem; }
tr.hi td { background: var(--gold-soft); font-weight: 700; }

/* shared bits */
.hidden { display: none !important; }
.linkbtn { background: none; border: 0; color: var(--gold); font-weight: 700; font-size: 0.8rem; cursor: pointer; padding: 0.4rem 0; }
/* chess */
.cboard { display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 34rem); margin: 0 auto 0.8rem; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 36px -20px #000; touch-action: manipulation; }
.cboard button { aspect-ratio: 1; border: 0; padding: 0; font-family: "Chess"; font-size: clamp(1.7rem, 6.5vw, 2.8rem); line-height: 1; cursor: pointer; position: relative; }
.cboard button.l { background: #e9dcc2; } .cboard button.d { background: #a88962; }
.cboard button.sel { box-shadow: inset 0 0 0 4px var(--you); } .cboard button.last { box-shadow: inset 0 0 0 4px rgba(233, 185, 73, 0.9); }
.cboard .w { color: #fff; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 1px 3px rgba(0,0,0,0.6); } .cboard .bk { color: #16181d; }
.cboard .coord { position: absolute; left: 3px; bottom: 1px; font-family: "Inter"; font-size: 0.55rem; color: #3b3326; opacity: 0.85; }
/* course + gchq */
.reading p:not(.label), .lesson p { font-family: "Literata"; font-size: 1.08rem; line-height: 1.65; }
.lesson h3.sub { font-family: "Inter"; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 1.6rem 0 0.5rem; }
.formula { text-align: center; font-weight: 700; font-size: 1.15rem; margin: 1rem 0; font-family: "Literata"; }
.pausebox { border: 2px dashed var(--gold); border-radius: 14px; padding: 0.9rem 1rem 0.3rem; margin: 1.2rem 0; background: var(--gold-soft); }
.keep { background: var(--bg-3); border-radius: 14px; padding: 0.8rem 1rem; margin: 1rem 0; } .keep li { margin-bottom: 0.3rem; }
.gchq h2 { font-size: 1.5rem; } .gq { font-family: "Literata"; font-size: 1.04rem; } .gq img { max-width: 100%; height: auto; border-radius: 10px; background: #fff; padding: 0.5rem; }
/* progress */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.stats.small { margin: 0.6rem 0 0; }
.stat { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 18px; padding: 0.9rem 1rem; display: grid; gap: 0.1rem; }
.stats.small .stat { background: var(--bg-3); border: 0; }
.stat b { font-family: "Playfair"; font-weight: 900; font-size: 2rem; line-height: 1.1; } .stat span { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.stat small { font-size: 0.68rem; color: var(--ink-3); }
.chart { width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--rule); stroke-width: 1; } .chart .tick { font-size: 11px; fill: var(--ink-2); } .chart .tick.end { text-anchor: end; } .chart .tick.mid { text-anchor: middle; }
.chart .axis-t { font-size: 11px; fill: var(--ink-3); text-anchor: middle; }
.chart .ref { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.chart .series { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.chart .dot { fill: var(--gold); stroke: var(--bg-2); stroke-width: 2; } .chart .hit { fill: transparent; cursor: pointer; }
.chart .pt:hover .dot { r: 7; }
.bars .track { fill: var(--bg-3); } .bars .bar { fill: var(--gold); cursor: pointer; } .bars .bar:hover { fill: var(--gold-2); }
.chart-tip { position: fixed; z-index: 70; pointer-events: none; background: var(--bg-4); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; padding: 0.5rem 0.7rem;
  font-size: 0.78rem; line-height: 1.4; opacity: 0; transition: opacity 0.12s; max-width: 210px; box-shadow: var(--shadow); } .chart-tip.on { opacity: 1; }
/* archive */
.archive { display: grid; gap: 0.7rem; } .arch { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: center; margin: 0; }
.arch-date { display: grid; justify-items: center; font-size: 0.75rem; color: var(--ink-2); } .arch-date b { font-family: "Playfair"; font-size: 2rem; color: var(--gold); line-height: 1; }
.arch h3 { font-size: 1.2rem; margin: 0.1rem 0 0.2rem; }

.tileart { position: absolute; right: 14px; top: 14px; width: 64px; height: 64px; fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; z-index: 1; }
.tileart .fill { fill: var(--gold); stroke: var(--gold); opacity: 0.9; } .tileart .ghost { opacity: 0.4; stroke-dasharray: 3 4; }
.tile.maths .tileart { stroke: var(--blue); } .tile.phys .tileart { stroke: var(--violet); } .tile.leap .tileart { stroke: var(--you); } .tile.case .tileart { stroke: var(--them); }
.tile.chess .tileart { stroke: var(--gold); } .tile.course .tileart { stroke: var(--good); }
.tile .kicker, .tile h3, .tile p { position: relative; z-index: 2; padding-right: 3.5rem; }

/* while playing, the header steps back so the board fits the screen */
.vhead.compact { margin-bottom: 0.7rem; } .vhead.compact .vtitle { font-size: 1.7rem; } .vhead.compact .scene { display: none; } .vhead.compact .stepper { margin-top: 0.4rem; }
.board-col .gsvg { max-height: min(72vh, calc(100vh - 19.5rem)); min-height: 16rem; }
@media (orientation: portrait) { .board-col .gsvg { max-height: min(50vh, calc(100vh - 16rem)); } }
@media (orientation: landscape) and (max-height: 900px) { .felt { padding: 0.8rem 1rem; gap: 0.5rem; } .pk-card { width: 3.8rem; height: 5.3rem; } .table { min-height: 8rem; padding: 0.8rem 0 0.4rem; } }

.welcome { background: linear-gradient(135deg, var(--bg-2), color-mix(in srgb, var(--bg-3) 60%, var(--gold-soft))); border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.welcome h2 { font-size: 1.9rem; font-weight: 900; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem 1.4rem; margin: 0.6rem 0; }
.wgrid b { color: var(--gold); font-size: 0.9rem; } .wgrid p { font-size: 0.9rem; color: var(--ink-2); margin: 0.25rem 0 0; }

/* sowing */
.sow .wood { fill: #6b4423; stroke: #3d250f; stroke-width: 3; }
:root[data-theme="light"] .sow .wood { fill: #a0703f; }
.sow .hole { fill: #3a230f; stroke: rgba(0,0,0,0.35); stroke-width: 2; filter: drop-shadow(0 2px 0 rgba(255,255,255,0.12)); }
.sow .pit.can { cursor: pointer; } .sow .pit.can .hole { stroke: var(--you); stroke-width: 3; } .sow .pit.can:hover .hole { fill: #4a2f15; }
.sow .pit.bad .hole { stroke: var(--bad); stroke-width: 4; stroke-dasharray: 6 5; } .sow .pit.best .hole { stroke: var(--gold); stroke-width: 5; animation: glow 1s infinite; }
.sow .pit.last .hole { stroke: var(--gold); stroke-width: 3; } .sow .pit.moved .hole { stroke: rgba(255,255,255,0.35); stroke-dasharray: 3 4; }
.sow .seed { stroke: rgba(0,0,0,0.35); stroke-width: 0.8; } .sow .seed.s0 { fill: #e9d8b0; } .sow .seed.s1 { fill: #c9a36a; } .sow .seed.s2 { fill: #f3ead6; }
.sow .cnt { font-family: "Playfair"; font-weight: 900; font-size: 20px; text-anchor: middle; fill: #f3e5c8; } .sow .cnt.big { font-size: 24px; }
.sow .store.you .cnt { fill: var(--you-2); } .sow .store.them .cnt { fill: var(--them-2); }
.sow .pname { font-size: 11px; font-weight: 700; fill: rgba(243,229,200,0.6); }
.sow .landmark { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 4 4; }
.linestrip.wide figure { flex-basis: 11rem; }

/* hex */
.hex .hcell { fill: var(--board-2); stroke: var(--bg-2); stroke-width: 3; transition: fill 0.2s; }
.hex .hcell.you { fill: var(--you); } .hex .hcell.them { fill: var(--them); }
.hex .hcell.can { cursor: pointer; } .hex .hcell.can:hover { fill: color-mix(in srgb, var(--you) 45%, var(--board-2)); }
.hex .hcell.bad { fill: color-mix(in srgb, var(--bad) 30%, var(--board-2)); } .hex .hcell.best { fill: var(--gold); animation: glow 1s infinite; }
.hex .hcell.last { stroke: var(--gold); stroke-width: 4; } .hex .hcell.carrier { fill: color-mix(in srgb, var(--you) 25%, var(--board-2)); }
.hex .hedge { stroke-width: 9; stroke-linecap: round; opacity: 0.9; } .hex .hedge.you { stroke: var(--you); } .hex .hedge.them { stroke: var(--them); }
.hex .hname { font-size: 10px; font-weight: 700; fill: var(--ink-3); text-anchor: middle; pointer-events: none; }
.hex .bridge { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 5 5; pointer-events: none; }
.hex .wdot { fill: var(--gold); }