@charset "utf-8";
/* Easter: pale yellow, pastel egg dice, påskris in the corner, a hopping chick and an
   Easter witch on her broom. */
:root[data-theme="easter"] {
  --bg: #fff8d9; --panel: #ffffff; --ink: #3c4a26; --muted: #7f8b62; --line: #f0e3a8;
  --accent: #6aa83a; --accent-ink: #ffffff; --mover: #f4fbe6; --die: #ffffff; --die-edge: #e4d38a;
  --pip: #5a4a20; --held: #ffc93c; --field: #ffffff; --good: #4f8f2a; --bad: #d4553a;
  --title: #f2a01e; --title-font: "Chewy", "Comic Sans MS", cursive; --name-font: "Chewy", "Comic Sans MS", cursive;
  --radius: 20px; --mark: "🐣";
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='150'%3E%3Ctext x='14' y='40' font-size='18' opacity='.25'%3E🌷%3C/text%3E%3Ctext x='110' y='110' font-size='14' opacity='.22'%3E🥚%3C/text%3E%3C/svg%3E");
  --pattern-size: 180px 150px;
}
[data-theme="easter"] h1 { font-size: 46px; font-weight: 400; text-shadow: 2px 2px 0 #fff, 4px 4px 0 #f6d36b; }
[data-theme="easter"] .tray-head .name { font-size: 19px; font-weight: 400; }
[data-theme="easter"] .tray-head .total { font-size: 26px; font-weight: 400; color: #f2a01e; }
[data-theme="easter"] .card { border-width: 2px; box-shadow: 0 4px 0 #f3e4a5; }
[data-theme="easter"] .die:not(.blank) { border-radius: 46% 46% 40% 40% / 56% 56% 42% 42%; border-width: 2px; }
[data-theme="easter"] .die:not(.blank):nth-child(5n + 1) { --die: #ffd6e7; --die-edge: #f3a6c6; }
[data-theme="easter"] .die:not(.blank):nth-child(5n + 2) { --die: #d4ecff; --die-edge: #9cc9ef; }
[data-theme="easter"] .die:not(.blank):nth-child(5n + 3) { --die: #fff1a8; --die-edge: #ead36a; }
[data-theme="easter"] .die:not(.blank):nth-child(5n + 4) { --die: #d8f5c9; --die-edge: #a6d98c; }
[data-theme="easter"] .die:not(.blank):nth-child(5n + 5) { --die: #e8dcff; --die-edge: #c2aef0; }
[data-theme="easter"] .die.held { box-shadow: 0 0 0 3px var(--held); }
/* Påskris: birch twigs with coloured feathers, top right. */
[data-theme="easter"] body::before {
  content: ""; position: fixed; top: 0; right: 0; width: 170px; height: 170px; z-index: 0; pointer-events: none; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'%3E%3Cg stroke='%237a5a3a' stroke-width='2' fill='none'%3E%3Cpath d='M170 170L60 20M170 170L30 70M170 170L110 0M170 170L10 120'/%3E%3C/g%3E%3Cellipse cx='75' cy='40' rx='12' ry='5' fill='%23ff6fa8' transform='rotate(50 75 40)'/%3E%3Cellipse cx='48' cy='80' rx='12' ry='5' fill='%23ffd23f' transform='rotate(25 48 80)'/%3E%3Cellipse cx='115' cy='22' rx='12' ry='5' fill='%2366c2ff' transform='rotate(70 115 22)'/%3E%3Cellipse cx='30' cy='122' rx='12' ry='5' fill='%237ed957' transform='rotate(10 30 122)'/%3E%3Cellipse cx='95' cy='80' rx='10' ry='4' fill='%23b388ff' transform='rotate(45 95 80)'/%3E%3C/svg%3E") no-repeat;
  transform-origin: top right; animation: twig-sway 6s ease-in-out infinite;
}
@keyframes twig-sway { 50% { transform: rotate(-2deg); } }
[data-theme="easter"] .ambient .a1 { display: block; bottom: 8px; left: -50px; font-size: 32px; animation: chick-walk 20s linear infinite 2s; }
[data-theme="easter"] .ambient .a1::before { content: "🐥"; display: inline-block; animation: chick-hop .5s ease-in-out infinite; }
@keyframes chick-walk { 0% { transform: translateX(0); } 35%, 100% { transform: translateX(calc(100vw + 100px)); } }
@keyframes chick-hop { 50% { transform: translateY(-10px); } }
[data-theme="easter"] .ambient .a2 { display: block; top: 16%; right: -90px; font-size: 32px; animation: witch 30s linear infinite 8s; }
[data-theme="easter"] .ambient .a2::before { content: "🧙‍♀️🧹"; display: inline-block; }
@keyframes witch { 0% { transform: translate(0, 0); } 10% { transform: translate(-35vw, -20px); } 20% { transform: translate(-70vw, 15px); } 30%, 100% { transform: translate(calc(-100vw - 180px), -5px); } }
[data-theme="easter"] .ambient .a3 { display: block; top: -30px; left: 30%; font-size: 20px; animation: feather 14s ease-in-out infinite 4s; }
[data-theme="easter"] .ambient .a3::before { content: "🪶"; display: inline-block; filter: hue-rotate(260deg) saturate(2); }
@keyframes feather { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 5% { opacity: 1; } 50% { transform: translate(60px, 50vh) rotate(160deg); } 70%, 100% { transform: translate(-20px, 80vh) rotate(260deg); opacity: 0; } }