@charset "utf-8";
/* Birthday: a party — bunting and confetti, balloons rising, candle-topped dice. */
:root[data-theme="birthday"] {
  --bg: #fff4fb; --panel: #ffffff; --ink: #3b1f4a; --muted: #85699a; --line: #f2dcef;
  --accent: #8e44ad; --accent-ink: #ffffff; --mover: #fff6dc; --die: #ffffff; --die-edge: #e2b8f0;
  --pip: #8e44ad; --held: #ffb703; --field: #ffffff; --good: #1f9d6b; --bad: #e0475c;
  --title: #8e44ad; --title-font: "Pacifico", cursive; --name-font: "Fredoka", sans-serif;
  --font: "Fredoka", system-ui, sans-serif; --radius: 20px; --mark: "🎈";
  --pattern: radial-gradient(circle at 10px 10px, #ffd166 2.5px, transparent 3px), radial-gradient(circle at 30px 26px, #ff6fa8 2.5px, transparent 3px),
    radial-gradient(circle at 50px 12px, #4cc9f0 2.5px, transparent 3px), linear-gradient(#fff4fb, #fbeaff);
  --pattern-size: 60px 36px, 60px 36px, 60px 36px, 100% 100%;
}
[data-theme="birthday"] body { padding-top: 34px; }
[data-theme="birthday"] h1 { font-size: 44px; font-weight: 400; }
[data-theme="birthday"] .tray-head .name { font-weight: 600; }
[data-theme="birthday"] .tray-head .total { font-size: 27px; color: #8e44ad; }
[data-theme="birthday"] .card { border-width: 2px; box-shadow: 0 4px 0 #ecd4f5; }
[data-theme="birthday"] .die:not(.blank) { position: relative; border-width: 3px; }
[data-theme="birthday"] .die.held::after { content: "🕯️"; position: absolute; top: -18px; left: calc(50% - 8px); font-size: 15px; }
[data-theme="birthday"] .die.held { box-shadow: 0 0 0 3px var(--held); }
[data-theme="birthday"] button { border-radius: 999px; }
/* Bunting along the top. */
[data-theme="birthday"] body::before {
  content: ""; position: fixed; top: 0; left: -20px; right: -20px; height: 28px; z-index: 0; pointer-events: none;
  background:
    conic-gradient(from 150deg at 50% 0, #ff6fa8 0 60deg, transparent 0) 0 0 / 120px 28px,
    conic-gradient(from 150deg at 50% 0, #ffd166 0 60deg, transparent 0) 30px 0 / 120px 28px,
    conic-gradient(from 150deg at 50% 0, #4cc9f0 0 60deg, transparent 0) 60px 0 / 120px 28px,
    conic-gradient(from 150deg at 50% 0, #8e44ad 0 60deg, transparent 0) 90px 0 / 120px 28px;
  background-repeat: repeat-x; transform-origin: 50% 0; animation: bunting-b 5s ease-in-out infinite;
}
@keyframes bunting-b { 50% { transform: skewX(3deg); } }
[data-theme="birthday"] .ambient .a1, [data-theme="birthday"] .ambient .a2 { display: block; bottom: -60px; font-size: 40px; animation: party-balloon 20s linear infinite; }
[data-theme="birthday"] .ambient .a1 { left: 5%; }
[data-theme="birthday"] .ambient .a1::before { content: "🎈"; }
[data-theme="birthday"] .ambient .a2 { right: 6%; animation-delay: 9s; }
[data-theme="birthday"] .ambient .a2::before { content: "🎈"; display: inline-block; filter: hue-rotate(200deg); }
@keyframes party-balloon { 0% { transform: translate(0, 0) rotate(-5deg); } 50% { transform: translate(-20px, -60vh) rotate(5deg); } 100% { transform: translate(10px, -125vh); } }
[data-theme="birthday"] .ambient .a3 { display: block; bottom: 10px; left: 45%; font-size: 44px; }
[data-theme="birthday"] .ambient .a3::before { content: "🎂"; }