/* Apple devices draw the menus in their built-in DIN Condensed; everyone else gets these two open fonts (SIL OFL, see fonts/) */
@font-face { font-family: "Breach Condensed"; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Breach Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --ink: #ecebe4;
  --mute: rgba(236, 235, 228, .56);
  --faint: rgba(236, 235, 228, .14);
  --amber: #f2b33d;
  --red: #ff4b3e;
  --green: #a6d96a;
  --panel: rgba(12, 14, 12, .55);
  --cond: "DIN Condensed", "Breach Condensed", "Arial Narrow", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Breach Mono", monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0c0b;
  color: var(--ink);
  font-family: var(--cond);
  -webkit-user-select: none;
  user-select: none;
}
#app canvas { display: block; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#cine {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .38) 100%);
}
#vignette {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(130, 6, 0, .9) 100%);
}
#hurt { position: absolute; inset: 0; opacity: 0; background: rgba(160, 20, 10, .28); }
#compass { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 460px; height: 46px; }
#mmWrap { position: absolute; top: 18px; left: 18px; width: 184px; height: 184px; }
#minimap { width: 184px; height: 184px; border-radius: 50%; display: block; }
#mmRing {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(236, 235, 228, .22);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .45), 0 4px 18px rgba(0, 0, 0, .25);
}
#uavTag {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  font-size: 13px; letter-spacing: .18em; color: var(--red);
  background: rgba(12, 14, 12, .7); padding: 3px 8px 1px;
  opacity: 0; transition: opacity .3s;
}
#uavTag.on { opacity: 1; }
#objective { position: absolute; top: 216px; left: 22px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#modeName { font-size: 15px; letter-spacing: .24em; color: var(--amber); }
#objText { font-size: 18px; letter-spacing: .06em; margin-top: 2px; }
#scoreLine { font-family: var(--mono); font-size: 13px; color: var(--mute); margin-top: 6px; }
#fps {
  position: absolute; top: 14px; right: 18px;
  font-family: var(--mono); font-size: 11px; color: var(--mute);
}
#killfeed { position: absolute; top: 40px; right: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kf {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); padding: 5px 10px 3px;
  font-size: 15px; letter-spacing: .06em;
  animation: kfIn .25s ease-out;
}
.kf b { color: var(--green); font-weight: 600; }
.kf em { font-style: normal; color: #ff8a7a; }
.kf b.bl { color: #7cc8ff; }
.kf b.rd { color: #ff8a7a; }
.kf .cf { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }

/* ---------- capture the flag ---------- */
#ctfBar { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 3px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#ctfBar .tb { display: flex; align-items: center; gap: 10px; padding: 5px 12px 3px; background: var(--panel); min-width: 150px; }
#ctfBar .tb.blue { border-left: 3px solid #5cc2ff; }
#ctfBar .tb.red { border-right: 3px solid var(--red); justify-content: flex-end; }
#ctfBar .tb b { font-family: var(--mono); font-size: 24px; font-weight: 600; line-height: 1; }
#ctfBar .tb span { font-size: 12px; letter-spacing: .2em; color: var(--mute); }
#ctfBar .tb span.alert { color: var(--amber); }
#ctfBar .tb em { font-style: normal; font-size: 11px; letter-spacing: .24em; }
#ctfBar .tb.blue em { color: #7cc8ff; }
#ctfBar .tb.red em { color: #ff8a7a; }
#ctfClock { display: flex; align-items: center; padding: 4px 12px 2px; background: var(--panel); font-family: var(--mono); font-size: 15px; }
#carry {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%);
  font-size: 15px; letter-spacing: .24em; color: var(--amber); text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
#carry.ping { color: #ff6a55; }
.fmark { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.fmark .ic { position: relative; width: 20px; height: 22px; margin: 0 auto; }
.fmark .ic::before { content: ""; position: absolute; left: 3px; top: 1px; width: 2px; height: 21px; background: var(--ink); box-shadow: 0 0 3px rgba(0, 0, 0, .8); }
.fmark .ic::after { content: ""; position: absolute; left: 5px; top: 2px; width: 13px; height: 9px; background: currentColor; box-shadow: 0 0 3px rgba(0, 0, 0, .7); }
.fmark.blue { color: #5cc2ff; }
.fmark.red { color: var(--red); }
.fmark b { display: block; margin-top: 3px; font-size: 12px; letter-spacing: .2em; font-weight: 600; color: var(--ink); }
.fmark span { display: block; font-family: var(--mono); font-size: 10px; color: var(--mute); }
.atag {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap;
  font-size: 11px; letter-spacing: .16em; color: #9ed6ff; text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}
.atag::after { content: ""; display: block; width: 0; height: 0; margin: 2px auto 0; border: 4px solid transparent; border-top-color: #5cc2ff; border-bottom: 0; }
.map.off { opacity: .32; }
.kf .w { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.kf .hs { width: 10px; height: 10px; border: 2px solid var(--amber); border-radius: 50%; }
.kf.out { opacity: 0; transition: opacity .5s; }
@keyframes kfIn { from { transform: translateX(16px); opacity: 0; } }

#scope {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(42vh - 30px), rgba(0, 0, 0, .55) calc(42vh - 6px), #000 42vh);
}
#scope.on { opacity: 1; }
#scope .scH { position: absolute; left: calc(50% - 42vh); width: 84vh; top: 50%; height: 1px; background: rgba(0, 0, 0, .85); }
#scope .scV { position: absolute; top: 8vh; height: 84vh; left: 50%; width: 1px; background: rgba(0, 0, 0, .85); }
#scope .scPost { position: absolute; background: #000; }
#scope .scPost.l { left: calc(50% - 42vh); width: 26vh; top: calc(50% - 2px); height: 4px; }
#scope .scPost.r { right: calc(50% - 42vh); width: 26vh; top: calc(50% - 2px); height: 4px; }
#scope .scPost.b { bottom: 8vh; height: 26vh; left: calc(50% - 2px); width: 4px; }
.scBreath { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); text-align: center; }
.scBreath span { font-size: 12px; letter-spacing: .24em; color: var(--mute); }
.scBreath div { margin: 6px auto 0; width: 140px; height: 3px; background: rgba(255, 255, 255, .14); }
.scBreath i { display: block; height: 100%; width: 100%; background: var(--ink); }
.scBreath i.out { background: var(--red); }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity .12s; }
#crosshair i {
  position: absolute; background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 2px rgba(0, 0, 0, .9);
}
#crosshair .t, #crosshair .b { width: 2px; height: 9px; left: -1px; }
#crosshair .l, #crosshair .r { width: 9px; height: 2px; top: -1px; }
#crosshair .d { width: 2px; height: 2px; left: -1px; top: -1px; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#hitmarker i {
  position: absolute; width: 2px; height: 9px; background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, .8); left: -1px; top: -4.5px;
}
#hitmarker i:nth-child(1) { transform: rotate(45deg) translateY(-11px); }
#hitmarker i:nth-child(2) { transform: rotate(135deg) translateY(-11px); }
#hitmarker i:nth-child(3) { transform: rotate(225deg) translateY(-11px); }
#hitmarker i:nth-child(4) { transform: rotate(315deg) translateY(-11px); }
#hitmarker.go { animation: hm .22s ease-out; }
#hitmarker.head i { background: var(--amber); }
#hitmarker.kill i { background: var(--red); height: 12px; }
#hitmarker.kill.go { animation: hm .42s ease-out; }
@keyframes hm { 0% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1); } }

#dmgDirs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dd {
  position: absolute; left: -60px; top: -14px; width: 120px; height: 28px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 50, 30, .85), transparent 70%);
  border-top: 2px solid rgba(255, 70, 50, .9); border-radius: 50% 50% 0 0;
  animation: ddOut 1.4s ease-out forwards;
}
@keyframes ddOut { 0% { opacity: 1; } 100% { opacity: 0; } }

#popups {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.pop { display: flex; gap: 8px; align-items: baseline; animation: popIn .28s ease-out; }
.pop b { color: var(--amber); font-size: 20px; font-weight: 600; }
.pop span { font-size: 16px; letter-spacing: .14em; }
.pop.out { opacity: 0; transform: translateY(-8px); transition: all .4s; }
@keyframes popIn { from { transform: scale(1.4); opacity: 0; } }

#center {
  position: absolute; left: 0; right: 0; top: 26%;
  text-align: center; opacity: 0; transition: opacity .35s;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
#center.on { opacity: 1; }
#center h2 { margin: 0; font-size: 54px; letter-spacing: .16em; font-weight: 600; text-shadow: 0 2px 18px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); }
#center p { margin: 4px 0 0; font-size: 18px; letter-spacing: .2em; color: var(--amber); text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }

#death {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(60, 0, 0, .25), rgba(0, 0, 0, .7));
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
#death h2 { margin: 0; font-size: 60px; letter-spacing: .2em; color: var(--red); font-weight: 600; }
#death p { margin: 6px 0 0; font-size: 18px; letter-spacing: .18em; color: var(--mute); }

#healthBox { position: absolute; left: 22px; bottom: 26px; width: 250px; }
#hpTop { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; letter-spacing: .22em; color: var(--mute); }
#hpNum { font-family: var(--mono); font-size: 14px; color: var(--ink); letter-spacing: 0; }
#hpBar { margin-top: 5px; height: 6px; background: rgba(255, 255, 255, .14); display: flex; gap: 3px; }
#hpFill { height: 100%; background: var(--ink); width: 100%; transition: background .3s; }
#hpFill.low { background: var(--red); }
#nades { margin-top: 10px; display: flex; gap: 6px; align-items: center; font-size: 12px; letter-spacing: .2em; color: var(--mute); }
#nades i { width: 10px; height: 13px; border-radius: 4px 4px 5px 5px; background: #8d9a5b; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
#nades i.off { background: rgba(255, 255, 255, .14); box-shadow: none; }

#ammoBox { position: absolute; right: 26px; bottom: 24px; text-align: right; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
#wName { font-size: 15px; letter-spacing: .22em; color: var(--mute); }
#ammoRow { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
#ammo { font-family: var(--mono); font-size: 46px; font-weight: 600; line-height: 1; }
#ammo.low { color: var(--red); }
#reserve { font-family: var(--mono); font-size: 18px; color: var(--mute); }
#pips { display: flex; justify-content: flex-end; gap: 2px; margin-top: 6px; }
#pips i { width: 3px; height: 11px; background: var(--ink); }
#pips i.x { background: rgba(255, 255, 255, .16); }
#fireMode { margin-top: 6px; font-size: 12px; letter-spacing: .24em; color: var(--amber); }
#hint {
  position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%);
  font-size: 16px; letter-spacing: .14em; color: var(--ink); opacity: 0; transition: opacity .2s;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
#hint.on { opacity: 1; }
#hint .hold { display: block; height: 2px; margin-top: 6px; background: var(--amber); }
#hpBar { position: relative; }
#hpBar .cap { position: absolute; left: 60%; top: -3px; bottom: -3px; width: 1px; background: rgba(236, 235, 228, .55); }
#belt { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 6px; }
.bslot {
  width: 92px; padding: 6px 8px 5px; background: var(--panel); border-top: 2px solid rgba(236, 235, 228, .18);
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px;
}
.bslot b { font-family: var(--mono); font-size: 11px; color: var(--mute); font-weight: 500; }
.bslot span { font-size: 12px; letter-spacing: .14em; }
.bslot em { font-style: normal; font-family: var(--mono); font-size: 13px; }
.bslot.empty { opacity: .38; }
.bslot.active { border-top-color: var(--amber); }
#useBox { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .15s; }
#useBox.on { opacity: 1; }
#useBox span { font-size: 13px; letter-spacing: .24em; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
#useBox div { margin: 5px auto 0; width: 180px; height: 3px; background: rgba(255, 255, 255, .15); }
#useBox i { display: block; height: 100%; width: 0; background: var(--ink); }
#plabels { position: absolute; inset: 0; }
.plabel {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap;
  font-size: 11px; letter-spacing: .18em; color: var(--ink); text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  padding: 2px 6px 1px; background: rgba(12, 14, 12, .45);
}
.plabel.gun { border-left: 2px solid var(--amber); }
#cmpCard {
  position: absolute; right: 40px; top: 50%; width: 300px; transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(14, 16, 14, .82), rgba(10, 11, 10, .74));
  border: 1px solid rgba(236, 235, 228, .12); border-left: 2px solid var(--amber); padding: 14px 16px 12px;
}
#cmpCard h3 { margin: 0; font-size: 20px; letter-spacing: .12em; font-weight: 600; }
#cmpCard .sub { margin-top: 3px; font-size: 11px; letter-spacing: .22em; color: var(--mute); }
#cmpCard .rows { margin-top: 10px; display: grid; grid-template-columns: 1fr auto auto; gap: 5px 12px; align-items: baseline; }
#cmpCard .rows span { font-size: 12px; letter-spacing: .16em; color: var(--mute); }
#cmpCard .rows b { font-family: var(--mono); font-size: 13px; font-weight: 500; text-align: right; }
#cmpCard .rows em { font-style: normal; font-family: var(--mono); font-size: 12px; text-align: right; min-width: 34px; color: var(--mute); }
#cmpCard .rows em.up { color: var(--ink); }
#cmpCard .vs { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(236, 235, 228, .1); font-size: 11px; letter-spacing: .18em; color: var(--mute); }
#hint b { display: inline-block; border: 1px solid var(--mute); padding: 1px 6px 0; margin-right: 6px; font-weight: 600; }

#gunPanel {
  position: absolute; right: 40px; top: 50%; width: 330px; transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(14, 16, 14, .82), rgba(10, 11, 10, .74));
  border: 1px solid rgba(236, 235, 228, .12); border-left: 2px solid var(--amber);
  padding: 16px 18px 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  animation: stIn .18s ease-out;
}
@keyframes stIn { from { opacity: 0; transform: translate(14px, -50%); } }
.stTop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#stName { font-size: 24px; letter-spacing: .12em; font-weight: 600; line-height: 1.05; }
#stSub { margin-top: 3px; font-size: 12px; letter-spacing: .22em; color: var(--mute); }
#stTier {
  font-size: 11px; letter-spacing: .24em; color: var(--ink);
  border: 1px solid rgba(236, 235, 228, .3); padding: 3px 7px 1px; white-space: nowrap;
}
#stBars { margin-top: 14px; display: grid; grid-template-columns: 112px 1fr 26px; gap: 7px 10px; align-items: center; }
#stBars span { font-size: 12px; letter-spacing: .18em; color: var(--mute); }
#stBars em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink); text-align: right; }
.stBar { height: 5px; background: rgba(255, 255, 255, .1); position: relative; }
.stBar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.stBar::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(10, 11, 10, .9) calc(10% - 2px) 10%);
}
#stNums {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(236, 235, 228, .1);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
#stNums div { display: flex; justify-content: space-between; align-items: baseline; }
#stNums span { font-size: 12px; letter-spacing: .16em; color: var(--mute); }
#stNums b { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.stFoot { margin-top: 12px; font-size: 11px; letter-spacing: .22em; color: var(--mute); text-align: right; }
.stFoot b { display: inline-block; border: 1px solid var(--mute); padding: 1px 5px 0; margin-right: 6px; color: var(--ink); font-weight: 600; }

/* ---------- HUD size and opacity (settings), and the bits the Mac and iPhone builds added ---------- */
:root { --hz: 1; --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --xc: #ecebe4; }
#hud { opacity: var(--ha, 1); }
:is(#compass, #mmWrap, #objective, #killfeed, #ctfBar, #carry, #center, #hint, #useBox, #belt, #cmpCard, #healthBox, #ammoBox, #gunPanel, #death h2, #death p, #popups, #streaks, .scBreath, #fps) { zoom: var(--hz); }
#hud.noCompass #compass, #hud.noMap #mmWrap, #hud.noFeed #killfeed, #hud.noPops #popups, #hud.noFps #fps { display: none; }
#hud.noMap #objective { top: 18px; }
#hud.noVig #cine { display: none; }
#flashOv { position: absolute; inset: 0; background: #fff; opacity: 0; }
#hudGrain { position: absolute; inset: -50%; width: 200%; height: 200%; opacity: 0; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: hgrain .5s steps(5) infinite; }
@keyframes hgrain { 0% { transform: translate(0, 0) } 25% { transform: translate(-2%, 2%) } 50% { transform: translate(2%, -2%) } 75% { transform: translate(-1%, -2%) } 100% { transform: translate(0, 0) } }

/* crosshair styles: CROSS, DOT, CIRCLE, T, in any colour and size, with or without a dark edge */
#crosshair i { background: var(--xc); box-shadow: none; }
#crosshair.ol i { box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .6); }
#crosshair .c { background: none !important; border: var(--xt, 2px) solid var(--xc); border-radius: 50%; display: none; }
#crosshair.ol .c { box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .55); }
#crosshair.s1 :is(.t, .b, .l, .r), #crosshair.s2 :is(.t, .b, .l, .r), #crosshair.s3 .t, #crosshair.s3 .d { display: none; }
#crosshair.s2 .c { display: block; }

/* lethal and tactical, with how many are left */
#gear { margin-top: 10px; display: flex; gap: 14px; align-items: center; }
#gear .gi { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; color: var(--ink); }
#gear .gi svg { width: 20px; height: 20px; }
#gear .gi.off { opacity: .32; }
#gear .gi b { font-weight: 500; }
#gear .gi kbd { font-family: var(--mono); font-size: 9px; color: var(--mute); border: 1px solid rgba(236, 235, 228, .3); padding: 1px 4px 0; border-radius: 2px; }

/* killstreaks: your three, with the kills still needed, lit amber when one is ready */
#streaks { position: absolute; right: 26px; bottom: 150px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#streaks .sk { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; letter-spacing: .14em; color: var(--mute); }
#streaks .sk svg { width: 16px; height: 16px; opacity: .7; }
#streaks .sk b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); }
#streaks .sk.ready { border-color: var(--amber); color: var(--ink); }
#streaks .sk.ready svg { opacity: 1; }
#streaks .sk.ready b { color: var(--amber); }

/* the kill feed: each line a dark panel */
.kf { padding: 6px 10px 4px; border-left: 2px solid rgba(255, 255, 255, .1); }
.kf.you { border-left-color: var(--amber); }

/* control glyphs in prompts: key caps amber, controller face buttons in their own colours */
.gl { display: inline-block; min-width: 18px; padding: 1px 5px 0; margin: 0 6px 0 0; border: 1px solid var(--amber); color: var(--amber); font-family: var(--mono); font-size: .8em; font-weight: 600; text-align: center; letter-spacing: 0; border-radius: 2px; vertical-align: 1px; }
.gl.face { border: 0; border-radius: 50%; width: 1.35em; height: 1.35em; min-width: 0; padding: 0; line-height: 1.38em; background: var(--gc); color: #101010; }
#hint .gl { margin-right: 8px; }
#hint b { display: none; }

/* sentry, mortar and strike markers through walls */
.smark { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-size: 11px; letter-spacing: .2em; color: var(--amber); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); white-space: nowrap; }

/* ---------- loading screen ---------- */
#loading { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(ellipse at 62% 40%, #22241f, #070807 70%); transition: opacity .8s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .lIn { width: min(460px, 82vw); }
#loading h1 { margin: 0; font-size: clamp(64px, 12vw, 112px); line-height: 1; letter-spacing: .02em; font-weight: 700;
  background: linear-gradient(180deg, #fbfaf4 0%, #cfd0c8 46%, #8b8d86 54%, #e3e3dc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#loading .lSub { margin-top: -2px; font-size: 16px; letter-spacing: .5em; color: #c9d48a; }
#loading .lBar { margin-top: 28px; height: 3px; background: rgba(255, 255, 255, .1); }
#loading .lBar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .25s; }
#loading .lLine { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--mute); }
#loading .lTip { margin-top: 26px; min-height: 40px; font-family: var(--mono); font-size: 11px; line-height: 1.7; letter-spacing: .06em; color: rgba(236, 235, 228, .42); }
#loading .lFoot { position: absolute; left: 0; right: 0; bottom: calc(var(--sb) + 18px); text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: rgba(236, 235, 228, .3); }
#loading.err .lBar i { background: var(--red); }
#loadGo { margin-top: 18px; width: 100%; height: 56px; background: var(--amber); color: #15130c; font-size: 26px; letter-spacing: .3em; clip-path: polygon(0 0, 100% 0, 100% 70%, 96% 100%, 0 100%); }
.nojs { position: fixed; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: var(--mute); background: #0b0c0b; z-index: 40; }

/* ---------- touch: the HUD scales for a short screen, edge pieces move in past the notch ---------- */
#touch, #rotate { display: none; }
body.touch { touch-action: none; -webkit-touch-callout: none; }
body.touch #mmWrap { top: 12px; left: calc(var(--sl) / var(--hz) + 14px); }
body.touch #objective { top: 206px; left: calc(var(--sl) / var(--hz) + 18px); }
/* the kill feed runs down the left under the objective, the ammo count sits top right */
body.touch #killfeed { top: 290px; left: calc(var(--sl) / var(--hz) + 18px); right: auto; align-items: flex-start; }
body.touch .kf:nth-child(n+4) { display: none; }
body.touch #ammoBox { top: 14px; bottom: auto; right: calc(var(--sr) / var(--hz) + 22px); pointer-events: auto; }
body.touch #pips, body.touch #fireMode { display: none; }
body.touch #streaks { display: none; }
body.touch #healthBox { left: calc(var(--sl) / var(--hz) + 22px); bottom: calc(var(--sb) / var(--hz) + 18px); width: 250px; }
body.touch #belt { left: calc(var(--sl) / var(--hz) + 22px); bottom: calc(var(--sb) / var(--hz) + 82px); transform: none; pointer-events: auto; }
body.touch .bslot { width: 64px; padding: 12px 8px 9px; grid-template-columns: auto 1fr; }
body.touch .bslot b { display: none; }
body.touch #useBox { bottom: 150px; }
body.touch #carry { bottom: 200px; }
body.touch #hint { display: none; }
body.touch :is(#cmpCard, #gunPanel) { left: calc(var(--sl) / var(--hz) + 230px); right: auto; top: 70px; transform: none; animation: none; }
body.touch.pad #streaks, body.touch.pad #hint { display: block; }
body.touch.ingame:not(.pad):not(.paused) #touch { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#touch .tb { position: absolute; pointer-events: auto; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 14, 13, .42); border: 1.25px solid rgba(236, 235, 228, .3); padding: 0; color: var(--ink); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#touch .tb svg { width: 52%; height: 52%; }
#touch .tb[data-act="fire"] svg { width: 50%; height: 50%; }
#touch .tb[data-act="fire"]::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(236, 235, 228, .12); }
#touch .tb.lit { background: rgba(242, 179, 61, .34); border-color: var(--amber); }
#touch .tb.hide { display: none; }
#touch .tb[data-act="streak"] { border-color: rgba(242, 179, 61, .8); color: var(--amber); }
#touch .tb[data-act="streak"] svg { margin-top: -6px; }
#touch .tb span { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; letter-spacing: .14em; color: var(--amber); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
#tPlate { position: absolute; pointer-events: auto; display: none; text-align: left; padding: 0 0 0 12px; background: rgba(13, 14, 13, .7); border: 1px solid var(--amber); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); color: var(--ink); overflow: hidden; }
#tPlate.on { display: block; }
#tPlate.held { background: rgba(51, 41, 18, .8); }
#tPlate i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(242, 179, 61, .35); }
#tPlate small { position: relative; display: block; margin-top: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--amber); }
#tPlate b { position: relative; display: block; font-size: 18px; letter-spacing: .1em; font-weight: 400; white-space: nowrap; }
#stick { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; display: none; }
#stick.on { display: block; }
#stick svg { width: 100%; height: 100%; overflow: visible; }
#stick .base { fill: rgba(13, 14, 13, .3); stroke: rgba(236, 235, 228, .26); stroke-width: 1.25; }
#stick .ticks { stroke: rgba(236, 235, 228, .26); stroke-width: 1.25; }
#stick .ring { fill: none; stroke: rgba(236, 235, 228, .16); }
#stick .knob { fill: rgba(13, 14, 13, .5); stroke: rgba(236, 235, 228, .55); stroke-width: 1.5; }
#stick .spr { fill: none; stroke: var(--amber); stroke-width: 2; display: none; }
#stick.sprint .base, #stick.sprint .ticks { stroke: rgba(242, 179, 61, .6); }
#stick.sprint .knob { stroke: var(--amber); }
#stick.sprint .spr { display: block; }
@media (orientation: portrait) {
  body.touch #rotate { display: flex; position: fixed; inset: 0; z-index: 50; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #0b0c0b; }
  #rotate b { font-size: 30px; letter-spacing: .2em; font-weight: 600; }
  #rotate span { font-size: 15px; letter-spacing: .16em; color: var(--mute); }
}
/* online: the lobby's rules can switch grenades and killstreaks off */
body.nogear #gear, body.nogear #touch .tb[data-act="lethal"], body.nogear #touch .tb[data-act="tactical"] { display: none !important; }
body.nostreaks #streaks, body.nostreaks #touch .tb[data-act="streak"] { display: none !important; }
/* online: the scoreboard, held on Tab */
#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 92vw); max-height: 86vh; overflow: hidden; background: rgba(10, 11, 10, .84); border: 1px solid rgba(236, 235, 228, .16); padding: 18px 22px 20px; z-index: 6; }
#scoreboard.hidden { display: none; }
#scoreboard .sbt { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--amber); margin-bottom: 12px; }
#scoreboard .sbteam { margin-bottom: 14px; }
#scoreboard .sbn { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--cond); font-size: 22px; letter-spacing: .1em; padding: 4px 10px; border-left: 3px solid rgba(236, 235, 228, .3); }
#scoreboard .sbteam.bl .sbn { border-color: #5cc2ff; color: #b9e3ff; }
#scoreboard .sbteam.rd .sbn { border-color: var(--red); color: #ffb9b3; }
#scoreboard .sbn em { font-style: normal; font-size: 30px; }
#scoreboard .sbh, #scoreboard .sbr { display: grid; grid-template-columns: 1fr 56px 56px 80px 70px; align-items: center; gap: 6px; padding: 0 10px; }
#scoreboard .sbh { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--mute); height: 24px; }
#scoreboard .sbr { height: 30px; font-family: var(--mono); font-size: 13px; border-top: 1px solid rgba(236, 235, 228, .07); }
#scoreboard .sbr b { font-family: var(--cond); font-size: 19px; letter-spacing: .05em; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scoreboard .sbr.me { background: rgba(242, 179, 61, .12); }
#scoreboard .sbr.me b { color: var(--amber); }
#scoreboard .sbr.dead { opacity: .55; }
#scoreboard .sbr.gone { opacity: .35; }
#scoreboard .sbr i, #scoreboard .sbh i { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--mute); text-align: right; }
#scoreboard .sbr span, #scoreboard .sbh span { text-align: right; }