:root {
  color-scheme: dark;
  --ink: #07101e; --ink2: #0b1829; --panel: #10243a; --panel2: #183451;
  --line: #3f6287; --paper: #edf6ff; --muted: #9ab1c8; --amber: #ffbe32;
  --amber2: #ffe49a; --cyan: #68e6ff; --blue: #2f9bf0; --red: #ff5c69;
  --green: #71db8c; --shadow: #02050a; --page: min(100% - 28px, 820px);
  font-family: ui-monospace, "SFMono-Regular", "PingFang SC", "Microsoft YaHei", monospace;
  background: var(--ink); color: var(--paper);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ink); }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; }
.scanlines { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .12; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.7) 4px); mix-blend-mode: multiply; }
.sprite { background-repeat: no-repeat; background-position: center; background-size: contain; image-rendering: pixelated; }
.sprite-1 { background-image: url("./assets/sprites/sprite-1.png"); } .sprite-2 { background-image: url("./assets/sprites/sprite-2.png"); } .sprite-3 { background-image: url("./assets/sprites/sprite-3.png"); } .sprite-4 { background-image: url("./assets/sprites/sprite-4.png"); } .sprite-5 { background-image: url("./assets/sprites/sprite-5.png"); }
.eyebrow, .quest-tag, .speaker { color: var(--cyan); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.pixel-panel { border: 2px solid var(--line); background: linear-gradient(145deg, var(--panel2), #0b1929); box-shadow: 6px 6px 0 var(--shadow); }

.hud { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(-140%); z-index: 60; width: min(calc(100% - 22px), 790px); height: 62px; display: grid; grid-template-columns: 47px 1fr auto; gap: 10px; align-items: center; padding: 7px 12px; background: rgba(7,16,30,.94); border: 2px solid var(--line); box-shadow: 4px 4px 0 #000; backdrop-filter: blur(8px); transition: transform .35s ease; }
body.started .hud { transform: translateX(-50%) translateY(0); }
.hud-avatar { width: 44px; height: 46px; padding: 0; border: 0; cursor: pointer; }
.hud-copy { min-width: 0; }.hud-copy > span { display: block; margin-bottom: 6px; color: var(--amber2); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-track { height: 7px; background: #02060b; border: 1px solid var(--line); }.hud-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--cyan),var(--amber)); transition: width .3s ease; }
.hud-level { color: var(--green); font-size: .8rem; }

.boot-screen { min-height: 100svh; display: grid; place-items: center; position: relative; padding: 28px 16px; overflow: hidden; background: radial-gradient(circle at 50% 20%, #183957, #07101e 55%); }
.boot-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(47,155,240,.1) 1px, transparent 1px),linear-gradient(90deg,rgba(47,155,240,.1) 1px,transparent 1px); background-size: 28px 28px; transform: perspective(400px) rotateX(54deg) scale(1.7); transform-origin: bottom; mask-image: linear-gradient(to top,#000,transparent 80%); }
.boot-shell { position: relative; z-index: 1; width: min(100%,510px); padding: clamp(22px,7vw,42px); text-align: center; background: rgba(7,16,30,.93); border: 3px solid var(--amber); box-shadow: 9px 9px 0 #000, inset 0 0 0 3px #4a3609; }
h1 { margin: 10px 0 20px; font-size: clamp(3rem,14vw,5.2rem); line-height: .9; letter-spacing: -.08em; text-shadow: 5px 5px 0 #16446b; }
.boot-terminal { text-align: left; color: var(--muted); font-size: .82rem; line-height: 1.8; }.boot-terminal p { margin: 0; }.boot-terminal span { color: var(--amber); }
.boot-sprite { width: 138px; height: 190px; margin: 10px auto 4px; filter: drop-shadow(6px 6px 0 rgba(0,0,0,.55)); animation: hover 1.8s steps(2) infinite; }
.pixel-button,.archive-button { min-height: 48px; padding: 11px 20px; font-weight: 900; cursor: pointer; border: 0; }
.pixel-button.primary { color: var(--ink); background: var(--amber); box-shadow: 5px 5px 0 #8c6313; }.pixel-button:active,.archive-button:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #000; }
.tiny { margin: 17px 0 0; color: #71879d; font-size: .7rem; }

.game-content { opacity: .1; filter: grayscale(1); pointer-events: none; transition: opacity .5s ease,filter .5s ease; background: radial-gradient(circle at 50% 0,#17324e 0,var(--ink) 32rem); }
body.started .game-content { opacity: 1; filter: none; pointer-events: auto; }
.world-map,.game-stage,.loadout,.final-report-screen { width: var(--page); margin: 0 auto; padding: 108px 0 74px; }
.map-header h2,.loadout h2,.final-report-screen h2 { margin: 7px 0; font-size: clamp(2rem,8vw,3.6rem); letter-spacing: -.06em; line-height: 1.05; }.map-header > p:last-child,.loadout-copy > p { color: var(--muted); }
.player-card { display: grid; grid-template-columns: minmax(110px,190px) 1fr; align-items: center; gap: 18px; padding: 18px 22px; margin-top: 26px; overflow: hidden; }
.profile-sprite { height: 220px; filter: drop-shadow(5px 5px 0 rgba(0,0,0,.5)); }.player-card h3 { margin: 6px 0 12px; font-size: 2rem; }.player-card dl { margin: 0; }.player-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--line); }.player-card dt { color: var(--muted); }.player-card dd { margin: 0; font-weight: 800; text-align: right; }
.lost-note { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 12px 14px; color: var(--muted); background: #0a1727; border: 1px dashed var(--line); font-size: .78rem; line-height: 1.6; }.lost-note span { display: grid; place-items: center; width: 27px; height: 27px; color: var(--red); border: 1px solid var(--red); }
.stage-map { position: relative; display: grid; grid-template-columns: repeat(2,1fr); gap: 13px 38px; margin: 28px 0 0; padding: 8px 0; }.stage-map::before { content:""; position:absolute; top:10%; bottom:10%; left:50%; width:4px; transform:translateX(-50%); background: repeating-linear-gradient(to bottom,var(--line) 0 10px,transparent 10px 18px); }
.map-node { position: relative; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr 1fr; gap: 0 11px; min-height: 72px; padding: 10px 12px; color: var(--paper); text-align: left; background: var(--panel); border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); cursor:pointer; }.map-node:nth-child(even){ transform:translateY(34px); }.map-node b { grid-row:1/3; align-self:center; display:grid; place-items:center; width:40px; height:40px; color:var(--ink); background:var(--amber); }.map-node span { align-self:end; font-weight:900; }.map-node small { color:var(--muted); }.map-node.current,.map-node:hover { border-color:var(--cyan); transform:translate(-2px,-2px); }.map-node:nth-child(even):hover { transform:translate(-2px,32px); }.map-node.cleared::after { content:"✓"; position:absolute; right:8px; top:7px; color:var(--green); }.map-node.boss { grid-column:1/-1; width:calc(50% - 19px); justify-self:center; margin-top:34px; }.map-node.boss b { background:var(--red); color:white; }.map-tip { margin-top:55px; text-align:center; color:var(--muted); font-size:.76rem; }

.game-stage { min-height: 100svh; }.stage-chrome { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; min-height:46px; padding:9px 13px; color:var(--muted); background:#06101b; border:2px solid var(--line); border-bottom:0; font-size:.7rem; letter-spacing:.06em; }.stage-chrome span { color:var(--amber); font-weight:900; }.stage-chrome strong { text-align:center; color:var(--paper); }.stage-chrome em { color:var(--cyan); font-style:normal; }
.scene-frame { position:relative; overflow:hidden; border:3px solid var(--line); background:#02050a; box-shadow:8px 8px 0 #000; }.scene-frame::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 4px rgba(7,16,30,.45); }.scene-frame > img { aspect-ratio:16/10; object-fit:cover; image-rendering:pixelated; }.scene-hud { position:absolute; z-index:2; left:10px; right:10px; bottom:10px; display:flex; flex-wrap:wrap; gap:6px; }.scene-hud span { padding:6px 8px; color:var(--amber2); background:rgba(2,8,15,.88); border:1px solid var(--line); font-size:.64rem; }
.dialog-box { position:relative; z-index:3; display:grid; grid-template-columns:90px 1fr; gap:15px; margin:-4px 20px 0; padding:16px 18px; background:#091726; border:3px solid var(--paper); box-shadow:6px 6px 0 #000; }.dialog-avatar { height:112px; filter:drop-shadow(4px 4px 0 rgba(0,0,0,.5)); }.dialog-box h2 { margin:4px 0 7px; font-size:clamp(1.12rem,4vw,1.7rem); line-height:1.25; }.dialog-box p { margin:0; color:var(--muted); line-height:1.7; font-size:.9rem; }.dialog-box.gold { border-color:var(--amber); }.archive-button { display:block; width:calc(100% - 40px); margin:14px auto 0; color:var(--cyan); background:#0c2136; border:2px solid var(--line); box-shadow:4px 4px 0 #000; }.archive-button:hover { border-color:var(--cyan); }.archive-button.secondary { color:var(--amber); }.archive-button:disabled { color:#60758b; cursor:not-allowed; opacity:.7; }
.wind-particles { position:absolute; top:16%; left:-20%; color:rgba(255,255,255,.8); font-size:2rem; animation:wind 2.5s linear infinite; }.warning-chip,.achievement-pop { position:absolute; z-index:2; top:14px; right:14px; padding:8px 10px; color:white; background:var(--red); border:2px solid white; box-shadow:4px 4px 0 rgba(0,0,0,.7); font-size:.65rem; font-weight:900; animation:pulse 1.2s steps(2) infinite; }.achievement-pop { color:var(--ink); background:var(--amber); border-color:var(--ink); text-align:center; animation:pop 1.6s steps(2) infinite; }.achievement-pop b { font-size:.8rem; }

.loadout { padding-top:120px; }.loadout-machine { min-height:290px; display:grid; grid-template-columns:220px 1fr; align-items:center; gap:20px; padding:20px; overflow:hidden; background-image:linear-gradient(rgba(104,230,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(104,230,255,.06) 1px,transparent 1px); background-size:20px 20px; }.loadout-avatar { width:100%; height:280px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(7px 7px 0 rgba(0,0,0,.6)); }.loadout-info span { color:var(--amber); font-size:1.6rem; font-weight:900; }.loadout-info p { color:var(--muted); line-height:1.8; }.inventory { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px; }.item-slot { min-height:76px; padding:7px; color:var(--muted); background:#0a1727; border:2px solid var(--line); cursor:pointer; font-size:.7rem; }.item-slot span { display:block; margin-bottom:6px; color:var(--cyan); }.item-slot.active { color:var(--ink); background:var(--amber); border-color:var(--amber); font-weight:900; }.item-slot.active span { color:var(--ink); }

.final-report-screen { min-height:100svh; display:grid; align-content:center; text-align:center; }.final-report { margin:24px 0; padding:15px 22px; text-align:left; }.final-report p { display:flex; justify-content:space-between; gap:18px; margin:0; padding:13px 0; border-bottom:1px dashed var(--line); }.final-report p:last-child { border:0; }.final-report span { color:var(--muted); }.final-report strong { color:var(--paper); text-align:right; }.final-copy { margin:6px 0; }.final-copy.amber { color:var(--amber); }.save-indicator { margin-top:30px; color:var(--green); font-size:.76rem; animation:blink 1.2s steps(1) infinite; }

.archive-dialog { width:min(calc(100% - 24px),760px); max-height:88svh; padding:0; color:var(--paper); background:#081523; border:3px solid var(--amber); box-shadow:10px 10px 0 #000; }.archive-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(4px); }.dialog-toolbar { position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:15px 18px; background:#0b1b2c; border-bottom:2px solid var(--line); }.dialog-toolbar span { color:var(--cyan); font-size:.66rem; letter-spacing:.12em; }.dialog-toolbar h2 { margin:3px 0 0; font-size:1.25rem; }.dialog-toolbar button { width:42px; height:42px; color:var(--paper); background:#142c45; border:2px solid var(--line); font-size:1.6rem; cursor:pointer; }.archive-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:14px; }.archive-grid figure { position:relative; margin:0; overflow:hidden; background:#02060b; border:2px solid var(--line); }.archive-grid img { height:350px; object-fit:cover; }.archive-grid figcaption { position:absolute; left:7px; right:7px; bottom:7px; padding:7px 9px; color:var(--amber2); background:rgba(2,8,15,.88); font-size:.72rem; }.archive-close { display:block; width:calc(100% - 28px); margin:0 14px 16px; color:var(--ink); background:var(--amber); box-shadow:4px 4px 0 #8c6313; }

.observed { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }.observed.visible { opacity:1; transform:none; }
button:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
@keyframes hover { 50%{transform:translateY(-5px)} } @keyframes pulse { 50%{opacity:.62} } @keyframes pop { 50%{transform:translateY(-3px)} } @keyframes blink { 50%{opacity:.35} } @keyframes wind { to{left:100%} }

@media(max-width:680px){
  :root{--page:min(100% - 20px,820px)}
  .world-map,.game-stage,.loadout,.final-report-screen{padding-top:94px}
  .player-card{grid-template-columns:110px 1fr;padding:14px}.profile-sprite{height:170px}.player-card h3{font-size:1.5rem}.player-card dl div{display:block}.player-card dd{text-align:left;margin-top:3px;font-size:.8rem}
  .stage-map{gap:10px 24px}.map-node{grid-template-columns:34px 1fr;min-height:68px;padding:8px}.map-node b{width:33px;height:33px}.map-node span{font-size:.78rem}.map-node small{font-size:.62rem}
  .stage-chrome{grid-template-columns:auto 1fr}.stage-chrome em{display:none}.scene-frame>img{aspect-ratio:4/3}.dialog-box{grid-template-columns:70px 1fr;margin-left:10px;margin-right:10px;padding:13px}.dialog-avatar{height:90px}.dialog-box p{font-size:.82rem}.archive-button{width:calc(100% - 20px)}
  .loadout-machine{grid-template-columns:140px 1fr;min-height:240px;padding:14px}.loadout-avatar{height:210px}.loadout-info span{font-size:1.2rem}.inventory{grid-template-columns:repeat(5,1fr);gap:5px}.item-slot{min-height:68px;padding:5px;font-size:.6rem}
  .archive-grid{grid-template-columns:1fr 1fr;gap:7px;padding:9px}.archive-grid img{height:270px}
}
@media(max-width:420px){
  .boot-shell{padding:24px 18px}.boot-sprite{height:168px}.scene-frame>img{aspect-ratio:1/1}.scene-hud{left:6px;right:6px;bottom:6px}.scene-hud span{font-size:.56rem;padding:5px}
  .dialog-box{grid-template-columns:58px 1fr;gap:10px;padding:11px}.dialog-avatar{height:76px}.dialog-box h2{font-size:1rem}.dialog-box p{font-size:.76rem;line-height:1.55}
  .loadout-machine{grid-template-columns:110px 1fr}.loadout-avatar{height:170px}.loadout-info p{font-size:.75rem}.item-slot{writing-mode:vertical-rl;height:84px}
  .archive-grid{grid-template-columns:1fr}.archive-grid img{height:auto;max-height:68svh}.final-report{padding:10px 12px}.final-report p{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}