:root {
  color-scheme: dark;
  --ink: #eef6ef;
  --muted: #8d9b98;
  --dim: #4c5755;
  --line: rgba(183, 211, 198, .18);
  --panel: rgba(7, 12, 12, .82);
  --green: #a9efbd;
  --green-bright: #c8ffd2;
  --amber: #e9c871;
  --red: #ef665d;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #060909; }
body { color: var(--ink); font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif; letter-spacing: .055em; }
button, input { font: inherit; }
button { color: inherit; }
#game { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }

#world-grade, #damage-flash, #scanlines { position: fixed; inset: 0; pointer-events: none; }
#world-grade { z-index: 2; background: radial-gradient(circle at 50% 44%, transparent 32%, rgba(2, 5, 5, .28) 76%, rgba(0, 0, 0, .78) 120%), linear-gradient(180deg, rgba(16, 31, 28, .05), rgba(15, 35, 28, .11)); mix-blend-mode: multiply; }
#scanlines { z-index: 4; opacity: .12; background: repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(190, 255, 218, .11) 4px); }
#damage-flash { z-index: 5; opacity: 0; background: radial-gradient(circle, transparent 24%, rgba(180, 14, 8, .16) 62%, rgba(120, 0, 0, .78)); transition: opacity .16s; }
#damage-flash.on { opacity: 1; }

.hidden { display: none !important; }
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; text-shadow: 0 2px 3px #000; }
.topbar { position: absolute; left: 34px; right: 34px; top: 24px; height: 44px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 900; letter-spacing: .19em; }
.wordmark-icon { color: var(--green); font-weight: 900; }
.wordmark small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .32em; }
.connection-chip { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 7px 12px; border: 1px solid var(--line); background: rgba(5, 10, 10, .5); font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.connection-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px currentColor; }
.connection-chip.online i { background: var(--green); }
.connection-chip.offline i { background: var(--amber); }
.mission-clock { text-align: right; }
.mission-clock small { display: block; color: var(--muted); font-size: 8px; }
.mission-clock strong { display: block; margin-top: 2px; font-family: Consolas, monospace; font-size: 17px; letter-spacing: .13em; }

.objective-card { position: absolute; left: 34px; top: 104px; width: 326px; padding: 15px 18px 13px; background: linear-gradient(90deg, rgba(5, 11, 10, .88), rgba(5, 11, 10, .35)); border-left: 2px solid var(--green); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.eyebrow { color: var(--green); font-size: 8px; font-weight: 900; letter-spacing: .25em; }
.objective-card h2 { margin: 6px 0 4px; font-size: 15px; letter-spacing: .12em; }
.objective-card p { margin: 0 0 12px; color: #a9b5b0; font-size: 9px; line-height: 1.45; letter-spacing: .06em; }
.objective-progress { width: 100%; height: 2px; background: rgba(255,255,255,.11); }
.objective-progress i { display: block; width: 25%; height: 100%; background: var(--green); box-shadow: 0 0 9px var(--green); transition: width .4s; }
.objective-meta { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font: 8px Consolas, monospace; }

.tactical-panel { position: absolute; top: 96px; right: 34px; width: 220px; }
.panel-heading { height: 25px; padding: 0 5px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 8px; font-weight: 800; }
.panel-heading small { color: var(--green); }
#minimap { width: 220px; height: 220px; background: rgba(4, 9, 9, .73); border: 1px solid var(--line); border-top: 0; }
.map-legend { display: flex; justify-content: flex-end; gap: 12px; padding-top: 6px; color: var(--muted); font-size: 7px; }
.map-legend span { display: flex; align-items: center; gap: 4px; }
.map-legend i { width: 5px; height: 5px; border-radius: 50%; }
.map-legend .ally { background: var(--green); }.map-legend .hostile { background: var(--red); }

.squad-roster { position: absolute; left: 34px; bottom: 128px; width: 220px; display: grid; gap: 5px; }
.roster-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; padding: 5px 7px; background: linear-gradient(90deg, rgba(7, 12, 12, .62), transparent); font-size: 8px; }
.roster-row i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.roster-row.down i { background: var(--red); }
.roster-row small { color: var(--muted); font: 8px Consolas, monospace; }
.feed { position: absolute; right: 34px; top: 360px; width: 280px; text-align: right; display: grid; gap: 5px; }
.feed-line { color: #c6d0cc; font-size: 8px; animation: feed-in .25s ease-out; }
.feed-line b { color: var(--green); }
@keyframes feed-in { from { opacity: 0; transform: translateX(8px); } }

.objective-marker { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; place-items: center; color: var(--green); font: 9px Consolas, monospace; }
.objective-marker i { width: 17px; height: 17px; border: 1px solid currentColor; transform: rotate(45deg); margin-bottom: 9px; box-shadow: inset 0 0 8px rgba(169, 239, 189, .2), 0 0 10px rgba(169, 239, 189, .25); }
.objective-marker i::after { content: ""; display: block; width: 3px; height: 3px; margin: 6px; background: currentColor; }
.interaction { position: absolute; left: 50%; bottom: 155px; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; padding: 9px 14px; background: rgba(5, 10, 10, .82); border: 1px solid var(--line); }
.interaction-key { width: 28px; height: 28px; display: grid; place-items: center; color: #08100d; background: var(--green); font-weight: 900; text-shadow: none; }
.interaction strong { font-size: 8px; letter-spacing: .16em; }
.hold-track { width: 145px; height: 2px; margin-top: 5px; background: rgba(255,255,255,.14); }
.hold-track i { display: block; height: 100%; width: 0; background: var(--green); box-shadow: 0 0 9px var(--green); }

.crosshair, .hitmarker { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
.crosshair i { position: absolute; background: rgba(230, 244, 234, .85); box-shadow: 0 0 2px #000; transition: transform .08s; }
.crosshair i:nth-child(1) { width: 1px; height: 7px; left: 20px; top: 3px; }
.crosshair i:nth-child(2) { width: 1px; height: 7px; left: 20px; bottom: 3px; }
.crosshair i:nth-child(3) { width: 7px; height: 1px; top: 20px; left: 3px; }
.crosshair i:nth-child(4) { width: 7px; height: 1px; top: 20px; right: 3px; }
.crosshair b { position: absolute; width: 2px; height: 2px; left: 19.5px; top: 19.5px; background: var(--ink); }
.crosshair.firing i:nth-child(1) { transform: translateY(-3px); }.crosshair.firing i:nth-child(2) { transform: translateY(3px); }.crosshair.firing i:nth-child(3) { transform: translateX(-3px); }.crosshair.firing i:nth-child(4) { transform: translateX(3px); }
.hitmarker { opacity: 0; transform: translate(-50%, -50%) rotate(45deg); transition: opacity .12s; }
.hitmarker.on { opacity: 1; }
.hitmarker.kill { filter: sepia(1) saturate(8) hue-rotate(320deg); }
.hitmarker i { position: absolute; background: #fff; }
.hitmarker i:nth-child(1), .hitmarker i:nth-child(2) { width: 9px; height: 2px; top: 9px; }.hitmarker i:nth-child(1) { left: 6px; }.hitmarker i:nth-child(2) { right: 6px; }
.hitmarker i:nth-child(3), .hitmarker i:nth-child(4) { width: 9px; height: 2px; bottom: 9px; }.hitmarker i:nth-child(3) { left: 6px; }.hitmarker i:nth-child(4) { right: 6px; }

.vitals { position: absolute; left: 34px; bottom: 34px; display: flex; align-items: center; gap: 12px; width: 270px; }
.portrait { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(169,239,189,.2), rgba(2,5,5,.8)); color: var(--green); font-size: 18px; font-weight: 900; clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%); }
.vital-copy { flex: 1; }.vital-copy > div:first-child { display: flex; justify-content: space-between; font-size: 10px; }.vital-copy > div:first-child span { font: 12px Consolas, monospace; }
.health-track { height: 4px; margin: 7px 0 4px; background: rgba(255,255,255,.12); }.health-track i { display: block; height: 100%; width: 100%; background: var(--green); box-shadow: 0 0 8px rgba(169,239,189,.5); transition: width .2s, background .2s; }
.vital-copy small { color: var(--muted); font-size: 7px; }
.weapon-panel { position: absolute; right: 34px; bottom: 32px; min-width: 264px; text-align: right; }
.weapon-name { display: inline-flex; flex-direction: column; text-align: left; vertical-align: middle; margin-right: 22px; }.weapon-name span { font-size: 13px; font-weight: 900; }.weapon-name small { color: var(--muted); font-size: 7px; }
.ammo { display: inline-flex; align-items: baseline; gap: 7px; vertical-align: middle; }.ammo strong { font: 42px/1 Consolas, monospace; letter-spacing: -.08em; }.ammo span { color: var(--dim); font-size: 24px; }.ammo small { color: var(--muted); font: 17px Consolas, monospace; }
.fire-mode { width: 100%; margin-top: 7px; padding-top: 5px; border-top: 1px solid var(--line); color: var(--muted); font-size: 7px; }.fire-mode i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--green); }

.center-alert { position: absolute; left: 50%; top: 29%; transform: translate(-50%, -50%); text-align: center; animation: alert-in .35s ease-out; }
.center-alert small { display: block; color: var(--green); font-size: 8px; margin-bottom: 5px; }.center-alert strong { padding: 7px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 17px; letter-spacing: .2em; }
@keyframes alert-in { from { opacity: 0; transform: translate(-50%, -40%); } }
.downed { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: rgba(40,0,0,.26); }.downed strong { color: #ff887e; font-size: 26px; }.downed span { color: #c9aaa5; font-size: 8px; margin-top: 8px; }

.overlay { position: fixed; inset: 0; z-index: 100; }
.briefing { display: grid; grid-template-columns: minmax(0, 1fr) 365px; gap: clamp(40px, 8vw, 140px); align-items: center; padding: clamp(34px, 6vw, 100px); background: linear-gradient(90deg, rgba(3,7,7,.96) 0%, rgba(5,10,9,.84) 46%, rgba(5,9,9,.91) 100%), radial-gradient(circle at 35% 50%, #27372f, #060909 58%); overflow: hidden; }
.briefing::before { content: ""; position: absolute; inset: 0; opacity: .18; background: linear-gradient(115deg, transparent 0 45%, rgba(169,239,189,.16) 45.2% 45.5%, transparent 45.7%), repeating-linear-gradient(90deg, transparent 0 69px, rgba(169,239,189,.11) 70px); }
.briefing-grid { position: absolute; left: 8%; top: 17%; width: 47%; height: 68%; opacity: .16; background-image: linear-gradient(rgba(169,239,189,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(169,239,189,.28) 1px, transparent 1px); background-size: 38px 38px; transform: perspective(600px) rotateY(16deg) rotateZ(-3deg); mask-image: linear-gradient(90deg, #000, transparent); }
.briefing-copy, .deploy-card { position: relative; z-index: 2; }
.classification { display: inline-block; padding: 6px 9px; color: #090d0c; background: var(--amber); font-size: 8px; font-weight: 900; letter-spacing: .22em; text-shadow: none; }
.briefing-brand { margin-top: 32px; color: var(--ink); font-size: 18px; font-weight: 900; letter-spacing: .22em; }.briefing-brand i { color: var(--green); font-style: normal; }.briefing-brand small { color: var(--muted); font-size: 7px; }
.operation-number { margin-top: clamp(45px, 8vh, 90px); color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .4em; }
.briefing h1 { margin: 5px 0 15px; font-size: clamp(54px, 7vw, 106px); line-height: .9; letter-spacing: -.045em; transform: scaleX(.86); transform-origin: left; }
.mission-summary { max-width: 690px; color: #9da9a5; font-size: 11px; line-height: 1.7; letter-spacing: .06em; }
.mission-facts { display: flex; gap: clamp(25px, 5vw, 65px); margin-top: 28px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.mission-facts div { display: flex; flex-direction: column; gap: 5px; }.mission-facts small { color: var(--muted); font-size: 7px; }.mission-facts strong { font-size: 9px; }.mission-facts .danger { color: var(--red); }
.loadout-strip { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--muted); font-size: 7px; }.loadout-strip strong { color: var(--ink); font-size: 8px; }.loadout-strip i { height: 19px; width: 1px; margin: 0 7px; background: var(--line); }
.deploy-card { padding: 27px; background: rgba(7, 12, 12, .76); border: 1px solid var(--line); box-shadow: 0 28px 80px rgba(0,0,0,.4); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.card-line { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; color: var(--green); font-size: 8px; font-weight: 900; }.card-line i { flex: 1; height: 1px; background: var(--line); }
.deploy-card label { display: block; margin-top: 15px; color: var(--muted); font-size: 7px; font-weight: 800; }.deploy-card input { width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid var(--line); outline: 0; color: var(--ink); background: rgba(0,0,0,.31); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }.deploy-card input:focus { border-color: rgba(169,239,189,.7); box-shadow: 0 0 0 1px rgba(169,239,189,.15); }
.deploy-card button, .pause-menu button, .debrief button { width: 100%; margin-top: 25px; padding: 14px 18px; border: 0; cursor: pointer; color: #07100c; background: var(--green); text-align: left; font-weight: 900; letter-spacing: .16em; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); transition: filter .15s, transform .15s; }.deploy-card button:hover, .pause-menu button:hover, .debrief button:hover { filter: brightness(1.1); transform: translateY(-1px); }.deploy-card button span { display: block; font-size: 12px; }.deploy-card button small { display: block; margin-top: 2px; font-size: 6px; opacity: .65; }
#briefing-status { color: var(--muted); text-align: center; font-size: 7px; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 6px; }.controls b { display: inline-block; min-width: 42px; color: var(--ink); }

.pause-menu { display: grid; place-items: center; background: rgba(2,5,5,.72); backdrop-filter: blur(7px); }.pause-menu > div { width: 380px; padding: 36px; background: var(--panel); border: 1px solid var(--line); text-align: center; }.pause-menu small { color: var(--green); font-size: 8px; }.pause-menu h2 { margin: 8px 0; font-size: 27px; }.pause-menu p { color: var(--muted); font-size: 9px; }.pause-menu button { text-align: center; }.pause-menu button.quiet { margin-top: 10px; color: var(--muted); background: transparent; border: 1px solid var(--line); }
.debrief { display: grid; place-items: center; background: rgba(2, 6, 5, .9); backdrop-filter: blur(9px); }.debrief-card { width: min(650px, 90vw); padding: 48px; border: 1px solid var(--line); background: var(--panel); text-align: center; }.classification.success { color: #06100b; background: var(--green); }.debrief h2 { margin: 20px 0 8px; font-size: 34px; }.debrief p { color: var(--muted); font-size: 10px; }.debrief-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 32px 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.debrief-stats div { padding: 20px 8px; border-right: 1px solid var(--line); }.debrief-stats div:last-child { border: 0; }.debrief-stats small { display: block; color: var(--muted); font-size: 7px; }.debrief-stats strong { display: block; margin-top: 6px; font: 24px Consolas, monospace; }

@media (max-width: 900px) {
  .briefing { grid-template-columns: 1fr; gap: 25px; padding: 34px; overflow-y: auto; }.briefing h1 { font-size: 57px; }.operation-number { margin-top: 35px; }.deploy-card { width: min(100%, 500px); }.tactical-panel { transform: scale(.72); transform-origin: top right; }.objective-card { width: 285px; }.wordmark small, .squad-roster { display: none; }
}
@media (max-width: 600px) {
  .tactical-panel, .feed, .objective-marker { display: none !important; }.topbar, .objective-card, .vitals { left: 16px; }.topbar { right: 16px; }.weapon-panel { right: 16px; }.mission-clock { display: none; }.objective-card { top: 82px; }.weapon-name { display: none; }.ammo strong { font-size: 32px; }
}