@font-face { font-family:'DM Mono'; src:url('assets/fonts/dm-mono-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('assets/fonts/dm-mono-500.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Press Start 2P'; src:url('assets/fonts/press-start-2p.ttf') format('truetype'); font-weight:400; font-display:swap; }

:root { --ink:#090b16; --panel:#121629; --panel2:#1a2038; --cream:#f7edcf; --gold:#f5c04f; --cyan:#64d8cb; --rose:#ef6687; --violet:#786bdc; --line:#596184; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; background:#070914; color:var(--cream); }
body { font-family:'DM Mono', monospace; background:radial-gradient(circle at 50% -20%,#26274e 0,#0b0d1b 44%,#05060d 100%); }
button { font:inherit; }
.shell { width:min(1180px, 96vw); margin:0 auto; padding:24px 0 42px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:14px; }
.eyebrow { margin:0 0 7px; color:#929abb; font-size:10px; letter-spacing:.15em; }
h1 { margin:0; font-family:'Press Start 2P'; font-size:clamp(16px,2.2vw,26px); line-height:1.35; color:var(--cream); text-shadow:3px 3px 0 #392f67; }
.status-strip { display:flex; border:2px solid var(--line); box-shadow:4px 4px 0 #03040a; background:var(--panel); }
.status-strip span { padding:10px 13px; font-size:11px; border-left:1px solid #39405e; }
.status-strip span:first-child { border:0; }
.status-strip b { color:var(--gold); }
.game-frame { display:grid; grid-template-columns:minmax(0, 640px) minmax(250px,1fr); gap:14px; align-items:start; }
.screen-wrap { position:relative; width:100%; aspect-ratio:4/3; background:#000; border:3px solid #71799e; box-shadow:8px 8px 0 #02030a, 0 0 45px #312a7044; overflow:hidden; image-rendering:pixelated; }
canvas { width:100%; height:100%; display:block; image-rendering:pixelated; }
.scanlines { position:absolute; inset:0; pointer-events:none; opacity:.10; background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px); z-index:15; }
.side-panel { border:2px solid var(--line); background:#0d1020; box-shadow:6px 6px 0 #02030a; min-height:480px; }
.panel-section { padding:16px; border-bottom:1px solid #303651; }
.panel-section:last-child { border:0; }
.panel-section h2 { margin:0 0 9px; font-family:'Press Start 2P'; font-size:12px; line-height:1.6; }
.panel-section p { margin:0; color:#b8bed5; font-size:12px; line-height:1.55; }
.objective { border-left:4px solid var(--gold); }
.companion-head { display:flex; gap:11px; align-items:center; margin-bottom:10px; }
.companion-head h2 { margin:0; color:var(--cyan); }
.orb-small { width:34px;height:34px;border:3px solid #b8fff6;background:#43b8ae;box-shadow:0 0 0 4px #294c63,0 0 18px #64d8cb;transform:rotate(45deg); }
.trust { margin-top:13px; display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; font-size:8px; color:#929abb; }
.trust div { height:7px; background:#272c45; }
.trust i { display:block;width:12%;height:100%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);transition:width .5s; }
.skill-tree { display:flex; flex-direction:column; }
.skill { display:flex; align-items:center; gap:10px; padding:9px; background:#151a2e; border:1px solid #3c4566; }
.skill b { width:32px;height:32px;display:grid;place-items:center;border:2px solid currentColor;color:var(--cyan); }
.skill span { display:flex;flex-direction:column;gap:3px; }
.skill strong { font-size:10px;color:var(--cream); }
.skill small { font-size:9px;color:#8d94ae; }
.skill.locked { opacity:.45;filter:grayscale(.6); }
.skill.new { opacity:1;filter:none;border-color:var(--gold);box-shadow:0 0 18px #f5c04f33; }
.skill.new b { color:var(--gold); }
.connector { height:9px;border-left:2px dotted #4f5674;margin-left:25px; }
.controls { display:flex;flex-wrap:wrap;gap:5px 15px; }
.controls b { color:var(--gold); }
.text-button { margin-left:auto;border:0;background:none;color:#737c9f;font-size:9px;cursor:pointer; }
.window { background:linear-gradient(135deg,#151b3b,#0c1027); border:3px solid #e8dfcb; box-shadow:inset 0 0 0 2px #555f94,5px 5px 0 #050713; }
.hidden { display:none !important; }
.dialogue { position:absolute; z-index:25; left:18px;right:18px;bottom:17px;min-height:124px;padding:18px 160px 17px 20px; }
.dialogue p { margin:0;font-size:14px;line-height:1.55; }
.dialogue .speaker { color:var(--gold);font-family:'Press Start 2P';font-size:10px;margin-bottom:10px; }
.pixel-button { border:2px solid #d9d2bd;background:#222b55;color:var(--cream);padding:10px;cursor:pointer;box-shadow:3px 3px 0 #050611;font-size:10px; }
.pixel-button:hover,.pixel-button:focus { background:#354071;color:#fff;transform:translate(-1px,-1px); }
.dialogue .pixel-button { position:absolute;right:18px;bottom:17px; }
.battle { position:absolute;inset:0;z-index:20;background:linear-gradient(#241c45 0 55%,#211931 55%); }
.battle-scene { height:63%;position:relative;overflow:hidden;background:linear-gradient(180deg,#302359,#713c64 49%,#1d263f 50%,#11182b 100%); }
.battle-scene:before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 28%,#f4cf6888 0 2%,transparent 3%),repeating-linear-gradient(150deg,transparent 0 35px,#7e72bc19 36px 39px); }
.enemy-stage { position:absolute;right:58px;top:52px;width:215px;text-align:center; }
.party-stage { position:absolute;left:44px;bottom:23px;width:250px;text-align:center; }
.nameplate { margin-top:12px;display:flex;justify-content:space-between;background:#080b17;border:2px solid #707aa5;padding:7px 9px;color:#fff;font-size:9px; }
.enemy-sprite { position:relative;margin:auto;width:104px;height:112px;filter:drop-shadow(0 0 11px #bd67d9);animation:hover 1.8s ease-in-out infinite; }
.enemy-sprite:before { content:"";position:absolute;inset:20px 12px 8px;background:#1e183a;border:7px solid #8e58a9;clip-path:polygon(22% 0,78% 0,100% 26%,86% 100%,14% 100%,0 26%); }
.enemy-sprite i { position:absolute;top:49px;width:16px;height:11px;background:#ffda5d;z-index:2;box-shadow:0 0 8px #ffda5d; }
.enemy-sprite i:first-child { left:30px; }.enemy-sprite i:last-child { right:30px; }
.enemy-sprite.scope-mimic:before { border-color:#ef6687;background:#3f1529;clip-path:polygon(14% 0,86% 0,100% 15%,91% 85%,67% 100%,50% 83%,33% 100%,9% 85%,0 15%); }
.hero-battler { display:inline-block;position:relative;width:70px;height:86px;background:#e7bd71;border:6px solid #53344c;clip-path:polygon(25% 0,75% 0,100% 28%,86% 100%,14% 100%,0 28%); }
.hero-battler:before { content:"";position:absolute;left:17px;top:23px;width:26px;height:15px;background:#252244;border-top:6px solid #f1d6a2; }
.hero-battler span { position:absolute;width:44px;height:13px;background:#657ac8;left:7px;bottom:13px; }
.companion-orb { display:inline-block;vertical-align:top;margin:12px 12px 0 0;width:36px;height:36px;background:#64d8cb;border:5px solid #d2fff8;box-shadow:0 0 18px #64d8cb;transform:rotate(45deg);animation:orb 1.5s ease-in-out infinite; }
.battle-hud { height:37%;display:grid;grid-template-columns:1fr 250px;gap:10px;padding:10px;background:#080b17; }
.battle-log,.command-window { padding:14px; }
.battle-log p { margin:0;font-size:12px;line-height:1.6; }
.command-title { margin:0 0 8px;color:var(--gold);font-size:9px; }
.command-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.command-grid button { padding:8px 4px;background:#172044;color:#eee;border:1px solid #737da9;font-size:9px;cursor:pointer; }
.command-grid button:hover { background:#344477;color:#fff; }
.command-grid button:disabled { opacity:.35;cursor:not-allowed; }
.challenge,.level-up { position:absolute;z-index:30;inset:0;background:#040611dd;display:grid;place-items:center;padding:25px; }
.challenge-card,.level-card { width:min(520px,95%);padding:24px; }
.challenge-card h2,.level-card h2 { font-family:'Press Start 2P';font-size:15px;line-height:1.55;margin:0 0 12px;color:var(--gold); }
.challenge-card>p:not(.eyebrow) { font-size:12px;line-height:1.5; }
.challenge-options { display:grid;gap:8px;margin:16px 0; }
.challenge-options button { text-align:left;background:#171d39;border:2px solid #4d567e;color:#d9dded;padding:11px;font-size:10px;cursor:pointer; }
.challenge-options button.correct { border-color:var(--cyan);background:#17443f; }
.challenge-options button.wrong { border-color:var(--rose);background:#461a29; }
.level-up { background:#11152bf2;overflow:hidden; }
.level-card { text-align:center;position:relative;z-index:2;border-color:var(--gold); }
.level-card>p:first-child { color:var(--gold);font-family:'Press Start 2P';font-size:11px; }
.level-card>p { font-size:11px;line-height:1.6; }
.unlock-icon { margin:18px auto;width:66px;height:66px;display:grid;place-items:center;color:#0d1125;background:var(--gold);font-size:34px;transform:rotate(45deg);box-shadow:0 0 35px var(--gold); }
.unlock-icon::first-letter { transform:rotate(-45deg); }
.level-rays { position:absolute;width:700px;height:700px;background:repeating-conic-gradient(#f5c04f22 0 5deg,transparent 5deg 12deg);animation:spin 20s linear infinite; }
.touch-controls { display:none;justify-content:space-between;align-items:center;margin-top:18px;padding:0 15px; }
.dpad { text-align:center; }.dpad button,.action-key { width:52px;height:48px;background:#191f38;color:#eee;border:2px solid #6e789e;box-shadow:3px 3px 0 #03040b; }.dpad>button { display:block;margin:auto; }.dpad div { display:flex; }
.action-key { width:64px;height:64px;border-radius:50%;color:var(--gold);font-family:'Press Start 2P'; }
@keyframes hover { 50%{transform:translateY(-8px)} }
@keyframes orb { 50%{transform:rotate(45deg) translate(-4px,-4px)} }
@keyframes spin { to{transform:rotate(360deg)} }
@media (max-width:900px) { .game-frame{grid-template-columns:1fr}.side-panel{min-height:0}.touch-controls{display:flex}.shell{width:96vw}.topbar{align-items:flex-start;gap:14px}.status-strip{flex-wrap:wrap}.status-strip span{padding:7px;font-size:9px}.dialogue{padding:14px;bottom:8px;left:8px;right:8px}.dialogue .pixel-button{position:static;float:right;margin-top:9px}.battle-hud{grid-template-columns:1fr 42%;gap:5px;padding:5px}.battle-log,.command-window{padding:8px}.enemy-stage{right:4%;top:12px;transform:scale(.8)}.party-stage{left:2%;bottom:4px;transform:scale(.8)} }
@media (max-width:520px) { .topbar{display:block}.status-strip{margin-top:12px}.screen-wrap{aspect-ratio:4/3}.dialogue p{font-size:10px}.dialogue .speaker{font-size:8px}.command-grid button{font-size:7px;padding:6px 2px}.battle-log p{font-size:8px}.nameplate{font-size:7px}.challenge-card{padding:14px}.challenge-card h2{font-size:11px}.side-panel{display:grid;grid-template-columns:1fr}.controls{display:none} }