/* ===== DESIGN TOKENS ===== */
    :root {
      --clr-bg:         #1A1510;
      --clr-surface:    #282018;
      --clr-panel:      #352B20;
      --clr-border:     #4A3C2D;
      --clr-accent:     #dca820;
      --clr-accent2:    #c67c26;
      --clr-yellow:     #F59E0B;
      --clr-orange:     #EA580C;
      --clr-green:      #16A34A;
      --clr-red:        #ff4d6d;
      --clr-cyan:       #22d3ee;
      --clr-purple:     #9333EA;
      --clr-text:       #f5f5f5;
      --clr-text-dim:   #D4C6B6;
      --clr-hex-light:  #473728;
      --clr-hex-dark:   #33271D;
      --clr-hex-border: #564633;
      --radius:         12px;
      --transition:     0.2s ease;
    }

    * {
      box-sizing: border-box; margin: 0; padding: 0;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      user-select: none;
      -webkit-user-select: none;
    }


    body {
      font-family: 'Exo 2', sans-serif;
      background: var(--clr-bg);
      color: var(--clr-text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-x: hidden;
    }

    /* ===== STARFIELD ===== */
    #starfield {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      overflow: hidden;
    }
    .star {
      position: absolute;
      border-radius: 50%;
      background: white;
      animation: twinkle var(--dur, 3s) infinite alternate;
    }
    @keyframes twinkle {
      from { opacity: 0.1; }
      to   { opacity: 0.9; }
    }

    /* ===== HEADER ===== */
    #header {
      position: relative; z-index: 10;
      width: 100%; max-width: 1000px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 24px;
      background: rgba(20,17,10,0.8);
      border-bottom: 1px solid rgba(245,158,11,0.2);
      backdrop-filter: blur(10px);
    }
    .logo {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.8rem; font-weight: 900;
      color: var(--clr-yellow);
      letter-spacing: 2px;
      text-shadow: none;
    }
    .logo span { color: var(--clr-orange); }

    /* ===== SCREENS ===== */
    .screen {
      position: relative; z-index: 5;
      width: 100%; max-width: 1000px;
      padding: 24px;
      display: none; flex-direction: column; align-items: center;
      gap: 20px;
    }
    .screen.active { display: flex; }

    /* ===== MAIN MENU ===== */
    #menu-screen { min-height: calc(100vh - 73px); justify-content: flex-start; padding-top: 5vh; }

    .menu-mascot {
      width: 100%;
      max-width: 250px;
      margin: 0 auto -10px auto;
      display: block;
      image-rendering: pixelated;
      filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.8));
    }

    .menu-title {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(2.5rem, 8vw, 5rem);
      font-weight: 900;
      text-align: center;
      color: var(--clr-yellow);
      animation: pulse-text 3s infinite;
    }
    .menu-title span { color: var(--clr-orange); }
    @keyframes pulse-text {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.3); }
    }
    .menu-subtitle {
      color: var(--clr-text-dim); font-size: 1rem; text-align: center; margin-top: -10px;
    }

    .mode-cards {
      display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 10px;
    }
    .mode-card {
      background: var(--clr-panel);
      border: 2px solid var(--clr-border);
      border-radius: 16px;
      padding: 28px 36px;
      cursor: pointer;
      width: 260px;
      text-align: center;
      transition: all 0.3s ease;
      position: relative; overflow: hidden;
    }
    .mode-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, var(--clr-accent) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.3s;
    }
    .mode-card:hover::before { opacity: 0.12; }
    .mode-card:hover {
      border-color: var(--clr-accent);
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(245,158,11,0.25);
    }
    .mode-card.super::before {
      background: linear-gradient(135deg, var(--clr-accent2) 0%, transparent 60%);
    }
    .mode-card.super:hover { border-color: var(--clr-accent2); box-shadow: 0 20px 40px rgba(255,107,53,0.25); }

    .mode-card.fast::before {
      background: linear-gradient(135deg, #22d3ee 0%, transparent 60%);
    }
    .mode-card.fast:hover { border-color: #22d3ee; box-shadow: 0 20px 40px rgba(34,211,238,0.25); }
    .mode-card.fast .mode-name { color: #22d3ee; }

    .mode-icon { font-size: 3rem; margin-bottom: 12px; }
    .mode-name {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.3rem; font-weight: 700;
      color: var(--clr-accent); margin-bottom: 8px;
    }
    .mode-card.super .mode-name { color: var(--clr-accent2); }
    .mode-desc { color: var(--clr-text-dim); font-size: 0.85rem; line-height: 1.5; }

    /* ===== BUTTONS ===== */
    .btn {
      padding: 12px 28px; border: none; border-radius: 10px;
      font-family: 'Exo 2', sans-serif; font-size: 1rem; font-weight: 700;
      cursor: pointer; transition: all 0.2s; letter-spacing: 0.5px;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--clr-accent), #fbbf24);
      color: white;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245,158,11,0.4); }
    .btn-danger {
      background: linear-gradient(135deg, var(--clr-red), #c9356e);
      color: white;
    }
    .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,77,109,0.4); }
    .btn-ghost {
      background: transparent; border: 2px solid var(--clr-border); color: var(--clr-text-dim);
    }
    .btn-ghost:hover { border-color: var(--clr-accent); color: var(--clr-accent); }

    /* ===== RESULT MODAL ===== */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      animation: fadeIn 0.3s ease;
      padding: 24px;
    }
    .modal-overlay.hidden { display: none; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .modal-card {
      background: var(--clr-panel);
      border: 2px solid var(--clr-border);
      border-radius: 20px;
      padding: 30px;
      max-width: 520px; width: 100%;
      text-align: center;
      animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      max-height: 90vh;
      overflow-y: auto;
    }
    @keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

    .modal-card::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at top, rgba(245,158,11,0.15), transparent 60%);
      pointer-events: none;
    }

    .result-emoji { font-size: 5rem; margin-bottom: 12px; }
    .result-title {
      font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 900;
      margin-bottom: 8px;
    }
    .result-title.win { background: linear-gradient(135deg, var(--clr-yellow), var(--clr-green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .result-title.lose { background: linear-gradient(135deg, var(--clr-red), var(--clr-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

    .result-stats { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 20px 0; }
    .stat-box { background: var(--clr-bg); border-radius: 10px; padding: 12px 16px; min-width: 90px; flex: 1 1 auto; }
    .stat-val { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--clr-yellow); }
    .stat-lbl { font-size: 0.7rem; color: var(--clr-text-dim); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }

    .result-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

    /* ===== TOAST ===== */
    #toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: var(--clr-panel); border: 1px solid var(--clr-border);
      border-radius: 10px; padding: 10px 20px;
      font-size: 0.9rem; color: var(--clr-text);
      z-index: 200; opacity: 0; pointer-events: none;
      transition: opacity 0.3s;
      max-width: 300px; text-align: center;
    }
    #toast.show { opacity: 1; }

    /* ===== SCORES DISPLAY ===== */
    .score-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 12px; background: var(--clr-bg); border-radius: 8px;
    }
    .score-row .score-lbl { font-size: 0.8rem; color: var(--clr-text-dim); }
    .score-row .score-val { font-weight: 700; color: var(--clr-text); }

    /* Mode selector in menu */
    .color-picker { display: flex; gap: 12px; align-items: center; }
    .color-option {
      width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
      border: 3px solid transparent; transition: all 0.2s;
    }
    .color-option.selected { border-color: white; transform: scale(1.2); }
    .color-option.yellow { background: var(--clr-yellow); }
    .color-option.orange { background: var(--clr-orange); }
    .color-option.green { background: var(--clr-green); }
    .color-option.purple { background: var(--clr-purple); }

    .settings-row {
      display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center;
      background: var(--clr-panel); border-radius: 12px; padding: 16px 24px;
      border: 1px solid var(--clr-border);
    }
    .settings-row label { font-size: 0.9rem; color: var(--clr-text-dim); }

    .highscore-box {
      background: var(--clr-panel); border: 1px solid var(--clr-border);
      border-radius: 12px; padding: 16px 24px; text-align: center; min-width: 160px;
    }
    .highscore-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--clr-text-dim); }
    .highscore-val { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; font-weight: 900; color: var(--clr-yellow); }

    /* ===== DIFFICULTY CARDS ===== */
    .diff-card {
      display: flex; align-items: center; gap: 18px;
      background: var(--clr-bg);
      border: 2px solid var(--clr-border);
      border-radius: 14px; padding: 16px 22px;
      cursor: pointer; transition: all 0.25s ease;
      text-align: left;
    }
    .diff-card:hover {
      border-color: var(--clr-accent);
      background: rgba(220,168,32,0.08);
      transform: translateX(6px);
      box-shadow: 0 8px 24px rgba(220,168,32,0.2);
    }
    .diff-card.hard {
      border-color: rgba(239,68,68,0.4);
    }
    .diff-card.hard:hover {
      border-color: #ef4444;
      background: rgba(239,68,68,0.08);
      box-shadow: 0 8px 24px rgba(239,68,68,0.25);
    }
    .diff-icon { font-size: 2.2rem; flex-shrink: 0; }
    .diff-name {
      font-family: 'Orbitron', sans-serif;
      font-size: 1rem; font-weight: 700;
      color: var(--clr-accent); margin-bottom: 4px;
    }
    .diff-card.hard .diff-name { color: #f87171; }
    .diff-desc { color: var(--clr-text-dim); font-size: 0.8rem; line-height: 1.45; }