:root {
  color-scheme: dark;
  --bg: #061015;
  --panel: #0a171d;
  --panel-2: #0f222a;
  --line: #1f8794;
  --line-soft: #174f58;
  --text: #e4fbff;
  --muted: #8faeb4;
  --accent: #5fe8f3;
  --warn: #ffd36b;
  --danger: #ff7e77;
  --good: #78efae;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% 0, #10262f 0, var(--bg) 48%, #020609 100%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { padding: 18px; }
button, input, select { font: inherit; }
.shell { width: min(1120px, 100%); margin: 0 auto; }
.masthead { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 0 12px; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:.72rem; letter-spacing:.14em; font-weight:800; }
h1 { margin:0; font-size:clamp(1.8rem, 4vw, 2.9rem); line-height:1; letter-spacing:-.03em; }
.prototype-badge { border:1px solid var(--line); background:#09161b; padding:8px 11px; border-radius:6px; color:var(--muted); font-weight:700; font-size:.8rem; }
.game-card { border:1px solid var(--line-soft); background:linear-gradient(180deg, rgba(12,33,40,.98), rgba(5,13,17,.98)); border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.36); overflow:hidden; }
.status-strip { min-height:40px; display:flex; align-items:center; gap:clamp(12px,3vw,34px); padding:9px 14px; border-bottom:1px solid var(--line-soft); color:var(--muted); font-size:.78rem; letter-spacing:.06em; flex-wrap:wrap; }
.status-strip b { color:var(--accent); font-size:.68rem; margin-right:4px; }
.sector-name { color:var(--text); font-weight:750; margin-left:3px; }
.viewport-wrap { position:relative; aspect-ratio:16/9; background:#020609; }
#game { display:block; width:100%; height:100%; outline:none; background:#020609; }
#game:focus-visible { box-shadow:inset 0 0 0 2px var(--accent); }
.message-card { position:absolute; left:50%; top:11%; transform:translateX(-50%); width:min(620px, calc(100% - 32px)); padding:12px 16px; border:1px solid rgba(95,232,243,.32); background:rgba(2,9,12,.86);  border-radius:8px; text-align:center; pointer-events:none; transition:opacity .2s ease; }
.message-card strong { display:block; color:var(--accent); text-transform:uppercase; letter-spacing:.09em; font-size:.83rem; margin-bottom:4px; }
.message-card span { color:var(--text); font-size:.88rem; }
.message-card.hidden { opacity:0; }
.controls-row { display:flex; gap:9px; padding:11px 12px; border-top:1px solid var(--line-soft); flex-wrap:wrap; }
button { border:1px solid var(--line); background:#0b2229; color:var(--text); padding:9px 13px; border-radius:6px; font-weight:750; cursor:pointer; }
button:hover { background:#11333d; }
button:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }



.guide { margin-top:12px; border:1px solid var(--line-soft); border-radius:10px; background:rgba(6,18,23,.93); overflow:hidden; }
.guide summary { cursor:pointer; padding:12px 14px; font-weight:800; color:var(--accent); }
.guide-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border-top:1px solid var(--line-soft); background:var(--line-soft); }
.guide-grid section { background:#07141a; padding:13px 14px; }
.guide-grid h2 { margin:0 0 6px; font-size:.88rem; }
.guide-grid p { margin:0; color:var(--muted); font-size:.79rem; line-height:1.45; }
kbd { border:1px solid #31515a; border-bottom-width:2px; background:#0b1d23; padding:1px 5px; border-radius:4px; color:var(--text); }
.footer-note { color:#718e95; font-size:.75rem; line-height:1.5; margin:10px 4px 0; }
@media (max-width:780px) {
  body { padding:10px; }
  .guide-grid { grid-template-columns:1fr 1fr; }
  .status-strip { gap:9px 15px; }
}
@media (max-width:520px) {
  .guide-grid { grid-template-columns:1fr; }
  .masthead { align-items:center; }
  .prototype-badge { display:none; }
  .message-card { top:7%; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}
.cannon-ready { color: var(--good); font-weight: 850; }
.cannon-reload { color: var(--warn); font-weight: 800; font-variant-numeric: tabular-nums; }

#hud-integrity.integrity-hit { color:#ff9a86; font-weight:900; }

/* v1.0.0 standalone polish */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.status-strip { font-variant-numeric: tabular-nums; }
.message-card { box-shadow:0 10px 28px rgba(0,0,0,.30); }
.message-stats { margin-top:10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.message-stats[hidden] { display:none; }
.message-stat { border:1px solid rgba(95,232,243,.20); background:rgba(8,23,28,.78); border-radius:6px; padding:6px 7px; min-width:0; }
.message-stat b { display:block; color:var(--muted); font-size:.61rem; letter-spacing:.09em; text-transform:uppercase; margin:0 0 2px; }
.message-stat span { display:block; color:var(--text); font-size:.80rem; font-weight:800; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.combat-toast { position:absolute; left:18px; bottom:18px; max-width:min(430px,calc(100% - 36px)); padding:8px 11px; border:1px solid rgba(229,235,231,.35); border-left-width:4px; border-radius:6px; background:rgba(2,8,10,.88); color:var(--text); font:800 .74rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.05em; pointer-events:none; text-transform:uppercase; }
.combat-toast[data-kind="good"] { border-left-color:var(--good); }
.combat-toast[data-kind="warn"] { border-left-color:var(--warn); }
.combat-toast[data-kind="danger"] { border-left-color:var(--danger); }
button { min-height:42px; }
button[aria-pressed="true"] { border-color:var(--warn); color:var(--warn); }
@media (max-width:620px) { .message-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .combat-toast { left:10px; bottom:10px; } }
@media (prefers-contrast: more) {
  .game-card, .guide, button, .message-card, .message-stat { border-color:currentColor; }
  .status-strip, .guide-grid p, .footer-note { color:#c7dfe3; }
  #game:focus-visible { box-shadow:inset 0 0 0 3px #fff; }
}