/* =============================================================================
 * Kosmetik aus dem Casino-Shop (cosmetics.js, CASINO.md Etappe 5): Namensfarben, Rahmen,
 * Symbole, Titel-Sticker und Auftritte. Nur One-UI-Tokens, kein Glow; Bewegung aus bei
 * „weniger Bewegung". Gilt auf Spielerseite, Bühne und Bestenliste.
 * ============================================================================= */

/* Namensfarben (überschreiben die Farbe der jeweiligen Liste). Im hellen Theme die dunkleren
   Ink-Varianten, sonst verschwinden Gelb und Gold auf hellem Grund; dunkle Inseln (Bühne) zurück. */
:root, [data-ou-theme="dark"] { --cos-red: var(--ou-red); --cos-yellow: var(--ou-yellow); --cos-green: var(--ou-green); --cos-blue: var(--ou-blue); --cos-hi: var(--ou-cream); }
[data-ou-theme="light"] { --cos-red: var(--ou-red-ink); --cos-yellow: var(--ou-yellow-ink); --cos-green: var(--ou-green-ink); --cos-blue: var(--ou-blue-ink); --cos-hi: var(--ou-yellow); }
[data-cos-color="red"] { color: var(--cos-red) !important; }
[data-cos-color="yellow"] { color: var(--cos-yellow) !important; }
[data-cos-color="green"] { color: var(--cos-green) !important; }
[data-cos-color="blue"] { color: var(--cos-blue) !important; }
[data-cos-color="duo"], [data-cos-color="foil"], [data-cos-color="marquee"], [data-cos-color="gold"] {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
[data-cos-color="duo"] { background-image: linear-gradient(90deg, var(--cos-red), var(--cos-yellow)); }
[data-cos-color="foil"] {
  background-image: linear-gradient(100deg, var(--cos-red), var(--cos-yellow) 25%, var(--cos-blue) 50%, var(--cos-green) 75%, var(--cos-red));
  background-size: 300% 100%;
  animation: cos-slide 5s linear infinite;
}
[data-cos-color="marquee"] {
  background-image: repeating-linear-gradient(90deg, var(--cos-yellow) 0 7px, var(--cos-red) 7px 14px);
  background-size: 28px 100%;
  animation: cos-slide-px 900ms linear infinite;
}
[data-cos-color="gold"] {
  background-image: linear-gradient(90deg, var(--cos-yellow) 0 40%, var(--cos-hi) 50%, var(--cos-yellow) 60% 100%);
  background-size: 250% 100%;
  animation: cos-slide 3.2s ease-in-out infinite;
}
@keyframes cos-slide { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes cos-slide-px { from { background-position: 0 0; } to { background-position: 28px 0; } }

/* Mini-Profilbild neben Namen in Listen (Cosmetics.face): ohne Symbol und Krone, damit die Zeile ruhig bleibt */
.cos-face { width: 28px; height: 28px; font-size: 1rem; }
.cos-face::after { content: attr(data-initial); }
.cos-face.is-sm { width: 20px; height: 20px; font-size: .75rem; }
.cos-face.is-lg { width: 44px; height: 44px; font-size: 1.5rem; }
.cos-face .cos-symbol, .cos-face[data-cos-frame="crown"]::before { display: none; }
.cos-who { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-width: 0; vertical-align: middle; }
.cos-who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-entrance-who { display: grid; grid-template-columns: auto minmax(0, auto); align-items: center; justify-content: center; gap: 4px 12px; }
.cos-entrance-who .cos-face { grid-row: span 2; }
.cos-entrance-who .cos-title { grid-column: 2; justify-self: start; }
.cos-face.is-entrance { width: 56px; height: 56px; font-size: 2rem; }

/* Avatar: Profilbild (PROFIL.md), Rahmen und Symbol */
.cos-has-img { position: relative; color: transparent !important; }
.cos-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
[data-cos-frame], .avatar:has(> .cos-symbol) { position: relative; overflow: visible; }
[data-cos-frame="cardboard"] { outline: 2px dashed var(--ou-paper); outline-offset: 2px; }
[data-cos-frame="red"] { box-shadow: 0 0 0 2px var(--ou-red); }
[data-cos-frame="double"] { box-shadow: 0 0 0 2px var(--ou-cream), 0 0 0 4px var(--ou-red); }
[data-cos-frame="bulbs"] { outline: 3px dotted var(--ou-yellow); outline-offset: 2px; animation: cos-bulbs 1s steps(1, end) infinite; }
[data-cos-frame="crown"] { box-shadow: 0 0 0 3px var(--ou-yellow); }
[data-cos-frame="crown"]::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  width: 20px;
  height: 13px;
  background: url('/one-ui/logo/svg/myso44-crown.svg') center / contain no-repeat;
  transform: translateX(-50%) rotate(-8deg);
  pointer-events: none;
}
@keyframes cos-bulbs { 50% { outline-color: var(--ou-red); } }
.cos-symbol {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--ou-black);
  border-radius: 50%;
  background: var(--ou-yellow);
  color: var(--ou-black);
  pointer-events: none;
}
.cos-symbol svg { width: 11px; height: 11px; }

/* Titel-Sticker hinter dem Namen */
.cos-title {
  display: inline-block;
  flex: none;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--ou-radius-sm);
  background: var(--ou-cream);
  color: var(--ou-black);
  font: 700 .625rem/1.5 var(--ou-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  transform: rotate(-2deg);
}
/* In engen Listen gibt der Titel zuerst nach, der Name bleibt lesbar */
.cos-title { min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
[data-cos-name][data-cos-title] { min-width: 3.5em; }
/* Lobby-Kachel: ist sie zu schmal für Name, Titel und Guthaben, entfällt der Titel dort */
.ptile { container-type: inline-size; }
@container (max-width: 260px) { .ptile .cos-title { display: none; } }

/* Auftritte: Karte oben in der Mitte, auf der Bühne klein unten links */
.cos-entrance { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-content: start; padding-top: 16vh; pointer-events: none; transition: opacity 400ms var(--ou-ease); }
.cos-entrance.is-out { opacity: 0; }
.cos-entrance-card {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px 26px 16px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-black);
  color: var(--ou-cream);
  transform: rotate(-2deg);
  animation: cos-pop 520ms var(--ou-ease) both;
}
.cos-entrance-kicker { color: var(--ou-yellow); font: 700 .75rem/1.3 var(--ou-font-body); letter-spacing: .1em; text-transform: uppercase; }
.cos-entrance-name { font: 400 clamp(2rem, 7vw, 3.4rem)/1 var(--ou-font-display); letter-spacing: .04em; }
.cos-entrance-name + .cos-title { max-width: none; margin: 4px 0 0; font-size: .75rem; }
@keyframes cos-pop { from { opacity: 0; transform: translateY(-24px) rotate(-6deg) scale(.9); } }
.cos-entrance.is-stage { justify-items: start; align-content: end; padding: 0 0 5vh 3vw; }
.cos-entrance.is-stage .cos-entrance-name { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.cos-coin {
  position: absolute;
  top: -40px;
  width: 26px;
  height: 26px;
  border: 3px solid color-mix(in srgb, var(--ou-black) 25%, var(--ou-yellow));
  border-radius: 50%;
  background: var(--ou-yellow);
  animation: cos-fall 1.9s cubic-bezier(.4, 0, .9, .6) both;
}
@keyframes cos-fall { to { transform: translateY(105vh) rotate(calc(var(--spin, 1) * 540deg)); } }
/* Scheinwerfer: ein dunkler Vorhang mit Lichtkegel, der die Karte findet */
.cos-entrance.is-spotlight::before {
  content: '';
  position: absolute;
  top: -100vh;
  left: -100vw;
  width: 300vw;
  height: 300vh;
  background: radial-gradient(circle at 50% 50%, transparent 0 130px, color-mix(in srgb, var(--ou-black) 70%, transparent) 190px);
  animation: cos-sweep 1.6s var(--ou-ease) both;
}
.cos-entrance.is-spotlight.is-stage::before { display: none; }
@keyframes cos-sweep {
  0% { transform: translate(-30vw, 10vh); }
  45% { transform: translate(25vw, -4vh); }
  100% { transform: translate(0, calc(16vh - 50vh + 60px)); }
}

@media (prefers-reduced-motion: reduce) {
  [data-cos-color], [data-cos-frame], .cos-entrance-card, .cos-coin, .cos-entrance::before { animation: none !important; }
}

/* =============================================================================
 * Ausbau Shop (AUSBAU.md, A12): weitere Namensfarben, Rahmen, Auftritte und die neuen Plätze
 * Profilkarte (data-cos-card), Chat-Blase (data-cos-bubble-style), Pinnwand
 * (data-cos-wall), Siegerpose (data-cos-pose-style). Nur Tokens, kein Glow.
 * ============================================================================= */

/* Weitere Namensfarben */
[data-cos-color="cream"] { color: var(--ou-cream) !important; }
[data-ou-theme="light"] [data-cos-color="cream"] { color: var(--ou-black) !important; }
[data-cos-color="sea"], [data-cos-color="sunset"], [data-cos-color="flicker"], [data-cos-color="ticker"],
[data-cos-color="autumn"], [data-cos-color="frost"], [data-cos-color="bloom"], [data-cos-color="sunburn"],
[data-cos-color="aurora"], [data-cos-color="ink"] {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
[data-cos-color="sea"] { background-image: linear-gradient(90deg, var(--cos-blue), var(--cos-green)); }
[data-cos-color="sunset"] { background-image: linear-gradient(180deg, var(--cos-yellow) 20%, var(--cos-red) 80%); }
[data-cos-color="flicker"] { background-image: linear-gradient(var(--cos-yellow), var(--cos-yellow)); animation: cos-flicker 4s steps(1, end) infinite; }
[data-cos-color="ticker"] {
  background-image: repeating-linear-gradient(90deg, var(--cos-green) 0 8px, var(--cos-blue) 8px 16px);
  background-size: 32px 100%;
  animation: cos-slide-ticker 1.4s linear infinite;
}
[data-cos-color="autumn"] { background-image: linear-gradient(90deg, var(--cos-red), var(--cos-yellow) 55%, color-mix(in srgb, var(--cos-red) 55%, var(--ou-black))); }
[data-cos-color="frost"] { background-image: linear-gradient(90deg, var(--cos-blue) 0 35%, var(--cos-hi) 50%, var(--cos-blue) 65% 100%); background-size: 250% 100%; animation: cos-slide 4s ease-in-out infinite; }
[data-cos-color="bloom"] { background-image: linear-gradient(90deg, var(--cos-green) 30%, var(--cos-red)); }
[data-cos-color="sunburn"] { background-image: linear-gradient(180deg, var(--cos-red) 60%, var(--cos-yellow)); }
[data-cos-color="aurora"] {
  background-image: linear-gradient(100deg, var(--cos-green), var(--cos-blue) 30%, var(--cos-green) 60%, var(--cos-blue));
  background-size: 300% 100%;
  animation: cos-slide 8s ease-in-out infinite alternate;
}
[data-cos-color="ink"] { background-image: linear-gradient(180deg, var(--cos-blue) 70%, var(--cos-red)); }
@keyframes cos-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .35; } 44% { opacity: 1; } 71% { opacity: .5; } 72% { opacity: 1; } }
@keyframes cos-slide-ticker { from { background-position: 0 0; } to { background-position: 32px 0; } }

/* Weitere Rahmen */
[data-cos-frame="green"] { box-shadow: 0 0 0 2px var(--ou-green); }
[data-cos-frame="blue"] { box-shadow: 0 0 0 2px var(--ou-blue); }
[data-cos-frame="stitch"] { outline: 2px dashed var(--ou-yellow); outline-offset: 3px; }
[data-cos-frame="ticket"] { outline: 3px dotted var(--ou-cream); outline-offset: 1px; box-shadow: 0 0 0 5px var(--ou-red); }
[data-cos-frame="disco"] { box-shadow: 0 0 0 3px var(--ou-red); animation: cos-disco 1.6s steps(1, end) infinite; }
[data-cos-frame="lights"] { outline: 3px dotted var(--ou-green); outline-offset: 2px; animation: cos-lights 1.2s steps(1, end) infinite; }
[data-cos-frame="film"] { box-shadow: 0 0 0 3px var(--ou-black), 0 0 0 5px var(--ou-cream); outline: 2px dashed var(--ou-black); outline-offset: 4px; }
[data-cos-frame="goldtape"] { box-shadow: 0 0 0 2px var(--ou-yellow), 0 0 0 5px color-mix(in srgb, var(--ou-yellow) 35%, transparent); }
@keyframes cos-disco { 25% { box-shadow: 0 0 0 3px var(--ou-yellow); } 50% { box-shadow: 0 0 0 3px var(--ou-green); } 75% { box-shadow: 0 0 0 3px var(--ou-blue); } }
@keyframes cos-lights { 33% { outline-color: var(--ou-red); } 66% { outline-color: var(--ou-yellow); } }

/* Profilkarte: Hintergrund (profile-card.js setzt data-cos-card) */
.pc-card[data-cos-card] { --cos-bg: var(--ou-surface); }
.pc-card[data-cos-card="paper"] { background: linear-gradient(var(--ou-paper) 0 72px, var(--ou-surface) 72px); }
.pc-card[data-cos-card="paper"] .pc-head { color: var(--ou-black); }
.pc-card[data-cos-card="stripes"] { background: repeating-linear-gradient(-45deg, var(--ou-surface) 0 14px, color-mix(in srgb, var(--ou-text) 5%, var(--ou-surface)) 14px 28px); }
.pc-card[data-cos-card="dots"] { background: radial-gradient(color-mix(in srgb, var(--ou-text) 12%, transparent) 1.2px, transparent 1.6px) 0 0 / 12px 12px, var(--ou-surface); }
.pc-card[data-cos-card="grid"] { background: linear-gradient(color-mix(in srgb, var(--ou-blue) 16%, transparent) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, color-mix(in srgb, var(--ou-blue) 16%, transparent) 1px, transparent 1px) 0 0 / 16px 16px, var(--ou-surface); }
.pc-card[data-cos-card="marquee"] { border: 3px dotted var(--ou-yellow); animation: cos-bulbs-border 1s steps(1, end) infinite; }
.pc-card[data-cos-card="confetti"] { background: radial-gradient(circle at 12% 18%, var(--ou-red) 0 3px, transparent 4px), radial-gradient(circle at 78% 12%, var(--ou-yellow) 0 3px, transparent 4px), radial-gradient(circle at 88% 64%, var(--ou-blue) 0 3px, transparent 4px), radial-gradient(circle at 22% 80%, var(--ou-green) 0 3px, transparent 4px), radial-gradient(circle at 52% 40%, var(--ou-red) 0 2px, transparent 3px), var(--ou-surface); background-size: 180px 180px; }
.pc-card[data-cos-card="gold"] { border: 2px solid var(--ou-yellow); background: linear-gradient(115deg, var(--ou-surface) 40%, color-mix(in srgb, var(--ou-yellow) 12%, var(--ou-surface)) 50%, var(--ou-surface) 60%) 0 0 / 300% 100%, var(--ou-surface); animation: cos-slide 6s ease-in-out infinite; }
.pc-card[data-cos-card="autumn"] { background: radial-gradient(ellipse 10px 6px at 15% 20%, var(--ou-red) 98%, transparent), radial-gradient(ellipse 8px 5px at 80% 30%, var(--ou-yellow) 98%, transparent), radial-gradient(ellipse 9px 6px at 60% 85%, color-mix(in srgb, var(--ou-red) 60%, var(--ou-yellow)) 98%, transparent), var(--ou-surface); background-size: 200px 200px; }
.pc-card[data-cos-card="snow"] { background: radial-gradient(var(--ou-cream) 1.5px, transparent 2px) 0 0 / 34px 34px, radial-gradient(var(--ou-cream) 1px, transparent 1.5px) 17px 17px / 34px 34px, color-mix(in srgb, var(--ou-blue) 14%, var(--ou-surface)); }
.pc-card[data-cos-card="beach"] { background: linear-gradient(var(--ou-surface) 0 55%, color-mix(in srgb, var(--ou-blue) 18%, var(--ou-surface)) 55% 78%, color-mix(in srgb, var(--ou-yellow) 18%, var(--ou-surface)) 78%); }
.pc-card[data-cos-card="poster"] { border: 2px solid var(--ou-red); background: linear-gradient(var(--ou-red) 0 8px, var(--ou-surface) 8px calc(100% - 8px), var(--ou-red) calc(100% - 8px)); }
@keyframes cos-bulbs-border { 50% { border-color: var(--ou-red); } }

/* Chat-Blase (cosmetics.js setzt data-cos-bubble-style an die Nachricht) */
[data-cos-bubble-style] .chat-text { padding: 6px 10px; border-radius: var(--ou-radius-sm); }
[data-cos-bubble-style="red"] .chat-text { border: 1px solid var(--ou-red); }
[data-cos-bubble-style="yellow"] .chat-text { border: 1px solid var(--ou-yellow); }
[data-cos-bubble-style="paper"] .chat-text { background: var(--ou-paper); color: var(--ou-black); }
[data-cos-bubble-style="ticket"] .chat-text { border: 2px dashed var(--ou-red); background: color-mix(in srgb, var(--ou-red) 8%, transparent); }
[data-cos-bubble-style="sticker"] .chat-text { display: inline-block; background: var(--ou-yellow); color: var(--ou-black); transform: rotate(-1.5deg); }
[data-cos-bubble-style="postcard"] .chat-text { border: 2px solid var(--ou-blue); background: repeating-linear-gradient(-45deg, var(--ou-red) 0 6px, var(--ou-cream) 6px 12px, var(--ou-blue) 12px 18px, var(--ou-cream) 18px 24px) border-box; background-clip: padding-box; background-color: var(--ou-surface); }
[data-cos-bubble-style="gold"] .chat-text { border: 2px solid var(--ou-yellow); background: color-mix(in srgb, var(--ou-yellow) 10%, transparent); }

/* Pinnwand-Stil (profile-card.js setzt data-cos-wall am Abschnitt) */
.pc-wall[data-cos-wall="yellow"] .pc-note { background: var(--ou-yellow); }
.pc-wall[data-cos-wall="blue"] .pc-note { background: color-mix(in srgb, var(--ou-blue) 55%, var(--ou-cream)); }
.pc-wall[data-cos-wall="graph"] .pc-note { background: linear-gradient(color-mix(in srgb, var(--ou-blue) 22%, transparent) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, color-mix(in srgb, var(--ou-blue) 22%, transparent) 1px, transparent 1px) 0 0 / 12px 12px, var(--ou-cream); }
.pc-wall[data-cos-wall="kraft"] .pc-note { background: color-mix(in srgb, var(--ou-yellow) 35%, color-mix(in srgb, var(--ou-red) 30%, var(--ou-paper))); }
.pc-wall[data-cos-wall="cork"] { padding: 12px; border-radius: var(--ou-radius); background: radial-gradient(color-mix(in srgb, var(--ou-black) 18%, transparent) 1px, transparent 1.5px) 0 0 / 7px 7px, color-mix(in srgb, var(--ou-yellow) 45%, color-mix(in srgb, var(--ou-red) 30%, var(--ou-black))); }
.pc-wall[data-cos-wall="cork"] h4 { color: var(--ou-cream); }
.pc-wall[data-cos-wall="cork"] .pc-note { position: relative; }
.pc-wall[data-cos-wall="cork"] .pc-note::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ou-red); translate: -50% 0; }
.pc-wall[data-cos-wall="leaves"] .pc-note:nth-child(3n + 1) { background: color-mix(in srgb, var(--ou-red) 45%, var(--ou-cream)); }
.pc-wall[data-cos-wall="leaves"] .pc-note:nth-child(3n + 2) { background: color-mix(in srgb, var(--ou-yellow) 60%, var(--ou-cream)); }
.pc-wall[data-cos-wall="leaves"] .pc-note:nth-child(3n) { background: color-mix(in srgb, var(--ou-yellow) 30%, color-mix(in srgb, var(--ou-red) 35%, var(--ou-cream))); }
.pc-wall[data-cos-wall="bloom"] .pc-note:nth-child(odd) { background: color-mix(in srgb, var(--ou-green) 40%, var(--ou-cream)); }
.pc-wall[data-cos-wall="bloom"] .pc-note:nth-child(even) { background: color-mix(in srgb, var(--ou-red) 30%, var(--ou-cream)); }

/* Siegerpose (Podest auf Bühne und Handy; cosmetics.js setzt data-cos-pose-style) */
[data-cos-pose-style] { transform-origin: 50% 100%; }   /* sitzt auf dem Namens-Element (inline-flex) */
[data-cos-pose-style="jump"] { animation: cos-pose-jump 1.1s var(--ou-ease) 900ms 3 both; }
[data-cos-pose-style="wave"] { animation: cos-pose-wave 1.4s ease-in-out 900ms 3 both; }
[data-cos-pose-style="spin"] { animation: cos-pose-spin 1.2s var(--ou-ease) 900ms 2 both; }
[data-cos-pose-style="flex"] { animation: cos-pose-flex .9s ease-in-out 900ms 3 both; }
[data-cos-pose-style="stomp"] { animation: cos-pose-stomp .8s var(--ou-ease) 900ms 1 both; }
[data-cos-pose-style="dance"] { animation: cos-pose-dance 1.6s ease-in-out 900ms 3 both; }
[data-cos-pose-style="bow"] { animation: cos-pose-bow 1.8s ease-in-out 900ms 2 both; }
@keyframes cos-pose-jump { 0%, 100% { transform: none; } 40% { transform: translateY(-26%); } 60% { transform: translateY(-26%) rotate(-4deg); } }
@keyframes cos-pose-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes cos-pose-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes cos-pose-flex { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18, 1.1); } }
@keyframes cos-pose-stomp { 0% { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1); } }
@keyframes cos-pose-dance { 0%, 100% { transform: none; } 25% { transform: translateX(-6%) rotate(-5deg); } 50% { transform: translateY(-12%); } 75% { transform: translateX(6%) rotate(5deg); } }
@keyframes cos-pose-bow { 0%, 100% { transform: none; } 40%, 60% { transform: rotateX(38deg) translateY(6%); } }

/* Weitere Auftritte: Kartenregen, Vorhang, Trommelwirbel, Laub, Schnee, Feuerwerk */
.cos-fall { position: fixed; top: -40px; z-index: 61; width: 18px; height: 26px; border-radius: 3px; pointer-events: none; animation: cos-fall 2.2s linear forwards; }
.cos-fall.is-card { background: var(--ou-cream); box-shadow: inset 0 0 0 2px var(--ou-red); }
.cos-fall.is-leaf { width: 16px; height: 10px; border-radius: 50% 0; background: var(--ou-red); }
.cos-fall.is-leaf:nth-child(odd) { background: var(--ou-yellow); }
.cos-fall.is-snow { width: 8px; height: 8px; border-radius: 50%; background: var(--ou-cream); }
@keyframes cos-fall { to { transform: translateY(110vh) rotate(540deg); } }
.cos-entrance.is-curtain::before, .cos-entrance.is-curtain::after { content: ''; position: fixed; top: 0; bottom: 0; z-index: -1; width: 50%; background: repeating-linear-gradient(90deg, var(--ou-red) 0 22px, color-mix(in srgb, var(--ou-red) 80%, var(--ou-black)) 22px 30px); animation: cos-curtain 1.6s var(--ou-ease) 300ms forwards; }
.cos-entrance.is-curtain::before { left: 0; }
.cos-entrance.is-curtain::after { right: 0; animation-name: cos-curtain-r; }
@keyframes cos-curtain { to { transform: translateX(-100%); } }
@keyframes cos-curtain-r { to { transform: translateX(100%); } }
.cos-entrance.is-drumroll .cos-entrance-card { animation: cos-drum 1.2s linear, cos-drum-hit 400ms var(--ou-ease) 1.2s both; }
@keyframes cos-drum { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } }
@keyframes cos-drum-hit { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
.cos-spark { position: fixed; z-index: 61; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; animation: cos-spark 1.1s var(--ou-ease) forwards; }
@keyframes cos-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
.cos-entrance.is-still .cos-entrance-card, .cos-entrance.is-still::before, .cos-entrance.is-still::after { animation: none; }
.cos-entrance.is-still.is-curtain::before, .cos-entrance.is-still.is-curtain::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-cos-pose-style], [data-cos-color="flicker"], [data-cos-color="ticker"], [data-cos-color="aurora"], [data-cos-color="frost"],
  [data-cos-frame="disco"], [data-cos-frame="lights"], .pc-card[data-cos-card] { animation: none !important; }
}