/* 폭풍의 등대: 마지막 신호 — 청록·강철·유리·전기광. 외부 폰트/이미지 없음. */
:root {
  --bg: #061318; --bg2: #0b2129; --panel: #0e2a33; --panel2: #123741; --steel: #5c7a85; --steel-hi: #9db8c1;
  --teal: #3ee6d0; --teal-dim: #1d8a7c; --amber: #f2b84b; --danger: #ff8f7a; --ink: #e6f4f1; --ink-dim: #a9c4c4;
  --focus: #ffd166; --glow: 0 0 14px rgba(62, 230, 208, .55);
  --font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
h1, h2, h3, p { margin: 0 0 .6em; }
button { font: inherit; color: inherit; }
.small { font-size: .875rem; color: var(--ink-dim); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- buttons ---------- */
.btn { min-height: 48px; min-width: 48px; padding: 0 18px; border: 2px solid var(--steel); border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #1c4350, #10303a); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.btn:hover { border-color: var(--steel-hi); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, #1f8f84, #136a62); border-color: var(--teal); font-weight: 700; }
.btn-small { padding: 0 12px; font-size: .9375rem; }
.btn-quiet { background: transparent; border-style: dashed; }
.btn[aria-pressed="true"] { border-color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal-dim); }

/* ---------- title ---------- */
#title-screen { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 70% 20%, #1b5461 0, transparent 55%), linear-gradient(180deg, #07161c, #0a2530 70%, #04101a); }
.title-art { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(100deg, transparent 0 18px, rgba(169,220,217,.14) 18px 19px); }
.title-art::after { content: ""; position: absolute; left: 50%; top: -10%; width: 140%; height: 70%; transform: translateX(-10%) rotate(14deg);
  background: linear-gradient(90deg, rgba(255,244,201,.22), transparent 70%); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); }
.title-card { position: relative; max-width: 560px; padding: 28px 24px; border: 2px solid var(--steel); border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,55,65,.92), rgba(8,28,35,.94)); box-shadow: 0 20px 60px rgba(0,0,0,.55), var(--glow); }
.eyebrow { letter-spacing: .3em; font-size: .8125rem; color: var(--teal); margin-bottom: .2em; }
.title-card h1 { font-size: clamp(1.7rem, 6vw, 2.5rem); line-height: 1.2; }
.lede { font-size: 1.125rem; }
.title-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 10px; }
.title-actions .btn { flex: 1 1 200px; min-height: 56px; font-size: 1.0625rem; }

/* ---------- game ---------- */
#game-screen { max-width: 1200px; margin: 0 auto; padding: 8px 10px 20px; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 8px; }
.brand { margin: 0; font-size: 1.125rem; display: flex; align-items: center; gap: 8px; }
.chip { font-size: .8125rem; padding: 2px 10px; border: 1px solid var(--teal-dim); border-radius: 999px; color: var(--teal); }
.chip:empty { display: none; }
.topbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.stage { position: relative; margin: 0 auto; }
.scene { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 44vh; max-height: 44svh; overflow: hidden; border-radius: 14px; border: 2px solid var(--steel);
  background: var(--bg2); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#scene-svg { display: block; width: 100%; height: 100%; }
.devices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.device { position: relative; min-height: 64px; padding: 8px 10px; text-align: left; cursor: pointer; border: 2px solid var(--steel); border-radius: 12px;
  background: linear-gradient(180deg, #17404c, #0e2b34); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.device:hover { border-color: var(--teal); }
.dev-name { font-weight: 700; }
.dev-state { font-size: .875rem; color: var(--ink-dim); }
.dev-ignite { grid-column: 1 / -1; border-color: var(--amber); }
.dev-ignite[data-ready="true"] { background: linear-gradient(180deg, #8a5d12, #5c3d0b); border-color: #ffd166; }
.dev-ignite[data-ready="true"] .dev-state { color: #fff1c9; }
.skip { position: absolute; right: 8px; top: 8px; z-index: 5; }

.progress { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 6px; }
.progress li { padding: 4px 10px; border: 1px solid var(--steel); border-radius: 8px; font-size: .875rem; background: rgba(14,42,51,.8); }
.progress li[data-done="true"] { border-color: var(--teal); background: rgba(31,143,132,.35); }
.status { min-height: 3.2em; margin: 6px 0; padding: 8px 12px; border-left: 6px solid var(--teal); background: rgba(14,42,51,.9); border-radius: 0 10px 10px 0; }
.demo-tools { padding: 8px 12px; border: 1px dashed var(--steel); border-radius: 10px; }
.demo-tools h3 { font-size: 1rem; margin-bottom: 6px; }
.demo-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

/* wide: devices sit on the scene */
@media (min-width: 760px) and (min-height: 560px) {
  .stage { width: min(100%, calc((100vh - 190px) * 1.6)); width: min(100%, calc((100svh - 190px) * 1.6)); }
  .scene { aspect-ratio: 16 / 10; max-height: none; }
  .devices { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
  .device { position: absolute; pointer-events: auto; background: transparent; border: 2px solid transparent; border-radius: 14px; justify-content: flex-end; align-items: center; padding: 0 0 4px; text-align: center; }
  .device:hover, .device:focus-visible { border-color: var(--teal); background: rgba(62,230,208,.08); }
  .dev-name, .dev-state { padding: 1px 8px; background: rgba(4,16,20,.86); border-radius: 6px; font-size: clamp(.72rem, 1.45vw, .95rem); line-height: 1.3; }
  .dev-state { margin-top: 2px; color: var(--ink); }
  .dev-a { left: 3.5%; top: 14%; width: 22%; height: 46%; }
  .dev-b { left: 11%; top: 70%; width: 29%; height: 24%; }
  .dev-c { left: 35%; top: 14%; width: 30%; height: 52%; border-radius: 50%; }
  .dev-ignite { grid-column: auto; left: 66%; top: 70%; width: 24%; height: 22%; }
  .dev-ignite[data-ready="true"] { background: rgba(255,209,102,.12); border-color: #ffd166; }
}
@media (max-height: 559px) { .scene { aspect-ratio: 16 / 7; max-height: 38vh; } }
@media (max-width: 400px) { #game-screen { padding: 6px 6px 16px; } .btn-small { padding: 0 8px; font-size: .875rem; } }

/* ---------- dialogs ---------- */
dialog.panel { width: min(600px, calc(100vw - 16px)); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: 16px; margin: auto;
  color: var(--ink); background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--steel-hi); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.7), var(--glow); }
dialog.panel::backdrop { background: rgba(2, 8, 11, .72); }
dialog.panel-small { width: min(460px, calc(100vw - 16px)); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.panel-head h2, dialog h2 { margin: 0; font-size: 1.25rem; }
.keep-note { padding: 4px 8px; border: 1px dashed var(--steel); border-radius: 6px; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.result { padding: 6px 10px; border-left: 5px solid var(--steel); background: rgba(6,19,24,.6); border-radius: 0 8px 8px 0; min-height: 2.4em; }
.result[data-ok="true"], .result[data-lockable="true"], .receipt[data-recorded="true"] { border-left-color: var(--teal); }
.result[data-ok="false"] { border-left-color: var(--amber); }
.receipt { padding: 8px 10px; border: 2px dashed var(--steel); border-radius: 8px; }
.receipt[data-recorded="true"] { border-style: solid; background: rgba(31,143,132,.25); font-weight: 700; }
/* 320px: optics needs 6x48px + 4px border = 292px inside the panel; 320-8 wide, 6px padding, 2px border => 296px content */
/* Override browser default dialog max-width so the 6x48px optics grid fits at 320px. */
@media (max-width: 400px) { dialog.panel, dialog.panel-small { width: calc(100vw - 8px); max-width: calc(100vw - 8px); padding: 6px; } }

/* A: circuit */
.circuit { display: grid; grid-template-columns: minmax(46px, .8fr) repeat(3, minmax(56px, 1fr)) minmax(46px, .8fr); gap: 4px; margin: 10px 0; }
.gutter { display: flex; align-items: center; justify-content: center; text-align: center; font-size: .75rem; line-height: 1.25; color: var(--ink-dim); }
.gutter[data-on="true"] { color: var(--teal); font-weight: 700; }
.cell { position: relative; aspect-ratio: 1; min-height: 56px; padding: 0; border: 2px solid var(--steel); border-radius: 10px; background: #0a1d24; cursor: pointer; overflow: hidden; }
.cell.blocked { display: grid; place-items: center; font-size: .75rem; color: var(--ink-dim); cursor: default; background: repeating-linear-gradient(45deg, #0a1d24 0 6px, #14323b 6px 12px); }
.cell svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cell-bg { fill: #0c242c; stroke: none; }
.wire { stroke: #87a3ac; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 3 5; }
.wire[data-on="false"] { opacity: 0; }
.hub { fill: #87a3ac; }
.cell[data-powered="true"] { border-color: var(--teal); box-shadow: var(--glow); }
.cell[data-powered="true"] .wire { stroke: var(--teal); stroke-dasharray: none; }
.cell[data-powered="true"] .hub { fill: var(--teal); }
.open-mark { opacity: 0; fill: none; stroke: var(--amber); stroke-width: 3.5; stroke-linecap: round; }
.open-mark[data-on="true"] { opacity: 1; }
.cell-label { position: absolute; left: 0; right: 0; bottom: 0; font-size: .625rem; line-height: 1.2; padding: 1px 0; background: rgba(4,16,20,.78); color: var(--ink); }
@media (min-width: 440px) { .cell-label { font-size: .75rem; } }

/* B: radio */
.logbook { display: block; margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--amber); background: rgba(242,184,75,.08); font-size: .9375rem; }
.logbook .small { display: block; color: var(--amber); }
.scope { border: 3px solid var(--steel); border-radius: 8px; overflow: hidden; background: #06141a; }
.scope svg { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; }
.scope-noise { stroke: #6fb3ae; stroke-linejoin: round; }
.bar { fill: #8ff5e6; }
.meter-wrap { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.meter { flex: 1; height: 14px; border: 2px solid var(--steel); border-radius: 8px; background: #06141a; overflow: hidden; }
.meter span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--teal) 0 6px, var(--teal-dim) 6px 8px); }
.dial label { display: block; font-weight: 700; }
.dial input[type="range"] { width: 100%; height: 48px; margin: 4px 0; accent-color: var(--teal); }
.dial-btns { display: flex; gap: 8px; }
.dial-btns .btn { flex: 1; }

/* C: optics */
.optics { position: relative; display: grid; grid-template-columns: repeat(6, minmax(48px, 1fr)); grid-template-rows: repeat(4, minmax(48px, 1fr)); margin: 10px 0;
  border: 2px solid var(--steel); border-radius: 10px; overflow: hidden; background: #08181e; }
.optics .beam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.beam polyline { stroke: var(--steel-hi); stroke-width: 3; stroke-dasharray: 5 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#app[data-a="ready"] .beam polyline { stroke: #fff1c9; stroke-dasharray: none; stroke-width: 4; filter: drop-shadow(0 0 4px rgba(255,241,201,.9)); }
.mcell { position: relative; aspect-ratio: 1; min-height: 48px; border: 1px dotted #28505c; display: grid; place-items: center; font-size: .6875rem; color: var(--ink-dim); }
.mcell.wall { background: repeating-linear-gradient(45deg, #26414a 0 5px, #0a1d24 5px 10px); color: var(--ink); font-weight: 700; }
button.mcell { z-index: 2; padding: 0; background: rgba(12,36,44,.55); cursor: pointer; border: 1px solid var(--steel); }
button.mcell[data-lit="true"] { border: 2px solid var(--teal); background: rgba(31,143,132,.25); }
button.mcell:hover { background: rgba(62,230,208,.2); }
.mcell svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.glyph { fill: none; stroke: #e8fffb; stroke-width: 4; stroke-linecap: round; opacity: 0; }
.glyph[data-on="true"] { opacity: 1; }
.glyph.g2 { stroke-dasharray: 3 4; stroke-width: 3; }
.coord { position: absolute; left: 3px; top: 1px; font-size: .6875rem; font-weight: 700; color: var(--amber); }
.word { position: absolute; right: 3px; bottom: 1px; font-size: .6875rem; }
button.mcell[data-role="target"]::after { content: "수광"; position: absolute; right: 2px; top: 1px; font-size: .625rem; color: var(--teal); }
.aim-h { margin-top: 14px; font-size: 1.0625rem; }
.aim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 300px; margin: 8px auto; }
.aim-btn { padding: 0 4px; }
.aim-center { display: grid; place-items: center; font-size: .8125rem; color: var(--ink-dim); }

/* hints */
.hint-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.hint-list { padding-left: 1.2em; margin: 8px 0; }
.hint-list li { margin-bottom: .5em; }
.hint-list li.none { color: var(--ink-dim); list-style: none; margin-left: -1.2em; }
.hint-confirm { padding: 10px; border: 2px solid var(--amber); border-radius: 10px; margin: 8px 0; background: rgba(242,184,75,.1); }

/* ---------- scene reactions ---------- */
#scene-svg .dark { opacity: .62; transition: opacity .9s ease; pointer-events: none; }
#app[data-a="ready"] #dark { opacity: 0; }
#storm-light, #flash { opacity: 0; pointer-events: none; }
#emergency { opacity: .05; pointer-events: none; mix-blend-mode: screen; }
#app[data-a="ready"] #emergency { opacity: 0; }
.lamp { fill: #1a2d33; stroke: #4d6a74; stroke-width: 1.5; }
.lamp.on { fill: #4ff7df; stroke: #d9fff8; filter: drop-shadow(0 0 5px #4ff7df); }
.needle { stroke: #ffb35a; stroke-width: 2.5; stroke-linecap: round; transform: rotate(var(--needle, -48deg)); transition: transform .8s cubic-bezier(.3, 1.5, .5, 1); }
.radio-hand { stroke: #4ff7df; stroke-width: 3; stroke-linecap: round; transform: rotate(var(--dial, -135deg)); transition: transform .3s ease; }
.radio-trace { stroke: #3d6d6a; }
#app[data-a="ready"] .radio-trace { stroke: #4ff7df; }
.radio-led { fill: #3a2b12; }
#app[data-a="ready"] .radio-led { fill: #ffb35a; }
#app[data-b="recorded"] .radio-led { fill: #4ff7df; filter: drop-shadow(0 0 5px #4ff7df); }
#app[data-b="recorded"] .radio-trace { stroke: #8ff5e6; stroke-width: 3; }
.lens-glow { opacity: .14; transition: opacity 1s; }
#app[data-c1="ready"] .lens-glow { opacity: .85; }
.lens-ray { stroke: #fff1c9; stroke-width: 3; stroke-dasharray: 6 8; opacity: 0; transition: opacity .8s; }
#app[data-c1="ready"] .lens-ray { opacity: .9; }
#app[data-c1="ready"][data-a="ready"] .lens-ray { stroke-dasharray: none; stroke-width: 5; filter: drop-shadow(0 0 6px #fff1c9); }
.motor { opacity: .35; }
#app[data-a="ready"] .motor { opacity: 1; }
.ignite-cap { fill: #7a2f1d; }
#app[data-c1="ready"][data-b="recorded"][data-a="ready"][data-c2="ready"] .ignite-cap { fill: #ffb35a; filter: drop-shadow(0 0 8px #ffb35a); }
.wire-a, #wire-a { stroke: #35525c; stroke-width: 4; }
#app[data-a="ready"] #wire-a { stroke: #4ff7df; }
#bolt { opacity: 0; }
#beam-out { opacity: 0; transition: opacity 1s; }
#app[data-ignite="beam"] #beam-out, #app[data-ignite="ship"] #beam-out, #app[data-ignite="door"] #beam-out, #app[data-ignite="done"] #beam-out { opacity: 1; }
.ship-light { fill: #46606a; }
.ship-flash { opacity: 0; }
#app[data-ignite="ship"] .ship-light, #app[data-ignite="door"] .ship-light, #app[data-ignite="done"] .ship-light { fill: #fff1c9; }
#app[data-ignite="ship"] .ship-flash, #app[data-ignite="door"] .ship-flash, #app[data-ignite="done"] .ship-flash { opacity: .9; }
.door-lamp { fill: #7a2f1d; }
#app[data-ignite="door"] .door-lamp, #app[data-ignite="done"] .door-lamp { fill: #4ff7df; }
.door-half { transition: transform 1.4s ease; }
#app[data-ignite="door"] #door-l, #app[data-ignite="done"] #door-l { transform: translateX(-74px); }
#app[data-ignite="door"] #door-r, #app[data-ignite="done"] #door-r { transform: translateX(74px); }
#door-light { opacity: .15; }
#app[data-ignite="door"] #door-light, #app[data-ignite="done"] #door-light { opacity: 1; }
#app[data-ignite="door"] #dark, #app[data-ignite="done"] #dark { opacity: 0; }
#app[data-ignite="done"] #storm-light { opacity: .08; }

/* ---------- motion (only when allowed: JS sets data-motion; media query is the fallback) ---------- */
#app[data-motion="on"] .wave-far { animation: wave 9s linear infinite; --p: 60px; }
#app[data-motion="on"] .wave-mid { animation: wave 6.5s linear infinite; --p: 90px; }
#app[data-motion="on"] .wave-near { animation: wave 4.6s linear infinite; --p: 130px; }
#app[data-motion="on"] .wave-front { animation: wave 3.4s linear infinite; --p: 170px; }
@keyframes wave { to { transform: translateX(calc(var(--p) * -1)); } }
#app[data-motion="on"] .rain-a { animation: rain 0.7s linear infinite; }
#app[data-motion="on"] .rain-b { animation: rain 0.95s linear infinite; }
@keyframes rain { from { transform: translate(0, -30px); } to { transform: translate(-12px, 30px); } }
#app[data-motion="on"] #flash { animation: flash 11s linear infinite; }
#app[data-motion="on"] #bolt { animation: bolt 11s linear infinite; }
#app[data-motion="on"] #storm-light { animation: storm 11s linear infinite; }
@keyframes flash { 0%, 6%, 9%, 100% { opacity: 0; } 7% { opacity: .75; } 7.8% { opacity: .15; } 8.4% { opacity: .5; } }
@keyframes bolt { 0%, 6%, 9%, 100% { opacity: 0; } 7%, 8.4% { opacity: 1; } }
@keyframes storm { 0%, 6%, 9%, 100% { opacity: 0; } 7%, 8.4% { opacity: .13; } }
#app[data-motion="on"][data-a="off"] #emergency { animation: warn 1.8s ease-in-out infinite; }
@keyframes warn { 0%, 100% { opacity: .02; } 50% { opacity: .14; } }
#app[data-motion="on"][data-c1="ready"] .lens-glow { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .6; } 50% { opacity: .95; } }
#app[data-motion="on"][data-ignite="ship"] .ship-flash, #app[data-motion="on"][data-ignite="door"] .ship-flash, #app[data-motion="on"][data-ignite="done"] .ship-flash { animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 0% { opacity: .95; } 100% { opacity: .15; } }
#app[data-motion="on"][data-ignite="beam"] #beam-out { animation: sweep 1.4s ease-out; }
@keyframes sweep { from { opacity: 0; transform: scaleX(.2); transform-origin: 480px 262px; } to { opacity: 1; transform: scaleX(1); transform-origin: 480px 262px; } }
/* oscilloscope: only while the radio panel is open, tab visible and motion allowed (JS: data-scope) */
#app[data-scope="on"] .bar { animation: flicker 1.2s steps(2, jump-none) infinite; }
@keyframes flicker { 0% { opacity: 1; } 100% { opacity: .45; } }
#app[data-motion="on"] .device[data-ready="true"] { animation: ready 2.2s ease-in-out infinite; }
@keyframes ready { 0%, 100% { box-shadow: 0 0 0 rgba(255,209,102,0); } 50% { box-shadow: 0 0 18px rgba(255,209,102,.7); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
#app[data-motion="off"] *, #app[data-motion="off"] *::before, #app[data-motion="off"] *::after { animation: none !important; transition: none !important; }