/* Prime - deathmatch.css
   Depot Deathmatch, the arena shooter. A heads up display in the Krunker manner
   (big numbers in the corners, a kill feed, a crosshair that opens with
   spread) dressed in Prime: navy panels, Base blue, the yellow button,
   stencil labels like a shipping label. */

@font-face { font-family:'Bricolage Grotesque'; src:url('../assets/fonts/BricolageGrotesque-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Allerta Stencil'; src:url('../assets/fonts/AllertaStencil-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-800-900.woff2') format('woff2'); font-weight:800 900; font-display:swap; }
@font-face { font-family:'Fragment Mono'; src:url('../assets/fonts/FragmentMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  --blue:#0052FF; --blue-deep:#003ECC; --blue-hi:#3D7DFF;
  --nav:#0A1024; --nav-2:#111A33; --nav-3:#1A2544;
  --yellow:#FFD814; --yellow-hover:#F7CA00;
  --red:#FF2E4D; --stamp:#E0243F; --good:#2EE59D;
  --line:rgba(255,255,255,.14); --muted:rgba(255,255,255,.66);
  --glass:rgba(10,16,36,.62);
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --display:'Bricolage Grotesque', 'Inter', sans-serif;
  --stencil:'Allerta Stencil', 'Inter', sans-serif;
  --mono:'Fragment Mono', 'SF Mono', Menlo, monospace;
  --safe-t:max(14px, env(safe-area-inset-top));
  --safe-r:max(14px, env(safe-area-inset-right));
  --safe-b:max(14px, env(safe-area-inset-bottom));
  --safe-l:max(14px, env(safe-area-inset-left));
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body.dm {
  background:#CFE3F7; color:#fff; font:500 14px/1.45 var(--sans);
  overflow:hidden; overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none; -webkit-font-smoothing:antialiased;
}
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.stencil { font:400 11px/1.2 var(--stencil); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0; }
kbd {
  display:inline-grid; place-items:center; min-width:1.8em; height:1.8em; padding:0 .45em; margin:0 .15em 0 .5em;
  font:400 .78em/1 var(--mono); color:#fff; background:rgba(255,255,255,.08);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:6px;
}
kbd:first-child { margin-left:0; }

#stage { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; display:block; touch-action:none; outline:none; }

/* ---------- loader ---------- */
.loader { position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; background:var(--nav); font-weight:600; z-index:40; transition:opacity .5s var(--ease-out), visibility .5s; }
.loader.done { opacity:0; visibility:hidden; }
.loader .ring { width:38px; height:38px; border-radius:50%; border:4px solid rgba(255,255,255,.2); border-top-color:var(--yellow); animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(1turn); } }

/* ---------- screens ---------- */
.screen {
  position:fixed; inset:0; z-index:20; display:flex; gap:16px; align-items:center; justify-content:center;
  padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  background:linear-gradient(90deg, rgba(10,16,36,.86), rgba(10,16,36,.55) 60%, rgba(10,16,36,.3));
  overflow-y:auto;
}
.panel {
  background:rgba(10,16,36,.9); border:1px solid var(--line); border-radius:14px; padding:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.panel.main { width:min(600px, 100%); display:grid; gap:12px; }
/* title and results: the two panels sit in one grid row, so the side panel always takes the main
   panel's height and both share one top, one bottom and one middle line, centred while they fit */
@media (min-width:900.02px) {
  .screen.title, .screen.over { display:grid; grid-template-columns:minmax(0, 600px) minmax(0, 330px); align-items:stretch; justify-content:center; align-content:safe center; }
  .screen.title .panel, .screen.over .panel { width:auto; }
}
.panel.side { width:min(330px, 100%); align-self:stretch; display:flex; flex-direction:column; gap:10px; min-height:0; }
.panel.narrow { width:min(380px, 100%); display:grid; gap:14px; }
.panel h2 { margin:0; font:800 20px/1.1 var(--display); letter-spacing:-.01em; }

.brand { display:grid; gap:6px; }
.brand .logo { width:72px; height:auto; color:#fff; }
.brand h1 { margin:2px 0 0; font:800 clamp(44px, 8vw, 64px)/.9 var(--display); letter-spacing:-.03em; text-transform:uppercase; color:#fff; }
.brand h1::after { content:''; display:block; width:56px; height:5px; margin-top:10px; background:var(--yellow); border-radius:3px; }
.brand .sub { margin:4px 0 0; color:var(--muted); font-size:15px; max-width:44ch; }

.field { display:grid; gap:6px; }
.field input {
  height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.06);
  font-weight:600; outline:none; -webkit-user-select:text; user-select:text; appearance:none;
}
.field input:focus { border-color:var(--blue-hi); box-shadow:0 0 0 3px rgba(0,82,255,.35); }
.field input::placeholder { color:rgba(255,255,255,.35); }

.pick { display:grid; gap:7px; }
.go { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:end; }
.go .pick { gap:7px; }
.classes { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.class {
  display:grid; gap:2px; text-align:left; padding:10px 12px 9px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); transition:border-color .15s, background .15s, transform .15s var(--ease-out);
}
.class .kind { font:400 10px/1.2 var(--stencil); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.class b { font:800 17px/1.15 var(--display); }
.class .blurb { font-size:12px; color:var(--muted); margin-bottom:3px; }
.class .bar { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:6px; font-size:10px; line-height:1.5; color:var(--muted); }
.class .bar small { font-size:inherit; }
.class .bar i { height:4px; border-radius:2px; background:rgba(255,255,255,.12); position:relative; overflow:hidden; }
.class .bar i::after { content:''; position:absolute; inset:0; width:calc(var(--v) * 100%); background:var(--blue-hi); border-radius:inherit; }
.class[aria-pressed="true"] { border-color:var(--yellow); background:rgba(255,216,20,.08); }
.class[aria-pressed="true"] .bar i::after { background:var(--yellow); }
@media (hover:hover) { .class:hover { border-color:rgba(255,255,255,.4); transform:translateY(-1px); } .class[aria-pressed="true"]:hover { border-color:var(--yellow); } }

/* mode: single player now, multiplayer shown but not open yet */
.modes { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.mode { position:relative; height:40px; border:0; border-radius:9px; background:none; font-weight:800; font-size:14px; color:var(--muted); }
.mode[aria-selected="true"] { background:var(--blue); color:#fff; box-shadow:0 2px 0 var(--blue-deep); }
.mode[aria-disabled="true"] { cursor:not-allowed; color:rgba(255,255,255,.38); }
.mode .tip { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translate(-50%, 4px); padding:6px 10px; border-radius:8px; background:#fff; color:var(--nav);
  font:700 12px/1 var(--sans); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s var(--ease-out); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.mode .tip::after { content:''; position:absolute; left:50%; top:100%; margin-left:-5px; border:5px solid transparent; border-top-color:#fff; }
.mode:focus-visible .tip, .mode.tip-on .tip { opacity:1; transform:translate(-50%, 0); }
@media (hover:hover) { .mode[aria-disabled="true"]:hover .tip { opacity:1; transform:translate(-50%, 0); } .mode[aria-disabled="true"]:hover { background:rgba(255,255,255,.04); } }

.seg { display:inline-flex; padding:3px; gap:3px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid var(--line); width:max-content; }
.seg button { border:0; background:none; padding:8px 16px; border-radius:7px; font-weight:700; color:var(--muted); }
.seg button[aria-pressed="true"] { background:#fff; color:var(--nav); }
.seg.small button { padding:5px 10px; font-size:12px; }

.cta {
  height:50px; border:0; border-radius:12px; background:var(--yellow); color:#0F1111;
  font:800 17px/1 var(--sans); letter-spacing:-.01em; box-shadow:0 3px 0 #C9A800;
  transition:transform .1s, box-shadow .1s, background .15s;
}
.cta:active { transform:translateY(2px); box-shadow:0 1px 0 #C9A800; }
.cta:disabled { opacity:.55; cursor:default; }
.cta.alt { background:var(--blue); color:#fff; box-shadow:0 3px 0 var(--blue-deep); }
@media (hover:hover) { .cta:hover { background:var(--yellow-hover); } .cta.alt:hover { background:var(--blue-hi); } }
.ghost { height:46px; border-radius:12px; border:1px solid var(--line); background:none; font-weight:700; }
@media (hover:hover) { .ghost:hover { background:rgba(255,255,255,.06); } }

.keys { margin:0; font-size:12px; color:var(--muted); line-height:2.1; }
.keys-touch { display:none; }
body.touch .keys-desk { display:none; }
body.touch .keys-touch { display:block; }

.side-head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.lb { flex:1; overflow-y:auto; min-height:120px; }
.lb-note { color:var(--muted); font-size:13px; margin:6px 0; }
.lb-rows, .match { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.lb-rows li, .match li { display:grid; grid-template-columns:28px 1fr auto auto; gap:10px; align-items:center; padding:7px 10px; border-radius:8px; font-size:13px; }
.lb-rows li:nth-child(odd), .match li:nth-child(odd) { background:rgba(255,255,255,.04); }
.lb-rows .rk, .match li span:first-child { font:400 12px var(--mono); color:var(--muted); }
.lb-rows .nm, .match li span:nth-child(2) { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-rows .kd { font:400 12px var(--mono); color:var(--muted); }
.lb-rows .sc, .match li span:last-child { font:400 13px var(--mono); }
.lb-rows .top .rk { color:var(--yellow); }
.lb-rows .me, .match .me { background:rgba(0,82,255,.3) !important; }
.match li { grid-template-columns:28px 1fr auto; }
.back { margin-top:auto; align-self:flex-start; color:var(--muted); text-decoration:none; font-weight:700; font-size:13px; padding:8px 0; }
.back::before { content:'← '; }
@media (hover:hover) { .back:hover { color:#fff; } }

/* over */
.over .panel.main h2 { font:800 clamp(28px, 5vw, 40px)/1 var(--display); letter-spacing:-.02em; }
.place { display:flex; align-items:baseline; gap:8px; }
.place b { font:800 64px/1 var(--display); color:var(--yellow); }
.place span { font:400 13px var(--stencil); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.stats div { padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.stats small { display:block; font:400 10px var(--stencil); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.stats b { font:800 22px/1.2 var(--display); }
.save { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; }
.save .cta { height:44px; padding:0 18px; font-size:15px; }
.save-msg { grid-column:1 / -1; margin:0; min-height:1.4em; font-size:13px; color:var(--muted); }
.row-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* pause */
.slider { display:grid; gap:6px; }
.slider span { display:flex; justify-content:space-between; font-weight:600; }
.slider b { font:400 13px var(--mono); color:var(--muted); }
.slider input { width:100%; accent-color:var(--yellow); }

/* ---------- the heads up display ---------- */
.hud { position:fixed; inset:0; pointer-events:none; z-index:10; font-variant-numeric:tabular-nums; }
.hud .top { position:absolute; top:var(--safe-t); left:50%; transform:translateX(-50%); display:grid; justify-items:center; gap:6px; }
.timer { font:800 26px/1 var(--display); padding:6px 14px; border-radius:10px; background:var(--glass); letter-spacing:.02em; }
.scoreline { display:flex; gap:8px; align-items:center; font-size:12px; font-weight:700; padding:5px 10px; border-radius:9px; background:var(--glass); white-space:nowrap; }
.scoreline b { font:800 18px/1 var(--display); color:var(--yellow); }
.scoreline span + span::before { content:'·'; margin-right:8px; color:var(--muted); }

.feed { position:absolute; top:var(--safe-t); right:var(--safe-r); margin:0; padding:0; list-style:none; display:grid; gap:4px; justify-items:end; max-width:46vw; }
.feed li { display:flex; gap:8px; align-items:center; padding:5px 10px; border-radius:8px; background:var(--glass); font-size:13px; transition:opacity .6s; animation:feedIn .25s var(--ease-out); white-space:nowrap; }
.feed li.out { opacity:0; }
.feed b { font-weight:700; }
.feed b.me { color:var(--yellow); }
.feed i { font:400 10px var(--stencil); letter-spacing:.1em; text-transform:uppercase; color:#9DBBFF; font-style:normal; }
@keyframes feedIn { from { transform:translateX(16px); opacity:0; } }

.health { position:absolute; left:var(--safe-l); bottom:var(--safe-b); display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px; background:var(--glass); }
.health b { font:800 34px/1 var(--display); min-width:2.2ch; }
.hpbar { width:min(220px, 30vw); height:12px; border-radius:6px; background:rgba(255,255,255,.14); overflow:hidden; }
.hpbar i { display:block; height:100%; background:var(--good); transform-origin:left; transition:transform .12s; }
.hud.low .hpbar i { background:var(--red); }
.hud.low .health b { color:var(--red); }

.ammo { position:absolute; right:var(--safe-r); bottom:var(--safe-b); text-align:right; padding:10px 14px; border-radius:12px; background:var(--glass); }
.ammo div { display:flex; align-items:baseline; justify-content:flex-end; gap:4px; }
.ammo b { font:800 40px/1 var(--display); }
.ammo span, .ammo small { color:var(--muted); font:800 18px var(--display); }
.ammo p { margin:2px 0 0; font:400 11px var(--stencil); letter-spacing:.14em; text-transform:uppercase; }
.ammo .sec { color:var(--muted); font-size:10px; }

/* crosshair: four ticks that sit --gap from the middle */
.xhair { position:absolute; left:50%; top:50%; width:0; height:0; --gap:8px; transition:opacity .1s; }
.xhair i { position:absolute; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.45); }
.xhair i:nth-child(1), .xhair i:nth-child(2) { width:2px; height:9px; left:-1px; }
.xhair i:nth-child(1) { bottom:var(--gap); } .xhair i:nth-child(2) { top:var(--gap); }
.xhair i:nth-child(3), .xhair i:nth-child(4) { height:2px; width:9px; top:-1px; }
.xhair i:nth-child(3) { right:var(--gap); } .xhair i:nth-child(4) { left:var(--gap); }
.xhair b { position:absolute; width:2px; height:2px; left:-1px; top:-1px; background:var(--yellow); }

.reload-ring { position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; opacity:0; --r:0;
  background:conic-gradient(var(--yellow) calc(var(--r) * 1turn), rgba(255,255,255,.18) 0); -webkit-mask:radial-gradient(circle, transparent 17px, #000 18px); mask:radial-gradient(circle, transparent 17px, #000 18px); }
.reload-ring.on { opacity:.9; }

.hitmark { position:absolute; left:50%; top:50%; width:0; height:0; opacity:0; }
.hitmark.on { opacity:1; }
.hitmark i { position:absolute; width:10px; height:2px; background:#fff; left:-5px; top:-1px; box-shadow:0 0 0 1px rgba(0,0,0,.35); }
.hitmark i:nth-child(1) { transform:rotate(45deg) translateX(-11px); } .hitmark i:nth-child(2) { transform:rotate(45deg) translateX(11px); }
.hitmark i:nth-child(3) { transform:rotate(-45deg) translateX(-11px); } .hitmark i:nth-child(4) { transform:rotate(-45deg) translateX(11px); }
.hitmark.head i { background:var(--yellow); }
.hitmark.kill i { background:var(--red); width:14px; left:-7px; }

/* the takedown stamp */
.stamp { position:absolute; left:50%; top:30%; transform:translate(-50%, -50%) rotate(-6deg); display:grid; justify-items:center; opacity:0;
  padding:6px 18px 8px; border:4px solid var(--stamp); border-radius:6px; color:var(--stamp); background:rgba(255,253,248,.92); }
.stamp span { font:400 30px/1 var(--stencil); letter-spacing:.08em; text-transform:uppercase; }
.stamp small { font:700 13px/1.3 var(--sans); color:#0F1111; }
.stamp.on { animation:stamp 1.5s var(--ease-out) forwards; }
@keyframes stamp {
  0% { opacity:0; transform:translate(-50%, -50%) rotate(-6deg) scale(1.9); }
  12% { opacity:1; transform:translate(-50%, -50%) rotate(-6deg) scale(1); }
  75% { opacity:1; transform:translate(-50%, -50%) rotate(-6deg) scale(1); }
  100% { opacity:0; transform:translate(-50%, -50%) rotate(-6deg) scale(.96); }
}
.medal { position:absolute; left:50%; top:39%; transform:translateX(-50%); font:800 20px/1 var(--display); color:var(--yellow); text-shadow:0 2px 0 rgba(0,0,0,.35); opacity:0; white-space:nowrap; }
.medal.on { animation:medal 1.8s var(--ease-out) forwards; }
@keyframes medal { 0% { opacity:0; transform:translate(-50%, 8px); } 12%, 75% { opacity:1; transform:translate(-50%, 0); } 100% { opacity:0; } }

/* where the hit came from: an arc round the crosshair */
.dmg { position:absolute; left:50%; top:50%; width:220px; height:220px; margin:-110px 0 0 -110px; border-radius:50%; opacity:0;
  transform:rotate(var(--a)); background:conic-gradient(from -22deg, rgba(255,46,77,.85) 0 44deg, transparent 0);
  -webkit-mask:radial-gradient(circle, transparent 92px, #000 94px, #000 104px, transparent 106px); mask:radial-gradient(circle, transparent 92px, #000 94px, #000 104px, transparent 106px); }
.dmg.on { animation:dmg 1s ease-out forwards; }
@keyframes dmg { 0% { opacity:var(--o); } 100% { opacity:0; } }

.vignette { position:fixed; inset:0; pointer-events:none; z-index:9; opacity:0; transition:opacity .2s;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(204,12,57,.55) 100%); }
.scope { position:fixed; inset:0; pointer-events:none; z-index:9; display:none;
  background:radial-gradient(circle at center, transparent 0, transparent min(36vh, 36vw), #05070D calc(min(36vh, 36vw) + 1px)); }
.scope.on { display:block; }
.scope i { position:absolute; left:50%; top:50%; width:min(72vh, 72vw); height:min(72vh, 72vw); transform:translate(-50%, -50%); border-radius:50%;
  background:linear-gradient(#0A1024, #0A1024) center / 2px 100% no-repeat, linear-gradient(#0A1024, #0A1024) center / 100% 2px no-repeat; box-shadow:inset 0 0 0 4px #0A1024; }
.scope i::after { content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:var(--red); }

.death { position:fixed; left:50%; top:58%; transform:translateX(-50%); z-index:11; text-align:center; pointer-events:none;
  padding:16px 26px; border-radius:14px; background:rgba(10,16,36,.78); display:grid; gap:4px; }
.death .stencil { font-size:22px; color:var(--stamp); letter-spacing:.1em; }
.death p { margin:0; font-weight:600; }
.death .again { color:var(--muted); font-size:13px; }

.board { position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); z-index:12; width:min(640px, calc(100vw - 28px)); padding:18px; border-radius:14px; background:rgba(10,16,36,.9); border:1px solid var(--line); }
.board h2 { margin:0 0 10px; font:800 18px var(--display); }
.board table { width:100%; border-collapse:collapse; font-size:13px; }
.board th { text-align:left; font:400 10px var(--stencil); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:6px 8px; }
.board td { padding:7px 8px; border-top:1px solid var(--line); }
.board td:nth-child(n+4), .board th:nth-child(n+4) { text-align:right; font-family:var(--mono); }
.board tr.me td { background:rgba(0,82,255,.3); }
.board tr.down td { opacity:.55; }

/* ---------- touch ---------- */
.touchui { display:none; }
body.touch[data-state="play"] .touchui { display:block; }
.touchui .stick { position:fixed; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:2px solid rgba(255,255,255,.35); background:rgba(10,16,36,.25); z-index:15; opacity:0; pointer-events:none; left:22vw; top:70vh; transition:opacity .15s; }
.touchui .stick.on { opacity:1; }
.touchui .stick i { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px; border-radius:50%; background:rgba(255,255,255,.75); }
.tb { position:fixed; z-index:15; width:58px; height:58px; border-radius:50%; border:2px solid rgba(255,255,255,.4); background:rgba(10,16,36,.45); font:700 11px var(--sans); color:#fff; touch-action:none; }
.tb.on { background:var(--yellow); color:#0F1111; border-color:var(--yellow); }
.t-fire { width:80px; height:80px; right:calc(var(--safe-r) + 70px); bottom:calc(var(--safe-b) + 36px); font-size:14px; background:rgba(204,12,57,.55); }
.t-jump { right:var(--safe-r); bottom:calc(var(--safe-b) + 108px); }
.t-crouch { right:var(--safe-r); bottom:calc(var(--safe-b) + 36px); }
.t-ads { right:calc(var(--safe-r) + 160px); bottom:calc(var(--safe-b) + 96px); }
.t-reload { right:calc(var(--safe-r) + 160px); bottom:calc(var(--safe-b) + 26px); }
.t-swap { right:calc(var(--safe-r) + 82px); bottom:calc(var(--safe-b) + 128px); }
.t-pause { top:var(--safe-t); left:var(--safe-l); width:42px; height:42px; }
body.touch .ammo { bottom:auto; top:calc(var(--safe-t) + 52px); left:var(--safe-l); right:auto; text-align:left; padding:6px 10px; }
body.touch .ammo div { justify-content:flex-start; }
body.touch .ammo b { font-size:28px; }
body.touch .health { left:50%; transform:translateX(-50%); padding:6px 10px; }
body.touch .health b { font-size:22px; }
body.touch .feed { top:calc(var(--safe-t) + 4px); font-size:11px; }

@media (max-width:900px) {
  .screen { flex-direction:column; justify-content:flex-start; }
  .panel.side { max-height:none; width:min(560px, 100%); }
  .brand h1 { font-size:48px; }
}
/* an arena shooter wants the phone sideways */
.turn { display:none; }
@media (orientation:portrait) {
  body.touch[data-state="play"] .turn { display:grid; position:fixed; inset:0; z-index:30; place-content:center; text-align:center; gap:8px; padding:24px; background:rgba(10,16,36,.92); font:800 22px/1.2 var(--display); }
  body.touch[data-state="play"] .turn small { font:500 14px var(--sans); color:var(--muted); }
}
@media (max-width:520px) {
  .go { grid-template-columns:1fr; }
  .go .cta { width:100%; }
  .classes { grid-template-columns:1fr 1fr; }
  .class .blurb { display:none; }
  .stats { grid-template-columns:repeat(2, 1fr); }
  .panel { padding:16px; }
  .hpbar { width:90px; }
  .scoreline span:nth-child(n+3) { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .stamp.on, .medal.on { animation-duration:1.2s; }
}