/* Release treatment: a compact case desk with readable, tactile controls. */
:root {
  --paper: #f5efe3;
  --card: #fffdf8;
  --line: #d9ccb8;
  --crimson: #741b29;
  --gold: #b08847;
  --gold-soft: #eed5a0;
}
body { background: radial-gradient(circle at 50% -8%, #3a2e22 0, #12100e 34rem, #080807 70rem); }
html { scroll-behavior: auto; }
.topbar { min-height: 60px; background: #100e0ced; }
.topbar-brand { font-size: .8rem; }
.intro-view { padding-top: 24px; }
.intro-view .brand-medallion { width: 72px; height: 72px; margin-bottom: 14px; }
.intro-view h1 span { font-size: clamp(2.8rem, 8vw, 4.8rem); }
.intro-view h1 span:last-child { font-size: clamp(2.6rem, 7vw, 4.25rem); margin-top: 2px; }
.intro-view .tagline { margin-top: 17px; }
.intro-view .move-line { margin-top: 4px; }
.current-case { margin-top: 20px; margin-bottom: 14px; background: #211b16; border: 1px solid #76603f; border-left: 5px solid var(--gold-soft); border-radius: 14px; box-shadow: 0 16px 42px #0003; }
.current-case .kicker { margin-bottom: 5px; }
.intro-actions { margin-top: 14px; }
.resume-case-button { grid-column: 1 / -1; }
.release-note { margin: 10px 0 0; color: #e7d3ad; font: 650 .83rem/1.4 system-ui, sans-serif; text-align: center; }
.meta-strip { margin-top: 19px; }
.completion-count { color: #f2daa9; font-weight: 750; }
.primary-button { background: linear-gradient(180deg, #f6e1b4, #e2bb72); border-color: #d5a65c; }
.primary-button:hover { background: #f8e2b5; }
.primary-button:active, .answer-choice:active, .answer-chip:active, .coordinate-chip:active, .key:active { transform: scale(.98); }
.game-header { top: 60px; }
.challenge-wrap { padding-top: 16px; }
.challenge-card { border-color: #b9a789; box-shadow: 0 18px 48px #261b1828; }
.card-head { background: linear-gradient(145deg, #fffdf8, #f2e7d5); }
.challenge-card h2 { line-height: 1.1; }
.challenge-card:not(.gambit-card) .intro-copy { display: none; }
.stage-count { font-size: .77rem; }
.question-copy { color: #4d1720; }
.score strong { color: var(--crimson); font-size: 1.05rem; }
.feedback { line-height: 1.5; }
.feedback.correct { box-shadow: 0 7px 22px #174b3417; }
.progress-node { height: 6px; }
.progress-node.gambit { height: 11px; }
.answer-input:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px #741b2920; }
.answer-chip-row, .coordinate-rail, .crate-rail, .switch-rail, .lamp-rail {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.answer-workbench, .ink-workbench {
  border: 1px solid #c9b99d; border-radius: 14px;
  background: #f5eee2; padding: 15px; margin: 2px 0 8px;
}
.ink-workbench { margin: 22px 0; }
.workbench-label { margin: 0 0 12px; color: #51483b; font: 720 .9rem/1.45 system-ui, sans-serif; }
.workbench-status { margin: 12px 0 0; color: #5a5145; font: 680 .82rem/1.45 system-ui, sans-serif; text-align: center; }
.answer-chip, .coordinate-chip, .crate-chip, .switch-chip, .dial-button, .number-pad button, .ink-cell {
  min-height: 46px; border: 1px solid #9a896f; border-radius: 10px;
  background: #fffdf8; color: #241c16; cursor: pointer;
  font: 750 1rem/1 system-ui, sans-serif;
}
.answer-chip { min-width: 68px; padding: 7px 12px; }
.answer-chip[aria-pressed="true"], .coordinate-chip[aria-pressed="true"],
.switch-chip[aria-pressed="true"], .crate-chip.held {
  background: #74202d; border-color: #74202d; color: #fff;
}
.answer-chip:hover, .coordinate-chip:hover, .crate-chip:hover, .switch-chip:hover, .dial-button:hover, .number-pad button:hover {
  border-color: var(--crimson); box-shadow: 0 3px 10px #3b221420;
}
.coordinate-label { margin: 12px 0 7px; font: 800 .74rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #6f5d4a; }
.coordinate-chip { min-width: 42px; min-height: 42px; }
.coordinate-preview { min-height: 48px; display: grid; place-items: center; margin-top: 14px; border: 1px solid #cfb483; border-radius: 9px; background: #fff9ea; color: var(--crimson); font: 850 1.25rem system-ui, sans-serif; letter-spacing: .12em; }
.crate-rail { margin-bottom: 12px; }
.crate-chip { width: 50px; height: 56px; background: linear-gradient(140deg, #a48151, #6d4b31); border-color: #513b2b; color: #fff5df; font-size: 1.25rem; box-shadow: inset 0 0 0 2px #ffffff25, 0 4px 8px #39251935; }
.crate-chip.held { transform: translateY(-5px); background: #6b1c29; }
.crate-workbench .micro-button { display: block; margin: 0 auto; }
.dial-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dial-cell { min-width: 0; display: grid; justify-items: center; gap: 5px; }
.dial-label { font: 850 .75rem system-ui, sans-serif; color: var(--crimson); }
.dial-value { width: 100%; min-height: 47px; display: grid; place-items: center; border-radius: 8px; background: #1a1715; color: #f8da96; font: 800 1.3rem ui-monospace, monospace; }
.dial-button { width: 100%; min-height: 34px; }
.route-grid { width: min(100%, 420px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 6px auto 12px; }
.route-cell { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid #bfae93; border-radius: 6px; background: #fffaf0; color: #695b48; cursor: pointer; font: 750 clamp(.6rem, 2vw, .77rem)/1 system-ui, sans-serif; }
.route-cell:hover, .route-cell:focus-visible { outline: 2px solid #a97740; outline-offset: 0; z-index: 1; }
.route-cell.route-visited { background: #d9bb81; color: #322514; border-color: #a77b36; }
.route-cell.route-current { background: #74202d; color: #fff; border-color: #74202d; box-shadow: 0 0 0 2px #fff7e7 inset; }
.route-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.packet-rail, .anagram-rail { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 12px auto; }
.packet-chip, .anagram-tile { width: 48px; min-height: 52px; border: 1px solid #7c6348; border-radius: 9px; background: linear-gradient(155deg, #f8e7bf, #dfbc7f); color: #362719; cursor: pointer; font: 850 1.18rem/1 system-ui, sans-serif; box-shadow: 0 3px 7px #241a142b; }
.packet-chip.held, .anagram-tile[aria-pressed="true"] { background: #74202d; border-color: #74202d; color: #fff; transform: translateY(-3px); }
.anagram-tile:disabled { opacity: 1; cursor: default; }
.packet-workbench .micro-button { display: block; margin: 2px auto 0; }
.anagram-preview { min-height: 48px; display: grid; place-items: center; border: 1px solid #cfb483; border-radius: 9px; background: #fff9ea; color: var(--crimson); font: 850 1.2rem ui-monospace, monospace; letter-spacing: .2em; }
.lamp { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #978b78; background: #d4ccc0; color: #594e41; font: 820 1rem system-ui, sans-serif; }
.lamp.lit { background: #f6cc64; border-color: #b77f22; color: #30210d; box-shadow: 0 0 20px #eabf5fb0; }
.switch-rail { margin-top: 16px; }
.switch-chip { min-width: 52px; border-radius: 999px; }
.simulator-disclosure { margin: 2px 0 12px; border: 1px dashed #b9a579; border-radius: 10px; background: #f7f0e2; }
.simulator-disclosure > summary { padding: 12px 14px; color: #6d4821; cursor: pointer; font: 750 .85rem/1.4 system-ui, sans-serif; }
.simulator-disclosure[open] > summary { border-bottom: 1px solid #d9c7a4; }
.simulator-disclosure .answer-workbench { margin: 12px; }
.number-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.number-pad button { min-height: 43px; font-size: 1.1rem; }
.number-pad .key-clear { grid-column: span 2; font-size: .86rem; }
.ink-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 320px); gap: 5px; margin: 10px auto 14px; }
.ink-cell { aspect-ratio: 1; min-height: 0; border-radius: 5px; position: relative; }
.ink-cell::after { content: attr(title); position: absolute; bottom: 3px; right: 4px; color: #958670; font: 600 .58rem system-ui, sans-serif; }
.ink-cell[aria-pressed="true"] { background: #362722; border-color: #362722; }
.ink-cell[aria-pressed="true"]::after { color: #d9c6ac; }
.ink-workbench .micro-button { display: block; margin: auto; }
.evidence-mark { display: inline-block; min-height: 32px; margin: 8px 0 0; padding: 4px 10px; border: 1px solid #bca77f; border-radius: 999px; background: #fffaf0; color: #5e461c; cursor: pointer; font: 750 .76rem system-ui, sans-serif; }
.evidence-dossier li.used { opacity: .66; }
.evidence-dossier li.used .evidence-mark { background: #34543f; border-color: #34543f; color: #fff; }
.scratchpad { margin: 18px 0 20px; border: 1px dashed #baa57d; border-radius: 10px; background: #fbf6e9; }
.scratchpad summary { padding: 11px 14px; cursor: pointer; color: #6e4e20; font: 750 .88rem system-ui, sans-serif; }
.scratchpad[open] summary { border-bottom: 1px solid #d8c8a8; }
.scratchpad-inner { padding: 12px; }
.sketch-canvas { display: block; width: 100%; height: 210px; border: 1px solid #d0c3ad; border-radius: 6px; background: #fffdf8; touch-action: none; cursor: crosshair; }
.scratchpad-tools { display: flex; gap: 8px; margin: 9px 0; }
.scratch-note { width: 100%; min-height: 64px; border: 1px solid #bcad95; border-radius: 7px; padding: 9px; background: #fffdf8; color: var(--ink); font: .9rem/1.5 system-ui, sans-serif; resize: vertical; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; }
.privacy-action { width: 100%; max-width: 400px; margin-top: 12px; border: 1px solid #9b7478; border-radius: 10px; padding: 12px 16px; background: #fff; color: var(--crimson); cursor: pointer; font: 750 .9rem system-ui, sans-serif; }
.privacy-action:hover { background: #f6e8e8; }
.archive-tools { margin: 0 0 16px; }
.archive-filters { display: flex; gap: 5px; }
.archive-filter, .archive-random { min-height: 40px; border: 1px solid #665943; border-radius: 8px; padding: 7px 10px; background: #272019; color: #eee1ca; cursor: pointer; font: 750 .76rem system-ui, sans-serif; }
.archive-filter[aria-pressed="true"] { background: #e2c485; border-color: #e2c485; color: #231a13; }
.archive-random { display: block; width: 100%; margin-top: 8px; background: #4b2026; border-color: #a46969; }
.archive-count { margin: 8px 0 0; color: #c8b9a0; font: .76rem system-ui, sans-serif; }
.archive-week { margin: 22px 0 9px; color: #e9d19c; font: 800 .78rem/1.4 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.archive-week:first-child { margin-top: 8px; }
@media (max-width: 700px) {
  .intro-view .brand-medallion { display: none; }
}
@media (max-width: 600px) {
  .intro-view { padding: 13px 15px 22px; }
  .intro-view .brand-medallion { width: 54px; height: 54px; margin-bottom: 10px; border-radius: 15px; }
  .intro-view h1 span { font-size: clamp(2.35rem, 10.5vw, 3.6rem); }
  .intro-view h1 span:last-child { font-size: clamp(2.2rem, 10vw, 3.35rem); }
  .intro-view .tagline { margin-top: 13px; font-size: 1.05rem; }
  .current-case { padding: 15px 17px; margin-top: 16px; }
  .current-case h2 { font-size: 1.26rem; }
  .current-case p:last-child { font-size: .86rem; line-height: 1.4; }
  .intro-actions { gap: 8px; }
  .meta-strip { margin-top: 14px; gap: 9px; }
  .challenge-wrap { padding: 11px 10px 35px; }
  .card-head { padding: 19px 18px 17px; }
  .challenge-card h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .puzzle-body { padding: 19px 18px 8px; }
  .answer-zone { padding: 4px 18px 22px; }
  .game-header { padding: 9px 14px 10px; }
  .coordinate-chip { min-width: 36px; min-height: 40px; }
  .coordinate-rail { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}