@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root { font-family: 'Press Start 2P', monospace; color: #f5f0df; background: #090d13; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 1100px; overflow: hidden; background: #090d13; }
.game-shell { position: relative; width: 100vw; height: 100vh; min-height: 620px; overflow: hidden; background: #111925; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.hud { position: absolute; inset: 0; pointer-events: none; padding: 28px 34px; text-shadow: 3px 3px #111923; }
.brand { color: #f5d34f; font-size: 22px; letter-spacing: 2px; }.brand-mark { color:#ff704c; margin-right: 8px; }.brand small { color:#8a94a6; font-size: 8px; margin-left: 14px; }
.stage-card { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); color:#8a94a6; text-align:center; font-size:9px; }.stage-card strong { display:block; color:#f5f0df; font-size:12px; margin-top:9px; }
.status-grid { position:absolute; right:34px; top:28px; display:flex; gap:12px; }.panel { background:rgba(10,17,27,.8); border:1px solid #4b586b; padding:13px 15px; box-shadow: 5px 5px rgba(0,0,0,.2); }.panel span,.inventory-panel>span { color:#8a94a6; display:block; font-size:8px; margin-bottom:9px; }.panel strong { font-size:11px; }.hp-panel { width:190px; }.meter { height:8px; background:#283240; margin-top:10px; }.meter i { display:block; height:100%; width:100%; background:#e95757; transition:width .2s; }.session-panel { width:150px; }.session-panel em { color:#8a94a6; display:block; font-size:7px; font-style:normal; margin-top:8px; }.inventory-panel { position:absolute; right:34px; bottom:73px; width:300px; }.inventory { display:flex; gap:8px; }.slot { width:48px; height:48px; display:grid; place-items:center; border:1px solid #4b586b; background:#182331; color:#f5d34f; font-size:15px; }.slot small { color:#8a94a6; font-size:7px; }.help { position:absolute; bottom:29px; left:34px; color:#8290a1; font-size:8px; word-spacing:5px; }.help b { color:#f5d34f; margin-left:10px; }.crosshair { position:absolute; width:32px; height:32px; pointer-events:none; transform:translate(-50%,-50%); }.crosshair i,.crosshair b,.crosshair em,.crosshair strong { position:absolute; background:#ff704c; display:block; }.crosshair i,.crosshair b { width:2px;height:10px;left:15px; }.crosshair i {top:0}.crosshair b{bottom:0}.crosshair em,.crosshair strong{height:2px;width:10px;top:15px}.crosshair em{left:0}.crosshair strong{right:0}.toast { position:absolute; left:50%; top:66%; transform:translate(-50%,-50%); color:#f5d34f; opacity:0; font-size:14px; transition:opacity .2s; }.toast.show{opacity:1}