/* ──── REFINED FOOTY-TRIVIA DESIGN SYSTEM ──── */

    :root {
      --bg: #080808;
      --surface: #0f0f0f;
      --surface2: #141414;
      --surface3: #1a1a1a;
      --surface-hover: #1c1c1c;
      --border: #1e1e1e;
      --border2: #262626;
      --border-hover: #333;

      --text: #e8e8e8;
      --text2: #8a8a8a;
      --text3: #555;

      --accent: #ffffff;
      --accent-hover: #e8e8e8;
      --accent-text: #000;

      --success: #22c55e;
      --error: #ef4444;
      --gold: #d4a853;
      --gold-light: rgba(212, 168, 83, 0.12);
      --green: #22c55e;
      --red: #ef4444;
      --orange: #f97316;

      --font-display: 'Barlow Condensed', 'Impact', sans-serif;
      --font-ui: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;

      --r: 6px;
      --r2: 8px;
      --r-lg: 12px;
      --transition: 0.18s ease;
      --max-w: 1100px;
      --nav-h: 56px;

      --orange: #f97316;
      --logo-brand: #003d29;
      --logo-glow: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.7))
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.28));
      --logo-glow-minimal: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.32));
      --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
      --shadow2: 0 4px 16px rgba(0, 0, 0, 0.6);
      --glow: none;
      --bg2: #0a0a0a;
      --bg3: #111111;
    }

    [data-theme="light"] {
      --bg: #f2f4f7;
      --bg2: #e8eaed;
      --bg3: #dde0e5;
      --surface: #ffffff;
      --surface2: #f5f6f8;
      --surface3: #eaedf0;
      --surface-hover: #eaedf0;
      --border: #dde0e5;
      --border2: #c8cdd5;
      --border-hover: #9aa0ab;
      --text: #111827;
      --text2: #4b5563;
      --text3: #6b7280;
      --accent: #111827;
      --accent-hover: #1f2937;
      --accent-text: #ffffff;
      --success: #16a34a;
      --error: #dc2626;
      --gold: #b45309;
      --gold-light: rgba(180, 83, 9, 0.1);
      --green: #16a34a;
      --red: #dc2626;
      --orange: #ea580c;
      --logo-brand: #003d29;
      --logo-glow: none;
      --logo-glow-minimal: none;
      --glow: none;
      --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow2: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    /* ── LIGHT THEME OVERRIDES ── */
    /* Hero section */
    [data-theme="light"] .hero-bg {
      background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 0, 0, 0.02) 0%, transparent 70%);
    }

    /* Light theme: keep the natural dark-green logo; hero keeps a soft shadow only. */
    [data-theme="light"] .nav-logo-img,
    [data-theme="light"] .footer-logo-img {
      filter: none;
    }

    [data-theme="light"] .hero-logo-img {
      filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.18));
    }

    [data-theme="light"] .hero-title,
    [data-theme="light"] .hero h1 {
      color: #111827;
    }

    [data-theme="light"] .hero-sub {
      color: #374151;
    }

    [data-theme="light"] .hero-badge {
      background: rgba(0, 0, 0, 0.04);
      border-color: rgba(0, 0, 0, 0.1);
      color: #4b5563;
    }

    [data-theme="light"] .hero-stat-num {
      color: #111827;
    }

    [data-theme="light"] .hero-stat-label {
      color: #6b7280;
    }

    /* Football field - make it subtle on light bg */
    [data-theme="light"] .football-field {
      border-color: rgba(16, 185, 129, 0.2);
      background: radial-gradient(circle at center, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0.015) 60%, transparent 100%);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), inset 0 0 50px rgba(16, 185, 129, 0.08);
    }

    [data-theme="light"] .football-field::before {
      background: rgba(16, 185, 129, 0.15);
    }

    [data-theme="light"] .football-field::after {
      border-color: rgba(16, 185, 129, 0.15);
    }

    [data-theme="light"] .field-penalty-left,
    [data-theme="light"] .field-penalty-right,
    [data-theme="light"] .field-goal-left,
    [data-theme="light"] .field-goal-right {
      border-color: rgba(16, 185, 129, 0.15);
    }

    /* Section headers */
    [data-theme="light"] .section-title {
      color: #111827;
    }

    [data-theme="light"] .section-eyebrow {
      color: #6b7280;
    }

    [data-theme="light"] .section-sub {
      color: #4b5563;
    }

    /* Cards and surfaces */
    [data-theme="light"] .card,
    [data-theme="light"] .cat-card,
    [data-theme="light"] .leaderboard-card {
      background: #ffffff;
      border-color: #e5e7eb;
    }

    [data-theme="light"] .card:hover,
    [data-theme="light"] .cat-card:hover {
      border-color: #9ca3af;
    }

    /* Category cards */
    [data-theme="light"] .cat-name {
      color: #111827;
    }

    [data-theme="light"] .cat-count {
      color: #6b7280;
    }

    /* Category icon rendered by JS */
    [data-theme="light"] .category-card {
      background: #ffffff;
      border-color: #e5e7eb;
      color: #111827;
    }

    [data-theme="light"] .category-card:hover {
      background: #f3f4f6;
      border-color: #9ca3af;
    }

    [data-theme="light"] .category-name {
      color: #111827;
    }

    [data-theme="light"] .category-count {
      color: #6b7280;
    }

    /* Leaderboard */
    [data-theme="light"] .lb-row {
      border-color: #e5e7eb;
    }

    [data-theme="light"] .lb-name {
      color: #111827;
    }

    [data-theme="light"] .lb-score {
      color: #111827;
    }

    [data-theme="light"] .lb-detail {
      color: #6b7280;
    }

    [data-theme="light"] .lb-row:hover {
      background: #f3f4f6;
    }

    [data-theme="light"] .lb-tab {
      color: #4b5563;
    }

    [data-theme="light"] .lb-tab.active {
      color: #111827;
      border-color: #111827;
    }

    /* Profile page */
    [data-theme="light"] .profile-hero {
      background: #ffffff;
      border-color: #e5e7eb;
    }

    [data-theme="light"] .profile-hero::before {
      opacity: 0.03;
    }

    [data-theme="light"] .profile-name {
      color: #111827;
    }

    [data-theme="light"] .profile-rank {
      color: #b45309;
    }

    [data-theme="light"] .profile-xp-label {
      color: #6b7280;
    }

    [data-theme="light"] .profile-stat-card {
      background: #f9fafb;
      border-color: #e5e7eb;
    }

    [data-theme="light"] .profile-stat-val {
      color: #111827;
    }

    [data-theme="light"] .profile-stat-val.text-accent {
      color: #111827;
    }

    [data-theme="light"] .profile-stat-val.text-gold {
      color: #b45309;
    }

    [data-theme="light"] .profile-stat-val.text-green {
      color: #16a34a;
    }

    [data-theme="light"] .profile-stat-key {
      color: #6b7280;
    }

    /* Badges */
    [data-theme="light"] .badge-item {
      background: #f9fafb;
      border-color: #e5e7eb;
      color: #111827;
    }

    /* Transfer Guesser */
    [data-theme="light"] .clue-cell {
      background: #f9fafb;
      border-color: #e5e7eb;
      color: #111827;
    }

    [data-theme="light"] .clue-cell-label {
      color: #6b7280;
    }

    [data-theme="light"] .clue-cell-value {
      color: #111827;
    }

    [data-theme="light"] .clue-cell.correct {
      background: rgba(22, 163, 74, 0.1);
      border-color: #16a34a;
    }

    [data-theme="light"] .clue-cell.wrong {
      background: rgba(220, 38, 38, 0.08);
      border-color: #dc2626;
    }

    [data-theme="light"] .clue-cell.partial {
      background: rgba(180, 83, 9, 0.08);
      border-color: #b45309;
    }

    /* Transfer suggestions dropdown */
    [data-theme="light"] .transfer-suggestions {
      background: #ffffff;
      border-color: #e5e7eb;
    }

    [data-theme="light"] .suggestion-item {
      color: #111827;
    }

    [data-theme="light"] .suggestion-item:hover {
      background: #f3f4f6;
    }

    /* Quiz interface */
    [data-theme="light"] .quiz-question {
      color: #111827;
    }

    [data-theme="light"] .quiz-option {
      background: #ffffff;
      border-color: #e5e7eb;
      color: #111827;
    }

    [data-theme="light"] .quiz-option:hover {
      background: #f3f4f6;
      border-color: #9ca3af;
    }

    /* Mobile menu */
    [data-theme="light"] .mobile-menu {
      background: #ffffff;
      border-color: #e5e7eb;
    }

    [data-theme="light"] .mobile-menu .nav-link {
      color: #4b5563;
    }

    [data-theme="light"] .mobile-menu .nav-link:hover {
      color: #111827;
    }

    /* Toast */
    [data-theme="light"] .toast {
      background: #ffffff;
      color: #111827;
      border-color: #e5e7eb;
    }

    /* Footer */
    [data-theme="light"] footer {
      background: #f9fafb;
      border-color: #e5e7eb;
    }

    /* General text utility classes */
    [data-theme="light"] .text-accent {
      color: #111827 !important;
    }

    [data-theme="light"] .text-gold {
      color: #b45309 !important;
    }

    [data-theme="light"] .text-green {
      color: #16a34a !important;
    }

    /* Mode cards and play page */
    [data-theme="light"] .mode-card {
      background: #ffffff;
      border-color: #e5e7eb;
      color: #111827;
    }

    [data-theme="light"] .mode-card:hover {
      border-color: #9ca3af;
      background: #f9fafb;
    }

    [data-theme="light"] .mode-card h3,
    [data-theme="light"] .mode-card .mode-title {
      color: #111827;
    }

    [data-theme="light"] .mode-card p,
    [data-theme="light"] .mode-card .mode-desc {
      color: #4b5563;
    }

    /* Difficulty buttons */
    [data-theme="light"] .diff-btn {
      background: #f9fafb;
      border-color: #e5e7eb;
      color: #374151;
    }

    [data-theme="light"] .diff-btn.active,
    [data-theme="light"] .diff-btn:hover {
      background: #111827;
      color: #ffffff;
      border-color: #111827;
    }

    /* Fact ticker */
    [data-theme="light"] .fact-ticker {
      color: #4b5563;
    }

    /* Countdown */
    [data-theme="light"] .countdown-val {
      color: #111827;
    }

    [data-theme="light"] .countdown-label {
      color: #6b7280;
    }

    /* Form inputs in modals */
    [data-theme="light"] .modal {
      background: #ffffff;
      border-color: #e5e7eb;
    }

    [data-theme="light"] .modal-title {
      color: #111827;
    }

    [data-theme="light"] .modal-sub {
      color: #4b5563;
    }

    [data-theme="light"] .form-label {
      color: #374151;
    }

    [data-theme="light"] .form-input {
      background: #f9fafb;
      border-color: #d1d5db;
      color: #111827;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
      min-height: 100vh;
      overflow-x: hidden;
      transition: background .3s, color .3s;
      -webkit-font-smoothing: antialiased;
    }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar {
      width: 4px;
    }

    ::-webkit-scrollbar-track {
      background: var(--bg);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 2px;
    }

    /* ── WATERMARK ── */
    #page-bg-watermark {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      transition: opacity .6s ease;
      opacity: 0;
      background-repeat: no-repeat;
      background-position: right -5% bottom -5%;
      background-size: 45vmin 45vmin;
      filter: grayscale(1) opacity(0.04);
    }

    #page-bg-watermark.active {
      opacity: 1;
    }

    /* ── NAV ── */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 0 1.75rem;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(8, 8, 8, 0.92);
      backdrop-filter: blur(16px) saturate(1.2);
      border-bottom: 1px solid var(--border);
      transition: all .3s;
    }

    [data-theme="light"] nav {
      background: rgba(245, 245, 245, 0.92);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: .55rem;
      text-decoration: none;
    }

    .nav-logo-img {
      height: 64px;
      width: auto;
      object-fit: contain;
      transition: transform var(--transition), opacity var(--transition);
      filter: var(--logo-glow-minimal);
    }

    /* Hero logo keeps the full highlight; nav/footer use minimal glow only. */

    .nav-logo:hover .nav-logo-img {
      transform: scale(1.05);
      opacity: 0.92;
    }

    .footer-logo-img {
      height: 56px;
      width: auto;
      object-fit: contain;
      filter: var(--logo-glow-minimal);
    }

    .nav-logo-icon {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform var(--transition), opacity var(--transition);
      color: var(--logo-brand);
    }

    .nav-logo:hover .nav-logo-icon {
      transform: scale(1.08);
      opacity: 0.95;
    }

    .nav-logo-text {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--text);
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: .1rem;
    }

    .nav-link {
      color: var(--text3);
      text-decoration: none;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.82rem;
      padding: 0.35rem 0.42rem;
      border-radius: 5px;
      transition: color var(--transition), background var(--transition);
      letter-spacing: 0.01em;
    }

    .nav-link:hover {
      color: var(--text);
      background: var(--surface2);
    }

    .nav-link.active {
      color: var(--text);
      background: var(--surface2);
      font-weight: 600;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      padding: .45rem .9rem;
      border-radius: var(--r);
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.83rem;
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
      border: 1px solid transparent;
      text-decoration: none;
      letter-spacing: 0.01em;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      pointer-events: none;
    }

    .btn-ghost {
      background: transparent;
      border-color: var(--border2);
      color: var(--text2);
    }

    .btn-ghost:hover {
      border-color: var(--border-hover);
      color: var(--text);
      background: var(--surface2);
    }

    .btn-primary {
      background: var(--accent);
      color: var(--accent-text);
      border-color: var(--accent);
    }

    .btn-primary:hover {
      background: var(--accent-hover);
    }

    .btn-gold {
      background: var(--surface2);
      border-color: var(--border2);
      color: var(--text);
    }

    .btn-gold:hover {
      background: var(--surface3);
      border-color: var(--border-hover);
    }

    .theme-toggle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .9rem;
      transition: border-color var(--transition);
      color: var(--text2);
    }

    .theme-toggle:hover {
      border-color: var(--border-hover);
      color: var(--text);
    }

    .theme-toggle svg {
      display: block;
    }

    /* ── PAGES ── */
    .page {
      display: none;
      animation: fadeInUp .35s ease;
    }

    .page.active {
      display: block;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 80px 2rem 3rem;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 255, 255, 0.025) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Subtle football field lines background element */
    .football-field {
      position: absolute;
      top: 52%;
      left: 50%;
      width: 620px;
      height: 380px;
      border: 1px solid rgba(16, 185, 129, 0.25);
      background: radial-gradient(circle at center, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 60%, transparent 100%);
      transform: translate(-50%, -50%) perspective(1000px) rotateX(55deg) rotateZ(-45deg);
      pointer-events: none;
      z-index: 0;
      border-radius: 8px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 50px rgba(16, 185, 129, 0.15);
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 70%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 70%, transparent 100%);
      transition: all 0.5s ease;
    }

    .football-field::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      background: rgba(255, 255, 255, 0.1);
      transform: translateX(-50%);
    }

    .football-field::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 90px;
      height: 90px;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .field-penalty-left {
      position: absolute;
      top: 20%;
      left: 0;
      width: 80px;
      height: 60%;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-left: none;
    }

    .field-penalty-right {
      position: absolute;
      top: 20%;
      right: 0;
      width: 80px;
      height: 60%;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-right: none;
    }

    .field-goal-left {
      position: absolute;
      top: 35%;
      left: 0;
      width: 30px;
      height: 30%;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-left: none;
    }

    .field-goal-right {
      position: absolute;
      top: 35%;
      right: 0;
      width: 30px;
      height: 30%;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-right: none;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 720px;
    }

    .hero-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 2rem;
    }

    .hero-logo-img {
      height: 210px;
      width: auto;
      max-width: 94%;
      object-fit: contain;
      image-rendering: auto;
      -ms-interpolation-mode: bicubic;
      filter: var(--logo-glow) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
      transform: translateZ(0);
      backface-visibility: hidden;
      animation: heroLogoIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes heroLogoIn {
      from {
        opacity: 0;
        transform: translateY(-12px) scale(0.94);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @media (max-width: 640px) {
      .hero-logo-img {
        height: 156px;
      }
      .hero-logo {
        margin-bottom: 1.5rem;
      }
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      padding: .28rem .75rem;
      font-family: var(--font-ui);
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--text2);
      margin-bottom: 1.4rem;
      text-transform: uppercase;
    }

    .hero h1,
    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5.5vw, 3.8rem);
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.04em;
      margin-bottom: 1.1rem;
      color: var(--text);
      text-transform: uppercase;
    }

    .hero-sub {
      font-size: 0.88rem;
      color: var(--text2);
      max-width: 480px;
      margin: 0 auto 2rem;
      line-height: 1.65;
      font-weight: 400;
    }

    .hero-cta {
      display: flex;
      gap: .75rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-hero {
      padding: .58rem 1.4rem;
      font-size: 0.875rem;
      border-radius: var(--r);
    }

    .hero-stats {
      display: flex;
      gap: 2.5rem;
      justify-content: center;
      margin-top: 3.5rem;
      flex-wrap: wrap;
    }

    .hero-stats.is-loading .hero-stat-num {
      color: var(--text3);
    }

    .hero-stat {
      text-align: center;
    }

    .hero-stat-num {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--text);
    }

    .hero-stat-label {
      font-family: var(--font-ui);
      font-size: .72rem;
      font-weight: 500;
      color: var(--text3);
      letter-spacing: 0.06em;
      margin-top: .2rem;
      text-transform: uppercase;
    }

    /* ── SECTION LAYOUT ── */
    .section {
      padding: 3.5rem 2rem;
      max-width: 1160px;
      margin: 0 auto;
    }

    .section-header {
      margin-bottom: 2.25rem;
    }

    .section-eyebrow {
      font-family: var(--font-ui);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: .4rem;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3.5vw, 2.4rem);
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1;
      text-transform: uppercase;
      color: var(--text);
    }

    .section-title span {
      color: var(--accent);
    }

    .section-sub {
      color: var(--text2);
      margin-top: .6rem;
      font-size: 0.875rem;
      line-height: 1.6;
    }

    /* ── CATEGORIES GRID ── */
    .categories-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: .85rem;
    }

    .cat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1.2rem;
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition), transform var(--transition);
      position: relative;
      overflow: hidden;
      text-decoration: none;
      display: block;
    }

    .cat-card:hover {
      transform: translateY(-2px);
      border-color: var(--border-hover);
      background: var(--surface2);
    }

    .cat-card:hover .cat-name {
      color: var(--text);
    }

    .cat-icon {
      width: 38px;
      height: 38px;
      margin-bottom: .7rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    .cat-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .cat-icon.emoji {
      font-size: 1.2rem;
      width: auto;
      height: auto;
    }

    .cat-name {
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 0.86rem;
      letter-spacing: .02em;
      margin-bottom: .2rem;
      color: var(--text);
      transition: color var(--transition);
    }

    .cat-count {
      font-size: .75rem;
      color: var(--text3);
    }

    .cat-badge {
      position: absolute;
      top: .65rem;
      right: .65rem;
      background: var(--cat-color, var(--accent));
      color: #000;
      font-family: var(--font-ui);
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding: .18rem .45rem;
      border-radius: 3px;
      text-transform: uppercase;
    }

    /* ── CATEGORY CARD BASE STYLES ── */
    .category-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1.2rem;
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition), transform var(--transition);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      text-decoration: none;
    }

    .category-card:hover {
      transform: translateY(-2px);
      border-color: var(--border-hover);
      background: var(--surface2);
    }

    .category-icon {
      width: 40px;
      height: 40px;
      margin-bottom: .8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      position: relative;
      z-index: 1;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.15rem;
      letter-spacing: 0.05em;
    }

    .category-icon img {
      width: 28px;
      height: 28px;
      object-fit: contain;
      display: block;
    }

    [data-theme="dark"] img[src*="PL.png"],
    [data-theme="dark"] img[src*="CL.png"] {
      filter: brightness(0) invert(1);
    }

    [data-theme="dark"] img[src*="2026_FIFA_World_Cup"] {
      filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 1px rgba(255, 255, 255, 1));
    }

    .category-name {
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 0.86rem;
      letter-spacing: .02em;
      margin-bottom: .2rem;
      color: var(--text);
      transition: color var(--transition);
    }

    .category-count {
      font-size: .75rem;
      color: var(--text3);
    }

    /* ── LEADERBOARD ── */
    .leaderboard-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;
    }

    .lb-header {
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .lb-tabs {
      display: flex;
      gap: .2rem;
    }

    .lb-tab {
      font-family: var(--font-ui);
      font-size: 0.78rem;
      font-weight: 500;
      padding: .32rem .7rem;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text3);
      letter-spacing: 0.01em;
      transition: all .18s;
    }

    .lb-tab.active {
      background: var(--surface2);
      color: var(--text);
      border-color: var(--border);
    }

    .lb-tab:hover:not(.active) {
      color: var(--text2);
    }

    .lb-row {
      display: flex;
      align-items: center;
      gap: .85rem;
      padding: .75rem 1.25rem;
      border-bottom: 1px solid var(--border);
      transition: background .18s;
      cursor: pointer;
    }

    .lb-row:hover {
      background: var(--surface2);
    }

    .lb-row:last-child {
      border-bottom: none;
    }

    .lb-rank {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      width: 1.75rem;
      text-align: center;
      color: var(--text3);
      letter-spacing: 0.02em;
    }

    .lb-rank.gold {
      color: var(--gold);
    }

    .lb-rank.silver {
      color: #9ca3af;
    }

    .lb-rank.bronze {
      color: #b45309;
    }

    .lb-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--surface2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .8rem;
      flex-shrink: 0;
      border: 1px solid var(--border);
    }

    .lb-info {
      flex: 1;
      min-width: 0;
    }

    .lb-name {
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: .87rem;
      display: flex;
      align-items: center;
      gap: .35rem;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lb-meta {
      font-size: .72rem;
      color: var(--text3);
      margin-top: .08rem;
    }

    .lb-score {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }

    .lb-flag {
      font-size: .9rem;
    }

    .lb-league-logo {
      width: 26px;
      height: 26px;
      object-fit: contain;
      border-radius: 3px;
    }

    /* ── DAILY CHALLENGE ── */
    .daily-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1.5rem;
      position: relative;
      overflow: hidden;
    }

    .daily-streak {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      background: var(--gold-light);
      border: 1px solid rgba(212, 168, 83, 0.25);
      border-radius: 100px;
      padding: .25rem .65rem;
      font-family: var(--font-ui);
      font-size: .75rem;
      font-weight: 600;
      color: var(--gold);
      letter-spacing: .03em;
      margin-bottom: .85rem;
    }

    .countdown {
      display: flex;
      gap: .75rem;
      margin-top: 1.25rem;
    }

    .countdown-unit {
      text-align: center;
    }

    .countdown-num {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text);
      background: var(--surface2);
      border-radius: 6px;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.04em;
      border: 1px solid var(--border);
    }

    .countdown-label {
      font-family: var(--font-ui);
      font-size: .62rem;
      font-weight: 600;
      color: var(--text3);
      letter-spacing: 0.07em;
      text-transform: uppercase;
      margin-top: .3rem;
    }

    /* ── QUIZ ── */
    #page-quiz {
      background: var(--bg);
      min-height: 100vh;
      padding-top: 56px;
    }

    .quiz-wrap {
      max-width: 700px;
      margin: 0 auto;
      padding: 1.75rem;
    }

    .quiz-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      gap: .75rem;
    }

    .quiz-progress-bar {
      background: var(--surface2);
      border-radius: 100px;
      height: 4px;
      flex: 1;
      overflow: hidden;
      min-width: 100px;
    }

    .quiz-progress-fill {
      height: 100%;
      background: var(--accent);
      border-radius: 100px;
      transition: width .5s ease;
    }

    .quiz-meta {
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }

    .quiz-score-display {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 0.05em;
    }

    .quiz-q-num {
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: .78rem;
      color: var(--text3);
      letter-spacing: 0.05em;
    }

    /* TIMER */
    .timer-ring {
      position: relative;
      width: 56px;
      height: 56px;
      flex-shrink: 0;
    }

    .timer-ring svg {
      transform: rotate(-90deg);
    }

    .timer-circle {
      fill: none;
      stroke: var(--surface2);
      stroke-width: 3.5;
    }

    .timer-progress {
      fill: none;
      stroke: var(--accent);
      stroke-width: 3.5;
      stroke-linecap: round;
      transition: stroke-dashoffset .9s linear, stroke .3s;
    }

    .timer-text {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .timer-ring.warning .timer-progress {
      stroke: var(--orange);
    }

    .timer-ring.danger .timer-progress {
      stroke: var(--red);
    }

    .timer-ring.danger .timer-text {
      color: var(--red);
      animation: blink .5s ease infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .35
      }
    }

    /* QUESTION CARD */
    .question-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1.5rem;
      margin-bottom: 1.25rem;
      animation: slideIn .3s ease;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-14px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .q-category {
      font-family: var(--font-ui);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text2);
      margin-bottom: .85rem;
      display: flex;
      align-items: center;
      gap: .4rem;
    }

    .q-difficulty {
      padding: .16rem .42rem;
      border-radius: 3px;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .q-difficulty.easy {
      background: rgba(34, 197, 94, .12);
      color: var(--green);
    }

    .q-difficulty.medium {
      background: rgba(249, 115, 22, .12);
      color: var(--orange);
    }

    .q-difficulty.hard {
      background: rgba(239, 68, 68, .12);
      color: var(--red);
    }

    .q-difficulty.legendary {
      background: rgba(124, 58, 237, .12);
      color: #a78bfa;
    }

    .q-image {
      width: 100%;
      height: 160px;
      object-fit: cover;
      border-radius: 6px;
      margin-bottom: 1.25rem;
      display: none;
    }

    .q-image.show {
      display: block;
    }

    .q-text {
      font-size: .96rem;
      font-weight: 500;
      line-height: 1.55;
      margin-bottom: 1.5rem;
    }

    .q-hint {
      background: var(--gold-light);
      border: 1px solid rgba(212, 168, 83, .22);
      border-radius: 6px;
      padding: .65rem .9rem;
      font-size: .85rem;
      color: var(--gold);
      margin-bottom: 1.25rem;
      display: none;
    }

    .q-hint.show {
      display: flex;
      align-items: flex-start;
      gap: .4rem;
    }

    /* OPTIONS */
    .options-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .65rem;
    }

    .option {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: .85rem 1rem;
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition), transform .12s;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: .875rem;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: .65rem;
      letter-spacing: .01em;
      text-align: left;
    }

    .option:hover:not(.disabled) {
      background: var(--surface3);
      border-color: var(--border-hover);
      transform: scale(1.008);
    }

    .option-letter {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      flex-shrink: 0;
      font-size: .77rem;
      border: 1px solid var(--border);
      color: var(--text2);
    }

    .option.correct {
      background: rgba(34, 197, 94, .1) !important;
      border-color: var(--green) !important;
      animation: correctPop .35s ease;
    }

    .option.wrong {
      background: rgba(239, 68, 68, .08) !important;
      border-color: var(--red) !important;
      animation: wrongShake .35s ease;
    }

    .option.correct .option-letter {
      background: var(--green);
      color: #000;
      border-color: var(--green);
    }

    .option.wrong .option-letter {
      background: var(--red);
      color: #fff;
      border-color: var(--red);
    }

    .option.disabled {
      pointer-events: none;
      opacity: .55;
    }

    .option.pending {
      opacity: 1;
      border-color: var(--gold) !important;
      background: rgba(212, 175, 55, 0.12) !important;
      animation: pendingPulse 0.9s ease-in-out infinite;
    }

    .option.pending .option-letter {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
    }

    @keyframes pendingPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.2); }
      50% { box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18); }
    }

    @keyframes correctPop {
      0% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.025)
      }

      100% {
        transform: scale(1)
      }
    }

    @keyframes wrongShake {

      0%,
      100% {
        transform: translateX(0)
      }

      20%,
      60% {
        transform: translateX(-5px)
      }

      40%,
      80% {
        transform: translateX(5px)
      }
    }

    /* HINTS */
    .hints-bar {
      display: flex;
      align-items: center;
      gap: .4rem;
      margin-bottom: .85rem;
      flex-wrap: wrap;
    }

    .hint-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: .28rem .6rem;
      font-family: var(--font-ui);
      font-size: .72rem;
      font-weight: 600;
      cursor: pointer;
      color: var(--gold);
      letter-spacing: .02em;
      transition: border-color var(--transition), background var(--transition);
      display: flex;
      align-items: center;
      gap: .25rem;
    }

    .hint-btn:hover {
      border-color: var(--gold);
      background: var(--gold-light);
    }

    .hint-btn.used {
      opacity: .35;
      pointer-events: none;
      text-decoration: line-through;
    }

    .hints-label {
      font-family: var(--font-ui);
      font-size: .72rem;
      color: var(--text3);
      font-weight: 500;
    }

    /* FEEDBACK OVERLAY */
    .feedback-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .55);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .12s ease-out;
    }

    .feedback-overlay.show {
      opacity: 1;
      pointer-events: all;
    }

    .feedback-box {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: var(--r-lg);
      padding: 2rem 2.5rem;
      text-align: center;
      animation: popIn .16s cubic-bezier(.34, 1.56, .64, 1);
    }

    @keyframes popIn {
      from {
        transform: scale(0.8);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    .feedback-icon {
      font-size: 2.2rem;
      margin-bottom: .5rem;
    }

    .feedback-title {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: .35rem;
    }

    .feedback-points {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 0.06em;
    }

    .feedback-sub {
      color: var(--text2);
      font-size: .85rem;
      margin-top: .4rem;
    }

    /* RESULTS */
    .results-card {
      background: var(--surface);
      border-radius: var(--r);
      padding: 2.25rem;
      text-align: center;
      border: 1px solid var(--border);
    }

    .results-ring {
      width: 130px;
      height: 130px;
      margin: 0 auto 1.5rem;
      position: relative;
    }

    .results-score-text {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .results-pct {
      font-family: var(--font-display);
      font-size: 2rem;
      color: var(--accent);
      letter-spacing: 0.04em;
    }

    .results-label {
      font-size: .65rem;
      color: var(--text3);
      font-family: var(--font-ui);
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .results-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .85rem;
      margin: 1.5rem 0;
    }

    .results-stat {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: .9rem;
    }

    .results-stat-val {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text);
    }

    .results-stat-key {
      font-family: var(--font-ui);
      font-size: .65rem;
      color: var(--text3);
      letter-spacing: 0.07em;
      text-transform: uppercase;
      margin-top: .2rem;
    }

    .results-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .75rem;
      padding: 2.5rem 1rem;
      min-height: 280px;
    }

    .results-loading.hidden {
      display: none;
    }

    .results-loading-spinner {
      width: 42px;
      height: 42px;
      border: 3px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: resultsSpin .8s linear infinite;
    }

    @keyframes resultsSpin {
      to { transform: rotate(360deg); }
    }

    .results-loading-title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text);
      margin: 0;
    }

    .results-loading-msg {
      color: var(--text2);
      font-size: .92rem;
      margin: 0;
      max-width: 22rem;
      line-height: 1.5;
    }

    #results-content.results-content-hidden {
      display: none;
    }

    /* ── LEAGUE SECTION ── */
    .league-section {
      margin-bottom: 2.75rem;
    }

    .league-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.4rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }

    /* ── 3rd Place Qualifier Selection ── */
    .tp-counter {
      margin-left: auto;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text2);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.2rem 0.75rem;
    }

    .tp-counter.complete {
      color: #10b981;
      border-color: rgba(16, 185, 129, 0.5);
      background: rgba(16, 185, 129, 0.12);
    }

    .tp-warning {
      font-size: 0.82rem;
      font-weight: 600;
      color: #f59e0b;
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 8px;
      padding: 0.55rem 0.85rem;
      margin-bottom: 1rem;
    }

    .tp-team-card {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      background: var(--surface2);
      border: 2px solid var(--border);
      border-radius: 10px;
      padding: 0.7rem 0.85rem;
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition), transform var(--transition);
      user-select: none;
    }

    .tp-team-card:hover {
      border-color: var(--text3);
      transform: translateY(-1px);
    }

    .tp-team-card.selected {
      border-color: #10b981;
      background: rgba(16, 185, 129, 0.12);
    }

    .tp-team-card .tp-check {
      margin-left: auto;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: #fff;
      flex-shrink: 0;
    }

    .tp-team-card.selected .tp-check {
      background: #10b981;
      border-color: #10b981;
    }

    .tp-team-card .tp-name {
      font-weight: 600;
      font-size: 0.9rem;
    }

    .tp-team-card .tp-group {
      font-size: 0.72rem;
      color: var(--text3);
      font-weight: 700;
    }

    .league-logo {
      width: 44px;
      height: 44px;
      background: var(--surface);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      padding: 6px;
      flex-shrink: 0;
    }

    .league-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .league-name {
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: .9rem;
      letter-spacing: .02em;
    }

    .league-count {
      font-size: .75rem;
      color: var(--text3);
      margin-top: .1rem;
    }

    /* CLUB */
    .club-emblem {
      width: 88px;
      height: 88px;
      background: var(--surface);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      padding: 9px;
    }

    .club-emblem img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .club-meta h1 {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .club-meta p {
      color: var(--text2);
      font-size: .88rem;
      margin-top: .25rem;
    }

    .club-trophy-row {
      display: flex;
      gap: .75rem;
      margin-top: .85rem;
      flex-wrap: wrap;
    }

    .trophy-badge {
      background: var(--gold-light);
      border: 1px solid rgba(212, 168, 83, .22);
      border-radius: 5px;
      padding: .3rem .6rem;
      font-family: var(--font-ui);
      font-size: .75rem;
      font-weight: 600;
      color: var(--gold);
      display: flex;
      align-items: center;
      gap: .3rem;
    }

    .club-header {
      display: flex;
      align-items: center;
      gap: 1.4rem;
      flex-wrap: wrap;
      margin-bottom: 2.5rem;
      padding-bottom: 1.75rem;
      border-bottom: 1px solid var(--border);
    }

    /* ── TRANSFER GUESSER ── */
    .transfer-game {
      max-width: 660px;
      margin: 0 auto;
    }

    .transfer-clues {
      display: grid;
      gap: .65rem;
      margin-bottom: 1.75rem;
    }

    .clue-row {
      display: flex;
      gap: .4rem;
      align-items: stretch;
    }

    .clue-cell {
      flex: 1;
      background: var(--surface2);
      border-radius: 5px;
      padding: .7rem;
      text-align: center;
      border: 1px solid var(--border);
      transition: all .25s;
      color: var(--text);
    }

    .clue-cell.correct {
      background: rgba(34, 197, 94, .1);
      border-color: var(--green);
    }

    .clue-cell.wrong {
      background: rgba(239, 68, 68, .07);
      border-color: var(--red);
    }

    .clue-cell.partial {
      background: rgba(212, 168, 83, .08);
      border-color: var(--gold);
    }

    .clue-cell-label {
      font-family: var(--font-ui);
      font-size: .62rem;
      font-weight: 600;
      color: var(--text3);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: .25rem;
    }

    .clue-cell-value {
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: .84rem;
    }

    .transfer-input-wrap {
      display: flex;
      gap: .65rem;
      margin-bottom: 1.25rem;
    }

    .transfer-input {
      flex: 1;
      background: transparent;
      border: 1px solid var(--border2);
      border-radius: var(--r);
      padding: .55rem .9rem;
      color: var(--text);
      font-family: var(--font-ui);
      font-size: .9rem;
      outline: none;
      transition: border-color var(--transition);
    }

    .transfer-input:focus {
      border-color: var(--border-hover);
    }

    .transfer-suggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      margin-top: 0.25rem;
      max-height: 180px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    }

    .suggestion-item {
      padding: 0.6rem 1rem;
      cursor: pointer;
      font-family: var(--font-ui);
      font-size: 0.9rem;
      color: var(--text2);
      text-align: left;
      transition: all 0.2s;
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .suggestion-item:last-child {
      border-bottom: none;
    }

    .suggestion-item:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
    }

    .transfer-legend {
      display: flex;
      gap: .85rem;
      flex-wrap: wrap;
      margin-top: .85rem;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: .35rem;
      font-family: var(--font-ui);
      font-size: .73rem;
      color: var(--text2);
      letter-spacing: .02em;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }

    /* ── PROFILE ── */
    .profile-hero {
      background: var(--surface);
      border-radius: var(--r);
      padding: 1.75rem;
      margin-bottom: 1.75rem;
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .profile-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--text3), transparent);
    }

    .profile-avatar-wrap {
      position: relative;
    }

    .profile-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--surface2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      border: 2px solid var(--border2);
    }

    .profile-level-badge {
      position: absolute;
      bottom: -3px;
      right: -3px;
      background: var(--gold);
      color: #000;
      font-family: var(--font-display);
      font-size: .8rem;
      font-weight: 700;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid var(--bg);
    }

    .profile-info {
      flex: 1;
      min-width: 0;
    }

    .profile-name {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .profile-rank {
      font-family: var(--font-ui);
      font-size: .75rem;
      color: var(--text2);
      letter-spacing: 0.04em;
      margin-top: .1rem;
    }

    .profile-xp-bar {
      background: var(--surface2);
      border-radius: 100px;
      height: 5px;
      margin-top: .65rem;
      overflow: hidden;
    }

    .profile-xp-fill {
      height: 100%;
      background: var(--accent);
      border-radius: 100px;
      transition: width 1s ease;
    }

    .profile-xp-label {
      font-family: var(--font-ui);
      font-size: .68rem;
      color: var(--text3);
      letter-spacing: .03em;
      margin-top: .28rem;
    }

    .profile-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: .85rem;
      margin-bottom: 1.75rem;
    }

    .profile-stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1rem;
      text-align: center;
      transition: border-color var(--transition);
    }

    .profile-stat-card:hover {
      border-color: var(--border-hover);
    }

    .profile-stat-val {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .profile-stat-key {
      font-family: var(--font-ui);
      font-size: .65rem;
      color: var(--text3);
      letter-spacing: 0.07em;
      text-transform: uppercase;
      margin-top: .2rem;
    }

    .badges-grid {
      display: flex;
      gap: .6rem;
      flex-wrap: wrap;
    }

    .badge-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: .6rem .85rem;
      display: flex;
      align-items: center;
      gap: .4rem;
      font-family: var(--font-ui);
      font-size: .77rem;
      font-weight: 600;
      letter-spacing: .02em;
      cursor: default;
      transition: border-color var(--transition), transform var(--transition);
    }

    .badge-item:hover {
      border-color: var(--gold);
      transform: translateY(-1px);
    }

    .badge-icon {
      font-size: 1.1rem;
    }

    /* ── MODE CARDS ── */
    .modes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
      gap: .85rem;
      margin-bottom: 2.25rem;
    }

    .mode-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1.25rem;
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition), transform var(--transition);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .mode-card:hover {
      border-color: var(--border-hover);
      background: var(--surface2);
      transform: translateY(-1px);
    }

    .mode-card.active {
      border-color: var(--gold);
      background: var(--surface2);
      box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(212, 168, 83, 0.15);
    }

    .mode-card.active:hover {
      border-color: var(--gold);
    }

    .mode-card.locked {
      opacity: .45;
      cursor: not-allowed;
    }

    .mode-card.locked:hover {
      transform: none;
    }

    .mode-icon {
      font-size: 1.4rem;
      margin-bottom: .6rem;
      color: var(--text2);
    }

    .mode-name {
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: .9rem;
      margin-bottom: .25rem;
    }

    .mode-desc {
      font-size: .75rem;
      color: var(--text3);
      line-height: 1.4;
    }

    /* DIFFICULTY GRID */
    .diff-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .65rem;
      margin-bottom: 2.25rem;
    }

    .diff-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: .75rem;
      cursor: pointer;
      text-align: center;
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: .82rem;
      transition: all var(--transition);
      letter-spacing: 0.02em;
    }

    .diff-btn:hover {
      background: var(--surface2);
      border-color: var(--border-hover);
    }

    .diff-btn.easy.active {
      border-color: var(--green);
      color: var(--green);
      background: rgba(34, 197, 94, .06);
    }

    .diff-btn.medium:hover,
    .diff-btn.medium.active {
      border-color: var(--orange);
      color: var(--orange);
      background: rgba(249, 115, 22, .06);
    }

    .diff-btn.hard:hover,
    .diff-btn.hard.active {
      border-color: var(--red);
      color: var(--red);
      background: rgba(239, 68, 68, .06);
    }

    .diff-btn.legendary:hover,
    .diff-btn.legendary.active {
      border-color: #a78bfa;
      color: #a78bfa;
      background: rgba(124, 58, 237, .06);
    }

    .diff-icon {
      font-size: 1.1rem;
      display: block;
      margin-bottom: .3rem;
    }

    /* ── AUTH MODAL ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 10050;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s;
    }

    [data-theme="light"] .modal-overlay {
      background: rgba(0, 0, 0, .4);
    }

    .modal-overlay.show {
      opacity: 1;
      pointer-events: all;
    }

    .modal {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: var(--r-lg);
      padding: 2.25rem;
      width: 90%;
      max-width: 400px;
      transform: scale(.96);
      transition: transform .25s;
      position: relative;
    }

    .modal-overlay.show .modal {
      transform: scale(1);
    }

    .modal-title {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: .35rem;
    }

    .modal-sub {
      color: var(--text2);
      font-size: .85rem;
      margin: .4rem 0 1.25rem;
    }

    .form-group {
      margin-bottom: .85rem;
    }

    .form-label {
      font-family: var(--font-ui);
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--text2);
      display: block;
      margin-bottom: .35rem;
    }

    .form-input {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: .6rem .85rem;
      color: var(--text);
      font-family: var(--font-body);
      font-size: .9rem;
      outline: none;
      transition: border-color var(--transition), background var(--transition), color var(--transition);
    }

    .form-input::placeholder {
      color: var(--text3);
    }

    .auth-form-status {
      margin-top: 0.85rem;
      font-size: 0.82rem;
      color: var(--text2);
      text-align: center;
      line-height: 1.4;
    }

    .auth-form-status.hidden {
      display: none;
    }

    .auth-form-error {
      background: rgba(220, 53, 69, 0.12);
      border: 1px solid rgba(220, 53, 69, 0.35);
      color: #ff8a8a;
      border-radius: 6px;
      padding: 0.75rem 0.9rem;
      font-size: 0.88rem;
      line-height: 1.45;
      margin-top: 0.85rem;
      text-align: left;
    }

    .auth-form-error.hidden {
      display: none;
    }

    .form-input.auth-field-error {
      border-color: var(--red) !important;
      box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
    }

    .form-input:focus {
      border-color: var(--border-hover);
    }

    .password-field-wrap {
      position: relative;
    }

    .password-field-wrap .form-input {
      padding-right: 2.75rem;
    }

    .password-toggle-btn {
      position: absolute;
      right: 0.5rem;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.95rem;
      line-height: 1;
      opacity: 0.65;
      padding: 0.25rem;
      color: var(--text2);
      transition: opacity var(--transition);
    }

    .password-toggle-btn:hover {
      opacity: 1;
    }

    .toast.auth-wait-toast {
      border-left: 2px solid var(--gold);
    }

    .toast-container.auth-wait-active {
      z-index: 10100;
    }

    .form-divider {
      display: flex;
      align-items: center;
      gap: .65rem;
      margin: 1rem 0;
      color: var(--text3);
      font-size: .75rem;
    }

    .form-divider::before,
    .form-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .btn-google {
      width: 100%;
      justify-content: center;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text);
      padding: .65rem;
      border-radius: 6px;
      font-size: .85rem;
    }

    .btn-google:hover {
      border-color: var(--border-hover);
    }

    .modal-footer {
      text-align: center;
      margin-top: 1rem;
      font-size: .82rem;
      color: var(--text3);
    }

    .modal-footer a {
      color: var(--text2);
      cursor: pointer;
      text-decoration: none;
    }

    .modal-footer a:hover {
      color: var(--text);
    }

    .modal-close {
      position: absolute;
      top: .85rem;
      right: .85rem;
      background: none;
      border: none;
      color: var(--text3);
      cursor: pointer;
      font-size: .9rem;
      transition: color var(--transition);
    }

    .modal-close:hover {
      color: var(--text);
    }

    /* ── PROFILE PANEL ── */
    .profile-panel {
      position: fixed;
      top: 0;
      right: -360px;
      width: 300px;
      height: 100vh;
      background: var(--surface);
      border-left: 1px solid var(--border);
      z-index: 1000;
      transition: right .28s cubic-bezier(.4, 0, .2, 1);
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow2);
    }

    .profile-panel.open {
      right: 0;
    }

    .profile-panel-close {
      position: absolute;
      top: .85rem;
      right: .85rem;
      cursor: pointer;
      font-size: 1.1rem;
      color: var(--text3);
      transition: color var(--transition);
    }

    .profile-panel-close:hover {
      color: var(--text);
    }

    .profile-avatar-large {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      border: 2px solid var(--border2);
      margin: 1.25rem auto;
      display: block;
      object-fit: cover;
    }

    .profile-stat-box {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: .65rem;
      margin-bottom: .6rem;
      text-align: center;
      transition: transform var(--transition);
    }

    .profile-stat-box:hover {
      transform: translateY(-1px);
    }

    .profile-stat-val {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
    }

    .profile-stat-lbl {
      font-size: .68rem;
      color: var(--text3);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-top: .1rem;
    }

    /* ── BATTLE ── */
    .battle-lobby-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 2.25rem;
      max-width: 580px;
      margin: 1.75rem auto;
      text-align: center;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .battle-lobby-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--border2), transparent);
    }

    .lobby-player-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 1rem;
      margin: 1.75rem 0;
    }

    .lobby-player-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1rem .65rem;
      position: relative;
      text-align: center;
      transition: all var(--transition);
    }

    .lobby-player-card:hover {
      border-color: var(--border-hover);
    }

    .player-ready-dot {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
    }

    .player-ready-dot.ready {
      background: var(--green);
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: .6
      }

      50% {
        opacity: 1
      }
    }

    .battle-timer-ring-container {
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
    }

    .timer-ring-svg {
      width: 56px;
      height: 56px;
    }

    .timer-ring-bg {
      fill: none;
      stroke: var(--surface2);
      stroke-width: 3.5;
    }

    .timer-ring-circle {
      fill: none;
      stroke: var(--accent);
      stroke-width: 3.5;
      stroke-linecap: round;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
      transition: stroke-dashoffset 1s linear;
    }

    .timer-ring-circle.warning {
      stroke: var(--orange);
    }

    .timer-ring-circle.danger {
      stroke: var(--red);
    }

    .battle-timer-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
    }

    /* ── FACT TICKER ── */
    .fact-ticker {
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: .6rem 0;
      overflow: hidden;
      position: relative;
    }

    .fact-ticker-inner {
      display: flex;
      gap: 3.5rem;
      animation: ticker 35s linear infinite;
      width: max-content;
    }

    .fact-item {
      display: flex;
      align-items: center;
      gap: .4rem;
      font-family: var(--font-ui);
      font-size: .78rem;
      color: var(--text2);
      white-space: nowrap;
      letter-spacing: .01em;
    }

    .fact-item::before {
      content: '⚽';
      font-size: .65rem;
    }

    @keyframes ticker {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    /* ── FOOTER ── */
    footer {
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 2.5rem 2rem;
      text-align: center;
    }

    .footer-logo {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text2);
      margin-bottom: .4rem;
    }

    .footer-sub {
      color: var(--text3);
      font-size: .78rem;
      margin-bottom: 1.25rem;
    }

    .footer-links {
      display: flex;
      gap: 1.25rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 1.25rem;
    }

    .footer-link {
      color: var(--text3);
      text-decoration: none;
      font-family: var(--font-ui);
      font-size: .75rem;
      letter-spacing: .02em;
      transition: color var(--transition);
    }

    .footer-link:hover {
      color: var(--text);
    }

    .footer-copy {
      color: var(--text3);
      font-size: .72rem;
    }

    /* ── HAMBURGER ── */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      padding: .45rem;
      background: none;
      border: none;
    }

    .hamburger span {
      width: 20px;
      height: 1.5px;
      background: var(--text2);
      border-radius: 2px;
      transition: all .3s;
      display: block;
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: var(--nav-h);
      left: 0;
      right: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: .85rem;
      z-index: 99;
      flex-direction: column;
      gap: .2rem;
    }

    .mobile-menu.open {
      display: flex;
    }

    .mobile-menu .nav-link {
      padding: .55rem .5rem;
      border-radius: 5px;
    }

    /* ── TOAST ── */
    .toast-container {
      position: fixed;
      bottom: 1.75rem;
      right: 1.75rem;
      z-index: 10250;
      display: flex;
      flex-direction: column;
      gap: .4rem;
      pointer-events: none;
    }

    .toast-container .toast {
      pointer-events: auto;
    }

    .toast {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: .65rem 1rem;
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: .8rem;
      letter-spacing: .01em;
      box-shadow: var(--shadow2);
      animation: toastIn .25s ease;
      display: flex;
      align-items: center;
      gap: .45rem;
      max-width: 280px;
    }

    .toast.success {
      border-left: 2px solid var(--green);
    }

    .toast.error {
      border-left: 2px solid var(--red);
    }

    .toast.warning {
      border-left: 2px solid var(--gold);
    }

    .toast.info {
      border-left: 2px solid var(--text3);
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateX(16px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    /* ── COMBO FLASH ── */
    .combo-flash {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-display);
      font-size: 3rem;
      font-weight: 700;
      color: var(--gold);
      pointer-events: none;
      z-index: 250;
      animation: comboAnim .9s ease forwards;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    @keyframes comboAnim {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.6)
      }

      30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05)
      }

      70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -65%) scale(.9)
      }
    }

    /* ── UTILITIES ── */
    .text-accent {
      color: var(--accent);
    }

    .text-gold {
      color: var(--gold);
    }

    .text-green {
      color: var(--green);
    }

    .flex {
      display: flex;
    }

    .items-center {
      align-items: center;
    }

    .gap-1 {
      gap: .5rem;
    }

    .gap-2 {
      gap: 1rem;
    }

    .mt-1 {
      margin-top: .5rem;
    }

    .mt-2 {
      margin-top: 1rem;
    }

    .mt-3 {
      margin-top: 1.5rem;
    }

    .mb-2 {
      margin-bottom: 1rem;
    }

    .hidden {
      display: none !important;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: start;
    }

    @media (max-width: 600px) {
      .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
      }

      /* Leaderboard rows — home preview and full page */
      #lb-list .lb-row,
      #lb-main-list .lb-row,
      .leaderboard-card .lb-row {
        padding: 0.55rem 0.75rem;
        gap: 0.45rem;
      }

      #lb-list .lb-name,
      #lb-main-list .lb-name,
      .leaderboard-card .lb-name {
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #lb-list .lb-name span,
      #lb-main-list .lb-name span,
      .leaderboard-card .lb-name span {
        font-size: 0.52rem !important;
        padding: 0.05rem 0.25rem !important;
        margin-left: 0.25rem !important;
      }

      #lb-list .lb-score,
      #lb-main-list .lb-score,
      .leaderboard-card .lb-score {
        font-size: 0.82rem;
        flex-shrink: 0;
      }

      #lb-list .lb-rank,
      #lb-main-list .lb-rank,
      .leaderboard-card .lb-rank {
        font-size: 0.78rem;
        width: 1.35rem;
        flex-shrink: 0;
      }

      #lb-main-list .lb-avatar,
      .leaderboard-card .lb-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.68rem;
      }

      #lb-main-list .lb-meta,
      .leaderboard-card .lb-meta {
        font-size: 0.6rem;
      }

      .leaderboard-card .lb-header {
        padding: 0.75rem 1rem;
      }

      .leaderboard-card .lb-tab {
        font-size: 0.72rem;
        padding: 0.28rem 0.55rem;
      }

      .profile-stat-val {
        font-size: 0.95rem;
      }

      .profile-stat-key {
        font-size: 0.58rem;
      }
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1.25rem;
    }

    .divider {
      height: 1px;
      background: var(--border);
      margin: 1.25rem 0;
    }

    .text-center {
      text-align: center;
    }

    /* ── RESPONSIVE ── */
    @media(max-width:768px) {

      .nav-links,
      .nav-actions .btn-ghost,
      .nav-actions .btn-primary {
        display: none;
      }

      .hamburger {
        display: flex;
      }

      .nav-actions .theme-toggle,
      .nav-actions #sound-toggle-btn {
        display: flex;
      }

      .wc-nav-tabs-bar {
        padding: 0 0.85rem;
      }

      .wc-nav-tabs {
        gap: 0.5rem;
        padding: 0.5rem 0 0.65rem;
      }

      .wc-hub-section {
        padding-top: 3.15rem;
      }

      .wc-tab {
        padding: 0.6rem 1rem;
        font-size: 0.72rem;
      }

      .options-grid {
        grid-template-columns: 1fr;
      }

      .diff-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .hero-stats {
        gap: 1.5rem;
      }

      .clue-row {
        flex-wrap: wrap;
      }

      .clue-cell {
        min-width: calc(50% - .2rem);
      }
    }

    @media(max-width:480px) {
      .categories-grid {
        grid-template-columns: 1fr 1fr;
      }

      .modes-grid {
        grid-template-columns: 1fr 1fr;
      }

      .profile-stats-grid {
        grid-template-columns: 1fr 1fr;
      }

      .modal {
        padding: 1.5rem;
      }
    }

    /* ── UPGRADE BOX ── */
    .upgrade-box {
      text-align: center;
      padding: .85rem;
    }

    .upgrade-price {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text);
      margin: 1rem 0;
    }
    /* ── WORLD CUP HUB ── */
    #page-worldcup {
      padding-top: var(--nav-h);
    }

    .wc-nav-tabs-bar {
      position: fixed;
      top: var(--nav-h);
      left: 0;
      right: 0;
      z-index: 95;
      background: rgba(8, 8, 8, 0.96);
      backdrop-filter: blur(12px) saturate(1.1);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      padding: 0 1.75rem;
    }

    [data-theme="light"] .wc-nav-tabs-bar {
      background: rgba(245, 245, 245, 0.96);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    }

    .wc-hub-section {
      padding-top: 3.5rem;
    }

    .wc-hero {
      background: linear-gradient(135deg, var(--bg) 0%, rgba(16, 185, 129, 0.15) 100%);
      padding: 3rem 2rem;
      border-radius: var(--r-lg);
      text-align: center;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--border);
      margin-bottom: 2rem;
    }
    .wc-hero img { height: 100px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.4)); margin-bottom: 1rem; }
    .wc-hero h1 { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 0.5rem; letter-spacing: 0.05em; color: var(--text); }
    .wc-hero p { color: var(--text2); font-size: 1rem; max-width: 600px; margin: 0 auto; line-height: 1.5; }

    .wc-nav-tabs {
      display: flex;
      gap: 1rem;
      max-width: 1160px;
      margin: 0 auto;
      padding: 0.65rem 0 0.75rem;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .wc-nav-tabs::-webkit-scrollbar { display: none; }
    .wc-tab {
      padding: 0.75rem 1.5rem; background: transparent; border: 1px solid transparent; color: var(--text2); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border-radius: var(--r); transition: all var(--transition); white-space: nowrap; flex-shrink: 0;
    }
    .wc-tab.active, .wc-tab:hover {
      background: var(--surface2); color: var(--gold); box-shadow: var(--shadow); border-color: var(--border);
    }

    .wc-mobile-nav {
      display: flex;
      flex-direction: column;
    }
    .wc-mobile-nav-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      cursor: pointer;
      font: inherit;
      color: inherit;
      padding: .55rem .85rem;
      border-radius: 5px;
    }
    .wc-mobile-nav-toggle.active {
      background: var(--surface2);
      color: var(--text);
      font-weight: 600;
    }
    .wc-mobile-nav-chevron {
      font-size: 0.75rem;
      color: var(--text3);
      transition: transform var(--transition);
    }
    .wc-mobile-nav-toggle.expanded .wc-mobile-nav-chevron {
      transform: rotate(180deg);
    }
    .wc-mobile-nav-sub {
      display: none;
      flex-direction: column;
      gap: 0.1rem;
      padding: 0.15rem 0 0.35rem 0.85rem;
      border-left: 2px solid var(--border);
      margin: 0.15rem 0 0.25rem 0.65rem;
    }
    .wc-mobile-nav-sub.open {
      display: flex;
    }
    .wc-mobile-tab {
      padding: 0.45rem 0.75rem;
      background: transparent;
      border: none;
      color: var(--text2);
      text-align: left;
      font-family: var(--font-display);
      font-size: 0.78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      border-radius: var(--r);
      transition: color var(--transition);
    }
    .wc-mobile-tab:hover,
    .wc-mobile-tab.active {
      color: var(--gold);
    }

    .wc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
    #wc-dashboard-groups { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
    .wc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem; transition: transform 0.2s, border-color var(--transition); }
    .wc-card:hover { transform: translateY(-3px); border-color: var(--gold); }
    .wc-card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }

    .wc-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; }
    .wc-table th { color: var(--text2); font-weight: 600; padding: 0.5rem; border-bottom: 1px solid var(--border); }
    .wc-table td { padding: 0.75rem 0.5rem; color: var(--text); border-bottom: 1px solid var(--border2); }
    .wc-table tr:last-child td { border-bottom: none; }
    .wc-team { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }

    /* ── Match prediction fixture cards ── */
    .wc-predictions-fixtures-grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }
    .wc-pred-fixture-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      min-width: 0;
      overflow: hidden;
    }
    .wc-pred-fixture-meta {
      display: flex;
      justify-content: space-between;
      gap: 0.5rem;
      font-size: 0.75rem;
      color: var(--text3);
      border-bottom: 1px solid var(--border);
      padding-bottom: 0.5rem;
    }
    .wc-pred-matchup {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 0.5rem;
      padding: 0.35rem 0;
    }
    .wc-pred-team {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      min-width: 0;
    }
    .wc-pred-team-away {
      justify-content: flex-end;
    }
    .wc-pred-flag {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
    }
    .wc-pred-flag img {
      width: 22px;
      height: 15px;
      object-fit: cover;
      border-radius: 2px;
    }
    .wc-pred-name {
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--text);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .wc-pred-scores {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex-shrink: 0;
    }
    .wc-pred-score-input {
      width: 40px;
      text-align: center;
      padding: 0.3rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--surface);
      color: var(--text);
      font-weight: 700;
      font-size: 0.85rem;
    }
    .wc-pred-score-input--guest { cursor: pointer; }
    .wc-pred-vs {
      color: var(--text3);
      font-size: 0.75rem;
      flex-shrink: 0;
    }
    .wc-pred-venue {
      font-size: 0.75rem;
      color: var(--text2);
      text-align: center;
      font-style: italic;
      line-height: 1.35;
      word-break: break-word;
    }
    .wc-pred-fixture-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.25rem;
      border-top: 1px solid var(--border);
      padding-top: 0.75rem;
    }
    .wc-pred-status {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text3);
    }
    .wc-pred-status--saved { color: var(--success); }
    .wc-pred-save-btn {
      padding: 0.3rem 0.8rem;
      font-size: 0.8rem;
      flex-shrink: 0;
    }

    .wc-fixture { display: flex; justify-content: space-between; align-items: center; background: var(--surface2); border: 1px solid var(--border); padding: 1rem; border-radius: var(--r); margin-bottom: 0.75rem; }
    .wc-fixture-time { font-size: 0.75rem; color: var(--text2); text-align: center; width: 60px; }
    .wc-fixture-teams { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; font-weight: 600; color: var(--text); }
    .wc-fixture-team { display: flex; align-items: center; gap: 0.5rem; }
    .wc-predict-btn { background: var(--gold); color: #000; font-family: var(--font-display); font-weight: 700; padding: 0.5rem 1rem; border-radius: var(--r); border: none; cursor: pointer; text-transform: uppercase; font-size: 0.75rem; transition: filter 0.2s; }
    .wc-predict-btn:hover { filter: brightness(1.1); }

    .wc-bracket { display: flex; gap: 2rem; overflow-x: auto; padding-bottom: 2rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .wc-bracket-col { display: flex; flex-direction: column; justify-content: space-around; gap: 1rem; min-width: 200px; }
    .wc-matchup { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; }
    .wc-matchup-team { display: flex; justify-content: space-between; padding: 0.5rem; color: var(--text); border-bottom: 1px solid var(--border); }
    .wc-matchup-team:last-child { border-bottom: none; }

    .wc-stat-row { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border); align-items: center; color: var(--text); }
    .wc-stat-bar { background: var(--surface3); height: 6px; border-radius: 3px; margin-top: 0.5rem; overflow: hidden; }
    .wc-stat-fill { background: var(--gold); height: 100%; }

    .wc-tier-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
    .wc-tier-elite { background: linear-gradient(45deg, #8b5cf6, #d946ef); color: #fff; }
    .wc-tier-gold { background: linear-gradient(45deg, var(--gold), #f59e0b); color: #000; }

/* ── BRACKET PREDICTION — SYMMETRIC TEMPLATE ── */
    .bp-bracket-wrapper { display: flex; align-items: stretch; overflow-x: auto; overflow-y: visible; padding: 1rem 0 2rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; scrollbar-gutter: stable; gap: 1rem; position: relative; width: 100%; max-width: 100%; margin: 0; justify-content: flex-start; min-height: 1050px; contain: layout style; }
    .bp-bracket-half { display: flex; flex: 0 0 auto; gap: 1rem; }
    .bp-bracket-half.right { flex-direction: row; }
    .bp-bracket-center { display: flex; flex-direction: column; align-items: stretch; min-width: 200px; flex-shrink: 0; position: relative; gap: 0.75rem; }
    .bp-round { min-width: 200px; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; padding: 0 4px; position: relative; }
    .bp-round-title { text-align: center; color: var(--text2); font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; padding: 0.4rem 0.6rem; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--border); flex-shrink: 0; position: sticky; top: 0; z-index: 10; }
    .bp-round-title.active-round { color: var(--gold); border-color: var(--gold); background: var(--gold-light); }
    .bp-round-matches { position: relative; flex: 1; width: 100%; display: flex; flex-direction: column; height: 1050px; }
    .bp-round-matches.r32-matches { justify-content: flex-start; gap: 0.4rem; }
    .bp-match { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 0; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
    .bp-match:hover { border-color: var(--border2, var(--border)); box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
    .bp-match.complete { border-color: var(--success); }
    .bp-match-label { font-size: 0.6rem; color: var(--text3); text-align: center; padding: 0.18rem; background: var(--surface2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
    .bp-slot { display: flex; align-items: center; padding: 0.38rem 0.5rem; cursor: pointer; transition: background var(--transition); gap: 0.35rem; border-bottom: 1px solid var(--border); position: relative; min-height: 32px; }
    .bp-slot:last-of-type { border-bottom: none; }
    .bp-slot:hover { background: var(--surface-hover); }
    .bp-slot.winner { background: var(--gold-light); border-left: 3px solid var(--gold); }
    .bp-slot.locked { opacity: 0.5; cursor: not-allowed; }
    .bp-slot-flag { font-size: 1rem; flex-shrink: 0; }
    .bp-slot-flag img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; vertical-align: middle; }
    .bp-slot-name { font-size: 0.78rem; font-weight: 600; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bp-slot-placeholder { font-size: 0.72rem; color: var(--text3); font-style: italic; }
    .bp-slot-vs { text-align: center; font-size: 0.55rem; color: var(--text3); padding: 1px 0; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--surface2); }
    .bp-slot-edit { font-size: 0.65rem; color: var(--text3); margin-left: auto; opacity: 0.35; transition: opacity var(--transition), color var(--transition); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface2); flex-shrink: 0; }
    .bp-slot:hover .bp-slot-edit { opacity: 1; }
    .bp-slot-edit:hover { color: var(--gold); border-color: var(--gold); background: var(--surface3); }

    .bp-dropdown { position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 8px 30px rgba(0,0,0,0.5); min-width: 220px; max-width: 280px; max-height: 340px; display: flex; flex-direction: column; }
    .bp-dropdown-search { width: 100%; padding: 0.5rem 0.75rem; border: none; border-bottom: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 0.8rem; outline: none; font-family: var(--font-body); }
    .bp-dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.8rem; color: var(--text); transition: background var(--transition); }
    .bp-dropdown-item:hover { background: var(--surface-hover); }
    .bp-dropdown-item.disabled { opacity: 0.35; cursor: not-allowed; }

    .bp-champion {
      text-align: center;
      padding: 1.25rem;
      background: var(--surface);
      border: 2px dashed var(--border);
      border-radius: var(--r-lg);
      transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
      z-index: 10;
      width: 200px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      gap: 0.5rem;
    }
    .bp-champion.crowned { border-style: solid; border-color: var(--gold); background: var(--gold-light); box-shadow: 0 0 30px rgba(212, 175, 55, 0.12); }
    .bp-champion-label { font-family: var(--font-display); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); margin: 0; line-height: 1.3; }
    .bp-champion-flag { font-size: 2.2rem; line-height: 1; }
    .bp-champion-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--gold); text-transform: uppercase; line-height: 1.2; }
    .bp-lock-notice {
      margin-bottom: 1rem;
      padding: 0.85rem 1rem;
      border-radius: var(--r);
      border: 1px solid rgba(245, 158, 11, 0.35);
      background: rgba(245, 158, 11, 0.08);
      color: var(--text2);
      font-size: 0.88rem;
      line-height: 1.45;
      text-align: center;
    }
    .bp-champion-row {
      display: flex;
      justify-content: center;
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
    }
    #bp-export-area { width: 100%; }
    .bp-export-capturing .bp-slot-edit { display: none !important; }
    #bp-export-area.bp-export-capturing,
    #bp-export-area.bp-export-capturing .bp-bracket-wrapper {
      overflow: visible !important;
      max-width: none !important;
    }
    .bp-progress { display: none !important; }
    .bp-progress-step { font-size: 0.7rem; padding: 0.3rem 0.6rem; border-radius: 20px; background: var(--surface2); color: var(--text3); font-weight: 600; border: 1px solid var(--border); transition: all var(--transition); }
    .bp-progress-step.done { background: var(--success); color: #fff; border-color: var(--success); }
    .bp-progress-step.current { border-color: var(--gold); color: var(--gold); }

    /* Refined Symmetric Connector lines between rounds */
    .bp-connector { display: flex; flex-direction: column; justify-content: space-around; width: 14px; flex-shrink: 0; z-index: 5; }
    .bp-connector-block { display: flex; flex-direction: column; flex: 1; min-height: 40px; }
    .bp-connector-branch { display: none !important; }

    @keyframes slotFillIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
    .bp-slot.animate-in .bp-slot-flag, .bp-slot.animate-in .bp-slot-name { animation: slotFillIn 0.35s ease forwards; }

    /* Removed @media max-width 1100px bp-round stacking */

    /* ── DYNAMIC GROUP RANKINGS & STANDINGS ── */
    .wc-predictions-guest-notice {
      margin-bottom: 1rem;
      padding: 0.85rem 1rem;
      border-radius: var(--r);
      border: 1px solid rgba(59, 130, 246, 0.35);
      background: rgba(59, 130, 246, 0.08);
      color: var(--text2);
      font-size: 0.88rem;
      line-height: 1.45;
      text-align: center;
    }
    .wc-predictions-guest-notice a {
      color: var(--gold);
      font-weight: 600;
      text-decoration: none;
    }
    .wc-predictions-guest-notice a:hover { text-decoration: underline; }

    /* ── MATCHDAY HUB — no live match overlay ── */
    #wc-matchday.wc-matchday-locked {
      position: relative;
      min-height: 420px;
    }
    #wc-matchday.wc-matchday-locked .wc-matchday-content {
      filter: blur(6px);
      pointer-events: none;
      user-select: none;
      opacity: 0.55;
    }
    #wc-matchday.wc-matchday-locked #live-indicator {
      display: none !important;
    }
    .wc-matchday-overlay {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      pointer-events: none;
    }
    .wc-matchday-overlay-card {
      pointer-events: auto;
      text-align: center;
      max-width: 420px;
      width: 100%;
      padding: 2rem 1.75rem;
      background: rgba(15, 16, 19, 0.92);
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(8px);
    }
    .wc-matchday-overlay-icon {
      font-size: 2.5rem;
      margin-bottom: 0.75rem;
      line-height: 1;
    }
    .wc-matchday-overlay-title {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 0.4rem;
    }
    .wc-matchday-overlay-sub {
      font-size: 0.88rem;
      color: var(--text2);
      line-height: 1.45;
    }

    /* ── WC MATCHES WIDGET (football-data.org) ── */
    .wc-widget {
      background: var(--surface2, rgba(15, 16, 19, 0.92));
      border: 1px solid var(--border);
      border-radius: var(--r, 12px);
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.5rem;
    }
    .wc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .wc-header-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text);
    }
    .wc-stale-badge {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text3);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.15rem 0.5rem;
    }
    .wc-section-label {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text3);
      margin: 1rem 0 0.5rem;
    }
    .wc-section-label:first-of-type {
      margin-top: 0;
    }
    .wc-match-card {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
      padding: 0.85rem 0;
      border-bottom: 1px solid var(--border);
    }
    .wc-match-card:last-child {
      border-bottom: none;
    }
    .wc-match-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      width: 100%;
    }
    .wc-match-goals {
      display: flex;
      justify-content: space-between;
      margin-top: 0.25rem;
      padding: 0 1rem;
      font-size: 0.72rem;
      color: var(--text3);
      width: 100%;
      box-sizing: border-box;
    }
    .wc-match-goals .home-goals,
    .wc-match-goals .away-goals {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      flex: 1;
      min-width: 0;
    }
    .wc-match-goals .home-goals {
      align-items: flex-start;
      text-align: left;
    }
    .wc-match-goals .away-goals {
      align-items: flex-end;
      text-align: right;
    }
    .wc-goal-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .wc-match-card.live {
      border-left: 3px solid #ef4444;
      padding-left: 0.75rem;
      background: rgba(239, 68, 68, 0.06);
      border-radius: 6px;
      margin-bottom: 0.25rem;
    }
    .wc-match-card.upcoming,
    .wc-match-card.fixture {
      opacity: 0.95;
    }
    .wc-match-card.result,
    .wc-match-card.recent {
      opacity: 0.88;
    }
    .wc-team-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
      min-width: 72px;
      flex: 1;
    }
    .wc-team-away {
      text-align: center;
    }
    .wc-team-name {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text);
      text-align: center;
      line-height: 1.2;
    }
    .wc-match-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      min-width: 88px;
      flex-shrink: 0;
    }
    .live-badge {
      color: #ef4444;
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      animation: wc-pulse 1.5s infinite;
    }
    .scoreline {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-weight: 800;
      font-size: 1.15rem;
      color: var(--gold, #f5c518);
    }
    .kickoff-time {
      font-size: 0.78rem;
      color: var(--text2);
    }
    .wc-group-label,
    .wc-ft-label {
      font-size: 0.68rem;
      color: var(--text3);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .team-crest {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }
    .team-initials {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      font-size: 0.55rem;
      font-weight: 800;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      background: var(--surface3, rgba(255,255,255,0.08));
      border-radius: 4px;
      color: var(--text);
    }
    .wc-offseason {
      text-align: center;
      padding: 2rem 1rem;
    }
    .wc-offseason .wc-trophy {
      font-size: 2.5rem;
      display: block;
      margin-bottom: 0.75rem;
    }
    .wc-offseason p {
      margin: 0.25rem 0;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.05rem;
      color: var(--text);
    }
    .wc-offseason .wc-dates {
      font-family: var(--font-ui, inherit);
      font-weight: 500;
      font-size: 0.82rem;
      color: var(--text2);
    }
    .wc-skeleton {
      color: var(--text2);
      font-size: 0.9rem;
      padding: 1.5rem 0;
      text-align: center;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
      background-size: 200% 100%;
      animation: wc-shimmer 1.4s infinite;
      border-radius: 8px;
    }
    .wc-error {
      text-align: center;
      color: var(--text2);
      font-size: 0.85rem;
      padding: 1rem 0;
    }
    .wc-retry-btn {
      margin-top: 0.75rem;
      padding: 0.45rem 1rem;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text);
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: 600;
    }
    .wc-retry-btn:hover {
      border-color: var(--gold);
      color: var(--gold);
    }
    @keyframes wc-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
    @keyframes wc-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ── ANALYTICS — locked until tournament starts ── */
    #wc-analytics.wc-analytics-locked {
      position: relative;
      min-height: 420px;
    }
    #wc-analytics.wc-analytics-locked .wc-analytics-content {
      filter: blur(6px);
      pointer-events: none;
      user-select: none;
      opacity: 0.55;
    }

    #wc-predictions.wc-predictions-guest .wc-reorder-item { cursor: default; }
    #wc-predictions.wc-predictions-guest .wc-reorder-item:active { cursor: default; background: var(--surface2); }
    .wc-reorder-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
    .wc-reorder-item { display: flex; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 0.6rem 0.75rem; gap: 0.75rem; cursor: grab; user-select: none; transition: all var(--transition); }
    .wc-reorder-item:active { cursor: grabbing; background: var(--surface-hover); }
    .wc-reorder-rank { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
    .wc-reorder-rank.q-first { background: rgba(16, 185, 129, 0.2); color: var(--success); border: 1px solid var(--success); }
    .wc-reorder-rank.q-second { background: rgba(16, 185, 129, 0.2); color: var(--success); border: 1px solid var(--success); }
    .wc-reorder-rank.q-third { background: rgba(59, 130, 246, 0.2); color: #3b82f6; border: 1px solid #3b82f6; }
    .wc-reorder-rank.q-fourth { background: var(--surface3); color: var(--text3); border: 1px solid var(--border); }
    .wc-reorder-controls { display: flex; gap: 0.25rem; margin-left: auto; }
    .wc-reorder-btn { background: var(--surface3); border: 1px solid var(--border); color: var(--text2); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: all var(--transition); }
    .wc-reorder-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--gold); }

    /* ── SEARCHABLE AWARDS MODAL & PREVIEWS ── */
    /* ── REDESIGNED TOURNAMENT AWARD CARDS ── */
    .wc-award-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1.5rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 280px;
      transition: all var(--transition);
      position: relative;
      overflow: hidden;
    }
    .wc-award-card:hover {
      border-color: var(--gold-light);
      box-shadow: 0 4px 20px rgba(212, 175, 55, 0.08);
      transform: translateY(-2px);
    }
    .wc-award-card.selected {
      background: linear-gradient(180deg, var(--surface2) 0%, rgba(212, 175, 55, 0.03) 100%);
      border-color: var(--gold);
    }
    .wc-award-icon-placeholder {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      background: var(--surface3);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
    }
    .wc-award-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.15rem;
      color: var(--text);
      margin-bottom: 0.25rem;
    }
    .wc-award-sub {
      font-size: 0.75rem;
      color: var(--text3);
      text-transform: uppercase;
      margin-bottom: 1.5rem;
      letter-spacing: 0.05em;
    }
    .wc-award-badge {
      font-size: 1.25rem;
      background: rgba(212, 175, 55, 0.15);
      border: 1px solid var(--gold);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .wc-award-badge--custom,
    .wc-award-icon-placeholder--custom {
      font-size: 0;
      background: radial-gradient(circle at 32% 28%, rgba(255, 215, 0, 0.22), rgba(107, 78, 10, 0.12));
      border-color: rgba(212, 175, 55, 0.45);
      padding: 5px;
    }
    .wc-award-icon-placeholder--custom {
      padding: 10px;
    }
    .wc-award-icon-svg {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    }
    .wc-award-icon-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
      pointer-events: none;
      user-select: none;
    }
    .wc-golden-boot-img {
      transform: scale(1.15);
    }
    .wc-award-badge--custom .wc-golden-boot-img {
      transform: scale(1.35);
    }
    .wc-golden-glove-img {
      transform: scale(1.05);
    }
    .wc-award-badge--custom .wc-golden-glove-img {
      transform: scale(1.2);
    }
    .wc-golden-ball-img {
      transform: scale(1.1);
    }
    .wc-award-badge--custom .wc-golden-ball-img {
      transform: scale(1.25);
    }
    .wc-best-young-img {
      transform: scale(1.05);
    }
    .wc-award-badge--custom .wc-best-young-img {
      transform: scale(1.2);
    }
    .wc-trophy-icon {
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
      pointer-events: none;
      user-select: none;
    }
    .wc-award-badge--custom:has(.wc-world-cup-trophy-img) {
      width: 56px;
      height: 56px;
      padding: 4px;
    }
    .wc-award-icon-placeholder--custom:has(.wc-world-cup-trophy-img) {
      width: 88px;
      height: 88px;
      padding: 8px;
    }
    .wc-world-cup-trophy-img {
      width: 100%;
      height: 100%;
      transform: scale(1.35);
    }
    .wc-award-badge--custom .wc-world-cup-trophy-img {
      transform: scale(1.55);
    }
    .wc-award-icon-placeholder--custom .wc-world-cup-trophy-img {
      transform: scale(1.45);
    }
    .bp-champion-flag .bp-champion-trophy {
      width: 112px;
      height: 112px;
      margin: 0.25rem auto;
    }
    .bp-champion.crowned .bp-champion-flag .bp-champion-trophy {
      display: none;
    }
    .wc-award-header-info {
      text-align: left;
      flex: 1;
    }
    .wc-award-title-sm {
      display: block;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--text);
    }
    .wc-award-sub-sm {
      display: block;
      font-size: 0.65rem;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Selected Player Card display inside Award Card */
    .wc-award-selected-player-card {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 0.75rem;
      width: 100%;
      text-align: left;
      margin-top: 0.5rem;
    }
    .wc-selected-player-badge {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
      font-size: 1rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      flex-shrink: 0;
    }
    .wc-selected-player-details {
      flex: 1;
      min-width: 0;
    }
    .wc-selected-player-name {
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wc-selected-player-meta {
      font-size: 0.7rem;
      color: var(--text2);
      display: flex;
      align-items: center;
      gap: 0.25rem;
      margin-top: 0.15rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wc-selected-player-meta img {
      width: 14px;
      height: 10px;
    }
    .wc-selected-player-stats {
      font-size: 0.68rem;
      color: var(--text3);
      margin-top: 0.15rem;
    }

    /* Selected Team Card display inside Award Card */
    .wc-award-selected-team-card {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 0.75rem;
      width: 100%;
      text-align: left;
      margin-top: 0.5rem;
    }
    .wc-selected-team-flag {
      font-size: 2.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .wc-selected-team-details {
      flex: 1;
      min-width: 0;
    }
    .wc-selected-team-name {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--text);
    }
    .wc-selected-team-meta {
      font-size: 0.7rem;
      color: var(--text2);
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: 0.15rem;
    }
    .wc-selected-team-performance {
      font-size: 0.65rem;
      color: var(--gold);
      font-weight: 600;
      margin-top: 0.15rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ── REDESIGNED FULL SCREEN MODAL & GRID ── */
    .wc-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(8, 8, 10, 0.85);
      z-index: 9999;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(8px);
    }
    .wc-modal-content {
      background: #0f1013;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      width: 95%;
      max-width: 1050px;
      height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0,0,0,0.6);
      animation: modalFadeIn 0.3s ease;
    }
    @keyframes modalFadeIn {
      from { opacity: 0; transform: scale(0.97); }
      to { opacity: 1; transform: scale(1); }
    }
    .wc-modal-header {
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #13151a;
      flex-shrink: 0;
    }
    .wc-modal-header-desc {
      font-size: 0.75rem;
      color: var(--text3);
      margin-top: 0.2rem;
    }
    .wc-modal-close {
      background: var(--surface3);
      border: none;
      color: var(--text2);
      font-size: 1.5rem;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    .wc-modal-close:hover {
      background: var(--surface-hover);
      color: var(--text);
    }
    
    /* Layout with sidebar filter */
    .wc-modal-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    
    /* Filter bar on top */
    .wc-modal-filter-bar {
      padding: 1rem 1.5rem;
      background: #13151a;
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      flex-shrink: 0;
    }
    .wc-modal-filter-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .wc-modal-filter-label {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .wc-modal-select {
      background: #1b1e24;
      border: 1px solid var(--border);
      border-radius: var(--r);
      color: var(--text);
      padding: 0.45rem 0.75rem;
      font-size: 0.8rem;
      outline: none;
      cursor: pointer;
      transition: all var(--transition);
    }
    .wc-modal-select:hover, .wc-modal-select:focus {
      border-color: var(--gold);
    }
    .wc-modal-pills {
      display: flex;
      background: #1b1e24;
      padding: 0.2rem;
      border-radius: var(--r);
      border: 1px solid var(--border);
      gap: 0.1rem;
    }
    .wc-modal-pill {
      background: transparent;
      border: none;
      color: var(--text2);
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.3rem 0.6rem;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .wc-modal-pill.active {
      background: var(--gold);
      color: #000;
    }
    
    /* Main area with grid */
    .wc-modal-grid-container {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem;
      background: #0b0c0f;
    }
    .wc-modal-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1.25rem;
    }
    
    /* Premium Player Card in Modal */
    .wc-modal-player-card {
      background: #14161d;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: all var(--transition);
      overflow: hidden;
      min-height: 290px;
    }
    .wc-modal-player-card:hover {
      border-color: var(--gold);
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(212, 175, 55, 0.06);
    }
    .wc-modal-player-card.favorite {
      background: linear-gradient(180deg, #181b24 0%, #11131a 100%);
      border-color: rgba(212, 175, 55, 0.3);
    }
    .wc-card-fav-badge {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      background: rgba(212, 175, 55, 0.15);
      border: 1px solid var(--gold);
      color: var(--gold);
      font-size: 0.6rem;
      font-weight: 700;
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 0.15rem;
      z-index: 2;
    }
    .wc-card-player-hero {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }
    .wc-card-avatar-frame {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
      font-size: 1.15rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      position: relative;
      flex-shrink: 0;
    }
    .wc-card-avatar-pos {
      position: absolute;
      bottom: -4px;
      right: -4px;
      background: var(--surface3);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 0.55rem;
      font-weight: 700;
      padding: 0.1rem 0.3rem;
      border-radius: 4px;
    }
    .wc-card-player-info {
      min-width: 0;
    }
    .wc-card-player-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 0.15rem;
    }
    .wc-card-player-club {
      font-size: 0.7rem;
      color: var(--text2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wc-card-player-nation {
      font-size: 0.72rem;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 0.3rem;
      margin-bottom: 0.5rem;
    }
    .wc-card-player-nation img {
      width: 16px;
      height: 11px;
    }
    
    /* Stats grid in Card */
    .wc-card-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.4rem;
      background: rgba(27, 30, 36, 0.4);
      padding: 0.5rem;
      border-radius: var(--r);
      border: 1px solid rgba(255,255,255,0.02);
      margin-bottom: 0.75rem;
    }
    .wc-card-stat-box {
      text-align: center;
    }
    .wc-card-stat-lbl {
      font-size: 0.55rem;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .wc-card-stat-val {
      font-weight: 700;
      font-size: 0.8rem;
      color: var(--text);
    }
    
    /* Card footer elements */
    .wc-card-meta-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.68rem;
      color: var(--text2);
      margin-top: auto;
      margin-bottom: 0.75rem;
      border-top: 1px solid rgba(255,255,255,0.04);
      padding-top: 0.5rem;
    }
    .wc-card-form-badge {
      display: flex;
      align-items: center;
      gap: 0.15rem;
      font-weight: 600;
      color: var(--success);
    }
    .wc-card-select-btn {
      width: 100%;
      padding: 0.5rem;
      border-radius: var(--r);
      border: 1px solid var(--border);
      background: var(--surface3);
      color: var(--text);
      font-size: 0.75rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }
    .wc-card-select-btn:hover {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
    }
    
    /* Premium Team Card in Modal */
    .wc-modal-team-card {
      background: #14161d;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: all var(--transition);
      align-items: center;
      text-align: center;
      min-height: 250px;
    }
    .wc-modal-team-card:hover {
      border-color: var(--gold);
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(212, 175, 55, 0.06);
    }
    .wc-card-flag-lg {
      font-size: 3.5rem;
      margin-bottom: 0.5rem;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .wc-card-team-name {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.15rem;
      color: var(--text);
      margin-bottom: 0.25rem;
    }
    .wc-card-team-confed {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.75rem;
      background: rgba(255,255,255,0.03);
      padding: 0.15rem 0.5rem;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.02);
    }
    .wc-card-team-stats {
      display: flex;
      justify-content: space-around;
      width: 100%;
      margin-bottom: 1rem;
      border-top: 1px solid rgba(255,255,255,0.03);
      border-bottom: 1px solid rgba(255,255,255,0.03);
      padding: 0.5rem 0;
    }
    .wc-card-team-recent {
      font-size: 0.7rem;
      color: var(--gold);
      font-weight: 500;
      margin-bottom: 1.25rem;
      font-style: italic;
      line-height: 1.2;
    }

    @media (max-width: 768px) {
      .wc-modal-content {
        height: 95vh;
        width: 98%;
      }
      .wc-modal-filter-bar {
        padding: 0.75rem;
        gap: 0.5rem;
        flex-direction: column;
        align-items: stretch;
      }
      .wc-modal-filter-group {
        justify-content: space-between;
      }
      .wc-modal-grid-container {
        padding: 0.75rem;
      }
    }

    /* ── WORLD CUP ANALYTICS ADDITIONS ── */
    .wc-table th { cursor: pointer; user-select: none; transition: background var(--transition); }
    .wc-table th:hover { background: var(--surface2) !important; color: var(--gold) !important; }
    .wc-table-row { transition: background 0.15s; }
    .wc-table-row:hover { background: var(--surface2) !important; }
    #wc-analytics-chart { cursor: crosshair; }

    .wc-analytics-search-wrap {
      position: relative;
      width: 100%;
      max-width: 320px;
    }
    .wc-analytics-search-wrap input {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 0.5rem 0.75rem 0.5rem 2.2rem;
      color: var(--text);
      font-size: 0.85rem;
      outline: none;
      font-family: var(--font-ui);
    }
    .wc-analytics-search-wrap input:focus {
      border-color: var(--gold);
    }
    .wc-analytics-search-icon {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text3);
      font-size: 0.9rem;
      pointer-events: none;
    }
    .wc-analytics-suggestions {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
      z-index: 50;
      max-height: 260px;
      overflow-y: auto;
    }
    .wc-search-suggestion {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
      padding: 0.55rem 0.75rem;
      border: none;
      background: transparent;
      color: var(--text);
      font-family: var(--font-ui);
      font-size: 0.82rem;
      text-align: left;
      cursor: pointer;
      border-bottom: 1px solid var(--border2);
    }
    .wc-search-suggestion:last-child { border-bottom: none; }
    .wc-search-suggestion:hover,
    .wc-search-suggestion:focus {
      background: var(--surface2);
      outline: none;
    }
    .wc-search-suggestion-name { font-weight: 600; }
    .wc-search-suggestion-team {
      font-size: 0.72rem;
      color: var(--text3);
      white-space: nowrap;
    }
    .wc-search-suggestion-empty {
      padding: 0.75rem;
      color: var(--text3);
      font-size: 0.8rem;
      text-align: center;
    }
    
    @media (max-width: 900px) {
      .wc-analytics-grid-vis {
        grid-template-columns: 1fr !important;
      }
    }

    /* ── DYNAMIC LEADERBOARD STYLING ── */
    .wc-leaderboard-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.65rem 0.5rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      cursor: pointer;
      transition: background-color 0.2s, transform 0.15s;
    }
    .wc-leaderboard-row:last-child {
      border-bottom: none;
    }
    .wc-leaderboard-row:hover {
      background-color: rgba(255, 255, 255, 0.03);
      transform: scale(1.01);
    }
    .wc-leaderboard-player {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex: 1;
      min-width: 0;
    }
    .wc-leaderboard-rank {
      font-family: var(--font-display);
      font-size: 0.85rem;
      font-weight: 800;
      width: 22px;
      text-align: center;
      color: var(--text3);
    }
    .wc-leaderboard-rank.rank-1 { color: var(--gold); font-size: 1rem; }
    .wc-leaderboard-rank.rank-2 { color: #cbd5e1; }
    .wc-leaderboard-rank.rank-3 { color: #b45309; }
    
    .wc-leaderboard-avatar-frame {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--surface3);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .wc-leaderboard-avatar-initials {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--text2);
    }
    .wc-leaderboard-avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
    .wc-leaderboard-meta {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .wc-leaderboard-name {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wc-leaderboard-sub {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.65rem;
      color: var(--text3);
    }
    .wc-leaderboard-pos-badge {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--text2);
      font-size: 0.55rem;
      font-weight: 700;
      padding: 0.02rem 0.25rem;
      border-radius: 3px;
      text-transform: uppercase;
    }
    .wc-leaderboard-team {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wc-leaderboard-stats {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-shrink: 0;
    }
    .wc-leaderboard-playtime {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.05rem;
      font-family: monospace;
      font-size: 0.62rem;
      color: var(--text3);
    }
    .wc-leaderboard-stat-item {
      display: flex;
      gap: 0.15rem;
    }
    .wc-leaderboard-stat-item .lbl {
      color: rgba(255,255,255,0.25);
      text-transform: lowercase;
    }
    .wc-leaderboard-value-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      padding: 0.2rem 0.45rem;
      border-radius: 4px;
      font-family: var(--font-display);
      font-size: 0.82rem;
      font-weight: 800;
    }

    /* ── QUESTIONS EXPLORER FOR CATEGORIES PAGE ── */
    .questions-explorer-pane {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 1.5rem;
      margin-top: 1.5rem;
      animation: fadeInSlide .3s ease;
      display: none;
    }
    .questions-explorer-pane.active {
      display: block;
    }
    @keyframes fadeInSlide {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .explorer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
      gap: 1rem;
    }
    .explorer-title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text);
    }
    .explorer-title span {
      color: var(--text3);
      font-size: 0.85rem;
      margin-left: 0.5rem;
      text-transform: none;
      letter-spacing: 0;
      font-family: var(--font-body);
    }
    .explorer-list {
      display: grid;
      gap: 1rem;
      max-height: 450px;
      overflow-y: auto;
      padding-right: 0.5rem;
    }
    .explorer-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem;
      transition: border-color var(--transition), background var(--transition);
    }
    .explorer-item:hover {
      border-color: var(--border-hover);
    }
    .explorer-q-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }
    .explorer-q-text {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text);
      line-height: 1.4;
      margin-bottom: 0.5rem;
    }
    .explorer-actions {
      display: flex;
      gap: 0.75rem;
      margin-top: 0.5rem;
    }
    .btn-explorer-action {
      background: transparent;
      border: none;
      color: var(--accent);
      font-family: var(--font-ui);
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      transition: opacity 0.2s;
    }
    .btn-explorer-action:hover {
      opacity: 0.8;
      text-decoration: underline;
    }
    .explorer-answer-details {
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px dashed var(--border);
      font-size: 0.88rem;
      animation: fadeInSlide 0.2s ease;
    }
    .explorer-options-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 0.65rem;
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
    }
    .explorer-option {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.6rem 0.85rem;
      border-radius: var(--r);
      border: 1px solid var(--border);
      background: var(--surface2);
      font-size: 0.85rem;
      transition: all var(--transition);
      position: relative;
    }
    .explorer-option-letter {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.75rem;
      border: 1px solid var(--border);
      color: var(--text3);
      flex-shrink: 0;
    }
    .explorer-option-text {
      color: var(--text);
      font-weight: 500;
    }
    .explorer-option.correct {
      border-color: var(--green) !important;
      background: rgba(34, 197, 94, 0.08) !important;
    }
    .explorer-option.correct .explorer-option-letter {
      background: var(--green) !important;
      color: #000 !important;
      border-color: var(--green) !important;
    }
    .explorer-option.correct .explorer-option-text {
      color: var(--green) !important;
      font-weight: 600;
    }
    .explorer-option.incorrect {
      opacity: 0.65;
    }
    .explorer-option-badge {
      margin-left: auto;
      background: var(--green);
      color: #000;
      font-size: 0.65rem;
      font-weight: 700;
      padding: 0.15rem 0.4rem;
      border-radius: 3px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .explorer-hint {
      margin-top: 0.5rem;
      color: var(--text3);
      font-style: italic;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    /* ──────────────────────────────────────────────────────────────
       MOBILE-ONLY COMPACT MODE (phones)
       Shrinks World Cup tables, the match-prediction brackets, group
       standings, fixtures and leaderboard rows so they are easier to
       read on small screens. Desktop/tablet layout is unchanged.
       Placed at the end of the file so these rules win over the base
       declarations (including some inline font/min-width values).
       ────────────────────────────────────────────────────────────── */
    @media (max-width: 600px) {

      /* ── Tables ── */
      .wc-table { font-size: 0.7rem !important; }
      .wc-table th { padding: 0.35rem 0.3rem; }
      .wc-table td { padding: 0.45rem 0.3rem; }
      .wc-team { gap: 0.3rem; font-size: 0.7rem; }
      #wc-leaderboard-table { min-width: 480px !important; }

      /* ── Match prediction bracket (symmetric template) ── */
      .bp-bracket-wrapper { gap: 0.5rem; padding: 0.5rem 0 1.25rem; min-height: 900px; }
      .bp-bracket-half { gap: 0.5rem; }
      .bp-round-matches { height: 900px; }
      .bp-round-matches.r32-matches { gap: 0.3rem; }
      .bp-round,
      .bp-bracket-center { min-width: 144px; }
      .bp-round-title { font-size: 0.58rem; padding: 0.3rem 0.4rem; margin-bottom: 0.5rem; }
      .bp-match-label { font-size: 0.5rem; padding: 0.18rem; }
      .bp-slot { padding: 0.3rem 0.4rem; min-height: 28px; gap: 0.3rem; }
      .bp-slot-name { font-size: 0.66rem; }
      .bp-slot-placeholder { font-size: 0.62rem; }
      .bp-slot-flag { font-size: 0.8rem; }
      .bp-slot-flag img { width: 16px; height: 11px; }
      .bp-slot-vs { font-size: 0.48rem; }
      .bp-slot-edit { width: 15px; height: 15px; font-size: 0.55rem; }
      .bp-champion {
        width: min(100%, 280px);
        height: auto;
        min-height: 168px;
        padding: 1rem 0.9rem;
        gap: 0.45rem;
      }
      .bp-champion-flag { font-size: 1.6rem; flex-shrink: 0; }
      .bp-champion-flag .bp-champion-trophy { width: 56px; height: 56px; }
      .wc-award-badge--custom:has(.wc-world-cup-trophy-img) { width: 48px; height: 48px; }
      .wc-award-icon-placeholder--custom:has(.wc-world-cup-trophy-img) { width: 72px; height: 72px; }
      .bp-champion-label {
        font-size: 0.72rem;
        letter-spacing: 0.03em;
        line-height: 1.3;
        max-width: 100%;
        padding: 0 0.15rem;
      }
      .bp-champion-name {
        font-size: 0.95rem;
        line-height: 1.25;
        max-width: 100%;
        word-break: break-word;
        hyphens: auto;
        padding: 0 0.15rem;
      }

      /* ── Dashboard bracket ── */
      .wc-bracket { gap: 1rem; }
      .wc-bracket-col { min-width: 150px; gap: 0.65rem; }
      .wc-matchup { padding: 0.4rem; }
      .wc-matchup-team { padding: 0.35rem; font-size: 0.72rem; }

      /* ── Group standings (drag-to-reorder) ── */
      .wc-reorder-item { padding: 0.45rem 0.5rem; gap: 0.5rem; }
      .wc-reorder-rank { width: 22px; height: 22px; font-size: 0.65rem; }
      .wc-reorder-btn { width: 20px; height: 20px; font-size: 0.65rem; }

      /* ── Fixtures ── */
      .wc-fixture { padding: 0.6rem; }
      .wc-fixture-time { width: 46px; font-size: 0.65rem; }
      .wc-fixture-teams { padding: 0 0.5rem; font-size: 0.72rem; }
      .wc-predict-btn { padding: 0.4rem 0.6rem; font-size: 0.62rem; }

      /* ── Match prediction cards ── */
      .wc-predictions-fixtures-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
      }
      .wc-pred-fixture-card { padding: 1rem; }
      .wc-pred-matchup {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 0.55rem;
        text-align: center;
      }
      .wc-pred-team {
        justify-content: center;
      }
      .wc-pred-team-away {
        justify-content: center;
      }
      .wc-pred-name {
        white-space: normal;
        text-overflow: unset;
        overflow: visible;
        font-size: 0.8rem;
        line-height: 1.25;
      }
      .wc-pred-scores {
        justify-content: center;
      }
      .wc-pred-score-input {
        width: 44px;
        font-size: 0.9rem;
      }
      .wc-pred-fixture-footer {
        flex-direction: column;
        align-items: stretch;
      }
      .wc-pred-save-btn {
        width: 100%;
        justify-content: center;
      }

      /* ── Main trivia leaderboard (full page) ── */
      #lb-main-list .lb-row,
      .leaderboard-card .lb-row {
        padding: 0.5rem 0.6rem;
        gap: 0.4rem;
      }
      #lb-main-list .lb-name,
      .leaderboard-card .lb-name {
        font-size: 0.68rem;
      }
      #lb-main-list .lb-rank,
      .leaderboard-card .lb-rank {
        font-size: 0.72rem;
        width: 1.25rem;
      }
      #lb-main-list .lb-score,
      .leaderboard-card .lb-score {
        font-size: 0.78rem;
      }
      #lb-main-list .lb-meta,
      .leaderboard-card .lb-meta {
        font-size: 0.58rem;
      }

      /* ── WC player leaderboard rows ── */
      .wc-leaderboard-row { padding: 0.5rem 0.35rem; }
      .wc-leaderboard-name { font-size: 0.72rem; }
      .wc-leaderboard-rank { font-size: 0.72rem; width: 18px; }
      .wc-leaderboard-rank.rank-1 { font-size: 0.82rem; }
      .wc-leaderboard-sub { font-size: 0.58rem; }
      .wc-leaderboard-value-badge { font-size: 0.65rem; min-width: 28px; padding: 0.15rem 0.35rem; }
      .wc-leaderboard-avatar-frame { width: 26px; height: 26px; }

      /* ── WC hero / cards compacting ── */
      .wc-hero { padding: 1.75rem 1rem; }
      .wc-hero h1 { font-size: 1.6rem; }
      .wc-hero p { font-size: 0.82rem; }
      .wc-card { padding: 1rem; }
    }