@charset "utf-8";
/* Magic: violet and gold, crystal dice, floating candles, an owl on the wing. */
:root[data-theme="magic"] {
  --bg: #170d2b; --panel: #251643; --ink: #f2e9ff; --muted: #b8a5d8; --line: #3e2a66;
  --accent: #e0b04a; --accent-ink: #1d1033; --mover: #33205a; --die: #9b6dff; --die-edge: #6a3fd6;
  --pip: #fff6d8; --held: #ffd76a; --field: #1e1236; --good: #9ff0b8; --bad: #ff9eb0;
  --title: #ffd76a; --title-font: "Cinzel Decorative", Georgia, serif; --name-font: "Cinzel Decorative", Georgia, serif;
  --mark: "🪄";
  --pattern:
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 255, 255, .55) 50%, transparent 52%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, .45) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 70px 150px, rgba(255, 215, 106, .6) 50%, transparent 52%),
    radial-gradient(ellipse at 15% 0%, #3b1f6b 0, transparent 60%),
    radial-gradient(ellipse at 90% 100%, #2b1450 0, transparent 60%);
  --pattern-size: 180px 180px, 180px 180px, 180px 180px, 100% 100%, 100% 100%;
}
[data-theme="magic"] h1 { font-size: 40px; text-shadow: 0 0 14px rgba(255, 215, 106, .55); }
[data-theme="magic"] .tray-head .name { font-size: 15px; }
[data-theme="magic"] .tray-head .total { color: #ffd76a; }
[data-theme="magic"] .sheet thead th { font-size: 12px; }
[data-theme="magic"] .die:not(.blank) {
  position: relative;
  background: linear-gradient(135deg, #e2d0ff 0%, #a77dff 42%, #6a3fd6 100%);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, .5), 0 2px 10px rgba(130, 70, 255, .35);
}
[data-theme="magic"] .pip { box-shadow: 0 0 4px #fff6d8; }
[data-theme="magic"] .die.held { box-shadow: 0 0 0 3px var(--held), 0 0 16px rgba(255, 215, 106, .7); }
[data-theme="magic"] .die.held::after { content: "✨"; position: absolute; top: -11px; right: -9px; font-size: 14px; animation: magic-twinkle 1.2s ease-in-out infinite; }
@keyframes magic-twinkle { 50% { transform: scale(1.35) rotate(20deg); opacity: .6; } }
[data-theme="magic"] .tray.mover { box-shadow: 0 0 22px rgba(160, 110, 255, .35); }
[data-theme="magic"] .ambient .a1, [data-theme="magic"] .ambient .a2 { display: block; font-size: 30px; animation: candle-float 7s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 190, 90, .8)); }
[data-theme="magic"] .ambient .a1 { left: 3%; top: 26%; }
[data-theme="magic"] .ambient .a2 { right: 4%; top: 48%; animation-delay: -3s; }
[data-theme="magic"] .ambient .a1::before, [data-theme="magic"] .ambient .a2::before { content: "🕯️"; }
@keyframes candle-float { 50% { transform: translateY(-16px) rotate(3deg); } }
[data-theme="magic"] .ambient .a3 { display: block; top: 12%; left: -60px; font-size: 32px; animation: owl-fly 26s linear infinite 5s; }
[data-theme="magic"] .ambient .a3::before { content: "🦉"; }
@keyframes owl-fly { 0% { transform: translate(0, 0); } 8% { transform: translate(30vw, -12px); } 16% { transform: translate(60vw, 10px); } 24%, 100% { transform: translate(112vw, -6px); } }
[data-theme="magic"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(2px 2px at 40px 60px, #ffe9a8 50%, transparent 52%), radial-gradient(1.5px 1.5px at 160px 20px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 110px 170px, #d9c2ff 50%, transparent 52%);
  background-size: 220px 220px; animation: magic-stars 4s ease-in-out infinite alternate;
}
@keyframes magic-stars { from { opacity: .2; } to { opacity: .9; } }