* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #04020B;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #F8FAFC;
      touch-action: none;
    }
    #game-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1;
      display: block;
    }
    .screen-overlay {
      position: fixed;
      inset: 0;
      z-index: 10;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: calc(env(safe-area-inset-top, 12px) + 10px) 18px calc(env(safe-area-inset-bottom, 12px) + 10px) 18px;
      pointer-events: none;
    }
    .screen-overlay > * {
      pointer-events: auto;
    }

    /* ========================================================================
       1. MENU SCREEN (100% 1:1 Match with MenuScreen.kt)
       ======================================================================== */
    .menu-top-bar {
      width: 100%;
      max-width: 430px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .pill-currency {
      background: rgba(5, 11, 20, 0.88);
      border: 1px solid rgba(250, 204, 21, 0.55);
      border-radius: 10px;
      padding: 6px 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 900;
      color: #FACC15;
      cursor: pointer;
    }
    .pill-vip-badge {
      color: #4ADE80;
      font-size: 8.5px;
      font-weight: 900;
      letter-spacing: 0.5px;
    }
    .pill-lobby {
      background: rgba(5, 11, 20, 0.88);
      border: 1px solid rgba(99, 102, 241, 0.45);
      border-radius: 10px;
      padding: 6px 10px;
      font-size: 9.5px;
      font-weight: 900;
      letter-spacing: 0.6px;
      color: #C7D2FE;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .lobby-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ADE80;
      transition: background-color 0.25s ease;
    }

    .menu-center-hero {
      width: 100%;
      max-width: 430px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    #menu-turntable-canvas {
      width: 138px;
      height: 138px;
      display: block;
      margin-bottom: 2px;
      touch-action: none;
    }
    .title-3d-wrap {
      position: relative;
      margin: 2px 0 2px 0;
    }
    .title-3d-shadow {
      position: absolute;
      inset: 0;
      transform: translate(2.5px, 3px);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 2px;
      color: rgba(79, 70, 229, 0.85);
      pointer-events: none;
      white-space: nowrap;
    }
    .title-3d-main {
      position: relative;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 2px;
      color: #FFFFFF;
      white-space: nowrap;
    }
    .menu-sub-banner {
      font-size: 9.5px;
      font-weight: 900;
      letter-spacing: 1.4px;
      color: #4ADE80;
      margin-bottom: 8px;
      transition: color 0.25s ease;
    }

    /* Flagship Artist Stage Console Card (1:1 with MenuScreen.kt) */
    .console-card {
      width: 100%;
      max-width: 430px;
      background: linear-gradient(180deg, rgba(8, 19, 34, 0.95), rgba(4, 8, 17, 0.98));
      border: 1.5px solid #4ADE80;
      border-radius: 18px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75);
      transition: border-color 0.25s ease;
    }
    .track-deck-row {
      display: flex;
      gap: 8px;
      width: 100%;
    }
    .track-card {
      flex: 1;
      border-radius: 11px;
      background: #050A12;
      border: 1px solid rgba(255, 255, 255, 0.14);
      padding: 8px 10px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 2px;
      transition: all 0.2s ease;
    }
    .track-card.selected {
      background: linear-gradient(90deg, #0E291E, #15193C);
      border: 1.6px solid #4ADE80;
      box-shadow: 0 0 16px rgba(74, 222, 128, 0.22);
    }
    .track-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.6px;
    }
    .track-card-bpm {
      color: #A5B4FC;
    }
    .track-card.selected .track-card-bpm {
      color: #4ADE80;
    }
    .track-card-stars {
      color: #FACC15;
      font-size: 10px;
      font-weight: 900;
    }
    .track-card-title {
      font-size: 13.5px;
      font-weight: 900;
      letter-spacing: 0.5px;
      color: #FFFFFF;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .remix-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 8.5px;
      font-weight: 900;
      letter-spacing: 0.9px;
    }
    .remix-pills-row {
      display: flex;
      gap: 6px;
      width: 100%;
    }
    .remix-pill {
      flex: 1;
      border-radius: 8px;
      background: #050911;
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 6px 4px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.18s ease;
    }
    .remix-pill.selected {
      border-width: 1.4px;
    }
    .remix-pill-tag {
      font-size: 10px;
      font-weight: 900;
      line-height: 1.1;
    }
    .remix-pill-id {
      font-size: 7.5px;
      font-weight: 700;
      line-height: 1.1;
      margin-top: 1px;
    }

    .mastery-checklist-banner {
      font-size: 8.5px;
      font-weight: 600;
      color: rgba(199, 210, 254, 0.85);
      text-align: center;
      letter-spacing: 0.3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .btn-launch-stage {
      width: 100%;
      height: 48px;
      border-radius: 12px;
      background: linear-gradient(90deg, #16A34A, #0D9488, #4F46E5);
      border: 1.5px solid #4ADE80;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 18px rgba(22, 163, 74, 0.35);
      transition: all 0.15s ease;
    }
    .btn-launch-stage:active {
      transform: scale(0.98);
    }
    .btn-launch-main {
      font-size: 13.5px;
      font-weight: 900;
      letter-spacing: 1.2px;
      color: #FFFFFF;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .bento-row {
      width: 100%;
      max-width: 430px;
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
    .bento-tile {
      height: 58px;
      border-radius: 13px;
      background: linear-gradient(180deg, #0A111E, #04070D);
      border: 1.2px solid rgba(255, 255, 255, 0.25);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 6px 8px;
      transition: transform 0.12s ease;
    }
    .bento-tile:active {
      transform: scale(0.97);
    }
    .bento-title {
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 0.6px;
      color: #FFFFFF;
      white-space: nowrap;
    }
    .bento-sub {
      font-size: 8.5px;
      font-weight: 600;
      letter-spacing: 0.4px;
      margin-top: 2px;
      white-space: nowrap;
    }

    /* Social Brand Icons Footer (1:1 SocialBrandIcons.kt) */
    .social-footer {
      width: 100%;
      max-width: 430px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
    }
    .social-label {
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 1.4px;
      color: rgba(165, 180, 252, 0.78);
    }
    .social-icons-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .social-circle-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(14, 10, 31, 0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: transform 0.15s ease;
    }
    .social-circle-btn:active {
      transform: scale(0.92);
    }

    /* ========================================================================
       2. IN-GAME HUD (1:1 Match with GameHUD.kt & TrackRevealOverlay.kt)
       ======================================================================== */
    #screen-PLAYING {
      justify-content: space-between;
      pointer-events: none;
    }
    .hud-top-row {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      pointer-events: none;
    }
    .hud-left-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
      pointer-events: none;
    }
    .hud-score-chip {
      background: rgba(12, 9, 26, 0.84);
      border: 1.2px solid rgba(56, 189, 248, 0.55);
      border-radius: 16px;
      padding: 6px 14px;
      display: inline-flex;
      flex-direction: column;
      min-width: 105px;
    }
    .hud-chip-label {
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 1.8px;
      color: #38BDF8;
    }
    .hud-chip-val {
      font-size: 24px;
      font-weight: 900;
      color: #F8FAFC;
      line-height: 1.1;
    }
    .hud-sub-pills {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .hud-phase-pill {
      background: rgba(12, 9, 26, 0.84);
      border: 1px solid rgba(192, 132, 252, 0.52);
      border-radius: 50px;
      padding: 4px 11px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1.3px;
      color: #C084FC;
    }
    .hud-combo-pill {
      background: rgba(40, 26, 8, 0.90);
      border: 1.2px solid #FACC15;
      border-radius: 50px;
      padding: 4px 11px;
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 1.1px;
      color: #FACC15;
      display: none;
    }
    .hud-pu-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 2px;
    }
    .pu-pill {
      background: rgba(12, 9, 26, 0.86);
      border: 1px solid #38BDF8;
      border-radius: 50px;
      padding: 3px 9px;
      font-size: 9.5px;
      font-weight: 900;
      letter-spacing: 0.8px;
    }

    .hud-right-group {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      pointer-events: auto;
    }
    .track-reveal-card {
      width: 92px;
      background: rgba(12, 9, 26, 0.88);
      border: 1px solid rgba(56, 189, 248, 0.42);
      border-radius: 16px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
    }
    .reveal-canvas-wrap {
      position: relative;
      width: 76px;
      height: 76px;
      border-radius: 12px;
      overflow: hidden;
    }
    #hud-reveal-canvas {
      width: 76px;
      height: 76px;
      display: block;
    }
    .reveal-pct-pill {
      position: absolute;
      bottom: 4px;
      right: 4px;
      background: rgba(5, 3, 12, 0.86);
      border-radius: 6px;
      padding: 1px 5px;
      font-size: 9px;
      font-weight: 900;
      color: #38BDF8;
    }
    .reveal-track-name {
      font-size: 8.5px;
      font-weight: 900;
      letter-spacing: 0.7px;
      color: #F8FAFC;
      margin-top: 4px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
    .reveal-track-rem {
      font-size: 7.5px;
      font-weight: 800;
      color: #94A3B8;
      margin-top: 1px;
    }

    .btn-pause-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(12, 9, 26, 0.85);
      border: 1px solid rgba(148, 163, 184, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
    }
    .btn-pause-icon img {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    /* Choreographed Section Banner */
    #hud-choreo-banner {
      position: fixed;
      top: 132px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(14, 10, 31, 0.90);
      border: 1.5px solid #FACC15;
      border-radius: 50px;
      padding: 6px 20px;
      text-align: center;
      display: none;
      pointer-events: none;
      box-shadow: 0 0 20px rgba(250, 204, 21, 0.35);
    }
    #hud-choreo-title {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 2px;
      color: #FACC15;
    }
    #hud-choreo-sub {
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 1.2px;
      color: #E2E8F0;
    }

    /* Bottom-Right Focus Slow-Mo Button */
    .hud-bottom-row {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      pointer-events: none;
    }
    .btn-focus-wrap {
      pointer-events: auto;
      background: rgba(14, 10, 31, 0.90);
      border: 1.5px solid rgba(192, 132, 252, 0.75);
      border-radius: 18px;
      padding: 8px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 112px;
      cursor: pointer;
    }
    .btn-focus-label {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1.4px;
    }
    .focus-bar-bg {
      width: 84px;
      height: 5px;
      background: rgba(255, 255, 255, 0.14);
      border-radius: 4px;
      overflow: hidden;
    }
    #hud-focus-fill {
      width: 100%;
      height: 100%;
      background: #C084FC;
    }

    /* ========================================================================
       3. MODAL & FULL-SCREEN PANELS (Pause, GameOver, Vault, Studio Customizer)
       ======================================================================== */
    .modal-backdrop {
      background: rgba(4, 2, 11, 0.82);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      justify-content: center;
    }
    .glass-modal-card {
      width: 100%;
      max-width: 410px;
      max-height: 90vh;
      overflow-y: auto;
      background: linear-gradient(180deg, rgba(20, 15, 44, 0.96), rgba(10, 7, 24, 0.98));
      border: 1.5px solid rgba(56, 189, 248, 0.48);
      border-radius: 24px;
      padding: 20px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.78);
    }
    .modal-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .modal-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 1.8px;
      color: #F8FAFC;
    }
    .btn-close-pill {
      background: rgba(30, 41, 59, 0.85);
      border: 1px solid rgba(148, 163, 184, 0.4);
      border-radius: 50px;
      padding: 5px 12px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1px;
      color: #CBD5E1;
      cursor: pointer;
    }
    .btn-action-primary {
      width: 100%;
      height: 48px;
      border-radius: 14px;
      background: linear-gradient(90deg, #0EA5E9, #6366F1);
      border: 1px solid rgba(255, 255, 255, 0.65);
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 1.6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .btn-action-gold {
      width: 100%;
      height: 48px;
      border-radius: 14px;
      background: linear-gradient(90deg, #F59E0B, #EAB308);
      border: 1px solid #FEF08A;
      color: #090614;
      font-size: 12.5px;
      font-weight: 900;
      letter-spacing: 1.4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .btn-action-secondary {
      width: 100%;
      height: 44px;
      border-radius: 14px;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(148, 163, 184, 0.38);
      color: #CBD5E1;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    /* Live Draggable Preview Box inside Studio Customizer */
    .preview-stage-box {
      position: relative;
      width: 100%;
      height: 132px;
      border-radius: 18px;
      overflow: hidden;
      border: 1.5px solid rgba(56, 189, 248, 0.48);
      background: #05030C;
    }
    #customizer-preview-canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .preview-badge-tl {
      position: absolute;
      top: 8px;
      left: 8px;
      background: rgba(8, 6, 18, 0.82);
      border-radius: 6px;
      padding: 2px 7px;
      font-size: 8.5px;
      font-weight: 900;
      letter-spacing: 1.1px;
      color: #38BDF8;
      pointer-events: none;
    }
    .preview-badge-br {
      position: absolute;
      bottom: 6px;
      right: 8px;
      font-size: 8px;
      font-weight: 700;
      color: #94A3B8;
      pointer-events: none;
    }

    .cust-tabs-row {
      display: flex;
      gap: 6px;
      background: rgba(9, 6, 20, 0.9);
      padding: 4px;
      border-radius: 12px;
    }
    .cust-tab {
      flex: 1;
      text-align: center;
      padding: 7px 0;
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 1px;
      color: #94A3B8;
      border-radius: 9px;
      cursor: pointer;
    }
    .cust-tab.active {
      background: rgba(56, 189, 248, 0.2);
      color: #38BDF8;
      border: 1px solid rgba(56, 189, 248, 0.55);
    }

    .cust-item-row, .vault-track-row {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(12, 9, 28, 0.88);
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: 14px;
      padding: 9px 11px;
      margin-bottom: 6px;
    }
    .cust-item-row.selected, .vault-track-row.selected {
      border-color: #38BDF8;
      background: rgba(24, 18, 54, 0.92);
    }
    .cust-swatch {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .cust-item-name, .vault-track-name {
      font-size: 12.5px;
      font-weight: 900;
      color: #F8FAFC;
    }
    .cust-item-sub, .vault-track-sub {
      font-size: 10px;
      font-weight: 700;
      color: #94A3B8;
      margin-top: 1px;
    }
    .cust-btn {
      border-radius: 10px;
      padding: 6px 11px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.8px;
      border: none;
      cursor: pointer;
    }
    .cust-btn.equipped {
      background: rgba(74, 222, 128, 0.18);
      border: 1px solid #4ADE80;
      color: #4ADE80;
    }
    .cust-btn.equip {
      background: rgba(56, 189, 248, 0.2);
      border: 1px solid #38BDF8;
      color: #38BDF8;
    }
    .cust-btn.buy {
      background: linear-gradient(90deg, #F59E0B, #EAB308);
      color: #090614;
    }
    .cust-btn.locked {
      background: rgba(51, 65, 85, 0.5);
      color: #64748B;
    }
    .vault-track-icon {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(30, 41, 59, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
    }
    .vault-track-dur {
      font-size: 10.5px;
      font-weight: 800;
      color: #CBD5E1;
    }

    .toggle-pill {
      border-radius: 50px;
      padding: 6px 14px;
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 1px;
      cursor: pointer;
      border: 1px solid;
    }
    .toggle-pill.on {
      background: rgba(74, 222, 128, 0.18);
      border-color: #4ADE80;
      color: #4ADE80;
    }
    .toggle-pill.off {
      background: rgba(244, 63, 94, 0.18);
      border-color: #F43F5E;
      color: #F43F5E;
    }
  
    /* First-Time Mission Briefing & How-To-Play Centered Bounce Pop-Up */
    #screen-HOW_TO_PLAY {
      z-index: 25;
      align-items: center;
      justify-content: center;
    }
    #screen-HOW_TO_PLAY .glass-modal-card {
      transform-origin: center center;
      animation: popupZoomBounceIn 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                 popupIdleBreathing 2.6s ease-in-out 0.55s infinite;
      border: 1.8px solid rgba(56, 189, 248, 0.78);
      box-shadow: 0 22px 58px rgba(0, 0, 0, 0.88), 0 0 34px rgba(56, 189, 248, 0.25);
    }
    #screen-HOW_TO_PLAY .glass-modal-card.bounce-out {
      animation: popupZoomBounceOut 0.28s cubic-bezier(0.36, 0, 0.66, -0.56) forwards !important;
    }
    @keyframes popupZoomBounceIn {
      0% { transform: scale(0.28); opacity: 0; }
      62% { transform: scale(1.07); opacity: 1; }
      82% { transform: scale(0.96); opacity: 1; }
      100% { transform: scale(1.0); opacity: 1; }
    }
    @keyframes popupIdleBreathing {
      0%, 100% { transform: scale(1.0); }
      50% { transform: scale(1.018); }
    }
    @keyframes popupZoomBounceOut {
      0% { transform: scale(1.0); opacity: 1; }
      32% { transform: scale(1.08); opacity: 1; }
      100% { transform: scale(0.22); opacity: 0; }
    }
    .guide-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(56, 189, 248, 0.25);
      padding-bottom: 10px;
    }
    .guide-title {
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 1.6px;
      color: #38BDF8;
    }
    .guide-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: rgba(10, 7, 24, 0.75);
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: 14px;
      padding: 10px 12px;
    }
    .guide-icon-badge {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .guide-text-title {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.8px;
    }
    .guide-text-body {
      font-size: 11px;
      color: #CBD5E1;
      line-height: 1.45;
      margin-top: 2px;
    }

    /* 3-2-1 Audio-Reactive Stage Countdown Overlay */
    #screen-COUNTDOWN {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(4, 2, 11, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      pointer-events: none;
    }
    .countdown-number {
      font-size: 96px;
      font-weight: 900;
      color: #F8FAFC;
      text-shadow: 0 0 32px rgba(56, 189, 248, 0.8);
      animation: countPulse 1s ease-in-out infinite;
    }
    .countdown-label {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 3px;
      color: #FACC15;
      margin-top: 6px;
    }
    @keyframes countPulse {
      0% { transform: scale(0.7); opacity: 0.4; }
      50% { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(0.95); opacity: 0.85; }
    }

    /* Candy-Catcher-Style Top-Center Power-Up Pickup Toast (1:1 with Android GameHUD.kt) */
    #hud-pickup-toast {
      position: fixed;
      top: calc(env(safe-area-inset-top, 12px) + 132px);
      left: 50%;
      transform: translateX(-50%);
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: linear-gradient(90deg, rgba(6,11,24,0.95), rgba(30,20,50,0.92), rgba(6,11,24,0.95));
      border: 1.5px solid #FACC15;
      border-radius: 14px;
      padding: 7px 16px;
      pointer-events: none;
      z-index: 12;
      min-width: 220px;
    }
    #hud-pickup-toast.toast-pop { animation: toastBounce 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes toastBounce {
      0% { transform: translateX(-50%) scale(0.4); opacity: 0; }
      65% { transform: translateX(-50%) scale(1.08); opacity: 1; }
      100% { transform: translateX(-50%) scale(1); opacity: 1; }
    }
    .toast-row { display: flex; align-items: center; gap: 8px; }
    #hud-toast-icon {
      width: 26px; height: 26px; border-radius: 50%;
      border: 1px solid #FACC15; background: rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center; font-size: 13px;
    }
    #hud-toast-title { font-size: 12px; font-weight: 900; letter-spacing: 0.9px; color: #FFFFFF; }
    #hud-toast-sub { font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; }
    .toast-bar-bg { width: 150px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.16); overflow: hidden; }
    #hud-toast-bar { height: 100%; width: 100%; background: #FACC15; }

    /* Google-Play/AdMob-compliant, uniquely identifiable rewarded-ad button */
    .btn-ad-reward {
      width: 100%;
      min-height: 54px;
      border-radius: 8px;
      background: linear-gradient(90deg, #291804, #1F1203, #2D1B05);
      border: 2px solid #FACC15;
      box-shadow: 0 0 0 2px rgba(245,158,11,0.35), 0 6px 18px rgba(245,158,11,0.25);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px;
      cursor: pointer;
      color: #FEF08A;
      text-align: left;
    }
    .ad-badge {
      background: #FACC15; color: #090D16; border: 1px solid #FEF08A;
      border-radius: 5px; padding: 3px 7px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.8px;
    }
    .ad-main { font-size: 13px; font-weight: 900; letter-spacing: 0.8px; color: #FEF08A; }
    .ad-sub { font-size: 8.5px; font-weight: 800; letter-spacing: 0.6px; color: #FBBF24; }

    /* VIP Passcode & House-Promo overlays */
    .center-overlay {
      position: fixed; inset: 0; z-index: 40; display: none;
      align-items: center; justify-content: center;
      background: rgba(4,2,11,0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      padding: 18px;
    }
    .center-overlay .glass-modal-card { animation: popupZoomBounceIn 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
    #vip-input {
      width: 100%; height: 44px; border-radius: 10px; background: #04070F;
      border: 1.2px solid rgba(99,102,241,0.6); color: #FFFFFF; font-size: 15px; font-weight: 900;
      letter-spacing: 2px; text-transform: uppercase; padding: 0 12px; outline: none;
      user-select: text; -webkit-user-select: text;
    }
    .vip-pill {
      background: rgba(5,11,20,0.88); border: 1px solid rgba(192,132,252,0.6); border-radius: 10px;
      padding: 6px 10px; font-size: 9.5px; font-weight: 900; letter-spacing: 0.6px; color: #C084FC; cursor: pointer;
    }