:root {
  --chalk: #FFF6E2;
  --plum: #3A2340;
  --coral: #FF6B5B;
  --lemon: #FFD84D;
  --mint: #7BE0B0;
  --gum: #FF9FD0;
  --turq: #2FC4C4;
  --hazard: #FF8A2B;
  --sky-top: #7FD8E8;
  --sky-haze: #FFE9C4;
  --bw: #C99A6B;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--plum); }
body {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.hidden { display: none !important; }

#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------- generic painted sign ---------------- */
.sign {
  background: var(--chalk);
  border: 4px solid var(--chalk);
  border-radius: 10px;
  box-shadow: 5px 6px 0 0 var(--plum);
  color: var(--plum);
}

/* ---------------- HUD ---------------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.hud-el { position: absolute; }
#fx-layer { position: absolute; inset: 0; overflow: hidden; }

.label-font {
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--chalk); text-shadow: 2px 2px 0 var(--plum);
}

/* roster top-left */
#roster { top: 14px; left: 14px; display: flex; gap: 8px; align-items: flex-start; }
.pennant {
  position: relative; width: 30px; height: 42px;
  background: var(--chalk); border: 3px solid var(--chalk);
  border-radius: 7px 7px 4px 4px;
  box-shadow: 3px 4px 0 0 var(--plum);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pennant .flag {
  position: absolute; inset: 3px; border-radius: 5px 5px 3px 3px;
}
.pennant .pn {
  position: absolute; left: 0; right: 0; bottom: -16px; text-align: center;
  font-size: 11px; font-weight: 800; color: var(--chalk); text-shadow: 1px 1px 0 var(--plum);
}
.pennant.lead { transform: translateY(-9px) scale(1.08); }
.pennant.dead { opacity: .4; }
.pennant .kills {
  position: absolute; top: -2px; right: -6px; background: var(--lemon); color: var(--plum);
  font-size: 10px; font-weight: 900; border-radius: 6px; padding: 0 4px; border: 2px solid var(--plum);
}

/* kill feed top-right */
#killfeed { top: 14px; right: 14px; width: min(46vw, 320px); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.feed-item {
  background: var(--chalk); color: var(--plum); border: 3px solid var(--chalk);
  border-radius: 7px; box-shadow: 3px 4px 0 0 var(--plum);
  padding: 3px 9px; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  display: flex; gap: 6px; align-items: center; animation: feedin .18s ease-out;
}
.feed-item.self { background: var(--coral); color: var(--chalk); }
.feed-item .sw { width: 11px; height: 11px; border-radius: 3px; border: 2px solid var(--plum); }
.feed-item .w { color: #6b4e72; font-size: 11px; }
@keyframes feedin { from { transform: translateX(20px); opacity: 0 } to { transform: none; opacity: 1 } }

/* health bottom-left */
#health-wrap { left: 18px; bottom: 18px; }
#health-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--chalk); text-shadow: 2px 2px 0 var(--plum); margin-bottom: 4px; }
#health-bar {
  position: relative; width: 210px; height: 26px; background: #2b1b30;
  border: 4px solid var(--chalk); border-radius: 9px; box-shadow: 5px 6px 0 0 var(--plum); overflow: hidden;
}
#health-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--mint); transition: width .12s ease-out, background .2s; }
#health-fill.low { background: var(--hazard); }
#health-fill.crit { background: var(--coral); }
#health-ticks { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 20px, rgba(58,35,64,.55) 20px 23px); }


/* crosshair */
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair span {
  position: absolute; background: var(--chalk); border: 1.5px solid var(--coral);
  border-radius: 2px;
}
#crosshair span:nth-child(1) { width: 3px; height: 12px; left: -1.5px; top: -20px; }
#crosshair span:nth-child(2) { width: 3px; height: 12px; left: -1.5px; top: 8px; }
#crosshair span:nth-child(3) { width: 12px; height: 3px; left: -20px; top: -1.5px; }
#crosshair span:nth-child(4) { width: 12px; height: 3px; left: 8px; top: -1.5px; }
#ch-dot { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; background: var(--coral); border-radius: 50%; }

#weapon-hint {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  color: var(--chalk); text-shadow: 2px 2px 0 var(--plum); font-size: 13px;
  font-weight: 800; letter-spacing: .14em; opacity: .9; text-align: center; white-space: nowrap;
}

/* banners */
#banner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.plate {
  background: var(--coral); color: var(--chalk); border: 6px solid var(--chalk);
  border-radius: 16px; box-shadow: 8px 10px 0 0 var(--plum);
  padding: 10px 34px; font-size: 44px; font-weight: 900; letter-spacing: .1em;
  transform: rotate(-3deg); animation: slam .35s cubic-bezier(.2,1.6,.5,1);
}
.plate.win { background: var(--lemon); color: var(--plum); }
@keyframes slam { 0% { transform: rotate(-3deg) scale(1.8); opacity: 0 } 100% { transform: rotate(-3deg) scale(1); opacity: 1 } }

#toast {
  position: absolute; left: 50%; top: 34%; transform: translateX(-50%); width: max-content; max-width: 70vw; text-align: center;
  color: var(--chalk); font-weight: 800; letter-spacing: .1em; font-size: 15px;
  text-shadow: 2px 2px 0 var(--plum); opacity: 0; transition: opacity .2s;
}
#toast.show { opacity: 1; }

/* damage numbers */
.dmg {
  position: absolute; font-weight: 900; color: var(--chalk);
  text-shadow: 2px 2px 0 var(--plum), -1px -1px 0 var(--plum), 1px -1px 0 var(--plum), -1px 1px 0 var(--plum);
  font-size: 26px; pointer-events: none; will-change: transform, opacity;
}
.dmg.kill { color: var(--coral); font-size: 40px; }

/* tracer / puff canvases are appended to fx-layer and removed */

/* ---------------- menu ---------------- */
#menu { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; overflow: auto; }
#menu-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, #A6E4EE 42%, var(--sky-haze) 78%, #FFD9A8 100%);
}
.menu-inner { position: relative; margin: auto; width: min(720px, 94vw); padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.title-plate { text-align: center; }
.title-plate h1 {
  font-size: clamp(40px, min(12vw, 12vh), 108px); line-height: .86; font-weight: 900;
  color: var(--chalk); text-shadow: 6px 7px 0 var(--plum); letter-spacing: .02em;
}
.title-plate h1 span { color: var(--coral); }
.tag { color: var(--plum); font-weight: 800; letter-spacing: .28em; font-size: clamp(10px, 2.4vw, 14px); margin-top: 8px; }
.blurb {
  background: var(--chalk); color: var(--plum); border: 4px solid var(--chalk);
  border-radius: 12px; box-shadow: 5px 6px 0 0 var(--plum);
  padding: 12px 16px; max-width: 560px; font-size: 15px; line-height: 1.4; text-align: center;
}
.blurb b { color: var(--coral); }
.setup { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.setup-label { color: var(--plum); font-weight: 900; letter-spacing: .22em; font-size: 13px; }
#slots { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.slot {
  width: 52px; height: 52px; border-radius: 12px; background: var(--chalk);
  border: 4px solid var(--chalk); box-shadow: 4px 5px 0 0 var(--plum);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: var(--plum); cursor: pointer;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.slot.peg { background: var(--lemon); transform: translateY(4px); box-shadow: 2px 2px 0 0 var(--plum); }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.big-btn {
  font-family: inherit; font-size: 34px; font-weight: 900; letter-spacing: .08em;
  color: var(--chalk); background: var(--coral);
  border: 5px solid var(--chalk); border-radius: 16px; box-shadow: 8px 10px 0 0 var(--plum);
  padding: 12px 60px; cursor: pointer; transition: transform .08s, box-shadow .08s;
}
.big-btn:active { transform: translate(5px, 7px); box-shadow: 3px 3px 0 0 var(--plum); }
.small-btn {
  font-family: inherit; font-size: 15px; font-weight: 900; letter-spacing: .1em;
  color: var(--plum); background: var(--lemon);
  border: 4px solid var(--chalk); border-radius: 12px; box-shadow: 5px 6px 0 0 var(--plum);
  padding: 8px 22px; cursor: pointer;
}
.small-btn:active { transform: translate(4px, 5px); box-shadow: 2px 2px 0 0 var(--plum); }
.menu-footer {
  position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: space-between;
  padding: 0 16px; color: var(--plum); font-size: 12px; font-weight: 800; letter-spacing: .05em;
}
.snd { cursor: pointer; background: var(--chalk); border-radius: 8px; padding: 3px 10px; box-shadow: 3px 3px 0 var(--plum); }
#online-panel {
  background: var(--chalk); color: var(--plum); border: 4px solid var(--chalk); border-radius: 12px;
  box-shadow: 5px 6px 0 0 var(--plum); padding: 12px 16px; max-width: 560px; text-align: center; font-size: 14px; line-height: 1.5;
}
#online-panel .linkrow { display: flex; gap: 8px; margin-top: 8px; }
#online-panel input { flex: 1; font-family: inherit; font-size: 13px; padding: 6px; border: 3px solid var(--plum); border-radius: 8px; }
#online-panel button { font-family: inherit; font-weight: 900; background: var(--mint); border: 3px solid var(--plum); border-radius: 8px; padding: 6px 12px; cursor: pointer; }

/* results */
#results { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(58,35,64,.35), rgba(58,35,64,.7)); overflow: auto; }
.results-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; }
.win-plate { background: var(--lemon); color: var(--plum); border: 6px solid var(--chalk); border-radius: 14px; box-shadow: 8px 10px 0 0 var(--plum); padding: 6px 30px; font-size: 30px; font-weight: 900; letter-spacing: .12em; transform: rotate(-2deg); }
#win-name { font-size: 54px; font-weight: 900; color: var(--chalk); text-shadow: 5px 6px 0 var(--plum); letter-spacing: .04em; }
#results-table { background: var(--chalk); border: 4px solid var(--chalk); border-radius: 12px; box-shadow: 6px 7px 0 0 var(--plum); padding: 6px 0; min-width: min(520px, 92vw); }
.res-row { display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-bottom: 3px dashed rgba(58,35,64,.2); font-weight: 800; color: var(--plum); }
.res-row:last-child { border-bottom: none; }
.res-row .sw { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--plum); }
.res-row .nm { flex: 1; }
.res-row .sc { font-variant-numeric: tabular-nums; }

/* loading */
#loading { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: var(--sky-haze); color: var(--plum); font-weight: 900; letter-spacing: .3em; font-size: 16px; }

/* ---------------- touch ---------------- */
#touch { position: absolute; inset: 0; pointer-events: none; }
.stick {
  position: absolute; bottom: 24px; width: 128px; height: 128px; border-radius: 50%;
  background: rgba(255,246,226,.16); border: 4px solid rgba(255,246,226,.5);
  pointer-events: auto; touch-action: none;
}
#stick-move { left: 20px; }
#stick-look { right: 20px; }
.stick .knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: var(--chalk); border: 3px solid var(--plum); box-shadow: 2px 3px 0 var(--plum);
}
.tbtn {
  position: absolute; pointer-events: auto; touch-action: none;
  font-family: inherit; font-weight: 900; font-size: 16px; letter-spacing: .06em;
  border-radius: 50%; width: 74px; height: 74px; border: 4px solid var(--chalk);
  box-shadow: 4px 5px 0 var(--plum); color: var(--plum);
}
#btn-fire { right: 160px; bottom: 70px; background: var(--coral); color: var(--chalk); width: 92px; height: 92px; }
#btn-jump { right: 170px; bottom: 178px; background: var(--lemon); }

/* touch layout: HUD centred, thumbs get the corners */
#hud.touch-ui #roster { top: 6px; left: 6px; gap: 5px; }
#hud.touch-ui .pennant { width: 22px; height: 30px; }
#hud.touch-ui .pennant .pn { font-size: 8px; bottom: -11px; }
#hud.touch-ui .pennant .kills { font-size: 8px; }
#hud.touch-ui #killfeed { top: 6px; right: 6px; width: 30vw; gap: 4px; }
#hud.touch-ui .feed-item { font-size: 10px; padding: 2px 6px; border-width: 2px; }
#hud.touch-ui #health-wrap { left: 50%; bottom: 16px; transform: translateX(-105%); }
#hud.touch-ui #health-label { font-size: 9px; margin-bottom: 2px; }
#hud.touch-ui #health-bar { width: 128px; height: 20px; border-width: 3px; box-shadow: 3px 4px 0 var(--plum); }
#hud.touch-ui #weapon-hint { bottom: 92px; font-size: 11px; letter-spacing: .06em; }
#hud.touch-ui .stick { width: 112px; height: 112px; }
#hud.touch-ui .stick .knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }

/* portrait */
@media (max-aspect-ratio: 4/5) {
  #hud.touch-ui #roster { top: 46px; left: 6px; }
  #hud.touch-ui #killfeed { top: 46px; right: 6px; width: 44vw; }
  #hud.touch-ui #weapon-hint { bottom: auto; top: 92px; }
  #btn-fire { right: 14px; bottom: 150px; width: 86px; height: 86px; }
  #btn-jump { right: 16px; bottom: 254px; width: 70px; height: 70px; }
  #hud.touch-ui .stick { width: 100px; height: 100px; }
  #hud.touch-ui #health-wrap { left: 8px; bottom: 210px; transform: none; }
  #hud.touch-ui #health-bar { width: 116px; }
}

@media (max-width: 700px) {
  #health-bar { width: 150px; height: 22px; }
  .blurb { font-size: 13px; }
}


/* ================= weapon ladder: painted blocks pinned to a board, right edge =================
   Step 1 sits at the bottom, the Cream Pie at the top: you climb it. */
#ladder {
  --th: clamp(30px, calc((100vh - 230px) / 10), 58px);
  position: absolute; right: 12px; top: 12px;
  display: flex; flex-direction: column-reverse; align-items: center; gap: calc(var(--th) * .12);
  pointer-events: none; padding: calc(var(--th) * .22) calc(var(--th) * .2);
  background: repeating-linear-gradient(180deg, #C99A6B 0 9px, #BE8D5E 9px 11px, #C99A6B 11px 24px);
  border: 4px solid var(--chalk); border-radius: 14px; box-shadow: 5px 6px 0 0 var(--plum);
}
#ladder .rail {
  position: absolute; top: 14px; bottom: 14px; left: 50%; width: 8px; margin-left: -4px;
  background: rgba(58,35,64,.55); border-radius: 4px; border: 2px solid var(--chalk);
}
#ladder .rail i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--lemon); border-radius: 3px; transition: height .35s cubic-bezier(.34,1.56,.64,1); }
.tile {
  position: relative; flex: none; width: calc(var(--th) * 1.5); height: var(--th); border-radius: calc(var(--th) * .2);
  background: var(--wc, var(--chalk)); border: 3px solid var(--chalk);
  box-shadow: 3px 4px 0 0 var(--plum), inset 0 -5px 0 rgba(58,35,64,.18);
  display: flex; align-items: center; justify-content: center;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s, filter .2s;
}
.tile::selection { background: none; }
.tile canvas { width: 78%; height: 66%; display: block; position: relative; z-index: 1;
  background: rgba(255,246,226,.92); border-radius: calc(var(--th) * .14); }
.tile .step {
  position: absolute; left: calc(var(--th) * -.18); top: calc(var(--th) * -.18);
  width: calc(var(--th) * .42); height: calc(var(--th) * .42); border-radius: 30%;
  background: var(--plum); color: var(--chalk); font-size: calc(var(--th) * .26); font-weight: 900;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--chalk); z-index: 2;
}
.tile .nm {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(.6);
  white-space: nowrap; font-size: 14px; font-weight: 900; letter-spacing: .08em;
  background: var(--lemon); color: var(--plum); padding: 3px 10px; border-radius: 7px;
  border: 3px solid var(--chalk); box-shadow: 3px 4px 0 var(--plum);
  opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.tile.done { transform: translateX(-7px) scale(.88); background: #d9cdb8; }
.tile.done canvas { opacity: .45; filter: grayscale(.8); }
.tile.done::after {
  content: "\2714"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2;
  font-size: calc(var(--th) * .62); color: var(--coral); text-shadow: 2px 2px 0 var(--plum); font-weight: 900; transform: rotate(-10deg);
}
.tile.up { transform: scale(.9); }
.tile.cur {
  transform: translateX(-10px) rotate(-5deg) scale(1.28); border-color: var(--lemon); z-index: 3;
  box-shadow: 4px 5px 0 0 var(--plum), 0 0 0 4px var(--lemon), 0 0 22px 8px rgba(255,216,77,.75);
  animation: breath 1.6s ease-in-out infinite;
}
.tile.cur .nm { opacity: 1; transform: translateY(-50%) rotate(5deg) scale(.82); }
.tile.final {
  width: calc(var(--th) * 1.85); height: calc(var(--th) * 1.6); border-radius: calc(var(--th) * .3);
  background: radial-gradient(circle at 35% 30%, #FFF6E2 0 18%, #FFE27A 40%, #F2B630 100%);
  border: 4px solid var(--chalk); box-shadow: 4px 6px 0 var(--plum), 0 0 18px 4px rgba(255,216,77,.55);
}
.tile.final canvas { background: none; width: 82%; height: 70%; animation: spin 4s linear infinite; }
.tile.final.up { transform: none; }
.tile.final.cur { transform: translateX(-12px) rotate(-5deg) scale(1.15); }
.tile.stamp { animation: flipback .5s cubic-bezier(.3,1.4,.5,1); }
.tile.stamp::before {
  content: "SELF"; position: absolute; inset: -6px; border: 4px solid var(--coral); border-radius: 10px;
  color: var(--coral); font-weight: 900; font-size: calc(var(--th) * .34); background: rgba(255,246,226,.88);
  display: flex; align-items: center; justify-content: center; transform: rotate(-12deg); z-index: 4;
}
@keyframes flipback { 0% { transform: rotateX(0) } 45% { transform: rotateX(180deg) scale(1.1) } 100% { transform: rotateX(360deg) } }
@keyframes breath { 0%,100% { box-shadow: 4px 5px 0 0 var(--plum), 0 0 0 4px var(--lemon), 0 0 14px 4px rgba(255,216,77,.5) } 50% { box-shadow: 4px 5px 0 0 var(--plum), 0 0 0 4px var(--lemon), 0 0 28px 12px rgba(255,216,77,.9) } }
@keyframes spin { from { transform: rotateY(0) } to { transform: rotateY(360deg) } }
#killfeed { right: calc(clamp(30px, calc((100vh - 230px) / 10), 58px) * 1.85 + 56px); }

/* ================= ammo panel: name, count / clip, pips, reload bar ================= */
#ammo-wrap {
  right: 18px; bottom: 16px; width: 230px; padding: 8px 12px 10px;
  background: rgba(58,35,64,.72); border: 4px solid var(--chalk); border-radius: 14px;
  box-shadow: 5px 6px 0 0 var(--plum); color: var(--chalk);
}
#ammo-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#ammo-name { font-weight: 900; font-size: 14px; letter-spacing: .08em; white-space: nowrap; }
#ammo-role { font-weight: 800; font-size: 10px; letter-spacing: .16em; color: var(--lemon); }
#ammo-main { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
#ammo-icon { width: 60px; height: 43px; }
#ammo-num {
  font-size: 54px; line-height: .85; font-weight: 900; color: var(--chalk);
  text-shadow: 3px 4px 0 var(--plum); font-variant-numeric: tabular-nums; margin-left: auto; text-align: right;
}
#ammo-max { font-size: 18px; font-weight: 900; opacity: .75; padding-bottom: 4px; font-variant-numeric: tabular-nums; }
#ammo-pips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; min-height: 10px; }
#ammo-pips i { width: 8px; height: 12px; border-radius: 3px; background: var(--lemon); border: 1.5px solid var(--plum); transition: background .1s, opacity .1s; }
#ammo-pips.dense i { width: 5px; height: 10px; border-radius: 2px; gap: 2px; }
#ammo-pips i.spent { background: rgba(255,246,226,.12); border-color: rgba(255,246,226,.12); }
#reload-bar { position: relative; height: 0; overflow: hidden; margin-top: 0; border-radius: 6px; background: rgba(255,246,226,.15); transition: height .12s; }
#reload-bar i { display: block; height: 100%; width: 0; background: var(--hazard); }
#reload-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; letter-spacing: .2em; }
#ammo-wrap.reloading #reload-bar { height: 16px; margin-top: 6px; }
#ammo-wrap.reloading #ammo-num { color: var(--hazard); }
#ammo-wrap.low #ammo-num { color: var(--coral); animation: lowpulse .6s ease-in-out infinite alternate; }
#ammo-wrap.melee #ammo-pips { display: none; }
@keyframes lowpulse { from { transform: scale(1) } to { transform: scale(1.08) } }

#reload-prompt {
  position: absolute; left: 50%; top: calc(50% + 44px); transform: translateX(-50%);
  font-weight: 900; font-size: 14px; letter-spacing: .14em; color: var(--chalk);
  background: rgba(255,107,91,.9); border: 3px solid var(--chalk); border-radius: 8px; padding: 3px 10px;
  box-shadow: 3px 3px 0 var(--plum); opacity: 0; transition: opacity .15s; white-space: nowrap;
}
#reload-prompt.show { opacity: 1; }
#reload-prompt:empty { display: none; }

#controls-hint {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--chalk);
  text-shadow: 1px 1px 0 var(--plum); opacity: .8; white-space: nowrap;
}
#hud.touch-ui #controls-hint { display: none; }
#weapon-hint { bottom: 26px; }

/* aiming down sights: crosshair tightens, a soft vignette closes in */
#crosshair { transition: opacity .12s; }
#hud.ads #crosshair span { opacity: 0; }
#hud.ads #ch-dot { width: 5px; height: 5px; left: -2.5px; top: -2.5px; box-shadow: 0 0 0 2px var(--chalk); }
#scope { position: absolute; inset: 0; opacity: 0; transition: opacity .14s; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 32vmin, rgba(58,35,64,.55) 46vmin, rgba(58,35,64,.85) 70vmin); }
#hud.ads.scoped #scope { opacity: 1; }
#scope .ring { position: absolute; left: 50%; top: 50%; width: 64vmin; height: 64vmin; transform: translate(-50%,-50%);
  border-radius: 50%; border: 4px solid rgba(255,246,226,.6); box-shadow: 0 0 0 3px rgba(58,35,64,.6); }

/* touch buttons for aim and reload */
#btn-aim { right: 52px; bottom: 168px; width: 64px; height: 64px; font-size: 14px; background: var(--mint); }
#btn-aim.on { background: var(--lemon); transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--plum); }
#btn-reload { right: 256px; bottom: 186px; width: 64px; height: 64px; font-size: 11px; background: var(--chalk); }

/* menu: the ladder as cards */
#menu-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(680px, 92vw); }
.wcard {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: var(--chalk); border-radius: 10px; border: 3px solid var(--chalk);
  box-shadow: 3px 4px 0 var(--plum); color: var(--plum); min-width: 0;
}
.wcard canvas { width: 44px; height: 28px; flex: none; }
.wcard .n { position: absolute; left: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--plum); color: var(--chalk); font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.wcard .info { display: flex; flex-direction: column; min-width: 0; }
.wcard b { font-size: 11px; letter-spacing: .02em; line-height: 1.15; }
.wcard span { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #7a5f80; line-height: 1.2; }
.wcard canvas { width: 38px; height: 24px; }
.wcard.final { background: #FFF1B8; border-color: var(--lemon); }

/* ---- narrower desktop / touch ---- */
@media (max-width: 760px) {
  #ammo-wrap { width: 190px; }
  #ammo-num { font-size: 42px; }
  #menu-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#hud.touch-ui #ammo-wrap { right: auto; left: 50%; bottom: 10px; transform: translateX(4%); width: 150px; padding: 4px 8px 6px; border-width: 3px; }
#hud.touch-ui #ammo-name { font-size: 10px; }
#hud.touch-ui #ammo-role { display: none; }
#hud.touch-ui #ammo-icon { width: 36px; height: 26px; }
#hud.touch-ui #ammo-num { font-size: 30px; }
#hud.touch-ui #ammo-max { font-size: 12px; padding-bottom: 2px; }
#hud.touch-ui #ammo-pips { gap: 2px; margin-top: 3px; }
#hud.touch-ui #ammo-pips i { width: 5px; height: 8px; border-width: 1px; }
#hud.touch-ui #ammo-pips.dense i { width: 3px; height: 7px; }
#hud.touch-ui #weapon-hint { bottom: auto; top: 76px; }
@media (max-aspect-ratio: 4/5) {
  #hud.touch-ui #weapon-hint { top: 112px; }
  #hud.touch-ui #ammo-wrap { left: 10px; bottom: 262px; transform: none; width: 140px; }
  #btn-aim { right: 112px; bottom: 166px; width: 60px; height: 60px; }
  #btn-reload { right: 112px; bottom: 240px; width: 60px; height: 60px; }
}

.menu-footer .hintline { display: none; }
.menu-controls { color: var(--plum); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: center; line-height: 1.6; }
#menu-ladder { width: min(760px, 94vw); }

/* short screens (a phone held sideways): the ladder cards become one row of chips so PLAY stays on screen */
@media (max-height: 520px) {
  .menu-inner { gap: 8px; padding: 10px 16px; }
  .title-plate h1 { font-size: clamp(26px, 8vh, 48px); line-height: .95; text-shadow: 3px 4px 0 var(--plum); }
  .tag { margin-top: 2px; }
  .blurb { font-size: 12px; padding: 6px 10px; }
  #menu-ladder { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
  .wcard { flex-direction: column; padding: 4px; gap: 2px; }
  .wcard .info span { display: none; }
  .wcard b { font-size: 8px; text-align: center; }
  .slot { width: 40px; height: 40px; font-size: 18px; }
  .big-btn { font-size: 26px; padding: 8px 44px; }
  .menu-controls { font-size: 10px; }
}

/* ================= movement, power-ups, ziplines ================= */
#controls-hint { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; bottom: 4px; }
#weapon-hint { bottom: 40px; }
#power-bar { left: 18px; bottom: 84px; display: flex; gap: 8px; align-items: flex-end; }
.pw {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; background: var(--pc); border: 4px solid var(--chalk);
  box-shadow: 3px 4px 0 var(--plum); color: var(--plum); font-weight: 900;
  animation: pwin .3s cubic-bezier(.34,1.56,.64,1);
}
.pw b { font-size: 18px; line-height: 1; }
.pw span { font-size: 10px; letter-spacing: .04em; }
.pw .ring { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(rgba(58,35,64,.55) var(--left), transparent 0); mask: radial-gradient(circle, transparent 0 58%, #000 60%); -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 60%); }
.pw .nm { position: absolute; top: -18px; white-space: nowrap; font-size: 9px; letter-spacing: .1em; color: var(--chalk); text-shadow: 1px 1px 0 var(--plum); }
.pw.ending { animation: pwblink .3s steps(2) infinite; }
@keyframes pwin { from { transform: scale(.2) rotate(-30deg) } to { transform: none } }
@keyframes pwblink { 50% { opacity: .45 } }
#stance-badge {
  left: 240px; bottom: 18px; padding: 3px 10px; border-radius: 8px; background: var(--chalk); color: var(--plum);
  border: 3px solid var(--chalk); box-shadow: 3px 4px 0 var(--plum); font-weight: 900; font-size: 12px; letter-spacing: .12em;
  opacity: 0; transform: translateY(6px); transition: opacity .12s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
#stance-badge.show { opacity: 1; transform: none; }
#stance-badge.fast { background: var(--lemon); }
#stance-badge.low { background: var(--mint); }
#zip-prompt {
  position: absolute; left: 50%; top: calc(50% + 78px); transform: translateX(-50%);
  font-weight: 900; font-size: 13px; letter-spacing: .14em; color: var(--plum); white-space: nowrap;
  background: var(--lemon); border: 3px solid var(--chalk); border-radius: 8px; padding: 3px 10px;
  box-shadow: 3px 3px 0 var(--plum); opacity: 0; transition: opacity .12s;
}
#zip-prompt.show { opacity: 1; }
#pie-splat { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background:
    radial-gradient(circle at 40% 45%, #FFFDF4 0 18vmin, transparent 18.5vmin),
    radial-gradient(circle at 58% 52%, #FFF6E2 0 15vmin, transparent 15.5vmin),
    radial-gradient(circle at 48% 63%, #FFFDF4 0 12vmin, transparent 12.5vmin),
    radial-gradient(circle at 30% 60%, #FFE9C4 0 7vmin, transparent 7.5vmin),
    radial-gradient(circle at 66% 36%, #FFFDF4 0 8vmin, transparent 8.5vmin),
    radial-gradient(circle at 52% 40%, #FF6B5B 0 2.2vmin, transparent 2.4vmin); }
#pie-splat.show { opacity: .96; transition: opacity .05s; }
#hud.cloaked::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 30px rgba(199,125,255,.45); }
#hud.shielded::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px 18px rgba(47,196,196,.4); }
.tile .tk { position: absolute; right: -11px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; z-index: 3; }
.tile .tk i { width: 7px; height: 7px; border-radius: 50%; background: rgba(58,35,64,.55); border: 1.5px solid var(--chalk); }
.tile .tk i.on { background: var(--coral); }
.tile:not(.cur) .tk { display: none; }

/* touch: movement buttons */
#btn-sprint, #btn-dash, #btn-crouch, #btn-zip { width: 56px; height: 56px; font-size: 12px; }
#btn-sprint { left: 14px; right: auto; bottom: 150px; background: var(--mint); }
#btn-sprint.on { background: var(--lemon); transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--plum); }
#btn-dash { left: 80px; right: auto; bottom: 150px; background: var(--bubblegum); }
#btn-crouch { right: 268px; bottom: 96px; background: var(--chalk); }
#btn-zip { right: 64px; bottom: 246px; background: var(--turquoise); color: var(--chalk); }
#hud.touch-ui #power-bar { left: 50%; bottom: 62px; transform: translateX(-110%); }
#hud.touch-ui .pw { width: 38px; height: 38px; border-width: 3px; }
#hud.touch-ui .pw b { font-size: 13px; }
#hud.touch-ui .pw span { font-size: 8px; }
#hud.touch-ui .pw .nm { display: none; }
#hud.touch-ui #stance-badge { left: 50%; bottom: 112px; transform: translateX(-50%); font-size: 10px; }
#hud.touch-ui #zip-prompt { font-size: 11px; }
@media (max-aspect-ratio: 4/5) {
  #btn-sprint { left: 14px; bottom: 136px; width: 52px; height: 52px; }
  #btn-dash { left: 74px; bottom: 136px; width: 52px; height: 52px; }
  #btn-crouch { right: 112px; bottom: 314px; width: 56px; height: 56px; }
  #btn-zip { right: 18px; bottom: 336px; width: 56px; height: 56px; }
  #hud.touch-ui #power-bar { left: 150px; bottom: 262px; transform: none; }
  #hud.touch-ui #stance-badge { bottom: 200px; }
}
.plate.power { background: var(--lemon); color: var(--plum); font-size: 32px; padding: 6px 24px; }

/* ================= abilities, protection, frost, sectors ================= */
#ability {
  left: 18px; bottom: 150px; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px;
  background: var(--chalk); border: 4px solid var(--chalk); border-radius: 12px; box-shadow: 4px 5px 0 var(--plum);
  color: var(--plum); max-width: 300px;
}
#ability .key { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--plum); color: var(--chalk);
  font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 #1d1020; }
#ability .glyph { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ac); border: 3px solid var(--plum);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; }
#ability .ab-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ability b { font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
#ability b em { font-style: normal; background: var(--lemon); border-radius: 4px; padding: 0 4px; border: 2px solid var(--plum); font-size: 10px; }
#ability span { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #7a5f80; }
#ability .uses { display: flex; gap: 3px; }
#ability .uses i { width: 14px; height: 10px; border-radius: 3px; background: var(--ac); border: 2px solid var(--plum); }
#ability .bars { display: flex; flex-direction: column; gap: 3px; width: 150px; }
#ability .bars i { position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(58,35,64,.2); overflow: hidden; border: 1.5px solid var(--plum); }
#ability .bars u { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mint); }
#ability .bars .heat u { background: var(--coral); }
#ability.hot .bars .heat u { animation: pwblink .25s steps(2) infinite; }
#ability.hot .glyph { background: #ccc; }
#ability.empty { opacity: .8; }
#ability.empty b { color: #7a5f80; }
#drone-badge { left: 18px; bottom: 214px; padding: 3px 8px; border-radius: 8px; background: var(--ac, var(--chalk)); border: 3px solid var(--chalk);
  box-shadow: 3px 4px 0 var(--plum); color: var(--plum); font-size: 10px; letter-spacing: .1em; display: none; }
#drone-badge.show { display: flex; flex-direction: column; gap: 2px; }
#drone-badge i { display: block; width: 120px; height: 6px; background: rgba(58,35,64,.35); border-radius: 3px; overflow: hidden; }
#drone-badge u { display: block; height: 100%; background: var(--chalk); }
#protect-chip { position: absolute; left: 50%; top: calc(50% + 110px); transform: translateX(-50%); display: none;
  background: var(--chalk); color: var(--plum); border: 3px solid var(--chalk); box-shadow: 3px 4px 0 var(--plum); border-radius: 8px;
  font-weight: 900; font-size: 12px; letter-spacing: .14em; padding: 3px 10px; }
#hud.protected #protect-chip { display: block; }
#hud.protected::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px 22px rgba(255,246,226,.55); animation: pwblink .5s steps(2) infinite; }
#frost-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(159,232,240,.55) 70%, rgba(255,255,255,.85) 100%); }
#hud.frozen #frost-overlay { opacity: 1; }
#hud.guarded #health-bar { border-color: var(--mint); }
#sector-sign { position: absolute; left: 50%; top: 92px; transform: translateX(-50%) rotate(-2deg) scale(.6); opacity: 0;
  background: var(--sc, var(--chalk)); color: var(--plum); border: 4px solid var(--chalk); border-radius: 12px; box-shadow: 5px 6px 0 var(--plum);
  padding: 4px 16px; text-align: center; display: flex; flex-direction: column; pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1); }
#sector-sign.show { opacity: 1; transform: translateX(-50%) rotate(-2deg) scale(1); }
#sector-sign b { font-size: 20px; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
#sector-sign span { font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.roster-count { align-self: center; font-size: 10px; font-weight: 900; letter-spacing: .1em; color: var(--chalk); text-shadow: 1px 1px 0 var(--plum); margin-right: 4px; white-space: nowrap; }
.setup-note { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--plum); opacity: .8; }
#slots .slot { width: 46px; height: 46px; font-size: 20px; }

/* touch: the ability button */
#btn-ability { right: 20px; bottom: 246px; width: 60px; height: 60px; font-size: 22px; background: var(--lemon); }
#btn-ability.off { background: var(--chalk) !important; opacity: .6; font-size: 16px; }
#btn-zip { right: 92px; bottom: 262px; }
#hud.touch-ui #ability { left: 50%; bottom: auto; top: 124px; transform: translateX(-50%) scale(.8); padding: 3px 8px 3px 3px; }
#hud.touch-ui #ability span, #hud.touch-ui #ability .key { display: none; }
#hud.touch-ui #drone-badge { left: 50%; bottom: auto; top: 172px; transform: translateX(-50%); }
#hud.touch-ui #sector-sign { top: 200px; }
#hud.touch-ui #sector-sign b { font-size: 15px; }
@media (max-aspect-ratio: 4/5) {
  #btn-ability { right: 18px; bottom: 410px; width: 58px; height: 58px; }
  #btn-zip { right: 84px; bottom: 396px; }
  #hud.touch-ui #ability { top: 150px; }
  #hud.touch-ui #drone-badge { top: 196px; }
  #hud.touch-ui #sector-sign { top: 230px; }
}
@media (max-width: 760px) { #sector-sign b { font-size: 15px; } }
#hud.touch-ui .roster-count { display: none; }

/* ================= touch: the ladder takes the whole right edge, thumbs shift in ================= */
#hud.touch-ui #ladder { --th: clamp(22px, calc((100vh - 60px) / 10.4), 46px); right: 6px; top: 6px; border-width: 3px; box-shadow: 3px 4px 0 var(--plum); }
#hud.touch-ui .tile { border-width: 2px; box-shadow: 2px 3px 0 var(--plum); }
#hud.touch-ui .tile .nm { font-size: 11px; padding: 2px 7px; border-width: 2px; }
#hud.touch-ui #killfeed { top: 6px; right: calc(clamp(22px, calc((100vh - 60px) / 10.4), 46px) * 1.85 + 30px); width: 26vw; }
#hud.touch-ui { --rs: calc(clamp(22px, calc((100vh - 60px) / 10.4), 46px) * 1.85 + 34px); }
#hud.touch-ui #stick-look { right: calc(20px + var(--rs)); }
#hud.touch-ui #btn-fire { right: calc(150px + var(--rs)); }
#hud.touch-ui #btn-jump { right: calc(160px + var(--rs)); }
#hud.touch-ui #btn-aim { right: calc(46px + var(--rs)); }
#hud.touch-ui #btn-reload { right: calc(240px + var(--rs)); }
#hud.touch-ui #btn-crouch { right: calc(252px + var(--rs)); }
#hud.touch-ui #btn-zip { right: calc(84px + var(--rs)); }
#hud.touch-ui #btn-ability { right: calc(14px + var(--rs)); }
@media (max-aspect-ratio: 4/5) {
  #hud.touch-ui #ladder { --th: clamp(20px, calc((100vh - 560px) / 10), 25px); top: 6px; }
  #hud.touch-ui .tile .nm { display: none; }
  #hud.touch-ui #killfeed { right: 92px; top: 6px; width: 40vw; }
  #hud.touch-ui { --rs: 0px; }
  #hud.touch-ui #stick-look { right: 20px; }
  #hud.touch-ui #btn-fire { right: 14px; }
  #hud.touch-ui #btn-jump { right: 16px; }
  #hud.touch-ui #btn-aim { right: 112px; }
  #hud.touch-ui #btn-reload { right: 112px; }
  #hud.touch-ui #btn-crouch { right: 112px; }
  #hud.touch-ui #btn-zip { right: 84px; }
  #hud.touch-ui #btn-ability { right: 18px; }
}

/* a phone held sideways: the thumb cluster packs tight so nothing sits under the kill feed */
@media (max-height: 500px) and (min-aspect-ratio: 4/5) {
  #hud.touch-ui #ladder { --th: clamp(22px, calc((100vh - 60px) / 10.4), 40px); }
  #hud.touch-ui .tile.final { width: calc(var(--th) * 1.5); height: calc(var(--th) * 1.35); }
  #hud.touch-ui { --rs: calc(clamp(22px, calc((100vh - 60px) / 10.4), 40px) * 1.5 + 30px); }
  #hud.touch-ui #killfeed { right: calc(var(--rs) + 6px); width: 24vw; }
  #hud.touch-ui .stick#stick-look { right: calc(10px + var(--rs)); bottom: 14px; width: 100px; height: 100px; }
  #hud.touch-ui #btn-fire { right: calc(118px + var(--rs)); bottom: 30px; width: 76px; height: 76px; }
  #hud.touch-ui #btn-jump { right: calc(122px + var(--rs)); bottom: 118px; width: 62px; height: 62px; font-size: 14px; }
  #hud.touch-ui #btn-aim { right: calc(14px + var(--rs)); bottom: 124px; width: 54px; height: 54px; font-size: 13px; }
  #hud.touch-ui #btn-reload { right: calc(200px + var(--rs)); bottom: 92px; width: 50px; height: 50px; font-size: 9px; }
  #hud.touch-ui #btn-crouch { right: calc(200px + var(--rs)); bottom: 32px; width: 50px; height: 50px; font-size: 11px; }
  #hud.touch-ui #btn-zip { right: calc(74px + var(--rs)); bottom: 190px; width: 50px; height: 50px; font-size: 11px; }
  #hud.touch-ui #btn-ability { right: calc(14px + var(--rs)); bottom: 190px; width: 50px; height: 50px; font-size: 18px; }
  #hud.touch-ui #ammo-wrap { left: 50%; transform: translateX(-50%); width: 136px; bottom: 8px; }
  #hud.touch-ui #health-wrap { left: 50%; transform: translateX(-50%); bottom: 86px; }
  #hud.touch-ui #health-bar { width: 136px; height: 16px; }
  #hud.touch-ui #stance-badge { bottom: 128px; }
  #hud.touch-ui #power-bar { bottom: 20px; transform: translateX(calc(-100% - 76px)); }
  #hud.touch-ui #protect-chip { top: calc(50% + 52px); font-size: 10px; }
  #hud.touch-ui #weapon-hint { top: 52px; }
  #hud.touch-ui #ability { top: 70px; transform: translateX(-50%) scale(.7); }
  #hud.touch-ui #sector-sign { top: 104px; }
  #hud.touch-ui #sector-sign b { font-size: 13px; }
  #toast { top: 46%; font-size: 12px; max-width: 52vw; }
}