/* === RESET === */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      color: #f8fafc;
    }

    /* ======================================================
       PIXEL THEME
       ====================================================== */
    body.theme-pixel {
      background-color: #0f0f1a;
      background-image: repeating-conic-gradient(#181825 0% 25%, #0f0f1a 0% 50%);
      background-size: 16px 16px;
      font-family: 'Press Start 2P', monospace;
      image-rendering: pixelated;
    }

    body.theme-pixel .game {
      width: min(96vw, 480px);
      background: #16213e;
      border: 4px solid #e2e8f0;
      box-shadow: 8px 8px 0 #000;
      padding: 20px;
      position: relative;
      overflow: hidden;
    }

    body.theme-pixel h1 {
      font-size: 0.75rem;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #facc15;
      text-shadow: 3px 3px 0 #92400e;
      margin-bottom: 10px;
      line-height: 1.6;
    }

    body.theme-pixel .subtitle {
      color: #94a3b8;
      text-align: center;
      font-size: 0.55rem;
      line-height: 2;
      margin-bottom: 14px;
      border: 2px solid #334155;
      padding: 8px;
      background: #0f172a;
    }

    body.theme-pixel .meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 14px;
      font-size: 0.52rem;
    }

    body.theme-pixel .meta span {
      border: 3px solid #334155;
      padding: 6px 4px;
      text-align: center;
      background: #0f172a;
      color: #7dd3fc;
      box-shadow: 3px 3px 0 #000;
      letter-spacing: 0.04em;
    }

    body.theme-pixel .board {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 12px;
      padding: 10px;
      background: #0f172a;
      border: 4px solid #334155;
    }

    body.theme-pixel .tile {
      aspect-ratio: 1 / 1;
      border: 3px solid #000;
      border-radius: 0;
      background: #1e293b;
      color: #f8fafc;
      font-family: 'Press Start 2P', monospace;
      font-size: 1.5rem;
      cursor: pointer;
      position: relative;
      overflow: visible;
      box-shadow: 4px 4px 0 #000;
      transition: none;
      image-rendering: pixelated;
    }

    body.theme-pixel .tile.value-1 {
      background: #334155;
      border-color: #64748b;
      color: #cbd5e1;
      box-shadow: 4px 4px 0 #0f172a;
    }

    body.theme-pixel .tile.value-2 {
      background: #1d4ed8;
      border-color: #93c5fd;
      color: #dbeafe;
      box-shadow: 4px 4px 0 #1e3a8a;
    }

    body.theme-pixel .tile.value-3 {
      background: #7c3aed;
      border-color: #c4b5fd;
      color: #ede9fe;
      box-shadow: 4px 4px 0 #4c1d95;
    }

    body.theme-pixel .tile.value-4 {
      background: #b45309;
      border-color: #fcd34d;
      color: #fef3c7;
      box-shadow: 4px 4px 0 #78350f;
    }

    body.theme-pixel .tile:not(:disabled):hover {
      transform: translate(-2px, -2px);
      filter: brightness(1.18);
    }

    body.theme-pixel .tile.value-1:not(:disabled):hover {
      box-shadow: 6px 6px 0 #0f172a;
    }

    body.theme-pixel .tile.value-2:not(:disabled):hover {
      box-shadow: 6px 6px 0 #1e3a8a;
    }

    body.theme-pixel .tile.value-3:not(:disabled):hover {
      box-shadow: 6px 6px 0 #4c1d95;
    }

    body.theme-pixel .tile.value-4:not(:disabled):hover {
      box-shadow: 6px 6px 0 #78350f;
    }

    body.theme-pixel .tile:not(:disabled):active {
      transform: translate(4px, 4px);
      box-shadow: none !important;
    }

    body.theme-pixel .tile:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      filter: saturate(0.1) brightness(0.65);
      box-shadow: 2px 2px 0 #000;
    }

    body.theme-pixel .board.win-state .tile:disabled {
      opacity: 1;
      filter: none;
      box-shadow: inherit;
    }

    body.theme-pixel .hole {
      aspect-ratio: 1 / 1;
      border: none;
      background: transparent;
      box-shadow: none;
      opacity: 0;
      pointer-events: none;
    }

    body.theme-pixel .particle {
      position: absolute;
      left: var(--sx, 50%);
      top: var(--sy, 50%);
      width: 6px;
      height: 6px;
      border-radius: 0;
      background: #facc15;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 1;
      image-rendering: pixelated;
      will-change: transform, opacity;
    }

    body.theme-pixel .status {
      min-height: 1.5em;
      margin: 0;
      padding: 10px;
      text-align: center;
      font-size: 0.55rem;
      line-height: 2;
      border: 3px solid #334155;
      background: #0f172a;
      color: #94a3b8;
      box-shadow: 3px 3px 0 #000;
    }

    body.theme-pixel .status.win {
      color: #4ade80;
      border-color: #4ade80;
      box-shadow: 3px 3px 0 #14532d;
      animation: winBlink 600ms steps(1) 3;
    }

    body.theme-pixel .status.stuck {
      color: #fb923c;
      border-color: #fb923c;
      box-shadow: 3px 3px 0 #7c2d12;
      animation: stuckBlink 500ms steps(1) infinite;
    }

    body.theme-pixel .controls {
      margin-top: 12px;
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    body.theme-pixel .btn {
      border: 3px solid #93c5fd;
      background: #1d4ed8;
      color: #dbeafe;
      border-radius: 0;
      padding: 8px 10px;
      cursor: pointer;
      font-family: 'Press Start 2P', monospace;
      font-size: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      box-shadow: 4px 4px 0 #000;
      transition: none;
    }

    body.theme-pixel .btn:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 #000;
      filter: brightness(1.15);
    }

    body.theme-pixel .btn:active {
      transform: translate(4px, 4px);
      box-shadow: none;
    }

    body.theme-pixel .btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      transform: none;
      box-shadow: 2px 2px 0 #000;
      filter: saturate(0.2);
    }

    body.theme-pixel #themeBtn {
      border-color: #c4b5fd;
      background: #7c3aed;
    }

    /* ======================================================
       NEON THEME
       ====================================================== */
    body.theme-neon {
      background:
        radial-gradient(circle at 20% 8%, rgb(167 139 250 / 18%), transparent 40%),
        radial-gradient(circle at 80% 12%, rgb(34 211 238 / 20%), transparent 45%),
        linear-gradient(180deg, #040714 0%, #050816 60%, #02040f 100%);
      font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
      position: relative;
      overflow-x: hidden;
    }

    body.theme-neon::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.16;
      background-image:
        linear-gradient(rgb(148 163 184 / 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgb(148 163 184 / 0.14) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    body.theme-neon .game {
      width: min(92vw, 460px);
      background: linear-gradient(160deg, rgb(14 22 45 / 95%), rgb(7 13 28 / 95%));
      border: 1px solid #1e2a4f;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 18px 55px rgb(0 0 0 / 52%), 0 0 0 1px rgb(34 211 238 / 18%), 0 0 24px rgb(34 211 238 / 18%);
      backdrop-filter: blur(2px);
      position: relative;
      overflow: hidden;
    }

    body.theme-neon h1 {
      margin: 0 0 8px;
      font-size: 1.35rem;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-shadow: 0 0 14px rgb(34 211 238 / 35%);
    }

    body.theme-neon .subtitle {
      margin: 0 0 12px;
      color: #94a3b8;
      text-align: center;
      font-size: 0.9rem;
      line-height: 1.45;
      border: none;
      padding: 0;
      background: none;
    }

    body.theme-neon .meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 0 0 14px;
      color: #94a3b8;
      font-size: 0.84rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    body.theme-neon .meta span {
      border: 1px solid rgb(56 189 248 / 24%);
      border-radius: 9px;
      padding: 7px 8px;
      text-align: center;
      background: rgb(15 23 42 / 65%);
      box-shadow: inset 0 0 10px rgb(56 189 248 / 9%);
    }

    body.theme-neon .board {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 14px;
      padding: 10px;
      border-radius: 12px;
      background: rgb(2 6 23 / 55%);
      border: 1px solid rgb(148 163 184 / 16%);
      box-shadow: inset 0 0 20px rgb(34 211 238 / 10%);
    }

    body.theme-neon .tile {
      aspect-ratio: 1/1;
      border: 1px solid #3b4f79;
      border-radius: 11px;
      background: linear-gradient(180deg, #182a52 0%, #0f1c3a 100%);
      color: #e6f0ff;
      font-size: 2rem;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
      position: relative;
      overflow: visible;
      text-shadow: 0 0 10px rgb(224 242 254 / 30%);
      box-shadow: inset 0 -6px 0 rgb(0 0 0 / 20%), 0 0 0 1px rgb(59 130 246 / 22%);
    }

    body.theme-neon .tile.value-1 {
      border-color: #475569;
      background: radial-gradient(circle at 30% 20%, rgb(255 255 255/18%), transparent 42%), linear-gradient(180deg, #334155 0%, #1e293b 100%);
      color: #f1f5f9;
      text-shadow: 0 0 10px rgb(241 245 249/36%);
      box-shadow: inset 0 -6px 0 rgb(0 0 0/24%), 0 0 0 1px rgb(148 163 184/30%), 0 0 14px rgb(148 163 184/28%);
    }

    body.theme-neon .tile.value-2 {
      border-color: #2563eb;
      background: radial-gradient(circle at 32% 18%, rgb(255 255 255/22%), transparent 42%), linear-gradient(180deg, #38bdf8 0%, #2563eb 48%, #1e3a8a 100%);
      color: #ecfeff;
      text-shadow: 0 0 12px rgb(103 232 249/55%);
      box-shadow: inset 0 -6px 0 rgb(0 0 0/24%), 0 0 0 1px rgb(56 189 248/42%), 0 0 16px rgb(56 189 248/42%);
    }

    body.theme-neon .tile.value-3 {
      border-color: #7c3aed;
      background: radial-gradient(circle at 32% 18%, rgb(255 255 255/20%), transparent 42%), linear-gradient(180deg, #c084fc 0%, #8b5cf6 45%, #6d28d9 100%);
      color: #f5f3ff;
      text-shadow: 0 0 12px rgb(196 181 253/56%);
      box-shadow: inset 0 -6px 0 rgb(0 0 0/24%), 0 0 0 1px rgb(167 139 250/42%), 0 0 16px rgb(167 139 250/40%);
    }

    body.theme-neon .tile.value-4 {
      border-color: #d97706;
      background: radial-gradient(circle at 32% 18%, rgb(255 255 255/20%), transparent 42%), linear-gradient(180deg, #fcd34d 0%, #f59e0b 43%, #c2410c 100%);
      color: #fff7ed;
      text-shadow: 0 0 12px rgb(253 186 116/60%);
      box-shadow: inset 0 -6px 0 rgb(0 0 0/24%), 0 0 0 1px rgb(251 146 60/46%), 0 0 18px rgb(249 115 22/40%);
    }

    body.theme-neon .tile:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: inset 0 -6px 0 rgb(0 0 0/22%), 0 0 0 1px rgb(56 189 248/35%), 0 0 15px rgb(56 189 248/38%);
      filter: brightness(1.05);
    }

    body.theme-neon .tile:active {
      transform: translateY(0);
    }

    body.theme-neon .tile:disabled {
      opacity: 0.38;
      cursor: not-allowed;
      transform: none;
      filter: saturate(0.15) brightness(0.7);
      box-shadow: none;
    }

    body.theme-neon .board.win-state .tile:disabled {
      opacity: 1;
      filter: none;
      box-shadow: inherit;
    }

    body.theme-neon .hole {
      aspect-ratio: 1 / 1;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      opacity: 0;
      pointer-events: none;
    }

    body.theme-neon .particle {
      position: absolute;
      left: var(--sx, 50%);
      top: var(--sy, 50%);
      width: 5px;
      height: 5px;
      border-radius: 1px;
      background: linear-gradient(145deg, #fde68a, #f59e0b 65%);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 1;
      box-shadow: 0 0 8px rgb(245 158 11/60%);
      will-change: transform, opacity;
    }

    body.theme-neon .status {
      min-height: 1.5em;
      margin: 0;
      padding: 10px;
      text-align: center;
      font-weight: 700;
      border-radius: 10px;
      font-size: 1rem;
      color: #e6f0ff;
      border: 1px solid rgb(148 163 184/20%);
      background: rgb(15 23 42/55%);
    }

    body.theme-neon .status.win {
      color: #22c55e;
      border-color: rgb(34 197 94/45%);
      box-shadow: 0 0 16px rgb(34 197 94/22%);
    }

    body.theme-neon .status.stuck {
      color: #fb923c;
      border-color: rgb(251 146 60/45%);
      box-shadow: 0 0 16px rgb(251 146 60/22%);
      animation: stuckPulse 1.8s ease-in-out infinite;
    }

    body.theme-neon .controls {
      margin-top: 12px;
      display: flex;
      justify-content: center;
      gap: 9px;
      flex-wrap: wrap;
    }

    body.theme-neon .btn {
      border: 1px solid #2563eb;
      background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
      color: #eff6ff;
      border-radius: 9px;
      padding: 9px 13px;
      cursor: pointer;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      font-size: 0.76rem;
      box-shadow: inset 0 -3px 0 rgb(0 0 0/22%), 0 0 0 1px rgb(59 130 246/20%);
      transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
    }

    body.theme-neon .btn:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
      box-shadow: inset 0 -3px 0 rgb(0 0 0/22%), 0 0 12px rgb(59 130 246/36%);
    }

    body.theme-neon .btn:active {
      transform: translateY(0);
    }

    body.theme-neon .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
      box-shadow: inset 0 -2px 0 rgb(0 0 0/14%);
    }

    body.theme-neon #themeBtn {
      border-color: #a78bfa;
      background: linear-gradient(180deg, #7c3aed 0%, #4c1d95 100%);
    }

    body.theme-pixel #nextBtn {
      border-color: #fcd34d;
      background: #b45309;
      color: #fffbeb;
      box-shadow: 4px 4px 0 #7c2d12;
    }

    body.theme-pixel #nextBtn.cta-ready {
      animation: nextPulsePixel 520ms steps(1) infinite;
      box-shadow: 5px 5px 0 #166534;
    }

    body.theme-neon #nextBtn {
      border-color: #f59e0b;
      background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
      color: #fff7ed;
      box-shadow: inset 0 -3px 0 rgb(0 0 0/22%), 0 0 0 1px rgb(251 146 60/35%);
    }

    body.theme-neon #nextBtn.cta-ready {
      animation: nextPulseNeon 1s ease-in-out infinite;
      box-shadow: inset 0 -3px 0 rgb(0 0 0/22%), 0 0 20px rgb(251 146 60/70%);
    }


    /* ======================================================
       SHARED
       ====================================================== */


    .celebration-layer {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 9999;
      opacity: 0;
      transition: opacity 160ms ease;
    }

    .celebration-layer.active {
      opacity: 1;
    }

    .emoji-drop {
      position: absolute;
      top: -14%;
      left: var(--x, 50%);
      font-size: clamp(1.4rem, 3.8vw, 2.2rem);
      line-height: 1;
      font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
      animation: emojiRain var(--dur, 2.6s) linear var(--delay, 0s) forwards;
      transform: translateX(-50%);
      text-shadow: 0 2px 4px rgb(0 0 0 / 35%);
      filter: saturate(1.15);
    }

    .tile-value {
      display: inline-block;
      position: relative;
      z-index: 2;
    }

    .tile-added {
      animation: tileShakeFlash 320ms steps(4, end);
    }

    @keyframes tileShakeFlash {
      0% {
        transform: translate(0, 0) rotate(0deg);
        filter: brightness(2.2);
      }

      25% {
        transform: translate(4px, -1px) rotate(-10deg);
        filter: brightness(1.8);
      }

      50% {
        transform: translate(-4px, 1px) rotate(10deg);
        filter: brightness(1.8);
      }

      70% {
        transform: translate(0, 0) rotate(0deg);
        filter: brightness(1);
      }
    }

    @keyframes winBlink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }
    }

    @keyframes stuckBlink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    @keyframes stuckPulse {

      0%,
      100% {
        box-shadow: 0 0 16px rgb(251 146 60/22%);
      }

      50% {
        box-shadow: 0 0 28px rgb(251 146 60/50%);
      }
    }

    @keyframes nextPulsePixel {
      0%,
      100% {
        filter: brightness(1);
      }

      50% {
        filter: brightness(1.24);
      }
    }

    @keyframes nextPulseNeon {
      0%,
      100% {
        transform: translateY(0);
        filter: brightness(1);
      }

      50% {
        transform: translateY(-1px) scale(1.04);
        filter: brightness(1.15);
      }
    }

    @keyframes emojiRain {
      0% {
        opacity: 0;
        transform: translate(-50%, -10%) rotate(0deg) scale(0.8);
      }

      12% {
        opacity: 1;
      }

      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--drift, 0px)), 120vh) rotate(var(--rot, 0deg)) scale(1.1);
      }
    }