:root {
      color-scheme: dark;
      --bg: #07100b;
      --surface: rgba(11, 20, 15, .88);
      --surface-strong: rgba(13, 23, 17, .96);
      --surface-soft: rgba(255,255,255,.055);
      --line: rgba(228, 255, 235, .12);
      --line-strong: rgba(228, 255, 235, .2);
      --text: #f2f8f3;
      --muted: #95a69a;
      --good: #79f29a;
      --danger: #ff6174;
      --xp: #69b6ff;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      touch-action: none;
      overscroll-behavior: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    button { font: inherit; }

    #app {
      position: fixed;
      inset: 0;
      min-height: 100dvh;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 50% 12%, rgba(90, 181, 112, .10), transparent 31%),
        linear-gradient(180deg, #0a130e 0%, #07100b 100%);
    }

    canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      transition: filter .35s ease;
    }
    canvas.game-blurred { filter: blur(6px) brightness(.55); }
    canvas.game-dimmed { filter: brightness(.45); }

    .appbar {
      position: absolute;
      z-index: 20;
      top: 0;
      left: 0;
      right: 0;
      padding: calc(6px + var(--safe-top)) max(8px, var(--safe-right)) 0 max(8px, var(--safe-left));
      display: flex;
      justify-content: center;
      pointer-events: none;
    }

    .boss-bar-wrap {
      position: absolute;
      z-index: 18;
      top: calc(58px + var(--safe-top));
      left: 50%;
      transform: translate(-50%, -10px);
      width: min(440px, calc(100% - 24px));
      pointer-events: none;
      opacity: 0;
      transition: opacity .24s ease, transform .24s cubic-bezier(.16, 1, .3, 1);
    }
    .boss-bar-wrap.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    .boss-bar-wrap[hidden] { display: none; }

    .boss-bar-card {
      padding: 6px 10px;
      border: 1px solid rgba(255, 97, 116, .35);
      background: rgba(18, 9, 12, .92);
      box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 16px rgba(255, 97, 116, .15);
      border-radius: 10px;
      pointer-events: none;
    }

    .boss-bar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 4px;
      line-height: 1;
    }
    .boss-badge {
      font-size: 7.5px;
      font-weight: 950;
      letter-spacing: .08em;
      padding: 1.5px 5px;
      border-radius: 4px;
      background: rgba(255, 97, 116, .22);
      border: 1px solid rgba(255, 97, 116, .4);
      color: #ff6174;
    }
    .boss-name {
      font-size: 9.5px;
      font-weight: 900;
      letter-spacing: .08em;
      color: #ffd27a;
      text-transform: uppercase;
      flex: 1 1 auto;
      margin-left: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .boss-hp-val {
      font-size: 9.5px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      color: #ff9aa5;
    }

    .boss-bar-track {
      position: relative;
      height: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
      border: 1px solid rgba(255, 97, 116, .18);
    }
    .boss-bar-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #ff4359, #ff9b71);
      box-shadow: 0 0 8px rgba(255, 97, 116, .5);
      transition: width .1s linear;
    }
    .boss-bar-wrap.frenzy .boss-bar-card {
      border-color: #ff2e43;
      box-shadow: 0 8px 30px rgba(255, 46, 67, .4), 0 0 20px rgba(255, 46, 67, .25);
    }
    .boss-bar-wrap.frenzy .boss-bar-fill {
      background: linear-gradient(90deg, #ff1a30, #ff6622);
      box-shadow: 0 0 12px rgba(255, 46, 67, .85);
      animation: pulse 0.75s ease-in-out infinite;
    }
    .boss-badge.frenzy {
      background: rgba(255, 26, 48, .38);
      border-color: #ff1a30;
      color: #ffd666;
      animation: pulse 0.7s ease-in-out infinite;
    }

    .combo-badge {
      position: absolute;
      z-index: 17;
      top: calc(56px + var(--safe-top));
      left: max(12px, var(--safe-left));
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px 3px 6px;
      border-radius: 999px;
      background: rgba(14, 22, 16, .92);
      border: 1px solid rgba(255, 214, 102, .35);
      box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 10px rgba(255, 214, 102, .18);
      color: #ffd666;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .04em;
      pointer-events: none;
      animation: popIn .18s cubic-bezier(.16, 1, .3, 1);
    }
    .combo-badge[hidden] { display: none; }
    .combo-flame { font-size: 11px; }
    .combo-track {
      width: 22px;
      height: 3px;
      border-radius: 999px;
      background: rgba(255,255,255,.15);
      overflow: hidden;
      margin-left: 2px;
    }
    .combo-track > i {
      display: block;
      height: 100%;
      background: #ffd666;
      border-radius: inherit;
      transition: width .08s linear;
    }
    .combo-badge.tier-1 {
      border-color: rgba(255, 180, 50, .55);
      box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 12px rgba(255, 180, 50, .3);
      color: #ffbe4a;
    }
    .combo-badge.tier-2 {
      border-color: rgba(255, 97, 116, .65);
      box-shadow: 0 4px 18px rgba(0,0,0,.45), 0 0 16px rgba(255, 97, 116, .45);
      color: #ff6576;
    }
    .combo-badge.tier-3 {
      border-color: #ffd700;
      box-shadow: 0 4px 22px rgba(0,0,0,.5), 0 0 22px rgba(255, 215, 0, .65);
      color: #fff275;
      animation: pulse .7s ease-in-out infinite;
    }
    @keyframes popIn {
      from { transform: scale(.7); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .settings-trigger {
      width: 34px;
      height: 34px;
      min-height: 34px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.055);
      color: #dfe8e2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
      cursor: pointer;
      touch-action: manipulation;
    }
    .settings-trigger:active { transform: translateY(1px); background: rgba(255,255,255,.09); }
    .settings-trigger[aria-expanded="true"] { border-color: rgba(121,242,154,.34); background: rgba(60,133,79,.16); }
    .settings-icon { width: 18px; height: 18px; fill: currentColor; }

    .settings-backdrop {
      position: fixed;
      inset: 0;
      z-index: 28;
      background: rgba(0,0,0,.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
    }
    .settings-backdrop.show { opacity: 1; pointer-events: auto; }
    .settings-backdrop[hidden] { display: none; }

    .settings-panel {
      position: absolute;
      z-index: 30;
      top: calc(54px + var(--safe-top));
      right: max(10px, var(--safe-right));
      width: min(240px, calc(100% - 20px));
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom));
      overflow-y: auto;
      overscroll-behavior: contain;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface-strong);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      box-shadow: 0 18px 40px rgba(0,0,0,.38);
      opacity: 0;
      transform: translateY(-6px) scale(.97);
      transition: opacity .18s ease, transform .18s ease;
      pointer-events: none;
    }
    .settings-panel.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .settings-panel[hidden] { display: none; }

    .settings-row { display: flex; flex-direction: column; gap: 4px; }
    .settings-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }

    .settings-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .settings-toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 40px;
      min-width: 64px;
      padding: 3px 8px 3px 4px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.055);
      color: var(--text);
      cursor: pointer;
      touch-action: manipulation;
    }
    .settings-toggle-btn:active { transform: translateY(1px); }
    .toggle-track {
      width: 26px;
      height: 15px;
      border-radius: 999px;
      background: rgba(255,255,255,.15);
      position: relative;
      transition: background .18s ease;
      display: block;
    }
    .toggle-thumb {
      position: absolute;
      left: 2px;
      top: 2px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #c5d4cb;
      transition: transform .18s ease, background .18s ease;
      display: block;
    }
    .settings-toggle-btn.active .toggle-track {
      background: rgba(121, 242, 154, .35);
    }
    .settings-toggle-btn.active .toggle-thumb {
      transform: translateX(11px);
      background: var(--good);
    }
    .toggle-text {
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .04em;
    }

    .settings-note {
      margin: 0;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.35;
    }

    .lang-select {
      width: 100%;
      min-height: 34px;
      padding: 0 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.055);
      color: #dfe8e2;
      cursor: pointer;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .025em;
    }
    .lang-select:focus-visible { outline: 2px solid rgba(121,242,154,.55); outline-offset: 2px; }

    .install-button,
    .update-button {
      width: 100%;
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.055);
      color: #dfe8e2;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      cursor: pointer;
      touch-action: manipulation;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .025em;
      white-space: nowrap;
    }
    .install-button:active,
    .update-button:active { transform: translateY(1px); background: rgba(255,255,255,.09); }
    .install-button[disabled],
    .update-button[disabled] { opacity: .66; cursor: default; }

    .install-button.ready {
      color: #e5f4ff;
      border-color: rgba(105,182,255,.34);
      background: rgba(48, 107, 160, .18);
    }
    .install-button.installed {
      color: #dfffe7;
      border-color: rgba(121,242,154,.24);
      background: rgba(60,133,79,.12);
    }
    .install-icon {
      width: 12px;
      height: 12px;
      display: block;
      flex: 0 0 auto;
    }
    .update-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex: 0 0 auto;
      background: #7f9485;
      box-shadow: 0 0 0 3px rgba(127,148,133,.08);
    }
    .update-button.available {
      color: #dfffe7;
      border-color: rgba(121,242,154,.34);
      background: rgba(60, 133, 79, .18);
    }
    .update-button.available .update-dot {
      background: var(--good);
      box-shadow: 0 0 0 3px rgba(121,242,154,.12), 0 0 10px rgba(121,242,154,.35);
    }
    .update-button.checking .update-dot { animation: pulse 1s ease-in-out infinite; }
    @keyframes pulse { 50% { opacity: .35; transform: scale(.72); } }

    .install-tip {
      position: absolute;
      z-index: 40;
      left: 50%;
      bottom: calc(166px + var(--safe-bottom));
      width: min(360px, calc(100% - 28px));
      padding: 10px 12px;
      border: 1px solid rgba(105,182,255,.26);
      border-radius: 13px;
      background: rgba(8, 18, 12, .96);
      box-shadow: 0 14px 34px rgba(0,0,0,.32);
      color: #e8f4ec;
      font-size: 11px;
      font-weight: 720;
      line-height: 1.4;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, 8px);
      transition: opacity .18s ease, transform .18s ease;
    }
    .install-tip.show { opacity: 1; transform: translate(-50%, 0); }

    .card {
      border: 1px solid var(--line);
      background: var(--surface);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border-radius: 14px;
      box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
    }

    .hud-bar {
      width: 100%;
      max-width: 680px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      pointer-events: auto;
    }

    .hud-col { display: flex; align-items: center; min-width: 0; }
    .hud-brand-col {
      flex: 0 0 auto;
      gap: 6px;
    }
    .hud-brand-col .brand-mark {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: #07100b;
      background: linear-gradient(145deg, #8affaa, #4ecb78);
      box-shadow: 0 7px 18px rgba(74, 224, 115, .15);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: -.08em;
    }

    .hud-action-btn {
      width: 32px;
      height: 32px;
      min-height: 32px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255,255,255,.055);
      color: #dfe8e2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      touch-action: manipulation;
      transition: background .15s ease, border-color .15s ease, color .15s ease;
    }
    .hud-action-btn:active { transform: translateY(1px); background: rgba(255,255,255,.1); }
    .hud-action-btn.active {
      border-color: rgba(105,182,255,.45);
      background: rgba(48,107,160,.22);
      color: #69b6ff;
    }
    .hud-action-icon { width: 14px; height: 14px; display: block; fill: currentColor; }
    .hud-action-icon[hidden] { display: none; }

    .hud-vitals-col {
      flex: 1 1 auto;
      flex-direction: column;
      gap: 4px;
      padding: 0 2px;
    }

    .hud-bars-row {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hud-meter {
      flex: 1 1 50%;
      min-width: 0;
    }
    .meter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      line-height: 1;
    }
    .meter-head .label {
      font-size: 8px;
      color: var(--muted);
      letter-spacing: .06em;
      text-transform: uppercase;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .meter-head .value {
      font-size: 10px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .bar {
      position: relative;
      height: 5px;
      margin-top: 3px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.085);
    }
    .bar > i {
      position: absolute;
      inset: 0 auto 0 0;
      width: 100%;
      border-radius: inherit;
      transition: width .12s linear;
    }
    #hpFill { background: linear-gradient(90deg, #ff5369, #ff9676); }
    #xpFill { background: linear-gradient(90deg, #4e9fff, #81d1ff); }
    #shieldFill {
      top: 0;
      height: 2px;
      background: linear-gradient(90deg, #3399ff, #8ae0ff);
      box-shadow: 0 0 6px rgba(105, 182, 255, .6);
      z-index: 2;
    }
    .shield-badge {
      font-size: 8px;
      font-weight: 900;
      color: #69b6ff;
      margin-left: 3px;
      transition: opacity .15s ease, color .15s ease;
    }
    .shield-badge.depleted {
      opacity: .45;
      color: var(--muted);
    }

    .hud-metrics-row {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }
    .hud-metrics-row .metric {
      min-width: 0;
      padding: 2px 4px;
      border-radius: 6px;
      background: var(--surface-soft);
      text-align: center;
    }
    .hud-metrics-row .metric span {
      display: block;
      font-size: 7.5px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      font-weight: 800;
      line-height: 1.1;
    }
    .hud-metrics-row .metric b {
      display: block;
      margin-top: 1px;
      font-size: 10px;
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }

    .hud-score-col {
      flex: 0 0 auto;
      align-items: center;
      gap: 6px;
      text-align: right;
    }
    .score-box { min-width: 56px; }
    .score-box .label {
      font-size: 7.5px;
      color: var(--muted);
      letter-spacing: .06em;
      text-transform: uppercase;
      font-weight: 800;
      line-height: 1;
    }
    .score-box .score-value {
      margin-top: 1px;
      font-size: 17px;
      line-height: 1;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
      letter-spacing: -.03em;
    }
    .score-box .best-line {
      margin-top: 2px;
      font-size: 7.5px;
      color: var(--muted);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      line-height: 1;
    }
    .score-box .best-line strong {
      color: var(--text);
      font-size: 9px;
    }

    .settings-diagnostics {
      margin-top: 4px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .diagnostics-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 4px;
    }
    .fps-line {
      font-size: 9px;
      color: #88a895;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .07em;
      font-variant-numeric: tabular-nums;
    }
    .fps-line strong { color: #bfe5c8; font-size: 11px; }
    .perf-line {
      font-size: 8.5px;
      color: #799486;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .055em;
      white-space: nowrap;
    }
    .perf-line strong { color: #87d89b; font-size: 9.5px; }
    .perf-line.eco strong { color: #e8b45c; }

    .message,
    .hint-pill {
      position: absolute;
      z-index: 16;
      left: 50%;
      transform: translateX(-50%);
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: rgba(5, 10, 7, .82);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      pointer-events: none;
      white-space: nowrap;
    }

    .message {
      top: 28%;
      padding: 8px 12px;
      max-width: calc(100vw - 24px);
      white-space: normal;
      text-align: center;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .045em;
      opacity: 0;
      transform: translate(-50%, -7px);
      transition: opacity .18s ease, transform .18s ease;
    }
    .message.show { opacity: 1; transform: translate(-50%, 0); }

    .hint-pill {
      bottom: calc(136px + var(--safe-bottom));
      padding: 6px 10px;
      color: rgba(236, 246, 239, .62);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: 1;
      transition: opacity .55s ease;
    }
    .hint-pill.hide { opacity: 0; }

    .center-overlay {
      position: absolute;
      z-index: 15;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      pointer-events: none;
    }

    .upgrade-modal {
      display: flex;
      flex-direction: column;
      max-height: calc(100dvh - 32px);
      width: min(380px, calc(100vw - 28px));
      padding: 20px 18px 16px;
      text-align: left;
      background: rgba(9, 17, 13, .98);
      box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
      border: 1px solid rgba(121, 242, 154, .3);
      border-radius: 18px;
      pointer-events: auto;
      opacity: 0;
      transform: translateY(12px) scale(.96);
      transition: opacity .2s ease, transform .2s ease;
    }
    .center-overlay.upgrade-open {
      z-index: 26;
      padding: 14px;
      pointer-events: auto;
      background: rgba(0, 0, 0, .25);
    }
    .upgrade-modal.show { opacity: 1; transform: translateY(0) scale(1); }
    .upgrade-modal[hidden] { display: none; }
    .upgrade-modal:focus { outline: none; }

    .upgrade-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .upgrade-badge {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: rgba(121, 242, 154, .15);
      border: 1px solid rgba(121, 242, 154, .35);
      color: var(--good);
      display: grid;
      place-items: center;
      font-size: 18px;
      flex: 0 0 auto;
    }
    .upgrade-title {
      margin: 0;
      font-size: 17px;
      font-weight: 950;
      letter-spacing: .02em;
      color: var(--text);
      line-height: 1.2;
    }
    .upgrade-subtitle {
      margin: 2px 0 0;
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.2;
    }

    .upgrade-cards {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 2px;
      touch-action: pan-y;
    }
    .upgrade-card {
      flex-shrink: 0;
      min-height: 58px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 13px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line);
      color: var(--text);
      cursor: pointer;
      text-align: left;
      transition: background .15s ease, border-color .15s ease, transform .12s ease;
      touch-action: pan-y;
      width: 100%;
    }
    .upgrade-card:hover, .upgrade-card:focus-visible {
      background: rgba(121, 242, 154, .08);
      border-color: rgba(121, 242, 154, .45);
      outline: none;
      transform: translateY(-1px);
    }
    .upgrade-card:active {
      transform: scale(.98);
      background: rgba(121, 242, 154, .14);
    }
    .upgrade-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(255,255,255,.05);
      display: grid;
      place-items: center;
      font-size: 18px;
      flex: 0 0 auto;
      border: 1px solid rgba(255,255,255,.06);
    }
    .upgrade-card-content {
      flex: 1 1 auto;
      min-width: 0;
    }
    .upgrade-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .upgrade-card-name {
      font-size: 12.5px;
      font-weight: 900;
      letter-spacing: .02em;
      color: #fff;
    }
    .upgrade-card-level {
      flex-shrink: 0;
      font-size: 8.5px;
      font-weight: 900;
      padding: 1.5px 5.5px;
      border-radius: 999px;
      background: rgba(105, 182, 255, .15);
      border: 1px solid rgba(105, 182, 255, .3);
      color: #81d1ff;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .upgrade-card.evolution {
      border-color: rgba(255, 215, 0, .6);
      background: linear-gradient(145deg, rgba(255, 215, 0, .12), rgba(255, 140, 0, .06));
      box-shadow: 0 4px 20px rgba(255, 215, 0, .22), inset 0 0 14px rgba(255, 215, 0, .08);
    }
    .upgrade-card.evolution:hover, .upgrade-card.evolution:focus-visible {
      border-color: #ffd700;
      background: linear-gradient(145deg, rgba(255, 215, 0, .20), rgba(255, 140, 0, .12));
    }
    .upgrade-card-level.evo {
      color: #ffd700;
      background: rgba(255, 215, 0, .25);
      border-color: rgba(255, 215, 0, .5);
      box-shadow: 0 0 8px rgba(255, 215, 0, .4);
    }
    .upgrade-card-desc {
      margin-top: 3px;
      font-size: 10.5px;
      color: var(--muted);
      line-height: 1.3;
      font-weight: 650;
    }
    .upgrade-card-key {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
    }
    .upgrade-keyboard-hint {
      flex-shrink: 0;
      margin: 10px 0 0;
      text-align: center;
      font-size: 9.5px;
      color: var(--muted);
      font-weight: 750;
      letter-spacing: .03em;
    }

    .upgrade-auto-row {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      margin-top: 8px;
      color: #c8d8cc;
      font-size: 10px;
      line-height: 1.3;
      font-weight: 750;
      cursor: pointer;
      touch-action: manipulation;
    }
    .upgrade-auto-row input {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: var(--good);
    }
    .upgrade-auto-label { flex: 1 1 auto; min-width: 0; }
    .upgrade-auto-countdown {
      flex: 0 0 auto;
      color: var(--good);
      font-variant-numeric: tabular-nums;
      font-size: 10px;
      font-weight: 900;
    }
    .upgrade-auto-countdown[hidden],
    .upgrade-auto-progress[hidden] { display: none; }
    .upgrade-auto-progress {
      flex-shrink: 0;
      height: 4px;
      margin: -4px 0 0 26px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.1);
    }
    .upgrade-auto-progress i {
      display: block;
      width: 100%;
      height: 100%;
      transform: scaleX(0);
      transform-origin: left center;
      border-radius: inherit;
      background: linear-gradient(90deg, #79f29a, #ffe08a);
      will-change: transform;
    }

    .pause-card {
      width: min(320px, calc(100vw - 32px));
      padding: 24px 20px;
      text-align: center;
      background: rgba(9,16,12,.97);
      box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);
      pointer-events: auto;
      opacity: 0;
      transform: translateY(10px) scale(.96);
      transition: opacity .2s ease, transform .2s ease;
    }
    .pause-card.show { opacity: 1; transform: translateY(0) scale(1); }
    .pause-card[hidden] { display: none; }
    .pause-badge {
      width: 40px;
      height: 40px;
      margin: 0 auto 10px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(105,182,255,.12);
      border: 1px solid rgba(105,182,255,.24);
      color: var(--xp);
      font-size: 16px;
      font-weight: 950;
    }
    .pause-card h2 {
      margin: 0 0 6px;
      font-size: clamp(22px, 6vw, 30px);
      letter-spacing: -.03em;
    }
    .pause-subtitle {
      margin: 0 0 18px;
      font-size: 11px;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: .02em;
    }
    .resume-button {
      display: block;
      width: 100%;
      min-height: 44px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(145deg, #8affaa, #4ecb78);
      color: #07100b;
      font-size: 13px;
      font-weight: 950;
      letter-spacing: .05em;
      cursor: pointer;
      touch-action: manipulation;
    }
    .resume-button:active { transform: translateY(1px); }
    .resume-button:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 3px; }

    .gameover-new-best {
      display: inline-block;
      margin: 4px auto 8px;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(232, 180, 92, .18);
      border: 1px solid rgba(232, 180, 92, .45);
      color: #ffd666;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      animation: pulse 1.2s ease-in-out infinite;
    }
    .gameover-new-best[hidden] { display: none; }

    .gameover {
      width: min(400px, calc(100vw - 32px));
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 24px 20px 22px;
      text-align: center;
      background: rgba(9,16,12,.97);
      box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);
      pointer-events: auto;
      opacity: 0;
      transform: translateY(10px) scale(.96);
      transition: opacity .22s ease, transform .22s ease;
    }
    .gameover.show { opacity: 1; transform: translateY(0) scale(1); }
    .gameover[hidden] { display: none; }
    .gameover:focus { outline: none; }
    .gameover-badge {
      width: 44px;
      height: 44px;
      margin: 0 auto 11px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(255,97,116,.11);
      border: 1px solid rgba(255,97,116,.22);
      color: var(--danger);
      font-size: 20px;
      font-weight: 950;
    }
    .gameover h1 { margin: 0 0 4px; font-size: clamp(26px, 8vw, 40px); letter-spacing: -.045em; }
    .gameover-score-label {
      margin-top: 16px;
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 800;
    }
    .gameover-score {
      margin-top: 2px;
      font-size: clamp(38px, 12vw, 56px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: -.03em;
      font-variant-numeric: tabular-nums;
      color: var(--good);
      text-shadow: 0 0 24px rgba(121,242,154,.25);
    }
    .gameover-rank-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 8px auto 0;
      padding: 3px 14px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .rank-s {
      background: rgba(255, 215, 0, .2);
      border: 1.5px solid #ffd700;
      color: #fff275;
      box-shadow: 0 0 14px rgba(255, 215, 0, .35);
    }
    .rank-a {
      background: rgba(255, 150, 50, .2);
      border: 1.5px solid #ff9b43;
      color: #ffbe6b;
    }
    .rank-b {
      background: rgba(121, 242, 154, .2);
      border: 1.5px solid #79f29a;
      color: #a8f7be;
    }
    .rank-c {
      background: rgba(150, 170, 160, .15);
      border: 1.5px solid #95a69a;
      color: #dfe8e2;
    }
    .gameover-stat-row {
      margin-top: 14px;
      display: flex;
      justify-content: center;
      gap: 16px;
    }
    .gameover-stat {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
      font-weight: 900;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .gameover-stat-icon { font-size: 15px; }

    .gameover-build-section {
      margin-top: 14px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }
    .gameover-build-title {
      font-size: 8.5px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .1em;
      font-weight: 850;
      text-align: center;
    }
    .gameover-build-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
      margin-top: 8px;
    }
    .build-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 7px;
      border-radius: 8px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--line);
      font-size: 10px;
      font-weight: 850;
      color: var(--text);
    }
    .build-chip.max {
      border-color: rgba(255, 214, 102, .45);
      background: rgba(255, 214, 102, .1);
    }
    .build-chip.empty {
      color: var(--muted);
      font-style: italic;
      padding: 3px 8px;
    }
    .build-chip-icon { font-size: 11px; }
    .build-chip-name { font-size: 9.5px; }
    .build-chip-level {
      font-size: 8px;
      font-weight: 900;
      color: #81d1ff;
      padding: 1px 4px;
      border-radius: 4px;
      background: rgba(105, 182, 255, .15);
      text-transform: uppercase;
    }
    .build-chip.max .build-chip-level {
      color: #ffd700;
      background: rgba(255, 215, 0, .2);
    }
    .build-chip.evo {
      border-color: #ffd700;
      background: rgba(255, 215, 0, .16);
      box-shadow: 0 0 10px rgba(255, 215, 0, .32);
    }
    .build-chip.evo .build-chip-level {
      color: #ffd700;
      background: rgba(255, 215, 0, .28);
    }

    .gameover-actions {
      margin-top: 16px;
      display: flex;
      gap: 8px;
    }
    .gameover-actions .restart-button {
      margin-top: 0;
      flex: 1 1 auto;
    }
    .share-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      min-height: 48px;
      border-radius: 14px;
      border: 1px solid rgba(121, 242, 154, .35);
      background: rgba(60, 133, 79, .14);
      color: #c9f5d4;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .04em;
      cursor: pointer;
      touch-action: manipulation;
      white-space: nowrap;
      transition: background .15s ease, border-color .15s ease;
    }
    .share-button:active { transform: translateY(1px); background: rgba(60, 133, 79, .24); }
    .share-button:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 3px; }
    .restart-button {
      display: block;
      width: 100%;
      margin-top: 22px;
      min-height: 48px;
      border: none;
      border-radius: 14px;
      background: linear-gradient(145deg, #8affaa, #4ecb78);
      color: #07100b;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .05em;
      cursor: pointer;
      touch-action: manipulation;
    }
    .restart-button:active { transform: translateY(1px); }
    .restart-button:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 3px; }
    .gameover .restart { margin: 10px 0 0; color: var(--muted); font-weight: 800; font-size: 10px; letter-spacing: .03em; }

    .controls-wrap {
      position: absolute;
      z-index: 25;
      left: 0;
      right: 0;
      bottom: max(6px, var(--safe-bottom));
      height: 124px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 0 max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
      pointer-events: none;
    }

    .joystick-zone {
      position: fixed;
      inset: 0;
      width: auto;
      max-width: none;
      height: auto;
      pointer-events: none;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .dash-action {
      position: relative;
      flex: 0 0 60px;
      width: 60px;
      height: 60px;
      min-height: 60px;
      padding: 7px 4px 10px;
      border: 1px solid rgba(121, 242, 154, .58);
      border-radius: 50%;
      background: radial-gradient(circle at 38% 30%, rgba(45, 100, 59, .96), rgba(8, 20, 12, .98));
      box-shadow: 0 6px 18px rgba(0, 0, 0, .48), inset 0 0 12px rgba(121, 242, 154, .14);
      color: #eaffed;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      cursor: pointer;
      pointer-events: auto;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
      transition: opacity .12s ease, border-color .12s ease, transform .12s ease;
    }
    .dash-action[aria-disabled="true"] { opacity: .72; border-color: rgba(228, 255, 235, .35); }
    .dash-action:active { transform: scale(.96); }
    .dash-action:focus-visible { outline: 2px solid #f5fff7; outline-offset: 3px; }
    .dash-action-icon { font-size: 20px; line-height: 17px; font-weight: 1000; letter-spacing: -.18em; transform: translateX(-1px); }
    .dash-action-label { font-size: 9px; line-height: 12px; font-weight: 950; letter-spacing: .07em; }
    .dash-action-status {
      position: absolute;
      top: 1px;
      right: 1px;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      border: 1px solid rgba(255, 255, 255, .44);
      border-radius: 999px;
      background: #07100b;
      color: #fff;
      font-size: 9px;
      line-height: 16px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .dash-action-status:empty { display: none; }
    .dash-cooldown-track { position: absolute; left: 13px; right: 13px; bottom: 6px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.26); overflow: hidden; }
    .dash-cooldown-track > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #baffc9; transition: width .1s linear; }

    .joystick-base {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 104px;
      height: 104px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(20, 36, 26, .55) 0%, rgba(9, 18, 13, .85) 100%);
      border: 1.5px solid rgba(121, 242, 154, .22);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .32), inset 0 0 16px rgba(121, 242, 154, .05);
      display: grid;
      place-items: center;
      pointer-events: none;
      transition: border-color .15s ease, box-shadow .15s ease, opacity .2s ease;
      opacity: 0;
    }

    .joystick-base.active {
      border-color: rgba(121, 242, 154, .55);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 0 16px rgba(121, 242, 154, .22), inset 0 0 16px rgba(121, 242, 154, .12);
      opacity: 1;
    }

    .joystick-ring {
      position: absolute;
      inset: 8px;
      border-radius: 50%;
      border: 1px dashed rgba(228, 255, 235, .12);
      pointer-events: none;
    }

    .ring-pip {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(121, 242, 154, .45);
    }
    .pip-n { top: 2px; left: calc(50% - 2px); }
    .pip-s { bottom: 2px; left: calc(50% - 2px); }
    .pip-w { left: 2px; top: calc(50% - 2px); }
    .pip-e { right: 2px; top: calc(50% - 2px); }

    .joystick-knob {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #4ea366 0%, #20442c 100%);
      border: 1.5px solid rgba(127, 242, 157, .5);
      box-shadow: 0 4px 14px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .2);
      display: grid;
      place-items: center;
      will-change: transform;
      pointer-events: none;
    }

    .joystick-knob::after {
      content: "";
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--good);
      opacity: .8;
      box-shadow: 0 0 8px rgba(121, 242, 154, .65);
    }

    .desktop-hint {
      position: absolute;
      z-index: 14;
      right: max(13px, var(--safe-right));
      bottom: max(13px, var(--safe-bottom));
      color: rgba(255,255,255,.38);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .035em;
      pointer-events: none;
      display: none;
    }

    .damage-flash {
      position: absolute;
      z-index: 11;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(circle, transparent 45%, rgba(255,44,66,.25) 100%);
      transition: opacity .12s ease;
    }
    .damage-flash.show { opacity: 1; }

    @media (max-width: 500px) {
      .upgrade-card-key { display: none; }
      .upgrade-keyboard-hint { display: none; }
    }

    @media (min-width: 800px) and (pointer: fine) {
      .controls-wrap { display: none; }
      .desktop-hint { display: block; }
      .hint-pill { bottom: 24px; }
      .hud-bar { max-width: 680px; }
    }

    @media (max-width: 370px) {
      .hud-bar { gap: 5px; padding: 4px 6px; }
      .hud-brand-col .brand-mark { display: none; }
      .score-box { min-width: 48px; }
      .score-box .score-value { font-size: 15px; }
      .meter-head .value { font-size: 9px; }
    }

    @media (max-width: 480px) {
      .settings-panel {
        left: max(10px, var(--safe-left));
        right: max(10px, var(--safe-right));
        top: auto;
        bottom: max(10px, var(--safe-bottom));
        width: auto;
        border-radius: 18px;
        transform: translateY(10px) scale(1);
      }
      .settings-panel.show { transform: translateY(0) scale(1); }
    }

    @media (max-height: 680px) {
      .appbar { padding-top: calc(4px + var(--safe-top)); }
      .boss-bar-wrap { top: calc(50px + var(--safe-top)); width: min(400px, calc(100% - 20px)); }
      .hud-bar { padding: 4px 8px; }
      .hud-brand-col .brand-mark { width: 28px; height: 28px; font-size: 12px; }
      .hud-action-btn { width: 28px; height: 28px; min-height: 28px; }
      .controls-wrap { height: 104px; bottom: max(2px, calc(var(--safe-bottom) - 4px)); }
      .dash-action { flex-basis: 54px; width: 54px; height: 54px; min-height: 54px; }
      .joystick-base { width: 88px; height: 88px; }
      .joystick-knob { width: 36px; height: 36px; }
      .hint-pill { bottom: calc(114px + var(--safe-bottom)); }
    }

    @media (orientation: landscape) and (max-height: 540px) {
      .appbar { justify-content: flex-start; }
      .boss-bar-wrap { top: calc(50px + var(--safe-top)); left: auto; right: max(160px, var(--safe-right)); transform: none; width: min(340px, calc(100% - 320px)); }
      .boss-bar-wrap.show { transform: none; }
      .hud-bar { width: min(520px, calc(100% - 150px)); padding: 4px 8px; }
      .controls-wrap { left: auto; right: max(10px, var(--safe-right)); width: 220px; height: 110px; bottom: max(6px, var(--safe-bottom)); padding: 0 8px; }
      .joystick-zone { width: auto; max-width: none; }
      .dash-action { flex-basis: 56px; width: 56px; height: 56px; min-height: 56px; }
      .joystick-base { width: 88px; height: 88px; }
      .joystick-knob { width: 36px; height: 36px; }
      .hint-pill { left: auto; right: max(230px, calc(220px + var(--safe-right))); bottom: max(14px, var(--safe-bottom)); transform: none; }
      .install-tip { left: auto; right: 164px; bottom: max(14px, var(--safe-bottom)); transform: translateY(8px); width: min(330px, calc(100% - 330px)); }
      .install-tip.show { transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    }

/* Keep the stage and encounter within the existing wave metric. */
.hud-metrics-row .wave-metric b,
.hud-metrics-row .encounter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legacy-best-note { max-width: 230px; margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }

.upgrade-build-summary {
  flex-shrink: 0;
  margin: 0 0 10px;
  color: #a8d7ef;
  font-size: 10px;
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.upgrade-card.build-choice { border-color: rgba(129, 209, 255, .4); background: rgba(105, 182, 255, .08); }
.upgrade-card.build-choice:focus-visible { outline: 2px solid #81d1ff; outline-offset: -2px; }
#buildPathIcon { color: #81d1ff; }
#buildPathIcon.burst-active { color: #ffd27a; }
.meter-xp .meter-head .label { display: flex; align-items: center; gap: 2px; min-width: 0; }
.meter-xp .label > [data-i18n] { overflow: hidden; text-overflow: ellipsis; }
#levelText, #buildPathIcon { flex-shrink: 0; }
@media (max-height: 450px) {
  .upgrade-modal { padding: 12px; }
  .upgrade-header { margin-bottom: 6px; }
  .upgrade-build-summary { margin-bottom: 6px; }
}