@charset "utf-8";
/* The themes besides Standard: each redefines style.css's tokens on :root[data-theme],
   and adds touches of its own — a font, a little life in the background. The fonts are
   bundled (fonts/, under the SIL Open Font License and Apache 2.0), so nothing is fetched
   from elsewhere. */

@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Creepster";
  src: url("fonts/creepster.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Mountains of Christmas";
  src: url("fonts/mountains-of-christmas-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Mountains of Christmas";
  src: url("fonts/mountains-of-christmas-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---- Kids: bright, round and bouncy -------------------------------------------------- */
:root[data-theme="kids"] {
  --bg: #fff4cc;
  --panel: #ffffff;
  --ink: #2b2350;
  --muted: #6d6690;
  --line: #ffd0e6;
  --accent: #ff4f87;
  --accent-ink: #ffffff;
  --mover: #e3f5ff;
  --die: #ffffff;
  --pip: #ffffff;
  --held: #ffb703;
  --good: #129e62;
  --bad: #e0473c;
  --radius: 24px;
  --font: "Fredoka", "Comic Sans MS", "Chalkboard SE", sans-serif;
  --title: #ff4f87;
  --mark: "👉";
  --mini-die: #fff1f6; --mini-edge: #ff4f87; --mini-pip: #ff4f87;
  --pattern:
    radial-gradient(circle at 12px 12px, #ffc8e1 4px, transparent 5px),
    radial-gradient(circle at 42px 38px, #bfe8ff 4px, transparent 5px),
    radial-gradient(circle at 70px 14px, #c9f2c7 3px, transparent 4px);
  --pattern-size: 84px 56px;
}
[data-theme="kids"] body { font-size: 16px; }
[data-theme="kids"] h1 { font-size: 40px; font-weight: 700; }
[data-theme="kids"] h1 .text {
  background: linear-gradient(90deg, #ff4f87, #ff9f1c, #2ec4b6, #4d7cfe, #a35cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="kids"] h1 .icon { animation: kids-spin 6s ease-in-out infinite; }
@keyframes kids-spin { 0%, 80% { transform: none; } 90% { transform: rotate(200deg) scale(1.2); } 100% { transform: rotate(360deg); } }
[data-theme="kids"] .card { border-width: 3px; }
[data-theme="kids"] .tray.mover { border-color: #4d7cfe; box-shadow: 0 6px 0 #c9dcff; }
[data-theme="kids"] button { border-radius: 999px; font-weight: 600; }
[data-theme="kids"] button.primary { font-size: 17px; padding: 8px 22px; box-shadow: 0 4px 0 #c22e63; }
[data-theme="kids"] button.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #c22e63; }
[data-theme="kids"] .die { width: 50px; height: 50px; border-radius: 14px; border-width: 3px; }
[data-theme="kids"] .die:not(.blank):nth-child(5n + 1) { --die: #ff4f87; --die-edge: #d93a6e; }
[data-theme="kids"] .die:not(.blank):nth-child(5n + 2) { --die: #ff9f1c; --die-edge: #d9800c; }
[data-theme="kids"] .die:not(.blank):nth-child(5n + 3) { --die: #2ec4b6; --die-edge: #1f9a8f; }
[data-theme="kids"] .die:not(.blank):nth-child(5n + 4) { --die: #4d7cfe; --die-edge: #3460d8; }
[data-theme="kids"] .die:not(.blank):nth-child(5n + 5) { --die: #a35cff; --die-edge: #8340dc; }
[data-theme="kids"] .pip { width: 9px; height: 9px; }
[data-theme="kids"] .die.held { animation: kids-bounce .9s ease-in-out infinite; }
@keyframes kids-bounce { 50% { transform: translateY(-9px); } }
[data-theme="kids"] .sheet td.just { background: #fff1b8; }
[data-theme="kids"] .toast { background: linear-gradient(90deg, #ff4f87, #ff9f1c, #2ec4b6, #4d7cfe); }
/* Balloons float up now and then; a star shoots across. */
[data-theme="kids"] .ambient .a1, [data-theme="kids"] .ambient .a2 {
  display: block; bottom: -60px; font-size: 38px; animation: kids-float 22s linear infinite;
}
[data-theme="kids"] .ambient .a1 { left: 6%; }
[data-theme="kids"] .ambient .a1::before { content: "🎈"; }
[data-theme="kids"] .ambient .a2 { right: 5%; animation-delay: 11s; animation-duration: 26s; }
[data-theme="kids"] .ambient .a2::before { content: "🎈"; filter: hue-rotate(160deg); }
@keyframes kids-float {
  0% { transform: translate(0, 0) rotate(-6deg); }
  25% { transform: translate(18px, -30vh) rotate(6deg); }
  50% { transform: translate(-12px, -60vh) rotate(-6deg); }
  75%, 100% { transform: translate(10px, -125vh) rotate(4deg); }
}
[data-theme="kids"] .ambient .a3 { display: block; top: 12%; left: -40px; font-size: 26px; animation: kids-star 17s linear infinite 4s; }
[data-theme="kids"] .ambient .a3::before { content: "⭐"; }
@keyframes kids-star { 0% { transform: translate(0, 0) rotate(0); } 12%, 100% { transform: translate(110vw, 18vh) rotate(720deg); } }

/* ---- Halloween: a dark night, pumpkin dice, slime-green glow -------------------------- */
:root[data-theme="halloween"] {
  --bg: #15101d;
  --panel: #231a2f;
  --ink: #f3e9d8;
  --muted: #b4a3c6;
  --line: #3d2d4e;
  --accent: #ff7a1a;
  --accent-ink: #1a0d00;
  --mover: #34203a;
  --die: #ff8a26;
  --die-edge: #c2560b;
  --pip: #2a1306;
  --held: #8cff4f;
  --field: #1b1424;
  --good: #8cff4f;
  --bad: #ff6262;
  --title: #ff7a1a;
  --title-font: "Creepster", "Chiller", fantasy;
  --name-font: "Creepster", "Chiller", fantasy;
  --mark: "🕯️";
  --pattern:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200'%3E%3Ctext x='14' y='44' font-size='26' opacity='.14'%3E🦇%3C/text%3E%3Ctext x='132' y='92' font-size='22' opacity='.1'%3E🕸️%3C/text%3E%3Ctext x='56' y='170' font-size='20' opacity='.1'%3E👻%3C/text%3E%3C/svg%3E"),
    radial-gradient(circle at 88% 6%, rgba(255, 236, 190, .22) 0 46px, transparent 120px);
  --pattern-size: 220px 200px, 100% 100%;
}
[data-theme="halloween"] h1 { font-size: 46px; font-weight: 400; letter-spacing: 1px; text-shadow: 0 0 16px rgba(255, 122, 26, .6); }
[data-theme="halloween"] .tray-head .name, [data-theme="halloween"] .tray-head .total,
[data-theme="halloween"] .sheet thead th, [data-theme="halloween"] .sheet tr.total th, [data-theme="halloween"] .sheet tr.total td {
  font-weight: 400; letter-spacing: .5px; color: #ffb169;
}
[data-theme="halloween"] .tray-head .total { font-size: 28px; }
[data-theme="halloween"] .die:not(.blank) { position: relative; border-radius: 16px; }
[data-theme="halloween"] .die:not(.blank)::before {  /* the pumpkin's stem */
  content: ""; position: absolute; top: -7px; left: calc(50% - 3px);
  width: 6px; height: 9px; border-radius: 3px; background: #4f8a2c;
}
[data-theme="halloween"] .die.blank { border-color: var(--line); }
[data-theme="halloween"] .die.held { box-shadow: 0 0 0 3px var(--held), 0 0 18px var(--held); }
[data-theme="halloween"] .tray.mover { box-shadow: 0 0 24px rgba(255, 122, 26, .3); }
[data-theme="halloween"] .toast { background: #2a1338; color: #8cff4f; border: 2px solid #ff7a1a; text-shadow: 0 0 10px #8cff4f; }
/* A bat flaps across the moon; a spider lets itself down, and climbs back. */
[data-theme="halloween"] .ambient .a1 { display: block; top: 9%; left: -60px; font-size: 34px; animation: bat-fly 19s linear infinite 2s; }
[data-theme="halloween"] .ambient .a1::before { content: "🦇"; display: inline-block; animation: bat-flap .25s ease-in-out infinite alternate; }
@keyframes bat-fly {
  0% { transform: translate(0, 0); }
  10% { transform: translate(30vw, 6vh); }
  20% { transform: translate(60vw, -2vh); }
  30%, 100% { transform: translate(115vw, 8vh); }
}
@keyframes bat-flap { to { transform: scaleY(.55) scaleX(1.1); } }
[data-theme="halloween"] .ambient .a2 {
  display: block; top: 0; right: 22%; font-size: 26px; transform-origin: top center;
  animation: spider-drop 11s ease-in-out infinite;
}
[data-theme="halloween"] .ambient .a2::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 100vh;
  background: rgba(240, 230, 255, .35);
}
[data-theme="halloween"] .ambient .a2::after { content: "🕷️"; }
@keyframes spider-drop {
  0%, 100% { transform: translateY(-40px); }
  40%, 60% { transform: translateY(150px) rotate(4deg); }
  50% { transform: translateY(160px) rotate(-4deg); }
}
[data-theme="halloween"] .ambient .a3 {
  display: block; bottom: 6%; left: -80px; font-size: 40px; opacity: .55;
  animation: ghost-drift 30s ease-in-out infinite 8s;
}
[data-theme="halloween"] .ambient .a3::before { content: "👻"; }
@keyframes ghost-drift {
  0% { transform: translate(0, 0); opacity: 0; }
  5% { opacity: .55; }
  50% { transform: translate(55vw, -40px); }
  60%, 100% { transform: translate(115vw, 0); opacity: 0; }
}

/* ---- Christmas: pine green, candy-cane cards, fairy lights, snow ---------------------- */
:root[data-theme="christmas"] {
  --bg: #0f3d2e;
  --panel: #fffaf0;
  --ink: #23302a;
  --muted: #6c776f;
  --line: #eadcc1;
  --accent: #c8102e;
  --accent-ink: #ffffff;
  --mover: #fdeeee;
  --die: #ffffff;
  --die-edge: #e2c27a;
  --pip: #c8102e;
  --held: #f2c230;
  --field: #ffffff;
  --good: #1d7a46;
  --bad: #c8102e;
  --title: #fffaf0;
  --title-font: "Mountains of Christmas", Georgia, serif;
  --name-font: "Mountains of Christmas", Georgia, serif;
  --page-ink: #fffaf0;
  --page-muted: #cfe4d6;
  --mark: "⭐";
  --pattern: radial-gradient(ellipse at 50% -10%, #1d5c45 0, transparent 70%);
}
[data-theme="christmas"] body { padding-top: 30px; }
[data-theme="christmas"] h1 { font-size: 46px; font-weight: 700; text-shadow: 0 2px 0 #0a2a1f; }
[data-theme="christmas"] .tray-head .name, [data-theme="christmas"] .tray-head .total,
[data-theme="christmas"] .sheet thead th, [data-theme="christmas"] .sheet tr.total th, [data-theme="christmas"] .sheet tr.total td,
[data-theme="christmas"] h2 {
  font-weight: 700;
}
[data-theme="christmas"] .tray-head .name { font-size: 22px; }
[data-theme="christmas"] .tray-head .total { font-size: 28px; color: #c8102e; }
[data-theme="christmas"] .card {
  background: repeating-linear-gradient(-45deg, #c8102e 0 9px, #ffffff 9px 18px) top / 100% 7px no-repeat, var(--panel);
  padding-top: 16px;
}
[data-theme="christmas"] .tray.mover {
  background: repeating-linear-gradient(-45deg, #c8102e 0 9px, #ffffff 9px 18px) top / 100% 7px no-repeat, var(--mover);
  border-color: #e2c27a;
}
[data-theme="christmas"] .die:not(.blank) { position: relative; }
[data-theme="christmas"] .die:not(.blank)::after {  /* a sprig of holly */
  content: "🌿"; position: absolute; top: -9px; right: -7px; font-size: 13px; transform: rotate(25deg);
}
[data-theme="christmas"] .die.held { box-shadow: 0 0 0 3px var(--held), 0 0 14px rgba(242, 194, 48, .8); }
[data-theme="christmas"] .toast { background: #c8102e; color: #fffaf0; border: 3px solid #f2c230; }
/* Fairy lights along the top, twinkling in turn. */
[data-theme="christmas"] .ambient .a1, [data-theme="christmas"] .ambient .a2 {
  display: block; top: 0; left: 0; right: 0; height: 26px;
  background-repeat: repeat-x; background-size: 96px 26px;
}
[data-theme="christmas"] .ambient .a1 {
  background-image:
    linear-gradient(#2a4d3b, #2a4d3b) 0 5px / 100% 2px repeat-x,
    radial-gradient(circle at 12px 14px, #ff4d4d 5px, transparent 6px),
    radial-gradient(circle at 60px 14px, #4dd2ff 5px, transparent 6px);
  animation: twinkle 1.6s steps(1) infinite;
}
[data-theme="christmas"] .ambient .a2 {
  background-image:
    radial-gradient(circle at 36px 14px, #ffd84d 5px, transparent 6px),
    radial-gradient(circle at 84px 14px, #7dff7a 5px, transparent 6px);
  animation: twinkle 1.6s steps(1) infinite .8s;
}
@keyframes twinkle { 50% { filter: brightness(.45); } }
/* Santa crosses the sky now and then. */
[data-theme="christmas"] .ambient .a3 { display: block; top: 7%; right: -160px; font-size: 30px; animation: sleigh 28s linear infinite 6s; }
[data-theme="christmas"] .ambient .a3::before { content: "🦌🦌🛷"; }
@keyframes sleigh {
  0% { transform: translate(0, 0); }
  8% { transform: translate(-40vw, -14px); }
  16% { transform: translate(-80vw, 8px); }
  24%, 100% { transform: translate(-125vw, -10px); }
}
[data-theme="christmas"] body::after {  /* snow */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .7;
  background-image:
    radial-gradient(3px 3px at 20px 30px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 90px 140px, #fff 50%, transparent 52%),
    radial-gradient(4px 4px at 160px 70px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 210px 210px, #fff 50%, transparent 52%),
    radial-gradient(3px 3px at 60px 190px, #fff 50%, transparent 52%);
  background-size: 240px 240px;
  animation: snow 14s linear infinite;
}
@keyframes snow { to { background-position: 60px 240px; } }

@media (prefers-reduced-motion: reduce) {
  [data-theme="christmas"] body::after, [data-theme="kids"] .die.held, [data-theme="kids"] h1 .icon { animation: none; }
}

/* ---- light touches, all gentle ------------------------------------------------------ */
[data-theme="kids"] h1 .icon, [data-theme="halloween"] h1 .icon, [data-theme="christmas"] h1 .icon { transform-origin: 50% 80%; }
[data-theme="halloween"] h1 .icon, [data-theme="christmas"] h1 .icon { animation: sway 4s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(-8deg) translateY(-2px); } }

/* Kids: bunting along the top, swaying a little. */
[data-theme="kids"] body { padding-top: 34px; }
[data-theme="kids"] body::before {
  content: ""; position: fixed; top: 0; left: -20px; right: -20px; height: 26px; z-index: 0; pointer-events: none;
  background:
    conic-gradient(from 150deg at 50% 0, #ff4f87 0 60deg, transparent 0) 0 0 / 120px 26px,
    conic-gradient(from 150deg at 50% 0, #ff9f1c 0 60deg, transparent 0) 30px 0 / 120px 26px,
    conic-gradient(from 150deg at 50% 0, #2ec4b6 0 60deg, transparent 0) 60px 0 / 120px 26px,
    conic-gradient(from 150deg at 50% 0, #4d7cfe 0 60deg, transparent 0) 90px 0 / 120px 26px;
  background-repeat: repeat-x;
  transform-origin: 50% 0;
  animation: bunting 5s ease-in-out infinite;
}
@keyframes bunting { 50% { transform: skewX(3deg) translateY(1px); } }
[data-theme="kids"] .tray.mover .tray-head .name::before { display: inline-block; animation: point 1s ease-in-out infinite; }
@keyframes point { 50% { transform: translateX(4px); } }

/* Halloween: cobwebs in the corners, a candle that flickers by whoever is to move. */
[data-theme="halloween"] body::before {
  content: ""; position: fixed; top: 0; left: 0; width: 170px; height: 170px; z-index: 0; pointer-events: none; opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23d9cce8' stroke-width='.7'%3E%3Cpath d='M0 0L100 30M0 0L80 80M0 0L30 100M0 0L100 0M0 0L0 100'/%3E%3Cpath d='M20 0Q18 6 24 7Q20 14 16 16Q14 22 6 20Q4 20 0 22'/%3E%3Cpath d='M45 0Q40 13 52 15Q44 30 33 34Q28 46 14 42Q8 44 0 46'/%3E%3Cpath d='M72 0Q64 20 80 23Q70 46 52 52Q44 70 22 64Q12 68 0 70'/%3E%3C/svg%3E") no-repeat;
}
[data-theme="halloween"] .tray.mover .tray-head .name::before { display: inline-block; animation: flicker 1.3s steps(2) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 30% { opacity: .7; } 60% { opacity: .9; transform: scale(1.05); } }
[data-theme="halloween"] .tray.mover .die:not(.blank) { box-shadow: 0 0 12px rgba(255, 138, 38, .45); }

/* Christmas: the star by whoever is to move twinkles; snow settles on the cards. */
[data-theme="christmas"] .tray.mover .tray-head .name::before { display: inline-block; animation: twinkle-star 1.8s ease-in-out infinite; }
@keyframes twinkle-star { 50% { transform: scale(1.25) rotate(18deg); filter: brightness(1.3); } }
[data-theme="christmas"] .tray::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: -5px; height: 9px; border-radius: 9px;
  background: radial-gradient(circle at 10px 6px, #fff 5px, transparent 6px) 0 0 / 22px 9px repeat-x;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .08));
}

@media (prefers-reduced-motion: reduce) {
  [data-theme] h1 .icon, [data-theme] body::before, [data-theme] .tray.mover .tray-head .name::before { animation: none !important; }
}