/* ── Bestenliste-View ── */
    #leaderboardView {
      display: none;
      flex-direction: column;
      gap: 1.5rem;
    }
    #leaderboardView.active { display: flex; }

    .lb-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .lb-header h2 {
      font-family: 'Press Start 2P', monospace;
      font-size: 0.8rem;
      color: var(--accent);
    }
    .lb-refresh {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      padding: 0.4rem 0.9rem;
      border-radius: 8px;
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .lb-refresh:hover { border-color: var(--accent); color: var(--accent); }

    .lb-mode-tabs {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      align-items: center;
    }

    .lb-mode-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: 999px;
      padding: 0.5rem 1rem;
      font-family: 'Nunito', sans-serif;
      font-size: 0.78rem;
      font-weight: 900;
      cursor: pointer;
      transition: all 0.18s;
      white-space: nowrap;
    }

    .lb-mode-btn:hover,
    .lb-mode-btn.active {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(255,203,5,0.10);
      box-shadow: 0 0 16px rgba(255,203,5,0.12);
    }

    .lb-table {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
    }
    .lb-row {
      display: grid;
      grid-template-columns: 2.5rem minmax(0, 1fr) 4.3rem 5.5rem 4.75rem 7.75rem;
      align-items: center;
      gap: 0.75rem;
      padding: 0.9rem 1.2rem;
      border-bottom: 1px solid var(--border);
      font-size: 0.9rem;
    }
    .lb-row > span { min-width: 0; }
    .lb-row:last-child { border-bottom: none; }
    .lb-row.current-user {
      background: linear-gradient(90deg, rgba(255,203,5,0.18), rgba(61,126,255,0.08));
      box-shadow: inset 4px 0 0 var(--accent), 0 0 24px rgba(255,203,5,0.10);
    }
    .lb-row.current-user .lb-rank,
    .lb-row.current-user .lb-name {
      color: var(--accent);
    }
    .lb-you-badge {
      display: inline-flex;
      align-items: center;
      margin-left: 0.45rem;
      padding: 0.12rem 0.42rem;
      border-radius: 999px;
      border: 1px solid rgba(255,203,5,0.55);
      background: rgba(255,203,5,0.10);
      color: var(--accent);
      font-size: 0.64rem;
      font-weight: 900;
      vertical-align: middle;
    }
    .lb-row.header {
      background: var(--surface);
      font-size: 0.7rem;
      color: var(--muted);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .lb-row.header span { white-space: nowrap; }
    .lb-row.header span:nth-child(1) { text-align: center; }
    .lb-row.header span:nth-child(n+3) { text-align: right; }
    .lb-rank {
      font-family: 'Press Start 2P', monospace;
      font-size: 0.65rem;
      color: var(--muted);
      text-align: center;
    }
    .lb-rank.gold   { color: #ffd700; }
    .lb-rank.silver { color: #c0c0c0; }
    .lb-rank.bronze { color: #cd7f32; }
    .lb-name {
      font-weight: 900;
      overflow: hidden;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0.18rem;
      line-height: 1.15;
    }

    .lb-player-name {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lb-player-title {
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(255,203,5,0.32);
      border-radius: 999px;
      background: rgba(255,203,5,0.08);
      color: var(--accent);
      padding: 0.12rem 0.42rem;
      font-size: 0.66rem;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .lb-val  {
      font-family: 'Press Start 2P', monospace;
      font-size: 0.6rem;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }
    .lb-val.green  { color: #4ade80; }
    .lb-val.red    { color: var(--red); }
    .lb-val.yellow { color: var(--accent); }
    .lb-date {
      color: var(--muted);
      font-size: 0.78rem;
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap;
    }
    .lb-empty {
      padding: 3rem;
      text-align: center;
      color: var(--muted);
      font-size: 0.9rem;
    }

    /* Session-Ende Button */
    .end-session-btn {
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0.7rem 1.4rem;
      background: transparent;
      border: 1px solid var(--red);
      color: var(--red);
      border-radius: 10px;
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .end-session-btn.visible { display: inline-flex; }
    .end-session-btn:hover { background: rgba(255,59,59,0.1); }

    /* Spieler-Info im Header */
    .player-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--muted);
    }
    .player-info .player-name {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.55rem;
    }

    .player-info.hidden { display: none; }



    /* ── Auth / Supabase ── */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .auth-header-btn {
      background: linear-gradient(135deg, rgba(255,203,5,0.18), rgba(61,126,255,0.12));
      border: 1px solid rgba(255,203,5,0.55);
      color: var(--accent);
      font-family: 'Nunito', sans-serif;
      font-size: 0.82rem;
      font-weight: 900;
      padding: 0.45rem 0.9rem;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      box-shadow: 0 0 16px rgba(255,203,5,0.12);
      white-space: nowrap;
    }

    .auth-header-btn:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 0 24px rgba(255,203,5,0.24);
    }

    .auth-header-btn.signed-in {
      color: #4ade80;
      border-color: rgba(74,222,128,0.55);
      background: linear-gradient(135deg, rgba(74,222,128,0.13), rgba(61,126,255,0.10));
      box-shadow: 0 0 16px rgba(74,222,128,0.10);
    }

    .exp-header-widget {
      width: 150px;
      min-height: 42px;
      border: 1px solid rgba(61,126,255,0.55);
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(61,126,255,0.14), rgba(255,203,5,0.08));
      color: var(--text);
      padding: 0.45rem 0.65rem;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 0.32rem;
      box-shadow: 0 0 16px rgba(61,126,255,0.12);
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    }

    .exp-header-widget:hover {
      transform: translateY(-1px);
      border-color: var(--accent2);
      box-shadow: 0 0 22px rgba(61,126,255,0.22);
    }

    .exp-header-widget.hidden { display: none; }

    .achievement-header-btn {
      background: linear-gradient(135deg, rgba(255,203,5,0.16), rgba(74,222,128,0.12));
      border: 1px solid rgba(255,203,5,0.45);
      color: var(--accent);
      font-family: 'Nunito', sans-serif;
      font-size: 0.82rem;
      font-weight: 900;
      padding: 0.56rem 0.85rem;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      box-shadow: 0 0 16px rgba(255,203,5,0.10);
      white-space: nowrap;
    }

    .achievement-header-btn:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 0 22px rgba(255,203,5,0.22);
    }

    .achievement-header-btn.hidden { display: none; }


    .support-header-btn {
      background: linear-gradient(135deg, rgba(255,203,5,0.18), rgba(236,72,153,0.12));
      border: 1px solid rgba(255,203,5,0.5);
      color: var(--accent);
      font-family: 'Nunito', sans-serif;
      font-size: 0.82rem;
      font-weight: 900;
      padding: 0.56rem 0.85rem;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      box-shadow: 0 0 16px rgba(255,203,5,0.10);
      white-space: nowrap;
    }

    .support-header-btn:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 0 22px rgba(255,203,5,0.22);
    }

    .utility-modal-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
      background: rgba(5,5,14,0.74);
      backdrop-filter: blur(8px);
      z-index: 1800;
    }

    .utility-modal-overlay.open { display: flex; }

    .utility-modal {
      width: min(92vw, 520px);
      background: linear-gradient(180deg, rgba(28,28,46,0.98), rgba(14,14,28,0.98));
      border: 1px solid rgba(255,203,5,0.26);
      border-radius: 22px;
      padding: 1.3rem;
      box-shadow: 0 24px 70px rgba(0,0,0,0.48), 0 0 30px rgba(255,203,5,0.10);
      color: var(--text);
      position: relative;
    }

    .utility-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 0.85rem;
    }

    .utility-modal-title {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.72rem;
      line-height: 1.5;
      margin: 0;
    }

    .utility-modal-text {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 800;
      line-height: 1.45;
      margin: 0 0 1rem;
    }

    .utility-close-btn {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      font-weight: 900;
      cursor: pointer;
    }

    .support-actions,
    .feedback-option-grid {
      display: grid;
      gap: 0.72rem;
    }

    .support-action,
    .feedback-option-btn,
    .feedback-send-btn {
      border: 1px solid rgba(61,126,255,0.38);
      border-radius: 14px;
      background: rgba(61,126,255,0.10);
      color: var(--text);
      padding: 0.78rem 0.9rem;
      font-family: 'Nunito', sans-serif;
      font-size: 0.9rem;
      font-weight: 900;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .support-action:hover,
    .feedback-option-btn:hover,
    .feedback-send-btn:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 0 20px rgba(255,203,5,0.14);
    }

    .support-action.disabled {
      opacity: 0.56;
      pointer-events: none;
      filter: grayscale(0.4);
    }

    .support-config-note {
      margin-top: 0.85rem;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      line-height: 1.45;
    }


    .sound-settings-card {
      display: grid;
      gap: 0.85rem;
      padding: 1rem;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 18px;
      background: rgba(255,255,255,0.045);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    }

    .sound-settings-title {
      color: var(--text);
      font-weight: 950;
      font-size: 0.98rem;
      line-height: 1.25;
    }

    .sound-volume-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 900;
    }

    .sound-volume-value {
      min-width: 3.5rem;
      text-align: right;
      color: var(--accent);
      font-weight: 950;
    }

    .sound-volume-slider {
      width: 100%;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .sound-mute-btn {
      width: 100%;
      border: 1px solid rgba(255,203,5,0.32);
      border-radius: 14px;
      background: rgba(255,203,5,0.09);
      color: var(--text);
      padding: 0.78rem 0.9rem;
      font-family: 'Nunito', sans-serif;
      font-size: 0.9rem;
      font-weight: 950;
      cursor: pointer;
      transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .sound-mute-btn:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 0 20px rgba(255,203,5,0.14);
    }

    .feedback-widget {
      position: fixed;
      right: 1.25rem;
      bottom: 1.25rem;
      z-index: 1200;
      display: grid;
      justify-items: end;
      gap: 0.7rem;
    }

    .feedback-bubble-btn {
      width: 62px;
      height: 62px;
      border-radius: 999px;
      border: 1px solid rgba(255,203,5,0.6);
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.26), transparent 32%), linear-gradient(135deg, rgba(255,203,5,0.95), rgba(61,126,255,0.82));
      color: #111827;
      font-size: 1.75rem;
      cursor: pointer;
      box-shadow: 0 14px 34px rgba(0,0,0,0.36), 0 0 28px rgba(255,203,5,0.22);
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .feedback-bubble-btn:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 18px 42px rgba(0,0,0,0.42), 0 0 34px rgba(255,203,5,0.3);
    }

    .feedback-panel {
      width: min(86vw, 270px);
      display: none;
      background: rgba(22,22,38,0.96);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 18px;
      padding: 0.8rem;
      box-shadow: 0 18px 48px rgba(0,0,0,0.45);
      backdrop-filter: blur(8px);
    }

    .feedback-panel.open { display: grid; gap: 0.55rem; }

    .feedback-panel-title {
      color: var(--accent);
      font-weight: 900;
      font-size: 0.9rem;
      margin: 0 0 0.2rem;
    }

    .feedback-form {
      display: grid;
      gap: 0.75rem;
      margin-top: 0.5rem;
    }

    .feedback-form label {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 900;
    }

    .feedback-form input,
    .feedback-form textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      background: rgba(255,255,255,0.06);
      color: var(--text);
      font-family: 'Nunito', sans-serif;
      font-size: 0.9rem;
      padding: 0.72rem 0.78rem;
      outline: none;
    }

    .feedback-form textarea {
      min-height: 132px;
      resize: vertical;
    }

    .feedback-form input:focus,
    .feedback-form textarea:focus {
      border-color: rgba(255,203,5,0.65);
      box-shadow: 0 0 0 3px rgba(255,203,5,0.10);
    }


    .feedback-form.hidden,
    .feedback-social-card.hidden {
      display: none;
    }

    .feedback-social-card {
      display: grid;
      gap: 0.85rem;
      margin-top: 0.4rem;
      padding: 1rem;
      border: 1px solid rgba(255,203,5,0.22);
      border-radius: 18px;
      background:
        radial-gradient(circle at 18% 0%, rgba(255,203,5,0.14), transparent 40%),
        radial-gradient(circle at 95% 20%, rgba(236,72,153,0.20), transparent 46%),
        rgba(255,255,255,0.045);
      text-align: center;
    }

    .feedback-social-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto;
      border-radius: 22px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #f97316, #ec4899 52%, #6366f1);
      color: white;
      font-size: 2rem;
      box-shadow: 0 14px 30px rgba(0,0,0,0.28), 0 0 24px rgba(236,72,153,0.18);
    }

    .feedback-social-handle {
      color: #fff;
      font-family: 'Press Start 2P', monospace;
      font-size: 0.66rem;
      line-height: 1.55;
    }

    .feedback-social-text,
    .feedback-social-note {
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 800;
      line-height: 1.45;
      margin: 0;
    }

    .feedback-social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,203,5,0.38);
      background: rgba(255,203,5,0.10);
      color: var(--accent);
      text-decoration: none;
      font-weight: 900;
      padding: 0.72rem 0.95rem;
      transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .feedback-social-link:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 0 20px rgba(255,203,5,0.15);
    }

    .feedback-social-link.disabled {
      opacity: 0.58;
      pointer-events: none;
      filter: grayscale(0.3);
    }

    .exp-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.45rem;
      font-size: 0.64rem;
      font-weight: 900;
      line-height: 1;
    }

    .exp-header-level {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.46rem;
      white-space: nowrap;
    }

    .exp-header-text {
      color: var(--muted);
      font-size: 0.62rem;
      white-space: nowrap;
    }

    .exp-bar-track {
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
    }

    .exp-bar-fill {
      display: block;
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent2), var(--accent));
      box-shadow: 0 0 14px rgba(255,203,5,0.35);
      transition: width 0.25s ease;
    }

    .exp-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(8px);
      z-index: 3100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .exp-modal-overlay.open { display: flex; }

    .exp-modal {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 22px;
      width: min(480px, 94vw);
      padding: 1.6rem;
      box-shadow: 0 18px 70px rgba(0,0,0,0.45), 0 0 36px rgba(255,203,5,0.10);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .exp-modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .exp-modal h2 {
      font-family: 'Press Start 2P', monospace;
      font-size: 0.72rem;
      color: var(--accent);
      letter-spacing: 1px;
      line-height: 1.5;
    }

    .exp-modal p {
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.55;
    }

    .exp-progress-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1rem;
      display: grid;
      gap: 0.9rem;
    }

    .exp-stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.6rem;
    }

    .exp-stat {
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 0.75rem 0.55rem;
      text-align: center;
    }

    .exp-stat .label {
      display: block;
      color: var(--muted);
      font-size: 0.64rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 0.35rem;
    }

    .exp-stat .value {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.56rem;
      line-height: 1.4;
    }

    .exp-progress-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 900;
    }

    .exp-modal-close {
      padding: 0.78rem 1rem;
      background: var(--accent2);
      border: none;
      border-radius: 12px;
      color: #fff;
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      cursor: pointer;
      letter-spacing: 1px;
      transition: filter 0.15s, transform 0.15s;
    }

    .exp-modal-close:hover {
      filter: brightness(1.12);
      transform: translateY(-1px);
    }

    .achievements-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(8px);
      z-index: 3150;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .achievements-modal-overlay.open { display: flex; }

    .achievements-modal {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 22px;
      width: min(500px, 94vw);
      padding: 1.6rem;
      box-shadow: 0 18px 70px rgba(0,0,0,0.45), 0 0 36px rgba(74,222,128,0.10);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .achievements-modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .achievements-modal h2 {
      font-family: 'Press Start 2P', monospace;
      font-size: 0.72rem;
      color: var(--accent);
      letter-spacing: 1px;
      line-height: 1.5;
    }

    .achievements-modal p {
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.55;
    }

    .achievements-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1rem;
      display: grid;
      gap: 0.7rem;
    }

    .achievements-card h3 {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      line-height: 1.55;
    }

    .achievement-slot-card {
      position: relative;
      overflow: hidden;
    }

    .achievement-slot-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 100% 0%, rgba(255,203,5,0.10), transparent 55%);
      pointer-events: none;
    }

    .achievement-slot-top,
    .achievement-progress-wrap,
    .achievement-progress-text,
    .achievement-slot-card h3,
    .achievement-slot-card p {
      position: relative;
      z-index: 1;
    }

    .achievement-slot-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.7rem;
      flex-wrap: wrap;
    }

    .achievement-badge,
    .achievement-requirement {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 0.28rem 0.62rem;
      font-size: 0.68rem;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .achievement-badge {
      border: 1px solid rgba(61,126,255,0.40);
      background: rgba(61,126,255,0.10);
      color: #a9c4ff;
    }

    .achievement-badge.unlocked {
      border-color: rgba(74,222,128,0.45);
      background: rgba(74,222,128,0.10);
      color: #86efac;
    }

    .achievement-requirement {
      border: 1px solid rgba(255,203,5,0.35);
      background: rgba(255,203,5,0.08);
      color: var(--accent);
    }

    .achievement-progress-wrap {
      display: grid;
      gap: 0.45rem;
    }

    .achievement-progress-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 0.74rem;
      font-weight: 900;
    }

    .achievement-progress-track {
      height: 9px;
      width: 100%;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.08);
      overflow: hidden;
    }

    .achievement-progress-fill {
      display: block;
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, #4ade80, var(--accent));
      box-shadow: 0 0 14px rgba(74,222,128,0.28);
      transition: width 0.25s ease;
    }

    .achievements-progress-text {
      color: #4ade80;
      font-weight: 900;
      font-size: 0.86rem;
      border: 1px solid rgba(74,222,128,0.22);
      background: rgba(74,222,128,0.08);
      border-radius: 12px;
      padding: 0.7rem 0.8rem;
    }

    .achievements-modal-close {
      padding: 0.78rem 1rem;
      background: var(--accent2);
      border: none;
      border-radius: 12px;
      color: #fff;
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      cursor: pointer;
      letter-spacing: 1px;
      transition: filter 0.15s, transform 0.15s;
    }

    .achievements-modal-close:hover {
      filter: brightness(1.12);
      transform: translateY(-1px);
    }


    .achievements-modal.achievements-browser {
      width: min(1040px, 96vw);
      max-height: min(90vh, 860px);
      overflow-y: auto;
    }


    .achievements-modal.achievements-browser {
      scrollbar-width: thin;
      scrollbar-color: rgba(255,203,5,0.62) rgba(255,255,255,0.055);
    }

    .achievements-modal.achievements-browser::-webkit-scrollbar {
      width: 10px;
    }

    .achievements-modal.achievements-browser::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.045);
      border-radius: 999px;
      margin: 0.55rem 0;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
    }

    .achievements-modal.achievements-browser::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(255,203,5,0.88), rgba(61,126,255,0.70));
      border: 2px solid rgba(15,15,31,0.92);
      border-radius: 999px;
      box-shadow: 0 0 12px rgba(255,203,5,0.18);
    }

    .achievements-modal.achievements-browser::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(255,218,72,0.98), rgba(91,151,255,0.86));
    }

    .achievements-browser-layout {
      display: grid;
      gap: 1rem;
    }

    .achievements-total-card {
      background:
        radial-gradient(circle at 0% 0%, rgba(255,203,5,0.16), transparent 55%),
        radial-gradient(circle at 100% 20%, rgba(61,126,255,0.15), transparent 56%),
        var(--surface);
      border: 1px solid rgba(255,203,5,0.36);
      border-radius: 18px;
      padding: 1rem 1.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      box-shadow: 0 0 24px rgba(255,203,5,0.09);
    }

    .achievements-total-label {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.62rem;
      line-height: 1.45;
      margin-bottom: 0.35rem;
    }

    .achievements-total-hint {
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .achievements-total-value {
      min-width: 138px;
      min-height: 72px;
      padding: 0 1rem;
      border-radius: 16px;
      border: 1px solid rgba(255,203,5,0.42);
      background: rgba(255,203,5,0.10);
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(0.88rem, 1.8vw, 1rem);
      display: inline-flex;
      white-space: nowrap;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
    }

    .achievements-filter-row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .achievement-filter-group {
      background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025));
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 0.82rem;
      display: flex;
      flex-direction: column;
      gap: 0.58rem;
      align-self: flex-start;
      flex: 0 1 auto;
      min-width: 180px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    }

    .achievement-filter-group.is-hidden,
    .achievement-filter-group[hidden] {
      display: none !important;
    }

    .achievement-filter-label {
      color: var(--muted);
      font-size: 0.66rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .achievement-filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 0.48rem;
      align-items: stretch;
    }

    .achievement-filter-btn {
      border: 1px solid rgba(61,126,255,0.36);
      border-radius: 14px;
      background: rgba(61,126,255,0.07);
      color: #a9c4ff;
      padding: 0.55rem 0.76rem;
      min-height: 40px;
      min-width: 96px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-family: 'Nunito', sans-serif;
      font-size: 0.78rem;
      font-weight: 900;
      line-height: 1.15;
      cursor: pointer;
      transition: all 0.15s;
    }

    .achievement-filter-btn:hover,
    .achievement-filter-btn.active {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(255,203,5,0.10);
      box-shadow: 0 0 16px rgba(255,203,5,0.12);
      transform: translateY(-1px);
    }

    .achievements-summary-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 0.95rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .achievements-summary-title {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      line-height: 1.45;
    }

    .achievements-summary-text {
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 800;
      line-height: 1.4;
    }

    .achievements-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 0.82rem;
      align-items: stretch;
    }

    .achievement-card {
      min-height: 280px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 0.9rem 0.72rem;
      display: grid;
      grid-template-rows: 92px minmax(2.6rem, auto) 1fr auto auto;
      justify-items: center;
      align-items: start;
      text-align: center;
      gap: 0.46rem;
      position: relative;
      overflow: hidden;
    }

    .achievement-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(61,126,255,0.12), transparent 60%);
      pointer-events: none;
    }

    .achievement-card.unlocked {
      border-color: rgba(255,203,5,0.55);
      background: radial-gradient(circle at 50% 0%, rgba(255,203,5,0.16), transparent 62%), rgba(255,255,255,0.04);
      box-shadow: 0 0 20px rgba(255,203,5,0.12);
    }

    .achievement-card.locked {
      opacity: 0.74;
    }

    .achievement-card > * {
      position: relative;
      z-index: 1;
    }

    .achievement-icon-shell {
      width: 88px;
      height: 88px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
      margin-inline: auto;
    }

    .achievement-card img {
      width: 74px;
      height: 74px;
      object-fit: contain;
      image-rendering: pixelated;
      filter: grayscale(1) brightness(0.58) drop-shadow(0 0 10px rgba(0,0,0,0.35));
    }

    .achievement-card.unlocked img {
      filter: drop-shadow(0 0 14px rgba(255,203,5,0.28));
    }

    .achievement-card img[src^="data:image/svg+xml"] {
      image-rendering: auto;
    }

    .achievement-card .achievement-name {
      width: 100%;
      color: #fff;
      font-size: 0.8rem;
      font-weight: 900;
      line-height: 1.2;
    }

    .achievement-card .achievement-desc {
      width: 100%;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1.32;
      align-self: start;
    }

    .achievement-card .achievement-status {
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--muted);
      background: rgba(255,255,255,0.04);
      padding: 0.28rem 0.58rem;
      font-size: 0.64rem;
      font-weight: 900;
      margin-top: auto;
    }

    .achievement-reward {
      width: 100%;
      border: 1px solid rgba(255,203,5,0.28);
      background: rgba(255,203,5,0.075);
      color: var(--accent);
      border-radius: 12px;
      padding: 0.42rem 0.52rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.38rem;
      font-size: 0.68rem;
      font-weight: 900;
      line-height: 1.2;
    }

    .achievement-reward img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      filter: none !important;
      flex: 0 0 auto;
    }

    .achievement-card.unlocked .achievement-status {
      color: #86efac;
      border-color: rgba(74,222,128,0.42);
      background: rgba(74,222,128,0.10);
    }

    .achievements-empty {
      color: var(--muted);
      background: var(--surface);
      border: 1px dashed var(--border);
      border-radius: 16px;
      padding: 1.25rem;
      text-align: center;
      font-weight: 800;
      line-height: 1.45;
    }

    @media (max-width: 900px) {
      .achievements-filter-row { flex-direction: column; }
      .achievements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .achievement-filter-group { min-width: min(100%, 240px); }
    }

    @media (max-width: 520px) {
      .achievements-grid { grid-template-columns: 1fr; }
      .achievement-filter-btn { min-width: 88px; }
      .achievements-summary-card { align-items: flex-start; flex-direction: column; }
      .achievements-total-card { align-items: flex-start; flex-direction: column; }
      .achievements-total-value { width: 100%; }
    }

    .auth-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(8px);
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .auth-modal-overlay.open { display: flex; }

    .auth-modal {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 22px;
      width: min(480px, 94vw);
      max-height: min(92vh, 760px);
      overflow-y: auto;
      padding: 1.6rem;
      box-shadow: 0 18px 70px rgba(0,0,0,0.45), 0 0 36px rgba(61,126,255,0.10);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .auth-modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .auth-modal h2 {
      font-family: 'Press Start 2P', monospace;
      font-size: 0.72rem;
      color: var(--accent);
      letter-spacing: 1px;
      line-height: 1.5;
    }

    .auth-modal .auth-subtitle {
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.45;
      margin-top: 0.35rem;
    }

    .auth-close-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      font-weight: 900;
      transition: all 0.15s;
      flex: 0 0 auto;
    }

    .auth-close-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 0.35rem;
    }

    .auth-tab-btn {
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--muted);
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      padding: 0.65rem 0.75rem;
      cursor: pointer;
      transition: all 0.15s;
    }

    .auth-tab-btn.active {
      background: rgba(255,203,5,0.12);
      color: var(--accent);
      box-shadow: inset 0 0 0 1px rgba(255,203,5,0.22);
    }

    .auth-panel { display: none; flex-direction: column; gap: 0.85rem; }
    .auth-panel.active { display: flex; }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .auth-field label {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .auth-field input {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.85rem 0.95rem;
      color: var(--text);
      font-family: 'Nunito', sans-serif;
      font-size: 0.98rem;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .auth-field input:focus {
      border-color: var(--accent2);
      box-shadow: 0 0 0 3px rgba(61,126,255,0.14);
    }

    .auth-submit-btn,
    .auth-secondary-btn,
    .auth-danger-btn,
    .auth-link-btn,
    .secondary-start-btn {
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      border-radius: 12px;
      cursor: pointer;
      transition: transform 0.15s, filter 0.15s, border-color 0.15s, background 0.15s;
    }

    .auth-submit-btn {
      border: none;
      padding: 0.85rem 1rem;
      background: linear-gradient(135deg, var(--accent), #ffa500);
      color: #1a1000;
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      letter-spacing: 1px;
      box-shadow: 0 4px 20px rgba(255,203,5,0.25);
    }

    .auth-submit-btn:hover,
    .secondary-start-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.05);
    }

    .auth-submit-btn:disabled,
    .auth-secondary-btn:disabled,
    .auth-danger-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .auth-secondary-btn {
      border: 1px solid var(--border);
      color: var(--text);
      background: var(--surface);
      padding: 0.75rem 0.9rem;
    }

    .auth-secondary-btn:hover {
      border-color: var(--accent2);
      background: rgba(61,126,255,0.08);
    }

    .auth-danger-btn {
      border: 1px solid rgba(255,59,59,0.65);
      color: var(--red);
      background: rgba(255,59,59,0.08);
      padding: 0.75rem 0.9rem;
    }

    .auth-danger-btn:hover { background: rgba(255,59,59,0.14); }

    .auth-link-btn {
      border: none;
      background: transparent;
      color: var(--accent2);
      padding: 0.1rem 0;
      text-align: left;
      font-size: 0.82rem;
      align-self: flex-start;
    }

    .auth-link-btn:hover { color: var(--accent); }


    .auth-message {
      display: none;
      border-radius: 12px;
      padding: 0.78rem 0.9rem;
      font-size: 0.84rem;
      line-height: 1.45;
      font-weight: 700;
    }

    .auth-message.visible { display: block; }
    .auth-message.info    { background: rgba(61,126,255,0.10); border: 1px solid rgba(61,126,255,0.35); color: #a9c4ff; }
    .auth-message.success { background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.35); color: #86efac; }
    .auth-message.error   { background: rgba(255,59,59,0.10); border: 1px solid rgba(255,59,59,0.35); color: #fca5a5; }

    .auth-account-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1rem;
      display: grid;
      gap: 0.45rem;
    }

    .auth-account-card .account-label {
      color: var(--muted);
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 900;
    }

    .auth-account-card .account-value {
      color: var(--text);
      font-weight: 900;
      word-break: break-word;
    }

    .auth-setup-note {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.5;
      background: rgba(255,203,5,0.06);
      border: 1px dashed rgba(255,203,5,0.35);
      border-radius: 12px;
      padding: 0.75rem 0.85rem;
    }

    .secondary-start-btn {
      padding: 0.9rem 1rem;
      background: transparent;
      border: 1px solid var(--accent2);
      color: #a9c4ff;
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      letter-spacing: 1px;
    }

    .lb-actions {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      flex-wrap: wrap;
    }

    .lb-source {
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 900;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.32rem 0.7rem;
      background: rgba(255,255,255,0.03);
    }

    @media (max-width: 1120px) {
      .game-selection-layout,
      #gameSelectionView.has-trainer-showcase .game-selection-layout { grid-template-columns: 1fr; width: min(920px, 100%); }
      .upcoming-release-panel,
      .trainer-showcase { width: min(560px, 100%); margin: 0 auto; }
    }

    /* ── Responsive ── */
    @media (max-width: 700px) {
      header { padding: 1rem 1.2rem; flex-wrap: wrap; gap: 0.85rem; }
      nav { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; }
      .header-actions { gap: 0.5rem; }
      .lang-dropdown { right: auto; left: 0; }
      .start-lang-switch.lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .auth-header-btn { padding: 0.42rem 0.7rem; font-size: 0.76rem; }
      .achievement-header-btn { padding: 0.48rem 0.68rem; font-size: 0.76rem; }
      .support-header-btn { padding: 0.48rem 0.68rem; font-size: 0.76rem; }
      .exp-header-widget { width: 132px; padding: 0.42rem 0.55rem; }
      .exp-header-text { font-size: 0.56rem; }
      .exp-stat-grid { grid-template-columns: 1fr; }
      .logo  { font-size: 0.7rem; }
      .game-selection-layout,
      #gameSelectionView.has-trainer-showcase .game-selection-layout { grid-template-columns: 1fr; width: min(380px, 100%); }
      .game-library-grid { grid-template-columns: 1fr; gap: 0.9rem; width: 100%; }
      .upcoming-release-panel,
      .trainer-showcase { padding: 0.9rem; }
      .upcoming-release-card { grid-template-columns: 64px 1fr; min-height: 104px; }
      .upcoming-release-art { width: 64px; height: 64px; border-radius: 18px; }
      .upcoming-release-icon { width: 44px; height: 44px; font-size: 1.3rem; }
      .trainer-visual-row { grid-template-columns: 1fr; }
      .trainer-sprite-stage { min-height: 320px; }
      .trainer-sprite { width: min(320px, 118%); max-height: 316px; }
      .trainer-badge-card { width: min(260px, 100%); min-height: auto; }
      .game-tile { min-height: 178px; padding: 1rem 0.85rem; }
      .game-tile-title { font-size: 0.52rem; }
      .game-tile-desc { font-size: 0.74rem; }
      .game-tile-icon { width: 84px; height: 84px; }
      .roulette-game-layout { grid-template-columns: 1fr; }
      .roulette-controls { grid-template-columns: 1fr; }
      .roulette-stat-grid { grid-template-columns: 1fr; }
      .roulette-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .roulette-result-card { grid-template-columns: 1fr; text-align: center; }
      .roulette-result-card img { margin: 0 auto; }

      #gameView { grid-template-columns: 1fr; }
      #gameView .hero,
      #gameView .scorebar,
      #gameView .mode-bar,
      #gameView .game-area { grid-column: 1; grid-row: auto; }
      .game-area { grid-template-columns: 1fr; }
      main { padding: 1.5rem 1rem 3rem; }
      .mode-bar { position: static; align-items: stretch; }
      .mode-group { grid-template-columns: 1fr; width: 100%; }
      .mode-group-title { width: auto; justify-self: center; grid-template-columns: auto auto; }
      .mode-group-label { text-align: center; }
      .mode-options { justify-content: center; }
      .lb-row {
        grid-template-columns: 2rem minmax(0, 1fr) 3.2rem 4.2rem 3.3rem 5.4rem;
        gap: 0.42rem;
        padding: 0.8rem 0.65rem;
        font-size: 0.76rem;
      }
      .lb-row.header {
        font-size: 0.55rem;
        letter-spacing: 0;
      }
      .lb-rank { font-size: 0.55rem; }
      .lb-val { font-size: 0.5rem; }
      .lb-date { font-size: 0.62rem; }
    }