:root {
      --bg-top: #071726;
      --bg-mid: #113356;
      --bg-bottom: #1c3f66;
      --line: rgba(136, 215, 255, 0.22);
      --panel: rgba(6, 15, 31, 0.8);
      --text: #d9f3ff;
      --accent: #ff9f43;
      --robot-h: clamp(120px, 27vh, 220px);
      --robot-w: clamp(74px, 16.7vh, 136px);
      --hud-clearance: clamp(42px, 6.2vh, 60px);
      --robot-player-hue: 0deg;
      --robot-player-sat: 1;
      --robot-player-bright: 1;
      --mobile-control-height: clamp(112px, 14.2vh, 132px);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      width: 100vw;
      height: 100vh;
      font-family: "Orbitron", "Rajdhani", "Trebuchet MS", sans-serif;
      color: var(--text);
      background: #040b14;
      overflow: hidden;
    }

    .game-shell {
      width: 100vw;
      height: 100vh;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: hidden;
      position: relative;
      background:
        linear-gradient(180deg, rgba(5, 18, 30, 0.26) 0%, rgba(4, 12, 20, 0.44) 100%),
        var(--gameplay-bg-url, url("../dronebusterorange/dronebustersfon.png")) center center / cover no-repeat;
    }

    .game-shell:focus,
    .game-shell:focus-visible {
      outline: none;
      box-shadow: none;
    }

    .game-shell.is-menu-screen {
      background:
        linear-gradient(180deg, rgba(12, 52, 94, 0.08) 0%, rgba(4, 12, 20, 0.18) 100%),
        var(--menu-bg-url, url("../dronebusterorange/dronebustersmain.png")) center center / cover no-repeat;
    }

    @media (max-width: 820px) {
      .game-shell {
        background:
          linear-gradient(180deg, rgba(5, 18, 30, 0.26) 0%, rgba(4, 12, 20, 0.44) 100%),
          var(--gameplay-bg-url, url("../dronebusterorange/mobile/dronebustersfon.png")) center center / cover no-repeat;
      }

      .game-shell.is-menu-screen {
        background:
          linear-gradient(180deg, rgba(12, 52, 94, 0.08) 0%, rgba(4, 12, 20, 0.18) 100%),
          var(--menu-bg-url, url("../dronebusterorange/mobile/dronebustersmain.png")) center center / cover no-repeat;
      }
    }

    .menu-bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
      opacity: 0;
      z-index: 0;
      filter: none;
      transition: opacity 260ms ease;
    }

    .game-shell.is-menu-screen .menu-bg-video {
      opacity: 1;
    }

    .game-shell.is-menu-cinematic {
      background-image: var(--menu-bg-url, url("../dronebusterorange/dronebustersmain.png"));
    }

    .game-shell.is-gameplay-cursor-hidden,
    .game-shell.is-gameplay-cursor-hidden * {
      cursor: none !important;
    }

    .game-shell::before {
      content: none;
    }

    .game-shell::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 16px;
      height: 16px;
      pointer-events: none;
      z-index: 30;
      background: radial-gradient(circle at 100% 0, rgba(6, 14, 30, 0.98) 0%, rgba(6, 14, 30, 0.9) 42%, rgba(6, 14, 30, 0) 100%);
    }

    .game-shell.is-menu-screen::after {
      content: none;
    }

    .arena {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      contain: layout paint;
    }

    .game-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: none;
      pointer-events: none;
      z-index: 6;
    }

    .game-shell.is-canvas-render .game-canvas {
      display: block;
    }

    .game-shell.is-canvas-render .drones-layer,
    .game-shell.is-canvas-render .projectiles-layer {
      display: none;
    }

    .effects-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }

    .drones-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
    }

    .drone-smoke-trail {
      position: absolute;
      left: 0;
      top: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      mix-blend-mode: normal;
      filter: blur(0.62px);
      will-change: transform, opacity;
      --trail-ember: 0.45;
      --trail-flame: 0.38;
      --trail-smoke: 0.76;
      background:
        radial-gradient(
          circle at 50% 44%,
          rgba(255, 248, 228, calc(var(--trail-flame) * 0.95)) 0%,
          rgba(255, 188, 116, calc(var(--trail-flame) * 0.88)) 16%,
          rgba(255, 123, 56, calc(var(--trail-flame) * 0.68)) 32%,
          rgba(239, 89, 34, calc(var(--trail-flame) * 0.24)) 46%,
          rgba(168, 70, 30, 0) 62%
        ),
        radial-gradient(
          circle at 44% 58%,
          rgba(188, 188, 188, calc(var(--trail-smoke) * 0.45)) 0%,
          rgba(126, 126, 126, calc(var(--trail-smoke) * 0.36)) 34%,
          rgba(78, 78, 78, calc(var(--trail-smoke) * 0.3)) 62%,
          rgba(42, 42, 42, calc(var(--trail-smoke) * 0.2)) 84%,
          rgba(22, 22, 22, 0) 100%
        ),
        radial-gradient(
          circle at 64% 40%,
          rgba(166, 166, 166, calc(var(--trail-smoke) * 0.34)) 0%,
          rgba(96, 96, 96, calc(var(--trail-smoke) * 0.24)) 42%,
          rgba(52, 52, 52, calc(var(--trail-smoke) * 0.14)) 72%,
          rgba(24, 24, 24, 0) 100%
        );
    }

    .robot-impact-flash {
      position: absolute;
      left: 0;
      top: 0;
      width: calc(74px * var(--impact-scale, 1));
      height: calc(74px * var(--impact-scale, 1));
      border-radius: 50%;
      pointer-events: none;
      mix-blend-mode: screen;
      transform: translate(-50%, -50%) scale(0.28);
      opacity: 0;
      background:
        radial-gradient(circle at 50% 40%, rgba(255, 252, 228, 0.98) 0%, rgba(255, 210, 116, 0.88) 24%, rgba(255, 146, 58, 0.66) 44%, rgba(255, 90, 22, 0.12) 62%, rgba(255, 75, 22, 0) 80%),
        radial-gradient(circle at 50% 70%, rgba(102, 102, 102, 0.36) 0%, rgba(52, 52, 52, 0.22) 42%, rgba(22, 22, 22, 0) 80%);
      filter: blur(0.35px) drop-shadow(0 0 14px rgba(255, 156, 74, 0.62));
      z-index: 3;
      will-change: transform, opacity;
      animation: robotImpactFlash 340ms ease-out forwards;
    }

    .robot-sonic-wave {
      position: absolute;
      left: 0;
      top: 0;
      width: var(--sonic-width, 780px);
      height: var(--sonic-height, 1020px);
      pointer-events: none;
      transform: translate(-50%, -100%) scale(0.18, 0.05);
      transform-origin: 50% 100%;
      opacity: 0;
      mix-blend-mode: screen;
      border-radius: 50% 50% 18% 18% / 64% 64% 36% 36%;
      border: 2px solid rgba(124, 245, 255, 0.45);
      box-shadow:
        inset 0 -24px 42px rgba(128, 236, 255, 0.2),
        0 -12px 38px rgba(92, 222, 255, 0.34),
        0 -48px 96px rgba(72, 144, 255, 0.22);
      background:
        radial-gradient(
          ellipse at 50% 100%,
          rgba(210, 255, 255, 0.86) 0%,
          rgba(154, 241, 255, 0.58) 18%,
          rgba(96, 196, 255, 0.22) 42%,
          rgba(44, 112, 244, 0.02) 74%,
          rgba(22, 64, 145, 0) 100%
        ),
        linear-gradient(
          180deg,
          rgba(158, 239, 255, 0.14) 0%,
          rgba(101, 199, 255, 0.08) 38%,
          rgba(44, 112, 201, 0.02) 68%,
          rgba(24, 68, 141, 0) 100%
        );
      filter: blur(0.15px);
      will-change: transform, opacity, filter;
      animation: robotSonicPulse 680ms cubic-bezier(0.19, 0.62, 0.2, 1) forwards;
    }

    .robot-pulse-charge-ring {
      position: absolute;
      width: 92px;
      height: 92px;
      border: 2px solid rgba(118, 245, 255, 0.82);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0.28);
      box-shadow: 0 0 12px rgba(94, 231, 255, 0.72), inset 0 0 14px rgba(114, 245, 255, 0.26);
      mix-blend-mode: screen;
      animation: robotPulseChargeRing 900ms cubic-bezier(0.18, 0.72, 0.28, 1) forwards;
      z-index: 4;
    }

    .robot-rig.is-pulse-charged {
      animation: robotPulseChargeGlow 900ms ease-out both;
    }

    #hudPulse.is-pulse-charged {
      animation: hudPulseChargePop 900ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
      border-color: rgba(121, 245, 255, 0.8);
      color: #e6fdff;
      box-shadow: 0 0 14px rgba(96, 232, 255, 0.48);
    }

    @keyframes robotPulseChargeRing {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.28); }
      32% { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); }
    }

    @keyframes robotPulseChargeGlow {
      0% { filter: brightness(1) saturate(1); }
      38% { filter: brightness(1.42) saturate(1.4) drop-shadow(0 0 15px rgba(104, 238, 255, 0.78)); }
      100% { filter: brightness(1) saturate(1); }
    }

    @keyframes hudPulseChargePop {
      0% { transform: scale(1); }
      42% { transform: scale(1.16); }
      100% { transform: scale(1); }
    }

    .drone-target {
      position: absolute;
      left: 0;
      top: 0;
      width: clamp(64px, 7vw, 115px);
      height: auto;
      transform: translate3d(0, 0, 0);
      filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
      transform-origin: 50% 50%;
      will-change: transform, filter, opacity;
      pointer-events: none;
    }

    .drone-target.is-remote-dive-warning {
      filter: drop-shadow(0 0 10px rgba(102, 238, 255, 0.92)) brightness(1.26) saturate(1.28);
      animation: droneRemoteDiveWarning 380ms ease-in-out infinite alternate;
    }

    @keyframes droneRemoteDiveWarning {
      from { opacity: 0.48; }
      to { opacity: 1; }
    }

    .drone-health {
      position: absolute;
      left: 0;
      top: 0;
      height: 6px;
      padding: 1px;
      border: 1px solid rgba(142, 232, 255, 0.48);
      border-radius: 999px;
      background: rgba(3, 14, 29, 0.78);
      box-shadow: 0 0 10px rgba(88, 220, 255, 0.26);
      opacity: 0;
      pointer-events: none;
      transform-origin: center bottom;
      transition: opacity 220ms ease-out;
      will-change: transform, opacity;
      z-index: 3;
    }

    .drone-health.is-visible {
      opacity: 1;
      animation: droneHealthReveal 220ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
    }

    .drone-health-fill {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      transform: scaleX(1);
      transform-origin: left center;
      background: linear-gradient(90deg, #49c9ff 0%, #91f3ff 100%);
      box-shadow: 0 0 7px rgba(96, 232, 255, 0.78);
      transition: transform 130ms ease-out, background 160ms ease, box-shadow 160ms ease;
    }

    .drone-health.is-warning {
      border-color: rgba(255, 187, 102, 0.58);
      box-shadow: 0 0 10px rgba(255, 170, 82, 0.32);
    }

    .drone-health.is-warning .drone-health-fill {
      background: linear-gradient(90deg, #ff863d 0%, #ffd066 100%);
      box-shadow: 0 0 7px rgba(255, 158, 66, 0.8);
    }

    .drone-health.is-critical {
      border-color: rgba(255, 109, 109, 0.66);
      box-shadow: 0 0 11px rgba(255, 80, 80, 0.38);
    }

    .drone-health.is-critical .drone-health-fill {
      background: linear-gradient(90deg, #ff4949 0%, #ff8d79 100%);
      box-shadow: 0 0 8px rgba(255, 73, 73, 0.9);
    }

    @keyframes droneHealthReveal {
      from { opacity: 0; filter: brightness(1.7); }
      to { opacity: 1; filter: brightness(1); }
    }

    .drone-muzzle {
      position: absolute;
      left: 0;
      top: 0;
      width: 11px;
      height: 11px;
      transform: translate3d(0, 0, 0);
      transform-origin: 50% 50%;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0;
      z-index: 2;
      will-change: transform, opacity;
    }

    .drone-muzzle-core {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(242, 255, 255, 0.98) 0%, rgba(152, 246, 255, 0.94) 44%, rgba(74, 181, 255, 0.38) 70%, rgba(57, 161, 255, 0) 90%);
      box-shadow:
        0 0 9px rgba(122, 236, 255, 0.8),
        0 0 16px rgba(74, 181, 255, 0.5);
      filter: drop-shadow(0 0 5px rgba(168, 245, 255, 0.45));
      animation: droneCharge 1.6s ease-in-out infinite;
    }

    .drone-muzzle-flash {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 22px;
      height: 34px;
      transform: translate(-50%, -50%) scale(0.18);
      transform-origin: 50% 20%;
      opacity: 0;
      background:
        radial-gradient(circle at 50% 8px, rgba(236, 255, 255, 0.96) 0%, rgba(146, 238, 255, 0.74) 38%, rgba(89, 177, 255, 0) 72%),
        linear-gradient(180deg, rgba(134, 227, 255, 0.68) 0%, rgba(70, 156, 255, 0) 88%);
      clip-path: polygon(50% 0, 76% 24%, 67% 100%, 33% 100%, 24% 24%);
      filter: drop-shadow(0 0 7px rgba(108, 220, 255, 0.62));
    }

    .drone-muzzle.is-firing .drone-muzzle-flash {
      animation: droneMuzzleBurst 130ms ease-out forwards;
    }

    .projectiles-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 6;
    }

    .projectile {
      position: absolute;
      left: 0;
      top: 0;
      width: 14px;
      height: 30px;
      transform-origin: 50% 85%;
      pointer-events: none;
      will-change: transform, opacity;
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 9px rgba(255, 158, 54, 0.55));
    }

    .projectile::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      width: 10px;
      height: 12px;
      border-radius: 999px;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(255, 252, 227, 1) 0%, rgba(255, 196, 94, 0.96) 50%, rgba(255, 114, 33, 0) 100%);
    }

    .projectile::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 7px;
      width: 8px;
      height: 22px;
      border-radius: 999px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(255, 184, 82, 0.92) 0%, rgba(255, 145, 45, 0.45) 48%, rgba(255, 111, 32, 0) 100%);
    }

    .projectile.enemy {
      width: 12px;
      height: 28px;
      filter: drop-shadow(0 0 8px rgba(134, 243, 255, 0.62));
    }

    .projectile.enemy::before {
      width: 9px;
      height: 11px;
      background: radial-gradient(circle, rgba(231, 255, 255, 0.95) 0%, rgba(126, 244, 255, 0.92) 48%, rgba(53, 183, 255, 0) 100%);
    }

    .projectile.enemy::after {
      width: 7px;
      height: 20px;
      background: linear-gradient(180deg, rgba(137, 238, 255, 0.92) 0%, rgba(84, 174, 255, 0.46) 48%, rgba(55, 130, 255, 0) 100%);
    }

    .projectile.enemy.reflected {
      filter: drop-shadow(0 0 9px rgba(255, 184, 86, 0.72));
    }

    .projectile.enemy.reflected::before {
      background: radial-gradient(circle, rgba(255, 250, 224, 0.95) 0%, rgba(255, 199, 111, 0.92) 48%, rgba(255, 139, 47, 0) 100%);
    }

    .projectile.enemy.reflected::after {
      background: linear-gradient(180deg, rgba(255, 210, 127, 0.93) 0%, rgba(255, 161, 72, 0.5) 48%, rgba(255, 108, 35, 0) 100%);
    }

    .projectile--level-2 {
      width: 12px;
      height: 34px;
      filter: drop-shadow(0 0 10px rgba(86, 218, 255, 0.62));
    }

    .projectile--level-2::before {
      width: 9px;
      height: 13px;
      background: radial-gradient(circle, rgba(235, 255, 255, 1) 0%, rgba(117, 236, 255, 0.98) 52%, rgba(64, 177, 255, 0) 100%);
    }

    .projectile--level-2::after {
      width: 7px;
      height: 25px;
      background: linear-gradient(180deg, rgba(117, 236, 255, 0.96) 0%, rgba(80, 174, 255, 0.5) 50%, rgba(47, 124, 255, 0) 100%);
    }

    .projectile--level-3 {
      width: 18px;
      height: 28px;
      filter: drop-shadow(0 0 10px rgba(128, 255, 98, 0.56));
    }

    .projectile--level-3::before {
      width: 13px;
      height: 13px;
      background: radial-gradient(circle, rgba(248, 255, 230, 1) 0%, rgba(168, 255, 120, 0.96) 52%, rgba(92, 210, 64, 0) 100%);
    }

    .projectile--level-3::after {
      width: 11px;
      height: 18px;
      background: linear-gradient(180deg, rgba(180, 255, 128, 0.92) 0%, rgba(108, 230, 82, 0.46) 54%, rgba(76, 180, 54, 0) 100%);
    }

    .projectile--level-4 {
      width: 20px;
      height: 38px;
      filter: drop-shadow(0 0 12px rgba(255, 96, 214, 0.66));
    }

    .projectile--level-4::before {
      width: 14px;
      height: 15px;
      background: radial-gradient(circle, rgba(255, 238, 252, 1) 0%, rgba(255, 92, 208, 0.98) 52%, rgba(198, 65, 255, 0) 100%);
    }

    .projectile--level-4::after {
      width: 12px;
      height: 29px;
      background: linear-gradient(180deg, rgba(255, 110, 218, 0.96) 0%, rgba(205, 75, 255, 0.5) 52%, rgba(140, 62, 255, 0) 100%);
    }

    .ground-glow {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 22%;
      background: linear-gradient(180deg, rgba(255, 159, 67, 0) 0%, rgba(255, 159, 67, 0.25) 100%);
      pointer-events: none;
      z-index: 0;
    }

    .robot-rig {
      position: absolute;
      bottom: var(--hud-clearance);
      left: 0;
      width: var(--robot-w);
      height: var(--robot-h);
      transform: translate3d(0, 0, 0);
      transform-origin: 50% 100%;
      pointer-events: none;
      will-change: transform;
      --muzzle-x: 50%;
      --muzzle-y: 2.35%;
      --muzzle-rot: -90deg;
      --flash-scale: 1;
      --flash-tilt: 0deg;
      --flash-glow: 1;
      z-index: 125;
      opacity: 1;
      visibility: visible;
      transition: opacity 180ms ease;
    }

    .game-shell.is-menu-screen .robot-rig {
      opacity: 0;
      visibility: hidden;
    }

    .robot-rig.is-guarding .muzzle {
      opacity: 0;
    }

    .robot-rig.is-crashed .muzzle {
      opacity: 0;
      visibility: hidden;
    }

    .robot-rig.is-crashed .robot-reflection {
      opacity: 0;
      visibility: hidden;
    }

    .robot {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center bottom;
      opacity: 0;
      filter:
        hue-rotate(var(--robot-player-hue))
        saturate(var(--robot-player-sat))
        brightness(var(--robot-player-bright));
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
      z-index: 2;
    }

    .robot.is-active {
      opacity: 1;
    }

    #robotCrash {
      width: 154%;
      height: 154%;
      left: -27%;
      top: -46%;
      object-fit: contain;
      object-position: center bottom;
      mix-blend-mode: normal;
    }

    #robotCrashReflection {
      width: 154%;
      height: 154%;
      left: -27%;
      top: -46%;
      object-fit: contain;
      object-position: center bottom;
      mix-blend-mode: normal;
    }

    .robot-reflection {
      position: absolute;
      left: 0;
      width: 100%;
      height: 124%;
      top: calc(100% + 0px);
      overflow: hidden;
      pointer-events: none;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.68) 40%, rgba(0, 0, 0, 0.36) 82%, rgba(0, 0, 0, 0) 100%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.68) 40%, rgba(0, 0, 0, 0.36) 82%, rgba(0, 0, 0, 0) 100%);
      z-index: 1;
    }

    .robot-reflection .robot {
      opacity: 0;
    }

    .robot-reflection-sprite {
      transform: translateY(118%) scaleY(-1.18) scaleX(1.01);
      transform-origin: 50% 0;
      filter:
        hue-rotate(var(--robot-player-hue))
        saturate(var(--robot-player-sat))
        brightness(var(--robot-player-bright))
        blur(0.58px)
        brightness(0.96)
        saturate(0.85);
      mix-blend-mode: normal;
    }

    .robot-reflection #robotCrashReflection.robot-reflection-sprite {
      transform: translateY(100%) scaleY(-1);
      transform-origin: 50% 0;
    }

    .robot-reflection .robot.is-active {
      opacity: 0.62;
    }

    .robot-reflection #robotCrashReflection.is-active {
      opacity: 0.62;
    }

    .muzzle {
      position: absolute;
      left: var(--muzzle-x);
      top: var(--muzzle-y);
      width: clamp(12px, 2.5vh, 20px);
      height: clamp(12px, 2.5vh, 20px);
      transform: translate(-50%, -50%) rotate(var(--muzzle-rot));
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 3;
    }

    .muzzle-charge {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 250, 214, 0.96) 0%, rgba(255, 173, 52, 0.95) 42%, rgba(255, 114, 28, 0.35) 65%, transparent 78%);
      animation: chargePulse 1.4s ease-in-out infinite;
    }

    .muzzle.is-firing .muzzle-charge {
      animation: chargePulse 1.4s ease-in-out infinite, chargeKick 130ms ease-out;
    }

    .muzzle-halo {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 300%;
      height: 300%;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(255, 174, 62, 0.45) 0%, rgba(255, 146, 48, 0.15) 50%, transparent 74%);
      animation: chargeHalo 1.4s ease-in-out infinite;
    }

    .muzzle-flash {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 44px;
      height: 30px;
      transform: translate(-50%, -50%) rotate(var(--flash-tilt)) scale(calc(0.2 * var(--flash-scale)));
      opacity: 0;
      filter: blur(0.35px) drop-shadow(0 0 7px rgba(255, 192, 98, 0.45));
    }

    .muzzle-flash-core {
      position: absolute;
      left: 0;
      top: 50%;
      width: 45%;
      height: 100%;
      transform: translateY(-50%);
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255, 255, 230, 1) 0%, rgba(255, 213, 120, 0.95) 54%, rgba(255, 140, 40, 0) 100%);
      opacity: var(--flash-glow);
    }

    .muzzle-flash-cone {
      position: absolute;
      left: 32%;
      top: 50%;
      width: 68%;
      height: 100%;
      transform: translateY(-50%);
      background: linear-gradient(90deg, rgba(255, 246, 212, 0.95) 0%, rgba(255, 182, 80, 0.7) 40%, rgba(255, 121, 29, 0) 100%);
      clip-path: polygon(0 50%, 52% 0, 100% 50%, 52% 100%);
      opacity: var(--flash-glow);
    }

    .muzzle-shock {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid rgba(255, 219, 149, 0.9);
      transform: translate(-50%, -50%) rotate(var(--flash-tilt)) scale(0.25);
      opacity: 0;
    }

    .muzzle-smoke {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 191, 120, 0.42) 0%, rgba(120, 120, 120, 0.2) 45%, rgba(70, 70, 70, 0) 80%);
      transform: translate(-50%, -50%) scale(0.25);
      opacity: 0;
    }

    .muzzle.is-firing .muzzle-flash {
      animation: muzzleBurst 130ms ease-out forwards;
    }

    .muzzle.is-firing .muzzle-shock {
      animation: muzzleShock 150ms ease-out forwards;
    }

    .muzzle.is-firing .muzzle-smoke {
      animation: muzzleSmoke 260ms ease-out forwards;
    }

    @keyframes chargePulse {
      0%,
      100% {
        opacity: 0.76;
        transform: scale(0.86);
      }
      45% {
        opacity: 1;
        transform: scale(1.18);
      }
    }

    @keyframes chargeHalo {
      0%,
      100% {
        opacity: 0.42;
        transform: translate(-50%, -50%) scale(0.9);
      }
      50% {
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(1.14);
      }
    }

    @keyframes chargeKick {
      0% {
        filter: brightness(1);
      }
      35% {
        filter: brightness(1.55);
      }
      100% {
        filter: brightness(1);
      }
    }

    @keyframes muzzleBurst {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--flash-tilt)) scale(calc(0.2 * var(--flash-scale)));
      }
      24% {
        opacity: calc(1 * var(--flash-glow));
        transform: translate(-50%, -50%) rotate(var(--flash-tilt)) scale(calc(1.38 * var(--flash-scale)));
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--flash-tilt)) scale(calc(1.78 * var(--flash-scale)));
      }
    }

    @keyframes muzzleShock {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--flash-tilt)) scale(0.22);
      }
      35% {
        opacity: calc(0.82 * var(--flash-glow));
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--flash-tilt)) scale(1.65);
      }
    }

    @keyframes muzzleSmoke {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--flash-tilt)) translateX(1px) scale(0.3);
      }
      40% {
        opacity: 0.48;
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--flash-tilt)) translateX(22px) scale(1.28);
      }
    }

    @keyframes droneCharge {
      0%,
      100% {
        opacity: 0.72;
        transform: scale(0.86);
      }
      50% {
        opacity: 1;
        transform: scale(1.12);
      }
    }

    @keyframes droneMuzzleBurst {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18);
      }
      24% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.22);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
      }
    }

    @keyframes robotImpactFlash {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.22);
      }
      22% {
        opacity: 0.96;
        transform: translate(-50%, -50%) scale(1.05);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.46);
      }
    }

    @keyframes robotSonicPulse {
      0% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(0.18, 0.05);
        filter: blur(0.1px) saturate(1.04);
      }
      12% {
        opacity: 0.95;
        transform: translate(-50%, -100%) scale(0.48, 0.28);
      }
      42% {
        opacity: 0.7;
        transform: translate(-50%, -100%) scale(0.9, 0.74);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(1.18, 1.18);
        filter: blur(0.38px) saturate(1.22);
      }
    }

    .robot-shadow {
      position: absolute;
      left: 50%;
      bottom: -2%;
      width: 86%;
      height: 18%;
      transform: translate3d(-50%, 0, 0);
      border-radius: 999px;
      background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 46%, rgba(0, 0, 0, 0) 82%);
      opacity: 0.58;
      pointer-events: none;
      z-index: 0;
      will-change: transform, opacity;
    }

    .robot-rig.is-crashed .robot-shadow {
      bottom: -3%;
      width: 104%;
      height: 26%;
      opacity: 0.82;
      background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.4) 52%, rgba(0, 0, 0, 0) 86%);
    }

    .hud-panel {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      z-index: 20;
      width: fit-content;
      max-width: calc(100vw - 8px);
      padding: 14px 8px 5px;
      border: 1px solid rgba(168, 225, 255, 0.24);
      border-radius: 12px 12px 0 0;
      background: rgba(5, 13, 24, 0.56);
      backdrop-filter: blur(6px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      display: none;
      align-items: center;
      justify-content: center;
      gap: 6px;
      pointer-events: none;
      --hud-player-rgb: 159 219 255;
    }

    .hud-panel.is-visible {
      display: flex;
    }

    .perf-debug-panel {
      position: absolute;
      top: max(8px, env(safe-area-inset-top));
      left: max(8px, env(safe-area-inset-left));
      z-index: 180;
      display: none;
      min-width: 144px;
      padding: 8px 10px;
      border: 1px solid rgba(128, 236, 255, 0.26);
      border-radius: 8px;
      background: rgba(3, 10, 18, 0.78);
      color: rgba(219, 248, 255, 0.92);
      font-family: "Rajdhani", "Trebuchet MS", sans-serif;
      font-size: 11px;
      line-height: 1.25;
      letter-spacing: 0.02em;
      pointer-events: none;
      white-space: pre;
    }

    .perf-debug-panel.is-visible {
      display: block;
    }

    .hud-resistance {
      position: absolute;
      left: 10px;
      right: 10px;
      top: -10px;
      height: 7px;
      border-radius: 999px;
      background: rgba(22, 44, 64, 0.9);
      border: 1px solid rgba(127, 201, 241, 0.42);
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      pointer-events: none;
    }

    .hud-resistance-fill {
      height: 100%;
      width: 100%;
      transform-origin: left center;
      transform: scaleX(1);
      background: linear-gradient(90deg, #ff4b4b 0%, #ff8a50 22%, #ffd25f 42%, #b6f46d 68%, #66f7a1 100%);
      box-shadow: 0 0 6px rgba(124, 255, 210, 0.45);
      transition: transform 90ms linear, filter 120ms ease, opacity 120ms ease;
    }

    .hud-lives {
      position: absolute;
      left: 10px;
      right: 10px;
      top: 2px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      pointer-events: none;
    }

    .hud-life {
      width: 100%;
      height: 5px;
      border-radius: 999px;
      border: 1px solid rgba(126, 200, 233, 0.28);
      background: rgba(28, 54, 76, 0.6);
      opacity: 0.32;
      transition: opacity 120ms ease, filter 120ms ease, background 120ms ease, border-color 120ms ease;
    }

    .hud-life.is-active {
      opacity: 0.98;
      border-color: rgb(var(--hud-player-rgb) / 0.62);
      background: linear-gradient(
        90deg,
        rgb(var(--hud-player-rgb) / 0.95) 0%,
        rgb(var(--hud-player-rgb) / 0.72) 100%
      );
      filter: drop-shadow(0 0 5px rgb(var(--hud-player-rgb) / 0.52));
    }

    .hud-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
    }

    .hud-chip {
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(153, 220, 255, 0.28);
      background: rgba(22, 45, 70, 0.6);
      font-size: 12px;
      line-height: 1;
      letter-spacing: 0.03em;
      white-space: nowrap;
    }

    #hudPlayer {
      display: none;
    }

    .hud-chip.is-accent {
      border-color: rgba(255, 206, 140, 0.46);
      background: rgba(80, 42, 14, 0.48);
      color: #ffe4bf;
    }

    .ui-overlay {
      position: absolute;
      inset: 0;
      z-index: 35;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(2, 8, 16, 0.24);
      backdrop-filter: blur(0.8px) saturate(1.18);
    }

    .ui-overlay.is-visible {
      display: flex;
    }

    .ui-overlay[data-context="entry-screen"] {
      position: absolute;
      inset: 0;
      overflow: hidden;
      align-items: center;
      background:
        radial-gradient(circle at top center, rgba(66, 146, 255, 0.16) 0%, rgba(66, 146, 255, 0) 34%),
        radial-gradient(circle at bottom left, rgba(255, 124, 58, 0.12) 0%, rgba(255, 124, 58, 0) 26%),
        linear-gradient(180deg, rgba(1, 5, 12, 0.36) 0%, rgba(2, 8, 16, 0.6) 100%);
      backdrop-filter: brightness(0.82);
    }

    .ui-overlay[data-context="entry-screen"]::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(4, 10, 18, 0.14) 0%, rgba(4, 10, 18, 0.02) 18%, rgba(4, 10, 18, 0.18) 100%),
        radial-gradient(circle at 78% 12%, rgba(126, 214, 255, 0.14) 0%, rgba(126, 214, 255, 0) 18%);
    }

    .ui-overlay[data-context="entry-screen"] > * {
      position: relative;
      z-index: 1;
    }

    .ui-card {
      position: relative;
      width: min(720px, 100%);
      max-height: min(92vh, 760px);
      overflow: auto;
      padding: 16px 16px 14px;
      border-radius: 14px;
      border: 1px solid rgba(156, 218, 255, 0.34);
      background: linear-gradient(180deg, rgba(11, 25, 42, 0.54) 0%, rgba(8, 19, 34, 0.58) 100%);
      box-shadow: 0 20px 54px rgba(0, 0, 0, 0.36);
    }

    .ui-title,
    .ui-message {
      padding-right: 116px;
    }

    .ui-sound-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto;
      min-width: 0;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    .ui-sound-btn[aria-pressed="true"] {
      border-color: rgba(255, 171, 122, 0.56);
      background: rgba(90, 28, 18, 0.7);
      color: #ffe6d5;
    }

    .ui-card[data-context="entry-screen"] {
      --entry-card-offset: clamp(24px, calc(1.4vh + 12px), 38px);
      isolation: isolate;
      width: min(1240px, calc(100vw - 92px));
      height: min(720px, calc(100vh - 96px));
      max-height: none;
      padding: 18px 20px 16px;
      border-radius: 20px;
      border: 1px solid rgba(140, 220, 255, 0.16);
      background:
        linear-gradient(180deg, rgba(9, 24, 45, 0.34) 0%, rgba(6, 14, 28, 0.44) 100%);
      box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 0 1px rgba(114, 197, 255, 0.06),
        0 0 46px rgba(77, 166, 255, 0.1);
      overflow: hidden;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      backdrop-filter: blur(8px) saturate(1.08);
      transform: translateY(var(--entry-card-offset));
      animation: entryHudReveal 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
    }

    .ui-card[data-context="entry-screen"]::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 22%, rgba(255, 255, 255, 0.02) 78%, rgba(255, 255, 255, 0.08) 100%),
        radial-gradient(circle at 8% 10%, rgba(104, 205, 255, 0.14) 0%, rgba(104, 205, 255, 0) 30%);
      opacity: 0.58;
      z-index: 0;
    }

    .ui-card[data-context="entry-screen"]::after {
      content: "";
      position: absolute;
      inset: -16% 32% auto -8%;
      height: 220px;
      pointer-events: none;
      background: radial-gradient(circle, rgba(109, 201, 255, 0.22) 0%, rgba(109, 201, 255, 0) 68%);
      filter: blur(26px);
      opacity: 0.56;
      z-index: 0;
      animation: entryHudGlow 8s ease-in-out infinite;
    }

    .ui-card[data-context="entry-screen"] > :not(.ui-sound-btn) {
      position: relative;
      z-index: 1;
    }

    .ui-card[data-context="entry-screen"] > .ui-sound-btn {
      position: absolute;
      z-index: 3;
    }

    .ui-overlay[data-context="pause-screen"] {
      background:
        radial-gradient(circle at 50% 44%, rgba(74, 183, 255, 0.14) 0%, rgba(74, 183, 255, 0) 28%),
        linear-gradient(180deg, rgba(1, 5, 12, 0.22) 0%, rgba(2, 8, 16, 0.46) 100%);
      backdrop-filter: blur(1.8px) saturate(1.18);
    }

    .ui-card[data-context="pause-screen"] {
      width: min(760px, calc(100vw - 40px));
      padding: 18px;
      border-radius: 18px;
      border-color: rgba(143, 223, 255, 0.42);
      background:
        linear-gradient(135deg, rgba(24, 62, 98, 0.24) 0%, rgba(8, 18, 34, 0.66) 44%, rgba(9, 17, 32, 0.76) 100%);
      box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(112, 214, 255, 0.08),
        0 0 44px rgba(88, 182, 255, 0.14);
      overflow: hidden;
      backdrop-filter: blur(12px) saturate(1.1);
    }

    .ui-card[data-context="pause-screen"]::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 34%, rgba(255, 189, 98, 0.08) 100%),
        radial-gradient(circle at 12% 0%, rgba(105, 218, 255, 0.2) 0%, rgba(105, 218, 255, 0) 34%);
      opacity: 0.78;
      z-index: 0;
    }

    .ui-card[data-context="pause-screen"] > :not(.ui-sound-btn) {
      position: relative;
      z-index: 1;
    }

    .ui-card[data-context="pause-screen"] .ui-title {
      font-size: clamp(28px, 3vw, 42px);
      color: #effbff;
      text-shadow: 0 0 18px rgba(104, 205, 255, 0.28);
    }

    .ui-card[data-context="pause-screen"] .ui-message {
      color: rgba(222, 244, 255, 0.92);
    }

    .pause-card-body {
      display: grid;
      gap: 12px;
    }

    .pause-stat-line,
    .pause-control-copy {
      border: 1px solid rgba(129, 209, 255, 0.2);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(10, 30, 54, 0.54), rgba(6, 17, 32, 0.56));
      padding: 10px 12px;
      color: #e5f7ff;
      font-size: 13px;
      line-height: 1.45;
    }

    .pause-stat-line {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      border-color: rgba(255, 191, 104, 0.36);
      color: #ffe5bb;
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .pause-audio-panel {
      display: grid;
      gap: 10px;
      border: 1px solid rgba(129, 209, 255, 0.22);
      border-radius: 14px;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 159, 67, 0.13) 0%, rgba(255, 159, 67, 0) 34%),
        linear-gradient(180deg, rgba(7, 23, 42, 0.68), rgba(5, 14, 28, 0.72));
      padding: 12px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .audio-control-panel--entry {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 10px 14px;
      padding: 9px 12px;
      border-color: rgba(255, 189, 98, 0.24);
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 159, 67, 0.14) 0%, rgba(255, 159, 67, 0) 32%),
        linear-gradient(180deg, rgba(8, 25, 44, 0.58), rgba(5, 15, 29, 0.6));
    }

    .audio-control-panel--entry .pause-section-title {
      font-size: 12px;
      color: rgba(255, 220, 174, 0.92);
    }

    .audio-control-panel--entry .pause-volume-grid {
      grid-template-columns: repeat(2, minmax(190px, 1fr));
    }

    .audio-control-panel--entry .pause-volume-row {
      padding: 6px 9px;
      gap: 5px;
    }

    .pause-section-title {
      margin: 0;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(195, 233, 255, 0.84);
    }

    .pause-volume-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .pause-volume-row {
      display: grid;
      gap: 8px;
      min-width: 0;
      border-radius: 12px;
      border: 1px solid rgba(132, 212, 255, 0.18);
      background: rgba(3, 13, 25, 0.34);
      padding: 10px;
    }

    .pause-volume-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .pause-volume-title,
    .pause-volume-value {
      font-size: 12px;
      font-weight: 800;
      color: #e8f8ff;
      white-space: nowrap;
    }

    .pause-volume-value {
      color: #ffd7a2;
      font-variant-numeric: tabular-nums;
    }

    .pause-volume-slider {
      appearance: none;
      width: 100%;
      height: 22px;
      margin: 0;
      background: transparent;
      cursor: pointer;
    }

    .pause-volume-slider::-webkit-slider-runnable-track {
      height: 6px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, rgba(255, 159, 67, 0.96), rgba(104, 226, 255, 0.96));
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 0 14px rgba(104, 226, 255, 0.16);
    }

    .pause-volume-slider::-webkit-slider-thumb {
      appearance: none;
      width: 18px;
      height: 18px;
      margin-top: -6px;
      border-radius: 50%;
      border: 2px solid rgba(255, 244, 224, 0.96);
      background: linear-gradient(180deg, #ffbb72, #ff8128);
      box-shadow:
        0 0 0 4px rgba(255, 159, 67, 0.16),
        0 6px 16px rgba(0, 0, 0, 0.34);
    }

    .pause-volume-slider::-moz-range-track {
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255, 159, 67, 0.96), rgba(104, 226, 255, 0.96));
    }

    .pause-volume-slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255, 244, 224, 0.96);
      background: #ff9438;
    }

    @keyframes entryHudReveal {
      0% {
        opacity: 0;
        transform: translateY(calc(var(--entry-card-offset) + 18px)) scale(0.985);
      }
      100% {
        opacity: 1;
        transform: translateY(var(--entry-card-offset)) scale(1);
      }
    }

    @keyframes entryHudGlow {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.72;
      }
      50% {
        transform: translate3d(22px, 8px, 0) scale(1.08);
        opacity: 0.94;
      }
    }

    @keyframes entryModuleReveal {
      0% {
        opacity: 0;
        transform: translateY(14px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes entryButtonGlow {
      0%, 100% {
        box-shadow:
          0 8px 22px rgba(255, 159, 67, 0.35),
          0 0 18px rgba(255, 145, 64, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.38);
      }
      50% {
        box-shadow:
          0 10px 26px rgba(255, 159, 67, 0.42),
          0 0 26px rgba(255, 145, 64, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.42);
      }
    }

    .ui-overlay[data-context="entry-screen"] .ui-title {
      margin-bottom: 8px;
      font-size: clamp(36px, 3.2vw, 48px);
      letter-spacing: 0.04em;
      color: #eef9ff;
      text-shadow:
        0 10px 24px rgba(4, 14, 28, 0.34),
        0 0 24px rgba(98, 188, 255, 0.12);
    }

    .ui-overlay[data-context="entry-screen"] .ui-message {
      max-width: none;
      font-size: 16px;
      line-height: 1.45;
      color: rgba(224, 244, 255, 0.9);
    }

    .ui-overlay[data-context="entry-screen"] .ui-body {
      margin-top: 14px;
      gap: 12px;
      min-height: 0;
      height: auto;
      overflow: hidden;
    }

    .ui-title {
      margin: 0 0 6px;
      font-size: clamp(20px, 3vw, 28px);
      line-height: 1.1;
      letter-spacing: 0.02em;
    }

    .ui-message {
      margin: 0;
      font-size: 14px;
      opacity: 0.9;
    }

    .ui-body {
      margin-top: 14px;
      display: grid;
      gap: 12px;
      min-height: 0;
    }

    .ui-actions:empty {
      display: none;
      margin-top: 0;
    }

    .ui-actions {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .ui-btn {
      appearance: none;
      border: 1px solid rgba(159, 219, 255, 0.38);
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #dff5ff;
      background: rgba(21, 46, 71, 0.62);
      cursor: pointer;
      transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        filter 160ms ease;
    }

    .ui-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(191, 234, 255, 0.64);
      background: rgba(31, 64, 96, 0.72);
      box-shadow: 0 0 18px rgba(110, 202, 255, 0.12);
    }

    .ui-btn:active {
      transform: translateY(0);
    }

    .ui-btn.is-primary {
      border-color: rgba(255, 207, 145, 0.55);
      background: linear-gradient(180deg, rgba(194, 110, 24, 0.88) 0%, rgba(146, 76, 14, 0.94) 100%);
      color: #fff4df;
    }

    .player-count-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      align-items: center;
    }

    .player-count-btn {
      --player-btn-rgb: 159 219 255;
      min-width: 52px;
      justify-content: center;
      border-color: rgb(var(--player-btn-rgb) / 0.56);
      background:
        linear-gradient(180deg, rgb(var(--player-btn-rgb) / 0.34) 0%, rgb(var(--player-btn-rgb) / 0.2) 100%);
      color: #f5fbff;
      text-shadow: 0 0 10px rgb(var(--player-btn-rgb) / 0.5);
    }

    .player-count-btn.is-active {
      border-color: rgb(var(--player-btn-rgb) / 0.88);
      background:
        linear-gradient(180deg, rgb(var(--player-btn-rgb) / 0.56) 0%, rgb(var(--player-btn-rgb) / 0.34) 100%);
      box-shadow:
        inset 0 0 0 1px rgb(var(--player-btn-rgb) / 0.36),
        0 0 12px rgb(var(--player-btn-rgb) / 0.36);
      color: #ffffff;
    }

    .player-count-btn:hover {
      border-color: rgb(var(--player-btn-rgb) / 0.76);
      background:
        linear-gradient(180deg, rgb(var(--player-btn-rgb) / 0.44) 0%, rgb(var(--player-btn-rgb) / 0.28) 100%);
    }

    .score-player-label {
      --player-label-rgb: 159 219 255;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      color: rgb(var(--player-label-rgb) / 0.98);
      text-shadow: 0 0 8px rgb(var(--player-label-rgb) / 0.28);
    }

    .score-player-label::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgb(var(--player-label-rgb) / 0.95);
      box-shadow: 0 0 8px rgb(var(--player-label-rgb) / 0.7);
    }

    .score-block {
      display: grid;
      gap: 6px;
      padding: 10px 12px;
      border: 1px solid rgba(145, 215, 255, 0.25);
      border-radius: 10px;
      background: rgba(11, 29, 47, 0.3);
    }

    .score-block h3 {
      margin: 0;
      font-size: 14px;
      letter-spacing: 0.03em;
      color: #ccefff;
      text-transform: uppercase;
    }

    .score-table-wrap {
      width: 100%;
      overflow: auto;
    }

    .score-line {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 13px;
      opacity: 0.95;
    }

    .score-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .score-table th,
    .score-table td {
      padding: 6px 7px;
      border-bottom: 1px solid rgba(136, 206, 250, 0.2);
      text-align: left;
    }

    .score-table th {
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #c3e9ff;
      opacity: 0.9;
    }

    .score-table tr:last-child td {
      border-bottom: 0;
    }

    .score-table td.rank-cell {
      width: 34px;
      color: #ffdca8;
      font-weight: 700;
    }

    .score-table tr.is-empty td {
      opacity: 0.56;
    }

    .score-empty-label {
      color: rgba(211, 238, 255, 0.78);
      font-style: italic;
    }

    .drone-calibration-panel {
      position: absolute;
      inset: 0;
      z-index: 34;
      display: grid;
      place-items: center;
      padding: 14px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 170ms ease;
      background: rgba(4, 10, 18, 0.74);
      backdrop-filter: blur(2px);
    }

    .drone-calibration-panel.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .drone-calibration-card {
      width: min(960px, 96vw);
      max-height: min(92vh, 980px);
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 10px;
      border-radius: 12px;
      border: 1px solid rgba(143, 223, 255, 0.34);
      background: rgba(8, 20, 36, 0.95);
      box-shadow: 0 18px 52px rgba(0, 0, 0, 0.52);
      padding: 12px;
      overflow: hidden;
    }

    .drone-calibration-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .drone-calibration-title {
      margin: 0;
      font-size: clamp(14px, 2.1vw, 18px);
      letter-spacing: 0.02em;
      color: #d7f3ff;
    }

    .drone-calibration-meta {
      margin: 2px 0 0 0;
      font-size: 12px;
      opacity: 0.9;
    }

    .drone-calibration-stage-wrap {
      position: relative;
      border: 1px solid rgba(140, 213, 255, 0.3);
      border-radius: 10px;
      background:
        radial-gradient(circle at 50% 20%, rgba(31, 70, 108, 0.28) 0%, rgba(12, 26, 45, 0.2) 40%, rgba(9, 20, 35, 0.36) 100%),
        rgba(8, 20, 36, 0.88);
      min-height: clamp(260px, 44vh, 420px);
      overflow: auto;
      display: grid;
      place-items: center;
      padding: 12px;
    }

    .drone-calibration-stage {
      position: relative;
      flex: none;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .drone-calibration-preview {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      pointer-events: none;
      filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.42));
    }

    .drone-calibration-points {
      position: absolute;
      inset: 0;
    }

    .drone-calibration-point {
      position: absolute;
      width: 24px;
      height: 24px;
      border: 2px solid rgba(156, 245, 255, 0.96);
      border-radius: 50%;
      background: rgba(22, 132, 160, 0.38);
      color: #effcff;
      transform: translate(-50%, -50%);
      cursor: grab;
      touch-action: none;
      box-shadow: 0 0 0 2px rgba(6, 18, 30, 0.74), 0 0 14px rgba(94, 222, 255, 0.42);
      font: 700 11px/1 "Orbitron", "Rajdhani", "Trebuchet MS", sans-serif;
      display: grid;
      place-items: center;
      pointer-events: auto;
    }

    .drone-calibration-point::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(234, 255, 255, 0.96);
      transform: translate(-50%, -50%);
    }

    .drone-calibration-point.is-dragging {
      cursor: grabbing;
      background: rgba(34, 160, 193, 0.52);
      box-shadow: 0 0 0 2px rgba(6, 18, 30, 0.74), 0 0 20px rgba(94, 222, 255, 0.66);
    }

    .drone-calibration-footer {
      display: grid;
      gap: 8px;
    }

    .drone-calibration-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .drone-calibration-output {
      margin: 0;
      padding: 8px 10px;
      border-radius: 9px;
      border: 1px solid rgba(138, 215, 255, 0.25);
      background: rgba(10, 25, 43, 0.72);
      color: #cef0ff;
      font: 500 12px/1.45 "JetBrains Mono", "Consolas", "SFMono-Regular", monospace;
      overflow: auto;
      max-height: 150px;
      white-space: pre;
    }

    .entry-shell {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 9px;
      min-height: 0;
      height: 100%;
      align-content: stretch;
      overflow: hidden;
    }

    .entry-main {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
      min-height: 0;
      align-content: stretch;
      overflow: hidden;
    }

    .entry-form-panel,
    .entry-scoreboard {
      position: relative;
      isolation: isolate;
      display: grid;
      align-content: start;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(10, 24, 44, 0.56) 0%, rgba(6, 15, 28, 0.62) 100%);
      border: 1px solid rgba(142, 219, 255, 0.2);
      box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(125, 210, 255, 0.04);
      min-height: 0;
      backdrop-filter: blur(8px) saturate(1.08);
      animation: entryModuleReveal 460ms ease both;
    }

    .entry-form-panel::before,
    .entry-scoreboard::before,
    .entry-form-panel::after,
    .entry-scoreboard::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border-radius: inherit;
      z-index: 0;
    }

    .entry-form-panel::before,
    .entry-scoreboard::before {
      inset: 1px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 22%, rgba(255, 255, 255, 0.02) 100%),
        radial-gradient(circle at top left, rgba(112, 212, 255, 0.14) 0%, rgba(112, 212, 255, 0) 34%);
    }

    .entry-form-panel::after,
    .entry-scoreboard::after {
      inset: auto 16px -12px 16px;
      height: 32px;
      background: radial-gradient(circle, rgba(83, 181, 255, 0.14) 0%, rgba(83, 181, 255, 0) 72%);
      filter: blur(18px);
      opacity: 0.78;
    }

    .entry-form-panel > *,
    .entry-scoreboard > * {
      position: relative;
      z-index: 1;
    }

    .entry-form-panel {
      --entry-selected-rgb: 255 159 67;
      grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
      gap: 10px 16px;
      align-items: stretch;
      border-color: rgb(var(--entry-selected-rgb) / 0.18);
      background:
        linear-gradient(180deg, rgba(10, 26, 44, 0.5) 0%, rgba(5, 14, 27, 0.64) 100%),
        linear-gradient(135deg, rgb(var(--entry-selected-rgb) / 0.12) 0%, rgb(var(--entry-selected-rgb) / 0.03) 46%, rgba(112, 205, 255, 0.04) 100%);
      box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.24),
        0 0 30px rgb(var(--entry-selected-rgb) / 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgb(var(--entry-selected-rgb) / 0.06);
      animation-delay: 70ms;
    }

    .entry-form-head {
      display: grid;
      gap: 6px;
      align-content: start;
      align-self: stretch;
      justify-items: start;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgb(var(--entry-selected-rgb) / 0.22);
      background:
        linear-gradient(180deg, rgb(var(--entry-selected-rgb) / 0.14) 0%, rgba(10, 24, 42, 0.32) 28%, rgba(6, 19, 33, 0.38) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(111, 203, 255, 0.04);
    }

    .entry-panel-title {
      margin: 0;
      font-size: 16px;
      letter-spacing: 0.06em;
      text-align: left;
      text-transform: uppercase;
      color: #f3fbff;
      text-shadow: 0 0 16px rgb(var(--entry-selected-rgb) / 0.24);
    }

    .entry-panel-copy {
      margin: 0;
      font-size: 12px;
      line-height: 1.42;
      text-align: left;
      color: rgba(220, 239, 250, 0.84);
    }

    .entry-field {
      display: grid;
      gap: 6px;
    }

    .entry-field-hint,
    .entry-form-note {
      margin: 0;
      font-size: 11px;
      line-height: 1.4;
      text-align: center;
      color: rgba(214, 239, 250, 0.82);
    }

    .entry-color-current {
      --entry-selected-rgb: 255 159 67;
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgb(var(--entry-selected-rgb) / 0.22);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.02) 100%),
        linear-gradient(135deg, rgb(var(--entry-selected-rgb) / 0.22) 0%, rgb(var(--entry-selected-rgb) / 0.08) 100%),
        rgba(255, 255, 255, 0.04);
      color: #f6fbff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.03em;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -8px 14px rgba(255, 255, 255, 0.03),
        0 0 18px rgb(var(--entry-selected-rgb) / 0.12);
      backdrop-filter: blur(8px) saturate(1.05);
    }

    .entry-color-current::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgb(var(--entry-selected-rgb) / 0.96);
      box-shadow: 0 0 10px rgb(var(--entry-selected-rgb) / 0.56);
    }

    .entry-scoreboard {
      grid-template-rows: auto auto auto auto minmax(0, 1fr);
      gap: 12px;
      padding-top: 16px;
      padding-bottom: 14px;
      background:
        linear-gradient(180deg, rgba(10, 23, 42, 0.52) 0%, rgba(6, 15, 28, 0.64) 100%);
      box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(112, 205, 255, 0.03);
      overflow: hidden;
      animation-delay: 150ms;
    }

    .entry-footer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1px;
      flex: 0 0 auto;
      min-height: 0;
      padding: 0;
    }

    .entry-studio-logo {
      width: 54px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
      user-select: none;
      pointer-events: auto;
      cursor: pointer;
    }

    .entry-brandmark {
      text-align: center;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(221, 242, 255, 0.62);
      text-shadow: 0 0 16px rgba(103, 181, 255, 0.22);
      pointer-events: auto;
      user-select: none;
      cursor: pointer;
    }

    .entry-admin-panel {
      display: grid;
      gap: 12px;
    }

    .entry-admin-copy {
      margin: 0;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(220, 239, 250, 0.84);
    }

    .entry-admin-row {
      display: grid;
      gap: 6px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(170, 226, 255, 0.18);
      background: linear-gradient(180deg, rgba(13, 29, 47, 0.82), rgba(8, 18, 31, 0.92));
    }

    .entry-admin-row strong {
      font-size: 12px;
      letter-spacing: 0.05em;
      color: rgba(244, 251, 255, 0.96);
    }

    .entry-admin-row span {
      font-size: 11px;
      color: rgba(213, 236, 250, 0.76);
    }

    .entry-admin-row input,
    .entry-admin-password {
      width: 100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(170, 226, 255, 0.24);
      background: rgba(6, 18, 30, 0.82);
      color: #f6fbff;
      font: inherit;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .entry-admin-row input:focus,
    .entry-admin-password:focus {
      border-color: rgba(103, 181, 255, 0.52);
      box-shadow: 0 0 0 2px rgba(32, 214, 255, 0.12);
    }

    .entry-admin-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .entry-admin-status {
      min-height: 18px;
      font-size: 11px;
      color: rgba(213, 236, 250, 0.82);
    }

    .entry-scoreboard h3 {
      font-size: 20px;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
      color: #f5fbff;
      text-shadow: 0 0 14px rgba(108, 205, 255, 0.18);
    }

    .entry-scoreboard-head {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      min-width: 0;
    }

    .entry-scoreboard-kicker,
    .entry-scoreboard-mode {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.1em;
      line-height: 1;
      text-transform: uppercase;
    }

    .entry-scoreboard-kicker {
      color: rgba(226, 246, 255, 0.9);
      text-shadow: 0 0 14px rgba(93, 205, 255, 0.18);
    }

    .entry-scoreboard-mode {
      display: none;
    }

    .entry-scoreboard-copy {
      margin: 0;
      font-size: 12px;
      line-height: 1.35;
      text-align: left;
      color: rgba(217, 239, 250, 0.84);
    }

    .entry-info-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .entry-info-item {
      position: relative;
      overflow: hidden;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 2px;
      min-height: 44px;
      padding: 7px 10px;
      border-radius: 12px;
      border: 1px solid rgba(170, 226, 255, 0.24);
      background:
        linear-gradient(135deg, rgba(24, 66, 112, 0.68) 0%, rgba(10, 28, 49, 0.58) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 24px rgba(3, 12, 24, 0.18);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.38;
      color: rgba(239, 248, 255, 0.94);
      text-align: center;
      text-shadow: 0 1px 10px rgba(4, 12, 22, 0.16);
      animation: entryModuleReveal 480ms ease both;
    }

    .entry-info-item:nth-child(1) {
      border-color: rgba(102, 215, 255, 0.3);
      background:
        linear-gradient(135deg, rgba(23, 92, 146, 0.76) 0%, rgba(9, 34, 58, 0.6) 100%);
    }

    .entry-info-item:nth-child(2) {
      border-color: rgba(255, 178, 102, 0.32);
      background:
        linear-gradient(135deg, rgba(126, 72, 18, 0.78) 0%, rgba(45, 22, 9, 0.6) 100%);
    }

    .entry-info-item:nth-child(3) {
      border-color: rgba(110, 255, 185, 0.28);
      background:
        linear-gradient(135deg, rgba(21, 105, 82, 0.74) 0%, rgba(10, 35, 30, 0.58) 100%);
    }

    .entry-info-item-title {
      color: #ffffff;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.1em;
      line-height: 1;
      text-transform: uppercase;
    }

    .entry-info-item-copy {
      display: block;
      max-width: 24ch;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.18;
      color: rgba(240, 248, 255, 0.92);
    }

    .entry-scoreboard .score-table-wrap {
      min-height: 0;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid rgba(135, 214, 255, 0.12);
      background:
        linear-gradient(180deg, rgba(8, 21, 38, 0.34) 0%, rgba(6, 16, 30, 0.26) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 24px rgba(0, 0, 0, 0.12);
    }

    .entry-scoreboard .score-table {
      font-size: 14px;
      border-collapse: separate;
      border-spacing: 0;
    }

    .entry-scoreboard .score-table th,
    .entry-scoreboard .score-table td {
      padding: 5px 8px;
    }

    .entry-scoreboard .score-table th {
      font-size: 12px;
      color: rgba(203, 234, 249, 0.84);
      background: rgba(12, 29, 49, 0.26);
      border-bottom: 1px solid rgba(123, 205, 245, 0.18);
    }

    .entry-scoreboard .score-table td.rank-cell {
      width: 28px;
    }

    .entry-scoreboard .score-player-label {
      gap: 5px;
      font-size: 14px;
    }

    .entry-scoreboard .score-player-label::before {
      width: 7px;
      height: 7px;
    }

    .entry-scoreboard .score-empty-label {
      font-size: 13px;
    }

    .entry-scoreboard .score-table tbody tr {
      transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .entry-scoreboard .score-table tbody tr:hover {
      background: rgba(72, 167, 255, 0.08);
      box-shadow: inset 0 0 0 1px rgba(104, 202, 255, 0.12);
    }

    .entry-scoreboard .score-table tbody td {
      border-bottom: 1px solid rgba(122, 205, 245, 0.14);
      color: rgba(231, 245, 255, 0.94);
    }

    .entry-form-note {
      margin-top: 2px;
      color: rgba(220, 240, 250, 0.86);
    }

    .entry-last-result {
      --entry-last-result-rgb: 159 219 255;
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgb(var(--entry-last-result-rgb) / 0.16);
      background:
        linear-gradient(180deg, rgba(8, 24, 39, 0.42) 0%, rgba(6, 18, 31, 0.3) 100%);
      color: rgba(218, 241, 255, 0.84);
      font-size: 11px;
      line-height: 1.35;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 20px rgba(0, 0, 0, 0.12);
    }

    .entry-last-result::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgb(var(--entry-last-result-rgb) / 0.96);
      box-shadow: 0 0 10px rgb(var(--entry-last-result-rgb) / 0.4);
      flex: 0 0 auto;
    }

    .entry-last-result strong {
      color: #f5fbff;
      font-size: 11px;
      letter-spacing: 0.03em;
    }

    .entry-last-result-status {
      color: rgb(var(--entry-last-result-rgb) / 0.92);
      font-weight: 700;
    }

    .entry-last-result.is-crashed .entry-last-result-status {
      color: #ffbf78;
    }

    .entry-scoreboard .score-table tr:last-child td {
      border-bottom: 0;
    }

    .entry-scoreboard .score-table tbody tr {
      height: 28px;
    }

    .entry-scoreboard .score-table tbody {
      vertical-align: middle;
    }

    .entry-scoreboard {
      overflow: hidden;
    }

    /* Entry form styles to match game UI */
    .entry-form {
      display: grid;
      grid-template-columns: minmax(270px, 1fr) minmax(300px, auto) minmax(180px, auto);
      gap: 8px 14px;
      align-items: end;
      width: 100%;
      margin: 0;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      color: var(--text);
      font-size: 14px;
    }

    .entry-color-actions {
      display: grid;
      grid-template-columns: 1fr;
      justify-content: start;
      justify-items: start;
      width: 100%;
      max-width: 100%;
      gap: 10px;
      align-items: center;
    }

    .entry-color-actions .color-row {
      min-width: 0;
      width: fit-content;
      max-width: 100%;
      margin: 0;
      flex-wrap: nowrap;
    }

    .entry-form > .entry-form-note {
      grid-column: 1 / -1;
      margin-top: 0;
    }

    .entry-start-field {
      display: grid;
      align-content: end;
      gap: 6px;
      min-width: 0;
      padding-right: 4px;
    }

    .entry-start-label {
      display: block;
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      line-height: 1.1;
      text-transform: uppercase;
      color: rgba(255, 215, 162, 0.9);
      text-shadow: 0 0 12px rgba(255, 159, 67, 0.18);
    }

    .entry-form label {
      display: block;
      font-weight: 700;
      font-size: 12px;
      opacity: 0.98;
      margin-bottom: 4px;
      color: rgba(185, 228, 255, 0.94);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-shadow: 0 0 10px rgba(86, 188, 255, 0.18);
    }

    .entry-form input[type="text"],
    .entry-form select {
      width: 100%;
      min-height: 50px;
      padding: 11px 14px;
      border-radius: 14px;
      border: 1px solid rgb(var(--entry-selected-rgb) / 0.16);
      background:
        linear-gradient(180deg, rgba(7, 17, 32, 0.72) 0%, rgba(4, 12, 22, 0.58) 100%);
      color: #eefaff;
      outline: none;
      font-size: 15px;
      font-family: "Orbitron", "Rajdhani", "Trebuchet MS", sans-serif;
      box-shadow: 
        0 8px 18px rgba(2, 8, 18, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -10px 16px rgba(0, 0, 0, 0.12);
      transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background 200ms ease;
      backdrop-filter: blur(6px) saturate(1.05);
    }

    .entry-form input[type="text"]:focus,
    .entry-form select:focus {
      border-color: rgb(var(--entry-selected-rgb) / 0.48);
      background: linear-gradient(180deg, rgba(8, 20, 36, 0.9), rgba(5, 12, 22, 0.82));
      box-shadow: 
        0 0 0 2px rgb(var(--entry-selected-rgb) / 0.12),
        0 10px 20px rgb(var(--entry-selected-rgb) / 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transform: translateY(-1px);
    }

    .entry-form input[type="text"]::placeholder {
      color: rgba(217,243,255,0.45);
    }

    .entry-form .color-row {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: flex-start;
      padding: 8px 10px;
      border-radius: 18px;
      border: 1px solid rgb(var(--entry-selected-rgb) / 0.16);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%),
        linear-gradient(180deg, rgba(10, 26, 44, 0.54) 0%, rgba(6, 18, 31, 0.32) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -12px 20px rgba(0, 0, 0, 0.14),
        0 0 0 1px rgb(var(--entry-selected-rgb) / 0.04);
      backdrop-filter: blur(7px) saturate(1.08);
    }

    .color-swatch {
      --swatch-rgb: 159 219 255;
      width: 42px;
      height: 42px;
      border-radius: 15px;
      border: 1px solid rgb(var(--swatch-rgb) / 0.28);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.01) 100%),
        linear-gradient(135deg, rgb(var(--swatch-rgb) / 0.42) 0%, rgb(var(--swatch-rgb) / 0.16) 58%, rgba(255, 255, 255, 0.03) 100%),
        rgba(255, 255, 255, 0.03);
      box-shadow: 
        0 8px 18px rgba(2, 8, 18, 0.22),
        0 0 16px rgb(var(--swatch-rgb) / 0.1),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -8px 12px rgba(255,255,255,0.02);
      cursor: pointer;
      display: inline-block;
      position: relative;
      overflow: hidden;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
      filter: brightness(1) saturate(1.12);
      backdrop-filter: blur(6px) saturate(1.15);
    }

    .color-swatch::before {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 24px;
      background: radial-gradient(circle, rgb(var(--swatch-rgb) / 0.4) 0%, rgb(var(--swatch-rgb) / 0) 68%);
      opacity: 0;
      filter: blur(8px);
      transition: opacity 180ms ease, transform 180ms ease;
      pointer-events: none;
    }

    .color-swatch::after {
      content: "";
      position: absolute;
      inset: 7px;
      border-radius: 12px;
      border: 1px solid rgb(var(--swatch-rgb) / 0.46);
      background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.16) 18%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 50% 54%, rgb(var(--swatch-rgb) / 0.96) 0%, rgb(var(--swatch-rgb) / 0.84) 46%, rgb(var(--swatch-rgb) / 0.56) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 12px rgb(var(--swatch-rgb) / 0.24);
      opacity: 0.98;
    }

    .color-swatch:hover {
      border-color: rgb(var(--swatch-rgb) / 0.62);
      transform: translateY(-2px) scale(1.08);
      filter: brightness(1.08) saturate(1.2);
      box-shadow: 
        0 10px 22px rgba(2,8,18,0.24),
        0 0 14px rgb(var(--swatch-rgb)),
        0 0 28px rgb(var(--swatch-rgb) / 0.5),
        inset 0 1px 0 rgba(255,255,255,0.26),
        inset 0 -10px 14px rgba(255,255,255,0.04);
    }

    .color-swatch:hover::before {
      opacity: 0.92;
      transform: scale(1.06);
    }

    .color-swatch:hover::after {
      border-color: rgb(var(--swatch-rgb) / 0.52);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 12px rgb(var(--swatch-rgb) / 0.22);
    }

    @keyframes entrySwatchPulse {
      0%, 100% {
        transform: scale(1);
        box-shadow:
          0 0 0 2px rgba(255,255,255,0.26),
          0 0 0 1px rgb(var(--swatch-rgb)),
          0 0 24px rgb(var(--swatch-rgb) / 0.34),
          0 10px 24px rgba(2,8,18,0.24),
          inset 0 1px 0 rgba(255,255,255,0.3),
          inset 0 -10px 16px rgba(255,255,255,0.05);
      }
      50% {
        transform: scale(1.08);
        box-shadow:
          0 0 0 2px rgba(255,255,255,0.34),
          0 0 0 1px rgb(var(--swatch-rgb)),
          0 0 16px rgb(var(--swatch-rgb)),
          0 0 32px rgb(var(--swatch-rgb) / 0.6),
          0 12px 28px rgba(2,8,18,0.28),
          inset 0 1px 0 rgba(255,255,255,0.34),
          inset 0 -10px 16px rgba(255,255,255,0.06);
      }
    }

    .color-swatch.is-selected {
      border-color: rgb(var(--swatch-rgb));
      border-width: 1px;
      filter: brightness(1.1) saturate(1.24);
      animation: entrySwatchPulse 1.9s ease-in-out infinite;
      box-shadow: 
        0 0 0 2px rgba(255,255,255,0.3),
        0 0 0 1px rgb(var(--swatch-rgb)),
        0 0 14px rgb(var(--swatch-rgb)),
        0 0 28px rgb(var(--swatch-rgb) / 0.5),
        0 10px 24px rgba(2,8,18,0.26),
        inset 0 1px 0 rgba(255,255,255,0.34),
        inset 0 -10px 16px rgba(255,255,255,0.05);
    }

    .color-swatch.is-selected::before {
      opacity: 1;
    }

    .color-swatch.is-selected::after {
      border-color: rgb(var(--swatch-rgb) / 0.64);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 0 18px rgb(var(--swatch-rgb) / 0.4);
    }

    .color-swatch.is-selected::after {
      border-color: rgba(255, 255, 255, 0.66);
    }

    .entry-form .ui-btn.is-primary {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      min-height: 50px;
      padding: 11px 16px;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffb45d 0%, #ff8c2a 58%, #ff7814 100%);
      color: #07111a;
      font-weight: 900;
      font-size: 16px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow:
        0 8px 22px rgba(255,159,67,0.35),
        0 0 20px rgba(255, 147, 53, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.4);
      border: 1px solid rgba(255, 216, 164, 0.58);
      transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
      animation: entryButtonGlow 2.8s ease-in-out infinite;
    }

    .entry-form .ui-btn.is-primary:hover {
      transform: translateY(-2px);
      filter: brightness(1.03);
      box-shadow:
        0 12px 26px rgba(255,159,67,0.42),
        0 0 28px rgba(255, 147, 53, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.46);
    }

    @media (max-width: 860px) {
      html,
      body {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
      }

      .game-shell {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
      }

      .ui-overlay[data-context="entry-screen"] {
        align-items: stretch;
        overflow: hidden;
        padding: 14px;
      }

      .ui-overlay[data-context="entry-screen"] .ui-body {
        overflow: hidden;
      }

      .ui-card[data-context="entry-screen"] {
        --entry-card-offset: 0px;
        padding: 16px 14px 14px;
        border-radius: 20px;
        width: min(920px, calc(100vw - 28px));
        height: calc(100vh - 28px);
        height: calc(100dvh - 28px);
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
        overflow: hidden;
        transform: translateY(0);
        grid-template-rows: auto auto auto;
      }

      .entry-shell,
      .entry-main {
        height: 100%;
        overflow: hidden;
      }

      .entry-shell,
      .entry-main,
      .entry-scoreboard {
        min-height: 0;
      }

      .entry-scoreboard {
        overflow: visible;
      }

      .entry-scoreboard .score-table-wrap {
        max-height: 210px;
        overflow: auto;
      }

      .entry-form-panel {
        grid-template-columns: 1fr;
      }

      .entry-form {
        grid-template-columns: 1fr;
      }

      .entry-color-actions {
        grid-template-columns: 1fr;
        display: grid;
        width: 100%;
      }

      .entry-color-actions .color-row,
      .entry-form .ui-btn.is-primary {
        width: 100%;
      }

      .entry-info-list {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      html,
      body,
      .game-shell {
        width: 100%;
        max-width: 100%;
      }

      body {
        overflow-x: hidden;
      }

      .ui-overlay {
        padding: 14px;
      }

      .ui-overlay[data-context="entry-screen"] {
        padding: 10px 10px max(10px, env(safe-area-inset-bottom));
      }

      .ui-title,
      .ui-message {
        padding-right: 88px;
      }

      .ui-sound-btn {
        top: 12px;
        right: 12px;
        min-width: 0;
        padding: 6px 10px;
        font-size: 11px;
      }

      .ui-card[data-context="pause-screen"] {
        width: calc(100vw - 28px);
        padding: 14px;
        border-radius: 16px;
      }

      .pause-volume-grid {
        grid-template-columns: 1fr;
      }

      .ui-card[data-context="entry-screen"] {
        padding: 14px 12px 12px;
        border-radius: 18px;
        width: calc(100vw - 20px);
        height: auto;
        max-height: calc(100vh - 56px);
        max-height: calc(100dvh - 56px);
        transform: translateY(0);
      }

      .color-swatch {
        width: 40px;
        height: 40px;
      }

      .entry-form-panel,
      .entry-scoreboard {
        padding: 14px;
        border-radius: 16px;
      }

      .entry-studio-logo {
        width: 55px;
      }

      .entry-scoreboard .score-table th,
      .entry-scoreboard .score-table td {
        padding: 8px 6px;
        font-size: 12px;
      }
    }


    .control-buttons-layer {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      width: 100%;
      height: auto;
      display: none;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      gap: 0;
      pointer-events: none;
      z-index: 120;
      padding: 0 20px;
    }

    .control-button {
      width: 90px;
      pointer-events: auto;
      height: 90px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transition: transform 80ms ease-out, box-shadow 80ms ease-out;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 18px;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
      background: radial-gradient(circle at 30% 30%, rgba(255, 159, 67, 0.6) 0%, rgba(255, 100, 40, 0.4) 50%, rgba(100, 50, 0, 0.3) 100%);
      box-shadow: 0 0 30px rgba(255, 159, 67, 0.4), inset 0 0 20px rgba(255, 200, 100, 0.2);
      color: #d9f3ff;
      text-shadow: 0 0 10px rgba(255, 159, 67, 0.8);
      flex-shrink: 0;
    }

    .control-button:active,
    .control-button.is-pressed {
      transform: scale(0.95);
      box-shadow: 0 0 50px rgba(255, 159, 67, 0.8), inset 0 0 30px rgba(255, 200, 100, 0.4);
    }

    .mobile-touch-pad {
      display: none;
    }

    .game-shell.is-menu-screen .control-buttons-layer {
      display: none;
    }

    @media (max-width: 820px) {
      .arena {
        bottom: var(--mobile-control-height);
        height: auto;
      }

      .hud-panel {
        bottom: calc(var(--mobile-control-height) + 4px);
        transform: translateX(-50%) scale(0.78);
        transform-origin: 50% 100%;
        max-width: calc(100vw - 14px);
      }

      .control-buttons-layer {
        display: flex;
        bottom: 0;
        height: calc(var(--mobile-control-height) + env(safe-area-inset-bottom));
        padding: 0 10px env(safe-area-inset-bottom);
        align-items: stretch;
        justify-content: stretch;
        pointer-events: auto;
        overflow: hidden;
        isolation: isolate;
        background: linear-gradient(180deg, rgba(9, 20, 34, 0.94) 0%, rgba(6, 12, 20, 0.98) 100%);
        border-top: 1px solid rgba(110, 190, 220, 0.28);
        border-radius: 18px 18px 0 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        -webkit-tap-highlight-color: transparent;
      }

      .control-buttons-layer::before {
        content: none;
      }

      .control-buttons-layer::after {
        content: none;
      }

      .control-button {
        display: none;
      }

      .mobile-touch-pad {
        position: absolute;
        display: grid;
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: auto;
        min-height: 100%;
        padding: 0;
        place-items: center;
        overflow: hidden;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        color: #d9f3ff;
        text-align: center;
        cursor: grab;
        background: transparent;
      }

      .mobile-touch-pad::before,
      .mobile-touch-pad::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .mobile-touch-pad::before {
        content: none;
      }

      .mobile-touch-pad::after {
        content: none;
      }

      .mobile-touch-pad.is-active {
        cursor: grabbing;
      }

      .mobile-touch-indicator {
        display: none;
        --pad-x: 0px;
        --pad-y: 0px;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 2;
        width: 132px;
        height: 132px;
        border-radius: 50%;
        transform: translate(calc(-50% + var(--pad-x)), calc(-50% + var(--pad-y))) scale(0.58);
        opacity: 0;
        pointer-events: none;
        background:
          radial-gradient(circle, rgba(131, 244, 255, 0.34) 0%, rgba(83, 230, 255, 0.2) 30%, rgba(255, 176, 76, 0.08) 58%, rgba(83, 230, 255, 0) 74%);
        box-shadow: none;
        transition: opacity 90ms ease, transform 90ms ease;
      }

      .mobile-touch-pad.is-active .mobile-touch-indicator {
        opacity: 1;
        transform: translate(calc(-50% + var(--pad-x)), calc(-50% + var(--pad-y))) scale(1);
      }

      .mobile-touch-pad.is-left,
      .mobile-touch-pad.is-right,
      .mobile-touch-pad.is-up,
      .mobile-touch-pad.is-down {
        background: transparent;
      }

      .drone-smoke-trail,
      .robot-reflection,
      .robot-impact-flash,
      .ground-glow {
        display: none;
      }

      .drone-target,
      .projectile,
      .projectile.enemy,
      .robot {
        filter: none !important;
      }

      .muzzle-halo,
      .muzzle-charge,
      .muzzle-shock,
      .muzzle-smoke,
      .robot-sonic-wave,
      .drone-muzzle,
      .robot-shadow {
        display: none;
      }

      :root {
        --robot-h: clamp(84px, 17.4vh, 112px) !important;
        --robot-w: clamp(52px, 10.8vh, 70px) !important;
        --hud-clearance: clamp(30px, 4.6vh, 42px) !important;
      }
    }

    @media (max-width: 430px) {
      :root {
        --mobile-control-height: clamp(102px, 12.8vh, 118px) !important;
      }

      .hud-panel {
        bottom: calc(var(--mobile-control-height) + env(safe-area-inset-bottom) + 2px);
        transform: translateX(-50%) scale(0.72);
        gap: 4px;
        max-width: calc(100vw - 4px);
      }

      .hud-row {
        gap: 4px;
      }

      .hud-chip {
        padding: 4px 6px;
        font-size: 11px;
      }
    }

    @media (max-width: 520px) {
      .ui-overlay[data-context="entry-screen"],
      .ui-card[data-context="entry-screen"],
      .ui-overlay[data-context="entry-screen"] .ui-body,
      .entry-shell,
      .entry-main,
      .entry-form-panel,
      .entry-scoreboard,
      .entry-form,
      .entry-field,
      .entry-color-actions,
      .entry-color-actions .color-row,
      .entry-info-list,
      .entry-scoreboard .score-table-wrap {
        min-width: 0;
        max-width: 100%;
      }

      .ui-overlay[data-context="entry-screen"] {
        align-items: stretch;
        justify-content: stretch;
        overflow-x: hidden;
        padding:
          max(8px, env(safe-area-inset-top))
          8px
          max(8px, env(safe-area-inset-bottom));
      }

      .ui-title,
      .ui-message {
        padding-right: 0;
      }

      .ui-overlay[data-context="entry-screen"] .ui-title {
        margin-bottom: 8px;
        font-size: clamp(24px, 8.2vw, 30px);
        letter-spacing: 0.07em;
      }

      .ui-overlay[data-context="entry-screen"] .ui-message {
        font-size: 12px;
        line-height: 1.5;
      }

      .ui-sound-btn {
        top: 10px;
        right: 10px;
        padding: 7px 10px;
        border-radius: 999px;
      }

      .ui-card[data-context="entry-screen"] {
        width: 100%;
        max-width: 100%;
        min-height: calc(100vh - 16px);
        min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
        max-height: none;
        margin: 0;
        padding: 56px 10px 10px;
        border-radius: 24px;
        overflow-x: hidden;
      }

      .ui-overlay[data-context="entry-screen"] .ui-body {
        margin-top: 12px;
        gap: 10px;
      }

      .entry-main {
        gap: 10px;
      }

      .entry-form-panel,
      .entry-scoreboard {
        gap: 8px;
        padding: 11px;
        border-radius: 18px;
      }

      .entry-form-head {
        gap: 5px;
        padding: 10px 11px;
        border-radius: 14px;
      }

      .entry-panel-title {
        font-size: 13px;
        letter-spacing: 0.07em;
      }

      .entry-panel-copy {
        font-size: 12px;
        line-height: 1.45;
      }

      .entry-form {
        gap: 8px;
      }

      .entry-form label {
        margin-bottom: 2px;
        font-size: 10px;
      }

      .entry-form input[type="text"],
      .entry-form select {
        min-height: 50px;
        padding: 12px 14px;
        border-radius: 16px;
        font-size: 16px;
      }

      .entry-color-actions {
        width: 100%;
        justify-items: stretch;
      }

      .entry-color-current {
        width: 100%;
        justify-content: center;
        min-height: 42px;
        font-size: 12px;
      }

      .entry-color-actions .color-row {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        justify-content: stretch;
        align-items: center;
        padding: 8px;
        gap: 6px;
        overflow: hidden;
      }

      .color-swatch {
        width: min(48px, 100%);
        height: auto;
        aspect-ratio: 1;
        border-radius: 16px;
        justify-self: center;
      }

      .entry-form .ui-btn.is-primary {
        width: 100%;
        min-height: 54px;
        font-size: 18px;
        letter-spacing: 0.12em;
      }

      .entry-field-hint,
      .entry-form-note {
        font-size: 10px;
        line-height: 1.35;
      }

      .entry-last-result {
        gap: 4px;
        padding: 10px 12px;
      }

      .entry-scoreboard-copy {
        font-size: 9.5px;
        line-height: 1.35;
      }

      .entry-info-list {
        display: none;
      }

      .entry-info-item {
        min-height: 34px;
        padding: 6px 5px;
        border-radius: 12px;
        font-size: 10.5px;
      }

      .entry-info-item-title {
        font-size: 9.5px;
      }

      .entry-info-item-copy {
        display: none;
      }

      .entry-scoreboard .score-table-wrap {
        max-height: 154px;
        overflow-x: auto;
        overflow-y: auto;
      }

      .entry-scoreboard .score-table {
        width: 100%;
        table-layout: fixed;
      }

      .entry-scoreboard .score-table th:nth-child(1),
      .entry-scoreboard .score-table td:nth-child(1) {
        width: 22px;
      }

      .entry-scoreboard .score-table th:nth-child(2),
      .entry-scoreboard .score-table td:nth-child(2) {
        width: 32%;
      }

      .entry-scoreboard .score-table th:nth-child(3),
      .entry-scoreboard .score-table td:nth-child(3) {
        width: 15%;
      }

      .entry-scoreboard .score-table th:nth-child(4),
      .entry-scoreboard .score-table td:nth-child(4) {
        width: 28%;
      }

      .entry-scoreboard .score-table th:nth-child(5),
      .entry-scoreboard .score-table td:nth-child(5) {
        width: 25%;
      }

      .entry-scoreboard .score-table th,
      .entry-scoreboard .score-table td {
        padding: 7px 5px;
        font-size: 11px;
        white-space: normal;
        word-break: break-word;
      }

      .entry-scoreboard .score-table th {
        font-size: 8.5px;
        line-height: 1.08;
        letter-spacing: 0.02em;
      }

      .entry-studio-logo {
        width: 44px;
      }

      .entry-brandmark {
        font-size: 8px;
        letter-spacing: 0.1em;
      }
    }

    .game-shell.is-lite-render .drone-smoke-trail,
    .game-shell.is-lite-render .robot-reflection,
    .game-shell.is-lite-render .robot-impact-flash,
    .game-shell.is-lite-render .ground-glow,
    .game-shell.is-lite-render .muzzle-halo,
    .game-shell.is-lite-render .muzzle-charge,
    .game-shell.is-lite-render .muzzle-shock,
    .game-shell.is-lite-render .muzzle-smoke,
    .game-shell.is-lite-render .robot-sonic-wave,
    .game-shell.is-lite-render .drone-muzzle,
    .game-shell.is-lite-render .robot-shadow {
      display: none !important;
    }

    .game-shell.is-lite-render .drone-target,
    .game-shell.is-lite-render .projectile,
    .game-shell.is-lite-render .projectile.enemy,
    .game-shell.is-lite-render .robot,
    .game-shell.is-lite-render .hud-life.is-active {
      filter: none !important;
    }

    .game-shell.is-lite-render .hud-panel,
    .game-shell.is-lite-render .ui-overlay {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    @supports (height: 100dvh) {
      body {
        height: 100dvh;
      }

      .game-shell {
        height: 100dvh;
      }
    }

    /* Compact entry screen */
    .ui-card[data-context="entry-screen"] > .ui-title,
    .ui-card[data-context="entry-screen"] > .ui-message {
      display: none !important;
    }

    .ui-overlay[data-context="entry-screen"] .ui-body {
      margin-top: 0;
    }

    .audio-control-panel--entry {
      grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
      gap: 8px;
      padding: 6px 8px;
      border-radius: 12px;
    }

    .entry-mute-slot {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .audio-control-panel--entry .ui-sound-btn {
      position: static;
      width: 78px;
      min-height: 34px;
      padding: 6px 9px;
      font-size: 10px;
      white-space: nowrap;
    }

    .audio-control-panel--entry .pause-volume-row {
      padding: 3px 7px;
      gap: 2px;
      border-radius: 10px;
      background: rgba(4, 16, 30, 0.32);
      border-color: rgba(121, 209, 255, 0.16);
    }

    .audio-control-panel--entry .pause-volume-title,
    .audio-control-panel--entry .pause-volume-value {
      font-size: 10px;
    }

    .audio-control-panel--entry .pause-volume-slider {
      height: 16px;
    }

    .entry-form-panel {
      display: block;
      padding: 10px 12px;
    }

    .entry-form {
      grid-template-columns: minmax(220px, 1fr) auto auto;
      gap: 8px 12px;
      align-items: end;
    }

    .entry-form label {
      margin-bottom: 2px;
      font-size: 10px;
    }

    .entry-form input[type="text"] {
      min-height: 42px;
      padding: 8px 11px;
      border-radius: 12px;
      font-size: 14px;
    }

    .entry-color-actions .color-row,
    .entry-form .color-row {
      gap: 6px;
      padding: 3px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    .color-swatch {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }

    .color-swatch::after {
      inset: 4px;
      border-radius: 50%;
    }

    .color-swatch.is-selected {
      animation: none;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.58), 0 0 14px rgb(var(--swatch-rgb) / 0.58);
    }

    .entry-start-field {
      padding-right: 0;
    }

    .entry-form .ui-btn.is-primary {
      min-height: 42px;
      padding: 8px 18px;
      border-radius: 12px;
    }

    .entry-form > .entry-form-note {
      grid-column: 1 / -1;
      font-size: 10px;
    }

    .entry-scoreboard {
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 8px;
      padding: 10px 12px 12px;
    }

    .entry-scoreboard h3 {
      margin: 0;
      font-size: 17px;
    }

    .entry-info-item {
      min-height: 34px;
      padding: 5px 7px;
    }

    .entry-info-item-title {
      font-size: 11px;
    }

    .entry-info-item-copy {
      font-size: 9px;
    }

    @media (max-width: 820px) {
      .entry-form {
        grid-template-columns: 1fr auto;
      }

      .entry-color-field {
        grid-column: 1 / -1;
      }

      .entry-color-actions .color-row {
        width: fit-content;
      }
    }

    @media (min-width: 1025px) {
      .ui-card[data-context="entry-screen"] {
        --entry-card-offset: clamp(48px, 6vh, 72px);
        height: auto;
        max-height: calc(100vh - 96px);
        grid-template-rows: auto auto auto;
      }

      .entry-shell,
      .entry-main {
        height: auto;
        overflow: visible;
      }

      .entry-shell {
        grid-template-rows: auto;
      }

      .entry-main {
        grid-template-rows: auto auto;
      }

      .entry-scoreboard {
        grid-template-rows: auto auto auto;
      }
    }