@font-face {
  font-family: "Tiny5";
  src: url("fonts/Tiny5-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --blue: #23b8ff;
  --blue2: #7ce8ff;
  --orange: #ff7a24;
  --orange2: #ffc266;
  --accent: var(--blue);
  --accent2: var(--blue2);
  --glass: rgba(4, 13, 27, .58);
  --line: rgba(126, 208, 255, .25);
  font-family: "Tiny5";
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #030812; }
body { touch-action: none; color: #eaf8ff; font-family: "Tiny5"; font-synthesis: none; font-smooth: never; -webkit-font-smoothing: none; image-rendering: pixelated; }
button { font: inherit; color: inherit; border-radius: 0; }
strong, b { font-weight: 400; }
.game { position: relative; width: 100%; height: 100%; min-height: 540px; isolation: isolate; background: #030812; --accent: var(--blue); --accent2: var(--blue2); transform-origin: center; }
.game.faction-rebel { --accent: var(--orange); --accent2: var(--orange2); }
#battlefield { position: absolute; inset: 0; width: 100%; height: 100%; }
.scanlines, .vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.scanlines { display: none; }
.vignette { display: none; }
.damage-flash { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: rgba(255, 35, 28, .48); opacity: 0; transition: opacity .08s steps(2, end); }
.damage-flash.hit { opacity: 1; }
.danger-warning { position: absolute; z-index: 10; left: 50%; top: 22%; transform: translateX(-50%); color: #ff5149; font: 400 clamp(25px, 4vw, 42px) "Tiny5"; letter-spacing: .18em; opacity: 0; pointer-events: none; text-shadow: 3px 0 #561813; }
.danger-warning.show { opacity: 1; animation: danger-blink .42s steps(2, end) infinite; }
.attack-warning { position: absolute; z-index: 10; left: 50%; top: 29%; display: grid; justify-items: center; gap: 4px; transform: translate(-50%, -7px); color: #ff5149; opacity: 0; pointer-events: none; transition: opacity .1s steps(2, end), transform .1s steps(2, end); text-shadow: 2px 0 #561813; }
.attack-warning.show { opacity: 1; transform: translate(-50%, 0); animation: incoming-blink .28s steps(2, end) infinite; }
.attack-warning strong { font: 400 clamp(16px, 2.4vw, 24px) "Tiny5"; letter-spacing: .16em; white-space: nowrap; }
.attack-warning span { font: 12px "Tiny5"; letter-spacing: .12em; }
.game.danger { animation: danger-shake .18s steps(2, end) infinite; }
.game.hit-shake { animation: hit-shake .24s steps(3, end); }
@keyframes hit-shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-7px, 4px); } 45% { transform: translate(7px, -4px); } 70% { transform: translate(-4px, 3px); } }
@keyframes danger-shake { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -1px); } }
@keyframes danger-blink { 50% { opacity: .22; } }
@keyframes incoming-blink { 50% { opacity: .48; } }
.top-hud { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; align-items: start; }
.team-card, .campaign-status, .mission-panel, .player-panel, .target-panel { border: 0; background: transparent; clip-path: none; }
.team-card { padding: 8px 12px; min-height: 52px; }
.team-card .team-label { display: block; font-size: 12px; letter-spacing: .12em; opacity: .62; }
.team-card strong { display: block; font: 400 22px/1 "Tiny5"; margin-top: 6px; }
.team-card small { font-size: 12px; opacity: .55; margin-left: 3px; }
.regular-card { color: var(--blue2); }
.rebel-card { text-align: right; color: var(--orange2); }
.campaign-status { padding: 7px 12px 9px; }
.stage-label { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.stage-label span, .stage-label small { font-size: 12px; letter-spacing: .12em; opacity: .55; }
.stage-label strong { font: 400 24px/1 "Tiny5"; color: var(--accent2); text-shadow: 2px 0 rgba(35,184,255,.35); }
.integrity-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .08em; opacity: .8; }
.integrity-row b { font: 400 12px "Tiny5"; color: #fff; }
.integrity-track, .target-health { height: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 4px; }
.integrity-track i, .target-health i { display: block; width: 78%; height: 100%; background: var(--accent); transition: width .25s steps(5, end); }
.circuit-state { margin-top: 4px; text-align: center; color: var(--accent2); font: 11px/1 "Tiny5"; letter-spacing: .08em; opacity: .68; }
.game.core-exposed .circuit-state { color: #ff5f57; opacity: 1; animation: danger-blink .42s steps(2, end) infinite; }
.mission-panel { position: absolute; z-index: 5; top: 94px; left: max(18px, env(safe-area-inset-left)); width: 186px; padding: 0; }
.eyebrow, .mission-panel p, .timer span { display: block; font-size: 12px; letter-spacing: .1em; opacity: .55; }
.mission-panel strong { display: block; font-size: 13px; letter-spacing: .12em; margin: 5px 0; color: var(--accent2); }
.mission-panel p { margin: 0; letter-spacing: .04em; }
.timer { display: flex; justify-content: space-between; align-items: end; margin-top: 8px; padding-top: 0; border: 0; }
.timer b { font: 400 16px "Tiny5"; }
.player-panel { position: absolute; z-index: 5; top: 94px; right: max(18px, env(safe-area-inset-right)); display: flex; gap: 15px; padding: 0; text-align: right; }
.player-panel span { display: block; font-size: 12px; letter-spacing: .1em; opacity: .5; }
.player-panel strong { font: 400 12px "Tiny5"; color: var(--accent2); }
.life-readout { min-width: 74px; }
.life-readout i { display: block; width: 74px; height: 3px; margin-top: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.life-readout b { display: block; width: 100%; height: 100%; background: var(--accent2); transition: width .12s steps(2, end); }
.game.danger .life-readout b { background: #ff5149; }
.target-panel { position: absolute; z-index: 5; top: 42%; right: max(22px, env(safe-area-inset-right)); width: 154px; padding: 0; transition: opacity .2s, transform .2s; }
.target-panel.no-target { opacity: .38; transform: translateX(5px); }
.target-kicker { font-size: 12px; letter-spacing: .1em; color: var(--accent2); }
.target-panel > strong { display: block; font: 400 13px "Tiny5"; margin: 5px 0; }
.target-meta { display: flex; justify-content: space-between; font: 12px "Tiny5"; opacity: .6; }
.target-health { margin: 8px 0 4px; }
.target-panel > span:last-child { display: block; text-align: right; font: 12px "Tiny5"; opacity: .75; }
.reticle { position: absolute; z-index: 4; width: 44px; height: 44px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(1.3); transition: opacity .12s steps(2, end), transform .12s steps(2, end); border: 1px solid var(--accent); }
.reticle.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.reticle.locked { border-color: var(--accent2); }
.reticle span { position: absolute; top: -13px; left: calc(100% + 5px); color: var(--accent2); font: 12px "Tiny5"; letter-spacing: .08em; white-space: nowrap; opacity: 0; }
.reticle.locked span { opacity: 1; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--accent2); }
.reticle::before { width: 12px; height: 1px; left: 15px; top: 21px; }
.reticle::after { width: 1px; height: 12px; left: 21px; top: 15px; }
.reticle i, .reticle b, .reticle em, .reticle strong { position: absolute; width: 6px; height: 6px; border-color: transparent; }
.reticle.locked i, .reticle.locked b, .reticle.locked em, .reticle.locked strong { border-color: #fff; }
.reticle i { left: -3px; top: -3px; border-left: 2px solid; border-top: 2px solid; }
.reticle b { right: -3px; bottom: -3px; border-right: 2px solid; border-bottom: 2px solid; }
.reticle em { right: -3px; top: -3px; border-right: 2px solid; border-top: 2px solid; }
.reticle strong { left: -3px; bottom: -3px; border-left: 2px solid; border-bottom: 2px solid; }
.controls { position: absolute; z-index: 7; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom)); pointer-events: none; }
.action-button { pointer-events: auto; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 0; clip-path: none; border: 1px solid var(--accent2); background: #071522; cursor: pointer; overflow: hidden; }
.action-button:active { transform: translateX(-50%) scale(.94); }
.action-button span { display: block; font-size: 19px; font-weight: 400; letter-spacing: .1em; color: var(--accent2); text-shadow: 2px 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.action-button.mixed-action span { font-size: 13px; letter-spacing: .03em; }
.action-button small { display: block; margin-top: 4px; font: 12px "Tiny5"; letter-spacing: .08em; opacity: .55; }
.action-button i { display: none; }
.weapon-button { left: auto; right: max(24px, env(safe-area-inset-right)); transform: none; }
.item-button { left: max(24px, env(safe-area-inset-left)); right: auto; transform: none; }
.weapon-button:active, .item-button:active { transform: scale(.94); }
.utility-button { left: auto; bottom: 104px; transform: none; display: grid; place-content: center; gap: 4px; padding: 6px 4px; }
.utility-button span, .utility-button strong, .utility-button small { display: block; line-height: 1; }
.utility-button span { font-size: 13px; letter-spacing: .1em; }
.utility-button strong { font: 400 22px "Tiny5"; letter-spacing: .08em; color: #fff; }
.utility-button small { font-size: 12px; letter-spacing: .08em; opacity: .58; }
.utility-button:active { transform: scale(.94); }
.clear-locks-button { right: max(24px, env(safe-area-inset-right)); }
.auto-lock-button { left: max(24px, env(safe-area-inset-left)); }
.evade-button { pointer-events: auto; position: absolute; left: 50%; bottom: 96px; width: 84px; min-height: 38px; transform: translateX(-50%); border: 1px solid #ff5149; background: #150b11; color: #ff8c86; cursor: pointer; }
.evade-button:active:not(:disabled), .evade-button.active { transform: translateX(-50%) scale(.94); background: #40141b; }
.evade-button:disabled { cursor: default; border-color: rgba(255,81,73,.38); color: rgba(255,140,134,.45); }
.evade-button span, .evade-button small { display: block; line-height: 1; }
.evade-button span { font-size: 14px; letter-spacing: .14em; }
.evade-button small { margin-top: 4px; font-size: 11px; letter-spacing: .08em; }
.game.evading::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border: 3px solid rgba(124,232,255,.72); animation: evade-frame .32s steps(3, end); }
@keyframes evade-frame { 0% { opacity: 1; transform: scale(.96); } 100% { opacity: 0; transform: scale(1); } }
.game.barrier .item-button, .game.god .item-button { border-color: #cba7ff; color: #e9dcff; }
.game.god .action-button { box-shadow: 0 0 0 1px #e9dcff, 0 0 14px rgba(203,167,255,.45); }
.item-menu { position: absolute; z-index: 15; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(3,8,18,.82); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s steps(3, end), visibility .16s; }
.item-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.item-menu-panel { width: min(680px, 100%); max-height: min(580px, calc(100vh - 48px)); overflow-y: auto; border: 1px solid var(--accent2); background: #071522; padding: 12px; }
.item-menu-title { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 2px 10px; color: var(--accent2); font-size: 16px; letter-spacing: .12em; border-bottom: 1px solid color-mix(in srgb, var(--accent2) 42%, transparent); }
.item-menu-title small { font: 12px "Tiny5"; opacity: .58; letter-spacing: .1em; }
.item-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-top: 9px; }
.item-option { min-height: 76px; display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; padding: 8px; border: 1px solid color-mix(in srgb, var(--accent2) 35%, transparent); background: #06111d; text-align: left; cursor: pointer; }
.item-option:hover, .item-option.selected { border-color: var(--accent2); background: #0a1d2d; }
.item-option.selecting { animation: item-select .32s steps(2, end) 2; }
.item-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--accent2); color: var(--accent2); font: 16px "Tiny5"; letter-spacing: -.08em; }
.item-option strong { display: block; font: 13px "Tiny5"; letter-spacing: .08em; color: #fff; }
.item-option small { display: block; margin-top: 6px; font: 12px "Tiny5"; letter-spacing: .05em; color: var(--accent2); opacity: .76; }
@keyframes item-select { 50% { background: var(--accent2); color: #03101a; } }
.faction-button { position: absolute; z-index: 7; right: max(18px, env(safe-area-inset-right)); bottom: 165px; padding: 4px; border: 0; background: transparent; font: 12px "Tiny5"; letter-spacing: .1em; opacity: .42; cursor: pointer; }
.debug-button { position: absolute; z-index: 18; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); padding: 6px 8px; border: 1px solid rgba(124,232,255,.62); background: rgba(3,8,18,.84); color: #7ce8ff; font: 12px "Tiny5"; letter-spacing: .1em; cursor: pointer; }
.debug-panel { position: absolute; z-index: 18; top: max(50px, calc(env(safe-area-inset-top) + 40px)); left: max(12px, env(safe-area-inset-left)); display: none; width: min(270px, calc(100vw - 24px)); max-height: calc(100vh - 60px); overflow-y: auto; padding: 10px; border: 1px solid #7ce8ff; background: rgba(3,8,18,.94); color: #dff8ff; }
.debug-panel.open { display: grid; gap: 8px; }
.debug-panel header { display: flex; justify-content: space-between; align-items: center; color: #7ce8ff; font-size: 14px; letter-spacing: .1em; }
.debug-panel header button, .debug-reset { border: 1px solid rgba(124,232,255,.65); background: #071522; color: #7ce8ff; font: 11px "Tiny5"; letter-spacing: .08em; cursor: pointer; }
.debug-panel header button { padding: 3px 5px; }
.debug-panel label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 8px; font: 11px "Tiny5"; letter-spacing: .06em; }
.debug-panel label input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: #7ce8ff; }
.debug-panel label input[type="color"] { width: 38px; height: 22px; padding: 0; border: 1px solid rgba(124,232,255,.65); background: transparent; cursor: pointer; }
.debug-panel output { color: #fff; font-size: 12px; }.debug-reset { min-height: 28px; }
.pc-controls { position: absolute; z-index: 6; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 5px 10px; width: min(390px, 36vw); color: var(--accent2); font: 11px "Tiny5"; letter-spacing: .07em; opacity: .48; pointer-events: none; }
.pc-controls span { white-space: nowrap; }.pc-controls b { color: #fff; font-weight: 400; }
.battle-message { position: absolute; z-index: 8; left: 50%; top: 31%; transform: translate(-50%, -8px); color: var(--accent2); font: 400 13px "Tiny5"; letter-spacing: .16em; text-shadow: 2px 0 color-mix(in srgb, var(--accent) 40%, transparent); opacity: 0; transition: .16s steps(2, end); pointer-events: none; }
.battle-message.show { opacity: 1; transform: translate(-50%, 0); }
.battle-result { position: absolute; z-index: 16; left: 50%; top: 50%; width: min(340px, calc(100% - 40px)); transform: translate(-50%, -46%); padding: 22px; border: 1px solid var(--accent2); background: rgba(3, 8, 18, .94); text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transition: .2s steps(3, end); }
.game.battle-over .battle-result { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
.battle-result > span { display: block; color: var(--accent2); font-size: 12px; letter-spacing: .14em; opacity: .62; }
.battle-result > strong { display: block; margin: 12px 0 7px; color: #fff; font-size: 25px; letter-spacing: .1em; }
.battle-result p { margin: 0 0 18px; color: var(--accent2); font-size: 13px; letter-spacing: .08em; }
.battle-result button { min-height: 42px; padding: 8px 14px; border: 1px solid var(--accent2); background: #071522; color: var(--accent2); cursor: pointer; letter-spacing: .08em; }
.game.battle-over .controls, .game.battle-over .faction-button { pointer-events: none; opacity: .24; }
.intro { position: absolute; z-index: 20; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; background: #030812; transition: opacity .3s steps(4, end), visibility .3s; }
.intro.hidden { opacity: 0; visibility: hidden; }
.intro::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(101,201,255,.12); clip-path: polygon(0 0, 32px 0, 32px 1px, calc(100% - 32px) 1px, calc(100% - 32px) 0, 100% 0, 100% 32px, calc(100% - 1px) 32px, calc(100% - 1px) calc(100% - 32px), 100% calc(100% - 32px), 100% 100%, calc(100% - 32px) 100%, calc(100% - 32px) calc(100% - 1px), 32px calc(100% - 1px), 32px 100%, 0 100%, 0 calc(100% - 32px), 1px calc(100% - 32px), 1px 32px, 0 32px); }
.intro-mark { font: 400 clamp(54px, 9vw, 92px)/.8 "Tiny5"; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px #82ddff; text-shadow: 4px 0 rgba(35,184,255,.24); }
.intro-mark span { font-size: .42em; vertical-align: middle; margin: 0 .15em; -webkit-text-stroke-color: var(--orange2); }
.intro-code { font: 12px "Tiny5"; letter-spacing: .24em; opacity: .52; margin: 18px 0 34px; }
.intro h1 { margin: 0; text-align: center; font-size: clamp(28px, 5vw, 48px); font-weight: 400; letter-spacing: .08em; line-height: 1.18; text-shadow: 4px 0 0 rgba(35,184,255,.15); }
.intro-copy { text-align: center; font-size: 12px; line-height: 1.9; letter-spacing: .1em; opacity: .58; margin: 15px 0 27px; }
.faction-choices { display: flex; gap: 12px; width: min(570px, 100%); }
.faction-choices button { flex: 1; min-height: 90px; border: 1px solid rgba(255,255,255,.15); background: rgba(5,15,28,.72); display: grid; grid-template-columns: 30px 1fr; align-items: center; text-align: left; padding: 12px 15px; cursor: pointer; transition: .2s; }
.faction-choices button:hover { transform: translateY(-3px); background: rgba(10,29,49,.9); }
.faction-choices button:first-child { border-left: 3px solid var(--blue); }.faction-choices button:last-child { border-left: 3px solid var(--orange); }
.faction-choices i { font: 12px "Tiny5"; opacity: .35; }
.faction-choices span strong { display: block; font-size: 17px; letter-spacing: .12em; }
.faction-choices span small { display: block; font: 12px "Tiny5"; letter-spacing: .1em; opacity: .45; margin-top: 5px; }
.faction-choices b { grid-column: 2; font-size: 12px; letter-spacing: .08em; margin-top: 5px; opacity: .7; }
.intro-note { font-size: 12px; opacity: .3; margin-top: 15px; }

@media (max-width: 680px) {
  .game { min-height: 480px; }
  .top-hud { top: max(8px, env(safe-area-inset-top)); width: calc(100% - 16px); grid-template-columns: .8fr 1.4fr .8fr; gap: 4px; }
  .team-card { padding: 7px; }.team-card .team-label { font-size: 12px; letter-spacing: .05em; }.team-card strong { font-size: 17px; }
  .campaign-status { padding-inline: 7px; }.integrity-row span { max-width: 70px; overflow: hidden; white-space: nowrap; }
  .mission-panel { top: 74px; left: 8px; width: 145px; padding: 9px 10px; }.mission-panel .eyebrow { display: none; }.mission-panel strong { font-size: 12px; }.timer { margin-top: 8px; }
  .player-panel { top: 74px; right: 8px; gap: 7px; padding: 8px; }.player-panel div:first-child { display: none; }
  .target-panel { top: 31%; right: 8px; width: 126px; padding: 8px 10px; }
  .action-button { width: 72px; height: 72px; }.action-button span { font-size: 15px; }.action-button small { font-size: 12px; }.weapon-button { right: 8px; }.item-button { left: 8px; }.utility-button { bottom: 90px; }.utility-button strong { font-size: 20px; }.clear-locks-button { right: 8px; }.auto-lock-button { left: 8px; }.evade-button { bottom: 82px; width: 72px; min-height: 34px; }
  .item-menu { padding: 12px; }.item-list { grid-template-columns: 1fr; }.item-option { min-height: 68px; }
  .faction-button { right: 8px; bottom: 150px; }.debug-button { left: 8px; top: 8px; }.debug-panel { top: 44px; left: 8px; width: min(270px, calc(100vw - 16px)); }
  .pc-controls { display: none; }
  .intro { justify-content: center; }.intro-code { margin-bottom: 24px; }.faction-choices { flex-direction: column; width: min(330px, 100%); gap: 8px; }.faction-choices button { min-height: 72px; }
}
@media (max-height: 570px) {
  .mission-panel { display: none; }.target-panel { top: 25%; }.controls { bottom: 8px; }.action-button { width: 72px; height: 72px; }.item-menu-panel { max-height: calc(100vh - 24px); }.faction-button { bottom: 150px; }
  .intro-code { margin: 10px 0 14px; }.intro-copy { margin: 8px 0 12px; }.faction-choices button { min-height: 62px; }
  .faction-button { bottom: 150px; }
}