/* Queen of Chess: La Reina
   Evening (default) and Daylight. Every colour is a token; the Daylight
   values sit together at the bottom. The game screen never scrolls: the
   board sizes itself to the room it has, and side panels scroll inside. */

:root {
  --bg: #151019;
  --bg-2: #1b1521;
  --surface: #221a2a;
  --surface-2: #2c2236;
  --surface-3: #372b43;
  --line: #3a2f45;
  --line-2: #4d3f5a;
  --text: #f2eadf;
  --text-dim: #baacb8;
  --text-faint: #85778d;
  --crimson: #d14a6f;
  --crimson-deep: #8c1d3b;
  --crimson-soft: rgba(209, 74, 111, .16);
  --gold: #d6ab5c;
  --gold-bright: #f0d08c;
  --gold-deep: #8f6b31;
  --gold-soft: rgba(214, 171, 92, .14);
  --ok: #72c697;
  --ok-soft: rgba(114, 198, 151, .16);
  --warn: #ea9061;
  --warn-soft: rgba(234, 144, 97, .16);
  --info: #86a8e8;

  --sq-light: #ebdfcd;
  --sq-dark: #9a6874;
  --coord-on-light: #9a6874;
  --coord-on-dark: #ebdfcd;
  --frame-1: #3e2c3b;
  --frame-2: #231923;

  --veil: rgba(10, 7, 12, .7);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);

  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
  --body: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Spline Sans Mono", "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --topbar: 56px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#app { height: 100%; }
.screen {
  height: 100%;
  display: flex; flex-direction: column;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  animation: screenIn .28s var(--ease) both;
}
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* ── top bar ── */
.topbar {
  flex: none;
  height: var(--topbar);
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  padding: 0 8px;
}
#btn-settings { grid-column: 3; }
.topbar__title { margin: 0; font: 600 19px/1.1 var(--display); text-align: center; text-wrap: balance; }
.topbar__stack { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.topbar__stack .topbar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.topbar__over { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--text-dim);
}
.icon-btn:hover { background: var(--surface); color: var(--text); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn svg circle { fill: currentColor; stroke: none; }

/* ── home ── */
.screen--home { overflow-y: auto; }
.home {
  width: 100%; max-width: 520px; margin: auto;
  padding: 4px 18px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 4px 0 8px; }
.hero__crest { width: 92px; height: 92px; }
.wordmark { margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.wordmark__top { font: 500 15px/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--text-dim); padding-left: .34em; }
.wordmark__name {
  margin-top: 8px;
  font: italic 700 clamp(46px, 13vw, 64px)/1 var(--display);
  letter-spacing: -.01em;
  background: linear-gradient(172deg, var(--gold-bright) 10%, var(--gold) 55%, var(--gold-deep) 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .06em .08em;
}
.hero__tag { margin: 6px 0 0; font: italic 400 18px/1.35 var(--display); color: var(--text-dim); }

.learn-card {
  position: relative; text-align: left; cursor: pointer;
  display: grid; gap: 4px;
  padding: 18px 20px 20px;
  border: 1px solid var(--gold-deep); border-radius: 18px;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(209, 74, 111, .22), transparent 55%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease), border-color .2s;
}
.learn-card:hover { transform: translateY(-1px); border-color: var(--gold); }
.learn-card__over { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.learn-card__title { font: 700 27px/1.15 var(--display); margin-top: 4px; }
.learn-card__sub { color: var(--text-dim); font-size: 14.5px; }
.learn-card__bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 10px; }
.learn-card__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 3px; transition: width .6s var(--ease); }
.learn-card__go {
  justify-self: start; margin-top: 14px;
  font: 600 13px/1 var(--body); letter-spacing: .04em;
  padding: 9px 14px; border-radius: 999px;
  background: var(--crimson); color: #fff;
}

.play-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.play-card, .resume-card {
  text-align: left; cursor: pointer;
  display: grid; gap: 3px; align-content: start;
  padding: 16px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .2s, background .2s;
}
.play-card:hover, .resume-card:hover { border-color: var(--line-2); background: var(--surface-2); }
.play-card__title, .resume-card__title { font: 600 17px/1.2 var(--display); }
.play-card__sub, .resume-card__sub { color: var(--text-faint); font-size: 13.5px; }
.resume-card { border-color: var(--gold-deep); border-style: dashed; }
.home-links { display: flex; justify-content: center; gap: 10px; color: var(--text-faint); }
.text-link { border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 6px; }
.text-link:hover { color: var(--gold-bright); }

/* ── the course ── */
.screen--learn { overflow-y: auto; }
.screen--learn .topbar, .screen--archive .topbar { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.course { width: 100%; max-width: 640px; margin: 0 auto; padding: 4px 16px 32px; display: flex; flex-direction: column; gap: 26px; }
.unit { display: flex; flex-direction: column; gap: 10px; }
.unit__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.unit__over { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.unit__title { margin: 4px 0 0; font: 700 22px/1.2 var(--display); }
.unit__tier { font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-bright); white-space: nowrap; }
.unit__tier--paid { background: var(--crimson-soft); color: var(--crimson); }
.unit__text { margin: 0; color: var(--text-dim); font-size: 14.5px; }
.lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lesson-row {
  width: 100%; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; text-align: left;
}
.lesson-row:hover:not(:disabled) { border-color: var(--gold-deep); }
.lesson-row:disabled { cursor: default; opacity: .5; }
.lesson-row__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--sq-dark); display: grid; place-items: center; }
.lesson-row__icon svg { width: 32px; height: 32px; }
.lesson-row__text { display: grid; gap: 2px; min-width: 0; }
.lesson-row__name { font: 600 16px/1.25 var(--display); }
.lesson-row__sub { color: var(--text-faint); font-size: 13px; }
.lesson-row__state { display: flex; gap: 2px; color: var(--gold); }
.lesson-row__state svg { width: 16px; height: 16px; }
.lesson-row--done { border-color: rgba(214, 171, 92, .4); }
.lesson-row--next { border-color: var(--crimson); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.lesson-row .lock { width: 16px; height: 16px; fill: none; stroke: var(--text-faint); stroke-width: 2; }

/* ── the stage: a board with a panel beside or below it ── */
.stage {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px 10px; gap: 10px;
}
.stage__board {
  flex: none;
  width: min(100%, 560px, calc(100dvh - var(--sat) - var(--sab) - var(--topbar) - var(--panel-min, 240px)));
  min-width: 240px;
  display: flex; flex-direction: column; gap: 6px;
}
.screen--lesson { --panel-min: 250px; }
.screen--game { --panel-min: 190px; }
.screen--review { --panel-min: 250px; }
.screen--game .stage__board { width: min(100%, 560px, calc(100dvh - var(--sat) - var(--sab) - var(--topbar) - var(--panel-min) - 76px)); }
.stage__side { width: 100%; max-width: 560px; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

@media (min-aspect-ratio: 1/1) and (min-width: 820px) {
  .stage { flex-direction: row; align-items: stretch; justify-content: center; gap: 24px; padding: 4px 24px 20px; }
  .stage__board { width: min(58vw, calc(100dvh - var(--sat) - var(--sab) - var(--topbar) - 28px)); max-width: none; align-self: flex-start; }
  .screen--game .stage__board { width: min(58vw, calc(100dvh - var(--sat) - var(--sab) - var(--topbar) - 104px)); }
  .stage__side { max-width: 420px; flex: 1 1 340px; }
}

.board-frame {
  padding: 8px; border-radius: 14px;
  background: linear-gradient(160deg, var(--frame-1), var(--frame-2));
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* ── the board ── */
.board { position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.board__squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.sq { position: relative; }
.sq--light { background: var(--sq-light); }
.sq--dark { background: var(--sq-dark); }
.sq--last::before { content: ""; position: absolute; inset: 0; background: rgba(226, 180, 72, .42); }
.sq--sel::before { content: ""; position: absolute; inset: 0; background: rgba(226, 180, 72, .55); }
.sq--hover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7); }
.sq--check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(232, 40, 70, .95) 0%, rgba(232, 40, 70, .55) 38%, rgba(232, 40, 70, 0) 72%); }
.sq--target::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(40, 24, 40, .32); }
.sq--take::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(40, 24, 40, .34); }
[data-dots="off"] .sq--target::after, [data-dots="off"] .sq--take::after { display: none; }
.sq--good::before { content: ""; position: absolute; inset: 0; background: rgba(90, 190, 130, .45); }
.sq--bad::before { content: ""; position: absolute; inset: 0; background: rgba(230, 70, 80, .42); }
.sq--info::before { content: ""; position: absolute; inset: 0; background: rgba(120, 160, 240, .42); }
.sq--flash-bad { animation: flashBad .45s ease; }
.sq--flash-good { animation: flashGood .5s ease; }
@keyframes flashBad { 0%, 100% { filter: none; } 35% { filter: brightness(.7) sepia(1) hue-rotate(-40deg) saturate(4); } }
@keyframes flashGood { 0%, 100% { filter: none; } 35% { filter: brightness(1.15) sepia(1) hue-rotate(60deg) saturate(2.4); } }
.coord { position: absolute; font: 600 clamp(8px, 1.6vw, 11px)/1 var(--body); pointer-events: none; opacity: .85; }
.coord--file { right: 4%; bottom: 3%; }
.coord--rank { left: 4%; top: 4%; }
.sq--light .coord { color: var(--coord-on-light); }
.sq--dark .coord { color: var(--coord-on-dark); }
[data-coords="off"] .coord { display: none; }

.board__marks, .board__pieces { position: absolute; inset: 0; pointer-events: none; }
.pc, .mark { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; will-change: transform; transition: transform .2s var(--ease), opacity .25s; }
.pc svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .28)); }
.pc--lift { z-index: 5; }
.pc--lift svg { filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .4)); }
.pc--gone { opacity: 0; transform-origin: center; }
.mark--star svg { width: 56%; height: 56%; margin: 22%; animation: starIn .4s var(--spring) both; }
.mark--won { transition: transform .4s var(--ease), opacity .4s; opacity: 0; }
@keyframes starIn { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pc, .mark { transition: none; } .mark--star svg { animation: none; } }

.board__arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arrow { stroke-width: .17; stroke-linecap: round; opacity: .82; }
.arrow--good { stroke: #3ea56c; } .ah--good { fill: #3ea56c; }
.arrow--bad { stroke: #d8424f; } .ah--bad { fill: #d8424f; }
.arrow--info { stroke: #5b86d8; } .ah--info { fill: #5b86d8; }

.board__promo {
  position: absolute; top: 0; width: 12.5%; z-index: 10;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 0 0 10px 10px; box-shadow: var(--shadow);
}
.promo__opt { border: 0; background: transparent; aspect-ratio: 1; padding: 6%; cursor: pointer; }
.promo__opt:hover { background: var(--surface-3); }
.promo__opt svg { width: 100%; height: 100%; }
.board--shake { animation: shake .35s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* board looks */
[data-board="walnut"] { --sq-light: #e6cfa6; --sq-dark: #9c6b43; --coord-on-light: #9c6b43; --coord-on-dark: #e6cfa6; --frame-1: #4a3322; --frame-2: #2a1c12; }
[data-board="marble"] { --sq-light: #e3e5df; --sq-dark: #7f9187; --coord-on-light: #6f8177; --coord-on-dark: #e3e5df; --frame-1: #3b4441; --frame-2: #1f2523; }

/* ── player plates ── */
.plate { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 2px; }
.plate__face { width: 26px; height: 26px; border-radius: 8px; background: var(--sq-dark); flex: none; display: grid; place-items: center; overflow: hidden; }
.plate__face svg { width: 24px; height: 24px; }
.plate__name { font: 600 15px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate__status { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.plate__status--live { color: var(--gold); }
.plate__taken { margin-left: auto; display: flex; align-items: center; gap: 0; }
.plate__taken svg { width: 18px; height: 18px; margin-left: -5px; }
.plate__taken .adv { margin-left: 6px; font: 600 12px/1 var(--mono); color: var(--text-dim); }
.thinking { display: inline-flex; gap: 3px; }
.thinking i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); animation: blink 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* ── La Reina ── */
.reina { display: flex; gap: 12px; align-items: flex-start; }
.reina__crest { flex: none; width: 50px; height: 50px; }
.reina__crest svg, .hero__crest svg { width: 100%; height: 100%; }
.reina__bubble {
  position: relative; flex: 1; min-width: 0;
  padding: 11px 14px 12px; border-radius: 4px 16px 16px 16px;
  background: var(--surface); border: 1px solid var(--line);
}
.reina__who { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--crimson); margin-bottom: 6px; }
.reina__say { margin: 0; font: 400 16.5px/1.42 var(--display); text-wrap: pretty; }
.reina__say b { font-weight: 700; color: var(--gold-bright); }
.reina__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.reina--warn .reina__bubble { border-color: var(--warn); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.reina--good .reina__bubble { border-color: rgba(114, 198, 151, .5); }

.steps { display: flex; gap: 5px; }
.steps span { height: 5px; flex: 1; border-radius: 3px; background: var(--surface-3); transition: background .3s; }
.steps .done { background: var(--gold); }
.steps .now { background: var(--crimson); }
.task { border-left: 3px solid var(--gold); padding: 2px 0 2px 12px; }
.task__title { margin: 0 0 2px; font: 700 18px/1.25 var(--display); }
.task__text { margin: 0; color: var(--text-dim); font-size: 15px; }
.feedback { margin: 0; min-height: 1.5em; font-weight: 600; font-size: 15px; }
.feedback--ok { color: var(--ok); }
.feedback--no { color: var(--warn); }
.lesson-panel { overflow-y: auto; }
.lesson-stars { display: flex; gap: 6px; color: var(--gold); margin-top: 4px; }
.lesson-stars svg { width: 30px; height: 30px; }
.lesson-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.lesson-actions .btn--primary { margin-left: auto; }
.choices { display: grid; gap: 8px; }
.choice { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 15.5px; }
.choice:hover { border-color: var(--gold-deep); }
.choice--right { border-color: var(--ok); background: var(--ok-soft); }
.choice--wrong { border-color: var(--warn); background: var(--warn-soft); }

/* ── buttons ── */
.btn {
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  padding: 11px 18px; font: 600 15px/1 var(--body);
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn--primary { background: var(--crimson); color: #fff; }
.btn--primary:hover:not(:disabled) { background: #dd5c80; }
.btn--quiet { background: transparent; border-color: var(--line-2); color: var(--text-dim); }
.btn--quiet:hover { color: var(--text); border-color: var(--text-faint); }
.btn--ghost { background: var(--surface-2); color: var(--text); }
.btn--small { padding: 8px 13px; font-size: 14px; }
.btn--wide { width: 100%; }
.btn:disabled { opacity: .4; cursor: default; }

/* ── the game panel ── */
.game-panel { gap: 8px; }
.reina--game { min-height: 0; }
.reina--game .reina__say { font-size: 16.5px; }
.movelist {
  list-style: none; margin: 0; padding: 6px 8px;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px 10px;
  overflow-y: auto; min-height: 0; flex: 1;
  font: 500 13.5px/1.9 var(--mono); color: var(--text-dim);
  border-radius: 12px; background: var(--bg-2);
}
.movelist:empty { display: none; }
.movelist li { white-space: nowrap; }
.movelist .n { color: var(--text-faint); margin-right: 4px; }
.movelist .mv { padding: 1px 4px; border-radius: 5px; cursor: default; }
.movelist .mv--now { background: var(--surface-3); color: var(--text); }
.tools { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 4px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font: 500 12px/1 var(--body); color: var(--text-dim);
}
.tool:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); }
.tool:disabled { opacity: .4; cursor: default; }
.tool svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── the review ── */
.nav { display: flex; justify-content: center; gap: 10px; }
.review-panel { overflow: hidden; }
.review-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.stat__v { font: 700 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.stat__k { font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-top: 4px; }
.movelist--graded .mv { cursor: pointer; }
.movelist--graded .mv:hover { color: var(--text); }
.g { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 4px; vertical-align: middle; }
.g--best, .g--good { background: var(--ok); }
.g--inaccuracy { background: var(--gold); }
.g--mistake { background: var(--warn); }
.g--blunder { background: var(--crimson); }
.review-progress { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.review-progress i { display: block; height: 100%; background: var(--gold); width: 0; transition: width .2s; }

/* ── archive ── */
.screen--archive { overflow-y: auto; }
.archive { list-style: none; margin: 0 auto; padding: 4px 16px 32px; width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 8px; }
.arch-row { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; }
.arch-row:hover { border-color: var(--line-2); }
.arch-row__what { font: 600 16px/1.2 var(--display); }
.arch-row__res { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; align-self: center; }
.arch-row__res--win { color: var(--ok); } .arch-row__res--loss { color: var(--crimson); } .arch-row__res--draw { color: var(--gold); }
.arch-row__sub { color: var(--text-faint); font-size: 13px; }
.empty { color: var(--text-faint); text-align: center; padding: 40px 10px; font: italic 17px/1.4 var(--display); }

/* ── sheets ── */
.veil {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  background: var(--veil); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation: veilIn .22s ease both;
}
.veil--center { justify-content: center; padding: 20px; }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
.veil.closing { opacity: 0; transition: opacity .2s; }
.sheet {
  width: 100%; max-width: 520px; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding-bottom: var(--sab);
  animation: sheetIn .32s var(--ease) both;
  transition: transform .25s var(--ease);
}
.sheet.dragging { transition: none; }
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }
.sheet__grab { flex: none; border: 0; background: none; padding: 10px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: grab; touch-action: none; }
.sheet__pill { width: 44px; height: 5px; border-radius: 3px; background: var(--gold-deep); }
.sheet__hint { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.sheet__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 8px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.sheet__title { margin: 2px 0 4px; font: 700 23px/1.2 var(--display); text-align: center; }
.sheet__label { margin: 8px 0 0; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sheet__text { margin: 0; color: var(--text-dim); font-size: 15px; text-align: center; }
.sheet__text--faint { color: var(--text-faint); font-size: 13.5px; }
.sheet__item { width: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; }
.sheet__item:hover { border-color: var(--gold-deep); color: var(--gold-bright); }
.sheet__item--quiet { background: transparent; color: var(--text-dim); font-weight: 500; }
.sheet__item--danger { color: var(--crimson); }
body.veil-open { overflow: hidden; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.seg__opt { border: 0; border-radius: 10px; padding: 10px 6px; background: transparent; cursor: pointer; font-size: 14px; color: var(--text-dim); }
.seg__opt[aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; font-size: 15px; }
.toggle-row input { width: 44px; height: 26px; appearance: none; -webkit-appearance: none; border-radius: 13px; background: var(--surface-3); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.toggle-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-dim); transition: transform .2s var(--ease), background .2s; }
.toggle-row input:checked { background: var(--crimson-deep); }
.toggle-row input:checked::after { transform: translateX(18px); background: #fff; }

.ladder { display: grid; gap: 8px; }
.rung {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; text-align: left;
}
.rung[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.rung__face { width: 44px; height: 44px; border-radius: 12px; background: var(--sq-dark); display: grid; place-items: center; }
.rung__face svg { width: 40px; height: 40px; }
.rung__name { font: 700 17px/1.2 var(--display); }
.rung__sub { color: var(--text-faint); font-size: 13px; }
.rung__elo { font: 600 12px/1 var(--mono); color: var(--gold); }
.rung--adaptive .rung__face { background: var(--surface-3); }

/* ── the verdict ── */
.verdict {
  width: 100%; max-width: 380px; text-align: center;
  padding: 30px 24px 0; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--gold-deep);
  background: radial-gradient(120% 100% at 50% 0%, rgba(209, 74, 111, .2), var(--bg-2) 70%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
  animation: verdictIn .5s var(--spring) both;
}
@keyframes verdictIn { from { transform: scale(.88) translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.verdict__crest { width: 64px; height: 64px; margin: 0 auto 8px; }
.verdict__over { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.verdict__title { margin: 0 0 10px; font: italic 700 42px/1 var(--display); }
.verdict--win .verdict__title { background: linear-gradient(172deg, var(--gold-bright), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.verdict--loss .verdict__title { color: var(--crimson); }
.verdict__line { margin: 0 0 20px; color: var(--text-dim); font: italic 400 17px/1.4 var(--display); }
.verdict__actions { display: grid; gap: 8px; margin: 0 -24px; padding: 16px 20px 20px; background: var(--surface); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--sab)); transform: translateX(-50%);
  z-index: 90; max-width: min(92vw, 460px);
  padding: 12px 16px; border-radius: 14px; background: var(--surface-3); color: var(--text);
  box-shadow: var(--shadow); font-size: 14.5px; text-align: center;
  animation: toastIn .25s var(--ease) both;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Daylight ── */
[data-theme="light"] {
  --bg: #f6f1ec;
  --bg-2: #efe8e1;
  --surface: #ffffff;
  --surface-2: #f8f2ec;
  --surface-3: #ebe2da;
  --line: #e2d7cd;
  --line-2: #cdbfb3;
  --text: #231a2b;
  --text-dim: #5f5266;
  --text-faint: #8f8295;
  --crimson: #a8274c;
  --crimson-deep: #8c1d3b;
  --crimson-soft: rgba(168, 39, 76, .1);
  --gold: #a47d2f;
  --gold-bright: #8a6621;
  --gold-deep: #c9a867;
  --gold-soft: rgba(164, 125, 47, .12);
  --ok: #2f8a58;
  --ok-soft: rgba(47, 138, 88, .1);
  --warn: #b95a26;
  --warn-soft: rgba(185, 90, 38, .1);
  --frame-1: #d9c5bb;
  --frame-2: #bda69a;
  --veil: rgba(40, 28, 44, .35);
  --shadow: 0 1px 2px rgba(60, 40, 50, .08), 0 10px 28px rgba(60, 40, 50, .1);
  color-scheme: light;
}
[data-theme="light"] .wordmark__name { background: linear-gradient(172deg, #b98a35 10%, #8a6621 60%, #5e4312 110%); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .learn-card { background: radial-gradient(140% 120% at 100% 0%, rgba(168, 39, 76, .1), transparent 55%), linear-gradient(160deg, #fff, #fbf6f1); }
[data-theme="light"] .verdict { background: radial-gradient(120% 100% at 50% 0%, rgba(168, 39, 76, .1), #fff 70%); }