/* Critical: author CSS must not override the HTML hidden attribute. */
[hidden] {
  display: none !important;
}

@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap");

:root {
  --bg: #08060d;
  --text: #fff8ef;
  --muted: #b8a9bf;
  --lime: #c7ff2f;
  --pink: #ff3db8;
  --orange: #ff7a1a;
  --purple: #7b4dff;
  --line: rgba(255, 255, 255, 0.14);
  --mono: "Space Mono", ui-monospace, monospace;
  --display: "Archivo Black", Impact, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
}

button { font: inherit; color: inherit; }

.noise,
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.noise {
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.scanlines {
  opacity: .12;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.025) 4px);
}

.landing {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  padding: 0 5vw 6vw;
  background:
    radial-gradient(circle at 72% 24%, rgba(123,77,255,.22), transparent 30rem),
    radial-gradient(circle at 12% 80%, rgba(255,61,184,.12), transparent 24rem),
    linear-gradient(145deg, #08060d, #12071c 52%, #050408);
}

.landing header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--display);
  letter-spacing: .06em;
}

.wordmark span { color: var(--lime); }

.status {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-size: .65rem;
  letter-spacing: .12em;
}

.status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 14px var(--lime);
}

.hero {
  position: relative;
  z-index: 2;
  width: min(62%, 950px);
  padding-top: 12vh;
}

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--lime);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
}

h1, h2 {
  font-family: var(--display);
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(4.3rem, 10.6vw, 10rem);
  line-height: .82;
  letter-spacing: -.075em;
}

h1 em {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px var(--pink);
  font-style: normal;
  text-shadow: 0 0 30px rgba(255,61,184,.4);
}

.intro {
  max-width: 700px;
  margin: 2rem 0 0;
  color: #d3c8d6;
  line-height: 1.75;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.primary,
.secondary,
.top-controls button,
.debug-head button {
  border: 0;
  min-height: 50px;
  cursor: pointer;
}

.primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 280px;
  padding: 0 1.2rem 0 1.4rem;
  color: #08060d;
  background: var(--lime);
  font-weight: 700;
  letter-spacing: .08em;
}

.primary b { font-size: 1.3rem; }

.secondary,
.top-controls button {
  padding: 0 1.2rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  letter-spacing: .08em;
}

.controls-preview {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.4rem;
}

.controls-preview span {
  padding: .45rem .65rem;
  border: 1px solid var(--line);
  color: #948899;
  background: rgba(0,0,0,.15);
  font-size: .58rem;
  letter-spacing: .09em;
}

.transmission {
  position: absolute;
  z-index: 2;
  top: 18vh;
  right: 5vw;
  width: min(31vw, 430px);
  padding: 1rem;
  border: 1px solid var(--line);
  background: rgba(15,9,22,.88);
  transform: rotate(1deg);
}

.transmission-label {
  margin-bottom: .8rem;
  color: var(--muted);
  font-size: .61rem;
  letter-spacing: .14em;
}

.city-preview {
  position: relative;
  height: 330px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, #291343, #101123 52%, #05060b);
}

.city-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(199,255,47,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,255,47,.07) 1px, transparent 1px);
  background-size: 42px 42px;
}

.sun {
  position: absolute;
  top: 34px;
  right: 34px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1b6, var(--orange) 35%, var(--pink) 68%, transparent 71%);
  filter: drop-shadow(0 0 25px rgba(255,61,184,.7));
}

.buildings {
  position: absolute;
  inset: auto 22px 0;
  display: flex;
  align-items: end;
  gap: 10px;
  height: 72%;
}

.buildings i {
  flex: 1;
  border: 1px solid rgba(199,255,47,.35);
  background:
    repeating-linear-gradient(to bottom, rgba(199,255,47,.68) 0 3px, transparent 3px 14px),
    linear-gradient(#2f1b4c,#0d0a15);
  clip-path: polygon(18% 0,82% 0,100% 100%,0 100%);
}

.buildings i:nth-child(1) { height: 58%; }
.buildings i:nth-child(2) { height: 82%; }
.buildings i:nth-child(3) { height: 47%; }
.buildings i:nth-child(4) { height: 92%; }
.buildings i:nth-child(5) { height: 66%; }

.city-preview > span {
  position: absolute;
  z-index: 3;
  left: 15px;
  bottom: 12px;
  color: var(--lime);
  font-size: .6rem;
  letter-spacing: .1em;
}

.transmission-meta {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: .8rem;
}

.transmission-meta div {
  padding: .7rem;
  border-right: 1px solid var(--line);
}

.transmission-meta div:last-child { border-right: 0; }

.transmission-meta small {
  display: block;
  margin-bottom: .3rem;
  color: #7e7285;
  font-size: .48rem;
}

.transmission-meta strong { font-size: .59rem; }

.landing-grid {
  position: absolute;
  z-index: -2;
  left: -15%;
  right: -15%;
  bottom: -31%;
  height: 60%;
  background-image:
    linear-gradient(rgba(199,255,47,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,255,47,.1) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(430px) rotateX(66deg);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 75%, transparent);
}

.orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.orb-one {
  top: 5%;
  left: 41%;
  width: 19vw;
  height: 19vw;
  min-width: 210px;
  min-height: 210px;
  opacity: .32;
  background: radial-gradient(circle at 37% 34%, #fff 0 4%, var(--orange) 9%, var(--pink) 36%, var(--purple) 63%, transparent 69%);
}

.orb-two {
  left: -8vw;
  bottom: -9vw;
  width: 30vw;
  height: 30vw;
  background: radial-gradient(circle, rgba(199,255,47,.15), transparent 68%);
}

.game-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}

.game-view.open {
  opacity: 1;
  visibility: visible;
}

#renderCanvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

.loading-overlay,
.click-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  background: rgba(8,6,13,.95);
}

.loading-logo,
.click-overlay h2 {
  font-family: var(--display);
  font-size: clamp(2.3rem,7vw,7rem);
  line-height: .9;
}

.progress-track {
  width: min(72vw,560px);
  height: 5px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}

.progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--lime);
  box-shadow: 0 0 18px var(--lime);
  transition: width .16s linear;
}

.loading-overlay p,
.click-overlay p {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .1em;
}

.loading-overlay small {
  color: #736a79;
  font-size: .6rem;
}

.click-overlay {
  cursor: pointer;
  background: rgba(8,6,13,.72);
  backdrop-filter: blur(8px);
}

.click-overlay > div {
  max-width: 700px;
  padding: 3rem;
  border: 1px solid var(--line);
  background: rgba(16,9,24,.84);
}

.hud {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 3;
}

.hud-brand,
.hud-help {
  position: absolute;
  bottom: 1rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  background: rgba(8,6,13,.7);
  font-size: .57rem;
  letter-spacing: .1em;
}

.hud-brand { left: 1rem; }
.hud-help { right: 1rem; color: var(--muted); }

.crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%,-50%);
}

.crosshair i {
  position: absolute;
  background: rgba(199,255,47,.92);
  box-shadow: 0 0 5px rgba(199,255,47,.7);
}

.crosshair i:nth-child(1),
.crosshair i:nth-child(2) { width: 6px; height: 1px; top: 12px; }

.crosshair i:nth-child(1) { left: 0; }
.crosshair i:nth-child(2) { right: 0; }

.crosshair i:nth-child(3),
.crosshair i:nth-child(4) { width: 1px; height: 6px; left: 12px; }

.crosshair i:nth-child(3) { top: 0; }
.crosshair i:nth-child(4) { bottom: 0; }

.top-controls {
  position: absolute;
  z-index: 5;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: .45rem;
}

.top-controls button {
  min-height: 38px;
  padding: 0 .85rem;
  font-size: .57rem;
  background: rgba(8,6,13,.75);
}

.debug-panel {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(100%,500px);
  height: 100%;
  border-left: 1px solid var(--line);
  background: rgba(8,6,13,.97);
  transform: translateX(102%);
  transition: transform .18s ease;
}

.debug-panel.open { transform: translateX(0); }

.debug-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
}

.debug-head div { display: flex; flex-direction: column; gap: .25rem; }
.debug-head small { color: var(--lime); font-size: .52rem; letter-spacing: .12em; }
.debug-head strong { font-size: .75rem; letter-spacing: .08em; }
.debug-head button { width: 38px; min-height: 38px; border: 1px solid var(--line); background: transparent; }

.debug-panel dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: .7rem;
  border-bottom: 1px solid var(--line);
}

.debug-panel dl div {
  padding: .55rem;
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px;
}

.debug-panel dt { color: #837889; font-size: .48rem; letter-spacing: .1em; }
.debug-panel dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-size: .6rem; }

.debug-panel pre {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  background: #030305;
  color: #ccd6b9;
  font-size: .61rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.setup-dialog {
  width: min(92%,700px);
  padding: clamp(1.5rem,5vw,3rem);
  border: 1px solid var(--line);
  color: var(--text);
  background: #120b1c;
}

.setup-dialog::backdrop { background: rgba(2,2,5,.8); backdrop-filter: blur(9px); }
.setup-dialog h2 { margin: 0 0 1.5rem; font-size: clamp(2rem,6vw,5rem); line-height: .9; }
.setup-dialog li, .setup-dialog p { color: var(--muted); line-height: 1.8; }
.setup-dialog code { color: var(--lime); }

.dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

@media (max-width: 940px) {
  .hero { width: 100%; padding-top: 9vh; }
  .transmission { position: relative; top: auto; right: auto; width: min(100%,540px); margin-top: 4rem; }
  .landing { padding-bottom: 6rem; }
}

@media (max-width: 620px) {
  .landing { padding: 0 1.1rem 5rem; }
  .landing header { min-height: 66px; }
  .status { max-width: 42%; text-align: right; font-size: .5rem; }
  h1 { font-size: clamp(4rem,21vw,6rem); }
  .actions { display: grid; }
  .primary, .secondary { width: 100%; }
  .city-preview { height: 260px; }
  .transmission-meta { grid-template-columns: 1fr; }
  .transmission-meta div { border-right: 0; border-bottom: 1px solid var(--line); }
  .top-controls { left: 1rem; right: 1rem; }
  .top-controls button { flex: 1; }
  .debug-panel dl { grid-template-columns: 1fr; }
}


/* ================================================================
   CLEAN FPS HUD
   ================================================================ */

.fps-hud {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  font-family: var(--mono);
}

.fps-stats {
  position: absolute;
  left: 1rem;
  bottom: 4.2rem;
  display: flex;
  gap: .5rem;
}

.fps-stat {
  min-width: 92px;
  padding: .58rem .7rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8,6,13,.78);
  backdrop-filter: blur(5px);
}

.fps-stat small {
  display: block;
  color: #928698;
  font-size: .46rem;
  letter-spacing: .14em;
}

.fps-stat strong {
  display: block;
  margin-top: .2rem;
  color: #fff8ef;
  font-size: .92rem;
  letter-spacing: .05em;
}

.fps-stat strong span,
#healthValue {
  color: var(--lime);
}

.weapon-rig {
  --weapon-x: 0px;
  --weapon-y: 0px;
  --weapon-roll: -3deg;

  position: absolute;
  right: clamp(10px, 1.6vw, 26px);
  bottom: -15px;
  width: clamp(145px, 15vw, 225px);
  z-index: 6;
  transform-origin: 73% 91%;
  transform:
    translate3d(var(--weapon-x), var(--weapon-y), 0)
    rotate(var(--weapon-roll));
  filter:
    drop-shadow(0 17px 15px rgba(0,0,0,.78))
    drop-shadow(0 0 7px rgba(199,255,47,.13));
  will-change: transform;
  transition: opacity .12s ease;
}

.weapon-rig.hidden {
  opacity: 0;
}

#weaponView {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  background: transparent;
  user-select: none;
}

.muzzle-flash {
  position: absolute;
  z-index: 2;
  top: 9%;
  right: -13%;
  width: 60px;
  height: 60px;
  opacity: 0;
  transform: rotate(12deg);
  background:
    radial-gradient(
      circle,
      #fff 0 7%,
      #c7ff2f 9% 18%,
      #ff7a1a 29%,
      #ff3db8 42%,
      transparent 68%
    );
  filter: drop-shadow(0 0 18px #ff7a1a);
}

.weapon-rig.firing {
  animation: weapon-recoil 120ms cubic-bezier(.12,.78,.2,1);
}

.weapon-rig.firing .muzzle-flash {
  animation: muzzle-flash 78ms ease-out;
}

.weapon-rig.landing {
  animation: weapon-land 165ms ease-out;
}

@keyframes weapon-recoil {
  0% {
    transform:
      translate3d(var(--weapon-x), var(--weapon-y), 0)
      rotate(var(--weapon-roll));
  }
  35% {
    transform:
      translate3d(
        calc(var(--weapon-x) + 15px),
        calc(var(--weapon-y) + 17px),
        0
      )
      rotate(0deg);
  }
  100% {
    transform:
      translate3d(var(--weapon-x), var(--weapon-y), 0)
      rotate(var(--weapon-roll));
  }
}

@keyframes weapon-land {
  0% {
    transform:
      translate3d(var(--weapon-x), var(--weapon-y), 0)
      rotate(var(--weapon-roll));
  }
  42% {
    transform:
      translate3d(
        var(--weapon-x),
        calc(var(--weapon-y) + 16px),
        0
      )
      rotate(-6deg);
  }
  100% {
    transform:
      translate3d(var(--weapon-x), var(--weapon-y), 0)
      rotate(var(--weapon-roll));
  }
}

@keyframes muzzle-flash {
  0% {
    opacity: 1;
    transform: rotate(12deg) scale(.58);
  }
  100% {
    opacity: 0;
    transform: rotate(30deg) scale(1.28);
  }
}

.weapon-message {
  position: absolute;
  left: 50%;
  bottom: 13%;
  opacity: 0;
  min-width: 165px;
  transform: translateX(-50%);
  padding: .5rem .72rem;
  border: 1px solid rgba(199,255,47,.28);
  color: var(--lime);
  background: rgba(8,6,13,.82);
  font-size: .58rem;
  letter-spacing: .14em;
  text-align: center;
  transition: opacity .1s ease;
}

.weapon-message.show {
  opacity: 1;
}

.hit-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  opacity: 0;
  transform: translate(-50%,-50%);
}

.hit-marker i {
  position: absolute;
  width: 10px;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 7px var(--pink);
}

.hit-marker i:nth-child(1) {
  left: 2px;
  top: 6px;
  transform: rotate(45deg);
}

.hit-marker i:nth-child(2) {
  right: 2px;
  top: 6px;
  transform: rotate(-45deg);
}

.hit-marker i:nth-child(3) {
  left: 2px;
  bottom: 6px;
  transform: rotate(-45deg);
}

.hit-marker i:nth-child(4) {
  right: 2px;
  bottom: 6px;
  transform: rotate(45deg);
}

.hit-marker.show {
  animation: hit-marker 140ms ease-out;
}

@keyframes hit-marker {
  0% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(.62);
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(1.24);
  }
}

@media (max-width: 760px) {
  .weapon-rig {
    right: 4px;
    bottom: -10px;
    width: 155px;
  }

  .speed-stat {
    display: none;
  }

  .fps-stat {
    min-width: 78px;
    padding: .45rem .55rem;
  }
}


/* ================================================================
   MULTIPLAYER / CHAT / PREMIERE
   ================================================================ */

.join-panel {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(100px, .55fr) auto;
  gap: .65rem;
  width: min(100%, 670px);
  margin-top: 1.2rem;
}

.join-panel label {
  display: flex;
  flex-direction: column;
  gap: .32rem;
}

.join-panel label span {
  color: #8f8395;
  font-size: .48rem;
  letter-spacing: .13em;
}

.join-panel input {
  width: 100%;
  min-height: 42px;
  padding: 0 .75rem;
  border: 1px solid var(--line);
  outline: none;
  color: var(--text);
  background: rgba(0,0,0,.27);
  font: .67rem var(--mono);
  letter-spacing: .07em;
}

.join-panel input:focus {
  border-color: rgba(199,255,47,.7);
  box-shadow: 0 0 0 2px rgba(199,255,47,.08);
}

.network-pill,
.online-pill {
  display: flex;
  align-items: center;
  gap: .48rem;
  border: 1px solid var(--line);
  background: rgba(8,6,13,.76);
  color: var(--muted);
  font-size: .52rem;
  letter-spacing: .1em;
}

.network-pill {
  align-self: end;
  min-height: 42px;
  padding: 0 .75rem;
}

.network-pill i,
.online-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #777;
}

.network-pill.connected i,
.online-pill i {
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
}

.network-hud {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 7;
}

.online-pill {
  position: absolute;
  top: 1rem;
  left: 1rem;
  min-height: 35px;
  padding: 0 .7rem;
}

.chat-panel {
  pointer-events: auto;
  z-index: 12;
  position: absolute;
  right: 1rem;
  bottom: 3.8rem;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 2rem));
  height: 260px;
  border: 1px solid var(--line);
  background: rgba(5,4,9,.76);
  backdrop-filter: blur(7px);
  transition: opacity .15s ease, transform .15s ease;
}

.chat-panel.compact {
  opacity: .48;
  transform: translateY(calc(100% - 43px));
}

.chat-head {
  display: flex;
  justify-content: space-between;
  padding: .65rem .72rem;
  border-bottom: 1px solid var(--line);
  font-size: .55rem;
  letter-spacing: .1em;
}

.chat-head span { color: var(--lime); }

.chat-messages {
  flex: 1;
  min-height: 0;
  padding: .65rem;
  overflow: auto;
  font-size: .61rem;
  line-height: 1.45;
}

.chat-line {
  margin-bottom: .42rem;
  overflow-wrap: anywhere;
}

.chat-line .chat-name {
  margin-right: .35rem;
  color: var(--lime);
  font-weight: 700;
}

.chat-line.system {
  color: #9d91a3;
  font-style: italic;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  border-top: 1px solid var(--line);
}

.chat-form input {
  min-width: 0;
  height: 41px;
  padding: 0 .7rem;
  border: 0;
  outline: none;
  color: var(--text);
  background: rgba(0,0,0,.45);
  font: .61rem var(--mono);
}

.chat-form button {
  width: 66px;
  border: 0;
  border-left: 1px solid var(--line);
  color: #08060d;
  background: var(--lime);
  font-size: .54rem;
  font-weight: 700;
}

.announcement-banner {
  position: fixed;
  inset: 0;
  z-index: 7800;
  display: grid;
  place-items: center;
  width: min(1500px, 96vw);
  max-width: 96vw;
  margin: 0 auto;
  padding: 5vw 8vw;
  pointer-events: none;
  opacity: 0;
  transform: scale(.965);
  color: #fff;
  background: transparent;
  border: 0;
  font: 900 clamp(2.5rem, 8.5vw, 9rem)/.88 var(--display);
  letter-spacing: -.045em;
  text-align: center;
  text-transform: uppercase;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-shadow: 0 .025em .10em rgba(0,0,0,.82), 0 0 .25em rgba(199,255,47,.16);
  transition: opacity .16s ease, transform .20s cubic-bezier(.2,.9,.2,1);
}

.announcement-banner.show {
  opacity: 1;
  transform: scale(1);
}

.death-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .5rem;
  color: #fff;
  background: rgba(40,0,15,.58);
  text-align: center;
  backdrop-filter: blur(4px);
}

.death-overlay strong {
  font: clamp(2.2rem, 8vw, 7rem)/.9 var(--display);
  letter-spacing: -.05em;
}

.death-overlay span {
  color: var(--lime);
  font-size: .7rem;
  letter-spacing: .14em;
}

.premiere-overlay {
  pointer-events: auto;
  z-index: 20;
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1.5rem;
  background: rgba(3,2,7,.64);
  backdrop-filter: blur(7px);
}

.premiere-shell {
  position: relative;
  width: min(1120px, 94vw);
  border: 1px solid rgba(255,255,255,.22);
  background: #030205;
  box-shadow: 0 25px 90px rgba(0,0,0,.65);
}

.premiere-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 45px;
  padding: 0 .8rem;
  border-bottom: 1px solid var(--line);
  color: var(--lime);
  font-size: .58rem;
  letter-spacing: .13em;
}

.premiere-head button {
  min-height: 30px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: .52rem;
}

#premiereVideo {
  display: block;
  width: 100%;
  max-height: 76vh;
  background: #000;
}

.premiere-countdown {
  position: absolute;
  z-index: 3;
  inset: 45px 0 0;
  display: none;
  place-content: center;
  color: #fff;
  background: rgba(5,3,10,.82);
  font: clamp(4rem, 17vw, 14rem)/1 var(--display);
  text-align: center;
  white-space: pre-line;
}

.premiere-countdown.show { display: grid; }

.join-premiere {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 2rem;
  min-height: 48px;
  transform: translateX(-50%);
  padding: 0 1.2rem;
  border: 0;
  color: #08060d;
  background: var(--lime);
  font-weight: 700;
}

.mobile-controls { display: none; }

@media (pointer: coarse), (max-width: 760px) {
  .join-panel {
    grid-template-columns: 1fr 1fr;
  }

  .network-pill {
    grid-column: 1 / -1;
  }

  .chat-panel {
    right: .5rem;
    bottom: .5rem;
    width: calc(100vw - 1rem);
    height: min(270px, 42vh);
  }

  .mobile-controls {
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: block;
  }

  .mobile-joystick {
    pointer-events: auto;
    z-index: 3;
    position: absolute;
    left: 22px;
    bottom: 84px;
    width: 116px;
    height: 116px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 50%;
    background: rgba(8,6,13,.28);
    backdrop-filter: blur(3px);
  }

  .mobile-joystick i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: rgba(199,255,47,.38);
    box-shadow: 0 0 18px rgba(199,255,47,.22);
  }

  .mobile-look-zone {
    pointer-events: auto;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
  }

  .mobile-action {
    pointer-events: auto;
    z-index: 3;
    position: absolute;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    color: #fff;
    background: rgba(8,6,13,.58);
    font-size: .55rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
  }

  .mobile-jump { right: 24px; bottom: 92px; }
  .mobile-shoot {
    right: 96px;
    bottom: 24px;
    color: #08060d;
    background: rgba(199,255,47,.82);
  }
  .mobile-chat {
    right: 20px;
    bottom: 20px;
    width: 58px;
    height: 58px;
  }

  .hud-help,
  .online-pill,
  .speed-stat { display: none; }

  .fps-stats { bottom: .6rem; left: .6rem; }
  .fps-stat { min-width: 72px; }
}


/* Non-blocking pointer-lock state. The game stays visible and connected. */
.mouse-capture-hint {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  min-height: 36px;
  padding: 0 .85rem;
  border: 1px solid rgba(199,255,47,.38);
  color: var(--lime);
  background: rgba(8,6,13,.82);
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .12em;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.mouse-capture-hint:hover {
  background: rgba(199,255,47,.12);
}

@media (max-width: 760px) {
  .mouse-capture-hint {
    display: none !important;
  }

  .top-controls {
    max-width: calc(100vw - 2rem);
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
\n/* v2 weapon + party polish */\n.weapon-rig{width:clamp(135px,13vw,205px)!important;right:clamp(8px,1.3vw,22px)!important;bottom:-10px!important;filter:drop-shadow(0 15px 13px rgba(0,0,0,.82))!important}.weapon-rig.aiming{right:50%!important;bottom:-58px!important;width:clamp(155px,15vw,225px)!important;transform:translate3d(calc(50% + var(--weapon-x)),var(--weapon-y),0) rotate(0deg)!important}.network-hud .online-pill{min-width:155px}.chat-name{margin-right:.32rem}.player-room-note{color:var(--muted)}\n

/* ================================================================
   v2.2 LIVE VIDEO + CLASSIC FPS VIEWMODEL
   ================================================================ */

.premiere-head span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.premiere-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3d76;
  box-shadow: 0 0 12px #ff3d76;
  animation: premiere-live-pulse 1s ease-in-out infinite;
}

@keyframes premiere-live-pulse {
  0%, 100% { opacity: .4; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1); }
}

.premiere-overlay.minimized {
  pointer-events: none;
  inset: auto 16px 16px auto;
  width: min(430px, calc(100vw - 28px));
  height: auto;
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

.premiere-overlay.minimized .premiere-shell {
  pointer-events: auto;
  width: 100%;
  border-color: rgba(199,255,47,.28);
  box-shadow: 0 18px 55px rgba(0,0,0,.72);
}

.premiere-overlay.minimized .premiere-head {
  min-height: 34px;
  padding: 0 .55rem;
  font-size: .46rem;
}

.premiere-overlay.minimized .premiere-head button {
  min-height: 25px;
  padding: 0 .5rem;
  font-size: .44rem;
}

.premiere-overlay.minimized #premiereVideo {
  max-height: 250px;
}

.premiere-overlay.minimized .premiere-countdown {
  inset: 34px 0 0;
  font-size: clamp(2rem, 8vw, 4rem);
}

.premiere-overlay.minimized .join-premiere {
  bottom: .75rem;
  min-height: 34px;
  font-size: .52rem;
}

/* Override the old tiny floating weapon. This is a classic lower-right
   first-person viewmodel with hands included in the transparent SVG. */
.weapon-rig {
  width: clamp(360px, 39vw, 590px) !important;
  right: clamp(-42px, -2vw, -10px) !important;
  bottom: -118px !important;
  transform-origin: 70% 92% !important;
  filter:
    drop-shadow(0 28px 22px rgba(0,0,0,.78))
    drop-shadow(0 0 10px rgba(123,77,255,.13)) !important;
}

.weapon-rig.aiming {
  width: clamp(390px, 41vw, 620px) !important;
  right: 50% !important;
  bottom: -154px !important;
  transform:
    translate3d(calc(50% + var(--weapon-x)), var(--weapon-y), 0)
    rotate(0deg) !important;
}

.muzzle-flash {
  top: 3% !important;
  right: 27% !important;
  width: 72px !important;
  height: 72px !important;
}

@media (max-width: 760px) {
  .weapon-rig {
    width: 330px !important;
    right: -55px !important;
    bottom: -92px !important;
  }

  .premiere-overlay.minimized {
    right: 8px;
    bottom: 92px;
    width: min(285px, calc(100vw - 16px));
  }
}


/* ================================================================
   v2.4 FINGER-GUN VIEWMODEL
   ================================================================ */

.weapon-rig {
  width: clamp(340px, 37vw, 555px) !important;
  right: clamp(-25px, -1vw, 2px) !important;
  bottom: -104px !important;
  transform-origin: 72% 92% !important;
  filter:
    drop-shadow(0 26px 21px rgba(0,0,0,.74))
    drop-shadow(0 0 9px rgba(123,77,255,.16)) !important;
}

.weapon-rig.aiming {
  width: clamp(375px, 40vw, 590px) !important;
  right: 50% !important;
  bottom: -142px !important;
  transform:
    translate3d(
      calc(50% + var(--weapon-x)),
      var(--weapon-y),
      0
    )
    rotate(0deg) !important;
}

/* Fingertip is in the upper-left section of the transparent SVG. */
.muzzle-flash {
  top: 14% !important;
  right: 68% !important;
  width: 66px !important;
  height: 66px !important;
}

@media (max-width: 760px) {
  .weapon-rig {
    width: 310px !important;
    right: -38px !important;
    bottom: -82px !important;
  }
}


/* ================================================================
   v2.5 weapon and ADS interaction fix
   ================================================================ */
.weapon-rig,
.weapon-rig * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

#weaponView {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.weapon-rig {
  width: clamp(250px, 26vw, 390px) !important;
  right: clamp(-4px, 0.8vw, 18px) !important;
  bottom: -8px !important;
  transform-origin: 78% 88% !important;
  filter:
    drop-shadow(0 18px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 10px rgba(123,77,255,.12)) !important;
}

.weapon-rig.aiming {
  width: clamp(285px, 29vw, 430px) !important;
  right: 50% !important;
  bottom: -26px !important;
  transform:
    translate3d(calc(50% + var(--weapon-x)), var(--weapon-y), 0)
    rotate(0deg) !important;
}

.muzzle-flash {
  top: 12% !important;
  right: 81.5% !important;
  width: 68px !important;
  height: 68px !important;
}


/* ================================================================
   v2.6 clean finger-gun placement
   ================================================================ */
.weapon-rig,
.weapon-rig * {
  pointer-events: none !important;
}
.weapon-rig {
  width: clamp(255px, 27vw, 400px) !important;
  right: clamp(-2px, 0.6vw, 14px) !important;
  bottom: -2px !important;
  transform-origin: 76% 86% !important;
}
.weapon-rig.aiming {
  width: clamp(295px, 30vw, 440px) !important;
  right: 50% !important;
  bottom: -18px !important;
}
#weaponView {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.muzzle-flash {
  top: 25.5% !important;
  right: 7.8% !important;
  width: 60px !important;
  height: 60px !important;
}


/* ================================================================
   v2.7 PURE CSS FINGER GUN — NO IMAGE RECTANGLE EXISTS
   ================================================================ */

.weapon-rig {
  width: 360px !important;
  height: 270px !important;
  right: 16px !important;
  bottom: -6px !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.weapon-rig::before,
.weapon-rig::after {
  display: none !important;
  content: none !important;
}

.finger-gun-view {
  position: absolute;
  inset: 0;
  overflow: visible;
  background: transparent !important;
  pointer-events: none;
  transform-origin: 72% 82%;
}

.finger-gun-view span {
  position: absolute;
  display: block;
  box-sizing: border-box;
  background:
    linear-gradient(
      145deg,
      #f2c7a2 0%,
      #dfa77d 52%,
      #b87454 100%
    );
  border: 2px solid rgba(85,45,38,.28);
  box-shadow:
    inset 6px 7px 10px rgba(255,255,255,.16),
    inset -7px -8px 12px rgba(88,38,32,.14);
}

.fg-forearm {
  width: 245px;
  height: 104px;
  right: -20px;
  bottom: 3px;
  border-radius: 65% 15% 20% 52%;
  transform: rotate(-18deg);
}

.fg-palm {
  width: 145px;
  height: 135px;
  right: 54px;
  bottom: 72px;
  border-radius: 48% 44% 42% 52%;
  transform: rotate(-8deg);
}

.fg-index {
  width: 225px;
  height: 52px;
  right: 144px;
  top: 52px;
  border-radius: 30px 10px 10px 30px;
  transform: rotate(2deg);
}

.fg-index::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 35px;
  height: 14px;
  border-radius: 10px;
  background: #f4d4c6;
  border: 1px solid rgba(90,50,45,.2);
}

.fg-thumb {
  width: 58px;
  height: 160px;
  right: 136px;
  top: -16px;
  border-radius: 36px 36px 24px 28px;
  transform: rotate(-2deg);
}

.fg-finger {
  width: 90px;
  height: 44px;
  right: 50px;
  border-radius: 24px;
}

.fg-middle {
  bottom: 104px;
  transform: rotate(-13deg);
}

.fg-ring {
  bottom: 73px;
  right: 40px;
  transform: rotate(-18deg);
}

.fg-pinky {
  bottom: 43px;
  right: 29px;
  transform: rotate(-23deg);
}

.weapon-rig.aiming {
  width: 390px !important;
  height: 292px !important;
  right: 50% !important;
  bottom: -24px !important;
  transform:
    translate3d(
      calc(50% + var(--weapon-x)),
      var(--weapon-y),
      0
    )
    rotate(0deg) !important;
}

.muzzle-flash {
  top: 38px !important;
  right: 336px !important;
  width: 64px !important;
  height: 64px !important;
}

@media (max-width: 760px) {
  .weapon-rig {
    width: 285px !important;
    height: 214px !important;
    right: -6px !important;
    bottom: 2px !important;
    transform: scale(.82) !important;
    transform-origin: right bottom !important;
  }
}


/* ================================================================
   v2.8 GUN RECOIL FIX
   Outer rig never animates. The complete inner hand moves together.
   ================================================================ */

.weapon-rig.firing,
.weapon-rig.landing {
  animation: none !important;
}

.finger-gun-view.firing {
  animation:
    finger-gun-recoil-v28
    105ms
    cubic-bezier(.18,.78,.28,1);
}

.finger-gun-view.landing {
  animation:
    finger-gun-land-v28
    135ms
    ease-out;
}

.muzzle-flash.show {
  animation:
    muzzle-flash
    72ms
    ease-out;
}

@keyframes finger-gun-recoil-v28 {
  0% {
    transform:
      translate3d(0,0,0)
      rotate(0deg);
  }

  32% {
    transform:
      translate3d(9px,12px,0)
      rotate(2.5deg);
  }

  100% {
    transform:
      translate3d(0,0,0)
      rotate(0deg);
  }
}

@keyframes finger-gun-land-v28 {
  0% {
    transform:
      translate3d(0,0,0);
  }

  45% {
    transform:
      translate3d(0,8px,0);
  }

  100% {
    transform:
      translate3d(0,0,0);
  }
}


/* ================================================================
   v3.3 RECOVERY CONTROL
   ================================================================ */

.debug-recover-button {
  width: calc(100% - 1.4rem);
  margin: .65rem .7rem .2rem;
  padding: .72rem .65rem;
  border: 1px solid rgba(199,255,47,.48);
  background: rgba(199,255,47,.09);
  color: #c7ff2f;
  font: 700 .62rem/1.2 monospace;
  letter-spacing: .09em;
  cursor: pointer;
}

.debug-recover-button:hover {
  background: rgba(199,255,47,.16);
}


/* ================================================================
   v3.4 REAL IMAGE GUN + STRONGER MUZZLE FLASH
   ================================================================ */

.weapon-rig,
.weapon-rig *,
#weaponView {
  pointer-events: none !important;
}

.weapon-rig {
  width: 420px !important;
  height: 310px !important;
  right: -2px !important;
  bottom: -10px !important;
  overflow: visible !important;
}

.weapon-rig.aiming {
  width: 460px !important;
  height: 338px !important;
  right: 50% !important;
  bottom: -30px !important;
  transform:
    translate3d(
      calc(50% + var(--weapon-x)),
      var(--weapon-y),
      0
    )
    rotate(0deg) !important;
}

.finger-gun-view {
  position: absolute;
  inset: 0;
  background: transparent !important;
  transform-origin: 72% 80%;
}

.finger-gun-view span {
  display: none !important;
}

.sprite-gun-view {
  background-image: url("./assets/fingergun-reference-clean.png") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: right bottom !important;
  filter:
    drop-shadow(0 18px 18px rgba(0,0,0,.85))
    drop-shadow(0 0 7px rgba(255,120,30,.20));
}

.muzzle-flash {
  z-index: 4 !important;
  top: 20px !important;
  right: 300px !important;
  width: 124px !important;
  height: 124px !important;
  opacity: 0;
  transform: rotate(10deg) scale(.8);
  background:
    radial-gradient(circle, rgba(255,255,255,1) 0 12%, rgba(255,242,128,.96) 13% 24%, rgba(199,255,47,.90) 25% 34%, rgba(255,160,32,.88) 36% 52%, rgba(255,61,184,.40) 56% 70%, rgba(255,61,184,0) 76%);
  filter:
    blur(.15px)
    drop-shadow(0 0 16px rgba(255,255,255,.95))
    drop-shadow(0 0 38px rgba(255,140,32,.9))
    drop-shadow(0 0 60px rgba(255,61,184,.52));
}

.muzzle-flash.show {
  animation: muzzle-flash-v34 92ms ease-out !important;
}

.finger-gun-view.firing {
  animation: finger-gun-recoil-v34 118ms cubic-bezier(.12,.8,.26,1) !important;
}

.finger-gun-view.landing {
  animation: finger-gun-land-v34 150ms ease-out !important;
}

@keyframes finger-gun-recoil-v34 {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  30% { transform: translate3d(12px,15px,0) rotate(3deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

@keyframes finger-gun-land-v34 {
  0% { transform: translate3d(0,0,0); }
  45% { transform: translate3d(0,10px,0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes muzzle-flash-v34 {
  0% { opacity: 1; transform: rotate(10deg) scale(.68); }
  100% { opacity: 0; transform: rotate(25deg) scale(1.38); }
}

@media (max-width: 760px) {
  .weapon-rig {
    width: 325px !important;
    height: 240px !important;
    right: -12px !important;
    bottom: 0 !important;
    transform: scale(.9) !important;
    transform-origin: right bottom !important;
  }

  .weapon-rig.aiming {
    width: 345px !important;
    height: 255px !important;
    bottom: -12px !important;
  }

  .muzzle-flash {
    top: 18px !important;
    right: 226px !important;
    width: 100px !important;
    height: 100px !important;
  }
}


/* ================================================================
   v4.0 HUD GUN STABILITY
   The parent remains fixed. Movement only nudges the inner sprite.
   ================================================================ */

.weapon-rig:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: none !important;
}

.weapon-rig.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.sprite-gun-view {
  opacity: 1 !important;
  visibility: visible !important;
  transform:
    translate3d(
      var(--weapon-x, 0px),
      var(--weapon-y, 0px),
      0
    )
    rotate(var(--weapon-roll, -3deg));
  will-change: transform;
}

.sprite-gun-view.firing {
  animation: finger-gun-recoil-v40 115ms cubic-bezier(.12,.8,.26,1) !important;
}

.sprite-gun-view.landing {
  animation: finger-gun-land-v40 135ms ease-out !important;
}

@keyframes finger-gun-recoil-v40 {
  0% {
    transform:
      translate3d(var(--weapon-x,0px),var(--weapon-y,0px),0)
      rotate(var(--weapon-roll,-3deg));
  }
  34% {
    transform:
      translate3d(
        calc(var(--weapon-x,0px) + 10px),
        calc(var(--weapon-y,0px) + 11px),
        0
      )
      rotate(1deg);
  }
  100% {
    transform:
      translate3d(var(--weapon-x,0px),var(--weapon-y,0px),0)
      rotate(var(--weapon-roll,-3deg));
  }
}

@keyframes finger-gun-land-v40 {
  0%,100% {
    transform:
      translate3d(var(--weapon-x,0px),var(--weapon-y,0px),0)
      rotate(var(--weapon-roll,-3deg));
  }
  45% {
    transform:
      translate3d(
        var(--weapon-x,0px),
        calc(var(--weapon-y,0px) + 6px),
        0
      )
      rotate(var(--weapon-roll,-3deg));
  }
}


.weapon-rig.aiming:not(.hidden) {
  right: 50% !important;
  transform: translateX(50%) !important;
}


/* ================================================================
   v4.2 FOOLPROOF HUD GUN
   Pointer lock and movement may never hide or reposition the outer rig.
   ================================================================ */

#weaponRig {
  position: fixed !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  contain: layout style !important;
}

#weaponRig:not(.hidden) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#weaponRig.hidden {
  display: none !important;
}

#weaponView {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ================================================================
   v4.3 POINTS + HOLD-TAB SCOREBOARD
   ================================================================ */

.points-stat strong {
  min-width: 5.2rem;
}

.scoreboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(70px, 11vh, 130px);
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(3,2,10,.68),
      rgba(3,2,10,.18) 70%,
      transparent
    );
}

.scoreboard-overlay.open,
.scoreboard-overlay[aria-hidden="false"] {
  display: flex;
}

.scoreboard-shell {
  width: min(690px, calc(100vw - 34px));
  max-height: min(620px, 72vh);
  border: 1px solid rgba(199,255,47,.42);
  background:
    linear-gradient(
      145deg,
      rgba(13,7,28,.96),
      rgba(4,3,13,.94)
    );
  box-shadow:
    0 32px 90px rgba(0,0,0,.72),
    0 0 44px rgba(123,77,255,.13);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.scoreboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 1.2rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.scoreboard-head div {
  display: grid;
  gap: .1rem;
}

.scoreboard-head small {
  color: #aa9cc4;
  font: 700 .6rem/1 monospace;
  letter-spacing: .16em;
}

.scoreboard-head strong {
  color: #fff;
  font: 900 1.25rem/1 sans-serif;
  letter-spacing: .04em;
}

.scoreboard-head > span {
  color: #c7ff2f;
  font: 700 .64rem/1 monospace;
  letter-spacing: .12em;
}

.scoreboard-columns,
.scoreboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 86px;
  align-items: center;
  gap: .65rem;
}

.scoreboard-columns {
  padding: .6rem 1.2rem;
  color: #8f819f;
  font: 700 .57rem/1 monospace;
  letter-spacing: .13em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.scoreboard-columns span:nth-child(n+2) {
  text-align: right;
}

.scoreboard-rows {
  max-height: calc(min(620px, 72vh) - 116px);
  overflow: auto;
}

.scoreboard-row {
  min-height: 47px;
  padding: .55rem 1.2rem;
  color: #d8d0e7;
  border-bottom: 1px solid rgba(255,255,255,.045);
  font: 700 .78rem/1.1 monospace;
}

.scoreboard-row.is-local {
  color: #fff;
  background:
    linear-gradient(
      90deg,
      rgba(199,255,47,.12),
      rgba(199,255,47,.025)
    );
  box-shadow:
    inset 3px 0 0 #c7ff2f;
}

.scoreboard-player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
}

.scoreboard-player b {
  color: #766d85;
  font-size: .67rem;
}

.scoreboard-player i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 9px currentColor;
}

.scoreboard-player strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoreboard-row > span:nth-child(n+2) {
  text-align: right;
}

.scoreboard-score {
  color: #c7ff2f;
  font-size: .88rem;
}

.scoreboard-empty {
  padding: 2rem;
  color: #857991;
  text-align: center;
  font: 700 .7rem/1 monospace;
  letter-spacing: .12em;
}

/* The weapon stays mounted in the HUD even after respawn/state changes. */
#weaponRig:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 650px) {
  .scoreboard-columns,
  .scoreboard-row {
    grid-template-columns: minmax(0, 1fr) 84px 58px;
  }

  .scoreboard-shell {
    width: calc(100vw - 18px);
  }

  .scoreboard-row,
  .scoreboard-columns {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}


/* ================================================================
   v4.5 PERMANENT BODY-ROOT WEAPON OVERLAY
   The old weapon node is retired. This overlay is recreated if removed.
   ================================================================ */

#weaponRig {
  display: none !important;
}

#ibPermanentWeapon {
  --ib-gun-x: 0px;
  --ib-gun-y: 0px;
  --ib-gun-roll: -4deg;
  position: fixed !important;
  right: -4px;
  bottom: -12px;
  width: clamp(310px, 28vw, 430px);
  height: clamp(235px, 22vw, 325px);
  z-index: 2147483500;
  pointer-events: none !important;
  user-select: none !important;
  visibility: visible;
  opacity: 1;
  display: block;
  transform: none;
  filter:
    drop-shadow(0 18px 18px rgba(0,0,0,.84))
    drop-shadow(0 0 8px rgba(255,120,30,.18));
}

#ibPermanentWeapon.hidden {
  display: none !important;
}

#ibPermanentWeaponImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  transform-origin: 72% 82%;
  transform:
    translate3d(
      var(--ib-gun-x),
      var(--ib-gun-y),
      0
    )
    rotate(var(--ib-gun-roll));
  will-change: transform;
}

#ibPermanentWeapon.aiming {
  right: 50%;
  bottom: -28px;
  width: clamp(350px, 31vw, 475px);
  height: clamp(265px, 24vw, 355px);
  transform: translateX(50%);
}

#ibPermanentWeapon.aiming #ibPermanentWeaponImage {
  transform:
    translate3d(
      var(--ib-gun-x),
      var(--ib-gun-y),
      0
    )
    rotate(0deg);
}

#ibPermanentMuzzleFlash {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 300px;
  width: 132px;
  height: 132px;
  opacity: 0;
  transform: rotate(10deg) scale(.8);
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,1) 0 12%,
      rgba(255,242,128,.98) 13% 24%,
      rgba(199,255,47,.92) 25% 34%,
      rgba(255,160,32,.9) 36% 52%,
      rgba(255,61,184,.46) 56% 70%,
      transparent 76%
    );
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.95))
    drop-shadow(0 0 42px rgba(255,140,32,.9))
    drop-shadow(0 0 70px rgba(255,61,184,.55));
}

#ibPermanentMuzzleFlash.show {
  animation: ib-v45-muzzle 94ms ease-out;
}

#ibPermanentWeaponImage.firing {
  animation: ib-v45-recoil 118ms cubic-bezier(.12,.8,.26,1);
}

#ibPermanentWeaponImage.landing {
  animation: ib-v45-land 130ms ease-out;
}

@keyframes ib-v45-recoil {
  0%,100% {
    transform:
      translate3d(var(--ib-gun-x),var(--ib-gun-y),0)
      rotate(var(--ib-gun-roll));
  }
  34% {
    transform:
      translate3d(
        calc(var(--ib-gun-x) + 13px),
        calc(var(--ib-gun-y) + 15px),
        0
      )
      rotate(2deg);
  }
}

@keyframes ib-v45-land {
  0%,100% {
    transform:
      translate3d(var(--ib-gun-x),var(--ib-gun-y),0)
      rotate(var(--ib-gun-roll));
  }
  45% {
    transform:
      translate3d(
        var(--ib-gun-x),
        calc(var(--ib-gun-y) + 6px),
        0
      )
      rotate(var(--ib-gun-roll));
  }
}

@keyframes ib-v45-muzzle {
  0% {
    opacity: 1;
    transform: rotate(10deg) scale(.65);
  }
  100% {
    opacity: 0;
    transform: rotate(24deg) scale(1.45);
  }
}

@media (max-width: 760px) {
  #ibPermanentWeapon {
    width: 325px;
    height: 245px;
    right: -14px;
    bottom: -4px;
  }

  #ibPermanentWeapon.aiming {
    width: 355px;
    height: 265px;
    bottom: -16px;
  }

  #ibPermanentMuzzleFlash {
    top: 16px;
    right: 228px;
    width: 105px;
    height: 105px;
  }
}


/* ================================================================
   v4.6 ORIGINAL HUD GUN — REAL IMAGE, NO BODY-ROOT PLACEHOLDER
   ================================================================ */

#ibPermanentWeapon,
#ibPermanentWeaponImage,
#ibPermanentMuzzleFlash {
  display: none !important;
}

#weaponRig {
  position: fixed !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  contain: layout style !important;
}

#weaponRig.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#weaponRig:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#weaponView {
  background: transparent !important;
  overflow: visible !important;
}

#weaponSprite {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
  object-position: right bottom;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
}

.scoreboard-overlay {
  z-index: 2147483640 !important;
}


/* ================================================================
   v4.8 RELIABLE EMBEDDED IMAGE GUN
   One normal GPU-composited image. It sits below the network/chat layer.
   ================================================================ */

#weaponRig,
#ibPermanentWeapon,
#ibPermanentWeaponImage,
#ibPermanentMuzzleFlash {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#ibReliableWeapon {
  --weapon-x: 0px;
  --weapon-y: 0px;
  --weapon-roll: -3.5deg;

  position: fixed;
  right: clamp(-18px, -1vw, -5px);
  bottom: clamp(-88px, -5.2vw, -44px);
  width: clamp(300px, 31vw, 520px);
  z-index: 6;
  display: block;
  pointer-events: none;
  transform-origin: 67% 83%;
  transform:
    translate3d(
      var(--weapon-x),
      var(--weapon-y),
      0
    )
    rotate(
      var(--weapon-roll)
    );
  filter:
    drop-shadow(
      0 18px 17px
      rgba(0,0,0,.72)
    );
  contain: layout style;
  will-change: transform;
}

#ibReliableWeapon.hidden {
  display: none;
}

#ibReliableWeaponImage {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

#ibReliableMuzzleFlash {
  position: absolute;
  left: -0.8%;
  top: 30.4%;
  width: clamp(76px, 8vw, 132px);
  aspect-ratio: 1;
  opacity: 0;
  transform:
    translate(-49%, -50%)
    rotate(-7deg);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,1) 0 6%,
      rgba(255,246,119,.98) 8% 16%,
      rgba(199,255,47,.95) 20% 29%,
      rgba(255,122,26,.82) 38%,
      rgba(255,61,184,.48) 53%,
      transparent 70%
    );
  filter:
    drop-shadow(
      0 0 20px
      rgba(255,122,26,.96)
    );
  mix-blend-mode: screen;
}

#ibReliableWeapon.firing {
  animation:
    ib-reliable-recoil
    118ms
    cubic-bezier(.12,.78,.2,1);
}

#ibReliableMuzzleFlash.show {
  animation:
    ib-reliable-flash
    82ms
    ease-out;
}

#ibReliableWeapon.landing {
  animation:
    ib-reliable-land
    150ms
    ease-out;
}

#ibReliableWeapon.aiming {
  right: 50%;
  bottom: clamp(-112px, -6vw, -58px);
  width: clamp(330px, 34vw, 560px);
  transform:
    translate3d(
      calc(
        50% +
        var(--weapon-x)
      ),
      var(--weapon-y),
      0
    )
    rotate(-1deg);
}

@keyframes ib-reliable-recoil {
  0% {
    transform:
      translate3d(
        var(--weapon-x),
        var(--weapon-y),
        0
      )
      rotate(
        var(--weapon-roll)
      );
  }

  38% {
    transform:
      translate3d(
        calc(
          var(--weapon-x) +
          10px
        ),
        calc(
          var(--weapon-y) +
          14px
        ),
        0
      )
      rotate(1.5deg);
  }

  100% {
    transform:
      translate3d(
        var(--weapon-x),
        var(--weapon-y),
        0
      )
      rotate(
        var(--weapon-roll)
      );
  }
}

@keyframes ib-reliable-flash {
  0% {
    opacity: 1;
    scale: .68;
  }

  55% {
    opacity: .94;
    scale: 1.12;
  }

  100% {
    opacity: 0;
    scale: 1.32;
  }
}

@keyframes ib-reliable-land {
  0% {
    translate: 0 0;
  }

  42% {
    translate: 0 11px;
  }

  100% {
    translate: 0 0;
  }
}

/* CHAT AND SCOREBOARD ALWAYS BEAT THE GUN'S STACKING LAYER. */
.network-hud {
  z-index: 20 !important;
}

.chat-panel {
  z-index: 24 !important;
}

.scoreboard-overlay {
  z-index: 2147483640 !important;
}

@media (max-width: 760px) {
  #ibReliableWeapon {
    right: -24px;
    bottom: -62px;
    width: min(72vw, 430px);
  }

  #ibReliableWeapon.aiming {
    width: min(78vw, 470px);
    bottom: -78px;
  }
}


/* ================================================================
   v4.8.1 SPAWN / TRANSPARENT GUN / MINIMIZED VIDEO HOTFIX
   ================================================================ */

/* The hand is drawn once into a transparent canvas. Avoid filters on the
   transparent container because some Chromium/GPU combinations composite the
   whole PNG rectangle as a dark panel. */
#ibReliableWeapon {
  background: transparent !important;
  filter: none !important;
  isolation: auto !important;
  overflow: visible !important;
}

#ibReliableWeaponImage {
  display: none !important;
}

#ibReliableWeaponCanvas {
  display: block;
  width: 100%;
  height: auto;
  background: transparent !important;
  pointer-events: none;
  user-select: none;
}

/* Keep all interactive communication above the weapon. */
.network-hud {
  z-index: 30 !important;
}

.chat-panel {
  z-index: 34 !important;
}

/* A minimized broadcast lives above the chat instead of underneath it. */
.premiere-overlay.minimized {
  inset: 58px 16px auto auto !important;
  right: 16px !important;
  top: 58px !important;
  bottom: auto !important;
  width: min(
    410px,
    calc(100vw - 32px)
  ) !important;
  z-index: 48 !important;
  pointer-events: none !important;
}

.premiere-overlay.minimized .premiere-shell {
  pointer-events: auto !important;
}

.premiere-overlay.minimized .premiere-head {
  cursor: pointer;
}

.premiere-overlay.minimized .premiere-head button {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .premiere-overlay.minimized {
    top: 52px !important;
    right: 8px !important;
    bottom: auto !important;
    width: min(
      285px,
      calc(100vw - 16px)
    ) !important;
  }
}


/* ================================================================
   v4.9.2 STAGED LOAD + FOOLPROOF GUN POSITION
   ================================================================ */
#ibReliableWeapon {
  position: fixed !important;
  right: -28px !important;
  bottom: -105px !important;
  width: clamp(340px, 38vw, 560px) !important;
  height: auto !important;
  z-index: 12 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

#ibReliableWeaponCanvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
}

.loading-overlay.visual-ready {
  place-content: end start;
  text-align: left;
  background: linear-gradient(
    to top,
    rgba(8, 6, 13, .88),
    rgba(8, 6, 13, .16) 38%,
    transparent 68%
  );
  pointer-events: none;
}

.loading-overlay.visual-ready .loading-logo {
  font-size: clamp(1.1rem, 2vw, 2rem);
}

.loading-overlay.visual-ready .progress-track {
  width: min(56vw, 520px);
}

@media (max-width: 760px) {
  #ibReliableWeapon {
    right: -44px !important;
    bottom: -88px !important;
    width: min(78vw, 460px) !important;
  }
}


/* ================================================================
   v4.9.3 HARD-LOCKED HUD HAND
   Physics/landing classes may not alter the screen-space position.
   ================================================================ */
#ibReliableWeapon {
  right: -12px !important;
  bottom: -54px !important;
  width: clamp(300px, 32vw, 500px) !important;
  transform: translate3d(var(--weapon-x, 0px), 0, 0) rotate(var(--weapon-roll, -3.5deg)) !important;
  translate: none !important;
  animation: none !important;
}

#ibReliableWeapon.firing,
#ibReliableWeapon.landing {
  animation: none !important;
  translate: none !important;
}

#ibReliableWeapon.aiming {
  right: 50% !important;
  bottom: -70px !important;
  transform: translate3d(calc(50% + var(--weapon-x, 0px)), 0, 0) rotate(-1deg) !important;
}

@media (max-width: 760px) {
  #ibReliableWeapon {
    right: -18px !important;
    bottom: -48px !important;
    width: min(74vw, 430px) !important;
  }
}


/* v5.0.3 performance disco: a single composited overlay replaces per-flash
   Babylon light mutations across the entire city. It sits above the 3D canvas
   but below HUD, loading, chat and weapon UI. */


/* ================================================================
   v5.0.7q VISUAL FEEL POLISH
   - Debug UI must always beat hand + chat.
   - Hand remains one transparent canvas; motion is transform-only in JS.
   ================================================================ */
#debugPanel.debug-panel {
  position: fixed !important;
  z-index: 2147483647 !important;
  isolation: isolate;
}

#debugPanel.debug-panel.open {
  z-index: 2147483647 !important;
}

#ibReliableWeapon {
  will-change: transform;
  backface-visibility: hidden;
}


/* v5.0.7r — CSS sniper viewmodel + scope. Shares hand motion variables. */
#ibSniperWeapon{--weapon-x:0px;--weapon-y:0px;--weapon-roll:-3.5deg;position:fixed;right:-54px;bottom:-26px;width:clamp(430px,42vw,720px);height:clamp(145px,15vw,240px);z-index:12;pointer-events:none;transform-origin:72% 86%;transform:translate3d(var(--weapon-x),var(--weapon-y),0) rotate(var(--weapon-roll));will-change:transform;filter:drop-shadow(0 18px 18px rgba(0,0,0,.72))}
#ibSniperWeapon.hidden{display:none!important}#ibSniperWeapon>div{position:absolute;box-sizing:border-box}.ib-sniper-stock{left:2%;top:46%;width:28%;height:34%;background:linear-gradient(145deg,#16161c,#050509 68%);clip-path:polygon(0 28%,72% 0,100% 20%,100% 70%,64% 100%,0 82%);border:2px solid rgba(199,255,47,.32)}.ib-sniper-body{left:24%;top:36%;width:42%;height:30%;background:linear-gradient(180deg,#23242a,#06070a 70%);border:2px solid rgba(199,255,47,.42);box-shadow:inset 0 0 0 2px rgba(255,255,255,.035)}.ib-sniper-barrel{left:62%;top:43%;width:38%;height:10%;background:linear-gradient(180deg,#25262b,#020204);border-radius:2px;box-shadow:0 2px 0 rgba(199,255,47,.35)}.ib-sniper-scope{left:39%;top:17%;width:29%;height:17%;border-radius:999px;background:linear-gradient(180deg,#15171a,#020204);border:2px solid rgba(199,255,47,.44)}.ib-sniper-scope:before,.ib-sniper-scope:after{content:"";position:absolute;top:-20%;width:14%;height:140%;border-radius:4px;background:#07080a;border:1px solid rgba(199,255,47,.25)}.ib-sniper-scope:before{left:18%}.ib-sniper-scope:after{right:18%}.ib-sniper-scope i{position:absolute;right:4%;top:18%;width:17%;aspect-ratio:1;border-radius:50%;background:#101d12;box-shadow:inset 0 0 10px #c7ff2f}.ib-sniper-grip{left:45%;top:61%;width:9%;height:30%;transform:rotate(13deg);transform-origin:50% 0;background:linear-gradient(90deg,#07070a,#1d1e23,#050507);border-radius:0 0 6px 6px}.ib-sniper-muzzle{right:-1.8%;top:37%;width:7%;aspect-ratio:1;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 12%,#ffdb56 20%,#ff6a00 46%,transparent 70%)}.ib-sniper-muzzle.show{animation:ib-sniper-flash 90ms ease-out}@keyframes ib-sniper-flash{0%{opacity:1;transform:scale(.5)}45%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(1.8)}}#ibSniperWeapon.firing{animation:ib-sniper-recoil 155ms cubic-bezier(.12,.78,.2,1)}@keyframes ib-sniper-recoil{0%,100%{transform:translate3d(var(--weapon-x),var(--weapon-y),0) rotate(var(--weapon-roll))}35%{transform:translate3d(calc(var(--weapon-x) + 24px),calc(var(--weapon-y) + 20px),0) rotate(calc(var(--weapon-roll) + 2.4deg))}}#ibSniperWeapon.aiming{right:50%;bottom:-112px;transform:translate3d(calc(50% + var(--weapon-x)),var(--weapon-y),0) rotate(-.5deg) scale(.94);opacity:.42}
#ibSniperScopeOverlay{position:fixed;inset:0;z-index:24;pointer-events:none;background:radial-gradient(circle at center,transparent 0 28vh,rgba(0,0,0,.96) 28.4vh 100%),radial-gradient(circle at center,rgba(8,15,9,.06),rgba(0,0,0,.18) 27vh,transparent 27.8vh)}#ibSniperScopeOverlay.hidden{display:none!important}#ibSniperScopeOverlay .ib-scope-h,#ibSniperScopeOverlay .ib-scope-v{position:absolute;left:50%;top:50%;background:rgba(199,255,47,.74);box-shadow:0 0 5px rgba(199,255,47,.3)}#ibSniperScopeOverlay .ib-scope-h{width:56vh;height:1px;transform:translate(-50%,-50%)}#ibSniperScopeOverlay .ib-scope-v{width:1px;height:56vh;transform:translate(-50%,-50%)}#ibSniperScopeOverlay .ib-scope-dot{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#c7ff2f;transform:translate(-50%,-50%)}@media(max-width:760px){#ibSniperWeapon{width:min(82vw,610px);right:-68px;bottom:-22px}}
#debugPanel.debug-panel,#debugPanel.debug-panel.open{z-index:2147483647!important}


/* ================================================================
   v5.0.8 SNIPER HOLD + LEFT HUD/CHAT POLISH
   Rendering/material/culling rules intentionally untouched.
   ================================================================ */

/* Desktop: move the four player stats upward and park chat below them on
   the LEFT so neither panel fights the right-side weapon viewmodels. */
@media (min-width: 761px) {
  .fps-stats {
    left: 1rem !important;
    right: auto !important;
    bottom: calc(1rem + 250px + .7rem) !important;
    gap: .4rem !important;
  }

  .fps-stat {
    min-width: 82px !important;
    padding: .52rem .62rem !important;
  }

  .chat-panel {
    left: 1rem !important;
    right: auto !important;
    bottom: 1rem !important;
    width: min(360px, calc(100vw - 2rem)) !important;
    height: 250px !important;
  }
}

/* Held-rifle silhouette: stock/body live at lower-right and the barrel points
   up-left toward the centre of the screen instead of lying sideways. */
#ibSniperWeapon {
  right: -92px !important;
  bottom: -82px !important;
  width: clamp(480px, 43vw, 760px) !important;
  height: clamp(150px, 15vw, 245px) !important;
  transform-origin: 84% 88% !important;
  transform: translate3d(var(--weapon-x), var(--weapon-y), 0)
             rotate(calc(var(--weapon-roll) + 20deg)) !important;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.72));
}

#ibSniperWeapon .ib-sniper-stock { left:auto !important; right:2% !important; top:47% !important; }
#ibSniperWeapon .ib-sniper-body  { left:auto !important; right:24% !important; top:36% !important; }
#ibSniperWeapon .ib-sniper-barrel{ left:auto !important; right:62% !important; top:43% !important; }
#ibSniperWeapon .ib-sniper-scope { left:auto !important; right:39% !important; top:16% !important; }
#ibSniperWeapon .ib-sniper-grip  { left:auto !important; right:45% !important; top:61% !important; transform:rotate(-13deg) !important; }
#ibSniperWeapon .ib-sniper-muzzle{ right:auto !important; left:-1.8% !important; top:37% !important; }

#ibSniperWeapon.firing {
  animation: ib-sniper-recoil-held 155ms cubic-bezier(.12,.78,.2,1) !important;
}
@keyframes ib-sniper-recoil-held {
  0%,100% {
    transform: translate3d(var(--weapon-x),var(--weapon-y),0)
               rotate(calc(var(--weapon-roll) + 20deg));
  }
  35% {
    transform: translate3d(calc(var(--weapon-x) + 17px),calc(var(--weapon-y) + 19px),0)
               rotate(calc(var(--weapon-roll) + 23deg));
  }
}

#ibSniperWeapon.aiming {
  right: 50% !important;
  bottom: -112px !important;
  transform: translate3d(calc(50% + var(--weapon-x)),var(--weapon-y),0)
             rotate(1deg) scale(.94) !important;
  opacity: .42;
}

/* Debug must remain above BOTH left chat and right weapon. */
#debugPanel.debug-panel,
#debugPanel.debug-panel.open { z-index:2147483647 !important; }


/* v5.0.8: debug controls must never inherit the browser/default white button skin. */
#debugPanel #perfLabControls button,
#debugPanel .debug-copy-button {
  color: #c7ff2f !important;
  background: rgba(8,6,13,.94) !important;
  border: 1px solid rgba(199,255,47,.42) !important;
  box-shadow: none !important;
}
#debugPanel #perfLabControls button:hover,
#debugPanel .debug-copy-button:hover {
  background: rgba(199,255,47,.10) !important;
}

/* Extra desktop guard: keep chat decisively on the left and below player stats. */
@media (min-width: 761px) {
  #chatPanel.chat-panel {
    left: 1rem !important;
    right: auto !important;
    bottom: 1rem !important;
    width: min(360px, calc(100vw - 2rem)) !important;
    height: 250px !important;
  }
  .fps-hud .fps-stats {
    left: 1rem !important;
    right: auto !important;
    bottom: 267px !important;
  }
}

/* 5.0.8 — JETPACK SLOT 3 VIEWMODEL */
#ibJetpackHud.ib-jetpack-hud{
  --weapon-x:0px;--weapon-y:0px;--weapon-roll:-3.5deg;
  position:fixed;right:28px;bottom:-36px;width:190px;height:180px;z-index:13;
  pointer-events:none;transform-origin:78% 90%;
  transform:translate3d(var(--weapon-x),var(--weapon-y),0) rotate(var(--weapon-roll));
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.72));opacity:.94
}
#ibJetpackHud.hidden{display:none!important}
#ibJetpackHud>div{position:absolute;box-sizing:border-box}
#ibJetpackHud .ib-jetpack-tank{bottom:18px;width:50px;height:118px;border-radius:24px 24px 14px 14px;background:linear-gradient(90deg,#07070a,#24252c 48%,#050507);border:2px solid rgba(199,255,47,.34)}
#ibJetpackHud .ib-jetpack-tank.left{right:83px;transform:rotate(-7deg)}
#ibJetpackHud .ib-jetpack-tank.right{right:25px;transform:rotate(6deg)}
#ibJetpackHud .ib-jetpack-core{right:57px;bottom:67px;width:58px;height:48px;border:2px solid #c7ff2f;background:#0a0b0d;color:#c7ff2f;font:900 13px/44px ui-monospace;text-align:center;letter-spacing:.12em;box-shadow:0 0 18px rgba(199,255,47,.18)}
#ibJetpackHud .ib-jetpack-flame{bottom:0;width:26px;height:40px;opacity:.18;clip-path:polygon(50% 100%,0 0,100% 0);background:linear-gradient(#fff,#c7ff2f 25%,#ff7a1a 62%,transparent);filter:blur(.3px)}
#ibJetpackHud .ib-jetpack-flame.left{right:96px}
#ibJetpackHud .ib-jetpack-flame.right{right:38px}
#ibJetpackHud.thrusting .ib-jetpack-flame{opacity:.95;animation:ib-jetpack-flame .09s steps(2,end) infinite alternate}
@keyframes ib-jetpack-flame{from{height:34px;transform:scaleX(.8)}to{height:52px;transform:scaleX(1.08)}}


/* 5.0.9: hidden boot/entry overlays can never keep intercepting clicks. */
#loadingOverlay[hidden], #clickOverlay[hidden], #clickOverlay[data-ib-consumed="1"] {
  display:none !important;
  pointer-events:none !important;
}

/* 5.0.9 — Phase 2 sniper image viewmodel */
#ibSniperWeapon {
  right: -24px !important;
  bottom: -34px !important;
  width: min(92vw, 1180px) !important;
  height: min(70vh, 820px) !important;
  transform-origin: 80% 88% !important;
  transform: translate3d(var(--weapon-x), var(--weapon-y), 0)
             rotate(calc(var(--weapon-roll) + 2deg)) !important;
}
#ibSniperWeapon .ib-sniper-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
#ibSniperWeapon > div:not(.ib-sniper-muzzle) {
  display: none !important;
}
#ibSniperWeapon .ib-sniper-muzzle {
  left: 11% !important;
  right: auto !important;
  top: 28% !important;
  width: 6% !important;
}
#ibSniperWeapon.firing {
  animation: ib-sniper-recoil-image 155ms cubic-bezier(.12,.78,.2,1) !important;
}
@keyframes ib-sniper-recoil-image {
  0%,100% {
    transform: translate3d(var(--weapon-x),var(--weapon-y),0)
               rotate(calc(var(--weapon-roll) + 2deg));
  }
  35% {
    transform: translate3d(calc(var(--weapon-x) + 16px),calc(var(--weapon-y) + 18px),0)
               rotate(calc(var(--weapon-roll) + 4deg));
  }
}
#ibSniperWeapon.aiming {
  right: 50% !important;
  bottom: -78px !important;
  width: min(96vw, 1260px) !important;
  transform: translate3d(calc(50% + var(--weapon-x)), var(--weapon-y), 0)
             rotate(.2deg) scale(.98) !important;
  opacity: .48 !important;
}
@media (max-width: 760px) {
  #ibSniperWeapon {
    width: min(108vw, 980px) !important;
    height: min(54vh, 520px) !important;
    right: -44px !important;
    bottom: -18px !important;
  }
  #ibSniperWeapon.aiming {
    bottom: -44px !important;
  }
}

/* 5.0.9 — smaller tucked sniper image + ADS hides viewmodel */
#ibSniperWeapon {
  right: -96px !important;
  bottom: -118px !important;
  width: min(74vw, 920px) !important;
  height: min(54vh, 590px) !important;
  transform-origin: 88% 94% !important;
  transform: translate3d(var(--weapon-x), var(--weapon-y), 0)
             rotate(calc(var(--weapon-roll) + 1.5deg)) !important;
  overflow: hidden !important;
}
#ibSniperWeapon .ib-sniper-image {
  object-fit: contain;
  object-position: right bottom;
  transform: translate(4.5%, 8.5%) scale(0.86);
}
#ibSniperWeapon .ib-sniper-muzzle {
  left: 14% !important;
  top: 30% !important;
  width: 5.2% !important;
}
#ibSniperWeapon.firing {
  animation: ib-sniper-recoil-image-p 155ms cubic-bezier(.12,.78,.2,1) !important;
}
@keyframes ib-sniper-recoil-image-p {
  0%,100% {
    transform: translate3d(var(--weapon-x),var(--weapon-y),0)
               rotate(calc(var(--weapon-roll) + 1.5deg));
  }
  35% {
    transform: translate3d(calc(var(--weapon-x) + 13px),calc(var(--weapon-y) + 16px),0)
               rotate(calc(var(--weapon-roll) + 3.2deg));
  }
}
#ibSniperWeapon.aiming {
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (max-width: 760px) {
  #ibSniperWeapon {
    width: min(92vw, 760px) !important;
    height: min(40vh, 380px) !important;
    right: -72px !important;
    bottom: -78px !important;
  }
  #ibSniperWeapon .ib-sniper-image {
    transform: translate(5.5%, 10%) scale(0.88);
  }
}

/* 5.0.9 — sniper viewmodel tucked smaller, with ADS image hidden */
#ibSniperWeapon {
  right: -112px !important;
  bottom: -104px !important;
  width: min(74vw, 860px) !important;
  height: min(50vh, 520px) !important;
  transform-origin: 84% 92% !important;
  transform: translate3d(var(--weapon-x), var(--weapon-y), 0)
             rotate(calc(var(--weapon-roll) + 1.5deg)) !important;
}
#ibSniperWeapon .ib-sniper-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
#ibSniperWeapon .ib-sniper-muzzle {
  left: 13.5% !important;
  right: auto !important;
  top: 30% !important;
  width: 5.2% !important;
}
#ibSniperWeapon.firing {
  animation: ib-sniper-recoil-image-508p 155ms cubic-bezier(.12,.78,.2,1) !important;
}
@keyframes ib-sniper-recoil-image-508p {
  0%,100% {
    transform: translate3d(var(--weapon-x),var(--weapon-y),0)
               rotate(calc(var(--weapon-roll) + 1.5deg));
  }
  35% {
    transform: translate3d(calc(var(--weapon-x) + 14px),calc(var(--weapon-y) + 16px),0)
               rotate(calc(var(--weapon-roll) + 3.5deg));
  }
}
#ibSniperWeapon.aiming {
  right: 50% !important;
  bottom: -126px !important;
  width: min(82vw, 920px) !important;
  transform: translate3d(calc(50% + var(--weapon-x)), var(--weapon-y), 0)
             rotate(0deg) scale(.96) !important;
  opacity: 0 !important;
}
#ibSniperWeapon.aiming .ib-sniper-image,
#ibSniperWeapon.aiming .ib-sniper-muzzle {
  opacity: 0 !important;
}
@media (max-width: 760px) {
  #ibSniperWeapon {
    width: min(92vw, 760px) !important;
    height: min(40vh, 400px) !important;
    right: -86px !important;
    bottom: -68px !important;
  }
  #ibSniperWeapon.aiming {
    bottom: -82px !important;
    width: min(94vw, 820px) !important;
  }
}

/* 5.0.9 — make sniper larger again while keeping it tucked in */
#ibSniperWeapon {
  right: -94px !important;
  bottom: -92px !important;
  width: min(82vw, 980px) !important;
  height: min(58vh, 620px) !important;
  transform-origin: 84% 92% !important;
  transform: translate3d(var(--weapon-x), var(--weapon-y), 0)
             rotate(calc(var(--weapon-roll) + 1.5deg)) !important;
}
#ibSniperWeapon .ib-sniper-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}
#ibSniperWeapon .ib-sniper-muzzle {
  left: 12.8% !important;
  right: auto !important;
  top: 29.5% !important;
  width: 5.6% !important;
}
#ibSniperWeapon.firing {
  animation: ib-sniper-recoil-image-508q 155ms cubic-bezier(.12,.78,.2,1) !important;
}
@keyframes ib-sniper-recoil-image-508q {
  0%,100% {
    transform: translate3d(var(--weapon-x),var(--weapon-y),0)
               rotate(calc(var(--weapon-roll) + 1.5deg));
  }
  35% {
    transform: translate3d(calc(var(--weapon-x) + 15px),calc(var(--weapon-y) + 17px),0)
               rotate(calc(var(--weapon-roll) + 3.5deg));
  }
}
#ibSniperWeapon.aiming {
  right: 50% !important;
  bottom: -116px !important;
  width: min(84vw, 980px) !important;
  transform: translate3d(calc(50% + var(--weapon-x)), var(--weapon-y), 0)
             rotate(0deg) scale(.97) !important;
  opacity: 0 !important;
}
#ibSniperWeapon.aiming .ib-sniper-image,
#ibSniperWeapon.aiming .ib-sniper-muzzle {
  opacity: 0 !important;
}
@media (max-width: 760px) {
  #ibSniperWeapon {
    width: min(98vw, 820px) !important;
    height: min(46vh, 460px) !important;
    right: -76px !important;
    bottom: -58px !important;
  }
  #ibSniperWeapon.aiming {
    bottom: -74px !important;
    width: min(96vw, 860px) !important;
  }
}

/* 5.0.9 — slightly larger sniper again, still tucked in */
#ibSniperWeapon {
  right: -86px !important;
  bottom: -84px !important;
  width: min(88vw, 1040px) !important;
  height: min(62vh, 680px) !important;
  transform-origin: 84% 92% !important;
  transform: translate3d(var(--weapon-x), var(--weapon-y), 0)
             rotate(calc(var(--weapon-roll) + 1.5deg)) !important;
}
#ibSniperWeapon .ib-sniper-muzzle {
  left: 12.3% !important;
  right: auto !important;
  top: 29.1% !important;
  width: 5.8% !important;
}
#ibSniperWeapon.firing {
  animation: ib-sniper-recoil-image-508r 155ms cubic-bezier(.12,.78,.2,1) !important;
}
@keyframes ib-sniper-recoil-image-508r {
  0%,100% {
    transform: translate3d(var(--weapon-x),var(--weapon-y),0)
               rotate(calc(var(--weapon-roll) + 1.5deg));
  }
  35% {
    transform: translate3d(calc(var(--weapon-x) + 15px),calc(var(--weapon-y) + 17px),0)
               rotate(calc(var(--weapon-roll) + 3.5deg));
  }
}
#ibSniperWeapon.aiming {
  right: 50% !important;
  bottom: -108px !important;
  width: min(86vw, 1040px) !important;
  transform: translate3d(calc(50% + var(--weapon-x)), var(--weapon-y), 0)
             rotate(0deg) scale(.97) !important;
  opacity: 0 !important;
}
#ibSniperWeapon.aiming .ib-sniper-image,
#ibSniperWeapon.aiming .ib-sniper-muzzle {
  opacity: 0 !important;
}
@media (max-width: 760px) {
  #ibSniperWeapon {
    width: min(100vw, 860px) !important;
    height: min(48vh, 500px) !important;
    right: -72px !important;
    bottom: -52px !important;
  }
  #ibSniperWeapon.aiming {
    bottom: -68px !important;
    width: min(96vw, 900px) !important;
  }
}

/* 5.0.9 — sniper larger again, still below the original oversized version */
#ibSniperWeapon {
  right: -78px !important;
  bottom: -78px !important;
  width: min(91vw, 1120px) !important;
  height: min(68vh, 760px) !important;
  transform-origin: 84% 92% !important;
  transform: translate3d(var(--weapon-x), var(--weapon-y), 0)
             rotate(calc(var(--weapon-roll) + 1.5deg)) !important;
}
#ibSniperWeapon .ib-sniper-muzzle {
  left: 12.0% !important;
  right: auto !important;
  top: 28.8% !important;
  width: 6.0% !important;
}
#ibSniperWeapon.firing {
  animation: ib-sniper-recoil-image-508s 155ms cubic-bezier(.12,.78,.2,1) !important;
}
@keyframes ib-sniper-recoil-image-508s {
  0%,100% {
    transform: translate3d(var(--weapon-x),var(--weapon-y),0)
               rotate(calc(var(--weapon-roll) + 1.5deg));
  }
  35% {
    transform: translate3d(calc(var(--weapon-x) + 16px),calc(var(--weapon-y) + 18px),0)
               rotate(calc(var(--weapon-roll) + 3.5deg));
  }
}
#ibSniperWeapon.aiming {
  right: 50% !important;
  bottom: -102px !important;
  width: min(89vw, 1100px) !important;
  transform: translate3d(calc(50% + var(--weapon-x)), var(--weapon-y), 0)
             rotate(0deg) scale(.97) !important;
  opacity: 0 !important;
}
#ibSniperWeapon.aiming .ib-sniper-image,
#ibSniperWeapon.aiming .ib-sniper-muzzle {
  opacity: 0 !important;
}

/* v5.0.20m — INTERNET BABY FM / RADIO V2 */
.music-player{position:fixed;left:50%;bottom:10px;top:auto;transform:translateX(-50%);z-index:18;width:min(720px,calc(100vw - 30px));color:#fff8ef;font-family:ui-monospace,monospace;pointer-events:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.48))}
.music-player[hidden]{display:none!important}.music-player audio{display:none}.radio-shell{position:relative;width:100%;aspect-ratio:1536/360}.radio-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.radio-master-knob{position:absolute;left:10.03%;top:33.9%;width:7.3%;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;cursor:ns-resize;touch-action:none;z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));outline:none}.radio-master-knob img{display:block;width:100%;height:100%;object-fit:contain;transform:rotate(var(--ib-master-knob-angle,135deg));transform-origin:50% 50%;pointer-events:none;user-select:none;will-change:transform}.radio-master-knob:focus-visible{box-shadow:0 0 0 2px rgba(89,221,224,.7),0 0 12px rgba(89,221,224,.42)}.radio-title-window{position:absolute;left:50%;transform:translateX(-50%);top:17.35%;width:30.6%;height:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px;background:rgba(1,8,7,.84);border-radius:4px;overflow:hidden;text-align:center;text-shadow:0 0 7px rgba(245,255,75,.45)}.radio-title-window strong{display:block;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#e7eb67;font:700 clamp(9px,1.22vw,17px)/1.05 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.radio-title-window span{display:block;width:100%;max-width:100%;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#59d5d2;font:600 clamp(6px,.7vw,10px)/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.radio-state{position:absolute;right:7.7%;top:18%;padding:3px 6px;background:rgba(0,8,8,.8);border:1px solid rgba(92,230,226,.45);color:#65e5e4;font:700 clamp(6px,.63vw,9px) ui-monospace;letter-spacing:.1em}.music-player.radio-paused .radio-state{color:#ffd84a;border-color:rgba(255,216,74,.5)}.music-player.radio-blocked .radio-state{color:#ff7a1a;border-color:rgba(255,122,26,.55)}#radioVisualizer{position:absolute;left:31.1%;top:34.5%;width:41.5%;height:29%;background:rgba(1,9,5,.57);border-radius:2px;image-rendering:auto}.radio-mini-mask{position:absolute;right:7.15%;top:40.2%;width:16.9%;height:23.2%;z-index:1;border-radius:999px;background:radial-gradient(ellipse at center,rgba(0,22,32,.98) 0%,rgba(0,10,17,.99) 66%,rgba(0,5,10,.99) 100%);box-shadow:inset 0 0 12px rgba(50,188,236,.10);pointer-events:none}#radioMiniVisualizer{position:absolute;right:7.75%;top:47.0%;width:15.0%;height:14.8%;z-index:2;background:transparent;border-radius:999px;pointer-events:none;image-rendering:auto}.radio-library-button{position:absolute;right:7.5%;bottom:17.5%;min-height:22px;padding:0 7px;border:1px solid rgba(73,221,230,.42);background:rgba(1,7,12,.82);color:#54dae1;font:700 clamp(6px,.58vw,8px) ui-monospace;letter-spacing:.09em;cursor:pointer}.music-player-meta{width:min(470px,72%);margin:1px auto 0;display:flex;justify-content:flex-end;align-items:center;min-height:12px}.music-player-meta #radioTime{color:#9d91a3;font-size:8px;min-width:64px;text-align:right;opacity:.92}.radio-join{min-height:25px;padding:0 7px;border:1px solid rgba(255,255,255,.18);background:#16101c;color:#fff8ef;font:700 8px ui-monospace;cursor:pointer}.music-progress{width:min(470px,72%);height:2px;margin:1px auto 0;background:rgba(255,255,255,.12);overflow:hidden}.music-progress i{display:block;width:0;height:100%;background:#d7e95d;transition:width .2s linear}.radio-join{display:block;width:min(470px,72%);margin:4px auto 0;background:#c7ff2f;color:#08060d;border-color:#c7ff2f}.radio-library-panel{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);width:min(620px,94vw);max-height:250px;padding:10px;border:1px solid rgba(89,222,226,.28);background:rgba(4,5,10,.95);backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(0,0,0,.45);overflow:hidden}.radio-library-panel[hidden]{display:none!important}.radio-library-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.1);font-size:9px;letter-spacing:.1em;color:#5bdddf}.radio-library-head span{color:#8d858f;font-size:8px}.radio-library-list{display:grid;gap:3px;max-height:205px;margin-top:7px;overflow:auto}.radio-library-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 7px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);font-size:8px}.radio-library-row.is-current{border-color:rgba(199,255,47,.48);background:rgba(199,255,47,.06)}.radio-library-row .track-no{color:#6adfe2}.radio-library-row strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff8ef;font-size:9px}.radio-library-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8f8794;font-size:7px;margin-top:2px}.radio-library-row time{color:#b9b2bd;font-size:8px}
@media(max-width:760px){.music-player{bottom:6px;width:calc(100vw - 12px)}.radio-title-window{left:50%;width:33%;top:17%}.radio-title-window strong{font-size:8px}.radio-title-window span{font-size:6px}#radioVisualizer{left:30%;width:43%;top:34%;height:28%}#radioMiniVisualizer{right:7.0%;top:46.2%;width:16%;height:14.5%}.radio-mini-mask{right:6.45%;top:39.5%;width:18%;height:23.5%}.radio-state{right:6.8%;font-size:6px}.radio-library-button{right:6.5%;min-height:18px;font-size:6px}.music-player-meta{width:78%}.music-progress,.radio-join{width:78%}.radio-library-panel{width:96vw;max-height:210px}.radio-library-list{max-height:165px}}


#ibRocketWeapon.ib-rocket-weapon{
  --weapon-x:0px;--weapon-y:0px;--weapon-roll:-3.5deg;
  position:fixed;right:-46px;bottom:-28px;width:clamp(360px,35vw,590px);height:clamp(150px,16vw,250px);
  z-index:12;pointer-events:none;transform-origin:75% 88%;
  transform:translate3d(var(--weapon-x),var(--weapon-y),0) rotate(var(--weapon-roll));
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.76));will-change:transform;
}
#ibRocketWeapon.hidden{display:none!important}
#ibRocketWeapon>div{position:absolute;box-sizing:border-box}
.ib-rocket-tube{right:3%;top:30%;width:78%;height:32%;border-radius:999px 18px 18px 999px;background:linear-gradient(180deg,#282930 0%,#0b0b0e 48%,#030304 100%);border:3px solid rgba(255,119,31,.38);box-shadow:inset 0 0 0 2px rgba(255,255,255,.035),inset 0 -12px 22px rgba(0,0,0,.55)}
.ib-rocket-tube:before{content:"";position:absolute;left:7%;top:12%;width:18%;height:76%;border-radius:999px;background:#08080a;border:2px solid rgba(255,125,36,.28)}
.ib-rocket-tube:after{content:"";position:absolute;right:8%;top:-10%;width:13%;height:120%;border-radius:8px;background:linear-gradient(90deg,#111216,#2e2a27,#08080a);border:2px solid rgba(255,128,35,.25)}
.ib-rocket-tube i{position:absolute;left:35%;top:21%;width:28%;height:58%;background:repeating-linear-gradient(90deg,#ff6a12 0 9%,#171418 9% 18%);opacity:.75;transform:skewX(-13deg)}
.ib-rocket-tube b{position:absolute;left:39%;top:38%;color:#ffb34f;font:700 11px/1 ui-monospace,monospace;letter-spacing:.16em;text-shadow:0 0 8px rgba(255,108,24,.45)}
.ib-rocket-rear{left:4%;top:33%;width:23%;height:26%;border-radius:18px 6px 6px 18px;background:linear-gradient(180deg,#18191d,#030304);border:3px solid rgba(255,123,31,.32)}
.ib-rocket-grip{right:25%;top:57%;width:11%;height:34%;transform:rotate(11deg);transform-origin:50% 0;border-radius:0 0 8px 8px;background:linear-gradient(90deg,#060607,#29272a,#080809);border:2px solid rgba(255,121,31,.18)}
.ib-rocket-muzzle{right:-1%;top:24%;width:12%;aspect-ratio:1;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 8%,#ffd86a 14%,#ff6412 35%,rgba(255,71,0,.55) 54%,transparent 72%);filter:blur(.2px)}
.ib-rocket-muzzle.show{animation:ib-rocket-flash 120ms ease-out}
@keyframes ib-rocket-flash{0%{opacity:1;transform:scale(.35)}45%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(2.0)}}
#ibRocketWeapon.firing{animation:ib-rocket-recoil 190ms cubic-bezier(.12,.78,.2,1)}
@keyframes ib-rocket-recoil{0%,100%{transform:translate3d(var(--weapon-x),var(--weapon-y),0) rotate(var(--weapon-roll))}34%{transform:translate3d(calc(var(--weapon-x) + 34px),calc(var(--weapon-y) + 24px),0) rotate(calc(var(--weapon-roll) + 3.8deg))}}
@media(max-width:760px){#ibRocketWeapon.ib-rocket-weapon{right:-34px;bottom:-22px;width:clamp(300px,58vw,430px);height:170px}.ib-rocket-tube b{font-size:8px}}


/* v5.1g — keep party UI out of the pre-entry/loading screen. */
body:not(.ib-gameplay-joined) #musicPlayer,
body:not(.ib-gameplay-joined) #chatPanel {
  display:none !important;
}

/* Build badge sits below the online counter instead of on top of it. */
#buildBadge { left:16px !important; top:58px !important; }


/* v5.2e: host-only radio controls, tiny visualizer lift, low-cost hit vignette. */
.radio-state,.radio-library-button,.radio-library-panel{display:none!important}
#radioMiniVisualizer{top:43.2%!important;right:7.55%!important;width:15.5%!important;height:19%!important}
.damage-vignette{position:fixed;inset:0;width:100vw;height:100vh;z-index:2147483647;pointer-events:none;opacity:0;display:block!important;object-fit:fill;user-select:none;-webkit-user-drag:none;will-change:opacity}
@media(max-width:760px){#radioMiniVisualizer{top:42.8%!important;right:6.8%!important;width:16.4%!important;height:18.8%!important}}

/* v5.2l: real PNG damage overlay lives above the game compositor. */
body:not(.ib-gameplay-joined) #damageVignette{opacity:0!important}

/* v5.3g: move the track-position line into the radio face, directly under the main spectrum. */
.radio-shell .radio-console-progress{position:absolute;left:31.1%;top:74.7%;width:41.5%;height:6.5%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;align-items:center;z-index:3;pointer-events:none}
.radio-shell .radio-console-progress .music-progress{width:100%;height:2px;margin:0;background:rgba(255,255,255,.18);overflow:hidden;box-shadow:0 0 5px rgba(215,233,93,.12)}
.radio-shell .radio-console-progress .music-progress i{display:block;width:0;height:100%;background:#d7e95d;transition:width .2s linear;box-shadow:0 0 4px rgba(215,233,93,.42)}
.radio-shell .radio-console-progress #radioTime{min-width:27px;margin:0;color:#958b9b;font:600 clamp(5px,.45vw,7px)/1 ui-monospace,monospace;text-align:right;letter-spacing:.02em;opacity:.88}
@media(max-width:760px){.radio-shell .radio-console-progress{left:30%;top:74.2%;width:43%;gap:3px}.radio-shell .radio-console-progress #radioTime{font-size:5px;min-width:22px}}

/* v5.3k — jetpack is a parallel mobility gadget, not a weapon slot.
   Keep its first-person indicator behind the live gun so both can coexist. */
#ibJetpackHud.ib-jetpack-hud { z-index: 5 !important; opacity: .82; }


/* ================================================================
   v5.2zl CINEMATIC LOADING PRESENTATION
   Keep only the 3D background + loading/click overlays visible until
   actual gameplay begins. No health/ammo/crosshair/chat/radio/network UI.
   ================================================================ */
.game-view.ib-loading-cinematic > .hud,
.game-view.ib-loading-cinematic #fpsHud,
.game-view.ib-loading-cinematic #networkHud,
.game-view.ib-loading-cinematic #damageVignette,
.game-view.ib-loading-cinematic #mobileControls,
.game-view.ib-loading-cinematic #mouseCaptureHint,
.game-view.ib-loading-cinematic > .top-controls,
.game-view.ib-loading-cinematic #debugPanel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* v5.6h — ambient YouTube CITY TV. This is intentionally independent from
   the protected Premiere overlay: Premiere can take over without destroying
   the always-on lobby/video loop state. */
.youtube-ambient-overlay {
  position: fixed;
  z-index: 31;
  top: 72px;
  right: 18px;
  width: min(430px, 38vw);
  min-width: 300px;
  pointer-events: none;
  transition: width .2s ease, opacity .2s ease, transform .2s ease;
}
.youtube-ambient-overlay[hidden] { display: none !important; }
.youtube-ambient-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,61,184,.42);
  background: rgba(3,1,6,.92);
  box-shadow: 0 18px 58px rgba(0,0,0,.62), 0 0 34px rgba(255,61,184,.08);
  pointer-events: auto;
}
.youtube-ambient-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:34px;
  padding:0 9px;
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#ff8ad3;
  font:700 .48rem var(--mono);
  letter-spacing:.12em;
}
.youtube-ambient-actions { display:flex; align-items:center; gap:7px; }
.youtube-ambient-actions small { color:#a997b0; font-size:.43rem; }
.youtube-ambient-head button {
  min-height:24px;
  padding:0 7px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:#fff;
  font:700 .42rem var(--mono);
}
.youtube-ambient-player { width:100%; aspect-ratio:16/9; background:#000; }
.youtube-ambient-player iframe { display:block; width:100%; height:100%; border:0; }
.youtube-ambient-caption {
  min-height:24px;
  display:flex;
  align-items:center;
  padding:0 8px;
  color:#84738a;
  border-top:1px solid rgba(255,255,255,.07);
  font:700 .42rem var(--mono);
  letter-spacing:.08em;
}
.youtube-ambient-audio {
  position:absolute;
  z-index:3;
  left:50%;
  bottom:31px;
  transform:translateX(-50%);
  min-height:36px;
  padding:0 12px;
  border:0;
  background:#c7ff2f;
  color:#08060d;
  font:800 .48rem var(--mono);
  letter-spacing:.08em;
}
.youtube-ambient-overlay.tiny { width:min(285px, 30vw); opacity:.96; }
.youtube-ambient-overlay.tiny .youtube-ambient-head { min-height:28px; font-size:.42rem; }
.youtube-ambient-overlay.tiny .youtube-ambient-caption { display:none; }
.youtube-ambient-overlay.premiere-suppressed { display:none !important; }
@media (max-width: 900px) {
  .youtube-ambient-overlay { top:64px; right:10px; width:min(360px,48vw); min-width:260px; }
}
@media (max-width: 650px), (pointer: coarse) {
  .youtube-ambient-overlay { top:58px; right:8px; width:min(330px,70vw); min-width:220px; }
  .youtube-ambient-head { font-size:.42rem; }
}