:root {
  color-scheme: dark;
  --bg: #080b12;
  --panel: #111722;
  --panel-2: #151d2b;
  --line: rgba(255,255,255,.09);
  --text: #f7f9fc;
  --muted: #8f9bad;
  --accent: #7c5cff;
  --accent-2: #23d7ff;
  --danger: #ff476f;
  --orb: #f6e05e;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#141a28 0,#080b12 48%,#06080d 100%);color:var(--text);font-family:Inter,system-ui,sans-serif}
body{min-height:100vh;padding:24px}
button,input{font:inherit}
button{color:inherit}
.app-shell{width:min(1180px,100%);margin:0 auto}
.screen{display:none;min-height:calc(100vh - 48px);align-content:center}.screen.active{display:block}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:28px;box-shadow:0 24px 80px rgba(0,0,0,.25)}
.menu-layout{display:grid;grid-template-columns:1.18fr .82fr;gap:20px}.hero-panel,.leaderboard-panel{padding:34px}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.18em;color:var(--accent-2)}
h1,h2,h3,p{margin-top:0}h1{font:700 clamp(3.7rem,9vw,7.5rem)/.83 Orbitron,sans-serif;letter-spacing:-.06em;margin:16px 0 24px}h1 span{color:var(--accent)}
h2{font-size:2rem;margin:7px 0 0}h3{font-size:1.15rem}.hero-copy{max-width:620px;color:var(--muted);font-size:1.08rem;line-height:1.65}
.menu-actions{max-width:520px;margin-top:32px}.split-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn,.icon-btn{border:1px solid var(--line);background:var(--panel-2);border-radius:15px;padding:13px 18px;font-weight:800;letter-spacing:.05em;cursor:pointer;transition:.15s ease}.btn:hover,.icon-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}.btn-primary{background:linear-gradient(135deg,var(--accent),#5f3de8);border-color:transparent}.btn-large{width:100%;font-size:1.2rem;padding:17px;margin-bottom:10px}.btn-ghost{background:transparent}.btn.compact{padding:10px 14px}.btn:disabled{opacity:.45;cursor:not-allowed}.icon-btn{width:48px;height:48px;padding:0;font-size:1.2rem}
.selection-strip{display:flex;gap:8px;margin-top:18px}.chip{display:inline-flex;align-items:center;min-height:29px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.08em}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.leaderboard{display:grid;gap:9px;margin-top:24px}.leader-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}.leader-row:first-child{background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.3)}.rank{font-weight:800;color:var(--muted)}.leader-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.leader-score{font-family:Orbitron,sans-serif;font-size:.85rem}
.game-topbar{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;margin-bottom:14px}.game-title-wrap{display:flex;align-items:center;justify-content:center;gap:10px}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.hud>div{border:1px solid var(--line);border-radius:15px;background:var(--panel);padding:11px 15px}.hud span{display:block;color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.11em}.hud strong{display:block;margin-top:4px;font:700 1.25rem Orbitron,sans-serif}
.game-wrap{position:relative;overflow:hidden;border-radius:22px}.game-wrap canvas{display:block;width:100%;aspect-ratio:16/9;background:#070a10;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:rgba(5,8,14,.82);backdrop-filter:blur(6px)}.hidden{display:none!important}.countdown{font:700 clamp(4rem,10vw,8rem) Orbitron,sans-serif;color:var(--accent)}.modal-card{width:min(390px,100%);padding:28px;border:1px solid var(--line);border-radius:22px;background:rgba(17,23,34,.96);text-align:center}.modal-card h2{margin:8px 0 12px}.modal-card p{color:var(--muted);line-height:1.5}.final-score{font:700 3.2rem Orbitron,sans-serif;margin:12px 0;color:var(--text)}.stack-actions{display:grid;gap:9px;margin-top:22px}.form-card{text-align:left}.form-card label{display:block;margin:18px 0 8px;font-size:.82rem;font-weight:800}.form-card input{width:100%;border:1px solid var(--line);border-radius:13px;background:#0b1019;color:var(--text);padding:13px 14px;outline:none}.form-card input:focus{border-color:var(--accent)}.input-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.75rem;margin:6px 2px 16px}.mobile-controls{display:none;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.mobile-controls button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:13px;padding:13px;font-size:1.1rem}.controls-note{text-align:center;color:var(--muted);font-size:.76rem;margin:12px 0 0}
.section-heading{margin:28px 0}.section-heading p{color:var(--muted)}.option-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.option-card,.character-card{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:24px;text-align:left;color:inherit;cursor:pointer}.option-card:hover,.character-card:hover,.option-card.selected,.character-card.selected{border-color:rgba(124,92,255,.65);background:rgba(124,92,255,.08)}.option-card h3{margin:20px 0 7px}.option-card p{color:var(--muted);line-height:1.5;margin:0}.character-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.character-card{text-align:center}.shape{display:block;width:64px;height:64px;margin:6px auto 20px;background:var(--accent)}.runner-shape{border-radius:16px}.orb-shape{border-radius:50%}.diamond-shape{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.ship-shape{clip-path:polygon(0 10%,100% 50%,0 90%)}
@media(max-width:800px){body{padding:14px}.screen{min-height:calc(100vh - 28px)}.menu-layout{grid-template-columns:1fr}.hero-panel,.leaderboard-panel{padding:24px}h1{font-size:clamp(3.2rem,18vw,5.6rem)}.option-grid{grid-template-columns:1fr}.character-grid{grid-template-columns:repeat(2,1fr)}.mobile-controls{display:grid}.controls-note{display:none}}
@media(max-width:480px){.hero-panel,.leaderboard-panel{padding:20px}.split-actions{grid-template-columns:1fr}.hud>div{padding:10px}.hud strong{font-size:1rem}.game-title-wrap{justify-content:flex-start}.game-title-wrap .eyebrow{display:none}.modal-card{padding:22px}.character-grid{gap:10px}.character-card{padding:18px 10px}}

/* Emoji character cards */
.emoji-preview {
  display: block;
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 14px rgba(124,92,255,.35));
}

.event-banner{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:4;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(5,8,14,.76);backdrop-filter:blur(8px);color:#fff;font:800 .72rem Orbitron,sans-serif;letter-spacing:.09em;text-transform:uppercase;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.24)}

@media(max-width:620px){.hud{grid-template-columns:repeat(2,1fr)}}




/* Mobile game mode: landscape-first virtual joystick + stored fire button */
.rotate-device{display:none;position:fixed;inset:0;z-index:9999;background:#080b12;color:#f7f9fc;place-items:center;text-align:center;padding:28px}.rotate-device>div{display:grid;gap:10px;justify-items:center}.rotate-device .rotate-icon{font-size:3rem}.rotate-device strong{font:700 1.25rem Orbitron,sans-serif}.rotate-device span{color:var(--muted)}
.touch-controls{display:none;position:absolute;inset:0;z-index:5;pointer-events:none}
.joystick{position:absolute;left:22px;bottom:18px;width:116px;height:116px;border-radius:50%;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.joystick-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.24);background:rgba(5,8,14,.42);box-shadow:inset 0 0 24px rgba(124,92,255,.16),0 8px 28px rgba(0,0,0,.25);backdrop-filter:blur(4px)}
.joystick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(124,92,255,.9);border:2px solid rgba(255,255,255,.55);box-shadow:0 0 22px rgba(124,92,255,.55);transform:translate(0,0);transition:transform .06s linear;pointer-events:none}
.fire-btn{position:absolute;right:26px;bottom:27px;width:94px;height:94px;border-radius:50%;pointer-events:auto;touch-action:manipulation;border:2px solid rgba(255,255,255,.18);background:rgba(14,18,27,.72);color:#fff;display:grid;place-content:center;gap:2px;text-align:center;font-weight:900;letter-spacing:.06em;box-shadow:0 8px 28px rgba(0,0,0,.28);backdrop-filter:blur(5px)}
.fire-btn .fire-icon{font-size:2rem;line-height:1}.fire-btn span:last-child{font-size:.58rem}.fire-btn.ready{background:rgba(255,93,30,.88);border-color:rgba(255,220,180,.8);box-shadow:0 0 24px rgba(255,79,20,.6),0 8px 28px rgba(0,0,0,.3);animation:firePulse 1s ease-in-out infinite}.fire-btn:disabled{opacity:.42}.fire-btn.ready:disabled{opacity:1}
@keyframes firePulse{50%{transform:scale(1.05)}}

@media (hover:none) and (pointer:coarse){
  .controls-note{display:none}
  .touch-controls{display:block}
}

@media (max-width:900px) and (orientation:portrait) and (hover:none) and (pointer:coarse){
  body.game-active .rotate-device{display:grid}
}

@media (max-width:950px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  body.game-active{padding:0;overflow:hidden;background:#05070b}
  body.game-active .app-shell{width:100%;max-width:none;margin:0}
  body.game-active #game-screen{height:100dvh;min-height:100dvh;padding:4px 8px 6px;display:grid;grid-template-rows:auto auto minmax(0,1fr);align-content:stretch;gap:4px}
  body.game-active .game-topbar{margin:0;min-height:34px;grid-template-columns:auto 1fr auto;gap:8px}
  body.game-active .game-topbar .icon-btn{width:36px;height:34px;border-radius:10px}
  body.game-active .game-topbar .btn.compact{padding:7px 10px;border-radius:10px;font-size:.72rem}
  body.game-active .game-title-wrap .eyebrow{display:none}
  body.game-active .game-title-wrap{justify-content:center}
  body.game-active .game-title-wrap .chip{min-height:24px;padding:3px 8px;font-size:.58rem}
  body.game-active .hud{grid-template-columns:repeat(4,1fr);gap:5px;margin:0}
  body.game-active .hud>div{padding:5px 8px;border-radius:10px;min-width:0}
  body.game-active .hud span{font-size:.52rem;letter-spacing:.06em}
  body.game-active .hud strong{margin-top:1px;font-size:.8rem}
  body.game-active .game-wrap{height:100%;min-height:0;border-radius:12px;border-width:1px}
  body.game-active .game-wrap canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:fill}
  body.game-active .overlay{padding:8px;z-index:20}
  body.game-active .modal-card{max-width:360px;padding:16px;border-radius:16px}
  body.game-active .modal-card h2{font-size:1.25rem;margin:4px 0 8px}
  body.game-active .final-score{font-size:2rem;margin:5px 0}
  body.game-active .stack-actions{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
  body.game-active .stack-actions .btn{padding:9px 7px;font-size:.64rem;letter-spacing:.02em}
  body.game-active .form-card{max-width:430px}
  body.game-active .form-card label{margin:8px 0 4px}
  body.game-active .form-card input{padding:9px 10px}
  body.game-active .input-meta{margin-bottom:8px}
  body.game-active .event-banner{top:8px;font-size:.58rem;padding:6px 9px}
  body.game-active .joystick{left:max(18px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:108px;height:108px}
  body.game-active .joystick-knob{width:48px;height:48px;margin:-24px 0 0 -24px}
  body.game-active .fire-btn{right:max(22px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:86px;height:86px}
  body.game-active .fire-btn .fire-icon{font-size:1.8rem}
}


/* =========================================================
   PHONE LANDSCAPE FIT FIX
   Keep the complete game inside the usable mobile viewport.
   ========================================================= */
@media (orientation:landscape) and (max-height:560px) and (max-width:1100px) {
  html,
  body {
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    overscroll-behavior:none;
  }

  body.game-active {
    position:fixed;
    inset:0;
    width:100dvw;
    height:100dvh;
    min-height:100dvh;
    margin:0;
    padding:
      max(3px, env(safe-area-inset-top))
      max(5px, env(safe-area-inset-right))
      max(3px, env(safe-area-inset-bottom))
      max(5px, env(safe-area-inset-left));
    overflow:hidden;
    background:#05070b;
  }

  body.game-active .app-shell {
    width:100%;
    height:100%;
    max-width:none;
    margin:0;
  }

  body.game-active #game-screen.screen.active {
    display:grid;
    width:100%;
    height:100%;
    min-height:0;
    max-height:100%;
    grid-template-rows:32px 38px minmax(0,1fr);
    gap:4px;
    padding:0;
    margin:0;
    align-content:stretch;
    overflow:hidden;
  }

  body.game-active .game-topbar {
    width:100%;
    min-width:0;
    min-height:0;
    height:32px;
    margin:0;
    gap:6px;
  }

  body.game-active .game-topbar .icon-btn {
    width:34px;
    height:30px;
    min-height:0;
    padding:0;
    border-radius:9px;
    font-size:.88rem;
  }

  body.game-active .game-topbar .btn.compact {
    min-height:30px;
    padding:4px 9px;
    border-radius:9px;
    font-size:.64rem;
  }

  body.game-active .game-title-wrap {
    min-width:0;
    justify-content:center;
  }

  body.game-active .game-title-wrap .eyebrow {
    display:none;
  }

  body.game-active .game-title-wrap .chip {
    max-width:100%;
    min-height:22px;
    padding:2px 7px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.52rem;
  }

  body.game-active .hud {
    width:100%;
    min-width:0;
    height:38px;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    margin:0;
  }

  body.game-active .hud > div {
    min-width:0;
    height:38px;
    padding:4px 7px;
    overflow:hidden;
    border-radius:9px;
  }

  body.game-active .hud span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.44rem;
    letter-spacing:.04em;
  }

  body.game-active .hud strong {
    margin-top:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:clamp(.66rem,2.7vh,.82rem);
    line-height:1.15;
  }

  body.game-active .game-wrap {
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    max-height:100%;
    margin:0;
    overflow:hidden;
    border-radius:10px;
  }

  body.game-active .game-wrap canvas {
    display:block;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:100%;
    aspect-ratio:auto;
    object-fit:fill;
  }

  /* Force touch controls on compact landscape phones even when a browser
     reports an unusual hover/pointer combination. */
  body.game-active .touch-controls {
    display:block;
  }

  body.game-active .joystick {
    left:max(10px, env(safe-area-inset-left));
    bottom:max(8px, env(safe-area-inset-bottom));
    width:clamp(72px,30vh,102px);
    height:clamp(72px,30vh,102px);
  }

  body.game-active .joystick-knob {
    width:clamp(32px,14vh,46px);
    height:clamp(32px,14vh,46px);
    margin:calc(clamp(32px,14vh,46px) / -2) 0 0 calc(clamp(32px,14vh,46px) / -2);
  }

  body.game-active .fire-btn {
    right:max(12px, env(safe-area-inset-right));
    bottom:max(10px, env(safe-area-inset-bottom));
    width:clamp(64px,25vh,86px);
    height:clamp(64px,25vh,86px);
  }

  body.game-active .fire-btn .fire-icon {
    font-size:clamp(1.25rem,7vh,1.8rem);
  }

  body.game-active .fire-btn span:last-child {
    font-size:.48rem;
  }

  body.game-active .event-banner {
    top:5px;
    max-width:55%;
    padding:4px 7px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.48rem;
  }

  body.game-active .overlay {
    padding:6px;
  }

  body.game-active .modal-card {
    width:min(350px,88vw);
    max-height:calc(100dvh - 18px);
    overflow:auto;
    padding:12px 14px;
    border-radius:13px;
  }

  body.game-active .modal-card h2 {
    margin:3px 0 5px;
    font-size:1rem;
  }

  body.game-active .modal-card p {
    margin-bottom:6px;
    font-size:.72rem;
  }

  body.game-active .final-score {
    margin:3px 0;
    font-size:1.55rem;
  }

  body.game-active .stack-actions {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    margin-top:7px;
  }

  body.game-active .stack-actions .btn,
  body.game-active .split-actions .btn {
    min-width:0;
    padding:7px 5px;
    font-size:.55rem;
    line-height:1.1;
  }

  body.game-active .form-card label {
    margin:5px 0 3px;
    font-size:.65rem;
  }

  body.game-active .form-card input {
    padding:7px 9px;
    font-size:.78rem;
  }

  body.game-active .input-meta {
    margin:3px 1px 6px;
    font-size:.6rem;
  }

  body.game-active .controls-note {
    display:none;
  }
}

/* Very short phones / browser UI taking extra vertical space. */
@media (orientation:landscape) and (max-height:340px) and (max-width:1100px) {
  body.game-active #game-screen.screen.active {
    grid-template-rows:28px 32px minmax(0,1fr);
    gap:3px;
  }
  body.game-active .game-topbar { height:28px; }
  body.game-active .game-topbar .icon-btn,
  body.game-active .game-topbar .btn.compact { height:27px; min-height:27px; }
  body.game-active .hud { height:32px; }
  body.game-active .hud > div { height:32px; padding:3px 6px; }
  body.game-active .hud strong { font-size:.64rem; }
  body.game-active .joystick { width:72px; height:72px; }
  body.game-active .joystick-knob { width:32px; height:32px; margin:-16px 0 0 -16px; }
  body.game-active .fire-btn { width:62px; height:62px; }
}

/* =========================================================
   IMMERSIVE MOBILE FULLSCREEN GAMEPLAY
   Menu remains a normal page. During mobile gameplay the
   canvas becomes the screen and HUD/controls float above it.
   ========================================================= */
@media (orientation:landscape) and (max-width:1100px) and (hover:none),
       (orientation:landscape) and (max-width:1100px) and (pointer:coarse) {
  body.game-active {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    width:100dvw !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#05070b !important;
    overscroll-behavior:none;
    touch-action:none;
  }

  body.game-active .app-shell {
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  body.game-active #game-screen.screen.active {
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  body.game-active .game-wrap {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#05070b;
    overflow:hidden !important;
  }

  body.game-active .game-wrap canvas {
    position:absolute;
    inset:0;
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:fill;
    touch-action:none;
  }

  /* Floating top controls instead of consuming game height */
  body.game-active .game-topbar {
    position:absolute !important;
    z-index:30;
    top:max(8px, env(safe-area-inset-top));
    left:max(10px, env(safe-area-inset-left));
    right:max(10px, env(safe-area-inset-right));
    height:36px !important;
    min-height:36px !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:38px 1fr auto !important;
    align-items:center;
    gap:8px !important;
    pointer-events:none;
  }

  body.game-active .game-topbar button {
    pointer-events:auto;
  }

  body.game-active .game-topbar .icon-btn {
    width:36px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    border-radius:11px !important;
    background:rgba(9,13,22,.72) !important;
    backdrop-filter:blur(7px);
  }

  body.game-active .game-topbar .btn.compact {
    min-height:36px !important;
    padding:7px 11px !important;
    border-radius:11px !important;
    font-size:.64rem !important;
    background:rgba(9,13,22,.72) !important;
    backdrop-filter:blur(7px);
  }

  body.game-active .game-title-wrap {
    justify-content:center !important;
  }

  body.game-active .game-title-wrap .eyebrow {
    display:none !important;
  }

  body.game-active .game-title-wrap .chip {
    min-height:25px !important;
    padding:4px 9px !important;
    font-size:.53rem !important;
    background:rgba(9,13,22,.65) !important;
    backdrop-filter:blur(7px);
  }

  /* Compact HUD floats below the top buttons */
  body.game-active .hud {
    position:absolute !important;
    z-index:29;
    top:max(50px, calc(env(safe-area-inset-top) + 50px));
    left:max(10px, env(safe-area-inset-left));
    right:max(10px, env(safe-area-inset-right));
    width:auto !important;
    height:38px !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
    pointer-events:none;
  }

  body.game-active .hud > div {
    min-width:0 !important;
    height:38px !important;
    padding:4px 8px !important;
    border-radius:10px !important;
    background:rgba(9,13,22,.68) !important;
    backdrop-filter:blur(7px);
  }

  body.game-active .hud span {
    font-size:.43rem !important;
    letter-spacing:.04em !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.game-active .hud strong {
    margin-top:0 !important;
    font-size:.72rem !important;
    line-height:1.15 !important;
  }

  body.game-active .touch-controls {
    display:block !important;
    position:absolute;
    inset:0;
    z-index:25;
  }

  body.game-active .joystick {
    left:max(18px, calc(env(safe-area-inset-left) + 8px)) !important;
    bottom:max(16px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    width:clamp(82px,27vh,116px) !important;
    height:clamp(82px,27vh,116px) !important;
  }

  body.game-active .joystick-knob {
    width:clamp(36px,12vh,50px) !important;
    height:clamp(36px,12vh,50px) !important;
    margin:calc(clamp(36px,12vh,50px) / -2) 0 0 calc(clamp(36px,12vh,50px) / -2) !important;
  }

  body.game-active .fire-btn {
    right:max(20px, calc(env(safe-area-inset-right) + 8px)) !important;
    bottom:max(18px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    width:clamp(72px,23vh,98px) !important;
    height:clamp(72px,23vh,98px) !important;
  }

  body.game-active .event-banner {
    z-index:28;
    top:96px !important;
    max-width:55%;
    font-size:.5rem !important;
  }

  body.game-active .controls-note {
    display:none !important;
  }

  body.game-active .overlay {
    z-index:40 !important;
    padding:max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  }

  body.game-active .modal-card {
    width:min(360px,84vw) !important;
    max-height:88dvh !important;
    overflow:auto;
  }
}

/* Tiny-height phones: keep HUD readable without stealing the field. */
@media (orientation:landscape) and (max-height:340px) and (max-width:1100px) {
  body.game-active .game-topbar {
    top:max(4px, env(safe-area-inset-top));
    height:30px !important;
    min-height:30px !important;
  }
  body.game-active .game-topbar .icon-btn,
  body.game-active .game-topbar .btn.compact {
    width:auto;
    height:30px !important;
    min-height:30px !important;
  }
  body.game-active .hud {
    top:max(38px, calc(env(safe-area-inset-top) + 38px));
    height:32px !important;
  }
  body.game-active .hud > div {
    height:32px !important;
    padding:3px 6px !important;
  }
  body.game-active .hud strong { font-size:.62rem !important; }
  body.game-active .event-banner { top:75px !important; }
}