:root {
  --bg: #07080c; --fg: #e8ebf2; --dim: #8a8f98; --accent: #7fdfff;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--mono); overflow: hidden; }
canvas#game { position: fixed; inset: 0; display: block; }

#hud { position: fixed; top: 0; left: 0; right: 0; height: 60px; display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 10px; pointer-events: none; font-size: 12px; line-height: 1.25; }
#hud .panel { color: var(--c); min-width: 120px; }
#hud .panel.right { text-align: right; }
#hud .name { font-weight: 700; letter-spacing: .08em; }
#hud .lives { font-size: 13px; letter-spacing: .1em; }
#hud .rounds { color: var(--fg); font-size: 10px; letter-spacing: .15em; }
#hud .gear { color: var(--dim); font-size: 10px; }
#hud .gear i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 2px; vertical-align: middle; }
#hud .feed { position: absolute; left: 0; right: 0; top: 62px; text-align: center; font-size: 11px; letter-spacing: .08em; opacity: .9; white-space: nowrap; }
#hud .panel.mid { text-align: center; }

#menu { position: fixed; top: 62px; right: 10px; background: transparent; color: var(--dim); border: 1px solid #2a2f3a; border-radius: 6px; font: 11px var(--mono); padding: 3px 8px; cursor: pointer; z-index: 5; }
#menu:hover { color: var(--fg); }

#banner { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; background: rgba(7,8,12,.35); }
#banner h1 { margin: 0; font-size: clamp(28px, 6vw, 56px); letter-spacing: .2em; text-shadow: 0 0 24px rgba(127,223,255,.5); }
#banner p { margin: 8px 0 0; color: var(--dim); letter-spacing: .1em; }
#banner[hidden] { display: none; }

#start { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; background: var(--bg); z-index: 10; padding: 24px; }
#start[hidden] { display: none; }
#start h1 { font-size: clamp(36px, 9vw, 72px); letter-spacing: .25em; margin: 0 0 4px; }
#start h1 span { color: var(--accent); }
#start .tag { color: var(--dim); margin: 0 0 28px; letter-spacing: .1em; font-size: 13px; }
#start .modes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#start button { background: #0f1219; color: var(--fg); border: 1px solid #2a2f3a; border-radius: 10px; padding: 16px 22px; font: 15px var(--mono); letter-spacing: .1em; cursor: pointer; min-width: 160px; }
#start button.sel, #start button:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
#start button small { display: block; color: var(--dim); font-size: 11px; margin-top: 6px; letter-spacing: 0; }
#start .links { margin-top: 28px; font-size: 12px; }
#start a { color: var(--accent); }
#start .keys { margin-top: 20px; color: var(--dim); font-size: 11px; line-height: 1.7; }
#start .keys b { color: var(--fg); font-weight: 600; }
body.touch #start .keys { display: none; }

#touch { position: fixed; left: 0; right: 0; bottom: 0; height: 140px; display: none; justify-content: space-between; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); touch-action: none; user-select: none; -webkit-user-select: none; z-index: 4; }
body.touch #touch { display: flex; }
#touch .grp { display: flex; gap: 12px; align-items: flex-end; }
#touch [data-btn] { width: 84px; height: 84px; border-radius: 50%; border: 2px solid #2a2f3a; background: rgba(15,18,25,.7); color: var(--fg); display: grid; place-items: center; font: 700 22px var(--mono); letter-spacing: .05em; }
#touch [data-btn="thrust"] { width: 96px; height: 96px; border-color: #ffb347; color: #ffb347; }
#touch [data-btn="fire"] { width: 110px; height: 110px; border-color: var(--accent); color: var(--accent); margin-bottom: 20px; }
#touch [data-btn]:active { background: rgba(127,223,255,.25); }
@media (max-width: 720px) { #touch [data-btn] { width: 70px; height: 70px; } #touch [data-btn="thrust"] { width: 80px; height: 80px; } #touch [data-btn="fire"] { width: 92px; height: 92px; } }

/* Landscape phones: controls float at the sides so the arena keeps its height. */
@media (orientation: landscape) and (max-height: 500px) {
  body.touch #touch { height: auto; top: 60px; bottom: 0; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); align-items: flex-end; pointer-events: none; }
  body.touch #touch .grp { pointer-events: auto; flex-direction: column; align-items: center; gap: 10px; }
  body.touch #touch [data-btn] { width: 64px; height: 64px; font-size: 18px; }
  body.touch #touch [data-btn="thrust"] { width: 72px; height: 72px; }
  body.touch #touch [data-btn="fire"] { width: 84px; height: 84px; margin-bottom: 0; }
  body.touch #touch .grp:first-child { flex-direction: row; }
}

/* Hack terminal */
#term { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(7,8,12,.72); z-index: 20; padding: 12px; }
#term[hidden] { display: none; }
.term-box { width: min(560px, 100%); background: #0a0c12; border: 1px solid #2a2f3a; border-radius: 12px; box-shadow: 0 0 0 1px #000, 0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(127,223,255,.12); overflow: hidden; font-size: 14px; }
.term-bar { display: flex; justify-content: space-between; padding: 8px 14px; background: #10131b; color: var(--dim); font-size: 12px; letter-spacing: .05em; }
.term-cat { color: var(--accent); text-transform: uppercase; letter-spacing: .15em; }
.term-out { margin: 0; padding: 12px 16px 0; color: #9aa3b5; font: 12px/1.5 var(--mono); white-space: pre-wrap; }
.term-q { padding: 12px 16px; font-size: 16px; line-height: 1.4; color: var(--fg); }
.term-q code, .term-choices code, .term-msg code { color: var(--accent); font-family: inherit; }
.term-choices { display: grid; gap: 8px; padding: 0 16px 14px; }
.term-choices button { display: flex; align-items: center; gap: 12px; text-align: left; background: #0f1219; color: var(--fg); border: 1px solid #2a2f3a; border-radius: 8px; padding: 12px 14px; font: 14px/1.3 var(--mono); cursor: pointer; }
.term-choices button:hover, .term-choices button:focus-visible { border-color: var(--accent); outline: none; }
.term-choices button kbd { flex: none; width: 24px; height: 24px; border-radius: 6px; background: #1a1f2b; color: var(--dim); display: grid; place-items: center; font: 12px var(--mono); }
.term-choices button.right { border-color: #3bff6a; background: rgba(59,255,106,.1); }
.term-choices button.wrong { border-color: #ff3b3b; background: rgba(255,59,59,.12); }
.term-choices button:disabled { cursor: default; }
.term-foot { padding: 0 16px 14px; }
.term-timer { height: 3px; background: #1a1f2b; border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.term-timer i { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform .05s linear; }
.term-msg { min-height: 1.4em; font-size: 12px; line-height: 1.4; color: var(--dim); }
.term-msg.ok { color: #3bff6a; } .term-msg.bad { color: #ff7b7b; }
@media (max-width: 480px) { .term-q { font-size: 15px; } .term-choices button { padding: 11px 12px; } }