/* Skins: the look of the whole app, set as data-skin on <html> (common.js applySkin).
   Pub is the chalkboard of style.css plus a few pub touches; Motorsport replaces
   slate, chalk and wood with a timing screen, carbon and racing colours. */

/* Shown by the Motorsport skin only: positions and lap-time colours (tv.js) */
.pos { display: none; }

/* ============================ Pub ============================ */
/* A brick wall behind the boards */
html[data-skin="pub"] body.tv {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(12, 22, 17, .55), rgba(8, 14, 11, .9) 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%232b1a14'/%3E%3Crect x='2' y='2' width='56' height='26' rx='2' fill='%23743a29'/%3E%3Crect x='62' y='2' width='56' height='26' rx='2' fill='%23803f2c'/%3E%3Crect x='-28' y='32' width='56' height='26' rx='2' fill='%236b3426'/%3E%3Crect x='32' y='32' width='56' height='26' rx='2' fill='%23773b2a'/%3E%3Crect x='92' y='32' width='56' height='26' rx='2' fill='%236b3426'/%3E%3C/svg%3E")
    0 0 / 14vh 7vh;
}

/* The three dart boxes as beer mats */
html[data-skin="pub"] .turnbar .dart {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .35), transparent 45%),
    repeating-radial-gradient(circle at 70% 80%, rgba(120, 80, 40, .05) 0 0.3vh, transparent 0.3vh 0.9vh),
    #eadcbc;
  border-radius: 2.4vh;
  box-shadow: inset 0 0 0 0.7vh #eadcbc, inset 0 0 0 1vh #9b2a22, 0 0.6vh 1.4vh rgba(0, 0, 0, .45);
  color: #3a2312;
}
html[data-skin="pub"] .turnbar .dart:nth-child(1) { transform: rotate(-1.2deg); }
html[data-skin="pub"] .turnbar .dart:nth-child(2) { transform: rotate(0.8deg); }
html[data-skin="pub"] .turnbar .dart:nth-child(3) { transform: rotate(-0.5deg); }
html[data-skin="pub"] .turnbar .dart small { color: #6d4a2a; }
html[data-skin="pub"] .turnbar .dart.empty { opacity: .75; }
html[data-skin="pub"] .turnbar .dart.suggest span, html[data-skin="pub"] .turnbar .dart.suggest small { color: #9b2a22; opacity: .85; }
html[data-skin="pub"] .turnbar .dart .add { color: #6d4a2a; }

/* New leg: a wet sponge wipes the board (tv.js wipeOnNewLeg) */
.sponge-wipe { position: fixed; z-index: 25; pointer-events: none; overflow: hidden; border-radius: 0.8vh; }
.sponge-wipe .wet {
  position: absolute; inset: 0; clip-path: inset(0 100% 0 0);
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 54, 46, .97), rgba(24, 33, 28, .98));
  animation: wet-in 1.1s ease-in-out forwards, wet-dry 0.9s ease-in 1.25s forwards;
}
.sponge-wipe .sponge {
  position: absolute; left: -16vh; top: 10%; width: 15vh; height: 9vh; border-radius: 2vh;
  background:
    radial-gradient(circle at 20% 30%, #c99a2a 0 0.6vh, transparent 0.7vh),
    radial-gradient(circle at 60% 60%, #c99a2a 0 0.8vh, transparent 0.9vh),
    radial-gradient(circle at 80% 25%, #c99a2a 0 0.5vh, transparent 0.6vh),
    radial-gradient(circle at 40% 80%, #c99a2a 0 0.5vh, transparent 0.6vh),
    linear-gradient(#f5cf55, #e3b23c);
  box-shadow: 0 1vh 2vh rgba(0, 0, 0, .5), inset 0 -1vh 0 #2f7a3d;
  animation: sponge-move 1.1s ease-in-out forwards, wet-dry 0.3s ease-in 1.1s forwards;
}
@keyframes wet-in { to { clip-path: inset(0 0 0 0); } }
@keyframes wet-dry { to { opacity: 0; } }
@keyframes sponge-move {
  0% { left: -16vh; top: 10%; transform: rotate(-10deg); }
  25% { top: 62%; transform: rotate(8deg); }
  50% { top: 14%; transform: rotate(-6deg); }
  75% { top: 66%; transform: rotate(10deg); }
  100% { left: 100%; top: 30%; transform: rotate(-4deg); }
}

/* ============================ Motorsport ============================ */
@font-face { font-family: "Racing"; src: url("/static/fonts/TitilliumWeb-Bold.ttf") format("truetype"); font-weight: 400 700; }
@font-face { font-family: "Racing"; src: url("/static/fonts/TitilliumWeb-Black.ttf") format("truetype"); font-weight: 800 900; }

html[data-skin="motorsport"] {
  --bg: #0d0e12; --panel: #16181e; --panel-2: #1f222a; --line: #2c303a;
  --text: #f4f5f7; --muted: #8e95a3; --accent: #e10600; --accent-text: #ffffff;
  --good: #00d26a; --bad: #ffd400;
  --b-edge: #0b0c0f; --b-dark: #1b1c20; --b-light: #ece3c8; --b-red: #d4202c;
  --b-green: #158a52; --b-wire: #b9bec7; --b-num: #f4f5f7;
  --chalk: #f4f5f7; --chalk-dim: rgba(244, 245, 247, .45); --chalk-yellow: #ffd400; --chalk-red: #ff5a4f;
  --purple: #b14dff;
}
html[data-skin="motorsport"] body { font-family: "Racing", "Segoe UI", sans-serif; }
/* carbon fibre */
html[data-skin="motorsport"] body.tv, html[data-skin="motorsport"] body.control, html[data-skin="motorsport"] body.settings {
  background-color: #131419;
  background-image:
    linear-gradient(27deg, #16171c 5px, transparent 5px), linear-gradient(207deg, #16171c 5px, transparent 5px),
    linear-gradient(27deg, #202229 5px, transparent 5px), linear-gradient(207deg, #202229 5px, transparent 5px),
    linear-gradient(90deg, #1a1b21 10px, transparent 10px),
    linear-gradient(#1c1d23 25%, #18191e 25%, #18191e 50%, transparent 50%, transparent 75%, #22242b 75%, #22242b);
  background-size: 20px 20px;
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
}
html[data-skin="motorsport"] .topbar { background: rgba(10, 11, 14, .85); border-bottom: 0.4vh solid var(--accent); }
html[data-skin="motorsport"] .topbar .title { font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
html[data-skin="motorsport"] .turnbar { background: rgba(10, 11, 14, .88); border-top: 0.4vh solid var(--accent); }

/* the board: a timing screen in a red/black livery instead of a slate in wood */
html[data-skin="motorsport"] .chalkboard {
  padding: 0.6vh; border-radius: 1vh;
  background: linear-gradient(120deg, var(--accent) 0 9%, #1b1d23 9% 91%, var(--accent) 91%);
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, .6);
}
html[data-skin="motorsport"] .slate {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 0.2vh, transparent 0.2vh 0.5vh),
    linear-gradient(180deg, #15171d, #0b0c10);
  font-family: "Racing", "Segoe UI", sans-serif; text-shadow: none; letter-spacing: .01em;
  box-shadow: inset 0 0 2vh rgba(0, 0, 0, .6);
}
html[data-skin="motorsport"] .chalk-name {
  font-style: italic; font-weight: 900; border-bottom: 0.4vh solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 1.2vh;
}
html[data-skin="motorsport"] .chalk-col.active .chalk-name { color: #fff; border-color: var(--accent); }
html[data-skin="motorsport"] .chalk-left { font-weight: 900; font-style: italic; letter-spacing: -.02em; }
html[data-skin="motorsport"] .chalk-col.active .chalk-left { color: var(--chalk-yellow); text-shadow: none; }
html[data-skin="motorsport"] .chalk-col + .chalk-col { border-left: 0.3vh solid var(--line); }
html[data-skin="motorsport"] .chalk-row .s { color: rgba(255, 212, 0, .8); border-right-color: var(--line); }
html[data-skin="motorsport"] .chalk-row.lap-pb .s { color: #00d26a; font-weight: 900; }
html[data-skin="motorsport"] .chalk-row.lap-best .s { color: var(--purple); font-weight: 900; }
html[data-skin="motorsport"] .chalk-row.bust .s { color: var(--chalk-red); }
html[data-skin="motorsport"] .chalk-row .l.old { color: var(--chalk-dim); }
html[data-skin="motorsport"] .q-row.next { border: 0; border-left: 0.6vh solid var(--accent); background: rgba(255, 255, 255, .05); border-radius: 0.4vh; }
html[data-skin="motorsport"] .q-name, html[data-skin="motorsport"] .q-main { font-style: italic; }
html[data-skin="motorsport"] .queue-list { border-right-color: var(--line); }
html[data-skin="motorsport"] .game-list li { line-height: 1.1; }
html[data-skin="motorsport"] .game-list.tight li b { font-size: 3vh; }
html[data-skin="motorsport"] .board-title { font-style: italic; font-weight: 900; text-transform: uppercase; border-bottom-color: var(--accent); }
html[data-skin="motorsport"] .chalk-table thead th.active { border-color: var(--accent); }

/* position on the timing tower: P1 white, gap in grey */
html[data-skin="motorsport"] .pos {
  display: inline-flex; align-items: baseline; gap: 0.6vh; padding: 0 1vh; border-radius: 0.5vh;
  background: #fff; color: #0d0e12; font-size: .62em; font-weight: 900; font-style: normal; line-height: 1.3;
}
html[data-skin="motorsport"] .pos small { color: #6b7280; font-size: .75em; }
html[data-skin="motorsport"] .q-name .pos { margin-right: 1vh; }

/* dart boxes as angled panels; the checkout route on a pit board */
html[data-skin="motorsport"] .turnbar .dart {
  border-radius: 0.6vh; border-left: 0.8vh solid var(--accent);
  background: linear-gradient(180deg, #23262e, #17191f);
}
html[data-skin="motorsport"] .dart span { font-style: italic; font-weight: 900; }
html[data-skin="motorsport"] .turnbar .dart.empty { border-left-color: var(--line); }
html[data-skin="motorsport"] .turnbar .dart.suggest {
  opacity: 1; background: #0b0b0b; border: 0.4vh solid var(--chalk-yellow); border-left-width: 0.4vh;
}
html[data-skin="motorsport"] .turnbar .dart.suggest span { color: var(--chalk-yellow); opacity: 1; }
html[data-skin="motorsport"] .turnbar .dart.suggest small { color: var(--chalk-yellow); opacity: .8; }
html[data-skin="motorsport"] .total { font-style: italic; font-weight: 900; }
html[data-skin="motorsport"] .winner-box { font-family: "Racing", "Segoe UI", sans-serif; }
html[data-skin="motorsport"] .winner-name { font-style: italic; font-weight: 900; text-shadow: 0 0 3vh rgba(255, 212, 0, .35); }
html[data-skin="motorsport"] .q-name .pos { font-size: .55em; }
/* a won match: the flag across the top, above the winner and the summary */
.celebrate.match .skin-banner { top: 2vh; }
html[data-skin="motorsport"] .top-call { font-family: "Racing", sans-serif; font-style: italic; font-weight: 900; }

/* Flags and sectors for the big moments (announce.js skinBanner) */
.skin-banner {
  position: absolute; left: 50%; top: 58vh; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 3vh; padding: 1.6vh 7vh;
  font-family: "Racing", "Segoe UI", sans-serif; font-style: italic; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, .6);
  animation: banner-in 0.5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.skin-banner b { font-size: 9vh; font-weight: 900; letter-spacing: .02em; }
.skin-banner span { font-size: 6vh; font-weight: 700; }
.skin-banner.purple { background: linear-gradient(100deg, #6c16c9, #a23dff); color: #fff; }
.skin-banner.yellow { background: #ffd400; color: #111; }
.skin-banner.chequered {
  background: repeating-conic-gradient(#111 0 25%, #f4f4f4 0 50%) 0 0 / 7vh 7vh;
  animation: banner-in 0.5s cubic-bezier(.2, 1.4, .4, 1) both, flag-wave 0.8s linear infinite;
}
.skin-banner.chequered b, .skin-banner.chequered span { background: rgba(10, 10, 12, .9); color: #fff; padding: 0 2vh; }
@keyframes banner-in { from { transform: translate(-50%, -30vh) skewX(-12deg); } to { transform: translateX(-50%); } }
@keyframes flag-wave { to { background-position: 7vh 0; } }

/* Start of a game: five red lights, then lights out (announce.js startLights) */
.start-lights {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; background: rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh;
  animation: lights-fade 0.5s ease 3.7s forwards;
}
.start-lights .gantry { display: flex; gap: 2vh; padding: 2vh; background: #0b0b0d; border-radius: 1.5vh; box-shadow: 0 2vh 4vh rgba(0, 0, 0, .7); }
.start-lights i { display: flex; flex-direction: column; gap: 1.5vh; padding: 1.5vh; background: #1c1d22; border-radius: 1vh; }
.start-lights b { width: 9vh; height: 9vh; border-radius: 50%; background: #2a0707; box-shadow: inset 0 0 2vh rgba(0, 0, 0, .8); }
.start-lights i:nth-child(1) b { animation: lamp 2.5s steps(1) 0s forwards; }
.start-lights i:nth-child(2) b { animation: lamp 2s steps(1) 0.5s forwards; }
.start-lights i:nth-child(3) b { animation: lamp 1.5s steps(1) 1s forwards; }
.start-lights i:nth-child(4) b { animation: lamp 1s steps(1) 1.5s forwards; }
.start-lights i:nth-child(5) b { animation: lamp 0.5s steps(1) 2s forwards; }
.start-lights .lights-out {
  font-family: "Racing", "Segoe UI", sans-serif; font-size: 10vh; font-weight: 900; font-style: italic; color: #fff;
  opacity: 0; animation: lights-text 0.3s ease 2.5s forwards;
}
@keyframes lamp {
  0% { background: #ff1a1a; box-shadow: 0 0 3vh #ff1a1a, inset 0 0 1vh #ff9b9b; }
  100% { background: #2a0707; box-shadow: inset 0 0 2vh rgba(0, 0, 0, .8); }
}
@keyframes lights-text { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes lights-fade { to { opacity: 0; } }

/* ============================ 80er (retro) ============================ */
@font-face { font-family: "Arcade"; src: url("/static/fonts/PressStart2P-Regular.ttf") format("truetype"); }
@font-face { font-family: "LCD"; src: url("/static/fonts/VT323-Regular.ttf") format("truetype"); }

html[data-skin="retro"] {
  --bg: #0b0221; --panel: #160636; --panel-2: #22094a; --line: #3d1670;
  --text: #f3eaff; --muted: #a58fd0; --accent: #ff2bd6; --accent-text: #160636;
  --good: #3dff8e; --bad: #ff4d6d;
  --b-edge: #07020f; --b-dark: #1d0b33; --b-light: #f1e3c8; --b-red: #ff2b6e;
  --b-green: #13c2c2; --b-wire: #8f6fd0; --b-num: #f3eaff;
  --chalk: #f1eaff; --chalk-dim: rgba(241, 234, 255, .5); --chalk-yellow: #5ff2ff; --chalk-red: #ff6b8b;
  --neon-pink: #ff2bd6; --neon-cyan: #22e1ff; --neon-yellow: #ffe14d;
}
/* a synthwave sky: dark purple, a striped sun on the horizon */
html[data-skin="retro"] {
  background:
    radial-gradient(ellipse 60% 30% at 50% 62%, rgba(255, 43, 214, .28), transparent 70%),
    linear-gradient(to bottom, #0b0221 0%, #1a0538 48%, #3a0c5c 62%, #0b0221 62.2%, #12032b 100%) fixed;
}
html[data-skin="retro"] body { background: transparent; }
html[data-skin="retro"] body.tv::before {
  content: ""; position: fixed; left: 50%; top: 28vh; width: 52vh; height: 34vh; transform: translateX(-50%);
  border-radius: 26vh 26vh 0 0; z-index: -1; opacity: .7;
  background: linear-gradient(#ffe14d, #ff8a2b 50%, #ff2bd6);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 50% 54%, #000 54% 64%, transparent 64% 69%,
                                       #000 69% 78%, transparent 78% 84%, #000 84% 91%, transparent 91%);
}
html[data-skin="retro"] .topbar { background: rgba(11, 2, 33, .85); border-bottom: 0.3vh solid var(--neon-pink); box-shadow: 0 0 1.5vh var(--neon-pink); }
html[data-skin="retro"] .topbar .title { font-family: "Arcade", monospace; font-size: 2vh; color: var(--neon-yellow); text-shadow: 0 0 1vh rgba(255, 225, 77, .6); }
html[data-skin="retro"] .turnbar { background: rgba(11, 2, 33, .88); border-top: 0.3vh solid var(--neon-cyan); box-shadow: 0 0 1.5vh var(--neon-cyan); }

/* the board: neon tubes around a dark screen with a glowing grid running to the horizon */
html[data-skin="retro"] .chalkboard {
  padding: 0.5vh; border-radius: 1.4vh; background: transparent;
  border: 0.35vh solid var(--neon-pink);
  box-shadow: 0 0 1.4vh var(--neon-pink), 0 0 4vh rgba(255, 43, 214, .35), inset 0 0 1.4vh rgba(255, 43, 214, .6);
}
html[data-skin="retro"] .home-board:nth-child(even) {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 1.4vh var(--neon-cyan), 0 0 4vh rgba(34, 225, 255, .3), inset 0 0 1.4vh rgba(34, 225, 255, .5);
}
html[data-skin="retro"] .slate {
  position: relative; isolation: isolate; border-radius: 1vh;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 0.25vh, transparent 0.25vh 0.5vh),
    linear-gradient(180deg, #120428 0%, #1d0640 70%, #2a0a52 100%);
  font-family: "LCD", monospace; text-shadow: 0 0 0.6vh rgba(241, 234, 255, .45);
}
html[data-skin="retro"] .slate::before {
  content: ""; position: absolute; left: -60%; right: -60%; bottom: 0; height: 45%; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 43, 214, .55) 0.25vh, transparent 0.25vh),
    linear-gradient(90deg, rgba(255, 43, 214, .55) 0.25vh, transparent 0.25vh);
  background-size: 7vh 5vh;
  transform: perspective(24vh) rotateX(62deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: grid-run 1.6s linear infinite;
}
@keyframes grid-run { to { background-position: 0 5vh; } }
html[data-skin="retro"] .game .slate::before { animation: none; }   /* still while playing: no load on the mini PC */
html[data-skin="retro"] .chalk-name, html[data-skin="retro"] .q-name, html[data-skin="retro"] .board-title,
html[data-skin="retro"] .chalk-table .name, html[data-skin="retro"] .grid-caption, html[data-skin="retro"] .bull-title {
  font-family: "Arcade", monospace; font-weight: 400; letter-spacing: 0;
}
html[data-skin="retro"] .chalk-name { font-size: 3vh; padding-bottom: 1vh; border-bottom: 0.3vh solid var(--chalk-dim); }
html[data-skin="retro"] .chalk-col.active .chalk-name { color: var(--neon-yellow); border-color: var(--neon-pink); text-shadow: 0 0 1vh rgba(255, 225, 77, .7); }
html[data-skin="retro"] .chalk-left { font-size: 20vh; font-weight: 400; line-height: .9; }
html[data-skin="retro"] .slate.n3 .chalk-left { font-size: 15vh; }
html[data-skin="retro"] .queue-main .chalk-left { font-size: 18vh; }
html[data-skin="retro"] .chalk-col.active .chalk-left {
  color: var(--chalk-yellow); text-shadow: 0 0 1vh var(--neon-cyan), 0 0 3vh var(--neon-cyan);
}
html[data-skin="retro"] .chalk-meta { font-size: 3vh; }
html[data-skin="retro"] .chalk-row { font-size: 4.6vh; line-height: 1; }
html[data-skin="retro"] .chalk-row .s { color: var(--neon-pink); text-shadow: 0 0 0.8vh rgba(255, 43, 214, .6); }
html[data-skin="retro"] .chalk-col + .chalk-col { border-left: 0.3vh solid rgba(34, 225, 255, .5); }
html[data-skin="retro"] .q-name { font-size: 2.2vh; }
html[data-skin="retro"] .q-main { font-size: 8vh; font-weight: 400; }
html[data-skin="retro"] .q-meta { font-size: 2.6vh; }
html[data-skin="retro"] .q-row.next { border-color: var(--neon-cyan); }
html[data-skin="retro"] .board-title { font-size: 3vh; color: var(--neon-yellow); border-bottom-color: var(--neon-pink); text-shadow: 0 0 1vh rgba(255, 225, 77, .6); }
html[data-skin="retro"] .game-list li b { font-size: 4.2vh; font-weight: 400; }
html[data-skin="retro"] .game-list.many li b { font-size: 3.4vh; }
html[data-skin="retro"] .game-list li span { font-size: 2.8vh; }
html[data-skin="retro"] .chalk-table td, html[data-skin="retro"] .chalk-table th.num { font-size: 4.4vh; }

/* dart boxes as arcade LCDs */
html[data-skin="retro"] .turnbar .dart {
  background: #0a0418; border: 0.3vh solid var(--neon-cyan); border-radius: 1vh;
  box-shadow: 0 0 1vh rgba(34, 225, 255, .5), inset 0 0 1.5vh rgba(34, 225, 255, .25);
}
html[data-skin="retro"] .dart span { font-family: "LCD", monospace; font-size: 11vh; font-weight: 400; color: var(--neon-yellow); text-shadow: 0 0 1vh rgba(255, 225, 77, .7); }
html[data-skin="retro"] .dart small { font-family: "LCD", monospace; font-size: 3.4vh; }
html[data-skin="retro"] .turnbar .dart.suggest span, html[data-skin="retro"] .turnbar .dart.suggest small { color: var(--neon-pink); }
html[data-skin="retro"] .total { font-family: "LCD", monospace; font-size: 13vh; font-weight: 400; color: var(--neon-pink); text-shadow: 0 0 1.2vh var(--neon-pink); }
html[data-skin="retro"] .top-call { font-family: "Arcade", monospace; font-size: 3.4vh; }
html[data-skin="retro"] .winner-box { font-family: "Arcade", monospace; }
html[data-skin="retro"] .winner-name { font-size: 10vh; text-shadow: 0 0 2vh var(--neon-pink); }
html[data-skin="retro"] .winner-screen.with-summary .winner-name { font-size: 8vh; }
html[data-skin="retro"] .winner-line { font-size: 3vh; }
html[data-skin="retro"] .summary-table { font-family: "LCD", monospace; }
html[data-skin="retro"] .summary-table th, html[data-skin="retro"] .summary-table td { font-size: 3.6vh; }

/* arcade screens for the big moments */
.skin-banner.arcade {
  clip-path: none; font-family: "Arcade", monospace; font-style: normal; flex-direction: column; align-items: center;
  gap: 2vh; padding: 3vh 6vh; border-radius: 1vh; background: rgba(11, 2, 33, .92);
  border: 0.4vh solid var(--neon-cyan, #22e1ff); box-shadow: 0 0 2vh #22e1ff, inset 0 0 2vh rgba(34, 225, 255, .4);
  animation: banner-in 0.4s steps(4) both;
}
.skin-banner.arcade b { font-size: 6.5vh; font-weight: 400; color: #ffe14d; text-shadow: 0.5vh 0.5vh 0 #ff2bd6, 0 0 2vh rgba(255, 225, 77, .7); }
.skin-banner.arcade span { font-size: 3.6vh; font-weight: 400; color: #5ff2ff; animation: blink 0.6s steps(1) infinite; }
.skin-banner.arcade.bad { border-color: #ff2b6e; box-shadow: 0 0 2vh #ff2b6e, inset 0 0 2vh rgba(255, 43, 110, .4); }
.skin-banner.arcade.bad b { color: #ff6b8b; text-shadow: 0.5vh 0.5vh 0 #3a0c5c; }
@keyframes blink { 50% { opacity: 0; } }
.arcade-start {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; background: rgba(11, 2, 33, .6);
  display: flex; align-items: center; justify-content: center; font-family: "Arcade", monospace;
  animation: lights-fade 0.4s ease 2.3s forwards;
}
.arcade-start b { position: absolute; font-weight: 400; font-size: 9vh; color: #ffe14d; text-shadow: 0.7vh 0.7vh 0 #ff2bd6, 0 0 3vh rgba(255, 225, 77, .7); }
.arcade-start .ready { animation: ready-blink 0.5s linear 3, ready-off 0.01s 1.5s forwards; }
@keyframes ready-blink { 0%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
.arcade-start .go { opacity: 0; font-size: 16vh; color: #5ff2ff; text-shadow: 0.8vh 0.8vh 0 #ff2bd6, 0 0 4vh #22e1ff; animation: go-in 0.3s steps(3) 1.5s forwards; }
@keyframes ready-off { to { opacity: 0; } }
@keyframes go-in { from { opacity: 1; transform: scale(.3); } to { opacity: 1; transform: none; } }
.skin-preview.retro .sample {
  background: linear-gradient(180deg, #120428, #2a0a52); border: 3px solid #ff2bd6; box-shadow: inset 0 0 10px #ff2bd6;
  font-family: "LCD", monospace; color: #f1eaff;
}
.skin-preview.retro .sample b { color: #5ff2ff; font-size: 44px; font-weight: 400; text-shadow: 0 0 8px #22e1ff; }
.skin-preview.retro .sample small { font-family: "Arcade", monospace; font-size: 10px; color: #ffe14d; }

/* ============================ Halloween ============================ */
@font-face { font-family: "Creepy"; src: url("/static/fonts/Creepster-Regular.ttf") format("truetype"); }

html[data-skin="halloween"] {
  --bg: #0e0812; --panel: #1a1020; --panel-2: #26172e; --line: #3a2444;
  --text: #f6ecdf; --muted: #b49cb8; --accent: #ff7a1a; --accent-text: #1a0d05;
  --good: #7dff4d; --bad: #ff4d4d;
  --b-edge: #0a060c; --b-dark: #1d1420; --b-light: #f2e2c4; --b-red: #e2551a;
  --b-green: #5a2d82; --b-wire: #8a6a8a; --b-num: #f6ecdf;
  --chalk: #f3ecde; --chalk-dim: rgba(243, 236, 222, .5); --chalk-yellow: #ff9a3c; --chalk-red: #ff6a6a;
  /* night sky with a full moon */
  background:
    radial-gradient(circle at 88% 12%, #fff6d0 0 5.5vh, rgba(255, 246, 208, .22) 6vh, transparent 16vh),
    radial-gradient(ellipse 80% 30% at 50% 105%, rgba(255, 122, 26, .22), transparent 70%),
    linear-gradient(180deg, #0b0610 0%, #1c0f29 55%, #2a1230 100%) fixed;
}
html[data-skin="halloween"] body { background: transparent; }
html[data-skin="halloween"] .topbar { background: rgba(14, 8, 18, .85); border-bottom: 0.3vh solid #5a2d82; }
html[data-skin="halloween"] .turnbar { background: rgba(14, 8, 18, .88); border-top: 0.3vh solid #5a2d82; }
/* old dark wood with cobwebs in the top corners */
html[data-skin="halloween"] .chalkboard {
  position: relative;
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, .15) 0 0.5vh, rgba(255, 255, 255, .02) 0.5vh 1.4vh),
              linear-gradient(135deg, #3b2a35, #24171f 50%, #34222d);
  box-shadow: 0 0 3vh rgba(139, 61, 255, .35), 0 1vh 3vh rgba(0, 0, 0, .6);
}
html[data-skin="halloween"] .chalkboard::before, html[data-skin="halloween"] .chalkboard::after {
  content: ""; position: absolute; top: 0; width: 14vh; height: 14vh; z-index: 3; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='rgba(235,232,245,.6)' stroke-width='1.1'><path d='M0 0 L100 32 M0 0 L82 82 M0 0 L32 100'/><path d='M24 0 Q21 9 24 15 Q16 19 15 24 Q8 21 0 24'/><path d='M50 0 Q46 18 52 32 Q36 38 32 52 Q18 47 0 50'/><path d='M76 0 Q71 27 79 48 Q57 58 50 79 Q27 73 0 76'/><path d='M62 60 L62 80'/></g><circle cx='62' cy='84' r='4.5' fill='%23120a14'/><path d='M57 81 l-4 -3 M57 85 l-5 1 M67 81 l4 -3 M67 85 l5 1' stroke='%23120a14' stroke-width='1.4'/></svg>")
    no-repeat 0 0 / contain;
}
html[data-skin="halloween"] .home-board.chalkboard::before, html[data-skin="halloween"] .home-board.chalkboard::after { width: 8vh; height: 8vh; opacity: .8; }
html[data-skin="halloween"] .chalkboard::before { left: 0; }
html[data-skin="halloween"] .chalkboard::after { right: 0; transform: scaleX(-1); }
html[data-skin="halloween"] .slate {
  background:
    radial-gradient(ellipse at 50% 115%, rgba(255, 122, 26, .22), transparent 60%),
    radial-gradient(ellipse at 50% 40%, #241a29 0%, #18111c 70%, #120c15 100%);
  text-shadow: 0 0 0.4vh rgba(255, 154, 60, .35);
}
html[data-skin="halloween"] .chalk-name, html[data-skin="halloween"] .q-name, html[data-skin="halloween"] .board-title,
html[data-skin="halloween"] .chalk-table .name, html[data-skin="halloween"] .grid-caption, html[data-skin="halloween"] .bull-title {
  font-family: "Creepy", "Chalk", cursive; font-weight: 400; letter-spacing: .06em;
}
html[data-skin="halloween"] .chalk-name { color: #ffb36b; }
html[data-skin="halloween"] .chalk-col.active .chalk-name { color: #7dff4d; border-color: #7dff4d; text-shadow: 0 0 1.2vh rgba(125, 255, 77, .6); }
html[data-skin="halloween"] .chalk-col.active .chalk-left { color: var(--chalk-yellow); text-shadow: 0 0 1.5vh rgba(255, 122, 26, .7); }
html[data-skin="halloween"] .board-title { color: #ff7a1a; border-bottom-color: #5a2d82; font-size: 5vh; }
html[data-skin="halloween"] .game-list li b { font-family: "Chalk", cursive; }
/* the dart boxes as gravestones */
html[data-skin="halloween"] .turnbar .dart {
  border-radius: 45% 45% 1vh 1vh / 35% 35% 1vh 1vh;
  background: linear-gradient(180deg, #6a6470, #46404d 60%, #35303b);
  box-shadow: inset 0 0.6vh 0 rgba(255, 255, 255, .12), 0 0.8vh 0 #241d28;
  color: #ece6da;
}
html[data-skin="halloween"] .turnbar .dart span { font-family: "Creepy", "Chalk", cursive; font-weight: 400; letter-spacing: .04em; }
html[data-skin="halloween"] .turnbar .dart small { color: #c9c0cf; }
html[data-skin="halloween"] .turnbar .dart.suggest span, html[data-skin="halloween"] .turnbar .dart.suggest small { color: #ffb36b; }
html[data-skin="halloween"] .winner-box { font-family: "Creepy", "Chalk", cursive; }
html[data-skin="halloween"] .winner-name { color: #ff7a1a; text-shadow: 0 0 3vh rgba(125, 255, 77, .45); letter-spacing: .05em; }
.skin-banner.spooky {
  clip-path: none; font-family: "Creepy", "Chalk", cursive; font-style: normal; flex-direction: column; align-items: center;
  gap: 1vh; padding: 2vh 6vh; border-radius: 2vh; background: rgba(20, 10, 25, .9);
  border: 0.4vh solid #8b3dff; box-shadow: 0 0 3vh rgba(139, 61, 255, .7);
}
.skin-banner.spooky b { font-size: 10vh; font-weight: 400; color: #ff7a1a; letter-spacing: .05em; text-shadow: 0 0.6vh 0 #3b1600, 0 0 2vh rgba(125, 255, 77, .5); }
.skin-banner.spooky span { font-size: 4.5vh; color: #7dff4d; font-weight: 400; }
.skin-banner.spooky.bad b { color: #e9e4f0; text-shadow: 0 0 2.5vh #8b3dff; }
.celebrate .bat { position: absolute; left: -10vw; font-family: "Segoe UI Emoji", sans-serif; animation: bat-fly 2.6s linear both; }
@keyframes bat-fly {
  0% { transform: translate(0, 0) scaleY(1); }
  25% { transform: translate(32vw, -6vh) scaleY(.6); }
  50% { transform: translate(64vw, 4vh) scaleY(1); }
  75% { transform: translate(96vw, -5vh) scaleY(.6); }
  100% { transform: translate(125vw, 2vh) scaleY(1); }
}
.spooky-start {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; background: rgba(10, 5, 14, .6); overflow: hidden;
  display: flex; align-items: center; justify-content: center; animation: lights-fade 0.5s ease 2.7s forwards;
}
.spooky-start b {
  font-family: "Creepy", cursive; font-weight: 400; font-size: 11vh; color: #ff7a1a; letter-spacing: .05em;
  text-shadow: 0 0.8vh 0 #3b1600, 0 0 3vh rgba(125, 255, 77, .5); opacity: 0; animation: lights-text 0.6s ease 0.9s forwards;
}
.spooky-start .ghost { position: absolute; top: 20vh; left: -20vh; font-size: 22vh; opacity: .85; font-family: "Segoe UI Emoji", sans-serif; animation: ghost-fly 2.6s ease-in-out forwards; }
.spooky-start .bat { position: absolute; left: -10vw; font-size: 6vh; font-family: "Segoe UI Emoji", sans-serif; animation: bat-fly 2.2s linear both; }
.spooky-start .bat:nth-of-type(2) { top: 12vh; animation-delay: .1s; }
.spooky-start .bat:nth-of-type(3) { top: 28vh; animation-delay: .4s; }
.spooky-start .bat:nth-of-type(4) { top: 62vh; animation-delay: .2s; }
.spooky-start .bat:nth-of-type(5) { top: 74vh; animation-delay: .6s; }
.spooky-start .bat:nth-of-type(6) { top: 45vh; animation-delay: .8s; }
@keyframes ghost-fly { 0% { transform: translate(0, 0); } 50% { transform: translate(60vw, -6vh); } 100% { transform: translate(130vw, 4vh); opacity: 0; } }
.skin-preview.halloween .sample { background: radial-gradient(ellipse at 50% 110%, rgba(255, 122, 26, .35), #18111c 70%); border: 5px solid #3b2a35; font-family: "Creepy", cursive; color: #f3ecde; }
.skin-preview.halloween .sample b { color: #ff7a1a; font-size: 40px; font-weight: 400; }
.skin-preview.halloween .sample small { color: #7dff4d; }

/* ============================ Party ============================ */
@font-face { font-family: "Jukebox"; src: url("/static/fonts/Monoton-Regular.ttf") format("truetype"); }
@font-face { font-family: "Groove"; src: url("/static/fonts/Righteous-Regular.ttf") format("truetype"); }

html[data-skin="party"] {
  --bg: #0c0716; --panel: #170f26; --panel-2: #221637; --line: #36245a;
  --text: #fff7ff; --muted: #b9a6d9; --accent: #ffcc33; --accent-text: #2a1a00;
  --good: #3dff8e; --bad: #ff4d6d;
  --b-edge: #090512; --b-dark: #1b1230; --b-light: #f5e9d6; --b-red: #ff3d9a;
  --b-green: #22b8ff; --b-wire: #a08ad0; --b-num: #fff7ff;
  --chalk: #fff7ff; --chalk-dim: rgba(255, 247, 255, .5); --chalk-yellow: #ffcc33; --chalk-red: #ff6b8b;
  /* spotlights from above */
  background:
    conic-gradient(from 150deg at 12% -6%, transparent 0deg 8deg, rgba(255, 95, 210, .2) 8deg 20deg, transparent 20deg),
    conic-gradient(from 185deg at 88% -6%, transparent 0deg 8deg, rgba(34, 225, 255, .18) 8deg 20deg, transparent 20deg),
    conic-gradient(from 168deg at 50% -8%, transparent 0deg 10deg, rgba(255, 204, 51, .14) 10deg 22deg, transparent 22deg),
    linear-gradient(180deg, #0c0716, #1a0d2e) fixed;
}
html[data-skin="party"] body { background: transparent; font-family: "Groove", "Segoe UI", sans-serif; }
html[data-skin="party"] .topbar { background: rgba(12, 7, 22, .85); border-bottom: 0.3vh solid #ffcc33; }
html[data-skin="party"] .turnbar { background: rgba(12, 7, 22, .88); border-top: 0.3vh solid #ff5fd2; }
/* chrome like a jukebox */
html[data-skin="party"] .chalkboard {
  padding: 0.9vh; border-radius: 2vh;
  background: linear-gradient(135deg, #f4f5f9, #9aa0aa 28%, #ffffff 48%, #8a8f99 70%, #e6e8ee);
  box-shadow: 0 0 2.5vh rgba(255, 95, 210, .4), 0 1vh 3vh rgba(0, 0, 0, .6);
}
html[data-skin="party"] .slate {
  position: relative; isolation: isolate; border-radius: 1.3vh;
  background: radial-gradient(ellipse at 50% 0%, #3a1b5e, #1a0d2e 60%, #120922 100%);
  font-family: "Groove", "Segoe UI", sans-serif; text-shadow: 0 0 0.6vh rgba(255, 255, 255, .25);
}
/* a lit dance floor at the bottom of every board */
html[data-skin="party"] .slate::before {
  content: ""; position: absolute; left: -40%; right: -40%; bottom: 0; height: 40%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 95, 210, .45) 0 25%, rgba(34, 225, 255, .35) 0 50%) 0 0 / 9vh 9vh;
  transform: perspective(26vh) rotateX(58deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 90%);
  animation: floor-glow 2.4s steps(2) infinite;
}
@keyframes floor-glow { 50% { filter: hue-rotate(120deg); } }
html[data-skin="party"] .game .slate::before { animation: none; }
html[data-skin="party"] .board-title { font-family: "Jukebox", "Groove", sans-serif; font-weight: 400; color: #ffcc33; border-bottom-color: #ff5fd2; text-shadow: 0 0 1.2vh rgba(255, 204, 51, .6); }
html[data-skin="party"] .chalk-name { font-weight: 400; }
html[data-skin="party"] .chalk-col.active .chalk-name { color: #ffcc33; border-color: #ff5fd2; }
html[data-skin="party"] .chalk-left { font-weight: 400; }
html[data-skin="party"] .chalk-col.active .chalk-left { color: #ffcc33; text-shadow: 0 0 1.4vh #ff5fd2, 0 0 3vh rgba(255, 95, 210, .6); }
html[data-skin="party"] .chalk-row .s { color: #5ff2ff; }
html[data-skin="party"] .turnbar .dart {
  border-radius: 2vh; background: radial-gradient(circle at 50% 120%, #3a1b5e, #170f26 70%);
  border: 0.3vh solid #ffcc33; box-shadow: 0 0 1.2vh rgba(255, 204, 51, .45);
}
html[data-skin="party"] .dart span { font-weight: 400; color: #fff; text-shadow: 0 0 1vh #ff5fd2; }
html[data-skin="party"] .winner-box { font-family: "Groove", sans-serif; }
html[data-skin="party"] .winner-name { color: #ffcc33; text-shadow: 0 0 2vh #ff5fd2, 0 0 5vh rgba(34, 225, 255, .5); }
.skin-banner.party {
  clip-path: none; font-family: "Jukebox", "Groove", sans-serif; font-style: normal; flex-direction: column; align-items: center;
  gap: 1.5vh; padding: 2.5vh 6vh; border-radius: 3vh; background: rgba(23, 15, 38, .92);
  border: 0.5vh solid #ff5fd2; box-shadow: 0 0 2.5vh #ff5fd2, 0 0 5vh rgba(34, 225, 255, .4);
  animation: banner-in 0.5s cubic-bezier(.2, 1.4, .4, 1) both, party-border 0.8s steps(1) infinite;
}
.skin-banner.party b { font-size: 8vh; font-weight: 400; color: #ffcc33; text-shadow: 0 0 1.5vh #ff5fd2; }
.skin-banner.party span { font-family: "Groove", sans-serif; font-size: 4vh; color: #5ff2ff; }
.skin-banner.party.bad b { color: #ff6b8b; }
@keyframes party-border { 33% { border-color: #22e1ff; } 66% { border-color: #ffcc33; } }
.party-start {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; background: rgba(12, 7, 22, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh;
  animation: lights-fade 0.5s ease 2.5s forwards;
}
.party-start b { font-family: "Jukebox", sans-serif; font-weight: 400; font-size: 12vh; color: #ffcc33; text-shadow: 0 0 2vh #ff5fd2; opacity: 0; animation: lights-text 0.4s ease 0.8s forwards, party-flash 0.4s steps(1) 1.2s 4; }
@keyframes party-flash { 50% { color: #5ff2ff; text-shadow: 0 0 2vh #22e1ff; } }
.disco-ball {
  width: 22vh; height: 22vh; border-radius: 50%; animation: ball-drop 0.8s cubic-bezier(.3, 1.4, .5, 1) both, ball-spin 1.2s linear infinite;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95) 0 6%, transparent 22%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 0.25vh, transparent 0.25vh 2.2vh),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 0.25vh, transparent 0.25vh 2.2vh),
    radial-gradient(circle at 40% 35%, #f4f6fa, #9aa0aa 60%, #50545c);
  box-shadow: 0 0 4vh rgba(255, 255, 255, .5), 0 0 8vh rgba(255, 95, 210, .5);
}
@keyframes ball-drop { from { transform: translateY(-60vh); } to { transform: none; } }
@keyframes ball-spin { to { background-position: 0 0, 0 0, 2.2vh 0, 0 0; } }
.skin-preview.party .sample { background: radial-gradient(ellipse at 50% 0%, #3a1b5e, #120922); border: 5px solid #c9ced6; font-family: "Groove", sans-serif; color: #fff; }
.skin-preview.party .sample b { color: #ffcc33; font-size: 38px; font-weight: 400; text-shadow: 0 0 8px #ff5fd2; }
.skin-preview.party .sample small { color: #5ff2ff; }

/* ============================ Ocean ============================ */
@font-face { font-family: "Ahoy"; src: url("/static/fonts/PirataOne-Regular.ttf") format("truetype"); }

html[data-skin="ocean"] {
  --bg: #031a2b; --panel: #062a40; --panel-2: #0a3a56; --line: #145273;
  --text: #e8f8ff; --muted: #8fc1d6; --accent: #ff7f50; --accent-text: #2b0e00;
  --good: #3dffc1; --bad: #ff6b6b;
  --b-edge: #02121e; --b-dark: #0c2534; --b-light: #efe2c2; --b-red: #e8564a;
  --b-green: #1fa59a; --b-wire: #8fb7c8; --b-num: #e8f8ff;
  --chalk: #f2fbff; --chalk-dim: rgba(242, 251, 255, .5); --chalk-yellow: #ffd36b; --chalk-red: #ff8a7a;
  /* under water: light rays from the surface */
  background:
    repeating-conic-gradient(from 165deg at 50% -25%, rgba(255, 255, 255, .06) 0deg 2.5deg, transparent 2.5deg 8deg),
    linear-gradient(180deg, #0b5e86 0%, #063d5c 38%, #031a2b 100%) fixed;
}
html[data-skin="ocean"] body { background: transparent; }
html[data-skin="ocean"] .topbar { background: rgba(3, 26, 43, .8); border-bottom: 0.3vh solid #c8a24a; }
html[data-skin="ocean"] .turnbar { background: rgba(3, 26, 43, .85); border-top: 0.3vh solid #c8a24a; }
/* a ship's slate framed with rope */
html[data-skin="ocean"] .chalkboard {
  padding: 1.1vh; border-radius: 1.8vh;
  background: repeating-linear-gradient(45deg, #e0c48a 0 0.7vh, #a9834c 0.7vh 1.4vh);
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, .5), inset 0 0 0.6vh rgba(0, 0, 0, .5);
}
html[data-skin="ocean"] .slate {
  background:
    radial-gradient(ellipse 50% 30% at 25% 15%, rgba(140, 225, 255, .12), transparent 70%),
    radial-gradient(ellipse 40% 25% at 75% 70%, rgba(140, 225, 255, .08), transparent 70%),
    linear-gradient(180deg, #0d4560, #072b3c);
}
html[data-skin="ocean"] .chalk-name, html[data-skin="ocean"] .q-name, html[data-skin="ocean"] .board-title,
html[data-skin="ocean"] .chalk-table .name, html[data-skin="ocean"] .grid-caption, html[data-skin="ocean"] .bull-title {
  font-family: "Ahoy", "Chalk", serif; font-weight: 400; letter-spacing: .03em;
}
html[data-skin="ocean"] .chalk-name { text-transform: none; font-size: 5.6vh; color: #ffe2a0; }
html[data-skin="ocean"] .chalk-col.active .chalk-name { color: #ffd36b; border-color: #ffd36b; }
html[data-skin="ocean"] .chalk-col.active .chalk-left { color: #ffd36b; text-shadow: 0 0 1.4vh rgba(255, 211, 107, .4); }
html[data-skin="ocean"] .board-title { font-size: 5.4vh; color: #ffd36b; border-bottom-color: #c8a24a; }
/* brass portholes */
html[data-skin="ocean"] .turnbar .dart {
  border-radius: 4vh; border: 0.7vh solid #c8a24a;
  background: radial-gradient(ellipse at 35% 30%, rgba(160, 230, 255, .35), transparent 50%), radial-gradient(circle, #0d4c6b, #062a40);
  box-shadow: inset 0 0 1.5vh rgba(0, 0, 0, .6), 0 0 0 0.3vh #7a5c22;
}
html[data-skin="ocean"] .turnbar .dart.suggest span, html[data-skin="ocean"] .turnbar .dart.suggest small { color: #ffd36b; }
html[data-skin="ocean"] .winner-box { font-family: "Ahoy", "Chalk", serif; }
html[data-skin="ocean"] .winner-name { color: #ffd36b; text-shadow: 0 0 3vh rgba(95, 210, 255, .5); }
/* rising bubbles on the home screen (not during a game) */
html[data-skin="ocean"] body.tv:has(.home)::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 10% 50%, rgba(220, 245, 255, .35) 0 0.6vh, transparent 0.8vh),
    radial-gradient(circle at 30% 70%, rgba(220, 245, 255, .3) 0 1vh, transparent 1.2vh),
    radial-gradient(circle at 55% 40%, rgba(220, 245, 255, .3) 0 0.5vh, transparent 0.7vh),
    radial-gradient(circle at 75% 80%, rgba(220, 245, 255, .35) 0 0.9vh, transparent 1.1vh),
    radial-gradient(circle at 92% 30%, rgba(220, 245, 255, .3) 0 0.7vh, transparent 0.9vh);
  background-size: 100% 60vh;
  animation: bubbles-rise 9s linear infinite;
}
@keyframes bubbles-rise { to { background-position: 0 -60vh; } }
.skin-banner.ocean {
  clip-path: none; font-family: "Ahoy", "Chalk", serif; font-style: normal; flex-direction: column; align-items: center;
  gap: 1vh; padding: 2vh 7vh; border-radius: 2vh; background: rgba(3, 26, 43, .9);
  border: 0.6vh solid #c8a24a; box-shadow: 0 0 0 0.4vh #7a5c22, 0 1vh 3vh rgba(0, 0, 0, .6);
  animation: banner-in 0.5s cubic-bezier(.2, 1.4, .4, 1) both, bob 2s ease-in-out 0.5s infinite;
}
.skin-banner.ocean b { font-size: 10vh; font-weight: 400; color: #ffd36b; text-shadow: 0 0.5vh 0 #3a2a08; }
.skin-banner.ocean span { font-size: 5vh; color: #9fe3ff; }
.skin-banner.ocean.bad b { color: #ff8a7a; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-1.2vh) rotate(-1deg); } }
.ocean-start {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center; animation: lights-fade 0.5s ease 2.5s forwards;
}
.ocean-start .swell {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 120%; transform: translateY(100%);
  background:
    radial-gradient(ellipse 8% 3vh at 50% 0, transparent 98%, #0b5e86 100%) 0 0 / 16vw 6vh repeat-x,
    linear-gradient(180deg, rgba(11, 94, 134, .92), rgba(3, 26, 43, .95) 40%);
  animation: swell-up 1.2s ease-out forwards, swell-down 0.8s ease-in 2s forwards;
}
@keyframes swell-up { to { transform: translateY(15%); } }
@keyframes swell-down { from { transform: translateY(15%); } to { transform: translateY(100%); } }
.ocean-start b { position: relative; font-family: "Ahoy", serif; font-weight: 400; font-size: 13vh; color: #ffd36b; text-shadow: 0 0.6vh 0 #3a2a08; opacity: 0; animation: lights-text 0.5s ease 0.9s forwards; }
.skin-preview.ocean .sample { background: linear-gradient(180deg, #0d4560, #072b3c); border: 5px solid #c8a24a; font-family: "Ahoy", serif; color: #f2fbff; }
.skin-preview.ocean .sample b { color: #ffd36b; font-size: 40px; font-weight: 400; }
.skin-preview.ocean .sample small { color: #9fe3ff; }

/* ============================ the players' board, per skin ============================ */
/* those playing get the wider column; the skins' little signs stay small */
.roster-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.roster-col h3 { overflow-wrap: anywhere; line-height: 1.1; }
.person { min-width: 0; }
.person::after { flex: none; font-size: .7em; }
.roster .person { font-size: 2.6vh; padding: 0.5vh 0.8vh; gap: 0.8vh; }
.roster .person .avatar { font-size: 2.8vh; }
/* Motorsport: the starting grid (P1, P2 … staggered) and the pit lane */
html[data-skin="motorsport"] .roster-col[data-present="1"] .drop { counter-reset: grid; }
html[data-skin="motorsport"] .roster-col[data-present="1"] .person {
  font-size: 2.3vh; gap: 0.6vh;
  counter-increment: grid; border: 0; border-left: 0.6vh solid var(--accent); border-radius: 0.4vh;
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); font-style: italic;
}
html[data-skin="motorsport"] .roster-col[data-present="1"] .person::before {
  content: "P" counter(grid); font-family: "Racing", sans-serif; font-weight: 900; font-style: normal; font-size: 1.7vh;
  background: #fff; color: #0d0e12; padding: 0 0.6vh; border-radius: 0.4vh;
}
html[data-skin="motorsport"] .roster-col.away {
  background: repeating-linear-gradient(180deg, transparent 0 3vh, rgba(255, 212, 0, .5) 3vh 3.4vh) 0.3vh 0 / 0.4vh 100% no-repeat,
              rgba(255, 255, 255, .03);
  border-left: 0; padding-left: 1.6vh;
}
html[data-skin="motorsport"] .roster-col.away .person { opacity: .6; filter: none; border-color: var(--line); }
html[data-skin="motorsport"] .roster-col h3 { font-style: italic; text-transform: uppercase; letter-spacing: .02em; font-size: 2.3vh; }
/* 80s: player select */
html[data-skin="retro"] .roster-col h3 { font-family: "Arcade", monospace; font-size: 2vh; font-weight: 400; color: var(--neon-cyan); }
html[data-skin="retro"] .roster-col.away h3 { color: var(--neon-pink); animation: blink 1s steps(1) infinite; }
html[data-skin="retro"] .roster-col[data-present="1"] .person { border-color: var(--neon-cyan); box-shadow: 0 0 1vh rgba(34, 225, 255, .4); }
html[data-skin="retro"] .person b { font-family: "LCD", monospace; font-weight: 400; font-size: 3.6vh; }
/* Halloween: the absent rest under little gravestones */
html[data-skin="halloween"] .roster-col h3 { font-family: "Creepy", cursive; font-weight: 400; color: #7dff4d; letter-spacing: .05em; }
html[data-skin="halloween"] .roster-col.away h3 { color: #b49cb8; }
html[data-skin="halloween"] .roster-col.away .person {
  border-radius: 40% 40% 0.6vh 0.6vh / 50% 50% 0.6vh 0.6vh; background: linear-gradient(#5a5460, #3a3540); border: 0; filter: none; opacity: .7;
}
html[data-skin="halloween"] .roster-col[data-present="1"] .person { border-color: rgba(255, 122, 26, .5); }
/* Party, Ocean, Autumn, Christmas: the skin's sign in front of the column's heading */
html[data-skin="party"] .roster-col h3 { font-family: "Groove", sans-serif; font-weight: 400; color: #ffcc33; }
html[data-skin="party"] .roster-col[data-present="1"] .person { border-color: #ff5fd2; box-shadow: 0 0 1vh rgba(255, 95, 210, .5); }
html[data-skin="ocean"] .roster-col h3 { font-family: "Ahoy", serif; font-weight: 400; font-size: 3.4vh; color: #ffd36b; }
html[data-skin="ocean"] .roster-col[data-present="1"] .person { border-color: #c8a24a; }
html[data-skin="autumn"] .roster-col h3 { font-family: "Harvest", "Chalk", cursive; font-size: 3.6vh; color: #f2c14e; }
html[data-skin="christmas"] .roster-col h3 { font-family: "Xmas", "Chalk", cursive; font-size: 3vh; color: #f2c14e; }
html[data-skin="christmas"] .roster-col[data-present="1"] .person { border-color: rgba(47, 138, 74, .8); }
html[data-skin="party"] .roster-col[data-present="1"] h3::before { content: "🪩 "; }
html[data-skin="party"] .roster-col.away h3::before { content: "🧥 "; }
html[data-skin="ocean"] .roster-col[data-present="1"] h3::before { content: "🛟 "; }
html[data-skin="ocean"] .roster-col.away h3::before { content: "⚓ "; }
html[data-skin="autumn"] .roster-col[data-present="1"] h3::before { content: "🔥 "; }
html[data-skin="autumn"] .roster-col.away h3::before { content: "💤 "; }
html[data-skin="christmas"] .roster-col[data-present="1"] h3::before { content: "🎁 "; }
html[data-skin="christmas"] .roster-col.away h3::before { content: "🛷 "; }
html[data-skin="halloween"] .roster-col[data-present="1"] h3::before { content: "👻 "; }
html[data-skin="halloween"] .roster-col.away h3::before { content: "🪦 "; }
.roster-col h3::before { font-family: "Segoe UI Emoji", sans-serif; font-size: .8em; }
/* the right column's headings a little smaller, so they fit unbroken */
html:not([data-skin="pub"]) .roster-col.away h3 { font-size: 2.2vh; overflow-wrap: normal; }
html[data-skin="autumn"] .roster-col.away h3, html[data-skin="ocean"] .roster-col.away h3 { font-size: 3vh; }
/* ============================ Herbst (autumn) ============================ */
@font-face { font-family: "Harvest"; src: url("/static/fonts/AmaticSC-Bold.ttf") format("truetype"); }

html[data-skin="autumn"] {
  --bg: #1d130c; --panel: #2a1b10; --panel-2: #3a2616; --line: #55361d;
  --text: #fbefdc; --muted: #c9a986; --accent: #e8892a; --accent-text: #2a1404;
  --good: #9ccc4a; --bad: #e0574a;
  --b-edge: #120b06; --b-dark: #22170f; --b-light: #f1e2c2; --b-red: #c2412b;
  --b-green: #6b8a2b; --b-wire: #b89b78; --b-num: #fbefdc;
  --chalk: #f8eedd; --chalk-dim: rgba(248, 238, 221, .55); --chalk-yellow: #f2c14e; --chalk-red: #ff8a6a;
  /* a warm dusk */
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(232, 137, 42, .25), transparent 70%),
    linear-gradient(180deg, #3a2213 0%, #22150c 50%, #160d07 100%) fixed;
}
html[data-skin="autumn"] body { background: transparent; }
/* leaves drifting down on the home screen (not during a game) */
html[data-skin="autumn"] body.tv:has(.home)::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background:
    radial-gradient(ellipse 0.9vh 0.5vh at 12% 20%, #c2412b 98%, transparent),
    radial-gradient(ellipse 0.8vh 0.45vh at 33% 60%, #e8892a 98%, transparent),
    radial-gradient(ellipse 1vh 0.5vh at 58% 35%, #f2c14e 98%, transparent),
    radial-gradient(ellipse 0.8vh 0.4vh at 79% 75%, #d9622b 98%, transparent),
    radial-gradient(ellipse 0.9vh 0.5vh at 92% 15%, #8a5a2b 98%, transparent);
  background-size: 100% 50vh;
  animation: leaves-fall 14s linear infinite;
}
@keyframes leaves-fall { to { background-position: 3vw 50vh; } }
html[data-skin="autumn"] .topbar { background: rgba(29, 19, 12, .85); border-bottom: 0.3vh solid #c2412b; }
html[data-skin="autumn"] .turnbar { background: rgba(29, 19, 12, .88); border-top: 0.3vh solid #c2412b; }
/* warm oak with a few leaves in the corners */
html[data-skin="autumn"] .chalkboard {
  position: relative;
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, .08) 0 0.5vh, rgba(255, 255, 255, .04) 0.5vh 1.4vh),
              linear-gradient(135deg, #9a6332, #b97a3e 35%, #8a5729 65%, #a86c35);
}
html[data-skin="autumn"] .chalkboard::before, html[data-skin="autumn"] .chalkboard::after {
  content: ""; position: absolute; top: -1vh; width: 11vh; height: 9vh; z-index: 3; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 90'><g stroke='%235a3416' stroke-width='1.5'><path d='M10 20 Q30 0 52 14 Q36 32 10 20 Z' fill='%23c2412b'/><path d='M40 30 Q66 12 84 34 Q60 50 40 30 Z' fill='%23e8892a'/><path d='M18 44 Q34 26 54 44 Q34 60 18 44 Z' fill='%23f2c14e'/><path d='M10 20 L52 14 M40 30 L84 34 M18 44 L54 44' fill='none'/></g><circle cx='70' cy='60' r='7' fill='%238a5a2b' stroke='%235a3416' stroke-width='1.5'/><path d='M64 55 Q70 48 76 55' fill='%235a3416'/></svg>")
    no-repeat 0 0 / contain;
}
html[data-skin="autumn"] .chalkboard::before { left: -1vh; }
html[data-skin="autumn"] .chalkboard::after { right: -1vh; transform: scaleX(-1); }
html[data-skin="autumn"] .home-board.chalkboard::before, html[data-skin="autumn"] .home-board.chalkboard::after { width: 8vh; height: 6.5vh; }
html[data-skin="autumn"] .slate { background: radial-gradient(ellipse at 50% 40%, #3a3a2c 0%, #2b2a20 60%, #22211a 100%); }
html[data-skin="autumn"] .board-title, html[data-skin="autumn"] .chalk-name, html[data-skin="autumn"] .q-name,
html[data-skin="autumn"] .grid-caption, html[data-skin="autumn"] .bull-title {
  font-family: "Harvest", "Chalk", cursive; letter-spacing: .04em;
}
html[data-skin="autumn"] .board-title { font-size: 6vh; color: #f2c14e; border-bottom-color: #c2412b; }
html[data-skin="autumn"] .chalk-name { font-size: 6vh; color: #ffd9a6; }
html[data-skin="autumn"] .chalk-col.active .chalk-name { color: #f2c14e; border-color: #e8892a; }
html[data-skin="autumn"] .chalk-col.active .chalk-left { color: #f2c14e; text-shadow: 0 0 1.2vh rgba(232, 137, 42, .5); }
html[data-skin="autumn"] .chalk-row .s { color: #e8a26a; }
/* tree slices */
html[data-skin="autumn"] .turnbar .dart {
  border-radius: 50% / 45%; color: #3a2312;
  background: repeating-radial-gradient(ellipse at 50% 50%, #e8cfa0 0 0.8vh, #d6b884 0.8vh 1.1vh), #e8cfa0;
  box-shadow: inset 0 0 0 0.9vh #8a5a2b, inset 0 0 0 1.2vh #5a3416, 0 0.6vh 1.2vh rgba(0, 0, 0, .5);
}
html[data-skin="autumn"] .turnbar .dart small { color: #6d4a2a; }
html[data-skin="autumn"] .turnbar .dart.suggest span, html[data-skin="autumn"] .turnbar .dart.suggest small { color: #c2412b; opacity: .9; }
html[data-skin="autumn"] .turnbar .dart.empty { opacity: .7; }
html[data-skin="autumn"] .winner-box { font-family: "Harvest", "Chalk", cursive; }
html[data-skin="autumn"] .winner-name { color: #f2c14e; text-shadow: 0 0 3vh rgba(232, 137, 42, .5); }
.skin-banner.autumn {
  clip-path: none; font-family: "Harvest", "Chalk", cursive; font-style: normal; flex-direction: column; align-items: center;
  gap: 0.5vh; padding: 1.5vh 7vh; border-radius: 2vh; background: rgba(42, 27, 16, .92);
  border: 0.5vh solid #e8892a; box-shadow: 0 1vh 3vh rgba(0, 0, 0, .6);
  animation: banner-in 0.6s cubic-bezier(.2, 1.3, .4, 1) both, sway 2.4s ease-in-out 0.6s infinite;
}
.skin-banner.autumn b { font-size: 12vh; font-weight: 700; color: #f2c14e; letter-spacing: .05em; text-shadow: 0 0.5vh 0 #5a3416; }
.skin-banner.autumn span { font-size: 6vh; color: #ffd9a6; }
.skin-banner.autumn.bad b { color: #ff8a6a; }
@keyframes sway { 50% { transform: translateX(-50%) rotate(-1.5deg); } }
.autumn-start {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; background: rgba(29, 19, 12, .5); overflow: hidden;
  display: flex; align-items: center; justify-content: center; animation: lights-fade 0.5s ease 2.5s forwards;
}
.autumn-start b { font-family: "Harvest", cursive; font-weight: 700; font-size: 16vh; color: #f2c14e; text-shadow: 0 0.6vh 0 #5a3416; opacity: 0; animation: lights-text 0.6s ease 0.6s forwards; }
.autumn-start .leaf { position: absolute; top: -10vh; font-size: 7vh; font-family: "Segoe UI Emoji", sans-serif; animation: leaf-drop 2.6s ease-in both; }
.autumn-start .leaf:nth-of-type(1) { left: 8%; } .autumn-start .leaf:nth-of-type(2) { left: 20%; animation-delay: .3s; }
.autumn-start .leaf:nth-of-type(3) { left: 33%; animation-delay: .1s; } .autumn-start .leaf:nth-of-type(4) { left: 46%; animation-delay: .5s; }
.autumn-start .leaf:nth-of-type(5) { left: 58%; animation-delay: .2s; } .autumn-start .leaf:nth-of-type(6) { left: 70%; animation-delay: .6s; }
.autumn-start .leaf:nth-of-type(7) { left: 82%; animation-delay: .15s; } .autumn-start .leaf:nth-of-type(8) { left: 92%; animation-delay: .4s; }
@keyframes leaf-drop {
  0% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(4vw, 40vh) rotate(120deg); }
  66% { transform: translate(-3vw, 80vh) rotate(240deg); } 100% { transform: translate(2vw, 120vh) rotate(360deg); }
}
.skin-preview.autumn .sample { background: radial-gradient(ellipse at 50% 40%, #3a3a2c, #22211a); border: 6px solid #b97a3e; font-family: "Harvest", cursive; color: #f8eedd; }
.skin-preview.autumn .sample b { color: #f2c14e; font-size: 40px; }
.skin-preview.autumn .sample small { color: #e8892a; font-size: 16px; }

/* ============================ Weihnachten (christmas) ============================ */
@font-face { font-family: "Xmas"; src: url("/static/fonts/MountainsofChristmas-Bold.ttf") format("truetype"); }

html[data-skin="christmas"] {
  --bg: #08131f; --panel: #0f2030; --panel-2: #162c40; --line: #234258;
  --text: #f6fbff; --muted: #a6c0d4; --accent: #d7262e; --accent-text: #ffffff;
  --good: #3fbf6a; --bad: #ff6b6b;
  --b-edge: #050c14; --b-dark: #11202e; --b-light: #f3ead5; --b-red: #d7262e;
  --b-green: #2f8a4a; --b-wire: #b9c6d2; --b-num: #f6fbff;
  --chalk: #f6fbff; --chalk-dim: rgba(246, 251, 255, .55); --chalk-yellow: #f2c14e; --chalk-red: #ff8a8a;
  /* a snowy night */
  background:
    radial-gradient(circle at 15% 12%, rgba(255, 255, 255, .9) 0 0.15vh, transparent 0.25vh),
    radial-gradient(circle at 70% 8%, rgba(255, 255, 255, .8) 0 0.12vh, transparent 0.22vh),
    radial-gradient(circle at 45% 18%, rgba(255, 255, 255, .7) 0 0.12vh, transparent 0.22vh),
    radial-gradient(ellipse 120% 25% at 50% 110%, rgba(255, 255, 255, .25), transparent 70%),
    linear-gradient(180deg, #0a1c33 0%, #0b1726 60%, #08131f 100%) fixed;
}
html[data-skin="christmas"] body { background: transparent; }
/* snow falling on the home screen (not during a game) */
html[data-skin="christmas"] body.tv:has(.home)::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
  background:
    radial-gradient(circle at 10% 20%, #fff 0 0.35vh, transparent 0.45vh), radial-gradient(circle at 25% 70%, #fff 0 0.25vh, transparent 0.35vh),
    radial-gradient(circle at 40% 40%, #fff 0 0.3vh, transparent 0.4vh), radial-gradient(circle at 55% 85%, #fff 0 0.2vh, transparent 0.3vh),
    radial-gradient(circle at 70% 30%, #fff 0 0.35vh, transparent 0.45vh), radial-gradient(circle at 85% 60%, #fff 0 0.25vh, transparent 0.35vh),
    radial-gradient(circle at 95% 10%, #fff 0 0.3vh, transparent 0.4vh);
  background-size: 100% 40vh;
  animation: snow-fall 12s linear infinite;
}
@keyframes snow-fall { to { background-position: 2vw 40vh; } }
html[data-skin="christmas"] .topbar { background: rgba(8, 19, 31, .85); border-bottom: 0.3vh solid #2f8a4a; }
html[data-skin="christmas"] .turnbar { background: rgba(8, 19, 31, .88); border-top: 0.3vh solid #2f8a4a; }
/* fir garland with a chain of lights along the top of each board */
html[data-skin="christmas"] .chalkboard {
  position: relative;
  background: linear-gradient(135deg, #7a4a24, #9a6332 35%, #6a3f1c 65%, #8a5729);
}
html[data-skin="christmas"] .chalkboard::before {
  content: ""; position: absolute; left: -0.5vh; right: -0.5vh; top: -1.4vh; height: 3.4vh; z-index: 3; pointer-events: none;
  border-radius: 2vh;
  background:
    radial-gradient(circle, #ffd84d 0 0.55vh, transparent 0.75vh) 0 50% / 9vh 100% repeat-x,
    radial-gradient(circle, #ff4d4d 0 0.55vh, transparent 0.75vh) 3vh 50% / 9vh 100% repeat-x,
    radial-gradient(circle, #5fd0ff 0 0.55vh, transparent 0.75vh) 6vh 50% / 9vh 100% repeat-x,
    repeating-linear-gradient(60deg, #1f6b38 0 0.6vh, #2f8a4a 0.6vh 1.2vh, #175a2e 1.2vh 1.8vh);
  box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, .5);
}
html[data-skin="christmas"] .home-board.chalkboard::before { animation: twinkle 1.6s steps(1) infinite; }
@keyframes twinkle { 50% { filter: brightness(1.35) saturate(1.3); } }
html[data-skin="christmas"] .slate { background: radial-gradient(ellipse at 50% 40%, #24384a 0%, #1a2b3b 60%, #132230 100%); }
html[data-skin="christmas"] .board-title, html[data-skin="christmas"] .chalk-name, html[data-skin="christmas"] .q-name,
html[data-skin="christmas"] .grid-caption, html[data-skin="christmas"] .bull-title {
  font-family: "Xmas", "Chalk", cursive; letter-spacing: .02em;
}
html[data-skin="christmas"] .board-title { color: #f2c14e; border-bottom-color: #d7262e; }
html[data-skin="christmas"] .chalk-name { text-transform: none; font-size: 5.4vh; }
html[data-skin="christmas"] .chalk-col.active .chalk-name { color: #f2c14e; border-color: #d7262e; }
html[data-skin="christmas"] .chalk-col.active .chalk-left { color: #f2c14e; text-shadow: 0 0 1.4vh rgba(242, 193, 78, .5); }
html[data-skin="christmas"] .chalk-row .s { color: #9fd7ff; }
/* presents with a golden ribbon */
html[data-skin="christmas"] .turnbar .dart {
  border-radius: 0.8vh; color: #fff;
  background:
    linear-gradient(90deg, transparent 46%, #f2c14e 46% 54%, transparent 54%),
    linear-gradient(180deg, transparent 44%, #f2c14e 44% 52%, transparent 52%),
    linear-gradient(135deg, #d7262e, #a81c22);
  box-shadow: inset 0 0 0 0.3vh rgba(255, 255, 255, .15), 0 0.6vh 1.2vh rgba(0, 0, 0, .5);
}
html[data-skin="christmas"] .turnbar .dart:nth-child(2) {
  background:
    linear-gradient(90deg, transparent 46%, #d7262e 46% 54%, transparent 54%),
    linear-gradient(180deg, transparent 44%, #d7262e 44% 52%, transparent 52%),
    linear-gradient(135deg, #2f8a4a, #1f6b38);
}
html[data-skin="christmas"] .turnbar .dart span { text-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, .6); }
html[data-skin="christmas"] .turnbar .dart small { color: #fff3d0; text-shadow: 0 0.2vh 0.4vh rgba(0, 0, 0, .6); }
html[data-skin="christmas"] .turnbar .dart.empty { opacity: .5; }
html[data-skin="christmas"] .turnbar .dart.suggest span, html[data-skin="christmas"] .turnbar .dart.suggest small { color: #fff3d0; opacity: 1; }
html[data-skin="christmas"] .winner-box { font-family: "Xmas", "Chalk", cursive; }
html[data-skin="christmas"] .winner-name { color: #f2c14e; text-shadow: 0 0 3vh rgba(255, 77, 77, .5); }
.skin-banner.xmas {
  clip-path: none; font-family: "Xmas", "Chalk", cursive; font-style: normal; flex-direction: column; align-items: center;
  gap: 0.5vh; padding: 2vh 7vh; border-radius: 2vh; background: rgba(15, 32, 48, .92);
  border: 0.5vh solid #d7262e; box-shadow: 0 0 0 0.5vh #f6fbff, 0 1vh 3vh rgba(0, 0, 0, .6);
}
.skin-banner.xmas b { font-size: 10vh; font-weight: 700; color: #f2c14e; text-shadow: 0 0.5vh 0 #7a1418; }
.skin-banner.xmas span { font-size: 5vh; color: #9fd7ff; }
.skin-banner.xmas.bad b { color: #c9d3dc; text-shadow: 0 0.5vh 0 #000; }
.xmas-start {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; background: rgba(8, 19, 31, .55); overflow: hidden;
  display: flex; align-items: center; justify-content: center; animation: lights-fade 0.5s ease 2.7s forwards;
}
.xmas-start b { font-family: "Xmas", cursive; font-weight: 700; font-size: 16vh; color: #f2c14e; text-shadow: 0 0.6vh 0 #7a1418; opacity: 0; animation: lights-text 0.6s ease 0.9s forwards; }
.xmas-start .sleigh {
  position: absolute; top: 14vh; left: -40vw; font-size: 9vh; font-family: "Segoe UI Emoji", sans-serif; white-space: nowrap;
  transform: scaleX(-1); animation: sleigh-fly 2.8s ease-in-out forwards;
}
@keyframes sleigh-fly { 0% { left: -40vw; top: 26vh; } 100% { left: 120vw; top: 4vh; } }
.skin-preview.christmas .sample { background: radial-gradient(ellipse at 50% 40%, #24384a, #132230); border: 6px solid #9a6332; border-top-color: #2f8a4a; font-family: "Xmas", cursive; color: #f6fbff; }
.skin-preview.christmas .sample b { color: #f2c14e; font-size: 38px; }
.skin-preview.christmas .sample small { color: #ff6b6b; font-size: 14px; }

/* ============================ the seasons: Ostern, Frühling, Sommer, Winter ============================ */
@font-face { font-family: "Easter"; src: url("/static/fonts/Sniglet-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Spring"; src: url("/static/fonts/Pacifico-Regular.ttf") format("truetype"); }
@font-face { font-family: "Beach"; src: url("/static/fonts/LilitaOne-Regular.ttf") format("truetype"); }
@font-face { font-family: "Frost"; src: url("/static/fonts/SnowburstOne-Regular.ttf") format("truetype"); }

/* ----- Ostern ----- */
html[data-skin="easter"] {
  --bg: #23304a; --panel: #2c3a58; --panel-2: #364769; --line: #4a5d85;
  --text: #fffaf2; --muted: #c3cbe0; --accent: #ff8fb8; --accent-text: #3a0f20;
  --good: #7dd8a8; --bad: #ff6b8b;
  --b-edge: #151d2e; --b-dark: #253049; --b-light: #fbf1dc; --b-red: #ff7aa8;
  --b-green: #5fc28f; --b-wire: #c3cbe0; --b-num: #fffaf2;
  --chalk: #fffaf2; --chalk-dim: rgba(255, 250, 242, .55); --chalk-yellow: #fff1a8; --chalk-red: #ff9ab0;
  background:
    radial-gradient(ellipse 120% 30% at 50% 108%, #4f9a5a 60%, transparent 61%),
    linear-gradient(180deg, #4a4f86 0%, #6e6fb0 45%, #8a7fc0 70%, #3f6b5a 100%) fixed;
}
html[data-skin="easter"] .chalkboard {
  background: repeating-linear-gradient(135deg, #ffb3c8 0 2vh, #c9f2df 2vh 4vh, #fff1a8 4vh 6vh, #d6c4ff 6vh 8vh);
}
html[data-skin="easter"] .board-title, html[data-skin="easter"] .chalk-name, html[data-skin="easter"] .q-name,
html[data-skin="easter"] .grid-caption, html[data-skin="easter"] .bull-title, html[data-skin="easter"] .roster-col h3 {
  font-family: "Easter", "Chalk", cursive; letter-spacing: .02em;
}
html[data-skin="easter"] .board-title { color: #fff1a8; border-bottom-color: #ff8fb8; }
html[data-skin="easter"] .chalk-col.active .chalk-name { color: #ffb3c8; border-color: #ff8fb8; }
html[data-skin="easter"] .chalk-col.active .chalk-left { color: #fff1a8; }
/* Easter eggs */
html[data-skin="easter"] .turnbar .dart {
  border-radius: 50% / 60% 60% 40% 40%; color: #3a2a4a;
  background: linear-gradient(180deg, transparent 58%, rgba(255, 255, 255, .55) 58% 64%, transparent 64%), #ffb3c8;
  box-shadow: inset -1vh -1vh 2vh rgba(0, 0, 0, .12), 0 0.6vh 1.2vh rgba(0, 0, 0, .35);
}
html[data-skin="easter"] .turnbar .dart:nth-child(2) { background-color: #c9f2df; }
html[data-skin="easter"] .turnbar .dart:nth-child(3) { background-color: #fff1a8; }
html[data-skin="easter"] .turnbar .dart small { color: #5a4a6a; }
html[data-skin="easter"] .turnbar .dart.suggest span, html[data-skin="easter"] .turnbar .dart.suggest small { color: #8a3a6a; opacity: .9; }
html[data-skin="easter"] .turnbar .dart.empty { opacity: .6; }
html[data-skin="easter"] .winner-box { font-family: "Easter", "Chalk", cursive; }
html[data-skin="easter"] .roster-col[data-present="1"] h3::before { content: "🥚 "; }
html[data-skin="easter"] .roster-col.away h3::before { content: "🐇 "; }
html[data-skin="easter"] .roster-col h3 { color: #fff1a8; }
.skin-banner.easter { background: rgba(54, 71, 105, .93); border: 0.5vh dashed #ff8fb8; }
.skin-banner.easter b { font-family: "Easter", cursive; color: #fff1a8; text-shadow: 0 0.5vh 0 #ff8fb8; }
.skin-banner.easter span { color: #c9f2df; }
.skin-preview.easter .sample { background: #2b4a3a; border: 6px solid #ffb3c8; font-family: "Easter", cursive; color: #fffaf2; }
.skin-preview.easter .sample b { color: #fff1a8; font-size: 38px; }
.skin-preview.easter .sample small { color: #ffb3c8; }

/* ----- Frühling ----- */
html[data-skin="spring"] {
  --bg: #1d2f22; --panel: #24402c; --panel-2: #2d4f36; --line: #3f6b4a;
  --text: #f6fff2; --muted: #b5d3b0; --accent: #8ee06a; --accent-text: #10260a;
  --good: #8ee06a; --bad: #ff7a7a;
  --b-edge: #10190f; --b-dark: #1c2a1c; --b-light: #f6f1dc; --b-red: #ff6f9a;
  --b-green: #4caa5a; --b-wire: #b5d3b0; --b-num: #f6fff2;
  --chalk: #f8fff4; --chalk-dim: rgba(248, 255, 244, .55); --chalk-yellow: #ffe066; --chalk-red: #ff9a9a;
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 240, 160, .55) 0 5vh, transparent 12vh),
    linear-gradient(180deg, #4f8fc6 0%, #86c1e6 35%, #5aa863 70%, #2e6b3a 100%) fixed;
}
html[data-skin="spring"] body.tv:has(.home)::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .75;
  background:
    radial-gradient(ellipse 0.8vh 0.5vh at 10% 20%, #ffd1e3 98%, transparent), radial-gradient(ellipse 0.7vh 0.45vh at 35% 65%, #fff 98%, transparent),
    radial-gradient(ellipse 0.8vh 0.5vh at 60% 30%, #ffb3cf 98%, transparent), radial-gradient(ellipse 0.7vh 0.45vh at 82% 75%, #ffd1e3 98%, transparent),
    radial-gradient(ellipse 0.8vh 0.5vh at 95% 12%, #fff 98%, transparent);
  background-size: 100% 45vh;
  animation: leaves-fall 16s linear infinite;
}
html[data-skin="spring"] .topbar, html[data-skin="spring"] .turnbar { background: rgba(29, 47, 34, .88); }
/* birch bark */
html[data-skin="spring"] .chalkboard {
  background:
    radial-gradient(ellipse 1.4vh 0.3vh at 30% 40%, #2b2b2b 96%, transparent),
    radial-gradient(ellipse 0.9vh 0.25vh at 75% 75%, #3a3a3a 96%, transparent),
    #eeebe2;
  background-size: 7vh 5vh;
}
html[data-skin="spring"] .board-title, html[data-skin="spring"] .grid-caption, html[data-skin="spring"] .roster-col h3 {
  font-family: "Spring", "Chalk", cursive; font-weight: 400; letter-spacing: 0;
}
html[data-skin="spring"] .board-title { color: #ffe066; border-bottom-color: #ff8fb8; }
html[data-skin="spring"] .chalk-name { color: #d8f5c8; }
html[data-skin="spring"] .chalk-col.active .chalk-name { color: #ffb3cf; border-color: #ff8fb8; }
html[data-skin="spring"] .chalk-col.active .chalk-left { color: #ffe066; }
/* flower pots */
html[data-skin="spring"] .turnbar .dart {
  border-radius: 0.8vh 0.8vh 2.6vh 2.6vh; color: #fff8ee;
  background: linear-gradient(180deg, #d98a5a 0 1.6vh, #b8603a 1.6vh 2vh, #c8693a 2vh);
  box-shadow: 0 0.6vh 1.2vh rgba(0, 0, 0, .35);
}
html[data-skin="spring"] .turnbar .dart span { text-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, .4); }
html[data-skin="spring"] .turnbar .dart small { color: #ffe7d4; }
html[data-skin="spring"] .turnbar .dart.suggest span, html[data-skin="spring"] .turnbar .dart.suggest small { color: #ffe066; opacity: .95; }
html[data-skin="spring"] .turnbar .dart.empty { opacity: .6; }
html[data-skin="spring"] .winner-box { font-family: "Spring", "Chalk", cursive; }
html[data-skin="spring"] .roster-col[data-present="1"] h3::before { content: "🌷 "; }
html[data-skin="spring"] .roster-col.away h3::before { content: "🌳 "; }
html[data-skin="spring"] .roster-col h3 { color: #ffe066; }
.skin-banner.spring { background: rgba(36, 64, 44, .93); border: 0.5vh solid #ff8fb8; }
.skin-banner.spring b { font-family: "Spring", cursive; font-weight: 400; color: #ffe066; text-shadow: 0 0.5vh 0 #2e6b3a; }
.skin-banner.spring span { color: #ffd1e3; }
.skin-preview.spring .sample { background: #24402c; border: 6px solid #eeebe2; font-family: "Spring", cursive; color: #f8fff4; }
.skin-preview.spring .sample b { color: #ffe066; font-size: 34px; font-weight: 400; }
.skin-preview.spring .sample small { color: #ffb3cf; }

/* ----- Sommer ----- */
html[data-skin="summer"] {
  --bg: #0e3b52; --panel: #12465f; --panel-2: #18566f; --line: #23708c;
  --text: #fffdf5; --muted: #bfe3ee; --accent: #ff7f50; --accent-text: #3a1200;
  --good: #7dd87d; --bad: #ff5a5a;
  --b-edge: #082636; --b-dark: #123447; --b-light: #f8ecd0; --b-red: #ff5a5a;
  --b-green: #20b8b0; --b-wire: #bfe3ee; --b-num: #fffdf5;
  --chalk: #fffdf5; --chalk-dim: rgba(255, 253, 245, .55); --chalk-yellow: #ffd23f; --chalk-red: #ff8a7a;
  background:
    radial-gradient(circle at 86% 10%, #fff3a8 0 5vh, rgba(255, 220, 90, .4) 6vh, transparent 15vh),
    linear-gradient(180deg, #2f9fd6 0%, #6cc4ea 40%, #1a7fa8 58%, #e2c27a 78%, #d4ae62 100%) fixed;
}
html[data-skin="summer"] .topbar, html[data-skin="summer"] .turnbar { background: rgba(14, 59, 82, .88); }
/* bamboo */
html[data-skin="summer"] .chalkboard {
  background: repeating-linear-gradient(90deg, #d7b46a 0 2.6vh, #9a7a3a 2.6vh 2.9vh), #d7b46a;
}
html[data-skin="summer"] .slate { background: radial-gradient(ellipse at 50% 40%, #1d4a4c 0%, #143a3c 60%, #0f2f31 100%); }
html[data-skin="summer"] .board-title, html[data-skin="summer"] .chalk-name, html[data-skin="summer"] .q-name,
html[data-skin="summer"] .grid-caption, html[data-skin="summer"] .bull-title, html[data-skin="summer"] .roster-col h3 {
  font-family: "Beach", "Chalk", sans-serif; font-weight: 400; letter-spacing: .03em;
}
html[data-skin="summer"] .board-title { color: #ffd23f; border-bottom-color: #ff7f50; }
html[data-skin="summer"] .chalk-col.active .chalk-name { color: #ffd23f; border-color: #ff7f50; }
html[data-skin="summer"] .chalk-col.active .chalk-left { color: #ffd23f; text-shadow: 0 0 1.4vh rgba(255, 127, 80, .5); }
/* beach towels */
html[data-skin="summer"] .turnbar .dart {
  border-radius: 1vh; color: #0e2f40;
  background: repeating-linear-gradient(90deg, #ffd23f 0 2.4vh, #ff9f6e 2.4vh 4.8vh);
  box-shadow: 0 0.6vh 1.2vh rgba(0, 0, 0, .35);
}
html[data-skin="summer"] .turnbar .dart:nth-child(2) { background: repeating-linear-gradient(90deg, #7fe0da 0 2.4vh, #c7f3f0 2.4vh 4.8vh); }
html[data-skin="summer"] .turnbar .dart span { text-shadow: 0 0 0.8vh rgba(255, 255, 255, .8); }
html[data-skin="summer"] .turnbar .dart small { color: #0e3b52; }
html[data-skin="summer"] .turnbar .dart.suggest span, html[data-skin="summer"] .turnbar .dart.suggest small { color: #c2412b; opacity: .9; }
html[data-skin="summer"] .turnbar .dart.empty { opacity: .6; }
html[data-skin="summer"] .winner-box { font-family: "Beach", "Chalk", sans-serif; }
html[data-skin="summer"] .roster-col[data-present="1"] h3::before { content: "🏖️ "; }
html[data-skin="summer"] .roster-col.away h3::before { content: "🍹 "; }
html[data-skin="summer"] .roster-col h3 { color: #ffd23f; }
.skin-banner.summer { background: rgba(18, 70, 95, .93); border: 0.5vh solid #ffd23f; }
.skin-banner.summer b { font-family: "Beach", sans-serif; font-weight: 400; color: #ffd23f; text-shadow: 0 0.5vh 0 #ff7f50; }
.skin-banner.summer span { color: #c7f3f0; }
.skin-preview.summer .sample { background: #143a3c; border: 6px solid #d7b46a; font-family: "Beach", sans-serif; color: #fffdf5; }
.skin-preview.summer .sample b { color: #ffd23f; font-size: 38px; font-weight: 400; }
.skin-preview.summer .sample small { color: #ff9f6e; }

/* ----- Winter ----- */
html[data-skin="winter"] {
  --bg: #0b1a2c; --panel: #12263d; --panel-2: #1a3350; --line: #2a4a6e;
  --text: #f2f9ff; --muted: #a9c4dd; --accent: #5aa8e0; --accent-text: #04121f;
  --good: #7fd6c2; --bad: #ff7a8a;
  --b-edge: #06111d; --b-dark: #13263b; --b-light: #f4f8fb; --b-red: #c8323a;
  --b-green: #2f7fb0; --b-wire: #a9c4dd; --b-num: #f2f9ff;
  --chalk: #f4faff; --chalk-dim: rgba(244, 250, 255, .55); --chalk-yellow: #bfe6ff; --chalk-red: #ff9aa6;
  background:
    radial-gradient(ellipse 120% 25% at 50% 110%, rgba(255, 255, 255, .35), transparent 70%),
    linear-gradient(180deg, #24507a 0%, #16324f 55%, #0b1a2c 100%) fixed;
}
html[data-skin="winter"] body.tv:has(.home)::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
  background:
    radial-gradient(circle at 10% 20%, #fff 0 0.35vh, transparent 0.45vh), radial-gradient(circle at 30% 70%, #fff 0 0.25vh, transparent 0.35vh),
    radial-gradient(circle at 50% 40%, #fff 0 0.3vh, transparent 0.4vh), radial-gradient(circle at 70% 85%, #fff 0 0.2vh, transparent 0.3vh),
    radial-gradient(circle at 90% 30%, #fff 0 0.35vh, transparent 0.45vh);
  background-size: 100% 40vh;
  animation: snow-fall 10s linear infinite;
}
html[data-skin="winter"] .topbar, html[data-skin="winter"] .turnbar { background: rgba(11, 26, 44, .88); }
/* a frame of ice with icicles */
html[data-skin="winter"] .chalkboard {
  position: relative;
  background: linear-gradient(135deg, #e3f5ff, #8fc8ea 35%, #eef9ff 55%, #7ab8e0 80%, #d4efff);
  box-shadow: 0 0 2vh rgba(160, 215, 255, .35), 0 1vh 3vh rgba(0, 0, 0, .5);
}
html[data-skin="winter"] .chalkboard::after {
  content: ""; position: absolute; left: 2vh; right: 2vh; bottom: -2.2vh; height: 2.4vh; z-index: 3; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'><path d='M0 0 L6 0 L4 16 Z M10 0 L18 0 L14 22 Z M22 0 L27 0 L25 10 Z M31 0 L39 0 L35 18 Z M43 0 L48 0 L46 12 Z M51 0 L60 0 L56 20 Z' fill='%23d4efff' stroke='%238fc8ea' stroke-width='1'/></svg>")
    repeat-x 0 0 / 9vh 100%;
}
html[data-skin="winter"] .slate { background: radial-gradient(ellipse at 50% 40%, #1d3550 0%, #152a42 60%, #0f2035 100%); }
html[data-skin="winter"] .board-title, html[data-skin="winter"] .grid-caption, html[data-skin="winter"] .roster-col h3 {
  font-family: "Frost", "Chalk", cursive; font-weight: 400; letter-spacing: .02em;
}
html[data-skin="winter"] .board-title { color: #e8f7ff; border-bottom-color: #5aa8e0; text-shadow: 0 0 1.2vh rgba(160, 215, 255, .6); }
html[data-skin="winter"] .chalk-col.active .chalk-name { color: #bfe6ff; border-color: #5aa8e0; }
html[data-skin="winter"] .chalk-col.active .chalk-left { color: #e8f7ff; text-shadow: 0 0 1.6vh rgba(120, 200, 255, .8); }
html[data-skin="winter"] .chalk-row .s { color: #9fd0f2; }
/* ice cubes */
html[data-skin="winter"] .turnbar .dart {
  border-radius: 1.4vh; color: #0b2a45;
  background: linear-gradient(135deg, rgba(240, 250, 255, .95), rgba(150, 205, 238, .85) 60%, rgba(220, 242, 255, .95));
  border: 0.3vh solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 1.5vh rgba(255, 255, 255, .8), 0 0.6vh 1.2vh rgba(0, 0, 0, .35);
}
html[data-skin="winter"] .turnbar .dart small { color: #2a5a80; }
html[data-skin="winter"] .turnbar .dart.suggest span, html[data-skin="winter"] .turnbar .dart.suggest small { color: #1a5a90; opacity: .9; }
html[data-skin="winter"] .turnbar .dart.empty { opacity: .55; }
html[data-skin="winter"] .winner-box { font-family: "Frost", "Chalk", cursive; }
html[data-skin="winter"] .winner-name { color: #e8f7ff; text-shadow: 0 0 3vh rgba(120, 200, 255, .8); }
html[data-skin="winter"] .roster-col[data-present="1"] h3::before { content: "⛷️ "; }
html[data-skin="winter"] .roster-col.away h3::before { content: "🏠 "; }
html[data-skin="winter"] .roster-col h3 { color: #bfe6ff; }
.skin-banner.winter { background: rgba(18, 38, 61, .93); border: 0.5vh solid #bfe6ff; box-shadow: 0 0 3vh rgba(160, 215, 255, .5); }
.skin-banner.winter b { font-family: "Frost", cursive; font-weight: 400; color: #e8f7ff; text-shadow: 0 0 1.5vh #5aa8e0; }
.skin-banner.winter span { color: #bfe6ff; }
.skin-preview.winter .sample { background: #152a42; border: 6px solid #a8dcff; font-family: "Frost", cursive; color: #f4faff; }
.skin-preview.winter .sample b { color: #e8f7ff; font-size: 38px; font-weight: 400; }
.skin-preview.winter .sample small { color: #5aa8e0; }

html:is([data-skin="easter"], [data-skin="spring"], [data-skin="summer"], [data-skin="winter"]) body { background: transparent; }

/* the seasons' banners share one shape */
.skin-banner.easter, .skin-banner.spring, .skin-banner.summer, .skin-banner.winter {
  clip-path: none; font-style: normal; flex-direction: column; align-items: center; gap: 0.5vh;
  padding: 2vh 7vh; border-radius: 2.4vh;
  animation: banner-in 0.6s cubic-bezier(.2, 1.3, .4, 1) both, sway 2.4s ease-in-out 0.6s infinite;
}
.skin-banner.easter b, .skin-banner.spring b, .skin-banner.summer b, .skin-banner.winter b { font-size: 10vh; }
.skin-banner.easter span, .skin-banner.spring span, .skin-banner.summer span, .skin-banner.winter span { font-size: 5vh; font-family: "Chalk", cursive; }
.skin-banner.easter.bad b, .skin-banner.spring.bad b, .skin-banner.summer.bad b, .skin-banner.winter.bad b { color: #ff9ab0; }

/* the seasons' start screens (announce.js SKIN_STARTS) */
.season-start {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; background: rgba(10, 20, 30, .45);
  display: flex; align-items: center; justify-content: center; animation: lights-fade 0.5s ease 2.5s forwards;
}
.season-start b { position: relative; font-size: 13vh; font-weight: 400; opacity: 0; animation: lights-text 0.6s ease 0.7s forwards; }
.easter-start b { font-family: "Easter", cursive; color: #fff1a8; text-shadow: 0 0.6vh 0 #ff8fb8; }
.spring-start b { font-family: "Spring", cursive; color: #ffe066; text-shadow: 0 0.6vh 0 #2e6b3a; }
.summer-start b { font-family: "Beach", sans-serif; color: #ffd23f; text-shadow: 0 0.6vh 0 #ff7f50; }
.winter-start b { font-family: "Frost", cursive; color: #e8f7ff; text-shadow: 0 0 2vh #5aa8e0; }
.season-start span { position: absolute; font-family: "Segoe UI Emoji", sans-serif; }
.season-start .runner { bottom: 18vh; left: -15vw; font-size: 14vh; animation: runner 2.6s ease-in-out forwards; }
.easter-start .bunny { animation: runner 2.6s ease-in-out forwards, hop 0.4s ease-in-out infinite; }
.summer-start .surfer { z-index: 2; bottom: 24vh; }
@keyframes runner { to { left: 115vw; } }
@keyframes hop { 50% { transform: translateY(-8vh); } }
.season-start .egg, .season-start .flake, .season-start .flutter { top: -10vh; font-size: 7vh; animation: leaf-drop 2.6s ease-in both; }
.season-start .flutter { font-size: 6vh; }
.season-start span:nth-of-type(2) { left: 10%; animation-delay: .1s; } .season-start span:nth-of-type(3) { left: 24%; animation-delay: .4s; }
.season-start span:nth-of-type(4) { left: 38%; animation-delay: .2s; } .season-start span:nth-of-type(5) { left: 52%; animation-delay: .5s; }
.season-start span:nth-of-type(6) { left: 66%; animation-delay: .15s; } .season-start span:nth-of-type(7) { left: 80%; animation-delay: .35s; }
.season-start span:nth-of-type(8) { left: 92%; animation-delay: .25s; }
.spring-start span:nth-of-type(1), .winter-start span:nth-of-type(1) { left: 4%; }
.summer-start .swell {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 40%; transform: translateY(100%);
  background: linear-gradient(180deg, rgba(26, 127, 168, .9), rgba(14, 59, 82, .95));
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  animation: swell-up 1.2s ease-out forwards, swell-down 0.8s ease-in 2s forwards;
}

/* ============================ Plattenladen (records) ============================ */
@font-face { font-family: "Groovy"; src: url("/static/fonts/Shrikhand-Regular.ttf") format("truetype"); }

html[data-skin="records"] {
  --bg: #1e140e; --panel: #2b1d14; --panel-2: #3a2818; --line: #55391f;
  --text: #f6ecd6; --muted: #c9b08a; --accent: #e8b04a; --accent-text: #2a1a04;
  --good: #7fc46b; --bad: #e0574a;
  --b-edge: #120c08; --b-dark: #1d1712; --b-light: #f1e2c2; --b-red: #c8323a;
  --b-green: #2a8a8a; --b-wire: #c9b08a; --b-num: #f6ecd6;
  --chalk: #f6ecd6; --chalk-dim: rgba(246, 236, 214, .55); --chalk-yellow: #e8b04a; --chalk-red: #ff8a6a;
  /* a wall of record shelves */
  background:
    linear-gradient(rgba(20, 13, 9, .72), rgba(20, 13, 9, .86)),
    repeating-linear-gradient(180deg, transparent 0 21vh, #5a3a22 21vh 23vh),
    repeating-linear-gradient(90deg, #c8323a 0 0.8vh, #e8b04a 0.8vh 1.3vh, #2a8a8a 1.3vh 2.4vh, #f3ead5 2.4vh 2.8vh,
                              #7a4aa0 2.8vh 3.6vh, #e07a3a 3.6vh 4.4vh, #1d1712 4.4vh 4.7vh) fixed;
}
html[data-skin="records"] body { background: transparent; }
html[data-skin="records"] .topbar, html[data-skin="records"] .turnbar { background: rgba(30, 20, 14, .9); }
/* a wooden record crate */
html[data-skin="records"] .chalkboard { background: repeating-linear-gradient(0deg, #8a5a32 0 3vh, #5f3c20 3vh 3.3vh), #8a5a32; }
html[data-skin="records"] .board-title, html[data-skin="records"] .grid-caption, html[data-skin="records"] .roster-col h3,
html[data-skin="records"] .bull-title {
  font-family: "Groovy", "Chalk", cursive; font-weight: 400; letter-spacing: .01em;
}
html[data-skin="records"] .board-title { color: #e8b04a; border-bottom-color: #c8323a; text-shadow: 0.3vh 0.3vh 0 #c8323a; }
html[data-skin="records"] .chalk-col.active .chalk-name { color: #e8b04a; border-color: #c8323a; }
html[data-skin="records"] .chalk-col.active .chalk-left { color: #e8b04a; }
/* vinyl records in their sleeves */
html[data-skin="records"] .turnbar .dart {
  border-radius: 0.6vh; color: #fff;
  background:
    radial-gradient(circle closest-side, var(--label, #c8323a) 0 30%, transparent 31%),
    radial-gradient(circle closest-side, transparent 99%, #d9c7a4 100%),
    repeating-radial-gradient(circle closest-side, #121212 0 1.2%, #262626 1.2% 2.4%);
  box-shadow: 0 0.6vh 1.2vh rgba(0, 0, 0, .45);
}
html[data-skin="records"] .turnbar .dart:nth-child(2) { --label: #e8b04a; }
html[data-skin="records"] .turnbar .dart:nth-child(3) { --label: #2a8a8a; }
html[data-skin="records"] .turnbar .dart span { text-shadow: 0 0.3vh 0.8vh #000, 0 0 0.4vh #000; }
html[data-skin="records"] .turnbar .dart small { color: #fff; text-shadow: 0 0 0.5vh #000; }
html[data-skin="records"] .turnbar .dart.suggest span, html[data-skin="records"] .turnbar .dart.suggest small { color: #ffd98a; opacity: 1; }
html[data-skin="records"] .turnbar .dart.empty { opacity: .55; }
html[data-skin="records"] .winner-box { font-family: "Groovy", "Chalk", cursive; }
html[data-skin="records"] .winner-name { color: #e8b04a; text-shadow: 0.5vh 0.5vh 0 #c8323a; }
html[data-skin="records"] .roster-col[data-present="1"] h3::before { content: "💿 "; }
html[data-skin="records"] .roster-col.away h3::before { content: "🏠 "; }
html[data-skin="records"] .roster-col h3 { color: #e8b04a; }
.skin-banner.records { background: rgba(43, 29, 20, .94); border: 0.5vh solid #e8b04a; }
.skin-banner.records b { font-family: "Groovy", cursive; font-weight: 400; color: #e8b04a; text-shadow: 0.5vh 0.5vh 0 #c8323a; }
.skin-banner.records span { color: #f6ecd6; }
.records-start .vinyl {
  position: absolute; top: 12vh; width: 38vh; height: 38vh; border-radius: 50%;
  background: radial-gradient(circle, #f6ecd6 0 2%, #c8323a 2.5% 30%, transparent 31%),
              repeating-radial-gradient(circle, #121212 0 1%, #2a2a2a 1% 2%);
  box-shadow: 0 2vh 4vh rgba(0, 0, 0, .6); animation: spin 1.6s linear infinite, ball-drop 0.6s ease-out both;
}
@keyframes spin { to { transform: rotate(360deg); } }
.records-start b { margin-top: 48vh; font-family: "Groovy", cursive; color: #e8b04a; text-shadow: 0.6vh 0.6vh 0 #c8323a; }
.skin-preview.records .sample { background: #2b2a20; border: 6px solid #8a5a32; font-family: "Groovy", cursive; color: #f6ecd6; }
.skin-preview.records .sample b { color: #e8b04a; font-size: 36px; font-weight: 400; }
.skin-preview.records .sample small { color: #e07a3a; font-size: 12px; }

/* ============================ Rockpalast (rock) ============================ */
@font-face { font-family: "Metal"; src: url("/static/fonts/MetalMania-Regular.ttf") format("truetype"); }
@font-face { font-family: "Stage"; src: url("/static/fonts/BebasNeue-Regular.ttf") format("truetype"); }

html[data-skin="rock"] {
  --bg: #0a0a0c; --panel: #141418; --panel-2: #1e1e24; --line: #2e2e36;
  --text: #f5f5f5; --muted: #9a9aa6; --accent: #ff4a1a; --accent-text: #ffffff;
  --good: #6fe36f; --bad: #ff3b3b;
  --b-edge: #060607; --b-dark: #18181c; --b-light: #ece3c8; --b-red: #d4202c;
  --b-green: #1d8a4c; --b-wire: #9a9aa6; --b-num: #f5f5f5;
  --chalk: #f5f5f5; --chalk-dim: rgba(245, 245, 245, .5); --chalk-yellow: #ffb000; --chalk-red: #ff5a4a;
  /* the stage: spotlights from the rig, haze on the floor */
  background:
    conic-gradient(from 160deg at 18% -6%, transparent 0deg 8deg, rgba(255, 240, 200, .15) 8deg 18deg, transparent 18deg),
    conic-gradient(from 184deg at 82% -6%, transparent 0deg 8deg, rgba(255, 110, 50, .16) 8deg 18deg, transparent 18deg),
    conic-gradient(from 172deg at 50% -8%, transparent 0deg 10deg, rgba(255, 255, 255, .08) 10deg 20deg, transparent 20deg),
    radial-gradient(ellipse 90% 25% at 50% 108%, rgba(220, 220, 235, .2), transparent 70%),
    #0a0a0c fixed;
}
html[data-skin="rock"] body { background: transparent; font-family: "Stage", "Segoe UI", sans-serif; letter-spacing: .02em; }
html[data-skin="rock"] .topbar { background: rgba(10, 10, 12, .9); border-bottom: 0.3vh solid #ff4a1a; }
html[data-skin="rock"] .turnbar { background: rgba(10, 10, 12, .9); border-top: 0.3vh solid #ff4a1a; }
/* an aluminium flight case */
html[data-skin="rock"] .chalkboard {
  padding: 0.9vh; border-radius: 1vh;
  background: linear-gradient(135deg, #d9dde3, #8f959e 38%, #e6e9ee 55%, #7d838c 80%, #c4c9d0);
  box-shadow: inset 0 0 0 0.25vh #4a4e55, 0 1vh 3vh rgba(0, 0, 0, .7);
}
html[data-skin="rock"] .slate {
  background: radial-gradient(ellipse at 50% 125%, rgba(255, 74, 26, .28), transparent 60%), #111114;
  font-family: "Stage", "Segoe UI", sans-serif; text-shadow: none;
}
html[data-skin="rock"] .board-title, html[data-skin="rock"] .grid-caption, html[data-skin="rock"] .roster-col h3,
html[data-skin="rock"] .bull-title {
  font-family: "Metal", "Stage", serif; font-weight: 400; letter-spacing: .03em;
}
html[data-skin="rock"] .board-title { color: #ff4a1a; border-bottom-color: #9a9aa6; text-shadow: 0 0 1.2vh rgba(255, 74, 26, .6); }
html[data-skin="rock"] .chalk-name { font-weight: 400; font-size: 6vh; letter-spacing: .06em; }
html[data-skin="rock"] .chalk-col.active .chalk-name { color: #ffb000; border-color: #ff4a1a; }
html[data-skin="rock"] .chalk-left { font-weight: 400; font-size: 18vh; }
html[data-skin="rock"] .chalk-col.active .chalk-left { color: #ffb000; text-shadow: 0 0 2vh rgba(255, 74, 26, .7); }
html[data-skin="rock"] .chalk-row { font-size: 4.4vh; }
html[data-skin="rock"] .chalk-row .s { color: #ff8a5a; }
html[data-skin="rock"] .game-list li b { font-weight: 400; font-size: 3.8vh; letter-spacing: .04em; }
html[data-skin="rock"] .game-list li { line-height: 1.05; }
html[data-skin="rock"] .game-list.tight li b { font-size: 3.3vh; }
html[data-skin="rock"] .game-list.many li b { font-size: 3.3vh; }
html[data-skin="rock"] .roster .person { font-size: 3.1vh; }
/* guitar picks */
html[data-skin="rock"] .turnbar .dart {
  border-radius: 45% 45% 50% 50% / 30% 30% 70% 70%; color: #fff;
  background: radial-gradient(ellipse at 35% 25%, rgba(255, 255, 255, .35), transparent 45%), linear-gradient(160deg, #e0302a, #8a1410);
  box-shadow: 0 0.6vh 1.2vh rgba(0, 0, 0, .55);
}
html[data-skin="rock"] .turnbar .dart:nth-child(2) {
  background: radial-gradient(ellipse at 35% 25%, rgba(255, 255, 255, .3), transparent 45%),
              radial-gradient(circle at 30% 60%, #3a1d08 0 12%, transparent 13%), radial-gradient(circle at 70% 40%, #4a2508 0 10%, transparent 11%),
              linear-gradient(160deg, #c27a2a, #6a3a10);
}
html[data-skin="rock"] .turnbar .dart:nth-child(3) {
  background: radial-gradient(ellipse at 35% 25%, rgba(255, 255, 255, .25), transparent 45%), linear-gradient(160deg, #2e2e36, #0e0e10);
}
html[data-skin="rock"] .dart span { font-weight: 400; font-size: 9vh; text-shadow: 0 0.3vh 0.8vh rgba(0, 0, 0, .6); }
html[data-skin="rock"] .turnbar .dart small { color: #ffd2b8; }
html[data-skin="rock"] .turnbar .dart.suggest span, html[data-skin="rock"] .turnbar .dart.suggest small { color: #ffb000; opacity: 1; }
html[data-skin="rock"] .turnbar .dart.empty { opacity: .5; }
html[data-skin="rock"] .total { font-weight: 400; }
html[data-skin="rock"] .winner-box { font-family: "Metal", "Stage", serif; }
html[data-skin="rock"] .winner-name { color: #ffb000; text-shadow: 0 0 3vh rgba(255, 74, 26, .9); }
html[data-skin="rock"] .roster-col[data-present="1"] h3::before { content: "🎸 "; }
html[data-skin="rock"] .roster-col.away h3::before { content: "🍺 "; }
html[data-skin="rock"] .roster-col h3 { color: #ffb000; }
html[data-skin="rock"] .person b { font-weight: 400; letter-spacing: .04em; }
.skin-banner.rock { background: rgba(10, 10, 12, .94); border: 0.5vh solid #ff4a1a; box-shadow: 0 0 4vh rgba(255, 74, 26, .7); }
.skin-banner.rock b { font-family: "Metal", serif; font-weight: 400; color: #ffb000; text-shadow: 0 0 2vh #ff4a1a, 0 0.4vh 0 #8a1410; }
.skin-banner.rock span { font-family: "Stage", sans-serif !important; color: #f5f5f5; }
.rock-start b { font-family: "Metal", serif; font-size: 11vh; color: #ffb000; text-shadow: 0 0 3vh #ff4a1a, 0 0.5vh 0 #8a1410; }
.rock-start .pyro {
  bottom: 0; width: 8vw; height: 70vh; transform-origin: bottom; transform: scaleY(0);
  background: linear-gradient(0deg, rgba(255, 74, 26, .95), rgba(255, 176, 0, .85) 40%, rgba(255, 240, 160, .4) 75%, transparent);
  filter: blur(0.6vh); border-radius: 50% 50% 0 0;
  animation: pyro 0.9s ease-out 0.2s 2 alternate both;
}
.rock-start .pyro:nth-of-type(1) { left: 2%; } .rock-start .pyro:nth-of-type(2) { left: 18%; animation-delay: .35s; }
.rock-start .pyro:nth-of-type(3) { left: 34%; } .rock-start .pyro:nth-of-type(4) { left: 58%; }
.rock-start .pyro:nth-of-type(5) { left: 74%; animation-delay: .35s; } .rock-start .pyro:nth-of-type(6) { left: 90%; }
@keyframes pyro { to { transform: scaleY(1); } }
.skin-preview.rock .sample { background: #111114; border: 6px solid #a9aeb6; font-family: "Stage", sans-serif; color: #f5f5f5; }
.skin-preview.rock .sample b { color: #ffb000; font-size: 44px; font-weight: 400; }
.skin-preview.rock .sample small { font-family: "Metal", serif; color: #ff4a1a; font-size: 14px; }

/* the shared banner shape for the shop and the stage */
.skin-banner.records, .skin-banner.rock {
  clip-path: none; font-style: normal; flex-direction: column; align-items: center; gap: 0.5vh;
  padding: 2vh 7vh; border-radius: 1.6vh; animation: banner-in 0.5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.skin-banner.records b, .skin-banner.rock b { font-size: 10vh; }
.skin-banner.records span, .skin-banner.rock span { font-size: 5vh; font-family: "Chalk", cursive; }
.skin-banner.records.bad b { color: #ff8a6a; }
.skin-banner.rock.bad { animation: banner-in 0.5s both, shake 0.15s linear 0.5s 6; }
@keyframes shake { 25% { transform: translateX(calc(-50% - 1vh)); } 75% { transform: translateX(calc(-50% + 1vh)); } }

/* Settings: skin tiles and the sound table */
.skin-tile .skin-preview { height: 120px; border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.skin-preview img { height: 120px; justify-self: center; }
.skin-preview .sample { display: flex; flex-direction: column; justify-content: center; padding: 10px; }
.skin-preview.pub .sample { background: radial-gradient(ellipse at 50% 40%, #33423c, #1c2620); border: 6px solid #8a5729; font-family: "Chalk", cursive; color: #f3efe4; }
.skin-preview.motorsport .sample {
  background: linear-gradient(180deg, #15171d, #0b0c10); border-left: 8px solid #e10600;
  font-family: "Racing", sans-serif; font-style: italic; color: #fff;
}
.skin-preview .sample b { font-size: 34px; line-height: 1; }
.skin-preview.motorsport .sample b { color: #ffd400; font-weight: 900; }
.skin-preview .sample small { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.sound-table { border-collapse: collapse; margin: 8px 0 16px; }
.sound-table td { padding: 5px 10px 5px 0; }
.sound-table select { min-width: 260px; }
.sound-table .play { min-width: 0; padding: 4px 12px; }
.volume-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.volume-row input[type="range"] { width: 240px; }