*{box-sizing:border-box} :root{--bg:#18232a;--panel:#26353c;--line:#52636a;--text:#e8e3d4;--muted:#a7b0a9;--red:#b95d4d;--gold:#e0bd72;--mint:#9ac5a5}
html,body{margin:0;background:#141e24;color:var(--text);font-family:Arial,sans-serif}body{background:linear-gradient(#263840,#141e24 65%)}.app{max-width:1100px;margin:auto;padding:15px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #52636a;padding:5px 0 13px}.eyebrow{font-size:10px;letter-spacing:1.6px;color:#a5c5ad}h1{font-size:clamp(21px,4vw,30px);letter-spacing:2px;margin:5px 0}h1 span{color:#d17a62}.status{font-size:9px;letter-spacing:1px;color:#c4c8b9}.status i,.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9ac5a5;margin-right:6px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 0 20px}.stats div,.panel,.mission{background:var(--panel);border:2px solid var(--line);box-shadow:inset 0 0 0 2px #1d2a30;padding:9px 12px}.stats small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.4px}.stats b{display:block;color:var(--gold);font-size:19px;margin-top:4px}
.titleline{display:flex;justify-content:space-between;align-items:end;margin-bottom:9px}h2{font-size:clamp(15px,3vw,21px);margin:4px 0}.titleline>span{font-size:9px;color:#b5c0b4;letter-spacing:1.2px;border:1px solid var(--line);padding:6px}
.gameframe{position:relative;border:4px solid #7b8b7f;background:#111b20;box-shadow:0 5px 0 #0d1519}.gameframe canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:pan-y;background:#0d171c;outline:1px solid #819087;outline-offset:-7px}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:active{filter:brightness(1.18);transform:translateY(1px)}
.panel,.mission,.stats div{background-image:linear-gradient(135deg,rgba(255,255,255,.018),transparent 45%)}.hint{position:absolute;bottom:7px;left:8px;background:#142027e8;border:1px solid #63716b;padding:5px 7px;font-size:9px;color:#d1d4c6}
.controls{display:flex;gap:10px;justify-content:space-between;padding:11px 0}.pad{display:flex;gap:7px;flex:1}.pad button,.primary,.actions button{border:2px solid #64746f;background:#34464b;color:#f2eddb;font-weight:bold;min-height:40px;box-shadow:inset 0 -3px #202e32;touch-action:none}.pad button{flex:1;max-width:65px}.primary{background:#814d43;border-color:#c17a63;padding:0 16px;font-size:10px;letter-spacing:1px}kbd{border:1px solid #e2b49a;padding:2px 5px;margin-left:7px}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.panelhead{font-size:10px;letter-spacing:1.5px;color:#a5c5ad;border-bottom:1px solid #52636a;padding-bottom:8px;display:flex;justify-content:space-between}.panel h3{font-size:15px;margin:11px 0 5px}.panel p,.mission p{font-size:12px;line-height:1.5;color:#c0c8bd;margin:6px 0 10px}.actions{display:flex;gap:7px}.actions button{min-height:30px;padding:0 11px;font-size:9px}.red{color:#d17a62}.panel time{color:var(--gold);margin-right:7px}.panel #log{max-height:105px;overflow:auto}.panel #log p{font-size:11px;margin:7px 0}.mission{margin-top:10px}.mission b{display:block;margin-top:10px;font-size:13px}footer{text-align:center;color:#85958d;font-size:9px;letter-spacing:1px;padding:17px 0 4px}
@media(max-width:640px){.app{padding:10px}.stats{gap:5px}.stats div{padding:7px}.stats b{font-size:16px}.columns{grid-template-columns:1fr}.primary{padding:0 8px;font-size:9px}.hint{font-size:8px}.titleline>span{font-size:8px}}