:root {
      color-scheme: dark;
      --bg: #10141f;
      --panel: #171d2a;
      --panel-2: #20283a;
      --text: #f5f7fb;
      --muted: #aeb7c8;
      --blue: #55c7ff;
      --green: #73e58a;
      --yellow: #ffd166;
      --red: #ff6b6b;
      --pink: #ff8cc6;
    }

    * { box-sizing: border-box; }

    html, body { min-height: 100%; }

    body {
      margin: 0;
      min-height: 100vh;
      overflow: hidden;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 18% 20%, rgba(85, 199, 255, .18), transparent 26rem),
        radial-gradient(circle at 84% 80%, rgba(115, 229, 138, .13), transparent 24rem),
        var(--bg);
      color: var(--text);
    }

    button { font: inherit; }

    .app {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 14px;
      width: 100vw;
      height: 100vh;
      padding: 14px;
    }

    .arena-shell {
      position: relative;
      touch-action: none;
      overscroll-behavior: contain;
      -webkit-user-select: none;
      user-select: none;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      align-items: stretch;
      gap: 10px;
      padding: 10px;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(23, 29, 42, .94), rgba(12, 16, 25, .96));
      box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
    }

    .hud-zone {
      position: relative;
      z-index: 7;
      min-width: 0;
    }

    .playable-arena {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(64, 85, 117, .58);
      border-radius: 8px;
      background: var(--sx-color-arena, #080d17);
      isolation: isolate;
      container-type: size;
    }

    .playable-arena canvas {
      width: min(100cqw, 168.421cqh);
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }

    canvas {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 1280 / 760;
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      cursor: none;
    }

    .hud {
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: start;
      gap: 10px;
      pointer-events: none;
      text-shadow: 0 1px 8px rgba(0, 0, 0, .75);
    }

    .hud > div:nth-child(2) { text-align: center; }
    .hud > div:nth-child(3) { text-align: right; }

    .hud strong {
      display: block;
      font-size: 24px;
      line-height: 1;
    }

    .hud span {
      display: block;
      margin-top: 3px;
      color: rgba(255, 255, 255, .66);
      font-size: 12px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .toast {
      position: absolute;
      left: 50%;
      top: 28%;
      z-index: 5;
      min-width: min(440px, calc(100% - 40px));
      transform: translateX(-50%) translateY(-14px);
      padding: 10px 14px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 10px;
      background: rgba(17, 22, 34, .9);
      box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
      text-align: center;
      opacity: 0;
      transition: opacity .18s ease, transform .18s ease;
      pointer-events: none;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .gameplay-notification-layer {
      position: absolute;
      inset: 0;
      z-index: 6;
      overflow: hidden;
      pointer-events: none;
    }

    .side {
      display: flex;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      gap: 12px;
      overflow: auto;
      padding-right: 2px;
    }

    .panel {
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 12px;
      background: rgba(23, 29, 42, .88);
      padding: 14px;
      box-shadow: 0 14px 42px rgba(0, 0, 0, .25);
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    h1, h2 { margin: 0; line-height: 1.05; }
    h1 { font-size: 25px; }
    h2 { font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; }

    .pill {
      min-width: 70px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 9px;
      background: var(--panel-2);
      padding: 7px 9px;
      text-align: center;
      font-size: 12px;
      color: var(--muted);
    }

    .pill b { display: block; color: var(--text); font-size: 18px; line-height: 1; }

    .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 14px;
    }

    .stat {
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 9px;
      background: rgba(255, 255, 255, .045);
      padding: 10px;
    }

    .stat span { display: block; color: var(--muted); font-size: 12px; }
    .stat b { display: block; margin-top: 4px; font-size: 20px; }

    .meter-label {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 11px;
    }

    .bar {
      height: 9px;
      margin-top: 5px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 999px;
      background: rgba(0, 0, 0, .25);
    }

    .bar i {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--blue), var(--green));
      transition: width .12s linear;
    }

    .bar.energy i { background: linear-gradient(90deg, var(--yellow), var(--pink)); }

    button {
      min-height: 44px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 9px;
      background: linear-gradient(180deg, #263146, #1d2637);
      color: var(--text);
      font-weight: 750;
      cursor: pointer;
      transition: transform .12s ease, border-color .12s ease, opacity .12s ease;
    }

    button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(85, 199, 255, .62); }
    button:disabled { cursor: not-allowed; opacity: .42; transform: none; }

    .controls, .tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 10px;
    }

    .tabs { grid-template-columns: repeat(4, 1fr); }
    .tabs button { min-height: 38px; padding: 6px; font-size: 12px; }
    .tabs button.active { border-color: rgba(115, 229, 138, .7); background: rgba(115, 229, 138, .12); }

    .tab-pane { display: none; }
    .tab-pane.active { display: block; }

    .upgrades, .mini-list { display: grid; gap: 8px; margin-top: 10px; }

    .upgrade {
      display: grid;
      grid-template-columns: 34px 1fr auto;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 8px 9px;
      text-align: left;
    }

    .icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
      font-size: 18px;
    }

    .upgrade small { display: block; margin-top: 2px; color: var(--muted); font-weight: 550; }
    .cost { color: var(--yellow); font-size: 13px; white-space: nowrap; }

    .powers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 10px;
    }

    .power { min-height: 60px; padding: 8px; font-size: 13px; }
    .power b { display: block; color: var(--muted); font-size: 11px; font-weight: 650; }

    .mini-item {
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 9px;
      background: rgba(255, 255, 255, .045);
      padding: 9px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .mini-item b { display: block; margin-bottom: 3px; color: var(--text); font-size: 14px; }
    .mission.done { border-color: rgba(115, 229, 138, .45); background: rgba(115, 229, 138, .09); }

    .skin-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 10px;
    }

    .skin { min-height: 70px; padding: 8px; font-size: 12px; line-height: 1.2; }
    .skin i {
      display: block;
      width: 28px;
      height: 18px;
      margin: 0 auto 6px;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 5px;
      background: var(--swatch);
      box-shadow: 0 0 16px var(--swatch);
    }

    .skin.active { border-color: rgba(115, 229, 138, .7); background: rgba(115, 229, 138, .1); }

    .log { min-height: 120px; max-height: 180px; overflow: auto; color: var(--muted); font-size: 13px; line-height: 1.35; }
    .log p { margin: 0 0 8px; }

    .overlay {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: grid;
      place-items: center;
      background: rgba(8, 11, 18, .68);
      backdrop-filter: blur(6px);
    }

    .menu {
      width: min(560px, calc(100% - 32px));
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 14px;
      background: rgba(23, 29, 42, .96);
      padding: 22px;
      text-align: center;
      box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
    }

    .menu h2 { color: var(--text); font-size: clamp(30px, 6vw, 42px); text-transform: none; }
    .menu p { margin: 12px auto 18px; max-width: 470px; color: var(--muted); line-height: 1.5; }
    .menu button { min-width: 170px; padding-inline: 18px; }
    .menu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 18px; }
    .menu-stats div { border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 10px; background: rgba(255,255,255,.04); }
    .menu-stats span { display: block; color: var(--muted); font-size: 11px; }
    .menu-stats b { display: block; margin-top: 3px; font-size: 20px; }

    .profile-row { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:10px; }
    .profile-row input { min-width:0; min-height:44px; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:#111827; color:var(--text); padding:0 12px; font:inherit; }
    .leaderboard { margin-top:10px; display:grid; gap:6px; }
    .leaderboard-row { display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center; padding:8px 9px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.04); font-size:13px; }
    .leaderboard-row.me { border-color:rgba(115,229,138,.55); background:rgba(115,229,138,.09); }
    .leaderboard-rank { color:var(--yellow); font-weight:800; text-align:center; }
    .leaderboard-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .leaderboard-score { font-weight:800; }
    .leaderboard-note { margin-top:8px; color:var(--muted); font-size:11px; line-height:1.35; }


    .country-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.country-row select,.difficulty-row select{min-height:44px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#111827;color:var(--text);padding:0 10px;font:inherit}.country-badge{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.04)}.country-badge b{font-size:24px}.tour-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.tour-node{padding:8px 5px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.04);text-align:center;font-size:11px}.tour-node b{display:block;font-size:22px;margin-bottom:3px}.tour-node.current{border-color:rgba(255,209,102,.7);background:rgba(255,209,102,.1)}.tour-node.done{border-color:rgba(115,229,138,.45);background:rgba(115,229,138,.08)}.tour-node.locked{opacity:.38}.difficulty-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.elo-rank{font-size:18px;font-weight:900;color:var(--yellow)}

    .hidden { display: none; }

    @media (max-width: 900px) {
      body { overflow: auto; }
      .app { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
      .arena-shell { height: min(66vh, 620px); min-height: 360px; }
      canvas { width: auto; max-width: 100%; max-height: 100%; cursor: default; }
      .side { overflow: visible; }
    }

    @media (max-width: 540px) {
      .app { gap: 9px; padding: 9px; }
      .arena-shell { min-height: 290px; height: 54vh; }
      .hud strong { font-size: 19px; }
      .hud span { font-size: 10px; }
      .tabs { grid-template-columns: 1fr 1fr; }
      .skin-grid { grid-template-columns: repeat(2, 1fr); }
      .menu-stats { grid-template-columns: 1fr; }
    }


    .mobile-dock {
      display: none;
      position: fixed;
      left: max(10px, env(safe-area-inset-left));
      right: max(10px, env(safe-area-inset-right));
      bottom: max(10px, env(safe-area-inset-bottom));
      z-index: 30;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 8px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(12,16,25,.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 12px 40px rgba(0,0,0,.45);
      border-radius: 16px;
    }
    .mobile-dock button {
      min-height: 48px;
      border-radius: 12px;
      padding: 7px 5px;
      font-size: 12px;
    }
    .mobile-dock button b { display:block; font-size:16px; margin-bottom:2px; }
    .mobile-dock button.active {
      border-color: rgba(115,229,138,.75);
      background: linear-gradient(180deg, rgba(42,92,67,.95), rgba(25,55,42,.95));
    }

    .mobile-menu-btn,
    .mobile-pause-btn {
      display: none;
      position: fixed;
      top: max(10px, env(safe-area-inset-top));
      z-index: 45;
      width: 48px;
      min-height: 48px;
      border-radius: 14px;
      font-size: 22px;
      background: rgba(12,16,25,.9);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .mobile-menu-btn { right: max(10px, env(safe-area-inset-right)); }
    .mobile-pause-btn {
      top: max(66px, calc(env(safe-area-inset-top) + 66px));
      right: max(10px, env(safe-area-inset-right));
    }
    .mobile-pause-btn.active {
      border-color: rgba(255,209,102,.72);
      background: rgba(255,209,102,.16);
      color: var(--yellow);
    }
    .mobile-pause-btn:disabled { opacity:.42; }

    .mobile-sheet-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 39;
      background: rgba(0,0,0,.5);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }

    .mobile-hint {
      display:none;
      position:absolute;
      left:50%;
      bottom:14px;
      transform:translateX(-50%);
      z-index:4;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(8,11,18,.72);
      border:1px solid rgba(255,255,255,.12);
      color:rgba(255,255,255,.78);
      font-size:11px;
      pointer-events:none;
      white-space:nowrap;
    }
@media (pointer: coarse), (max-width: 860px) {
      html, body { height:auto; min-height:100%; }
      body { padding-bottom: 82px; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; touch-action:pan-y; }
      .app { display:block; width:100%; min-height:100vh; height:auto; padding:8px; }
      .arena-shell { height: calc(100svh - 98px); min-height: 320px; border-radius:16px; }
      canvas { width:auto; max-width:100%; max-height:100%; -webkit-user-select:none; user-select:none; }
      .mobile-dock { display:grid; }
      .mobile-menu-btn, .mobile-pause-btn { display:block; }
      .mobile-hint { display:block; bottom:76px; }
      .side {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 40;
        max-height: min(78svh, 720px);
        overflow-y: auto;
        padding: 8px 4px calc(96px + env(safe-area-inset-bottom));
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 20px;
        background: rgba(12,16,25,.96);
        box-shadow: 0 -18px 60px rgba(0,0,0,.55);
        transform: translateY(calc(100% + 24px));
        opacity: 0;
        pointer-events: none;
        transition: transform .22s ease, opacity .22s ease;
      }
      body.mobile-menu-open .side { transform:translateY(0); opacity:1; pointer-events:auto; }
      body.mobile-menu-open .mobile-sheet-backdrop { display:block; }
      body.mobile-menu-open .mobile-menu-btn { background:rgba(115,229,138,.18); border-color:rgba(115,229,138,.65); }
    }

    @media (pointer: coarse) and (orientation: landscape), (max-width: 860px) and (orientation: landscape) {
      .arena-shell { height: calc(100svh - 86px); }
      .mobile-dock { left:50%; right:auto; width:min(620px, calc(100% - 20px)); transform:translateX(-50%); }
      .mobile-hint { bottom:72px; }
    }

    .orientation-picker {
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:8px;
      margin-top:10px;
    }
    .orientation-picker button { min-height:42px; padding:6px; font-size:12px; }
    .orientation-picker button.active {
      border-color:rgba(115,229,138,.75);
      background:rgba(115,229,138,.14);
    }
    .orientation-note { margin-top:8px; color:var(--muted); font-size:11px; line-height:1.35; }

    @media (pointer: coarse), (max-width: 860px) {
      body.layout-portrait .arena-shell { height:min(58svh, 620px); min-height:300px; }
      body.layout-portrait .mobile-hint { bottom:76px; }
      body.layout-landscape .arena-shell { height:calc(100svh - 86px); min-height:260px; }
      body.layout-landscape .app { padding:6px; }
      body.layout-landscape .mobile-dock {
        left:50%; right:auto; width:min(620px, calc(100% - 20px)); transform:translateX(-50%);
      }
    }


    #orientationPicker, .orientation-setting, [data-orientation-panel] { display: none !important; }

    .picker-button{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;text-align:left}
    .picker-button .picker-main{display:flex;align-items:center;gap:10px;min-width:0}.picker-button .picker-flag{font-size:25px}.picker-button .picker-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-button .picker-arrow{color:var(--muted);font-size:20px}
    .game-picker{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:16px;background:rgba(5,8,14,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
    .game-picker.open{display:grid}.game-picker-card{width:min(560px,100%);max-height:min(78svh,720px);display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:#171d2a;box-shadow:0 28px 90px rgba(0,0,0,.6);overflow:hidden}
    .game-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.game-picker-head h3{margin:0;font-size:19px}.game-picker-close{width:44px;min-height:44px;font-size:22px}
    .game-picker-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;overflow:auto}.game-picker-option{min-height:52px;display:flex;align-items:center;gap:10px;padding:8px 11px;text-align:left}.game-picker-option .flag{font-size:25px}.game-picker-option.active{border-color:rgba(115,229,138,.75);background:rgba(115,229,138,.12)}
    @media(max-width:540px){.game-picker-list{grid-template-columns:1fr}.game-picker{padding:8px}.game-picker-card{max-height:86svh}}

    .pwa-splash { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:radial-gradient(circle at 50% 38%, rgba(85,199,255,.18), transparent 28rem), #080d17; transition:opacity .35s ease, visibility .35s ease; }
    .pwa-splash.hide { opacity:0; visibility:hidden; pointer-events:none; }
    .pwa-splash-inner { text-align:center; padding:24px; }
    .pwa-splash-ball { width:72px; height:72px; margin:0 auto 18px; border-radius:50%; background:#fff; box-shadow:0 0 20px #fff, 0 0 54px rgba(85,199,255,.9); animation:pwaPulse 1s ease-in-out infinite alternate; }
    .pwa-splash-title { margin:0; color:#fff; font-size:clamp(42px,10vw,76px); font-weight:900; letter-spacing:-.04em; text-shadow:0 0 22px rgba(85,199,255,.45); }
    .pwa-splash-loader { width:min(240px,60vw); height:7px; margin:24px auto 0; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.09); }
    .pwa-splash-loader i { display:block; width:42%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#55c7ff,#73e58a); animation:pwaLoad 1.05s ease-in-out infinite; }
    @keyframes pwaPulse { to { transform:scale(1.08); box-shadow:0 0 28px #fff,0 0 74px rgba(85,199,255,.95); } }
    @keyframes pwaLoad { 0%{transform:translateX(-120%)} 100%{transform:translateX(340%)} }
    @media (prefers-reduced-motion: reduce) { .pwa-splash-ball,.pwa-splash-loader i { animation:none; } }


/* V2.4 polish */
.top-tools{position:fixed;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));z-index:70;display:flex;gap:7px}
.language-btn{min-height:38px;padding:6px 10px;border-radius:12px;background:rgba(12,16,25,.88);backdrop-filter:blur(12px);font-size:12px;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.mode-btn{padding:12px 8px;min-height:88px}.mode-btn b{display:block;font-size:23px}.mode-btn span{display:block;margin-top:3px}.mode-btn small{display:block;color:var(--muted);margin-top:4px}.mode-btn.active{border-color:rgba(85,199,255,.8);background:linear-gradient(180deg,rgba(85,199,255,.18),rgba(85,199,255,.06));box-shadow:0 0 24px rgba(85,199,255,.13)}
.panel,.menu{animation:panelIn .34s ease both}@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
canvas{filter:drop-shadow(0 0 20px rgba(85,199,255,.06))}.playable-arena::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.025),transparent 65%);transform:translateX(-120%);animation:arenaSheen 9s linear infinite}@keyframes arenaSheen{to{transform:translateX(120%)}}
.onboarding{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;background:rgba(4,7,12,.9);backdrop-filter:blur(16px)}.onboarding.hidden{display:none}.onboarding-card{width:min(430px,100%);padding:28px;border:1px solid rgba(85,199,255,.35);border-radius:22px;background:linear-gradient(160deg,#182236,#0d121d);text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.58),0 0 45px rgba(85,199,255,.12)}.onboarding-card h2{font-size:38px;margin:4px 0}.onboarding-card>p{color:var(--muted)}.onboarding-ball{width:54px;height:54px;margin:auto;border-radius:50%;background:#fff;box-shadow:0 0 30px #55c7ff;animation:onBall 1.2s ease-in-out infinite alternate}@keyframes onBall{to{transform:translateY(-10px) scale(.94)}}.onboarding-langs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.onboarding-card input{width:100%;min-height:48px;border:1px solid rgba(255,255,255,.15);border-radius:11px;background:#0c1320;color:#fff;padding:0 13px;font:inherit}.primary-onboard{width:100%;margin-top:10px;background:linear-gradient(180deg,#2d769c,#1e526e)}
.onboarding-field{display:grid;gap:6px;margin-top:13px;text-align:left}.onboarding-field>span{color:var(--sx-color-text-secondary);font-size:12px;font-weight:750}.onboarding-country{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px}.onboarding-country i{display:grid;place-items:center}.onboarding-country select{width:100%;min-height:48px;border:1px solid var(--sx-color-border);border-radius:var(--sx-radius-md);background:var(--sx-color-arena);color:var(--sx-color-text);padding:0 12px;font:inherit}.onboarding-langs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px}.onboarding-langs button.active{border-color:var(--sx-color-cyan);background:var(--sx-color-cyan-soft)}
.boss-alert{animation:bossPulse .8s ease-in-out infinite alternate}@keyframes bossPulse{to{filter:drop-shadow(0 0 18px rgba(255,107,107,.75))}}
@media(max-width:860px){.top-tools{top:max(64px,calc(env(safe-area-inset-top) + 56px))}.mode-grid{grid-template-columns:1fr 1fr}}

/* V2.4.1 mobile/i18n hotfix */
.top-tools{top:72px!important;left:12px!important;right:auto!important;max-width:calc(100vw - 90px);flex-wrap:wrap}
.language-btn{white-space:nowrap;min-width:84px}
.mode-grid{grid-template-columns:1fr!important}
.mode-btn{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:10px!important;align-items:center!important;text-align:left!important;width:100%!important;min-height:76px!important;padding:12px 14px!important;position:relative!important;z-index:1!important}
.mode-btn>b{grid-row:1/3!important;grid-column:1!important;margin:0!important;font-size:24px!important}
.mode-btn>span{grid-row:1!important;grid-column:2!important;display:block!important;margin:0!important;font-weight:850!important;font-size:17px!important;line-height:1.2!important;white-space:normal!important}
.mode-btn>small{grid-row:2!important;grid-column:2!important;display:block!important;margin:3px 0 0!important;font-size:12px!important;line-height:1.3!important;white-space:normal!important}
.mode-btn *{pointer-events:none}
.mobile-dock button span{display:block;font-size:12px;line-height:1.1}
@media(min-width:861px){.top-tools{top:14px!important}.mode-grid{grid-template-columns:1fr 1fr!important}}

/* V2.4.2 stability hotfix */
.boss-mode-info{display:grid;gap:10px;margin-top:12px}.boss-mode-info.hidden{display:none}.boss-card{padding:14px;border:1px solid rgba(255,107,107,.32);border-radius:12px;background:linear-gradient(145deg,rgba(255,107,107,.10),rgba(183,146,255,.07));line-height:1.45;color:var(--muted)}.boss-card b{display:block;color:var(--text);font-size:18px;margin-bottom:4px}.mode-btn.active{transform:none!important}.control-warning{color:var(--yellow);font-weight:750}

.boss-roster-grid{margin-top:10px}.boss-card span{display:block;margin-top:5px;color:var(--muted);font-weight:500}.boss-mode-info .tour-grid{display:grid}

body.onboarding-required{overflow:hidden!important}body.onboarding-required .app,body.onboarding-required .top-tools,body.onboarding-required .mobile-dock,body.onboarding-required .mobile-menu-btn,body.onboarding-required .mobile-pause-btn{visibility:hidden!important;pointer-events:none!important}body.onboarding-required .onboarding{display:grid!important;visibility:visible!important;pointer-events:auto!important}.onboarding{position:fixed!important;inset:0!important;z-index:10000!important;min-height:100dvh!important;overflow:auto!important}.profile-row input[readonly]{opacity:.82;cursor:not-allowed}

/* V2.4.5 onboarding and language integrity */
body.onboarding-required{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;touch-action:none!important}
body.onboarding-required .app,body.onboarding-required .top-tools,body.onboarding-required .mobile-dock,body.onboarding-required .mobile-menu-btn,body.onboarding-required .mobile-pause-btn,body.onboarding-required .mobile-sheet-backdrop,body.onboarding-required .game-picker{display:none!important;pointer-events:none!important}
body.onboarding-required .onboarding{display:grid!important;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:2147483647!important;overflow-y:auto!important;overscroll-behavior:contain!important;touch-action:pan-y!important;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))!important;background:linear-gradient(155deg,#111d2d,#071019 70%)!important}
body.onboarding-required .onboarding-card{margin:auto!important;position:relative!important;z-index:2!important}
.onboarding.hidden{display:none!important}


/* V2.4.7 changelog and hamburger menu */
.menu-actions-panel{position:relative}.menu-action-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}.menu-action-grid button{min-height:68px;padding:8px 6px;display:grid;place-items:center;align-content:center;gap:5px}.menu-action-grid button span{font-size:21px;line-height:1}.menu-action-grid button b{font-size:11px;line-height:1.15}.version-chip{padding:5px 8px;border:1px solid rgba(85,199,255,.3);border-radius:999px;color:var(--blue);background:rgba(85,199,255,.08);font-size:11px;font-weight:850}.game-version-footer{padding:14px 8px 108px;text-align:center;color:var(--muted);font-size:11px}.game-version-footer b,.game-version-footer span{display:block}.game-version-footer b{color:rgba(255,255,255,.72);margin-bottom:3px}
.release-modal{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));background:rgba(3,6,11,.82);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.release-modal.hidden{display:none!important}.release-modal-card{width:min(680px,100%);max-height:min(88dvh,820px);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(85,199,255,.3);border-radius:22px;background:linear-gradient(155deg,#19243a,#0c121e 72%);box-shadow:0 34px 110px rgba(0,0,0,.65),0 0 46px rgba(85,199,255,.1)}.release-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 12px;border-bottom:1px solid rgba(255,255,255,.09)}.release-modal-head h2{margin-top:4px;font-size:25px}.release-eyebrow{color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.16em}.release-close{width:46px;min-height:46px;border-radius:14px;font-size:25px}.release-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 18px 0}.release-tab{min-height:42px}.release-tab.active{border-color:rgba(115,229,138,.7);background:rgba(115,229,138,.12)}.release-content{padding:14px 18px 22px;overflow-y:auto;overscroll-behavior:contain}.release-latest{border:1px solid rgba(85,199,255,.28);border-radius:16px;background:rgba(85,199,255,.07);padding:15px}.release-version-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.release-version-line b{font-size:20px}.release-version-line time{color:var(--muted);font-size:11px}.release-section{margin-top:13px}.release-section h3{margin:0 0 7px;color:var(--yellow);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.release-section ul{margin:0;padding-left:20px;color:var(--muted);line-height:1.5}.release-section li+li{margin-top:5px}.release-history{display:grid;gap:8px;margin-top:12px}.release-history details{border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.035);padding:11px 12px}.release-history summary{cursor:pointer;font-weight:800}.release-history p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45}.about-logo{text-align:center;padding:12px}.about-logo .ball{width:52px;height:52px;margin:auto;border-radius:50%;background:#fff;box-shadow:0 0 28px var(--blue)}.about-logo h3{margin:17px 0 3px;font-size:29px}.about-logo strong{color:var(--blue)}.about-copy{color:var(--muted);line-height:1.6}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.about-grid div{border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:11px;background:rgba(255,255,255,.035)}.about-grid b{display:block;color:var(--text);margin-bottom:3px}.about-grid span{font-size:12px;color:var(--muted)}@media(max-width:860px){.menu-actions-panel{order:-50}.menu-action-grid{grid-template-columns:repeat(3,1fr)}.game-version-footer{padding-bottom:112px}}@media(max-width:430px){.menu-action-grid{grid-template-columns:repeat(2,1fr)}.release-modal{padding:8px}.release-modal-card{max-height:92dvh;border-radius:18px}.release-modal-head,.release-content{padding-left:14px;padding-right:14px}.about-grid{grid-template-columns:1fr}}

.performance-debug{position:fixed;z-index:30000;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));margin:0;padding:8px 10px;border:1px solid rgba(115,229,138,.5);border-radius:6px;background:rgba(5,8,14,.9);color:#b9ffca;font:700 11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;pointer-events:none;white-space:pre}
.performance-debug[hidden]{display:none}
.performance-blur-off .mobile-backdrop,.performance-blur-off .game-picker,.performance-blur-off .release-modal,.performance-blur-off .language-btn{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.performance-blur-off canvas{filter:none}
.performance-post-reduced .playable-arena::after{display:none}
.low-fx .boss-alert{animation:none}

/* Mobile safe area: keep HUD and event messages below notches and Dynamic Island. */
@media (max-width: 860px), (pointer: coarse) {
  .arena-shell {
    gap: 6px;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left));
  }
  .hud-zone {
    padding-right: max(62px, calc(env(safe-area-inset-right) + 56px));
  }
  .hud {
    inset: auto;
    width: 100%;
  }
  .toast { top: 27%; }
  .top-tools {
    top: max(72px, calc(env(safe-area-inset-top) + 58px)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
  }
  body:not(.multiplayer-screen) .top-tools { display:none; }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 860px) and (orientation: portrait) {
  .toast { top: clamp(32%, calc(50cqh - 24.54cqw + 18px), 42%); }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 860px) and (orientation: landscape) {
  body { padding-bottom: 68px; }
  .app { padding: 4px max(4px, env(safe-area-inset-right)) 4px max(4px, env(safe-area-inset-left)); }
  .arena-shell {
    height: calc(100svh - 68px);
    min-height: 250px;
    gap: 4px;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) 4px max(4px, env(safe-area-inset-left));
    border-radius: 10px;
  }
  .hud-zone { padding-right: max(118px, calc(env(safe-area-inset-right) + 112px)); }
  .mobile-menu-btn,
  .mobile-pause-btn { top: max(4px, env(safe-area-inset-top)); }
  .mobile-menu-btn { right: max(4px, env(safe-area-inset-right)); }
  .mobile-pause-btn { right: max(58px, calc(env(safe-area-inset-right) + 58px)); }
  .mobile-dock {
    width: min(620px, calc(100% - max(12px, calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 8px))));
    bottom: max(4px, env(safe-area-inset-bottom));
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
  }
  .mobile-dock button { min-height: 48px; padding-block: 4px; }
  .mobile-hint { display: none; }
  .toast {
    top: 19%;
    width:max-content;
    min-width:0;
    max-width:min(300px,calc(100% - 28px));
    padding:6px 10px;
    font-size:12px;
    line-height:1.25;
  }
}

@media (max-width: 430px) {
  .onboarding-card { padding:20px 16px; }
  .onboarding-langs { margin:12px 0; }
}

/* V2.9.1 responsive result ownership: the arena overlay scrolls, never the game behind it. */
.game-over-overlay{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden;overscroll-behavior:contain;touch-action:pan-y}
.game-over-overlay .menu{max-height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
@media (pointer:coarse),(max-width:860px){.game-over-overlay .menu{width:min(520px,100%);padding:14px}.game-over-overlay .menu h2{font-size:clamp(24px,8vw,34px)}.game-over-overlay .menu p{margin:7px auto 10px;line-height:1.35}.game-over-overlay .menu-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:8px 0 10px}.game-over-overlay .menu-stats div{padding:7px 4px}.game-over-overlay .menu-stats b{font-size:17px}.game-over-overlay .menu button{min-height:46px}body.game-over-visible .mobile-dock,body.game-over-visible .mobile-menu-btn,body.game-over-visible .mobile-pause-btn{opacity:.18;filter:grayscale(1);pointer-events:none}}
@media (pointer:coarse) and (orientation:landscape),(max-width:860px) and (orientation:landscape){.game-over-overlay{padding:4px max(5px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))}.game-over-overlay .menu{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:8px;row-gap:4px;width:min(620px,100%);padding:8px 10px}.game-over-overlay .menu h2,.game-over-overlay .menu p,.game-over-overlay .menu-stats{grid-column:1/-1}.game-over-overlay .menu h2{font-size:22px;line-height:1.05}.game-over-overlay .menu p{margin:2px auto 4px;font-size:12px;line-height:1.25}.game-over-overlay .menu-stats{margin:3px 0 5px}.game-over-overlay .menu-stats div{padding:4px}.game-over-overlay .menu-stats span{font-size:9px}.game-over-overlay .menu-stats b{font-size:15px}.game-over-overlay .menu button{min-width:0;width:100%;min-height:44px;margin-top:0!important;padding:5px 8px}}