@charset "utf-8";
/* Disco: a mirror ball turning above a flashing dance floor, coloured spotlights sweeping
   the room, and silvery mirror-tile dice. */
:root[data-theme="disco"] {
  --bg: #120a1f; --panel: #1e1230; --ink: #fff0fb; --muted: #c6a8d8; --line: #3d2556;
  --accent: #ff3fa4; --accent-ink: #ffffff; --mover: #2c1a45; --die: #e9e9f2; --die-edge: #9a9ab8;
  --pip: #2a1640; --held: #ffd23f; --field: #170d27; --good: #5effc0; --bad: #ff6b8b;
  --title: #ff3fa4; --title-font: "Monoton", "Arial Black", sans-serif; --name-font: var(--font);
  --radius: 12px; --mark: "💃";
  --pattern: radial-gradient(ellipse 50% 35% at 50% 0%, #3a1d5c, transparent 70%), linear-gradient(#120a1f, #1a0d2e);
}
[data-theme="disco"] body { padding-top: 54px; }
[data-theme="disco"] h1 { font-size: 40px; font-weight: 400; letter-spacing: 1px; text-shadow: 0 0 10px #ff3fa4, 0 0 24px #9b5cff; }
[data-theme="disco"] h1 .icon { animation: ball-turn 4s linear infinite; }
[data-theme="disco"] .tray-head .total { color: #ffd23f; text-shadow: 0 0 8px rgba(255, 210, 63, .6); }
[data-theme="disco"] .card { box-shadow: 0 0 0 1px rgba(255, 63, 164, .35), 0 0 22px rgba(155, 92, 255, .2); }
[data-theme="disco"] .tray.mover { box-shadow: 0 0 0 2px #ff3fa4, 0 0 26px rgba(255, 63, 164, .45); }
/* Mirror-tile dice that catch the light. */
[data-theme="disco"] .die:not(.blank) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .7), transparent 40%, rgba(255, 255, 255, .35) 60%, transparent 75%),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(90, 90, 130, .35) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(90, 90, 130, .35) 7px 8px),
    linear-gradient(#f4f4fa, #c9c9dc);
  background-size: 300% 300%, auto, auto, auto;
  animation: glint 3s ease-in-out infinite;
}
@keyframes glint { 50% { background-position: 100% 100%, 0 0, 0 0, 0 0; } }
[data-theme="disco"] .die.held { box-shadow: 0 0 0 3px var(--held), 0 0 16px rgba(255, 210, 63, .8); }
/* The mirror ball, hanging at the top and turning. */
[data-theme="disco"] body::before {
  content: ""; position: fixed; top: 0; left: 50%; width: 2px; height: 26px; margin-left: -1px; background: #8a8aa0; z-index: 0; pointer-events: none;
}
[data-theme="disco"] .ambient .a1 {
  display: block; top: 22px; left: calc(50% - 26px); width: 52px; height: 52px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95) 0 4px, transparent 9px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(40, 40, 70, .45) 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(40, 40, 70, .45) 5px 6px),
    radial-gradient(circle at 40% 35%, #ffffff, #b8b8cc 55%, #6c6c88);
  box-shadow: 0 0 30px rgba(255, 255, 255, .45);
  animation: ball-spin 2.4s linear infinite;
}
@keyframes ball-spin { to { background-position: 0 0, 0 12px, 12px 0, 0 0; } }
@keyframes ball-turn { to { transform: rotate(360deg); } }
/* Spotlights sweeping the room. */
[data-theme="disco"] .ambient .a2, [data-theme="disco"] .ambient .a3 {
  display: block; top: 40px; width: 140px; height: 120vh; transform-origin: 50% 0; opacity: .22; filter: blur(2px);
}
[data-theme="disco"] .ambient .a2 { left: calc(50% - 70px); background: linear-gradient(rgba(255, 63, 164, .9), transparent 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); animation: sweep 6s ease-in-out infinite; }
[data-theme="disco"] .ambient .a3 { left: calc(50% - 70px); background: linear-gradient(rgba(63, 214, 255, .9), transparent 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); animation: sweep 7s ease-in-out infinite reverse; }
@keyframes sweep { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(35deg); } }
/* The dance floor, its tiles flashing. */
[data-theme="disco"] body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: 0; pointer-events: none; opacity: .55;
  background:
    linear-gradient(90deg, rgba(255, 63, 164, .8) 0 25%, rgba(155, 92, 255, .8) 25% 50%, rgba(63, 214, 255, .8) 50% 75%, rgba(255, 210, 63, .8) 75%) 0 0 / 160px 32px,
    linear-gradient(90deg, rgba(63, 214, 255, .8) 0 25%, rgba(255, 210, 63, .8) 25% 50%, rgba(255, 63, 164, .8) 50% 75%, rgba(155, 92, 255, .8) 75%) 0 32px / 160px 32px;
  background-repeat: repeat-x; animation: floor 1.2s steps(2) infinite;
}
@keyframes floor { 50% { filter: hue-rotate(180deg) brightness(1.3); } }
@media (max-width: 600px) {
  [data-theme="disco"] h1 { font-size: 30px; }
  [data-theme="disco"] body { padding-top: 46px; }
}