:root {
  --ink: #e9f5ed;
  --muted: #8da9a8;
  --sea-950: #031014;
  --sea-900: #071a21;
  --sea-850: #0a252d;
  --sea-800: #0d3038;
  --sea-700: #174550;
  --foam: #b9f4dd;
  --aqua: #57d6c4;
  --aqua-dark: #248f89;
  --brass: #d6a84b;
  --brass-light: #f6d47d;
  --paper: #e8ddbd;
  --paper-dark: #c7b98d;
  --danger: #df6b62;
  --success: #62d49d;
  --shadow: rgba(0, 0, 0, .54);
  --line: rgba(180, 240, 225, .18);
  --pixel-shadow: 5px 5px 0 rgba(0, 0, 0, .38);
  color-scheme: dark;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(69, 184, 177, .18), transparent 36rem),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    var(--sea-950);
  overflow-x: hidden;
}
body.workbench-open { overflow:hidden; }

button, input { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible {
  outline: 3px solid var(--brass-light);
  outline-offset: 3px;
}

[hidden] { display: none !important; }
.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; white-space:nowrap!important; border:0!important; }

.screen { display: none; min-height: 100dvh; }
.screen.is-active { display: flex; }

.eyebrow {
  margin: 0 0 5px;
  color: var(--aqua);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

/* Title */
#title-screen {
  position: relative;
  align-items: center;
  justify-content: flex-end;
  min-height: 100dvh;
  padding: clamp(24px, 5vw, 72px);
  overflow: hidden;
  background: linear-gradient(120deg, rgba(2,12,16,.04) 35%, rgba(2,12,16,.88) 70%);
}

.title-sea { position: absolute; inset: 0; overflow: hidden; }
.title-sea::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(92, 222, 212, .13), transparent 35%),
    repeating-linear-gradient(100deg, transparent 0 65px, rgba(136,241,223,.025) 66px 68px),
    linear-gradient(#0b3944 0 17%, #08262f 46%, #04171c 100%);
}
.title-sea::after {
  content: "";
  position: absolute;
  left: -8%; right: -8%; top: 11%; height: 24px;
  border-radius: 50%;
  border-top: 4px solid rgba(178,246,229,.28);
  box-shadow: 0 -10px 32px rgba(128,233,220,.13);
  animation: waterline 5s ease-in-out infinite alternate;
}

.sea-floor {
  position: absolute;
  left: -5%; right: -5%; bottom: -10%; height: 34%;
  background:
    radial-gradient(ellipse at 25% 30%, #415841 0 4%, transparent 4.5%),
    radial-gradient(ellipse at 72% 18%, #354b3b 0 5%, transparent 5.5%),
    linear-gradient(170deg, transparent 0 16%, #132b29 17% 100%);
  filter: drop-shadow(0 -20px 28px rgba(0,0,0,.35));
}

.title-building {
  position: absolute;
  left: clamp(30px, 11vw, 150px);
  bottom: 16%;
  width: min(48vw, 580px);
  aspect-ratio: 1.45;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(11,42,47,.7) 7% 9%, transparent 9%),
    repeating-linear-gradient(0deg, #203c3e 0 20px, #1b3437 21px 23px);
  border: 8px solid #10282c;
  box-shadow: inset 0 0 0 5px #48605a, 18px 18px 0 rgba(0,0,0,.42);
  transform: perspective(700px) rotateY(4deg) rotateZ(-1deg);
}
.title-building::before {
  content: "";
  position: absolute;
  left: -7%; right: -7%; top: -18%; height: 21%;
  background: #152d31;
  border: 7px solid #0b2024;
  clip-path: polygon(6% 100%, 14% 0, 86% 0, 94% 100%);
}
.roof-sign {
  position: absolute;
  z-index: 2;
  left: 50%; top: -15%;
  transform: translateX(-50%);
  padding: 7px 19px;
  color: #1b2521;
  background: var(--brass-light);
  border: 5px solid #302c1e;
  box-shadow: 5px 5px 0 rgba(0,0,0,.35);
  font-weight: 1000;
  letter-spacing: .22em;
}
.window {
  position: absolute;
  top: 25%;
  width: 21%; height: 30%;
  background: linear-gradient(135deg, #8ee5cf, #276a71 44%, #102c35 45%);
  border: 7px solid #102226;
  box-shadow: inset 0 0 0 4px #65796d, 0 0 36px rgba(87,214,196,.17);
}
.window::after { content:""; position:absolute; inset:47% 0 auto; border-top:5px solid #13272a; }
.window-a { left: 12%; }
.window-b { right: 12%; }
.title-door {
  position: absolute;
  left: 42%; bottom: 0;
  width: 16%; height: 38%;
  background: linear-gradient(90deg, #182f32, #2a4c4b 50%, #172d30 51%);
  border: 6px solid #0d2023;
  box-shadow: inset 0 0 0 3px #506660;
}
.title-door::after { content:""; position:absolute; right:9px; top:48%; width:6px; height:6px; background:var(--brass-light); box-shadow:0 0 10px var(--brass); }

.bubble { position:absolute; z-index:3; width:12px; height:12px; border:2px solid rgba(183,244,231,.45); border-radius:50%; animation:bubble 6s linear infinite; }
.bubble-a { left: 13%; bottom: 15%; }
.bubble-b { left: 42%; bottom: 9%; animation-delay:-2s; transform:scale(.7); }
.bubble-c { left: 57%; bottom: 19%; animation-delay:-4s; transform:scale(1.25); }

.title-card {
  position: relative;
  z-index: 5;
  width: min(520px, 100%);
  padding: clamp(24px, 4vw, 48px);
  background: rgba(6, 23, 29, .91);
  border: 1px solid rgba(162,232,216,.26);
  box-shadow: 0 0 0 8px rgba(3,14,18,.72), 22px 25px 0 rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
}
.title-card h1 { margin: 0; line-height: .95; }
.title-card h1 span { display:block; color:var(--brass-light); font-family:Georgia,serif; font-size:clamp(58px, 8vw, 104px); letter-spacing:-.055em; text-shadow:5px 5px #122b2c; }
.title-card h1 small { display:block; margin-top:12px; color:#eff9ee; font-size:clamp(24px,3vw,40px); letter-spacing:-.04em; }
.title-lead { margin:20px 0; color:#b6d0ca; font-size:clamp(15px,1.5vw,18px); line-height:1.65; }
.story-slip { position:relative; margin:22px 0; padding:18px 20px; color:#25302d; background:var(--paper); border-left:7px solid var(--danger); box-shadow:var(--pixel-shadow); transform:rotate(-.5deg); }
.story-slip p { margin:0; font-size:13px; line-height:1.7; }
.story-stamp { position:absolute; right:12px; top:-13px; padding:4px 8px; color:#823b36; border:3px double #a34b43; font-size:9px; font-weight:1000; letter-spacing:.18em; transform:rotate(4deg); }
.party-picker { margin:0; padding:0; border:0; }
.party-picker legend { margin-bottom:9px; color:var(--muted); font-size:12px; font-weight:800; }
.party-options { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.party-button { min-height:42px; color:#bdd4cf; background:#0c3037; border:2px solid #28515a; cursor:pointer; font-weight:900; }
.party-button:hover { border-color:var(--aqua); }
.party-button.is-selected { color:#102c2d; background:var(--aqua); border-color:var(--foam); box-shadow:inset 0 -4px rgba(0,0,0,.18); }
.title-actions { display:flex; gap:9px; margin-top:18px; }
.title-help { margin:13px 0 0; color:#6f918f; font-size:10px; line-height:1.5; }
.reference-credit { margin:7px 0 0; color:#587977; font-size:9px; line-height:1.5; }
.reference-credit a { color:#8fc2b8; text-underline-offset:2px; }
.reference-credit a:hover { color:var(--brass-light); }

.pixel-button { min-height:48px; padding:0 19px; border:0; cursor:pointer; font-weight:1000; box-shadow:inset 0 0 0 3px rgba(255,255,255,.14), 0 5px 0 rgba(0,0,0,.38); }
.pixel-button:hover { filter:brightness(1.12); transform:translateY(-1px); }
.pixel-button:active { transform:translateY(4px); box-shadow:inset 0 0 0 3px rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.4); }
.pixel-button.primary { color:#132c28; background:var(--brass-light); }
.pixel-button.secondary { color:var(--ink); background:#24454d; }
.pixel-button.danger-fill { color:#fff; background:#a94843; }

/* Game shell */
#game-screen { flex-direction:column; width:100%; height:100dvh; min-height:0; overflow:hidden; background:linear-gradient(180deg,#06171c,#081d23 44%,#041216); }
.hud { position:relative; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:76px; padding:10px clamp(14px,3vw,36px); background:#06161b; border-bottom:4px solid #16343b; box-shadow:0 7px 20px rgba(0,0,0,.38); }
.hud-brand { display:flex; align-items:center; gap:11px; }
.hud-brand small { display:block; color:#537b7d; font-size:8px; letter-spacing:.16em; }
.hud-brand strong { display:block; margin-top:3px; color:#f2e9c4; font-size:17px; }
.post-mark { display:grid; place-items:center; width:42px; height:42px; color:#132b29; background:var(--brass-light); border-radius:50%; box-shadow:inset 0 0 0 4px #7e692e; font-size:25px; font-weight:1000; }
.room-meter { text-align:center; }
.room-meter > span { color:#7da2a0; font-size:9px; font-weight:900; letter-spacing:.18em; }
.stage-dots { display:flex; justify-content:center; gap:8px; margin-top:7px; }
.stage-dot { position:relative; width:42px; height:7px; background:#1b343a; border:1px solid #315057; }
.stage-dot.is-active { background:var(--brass); box-shadow:0 0 12px rgba(214,168,75,.44); }
.stage-dot.is-done { background:var(--success); }
.hud-actions { display:flex; justify-content:flex-end; gap:7px; }
.hud-button { display:flex; align-items:center; gap:7px; min-height:42px; padding:0 11px; color:#c9ddd9; background:#102c33; border:1px solid #31515a; cursor:pointer; }
.hud-button:hover { border-color:var(--aqua); }
.hud-button span { color:var(--brass-light); }
.hud-button b { font-size:10px; }
.hud-button em { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:3px; color:#122624; background:var(--aqua); border-radius:50%; font-style:normal; }
.hud-button.danger:hover { color:#ffd8d3; border-color:var(--danger); }

.game-layout { flex:1; display:block; min-height:0; overflow:hidden; }
.scene-column { display:flex; flex-direction:column; align-items:center; min-width:0; height:100%; padding:10px clamp(12px,1.5vw,24px); }
.scene-heading-row { display:none; }
.scene-heading-row h2, .workbench h2, .notebook h2 { margin:0; color:#f2eacc; font-size:clamp(20px,2vw,28px); }
.party-chip { display:flex; gap:4px; padding:7px 9px; color:#7fa4a1; background:rgba(8,29,34,.7); border:1px solid #24454d; font-size:10px; }
.party-chip i { width:12px; height:12px; background:var(--avatar,#57d6c4); border:2px solid rgba(255,255,255,.3); border-radius:50%; }

.room-scene { position:relative; isolation:isolate; flex:0 1 auto; width:min(calc(100vw - 48px),calc(166.667dvh - 264px)); max-width:100%; aspect-ratio:5/3; min-height:0; overflow:hidden; background:#102d33; border:6px solid #071519; outline:none; box-shadow:0 0 0 2px #31555a,12px 14px 0 rgba(0,0,0,.3); cursor:crosshair; image-rendering:pixelated; image-rendering:crisp-edges; }
.room-scene:focus-visible { box-shadow:0 0 0 3px var(--aqua),12px 14px 0 rgba(0,0,0,.3); }
.scene-map { position:absolute; z-index:0; inset:0; background-position:center; background-repeat:no-repeat; background-size:100% 100%; image-rendering:pixelated; transition:opacity .22s steps(3,end); }
.room-one .scene-map { background-color:#153b3c; }
.room-two .scene-map { background-color:#213a37; }
.room-three .scene-map { background-color:#173842; }
.scene-grid { position:absolute; z-index:1; inset:0; pointer-events:none; background:none; box-shadow:inset 0 0 0 4.98% rgba(3,17,20,.34),inset 0 0 42px rgba(0,0,0,.34); }
.scene-objects { position:absolute; z-index:auto; inset:0; }
.scene-object { position:absolute; display:block; padding:0; color:#e9f7ee; background:transparent; border:0; cursor:pointer; transform-origin:50% 100%; transition:filter .12s steps(2,end); -webkit-tap-highlight-color:transparent; }
.scene-object::before { content:none; }
.scene-object.is-floor-fixture::before,.scene-object.is-floor-prop::before { content:""; position:absolute; z-index:-1; left:20%; right:20%; bottom:4%; height:8%; border-radius:50%; background:rgba(2,11,14,.5); filter:blur(1px); }
.scene-object:hover,.scene-object:focus-visible { filter:brightness(1.16) saturate(1.08); outline:none; }
.scene-object:focus-visible::after { content:""; position:absolute; inset:-5px; border:2px dashed var(--foam); }
.object-sprite { display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%; pointer-events:none; image-rendering:pixelated; transform-origin:50% 100%; filter:brightness(.82) saturate(.78) contrast(.96); }
.scene-object.is-surface-prop .object-sprite { transform:scale(.72); }
.scene-object.is-surface-fixture .object-sprite { transform:scale(.9); }
.scene-object.is-floor-prop .object-sprite { transform:scale(.84); }
.scene-object.is-floor-fixture .object-sprite { transform:scale(.94); }
.scene-object.is-wall-fixture .object-sprite { transform:scale(.84); }
.scene-object.is-overhead-fixture .object-sprite { transform:scale(.8); }
.object-fallback { position:absolute; display:grid; place-items:center; left:22%; right:22%; top:22%; bottom:22%; color:#122b2c; background:var(--brass-light); border:2px solid #6f5b2e; font-size:clamp(9px,1.2vw,17px); font-weight:1000; }
.scene-object.has-image .object-fallback { display:none; }
.object-tooltip { position:absolute; z-index:3; left:50%; bottom:calc(100% + 5px); width:max-content; max-width:150px; padding:5px 7px; color:#e7f2eb; background:rgba(4,20,24,.94); border:1px solid #6a8d88; box-shadow:3px 3px rgba(0,0,0,.34); font-size:9px; font-weight:900; line-height:1.35; text-align:center; opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity .1s,transform .1s; }
.object-tooltip small { display:block; margin-top:2px; color:#9ab6b0; font-size:7px; letter-spacing:.04em; }
.scene-object:hover .object-tooltip,.scene-object:focus-visible .object-tooltip { opacity:1; transform:translate(-50%,0); }
.scene-object.is-locked { opacity:1; filter:none; }
.scene-object.is-locked .object-tooltip { border-color:#854b49; }
.scene-object.is-locked .object-tooltip small { color:#e8aaa3; }
.scene-object.is-seen,.scene-object.is-solved { opacity:1; filter:none; }
.scene-object.is-new::after { content:none; }
.party-avatars { position:absolute; z-index:auto; inset:0; pointer-events:none; }
.avatar { position:absolute; width:4.25%; aspect-ratio:1/1; transform:translate(-50%,-76%); transition:left .09s linear,top .09s linear; image-rendering:pixelated; }
.avatar::before { content:""; position:absolute; inset:0; opacity:0; background-image:url("assets/pixel/characters/characters-sheet.png"); background-repeat:no-repeat; background-size:800% 400%; background-position:var(--sprite-x,0%) var(--sprite-y,0%); image-rendering:pixelated; }
.room-scene.has-character-sheet .avatar::before { opacity:1; }
.avatar-fallback { position:absolute; left:23%; right:23%; top:12%; bottom:8%; background:var(--avatar-color); border:2px solid #061519; border-radius:42% 42% 30% 30%; box-shadow:0 3px rgba(0,0,0,.3); }
.avatar-fallback::before { content:""; position:absolute; left:18%; right:18%; top:-30%; aspect-ratio:1; background:#d8b18f; border:2px solid #061519; border-radius:50%; }
.room-scene.has-character-sheet .avatar-fallback { opacity:0; }
.scene-vignette { position:absolute; z-index:5000; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 48%,transparent 52%,rgba(1,10,13,.22) 100%); box-shadow:inset 0 0 0 2px rgba(188,238,219,.08); }
.scene-control-hint { position:absolute; z-index:6000; left:7px; bottom:5px; margin:0; padding:4px 6px; color:#93aaa5; background:rgba(3,17,21,.78); border:1px solid rgba(118,153,148,.46); font-size:7px; font-weight:800; letter-spacing:.04em; pointer-events:none; }
.room-scene.is-room-transitioning .scene-map,.room-scene.is-room-transitioning .scene-objects,.room-scene.is-room-transitioning .party-avatars { opacity:0; pointer-events:none; }
.room-scene.is-room-transitioning::after { content:"PRESSURE DOOR TRANSIT"; position:absolute; z-index:20000; inset:0; display:grid; place-items:center; color:#e8d99f; background:#071a20; font-size:11px; font-weight:1000; letter-spacing:.13em; }
.scene-caption { display:flex; flex:1 0 auto; align-items:center; align-self:stretch; gap:9px; margin-top:10px; min-height:43px; max-height:52px; padding:8px 12px; background:rgba(5,21,26,.72); border-left:4px solid var(--aqua-dark); }
.scene-caption p { flex:1; margin:0; color:#acc5c0; font-size:12px; }
.scene-caption small { color:#587e7d; font-size:9px; }
.pulse-dot { width:9px; height:9px; background:var(--aqua); border-radius:50%; box-shadow:0 0 0 4px rgba(87,214,196,.13); animation:pulse 1.3s infinite; }

/* Workbench modal */
.workbench-layer { position:fixed; z-index:60; inset:0; display:grid; place-items:center; padding:clamp(12px,3vw,36px); }
.workbench-scrim { position:absolute; inset:0; background:rgba(1,7,10,.78); backdrop-filter:blur(2px); cursor:pointer; }
.workbench { position:relative; z-index:1; display:flex; flex-direction:column; width:min(920px,calc(100vw - 32px)); max-height:min(740px,calc(100dvh - 48px)); padding:0; color:#29312e; background:#e8ddbd; border:6px solid #111b20; box-shadow:0 0 0 3px #667580,12px 14px 0 rgba(0,0,0,.52); overflow:hidden; animation:modal-in .2s ease-out; }
.workbench-top { display:flex; flex:0 0 auto; justify-content:space-between; align-items:center; min-height:72px; padding:12px 16px; color:#edf3ef; background:#273140; border-bottom:5px solid #111b20; }
.workbench-top .eyebrow { color:#9eb6bd; }
.workbench-top h2 { color:#f5edcf; }
.workbench .icon-button { color:#fff; background:#a94f4b; border:3px solid #d17a73; box-shadow:3px 3px rgba(0,0,0,.3); }
.icon-button { display:grid; place-items:center; width:42px; height:42px; color:#d8e8e3; background:#15343b; border:1px solid #3e6268; cursor:pointer; font-size:22px; }
.workbench-content { min-height:0; padding:18px; overflow:auto; overscroll-behavior:contain; }
.workbench .inspect-header h3,.workbench .puzzle-title h3 { color:#29312e; }
.workbench .inspect-header p,.workbench .puzzle-title p { color:#6c756f; }
.workbench .hint-zone { border-top-color:rgba(57,59,50,.25); }
.idle-panel { display:grid; min-height:390px; place-items:center; text-align:center; }
.idle-panel > div { max-width:320px; }
.sonar-icon { display:grid; place-items:center; width:120px; height:120px; margin:0 auto 20px; color:var(--aqua); border:1px solid #27505a; border-radius:50%; box-shadow:inset 0 0 0 25px #0b252c, inset 0 0 0 26px #28525a; font-size:38px; animation:sonar 3s ease-out infinite; }
.idle-panel h3 { margin:0 0 8px; color:#e9e1c4; }
.idle-panel p { margin:0; color:#7d9c9a; font-size:12px; line-height:1.7; }
.chain-mini { display:grid; gap:7px; margin-top:20px; text-align:left; }
.chain-row { display:flex; align-items:center; gap:9px; padding:9px; color:#769794; background:#0a252b; border:1px solid #24434a; font-size:10px; }
.chain-row b { display:grid; place-items:center; width:22px; height:22px; color:#112c29; background:#637c78; border-radius:50%; }
.chain-row.is-done { color:#c7e3d8; border-color:#39735f; }
.chain-row.is-done b { background:var(--success); }
.chain-row.is-current { color:#f3e8bd; border-color:#8a7438; }
.chain-row.is-current b { background:var(--brass-light); }

.inspect-card, .puzzle-card { animation:panel-in .22s ease-out; }
.inspect-header { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.inspect-glyph { display:grid; flex:0 0 auto; place-items:center; width:58px; height:58px; color:#18342f; background:var(--brass-light); border:4px solid #806b38; box-shadow:var(--pixel-shadow); font-size:25px; font-weight:1000; }
.inspect-object-art, .puzzle-device-art { flex:0 0 auto; object-fit:contain; image-rendering:pixelated; background:radial-gradient(circle,rgba(89,184,170,.14),transparent 68%); filter:drop-shadow(3px 4px 0 rgba(0,0,0,.38)); }
.inspect-object-art { width:76px; height:76px; padding:5px; border:1px solid rgba(104,173,165,.28); }
.puzzle-device-art { width:64px; height:64px; padding:4px; border:1px solid rgba(214,180,91,.28); }
.inspect-header h3, .puzzle-title h3 { margin:0; color:#f1e7c5; font-size:20px; }
.inspect-header p { margin:5px 0 0; color:#7b9a98; font-size:10px; }
.paper-note { position:relative; padding:18px; color:#29312e; background:var(--paper); border:1px solid #f4eccf; box-shadow:var(--pixel-shadow); font-family:Georgia,"Noto Serif KR",serif; font-size:13px; line-height:1.75; }
.paper-note::before { content:""; position:absolute; inset:7px; border:1px dashed rgba(74,70,51,.25); pointer-events:none; }
.paper-note strong { color:#753e37; }
.paper-note table { width:100%; border-collapse:collapse; font-family:inherit; }
.paper-note th,.paper-note td { padding:6px; border-bottom:1px solid rgba(64,62,47,.22); text-align:left; }
.paper-note .story-record { margin:0; padding:14px 16px; color:#3d443f; background:#ddd0aa; border-left:5px solid #79694a; }
.paper-note .story-record small { display:block; margin-bottom:7px; color:#8f4c45; font:900 9px/1.4 ui-monospace,Consolas,monospace; letter-spacing:.12em; }
.evidence-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0; font-family:ui-monospace,Consolas,monospace; }
.evidence-card { position:relative; min-width:0; padding:13px; color:#28302d; background:#f2e8ca; border:2px solid #a99a72; box-shadow:3px 3px rgba(61,55,40,.15); }
.evidence-card > strong { display:block; margin-bottom:8px; color:#4e4431; font:1000 11px/1.4 system-ui,sans-serif; }
.color-number { display:inline-grid; place-items:center; min-width:42px; height:42px; margin:3px; color:#f7f0dc; border:3px double rgba(255,255,255,.45); box-shadow:inset 0 -5px rgba(0,0,0,.2),2px 2px rgba(0,0,0,.18); font:1000 20px/1 ui-monospace,Consolas,monospace; }
.color-number.red { background:#a9403d; }.color-number.blue{background:#3c6f95}.color-number.green{background:#487b65}.color-number.yellow{color:#342d1d;background:#d6ae49}.color-number.ivory{color:#3e392d;background:#e5ddc4}.color-number.teal{background:#347b7a}
.workflow-strip,.rope-order,.reel-order,.calibration-strip { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:12px 0; padding:12px; color:#26312e; background:#d9cfaf; border:2px dashed #8c7d58; font-family:ui-monospace,Consolas,monospace; font-weight:1000; }
.workflow-strip span,.rope-order span,.reel-order span { display:grid; place-items:center; min-width:58px; min-height:50px; padding:6px; background:#f2e8ca; border:2px solid #9d8d66; text-align:center; }
.workflow-strip i,.rope-order i,.reel-order i { color:#8b4b43; font-style:normal; font-size:18px; }
.animal-mobile { position:relative; display:grid; gap:5px; max-width:430px; margin:12px auto; padding:16px 34px; background:linear-gradient(#cadbd6,#e6e0c7); border:4px solid #6d7a78; }
.animal-mobile::before { content:""; position:absolute; top:8px; bottom:8px; left:50%; border-left:2px dashed #788884; }
.animal-mobile span { position:relative; z-index:1; justify-self:center; min-width:150px; padding:7px 12px; color:#263633; background:#f1e8ce; border:1px solid #9b8e6b; text-align:center; font-weight:900; }
.punch-chip { display:inline-grid; place-items:center; min-width:30px; height:30px; margin-left:7px; color:#f0e7c9; background:#3b4c4d; border-radius:50%; font:1000 14px/1 ui-monospace,Consolas,monospace; }
.keypad-map { display:grid; grid-template-columns:repeat(3,54px); grid-template-rows:repeat(3,48px); place-content:center; gap:5px; margin:14px auto; }
.keypad-map span { display:grid; place-items:center; color:#e9e2c9; background:#334a4e; border:3px outset #5f7475; font:1000 18px/1 ui-monospace,Consolas,monospace; }
.keypad-map span:nth-child(1){grid-column:2}.keypad-map span:nth-child(2){grid-column:3;grid-row:2}.keypad-map span:nth-child(3){grid-column:2;grid-row:3}.keypad-map span:nth-child(4){grid-column:1;grid-row:2}
.telegram-stack { display:grid; gap:8px; margin:10px 0; }
.telegram-stack .evidence-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.tail-letter { display:grid; place-items:center; width:46px; height:46px; color:#f7eac1; background:#8f433e; clip-path:polygon(0 0,100% 0,80% 50%,100% 100%,0 100%); font:1000 23px/1 ui-monospace,Consolas,monospace; }
.watch-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.watch-face { display:grid; place-items:center; min-height:108px; color:#f3e8c4; border:7px double #2b3434; border-radius:50%; box-shadow:inset 0 0 18px rgba(0,0,0,.35),4px 5px rgba(0,0,0,.18); font:1000 25px/1 ui-monospace,Consolas,monospace; }
.watch-face.red{background:#7d3837}.watch-face.blue{background:#315a78}
.calibration-strip b { min-width:115px; padding:9px; color:#f0e7cb; background:#39484a; text-align:center; }
.knot-legend { display:grid; grid-template-columns:repeat(5,minmax(54px,1fr)); gap:7px; margin:12px 0; }
.knot-legend span { display:grid; min-height:72px; place-items:center; padding:7px; color:#27312f; background:#e8dfc4; border-bottom:7px solid var(--knot-color,#777); text-align:center; font-weight:1000; }
.wave-dictionary { display:grid; gap:7px; margin:10px 0; }
.wave-dictionary .wave-row { display:grid; grid-template-columns:92px 1fr; align-items:center; gap:9px; padding:8px 10px; background:#e2d8ba; border-left:4px solid #5b6b68; }
.wave-line { min-height:28px; background:var(--wave,linear-gradient(90deg,transparent 0 8%,#315c62 8% 12%,transparent 12% 20%)); background-size:48px 100%; }
.route-poem { margin:12px 0; padding:17px 20px; color:#313b37; background:#eee5c9; border-left:6px solid #7f6a3d; font:italic 15px/2 Georgia,"Noto Serif KR",serif; }
.route-map { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,70px); gap:5px; max-width:430px; margin:12px auto; padding:16px; color:#e9e1c6; background:#263d40; border:5px double #9b8652; }
.route-map span { display:grid; place-items:center; padding:4px; background:#365155; border:1px solid #718581; text-align:center; font-size:10px; font-weight:900; }
.route-map .route-center { grid-column:2; grid-row:2; color:#2d302b; background:#d3ad55; }
.keypad-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; max-width:310px; margin:auto; }
.keypad-key { min-height:52px; color:#f0ebd9; background:#2b4449; border:3px outset #607476; cursor:pointer; font-size:18px; font-weight:1000; }
.keypad-key:hover { filter:brightness(1.14); }
.puzzle-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.puzzle-title-copy { flex:1 1 auto; min-width:0; }
.puzzle-title p { margin:6px 0 0; color:#789996; font-size:11px; line-height:1.55; }
.device { padding:14px; background:#07191e; border:3px solid #24474f; box-shadow:inset 0 0 22px rgba(0,0,0,.45); }
.device-display { min-height:45px; display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:12px; padding:8px; color:#a9ffd1; background:#07120f; border:4px inset #29423a; font-family:Consolas,monospace; font-size:18px; letter-spacing:.08em; text-shadow:0 0 8px rgba(94,255,184,.45); }
.device-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:13px; }
.device-button { min-height:43px; padding:0 14px; color:#dcebe5; background:#21444c; border:2px solid #3d6670; cursor:pointer; font-weight:900; }
.device-button:hover { border-color:var(--aqua); filter:brightness(1.1); }
.device-button.primary { color:#172b27; background:var(--brass-light); border-color:#f1de9c; }
.device-button.utility { color:#c1d5d0; background:#162f35; }
.device-button:disabled { cursor:not-allowed; filter:grayscale(.8); opacity:.45; }
.hint-zone { margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.hint-button { color:#9ab9b4; background:transparent; border:1px solid #38575d; min-height:37px; padding:0 11px; cursor:pointer; font-size:10px; font-weight:900; }
.hint-output { margin:9px 0 0; padding:10px; color:#e8ddbd; background:#28302c; border-left:3px solid var(--brass); font-size:11px; line-height:1.55; }
.success-panel { padding:19px; text-align:center; background:linear-gradient(#0e382e,#0a2924); border:3px solid #4b9c78; box-shadow:inset 0 0 35px rgba(98,212,157,.08); animation:success-pop .3s ease-out; }
.success-panel .reward-icon { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 14px; color:#1e342d; background:var(--success); border:6px double #d6f5e4; border-radius:50%; font-size:30px; }
.success-panel h3 { margin:0 0 8px; color:#dff8e9; }
.success-panel p { margin:0; color:#a9c9bd; font-size:12px; line-height:1.65; }
.password-ticket { margin:15px auto 0; padding:11px; color:#27261d; background:var(--brass-light); border:3px dashed #80662b; font-family:Georgia,serif; font-size:22px; font-weight:1000; letter-spacing:.18em; }

/* Puzzle devices */
.calendar-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; color:#e5dcbf; font-weight:900; }
.calendar-week, .calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.calendar-week span { padding:4px; color:#75918f; text-align:center; font-size:9px; }
.calendar-day { min-height:38px; color:#c9d9d4; background:#112d33; border:1px solid #315059; cursor:pointer; }
.calendar-day:hover { border-color:var(--brass-light); }
.calendar-day.is-selected { color:#20302c; background:var(--brass-light); border-color:#fff0b3; }
.calendar-day.is-empty { visibility:hidden; }

.sort-list { display:grid; gap:7px; }
.sort-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:9px; color:#2b332f; background:var(--paper); border-left:6px solid #7e6940; box-shadow:3px 3px rgba(0,0,0,.25); }
.sort-item[draggable="true"] { cursor:grab; }
.sort-item.is-dragging { opacity:.4; }
.sort-handle { color:#746b51; font-size:18px; }
.sort-copy strong,.sort-copy small { display:block; }
.sort-copy strong { font-size:12px; }
.sort-copy small { margin-top:2px; color:#6b6a5e; font-size:9px; }
.sort-controls { display:flex; gap:3px; }
.sort-controls button { width:31px; height:31px; color:#e7eee9; background:#31565a; border:0; cursor:pointer; }

.direction-pad { display:grid; grid-template-columns:repeat(3,58px); grid-template-rows:repeat(3,52px); justify-content:center; gap:5px; }
.direction-key { color:#e5f4ef; background:#20434b; border:3px outset #46717a; cursor:pointer; font-size:21px; font-weight:1000; }
.direction-key:hover { background:#2e5a62; }
.direction-key[data-direction="up"] { grid-column:2; }
.direction-key[data-direction="left"] { grid-column:1; grid-row:2; }
.direction-key[data-direction="reset"] { grid-column:2; grid-row:2; color:#b9cbc6; font-size:10px; }
.direction-key[data-direction="right"] { grid-column:3; grid-row:2; }
.direction-key[data-direction="down"] { grid-column:2; grid-row:3; }

.memory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.memory-card { position:relative; min-height:66px; color:transparent; background:#17373e; border:2px solid #3a6067; cursor:pointer; transform-style:preserve-3d; }
.memory-card::before { content:"✉"; position:absolute; inset:0; display:grid; place-items:center; color:#537b7b; font-size:20px; }
.memory-card.is-open,.memory-card.is-matched { color:#26302d; background:var(--paper); border-color:var(--brass-light); }
.memory-card.is-open::before,.memory-card.is-matched::before { content:none; }
.memory-card.is-matched { background:#a9dec2; border-color:var(--success); }
.memory-card span { display:block; font-size:10px; font-weight:900; line-height:1.3; }

.phone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; max-width:280px; margin:auto; }
.phone-key { min-height:53px; color:#f1eee1; background:#273d3e; border:3px outset #506466; cursor:pointer; font-size:18px; font-weight:1000; }
.phone-key small { display:block; margin-top:2px; color:#9fb0aa; font-size:7px; letter-spacing:.12em; }
.phone-key:hover { filter:brightness(1.16); }

.clock-wrap { display:grid; grid-template-columns:minmax(190px,240px) 1fr; gap:16px; align-items:center; }
.analog-clock { position:relative; width:min(100%,230px); aspect-ratio:1; margin:auto; background:radial-gradient(circle,#ece4c7 0 64%,#8e7541 65% 70%,#231f19 71%); border:7px solid #1a2928; border-radius:50%; box-shadow:inset 0 0 20px rgba(0,0,0,.35),7px 8px rgba(0,0,0,.28); }
.clock-number { position:absolute; left:50%; top:50%; color:#31332d; font:900 13px Georgia,serif; transform:translate(-50%,-50%) rotate(calc(var(--n) * 30deg)) translateY(-84px) rotate(calc(var(--n) * -30deg)); }
.clock-hand { position:absolute; left:50%; bottom:50%; width:5px; background:#252b29; border-radius:4px; transform-origin:50% 100%; }
.clock-hand.hour { height:27%; transform:translateX(-50%) rotate(var(--hour-angle)); }
.clock-hand.minute { height:37%; width:3px; background:#9b443f; transform:translateX(-50%) rotate(var(--minute-angle)); }
.clock-pin { position:absolute; left:50%; top:50%; width:13px; height:13px; background:#1e2826; border:3px solid #bd8f49; border-radius:50%; transform:translate(-50%,-50%); }
.clock-controls { display:grid; gap:9px; }
.clock-control { padding:10px; background:#102b31; border:1px solid #31525a; }
.clock-control label { display:block; margin-bottom:7px; color:#93aaa5; font-size:10px; }
.clock-control input { width:100%; accent-color:var(--brass); }

.color-keys { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.color-key { min-height:75px; border:4px solid rgba(255,255,255,.25); cursor:pointer; box-shadow:inset 0 -8px rgba(0,0,0,.23),0 5px rgba(0,0,0,.3); }
.color-key:hover { transform:translateY(-2px); filter:brightness(1.15); }
.color-key[data-color="purple"] { background:#8a61c7; }
.color-key[data-color="yellow"] { background:#e4bd4d; }
.color-key[data-color="blue"] { background:#3f87c5; }
.color-key[data-color="red"] { background:#c9534e; }
.color-key[data-color="green"] { background:#4eaa74; }
.sequence-chip { display:inline-block; width:21px; height:21px; border:2px solid rgba(255,255,255,.45); border-radius:50%; }
.sequence-chip.purple { background:#8a61c7; }.sequence-chip.yellow{background:#e4bd4d}.sequence-chip.blue{background:#3f87c5}.sequence-chip.red{background:#c9534e}.sequence-chip.green{background:#4eaa74}

.letter-wheels { display:flex; justify-content:center; gap:8px; }
.letter-wheel { display:grid; gap:4px; width:54px; text-align:center; }
.letter-wheel button { height:34px; color:#e0eee9; background:#26484e; border:2px solid #426a70; cursor:pointer; }
.wheel-letter { display:grid; place-items:center; height:61px; color:#251f17; background:linear-gradient(#92794a,#f2d78e 46%,#fff1b5 50%,#bb9857 54%,#755f3e); border:4px solid #2b2920; font:1000 25px Consolas,monospace; box-shadow:inset 0 0 0 3px rgba(255,255,255,.17); }

.rotary-wrap { position:relative; width:270px; height:270px; margin:auto; border:9px solid #17282a; border-radius:50%; background:radial-gradient(circle,#102128 0 32%,#aa8b4d 33% 36%,#283e3e 37% 70%,#0b1b20 71%); box-shadow:inset 0 0 25px #000,7px 8px rgba(0,0,0,.3); }
.dial-marker { position:absolute; left:50%; top:50%; width:5px; height:42%; background:linear-gradient(var(--danger) 0 14%,var(--brass-light) 15% 100%); transform-origin:50% 0; transform:rotate(var(--dial-angle,0deg)) translate(-50%,0); transition:transform .22s ease; pointer-events:none; }
.dial-number { position:absolute; left:var(--dx); top:var(--dy); width:36px; height:36px; color:#edf4e8; background:#173239; border:2px solid #58706b; border-radius:50%; cursor:pointer; transform:translate(-50%,-50%); font-weight:1000; }
.dial-number:hover { color:#182622; background:var(--brass-light); }

.door-form { display:grid; gap:11px; }
.door-form input { width:100%; min-height:54px; padding:0 13px; color:#b6f6cf; background:#071713; border:4px inset #314942; text-align:center; font-size:22px; font-weight:1000; letter-spacing:.16em; }

/* Notebook & overlays */
.notebook { position:fixed; z-index:70; top:0; right:0; width:min(430px,100%); height:100dvh; padding:22px; color:#2b302d; background:var(--paper); border-left:8px solid #745f39; box-shadow:-24px 0 45px rgba(0,0,0,.5); transform:translateX(105%); transition:transform .24s ease; overflow:auto; }
.notebook.is-open { transform:translateX(0); }
.notebook .eyebrow { color:#8f4a43; }
.notebook h2 { color:#35372f; }
.notebook-head { display:flex; justify-content:space-between; align-items:start; padding-bottom:15px; border-bottom:3px double #918564; }
.notebook .icon-button { color:#f4ead1; background:#5b4e35; border-color:#806c45; }
.notebook-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:14px 0; }
.notebook-tab { min-height:41px; color:#6e6856; background:#d1c49f; border:1px solid #a99b72; cursor:pointer; font-weight:900; }
.notebook-tab.is-active { color:#f2ead4; background:#554b38; }
.notebook-content { display:grid; gap:9px; }
.notebook-entry { padding:13px; background:#f2e7c7; border-left:5px solid #8a7444; box-shadow:2px 3px rgba(58,52,38,.16); }
.notebook-entry small { display:block; color:#9a564e; font-size:8px; font-weight:1000; letter-spacing:.12em; }
.notebook-entry strong { display:block; margin:4px 0; font-size:13px; }
.notebook-entry p { margin:0; color:#666255; font-size:11px; line-height:1.55; }
.inventory-entry { display:flex; gap:11px; align-items:center; }
.inventory-entry .item-icon { display:grid; flex:0 0 auto; place-items:center; width:46px; height:46px; color:#2d3029; background:#d2a44a; border:3px double #6e582f; font-size:20px; }
.empty-notebook { padding:35px 15px; color:#79715e; text-align:center; font-size:12px; }
.scrim { position:fixed; z-index:65; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(2px); }
.confirm-layer { position:fixed; z-index:90; inset:0; display:grid; place-items:center; padding:20px; background:rgba(1,10,13,.78); backdrop-filter:blur(4px); }
.confirm-card { width:min(430px,100%); padding:30px; text-align:center; background:#102b31; border:5px solid #0a181b; box-shadow:0 0 0 3px #49636a,14px 16px rgba(0,0,0,.43); }
.confirm-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 13px; color:#fff; background:var(--danger); border-radius:50%; font-size:30px; font-weight:1000; }
.confirm-card h2 { margin:0 0 8px; color:#f2e8c8; }
.confirm-card p { margin:0; color:#93aca8; font-size:12px; line-height:1.6; }
.confirm-actions { display:flex; justify-content:center; gap:9px; margin-top:20px; }
.toast { position:fixed; z-index:110; left:50%; bottom:24px; min-width:220px; max-width:min(460px,calc(100vw - 30px)); padding:12px 16px; color:#eaf7ef; background:#142f35; border:2px solid var(--aqua); box-shadow:8px 8px rgba(0,0,0,.35); text-align:center; font-size:11px; font-weight:900; opacity:0; pointer-events:none; transform:translate(-50%,18px); transition:opacity .2s,transform .2s; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.toast.is-error { border-color:var(--danger); background:#422927; }

/* Ending */
#result-screen { position:relative; align-items:center; justify-content:flex-end; padding:clamp(24px,6vw,80px); overflow:hidden; background:linear-gradient(#071b24,#0a3341 48%,#09222b); }
.ending-scene { position:absolute; inset:0; }
.ending-scene::before { content:""; position:absolute; left:-8%; right:-8%; bottom:24%; height:8%; border-radius:50%; border-top:5px solid rgba(197,246,225,.34); box-shadow:0 -50px 100px rgba(98,212,205,.16); }
.lighthouse { position:absolute; left:14%; bottom:22%; width:100px; height:43%; background:repeating-linear-gradient(165deg,#d9d2b6 0 40px,#a84e49 41px 76px); clip-path:polygon(26% 0,74% 0,100% 100%,0 100%); filter:drop-shadow(12px 12px rgba(0,0,0,.3)); }
.lighthouse::before { content:""; position:absolute; left:6%; right:6%; top:-16%; height:17%; background:#c7b76e; border:5px solid #14282b; }
.lighthouse i { position:absolute; left:50%; top:-9%; width:50vw; height:40px; background:linear-gradient(90deg,rgba(246,222,137,.75),transparent); clip-path:polygon(0 35%,100% 0,100% 100%,0 65%); transform-origin:left center; animation:beam 4s ease-in-out infinite alternate; }
.letter-beam { position:absolute; left:44%; top:28%; color:#f3dd8a; font-size:48px; filter:drop-shadow(0 0 14px #efd174); animation:letter-float 2.5s ease-in-out infinite; }
.ending-waves { position:absolute; left:-5%; right:-5%; bottom:-8%; height:40%; background:repeating-radial-gradient(ellipse at 50% 0,#164b58 0 25px,#0d3642 26px 48px); opacity:.72; }
.result-card { position:relative; z-index:5; width:min(610px,100%); padding:clamp(25px,4vw,45px); background:rgba(6,22,28,.91); border:1px solid rgba(172,232,219,.28); box-shadow:0 0 0 8px rgba(2,13,17,.65),20px 22px rgba(0,0,0,.32); backdrop-filter:blur(9px); }
.result-card h2 { margin:0 0 13px; color:#f5e8bd; font-size:clamp(25px,4vw,43px); letter-spacing:-.04em; }
.ending-copy { color:#b8cfca; font-size:13px; line-height:1.8; }
.ending-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:19px 0; }
.ending-stats div { padding:11px; background:#102d34; border:1px solid #2c5058; text-align:center; }
.ending-stats span,.ending-stats strong { display:block; }
.ending-stats span { color:#789895; font-size:8px; }
.ending-stats strong { margin-top:4px; color:var(--brass-light); font-size:15px; }
.result-card blockquote { margin:18px 0; padding:14px 16px; color:#e6dcc0; background:#26332e; border-left:5px solid var(--brass); font-family:Georgia,"Noto Serif KR",serif; font-size:12px; line-height:1.7; }
.result-card cite { display:block; margin-top:6px; color:#9cafaa; font-style:normal; font-size:10px; }

@keyframes waterline { to { transform:translateY(9px) skewX(2deg); } }
@keyframes bubble { 0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-72vh) scale(1.4);opacity:0} }
@keyframes object-marker { 50% { transform:translateY(-4px); filter:brightness(1.18); } }
@keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(87,214,196,0); } }
@keyframes sonar { 0%{box-shadow:inset 0 0 0 25px #0b252c,inset 0 0 0 26px #28525a,0 0 0 0 rgba(87,214,196,.25)}70%,100%{box-shadow:inset 0 0 0 25px #0b252c,inset 0 0 0 26px #28525a,0 0 0 26px rgba(87,214,196,0)} }
@keyframes panel-in { from { opacity:0; transform:translateY(8px); } }
@keyframes modal-in { from { opacity:0; transform:translateY(12px) scale(.985); } }
@keyframes success-pop { from { opacity:0; transform:scale(.96); } }
@keyframes beam { to { transform:rotate(9deg); opacity:.45; } }
@keyframes letter-float { 50% { transform:translate(16px,-12px) rotate(4deg); } }

@media (max-width: 980px) {
  #title-screen { justify-content:center; background:rgba(2,12,16,.46); }
  .title-building { left:4%; width:70vw; opacity:.58; }
  .scene-column { border-right:0; }
}

@media (max-width: 680px) {
  #title-screen { align-items:flex-start; padding:18px 12px; overflow:auto; }
  .title-card { padding:22px 18px; }
  .title-card h1 span { font-size:60px; }
  .title-building { width:92vw; bottom:5%; }
  .title-actions { flex-direction:column; }
  .hud { grid-template-columns:1fr auto; min-height:66px; padding:8px 10px; }
  .hud-brand .post-mark { width:34px; height:34px; }
  .hud-brand strong { font-size:13px; }
  .room-meter { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:5px; }
  .stage-dots { margin:0; }
  .hud-button { width:42px; justify-content:center; padding:0; }
  .hud-button b { display:none; }
  .scene-column { padding:8px; }
  .scene-heading-row { padding-inline:5px; }
  .room-scene { width:min(calc(100vw - 16px),calc(166.667dvh - 324px)); border-width:4px; box-shadow:0 0 0 2px #31555a,6px 7px 0 rgba(0,0,0,.3); }
  .object-tooltip { max-width:112px; padding:4px 5px; font-size:8px; }
  .scene-control-hint { display:none; }
  .scene-caption { align-items:flex-start; flex-wrap:wrap; margin-top:7px; max-height:67px; }
  .scene-caption small { width:100%; padding-left:18px; }
  .workbench-layer { padding:8px; }
  .workbench { width:100%; max-height:calc(100dvh - 16px); border-width:4px; box-shadow:0 0 0 2px #667580,6px 7px 0 rgba(0,0,0,.5); }
  .workbench-top { min-height:62px; padding:9px 11px; border-bottom-width:4px; }
  .workbench-content { padding:14px; }
  .evidence-grid,.watch-pair { grid-template-columns:1fr; }
  .knot-legend { grid-template-columns:repeat(3,1fr); }
  .route-map { grid-template-rows:repeat(3,60px); padding:9px; }
  .calendar-day { min-height:34px; }
  .memory-grid { grid-template-columns:repeat(3,1fr); }
  .clock-wrap { grid-template-columns:1fr; }
  .analog-clock { width:210px; }
  .clock-number { transform:translate(-50%,-50%) rotate(calc(var(--n) * 30deg)) translateY(-75px) rotate(calc(var(--n) * -30deg)); }
  .color-keys { grid-template-columns:repeat(5,1fr); }
  .color-key { min-height:58px; }
  .letter-wheels { gap:4px; }
  .letter-wheel { width:48px; }
  .rotary-wrap { width:250px; height:250px; }
  .ending-stats { grid-template-columns:1fr; }
  #result-screen { align-items:flex-start; padding:20px 12px; overflow:auto; }
  .result-card { margin-top:16px; }
  .lighthouse { opacity:.55; }
}

@media (max-width: 420px) {
  .party-options { grid-template-columns:repeat(2,1fr); }
  .party-chip { display:none; }
  .scene-heading-row h2 { font-size:20px; }
  .direction-pad { grid-template-columns:repeat(3,52px); }
  .sort-item { grid-template-columns:auto 1fr; }
  .sort-controls { grid-column:2; justify-content:flex-end; }
  .phone-key { min-height:48px; }
  .rotary-wrap { width:226px; height:226px; }
  .workbench-layer { padding:0; }
  .workbench { max-height:100dvh; height:100dvh; border-width:0; box-shadow:none; }
  .workbench-content { padding:12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}