/* ============================================================
   Theme tokens. Each holiday theme overrides these variables.
   Add a new theme: copy a [data-theme] block + add effects in effects.js
   ============================================================ */
:root, [data-theme="classic"] {
  --bg1: #0b1e3f; --bg2: #13336b;
  --panel: rgba(255,255,255,.06); --panel-border: rgba(255,255,255,.14);
  --text: #f4f7ff; --muted: #9fb0d4;
  --accent: #ffd23f; --accent2: #3fa9ff;
  --cell-bg: rgba(255,255,255,.05); --cell-text: rgba(255,255,255,.28);
  --cell-on-bg: #ffd23f; --cell-on-text: #1a1300; --cell-on-glow: rgba(255,210,63,.65);
  --letter-bg: #3fa9ff; --letter-text: #fff;
  --ball-B: #2f80ed; --ball-I: #eb5757; --ball-N: #f2f2f2; --ball-G: #27ae60; --ball-O: #f2c94c;
  --title-font: 'Fredoka', system-ui, sans-serif; --title-color: #ffd23f;
  --title-shadow: 0 0 18px rgba(255,210,63,.45);
  --win: #27ae60; --lose: #eb5757;
}
[data-theme="halloween"] {
  --bg1: #07040d; --bg2: #25103a;
  --panel: rgba(255,117,24,.06); --panel-border: rgba(255,117,24,.28);
  --text: #fbeede; --muted: #b59ac9;
  --accent: #ff7518; --accent2: #8bff4f;
  --cell-bg: rgba(155,93,229,.08); --cell-text: rgba(251,238,222,.26);
  --cell-on-bg: radial-gradient(circle at 50% 35%, #ffb347, #ff7518 55%, #c2410c);
  --cell-on-text: #1a0800; --cell-on-glow: rgba(255,117,24,.75);
  --letter-bg: linear-gradient(160deg, #6d28d9, #3b0764); --letter-text: #8bff4f;
  --ball-B: #ff7518; --ball-I: #8b5cf6; --ball-N: #65e03b; --ball-G: #e11d48; --ball-O: #334155;
  --title-font: 'Creepster', 'Fredoka', cursive; --title-color: #ff7518;
  --title-shadow: 0 0 10px rgba(255,117,24,.8), 0 0 40px rgba(255,60,0,.45);
  --win: #8bff4f; --lose: #e11d48;
}
[data-theme="christmas"] {
  --bg1: #062a17; --bg2: #0c4a2a;
  --panel: rgba(255,255,255,.06); --panel-border: rgba(255,215,0,.3);
  --text: #fffaf0; --muted: #b7d8c4;
  --accent: #e63946; --accent2: #ffd700;
  --cell-bg: rgba(255,255,255,.05); --cell-text: rgba(255,255,255,.25);
  --cell-on-bg: radial-gradient(circle at 50% 35%, #ff6b6b, #c1121f); --cell-on-text: #fff; --cell-on-glow: rgba(255,80,80,.7);
  --letter-bg: linear-gradient(160deg, #ffd700, #b8860b); --letter-text: #062a17;
  --ball-B: #c1121f; --ball-I: #1f7a3a; --ball-N: #f8f9fa; --ball-G: #ffd700; --ball-O: #1d4ed8;
  --title-font: 'Mountains of Christmas', 'Fredoka', cursive; --title-color: #fff;
  --title-shadow: 0 0 16px rgba(255,215,0,.6);
  --win: #ffd700; --lose: #e63946;
}
[data-theme="thanksgiving"] {
  --bg1: #2a1204; --bg2: #5a2a0c;
  --panel: rgba(255,200,120,.07); --panel-border: rgba(255,170,60,.3);
  --text: #fff4e0; --muted: #e0bb8a;
  --accent: #f59e0b; --accent2: #b45309;
  --cell-bg: rgba(255,255,255,.05); --cell-text: rgba(255,244,224,.26);
  --cell-on-bg: radial-gradient(circle at 50% 35%, #fcd34d, #d97706); --cell-on-text: #2a1204; --cell-on-glow: rgba(245,158,11,.7);
  --letter-bg: linear-gradient(160deg, #b45309, #7c2d12); --letter-text: #fde68a;
  --ball-B: #b45309; --ball-I: #dc2626; --ball-N: #fde68a; --ball-G: #65a30d; --ball-O: #92400e;
  --title-font: 'Lobster', 'Fredoka', cursive; --title-color: #fcd34d;
  --title-shadow: 0 0 14px rgba(245,158,11,.5);
  --win: #65a30d; --lose: #dc2626;
}
[data-theme="valentines"] {
  --bg1: #3b0a24; --bg2: #7a1446;
  --panel: rgba(255,255,255,.07); --panel-border: rgba(255,182,213,.35);
  --text: #fff0f6; --muted: #f5b8d2;
  --accent: #ff4d8d; --accent2: #ffc2dc;
  --cell-bg: rgba(255,255,255,.05); --cell-text: rgba(255,240,246,.26);
  --cell-on-bg: radial-gradient(circle at 50% 35%, #ff8fb8, #e11d74); --cell-on-text: #fff; --cell-on-glow: rgba(255,77,141,.7);
  --letter-bg: linear-gradient(160deg, #ff4d8d, #9d174d); --letter-text: #fff;
  --ball-B: #e11d74; --ball-I: #f472b6; --ball-N: #fff; --ball-G: #be123c; --ball-O: #a855f7;
  --title-font: 'Lobster', 'Fredoka', cursive; --title-color: #ffc2dc;
  --title-shadow: 0 0 18px rgba(255,77,141,.6);
  --win: #ff4d8d; --lose: #6b7280;
}
[data-theme="stpatricks"] {
  --bg1: #022c16; --bg2: #065f2c;
  --panel: rgba(255,255,255,.06); --panel-border: rgba(250,204,21,.3);
  --text: #f0fff4; --muted: #a7e3b9;
  --accent: #22c55e; --accent2: #facc15;
  --cell-bg: rgba(255,255,255,.05); --cell-text: rgba(240,255,244,.25);
  --cell-on-bg: radial-gradient(circle at 50% 35%, #86efac, #16a34a); --cell-on-text: #022c16; --cell-on-glow: rgba(34,197,94,.7);
  --letter-bg: linear-gradient(160deg, #facc15, #ca8a04); --letter-text: #022c16;
  --ball-B: #16a34a; --ball-I: #facc15; --ball-N: #fff; --ball-G: #15803d; --ball-O: #f97316;
  --title-font: 'Lobster', 'Fredoka', cursive; --title-color: #facc15;
  --title-shadow: 0 0 16px rgba(250,204,21,.5);
  --win: #facc15; --lose: #ef4444;
}
[data-theme="easter"] {
  --bg1: #2e1f5e; --bg2: #5b3fa3;
  --panel: rgba(255,255,255,.08); --panel-border: rgba(255,255,255,.3);
  --text: #fffdf5; --muted: #d9ccff;
  --accent: #fde047; --accent2: #86efac;
  --cell-bg: rgba(255,255,255,.06); --cell-text: rgba(255,255,255,.28);
  --cell-on-bg: radial-gradient(circle at 50% 35%, #fef08a, #f9a8d4); --cell-on-text: #2e1f5e; --cell-on-glow: rgba(253,224,71,.65);
  --letter-bg: linear-gradient(160deg, #86efac, #38bdf8); --letter-text: #2e1f5e;
  --ball-B: #f9a8d4; --ball-I: #93c5fd; --ball-N: #fef08a; --ball-G: #86efac; --ball-O: #c4b5fd;
  --title-font: 'Fredoka', system-ui, sans-serif; --title-color: #fde047;
  --title-shadow: 0 0 14px rgba(253,224,71,.5);
  --win: #86efac; --lose: #f87171;
}
[data-theme="july4"] {
  --bg1: #0a1433; --bg2: #1e2f6e;
  --panel: rgba(255,255,255,.06); --panel-border: rgba(255,255,255,.25);
  --text: #fff; --muted: #b9c4e8;
  --accent: #ef4444; --accent2: #60a5fa;
  --cell-bg: rgba(255,255,255,.05); --cell-text: rgba(255,255,255,.26);
  --cell-on-bg: radial-gradient(circle at 50% 35%, #fca5a5, #dc2626); --cell-on-text: #fff; --cell-on-glow: rgba(239,68,68,.7);
  --letter-bg: linear-gradient(160deg, #fff, #cbd5e1); --letter-text: #1e3a8a;
  --ball-B: #dc2626; --ball-I: #f8fafc; --ball-N: #1d4ed8; --ball-G: #dc2626; --ball-O: #1d4ed8;
  --title-font: 'Fredoka', system-ui, sans-serif; --title-color: #fff;
  --title-shadow: 0 0 12px rgba(96,165,250,.8), 0 0 30px rgba(239,68,68,.5);
  --win: #60a5fa; --lose: #ef4444;
}
[data-theme="newyear"] {
  --bg1: #050505; --bg2: #1c1a12;
  --panel: rgba(255,215,0,.05); --panel-border: rgba(255,215,0,.3);
  --text: #fffbea; --muted: #cfc39a;
  --accent: #ffd700; --accent2: #e5e7eb;
  --cell-bg: rgba(255,255,255,.04); --cell-text: rgba(255,251,234,.24);
  --cell-on-bg: radial-gradient(circle at 50% 35%, #fff3a3, #d4a300); --cell-on-text: #1c1a12; --cell-on-glow: rgba(255,215,0,.7);
  --letter-bg: linear-gradient(160deg, #3f3f46, #18181b); --letter-text: #ffd700;
  --ball-B: #d4a300; --ball-I: #9ca3af; --ball-N: #fef3c7; --ball-G: #a16207; --ball-O: #52525b;
  --title-font: 'Lobster', 'Fredoka', cursive; --title-color: #ffd700;
  --title-shadow: 0 0 18px rgba(255,215,0,.6);
  --win: #ffd700; --lose: #ef4444;
}

/* ============================================================ base */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(ellipse at 50% 0%, var(--bg2), var(--bg1) 70%) fixed, var(--bg1);
  transition: background .6s;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; }

/* ============================================================ balls */
.ball {
  --c: var(--ball-B);
  position: relative; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 22%),
              radial-gradient(circle at 50% 50%, var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow: inset -0.6em -0.6em 1.2em rgba(0,0,0,.35), 0 .3em 1em rgba(0,0,0,.45);
  display: grid; place-items: center;
}
.ball[data-l="B"] { --c: var(--ball-B); } .ball[data-l="I"] { --c: var(--ball-I); }
.ball[data-l="N"] { --c: var(--ball-N); } .ball[data-l="G"] { --c: var(--ball-G); } .ball[data-l="O"] { --c: var(--ball-O); }
.ball .face {
  width: 62%; aspect-ratio: 1; border-radius: 50%; background: #fff; color: #111;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .9;
  box-shadow: inset 0 -.15em .4em rgba(0,0,0,.2);
}
.ball .face .l { font-size: .13em; font-weight: 600; opacity: .75; }
.ball .face .n { font-size: .3em; font-weight: 700; letter-spacing: -.02em; }
.ball.empty { --c: #444; opacity: .35; }

/* ============================================================ pattern mini grid */
.pgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5%; aspect-ratio: 1; }
.pgrid > i { border-radius: 22%; background: var(--cell-bg); border: 1px solid var(--panel-border); transition: background .3s, box-shadow .3s; }
.pgrid > i.on { background: var(--cell-on-bg); box-shadow: 0 0 .5em var(--cell-on-glow); border-color: transparent; }
.pgrid > i.free { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.pgrid > i.free.on { background: var(--cell-on-bg); }

/* ============================================================ effects layer */
#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#fx .p { position: absolute; will-change: transform; user-select: none; }
#fx .fog { position: absolute; left: -10%; right: -10%; bottom: -5%; height: 35%;
  background: radial-gradient(ellipse at 30% 100%, rgba(200,180,255,.14), transparent 60%),
              radial-gradient(ellipse at 75% 100%, rgba(180,255,200,.08), transparent 55%);
  animation: fogdrift 18s ease-in-out infinite alternate; }
@keyframes fogdrift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
#fx .moon { position: absolute; top: 2%; left: 3%; width: 9vmin; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff8dc, #f5d58a 60%, #d9a441);
  box-shadow: 0 0 40px rgba(255,230,150,.5), 0 0 120px rgba(255,200,100,.25); opacity: .55; }
#fx .flash { position: absolute; inset: 0; background: #d8d0ff; opacity: 0; }
.confetti { position: fixed; pointer-events: none; z-index: 60; will-change: transform, opacity; }