:root {
  color-scheme:dark;
  --bg:#171c32;--panel:#202641;--dark:#101427;--ink:#f6eedb;
  --muted:#c2bed2;--line:#444b68;--mint:#a9d7c3;--coral:#f5a28d;
  --mono:"Courier New",monospace;--sans:Inter,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%}
body{margin:0;background:radial-gradient(ellipse at 38% 3%,#272e4c 0,transparent 55%),var(--bg);color:var(--ink);font-family:var(--sans)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
button:disabled{opacity:.55;cursor:default}
.layout{max-width:1320px;margin:0 auto;padding:24px 42px 40px}
.masthead{display:flex;align-items:center;justify-content:space-between;min-height:62px;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:17px}
.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none}
.brand strong,.brand small{display:block;font-family:var(--mono);font-weight:800;letter-spacing:.075em}
.brand strong{font-size:19px}
.brand small{color:var(--coral);font-size:11px;margin-top:2px}
.mark{position:relative;display:block;width:35px;height:34px;background:var(--ink);clip-path:polygon(20% 0,80% 0,80% 11%,92% 11%,92% 68%,77% 68%,77% 91%,22% 91%,22% 68%,8% 68%,8% 11%,20% 11%)}
.mark i,.mark b{position:absolute;top:10px;left:8px;width:6px;height:7px;background:var(--bg)}
.mark i+i{left:21px}
.mark b{left:16px;top:20px;width:4px;height:4px}
.sound,.pause{color:var(--muted);background:#20263e;border:1px solid #515875;padding:8px 12px;font:700 12px var(--mono)}
.sound:hover,.pause:hover{color:var(--ink);border-color:var(--mint)}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:22px;align-items:start}
.game-frame{border:1px solid #626987;background:#0e1328;min-width:0;box-shadow:0 12px 28px #0b0e205a}
.game-top,.game-bottom{display:flex;align-items:center;gap:14px;justify-content:space-between;background:#222840;padding:9px 14px;min-height:42px;font:700 11px var(--mono);letter-spacing:.09em}
.game-top{border-bottom:1px solid #626987}
.game-top>span:first-child{display:flex;align-items:center;gap:9px}
.game-top i{width:7px;height:7px;background:var(--mint);box-shadow:0 0 8px #a9d7c365}
.game-top i.danger{background:var(--coral);box-shadow:0 0 8px #f5a28d}
.clock{color:var(--mint);font-size:13px}
.screen{position:relative;background:#31565e;aspect-ratio:8/5;isolation:isolate}
#field{display:block;width:100%;height:100%;image-rendering:pixelated}
.title-screen{position:absolute;inset:0;display:grid;grid-template-columns:43% 57%;background:#244b50}
.title-screen>img{width:100%;height:100%;object-fit:cover;object-position:center 44%;display:block;min-width:0}
.title-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(16px,4vw,48px);background:#193a44;border-right:2px solid #71a59a}
.eyebrow{color:var(--coral);font:700 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
h1,h2,p{margin:0}
.title-copy h1{font:800 clamp(28px,4.2vw,64px)/.98 var(--mono);letter-spacing:-.08em;margin:12px 0 15px}
.title-copy p{font-size:14px;line-height:1.5;max-width:220px;color:#e2ece5;margin-bottom:22px}
.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;background:var(--coral);color:#21273f;border:2px solid #21273f;box-shadow:0 0 0 1px var(--coral),0 4px 0 #101427;padding:10px 13px;font:800 12px/1.3 var(--mono);white-space:nowrap}
.primary:hover{background:#ffc2ab}
.primary:active{transform:translateY(2px);box-shadow:0 0 0 1px var(--coral),0 2px 0 #101427}
.secondary{margin-top:11px;border:0;background:transparent;color:var(--mint);padding:5px 0;font:700 12px var(--mono);text-decoration:underline;text-underline-offset:3px}
.game-bottom{border-top:1px solid #626987;letter-spacing:0;color:var(--muted);justify-content:flex-start;flex-wrap:wrap;min-height:48px}
#status{flex:1;min-width:150px}
.interact{display:flex;align-items:center;gap:7px;color:var(--ink);border:0;background:#39354a;padding:4px 7px;font:700 11px var(--mono)}
.pause{margin-left:auto;padding:5px 8px}
kbd{display:inline-block;color:var(--ink);background:#2c324d;border:1px solid #606785;padding:3px 5px;font:700 11px/1.1 var(--mono);min-width:18px;text-align:center;white-space:nowrap}
.sidebar{display:grid;gap:14px}
.sidebar>section{background:var(--panel);border:1px solid var(--line);padding:15px}
.side-title{display:flex;align-items:center;justify-content:space-between;gap:6px}
.side-title h2{font:700 14px/1.35 var(--mono);color:var(--ink)}
.side-title>span{color:var(--mint);font:700 11px var(--mono)}
.side-sub{font:700 10px var(--mono);color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.07em}
ol{padding:0;list-style:none;margin:14px 0 10px;display:grid;gap:6px}
.task{display:grid;grid-template-columns:15px 1fr;column-gap:8px;padding:9px 7px;border:1px solid transparent;color:var(--muted);font-size:12px;line-height:1.35}
.task::before{content:"□";font:700 15px var(--mono);color:#989bb6}
.task.active{background:#30364f;border-color:#555d76;color:var(--ink)}
.task.active::before{content:"▸";color:var(--coral)}
.task.done{color:#a9cbbb}
.task.done::before{content:"✓";color:var(--mint)}
.task small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.strikes{border-top:1px solid var(--line);padding-top:11px;color:var(--muted);font:700 10px var(--mono)}
.strikes span{color:var(--coral);margin-right:6px;font-size:12px}
#minimap{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid #586681;margin-top:9px}
.map-key{display:flex;justify-content:space-between;gap:4px;margin-top:8px;color:var(--muted);font:700 9px var(--mono)}
.map-key span::before{content:"";display:inline-block;width:6px;height:6px;background:var(--ink);margin-right:4px}
.map-key span:nth-child(2)::before{background:var(--coral)}
.map-key span:nth-child(3)::before{background:#be5863}
.controls dl{display:grid;gap:7px;margin:11px 0 0;font-size:12px;color:var(--muted)}
.controls dl div{display:flex;align-items:center;justify-content:space-between;gap:5px}
.controls dd{display:flex;gap:3px;margin:0}
.scene{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#191f36}
.scene-art{min-height:0;overflow:hidden;background:#244b50;display:flex;justify-content:center}
.scene-art img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:auto}
.scene-art img.pixel{image-rendering:pixelated}
.scene-art img.react{animation:tug .34s steps(3,end)}
@keyframes tug{25%{transform:translate(0,-6px)}55%{transform:translate(3px,6px)}}
.dialogue{color:#242943;background:#f8efd9;border:3px solid #262e48;outline:1px solid #f8efd9;outline-offset:-5px;padding:10px 14px 12px;position:relative;min-height:89px}
.dialogue .eyebrow{color:#785167;font-size:10px}
.dialogue p{max-width:75%;font:700 clamp(11px,1.6vw,17px)/1.35 var(--mono);margin-top:4px;white-space:pre-line}
.advance{position:absolute;right:12px;bottom:12px;padding:5px 7px;font-size:10px}
.advance kbd,.interact kbd{font-size:9px;padding:2px 4px}
.end-overlay{position:absolute;inset:0;background:#141b34e9;display:grid;place-items:center;padding:16px}
.end-card{width:min(350px,100%);border:2px solid #7481a0;padding:24px;background:#232b48;text-align:center}
.end-card h2{font:800 clamp(23px,4vw,39px)/1.05 var(--mono);margin:10px 0}
.end-card p{font-size:13px;color:var(--muted);margin:0 0 15px}
.end-card button{margin-inline:auto}
.end-card .secondary{display:block}
.toast{position:absolute;z-index:3;bottom:12px;left:50%;transform:translateX(-50%);min-width:180px;max-width:90%;text-align:center;background:#1d233d;color:var(--ink);padding:9px 12px;border:1px solid var(--coral);font:700 11px/1.4 var(--mono)}
.touch{display:none}
@media(max-width:850px){
  .layout{padding:16px 17px 28px}
  .game-layout{grid-template-columns:minmax(0,1fr) 225px;gap:12px}
  .sidebar>section{padding:11px}
  .title-copy{padding:14px}
  .title-copy p{font-size:11px;margin-bottom:12px}
}
@media(max-width:650px){
  .game-layout{display:block}
  .sidebar{margin-top:12px;grid-template-columns:1fr 1fr;gap:9px}
  .masthead{margin-bottom:12px}
  .title-copy h1{font-size:clamp(19px,5.6vw,35px);margin:6px 0}
  .title-copy .eyebrow{font-size:8px}
  .title-copy .primary{font-size:10px;padding:6px}
  .title-copy .secondary{font-size:9px;margin-top:6px}
  .title-copy p{font-size:10px;margin-bottom:7px}
  .dialogue{min-height:63px;padding:6px 9px}
  .dialogue p{font-size:11px;max-width:72%}
  .advance{font-size:9px;right:7px;bottom:7px;max-width:28%;white-space:normal}
  .side-title h2{font-size:12px}
}
@media(pointer:coarse){
  .touch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:#222840}
  .touch button{border:1px solid #727b9d;background:#353c59;color:var(--ink);min-width:39px;min-height:36px;font:700 13px var(--mono);touch-action:none;user-select:none}
  .dpad{display:grid;grid-template-columns:repeat(3,40px);gap:3px}
  .dpad button:first-child{grid-column:2}
  .dpad button:nth-child(2){grid-column:1}
  .touch-actions{display:flex;gap:7px}
  .touch-actions button{padding:0 9px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important}}