/* The Fantastical Logic Grid: app styles.
   Tokens follow the UI Design & Accessibility Guidelines (contrast checked there). */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/atkinson-400.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/atkinson-700.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/cinzel-700.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/atkinson-400-italic.woff2) format("woff2"); }

:root {
  --bg: #FFFFFF; --page: #E9EDF7; --text: #121626; --muted: #4A5168; --accent: #5B3CC4; --accent-hi: #7656E0; --on-accent: #FFFFFF;
  --accent-soft: rgb(91 60 196 / .10); --error: #B3261E; --error-soft: #FBE9E7; --border: #858BA2; --rule: #121626;
  --hairline: rgb(18 22 38 / .10); --x: #3A3F52; --x-fill: #E8EBF3; --cross: #ECEAF9; --hint: #7A4D00; --focus: #5B3CC4;
  --surface: rgb(255 255 255 / .84); --surface-2: #FFFFFF; --edge: rgb(18 22 38 / .10); --edge-hi: rgb(18 22 38 / .24);
  --shadow: 0 22px 50px -30px rgb(30 25 80 / .45); --glow-a: .22; --grid-line: rgb(18 22 38 / .05); --hero-ink: #FFFFFF;
  --w1: #7C5CFF; --w2: #22B8CF;
  --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Cinzel", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --fast: 140ms; --mid: 220ms;
  --radius: 18px; --cell: 44px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="contrast"]) {
    --bg: #121729; --page: #080B16; --text: #EEF0F8; --muted: #AEB5CB; --accent: #F5C451; --accent-hi: #FFE08A; --on-accent: #1B1400;
    --accent-soft: rgb(245 196 81 / .14); --error: #FF8A80; --error-soft: #3A1715; --border: #6A7494; --rule: #E8EAF3;
    --hairline: rgb(255 255 255 / .09); --x: #D6DAE8; --x-fill: #1A1F33; --cross: #1D2541; --hint: #F2C46D; --focus: #FFD66B;
    --surface: rgb(19 24 43 / .78); --surface-2: #1A2038; --edge: rgb(255 255 255 / .10); --edge-hi: rgb(255 255 255 / .24);
    --shadow: 0 24px 60px -28px rgb(0 0 0 / .85); --glow-a: .34; --grid-line: rgb(255 255 255 / .045); --hero-ink: #0D1120;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121729; --page: #080B16; --text: #EEF0F8; --muted: #AEB5CB; --accent: #F5C451; --accent-hi: #FFE08A; --on-accent: #1B1400;
  --accent-soft: rgb(245 196 81 / .14); --error: #FF8A80; --error-soft: #3A1715; --border: #6A7494; --rule: #E8EAF3;
  --hairline: rgb(255 255 255 / .09); --x: #D6DAE8; --x-fill: #1A1F33; --cross: #1D2541; --hint: #F2C46D; --focus: #FFD66B;
  --surface: rgb(19 24 43 / .78); --surface-2: #1A2038; --edge: rgb(255 255 255 / .10); --edge-hi: rgb(255 255 255 / .24);
  --shadow: 0 24px 60px -28px rgb(0 0 0 / .85); --glow-a: .34; --grid-line: rgb(255 255 255 / .045); --hero-ink: #0D1120;
  color-scheme: dark;
}
:root[data-theme="contrast"] {
  --bg: #000000; --page: #000000; --text: #FFFFFF; --muted: #E6E6E6; --accent: #FFD400; --accent-hi: #FFD400; --on-accent: #000000;
  --accent-soft: #000000; --error: #FF8A80; --error-soft: #000000; --border: #FFFFFF; --rule: #FFFFFF;
  --hairline: #FFFFFF; --x: #FFFFFF; --x-fill: #000000; --cross: #1F1F1F; --hint: #FFD400; --focus: #FFD400;
  --surface: #000000; --surface-2: #000000; --edge: #FFFFFF; --edge-hi: #FFFFFF; --shadow: none; --glow-a: 0; --grid-line: transparent; --hero-ink: #000000;
  color-scheme: dark;
}
/* Each theme's world tints the backdrop, hero and theme tiles (decoration only; text never sits on these colors). */
:root[data-world="mystery"] { --w1: #8B5CF6; --w2: #0EA5A4; }
:root[data-world="action"] { --w1: #EF4444; --w2: #F59E0B; }
:root[data-world="adventure"] { --w1: #10B981; --w2: #F59E0B; }
:root[data-world="holiday"] { --w1: #DC2626; --w2: #16A34A; }
:root[data-world="occasion"] { --w1: #EC4899; --w2: #F59E0B; }
:root[data-world="fantasy"] { --w1: #8B5CF6; --w2: #EC4899; }
:root[data-world="scifi"] { --w1: #06B6D4; --w2: #6366F1; }
:root[data-world="sports"] { --w1: #22C55E; --w2: #3B82F6; }
:root[data-world="cooking"] { --w1: #F97316; --w2: #EAB308; }
:root[data-world="pets"] { --w1: #F59E0B; --w2: #14B8A6; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 16px/1.5 var(--font); min-height: 100vh; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.95rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.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; }
.muted { color: var(--muted); }
.help { color: var(--muted); font-size: .9rem; margin: 4px 0 0; }
[hidden] { display: none !important; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }

/* ---------- App bar ---------- */
.appbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); background: var(--bg); border-bottom: 1px solid var(--hairline); }
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 4px; min-height: 44px; cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--text); border-radius: 8px; text-align: left; }
.brand-mark { width: 30px; height: 30px; color: var(--accent); flex: none; }
.appbar-actions { display: flex; gap: 8px; }
.menu { position: absolute; right: max(16px, env(safe-area-inset-right)); top: calc(100% + 4px); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: grid; min-width: 200px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.menu button, .cellmenu button { background: none; border: 0; text-align: left; padding: 10px 12px; min-height: 44px; border-radius: 6px; cursor: pointer; }
.menu button:hover, .menu button:focus-visible, .cellmenu button:hover, .cellmenu button:focus-visible { background: var(--accent-soft); }

/* ---------- Buttons and fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-weight: 700; cursor: pointer; transition: transform var(--fast) var(--ease), background-color var(--fast); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.quiet { border-color: transparent; background: transparent; }
.btn.quiet:hover { background: var(--accent-soft); }
.btn.small { min-height: 44px; padding: 6px 12px; font-size: .95rem; }
.btn.big { min-height: 52px; padding: 12px 28px; font-size: 1.1rem; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn .count { font-weight: 400; color: inherit; }
.field { display: grid; gap: 4px; }
.field label { font-weight: 700; }
.field input[type=text], .field input[type=number] { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); width: 100%; }
fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: 8px; }

/* ---------- Screens ---------- */
.screen { display: block; padding: 24px max(16px, env(safe-area-inset-right)) 64px max(16px, env(safe-area-inset-left)); max-width: 1400px; margin: 0 auto; outline: none; }
.card { background: var(--bg); border: 1px solid var(--hairline); border-radius: 12px; padding: 24px; }
.home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 24px; align-items: start; }
@media (max-width: 1023px) { .home { grid-template-columns: minmax(0, 1fr); } }
.lede { color: var(--muted); max-width: 62ch; margin: 8px 0 24px; }

/* Choice groups: real radios, styled as cards and chips */
.choices { display: grid; gap: 8px; }
.choices.tiers { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.choices.topics { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.choices.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.choice > span { display: block; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); transition: background-color var(--fast), border-color var(--fast); }
.choice b { display: block; }
.choice .suggest { color: var(--text); margin-top: 6px; }
.choice small { display: block; color: var(--muted); font-size: .9rem; line-height: 1.35; margin-top: 2px; }
.choice input:checked + span { border: 2px solid var(--accent); padding: 9px 13px; background: var(--accent-soft); }
.choice input:checked + span > b::before { content: "✓ "; color: var(--accent); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chips .choice > span { padding: 10px 14px; font-weight: 700; }
.chips .choice input:checked + span { padding: 9px 13px; }
.chips .choice input:checked + span:not(:has(b))::before { content: "✓ "; color: var(--accent); }
.custom-size { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; max-width: 480px; }
.more { margin-bottom: 24px; border-top: 1px solid var(--hairline); padding-top: 8px; }
.more summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.more-body { display: grid; gap: 16px; padding-top: 8px; max-width: 560px; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.check, .radio { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input, .radio input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
.clue-types { margin: 0; }
.preview { font-size: 1.05rem; margin: 0 0 8px; }
.warn { border-left: 4px solid var(--hint); padding: 6px 12px; margin: 0 0 16px; }
.gen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.gen-status { margin: 0; color: var(--muted); }
.error-box { margin-top: 16px; border: 2px solid var(--error); background: var(--error-soft); border-radius: 10px; padding: 12px 16px; }
.error-box p { margin: 0 0 8px; }

/* Saved list */
.saved-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.saved-item { border: 1px solid var(--hairline); border-radius: 10px; padding: 12px; display: grid; gap: 8px; }
.saved-item h3 { font-size: 1.05rem; }
.saved-item .info { color: var(--muted); font-size: .9rem; }
.saved-item .bar { height: 8px; border-radius: 4px; background: var(--x-fill); border: 1px solid var(--border); overflow: hidden; }
.saved-item .bar i { display: block; height: 100%; background: var(--accent); }
.saved-item .row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Play ---------- */
.play-head { display: grid; gap: 12px; margin-bottom: 16px; }
.title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.title-row h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: .9rem; white-space: nowrap; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.btn .ico { width: 18px; height: 18px; flex: none; }
.statusline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; min-height: 1.5em; color: var(--muted); }
#status { color: var(--text); font-weight: 700; }
.timer { font-variant-numeric: tabular-nums; }
.story { margin-bottom: 16px; padding: 16px 24px; }
.story summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; list-style-position: outside; }
.story summary h2 { display: inline; }
.story-body p { max-width: 70ch; margin: 8px 0 0; }
.story-body p.goal { font-weight: 700; }
.notes { border-left: 4px solid var(--hint); padding: 8px 12px; margin-bottom: 16px; background: var(--bg); }
.play { display: grid; grid-template-columns: minmax(0, auto) minmax(300px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1199px) { .play { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } }
@media (max-width: 767px) { .play { grid-template-columns: minmax(0, 1fr); } }
.play > * { min-width: 0; }
.side { display: grid; gap: 24px; min-width: 0; }
.grid-card { padding: 16px; outline: none; }
.grid-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font-weight: 700; }
.seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Text around the grid wraps to the grid's width instead of widening the card. */
.grid-card > .hintbox, .grid-card > .coach, .grid-card > .legend { contain: inline-size; }
.grid-card { min-width: min(100%, 360px); }
@media (max-width: 480px) { .brand { font-size: .95rem; } .brand-mark { width: 26px; height: 26px; } }

/* The grid: scrolls inside its own frame with pinned headers. */
.gridframe { overflow: auto; max-height: 80vh; max-width: 100%; border-radius: 4px; overscroll-behavior: contain; }
table.lg { border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.lg th { background: var(--bg); font-weight: 400; }
table.lg thead th { position: sticky; z-index: 2; }
table.lg thead tr:first-child th { top: 0; }
table.lg thead tr:nth-child(2) th { top: var(--cath-h, 30px); }
table.lg tbody th { position: sticky; z-index: 1; }
table.lg tbody th.rcat { left: 0; }
table.lg tbody th.rowh { left: var(--rcat-w, 30px); }
table.lg thead th.corner { left: 0; z-index: 3; }
table.lg th.cath { font-weight: 700; text-align: center; padding: 4px; border-bottom: 2px solid var(--rule); height: 30px; white-space: nowrap; }
table.lg th.colh { vertical-align: bottom; padding: 4px 0 6px; width: var(--cell); min-width: var(--cell); max-width: var(--cell); border-bottom: 2px solid var(--rule); }
table.lg th.colh div { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; margin: 0 auto; max-height: 160px; overflow: hidden; text-overflow: ellipsis; }
table.lg th.colh.lastcol, table.lg th.cath { border-right: 2px solid var(--rule); }
table.lg th.rcat { font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; padding: 4px; min-width: 30px; border-left: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
table.lg th.rowh { text-align: right; padding: 0 8px; white-space: nowrap; height: var(--cell); border-right: 2px solid var(--rule); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
table.lg th.rowh.lastrow { border-bottom: 2px solid var(--rule); }
table.lg th.hl { background: var(--cross); font-weight: 700; }
td.c { width: var(--cell); height: var(--cell); min-width: var(--cell); padding: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg); text-align: center; vertical-align: middle; cursor: pointer; user-select: none; -webkit-user-select: none; position: relative; touch-action: manipulation; -webkit-touch-callout: none; }
td.c.bR { border-right: 2px solid var(--rule); }
td.c.bB { border-bottom: 2px solid var(--rule); }
td.c.cross { background: var(--cross); }
td.c.m-x { background: var(--x-fill); }
td.c:focus { outline: none; box-shadow: inset 0 0 0 3px var(--focus); z-index: 1; }
td.c svg { width: 26px; height: 26px; display: block; margin: auto; pointer-events: none; }
td.c.wrong { box-shadow: inset 0 0 0 3px var(--error); }
td.c.wrong:focus { box-shadow: inset 0 0 0 3px var(--error), inset 0 0 0 6px var(--focus); }
td.c .warn-ico { position: absolute; top: 1px; right: 2px; font-size: 11px; line-height: 1; color: var(--error); }
td.c.target { outline: 3px dashed var(--hint); outline-offset: -5px; }
td.gap { border: 0; background: transparent; }
.mk-x line { stroke: var(--x); stroke-width: 3; stroke-linecap: round; }
.mk-x.auto line { stroke-width: 2; }
td.c.auto { background-image: radial-gradient(circle, var(--border) 1px, transparent 1.4px); background-size: 6px 6px; }
.mk-o circle { fill: var(--accent); stroke: var(--rule); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  td.c svg { animation: settle var(--mid) var(--ease); }
  @keyframes settle { from { transform: scale(.9); opacity: .6; } to { transform: scale(1); opacity: 1; } }
  .solved:not([hidden]) { animation: rise 250ms var(--ease); }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.sym-x, .sym-o { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.sym-x { background: linear-gradient(45deg, transparent 43%, var(--x) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--x) 43% 57%, transparent 57%); }
.sym-o { border-radius: 50%; background: var(--accent); border: 2px solid var(--rule); }

.cellmenu { position: fixed; z-index: 40; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: grid; box-shadow: 0 8px 24px rgb(0 0 0 / .2); min-width: 170px; }

/* List view: same state, one select per row of each sub-grid */
.listview { display: grid; gap: 16px; }
.listview fieldset { margin: 0; border: 1px solid var(--hairline); border-radius: 10px; padding: 12px; }
.listview legend { font-size: 1rem; padding: 0 4px; }
.lv-row { display: grid; grid-template-columns: minmax(100px, 200px) minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 0; }
.lv-row select { min-height: 44px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); max-width: 100%; }

/* Hints and coach */
.hintbox, .coach { border: 2px dashed var(--hint); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; display: grid; gap: 8px; }
.hintbox p, .coach p { margin: 0; }
.hintbox .row, .coach { align-items: center; }
.hintbox .row { display: flex; flex-wrap: wrap; gap: 8px; }
.coach { grid-template-columns: minmax(0, 1fr) auto; }

/* Clues and questions */
.clues h2, .questions h2 { margin-bottom: 12px; }
.clue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.clue-list li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 4px; align-items: start; }
.clue-list .num { font-weight: 700; color: var(--muted); padding-top: 11px; text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }
.clue-list label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-height: 44px; padding: 8px 6px; border-radius: 8px; font-size: 1.0625rem; }
.clue-list label:hover { background: var(--cross); }
.clue-list input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.clue-list li.used .txt { color: var(--muted); text-decoration: line-through; }
.clue-list li.used .num::after { content: " ✓"; }
.clue-list li.hinted label { outline: 3px dashed var(--hint); outline-offset: -2px; }
.q-list { margin: 0 0 12px; padding-left: 1.4em; display: grid; gap: 12px; }
.q-list select { display: block; margin-top: 4px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); max-width: 100%; }
.q-list .res { font-weight: 700; margin-left: 4px; }
.q-list .res.bad { color: var(--error); }

.solved { margin-top: 24px; border: 2px solid var(--accent); outline: none; }
.solved h2 { font-size: 1.6rem; color: var(--accent); }
.ending { font-size: 1.15rem; max-width: 70ch; }
.solved-stats { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0 0 12px; }
.solved-stats div { display: grid; }
.solved-stats dt { color: var(--muted); font-size: .9rem; }
.solved-stats dd { margin: 0; font-weight: 700; font-size: 1.2rem; }
.solved-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Dialogs */
dialog { border: 1px solid var(--border); border-radius: 14px; padding: 24px; background: var(--bg); color: var(--text); max-width: min(560px, calc(100vw - 32px)); width: 100%; max-height: calc(100vh - 32px); overflow: auto; }
dialog.wide { max-width: min(1000px, calc(100vw - 32px)); }
#intro-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; }
.transcript { margin-top: 12px; }
.transcript summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.transcript p { max-width: 70ch; }
dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog h2 { margin-bottom: 12px; }
dialog fieldset { margin-bottom: 16px; }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
table.keys { border-collapse: collapse; width: 100%; margin: 8px 0; }
table.keys th, table.keys td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.keys th { white-space: nowrap; }
input[type=range] { width: 100%; min-height: 44px; accent-color: var(--accent); }

/* Toasts (stay 6 s+, pause on hover/focus) */
.toasts { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(520px, calc(100vw - 32px)); }
.toast { background: var(--text); color: var(--bg); border-radius: 10px; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 12px; justify-content: space-between; box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
.toast .btn { background: transparent; color: var(--bg); border-color: var(--bg); min-height: 40px; }
[data-theme="contrast"] .toast { border: 2px solid var(--text); background: var(--bg); color: var(--text); }
[data-theme="contrast"] .toast .btn { color: var(--text); border-color: var(--text); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; } }
@media (forced-colors: active) {
  td.c:focus { outline: 3px solid Highlight; }
  .mk-o circle { fill: CanvasText; }
  .mk-x line { stroke: CanvasText; }
  .choice input:checked + span { border: 3px solid Highlight; }
}

/* ---------- Multimedia (hidden in silent mode) ---------- */
.silent .media { display: none !important; }
.scene { border-radius: 12px; overflow: hidden; margin-bottom: 16px; width: 100%; height: clamp(120px, 18vw, 220px); background: var(--x-fill); }
.scene-svg { display: block; width: 100%; height: 100%; }
.scene-svg .layer { opacity: 0; transition: opacity 900ms var(--ease); }
.scene-svg .layer.on { opacity: 1; }
.scene-svg .layer.still { transition: none; }
.cast { margin-top: 16px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.cast-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cast-btn { display: grid; justify-items: center; gap: 4px; background: none; border: 2px solid transparent; border-radius: 12px; padding: 6px; min-width: 88px; cursor: pointer; color: var(--text); font-weight: 700; }
.cast-btn:hover { background: var(--cross); }
.cast-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.cast-btn small { font-weight: 400; color: var(--muted); }
.cast-btn svg { border-radius: 50%; transition: transform var(--mid) var(--ease); }
.cast-btn:hover svg, .cast-btn[aria-pressed="true"] svg { transform: scale(1.06); }
.bubble { position: relative; margin-top: 12px; border: 2px solid var(--accent); border-radius: 14px; padding: 12px 16px; background: var(--bg); max-width: 70ch; }
.bubble p { margin: 0 0 6px; } .bubble p:last-child { margin: 0; }
.bubble .who { font-weight: 700; }
.clue-list .from { display: block; font-size: .85rem; color: var(--muted); }
.clue-list li.spot label { background: var(--accent-soft); }
.resolution { position: relative; border-radius: 12px; overflow: hidden; margin: -8px 0 16px; width: 100%; height: clamp(180px, 26vw, 300px); }
.resolution .scene-svg { width: 100%; height: 100%; }
.resolution .spot { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, transparent 0 18%, rgb(0 0 0 / .55) 34%); }
.resolution .hero { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; }
.resolution .hero svg { width: clamp(72px, 14vw, 120px); height: auto; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 40px rgb(255 255 255 / .6); }
.resolution .hero b { background: rgb(0 0 0 / .65); color: #fff; padding: 2px 12px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.silent) .resolution.celebrate .spot { animation: spot 1.4s var(--ease) both; }
  :root:not(.silent) .resolution.celebrate .hero { animation: hero 900ms 500ms var(--ease) both; }
  @keyframes spot { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
  @keyframes hero { from { opacity: 0; transform: translate(-50%, -30%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
  :root:not(.silent) td.c.pulse { animation: pulse 600ms var(--ease); }
  @keyframes pulse { 0% { background: var(--accent-soft); } 100% { background: inherit; } }
}
.silent *, .silent *::before, .silent *::after { animation: none !important; transition-duration: 0ms !important; }

.ai-scene { position: relative; width: 100%; height: 100%; }
.ai-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veil { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.veil i { background: rgb(10 14 30 / .55); backdrop-filter: blur(14px) grayscale(.6); -webkit-backdrop-filter: blur(14px) grayscale(.6); transition: opacity 900ms var(--ease); }
.veil i.gone { opacity: 0; }
.scene .painting { position: absolute; right: 8px; bottom: 8px; background: rgb(0 0 0 / .6); color: #fff; font-size: .85rem; padding: 2px 10px; border-radius: 999px; }
.scene { position: relative; }
.portrait-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.resolution .bg { width: 100%; height: 100%; object-fit: cover; display: block; }
.resolution .hero img { width: clamp(72px, 14vw, 120px); height: clamp(72px, 14vw, 120px); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 40px rgb(255 255 255 / .6); }
#read-story { margin-top: 12px; }
.row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 12px; }
.preview .ai-settings { display: none; }

/* ---------- Game skin: depth, glass panels, world-tinted backdrop, motion ----------
   Decoration only. Text always sits on --surface/--bg, so the contrast checks above hold;
   high contrast mode turns every effect off, and reduced motion / silent mode stop the motion. */
body { background: var(--page); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% -8%, color-mix(in srgb, var(--w1) calc(var(--glow-a) * 100%), transparent), transparent 70%),
    radial-gradient(55vw 55vh at 100% 18%, color-mix(in srgb, var(--w2) calc(var(--glow-a) * 80%), transparent), transparent 70%),
    radial-gradient(80vw 60vh at 50% 115%, color-mix(in srgb, var(--w1) calc(var(--glow-a) * 60%), transparent), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--page);
  transition: background 600ms var(--ease); }
h1, h2, .brand > span, .hero-title, .solved h2, dialog h2 { font-family: var(--display); letter-spacing: .03em; font-weight: 700; }
h1, .h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
h3, legend, .card h3 { font-family: var(--font); }

/* App bar */
.appbar { background: color-mix(in srgb, var(--page) 72%, transparent); border-bottom: 1px solid var(--edge);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.appbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--w1), var(--accent), var(--w2), transparent); opacity: .7; }
.brand { font-size: 1.1rem; min-width: 0; }
.brand > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .brand > span { font-size: .85rem; letter-spacing: .01em; } .appbar-actions .btn { padding: 8px 10px; } }
.brand-mark { color: var(--accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); }
.menu, .cellmenu { background: var(--surface); border: 1px solid var(--edge-hi); border-radius: 14px; box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.menu button, .cellmenu button { border-radius: 10px; font-weight: 700; }

/* Panels */
.card { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--edge), var(--shadow);
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); }
.card > h2:first-child, .grid-head h2, .clues h2, .questions h2, .saved-head h2 { display: flex; align-items: center; gap: 10px; }
.clues h2::before, .questions h2::before, .grid-head h2::before, .saved-head h2::before, .setup-card > h2::before {
  content: ""; width: 4px; height: 1em; border-radius: 2px; background: linear-gradient(var(--accent-hi), var(--accent)); flex: none; }

/* Buttons */
.btn { border-radius: 12px; border: 1px solid var(--edge-hi); background: var(--surface-2); box-shadow: inset 0 1px 0 var(--edge), 0 2px 6px -2px rgb(0 0 0 / .3);
  transition: transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease), background-color var(--fast), border-color var(--fast); }
.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 60%, var(--edge-hi)); box-shadow: inset 0 1px 0 var(--edge), 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); box-shadow: inset 0 2px 6px rgb(0 0 0 / .25); }
.btn.primary { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); border-color: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 10px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.primary:hover:not(:disabled) { border-color: var(--accent-hi); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 14px 32px -10px color-mix(in srgb, var(--accent) 95%, transparent); }
.btn.quiet { background: transparent; box-shadow: none; border-color: transparent; }
.btn.big { border-radius: 14px; }
.btn small { font-weight: 400; opacity: .9; }
.field input[type=text], .field input[type=number], .field input[type=password], .lv-row select, .q-list select { background: var(--bg); border-radius: 10px; border-color: var(--border); }

/* Home: title banner */
.banner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; overflow: hidden;
  padding: clamp(24px, 4vw, 44px); margin-bottom: 24px; border-radius: 24px; border: 1px solid var(--edge-hi);
  background: linear-gradient(135deg, color-mix(in srgb, var(--w1) 22%, var(--surface-2)), var(--surface-2) 55%, color-mix(in srgb, var(--w2) 18%, var(--surface-2)));
  box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow); isolation: isolate; }
.banner::before { content: ""; position: absolute; inset: -30%; z-index: -1; opacity: .55; filter: blur(40px);
  background: radial-gradient(30% 40% at 30% 40%, var(--w1), transparent 70%), radial-gradient(28% 36% at 72% 62%, var(--w2), transparent 70%); }
.hero-art svg { width: clamp(72px, 10vw, 120px); height: auto; display: block; color: var(--accent);
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 60%, transparent)); }
.eyebrow { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; font-weight: 700; color: var(--muted); }
.hero-title { font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.08; margin: 0; }
.hero-tag { margin: 10px 0 20px; color: var(--muted); font-size: 1.1rem; max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#continue-btn > span { display: grid; text-align: left; line-height: 1.2; }
#continue-btn small { font-size: .85rem; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .banner { grid-template-columns: minmax(0, 1fr); gap: 12px; } .hero-art svg { width: 56px; } .hero-actions .btn { flex: 1 1 100%; } }

/* Setup: difficulty cards, theme tiles, size chips */
.choice > span { border-radius: 14px; border: 1px solid var(--edge-hi); background: var(--surface-2); box-shadow: inset 0 1px 0 var(--edge);
  transition: transform var(--fast) var(--ease), border-color var(--fast), box-shadow var(--mid) var(--ease), background-color var(--fast); }
.choice:hover > span { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--edge-hi)); }
.choice input:checked + span { border: 2px solid var(--accent); background: linear-gradient(180deg, var(--accent-soft), transparent), var(--surface-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 14px 30px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.tiers .choice > span { padding: 14px 16px; }
.tiers .choice input:checked + span { padding: 13px 15px; }
.pips { display: flex; gap: 4px; margin-bottom: 8px; }
.pips i { width: 18px; height: 6px; border-radius: 3px; background: var(--x-fill); border: 1px solid var(--border); }
.pips i.on { background: linear-gradient(90deg, var(--accent), var(--accent-hi)); border-color: var(--accent); }
#theme-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
#theme-choices .choice > .tile { display: grid; justify-items: center; gap: 8px; padding: 14px 8px 12px; text-align: center; height: 100%; }
#theme-choices .choice input:checked + .tile { padding: 13px 7px 11px; }
#theme-choices .choice input:checked + .tile > b::before { content: none; }
.tile .glyph { width: 46px; height: 46px; padding: 11px; border-radius: 14px; color: #fff; stroke-width: 2.2;
  background: linear-gradient(135deg, var(--w1), var(--w2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 18px -8px var(--w1);
  transition: transform var(--mid) var(--spring); }
.choice:hover .glyph, .choice input:checked + .tile .glyph { transform: scale(1.08) rotate(-4deg); }
.tile[data-world="mystery"] { --w1: #8B5CF6; --w2: #0EA5A4; } .tile[data-world="action"] { --w1: #EF4444; --w2: #F59E0B; }
.tile[data-world="adventure"] { --w1: #10B981; --w2: #F59E0B; } .tile[data-world="holiday"] { --w1: #DC2626; --w2: #16A34A; }
.tile[data-world="occasion"] { --w1: #EC4899; --w2: #F59E0B; } .tile[data-world="fantasy"] { --w1: #8B5CF6; --w2: #EC4899; }
.tile[data-world="scifi"] { --w1: #06B6D4; --w2: #6366F1; } .tile[data-world="sports"] { --w1: #22C55E; --w2: #3B82F6; }
.tile[data-world="cooking"] { --w1: #F97316; --w2: #EAB308; } .tile[data-world="pets"] { --w1: #F59E0B; --w2: #14B8A6; }
.tile[data-world="random"] { --w1: #7C5CFF; --w2: #22B8CF; }
.chips .choice > span { border-radius: 999px; padding: 10px 18px; }
.chips .choice small { font-weight: 400; }
#theme-choices .choice > .tile { border-radius: 16px; }
.chips .choice input:checked + span { padding: 9px 17px; }
#style-choices .choice > span, #size-choices .choice > span { border-radius: 14px; }
.more { border-top-color: var(--edge); }
.preview { padding: 12px 16px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.preview:empty { display: none; }
.saved-item { background: var(--surface-2); border-color: var(--edge); border-radius: 14px; box-shadow: inset 0 1px 0 var(--edge); }
.saved-item .bar, .hud-bar { height: 8px; border-radius: 999px; background: var(--x-fill); border: 1px solid var(--edge-hi); overflow: hidden; }
.saved-item .bar i, .hud-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--w1), var(--accent)); transition: width 500ms var(--ease); }

/* Play: HUD */
.play-head { padding: 16px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--edge), var(--shadow);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.title-row h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
.pill { border-color: var(--edge-hi); background: var(--surface-2); font-weight: 700; padding: 3px 12px; }
.pill:first-child { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.toolbar .btn { padding: 8px 14px; }
.statusline { gap: 6px 20px; }
.hud-bar { flex: 1 1 160px; max-width: 320px; height: 10px; }
.scene, .resolution { border-radius: var(--radius); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.story { border-left: 3px solid var(--accent); }
.story-body p.goal { color: var(--text); padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); display: inline-block; }
.cast-btn { border-radius: 16px; }
.cast-btn svg, .cast-btn img { box-shadow: 0 0 0 2px var(--edge-hi), 0 10px 20px -10px rgb(0 0 0 / .6); }
.cast-btn[aria-pressed="true"] svg, .cast-btn[aria-pressed="true"] img { box-shadow: 0 0 0 3px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); }
.bubble { background: var(--surface-2); border-color: var(--accent); box-shadow: var(--shadow); }
.seg { border-color: var(--edge-hi); border-radius: 12px; background: var(--surface-2); }
.seg input:checked + span { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--on-accent); }

/* The board */
.gridframe { border-radius: 12px; }
table.lg th { background: var(--bg); }
td.c { background: var(--bg); transition: background-color var(--fast); }
td.c:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
td.c.cross { background: color-mix(in srgb, var(--w1) 14%, var(--bg)); }
table.lg th.hl { background: color-mix(in srgb, var(--w1) 20%, var(--bg)); color: var(--text); }
td.c:focus { box-shadow: inset 0 0 0 3px var(--focus), 0 0 18px color-mix(in srgb, var(--focus) 55%, transparent); }
.mk-o circle { fill: var(--accent); stroke: var(--rule); }
td.c svg.mk-o { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.clue-list label { border-radius: 10px; transition: background-color var(--fast); }
.clue-list .num { color: var(--accent); }
:root:not([data-theme="contrast"]) .clue-list .num { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); }
.hintbox, .coach { background: color-mix(in srgb, var(--hint) 8%, transparent); }

/* Case closed */
.solved { border: 2px solid var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent), 0 30px 80px -30px color-mix(in srgb, var(--accent) 70%, transparent); }
.solved h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.solved-stats div { padding: 10px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--edge-hi); min-width: 120px; }
.solved-stats dd { font-size: 1.4rem; color: var(--accent); }

/* Dialogs and toasts */
dialog { background: var(--surface); border: 1px solid var(--edge-hi); border-radius: 22px; box-shadow: inset 0 1px 0 var(--edge), 0 40px 100px -30px rgb(0 0 0 / .8);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); }
dialog::backdrop { background: rgb(5 7 16 / .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.toast { border-radius: 14px; }

/* Motion (only with motion allowed; silent mode stops it with the rules above) */
@media (prefers-reduced-motion: no-preference) {
  .screen.enter { animation: screen-in 420ms var(--ease) both; }
  @keyframes screen-in { from { opacity: 0; transform: translateY(14px) scale(.995); } to { opacity: 1; transform: none; } }
  .screen.enter .card, .screen.enter .banner, .screen.enter .play-head { animation: rise-in 520ms var(--ease) both; }
  .screen.enter .card:nth-of-type(2) { animation-delay: 80ms; } .screen.enter .side .card:nth-child(2) { animation-delay: 140ms; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .banner::before { animation: aurora 18s ease-in-out infinite; }
  @keyframes aurora { 50% { transform: translate(6%, -4%) scale(1.08); } }
  dialog[open] { animation: dlg-in 260ms var(--spring); }
  @keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
  .solved:not([hidden]) h2 { animation: title-glow 2.4s ease-in-out 2; }
  @keyframes title-glow { 50% { text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 80%, transparent); } }
}

/* Phones: the toolbar becomes a swipeable action dock */
@media (max-width: 640px) {
  .play-head { padding: 12px; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 6px; scroll-snap-type: x proximity; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar .btn { flex: none; scroll-snap-align: start; flex-direction: column; gap: 2px; min-width: 64px; padding: 6px 10px; font-size: .85rem; }
  .toolbar .btn .ico { width: 20px; height: 20px; }
  #theme-choices { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* High contrast: flat, solid, no glow */
:root[data-theme="contrast"] body::before { background: #000; }
:root[data-theme="contrast"] .appbar::after, :root[data-theme="contrast"] .banner::before { display: none; }
:root[data-theme="contrast"] .card, :root[data-theme="contrast"] .banner, :root[data-theme="contrast"] .play-head, :root[data-theme="contrast"] dialog,
:root[data-theme="contrast"] .btn, :root[data-theme="contrast"] .choice > span { background: #000; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; filter: none; }
:root[data-theme="contrast"] .btn.primary, :root[data-theme="contrast"] .seg input:checked + span { background: var(--accent); }
:root[data-theme="contrast"] .tile .glyph { background: #000; border: 2px solid #fff; box-shadow: none; }
:root[data-theme="contrast"] td.c.cross, :root[data-theme="contrast"] table.lg th.hl { background: var(--cross); }
:root[data-theme="contrast"] .hud-bar i, :root[data-theme="contrast"] .saved-item .bar i, :root[data-theme="contrast"] .pips i.on { background: var(--accent); }
@media (forced-colors: active) { body::before, .banner::before, .appbar::after { display: none; } .tile .glyph { forced-color-adjust: auto; } }

/* ---------- Print ---------- */
.print-root { display: none; }
@media print {
  body > *:not(.print-root) { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .print-root { display: block; }
  .pp { break-after: page; }
  .pp:last-child { break-after: auto; }
  .pp h1 { font-size: 18pt; margin: 0 0 4pt; }
  .pp h2 { font-size: 13pt; margin: 10pt 0 4pt; }
  .pp .pmeta { font-size: 10pt; margin: 0 0 8pt; }
  .pp p { margin: 0 0 6pt; }
  .pp ol { margin: 0; padding-left: 18pt; }
  .pp li { break-inside: avoid; margin-bottom: 3pt; }
  .pp .qline { display: inline-block; min-width: 140pt; border-bottom: .5pt solid #000; margin-left: 6pt; }
  table.pg { border-collapse: collapse; font-size: 10pt; break-inside: avoid; margin: 6pt 0 10pt; }
  table.pg tr { break-inside: avoid; }
  table.pg td.c { width: var(--pcell); height: var(--pcell); min-width: var(--pcell); border: .5pt solid #000; text-align: center; vertical-align: middle; padding: 0; font-size: calc(var(--pcell) * .6); line-height: 1; }
  table.pg td.c.bR { border-right: 1.5pt solid #000; }
  table.pg td.c.bB { border-bottom: 1.5pt solid #000; }
  table.pg td.gap { border: 0; }
  table.pg th { font-weight: 400; padding: 0 3pt; }
  table.pg th.cath { font-weight: 700; border-bottom: 1.5pt solid #000; border-right: 1.5pt solid #000; white-space: nowrap; }
  table.pg th.colh { vertical-align: bottom; width: var(--pcell); max-width: var(--pcell); padding: 2pt 0; border-bottom: 1.5pt solid #000; }
  table.pg th.colh div { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; margin: 0 auto; }
  table.pg th.rcat { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; border: 1.5pt solid #000; border-top: 0; }
  table.pg th.rowh { text-align: right; white-space: nowrap; border-right: 1.5pt solid #000; }
  table.pg .po { display: inline-block; width: 62%; height: 62%; border: 1.5pt solid #000; border-radius: 50%; vertical-align: middle; }
  table.ptab { border-collapse: collapse; margin: 6pt 0 10pt; font-size: 10.5pt; }
  table.ptab th, table.ptab td { border: .5pt solid #000; padding: 3pt 6pt; text-align: left; }
  .psteps { font-size: 10pt; }
}

/* Account and sync */
.field input[type=email] { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); width: 100%; }
.field input[type=password] { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); width: 100%; color: var(--text); }
.acct-view { display: grid; gap: 12px; }
.acct-view .help { margin: 0; }
.acct-actions { justify-content: flex-start; margin-top: 4px; }
.acct-switch { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acct-done:empty { display: none; }
.acct-done { margin: 0; border-left: 4px solid var(--accent); padding: 6px 12px; }
.acct-sync, .sync-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  border: 1px solid var(--edge); border-radius: 14px; padding: 8px 8px 8px 16px; background: var(--accent-soft); }
.acct-sync p, .sync-line p { margin: 0; flex: 1 1 220px; }
.sync-line { margin: 0 0 12px; }
.sync-line .dot, .acct-sync .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: var(--muted); vertical-align: middle; }
.sync-line .dot.ok, .acct-sync .dot.ok { background: var(--accent); }
.sync-line .dot.warn, .acct-sync .dot.warn { background: var(--error); }
.acct-danger { margin-top: 8px; border-top: 1px solid var(--hairline); padding-top: 8px; }
.acct-danger summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: var(--error); }
.acct-danger form { display: grid; gap: 12px; }
.btn.danger { background: var(--error-soft); border: 2px solid var(--error); color: var(--error); font-weight: 700; justify-self: start; }
:root[data-theme="contrast"] .acct-sync, :root[data-theme="contrast"] .sync-line { background: #000; border-color: #fff; }