/* style.css — all styling */
:root {
  color-scheme: dark;
  --bg: #070b16;
  --panel: rgba(15, 24, 44, .9);
  --panel-2: rgba(20, 33, 59, .8);
  --line: rgba(139, 180, 232, .2);
  --text: #edf5ff;
  --muted: #8295b4;
  --cyan: #62ddff;
  --blue: #6094ff;
  --amber: #f2bb61;
  --danger: #f2687d;
  --shadow: 0 20px 50px rgba(0, 0, 0, .28);
}
@media (prefers-color-scheme: light) {
  :root { --bg:#e9eff8; --panel:rgba(255,255,255,.9); --panel-2:#f5f8fd; --line:rgba(40,75,120,.18); --text:#13233d; --muted:#62718a; }
}
html[data-theme="dark"] { color-scheme: dark; --bg:#070b16; --panel:rgba(15,24,44,.9); --panel-2:rgba(20,33,59,.8); --line:rgba(139,180,232,.2); --text:#edf5ff; --muted:#8295b4; }
html[data-theme="light"] { color-scheme: light; --bg:#e9eff8; --panel:rgba(255,255,255,.92); --panel-2:#f5f8fd; --line:rgba(40,75,120,.18); --text:#13233d; --muted:#62718a; }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; width:100%; min-height:100%; overflow:hidden; }
body { background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shell { min-height:100dvh; height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:14px; padding:clamp(14px,2vw,28px); padding-bottom:calc(56px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 50% 20%, rgba(50,91,160,.18), transparent 45%), var(--bg); }
.topbar { display:flex; justify-content:space-between; align-items:center; min-width:0; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand h1 { margin:2px 0 0; font-size:clamp(20px,2.3vw,30px); letter-spacing:-.04em; line-height:1; }
.eyebrow,.panel-title,.sector { margin:0; font-size:10px; letter-spacing:.16em; color:var(--muted); font-weight:800; }
.brand-mark { position:relative; display:block; width:32px; height:32px; transform:rotate(45deg); }
.brand-mark:before,.brand-mark:after,.brand-mark i,.brand-mark b,.brand-mark em { content:""; position:absolute; display:block; border-radius:2px; }
.brand-mark:before { inset:5px; border:2px solid var(--cyan); }
.brand-mark:after { width:10px; height:10px; left:11px; top:11px; background:var(--cyan); box-shadow:0 0 16px var(--cyan); }
.brand-mark i { width:2px; height:32px; left:15px; top:0; background:var(--blue); }
.brand-mark b { width:32px; height:2px; left:0; top:15px; background:var(--blue); }
.brand-mark em { width:4px; height:4px; background:var(--amber); left:1px; top:1px; }
.mission-state { display:flex; align-items:center; gap:8px; color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.12em; white-space:nowrap; }
.status-dot,.pulse { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.status-dot.danger { background:var(--danger); box-shadow:0 0 12px var(--danger); }
.game-layout { display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr) minmax(150px,220px); gap:14px; min-height:0; }
.side-panel,.stage-wrap { min-width:0; min-height:0; border:1px solid var(--line); background:var(--panel); border-radius:16px; box-shadow:var(--shadow); }
.side-panel { padding:18px; display:flex; flex-direction:column; gap:20px; }
.panel-title { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; }
.panel-title span { color:var(--cyan); font-size:9px; }
.metric { display:grid; gap:8px; }
.metric-label { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--muted); font-weight:800; }
.metric-label strong { color:var(--text); }
.bar { height:7px; background:rgba(127,153,190,.18); border-radius:9px; overflow:hidden; }
.bar i { display:block; height:100%; width:100%; border-radius:inherit; transition:width .2s ease; }
.bar.hull i { background:linear-gradient(90deg,#d74f6e,var(--danger)); }
.bar.shield i { background:linear-gradient(90deg,#367bff,var(--cyan)); }
.telemetry-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid var(--line); background:var(--line); }
.telemetry-grid div { background:var(--panel-2); padding:12px 9px; }
.telemetry-grid small,.readout span { display:block; color:var(--muted); font-size:9px; letter-spacing:.1em; font-weight:800; }
.telemetry-grid strong { display:block; margin-top:4px; font:700 16px ui-monospace,SFMono-Regular,Consolas,monospace; }
.readout { border-top:1px solid var(--line); padding-top:12px; }
.readout b { font:700 17px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--cyan); display:inline-block; margin-top:4px; }
.readout b.threat { color:var(--amber); font-size:12px; }
.stage-wrap { display:grid; grid-template-rows:auto minmax(0,1fr); padding:12px; background:rgba(4,9,19,.65); }
.stage-head { display:flex; justify-content:space-between; padding:2px 4px 10px; font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted); }
.stage { position:relative; min-height:0; overflow:hidden; border:1px solid rgba(103,160,225,.3); border-radius:11px; background:#050914; }
#spaceCanvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.reticle { position:absolute; width:25px; height:25px; margin:-12px 0 0 -12px; border:1px solid var(--cyan); border-radius:50%; box-shadow:0 0 12px rgba(98,221,255,.65); pointer-events:none; }
.reticle:before,.reticle:after { content:""; position:absolute; background:var(--cyan); }
.reticle:before { width:5px; height:1px; left:9px; top:11px; }
.reticle:after { height:5px; width:1px; left:11px; top:9px; }
.hint { position:absolute; left:14px; bottom:12px; color:rgba(208,229,255,.55); font-size:9px; letter-spacing:.08em; pointer-events:none; }
.center-message { position:absolute; inset:0; display:grid; place-content:center; text-align:center; background:rgba(5,10,22,.6); backdrop-filter:blur(3px); }
.center-message strong { color:var(--cyan); font-size:clamp(18px,3vw,30px); letter-spacing:.12em; }
.center-message span { color:var(--muted); font-size:11px; margin-top:7px; }
.hidden { display:none !important; }
.brief { color:var(--muted); line-height:1.55; font-size:12px; margin:0; }
.objective { display:flex; gap:10px; align-items:center; padding:11px; border:1px solid rgba(242,187,97,.28); background:rgba(242,187,97,.08); border-radius:10px; }
.objective-icon { width:25px; height:25px; border:2px solid var(--amber); transform:rotate(45deg); position:relative; flex:none; }
.objective-icon:after { content:""; position:absolute; inset:5px; background:var(--amber); }
.objective small { display:block; color:var(--amber); font-size:8px; letter-spacing:.1em; font-weight:800; }
.objective strong { font-size:12px; }
.controls-list { display:grid; gap:11px; color:var(--muted); font-size:11px; }
.controls-list div { display:flex; align-items:center; gap:8px; }
kbd { min-width:49px; text-align:center; padding:4px 3px; border:1px solid var(--line); border-radius:4px; color:var(--text); font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--panel-2); }
.secondary-btn,.touch-btn,.fire-btn,.missile-btn { min-height:44px; border-radius:8px; font:800 10px system-ui,sans-serif; letter-spacing:.08em; cursor:pointer; transition:transform .15s,filter .15s; }
button:hover { filter:brightness(1.16); transform:translateY(-1px); }
button:active { transform:translateY(1px); }
button:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.secondary-btn { margin-top:auto; color:var(--muted); background:transparent; border:1px solid var(--line); }
.control-deck { display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:0; }
.deck-status,.deck-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:9px; letter-spacing:.1em; white-space:nowrap; }
.touch-controls { display:flex; gap:9px; }
.touch-btn,.fire-btn,.missile-btn { padding:0 18px; color:#06101d; border:0; }
.touch-btn { background:#b6c5dc; }
.fire-btn { background:var(--cyan); box-shadow:0 0 17px rgba(98,221,255,.2); }
.missile-btn { background:var(--amber); }
@media (max-width:800px) {
  .shell { gap:9px; padding:12px; padding-bottom:calc(56px + env(safe-area-inset-bottom)); }
  .game-layout { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .stage-wrap { grid-row:1; }
  .side-panel { display:none; }
  .control-deck { flex-wrap:wrap; justify-content:center; }
  .deck-status { order:3; width:100%; justify-content:center; }
  .deck-note { display:none; }
  .touch-controls { width:100%; }
  .touch-controls button { flex:1; padding:0 6px; }
}
@media (max-height:620px) and (orientation:landscape) {
  .shell { padding:8px 12px; gap:7px; }
  .topbar { min-height:32px; }
  .game-layout { grid-template-columns:minmax(130px,180px) minmax(0,1fr); }
  .right-panel { display:none; }
  .side-panel { padding:12px; gap:10px; }
  .control-deck { min-height:44px; }
  .deck-status { display:none; }
}