@charset "utf-8";
/* Circus: a big top of red and white stripes, bunting, a juggler, an elephant and a
   balloon floating up. */
:root[data-theme="circus"] {
  --bg: #fff6e8; --panel: #ffffff; --ink: #3a1a1a; --muted: #7d5555; --line: #f2d7cf;
  --accent: #d62839; --accent-ink: #ffffff; --mover: #fff1d6; --die: #ffffff; --die-edge: #d62839;
  --pip: #1d3557; --held: #ffc300; --field: #ffffff; --good: #2a7f3e; --bad: #d62839;
  --title: #d62839; --title-font: "Rye", Georgia, serif; --name-font: "Rye", Georgia, serif;
  --radius: 10px; --mark: "🎩";
  --pattern: repeating-linear-gradient(90deg, #fbe3dd 0 40px, #fff6e8 40px 80px);
}
[data-theme="circus"] body { padding-top: 40px; }
[data-theme="circus"] h1 { font-size: 40px; text-shadow: 2px 2px 0 #ffc300; }
[data-theme="circus"] .card { border: 3px solid #d62839; box-shadow: 0 4px 0 #a51d2b; }
[data-theme="circus"] .tray-head .name { font-size: 15px; }
[data-theme="circus"] .tray-head .total { font-size: 22px; color: #d62839; }
[data-theme="circus"] .sheet thead th { font-size: 12px; }
[data-theme="circus"] .die:not(.blank) { border-width: 3px; }
[data-theme="circus"] .die:not(.blank):nth-child(even) { --die-edge: #1d3557; }
[data-theme="circus"] .die.held { box-shadow: 0 0 0 3px var(--held); animation: juggle 1s ease-in-out infinite; }
@keyframes juggle { 50% { transform: translateY(-10px) rotate(8deg); } }
/* The big top's scalloped edge along the top. */
[data-theme="circus"] body::before {
  content: ""; position: fixed; top: 0; left: -20px; right: -20px; height: 34px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 20px 0, #d62839 20px, transparent 21px) 0 0 / 40px 34px repeat-x,
    radial-gradient(circle at 20px 0, #fff 20px, transparent 21px) 20px 0 / 40px 30px repeat-x;
}
[data-theme="circus"] .ambient .a1 { display: block; bottom: 10px; left: -80px; font-size: 46px; animation: parade 30s linear infinite 3s; }
[data-theme="circus"] .ambient .a1::before { content: "🐘"; display: inline-block; transform: scaleX(-1); animation: plod 1.2s ease-in-out infinite; }
@keyframes parade { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(calc(100vw + 160px)); } }
@keyframes plod { 50% { transform: scaleX(-1) translateY(-4px) rotate(3deg); } }
[data-theme="circus"] .ambient .a2 { display: block; top: 22%; right: 4%; font-size: 34px; animation: juggle 1.4s ease-in-out infinite; }
[data-theme="circus"] .ambient .a2::before { content: "🤹"; }
[data-theme="circus"] .ambient .a3 { display: block; bottom: -40px; left: 20%; font-size: 30px; animation: balloon-up 18s linear infinite 6s; }
[data-theme="circus"] .ambient .a3::before { content: "🎈"; }
@keyframes balloon-up { 0% { transform: translate(0, 0); } 50%, 100% { transform: translate(30px, -120vh); } }