:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  background: #1a1330;
  color: #fff;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

/* The menu must scroll at the app level. A nested scroller inside a fixed grid loses
   its final scroll range on some mobile browsers when the address bar resizes. The
   live game remains independently fixed and touch-locked below. */
#app { position: fixed; inset: 0; display: block; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: max(12px, env(safe-area-inset-top)) 12px max(28px, calc(env(safe-area-inset-bottom) + 16px)); background: radial-gradient(circle at 50% 20%, #493575, #1a1330 68%); text-shadow: var(--soundtrack-beat-x, 0) var(--soundtrack-beat-y, 0) var(--soundtrack-beat-glow, 0) currentColor; touch-action: pan-y; }
/* A fixed selector set replaces the former per-text-node wrappers. It keeps DOM size
   constant and never moves buttons, inputs or scroll containers. */
#app :where(h1, h2, h3, .eyebrow, .subtitle, .hud-label, #statusPill #phase,
  #matchMessage, #storyPanel > strong, #campaignHud > span,
  #campaignHud > strong, #campaignHud > small, #interact,
  #vitals #weaponName, #vitals #ammo, .roster-player, #personalStats,
  #careerStats, th, td, .intermission-kicker, .pause-kicker) {
  transform-origin: 50% 62%;
  translate: var(--soundtrack-beat-x, 0) var(--soundtrack-beat-y, 0);
  rotate: var(--soundtrack-beat-tilt, 0deg);
  scale: var(--soundtrack-beat-scale, 1);
}
/* Native form text cannot transform independently. Its beat shadow moves while the
   control and hitbox remain fixed. */
input, select {
  text-shadow: var(--soundtrack-beat-x, 0) var(--soundtrack-beat-y, 0)
    var(--soundtrack-beat-glow, 0) rgba(26,19,48,.28);
}
#app.performance-safe :where(h1, h2, h3, .eyebrow, .subtitle, .hud-label,
  #statusPill #phase, #matchMessage, #storyPanel > strong, #campaignHud > span,
  #campaignHud > strong, #campaignHud > small, #interact,
  #vitals #weaponName, #vitals #ammo, .roster-player, #personalStats,
  #careerStats, th, td, .intermission-kicker, .pause-kicker) {
  rotate: none;
  scale: 1;
}
.panel { width: min(92vw, 490px); max-height: 96dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: clamp(18px, 4vh, 34px); border: 5px solid #2b1d00; border-radius: 24px; background: #3a2d5f; box-shadow: 0 14px 0 #100b20; text-align: center; scrollbar-width: thin; scrollbar-color: #ffd23f #2b1d00; }
/* Home uses the resilient outer scroll container; gameplay overlays keep their own
   bounded scroll behavior through the generic .panel rule above. */
#menu { max-height: none; overflow: visible; margin: 0 auto; }
.eyebrow { color: #7ee081; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
h1 { margin: 8px 0 2px; color: #ffd23f; font-size: clamp(44px, 12vw, 76px); line-height: .82; text-shadow: 4px 4px 0 #d43d6a, 8px 8px 0 #2b1d00; transform: rotate(-2deg); }
.subtitle { margin: 14px 0 20px; opacity: .78; }
label { display: block; margin: 12px 0; color: #ffd23f; font-size: 13px; font-weight: 900; text-align: left; }
label span { color: #fff; opacity: .65; font-size: 11px; }
input, select { width: 100%; margin-top: 5px; padding: 11px 12px; border: 3px solid #2b1d00; border-radius: 10px; background: #fff; color: #1a1330; font-weight: 800; outline: none; touch-action: manipulation; }
input:focus, select:focus { box-shadow: 0 0 0 4px #ffd23f; }
#nameHint { display: block; margin-top: 4px; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; }
.party-row { display: flex; flex-wrap: wrap; gap: 7px; }
.party-row input { flex: 1 1 150px; }
.party-row button { flex: 1 1 auto; margin-top: 5px; white-space: nowrap; }
#inviteNotice { display: block; margin-top: 4px; color: #7ee081; font-size: 11px; font-weight: 800; }
button { border: 3px solid #2b1d00; border-radius: 11px; padding: 10px 14px; color: #2b1d00; font-weight: 1000; box-shadow: 0 4px 0 #2b1d00; }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #2b1d00; }
.primary { width: 100%; margin-top: 8px; background: #ffd23f; font-size: 17px; }
.bot-primary { margin-top: 10px; background: #90dbf4; }
.zombie-primary { margin-top: 10px; background: #7ee081; }
.campaign-primary { background: #c77dff; }
.campaign-options { margin: 14px 0; padding: 12px; border: 3px solid #2b1d00; border-radius: 13px; background: linear-gradient(145deg, rgba(199,125,255,.24), rgba(26,19,48,.52)); text-align: left; }
.campaign-options h2 { margin: 0; color: #ffd23f; font-size: 17px; text-align: center; }
.campaign-options p { margin: 7px 0; font-size: 11px; opacity: .8; }
.campaign-options .campaign-progress { margin: 10px 0 4px; color: #7ee081; font-size: 12px; font-weight: 1000; letter-spacing: .06em; opacity: 1; text-align: center; }
.secondary { background: #7ee081; font-size: 11px; }
.mode-divider { display: flex; align-items: center; gap: 9px; margin: 12px 0 7px; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 900; }
.mode-divider::before, .mode-divider::after { content: ""; flex: 1; height: 2px; background: rgba(255,255,255,.18); }
.bot-options, .mode-options { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.bot-options label, .mode-options label { margin: 0; white-space: nowrap; }
.bot-options select, .mode-options select { margin: 0; }
.mode-options { margin: 12px 0 4px; }
#menuStatus { min-height: 18px; margin: 11px 0 3px; color: #90dbf4; font-size: 12px; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; color: #fff; font-size: 12px; font-weight: 700; text-align: left; }
.check-row input { width: auto; margin: 0; flex: 0 0 auto; accent-color: #ffd23f; }
.party-hint { color: #fff; opacity: .75; font-size: 11px; font-weight: 400; text-align: left; margin: 10px 0; }
details { font-size: 12px; opacity: .78; }
#customize, #settings { margin: 12px 0; padding: 10px 12px; border: 3px solid #2b1d00; border-radius: 12px; background: rgba(26,19,48,.42); opacity: 1; text-align: left; }
#customize summary, #settings summary { color: #ffd23f; font-size: 13px; font-weight: 900; cursor: pointer; }
/* The same control blocks as the in-match pause sheet, laid out for the menu panel. */
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
#settings .pause-sliders { margin-bottom: 10px; }
#settings .party-hint { margin-bottom: 0; }
.customize-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; margin-top: 10px; }
.customize-grid label { margin: 0; white-space: nowrap; }
.customize-grid select { margin: 0; background-position: right 34px center; background-repeat: no-repeat; background-size: 31px 31px; }
.customize-grid select.has-sprite { padding-right: 76px; }
.customize-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.customize-actions button { width: 100%; }
#preview { display: block; margin: 10px auto 0; border: 3px solid #2b1d00; border-radius: 12px; background: #3a633d; }

#game { position: fixed; inset: 0; overflow: hidden; background: #315a36; touch-action: none; }
#canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.hud-label { display: block; color: #ffd23f; font-size: 9px; letter-spacing: .12em; }

/* ==== HUD v2 chrome. Absolute rects below match the authoritative geometry table;
   default declarations here are the Desktop (variant D) numbers, and the touch media
   queries further down override them for portrait (A/B) and landscape (C). Chrome
   elements never mirror for left-handed play — only the touch controls do. ==== */
#statusPill {
  position: absolute; z-index: 5; left: 24px; top: 24px; width: 240px; height: 36px;
  box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 11px;
  border: 3px solid #16121f; border-radius: 11px;
  background: #241d33; box-shadow: 0 3px 0 #16121f;
  color: #fff8e7; font-family: "Baloo 2", "Trebuchet MS", sans-serif; font-size: 12px; font-weight: 800;
  white-space: nowrap; overflow: hidden; pointer-events: none;
}
#statusDot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #35e0e8; box-shadow: 0 0 0 2px #16121f; animation: wr-status-pulse 1.8s ease-in-out infinite; }
@keyframes wr-status-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
#statusPill #phase { color: #ffd23f; font-size: 13px; }
#statusDivider { flex: none; width: 2px; height: 15px; background: #3c3155; }
#statusPill #aliveCount { color: #fff8e7; font-family: "Space Mono", monospace; font-size: 13px; }
#statusPill .hud-label { color: #8a7fa8; font-size: 9px; letter-spacing: .1em; font-weight: 900; }
#pingBars { display: inline-flex; align-items: flex-end; gap: 2px; margin-left: auto; height: 11px; }
#pingBars i { display: block; width: 3px; border-radius: 1px; background: #8a7fa8; }
#pingBars i:nth-child(1) { height: 4px; }
#pingBars i:nth-child(2) { height: 7px; }
#pingBars i:nth-child(3) { height: 11px; }
#statusPill[data-ping="good"] #pingBars i { background: #35e0e8; }
#statusPill[data-ping="ok"] #pingBars i:nth-child(-n+2) { background: #ffd23f; }
#statusPill[data-ping="poor"] #pingBars i:nth-child(1) { background: #ff4d9d; }

#voice {
  position: absolute; z-index: 6; left: 1208px; top: 24px; width: 48px; height: 48px;
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; border: 3px solid #16121f; border-radius: 12px;
  background: #241d33; color: #fff8e7; font-size: 16px; box-shadow: 0 3px 0 #16121f;
}
#voice .hud-label { color: #8a7fa8; font-size: 7px; letter-spacing: .06em; }
#voice[data-state="connected"], #voice[data-state="muted"] { background: #35e0e8; color: #16121f; }
#voice[data-state="muted"] { background: #8a7fa8; }
#voice[data-state="connected"] .hud-label, #voice[data-state="muted"] .hud-label { color: #16121f; opacity: .7; }
#voice[data-state="error"], #voice[data-state="unsupported"] { background: #ff4d9d; }
#voiceDot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #35e0e8; border: 2px solid #16121f; animation: voice-dot-pulse 1.1s ease-in-out infinite; }
#voiceDot[hidden] { display: none; }
@keyframes voice-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.35); } }

#pauseZombies {
  position: absolute; z-index: 6; left: 1152px; top: 24px; width: 48px; height: 48px;
  padding: 0; border: 3px solid #16121f; border-radius: 12px;
  background: #241d33; color: #fff8e7; font-size: 16px; box-shadow: 0 3px 0 #16121f;
}

#rosterToggle {
  position: absolute; z-index: 5; left: 24px; top: 120px; width: 48px; height: 48px;
  padding: 0; border: 3px solid #16121f; border-radius: 12px;
  background: #241d33; color: #35e0e8; font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700;
}
#roster { position: absolute; z-index: 5; left: 24px; top: 232px; width: 190px; max-height: min(52vh, 430px); overflow-y: auto; opacity: .9; pointer-events: none; transition: opacity .15s, transform .15s; }
#roster:not(.open) { opacity: 0; transform: translateX(-12px); visibility: hidden; }
.roster-player { margin: 4px 0; padding: 5px 7px; border-left: 5px solid var(--team-color); border-radius: 5px; background: rgba(26,19,48,.78); font-size: 11px; }
.roster-player.dead { opacity: .38; text-decoration: line-through; }

#boardToggle {
  position: absolute; z-index: 5; left: 24px; top: 176px; width: 48px; height: 48px;
  padding: 0; border: 3px solid #16121f; border-radius: 12px;
  background: #241d33; color: #35e0e8; font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700;
}
.voice-panel { position: absolute; z-index: 12; top: max(54px, calc(env(safe-area-inset-top) + 44px)); right: 10px; width: 218px; color: #fff; font-size: 10px; pointer-events: auto; }
.menu-voice-mount { margin: -2px 0 12px; }
.menu-voice-mount .voice-panel { position: relative; inset: auto; width: 100%; }
.menu-voice-mount #voiceToggle { margin-left: 0; width: 100%; }
/* The full join/mute/leave panel is opened from the compact #voice icon (which forwards
   its click to the panel's own toggle) instead of always being on screen. */
.game-voice-mount .voice-panel { position: absolute; right: 76px; top: 24px; }
.game-voice-mount #voiceToggle { display: none; }
#voiceToggle { display: block; margin-left: auto; min-width: 94px; min-height: 38px; padding: 7px 10px; border-color: #0a1320; background: #90dbf4; font-size: 10px; box-shadow: 0 3px 0 #276b83; }
.voice-panel[data-voice-state="connected"] #voiceToggle { background: #7ee081; }
.voice-panel[data-voice-state="muted"] #voiceToggle { background: #ffd23f; }
.voice-panel[data-voice-state="error"] #voiceToggle,
.voice-panel[data-voice-state="unsupported"] #voiceToggle { background: #ff8ba7; }
#voiceControls { margin-top: 5px; padding: 10px; border: 3px solid #0a1320; border-radius: 11px; background: linear-gradient(145deg, rgba(38,48,68,.97), rgba(13,18,31,.97)); box-shadow: 0 4px 0 rgba(0,0,0,.38); }
#voiceControls[hidden] { display: none; }
#voiceStatus { display: block; min-height: 28px; color: #ffd23f; line-height: 1.35; }
.voice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
.voice-actions button { min-height: 44px; margin: 0; padding: 7px 5px; border-width: 3px; font-size: 9px; box-shadow: 0 3px 0 #2b1d00; }
#voiceJoin { grid-column: 1 / -1; background: #7ee081; }
#voiceLeave { background: #ff8ba7; }
#voiceMembers { margin-top: 7px; max-height: 72px; overflow-y: auto; color: rgba(255,255,255,.9); line-height: 1.5; overflow-wrap: anywhere; }
#voiceControls small { display: block; margin-top: 7px; color: rgba(255,255,255,.55); font-size: 8px; letter-spacing: .04em; }
#matchMessage { white-space: pre-line; position: absolute; top: 32%; left: 50%; transform: translateX(-50%); width: min(90vw, 680px); color: #ffd23f; font-size: clamp(24px, 6vw, 48px); font-weight: 1000; text-align: center; text-shadow: 3px 3px 0 #d43d6a, 6px 6px 0 #2b1d00; pointer-events: none; }
/* Sits tucked under the HUD rather than over the play area, and fades out so it never
   hides an approaching horde. */
#storyPanel { position: absolute; z-index: 7; top: max(112px, calc(env(safe-area-inset-top) + 104px)); left: 50%; transform: translateX(-50%); width: min(58vw, 440px); padding: 8px 14px; border: 3px solid #2b1d00; border-radius: 12px; background: rgba(26,19,48,.72); backdrop-filter: blur(2px); text-align: center; pointer-events: none; opacity: 1; transition: opacity .5s ease; }
#storyPanel.fading { opacity: 0; }
#storyPanel strong { color: #ffd23f; font-size: clamp(12px,2.4vw,16px); }
#storyPanel p { margin: 4px 0 0; font-size: 11px; line-height: 1.35; opacity: .85; }
#campaignHud { position: absolute; z-index: 4; top: max(78px, calc(env(safe-area-inset-top) + 68px)); left: 50%; transform: translateX(-50%); width: min(70vw, 620px); padding: 7px 12px; border: 3px solid #2b1d00; border-radius: 10px; background: rgba(26,19,48,.9); text-align: center; pointer-events: none; }
#campaignHud span { display: block; color: #90dbf4; font-size: 8px; font-weight: 1000; letter-spacing: .18em; }
#campaignHud strong { display: block; color: #ffd23f; font-size: 12px; }
#campaignHud small { color: rgba(255,255,255,.72); font-size: 9px; }
#startNow { position: absolute; top: calc(32% + 86px); left: 50%; transform: translateX(-50%); z-index: 5; padding: 12px 18px; background: #7ee081; font-size: 13px; white-space: nowrap; touch-action: manipulation; }
#startNow:disabled { opacity: .6; }

/* ---- Centre column: the one strip a gripping hand never covers. Never mirrors. ---- */
#interact {
  position: absolute; z-index: 5; left: 520px; top: 588px; width: 240px; height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 12px;
  border: 3px solid #16121f; border-radius: 12px; background: #ffd23f; color: #16121f;
  font-family: "Baloo 2", "Trebuchet MS", sans-serif; font-size: 14px; font-weight: 800;
  text-align: center; box-shadow: 0 4px 0 #16121f; cursor: pointer;
}
#interact[hidden] { display: none; }
#interactKey {
  flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: #16121f; color: #ffd23f; border-radius: 6px;
  font-family: "Space Mono", monospace; font-size: 12px; font-weight: 700;
}

/* The pod is a fixed-size box sitting right beside the touch controls, so it clips
   rather than letting a long weapon name or armour readout spill onto the aim stick. */
#vitals {
  position: absolute; z-index: 5; left: 440px; top: 660px; width: 400px; height: 116px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; align-content: center;
  padding: 8px 14px; border: 3px solid #16121f; border-radius: 14px; background: #241d33;
  color: #fff8e7; font-family: "Space Mono", "Trebuchet MS", monospace; box-shadow: 0 3px 0 #16121f;
  pointer-events: none; overflow: hidden;
}
/* min-width:0 everywhere a nowrap readout lives, so a long weapon name shrinks
   instead of stretching the track and pushing the rest of the row out of the pod. */
.vitals-hp, .vitals-ammo { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; }
#hpBar { flex: 1; }
#hpBar { height: 11px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
#hpFill { display: block; height: 100%; width: 100%; background: #ffd23f; border-radius: 4px; transition: width .15s ease; }
#hpValue { color: #ffd23f; font-weight: 900; min-width: 30px; text-align: right; }
#weaponName { margin-left: auto; color: #8a7fa8; font-size: 9px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ammo { color: #fff8e7; font-size: 20px; font-weight: 700; white-space: nowrap; }
.vitals-slots { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
.weapon-slot { position: relative; min-width: 0; min-height: 26px; display: flex; align-items: center; padding: 3px 5px 3px 31px; border: 2px solid rgba(255,255,255,.16); border-radius: 6px; color: #8a7fa8; font-size: 8px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weapon-slot::before { content: ""; position: absolute; left: 3px; top: 50%; width: 25px; height: 20px; transform: translateY(-50%); background-image: var(--weapon-icon, none); background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.75)); }
.weapon-slot.active { border-color: #ffd23f; background: rgba(255,210,63,.18); color: #fff8e7; }
.vitals-footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 900; color: #fff8e7; }
#fragReadout { color: #ff4d9d; }
#stunReadout { color: #fff8e7; }
#plateSpare { color: #8a7fa8; }
#killCount { margin-left: auto; color: #ff4d9d; }

/* ---- Touch controls: joystick, aim stick / fire button, action band. These are the
   only elements the left-handed mirror flips. ---- */
#joystick { display: none; position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: max(28px, env(safe-area-inset-bottom)); width: 112px; height: 112px; border: 4px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(26,19,48,.4); touch-action: none; }
#joystick span { position: absolute; left: 34px; top: 34px; width: 40px; height: 40px; border-radius: 50%; background: #ffd23f; border: 3px solid #2b1d00; }
#aimStick { display: none; position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); width: 124px; height: 124px; border: 4px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(212,61,106,.22); touch-action: none; z-index: 3; }
#aimStick span { position: absolute; left: 39px; top: 39px; width: 46px; height: 46px; border-radius: 50%; background: #d43d6a; border: 3px solid #2b1d00; }
#aimStick em { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.6); font-size: 9px; font-weight: 900; font-style: normal; letter-spacing: .08em; pointer-events: none; }
#aimStick.active em { opacity: 0; }
#aimStick.active { border-color: rgba(255,255,255,.8); }
/* The ring turns red once the stick is pushed far enough to shoot. */
#aimStick.firing { border-color: #ff4d6d; background: rgba(212,61,106,.42); }
#aimStick.firing span { background: #ff4d6d; }

#actionBand {
  display: none; position: absolute; z-index: 4;
  right: max(20px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom));
  grid-template-columns: repeat(2, 46px); gap: 6px; grid-auto-rows: 46px;
}
#actionBand button {
  position: relative; min-width: 0; padding: 0; border: 3px solid #16121f; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: #16121f; font-family: "Baloo 2", "Trebuchet MS", sans-serif; font-weight: 900;
  box-shadow: 0 3px 0 #16121f; opacity: .72;
}
#actionBand button:active { opacity: 1; }
.action-glyph { font-size: 17px; line-height: 1; }
.action-label { font-size: 7px; line-height: 1; letter-spacing: .06em; }
/* Every action gets its own fill, so the six buttons read apart at a glance with
   a thumb over them. No two neighbours in the 2-column grid share a colour. */
#reload { background-color: #ffd23f; }
#usePlate { background-color: #35e0e8; }
#switchWeapon { background-color: #ff4d9d; }
#equip { background-color: #7ee081; }
#throwFrag { background-color: #ff8940; }
#throwStun { background-color: #fff8e7; }
/* Dark chip: the only badge colour that holds contrast on all six fills. */
.badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 999px; background: #16121f; color: #fff8e7; font-size: 9px; line-height: 18px; }
.badge:empty { display: none; }

#keyLegend {
  display: grid; position: absolute; z-index: 4; left: 24px; top: 676px; width: 240px; height: 100px;
  box-sizing: border-box; padding: 9px 12px; border: 3px solid #16121f; border-radius: 14px; background: #241d33;
  grid-template-columns: 1fr 1fr; gap: 6px 10px; align-content: center;
  font-family: "Space Mono", monospace; color: #8a7fa8; font-size: 10px; font-weight: 700; pointer-events: none;
}
#keyLegend b { font-weight: 700; color: #fff8e7; }

/* While spectating there is nothing to shoot, so the action controls step aside and a
   clear banner explains what the camera is following. */
#game.spectating #aimStick, #game.spectating #actionBand, #game.spectating #joystick, #game.spectating #vitals { display: none; }
#game.spectating #interact {
  display: flex; left: 50%; right: auto; top: auto; bottom: 40px; transform: translateX(-50%);
  width: auto; min-width: 200px; background: rgba(212,61,106,.9); color: #fff; font-size: 13px; padding: 0 16px;
}
#spectatorActions { position: absolute; left: 50%; top: calc(32% + 150px); transform: translateX(-50%); z-index: 6; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: min(92vw, 390px); }
#spectatorActions[hidden] { display: none; }
#spectatorActions button { min-height: 48px; padding: 12px 10px; font-size: 13px; white-space: nowrap; touch-action: manipulation; }
#spectateRematch { background: #ffd23f; }
#spectateNewGame { background: #90dbf4; }
#reviveMe { position: absolute; left: 50%; top: calc(32% + 86px); transform: translateX(-50%); z-index: 6; padding: 13px 20px; background: #7ee081; font-size: 14px; white-space: nowrap; touch-action: manipulation; }
#reviveMe:disabled { opacity: .6; }
/* ==== Pause sheet: a scrim + centred card, replacing the old full-screen scrolling
   panel. Base rules below suit desktop and landscape touch (a wide viewport, two
   columns); the portrait touch query further down switches to a single stacked
   column matching the narrow reference layout. ==== */
#pauseScrim { position: fixed; inset: 0; z-index: 9; background: rgba(14,11,22,.84); backdrop-filter: blur(3px); }
#pauseScrim[hidden] { display: none; }
#pauseControls { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#pauseControls[hidden] { display: none; }
.pause-sheet { width: min(760px, 100%); max-height: 92dvh; box-sizing: border-box; overflow-y: auto; padding: 18px; border: 4px solid #16121f; border-radius: 22px; background: #1d1729; box-shadow: 0 6px 0 #16121f; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; color: #fff8e7; font-family: "Baloo 2", "Trebuchet MS", sans-serif; }
.pause-header, .pause-resume, .pause-toggle-grid, .pause-footer { grid-column: 1 / -1; }
.pause-header { display: flex; align-items: center; gap: 10px; }
.pause-header strong:first-child { font-size: 24px; letter-spacing: -.01em; }
#pausePhaseChip { font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700; color: #ffd23f; background: #241d33; border: 2px solid #16121f; border-radius: 7px; padding: 5px 7px; }
#pauseTimer { margin-left: auto; font-family: "Space Mono", monospace; font-size: 12px; color: #8a7fa8; }
.pause-diagnostics { display: flex; align-items: center; height: 34px; padding: 0 12px; background: #241d33; border: 3px solid #16121f; border-radius: 11px; font-family: "Space Mono", monospace; font-size: 10px; font-weight: 700; color: #8a7fa8; }
.pause-diagnostics span { flex: 1; }
.pause-diagnostics b { color: #35e0e8; font-weight: 700; }
.pause-resume { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; padding: 6px; background: #ffd23f; border: 3px solid #16121f; border-radius: 15px; box-shadow: 0 5px 0 #16121f; cursor: pointer; }
.pause-resume span { font-size: 18px; font-weight: 800; color: #16121f; }
.pause-resume small { font-family: "Space Mono", monospace; font-size: 9px; font-weight: 700; color: #16121f; opacity: .62; }
.pause-toggle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pause-toggle { padding: 6px 8px; background: #241d33; border: 3px solid #16121f; border-radius: 12px; display: flex; flex-direction: column; gap: 5px; }
.pause-toggle .hud-label { color: #8a7fa8; font-size: 8px; letter-spacing: .1em; }
.chip-row { display: flex; gap: 4px; }
.chip-row .chip { flex: 1; padding: 5px 0; background: #1d1729; border: 2px solid #16121f; border-radius: 6px; font-family: "Baloo 2", sans-serif; font-size: 9px; font-weight: 800; color: #8a7fa8; touch-action: manipulation; }
/* Keyed to the setting, not the element, so the pause sheet and the home-page
   SETTINGS section share one appearance. */
[data-setting="handedness"] .chip[aria-pressed="true"], [data-setting="haptics"] .chip[aria-pressed="true"] { background: #ffd23f; color: #16121f; }
[data-setting="fireMode"] .chip[aria-pressed="true"] { background: #ff4d9d; color: #16121f; }
[data-setting="voiceMode"] .chip[aria-pressed="true"] { background: #35e0e8; color: #16121f; }
.pause-sliders { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #241d33; border: 3px solid #16121f; border-radius: 14px; }
.pause-sliders label { display: flex; align-items: center; gap: 8px; font-family: "Space Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: #8a7fa8; }
.pause-sliders output { order: 3; min-width: 22px; text-align: right; color: #fff8e7; }
.pause-sliders input[type="range"] { order: 2; flex: 1; height: 28px; margin: 0; accent-color: #35e0e8; touch-action: manipulation; }
.pause-squad { display: flex; flex-direction: column; gap: 6px; padding: 9px 12px; background: #241d33; border: 3px solid #16121f; border-radius: 14px; max-height: 140px; overflow-y: auto; }
.pause-squad-row { display: flex; align-items: center; gap: 8px; height: 26px; }
.pause-squad-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px #16121f; }
.pause-squad-name { font-weight: 800; font-size: 12px; }
.pause-squad-state { font-family: "Space Mono", monospace; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.pause-squad-hp { margin-left: auto; font-family: "Space Mono", monospace; font-size: 9px; font-weight: 700; color: #8a7fa8; }
.pause-squad-mic { flex: none; width: 28px; height: 22px; padding: 0; border: 2px solid #16121f; border-radius: 7px; background: #1d1729; font-size: 11px; touch-action: manipulation; }
.pause-leaderboard-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; background: #1d1729; border: 3px solid #3c3155; border-radius: 12px; color: #fff8e7; font-size: 12px; font-weight: 800; letter-spacing: .04em; touch-action: manipulation; }
#pauseLeaderboardSub { font-family: "Space Mono", monospace; font-size: 10px; font-weight: 700; color: #ffd23f; }
.pause-leaderboard-row span:last-child { margin-left: auto; font-size: 14px; color: #8a7fa8; }
.pause-footer { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pause-footer button { min-height: 42px; border: 3px solid #16121f; border-radius: 12px; font-size: 12px; font-weight: 800; letter-spacing: .04em; touch-action: manipulation; }
.pause-leave-btn { background: #1d1729; border-color: #ff4d9d; color: #ff4d9d; }
#pauseLeaveConfirm { position: fixed; inset: 0; z-index: 11; display: flex; align-items: center; justify-content: center; background: rgba(14,11,22,.9); }
#pauseLeaveConfirm[hidden] { display: none; }
.pause-confirm-card { width: min(300px, 90vw); box-sizing: border-box; padding: 20px; border: 4px solid #16121f; border-radius: 20px; background: #1d1729; box-shadow: 0 6px 0 #16121f; }
.pause-confirm-card h3 { margin: 0; font-size: 20px; font-weight: 800; color: #fff8e7; }
.pause-confirm-card p { margin: 8px 0 16px; font-size: 13px; font-weight: 500; line-height: 1.45; color: #bdb3d4; }
#pauseKeepPlaying { width: 100%; height: 46px; margin-bottom: 8px; border: 3px solid #16121f; border-radius: 12px; background: #ffd23f; box-shadow: 0 4px 0 #16121f; font-size: 13px; font-weight: 800; }
#pauseConfirmLeave { width: 100%; height: 46px; border: 3px solid #16121f; border-radius: 12px; background: #ff4d9d; box-shadow: 0 4px 0 #16121f; color: #16121f; font-size: 13px; font-weight: 800; }
#game.paused #joystick, #game.paused #aimStick, #game.paused #actionBand,
#game.paused #vitals, #game.paused #interact { display: none; }
#game.paused { touch-action: pan-y; }
#hitMarker { position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.35) rotate(12deg); color: #fff; font-size: 58px; font-weight: 1000; text-shadow: 0 0 4px #2b1d00, 0 0 12px #d43d6a; opacity: 0; pointer-events: none; transition: opacity .06s, transform .08s; }
#hitMarker.active { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
#hitMarker.armor { color: #90dbf4; text-shadow: 0 0 4px #2b1d00, 0 0 14px #58c7ff; }
#hitMarker.critical { color: #ffd23f; font-size: 72px; text-shadow: 0 0 5px #2b1d00, 0 0 18px #ff4d6d; }
#damageFlash { position: absolute; inset: 0; background: radial-gradient(circle, transparent 30%, rgba(212,61,106,.58)); opacity: 0; pointer-events: none; transition: opacity .16s; }
#damageFlash.active { opacity: 1; }
#resultPanel { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%,-44%); width: min(94vw, 840px); max-height: 68dvh; overflow: auto; padding: 16px; border: 4px solid #2b1d00; border-radius: 18px; background: rgba(26,19,48,.96); box-shadow: 0 10px 0 rgba(0,0,0,.45); }
#resultPanel h2 { margin: 0 0 9px; color: #ffd23f; text-align: center; }
#personalStats, #careerStats { margin: 8px 0; color: #fff; font-size: 12px; font-weight: 900; text-align: center; }
.leaderboard-scroll { overflow-x: auto; }
#resultPanel table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 12px; }
#resultPanel th, #resultPanel td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.16); text-align: right; }
#resultPanel th:nth-child(2), #resultPanel td:nth-child(2) { text-align: left; }
#resultPanel tr.me { color: #ffd23f; background: rgba(255,210,63,.1); }
#resultActions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(390px, 84vw); margin: 8px auto 0; }
#resultActions button { min-height: 46px; font-size: 14px; }
#game.finished #matchMessage { top: 7%; font-size: clamp(20px,4vw,38px); }
#game.finished #rosterToggle, #game.finished #roster { display: none; }
/* Roster and leaderboard can both be open together, so the leaderboard sits beside
   rather than under the roster panel. */
#liveLeaderboard { display: none; position: absolute; z-index: 5; left: 224px; top: 232px; width: min(245px, 58vw); max-height: 34vh; overflow-y: auto; padding: 7px; border: 3px solid #2b1d00; border-radius: 10px; background: rgba(26,19,48,.88); pointer-events: none; }
#liveLeaderboard.open { display: block; }
.live-rank { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 5px; align-items: center; padding: 3px 2px; font-size: 9px; border-bottom: 1px solid rgba(255,255,255,.12); }
.live-rank.me { color: #ffd23f; font-weight: 1000; }
.live-rank span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==== Touch layouts. Base rules below are Variant A/B (portrait, 390x844 reference,
   safe area 47/10/34/10). The nested landscape query further down overrides them with
   Variant C (844x390 reference, safe area 10/54/20/54). Desktop keeps the plain
   left/top px values declared above each selector's base rule. ==== */
@media (pointer: coarse), (max-width: 760px) {
  #joystick { display: block; }
  #aimStick { display: block; }
  #fireButton:not([hidden]) { display: block; }
  #actionBand { display: grid; }
  #keyLegend { display: none; }
  #joystick, #aimStick, #fireButton { opacity: .68; backdrop-filter: blur(1px); }
  #actionBand button { opacity: .72; }

  #statusPill { left: max(10px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + 53px); width: 206px; height: 34px; font-size: 11px; }
  #voice { right: max(10px, env(safe-area-inset-right)); left: auto; top: calc(env(safe-area-inset-top) + 53px); width: 44px; height: 44px; font-size: 16px; }
  #pauseZombies { right: calc(max(10px, env(safe-area-inset-right)) + 52px); left: auto; top: calc(env(safe-area-inset-top) + 53px); width: 44px; height: 44px; font-size: 13px; }
  #rosterToggle { left: max(10px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + 210px); width: 44px; height: 44px; font-size: 9px; }
  #boardToggle { left: max(10px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + 262px); width: 44px; height: 44px; font-size: 9px; }
  #roster { left: max(10px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + 314px); width: 155px; max-height: 34vh; }
  #liveLeaderboard { left: calc(max(10px, env(safe-area-inset-left)) + 163px); top: calc(env(safe-area-inset-top) + 314px); width: min(180px, 52vw); }

  /* Anchored to both sticks rather than a fixed width: 136px exactly on the 390px
     reference phone, but it grows into the dead space on a wider one and shrinks
     clear of the aim stick on a narrower one instead of colliding with it. */
  #interact { left: calc(env(safe-area-inset-left) + 122px); right: calc(max(10px, env(safe-area-inset-right)) + 122px); top: auto; bottom: calc(env(safe-area-inset-bottom) + 178px); width: auto; height: 44px; gap: 7px; padding: 0 8px; font-size: 11px; }
  #interactKey { width: 24px; height: 24px; font-size: 11px; }
  /* One column on a phone: the two-column desktop grid puts armour and kills in a
     second column the 136px-wide pod has no room for, so they spilled over the aim stick. */
  #vitals { left: calc(env(safe-area-inset-left) + 122px); right: calc(max(10px, env(safe-area-inset-right)) + 122px); top: auto; bottom: calc(env(safe-area-inset-bottom) + 42px); width: auto; height: 116px; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 6px 9px; font-size: 10px; }
  .vitals-hp, .vitals-ammo { font-size: 10px; }
  #ammo { font-size: 16px; }
  /* The active slot chip below already names the weapon, and 136px only ever
     fits a truncated copy of it next to the ammo count. */
  #weaponName { display: none; }
  /* Side by side, the two chips are too narrow for a weapon name on a phone. */
  .vitals-slots { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .weapon-slot { min-height: 21px; padding: 2px 4px 2px 25px; font-size: 7px; }
  .weapon-slot::before { left: 2px; width: 20px; height: 16px; }

  #joystick { left: max(10px, env(safe-area-inset-left)); bottom: calc(env(safe-area-inset-bottom) + 42px); width: 104px; height: 104px; }
  #aimStick { right: max(10px, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 42px); width: 116px; height: 116px; }
  #fireButton { right: calc(env(safe-area-inset-right) + 26px); bottom: calc(env(safe-area-inset-bottom) + 48px); width: 92px; height: 92px; }
  #actionBand {
    right: calc(env(safe-area-inset-right) + 12px); bottom: calc(env(safe-area-inset-bottom) + 216px);
    grid-template-columns: repeat(2, 46px); grid-auto-rows: 46px;
  }

  /* Left-handed mirroring flips only the touch controls (joystick, aim stick / fire
     button, action band). Chrome and the centre column (interact, vitals) never move. */
  #game.left-handed #joystick { left: auto; right: max(10px, env(safe-area-inset-right)); }
  #game.left-handed #aimStick, #game.left-handed #fireButton { right: auto; left: max(10px, env(safe-area-inset-left)); }
  #game.left-handed #fireButton { left: calc(env(safe-area-inset-left) + 26px); }
  #game.left-handed #actionBand { right: auto; left: calc(env(safe-area-inset-left) + 12px); direction: rtl; }
  #game.left-handed #actionBand button { direction: ltr; }
  /* The centre column stays centred rather than switching sides, but its
     clearances swap with the sticks: the aim stick is the wider of the two, so
     whichever edge it is on needs the bigger inset. Without this the card ran
     4px under the aim stick in left-handed play. */
  #game.left-handed #interact, #game.left-handed #vitals { left: calc(max(10px, env(safe-area-inset-left)) + 122px); }

  /* Keep the early-start button a large, clearly tappable target on phones. */
  #spectatorActions { top: auto; bottom: max(82px, calc(env(safe-area-inset-bottom) + 66px)); width: min(92vw, 370px); }
  #reviveMe { top: auto; bottom: max(210px, calc(env(safe-area-inset-bottom) + 190px)); width: min(84vw, 340px); padding: 16px 12px; font-size: 15px; box-shadow: 0 5px 0 #2b1d00; }
  #startNow { top: auto; bottom: max(210px, calc(env(safe-area-inset-bottom) + 190px)); width: min(84vw, 340px); padding: 15px 12px; font-size: 14px; box-shadow: 0 5px 0 #2b1d00; }
  #matchMessage { top: 20%; font-size: clamp(19px, 5.4vw, 34px); }
  /* Narrow portrait phones stack the sheet into a single column (matching the
     390x844 reference layout) instead of the wide two-column desktop/landscape grid. */
  .pause-sheet { grid-template-columns: 1fr; padding: 14px; }
  .pause-toggle-grid { grid-template-columns: 1fr 1fr; }
  .pause-diagnostics { flex-wrap: wrap; height: auto; padding: 6px 12px; gap: 4px 0; }
  #campaignHud { top: max(92px, calc(env(safe-area-inset-top) + 84px)); width: min(74vw, 470px); }
  #storyPanel { top: max(120px, calc(env(safe-area-inset-top) + 112px)); width: min(80vw, 360px); padding: 7px 10px; }
  #storyPanel p { font-size: 10px; }
  #resultPanel { top: 52%; max-height: 72dvh; padding: 12px; }
}

/* Variant C: landscape touch (844x390 reference, safe area 10/54/20/54). */
@media ((pointer: coarse) or (max-width: 760px)) and (orientation: landscape) {
  #statusPill { left: max(54px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + 14px); width: 206px; height: 32px; }
  #voice { right: max(54px, env(safe-area-inset-right)); top: calc(env(safe-area-inset-top) + 14px); width: 40px; height: 40px; }
  #pauseZombies { right: calc(max(54px, env(safe-area-inset-right)) + 48px); top: calc(env(safe-area-inset-top) + 14px); width: 40px; height: 40px; }
  #rosterToggle { left: max(54px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + 120px); width: 40px; height: 40px; font-size: 9px; }
  #boardToggle { left: max(54px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + 164px); width: 40px; height: 40px; font-size: 9px; }
  #roster { left: max(54px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + 212px); max-height: 40vh; }
  #liveLeaderboard { left: calc(max(54px, env(safe-area-inset-left)) + 163px); top: calc(env(safe-area-inset-top) + 212px); }

  #interact { left: calc(env(safe-area-inset-left) + 330px); right: auto; top: auto; bottom: calc(env(safe-area-inset-bottom) + 166px); width: 184px; height: 44px; }
  #vitals { left: calc(env(safe-area-inset-left) + 330px); right: auto; top: auto; bottom: max(20px, env(safe-area-inset-bottom)); width: 184px; height: 116px; grid-template-columns: minmax(0, 1fr); gap: 3px; }
  #weaponName { display: inline; }

  #joystick { left: max(54px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); width: 104px; height: 104px; }
  #aimStick { right: max(54px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 116px; height: 116px; }
  #fireButton { right: calc(env(safe-area-inset-right) + 70px); bottom: max(20px, env(safe-area-inset-bottom)); width: 92px; height: 92px; }
  #actionBand { right: max(54px, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 140px); grid-template-columns: repeat(2, 44px); grid-auto-rows: 44px; gap: 4px 6px; }

  #game.left-handed #joystick { left: auto; right: max(54px, env(safe-area-inset-right)); }
  #game.left-handed #aimStick, #game.left-handed #fireButton { right: auto; left: max(54px, env(safe-area-inset-left)); }
  #game.left-handed #fireButton { left: calc(env(safe-area-inset-left) + 70px); }
  #game.left-handed #actionBand { right: auto; left: max(54px, env(safe-area-inset-left)); }

  #spectatorActions { bottom: max(20px, env(safe-area-inset-bottom)); }
  #reviveMe { bottom: max(20px, env(safe-area-inset-bottom)); }
  #startNow { bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (max-height: 620px) {
  .panel { padding: 12px 18px; }
  h1 { font-size: 42px; }
  .subtitle { margin: 8px 0; font-size: 12px; }
  label { margin: 7px 0; }
  input { padding: 7px 9px; }
  .mode-divider { margin: 7px 0 4px; }
  .bot-options select, .mode-options select { padding: 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  #app { text-shadow: none; }
  #app :where(h1, h2, h3, .eyebrow, .subtitle, .hud-label, #statusPill #phase,
    #matchMessage, #storyPanel > strong, #campaignHud > span,
    #campaignHud > strong, #campaignHud > small, #interact,
    #vitals #weaponName, #vitals #ammo, .roster-player, #personalStats,
    #careerStats, th, td, .intermission-kicker, .pause-kicker) {
    translate: none;
    rotate: none;
    scale: 1;
    text-shadow: none;
  }
  input, select { text-shadow: none; }
}


/* Story intermission between campaign chapters. */
#intermission { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(9,7,20,.94); padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; }
#intermission[hidden] { display: none; }
.intermission-card { width: min(560px, 94vw); border: 4px solid #2b1d00; border-radius: 16px; background: #1a1330; padding: 20px; text-align: center; }
.intermission-kicker { color: #ffd23f; font-size: 11px; letter-spacing: .16em; margin: 0 0 4px; }
.intermission-card h2 { margin: 0 0 10px; font-size: clamp(20px, 5vw, 30px); }
.intermission-card h3 { margin: 4px 0; color: #90dbf4; font-size: clamp(16px, 4vw, 22px); }
.intermission-card p { font-size: 13px; line-height: 1.45; opacity: .9; }
.intermission-next { margin: 14px 0; padding: 12px; border: 3px solid #2b1d00; border-radius: 12px; background: rgba(144,219,244,.08); }
.intermission-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin: 14px 0; }
.intermission-totals div { border: 3px solid #2b1d00; border-radius: 10px; padding: 8px 4px; background: rgba(255,255,255,.05); }
.intermission-totals strong { display: block; color: #ffd23f; font-size: 16px; }
.intermission-totals span { font-size: 10px; letter-spacing: .08em; opacity: .8; }
#continueCampaign { width: 100%; padding: 16px; font-size: 15px; touch-action: manipulation; }
#intermissionTravel { color: #7ee081; font-weight: 900; margin-top: 10px; }
/* Touch controls never sit on top of the intermission. */
#game.intermission #joystick, #game.intermission #aimStick, #game.intermission #actionBand,
#game.intermission #vitals { display: none; }


/* Compact home-screen sound controls: two icon toggles either side of one slider. */
#homeAudio { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
#homeAudio input[type="range"] { flex: 1; margin: 0; }
.audio-icon { width: 42px; min-width: 42px; height: 42px; padding: 0; overflow: hidden; color: transparent; font-size: 0; line-height: 1; background-color: #ffd23f; background-position: center; background-repeat: no-repeat; background-size: 27px; border: 3px solid #2b1d00; border-radius: 10px; cursor: pointer; }
#homeMusicToggle { background-image: url("assets/royale/runtime/icons/music.png"); }
#homeSfxToggle { background-image: url("assets/royale/runtime/icons/speaker-on.png"); }
#homeSfxToggle.muted { background-image: url("assets/royale/runtime/icons/speaker-muted.png"); }
.audio-icon.muted { background: #6b6b78; color: rgba(255,255,255,.65); }
.audio-icon.muted#homeMusicToggle { background-color: #6b6b78; background-image: url("assets/royale/runtime/icons/music.png"); }
.audio-icon.muted#homeSfxToggle { background-color: #6b6b78; background-image: url("assets/royale/runtime/icons/speaker-muted.png"); }
#campaignStart { margin-top: 6px; }


/* Android control reliability.
   Without an explicit touch-action, Chrome on Android may claim a press on these
   controls as a scroll or double-tap-zoom gesture and then fire pointercancel, which
   makes FIRE and the action buttons feel dead or stick on. iOS is more forgiving, which
   is why this only showed up on Android. */
#actionBand,
#actionBand button,
#rosterToggle,
#boardToggle,
#voice,
#leave,
#interact,
#voicePanel button,
#pauseZombies,
#joystick span,
#aimStick span {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* The expanded member list can exceed short landscape phone heights. Keep taps crisp
   while still allowing that one panel to scroll instead of trapping its bottom row. */
#voicePanel { touch-action: pan-y; }
#voiceControls { touch-action: pan-y; }
#voicePanel button { touch-action: manipulation; }

/* A pressed control must never be left highlighted after the pointer is cancelled. */
#actionBand button:active { filter: brightness(1.15); opacity: 1; }


/* Optional tap-to-fire button. Hidden unless the player selects it in settings, and
   only ever shown on touch layouts where the aim stick is present. It replaces the aim
   stick one-for-one in the same corner cell (see the touch media queries above for its
   exact per-orientation position) and picks up the same .68 opacity + blur every other
   touch control uses so it reads as part of that HUD rather than a solid slab sitting
   on top of the battlefield. */
#fireButton {
  display: none;
  position: absolute;
  z-index: 6;
  padding: 0;
  border: 4px solid #2b1d00;
  border-radius: 50%;
  background: #ff8ba7;
  color: #2b1d00;
  font: 800 13px/1.15 "Trebuchet MS", sans-serif;
  box-shadow: 0 5px 0 #2b1d00;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
#fireButton[hidden] { display: none; }
#fireButton:active, #fireButton.firing { transform: translateY(3px); box-shadow: 0 2px 0 #2b1d00; filter: brightness(1.12); }