/* One block per theme, keyed on <html data-theme> (and on each theme-picker button).
   Region colors are --c0 … --c7: red, orange, yellow, green, blue, purple, pink, teal.
   The bare [data-theme] blocks hold variables only, so a picker button can preview another theme. */

/* ---------- Flat ---------- */
[data-theme="flat"] {
  --c0: #f4a6a6; --c1: #f7c98b; --c2: #f3e48a; --c3: #a8d8a0;
  --c4: #9fc9ee; --c5: #c3a8e8; --c6: #f2b8d8; --c7: #95d5cf;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #fbf8f3;
  --card: #fff;
  --ink: #222;
  --on-ink: #fff;
  --muted: #6e665e;
  --pill: #f1ece5;
  --focus: #4a8ef0;
  --veil: rgba(251, 248, 243, .88);
  --line-thin: rgba(0, 0, 0, .14);
  --line-thick: #2b2724;
  --boom: #ff6b6b;
  --heart: #e5484d;
  --heart-off: #d9d2cc;
  --banner-flawless: linear-gradient(135deg, #ffd54a, #ff9f1a);
  --banner-flawless-ink: #3a2000;
  --banner-won: linear-gradient(135deg, #b8e6b0, #6cc583);
  --banner-won-ink: #123d1c;
  --banner-lost: linear-gradient(135deg, #ff8f8f, #e5484d);
  --banner-lost-ink: #fff;
  --pv-gap: 3px; --tile-r: 5px; --tile-fx: none; --tile-gloss: none;
}
[data-theme="flat"] .sq.safe::after { content: "×"; color: rgba(0, 0, 0, .38); font-weight: 600; }
/* Motion: smooth and quick. */
[data-theme="flat"] .fx-tap { animation: flat-tap .18s ease-out; }
@keyframes flat-tap { from { transform: scale(.82); filter: brightness(1.15); } }
[data-theme="flat"] .fx-flag svg { animation: flat-drop .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes flat-drop { from { transform: translateY(-45%); opacity: 0; } }
[data-theme="flat"] .fx-wrong { animation: flat-nudge .3s ease; }
@keyframes flat-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
[data-theme="flat"] .hearts .fx-lose { animation: flat-lose .5s ease; }
@keyframes flat-lose { from { transform: scale(1.3); color: var(--heart); } }
[data-theme="flat"] .fx-boom { animation: flat-shake .45s ease; }
@keyframes flat-shake { 15%, 55% { transform: translateX(-7px); } 35%, 75% { transform: translateX(7px); } }
[data-theme="flat"] .fx-boom .sq.boom { animation: flash .45s ease; }
@keyframes flash { from { filter: brightness(2); } }
[data-theme="flat"] .fx-banner { animation: flat-rise .4s cubic-bezier(.2, .8, .3, 1); }
@keyframes flat-rise { from { transform: translateY(24px); opacity: 0; } }
[data-theme="flat"] .confetti i { border-radius: 2px; animation: fall 2.2s cubic-bezier(.3, .6, .6, 1) forwards; }

/* ---------- Pixel: classic Minesweeper. Raised squares, pressed in once marked safe. ---------- */
[data-theme="pixel"] {
  --c0: #ef8a8a; --c1: #f2c06a; --c2: #e6dc5e; --c3: #8fd08a;
  --c4: #8fb8f0; --c5: #b79cf0; --c6: #f0a0d4; --c7: #72d0c6;
  --font: ui-monospace, "Cascadia Mono", Menlo, Consolas, "Courier New", monospace;
  --bg: #c0c0c0;
  --card: #c0c0c0;
  --ink: #000;
  --on-ink: #fff;
  --muted: #3c3c3c;
  --pill: #a9a9a9;
  --focus: #000080;
  --veil: rgba(192, 192, 192, .9);
  --line-thin: rgba(0, 0, 0, .3);
  --line-thick: #000;
  --boom: #f00;
  --heart: #e00;
  --heart-off: #808080;
  --banner-flawless: #ffd400;
  --banner-flawless-ink: #000;
  --banner-won: #8fd08a;
  --banner-won-ink: #000;
  --banner-lost: #e00;
  --banner-lost-ink: #fff;
  --bevel: inset 3px 3px 0 #fff, inset -3px -3px 0 #7b7b7b;
  --sunken: inset 3px 3px 0 #7b7b7b, inset -3px -3px 0 #fff;
  --pv-gap: 0; --tile-r: 0; --tile-gloss: none;
  --tile-fx: inset 2px 2px 0 rgba(255, 255, 255, .75), inset -2px -2px 0 rgba(0, 0, 0, .4);
}
[data-theme="pixel"] .logo, [data-theme="pixel"] .card h2 { letter-spacing: 0; }
[data-theme="pixel"] .card, [data-theme="pixel"] .back { border-radius: 0; box-shadow: var(--bevel); }
[data-theme="pixel"] .hint-btn { border-radius: 0; box-shadow: var(--bevel); }
[data-theme="pixel"] .pill { border-radius: 0; box-shadow: var(--sunken); background: #d4d4d4; }
[data-theme="pixel"] .btn:not(:disabled) { border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--bevel), 0 0 0 2px #000; }
[data-theme="pixel"] .btn:not(:disabled):active { transform: none; box-shadow: var(--sunken), 0 0 0 2px #000; }
[data-theme="pixel"] .btn:disabled { border-radius: 0; box-shadow: var(--sunken); }
[data-theme="pixel"] .btn.ghost:not(:disabled) { box-shadow: none; color: var(--muted); }
[data-theme="pixel"] .banner { border-radius: 0; box-shadow: var(--bevel), 0 0 0 2px #000; }
[data-theme="pixel"] .board {
  border-radius: 0;
  border-color: #000;
  box-shadow: 0 0 0 3px #c0c0c0, 0 0 0 6px #7b7b7b;
}
[data-theme="pixel"] .board.small { box-shadow: none; }
[data-theme="pixel"] .sq { box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .75), inset -3px -3px 0 rgba(0, 0, 0, .35); }
[data-theme="pixel"] .board.small .sq { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .75), inset -2px -2px 0 rgba(0, 0, 0, .35); }
[data-theme="pixel"] .board .sq.safe,
[data-theme="pixel"] .board .sq.boom {
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .28);
  background-image: linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14));
}
[data-theme="pixel"] .board .sq.boom { background-image: none; }
.theme-opt[data-theme="pixel"] { border-radius: 0; }
/* Motion: steps() and no easing, like an old console. */
[data-theme="pixel"] .fx-tap { animation: px-tap .12s steps(2); }
@keyframes px-tap { from { filter: brightness(.6); } }
[data-theme="pixel"] .fx-flag svg { animation: px-drop .24s steps(3); }
@keyframes px-drop { from { transform: translateY(-60%); } }
[data-theme="pixel"] .fx-wrong, [data-theme="pixel"] .fx-boom .sq.boom { animation: px-blink .4s steps(1); }
@keyframes px-blink { 0%, 50% { filter: invert(1); } 25%, 75% { filter: none; } }
[data-theme="pixel"] .hearts .fx-lose { animation: px-heart .6s steps(1); }
@keyframes px-heart { 0%, 33%, 66% { color: var(--heart); } 16%, 50%, 83% { color: var(--heart-off); } }
[data-theme="pixel"] .fx-boom { animation: px-shake .4s steps(1); }
@keyframes px-shake {
  0% { transform: translate(-6px, 3px); } 20% { transform: translate(6px, -3px); } 40% { transform: translate(-4px, -3px); }
  60% { transform: translate(4px, 3px); } 80% { transform: translate(-2px, 0); } 100% { transform: none; }
}
[data-theme="pixel"] .fx-banner { animation: px-in .45s steps(1); }
@keyframes px-in { 0%, 40% { visibility: hidden; } 20%, 60% { visibility: visible; } 50% { visibility: hidden; } }
[data-theme="pixel"] .confetti i { width: 8px; height: 8px; animation: px-fall 2.4s steps(14) forwards; }
@keyframes px-fall { to { transform: translate(var(--dx), 110vh); } }

/* ---------- Candy: glossy rounded sweets, a cartoon bomb on a burst. ---------- */
[data-theme="candy"] {
  --c0: #ff8fa3; --c1: #ffc75f; --c2: #f9e45b; --c3: #9be38a;
  --c4: #7ad3ff; --c5: #c4a2ff; --c6: #f79be6; --c7: #5fe0c8;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;
  --bg: linear-gradient(#fff4fb, #f1e8ff);
  --card: #fff;
  --ink: #4b2a5c;
  --on-ink: #fff;
  --muted: #8a6a94;
  --pill: #ffe4f1;
  --focus: #a54dff;
  --veil: rgba(255, 244, 251, .9);
  --line-thin: rgba(75, 42, 92, .12);
  --line-thick: #4b2a5c;
  --boom: #ff6b3d;
  --heart: #ff4d6d;
  --heart-off: #ddd3dc;
  --banner-flawless: linear-gradient(#ffe066, #ffab2e);
  --banner-flawless-ink: #5a2d00;
  --banner-won: linear-gradient(#b4f19f, #5fcf74);
  --banner-won-ink: #11421c;
  --banner-lost: linear-gradient(#ff8fa3, #ff4d6d);
  --banner-lost-ink: #fff;
  --pv-gap: 3px; --tile-r: 8px;
  --tile-fx: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .18);
  --tile-gloss: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 45%);
  --candy-btn: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 3px 8px rgba(255, 77, 125, .3);
}
[data-theme="candy"] .card { border-radius: 24px; box-shadow: 0 2px 4px rgba(120, 40, 120, .06), 0 10px 28px rgba(160, 60, 160, .1); }
[data-theme="candy"] .btn:not(:disabled) { border-radius: 999px; }
[data-theme="candy"] .btn:not(:disabled):not(.alt):not(.ghost) {
  background: linear-gradient(#ff7aa0, #ff4d7d); color: #fff; box-shadow: var(--candy-btn);
}
[data-theme="candy"] .btn.alt:not(:disabled) {
  background: linear-gradient(#9ee4ff, #57c3ff); color: #123a5c; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 3px 8px rgba(60, 160, 255, .25);
}
[data-theme="candy"] .btn:disabled { border-radius: 999px; }
[data-theme="candy"] .back { border-radius: 50%; }
[data-theme="candy"] .banner { border-radius: 22px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12); }
[data-theme="candy"] .board { border-radius: 18px; box-shadow: 0 8px 24px rgba(160, 60, 160, .16); }
/* The square shows the region color in its gutter; ::before is the glossy sweet on top. */
[data-theme="candy"] .sq { position: relative; background-image: linear-gradient(rgba(75, 42, 92, .1), rgba(75, 42, 92, .1)); }
[data-theme="candy"] .sq::before {
  content: "";
  position: absolute; inset: 8%;
  border-radius: 30%;
  background-color: inherit;
  background-image: var(--tile-gloss);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .18);
}
[data-theme="candy"] .sq svg, [data-theme="candy"] .sq::after { position: relative; }
[data-theme="candy"] .sq.safe::before {
  background-image: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22);
  filter: saturate(.6) brightness(1.08);
}
[data-theme="candy"] .sq.safe::after {
  content: "";
  width: 24%; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
[data-theme="candy"] .sq.boom { background-image: none; }
[data-theme="candy"] .sq.boom::before { content: none; }
[data-theme="candy"] .sq.boom svg { width: 92%; height: 92%; }
[data-theme="candy"] .hearts svg.off { filter: grayscale(1) opacity(.3); }

/* Candy motion: squishy, springy overshoot. */
[data-theme="candy"] .fx-tap { animation: candy-squish .38s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes candy-squish { 0% { transform: scale(1.18, .82); } 45% { transform: scale(.92, 1.08); } }
[data-theme="candy"] .fx-flag svg { animation: candy-pop .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes candy-pop { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.3) rotate(8deg); } }
[data-theme="candy"] .fx-wrong { animation: candy-wobble .5s ease; }
@keyframes candy-wobble { 20% { transform: rotate(-12deg) scale(1.1); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-5deg); } }
[data-theme="candy"] .hearts .fx-lose { animation: candy-heart .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes candy-heart { 0% { transform: scale(1.6); filter: none; } 40% { transform: scale(.7) translateY(4px); } }
[data-theme="candy"] .fx-boom { animation: candy-jelly .6s ease; }
@keyframes candy-jelly {
  15% { transform: scale(1.06, .94) rotate(-2deg); } 35% { transform: scale(.96, 1.04) rotate(2deg); }
  60% { transform: scale(1.02, .98) rotate(-1deg); }
}
[data-theme="candy"] .fx-boom .sq.boom svg { animation: candy-burst .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes candy-burst { from { transform: scale(0) rotate(-90deg); } }
[data-theme="candy"] .fx-banner { animation: candy-bounce .6s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes candy-bounce { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.08, .94); opacity: 1; } }
[data-theme="candy"] .confetti i { width: 12px; height: 12px; border-radius: 50%; animation: fall 2s cubic-bezier(.3, .5, .6, 1) forwards; }