/* =========================================================================
   CLUES & CULPRITS — "The Lineup Room" design system
   Display: Big Shoulders Display · Text: Atkinson Hyperlegible · Data: JetBrains Mono
   ========================================================================= */
@font-face { font-family: "Big Shoulders"; src: url("/fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("/fonts/big-shoulders-display-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JB Mono"; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --ink: #0b1020; --wall: #141b2e; --wall-2: #10172a; --card: #1d2640; --card-2: #26314f; --plate: #0e1424;
  --chalk: #e9ecf5; --muted: #9aa6c2; --line: #2e3a5c; --line-2: #3b4a73;
  --accent: #e8b04a; --accent-2: #ffcf73; --accent-ink: #1b1305;
  --red: #e5484d; --red-bg: #3a1620; --teal: #2ec4a6; --teal-bg: #0f3330; --focus: #7fb2ff;
  --display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: "Atkinson", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JB Mono", ui-monospace, Menlo, Consolas, monospace;
  --scale: 1; --r: 14px; --r-sm: 9px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
  --t1: 120ms; --t2: 200ms; --t3: 320ms; --t4: 600ms; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  /* modern precinct in daylight: cool office white, dark slate ink (gold accent and verdict colours unchanged) */
  --ink: #eef1f6; --wall: #e3e8ef; --wall-2: #d8dee7; --card: #ffffff; --card-2: #f5f7fa; --plate: #1f2533;
  --chalk: #1a2130; --muted: #556072; --line: #d3d9e2; --line-2: #b6bfcc;
  --accent: #b5741a; --accent-2: #d99a3c; --accent-ink: #fff8ec;
  --red: #c4302f; --red-bg: #f6d9d3; --teal: #13806c; --teal-bg: #d5eee6; --focus: #2a5bd7;
  color-scheme: light;
}
:root[data-palette="colorblind"] { --red: #f0a020; --red-bg: #3b2a0c; --teal: #4c8dff; --teal-bg: #11223f; }
:root[data-theme="light"][data-palette="colorblind"] { --red: #a96500; --red-bg: #f6e3bf; --teal: #1f56c9; --teal-bg: #dbe5fb; }

/* skins restyle the room (portraits are re-drawn by the art engine) */

* { box-sizing: border-box; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--chalk) 20%, transparent); border: 3px solid transparent; border-radius: 99px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--accent) 75%, transparent); }
::-webkit-scrollbar-thumb:active { background-color: var(--accent); }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--ink); }
html::-webkit-scrollbar-thumb { border-width: 3px; background-color: color-mix(in srgb, var(--chalk) 16%, var(--ink)); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--chalk) 22%, transparent) transparent; } }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--chalk); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; }
kbd { font: 600 11px var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--muted); }
button { font: inherit; color: inherit; }

/* ---------------- top bar ---------------- */
.topbar { position: sticky; top: 0; z-index: 40; background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 96%, transparent), color-mix(in srgb, var(--ink) 84%, transparent)); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 18%, transparent), 0 8px 24px rgba(0, 0, 0, .25); }
.topbar .inner { max-width: 1480px; margin: 0 auto; height: 62px; padding: 0 18px; display: flex; align-items: center; gap: 18px; position: relative; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--chalk); flex: none; }
.logo .mark { width: 33px; height: 40px; flex: none; transform: rotate(-4deg); filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
/* wordmark: an engraved brushed-steel precinct plate with four screws */
.wm-plate { position: relative; display: inline-grid; justify-items: center; gap: .16em; font-size: 22px; padding: .34em .9em .38em; border-radius: .1em;
  background: linear-gradient(180deg, #c9ced6, #a9afb9 55%, #b7bcc5); box-shadow: inset 0 .03em 0 rgba(255,255,255,.7), inset 0 -.03em 0 rgba(0,0,0,.25), 0 .06em .16em rgba(0,0,0,.35); }
.wm-name { font: 800 1em/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: #3a414d; white-space: nowrap; text-shadow: 0 .025em 0 rgba(255,255,255,.75), 0 -.02em 0 rgba(0,0,0,.35); }
.wm-name em { font: italic 700 .95em/1 Georgia, 'Times New Roman', serif; text-transform: none; letter-spacing: 0; }
.wm-dept { font: 700 .34em/1 var(--body); text-transform: uppercase; letter-spacing: .3em; color: #4b525e; border-top: .05em solid rgba(58,65,77,.5); padding-top: .4em; white-space: nowrap; text-shadow: 0 .04em 0 rgba(255,255,255,.6); }
.wm-screw { position: absolute; width: .16em; height: .16em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #eef0f3, #7d838d); box-shadow: 0 .01em .02em rgba(0,0,0,.5); }
.wm-screw::after { content: ''; position: absolute; left: 20%; right: 20%; top: 45%; height: 10%; background: #5d636c; transform: rotate(35deg); }
.wm-screw.tl { top: .14em; left: .16em; } .wm-screw.tr { top: .14em; right: .16em; } .wm-screw.bl { bottom: .14em; left: .16em; } .wm-screw.br { bottom: .14em; right: .16em; }
.mainnav { display: flex; gap: 3px; margin: 0 auto; padding: 4px; background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line); border-radius: 15px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--chalk) 6%, transparent); }
.mainnav a { display: flex; align-items: center; gap: 7px; font: 800 15px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 9px 15px 9px 12px; border-radius: 11px; transition: background var(--t2), color var(--t2), transform var(--t1); }
.mainnav a .ico { width: 17px; height: 17px; opacity: .85; }
.mainnav a:hover { color: var(--chalk); background: var(--card-2); }
.mainnav a:active { transform: translateY(1px); }
.mainnav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.mainnav a[aria-current="page"] .ico { opacity: 1; }
.top-tools { display: flex; gap: 4px; align-items: center; flex: none; }
.ibtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; position: relative; text-decoration: none; }
.ibtn:hover { color: var(--chalk); background: var(--card); border-color: var(--line); }
.streak-chip { display: inline-flex; align-items: center; gap: 5px; font: 800 17px/1 var(--display); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding: 6px 11px 6px 9px; border-radius: 999px; cursor: pointer; }
.streak-chip .ico { width: 16px; height: 16px; }
.tabbar { display: none; }
@media (max-width: 1080px) { .mainnav a span { display: none; } .mainnav a { padding: 9px 11px; } }
@media (max-width: 760px) {
  .mainnav { display: none; }
  .topbar .inner { justify-content: space-between; height: 54px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--ink) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .3); }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 4px; border-radius: 12px; border: 0; background: none; color: var(--muted); text-decoration: none; font: 800 11.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; position: relative; }
  .tabbar .ico { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: -6px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  body:not(.is-game) { padding-bottom: 72px; }
  body.is-game .tabbar { display: none; }
}

/* ---------------- footer ---------------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 72px; color: var(--muted); font-size: 14px; background: var(--wall-2); }
.site-footer .inner { max-width: 1240px; margin: 0 auto; padding: 32px 20px 44px; display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-footer h2 { font: 800 15px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); margin: 0 0 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 6px 0; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--chalk); }
.site-footer .fine { grid-column: 1 / -1; font-size: 13px; border-top: 1px solid var(--line); padding-top: 18px; }

/* ---------------- shared bits ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); color: var(--chalk); font: 800 18px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform var(--t1), background var(--t2), border-color var(--t2); }
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.primary:hover { background: var(--accent-2); }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.teal { background: var(--teal); border-color: var(--teal); color: #04201b; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 15px; border-radius: 10px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.eyebrow { font: 800 14px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 5px; font: 800 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 5px 10px; border: 1px solid var(--line-2); color: var(--muted); }
.pill.easy { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 50%, transparent); }
.pill.medium { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.pill.hard, .pill.evil { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 7px; height: 7px; border-radius: 2px; background: var(--line-2); }
.dots i.on { background: currentColor; }

/* ---------------- content pages (dossier template) ---------------- */
.page { max-width: 780px; margin: 0 auto; padding: 34px 20px 0; }
.page.wide { max-width: 1160px; }
.crumbs { font: 600 13px var(--mono); color: var(--muted); letter-spacing: .02em; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--chalk); }
.page h1 { font: 900 clamp(40px, 6vw, 64px)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 12px 0 14px; }
.page h2 { font: 800 30px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; margin: 44px 0 12px; }
.page h3 { font: 800 21px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 28px 0 8px; }
.page .lede { font-size: 20px; color: var(--muted); }
.page p, .page li { line-height: 1.65; }
.callout { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 14px 18px; margin: 20px 0; }
.cta { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; margin: 6px 8px 6px 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: 800 18px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; }
.cta.secondary { background: transparent; color: var(--chalk); border: 1px solid var(--line-2); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; margin: 16px 0; }
table.data th, table.data td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font: 800 14px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
table.data td.vc { font: 800 15px var(--display); letter-spacing: .1em; text-transform: uppercase; }
table.data td.vc.c { color: var(--red); } table.data td.vc.i { color: var(--teal); }
.table-scroll { overflow-x: auto; }
details.faq { border-bottom: 1px solid var(--line); padding: 14px 0; }
details.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font: 800 22px/1 var(--display); color: var(--accent); }
details.faq[open] summary::after { content: "–"; }
details.spoiler { background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r); padding: 12px 16px; margin: 12px 0; }
details.spoiler summary { cursor: pointer; font: 800 17px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
details.spoiler[open] { border-style: solid; }
blockquote.clue-quote { margin: 12px 0; padding: 12px 16px; background: var(--card); border-radius: 0 var(--r-sm) var(--r-sm) 0; border-left: 3px solid var(--accent); font-size: 17px; }
blockquote.clue-quote cite { display: block; font: 600 12px var(--mono); color: var(--muted); margin-top: 4px; font-style: normal; }
.cards-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 18px 0; padding: 0; list-style: none; }
.cards-list li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.cards-list li h3 { margin: 0 0 6px; }
.cards-list li p { margin: 0; font-size: 14px; color: var(--muted); }
.mini { display: inline-grid; gap: 4px; margin: 10px 0; }
.mini span { width: 34px; height: 34px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font: 800 14px var(--display); color: var(--muted); }
.mini span.me { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mini span.on { border: 2px solid var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.mini-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.mini-row figure { margin: 0; flex: none; }
.mini-row > div { flex: 1 1 260px; min-width: 0; }
.mini-row > div > p:first-child { margin-top: 0; }
.mini-row figcaption { font-size: 13px; color: var(--muted); max-width: 210px; }
.below-game { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.below-game .page { padding: 0; margin: 0; max-width: 820px; }
.is-future { display: none !important; }
.done { color: var(--teal); margin-left: 4px; font-weight: 700; }

/* archive calendar */
.cal-month { margin: 26px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-grid .wd { font: 800 12px var(--display); letter-spacing: .12em; color: var(--muted); text-align: center; text-transform: uppercase; }
.cal-day { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px 8px; min-height: 96px; display: flex; flex-direction: column; gap: 4px; }
.cal-day .n { font: 900 22px/1 var(--display); }
.cal-day .t { font-size: 11.5px; color: var(--muted); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal-day .lv { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.cal-day .lv a { font: 800 12px/1 var(--display); letter-spacing: .06em; text-decoration: none; color: var(--chalk); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 6px; text-transform: uppercase; }
.cal-day .lv a:hover { border-color: var(--accent); }
.cal-day .lv a .done { margin-left: 2px; }
.cal-day.blank { background: transparent; border-color: transparent; }
@media (max-width: 640px) { .cal-day { min-height: 70px; padding: 5px; } .cal-day .t { display: none; } .cal-day .lv a { padding: 3px 4px; font-size: 11px; } }
.month-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 0; list-style: none; }
.month-grid li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.month-grid .d { font: 900 20px var(--display); text-transform: uppercase; }
.month-grid .t { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.month-grid a.lv { font: 800 14px var(--display); letter-spacing: .06em; text-transform: uppercase; margin-right: 10px; }

/* =========================================================================
   TODAY HUB
   ========================================================================= */
.hub { max-width: 1240px; margin: 0 auto; padding: 26px 16px 0; }
.hub-head { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 24px; margin-bottom: 18px; }
.hub-head h1 { font: 900 clamp(46px, 7vw, 84px)/.88 var(--display); text-transform: uppercase; margin: 6px 0 0; letter-spacing: .005em; }
.hub-head h1 span { color: var(--accent); }
.hub-head h1 .h1-sub { display: block; margin-top: 10px; font: 700 clamp(15px, 1.6vw, 19px)/1.3 var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.hub-meta { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.countdown { font: 700 14px var(--mono); color: var(--muted); }
.countdown b { color: var(--chalk); }
.firstrun { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 20%, var(--card)), var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--r); padding: 14px 18px; margin-bottom: 18px; }
.firstrun p { margin: 0; flex: 1 1 260px; }
.firstrun b { font: 900 22px var(--display); text-transform: uppercase; letter-spacing: .03em; display: block; }
.cases { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.case-card { position: relative; display: flex; flex-direction: column; background: var(--wall); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--chalk); box-shadow: var(--shadow); transition: transform var(--t2) var(--ease), border-color var(--t2); }
.case-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.case-card .strip { position: relative; height: 150px; background: repeating-linear-gradient(to bottom, transparent 0 21px, color-mix(in srgb, var(--chalk) 9%, transparent) 21px 22px), radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, var(--wall)), var(--wall-2)); display: flex; align-items: flex-end; justify-content: center; padding: 0 8px; overflow: hidden; }
/* five portraits share the strip's width: full size on wide cards, shrinking evenly on narrow ones
   (four-card Sundays, phones) so no one is ever cut off at the edges */
.case-card .strip .p { flex: 0 1 96px; min-width: 0; aspect-ratio: 96 / 128; margin: 0 -14px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.case-card .strip .p svg { display: block; width: 100%; height: 100%; }
.case-card .strip .p:first-child { margin-left: 0; } .case-card .strip .p:last-child { margin-right: 0; }
.case-card .strip .p:nth-child(2n) { transform: scale(.9); transform-origin: 50% 100%; }
.case-card .body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.case-card .row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.case-card h2 { font: 900 30px/1 var(--display); text-transform: uppercase; margin: 2px 0 0; letter-spacing: .01em; }
.case-card .crime { font-size: 14px; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.case-card .status { font: 700 13px var(--mono); color: var(--muted); }
.case-card .status.solved { color: var(--teal); }
.case-card .status.going { color: var(--accent); }
.case-card .go { margin-top: 10px; }
.case-card.evil { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.case-card .stamp-solved { position: absolute; top: 16px; right: 14px; font: 900 18px/1 var(--display); letter-spacing: .14em; color: var(--teal); border: 3px double var(--teal); padding: 6px 9px 5px; border-radius: 5px; transform: rotate(8deg); background: color-mix(in srgb, var(--wall) 70%, transparent); }
.how-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 30px 0 0; }
.how-tiles div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.how-tiles .ico { width: 30px; height: 30px; color: var(--accent); }
.how-tiles h3 { font: 900 22px var(--display); text-transform: uppercase; margin: 8px 0 4px; }
.how-tiles p { margin: 0; color: var(--muted); font-size: 15px; }

/* =========================================================================
   GAME SCREEN
   ========================================================================= */
.casebar { max-width: 1480px; margin: 0 auto; padding: 12px 16px 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.casebar .titles { min-width: 0; }
.casebar h1 { font: 900 clamp(26px, 3.4vw, 40px)/1 var(--display); text-transform: uppercase; margin: 0; letter-spacing: .01em; }
.casebar .sub { font: 600 12.5px var(--mono); color: var(--muted); margin-top: 3px; }
.casebar .stats { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font: 700 14px var(--mono); color: var(--chalk); white-space: nowrap; }
.chip .ico { width: 16px; height: 16px; color: var(--muted); }
.level-tabs { display: flex; gap: 4px; }
.level-tabs a { font: 800 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted); border: 1px solid var(--line); padding: 8px 11px; border-radius: 9px; }
.level-tabs a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.level-tabs a .done { color: inherit; }
.crime-line { max-width: 1480px; margin: 0 auto; padding: 0 16px 8px; color: var(--muted); font-size: 14.5px; }

.game { max-width: 1520px; margin: 0 auto; padding: 12px 16px 0; display: grid; gap: 12px 18px; grid-template-columns: auto minmax(340px, 410px); grid-template-rows: auto 1fr; grid-template-areas: "main head" "main side"; justify-content: center; align-items: stretch; }
.game.no-head { grid-template-areas: "main side" "main side"; }
.game > .casebar { grid-area: head; }
.game > .game-main { grid-area: main; }
.game > .side { grid-area: side; }
.game > .casebar { margin: 0; max-width: none; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 10px 8px; align-items: flex-start; }
.game > .casebar .titles { flex: 1 1 200px; }
.game > .casebar h1 { font-size: clamp(22px, 2vw, 30px); }
.game > .casebar { position: relative; padding-right: 44px; gap: 8px 10px; }
.game > .casebar .stats { margin-left: 0; width: 100%; padding-left: 4px; flex-wrap: nowrap; gap: 6px; }
.game > .casebar .stats .chip { height: 30px; padding: 0 8px; font-size: 13px; }
.game > .casebar .level-tabs a { padding: 7px 9px; font-size: 13px; }
.game > .casebar [data-act="menu"] { position: absolute; right: 6px; top: 8px; }
.game > .casebar .crime-wrap { width: 100%; padding: 0 0 0 4px; }
.game > .casebar .crime-line { margin: 0; padding: 0; font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game > .casebar .crime-line.open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.crime-more { margin-top: 2px; padding: 0; border: 0; background: none; color: var(--accent); font: 700 12.5px var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.crime-more:hover { color: var(--accent-2); }
.case-crime { font-size: 17px; line-height: 1.55; color: var(--chalk); border-left: 3px solid var(--accent); padding-left: 12px; }
.game-main { min-width: 0; }
@media (max-width: 1023px) { .game { grid-template-columns: minmax(0, 1fr); padding: 4px 8px 0; } }
.room { position: relative; border-radius: 22px; padding: 14px 14px 12px; background:
  repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--chalk) 7%, transparent) 27px 28px),
  radial-gradient(90% 70% at 50% -10%, color-mix(in srgb, var(--accent) 12%, var(--wall)), var(--wall) 60%, var(--wall-2));
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--chalk) 8%, transparent), var(--shadow); }
.board { --avail: calc(100svh - 100px); display: grid; gap: 7px; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); margin: 0 auto;
  /* fit the whole lineup on screen: card height ≈ 1.02 × width + nameplate */
  width: clamp(calc(var(--cols) * 110px), calc(var(--cols) * ((var(--avail) / var(--rows)) - 7px)), calc(var(--cols) * 214px)); }
.board .axis { display: none; }
/* the side column is exactly as tall as the lineup wall; the case file scrolls inside it */
.side { position: relative; min-height: 0; }
.side-inner { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.side-inner .dossier { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-inner .dossier .panel { flex: 1; min-height: 0; max-height: none; }
.side .tray, .side .actions { margin-top: 0; }
@media (max-width: 1023px) {
  .game, .game.no-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main" "side"; grid-template-rows: auto; }
  .game > .casebar { background: none; border: 0; padding: 0 0 4px; }
  .game > .casebar .stats { padding-left: 0; }
  .game > .casebar .crime-wrap { padding: 2px 0 4px; }
  .side { margin-top: 0; } .side-inner { position: static; } .side-inner .dossier .panel { max-height: 60vh; }
  .board { --avail: calc(100svh - 290px); }
}

.axis { font: 700 11px var(--mono); color: var(--muted); text-align: center; align-self: center; }

/* ---- suspect card ---- */
.card { --rot: 0deg; position: relative; display: flex; flex-direction: column; border-radius: 12px; background: linear-gradient(to bottom, var(--card-2), var(--card)); border: 1px solid var(--line-2); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; color: var(--chalk); transition: transform var(--t2) var(--ease), border-color var(--t2), box-shadow var(--t2), opacity var(--t2); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card .pic { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: repeating-linear-gradient(to bottom, transparent 0 9px, color-mix(in srgb, var(--chalk) 9%, transparent) 9px 10px); }
.card .pic svg { position: absolute; left: 0; top: -2%; width: 100%; height: 100%; transition: filter var(--t3); }
.card .seat { position: absolute; top: 5px; left: 6px; z-index: 2; font: 700 10.5px/1 var(--mono); color: #c9d0e4; background: rgba(8, 12, 24, .62); padding: 3px 4px; border-radius: 4px; }
.card .plate { position: absolute; z-index: 2; left: 5px; right: 5px; bottom: 5px; display: flex; align-items: center; gap: 5px; padding: 4px 5px 5px; background: color-mix(in srgb, var(--plate) 92%, transparent); color: #f2f4fa; border-radius: 6px; border-top: 3px solid var(--job, var(--line-2)); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.card .plate .badge { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--job, var(--line-2)); color: #10131c; }
.card .plate .badge .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.card .plate .who { min-width: 0; line-height: 1; }
.card .plate .nm { display: block; font: 900 calc(19px * var(--scale))/1 var(--display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .plate .jb { display: block; font: 700 calc(9.5px * var(--scale))/1.2 var(--body); text-transform: uppercase; letter-spacing: .05em; color: #aeb7cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.card .says { position: absolute; top: 5px; right: 5px; z-index: 2; width: 20px; height: 20px; border-radius: 6px; display: none; place-items: center; background: var(--accent); color: var(--accent-ink); }
.card.solved.hasclue .says { display: grid; }
.card.guilty { border-color: var(--red); }
.card.innocent { border-color: color-mix(in srgb, var(--teal) 70%, transparent); }
.card.stamping { animation: thud var(--t3) var(--ease) .16s; }
@keyframes thud { 30% { transform: translateY(2px) scale(.985); } 100% { transform: none; } }
/* states */
.card.selected { transform: translateY(-4px) scale(1.03); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 14px 28px rgba(0,0,0,.45); z-index: 4; }
.card.hint-clue { box-shadow: 0 0 0 3px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }
.card.hint-target { outline: 3px dashed var(--accent); outline-offset: 2px; }
.card.ref { box-shadow: 0 0 0 3px var(--focus); }
.card.conflict { box-shadow: 0 0 0 3px var(--red), 0 0 20px color-mix(in srgb, var(--red) 40%, transparent); }
.card.used { opacity: .5; }
.card.shake { animation: shake .38s; }
.card.bounce { animation: bounce .5s var(--spring); }
@keyframes shake { 20% { transform: translateX(-6px) rotate(-1deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes bounce { 35% { transform: translateY(-8px) scale(1.04); } 70% { transform: translateY(1px); } }
/* notes: pencil + tags */
.card .pencil { position: absolute; z-index: 3; right: 5px; top: 26px; font: 700 12px/1 var(--mono); padding: 3px 5px; border-radius: 5px; border: 1.5px dashed; display: none; background: color-mix(in srgb, var(--card) 75%, transparent); }
.card.pencil-i .pencil { display: block; color: var(--teal); }
.card.pencil-c .pencil { display: block; color: var(--red); }
.card.pencil-i { border-style: dashed; border-color: var(--teal); }
.card.pencil-c { border-style: dashed; border-color: var(--red); }
.card .tags { position: absolute; z-index: 3; left: 5px; top: 22px; display: flex; gap: 3px; }
.card .tags i, .tg { font-style: normal; }
.card .tags i { width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; font: 900 9px/1 var(--body); color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.k1 { background: #f5d742; } .k2 { background: #ff9b3d; } .k3 { background: #ff7eb6; } .k4 { background: #5fd3f3; } .k5 { background: #8be27a; } .k6 { background: #c3a6ff; }
.k1::after { content: "●"; } .k2::after { content: "▲"; } .k3::after { content: "■"; } .k4::after { content: "◆"; } .k5::after { content: "★"; } .k6::after { content: "✚"; }
.notes-on .card:not(.solved) { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .card, .card *, .tray, .closing * { animation: none !important; transition: none !important; } }

/* ---- tray: verdicts, testimony, notes, hints ---- */
.tray { margin-top: 12px; background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; padding: 12px 14px; min-height: 128px; box-shadow: var(--shadow); position: relative; }
.tray.flash { animation: trayflash .6s; }
@keyframes trayflash { 0% { box-shadow: 0 0 0 3px var(--accent), var(--shadow); } 100% { box-shadow: var(--shadow); } }
.tray.nope { animation: shake .38s; border-color: var(--red); }
.tray-head { display: flex; align-items: center; gap: 10px; }
.tray-head .face { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; background: var(--card-2); border: 1px solid var(--line-2); }
.tray-head .face svg { width: 100%; height: 100%; }
.tray-head .who b { display: block; font: 900 23px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.tray-head .who span { font: 600 12px var(--mono); color: var(--muted); }
.tray-head .x { margin-left: auto; }
.testimony { font-size: calc(17px * var(--scale)); line-height: 1.45; margin: 9px 0 2px; }
.testimony .line { display: block; color: var(--muted); font-style: italic; font-size: .9em; margin-bottom: 4px; }
.testimony .none { color: var(--muted); font-style: italic; }
.verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.verdicts .btn { min-height: 56px; font-size: 23px; }
.verdicts .btn kbd { border-color: currentColor; color: inherit; opacity: .7; }
.tray-msg { font-size: 15.5px; line-height: 1.5; margin: 6px 0 0; }
.tray-msg b { color: var(--accent); }
.tray-msg.bad b { color: var(--red); }
.tray-title { font: 900 21px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.tray-title .ico { color: var(--accent); }
.tray-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.note-tools { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 10px; align-items: stretch; }
.note-tools .btn.small { gap: 6px; padding: 0 10px; font: 800 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.note-tools .btn.small b { font: 700 14px var(--mono); letter-spacing: 0; }
.note-tools .pen-i { border: 1.5px dashed color-mix(in srgb, var(--teal) 60%, transparent); }
.note-tools .pen-c { border: 1.5px dashed color-mix(in srgb, var(--red) 60%, transparent); }
.note-tools .pen-i b { color: var(--teal); } .note-tools .pen-c b { color: var(--red); }
.note-tools .pen-i[aria-pressed="true"] { background: var(--teal-bg); border-style: solid; border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.note-tools .pen-c[aria-pressed="true"] { background: var(--red-bg); border-style: solid; border-color: var(--red); color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.note-tools [data-note-clear] { width: 42px; padding: 0; justify-content: center; }
.note-tools [data-note-clear]:disabled { opacity: .35; cursor: default; }
.note-tools .tg-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.note-tools .tg { height: 38px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; font: 900 15px var(--body); color: #111; display: grid; place-items: center; transition: transform var(--t1), box-shadow var(--t1); }
.note-tools .tg:hover { transform: translateY(-1px); }
.note-tools .tg[aria-pressed="true"] { border-color: var(--chalk); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px color-mix(in srgb, var(--chalk) 25%, transparent); }
.ref-tok { font-weight: 700; color: var(--chalk); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; border-radius: 3px; }
.ref-tok.prof-tok { text-decoration-style: dotted; }

/* action bar */
.actions { display: flex; gap: 8px; margin-top: 10px; }
.act { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--chalk); cursor: pointer; font: 800 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.act .ico { width: 22px; height: 22px; color: var(--muted); }
.act:hover { border-color: var(--accent); }
.act[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.act[aria-pressed="true"] .ico { color: var(--accent-ink); }
.act:disabled { opacity: .4; cursor: not-allowed; }

/* dossier (desktop side panel / mobile below) */
.dossier { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.dossier .tabs { display: flex; border-bottom: 1px solid var(--line); }
.dossier .tabs button { flex: 1; background: none; border: 0; padding: 13px 6px 11px; font: 800 15px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; }
.dossier .tabs button[aria-selected="true"] { color: var(--chalk); border-bottom-color: var(--accent); }
.dossier .panel { padding: 8px 8px 12px 12px; min-height: 140px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.statements { list-style: none; margin: 0; padding: 0; }
.statements li { display: grid; grid-template-columns: 42px 1fr; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 10px; }
.statements li:hover { background: var(--card-2); }
.statements li .f { width: 42px; height: 42px; border-radius: 9px; overflow: hidden; background: var(--card-2); }
.statements li .f svg { width: 100%; height: 100%; }
.statements li .h { font: 800 16px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.statements li .h small { font: 600 11px var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 4px; text-transform: none; }
.statements li .q { font-size: calc(15px * var(--scale)); line-height: 1.45; margin-top: 4px; }
.statements li .q .line { display: block; color: var(--muted); font-style: italic; font-size: .92em; }
.statements li.used { opacity: .45; }
.statements li.hl { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.statements li.conflict { background: color-mix(in srgb, var(--red) 14%, transparent); box-shadow: inset 3px 0 0 var(--red); }
.statements li.fresh { animation: slidein .45s var(--ease); }
@keyframes slidein { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.log { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.log li { display: flex; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.log li .n { font: 700 12px var(--mono); color: var(--muted); width: 22px; }
.log li .v.c { color: var(--red); font-weight: 700; } .log li .v.i { color: var(--teal); font-weight: 700; }
.log li .s { margin-left: auto; font: 600 12px var(--mono); color: var(--muted); white-space: nowrap; }
.panel-note { font-size: 13px; color: var(--muted); }
@media (max-width: 1023px) { .dossier .panel { max-height: 60vh; } }

/* lines setting (character asides never carry information) */
:root[data-lines="normal"] .line { font-style: normal !important; }
:root[data-lines="dim"] .line { opacity: .5; }
:root[data-lines="hidden"] .line { display: none !important; }

/* phone: board fills the width, compact chrome */
@media (max-width: 640px) {
  .topbar .inner { height: 50px; padding: 0 8px; gap: 8px; }
  .logo { gap: 8px; }
  .logo .mark { width: 27px; height: 32px; }
  .wm-plate { font-size: 16px; padding: .32em .7em .3em; }
  .wm-dept { display: none; }
  .ibtn { width: 36px; height: 36px; }
  .casebar { padding: 8px 10px 4px; gap: 6px 8px; }
  .casebar h1 { font-size: 23px; }
  .casebar .sub { display: none; }
  .casebar .stats .chip { height: 30px; padding: 0 7px; font-size: 12px; }
  .level-tabs a { padding: 6px 8px; font-size: 12px; }
  .room { padding: 7px 5px 6px; border-radius: 16px; }
  .board { gap: 5px; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .axis { font-size: 9px; }
  .card { border-radius: 9px; }
  .card .plate { padding: 2px 3px 3px; gap: 3px; border-top-width: 2px; left: 3px; right: 3px; bottom: 3px; border-radius: 5px; }
  .card .plate .badge { width: 15px; height: 15px; border-radius: 4px; }
  .card .plate .badge .ico { width: 11px; height: 11px; }
  .card .plate .nm { font-size: calc(15px * var(--scale)); }
  .card .plate .jb { font-size: calc(8px * var(--scale)); letter-spacing: .02em; }
  .card .seat { font-size: 8.5px; top: 3px; left: 3px; padding: 2px 3px; }
  .card .says { width: 16px; height: 16px; top: 3px; right: 3px; border-radius: 4px; }
  .card .tags i { width: 12px; height: 12px; font-size: 7px; }
  .card .tags { top: 16px; left: 3px; }
  .card .pencil { top: 18px; right: 3px; }
  .card .pencil { font-size: 10px; padding: 2px 3px; }
  .tray { border-radius: 14px; padding: 10px 11px; min-height: 116px; }
  .testimony { font-size: calc(16px * var(--scale)); }
  .act { padding: 7px 2px 6px; font-size: 11.5px; }
  .act .ico { width: 20px; height: 20px; }
  .game { gap: 0; }
  .site-footer { margin-top: 40px; }
}

/* ---- dialogs & sheets ---- */
dialog { border: 1px solid var(--line-2); background: var(--card); color: var(--chalk); border-radius: 20px; padding: 0; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(5, 8, 16, .7); backdrop-filter: blur(3px); }
dialog .dlg { padding: 22px 22px 20px; position: relative; }
dialog h2 { font: 900 32px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; letter-spacing: .02em; }
dialog .close-x { position: absolute; top: 12px; right: 12px; }
.small-note { font-size: 13px; color: var(--muted); }
.toast { position: fixed; left: 50%; top: 66px; transform: translateX(-50%) translateY(-8px); background: var(--chalk); color: var(--ink); padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 14.5px; opacity: 0; pointer-events: none; transition: opacity var(--t2), transform var(--t2); z-index: 90; max-width: calc(100vw - 24px); box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---- Case closed ---- */
/* ---- results screen: a case report. The story is the hero; nothing overlaps it. ---- */
.closing { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: safe center; padding: 28px 14px; overflow-y: auto; color: #eef1f8;
  background: radial-gradient(70% 60% at 50% 20%, color-mix(in srgb, var(--accent) 10%, rgba(5,8,16,.9)), rgba(5,8,16,.96)); }
.closing .box { position: relative; width: min(640px, 100%); margin: auto 0; text-align: left; padding: 22px 24px 20px; border-radius: 18px;
  background: linear-gradient(180deg, #19223b, #121a2e); border: 1px solid #2e3a5c; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.closing .x { position: absolute; top: 12px; right: 12px; color: #c9d0e4; }
.cl-head { display: flex; align-items: center; gap: 18px; padding-right: 44px; }
.closing .big { flex: none; font: 900 32px/.9 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 4px double var(--accent); padding: 8px 11px 5px; border-radius: 8px; transform: rotate(-4deg); animation: bigstamp var(--t4) var(--spring) both; }
@keyframes bigstamp { from { transform: rotate(-4deg) scale(1.6); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
.cl-case { min-width: 0; }
.cl-case small { display: block; font: 700 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9aa6c2; }
.cl-case h2 { margin: 5px 0 0; font: 900 26px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.closing .stats-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.closing .stats-row div { display: flex; align-items: baseline; gap: 7px; padding: 7px 12px 6px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid #2e3a5c; }
.closing .stats-row div b { font: 900 22px/1 var(--display); color: #fff; }
.closing .stats-row div span { font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9aa6c2; }
.cl-ring { margin-top: 20px; }
.closing .ring-label { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9aa6c2; }
.closing .ring { display: flex; flex-wrap: wrap; gap: 12px 8px; margin-top: 10px; }
.closing .ring .p { position: relative; width: 62px; text-align: center; opacity: 0; transform: translateY(12px); animation: stepup .45s var(--ease) forwards; }
.closing .ring .p svg { display: block; width: 62px; height: 72px; border-radius: 10px; background: rgba(255,255,255,.04); }
.closing .ring .p b { display: block; margin-top: 5px; font: 800 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes stepup { to { opacity: 1; transform: none; } }
.closing .what { margin: 22px 0 0; padding: 18px 22px 20px; border-radius: 12px; background: #f4efe3; color: #23201a; border-left: 4px solid #b5741a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.closing .what b { display: block; margin-bottom: 10px; font: 800 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: #a65d12; }
.closing .what p { margin: 0; font: 400 16.5px/1.65 var(--body); }
.cl-news { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #2e3a5c; }
.cl-news .met { margin: 0; font-size: 13.5px; color: #c3cbe0; } .cl-news .met a { color: var(--accent-2); }
.cl-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid #2e3a5c; }
.closing .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.closing .btns.sub { margin-top: 10px; }
.closing .next { margin: 12px 0 0; font: 700 12px var(--mono); color: #9aa6c2; }
@media (max-width: 640px) {
  .closing { padding: 12px 8px; }
  .closing .box { padding: 18px 16px 16px; border-radius: 16px; }
  .cl-head { gap: 12px; padding-right: 38px; }
  .closing .big { font-size: 24px; border-width: 3px; padding: 6px 8px 4px; }
  .cl-case h2 { font-size: 21px; }
  .closing .ring .p { width: 50px; } .closing .ring .p svg { width: 50px; height: 58px; }
  .closing .ring .p b { font-size: 10.5px; }
  .closing .what { padding: 15px 16px 16px; }
  .closing .what p { font-size: 15.5px; line-height: 1.6; }
  .closing .btns .btn { flex: 1 1 auto; }
}

/* ---- gallery & skins ---- */
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0; list-style: none; }
.gallery li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.gallery .pic { aspect-ratio: 1 / 1.05; background: repeating-linear-gradient(to bottom, transparent 0 11px, color-mix(in srgb, var(--chalk) 8%, transparent) 11px 12px), var(--wall); position: relative; }
.gallery .pic svg { position: absolute; left: 0; top: 4%; width: 100%; height: 100%; }
.gallery li.locked .pic svg { filter: brightness(0) opacity(.5); }
.gallery .meta { padding: 9px 11px 11px; background: var(--plate); color: #eef1f8; }
.gallery .meta b { display: block; font: 900 21px/1 var(--display); text-transform: uppercase; }
.gallery .meta span { display: block; font: 700 11px var(--mono); color: var(--accent); margin-top: 3px; }
.gallery .meta p { margin: 6px 0 0; font-size: 12.5px; color: #b9c1d6; line-height: 1.35; }
.gallery li.locked .meta span, .gallery li.locked .meta p { color: #6c7590; }
.progress { height: 10px; border-radius: 99px; background: var(--card-2); overflow: hidden; margin: 8px 0 4px; max-width: 420px; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.skins { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 16px 0; }
.skin { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.skin .row { display: flex; justify-content: center; padding-top: 12px; height: 128px; overflow: hidden; }
.skin .row span { display: block; width: 92px; height: 112px; margin: 0 -10px; flex: none; }
.skin .row svg { width: 100%; height: 100%; }
.skin .info { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.skin .info b { font: 900 26px/1 var(--display); text-transform: uppercase; display: block; }
.skin .info p { margin: 6px 0 12px; color: var(--muted); font-size: 14px; flex: 1; }
.skin .tag { font: 800 12px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.skin .btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.preview-ribbon { position: fixed; bottom: 12px; left: 12px; z-index: 70; background: var(--accent); color: var(--accent-ink); font: 900 15px var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 10px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; }
.preview-ribbon button { background: var(--accent-ink); color: var(--accent); border: 0; border-radius: 7px; padding: 5px 8px; font: 800 13px var(--display); letter-spacing: .1em; cursor: pointer; }

/* print */
@media print { .topbar, .site-footer, .actions, .tray, .dossier, .no-print { display: none !important; } body { background: #fff; color: #000; } }

/* ---- Victorian London era skin: gaslight, mahogany, brass ---- */
:root[data-skin="victorian"] { --ink: #120c08; --wall: #2a2018; --wall-2: #1a120c; --card: #33271c; --card-2: #3f3123; --plate: #160f09; --chalk: #f2e6d0; --muted: #bba88a; --line: #4d3c2a; --line-2: #6a5238; --accent: #d9a85a; --accent-2: #ecc27e; --accent-ink: #1a1006; --red: #d0614a; --teal: #7fbf9a; --teal-bg: #1d3226; }
:root[data-skin="victorian"] .room { background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(240,220,180,.06) 27px 28px), radial-gradient(80% 70% at 50% -10%, rgba(255,190,110,.22), var(--wall) 60%, var(--wall-2)); border-color: #6a5238; }
:root[data-skin="victorian"] .card { border-color: #6a5238; box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(217,168,90,.12); }
:root[data-skin="victorian"] .card .plate { background: linear-gradient(#1f150d, #120b06); border-top-color: var(--accent); }
:root[data-skin="victorian"] .card .plate .nm { font-family: var(--display); letter-spacing: .08em; }

/* ---- class badges in the gallery ---- */
.class-sec { margin-top: 10px; }
.class-sec h2 { margin-bottom: 4px; }
.cls-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--job); color: #10131c; }
.cls-badge .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.gallery .meta { border-top: 3px solid var(--job); }


/* phones & tablets: the tray floats as a bottom sheet whenever it needs you */
@media (max-width: 1023px) {
  .tray:not([data-kind="idle"]) { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 50; max-height: 55vh; overflow: auto; box-shadow: 0 -10px 40px rgba(0, 0, 0, .55); border-color: var(--accent); }
  body:has(.tray:not([data-kind="idle"])) main { padding-bottom: 230px; }
}

/* nameplate scales with the card (container queries), so faces stay visible at any size */
.card { container-type: inline-size; }
.card .pic svg { top: -9%; }
@container (max-width: 400px) {
  .card .plate { gap: 3.5cqw; padding: 2.5cqw 3cqw 3cqw; left: 3.5cqw; right: 3.5cqw; bottom: 3.5cqw; border-top-width: max(2px, 2cqw); }
  .card .plate .badge { width: 14cqw; height: 14cqw; border-radius: 3.5cqw; }
  .card .plate .badge .ico { width: 10cqw; height: 10cqw; }
  .card .plate .nm { font-size: calc(15.5cqw * var(--scale)); }
  .card .plate .jb { font-size: calc(7.6cqw * var(--scale)); letter-spacing: .03em; }
  .card .seat { font-size: max(8px, 8cqw); }
}
@media (max-width: 640px) {
  .casebar { position: relative; padding-right: 48px; }
  .casebar [data-act="menu"] { position: absolute; right: 6px; top: 6px; }
}

/* ---- the arrest ---- */
.card .fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; }
.card.guilty.stamping .stamp { animation-delay: .32s; animation-fill-mode: both; }
.card.arresting { animation: siren 1.1s linear; }
.card.arresting .fx { animation: flash .45s ease-out; }
.card.arresting .cuffs { animation: cuffsdrop .55s var(--spring) .2s both; }
.card.clearing .fx { animation: cleared .8s ease-out; }
@keyframes flash { 0% { background: rgba(255,255,255,0); } 12% { background: rgba(255,255,255,.92); } 100% { background: rgba(255,255,255,0); } }
@keyframes siren {
  0%, 30%, 60% { box-shadow: 0 0 0 3px #ff2b3a, 0 0 26px 6px rgba(255,43,58,.65), -14px 0 30px rgba(255,43,58,.4); }
  15%, 45%, 75% { box-shadow: 0 0 0 3px #2b7bff, 0 0 26px 6px rgba(43,123,255,.65), 14px 0 30px rgba(43,123,255,.4); }
  100% { box-shadow: 0 4px 10px rgba(0,0,0,.25); }
}
@keyframes cuffsdrop { 0% { transform: translateY(-160%) rotate(-40deg) scale(1.5); opacity: 0; } 55% { transform: translateY(6%) rotate(8deg) scale(.92); opacity: 1; } 100% { transform: none; } }
@keyframes cleared { 0% { background: linear-gradient(100deg, transparent 0%, rgba(46,196,166,0) 30%, rgba(46,196,166,.45) 50%, rgba(46,196,166,0) 70%, transparent 100%) -120% 0 / 220% 100% no-repeat; } 100% { background: linear-gradient(100deg, transparent 0%, rgba(46,196,166,0) 30%, rgba(46,196,166,.45) 50%, rgba(46,196,166,0) 70%, transparent 100%) 120% 0 / 220% 100% no-repeat; } }
.closing .ring .p { position: relative; }
.closing .ring .ring-cuffs { position: absolute; right: -4px; top: 50px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #0e1424; color: #d9dee8; box-shadow: 0 0 0 2px var(--red); animation: cuffsdrop .5s var(--spring) both; animation-delay: calc(var(--d) + 260ms); }
.closing .ring .ring-cuffs .ico { width: 14px; height: 14px; stroke-width: 2.4; }
@media (max-width: 640px) { .closing .ring .ring-cuffs { top: 38px; width: 20px; height: 20px; } }
.closing::before { content: ""; position: fixed; inset: 0; pointer-events: none; animation: lightbar 1.6s linear 2; background: linear-gradient(90deg, rgba(255,43,58,.18), transparent 35%, transparent 65%, rgba(43,123,255,.18)); }
@keyframes lightbar { 0%, 100% { opacity: .2; } 25% { opacity: 1; } 50% { opacity: .2; filter: hue-rotate(180deg); } 75% { opacity: 1; filter: hue-rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .card.arresting, .card.arresting *, .card.clearing .fx, .closing::before, .closing .ring-cuffs { animation: none !important; } }

/* character pages */
.char-hero { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin: 10px 0 8px; }
.char-pics { display: flex; gap: 10px; }
.char-pics span { width: 150px; height: 175px; border-radius: 16px; overflow: hidden; background: repeating-linear-gradient(to bottom, transparent 0 13px, color-mix(in srgb, var(--chalk) 8%, transparent) 13px 14px), var(--wall); border: 1px solid var(--line); border-bottom: 4px solid var(--job); }
.char-pics span:last-child { background: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(240,220,180,.08) 13px 14px), #2a2018; }
.char-pics svg { width: 100%; height: 100%; }
.char-hero h1 { margin-top: 4px; }
@media (max-width: 640px) { .char-pics span { width: 120px; height: 140px; } }

/* =========================================================================
   RECORDS ROOM (archive): steel drawers, manila case folders
   ========================================================================= */
.records .lede { max-width: 760px; }
.filebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 22px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.seg { display: inline-flex; background: var(--card-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; color: var(--muted); font: 800 13.5px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 8px 11px; border-radius: 8px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.filebar select, .filebar input { background: var(--card-2); color: var(--chalk); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: 14px var(--body); }
.filebar .search { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 220px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; color: var(--muted); }
.filebar .search input { border: 0; background: none; padding: 8px 0; flex: 1; min-width: 0; outline: none; }
.filebar .search .ico { width: 16px; height: 16px; }

.cabinet { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 30px; }
.drawer { display: block; border-radius: 14px; background: linear-gradient(#4a5368, #353d50 40%, #2b3243); border: 1px solid #5d6884; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 26px rgba(0,0,0,.4); text-decoration: none; color: inherit; }
:root[data-theme="light"] .drawer { background: linear-gradient(#cfd4dc, #b9bfca 40%, #aab1bd); border-color: #9aa2b0; }
.drawer-front { list-style: none; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 16px 18px; cursor: pointer; position: relative; }
.drawer-front::-webkit-details-marker { display: none; }
.drawer .plate { display: flex; flex-direction: column; align-items: center; min-width: 230px; padding: 8px 18px 7px; border-radius: 6px; background: linear-gradient(#e9cf8a, #c9a24a 55%, #a8832f); color: #2b1d07; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.4); border: 1px solid #8a6a22; }
.drawer .plate b { font: 900 26px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.drawer .plate small { font: 700 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.drawer .handle { width: 120px; height: 16px; border-radius: 10px; background: linear-gradient(#d8dde6, #8f97a6); box-shadow: inset 0 -3px 4px rgba(0,0,0,.35), 0 3px 5px rgba(0,0,0,.45); position: absolute; right: 26px; top: 50%; transform: translateY(-50%); }
.drawer[open] > .drawer-front { border-bottom: 1px solid rgba(0,0,0,.35); }
.drawer-closed .drawer-front { cursor: pointer; }
.drawer-closed:hover, .drawer > summary:hover { filter: brightness(1.08); }
.drawer-body { padding: 16px 16px 8px; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.18)); border-radius: 0 0 14px 14px; }
:root[data-theme="light"] .drawer-body { background: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.04)); }
.drawer-more { text-align: right; }
.drawer-nav { display: flex; justify-content: space-between; }

.filerow { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 10px 0 14px; border-bottom: 1px dashed rgba(255,255,255,.12); }
.filerow:last-of-type { border-bottom: 0; }
.fdate { text-align: center; padding-top: 18px; color: #e9ecf5; }
:root[data-theme="light"] .fdate { color: #1d1a17; }
.fdate b { display: block; font: 900 38px/0.9 var(--display); }
.fdate span { font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.folders { display: grid; gap: 16px 18px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

.folder { position: relative; padding-top: 16px; transition: transform var(--t2) var(--ease); }
.folder:nth-child(3n+1) { transform: rotate(-.6deg); } .folder:nth-child(3n+2) { transform: rotate(.5deg); } .folder:nth-child(3n) { transform: rotate(-.2deg); }
.folder:hover { transform: translateY(-4px) rotate(0); z-index: 2; }
.folder-link { display: grid; grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: "label photo"; gap: 4px 14px; min-height: 140px; padding: 14px 14px 12px 16px; border-radius: 3px 10px 10px 10px; text-decoration: none; color: #3a2a12;
  background: linear-gradient(176deg, rgba(255,255,255,.18), transparent 30%), repeating-linear-gradient(0deg, transparent 0 23px, rgba(120,90,40,.09) 23px 24px), linear-gradient(#ead39f, #dcc086); box-shadow: 0 1px 0 #f6e6bd inset, 0 8px 16px rgba(0,0,0,.35); border: 1px solid #b89a5c; position: relative; }
.folder-link::before { content: ""; position: absolute; left: -1px; top: -15px; width: 46%; height: 16px; border-radius: 8px 10px 0 0; background: #e2c890; border: 1px solid #b89a5c; border-bottom: 0; }
.ftab { position: absolute; left: 10px; top: -13px; z-index: 1; font: 700 11px/1 var(--mono); letter-spacing: .04em; color: #5a4220; }
.flabel { grid-area: label; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-bottom: 22px; }
.flabel b { font: 800 16.5px/1.12 var(--mono); letter-spacing: -.01em; color: #2a1d0a; text-transform: uppercase; }
.flvl { align-self: flex-start; font: 800 11.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px 3px; border-radius: 3px; color: #fff; background: #6b7a52; box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.lv-easy .flvl { background: #2f8a72; } .lv-medium .flvl { background: #b77a1a; } .lv-hard .flvl { background: #b23a35; } .lv-evil .flvl { background: #3b2448; }
.fmeta { font: 600 11.5px var(--mono); color: #6b5430; }
.clip { grid-area: photo; position: relative; align-self: start; margin-top: -24px; }
.clip::before { content: ""; position: absolute; z-index: 2; left: 28px; top: -10px; width: 14px; height: 34px; border: 2.5px solid #9ba3b0; border-radius: 8px; border-bottom-color: transparent; box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.photo { display: block; width: 74px; height: 86px; background: #fffdf7; padding: 4px 4px 12px; box-shadow: 0 3px 7px rgba(0,0,0,.35); transform: rotate(4deg); }
.photo svg { width: 100%; height: 100%; display: block; background: repeating-linear-gradient(to bottom, #2a3350 0 5px, #232b45 5px 6px); }
.fstamp { position: absolute; left: 14px; bottom: 9px; font: 900 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 5px 7px 4px; border: 3px double; border-radius: 4px; transform: rotate(-9deg); opacity: 0; }
.folder.closed .fstamp { opacity: .85; color: #b0302a; }
.folder.going .fstamp { opacity: .8; color: #2b5fb0; font-size: 12px; }
.folder.closed .folder-link { background: linear-gradient(176deg, rgba(255,255,255,.12), transparent 30%), repeating-linear-gradient(0deg, transparent 0 23px, rgba(120,90,40,.09) 23px 24px), linear-gradient(#e2c992, #d0b277); }
.fhint { position: absolute; right: 12px; top: 0; font: 800 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 3px 6px; }
.fhint:hover { color: var(--accent); }
@media (max-width: 640px) {
  .filerow { grid-template-columns: 1fr; gap: 6px; }
  .fdate { text-align: left; padding-top: 0; display: flex; gap: 8px; align-items: baseline; }
  .fdate b { font-size: 26px; }
  .drawer .handle { display: none; }
  .drawer .plate { min-width: 0; }
  .folders { grid-template-columns: 1fr; }
}

/* era pages, pack list, coming soon */
.pack-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.pack-list a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--chalk); }
.pack-list a:hover { border-color: var(--accent); }
.pack-list .n { font: 900 30px/1 var(--display); color: var(--accent); width: 40px; }
.pack-list .t { flex: 1; display: flex; flex-direction: column; }
.pack-list .t b { font: 800 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.pack-list .t small { font: 600 12px var(--mono); color: var(--muted); }
.soon { display: flex; flex-wrap: wrap; margin: 18px 0; border-radius: 20px; overflow: hidden; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(120deg, #15110c, #241a10 50%, #120d09); color: #f3e7cf; position: relative; }
.soon-strip { flex: 1 1 320px; height: 170px; display: flex; align-items: flex-end; justify-content: center; position: relative; background: repeating-linear-gradient(to bottom, transparent 0 21px, rgba(240,220,180,.06) 21px 22px), radial-gradient(80% 90% at 50% 10%, rgba(232,176,74,.28), transparent 70%); }
.soon-strip span { width: 96px; height: 128px; margin: 0 -12px; filter: brightness(0) drop-shadow(0 0 1px rgba(232,176,74,.9)) drop-shadow(0 0 12px rgba(232,176,74,.35)); }
.soon-strip span svg { width: 100%; height: 100%; }
.soon-q { position: absolute; top: 14px; right: 18px; font: 900 64px/1 var(--display); color: rgba(232,176,74,.55); font-style: normal; }
.soon-body { flex: 1 1 320px; padding: 18px 22px; }
.soon-body h2 { font: 900 32px/1 var(--display); text-transform: uppercase; margin: 6px 0 8px; color: #fff; }
.soon-body p { color: #d8c9ac; margin: 0 0 12px; }
.soon .small-note { color: #b9a585; }
.soon.big .soon-strip { height: 210px; }
.soon.big .soon-strip span { width: 120px; height: 160px; }
.era-hero .row .pill { margin-left: 8px; }

@media (max-width: 1023px) { .board { width: min(100%, calc(var(--cols) * ((var(--avail) / var(--rows)) - 5px))); min-width: min(100%, calc(var(--cols) * 78px)); } }
@media (max-width: 640px) { .board { width: 100%; } }

/* =========================================================================
   Game screen v3 — the lineup room reads at a glance
   ========================================================================= */

/* ---- era room tokens: the case-file paper and its ink ---- */
:root {
  --paper: #f2ede1; --paper-2: #e3dccb; --paper-ink: #1f1d19; --paper-muted: #645c4d;
  --paper-rule: rgba(60, 100, 170, .15); --paper-margin: rgba(214, 70, 70, .32); --paper-hl: rgba(255, 210, 60, .34);
  --paper-accent: #a65d12; --paper-red: #b3261e; --paper-teal: #0d7563;
  --paper-font: var(--body); --paper-line-font: var(--body); --paper-size: 15px;
}
:root[data-theme="light"][data-skin="precinct"] {
  --paper: #ffffff; --paper-2: #eef2f7; --paper-ink: #1a2130; --paper-muted: #556072; --paper-rule: rgba(60, 100, 170, .18);
}
:root[data-skin="victorian"] {
  --paper: #ecdcb9; --paper-2: #d9c59c; --paper-ink: #2a1c0f; --paper-muted: #6c5335;
  --paper-rule: rgba(120, 80, 30, .2); --paper-margin: rgba(150, 40, 30, .34); --paper-hl: rgba(196, 128, 40, .2);
  --paper-accent: #8a3b12; --paper-red: #8e2416; --paper-teal: #2f6b45;
  --paper-font: Georgia, "Times New Roman", serif; --paper-line-font: Georgia, "Times New Roman", serif; --paper-size: 15.5px;
}

/* ---- 1. suspect cards: the verdict is a tab on the nameplate, the face stays clear ---- */
.card .pic { background:
  radial-gradient(85% 55% at 50% -6%, rgba(255, 240, 205, .17), transparent 70%),
  repeating-linear-gradient(to bottom, transparent 0 9px, color-mix(in srgb, var(--chalk) 9%, transparent) 9px 10px); }
.card .stamp { position: absolute; left: 4px; bottom: 100%; display: none; align-items: center; gap: 4px; padding: 3px 7px 2px; border-radius: 6px 6px 0 0;
  font: 900 calc(12px * var(--scale))/1 var(--display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform-origin: 25% 100%; box-shadow: 0 -2px 6px rgba(0, 0, 0, .25); }
.card .stamp .cuffs { display: none; width: 1.2em; height: 1.2em; }
.card .stamp .cuffs .ico { width: 100%; height: 100%; stroke-width: 2.4; }
.card.guilty .stamp { display: flex; background: var(--red); color: #fff; }
.card.guilty .stamp .cuffs { display: inline-grid; }
.card.innocent .stamp { display: flex; background: var(--teal); color: #04221c; }
.card.guilty .plate { background: color-mix(in srgb, var(--red) 26%, var(--plate)); }
.card.guilty .pic { background:
  radial-gradient(85% 55% at 50% -6%, color-mix(in srgb, var(--red) 40%, transparent), transparent 75%),
  repeating-linear-gradient(to bottom, transparent 0 9px, color-mix(in srgb, var(--red) 26%, transparent) 9px 10px); }
.card.innocent .pic svg { filter: saturate(.3) brightness(.74); }
.card.innocent .pic { background: repeating-linear-gradient(to bottom, transparent 0 9px, color-mix(in srgb, var(--chalk) 5%, transparent) 9px 10px); }
.card.stamping .stamp { animation: tabstamp var(--t4) var(--spring); }
@keyframes tabstamp { 0% { transform: scale(2.1) rotate(-9deg); opacity: 0; } 45% { opacity: 1; transform: scale(.94) rotate(1deg); } 100% { transform: none; } }
/* has spoken: a speech bubble */
.card .says { width: 24px; height: 22px; top: 5px; right: 5px; border-radius: 0; background: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.card .says svg { width: 100%; height: 100%; display: block; }
.card .says path:first-child { fill: var(--accent); }
.card .says .q { fill: none; stroke: var(--accent-ink); stroke-width: 2.3; stroke-linecap: round; }
/* readability */
.card .plate .who { flex: 1; }
.card .plate .jb { font: 700 calc(13px * var(--scale))/1.1 var(--display); letter-spacing: .05em; color: #c9d0e2; }
.card .seat { font-size: 11.5px; }
.statements li .h small { font-size: 12px; }
.tray-head .who span { font-size: 13px; }
@container (max-width: 400px) {
  .card .stamp { font-size: calc(9.6cqw * var(--scale)); padding: 2cqw 4.5cqw 1.4cqw; left: 3cqw; gap: 2.5cqw; }
  .card .says { width: 18cqw; height: 16.5cqw; top: 3.5cqw; right: 3.5cqw; }
  .card .plate .jb { font: 700 calc(9.4cqw * var(--scale))/1.1 var(--display); letter-spacing: .05em; }
  .card .seat { font-size: max(8.5px, 8.8cqw); }
}

/* ---- 2 & 3. case header: progress pips + the scenario counter ---- */
.progress-row { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 2px 4px 0; }
.pips { grid-column: 1 / -1; display: flex; gap: 3px; }
.pips i { flex: 1 1 0; max-width: 24px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--chalk) 10%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--t3), box-shadow var(--t3), transform var(--t3) var(--spring); }
.pips i.r { margin-left: 5px; }
.pips i.n { background: var(--teal); box-shadow: none; }
.pips i.c { background: var(--red); box-shadow: 0 0 7px color-mix(in srgb, var(--red) 65%, transparent); }
.pcount { font: 600 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.pcount b { color: var(--chalk); font-size: 14px; }
.stories { position: relative; font: 600 12.5px var(--mono); color: var(--muted); white-space: nowrap; cursor: help; }
.stories b { font: 700 15px var(--mono); color: var(--accent); transition: color var(--t2); }
.stories.rolling b { color: var(--accent-2); }
.stories.one b { color: var(--teal); }
.stories .delta { position: absolute; right: 0; bottom: 100%; font: 700 12px var(--mono); font-style: normal; color: var(--teal); opacity: 0; pointer-events: none; }
.stories .delta.show { animation: deltaup 1.5s var(--ease); }
@keyframes deltaup { 0% { opacity: 0; transform: translateY(8px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 1023px) {
  .progress-row { padding: 2px 0 2px; }
  .stories b { font-size: 13.5px; }
}

/* ---- 4. the tray only appears when it has something to act on ---- */
.tray[data-kind="idle"] { display: none; }

/* ---- 5. the case file is paper in a folder ---- */
.dossier { background: linear-gradient(to bottom, var(--card-2), var(--card)); }
.dossier .tabs { border-bottom: 0; padding: 0 6px; }
.dossier .panel {
  --chalk: var(--paper-ink); --muted: var(--paper-muted); --accent: var(--paper-accent); --red: var(--paper-red); --teal: var(--paper-teal);
  --line: color-mix(in srgb, var(--paper-ink) 15%, transparent); --card-2: color-mix(in srgb, var(--paper-ink) 6%, transparent);
  margin: 0 8px 8px; border-radius: 3px 3px 12px 12px; color: var(--paper-ink); font-family: var(--paper-font);
  background:
    linear-gradient(transparent, var(--paper) 60%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent) top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom / 100% 12px no-repeat scroll,
    linear-gradient(90deg, transparent 64px, var(--paper-margin) 64px 65px, transparent 65px) local,
    repeating-linear-gradient(to bottom, transparent 0 25px, var(--paper-rule) 25px 26px) local,
    var(--paper);
  box-shadow: 0 1px 0 var(--paper-2), 0 3px 0 color-mix(in srgb, var(--paper-2) 60%, #000), 0 6px 14px rgba(0, 0, 0, .35); }
.dossier .panel[hidden] { display: none; }
.dossier .statements li { border-bottom: 1px dashed var(--line); border-radius: 4px; }
.dossier .statements li:hover { background: color-mix(in srgb, var(--paper-ink) 5%, transparent); }
.dossier .statements li .f { background: #1d2640; border: 2px solid #fbf8f0; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transform: rotate(-2.5deg); }
.dossier .statements li:nth-child(even) .f { transform: rotate(2deg); }
.dossier .statements li .h { color: var(--paper-ink); font-family: var(--display); }
.dossier .statements li .h small { font-family: var(--mono); }
.dossier .statements li .q { font-size: calc(var(--paper-size) * var(--scale)); }
.dossier .statements li .q .line { font-family: var(--paper-line-font); }
.dossier .statements li.latest { background: linear-gradient(100deg, var(--paper-hl), color-mix(in srgb, var(--paper-hl) 40%, transparent) 70%, transparent); }
.dossier .statements li.latest .h::after { content: "Latest"; margin-left: 8px; padding: 2px 5px 1px; border-radius: 3px; background: var(--paper-red); color: #fff; font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }
.dossier .statements li.used .h::after { display: none; }
.dossier .log li .s, .dossier .log li .n { font-family: var(--mono); }
.dossier .panel-note { color: var(--paper-muted); }

/* ---- 6. the lineup wall: height ruler + row placards, column letters ---- */
@media (min-width: 1024px) {
  .board { --rail: 24px; --avail: calc(100svh - 122px); grid-template-columns: var(--rail) repeat(var(--cols), minmax(0, 1fr));
    width: calc(var(--rail) + 7px + clamp(calc(var(--cols) * 110px), calc(var(--cols) * ((var(--avail) / var(--rows)) - 7px)), calc(var(--cols) * 214px))); }
  .board .axis { display: block; }
  .board .axis.col { height: 15px; font: 800 14px/15px var(--display); letter-spacing: .14em; color: var(--muted); text-align: center; }
  .board .axis.row { position: relative; align-self: stretch; background:
      repeating-linear-gradient(to bottom, color-mix(in srgb, var(--chalk) 22%, transparent) 0 1px, transparent 1px 8px) right top / 6px 100% no-repeat,
      repeating-linear-gradient(to bottom, color-mix(in srgb, var(--chalk) 42%, transparent) 0 1.5px, transparent 1.5px 32px) right top / 12px 100% no-repeat,
      linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb, var(--chalk) 22%, transparent) 0); }
  .board .axis.row b { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 24px; display: grid; place-items: center; border-radius: 4px;
    background: var(--plate); color: #f2f4fa; border: 1px solid var(--line-2); font: 900 15px/1 var(--display); box-shadow: 0 2px 5px rgba(0, 0, 0, .35); }
}

/* ---- 7. the detective's toolkit ---- */
.actions { gap: 0; padding: 4px; margin-top: 0; background: linear-gradient(to bottom, var(--card-2), var(--card)); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--chalk) 8%, transparent), 0 6px 16px rgba(0, 0, 0, .3); }
.act { position: relative; border: 0; background: transparent; border-radius: 12px; transition: background var(--t2), color var(--t2); }
.act + .act::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); }
.act:hover { background: color-mix(in srgb, var(--chalk) 7%, transparent); }
.act:hover .ico { color: var(--accent); }
.act[aria-pressed="true"]::before, .act[aria-pressed="true"] + .act::before { display: none; }
.act[aria-pressed="true"] { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.act .lamp { position: absolute; top: 7px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background var(--t2), box-shadow var(--t2); }
.act[aria-pressed="true"] .lamp { background: #fff7dc; box-shadow: 0 0 8px 2px #ffe08a; }
.act .dots { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; font-style: normal; }
.act .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); transition: background var(--t2); }
.act[data-stage="1"] .dots i:nth-child(-n+1), .act[data-stage="2"] .dots i:nth-child(-n+2), .act[data-stage="3"] .dots i { background: var(--accent); }
.act .badge-n { position: absolute; top: 5px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 700 11px/18px var(--mono); font-style: normal; text-align: center; }
.act:disabled .lamp, .act:disabled .dots, .act:disabled .badge-n { display: none; }

/* ---- 9. era rooms ---- */
/* Modern precinct: poured concrete under strip lights */
.room { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"),
  radial-gradient(45% 35% at 18% 72%, rgba(0, 0, 0, .16), transparent 70%),
  radial-gradient(40% 30% at 85% 40%, rgba(255, 255, 255, .025), transparent 70%),
  repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--chalk) 6%, transparent) 27px 28px),
  radial-gradient(90% 70% at 50% -10%, color-mix(in srgb, var(--accent) 12%, var(--wall)), var(--wall) 60%, var(--wall-2)); }
.room::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; }
/* Victorian London: damask wallpaper by gaslight */
:root[data-skin="victorian"] .room { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='56'%3E%3Cg fill='none' stroke='%23e8c88a' stroke-opacity='.08'%3E%3Cpath d='M24 0L48 28L24 56L0 28Z'/%3E%3C/g%3E%3Cg fill='%23e8c88a' fill-opacity='.09'%3E%3Cpath d='M24 16q5 7 0 12q-5-5 0-12zM24 40q5-7 0-12q-5 5 0 12zM12 28q7-5 12 0q-5 5-12 0zM36 28q-7-5-12 0q5 5 12 0z'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3Ccircle cx='48' cy='0' r='2.5'/%3E%3Ccircle cx='0' cy='56' r='2.5'/%3E%3Ccircle cx='48' cy='56' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(80% 60% at 50% -12%, rgba(255, 186, 100, .26), transparent 65%),
  linear-gradient(to bottom, var(--wall), var(--wall-2)); border-color: #6a5238; }
:root[data-skin="victorian"] .room::after { background: radial-gradient(70% 45% at 50% 0, rgba(255, 170, 80, .1), transparent 70%); animation: gaslight 6s ease-in-out infinite; }
@keyframes gaslight { 0%, 100% { opacity: 1; } 40% { opacity: .65; } 46% { opacity: .9; } 70% { opacity: .75; } }
:root[data-skin="victorian"] .card.guilty .stamp { background: radial-gradient(circle at 30% 25%, #c0452e, #7a1b0f 75%); color: #fbe9d0; font-family: Georgia, serif; font-style: italic; font-weight: 700; text-transform: none; letter-spacing: .03em; }
:root[data-skin="victorian"] .card.innocent .stamp { background: #e8d7b2; color: #2f4a35; font-family: Georgia, serif; font-style: italic; font-weight: 700; text-transform: none; letter-spacing: .03em; }
:root[data-skin="victorian"] .card.arresting { animation: lantern 1.3s ease-out; }
:root[data-skin="victorian"] .card.arresting .fx { animation: lanternfx .7s ease-out; }
@keyframes lantern { 0%, 40% { box-shadow: 0 0 0 3px #ffb347, 0 0 30px 8px rgba(255, 170, 60, .6); } 20%, 60% { box-shadow: 0 0 0 3px #d9a85a, 0 0 14px 3px rgba(255, 170, 60, .3); } 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, .45); } }
@keyframes lanternfx { 0% { background: rgba(255, 200, 120, 0); } 12% { background: rgba(255, 200, 120, .75); } 100% { background: rgba(255, 200, 120, 0); } }
:root[data-skin="victorian"] .closing::before { background: radial-gradient(60% 50% at 50% 0, rgba(255, 170, 80, .3), transparent 70%); animation: gaslight 2.4s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .room::after, .stories .delta, .card.stamping .stamp { animation: none !important; } }

/* =========================================================================
   Top-bar tools + Settings / Record panels
   ========================================================================= */
.top-tools { gap: 6px; }
.tool { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 80%, transparent); color: var(--chalk); font: 800 14px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--chalk) 6%, transparent); transition: border-color var(--t2), background var(--t2); }
.tool .ico { width: 18px; height: 18px; color: var(--accent); }
.tool:hover { border-color: var(--accent); background: var(--card); }
@media (max-width: 1180px) { .tool { width: 40px; padding: 0; justify-content: center; } .tool span { display: none; } }
@media (max-width: 640px) { .tool { width: 36px; height: 36px; border-radius: 10px; } }

dialog.panel-dlg { width: min(560px, calc(100vw - 24px)); background: var(--card); border-color: var(--line-2); overscroll-behavior: contain; }
.panel-dlg .dlg { padding: 0 0 18px; }
.dlg-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 18px 16px 16px 20px; background: linear-gradient(to bottom, var(--card-2), color-mix(in srgb, var(--card-2) 70%, var(--card))); border-bottom: 1px solid var(--line); }
.dlg-head > div { flex: 1; min-width: 0; }
.dlg-head h2 { margin: 0; }
.dlg-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.dlg-head .close-x { position: static; align-self: flex-start; flex: none; }
.dlg-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.dlg-ico .ico { width: 24px; height: 24px; stroke-width: 2; }
.panel-dlg section { padding: 16px 20px 2px; }
.panel-dlg h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 800 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.panel-dlg h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dlg-foot { margin: 8px 0 0; padding: 0 20px; font-size: 13px; color: var(--muted); }
section .dlg-foot { padding: 0; }

/* skin cards */
.skin-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.skin-opt { position: relative; cursor: pointer; }
.skin-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sk-card { position: relative; display: flex; flex-direction: column; height: 100%; padding-bottom: 10px; border-radius: 14px; border: 2px solid var(--line); background: var(--ink); overflow: hidden; transition: border-color var(--t2), transform var(--t2) var(--ease), box-shadow var(--t2); }
.skin-opt:hover .sk-card { border-color: var(--line-2); transform: translateY(-2px); }
.skin-opt input:checked + .sk-card { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.skin-opt input:focus-visible + .sk-card { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.sk-pic { display: block; aspect-ratio: 1 / .86; overflow: hidden; }
.sk-pic svg { display: block; width: 100%; height: 100%; }
.sk-precinct .sk-pic { background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(255, 255, 255, .07) 9px 10px), radial-gradient(90% 70% at 50% 0, #3b4462, #141b2e); }
.sk-victorian .sk-pic { background: radial-gradient(90% 70% at 50% 0, rgba(255, 186, 100, .38), transparent 70%), repeating-linear-gradient(to bottom, transparent 0 9px, rgba(240, 220, 180, .07) 9px 10px), #2a2018; }
.sk-card b { padding: 9px 10px 0; font: 800 15px/1.05 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--chalk); }
.sk-card small { padding: 3px 10px 0; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.sk-tick { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; display: none; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-style: normal; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.sk-tick .ico { width: 15px; height: 15px; stroke-width: 3; }
.skin-opt input:checked + .sk-card .sk-tick { display: grid; }

/* rows: segmented choices and switches */
.pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.pref .pl { font-weight: 700; font-size: 14.5px; }
.pref .pl small { display: block; margin-top: 1px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.segr { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--ink); border: 1px solid var(--line); }
.segr label { position: relative; cursor: pointer; }
.segr input { position: absolute; opacity: 0; pointer-events: none; }
.segr span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 34px; min-height: 32px; padding: 0 11px; border-radius: 8px; font: 800 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: background var(--t2), color var(--t2); }
.segr label:hover span { color: var(--chalk); }
.segr input:checked + span { background: var(--accent); color: var(--accent-ink); }
.segr input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.segr .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35); }
.segr .dot + .dot { margin-left: -9px; }
.segr .ts1 span, .segr .ts2 span, .segr .ts3 span { padding: 0 8px; letter-spacing: 0; text-transform: none; font-family: var(--body); font-weight: 700; }
.segr .ts1 span { font-size: 13px; } .segr .ts2 span { font-size: 16px; } .segr .ts3 span { font-size: 19px; }
.sw-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.panel-dlg h3 + .sw-row, .panel-dlg h3 + .pref { border-top: 0; }
.sw-row .txt { flex: 1; min-width: 0; }
.sw-row b { display: block; font-size: 14.5px; }
.sw-row small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.sw-in { position: absolute; opacity: 0; pointer-events: none; }
.sw { position: relative; flex: none; width: 46px; height: 27px; border-radius: 99px; background: var(--ink); border: 1px solid var(--line-2); transition: background var(--t2), border-color var(--t2); }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--muted); transition: transform var(--t2) var(--spring), background var(--t2); }
.sw-in:checked + .sw { background: var(--accent); border-color: var(--accent); }
.sw-in:checked + .sw::after { transform: translateX(19px); background: var(--accent-ink); }
.sw-in:focus-visible + .sw { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* the service record */
.rank-badge { width: 56px; height: 66px; flex: none; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .45)); }
.rank-badge svg { display: block; width: 100%; height: 100%; }
.rank-kicker { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rank-head h2 { margin: 3px 0 7px; }
.rank-bar { max-width: 300px; height: 7px; border-radius: 99px; background: var(--ink); border: 1px solid var(--line); overflow: hidden; }
.rank-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s var(--ease); }
.rank-head p { font: 600 12.5px var(--mono); }
.rec-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 16px 20px 2px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 4px 10px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); text-align: center; }
.tile .ico { width: 18px; height: 18px; color: var(--muted); }
.tile b { font: 900 32px/1 var(--display); }
.tile span { font: 700 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tile.hot .ico, .tile.hot b { color: var(--accent); }
.rec-levels { display: grid; gap: 9px; }
.lvrow { display: grid; grid-template-columns: 78px 1fr 30px 82px; align-items: center; gap: 10px; }
.lvn { display: flex; align-items: center; gap: 7px; font: 800 14px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.lvn::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--lv); }
.lvbar { height: 10px; border-radius: 99px; background: var(--ink); border: 1px solid var(--line); overflow: hidden; }
.lvbar i { display: block; height: 100%; border-radius: inherit; background: var(--lv); }
.lvrow > b { font: 700 15px var(--mono); text-align: right; }
.lvt { font: 600 12px var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
.lv-easy { --lv: #2ec4a6; } .lv-medium { --lv: var(--accent); } .lv-hard { --lv: #e5484d; } .lv-evil { --lv: #a37bff; }
.rec-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.rec-cal .wd { font: 800 11px var(--display); letter-spacing: .12em; text-align: center; color: var(--muted); }
.rec-cal span:not(.wd) { position: relative; aspect-ratio: 1.45; display: grid; place-items: center; border-radius: 8px; background: var(--ink); border: 1px solid var(--line); }
.rec-cal span b { position: absolute; top: 3px; left: 5px; font: 600 10px var(--mono); color: var(--muted); }
.rec-cal span .ico { width: 17px; height: 17px; margin: 9px 0 0 8px; stroke-width: 3; color: #04221c; }
.rec-cal span.on { background: var(--teal); border-color: var(--teal); }
.rec-cal span.on b { color: #04221c; }
.rec-cal span.today { box-shadow: 0 0 0 2px var(--accent); }
.rec-cal span.future { opacity: .35; background: transparent; border-style: dashed; }
.rec-met { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--ink); border: 1px solid var(--line); color: var(--chalk); text-decoration: none; transition: border-color var(--t2); }
.rec-met:hover { border-color: var(--accent); }
.rec-met .bar { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.rec-met .bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.rec-gallery { padding-bottom: 4px !important; }

/* phones: panels rise from the bottom like a sheet */
@media (max-width: 640px) {
  dialog.panel-dlg { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 88vh; border-bottom: 0; }
  .dlg-head { padding: 14px 12px 12px 16px; }
  .panel-dlg section { padding: 14px 16px 2px; }
  .dlg-foot { padding: 0 16px; }
  .skin-pick { gap: 7px; }
  .sk-card small { display: none; }
  .sk-card b { font-size: 13px; padding: 7px 7px 0; }
  .pref { flex-wrap: wrap; }
  .rec-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px 2px; }
  .lvrow { grid-template-columns: 66px 1fr 24px 72px; gap: 8px; }
  .rec-cal span .ico { width: 13px; height: 13px; margin: 10px 0 0 9px; }
  .rec-cal span b { top: 2px; left: 4px; font-size: 9px; }
}
.tray-msg .share-link { display: block; margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--ink); border: 1px solid var(--line); font: 600 12px/1.4 var(--mono); color: var(--muted); word-break: break-all; user-select: all; }

.closing .btn.ghost { color: #eef1f8; border-color: rgba(238, 241, 248, .4); background: rgba(255, 255, 255, .06); }
.closing .btn.ghost:hover { border-color: var(--accent); color: #fff; }

/* ---- pricing ---- */
.pricing .cur { display: none; }
.pricing[data-cur="USD"] .cur-USD, .pricing[data-cur="EUR"] .cur-EUR, .pricing[data-cur="GBP"] .cur-GBP { display: inline; }
.preview-note { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--accent); color: var(--accent); font: 700 13px var(--mono); }
.cur-switch { margin: 6px 0 18px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.plan.featured { border: 2px solid var(--accent); background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 10%, var(--card)), var(--card)); }
.plan h2 { margin: 0; font: 900 26px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.plan .amount { margin: 6px 0 0; font: 900 44px/1 var(--display); color: var(--chalk); }
.plan .amount small { margin-left: 6px; font: 600 13px var(--mono); color: var(--muted); }
.plan .alt { margin: 0; font-size: 13.5px; color: var(--muted); }
.plan ul { margin: 10px 0 14px; padding-left: 18px; font-size: 14.5px; line-height: 1.5; flex: 1; }
.plan .btn { align-self: stretch; }
.plan .ribbon { position: absolute; top: -12px; right: 16px; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 800 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.founder { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 20px 0 8px; padding: 18px 22px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: linear-gradient(120deg, #15110c, #241a10 55%, #120d09); color: #f3e7cf; }
.founder h2 { margin: 0 0 4px; color: #f3e7cf; }
.founder p { margin: 0; color: #d8c7a6; }
.compare-plans td:not(:first-child), .compare-plans th:not(:first-child) { text-align: center; width: 90px; }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- career: medals, promotions, casebook */
.medal { --m1: #c98a52; --m2: #6e3f1e; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2)); border: 2px solid rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .22), 0 3px 8px rgba(0, 0, 0, .35); color: rgba(20, 16, 10, .82); }
.medal svg { width: 20px; height: 20px; }
.medal.t2 { --m1: #eef1f7; --m2: #7d8699; }
.medal.t3 { --m1: #ffe08a; --m2: #b07116; }
.medal.t4 { --m1: #dff7ff; --m2: #3f8fb6; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 0 14px rgba(120, 210, 255, .45); }
.medal.locked { --m1: var(--card-2); --m2: var(--card-2); background: var(--card-2); border: 2px dashed var(--line-2); box-shadow: none; color: var(--muted); opacity: .8; }

.closing .promo { display: flex; align-items: center; gap: 14px; text-align: left; margin: 0; max-width: none; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 16%, rgba(10, 14, 26, .8)); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); animation: promo-in .7s var(--spring) both .35s; }
.closing .promo-emblem { width: 48px; height: 56px; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.closing .promo-emblem svg { width: 100%; height: 100%; display: block; }
.closing .promo small, .closing .earned > small { display: block; font: 700 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.closing .promo b { display: block; font: 900 24px/1.05 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.closing .promo span { display: block; font-size: 13.5px; color: #c3cbe0; font-style: italic; }
.closing .earned { margin: 0; text-align: left; animation: promo-in .6s var(--ease) both .55s; }
.closing .earned-row { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.closing .earned-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #eef1f8; }
.closing .earned-item .medal { width: 34px; height: 34px; }
.closing .earned-item .medal svg { width: 16px; height: 16px; }
.closing .earned a { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--accent-2); }
@keyframes promo-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .closing .promo, .closing .earned { animation: none; } }

.casebook h2 { display: flex; align-items: baseline; gap: 10px; }
.casebook h2 small { font: 700 13px var(--mono); color: var(--muted); }
.cb-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 22px 24px; border-radius: 18px; background: linear-gradient(160deg, var(--card-2), var(--card)); border: 1px solid var(--line); margin: 14px 0 10px; }
.cb-emblem { width: 92px; height: 108px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); }
.cb-emblem svg { width: 100%; height: 100%; display: block; }
.cb-who small { font: 700 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cb-who h1 { margin: 2px 0 2px; font-size: clamp(30px, 5vw, 46px); }
.cb-motto { margin: 0 0 10px; color: var(--muted); font-style: italic; }
.cb-next { margin: 8px 0 0; font: 600 13px var(--mono); color: var(--muted); }
.cb-next b { color: var(--chalk); }
.cb-tally { text-align: center; padding-left: 20px; border-left: 1px solid var(--line); }
.cb-tally b { display: block; font: 900 44px/1 var(--display); color: var(--accent); }
.cb-tally span { font: 600 12px var(--mono); color: var(--muted); }
.cb-sync { font-size: 14px; color: var(--muted); margin: 0 0 26px; }
.cb-lede { color: var(--muted); margin-top: -6px; }
.cb-ladder { list-style: none; padding: 0; margin: 12px 0 34px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.cb-ladder li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.cb-ladder li b { font: 800 14px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.cb-ladder li small { font: 600 11.5px var(--mono); color: var(--muted); }
.lad-emblem { width: 34px; height: 40px; }
.lad-emblem svg { width: 100%; height: 100%; display: block; }
.cb-ladder li.future { opacity: .45; }
.cb-ladder li.future .lad-emblem { filter: grayscale(1); }
.cb-ladder li.now { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.cb-cat { margin-bottom: 30px; }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cb-ach { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.cb-ach.done { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cb-ach > div { min-width: 0; flex: 1; }
.cb-ach b { display: block; font-size: 15px; }
.cb-ach p { margin: 2px 0 6px; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.cb-bar { display: block; height: 5px; border-radius: 99px; background: var(--ink); border: 1px solid var(--line); overflow: hidden; margin-bottom: 4px; }
.cb-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cb-when { font: 600 11.5px var(--mono); color: var(--muted); }
.cb-ach.done .cb-when { color: var(--accent); }
@media (max-width: 640px) {
  .cb-hero { grid-template-columns: auto 1fr; padding: 16px; gap: 14px; }
  .cb-emblem { width: 64px; height: 76px; }
  .cb-tally { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
  .cb-tally b { font-size: 30px; display: inline; }
}

/* Day shift with a room skin: the skin keeps its character in light colours
   instead of silently overriding the light theme. */
:root[data-theme="light"][data-skin="victorian"] { --ink: #f1e6cf; --wall: #e6d6b6; --wall-2: #dac8a4; --card: #fbf3e2; --card-2: #f3e7cd; --plate: #2b1f14; --chalk: #2a1d10; --muted: #6b563c; --line: #cfb98f; --line-2: #b89d6c; --accent: #8a5a1c; --accent-2: #a8722a; --accent-ink: #fff8ea; --red: #b23a26; --teal: #2f7a55; --teal-bg: #dbeedf; }
:root[data-theme="light"][data-skin="victorian"] .room { background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(90,60,20,.07) 27px 28px), radial-gradient(80% 70% at 50% -10%, rgba(255,210,140,.35), var(--wall) 60%, var(--wall-2)); border-color: var(--line-2); }
:root[data-theme="light"][data-skin="victorian"] .card { border-color: var(--line-2); box-shadow: 0 3px 10px rgba(60,40,10,.18); }

.storage-off { margin: 0; padding: 8px 16px; text-align: center; font-size: 14px; background: color-mix(in srgb, var(--red) 18%, var(--wall-2)); color: var(--chalk); border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------- accounts: sign-in, account page, Pro lock */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-2); text-decoration: underline; cursor: pointer; }
.btn.danger { border-color: color-mix(in srgb, var(--red) 60%, var(--line)); color: var(--red); background: transparent; }
.btn.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; line-height: 1.4; }
.chk input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.account-tool.signed-in { color: var(--accent-2); }

.signin { display: grid; gap: 14px; padding: 4px 2px 0; }
.btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; color: #1f1f1f; border-color: #dadce0; font-weight: 600; }
.btn.google:hover { background: #f4f6f9; }
.signin .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.signin .or::before, .signin .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signin form { display: grid; gap: 10px; }
.signin label[for] { font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.signin input[type="email"], .acc-gift input { width: 100%; font: 16px var(--body, inherit); padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink); color: var(--chalk); }
.signin input[type="email"]:focus, .acc-gift input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.signin .btn.primary { width: 100%; }
.si-error { margin: 0; color: var(--red); font-size: 14px; }
.signin-sent { text-align: center; padding: 10px 6px 4px; }
.signin-sent svg { width: 34px; height: 34px; color: var(--accent); }
.signin-sent h3 { margin: 6px 0 4px; }
.signin-sent p { color: var(--muted); font-size: 14.5px; }

.account { max-width: 680px; }
.acc-msg { padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--teal) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--line)); }
.acc-msg.bad { background: color-mix(in srgb, var(--red) 12%, var(--card)); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.acc-card { padding: 16px 20px; margin: 14px 0; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.acc-card h2 { margin: 0 0 8px; font-size: 20px; }
.acc-card .muted { color: var(--muted); font-size: 14px; }
.acc-list { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; }
.acc-list li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px; background: var(--card-2); }
.acc-list li span { color: var(--muted); font-size: 14px; }
.acc-list code { font: 700 15px var(--mono); letter-spacing: .06em; }
.acc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-gift { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 12px; }
.acc-gift label { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }

.game.is-locked .board > :not(.lock-veil) { filter: blur(3px) grayscale(.6); opacity: .55; pointer-events: none; }
.lock-veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 5; }
.board { position: relative; }
.lock-card { max-width: 380px; text-align: center; padding: 22px 22px 16px; border-radius: 16px; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.lock-card > svg { width: 30px; height: 30px; color: var(--accent); }
.lock-card h2 { margin: 6px 0 6px; font-size: 22px; }
.lock-card p { color: var(--muted); font-size: 14.5px; }
.lock-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Theme-pack summits: Nightmare (bruised violet) and Hell (ember) */
.pill.nightmare, .pill.hell { color: #fff; border-color: transparent; }
.pill.nightmare { background: #4b2a6b; }
.pill.hell { background: linear-gradient(90deg, #8f1d12, #d9481c); box-shadow: 0 0 10px rgba(217, 72, 28, .45); }
.case-card.nightmare { border-color: color-mix(in srgb, #7d4bb3 55%, var(--line)); }
.case-card.hell { border-color: color-mix(in srgb, #d9481c 60%, var(--line)); box-shadow: 0 0 0 1px rgba(217, 72, 28, .25), 0 10px 26px rgba(143, 29, 18, .25); }
.lv-nightmare .flvl { background: #4b2a6b; } .lv-hell .flvl { background: #8f1d12; }
.lv-nightmare { --lv: #b48cff; } .lv-hell { --lv: #ff6a3d; }

/* Previews of screens that aren't switched on yet (sign-in, account, checkout) */
.si-error.info { color: var(--muted); padding: 8px 10px; border-radius: 8px; background: var(--card-2); }
.account.is-preview [data-acc-in] { opacity: .8; }
.co-summary { margin: 4px 0 12px; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.co-summary > div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 10px 14px; background: var(--card); }
.co-summary > div + div { border-top: 1px solid var(--line); }
.co-summary dt { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.co-summary dd { margin: 0; font-size: 14.5px; }
.co-summary [data-co-price] { font: 900 22px/1 var(--display); color: var(--accent); }
.co-summary [data-co-period] { color: var(--muted); font-size: 13.5px; }
.co-methods { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.co-methods svg { width: 15px; height: 15px; flex: none; }
.co-actions { display: grid; gap: 8px; }
.co-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }


/* Sign-in and checkout dialogs: sized to their content, padded like the other panels */
dialog.panel-dlg.signin-dlg { width: min(440px, calc(100vw - 24px)); }
dialog.panel-dlg.checkout-dlg { width: min(480px, calc(100vw - 24px)); }
.signin-dlg .dlg > :not(.dlg-head), .checkout-dlg .dlg > :not(.dlg-head) { margin-left: 20px; margin-right: 20px; }
.signin-dlg .dlg > .preview-note, .checkout-dlg .dlg > .preview-note { margin-top: 16px; margin-bottom: 0; }
.checkout-dlg .co-status { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--chalk); font-size: 14px; line-height: 1.45; }
.signin-dlg .signin { padding-top: 16px; }
.checkout-dlg .co-summary { margin-top: 16px; }
.signin-dlg .dlg-foot, .checkout-dlg .dlg-foot { margin-top: 14px; }
/* a preview notice that wraps reads as a box, not a stretched pill */
.panel-dlg .preview-note, .account .preview-note { display: block; border-radius: 10px; line-height: 1.5; padding: 8px 12px; }
.acc-signin-cta { margin-bottom: 18px; }

/* Packs: the index, and each pack's 50 cases by difficulty */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.pack-card { text-decoration: none; color: inherit; }
.pack-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.pack-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; position: sticky; top: 76px; z-index: 4; padding: 8px 0; background: var(--ink); }
.pack-jump a { text-decoration: none; }
.pack-jump b { margin-left: 4px; }
.pack-level { scroll-margin-top: 140px; margin-bottom: 22px; }
.pack-level h3 { font: 800 22px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 4px; }
.pack-level h3 small { font: 600 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 8px; }
.pack-list .soon-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px dashed var(--line-2); border-radius: 14px; color: var(--muted); }
.pack-list .soon-row .n { color: var(--muted); opacity: .6; }
.pack-list .soon-row .pill { opacity: .55; }

/* Theme for daily cases (Today page) */
.theme-pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.theme-pick .tp-label { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.theme-pick .tp-label svg { width: 16px; height: 16px; color: var(--accent); }
.tp-opts { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.tp-opt { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--chalk); cursor: pointer; text-align: left; font: inherit; }
.tp-opt:hover { border-color: var(--accent); }
.tp-opt[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--card-2)); }
.tp-opt.locked { cursor: default; opacity: .6; border-style: dashed; }
.tp-pic { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; flex: none; background: var(--wall); display: grid; place-items: center; }
.tp-pic svg { width: 100%; height: 100%; display: block; }
.tp-q { font: 900 20px var(--display); color: var(--muted); }
.tp-txt { display: flex; flex-direction: column; line-height: 1.15; }
.tp-txt b { font: 800 14px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.tp-txt small { font-size: 12px; color: var(--muted); }
[data-daily-theme].in-use { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .theme-pick { padding: 10px; } .tp-opt .tp-txt small { display: none; } }

/* Hint pages that unlock by sharing */
.hint-gated.is-gated { filter: blur(7px); opacity: .55; pointer-events: none; user-select: none; max-height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.hint-gate-card { position: relative; z-index: 2; margin: 24px 0 -120px; padding: 22px 22px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--accent); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); text-align: center; }
.hint-gate-card[hidden] { display: none; }
.hint-gate-card .hg-ico svg { width: 30px; height: 30px; color: var(--accent); }
.hint-gate-card h2 { margin: 6px 0 6px; }
.hint-gate-card p { color: var(--muted); }
.hg-link { display: flex; gap: 8px; max-width: 460px; margin: 12px auto; }
.hg-link input { flex: 1; min-width: 0; font: 600 14px var(--mono); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink); color: var(--chalk); }
.hg-actions { margin: 6px 0; }
.hg-status { font-size: 14px; }

/* Rationed hints: how many are left, or how long until the next one */
.act .hint-left { position: absolute; top: 4px; left: 6px; font: 700 10.5px var(--mono); color: var(--muted); }
.act[data-act="hint"].cooling .hint-left { color: var(--accent); }
.act[data-act="hint"].spent { opacity: .55; }
.act[data-act="hint"].cooling svg { opacity: .55; }

/* Archive: files older than the free window, while the Pro lock is on */
.folder.pro-locked .fstamp { opacity: .9; color: var(--accent); font-size: 13px; }
.folder.pro-locked .folder-link { filter: saturate(.55); }
.folder.pro-locked .photo { opacity: .75; }

/* =========================================================================
   The Roaring Twenties — Chicago, 1925 (the first paid pack)
   Black lacquer, gold leaf, sunbursts and chevrons. Portraits are re-printed
   on canvas as gold-toned photo plates (art/deco-canvas.js).
   ========================================================================= */
:root[data-skin="twenties"] {
  --ink: #0b0906; --wall: #17120b; --wall-2: #0e0b07; --card: #1d1710; --card-2: #261e14; --plate: #0a0805;
  --chalk: #f6ead0; --muted: #bba77f; --line: #3a2f1e; --line-2: #5a4828;
  --accent: #e2be70; --accent-2: #f5d996; --accent-ink: #140f06;
  --red: #e0705a; --red-bg: #3a1a12; --teal: #8fc7a0; --teal-bg: #16281c;
  --paper: #efe6cf; --paper-2: #ddd0b0; --paper-ink: #1b150c; --paper-muted: #5e4f36;
  --paper-rule: rgba(60, 40, 10, .12); --paper-margin: rgba(140, 100, 30, .35); --paper-hl: rgba(226, 190, 112, .3);
  --paper-accent: #8a5a12; --paper-red: #9a2a18; --paper-teal: #2f6b45;
  --paper-font: "Courier New", Courier, monospace; --paper-line-font: Georgia, "Times New Roman", serif; --paper-size: 14.5px;
}
:root[data-theme="light"][data-skin="twenties"] {
  --ink: #f3ead6; --wall: #e9dcbd; --wall-2: #dccca6; --card: #fbf5e6; --card-2: #f2e7cd; --plate: #17120b;
  --chalk: #17120b; --muted: #5e4f36; --line: #cdb98d; --line-2: #a98d55;
  --accent: #8a6420; --accent-2: #b0852e; --accent-ink: #fff8e8;
  --red: #a8321e; --red-bg: #f4d8cc; --teal: #2f6b45; --teal-bg: #d6ebdc;
}
/* the room: a gold sunburst rising behind the lineup, a chevron frieze above it */
:root[data-skin="twenties"] .room {
  background:
    linear-gradient(to bottom, transparent 0 12px, transparent 12px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 13L10 3L20 13L30 3L40 13' fill='none' stroke='%23e2be70' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E") top left / 40px 14px repeat-x,
    repeating-conic-gradient(from -90deg at 50% 108%, rgba(226, 190, 112, .085) 0 2.2deg, transparent 2.2deg 7.5deg),
    radial-gradient(70% 55% at 50% 105%, rgba(226, 190, 112, .2), transparent 70%),
    linear-gradient(to bottom, var(--wall), var(--wall-2));
  border-color: #6b5328;
  box-shadow: inset 0 0 0 1px rgba(226, 190, 112, .25), inset 0 0 0 5px var(--wall-2), inset 0 0 0 6px rgba(226, 190, 112, .35), 0 20px 50px rgba(0, 0, 0, .45);
}
:root[data-theme="light"][data-skin="twenties"] .room {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 13L10 3L20 13L30 3L40 13' fill='none' stroke='%238a6420' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E") top left / 40px 14px repeat-x,
    repeating-conic-gradient(from -90deg at 50% 108%, rgba(138, 100, 32, .08) 0 2.2deg, transparent 2.2deg 7.5deg),
    linear-gradient(to bottom, var(--wall), var(--wall-2));
}
:root[data-skin="twenties"] .room::after { background: radial-gradient(60% 40% at 50% 100%, rgba(245, 217, 150, .12), transparent 70%); }
:root[data-skin="twenties"] .card { border-color: #7a5e2c; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(226, 190, 112, .22); }
:root[data-skin="twenties"] .card .plate { background: linear-gradient(#17120b, #0a0805); border-top: 2px solid var(--accent); }
:root[data-skin="twenties"] .card .plate .nm { letter-spacing: .14em; }
:root[data-skin="twenties"] .card .pic { background: #0d0a07; }
:root[data-skin="twenties"] .card.guilty .stamp { background: linear-gradient(135deg, #8e1f2e, #4a0c14); color: #f5d996; border: 1px solid #e2be70; letter-spacing: .2em; }
:root[data-skin="twenties"] .card.innocent .stamp { background: linear-gradient(135deg, #f5e6c0, #d9c38a); color: #1b150c; border: 1px solid #8a6420; letter-spacing: .2em; }
/* the arrest: a magnesium flash, then a gold afterglow */
:root[data-skin="twenties"] .card.arresting { animation: magnesium 1.1s ease-out; }
:root[data-skin="twenties"] .card.arresting .fx { animation: magnesiumfx .6s ease-out; }
@keyframes magnesium { 0% { filter: none; } 5% { filter: brightness(2.4) contrast(.6); } 30% { filter: brightness(1.2); box-shadow: 0 0 0 3px #e2be70, 0 0 28px 6px rgba(226, 190, 112, .55); } 100% { filter: none; } }
@keyframes magnesiumfx { 0% { background: rgba(255, 248, 225, 0); } 6% { background: rgba(255, 248, 225, .9); } 100% { background: rgba(255, 248, 225, 0); } }
:root[data-skin="twenties"] .closing::before { background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(226, 190, 112, .14) 0 2deg, transparent 2deg 7deg); }
:root[data-skin="twenties"] .closing .big { color: #e2be70; border-color: #e2be70; letter-spacing: .14em; }

/* portraits re-printed on canvas */
svg.portrait.deco-src { display: none !important; } /* wins over any "display: block" on portraits, e.g. the case-card strips */
.deco-plate { display: block; width: 100%; height: 100%; }
.card .pic .deco-plate { position: absolute; inset: 0; }
@media print { svg.portrait.deco-src { display: block !important; } .deco-plate { display: none; } }

/* era-coloured strips (pack pages, shelves, gallery) */
.era-strip.era-victorian { background: repeating-linear-gradient(to bottom, transparent 0 21px, rgba(240, 220, 180, .08) 21px 22px), radial-gradient(120% 90% at 50% 0%, #5a3d22, #1a120c); }
.era-strip.era-twenties { background: repeating-conic-gradient(from -90deg at 50% 110%, rgba(226, 190, 112, .12) 0 2.4deg, transparent 2.4deg 8deg), radial-gradient(90% 80% at 50% 110%, #5a4524, #120d07 70%); }
.era-strip.era-modern { background: var(--wall); }
.pill.paid { color: #f5d996; background: #1d1710; border-color: #a5813a; }

/* the homepage shelf of theme packs */
.pack-shelf { margin: 28px 0 8px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shelf-head h2 { margin: 0 0 12px; font: 900 28px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.shelf-head a { color: var(--accent); font-weight: 700; text-decoration: none; }
.shelf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; align-items: stretch; }
.shelf-row .soon { margin: 0; }
.pack-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); text-decoration: none; color: #f6ead0; border-radius: 22px; overflow: hidden; position: relative; background: #0e0b07; border: 1px solid #8a6a2e; box-shadow: inset 0 0 0 5px #0e0b07, inset 0 0 0 6px rgba(226, 190, 112, .45), 0 18px 46px rgba(0, 0, 0, .35); transition: transform var(--t2), box-shadow var(--t2); }
.pack-feature:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 5px #0e0b07, inset 0 0 0 6px rgba(226, 190, 112, .7), 0 22px 56px rgba(0, 0, 0, .45); }
.pf-art { position: relative; min-height: 230px; display: flex; align-items: flex-end; justify-content: center; padding: 0 10px; overflow: hidden; }
.pf-art .p { width: 108px; height: 142px; margin: 0 -10px; flex: none; position: relative; z-index: 1; }
.pf-art .p svg, .pf-art .p canvas { width: 100%; height: 100%; display: block; }
.pf-sun { position: absolute; inset: 0; background: radial-gradient(40% 40% at 50% 104%, rgba(245, 217, 150, .45), transparent 70%); }
.pf-body { padding: 22px 24px 20px; display: flex; flex-direction: column; justify-content: center; }
.pf-body .eyebrow { color: #e2be70; }
.pf-body h2 { margin: 6px 0 8px; font: 900 clamp(30px, 4vw, 44px)/.95 var(--display); text-transform: uppercase; letter-spacing: .06em; color: #f5d996; }
.pf-body p { color: #d8c8a4; margin: 0 0 12px; }
.pf-body .status { color: #bba77f; font: 600 13px var(--mono); }
.pf-body .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-body .btn.primary { background: linear-gradient(#f5d996, #c89a42); color: #140f06; border-color: #f5d996; }
@media (max-width: 760px) { .pack-feature { grid-template-columns: 1fr; } .pf-art { min-height: 190px; } }

/* the next era, glimpsed: silhouettes in drifting fog */
.soon.ghost { border-style: dashed; }
.ghost-strip span { opacity: .55; filter: brightness(0) blur(.6px) drop-shadow(0 0 10px rgba(200, 210, 230, .25)); }
.ghost-fog { position: absolute; inset: 0; background: radial-gradient(60% 50% at 30% 80%, rgba(210, 220, 235, .16), transparent 70%), radial-gradient(50% 40% at 75% 70%, rgba(210, 220, 235, .12), transparent 70%); animation: ghostfog 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes ghostfog { from { transform: translateX(-4%); opacity: .8; } to { transform: translateX(4%); opacity: 1; } }
.ghost-place { font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #b9a585 !important; margin: -4px 0 10px !important; }
@media (prefers-reduced-motion: reduce) { .ghost-fog { animation: none; } }