:root {
  --dark: #031F19; --green: #00DCB0; --mint: #CDFFEA; --white: #FFFFFF; --off: #FFF3F1;
  --lpeach: #FFE5E2; --peach: #FEBDBD; --dpeach: #FF8B8B; --brown: #B18187; --dbrown: #590F19;
  --line: 2px solid var(--dark);
  /* the notch, the rounded corners and the home bar of a phone */
  --st: env(safe-area-inset-top, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--mint); color: var(--dark);
  font: 500 14px/1.35 "Another Sans", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: manipulation; }
canvas#view { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
[hidden] { display: none !important; }
kbd { font: inherit; font-weight: 600; background: var(--white); border: 1.5px solid var(--dark); border-radius: 6px; padding: 0 5px; margin-right: 4px; }
h1, h2 { font-weight: 600; letter-spacing: -0.03em; margin: 0; }
mark { background: var(--mint); color: inherit; font-weight: 400; padding: 0 0.12em; border-left: 2px solid var(--dpeach); border-right: 2px solid var(--dpeach); }
button, select, input { font: inherit; color: var(--dark); }
button { background: var(--off); border: var(--line); border-radius: 12px; padding: 9px 16px; cursor: pointer; }
button:hover { background: var(--lpeach); }
button.primary { background: var(--green); font-weight: 600; font-size: 18px; padding: 14px 20px; width: 100%; }
button.primary:hover { background: #2ee6c0; }
button:disabled { opacity: 0.6; cursor: default; }
.small { font-size: 12px; opacity: 0.75; }
.card { background: var(--off); border: var(--line); border-radius: 28px; padding: 26px 28px; box-shadow: 0 10px 0 rgba(3, 31, 25, 0.14); }

/* ---------- menu */
#menu { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(205, 255, 234, 0.35); z-index: 20; overflow: auto; }
#menu .card { width: min(560px, 100%); display: grid; gap: 16px; }
#menu h1 { line-height: 0; }
#menu h1 img { display: block; width: 100%; height: auto; border-radius: 16px; border: var(--line); }
.eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.lede { margin: 0; font-size: 16px; }
.field { display: grid; gap: 6px; font-size: 12px; }
.field input { border: var(--line); border-radius: 12px; padding: 11px 14px; font-size: 16px; background: var(--white); user-select: text; -webkit-user-select: text; }
.teams { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tbtn { display: grid; gap: 2px; padding: 10px; font-weight: 600; }
.tbtn small { font-weight: 500; font-size: 11px; opacity: 0.7; }
.tbtn.t0[aria-pressed="true"] { background: var(--mint); }
.tbtn.t1[aria-pressed="true"] { background: var(--peach); }
.tbtn.auto[aria-pressed="true"] { background: var(--white); }
.tbtn[aria-pressed="true"] { box-shadow: 0 4px 0 var(--dark); transform: translateY(-2px); }
.keys { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.keys span { white-space: nowrap; }
.tkeys { display: none; font-size: 12px; }
body.touch .keys { display: none; }
body.touch .tkeys { display: block; }

/* ---------- hud */
#notice { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 30; pointer-events: none; text-align: center; background: var(--dpeach); border: var(--line); border-radius: 16px; padding: 8px 22px; box-shadow: 0 6px 0 rgba(3, 31, 25, 0.14); }
#notice b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#notice small { display: block; font-size: 12px; opacity: 0.8; }
#openUi { display: grid; gap: 16px; }
#closed { display: grid; gap: 6px; text-align: center; background: var(--lpeach); border: var(--line); border-radius: 18px; padding: 18px 16px; }
#closed h2 { font-size: 26px; }
#closed p { margin: 0; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#scorebar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 8px; }
#scorebar .team { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; border: var(--line); border-radius: 14px; min-width: 170px; overflow: hidden; }
#scorebar .t0 { background: var(--mint); justify-content: flex-end; }
#scorebar .t1 { background: var(--peach); }
#scorebar .tname { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
#scorebar .tscore { font-size: 26px; font-weight: 700; line-height: 1; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
#scorebar .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(3, 31, 25, 0.12); }
#scorebar .bar b { position: absolute; top: 0; bottom: 0; width: 0; background: var(--dark); transition: width 0.3s; }
#scorebar .t0 .bar b { right: 0; }
#clock { background: var(--off); border: var(--line); border-radius: 14px; padding: 6px 14px; font-size: 22px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; min-width: 84px; }
#clock.low { background: var(--dpeach); }

#minimap { position: absolute; top: 12px; left: 12px; width: 180px; height: 180px; border: var(--line); border-radius: 50%; background: var(--off); }
#feed { position: absolute; top: 12px; right: 12px; display: grid; gap: 4px; justify-items: end; }
.kf { background: rgba(255, 243, 241, 0.92); border: 1.5px solid var(--dark); border-radius: 10px; padding: 3px 10px; font-size: 13px; display: flex; gap: 8px; align-items: center; animation: kfin 0.18s ease-out; }
.kf.me { background: var(--white); border-width: 2.5px; }
.kf b { font-weight: 600; }
.kf .n0 { color: #007f66; } .kf .n1 { color: #c2484d; }
.kf .w { font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; }
.kf .hs { background: var(--dark); color: var(--mint); border-radius: 6px; padding: 0 5px; font-size: 10px; }
@keyframes kfin { from { transform: translateX(20px); opacity: 0; } }

#announce { position: absolute; top: 22%; left: 0; right: 0; text-align: center; }
#announce .a { display: inline-block; background: var(--off); border: var(--line); border-radius: 16px; padding: 6px 20px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; animation: pop 2.4s ease-out forwards; }
#announce .a.big { font-size: 34px; background: var(--green); }
#announce .a small { display: block; font-size: 12px; font-weight: 500; opacity: 0.75; letter-spacing: 0; }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 8% { transform: scale(1.12); opacity: 1; } 14% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

#crosshair { position: absolute; left: 50%; top: 50%; --gap: 6px; }
#crosshair i { position: absolute; background: var(--white); outline: 1.5px solid var(--dark); border-radius: 1px; }
#crosshair i:nth-child(1) { width: 2.5px; height: 9px; left: -1.25px; bottom: var(--gap); }
#crosshair i:nth-child(2) { width: 2.5px; height: 9px; left: -1.25px; top: var(--gap); }
#crosshair i:nth-child(3) { height: 2.5px; width: 9px; top: -1.25px; right: var(--gap); }
#crosshair i:nth-child(4) { height: 2.5px; width: 9px; top: -1.25px; left: var(--gap); }
#crosshair b { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; background: var(--white); outline: 1.5px solid var(--dark); border-radius: 50%; }
#crosshair.enemy i, #crosshair.enemy b { background: var(--dpeach); }
#hitmarker { position: absolute; left: 50%; top: 50%; opacity: 0; transform: rotate(45deg); }
#hitmarker i { position: absolute; background: var(--white); outline: 1.5px solid var(--dark); }
#hitmarker i:nth-child(1) { width: 3px; height: 10px; left: -1.5px; bottom: 7px; }
#hitmarker i:nth-child(2) { width: 3px; height: 10px; left: -1.5px; top: 7px; }
#hitmarker i:nth-child(3) { height: 3px; width: 10px; top: -1.5px; right: 7px; }
#hitmarker i:nth-child(4) { height: 3px; width: 10px; top: -1.5px; left: 7px; }
#hitmarker.head i { background: var(--green); }
#hitmarker.kill i { background: var(--dpeach); }
#dmgdir { position: absolute; left: 50%; top: 50%; }
#dmgdir .d { position: absolute; left: -90px; top: -170px; width: 180px; height: 34px; transform-origin: 90px 170px; animation: fade 1.1s forwards;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 139, 139, 0.95), rgba(255, 139, 139, 0) 70%); border-radius: 50% 50% 0 0; }
@keyframes fade { to { opacity: 0; } }
#numbers { position: absolute; inset: 0; overflow: hidden; }
.dn { position: absolute; font-weight: 700; font-size: 20px; color: var(--white); -webkit-text-stroke: 4px var(--dark); paint-order: stroke fill; animation: dn 0.8s ease-out forwards; }
.dn.head { color: var(--green); font-size: 26px; }
@keyframes dn { from { transform: translate(-50%, 0) scale(1.3); } to { transform: translate(-50%, -46px) scale(1); opacity: 0; } }
#scope { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, transparent 0, transparent 32vh, var(--dark) 32.4vh); }
#scope .lens { position: absolute; left: 50%; top: 50%; width: 64vh; height: 64vh; transform: translate(-50%, -50%); border-radius: 50%;
  background: linear-gradient(var(--dark), var(--dark)) 50% 50% / 1.5px 100% no-repeat, linear-gradient(var(--dark), var(--dark)) 50% 50% / 100% 1.5px no-repeat; box-shadow: inset 0 0 0 3px var(--green); }
#vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(255, 139, 139, 0.75)); transition: opacity 0.25s; }
#flash { position: absolute; inset: 0; background: var(--white); opacity: 0; }

#vitals { position: absolute; left: 14px; bottom: 14px; display: grid; gap: 6px; background: rgba(255, 243, 241, 0.92); border: var(--line); border-radius: 16px; padding: 10px 14px; min-width: 270px; }
.vrow { display: grid; grid-template-columns: 52px 1fr 34px; align-items: center; gap: 8px; }
.vlabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.vbar { display: block; height: 14px; border: 1.5px solid var(--dark); border-radius: 7px; background: var(--white); overflow: hidden; }
.vbar b { display: block; height: 100%; width: 100%; transition: width 0.15s; }
.vbar.hp b { background: var(--green); } .vbar.hp.low b { background: var(--dpeach); }
.vbar.sh b { background: var(--mint); }
.vnum { font-weight: 700; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
#boost { background: var(--green); border: 1.5px solid var(--dark); border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-align: center; }

#arsenal { position: absolute; right: 14px; bottom: 14px; text-align: right; background: rgba(255, 243, 241, 0.92); border: var(--line); border-radius: 16px; padding: 10px 14px; min-width: 230px; }
#ammo { font-variant-numeric: tabular-nums; line-height: 1; }
#ammoNow { font-size: 40px; font-weight: 700; }
#ammoNow.low { color: #c2484d; }
#ammoMag { font-size: 16px; opacity: 0.6; margin-left: 4px; }
#wname { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-bottom: 6px; }
#slots { display: grid; gap: 3px; }
.slot { font-size: 12px; padding: 2px 8px; border-radius: 8px; border: 1.5px solid transparent; opacity: 0.65; }
.slot.on { background: var(--mint); border-color: var(--dark); opacity: 1; font-weight: 600; }
.slot.pods { opacity: 1; }
#reloadbar { height: 5px; margin-top: 8px; border-radius: 3px; background: rgba(3, 31, 25, 0.12); overflow: hidden; opacity: 0; }
#reloadbar b { display: block; height: 100%; width: 0; background: var(--dark); }

#chat { position: absolute; left: 14px; bottom: 108px; width: 340px; display: grid; gap: 6px; }
#chatlog { display: grid; gap: 2px; font-size: 13px; }
#chatlog div { background: rgba(255, 243, 241, 0.86); border-radius: 8px; padding: 2px 8px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; animation: chatfade 9s forwards; }
#chatlog .sys { opacity: 0.7; font-style: italic; }
#chatlog b.n0 { color: #007f66; } #chatlog b.n1 { color: #c2484d; }
@keyframes chatfade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
#chat.open #chatlog div { animation: none; opacity: 1; }
#chatin { pointer-events: auto; border: var(--line); border-radius: 10px; padding: 7px 10px; background: var(--white); user-select: text; -webkit-user-select: text; }
#hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(255, 243, 241, 0.9); border: 1.5px solid var(--dark); border-radius: 10px; padding: 4px 12px; font-size: 12px; max-width: 46vw; text-align: center; transition: opacity 1s; }

#respawn, #board, #endscreen, #pause { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
#respawn { align-items: end; padding-bottom: 20vh; }
#respawn .card { text-align: center; padding: 14px 34px; }
#respawn .big { font-size: 54px; font-weight: 700; line-height: 1; }
#board .card, #endscreen .card { width: min(820px, 100%); display: grid; gap: 12px; }
#endscreen .card { text-align: center; }
#endscreen h1 { font-size: 52px; }
#endMvp { font-size: 16px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1.5px solid var(--dark); border-radius: 14px; overflow: hidden; font-size: 13px; }
th, td { padding: 4px 10px; text-align: right; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
table.t0 thead { background: var(--mint); } table.t1 thead { background: var(--peach); }
tbody tr:nth-child(odd) { background: var(--white); }
tr.me td { font-weight: 700; }
td .bot { font-size: 10px; opacity: 0.55; margin-left: 6px; }
#pause { pointer-events: auto; background: rgba(205, 255, 234, 0.45); }
#pause .card { width: min(420px, 100%); display: grid; gap: 12px; }
#pause label { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 10px; font-size: 13px; }
#pause label.check { display: flex; gap: 8px; }
#pause label.check input { width: 16px; height: 16px; accent-color: currentColor; }
#pause select { border: var(--line); border-radius: 10px; padding: 6px 8px; background: var(--white); }
#pause .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
input[type="range"] { accent-color: var(--green); }

@media (max-width: 900px) {
  #minimap { width: 120px; height: 120px; }
  #scorebar .team { min-width: 0; padding: 4px 10px 8px; }
  #scorebar .tname, #hint { display: none; }
  #vitals { min-width: 200px; }
}
@media (max-width: 900px) and (orientation: portrait) { .cols { grid-template-columns: 1fr; } }

/* ---------- short screens (a phone on its side): everything has to fit in about 360 px of height */
@media (max-height: 520px) {
  .card { padding: 14px 18px; border-radius: 20px; box-shadow: 0 6px 0 rgba(3, 31, 25, 0.14); }
  #menu { padding: calc(8px + var(--st)) calc(12px + var(--sr)) calc(8px + var(--sb)) calc(12px + var(--sl)); place-items: start center; }
  #menu .card { width: min(680px, 100%); grid-template-columns: 1fr 1.25fr; gap: 8px 16px; align-items: center; margin: auto; }
  #menu .eyebrow { display: none; }
  #menu h1 { grid-row: span 3; align-self: center; }
  #menu .lede { font-size: 13px; }
  #openUi { gap: 8px; grid-column: 2; grid-row: 1 / span 3; }
  #closed { grid-column: 2; }
  .tbtn { padding: 6px; }
  .field input { padding: 7px 12px; }
  button.primary { padding: 10px 16px; }
  #share { display: none; }
  #pause, #board, #endscreen { padding: calc(6px + var(--st)) calc(12px + var(--sr)) calc(6px + var(--sb)) calc(12px + var(--sl)); overflow: auto; }
  #pause .card { width: min(640px, 100%); grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  #pause .card > h2, #pause .card > .primary, #pause .card > .small { grid-column: 1 / -1; }
  #pause .card > h2 { font-size: 16px; }
  #board .card, #endscreen .card { gap: 6px; }
  #board h2 { display: none; }
  #endscreen h1 { font-size: 28px; }
  th, td { padding: 2px 8px; font-size: 12px; }
  #respawn { padding-bottom: 30vh; }
  #respawn .card { padding: 8px 24px; }
  #respawn .big { font-size: 34px; }
  #announce { top: 17%; }
  #announce .a { font-size: 16px; padding: 4px 14px; }
  #announce .a.big { font-size: 22px; }
  #notice { top: calc(52px + var(--st)); padding: 5px 16px; }
  #notice b { font-size: 16px; }
}

/* ---------- touch: phones and tablets (body.touch is set by main.js) */
#touch { position: absolute; inset: 0; pointer-events: none; touch-action: none; }
#tPad { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
/* the move stick rests bottom left as a hint and jumps to wherever the left thumb lands */
#tStick { position: absolute; left: calc(92px + var(--sl)); top: calc(100% - 104px - var(--sb)); width: 112px; height: 112px; margin: -56px 0 0 -56px;
  border-radius: 50%; border: var(--line); background: rgba(255, 243, 241, 0.3); opacity: 0.45; pointer-events: none; transition: opacity 0.12s; }
#tStick.on { opacity: 1; }
#tStick i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: var(--off); border: var(--line); }
#tStick.sprint i { background: var(--green); }
.tb { position: absolute; pointer-events: auto; touch-action: none; display: grid; place-items: center; align-content: center; padding: 0; border-radius: 50%;
  border: var(--line); background: rgba(255, 243, 241, 0.74); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1; }
.tb:hover { background: rgba(255, 243, 241, 0.74); }
.tb.down, .tb.on, .tb.down:hover, .tb.on:hover { background: var(--green); }
.tb small { display: block; font-size: 8px; letter-spacing: 0.1em; }
.tb.empty { opacity: 0.45; }
#tFire { width: 82px; height: 82px; right: calc(26px + var(--sr)); bottom: calc(56px + var(--sb)); font-size: 14px; background: rgba(254, 189, 189, 0.82); }
#tFire:hover { background: rgba(254, 189, 189, 0.82); }
#tFire.down { background: var(--dpeach); }
#tJump { width: 58px; height: 58px; right: calc(14px + var(--sr)); bottom: calc(150px + var(--sb)); }
#tAim { width: 58px; height: 58px; right: calc(120px + var(--sr)); bottom: calc(22px + var(--sb)); }
#tReload { width: 50px; height: 50px; right: calc(124px + var(--sr)); bottom: calc(92px + var(--sb)); font-size: 9px; }
#tPod { width: 50px; height: 50px; right: calc(86px + var(--sr)); bottom: calc(152px + var(--sb)); }
.tb.sm { position: absolute; width: auto; min-width: 44px; height: 34px; padding: 0 10px; border-radius: 11px; font-size: 10px; }
#tPause { top: calc(8px + var(--st)); right: calc(8px + var(--sr)); }
#tBoard { top: calc(8px + var(--st)); right: calc(60px + var(--sr)); }
#tEmote { top: calc(8px + var(--st)); right: calc(128px + var(--sr)); }
#tPause .bars { display: block; width: 10px; height: 12px; border-left: 3.5px solid var(--dark); border-right: 3.5px solid var(--dark); }
#tEmotes { position: absolute; top: calc(48px + var(--st)); right: calc(8px + var(--sr)); display: flex; gap: 6px; pointer-events: none; }
#tEmotes .tb { position: static; background: var(--off); }

body.touch #hint, body.touch #chatin { display: none !important; }
body.touch #minimap { width: 92px; height: 92px; top: calc(8px + var(--st)); left: calc(8px + var(--sl)); }
body.touch #scorebar { top: calc(8px + var(--st)); gap: 5px; }
body.touch #scorebar .team { min-width: 0; padding: 3px 9px 7px; border-radius: 11px; }
body.touch #scorebar .tname { display: none; }
body.touch #scorebar .tscore { font-size: 20px; min-width: 26px; }
body.touch #clock { font-size: 16px; min-width: 60px; padding: 3px 9px; border-radius: 11px; }
body.touch #feed { top: calc(50px + var(--st)); right: calc(8px + var(--sr)); }
body.touch .kf { font-size: 11px; padding: 1px 8px; gap: 6px; }
body.touch .kf .w { font-size: 9px; }
body.touch #chat { left: calc(8px + var(--sl)); top: calc(108px + var(--st)); bottom: auto; width: 230px; }
body.touch #chatlog { font-size: 11px; }
/* health and ammo sit side by side at the bottom, between the thumbs; the pair is centred on the screen */
body.touch #vitals { left: calc(50% - 68px); bottom: calc(8px + var(--sb)); transform: translateX(-100%); min-width: 0; width: 112px; padding: 5px 8px; gap: 3px; border-radius: 12px; }
body.touch .vrow { grid-template-columns: 1fr 24px; gap: 6px; }
body.touch .vlabel { display: none; }
body.touch .vbar { height: 9px; }
body.touch .vnum { font-size: 13px; }
body.touch #boost { font-size: 10px; padding: 1px 6px; }
body.touch #arsenal { left: calc(50% - 62px); right: auto; bottom: calc(8px + var(--sb)); min-width: 0; padding: 4px 6px 6px 10px; border-radius: 12px; display: flex; align-items: center; gap: 8px; text-align: left; }
body.touch #wname, body.touch .slot kbd, body.touch .slot.pods { display: none; }
body.touch #ammo { white-space: nowrap; min-width: 52px; }
body.touch #ammoNow { font-size: 22px; }
body.touch #ammoMag { font-size: 10px; margin-left: 2px; }
body.touch #slots { display: flex; gap: 3px; }
body.touch .slot { pointer-events: auto; touch-action: none; font-size: 0; padding: 9px 5px; border-radius: 9px; }
body.touch .slot img { display: block; height: 9px; margin: 0; }
body.touch #reloadbar { position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; margin: 0; }
body.touch #dmgdir .d { left: -60px; top: -110px; width: 120px; height: 24px; transform-origin: 60px 110px; }
@media (max-width: 740px) {   /* small phones: health above the weapons, both centred, clear of the buttons */
  body.touch #vitals { left: 46%; transform: translateX(-50%); bottom: calc(60px + var(--sb)); }
  body.touch #arsenal { left: 46%; transform: translateX(-50%); }
  body.touch #tEmote { display: none; }
}

/* upright phone: ask for landscape instead of showing a layout nobody can play */
#rotate { display: none; position: fixed; inset: 0; z-index: 50; place-items: center; padding: 24px; background: var(--mint); text-align: center; }
#rotate .card { display: grid; gap: 10px; justify-items: center; max-width: 320px; }
#rotate p { margin: 0; }
@media (orientation: portrait) { body.touch #rotate { display: grid; } }

/* ?lab: the bare arena for measurements */
body.lab #menu, body.lab #hud, body.lab #notice { display: none !important; }
.slot img { height: 13px; vertical-align: -2px; margin: 0 5px 0 2px; }