:root {
  --blue: #3fa9ff;
  --red: #ff5340;
  --amber: #f5b93b;
  --ink: #05070c;
  --panel: rgba(10, 14, 22, .82);
  --edge: rgba(245, 185, 59, .35);
  --ui: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  /* One width for all four status gauges — hull, shells, missiles, ability. */
  --gaugew: 254px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: #e9eef7;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: .15em .4em;
  margin: 0 .12em;
  border: 1px solid rgba(255, 255, 255, .28);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .07);
  font: inherit;
  font-size: .82em;
  text-align: center;
}

/* ========================= HUD ========================= */
#hud { position: fixed; inset: 0; pointer-events: none; user-select: none; }
#hud[hidden] { display: none; }

/* Positioned by a transform from the top-left corner rather than by offsets
   from the centre — hud.setReticle runs every frame, and a transform stays off
   the layout path. The negative margin is what re-centres it on the point. */
#reticle {
  position: absolute; left: 0; top: 0; width: 42px; height: 42px;
  margin: -21px 0 0 -21px; opacity: .95; transition: opacity .2s;
  will-change: transform;
}
#reticle .rc { position: absolute; background: var(--amber); box-shadow: 0 0 6px rgba(0,0,0,.9); }
#reticle .rc-t, #reticle .rc-b { left: 50%; width: 2px; height: 11px; margin-left: -1px; }
#reticle .rc-l, #reticle .rc-r { top: 50%; height: 2px; width: 11px; margin-top: -1px; }
#reticle .rc-t { top: 0 } #reticle .rc-b { bottom: 0 } #reticle .rc-l { left: 0 } #reticle .rc-r { right: 0 }
#reticle .rc-dot {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  background: #fff; border-radius: 50%; box-shadow: 0 0 5px #000;
}
#reticle.reloading .rc { background: #7f8a9b; }

#scorebar {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 2px;
  background: var(--panel); border: 1px solid rgba(255,255,255,.09); border-top: 0;
  border-radius: 0 0 10px 10px; backdrop-filter: blur(8px); overflow: hidden;
}
#scorebar .side { display: flex; align-items: stretch; gap: 2px; }
#scorebar .team {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  box-shadow: inset 0 -3px 0 var(--c);
}
#scorebar .tname { font-size: 12px; letter-spacing: .16em; opacity: .85; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scorebar .tscore { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
/* Past three a side, the two-team sizing runs off a phone screen — and a
   free-for-all is exactly when there are six. Names shorten before scores
   do, because the number is the thing being read at a glance. */
#scorebar .side.compact .team { gap: 6px; padding: 8px 10px; }
#scorebar .side.compact .tname { font-size: 10px; letter-spacing: .1em; max-width: 7ch; }
#scorebar .side.compact .tscore { font-size: 20px; }
/* A phone is narrower than two full-size chips plus the clock, so the bar —
   which clips, being overflow:hidden — was cutting one side off entirely
   even in team battle, where there are only ever two. Tighten every chip
   here, and drop names once there are enough of them that the numbers are
   what is being read. */
@media (max-width: 620px) {
  #scorebar .team { gap: 6px; padding: 8px 10px; }
  #scorebar .tname { font-size: 10px; letter-spacing: .1em; max-width: 7ch; }
  #scorebar .tscore { font-size: 22px; }
  #scorebar .clock { padding: 8px 12px; min-width: 76px; }
  #scorebar .side.compact .tname { display: none; }
  #scorebar .side.compact .team { padding: 8px; }
  /* "Yours" is normally an underline beneath the name — which is gone
     here, and a six-tank deathmatch on a phone is precisely when you need
     to find your own number fastest. Mark the chip instead. */
  #scorebar .side.compact .team.mine {
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 -3px 0 var(--c), inset 0 3px 0 var(--c);
  }
}
/* The ping readout overlaps the bar at this width — but its position is
   owned by touch.css, which loads last and folds the safe-area insets in,
   so the fix lives there beside the other restated small-screen values. */
#scorebar .clock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 18px; background: rgba(0,0,0,.35); min-width: 92px;
}
#scorebar .clock span { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
#scorebar .clock small { font-size: 9px; opacity: .45; letter-spacing: .18em; text-transform: uppercase; margin-top: 2px; }

#killfeed { position: absolute; top: 76px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
#killfeed div {
  background: var(--panel); border: 1px solid rgba(255,255,255,.09); border-radius: 5px;
  padding: 5px 10px; font-size: 12px; letter-spacing: .04em;
  animation: feedIn .22s ease-out; white-space: nowrap;
}
#killfeed b { font-weight: 700; }
#killfeed .k { color: var(--amber); margin: 0 7px; }
@keyframes feedIn { from { opacity: 0; transform: translateX(24px); } }

#centre {
  position: absolute; left: 0; right: 0; top: 34%; text-align: center;
  text-shadow: 0 3px 22px #000, 0 1px 3px #000;
}
#bigmsg { font-size: clamp(26px, 5.2vw, 62px); font-weight: 700; letter-spacing: .06em; line-height: 1.05; }
#submsg { margin-top: 10px; font-size: clamp(12px, 1.5vw, 17px); opacity: .8; letter-spacing: .1em; }
#bigmsg.pulse { animation: pulse .5s ease-out; }
@keyframes pulse { from { transform: scale(1.5); opacity: 0; } }

#hitmark {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  opacity: 0; pointer-events: none;
  background:
    linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
}
#hitmark.on { animation: hm .32s ease-out; }
#hitmark.kill { filter: drop-shadow(0 0 4px #ff3b2f); }
@keyframes hm { 0% { opacity: 1; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.35); } }

#dmgflash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 42%, rgba(190,20,15,.72) 100%); transition: opacity .45s ease-out; }
#dmgflash.on { opacity: 1; transition: opacity .06s; }

/* Every gauge is one column wide. The ammo row used to size itself from its
   pip count instead, so the Scout's 24-round magazine came out 405px against
   a 254px hull bar — a flex row with definite-width children and no wrap, so
   it could not shrink and simply ran off the side of a phone. Pips now divide
   the column instead of defining it. */
#statusbar { position: absolute; left: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.gauge .glabel { font-size: 9.5px; letter-spacing: .26em; opacity: .5; margin-bottom: 5px; }
.hbar {
  position: relative; width: var(--gaugew); height: 22px; background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.14); border-radius: 3px; overflow: hidden;
}
.hbar i {
  position: absolute; inset: 0; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, #38d16a, #7de08f);
  transition: transform .16s ease-out, background .3s;
}
.hbar.low i { background: linear-gradient(90deg, #ff3b2f, #ff8a5c); }
.hbar.mid i { background: linear-gradient(90deg, #f5b93b, #ffd984); }
.hbar b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #06121a; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  font-variant-numeric: tabular-nums;
}
#ammo, #missiles {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(2px, 1fr);
  width: var(--gaugew); gap: 5px;
}
#ammo.dense { gap: 3px; }
#ammo i, #missiles i, #minesg i {
  --f: 1; position: relative; width: auto; border-radius: 2px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.14); overflow: hidden;
}
#ammo i { height: 13px; }
#missiles i, #minesg i { height: 11px; }
#missiles i::after, #minesg i::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(var(--f)); transform-origin: left;
  background: linear-gradient(90deg, #7fd4ff, #d6f2ff); transition: transform .1s linear;
}
#minesg { display: grid; grid-auto-flow: column; width: var(--gaugew); gap: 5px; }
#minesg i::after { background: linear-gradient(90deg, #ffb040, #ffe0b0); }

/* Per-mode knobs: small pills under the mode row, e.g. stock lives. */
.modeopts { margin-top: 6px; }
.modeopts:empty { display: none; }
.modeopts .optlabel {
  font-size: 10px; letter-spacing: .2em; opacity: .55; align-self: center;
  margin-right: 4px;
}
.modeopts .optchip {
  font: inherit; font-size: 11.5px; padding: 4px 10px; cursor: pointer;
  color: var(--ink, #dfe6f2); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
}
.modeopts .optchip.sel {
  border-color: var(--amber, #f5b93b); color: #ffe1a1;
  background: rgba(245,185,59,.12);
}

#abil {
  position: relative; width: var(--gaugew); height: 24px; border-radius: 3px; overflow: hidden;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.14);
}
#abil i {
  position: absolute; inset: 0; transform: scaleX(var(--f, 1)); transform-origin: left;
  background: linear-gradient(90deg, rgba(126,214,255,.55), rgba(200,240,255,.3));
  transition: transform .12s linear;
}
#abil s {
  position: absolute; inset: 0; text-decoration: none; display: none;
}
#abil b {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  font-size: 11px; letter-spacing: .16em; color: #dff1ff; text-shadow: 0 1px 3px #000;
}
#abil.ready { border-color: rgba(126,214,255,.75); box-shadow: 0 0 12px rgba(126,214,255,.28); }
#abil.ready b { color: #fff; }
#abil.active { border-color: var(--amber); box-shadow: 0 0 16px rgba(245,185,59,.45); }
#abil.active i { background: linear-gradient(90deg, var(--amber), #ffe0a3); }
#abil.active b { color: #21150a; }
#ammo i::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(var(--f)); transform-origin: left;
  background: linear-gradient(90deg, var(--amber), #ffe0a3); transition: transform .1s linear;
}

#minimap {
  position: absolute; right: 18px; bottom: 18px; width: 180px; height: 180px;
  background: var(--panel); border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  padding: 6px; backdrop-filter: blur(6px);
}
#mmcanvas { width: 100%; height: 100%; display: block; }

#netinfo { position: absolute; top: 8px; left: 12px; font-size: 11px; opacity: .55; letter-spacing: .08em; }
#hintbar { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 11px; opacity: .38; white-space: nowrap; }

#scoreboard {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 430px; padding: 22px 26px; background: var(--panel);
  border: 1px solid var(--edge); border-radius: 12px; backdrop-filter: blur(12px);
}
#scoreboard[hidden] { display: none; }
#scoreboard h2 { margin: 0 0 14px; font-size: 13px; letter-spacing: .3em; opacity: .6; text-align: center; }
#scoreboard table { width: 100%; border-collapse: collapse; font-size: 14px; }
#scoreboard th { font-size: 10px; letter-spacing: .16em; opacity: .45; text-align: right; padding-bottom: 8px; font-weight: 400; }
#scoreboard th:first-child, #scoreboard td:first-child { text-align: left; }
#scoreboard td { padding: 7px 0; text-align: right; border-top: 1px solid rgba(255,255,255,.07); font-variant-numeric: tabular-nums; }
#scoreboard .p0 { color: var(--blue); } #scoreboard .p1 { color: var(--red); }

/* ========================= MENU ========================= */
#menu {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(ellipse at 50% 30%, #16202e 0%, #05070c 70%);
  z-index: 20; overflow: auto;
}
#menu.hide { opacity: 0; pointer-events: none; transition: opacity .45s; }

.panel {
  width: min(520px, 100%); padding: 30px 34px 26px;
  background: rgba(11, 16, 25, .9); border: 1px solid var(--edge);
  border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,.65);
}
.panel h1 { margin: 0; font-size: clamp(22px, 4.4vw, 33px); letter-spacing: .1em; line-height: 1.15; }
.panel h1 span { color: var(--amber); }
.tag { margin: 8px 0 22px; font-size: 12px; opacity: .6; letter-spacing: .04em; }
.tag b { color: var(--amber); font-weight: 400; }

.field { display: block; margin-bottom: 13px; }
.field span { display: block; font-size: 10px; letter-spacing: .22em; opacity: .55; margin-bottom: 6px; }
.field small { letter-spacing: .06em; opacity: .7; }
.field input {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px; color: #fff;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15);
  border-radius: 7px; outline: none;
}
.field input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,185,59,.14); }

/* A checkbox row: the generic .field rules stretch an input to full width
   and stack its label above it, which turns a tick box into a 100%-wide
   rectangle. Here the box keeps its own size and sits beside the text. */
.checkfield { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.checkfield input[type="checkbox"] {
  width: 17px; height: 17px; flex: none; margin: 1px 0 0;
  accent-color: var(--amber); cursor: pointer;
}
.checkfield .flabel { margin-bottom: 0; }

.flabel { display: block; font-size: 10px; letter-spacing: .22em; opacity: .55; margin-bottom: 6px; }
.flabel small { letter-spacing: .06em; opacity: .7; }

.vehrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.vcard {
  padding: 9px 11px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.13); border-radius: 7px;
  transition: border-color .15s, background .15s;
}
.vcard:hover { border-color: rgba(245,185,59,.5); }
.vcard.sel { border-color: var(--amber); background: rgba(245,185,59,.1); }
.vcard b { display: block; font-size: 12px; letter-spacing: .12em; }
.vcard em { display: block; font-size: 9.5px; opacity: .55; font-style: normal; margin: 3px 0 7px; line-height: 1.35; }
.vbars { display: flex; flex-direction: column; gap: 2.5px; }
.vbars span { display: flex; align-items: center; gap: 6px; }
.vbars span::before {
  content: attr(data-l); font-size: 7.5px; opacity: .45; width: 20px; letter-spacing: .08em;
}
.vbars span > s {
  flex: 1; height: 3.5px; border-radius: 2px; background: rgba(255,255,255,.1);
  overflow: hidden; text-decoration: none; display: block;
}
.vbars i { display: block; height: 100%; transform-origin: left; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber), #ffe0a3); }
.vabil {
  display: block; margin-top: 8px; padding-top: 7px; font-size: 9px; line-height: 1.45;
  color: #9fe0ff; text-decoration: none; border-top: 1px solid rgba(255,255,255,.1);
}

.maprow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mapchip {
  padding: 8px 10px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.13); border-radius: 7px;
  transition: border-color .15s, background .15s;
}
.mapchip:hover { border-color: rgba(245,185,59,.5); }
.mapchip.sel { border-color: var(--amber); background: rgba(245,185,59,.1); }
.mapchip b { display: block; font-size: 11px; letter-spacing: .1em; }
.mapchip em { display: block; font-size: 9px; opacity: .5; font-style: normal; margin-top: 2px; }

#scoreboard .veh { font-size: 11px; opacity: .7; }

#playBtn {
  width: 100%; margin-top: 8px; padding: 15px; font: inherit; font-size: 16px; font-weight: 700;
  letter-spacing: .22em; color: #10151d; cursor: pointer;
  background: linear-gradient(180deg, #ffd071, var(--amber));
  border: 0; border-radius: 8px; transition: transform .1s, filter .2s;
}
#playBtn:hover { filter: brightness(1.1); }
#playBtn:active { transform: translateY(1px); }
#playBtn:disabled { filter: grayscale(.75) brightness(.7); cursor: wait; }

#connState { min-height: 18px; margin-top: 9px; font-size: 12px; text-align: center; opacity: .75; }
#connState.err { color: var(--red); opacity: 1; }

.share { margin: 18px 0 4px; padding: 11px 13px; background: rgba(0,0,0,.35); border: 1px dashed rgba(255,255,255,.16); border-radius: 7px; }
.share span { display: block; font-size: 10px; letter-spacing: .18em; opacity: .5; margin-bottom: 5px; }
.share code { font-size: 13px; color: var(--amber); word-break: break-all; }

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; margin: 18px 0 4px; font-size: 11.5px; }
.controls div { display: flex; align-items: center; gap: 5px; }
.controls em { opacity: .55; font-style: normal; }
.controls b { font-size: 10px; letter-spacing: .1em; padding: .25em .45em; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; }

.rules { margin: 16px 0 0; font-size: 11.5px; line-height: 1.65; opacity: .55; }
.rules b { color: var(--amber); font-weight: 400; }

#loader {
  position: fixed; inset: 0; display: grid; place-items: center; gap: 16px; align-content: center;
  background: var(--ink); z-index: 40; font-size: 12px; letter-spacing: .2em; opacity: .9;
}
#loader.gone { display: none; }
.spin { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.14); border-top-color: var(--amber); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  #minimap { width: 116px; height: 116px; right: 10px; bottom: 10px; }
  #statusbar { left: 10px; bottom: 12px; }
  #hintbar { display: none; }
  #scoreboard { min-width: 0; width: calc(100% - 40px); }
  :root { --gaugew: 170px; }
}