:root {
  color-scheme: dark;
  --ink: #e7edf2;
  --muted: #87939e;
  --panel: rgba(11, 16, 21, 0.94);
  --panel-soft: rgba(17, 23, 29, 0.86);
  --line: rgba(221, 234, 245, 0.14);
  --alpha: #55c8ff;
  --alpha-dark: #1479a6;
  --bravo: #ff9955;
  --bravo-dark: #ac4f18;
  --success: #7be099;
  --danger: #ff5966;
  --cut: 12px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #080c10;
  color: var(--ink);
}

button,
input { font: inherit; }
button { color: inherit; }

.app-shell,
#game-canvas,
.screen,
.hud,
.scoreboard {
  position: fixed;
  inset: 0;
}

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

.screen {
  z-index: 20;
  background:
    linear-gradient(90deg, rgba(5, 8, 11, 0.96) 0%, rgba(5, 8, 11, 0.87) 52%, rgba(5, 8, 11, 0.3) 78%, rgba(5, 8, 11, 0.58) 100%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.025) 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.025) 48px);
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 42%, transparent 0 18%, rgba(5,8,11,.54) 72%);
}

.screen--centered {
  display: grid;
  place-items: center;
}

.is-hidden { display: none !important; }

#loading-screen { z-index: 100; gap: 18px; }
#loading-screen p { color: var(--muted); letter-spacing: .22em; text-transform: uppercase; font-size: 12px; }

.loader-mark {
  width: 54px;
  height: 54px;
  position: relative;
  animation: rotate-mark 1.2s linear infinite;
}
.loader-mark span { position: absolute; inset: 0 26px 0 0; border: 2px solid var(--alpha); }
.loader-mark span:last-child { inset: 0 0 0 26px; border-color: var(--bravo); }
@keyframes rotate-mark { to { transform: rotate(360deg); } }

.menu-screen {
  display: grid;
  grid-template-columns: minmax(510px, 690px) minmax(260px, 1fr);
  align-items: center;
  gap: clamp(24px, 6vw, 110px);
  padding: clamp(28px, 5vw, 80px);
}

.menu-panel,
.arena-readout,
.lobby-card,
.pause-card,
.controls-card { position: relative; z-index: 2; }

.menu-panel { max-width: 680px; }
.brand-kicker {
  margin: 0 0 16px;
  color: #aab5bf;
  font: 700 11px/1.2 ui-monospace, "Cascadia Code", monospace;
  letter-spacing: .22em;
}
.live-dot { display: inline-block; width: 7px; height: 7px; background: var(--success); margin-right: 8px; box-shadow: 0 0 13px var(--success); }

.brand-lockup h1 {
  margin: 0;
  font-size: clamp(58px, 7vw, 104px);
  line-height: .79;
  letter-spacing: -.075em;
  font-weight: 900;
}
.brand-lockup h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(231,237,242,.62); }
.brand-lockup > p { max-width: 550px; margin: 25px 0 28px; color: var(--muted); line-height: 1.55; font-size: 14px; }

.identity-field label,
.join-form > label { display: block; margin-bottom: 8px; color: #96a3ae; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.identity-field input,
.join-form input,
.quality-field select {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  background: rgba(255,255,255,.045);
  padding: 0 14px;
  color: var(--ink);
  font-weight: 700;
  transition: border-color .18s, background .18s;
}
.identity-field input:focus,
.join-form input:focus,
.quality-field select:focus { border-color: var(--alpha); background: rgba(85,200,255,.07); }

.quality-field { margin-top: 12px; }
.quality-field label { display: block; margin-bottom: 8px; color: #96a3ae; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.quality-field select { cursor: pointer; }
.quality-field option { background: #111820; color: var(--ink); }
.quality-field small { display: block; margin-top: 6px; color: #66737e; font-size: 10px; }

.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.mode-card {
  min-height: 144px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto 1fr auto;
  gap: 5px 12px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: transform .15s, border-color .15s, background .15s;
}
.mode-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.34); background: rgba(25,32,39,.96); }
.mode-card--primary { border-color: rgba(85,200,255,.42); background: linear-gradient(135deg, rgba(17,63,82,.76), rgba(14,23,29,.94)); }
.mode-number { grid-row: 1 / 5; color: var(--muted); font: 700 11px ui-monospace, monospace; }
.mode-card strong { font-size: 15px; letter-spacing: .06em; }
.mode-card small { color: var(--muted); line-height: 1.4; }
.mode-action { color: var(--alpha); font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.mode-card:not(.mode-card--primary) .mode-action { color: var(--bravo); }

.join-form { margin-top: 12px; }
.join-form > div { display: grid; grid-template-columns: 1fr 118px; gap: 8px; }
.join-form input { text-transform: uppercase; letter-spacing: .26em; }
.join-form button,
.pause-card > button:not(.secondary-button) {
  border: 0;
  background: var(--ink);
  color: #090d11;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .12em;
  cursor: pointer;
}
.join-form button:hover,
.pause-card > button:not(.secondary-button):hover { background: var(--alpha); }
.status-line { height: 18px; margin: 10px 0 0; color: var(--danger); font-size: 12px; }
.menu-footer { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; color: #67727c; font: 10px ui-monospace, monospace; text-transform: uppercase; }

.arena-readout {
  width: min(420px, 100%);
  justify-self: center;
  border: 1px solid var(--line);
  padding: 24px;
  background: rgba(8,12,16,.63);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.readout-line { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 10px 0; font: 700 11px ui-monospace, monospace; }
.readout-line span { color: var(--muted); }
.readout-map { position: relative; height: 260px; margin: 18px 0; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(85,200,255,.06), transparent 46% 54%, rgba(255,153,85,.06)), repeating-linear-gradient(0deg, transparent 0 25px, rgba(255,255,255,.03) 26px), repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.03) 26px); }
.readout-map i { position: absolute; display: block; border: 1px solid rgba(231,237,242,.25); background: #151c22; }
.readout-map .map-a { left: 12%; top: 19%; width: 23%; height: 62%; border-color: rgba(85,200,255,.44); }
.readout-map .map-b { right: 12%; top: 19%; width: 23%; height: 62%; border-color: rgba(255,153,85,.44); }
.readout-map .map-core { left: 43%; top: 32%; width: 14%; height: 36%; }
.readout-map span { position: absolute; top: 47%; font: 900 24px ui-monospace, monospace; }
.readout-map span:nth-of-type(1) { left: 21%; color: var(--alpha); }
.readout-map span:nth-of-type(2) { right: 21%; color: var(--bravo); }
.arena-readout > p { color: var(--muted); line-height: 1.5; font-size: 12px; }
.connection-badge { margin-top: 20px; color: #9ba7b1; font: 700 10px ui-monospace, monospace; letter-spacing: .1em; }
.connection-badge i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: #87939e; }
.connection-badge.is-online i { background: var(--success); box-shadow: 0 0 10px var(--success); }
.connection-badge.is-offline i { background: var(--bravo); }

.lobby-card,
.pause-card {
  width: min(760px, calc(100vw - 32px));
  padding: clamp(25px, 5vw, 54px);
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.lobby-card h2,
.pause-card h2 { margin: 0 0 24px; font-size: clamp(30px, 5vw, 54px); letter-spacing: -.05em; }
.room-code { width: 100%; padding: 18px; border: 1px solid rgba(85,200,255,.38); background: rgba(85,200,255,.06); cursor: pointer; }
.room-code span, .room-code small { display: block; color: var(--muted); font: 9px ui-monospace, monospace; letter-spacing: .15em; }
.room-code b { display: block; margin: 6px 0; color: var(--alpha); font: 900 clamp(32px, 6vw, 58px) ui-monospace, monospace; letter-spacing: .22em; }
.lobby-progress { height: 4px; margin-top: 24px; background: rgba(255,255,255,.08); }
.lobby-progress i { display: block; width: 10%; height: 100%; background: linear-gradient(90deg, var(--alpha), var(--bravo)); transition: width .3s; }
#lobby-count { margin: 8px 0 18px; text-align: right; color: var(--muted); font: 11px ui-monospace, monospace; }
.team-rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.team-rosters h3 { margin: 0; padding-bottom: 7px; border-bottom: 2px solid var(--alpha); font-size: 12px; letter-spacing: .12em; }
.team-rosters > div:last-child h3 { border-color: var(--bravo); }
.team-rosters ol { min-height: 104px; margin: 10px 0; padding: 0; list-style: none; }
.team-rosters li { display: flex; justify-content: space-between; padding: 5px 0; color: #cbd4dc; font-size: 12px; }
.team-rosters li em { color: var(--muted); font-style: normal; }
.secondary-button { min-height: 42px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.secondary-button:hover { border-color: var(--danger); color: var(--ink); }
.lobby-card > .secondary-button { width: 100%; margin-top: 12px; }

.hud { z-index: 10; pointer-events: none; }
.score-strip { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 130px 154px 130px; height: 48px; background: rgba(6,9,12,.82); border: 1px solid rgba(255,255,255,.12); }
.team-score { display: flex; justify-content: flex-end; align-items: center; gap: 15px; padding: 0 14px; background: linear-gradient(90deg, transparent, rgba(85,200,255,.13)); }
.team-score--bravo { justify-content: flex-start; background: linear-gradient(90deg, rgba(255,153,85,.13), transparent); }
.team-score span { font-size: 10px; font-weight: 900; color: var(--alpha); letter-spacing: .1em; }
.team-score--bravo span { color: var(--bravo); }
.team-score b { font: 900 25px ui-monospace, monospace; }
.team-score.is-friendly { border-bottom: 3px solid #22d3ff; background: linear-gradient(90deg, transparent, rgba(34,211,255,.26)); }
.team-score--bravo.is-friendly { background: linear-gradient(90deg, rgba(34,211,255,.26), transparent); }
.team-score.is-friendly span { color: #63e4ff; text-shadow: 0 0 10px rgba(34,211,255,.75); }
.team-score.is-enemy { border-bottom: 3px solid #ff334f; background: linear-gradient(90deg, transparent, rgba(255,51,79,.21)); }
.team-score--bravo.is-enemy { background: linear-gradient(90deg, rgba(255,51,79,.21), transparent); }
.team-score.is-enemy span { color: #ff667c; text-shadow: 0 0 10px rgba(255,51,79,.6); }
.round-readout { display: grid; place-content: center; text-align: center; border-inline: 1px solid var(--line); }
.round-readout small { color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.round-readout strong { margin-top: 3px; font-size: 10px; letter-spacing: .08em; }
.alive-strip { position: absolute; top: 71px; left: 50%; transform: translateX(-50%); width: 408px; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 2px; }
.alive-strip span:first-child { color: var(--alpha); }.alive-strip span:last-child { color: var(--bravo); }
.team-legend { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; padding: 5px 10px; background: rgba(5,8,11,.72); border: 1px solid rgba(255,255,255,.1); font: 800 9px ui-monospace, monospace; letter-spacing: .08em; }
.team-legend--friendly { color: #45ddff; }.team-legend--enemy { color: #ff536d; }

.crosshair { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%,-50%); }
.crosshair i { position: absolute; background: rgba(245,249,252,.92); box-shadow: 0 0 3px #000; }
.crosshair i:nth-child(1), .crosshair i:nth-child(2) { width: 8px; height: 1px; top: 16px; }
.crosshair i:nth-child(1) { left: 2px; }.crosshair i:nth-child(2) { right: 2px; }
.crosshair i:nth-child(3), .crosshair i:nth-child(4) { width: 1px; height: 8px; left: 16px; }
.crosshair i:nth-child(3) { top: 2px; }.crosshair i:nth-child(4) { bottom: 2px; }
.hit-marker { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; transform: translate(-50%,-50%) rotate(45deg); opacity: 0; }
.hit-marker i { position: absolute; inset: 2px 15px; background: #fff; }.hit-marker i:last-child { inset: 15px 2px; }
.hit-marker.is-active { animation: hit .14s ease-out; }
@keyframes hit { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(45deg) scale(1.3); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(45deg) scale(1); } }

.player-vitals { position: absolute; left: 25px; bottom: 22px; display: flex; align-items: flex-end; gap: 25px; }
.health-block small, .weapon-block small { display: block; color: var(--muted); font: 8px ui-monospace, monospace; letter-spacing: .15em; }
.health-block strong { font: 900 44px ui-monospace, monospace; }
.health-block > i { display: block; width: 130px; height: 3px; background: rgba(255,255,255,.12); }
.health-block > i span { display: block; height: 100%; width: 100%; background: var(--success); transition: width .14s, background .14s; }
.weapon-block strong { display: block; font: 900 28px ui-monospace, monospace; }.weapon-block strong em { padding: 0 5px; color: #56616b; font-style: normal; }.weapon-block strong span:last-child { color: var(--muted); font-size: 15px; }
.weapon-slots { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 6px; }
.weapon-slots span { min-width: 86px; padding: 10px; border: 1px solid var(--line); color: var(--muted); font: 8px ui-monospace, monospace; background: rgba(7,10,13,.65); }
.weapon-slots span b { margin-right: 6px; color: #5f6c77; }.weapon-slots span.is-active { color: var(--ink); border-color: var(--alpha); background: rgba(85,200,255,.1); }
.kill-feed { position: absolute; top: 92px; right: 20px; width: 330px; text-align: right; }
.kill-feed p { margin: 0 0 5px; padding: 7px 9px; background: rgba(7,10,13,.65); font-size: 11px; animation: feed-in .18s ease-out; }.kill-feed b.friendly { color: #45ddff; }.kill-feed b.enemy { color: #ff536d; }.kill-feed em { color: var(--muted); font-style: normal; padding: 0 6px; }
@keyframes feed-in { from { opacity: 0; transform: translateX(12px); } }
.center-message { position: absolute; top: 35%; left: 50%; min-width: 360px; transform: translateX(-50%); text-align: center; text-shadow: 0 2px 8px #000; }
.center-message small { color: var(--muted); font-size: 10px; letter-spacing: .2em; }.center-message strong { display: block; font-size: clamp(32px,5vw,64px); letter-spacing: -.05em; }.center-message p { margin: 6px 0; color: #c5ced6; font-size: 12px; }
.pressure-warning { position: absolute; left: 50%; bottom: 115px; transform: translateX(-50%); color: var(--danger); font: 800 11px ui-monospace, monospace; letter-spacing: .12em; animation: pressure 1s infinite alternate; }
@keyframes pressure { to { opacity: .5; } }
.performance-readout { position: absolute; top: 18px; right: 20px; color: #73808a; font: 9px ui-monospace, monospace; }.performance-readout span { margin-left: 10px; }

.pause-screen { z-index: 30; background: rgba(5,8,11,.9); }
.pause-card { max-width: 470px; text-align: center; }
.pause-card p:not(.brand-kicker) { color: var(--muted); font-size: 13px; }.pause-card > button { width: 100%; height: 46px; margin-top: 8px; }
.controls-gate { z-index: 31; background: rgba(5,8,11,.72); }
.controls-card { width: min(520px, calc(100vw - 32px)); padding: 32px; text-align: center; background: rgba(8,13,17,.97); border: 1px solid rgba(69,221,255,.48); box-shadow: 0 20px 80px rgba(0,0,0,.55); pointer-events: auto; }
.controls-card h2 { margin: 0; font-size: clamp(30px, 5vw, 52px); letter-spacing: -.04em; }
.controls-card > p:not(.brand-kicker) { color: #b9c4cd; line-height: 1.5; }
.controls-cheatsheet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0; text-align: left; }
.controls-cheatsheet span { padding: 10px; color: var(--muted); background: rgba(255,255,255,.04); font-size: 11px; }
.controls-cheatsheet b { display: block; margin-bottom: 3px; color: var(--ink); }
#controls-start { width: 100%; height: 50px; border: 0; cursor: pointer; background: #36d7ff; color: #061014; font-weight: 900; letter-spacing: .12em; }
#controls-start:hover { background: #86eaff; }
#controls-leave { width: 100%; margin-top: 8px; }
.scoreboard { z-index: 25; display: grid; place-items: start center; padding-top: 105px; pointer-events: none; background: rgba(3,5,7,.4); }
.scoreboard-card { width: min(920px,calc(100vw - 40px)); padding: 26px; background: rgba(7,11,14,.92); border: 1px solid var(--line); }
.scoreboard-card h2 { margin: 0 0 18px; font-size: 20px; }.scoreboard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.scoreboard-columns h3 { color: var(--alpha); font-size: 11px; letter-spacing: .13em; }.scoreboard-columns > div:last-child h3 { color: var(--bravo); }
.scoreboard table { width: 100%; border-collapse: collapse; font-size: 11px; }.scoreboard th,.scoreboard td { padding: 7px; border-bottom: 1px solid var(--line); text-align: right; }.scoreboard th:first-child,.scoreboard td:first-child { text-align: left; }.scoreboard th { color: var(--muted); font-size: 8px; }
.toast { position: fixed; z-index: 110; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 14px; border: 1px solid var(--line); background: rgba(8,12,16,.94); color: var(--ink); font-size: 12px; }

@media (max-width: 900px) {
  .menu-screen { grid-template-columns: 1fr; overflow: auto; align-items: start; padding: 26px; }
  .arena-readout { display: none; }
  .menu-panel { margin: auto; }
  .brand-lockup h1 { font-size: clamp(54px,14vw,84px); }
  .score-strip { grid-template-columns: 92px 128px 92px; }
  .team-score { gap: 7px; padding: 0 8px; }.team-score span { font-size: 8px; }
  .alive-strip { width: 300px; }
  .team-legend { top: 88px; gap: 9px; font-size: 7px; }
  .weapon-slots { display: none; }
}

@media (max-width: 600px) {
  .menu-screen { padding: 18px; }
  .mode-grid { grid-template-columns: 1fr; }
  .brand-lockup > p { margin: 18px 0; }
  .menu-footer { display: none; }
  .team-rosters, .scoreboard-columns { grid-template-columns: 1fr; }
  .lobby-card { max-height: calc(100vh - 24px); overflow: auto; }
  .player-vitals { left: 14px; bottom: 14px; }.kill-feed { width: 260px; right: 10px; }
  .controls-cheatsheet { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}