*{box-sizing:border-box}html,body,#stage{width:100%;height:100%;margin:0;overflow:hidden;background:transparent}body{font-family:Inter,system-ui,Arial,sans-serif;color:#fff}#stage{position:relative;background:#05070b}#media,#media iframe,#media .main-video{width:100%;height:100%;border:0}#media iframe,#media .main-video{display:block;object-fit:cover;background:#000}.song-audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}#blackout{position:absolute;inset:0;background:#000;display:none;z-index:10}#paused{position:absolute;inset:0;display:none;place-items:center;background:#000;color:#fff;font-size:clamp(34px,7vw,100px);font-weight:1000;z-index:11}#metadata{position:absolute;left:3%;right:3%;bottom:4%;z-index:20;display:flex;flex-direction:column;align-items:flex-start;padding:28px 34px;border-radius:22px;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.48) 65%,rgba(0,0,0,.05));text-shadow:0 4px 14px #000;box-shadow:0 12px 50px rgba(0,0,0,.35)}#metadata h1{margin:0;max-width:100%;font-size:clamp(42px,6.2vw,106px);line-height:.98;font-weight:1000;letter-spacing:-.035em;overflow-wrap:anywhere}#metadata p{margin:14px 0 0;font-size:clamp(28px,3.5vw,58px);line-height:1;font-weight:800;overflow-wrap:anywhere}#warning{width:100%;display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:12px 20px;border:4px solid #ff4b4b;border-radius:12px;background:linear-gradient(90deg,#b40000,#ef1010);color:#fff;font-size:clamp(24px,3.3vw,54px);font-weight:1000;letter-spacing:.05em;box-shadow:0 0 32px rgba(255,0,0,.65)}#warning[hidden]{display:none}.warning-icon{display:grid;place-items:center;flex:0 0 auto;width:clamp(48px,5vw,82px);height:clamp(48px,5vw,82px);border-radius:50%;background:#fff;color:#c40000;font-size:clamp(36px,4vw,68px);line-height:1;font-weight:1000}
/* Dauerhafte Playeranimation im Hintergrund */
#media {
  position: relative;
  overflow: hidden;
}

#media .background-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Videos und eingebettete Player liegen über der Animation */
#media .foreground-media,
#media iframe,
#media .spotify-embed-container,
#media .song-audio {
  position: absolute;
  z-index: 2;
}

/* Optionales Song-Cover: Münzrahmen mittig vor der laufenden Animation. */
#media .song-cover-container {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 650 !important;
  width: min(92vw, 92vh, 1180px) !important;
  aspect-ratio: 1 / 1 !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  filter: drop-shadow(0 24px 70px rgba(0,0,0,.82)) !important;
}

#media .song-cover-coin-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

#media .song-cover-image {
  position: absolute !important;
  left: 32.2% !important;
  top: 31.4% !important;
  z-index: 2 !important;
  display: block !important;
  width: 35.6% !important;
  height: 35.6% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  background: #050505 !important;
  box-shadow: inset 0 0 0 3px rgba(255,210,105,.32), 0 10px 34px rgba(0,0,0,.72) !important;
}

#media .foreground-media,
#media iframe,
#media .spotify-embed-container {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#media .song-audio {
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Gesamter Playerbereich */
#media {
  position: relative !important;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Playeranimation: dauerhaft im Hintergrund */
#media .background-animation,
#media .fallback-animation {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

/* Spotify-Fenster: sichtbar vor der Animation */
#spotify-embed-container,
#media .spotify-embed-container {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(90vw, 800px) !important;
  height: 352px !important;

  z-index: 100 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* Das eigentliche Spotify-iFrame */
#spotify-embed-container iframe,
#media .spotify-embed-container iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  z-index: 101 !important;
  display: block !important;
}

/* Verhindert, dass allgemeine iframe-Regeln Spotify überschreiben */
#media iframe:not(#spotify-embed-container iframe) {
  z-index: 20;
}

/* BEGIN AUTOMATIC SPOTIFY OBS LAYERS */

/*
 * Der Media-Bereich bildet einen eigenen Ebenenstapel.
 */
#media {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/*
 * Playeranimation: immer laufende, unterste Ebene.
 */
#media video.background-animation,
#media video.fallback-animation,
#media .background-animation,
#media .fallback-animation {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}

/*
 * Spotify-Karte: mittig und deutlich vor der Animation.
 */
#media #spotify-embed-container,
#media .spotify-embed-container {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(88vw, 760px) !important;
  height: 352px !important;
  min-height: 352px !important;
  max-height: 352px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
}

/*
 * Das von Spotify erzeugte iFrame bleibt ebenfalls ganz oben.
 */
#media #spotify-embed-container iframe,
#media .spotify-embed-container iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 352px !important;
  display: block !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1001 !important;
}

/*
 * Beim gemeldeten Ende sofort ausblenden.
 * Anschließend setzt der Server den Zustand auf idle.
 */
#media .spotify-player-finished {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Sonstige Videos und iFrames liegen vor der Animation,
 * aber unterhalb von Spotify.
 */
#media .foreground-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 100 !important;
}

#media iframe:not(
  #spotify-embed-container iframe
) {
  z-index: 100 !important;
}

/* END AUTOMATIC SPOTIFY OBS LAYERS */

/* BEGIN SPOTIFY CLICK LAYER FIX */

/*
 * Der Medienbereich bildet die gemeinsame Ebenenstruktur.
 */
#media {
  position: relative !important;
  isolation: isolate;
}

/*
 * Die Animation bleibt ganz hinten.
 */
#media .background-animation,
#media .fallback-animation {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/*
 * Spotify liegt vor der Animation und bleibt anklickbar.
 */
#spotify-embed-container,
#media .spotify-embed-container {
  position: absolute !important;
  z-index: 500 !important;
  pointer-events: auto !important;
}

#spotify-embed-container iframe,
#media .spotify-embed-container iframe {
  position: relative !important;
  z-index: 501 !important;
  pointer-events: auto !important;
}

/*
 * Titel, Künstler und sonstige Texte dürfen sichtbar bleiben,
 * blockieren aber keine Schaltflächen mehr.
 */
#media .song-info,
#media .song-meta,
#media .song-metadata,
#media .metadata,
#media .track-info,
#media .player-info,
#media .title-overlay,
#media .text-overlay,
#media [class*="song-info"],
#media [class*="metadata"],
#media [class*="track-info"],
#media [class*="title-overlay"],
#media [class*="text-overlay"] {
  pointer-events: none !important;
}

/*
 * Auch große schwarze Textflächen dürfen nicht vor Spotify liegen.
 */
#media > div:not(.spotify-embed-container):not(#spotify-embed-container) {
  pointer-events: none;
}

/*
 * Andere echte Bedienelemente bleiben verwendbar.
 */
#media button,
#media a,
#media input,
#media iframe,
#media video,
#media audio,
#media .spotify-embed-container,
#media #spotify-embed-container {
  pointer-events: auto;
}

/* END SPOTIFY CLICK LAYER FIX */

/* BEGIN SHORT SPOTIFY TEXT OVERLAY */

#media {
  position: relative !important;
  isolation: isolate;
}

/*
 * Das schwarze Titel-/Künstlerfeld endet deutlich vor dem
 * Spotify-Playbutton.
 */
#media .song-info,
#media .song-meta,
#media .song-metadata,
#media .metadata,
#media .track-info,
#media .player-info,
#media .title-overlay,
#media .text-overlay,
#media [class*="song-info"],
#media [class*="song-meta"],
#media [class*="metadata"],
#media [class*="track-info"],
#media [class*="title-overlay"],
#media [class*="text-overlay"] {
  width: auto !important;
  max-width: 58% !important;
  right: auto !important;

  padding-right: 24px !important;

  pointer-events: none !important;
  z-index: 20 !important;
}

/*
 * Spotify liegt über dem Textbereich und bleibt vollständig
 * anklickbar.
 */
#spotify-embed-container,
#media .spotify-embed-container {
  z-index: 100 !important;
  pointer-events: auto !important;
}

#spotify-embed-container iframe,
#media .spotify-embed-container iframe,
#media iframe[src*="open.spotify.com"] {
  z-index: 101 !important;
  pointer-events: auto !important;
}

/*
 * Keine unsichtbare Fläche darf den rechten Bereich des
 * Spotify-Players blockieren.
 */
#media .foreground-media,
#media .spotify-embed-container,
#spotify-embed-container {
  pointer-events: auto !important;
}

/* END SHORT SPOTIFY TEXT OVERLAY */

/* BEGIN OBS COMPACT SONG TEXT */

#media {
  position: relative !important;
  isolation: isolate !important;
}

/*
 * Titelbereich nur noch links unten.
 * Er endet deutlich vor den Spotify-Bedienelementen.
 */
#media .song-info,
#media .song-meta,
#media .song-metadata,
#media .metadata,
#media .track-info,
#media .player-info,
#media .title-overlay,
#media .text-overlay,
#media [class*="song-info"],
#media [class*="song-meta"],
#media [class*="metadata"],
#media [class*="track-info"],
#media [class*="title-overlay"],
#media [class*="text-overlay"] {
  position: absolute !important;

  left: 2.5% !important;
  right: auto !important;
  top: auto !important;
  bottom: 3% !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 42% !important;
  height: auto !important;
  min-height: 0 !important;

  padding: 14px 22px !important;
  margin: 0 !important;

  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.72) !important;

  z-index: 20 !important;
  pointer-events: none !important;
}

/*
 * Spotify liegt immer darüber.
 */
#spotify-embed-container,
#media .spotify-embed-container {
  z-index: 100 !important;
  pointer-events: auto !important;
}

#spotify-embed-container iframe,
#media .spotify-embed-container iframe,
#media iframe[src*="spotify.com"] {
  z-index: 101 !important;
  pointer-events: auto !important;
}

/* END OBS COMPACT SONG TEXT */

/* =========================================================
   SPOTIFY: KEIN TITELFELD – NUR TRIGGERWARNUNG OBEN MITTIG
   ========================================================= */

/*
 * Sobald im Player Spotify aktiv ist, werden alle normalen
 * Titel-, Künstler- und Metadatenfelder ausgeblendet.
 */
body.spotify-active #media .song-info,
body.spotify-active #media .song-meta,
body.spotify-active #media .song-metadata,
body.spotify-active #media .metadata,
body.spotify-active #media .track-info,
body.spotify-active #media .player-info,
body.spotify-active #media .title-overlay,
body.spotify-active #media .text-overlay,
body.spotify-active #media [class*="song-info"],
body.spotify-active #media [class*="song-meta"],
body.spotify-active #media [class*="metadata"],
body.spotify-active #media [class*="track-info"],
body.spotify-active #media [class*="title-overlay"],
body.spotify-active #media [class*="text-overlay"] {
  display: none !important;
}

/*
 * Die Triggerwarnung bleibt sichtbar und sitzt oben mittig.
 */
body.spotify-active #media .trigger-warning,
body.spotify-active #media .triggerWarning,
body.spotify-active #media [class*="trigger-warning"],
body.spotify-active #media [class*="triggerWarning"] {
  display: block !important;

  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translateX(-50%) !important;

  width: max-content !important;
  max-width: min(90%, 1000px) !important;
  min-width: 0 !important;
  height: auto !important;

  margin: 0 !important;
  padding: 10px 20px !important;

  border: 1px solid rgba(255, 70, 90, 0.8) !important;
  border-radius: 10px !important;

  background: rgba(130, 0, 18, 0.92) !important;
  color: #ffffff !important;

  font-size: clamp(16px, 2vw, 26px) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: center !important;

  z-index: 5000 !important;
  pointer-events: none !important;

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 45, 75, 0.28) !important;
}

/*
 * Leere Triggerwarnung wird vollständig ausgeblendet.
 */
body.spotify-active #media .trigger-warning:empty,
body.spotify-active #media .triggerWarning:empty {
  display: none !important;
}



/* BEGIN NAME DRAW IN EXISTING OBS PLAYER */
.name-draw-layer{position:absolute;inset:0;z-index:5000;display:grid;grid-template-rows:auto 1fr auto;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(58,77,120,.22),rgba(0,0,0,.08) 45%,rgba(0,0,0,.48));perspective:1400px;pointer-events:none}
.name-draw-title{margin-top:3vh;font:900 clamp(20px,2.7vw,44px)/1 system-ui,sans-serif;letter-spacing:.18em;color:#fff;text-shadow:0 0 12px #38bdf8,0 0 30px #8b5cf6}
.name-draw-scene{display:grid;place-items:center;width:100%;height:100%;perspective:1500px}
.name-draw-coin{position:relative;width:min(58vh,58vw,620px);aspect-ratio:1;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 24px 35px rgba(0,0,0,.7))}
.name-draw-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;transform-style:preserve-3d;box-shadow:inset 0 0 0 6px rgba(255,255,255,.2),inset 0 0 35px rgba(0,0,0,.55),0 0 38px rgba(56,189,248,.35)}
.name-draw-face img{width:100%;height:100%;object-fit:contain;border-radius:50%;display:block;background:#000}
.name-draw-front{transform:translateZ(18px)}
.name-draw-back{transform:rotateY(180deg) translateZ(18px)}
.name-draw-edge{position:absolute;inset:1%;border-radius:50%;transform:translateZ(0);box-shadow:0 0 0 20px #626b78,inset 0 0 0 3px #dce5ef;background:repeating-linear-gradient(90deg,#424954 0 5px,#aeb8c5 5px 9px)}
.name-draw-name{position:absolute;left:50%;top:52%;width:74%;transform:translate(-50%,-50%) translateZ(45px);text-align:center;font:1000 clamp(32px,6vw,84px)/.92 Impact,Arial Black,system-ui,sans-serif;letter-spacing:.02em;color:transparent;background:linear-gradient(90deg,#ff1744,#ff9f0a,#ffea00,#00e676,#00b0ff,#7c4dff,#ff2d95,#ff1744);background-size:350% 100%;-webkit-background-clip:text;background-clip:text;animation:nameDrawColors 1.05s linear infinite;text-shadow:0 2px 0 #fff,0 5px 0 rgba(20,20,30,.85),0 9px 18px rgba(0,0,0,.95),0 0 20px rgba(255,255,255,.72);filter:saturate(1.45) brightness(1.2)}
.name-draw-back .name-draw-name{transform:translate(-50%,-50%) translateZ(45px) rotateY(180deg)}
.name-draw-coin.is-spinning{animation:nameDrawSpin 5.2s cubic-bezier(.08,.55,.12,1) forwards}
.name-draw-coin.is-winner{animation:nameDrawWinnerPulse .75s ease-in-out infinite alternate;transform:rotateY(0deg) rotateX(-5deg)}
.name-draw-winner{margin-bottom:3vh;text-align:center;padding:12px 28px;border-radius:18px;background:rgba(3,8,20,.72);border:1px solid rgba(255,255,255,.25);box-shadow:0 0 35px rgba(139,92,246,.5);backdrop-filter:blur(8px)}
.name-draw-winner span{display:block;font:900 13px/1 system-ui;letter-spacing:.28em;color:#fbbf24}
.name-draw-winner strong{display:block;margin-top:7px;font:1000 clamp(28px,5vw,72px)/1 Impact,Arial Black,sans-serif;color:#fff;text-shadow:0 0 12px #38bdf8,0 0 28px #8b5cf6}
.name-draw-winner em{display:block;margin-top:7px;font:800 clamp(15px,2vw,28px)/1.1 system-ui;color:#dbeafe;font-style:normal}
@keyframes nameDrawSpin{0%{transform:rotateX(-7deg) rotateY(0deg) scale(.9)}12%{transform:rotateX(-7deg) rotateY(900deg) scale(1)}78%{transform:rotateX(-7deg) rotateY(6200deg) scale(1.04)}100%{transform:rotateX(-5deg) rotateY(7200deg) scale(1)}}
@keyframes nameDrawColors{to{background-position:350% 50%}}
@keyframes nameDrawWinnerPulse{from{filter:drop-shadow(0 20px 30px rgba(0,0,0,.7)) brightness(1)}to{filter:drop-shadow(0 20px 50px rgba(139,92,246,.85)) brightness(1.25);transform:rotateY(0) rotateX(-5deg) scale(1.04)}}
@media(max-width:700px){.name-draw-coin{width:min(72vw,54vh)}.name-draw-title{font-size:18px}.name-draw-winner{margin-bottom:2vh;padding:10px 18px}}
/* END NAME DRAW IN EXISTING OBS PLAYER */


/* BEGIN EXACT SINGLE COIN FIX V4 */

.name-draw-coin {
  width: min(58vh, 58vw, 620px) !important;
  aspect-ratio: 540 / 558 !important;
  transform-style: preserve-3d !important;
  background: transparent !important;
}

.name-draw-edge {
  display: none !important;
}

.name-draw-face {
  inset: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.name-draw-face img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter:
    drop-shadow(0 22px 28px rgba(0, 0, 0, .72))
    saturate(1.08)
    contrast(1.04);
}

.name-draw-front {
  transform: translateZ(10px) !important;
}

.name-draw-back {
  transform: rotateY(180deg) translateZ(10px) !important;
}

.name-draw-name {
  top: 52% !important;
  width: 61% !important;
  max-width: 61% !important;
  padding: .12em .18em !important;
}

.name-draw-back .name-draw-name {
  transform:
    translate(-50%, -50%)
    translateZ(28px)
    rotateY(180deg) !important;
}

@media (max-width: 700px) {
  .name-draw-coin {
    width: min(78vw, 56vh) !important;
  }
}

/* END EXACT SINGLE COIN FIX V4 */

/* BEGIN YOUTUBE OBS CENTER WINDOW V1 */

#media iframe[data-kind="youtube"] {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(72vw, 1180px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  transform-origin: center center !important;
  display: block !important;
  object-fit: contain !important;
  border: 2px solid rgba(255, 255, 255, .28) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .72),
    0 0 38px rgba(61, 139, 255, .28),
    0 0 2px rgba(255, 255, 255, .85) inset !important;
  z-index: 900 !important;
  pointer-events: auto !important;
  animation: youtubeObsWindowIn .42s cubic-bezier(.18, .82, .24, 1) both !important;
}

#media > iframe[data-kind="youtube"] {
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 70px) !important;
}

#media .background-animation,
#media .fallback-animation {
  z-index: 1 !important;
}

#warning:not([hidden]) {
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: min(92vw, 1100px) !important;
  z-index: 1200 !important;
}

#metadata {
  left: 2.5% !important;
  right: auto !important;
  bottom: 2.5% !important;
  width: min(38vw, 680px) !important;
  max-width: calc(100vw - 40px) !important;
  padding: 14px 20px !important;
  border-radius: 14px !important;
  z-index: 1000 !important;
}

#metadata h1 {
  font-size: clamp(24px, 3vw, 54px) !important;
}

#metadata p {
  margin-top: 8px !important;
  font-size: clamp(18px, 2vw, 34px) !important;
}

@keyframes youtubeObsWindowIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

@media (max-aspect-ratio: 4 / 5) {
  #media iframe[data-kind="youtube"] {
    width: min(92vw, 880px) !important;
    max-height: 62vh !important;
  }
  #metadata {
    width: min(76vw, 620px) !important;
  }
}

@media (max-width: 700px) {
  #media iframe[data-kind="youtube"] {
    width: calc(100vw - 24px) !important;
    max-height: 68vh !important;
    border-radius: 12px !important;
  }
  #metadata {
    left: 12px !important;
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
  }
}

/* END YOUTUBE OBS CENTER WINDOW V1 */

/* BEGIN YOUTUBE CENTERED OVER ANIMATION V2 */
#media {
  position: relative !important;
  overflow: hidden !important;
}

#media .background-animation,
#media .fallback-animation {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

#media iframe[data-kind="youtube"] {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  width: min(72vw, 1180px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 72px) !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(255,255,255,.28) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.72),
    0 0 42px rgba(50,130,255,.26) !important;
  z-index: 900 !important;
  pointer-events: auto !important;
  animation: youtubeCenteredWindowIn .42s cubic-bezier(.18,.82,.24,1) both !important;
}

#warning:not([hidden]) {
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: min(92vw,1100px) !important;
  z-index: 1200 !important;
}

#metadata {
  position: absolute !important;
  left: 2.5% !important;
  right: auto !important;
  bottom: 2.5% !important;
  width: min(38vw,680px) !important;
  max-width: calc(100vw - 40px) !important;
  z-index: 1000 !important;
}

@keyframes youtubeCenteredWindowIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.88);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-aspect-ratio: 4 / 5) {
  #media iframe[data-kind="youtube"] {
    width: min(92vw,880px) !important;
    max-height: 64vh !important;
  }

  #metadata {
    width: min(78vw,620px) !important;
  }
}

@media (max-width: 700px) {
  #media iframe[data-kind="youtube"] {
    width: calc(100vw - 24px) !important;
    max-height: 68vh !important;
    border-radius: 12px !important;
  }

  #metadata {
    left: 12px !important;
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
  }
}
/* END YOUTUBE CENTERED OVER ANIMATION V2 */

/* BEGIN TRANSPARENT NAME DRAW 3D V1 */

.name-draw-layer {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  grid-template-rows: 1fr !important;
}

.name-draw-title,
.name-draw-winner {
  display: none !important;
}

.name-draw-scene {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
}

.name-draw-coin {
  width: min(66vh, 66vw, 720px) !important;
  aspect-ratio: 540 / 558 !important;
  background: transparent !important;
  filter:
    drop-shadow(0 26px 34px rgba(0, 0, 0, .65))
    drop-shadow(-8px 0 20px rgba(255, 50, 30, .28))
    drop-shadow(8px 0 20px rgba(30, 130, 255, .28)) !important;
}

.name-draw-edge {
  display: none !important;
}

.name-draw-face {
  inset: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.name-draw-face img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.name-draw-name {
  left: 50% !important;
  top: 52% !important;
  width: 58% !important;
  max-width: 58% !important;
  padding: .12em .18em !important;
  transform:
    translate(-50%, -50%)
    translateZ(54px) !important;
  font-family:
    Impact,
    "Arial Black",
    system-ui,
    sans-serif !important;
  font-weight: 1000 !important;
  line-height: .9 !important;
  letter-spacing: .015em !important;
  text-align: center !important;
  color: transparent !important;
  background-image:
    linear-gradient(
      90deg,
      #ff1744 0%,
      #ff9100 13%,
      #ffee00 26%,
      #00e676 39%,
      #00b0ff 52%,
      #536dfe 65%,
      #d500f9 78%,
      #ff2d95 90%,
      #ff1744 100%
    ) !important;
  background-size: 350% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .95),
    0 3px 0 rgba(245, 245, 255, .72),
    0 5px 0 rgba(100, 65, 170, .95),
    0 7px 0 rgba(50, 30, 95, .98),
    0 10px 12px rgba(0, 0, 0, .95),
    0 0 10px rgba(255, 255, 255, .95),
    0 0 22px rgba(0, 190, 255, .85),
    0 0 38px rgba(255, 30, 160, .70) !important;
  filter:
    saturate(1.55)
    brightness(1.22)
    contrast(1.10) !important;
  animation:
    nameDrawColors .95s linear infinite,
    nameDraw3dFloat .70s ease-in-out infinite alternate !important;
}

.name-draw-back .name-draw-name {
  transform:
    translate(-50%, -50%)
    translateZ(54px)
    rotateY(180deg) !important;
}

.name-draw-coin.is-winner .name-draw-name {
  animation:
    nameDrawColors .72s linear infinite,
    nameDrawWinnerNamePulse .55s ease-in-out infinite alternate !important;
}

@keyframes nameDraw3dFloat {
  from {
    filter:
      saturate(1.45)
      brightness(1.10)
      contrast(1.08);
  }
  to {
    filter:
      saturate(1.75)
      brightness(1.35)
      contrast(1.14)
      drop-shadow(0 0 10px rgba(255, 255, 255, .55));
  }
}

@keyframes nameDrawWinnerNamePulse {
  from {
    filter:
      saturate(1.55)
      brightness(1.20)
      contrast(1.10);
  }
  to {
    filter:
      saturate(1.95)
      brightness(1.50)
      contrast(1.18)
      drop-shadow(0 0 18px rgba(255, 255, 255, .85));
  }
}

@media (max-width: 700px) {
  .name-draw-coin {
    width: min(84vw, 62vh) !important;
  }
  .name-draw-name {
    width: 60% !important;
    max-width: 60% !important;
  }
}

/* END TRANSPARENT NAME DRAW 3D V1 */

/* BEGIN NAME DRAW SHOW V2 */
.name-draw-layer{
  position:absolute!important;inset:0!important;z-index:5000!important;
  overflow:hidden!important;background:transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  pointer-events:none!important;perspective:1600px!important
}
.name-draw-scene{
  position:absolute!important;inset:0!important;display:grid!important;
  place-items:center!important;background:transparent!important;
  perspective:1600px!important
}
.name-draw-title,.name-draw-winner,.name-draw-edge{display:none!important}
.name-draw-winner-heading{
  position:absolute!important;left:50%!important;top:4.5%!important;
  transform:translateX(-50%) translateY(-24px) scale(.9)!important;
  opacity:0!important;white-space:nowrap!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(26px,4vw,66px)!important;font-weight:1000!important;
  letter-spacing:.025em!important;color:#ffbd22!important;
  text-shadow:0 2px 0 #fff3a6,0 5px 0 #b94700,0 9px 0 #5b1800,
  0 14px 22px rgba(0,0,0,.9),0 0 24px rgba(255,156,0,.85)!important;
  transition:opacity .35s ease,transform .35s ease!important;z-index:40!important
}
.name-draw-winner-heading.is-visible{
  opacity:1!important;transform:translateX(-50%) translateY(0) scale(1)!important
}
.name-draw-coin{
  position:absolute!important;left:50%!important;top:44%!important;
  width:min(62vh,62vw,720px)!important;aspect-ratio:540/558!important;
  transform-style:preserve-3d!important;will-change:transform!important;
  background:transparent!important;
  filter:drop-shadow(0 28px 40px rgba(0,0,0,.72))
  drop-shadow(-10px 0 22px rgba(0,136,255,.34))
  drop-shadow(10px 0 22px rgba(255,55,20,.34))!important;z-index:20!important
}
.name-draw-face{
  position:absolute!important;inset:0!important;overflow:visible!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
  backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;
  transform-style:preserve-3d!important
}
.name-draw-face img{
  width:100%!important;height:100%!important;display:block!important;
  object-fit:contain!important;object-position:center!important;
  border-radius:0!important;background:transparent!important
}
.name-draw-front{transform:translateZ(16px)!important}
.name-draw-back{transform:rotateY(180deg) translateZ(16px)!important}
.name-draw-name{
  position:absolute!important;left:50%!important;top:52%!important;
  width:60%!important;max-width:60%!important;min-width:0!important;
  transform:translate(-50%,-50%) translateZ(58px)!important;
  text-align:center!important;white-space:nowrap!important;overflow:visible!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-weight:1000!important;line-height:.88!important;letter-spacing:.005em!important;
  color:transparent!important;
  background-image:linear-gradient(90deg,#03a9f4 0%,#304ffe 13%,#b73cff 27%,
  #ff2d95 41%,#ff5b22 56%,#ffd21a 72%,#ff8a00 86%,#03a9f4 100%)!important;
  background-size:320% 100%!important;-webkit-background-clip:text!important;
  background-clip:text!important;-webkit-text-stroke:clamp(1px,.16vw,3px)
  rgba(255,255,255,.62)!important;
  text-shadow:0 2px 0 rgba(255,255,255,.95),0 4px 0 rgba(255,228,170,.88),
  0 7px 0 rgba(134,42,172,.95),0 10px 0 rgba(54,18,95,.98),
  0 14px 18px rgba(0,0,0,.96),0 0 12px rgba(255,255,255,.95),
  0 0 28px rgba(20,160,255,.9),0 0 44px rgba(255,32,155,.76)!important;
  filter:saturate(1.5) brightness(1.22) contrast(1.12)!important;
  animation:nameDrawShowColors .92s linear infinite,
  nameDrawShowFloat .62s ease-in-out infinite alternate!important
}
.name-draw-back .name-draw-name{
  transform:translate(-50%,-50%) translateZ(58px) rotateY(180deg)!important
}
.name-draw-coin.is-spinning{
  animation:nameDrawShowSpin 5.2s cubic-bezier(.08,.55,.12,1) forwards!important
}
.name-draw-coin.is-winner{
  animation:nameDrawShowWinnerPulse .62s ease-in-out infinite alternate!important;
  transform:translate(-50%,-50%) rotateY(0deg) rotateX(-4deg)!important
}
.name-draw-orbit{
  position:absolute!important;left:50%!important;top:83%!important;
  width:min(90vw,1260px)!important;height:145px!important;
  transform:translate(-50%,-50%) perspective(1000px) rotateX(66deg)!important;
  transform-style:preserve-3d!important;z-index:15!important;
  animation:nameDrawOrbitRing 10s linear infinite!important
}
.name-draw-orbit::before,.name-draw-orbit::after{
  content:""!important;position:absolute!important;inset:25% 2%!important;
  border-radius:50%!important;border:2px solid rgba(255,255,255,.23)!important;
  box-shadow:0 0 22px rgba(0,180,255,.48),
  0 0 36px rgba(255,35,170,.38) inset!important
}
.name-draw-orbit::after{inset:35% 8%!important;border-color:rgba(255,195,0,.42)!important}
.name-draw-orbit-name{
  --angle:calc(360deg/var(--count)*var(--i));
  position:absolute!important;left:50%!important;top:50%!important;
  max-width:260px!important;white-space:nowrap!important;
  transform:translate(-50%,-50%) rotateY(var(--angle))
  translateZ(min(42vw,520px)) rotateY(calc(-1*var(--angle))) rotateX(-66deg)!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(22px,3.2vw,54px)!important;font-weight:1000!important;
  color:transparent!important;
  background-image:linear-gradient(90deg,#00b0ff,#00e676,#ffee00,#ff9100,
  #ff2d95,#7c4dff,#00b0ff)!important;background-size:300% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-stroke:1px rgba(255,255,255,.62)!important;
  text-shadow:0 2px 0 rgba(255,255,255,.8),0 5px 0 rgba(70,20,110,.92),
  0 9px 14px rgba(0,0,0,.95),0 0 18px rgba(0,180,255,.75),
  0 0 26px rgba(255,40,165,.62)!important;
  animation:nameDrawShowColors 1.2s linear infinite!important
}
.name-draw-note-fireworks{
  position:absolute!important;left:50%!important;top:45%!important;
  width:0!important;height:0!important;z-index:50!important
}
.name-draw-firework-note{
  position:absolute!important;left:0!important;top:0!important;color:var(--color)!important;
  font-size:clamp(20px,3.3vw,58px)!important;font-weight:1000!important;opacity:0!important;
  transform:translate(-50%,-50%) scale(.2) rotate(0deg)!important;
  text-shadow:0 0 8px currentColor,0 0 22px currentColor,
  0 0 42px currentColor!important
}
.name-draw-note-fireworks.is-active .name-draw-firework-note{
  animation:nameDrawNoteFirework var(--duration) cubic-bezier(.12,.72,.16,1)
  var(--delay) both!important
}
@keyframes nameDrawShowSpin{
  0%{transform:translate(-50%,-50%) rotateX(-7deg) rotateY(0deg) scale(.9)}
  12%{transform:translate(-50%,-50%) rotateX(-7deg) rotateY(900deg) scale(1)}
  78%{transform:translate(-50%,-50%) rotateX(-7deg) rotateY(6200deg) scale(1.04)}
  100%{transform:translate(-50%,-50%) rotateX(-4deg) rotateY(7200deg) scale(1)}
}
@keyframes nameDrawShowColors{to{background-position:320% 50%}}
@keyframes nameDrawShowFloat{
  from{filter:saturate(1.4) brightness(1.10) contrast(1.08)}
  to{filter:saturate(1.8) brightness(1.42) contrast(1.16)
  drop-shadow(0 0 12px rgba(255,255,255,.65))}
}
@keyframes nameDrawShowWinnerPulse{
  from{filter:drop-shadow(0 24px 34px rgba(0,0,0,.72)) brightness(1)}
  to{filter:drop-shadow(0 24px 58px rgba(255,50,170,.88)) brightness(1.28);
  transform:translate(-50%,-50%) rotateY(0deg) rotateX(-4deg) scale(1.055)}
}
@keyframes nameDrawOrbitRing{
  to{transform:translate(-50%,-50%) perspective(1000px) rotateX(66deg) rotateZ(360deg)}
}
@keyframes nameDrawNoteFirework{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg)}
  14%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),
  calc(-50% + var(--y))) scale(var(--scale)) rotate(620deg)}
}
@media(max-width:700px){
  .name-draw-winner-heading{top:4%!important;font-size:clamp(20px,6vw,42px)!important}
  .name-draw-coin{top:43%!important;width:min(78vw,58vh)!important}
  .name-draw-name{width:61%!important;max-width:61%!important}
  .name-draw-orbit{top:81%!important;width:96vw!important;height:110px!important}
  .name-draw-orbit-name{
    font-size:clamp(17px,5vw,34px)!important;
    transform:translate(-50%,-50%) rotateY(var(--angle))
    translateZ(min(40vw,240px)) rotateY(calc(-1*var(--angle)))
    rotateX(-66deg)!important
  }
}
/* END NAME DRAW SHOW V2 */

/* BEGIN NAME DRAW SHOW V3 FINAL */
.name-draw-layer.name-draw-v3{
  position:absolute!important;inset:0!important;z-index:5000!important;
  overflow:hidden!important;background:transparent!important;
  pointer-events:none!important;perspective:1700px!important
}
.name-draw-v3-stage{
  position:absolute!important;inset:0!important;display:grid!important;
  place-items:center!important;background:transparent!important;
  perspective:1700px!important
}
.name-draw-v3-heading{
  position:absolute!important;left:50%!important;top:3.5%!important;
  transform:translateX(-50%)!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(22px,3.4vw,58px)!important;font-weight:1000!important;
  letter-spacing:.07em!important;color:#ffbf28!important;
  text-shadow:0 2px 0 #fff2a5,0 5px 0 #b64a00,0 9px 0 #541500,
  0 14px 24px rgba(0,0,0,.92),0 0 26px rgba(255,145,0,.86)!important;
  z-index:80!important
}
.name-draw-v3-assembly{
  position:absolute!important;left:50%!important;top:48%!important;
  width:min(78vw,900px)!important;height:min(82vh,870px)!important;
  transform:translate(-50%,-50%) rotateY(0deg)!important;
  transform-style:preserve-3d!important;will-change:transform!important
}
.name-draw-v3-coin-wrap{
  position:absolute!important;left:50%!important;top:40%!important;
  width:min(58vh,58vw,650px)!important;aspect-ratio:1/1!important;
  transform:translate(-50%,-50%) translateZ(75px)!important;
  transform-style:preserve-3d!important;
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.74))
  drop-shadow(-11px 0 24px rgba(0,170,255,.34))
  drop-shadow(11px 0 24px rgba(255,60,20,.34))!important
}
.name-draw-v3-coin{
  width:100%!important;height:100%!important;display:block!important;
  object-fit:contain!important;background:transparent!important;
  transform:translateZ(1px)!important;backface-visibility:visible!important
}
.name-draw-v3-ring{
  position:absolute!important;left:50%!important;top:81%!important;
  width:min(94vw,1220px)!important;height:190px!important;
  transform:translate(-50%,-50%) rotateX(68deg) translateZ(-15px)!important;
  transform-style:preserve-3d!important
}
.name-draw-v3-ring-light{
  position:absolute!important;inset:12% 1%!important;border-radius:50%!important;
  border:4px solid rgba(255,255,255,.32)!important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.68) 0 42%,
  rgba(0,0,0,.18) 58%,rgba(255,255,255,.08) 72%,transparent 74%)!important;
  box-shadow:0 0 12px #00b7ff,0 0 24px #284cff,0 0 36px #d228ff,
  0 0 52px #ff2b91,0 0 72px rgba(255,104,0,.72),
  inset 0 0 20px #00b7ff,inset 0 0 38px #ff2b91!important
}
.name-draw-v3-ring-light::before,.name-draw-v3-ring-light::after{
  content:""!important;position:absolute!important;border-radius:50%!important
}
.name-draw-v3-ring-light::before{
  inset:8%!important;border:3px solid rgba(255,185,0,.5)!important;
  box-shadow:0 0 20px rgba(255,185,0,.72),
  inset 0 0 18px rgba(0,180,255,.65)!important
}
.name-draw-v3-ring-light::after{
  inset:20%!important;border:2px solid rgba(255,255,255,.20)!important
}
.name-draw-v3-orbit{
  position:absolute!important;left:50%!important;top:50%!important;
  width:1px!important;height:1px!important;transform-style:preserve-3d!important;
  will-change:transform!important
}
.name-draw-v3-orbit.is-spinning{
  animation:nameDrawV3OrbitSpin 5.2s cubic-bezier(.08,.55,.12,1) forwards!important
}
.name-draw-v3-orbit.is-winner{
  animation:nameDrawV3WinnerOrbit 8s linear infinite!important
}
.name-draw-v3-orbit-name{
  --angle:calc(360deg/var(--total)*var(--index));
  position:absolute!important;left:0!important;top:0!important;
  min-width:90px!important;max-width:270px!important;padding:.08em .22em!important;
  white-space:nowrap!important;text-align:center!important;
  transform:translate(-50%,-50%) rotateY(var(--angle))
  translateZ(min(44vw,535px)) rotateY(calc(-1*var(--angle)))
  rotateX(-68deg)!important;
  transform-origin:center center!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-weight:1000!important;line-height:.95!important;letter-spacing:.012em!important;
  color:transparent!important;
  background-image:linear-gradient(90deg,#00b7ff 0%,#4a5dff 13%,#c43cff 27%,
  #ff2d9b 42%,#ff4d20 56%,#ff9c00 70%,#ffe200 84%,#00e676 100%)!important;
  background-size:340% 100%!important;-webkit-background-clip:text!important;
  background-clip:text!important;-webkit-text-stroke:1px rgba(255,255,255,.64)!important;
  text-shadow:0 2px 0 rgba(255,255,255,.96),0 4px 0 rgba(255,231,180,.86),
  0 7px 0 rgba(103,38,148,.96),0 10px 0 rgba(40,16,73,.98),
  0 15px 18px rgba(0,0,0,.96),0 0 15px rgba(255,255,255,.86),
  0 0 26px rgba(0,180,255,.82),0 0 42px rgba(255,35,155,.68)!important;
  filter:saturate(1.55) brightness(1.22) contrast(1.12)!important;
  animation:nameDrawV3ColorFlow 1.15s linear infinite!important
}
.name-draw-v3-orbit-name.is-selected{
  z-index:20!important;
  filter:saturate(1.95) brightness(1.55) contrast(1.18)
  drop-shadow(0 0 18px rgba(255,255,255,.95))!important;
  animation:nameDrawV3ColorFlow .72s linear infinite,
  nameDrawV3SelectedPulse .55s ease-in-out infinite alternate!important
}
.name-draw-v3-assembly.is-spinning{
  animation:nameDrawV3AssemblySpin 5.2s cubic-bezier(.08,.55,.12,1) forwards!important
}
.name-draw-v3-assembly.is-winner{
  animation:nameDrawV3AssemblyWinner .65s ease-in-out infinite alternate!important
}
.name-draw-v3-winner{
  position:absolute!important;left:50%!important;top:4%!important;
  transform:translateX(-50%) translateY(-18px) scale(.92)!important;
  opacity:0!important;text-align:center!important;z-index:100!important
}
.name-draw-v3-winner.is-visible{
  opacity:1!important;transform:translateX(-50%) translateY(0) scale(1)!important;
  transition:opacity .35s ease,transform .35s ease!important
}
.name-draw-v3-winner span{
  display:block!important;font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(19px,2.5vw,42px)!important;letter-spacing:.055em!important;
  color:#ffbd26!important;
  text-shadow:0 2px 0 #fff0a0,0 5px 0 #a94200,0 9px 13px rgba(0,0,0,.92),
  0 0 22px rgba(255,153,0,.84)!important
}
.name-draw-v3-winner strong{
  display:block!important;margin-top:5px!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(34px,5vw,82px)!important;line-height:.95!important;
  color:transparent!important;background:linear-gradient(90deg,#00b7ff,#6b55ff,
  #f137ff,#ff2d8e,#ff7a16,#ffe000)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-stroke:1px rgba(255,255,255,.72)!important;
  text-shadow:0 3px 0 rgba(255,255,255,.82),0 7px 0 rgba(85,27,125,.92),
  0 12px 18px rgba(0,0,0,.96),0 0 28px rgba(255,38,160,.78)!important
}
.name-draw-v3-winner em{
  display:block!important;margin-top:8px!important;
  font:800 clamp(14px,1.8vw,27px)/1.1 system-ui,sans-serif!important;
  color:#fff!important;font-style:normal!important;
  text-shadow:0 4px 12px rgba(0,0,0,.92)!important
}
.name-draw-v3-fireworks{
  position:absolute!important;left:50%!important;top:43%!important;
  width:0!important;height:0!important;z-index:120!important
}
.name-draw-v3-firework-note{
  position:absolute!important;left:0!important;top:0!important;
  color:var(--firework-color)!important;font-size:clamp(22px,3.6vw,62px)!important;
  font-weight:1000!important;opacity:0!important;
  transform:translate(-50%,-50%) scale(.18) rotate(0deg)!important;
  text-shadow:0 0 8px currentColor,0 0 22px currentColor,
  0 0 44px currentColor!important
}
.name-draw-v3-fireworks.is-active .name-draw-v3-firework-note{
  animation:nameDrawV3Firework var(--firework-duration)
  cubic-bezier(.12,.72,.16,1) var(--firework-delay) both!important
}
@keyframes nameDrawV3AssemblySpin{
  0%{transform:translate(-50%,-50%) rotateX(-4deg) rotateY(0deg) scale(.92)}
  15%{transform:translate(-50%,-50%) rotateX(-4deg) rotateY(1080deg) scale(1)}
  80%{transform:translate(-50%,-50%) rotateX(-4deg) rotateY(6120deg) scale(1.02)}
  100%{transform:translate(-50%,-50%) rotateX(-2deg) rotateY(7200deg) scale(1)}
}
@keyframes nameDrawV3OrbitSpin{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(-4680deg)}
}
@keyframes nameDrawV3WinnerOrbit{to{transform:rotateY(-360deg)}}
@keyframes nameDrawV3AssemblyWinner{
  from{filter:brightness(1) drop-shadow(0 24px 38px rgba(0,0,0,.68))}
  to{filter:brightness(1.22) drop-shadow(0 28px 62px rgba(255,38,157,.76));
  transform:translate(-50%,-50%) rotateX(-2deg) rotateY(7200deg) scale(1.025)}
}
@keyframes nameDrawV3ColorFlow{to{background-position:340% 50%}}
@keyframes nameDrawV3SelectedPulse{
  to{transform:translate(-50%,-50%) rotateY(var(--angle))
  translateZ(min(44vw,535px)) rotateY(calc(-1*var(--angle)))
  rotateX(-68deg) scale(1.12)}
}
@keyframes nameDrawV3Firework{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(0deg)}
  13%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--firework-x)),
  calc(-50% + var(--firework-y))) scale(var(--firework-scale)) rotate(720deg)}
}
@media(max-width:700px){
  .name-draw-v3-heading{top:2.5%!important;font-size:clamp(18px,5.5vw,34px)!important}
  .name-draw-v3-assembly{top:50%!important;width:96vw!important;height:82vh!important}
  .name-draw-v3-coin-wrap{top:38%!important;width:min(76vw,53vh)!important}
  .name-draw-v3-ring{top:79%!important;width:98vw!important;height:120px!important}
  .name-draw-v3-orbit-name{
    max-width:175px!important;
    transform:translate(-50%,-50%) rotateY(var(--angle))
    translateZ(min(43vw,255px)) rotateY(calc(-1*var(--angle)))
    rotateX(-68deg)!important
  }
}
/* END NAME DRAW SHOW V3 FINAL */

/* BEGIN NAME DRAW CAROUSEL V4 FIX */

.name-draw-layer.name-draw-v4{
  position:absolute!important;
  inset:0!important;
  z-index:5000!important;
  overflow:hidden!important;
  background:transparent!important;
  pointer-events:none!important;
  perspective:1700px!important
}

.name-draw-v4-stage{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
  perspective:1700px!important
}

.name-draw-v4-assembly{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(92vw,1280px)!important;
  height:min(90vh,960px)!important;
  transform:translate(-50%,-50%)!important;
  transform-style:preserve-3d!important;
  will-change:transform!important
}

.name-draw-v4-coin-wrap{
  position:absolute!important;
  left:50%!important;
  top:38%!important;
  width:min(60vh,60vw,680px)!important;
  aspect-ratio:1/1!important;
  transform:translate(-50%,-50%) translateZ(85px)!important;
  transform-style:preserve-3d!important;
  filter:
    drop-shadow(0 30px 46px rgba(0,0,0,.74))
    drop-shadow(-11px 0 24px rgba(0,170,255,.34))
    drop-shadow(11px 0 24px rgba(255,60,20,.34))!important;
  z-index:20!important
}

.name-draw-v4-coin{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  background:transparent!important
}

.name-draw-v4-platform{
  position:absolute!important;
  left:50%!important;
  top:80%!important;
  width:min(94vw,1280px)!important;
  height:185px!important;
  transform:
    translate(-50%,-50%)
    perspective(1200px)
    rotateX(64deg)!important;
  transform-style:preserve-3d!important;
  z-index:10!important
}

.name-draw-v4-platform-top{
  position:absolute!important;
  inset:0!important;
  border-radius:50%!important;
  border:4px solid rgba(255,255,255,.32)!important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(6,8,18,.84) 0 48%,
      rgba(8,8,18,.58) 58%,
      rgba(255,255,255,.07) 72%,
      transparent 74%
    )!important;
  box-shadow:
    0 0 12px #00b7ff,
    0 0 25px #3654ff,
    0 0 38px #d228ff,
    0 0 54px #ff2b91,
    0 0 76px rgba(255,104,0,.74),
    inset 0 0 24px #00b7ff,
    inset 0 0 44px #ff2b91!important
}

.name-draw-v4-platform-top::before{
  content:""!important;
  position:absolute!important;
  inset:9%!important;
  border-radius:50%!important;
  border:3px solid rgba(255,190,0,.52)!important;
  box-shadow:
    0 0 20px rgba(255,190,0,.72),
    inset 0 0 18px rgba(0,180,255,.62)!important
}

/*
 * Sichtbarer Frontstreifen des Karussells.
 * Alle Namen stehen nebeneinander in einer einzigen Zeile.
 */
.name-draw-v4-marquee-window{
  position:absolute!important;
  left:2%!important;
  right:2%!important;
  top:55%!important;
  height:82px!important;
  overflow:hidden!important;
  transform:rotateX(-64deg) translateZ(58px)!important;
  transform-origin:center top!important;
  border-radius:12px 12px 36px 36px!important;
  background:
    linear-gradient(
      180deg,
      rgba(17,20,34,.94),
      rgba(2,3,10,.98)
    )!important;
  border-top:3px solid rgba(255,255,255,.36)!important;
  border-bottom:3px solid rgba(255,255,255,.24)!important;
  box-shadow:
    0 0 16px rgba(0,183,255,.72),
    0 0 28px rgba(255,45,155,.58),
    inset 0 10px 20px rgba(255,255,255,.06),
    inset 0 -12px 22px rgba(0,0,0,.78)!important
}

.name-draw-v4-marquee-track{
  --carousel-duration:18s;
  position:absolute!important;
  left:0!important;
  top:0!important;
  height:100%!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  width:max-content!important;
  align-items:center!important;
  will-change:transform!important
}

.name-draw-v4-marquee-track.is-running{
  animation:
    nameDrawV4Marquee
    var(--carousel-duration)
    linear
    infinite!important
}

.name-draw-v4-name-set{
  display:flex!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  height:100%!important;
  gap:42px!important;
  padding:0 21px!important
}

.name-draw-v4-name{
  display:inline-block!important;
  flex:0 0 auto!important;
  min-width:max-content!important;
  max-width:280px!important;
  padding:.08em .12em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  font-family:
    Impact,
    "Arial Black",
    system-ui,
    sans-serif!important;
  font-size:48px!important;
  font-weight:1000!important;
  line-height:.95!important;
  letter-spacing:.012em!important;
  color:var(--name-color)!important;
  -webkit-text-stroke:1px rgba(255,255,255,.68)!important;
  text-shadow:
    0 2px 0 rgba(255,255,255,.96),
    0 4px 0 color-mix(in srgb,var(--name-color) 74%,#2c1245),
    0 7px 0 rgba(45,17,75,.98),
    0 11px 14px rgba(0,0,0,.96),
    0 0 12px var(--name-color),
    0 0 24px var(--name-color)!important;
  filter:
    saturate(1.5)
    brightness(1.18)
    contrast(1.1)!important
}

.name-draw-v4-name.is-medium{font-size:40px!important}
.name-draw-v4-name.is-long{font-size:32px!important}
.name-draw-v4-name.is-very-long{font-size:24px!important}

.name-draw-v4-name.is-selected{
  filter:
    saturate(1.9)
    brightness(1.55)
    contrast(1.18)
    drop-shadow(0 0 18px rgba(255,255,255,.95))!important;
  animation:
    nameDrawV4SelectedPulse
    .52s ease-in-out infinite alternate!important
}

.name-draw-v4-assembly.is-spinning{
  animation:
    nameDrawV4AssemblySpin
    5.2s
    cubic-bezier(.08,.55,.12,1)
    forwards!important
}

.name-draw-v4-assembly.is-winner{
  animation:
    nameDrawV4WinnerPulse
    .66s ease-in-out infinite alternate!important
}

.name-draw-v4-winner{
  position:absolute!important;
  left:50%!important;
  top:3.5%!important;
  transform:
    translateX(-50%)
    translateY(-18px)
    scale(.92)!important;
  opacity:0!important;
  text-align:center!important;
  z-index:100!important
}

.name-draw-v4-winner.is-visible{
  opacity:1!important;
  transform:
    translateX(-50%)
    translateY(0)
    scale(1)!important;
  transition:
    opacity .35s ease,
    transform .35s ease!important
}

.name-draw-v4-winner span{
  display:block!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(19px,2.5vw,42px)!important;
  letter-spacing:.055em!important;
  color:#ffbd26!important;
  text-shadow:
    0 2px 0 #fff0a0,
    0 5px 0 #a94200,
    0 9px 13px rgba(0,0,0,.92),
    0 0 22px rgba(255,153,0,.84)!important
}

.name-draw-v4-winner strong{
  display:block!important;
  margin-top:5px!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(34px,5vw,82px)!important;
  line-height:.95!important;
  color:transparent!important;
  background:
    linear-gradient(
      90deg,
      #00b7ff,#6b55ff,#f137ff,
      #ff2d8e,#ff7a16,#ffe000
    )!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-stroke:1px rgba(255,255,255,.72)!important;
  text-shadow:
    0 3px 0 rgba(255,255,255,.82),
    0 7px 0 rgba(85,27,125,.92),
    0 12px 18px rgba(0,0,0,.96),
    0 0 28px rgba(255,38,160,.78)!important
}

.name-draw-v4-winner em{
  display:block!important;
  margin-top:8px!important;
  font:800 clamp(14px,1.8vw,27px)/1.1 system-ui,sans-serif!important;
  color:#fff!important;
  font-style:normal!important;
  text-shadow:0 4px 12px rgba(0,0,0,.92)!important
}

.name-draw-v4-fireworks{
  position:absolute!important;
  left:50%!important;
  top:42%!important;
  width:0!important;
  height:0!important;
  z-index:120!important
}

.name-draw-v4-firework-note{
  position:absolute!important;
  left:0!important;
  top:0!important;
  color:var(--firework-color)!important;
  font-size:clamp(22px,3.6vw,62px)!important;
  font-weight:1000!important;
  opacity:0!important;
  transform:
    translate(-50%,-50%)
    scale(.18)
    rotate(0deg)!important;
  text-shadow:
    0 0 8px currentColor,
    0 0 22px currentColor,
    0 0 44px currentColor!important
}

.name-draw-v4-fireworks.is-active
.name-draw-v4-firework-note{
  animation:
    nameDrawV4Firework
    var(--firework-duration)
    cubic-bezier(.12,.72,.16,1)
    var(--firework-delay)
    both!important
}

@keyframes nameDrawV4Marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@keyframes nameDrawV4AssemblySpin{
  0%{
    transform:
      translate(-50%,-50%)
      rotateX(-3deg)
      rotateY(0deg)
      scale(.92)
  }
  16%{
    transform:
      translate(-50%,-50%)
      rotateX(-3deg)
      rotateY(1080deg)
      scale(1)
  }
  80%{
    transform:
      translate(-50%,-50%)
      rotateX(-3deg)
      rotateY(6120deg)
      scale(1.02)
  }
  100%{
    transform:
      translate(-50%,-50%)
      rotateX(-2deg)
      rotateY(7200deg)
      scale(1)
  }
}

@keyframes nameDrawV4WinnerPulse{
  from{
    filter:
      brightness(1)
      drop-shadow(0 24px 38px rgba(0,0,0,.68))
  }
  to{
    filter:
      brightness(1.2)
      drop-shadow(0 28px 62px rgba(255,38,157,.72));
    transform:
      translate(-50%,-50%)
      rotateX(-2deg)
      rotateY(7200deg)
      scale(1.025)
  }
}

@keyframes nameDrawV4SelectedPulse{
  to{
    transform:scale(1.1);
    filter:
      saturate(2)
      brightness(1.7)
      drop-shadow(0 0 18px currentColor)
  }
}

@keyframes nameDrawV4Firework{
  0%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      scale(.18)
      rotate(0deg)
  }
  13%{opacity:1}
  100%{
    opacity:0;
    transform:
      translate(
        calc(-50% + var(--firework-x)),
        calc(-50% + var(--firework-y))
      )
      scale(var(--firework-scale))
      rotate(720deg)
  }
}

@media(max-width:700px){
  .name-draw-v4-assembly{
    top:51%!important;
    width:98vw!important;
    height:84vh!important
  }

  .name-draw-v4-coin-wrap{
    top:36%!important;
    width:min(77vw,52vh)!important
  }

  .name-draw-v4-platform{
    top:78%!important;
    width:98vw!important;
    height:125px!important
  }

  .name-draw-v4-marquee-window{
    top:52%!important;
    height:60px!important
  }

  .name-draw-v4-name-set{
    gap:25px!important;
    padding:0 13px!important
  }

  .name-draw-v4-name{font-size:32px!important}
  .name-draw-v4-name.is-medium{font-size:28px!important}
  .name-draw-v4-name.is-long{font-size:23px!important}
  .name-draw-v4-name.is-very-long{font-size:18px!important}
}

/* END NAME DRAW CAROUSEL V4 FIX */

/* BEGIN NAME DRAW 3D COIN V5 */

.name-draw-layer.name-draw-v5{
  position:absolute!important;
  inset:0!important;
  z-index:5000!important;
  overflow:hidden!important;
  background:transparent!important;
  pointer-events:none!important;
  perspective:1800px!important
}

.name-draw-v5-stage{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  perspective:1800px!important
}

.name-draw-v5-assembly{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(94vw,1320px)!important;
  height:min(92vh,980px)!important;
  transform:translate(-50%,-50%)!important;
  transform-style:preserve-3d!important
}

.name-draw-v5-assembly.is-floating{
  animation:nameDrawV5Float 2.6s ease-in-out infinite alternate!important
}

.name-draw-v5-coin-3d{
  position:absolute!important;
  left:50%!important;
  top:38%!important;
  width:min(61vh,61vw,700px)!important;
  aspect-ratio:1/1!important;
  transform:
    translate(-50%,-50%)
    rotateX(-5deg)
    rotateY(0deg)!important;
  transform-style:preserve-3d!important;
  will-change:transform!important;
  filter:
    drop-shadow(0 30px 48px rgba(0,0,0,.76))
    drop-shadow(-12px 0 25px rgba(0,170,255,.34))
    drop-shadow(12px 0 25px rgba(255,65,20,.34))!important;
  z-index:30!important
}

.name-draw-v5-edge-slice{
  position:absolute!important;
  inset:0!important;
  border-radius:50%!important;
  transform:translateZ(var(--slice-z))!important;
  background:
    #555
    url('/assets/name-draw-edge-v5.png')
    center/cover!important;
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.16),
    inset 0 0 30px rgba(0,0,0,.55)!important;
  backface-visibility:hidden!important
}

.name-draw-v5-face{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:50%!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important
}

.name-draw-v5-front{
  transform:translateZ(15px)!important
}

.name-draw-v5-back{
  transform:rotateY(180deg) translateZ(15px)!important
}

.name-draw-v5-specular{
  position:absolute!important;
  inset:1.2%!important;
  border-radius:50%!important;
  transform:translateZ(17px)!important;
  background:
    linear-gradient(
      112deg,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.06) 18%,
      transparent 34%,
      transparent 66%,
      rgba(255,255,255,.10) 78%,
      transparent 100%
    )!important;
  mix-blend-mode:screen!important;
  opacity:.72!important;
  pointer-events:none!important
}

.name-draw-v5-coin-3d.is-spinning{
  animation:
    nameDrawV5CoinSpin
    5.2s
    cubic-bezier(.08,.54,.12,1)
    forwards!important
}

.name-draw-v5-coin-3d.is-winner{
  animation:
    nameDrawV5WinnerCoin
    .72s
    ease-in-out
    infinite
    alternate!important
}

.name-draw-v5-platform{
  position:absolute!important;
  left:50%!important;
  top:81%!important;
  width:min(94vw,1280px)!important;
  height:188px!important;
  transform:
    translate(-50%,-50%)
    perspective(1200px)
    rotateX(64deg)!important;
  transform-style:preserve-3d!important;
  z-index:15!important
}

.name-draw-v5-platform-top{
  position:absolute!important;
  inset:0!important;
  border-radius:50%!important;
  border:4px solid rgba(255,255,255,.32)!important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(5,7,16,.86) 0 46%,
      rgba(8,8,20,.58) 58%,
      rgba(255,255,255,.07) 72%,
      transparent 74%
    )!important;
  box-shadow:
    0 0 12px #00b7ff,
    0 0 26px #3654ff,
    0 0 40px #d228ff,
    0 0 56px #ff2b91,
    0 0 80px rgba(255,104,0,.74),
    inset 0 0 24px #00b7ff,
    inset 0 0 44px #ff2b91!important
}

.name-draw-v5-platform-top::before{
  content:""!important;
  position:absolute!important;
  inset:9%!important;
  border-radius:50%!important;
  border:3px solid rgba(255,190,0,.52)!important;
  box-shadow:
    0 0 20px rgba(255,190,0,.72),
    inset 0 0 18px rgba(0,180,255,.62)!important
}

.name-draw-v5-marquee-window{
  position:absolute!important;
  left:2%!important;
  right:2%!important;
  top:55%!important;
  height:84px!important;
  overflow:hidden!important;
  transform:
    rotateX(-64deg)
    translateZ(58px)!important;
  transform-origin:center top!important;
  border-radius:12px 12px 36px 36px!important;
  background:
    linear-gradient(
      180deg,
      rgba(17,20,34,.94),
      rgba(2,3,10,.98)
    )!important;
  border-top:3px solid rgba(255,255,255,.36)!important;
  border-bottom:3px solid rgba(255,255,255,.24)!important;
  box-shadow:
    0 0 16px rgba(0,183,255,.72),
    0 0 28px rgba(255,45,155,.58),
    inset 0 10px 20px rgba(255,255,255,.06),
    inset 0 -12px 22px rgba(0,0,0,.78)!important
}

.name-draw-v5-marquee-track{
  --carousel-duration:18s;
  position:absolute!important;
  left:0!important;
  top:0!important;
  height:100%!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  width:max-content!important;
  align-items:center!important;
  will-change:transform!important
}

.name-draw-v5-marquee-track.is-running{
  animation:
    nameDrawV5Marquee
    var(--carousel-duration)
    linear
    infinite!important
}

.name-draw-v5-name-set{
  display:flex!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  height:100%!important;
  gap:42px!important;
  padding:0 21px!important
}

.name-draw-v5-name{
  display:inline-block!important;
  flex:0 0 auto!important;
  min-width:max-content!important;
  max-width:280px!important;
  white-space:nowrap!important;
  font-family:
    Impact,
    "Arial Black",
    system-ui,
    sans-serif!important;
  font-size:48px!important;
  font-weight:1000!important;
  line-height:.95!important;
  color:var(--name-color)!important;
  -webkit-text-stroke:1px rgba(255,255,255,.68)!important;
  text-shadow:
    0 2px 0 rgba(255,255,255,.96),
    0 4px 0 rgba(90,30,135,.92),
    0 7px 0 rgba(40,15,70,.98),
    0 11px 14px rgba(0,0,0,.96),
    0 0 12px var(--name-color),
    0 0 24px var(--name-color)!important
}

.name-draw-v5-name.is-medium{font-size:40px!important}
.name-draw-v5-name.is-long{font-size:32px!important}
.name-draw-v5-name.is-very-long{font-size:24px!important}

.name-draw-v5-name.is-selected{
  filter:
    saturate(1.9)
    brightness(1.55)
    drop-shadow(0 0 18px rgba(255,255,255,.95))!important;
  animation:
    nameDrawV5Selected
    .52s
    ease-in-out
    infinite
    alternate!important
}

.name-draw-v5-winner{
  position:absolute!important;
  left:50%!important;
  top:3.2%!important;
  transform:
    translateX(-50%)
    translateY(-18px)
    scale(.92)!important;
  opacity:0!important;
  text-align:center!important;
  z-index:100!important
}

.name-draw-v5-winner.is-visible{
  opacity:1!important;
  transform:
    translateX(-50%)
    translateY(0)
    scale(1)!important;
  transition:
    opacity .35s ease,
    transform .35s ease!important
}

.name-draw-v5-winner span{
  display:block!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(19px,2.5vw,42px)!important;
  color:#ffbd26!important;
  text-shadow:
    0 2px 0 #fff0a0,
    0 5px 0 #a94200,
    0 9px 13px rgba(0,0,0,.92),
    0 0 22px rgba(255,153,0,.84)!important
}

.name-draw-v5-winner strong{
  display:block!important;
  margin-top:5px!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(34px,5vw,82px)!important;
  color:transparent!important;
  background:
    linear-gradient(
      90deg,
      #00b7ff,#6b55ff,#f137ff,
      #ff2d8e,#ff7a16,#ffe000
    )!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-stroke:1px rgba(255,255,255,.72)!important;
  text-shadow:
    0 3px 0 rgba(255,255,255,.82),
    0 7px 0 rgba(85,27,125,.92),
    0 12px 18px rgba(0,0,0,.96),
    0 0 28px rgba(255,38,160,.78)!important
}

.name-draw-v5-winner em{
  display:block!important;
  margin-top:8px!important;
  font:800 clamp(14px,1.8vw,27px)/1.1 system-ui,sans-serif!important;
  color:#fff!important;
  font-style:normal!important
}

.name-draw-v5-fireworks{
  position:absolute!important;
  left:50%!important;
  top:42%!important;
  width:0!important;
  height:0!important;
  z-index:120!important
}

.name-draw-v5-firework-note{
  position:absolute!important;
  left:0!important;
  top:0!important;
  color:var(--color)!important;
  font-size:clamp(22px,3.6vw,62px)!important;
  opacity:0!important;
  text-shadow:
    0 0 8px currentColor,
    0 0 22px currentColor,
    0 0 44px currentColor!important
}

.name-draw-v5-fireworks.is-active
.name-draw-v5-firework-note{
  animation:
    nameDrawV5Firework
    var(--duration)
    cubic-bezier(.12,.72,.16,1)
    var(--delay)
    both!important
}

@keyframes nameDrawV5CoinSpin{
  0%{
    transform:
      translate(-50%,-50%)
      rotateX(-5deg)
      rotateY(0deg)
      scale(.92)
  }
  18%{
    transform:
      translate(-50%,-50%)
      rotateX(-5deg)
      rotateY(1080deg)
      scale(1)
  }
  82%{
    transform:
      translate(-50%,-50%)
      rotateX(-5deg)
      rotateY(6120deg)
      scale(1.02)
  }
  100%{
    transform:
      translate(-50%,-50%)
      rotateX(-3deg)
      rotateY(7200deg)
      scale(1)
  }
}

@keyframes nameDrawV5WinnerCoin{
  from{
    transform:
      translate(-50%,-50%)
      rotateX(-3deg)
      rotateY(7200deg)
      scale(1)
  }
  to{
    transform:
      translate(-50%,-50%)
      rotateX(-3deg)
      rotateY(7200deg)
      scale(1.035);
    filter:
      brightness(1.22)
      drop-shadow(0 0 30px rgba(255,40,155,.72))
  }
}

@keyframes nameDrawV5Float{
  from{transform:translate(-50%,-50%) translateY(-4px)}
  to{transform:translate(-50%,-50%) translateY(6px)}
}

@keyframes nameDrawV5Marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@keyframes nameDrawV5Selected{
  to{
    transform:scale(1.10);
    filter:
      saturate(2)
      brightness(1.7)
      drop-shadow(0 0 18px currentColor)
  }
}

@keyframes nameDrawV5Firework{
  0%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      scale(.18)
      rotate(0deg)
  }
  13%{opacity:1}
  100%{
    opacity:0;
    transform:
      translate(
        calc(-50% + var(--x)),
        calc(-50% + var(--y))
      )
      scale(var(--scale))
      rotate(720deg)
  }
}

@media(max-width:700px){
  .name-draw-v5-assembly{
    top:51%!important;
    width:98vw!important;
    height:84vh!important
  }

  .name-draw-v5-coin-3d{
    top:36%!important;
    width:min(78vw,53vh)!important
  }

  .name-draw-v5-platform{
    top:78%!important;
    width:98vw!important;
    height:125px!important
  }

  .name-draw-v5-marquee-window{
    top:52%!important;
    height:60px!important
  }

  .name-draw-v5-name-set{
    gap:25px!important;
    padding:0 13px!important
  }

  .name-draw-v5-name{font-size:32px!important}
  .name-draw-v5-name.is-medium{font-size:28px!important}
  .name-draw-v5-name.is-long{font-size:23px!important}
  .name-draw-v5-name.is-very-long{font-size:18px!important}
}

/* END NAME DRAW 3D COIN V5 */

/* BEGIN TRIGGER WARNING ABOVE METADATA V1 */

/*
 * Die Triggerwarnung bleibt Bestandteil des Metadatenbereichs,
 * wird aber absolut oberhalb des Namens-/Titelfeldes angeordnet.
 * Dadurch beeinflusst sie weder Höhe noch Inhalt des Textfeldes.
 */
#metadata {
  overflow: visible !important;
}

#metadata > #warning:not([hidden]) {
  display: flex !important;
  position: absolute !important;

  top: auto !important;
  bottom: calc(100% + clamp(10px, 1.4vh, 18px)) !important;

  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  z-index: 1300 !important;

  text-align: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

#metadata > #warning[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  #metadata > #warning:not([hidden]) {
    max-width: calc(100vw - 24px) !important;
    bottom: calc(100% + 10px) !important;
  }
}

/* END TRIGGER WARNING ABOVE METADATA V1 */
/* TikTok: kompaktes Hochformat-Fenster vor der Playeranimation. */
#media iframe[data-kind="tiktok"] {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: min(34vw, 430px) !important;
  height: min(76vh, 765px) !important;
  min-width: 300px !important;
  aspect-ratio: 9 / 16 !important;
  transform: translate(-50%, -50%) !important;
  border: 2px solid rgba(255,255,255,.28) !important;
  border-radius: 18px !important;
  background: #000 !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.72), 0 0 42px rgba(255,45,85,.3) !important;
  overflow: hidden !important;
  display: block !important;
  z-index: 900 !important;
}

/* SoundCloud: kompakte Playerkarte vor der laufenden Animation. */
#media iframe[data-kind="soundcloud"] {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: min(82vw, 760px) !important;
  height: 300px !important;
  max-height: calc(100vh - 80px) !important;
  transform: translate(-50%, -50%) !important;
  border: 2px solid rgba(255,255,255,.28) !important;
  border-radius: 18px !important;
  background: #111 !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.72), 0 0 42px rgba(255,85,0,.3) !important;
  overflow: hidden !important;
  display: block !important;
  z-index: 900 !important;
}

/* Unscharf betrifft nur die aktive Videoquelle, nie die Hintergrundanimation. */
#media.blur > video.foreground-media,
#media.blur > iframe[data-kind="youtube"],
#media.blur > iframe[data-kind="tiktok"],
#media.blur > iframe[data-kind="vimeo"] {
  filter: blur(var(--blur,18px)) !important;
}

#media.blur > .background-animation,
#media.blur > .fallback-animation,
#media.blur > .spotify-embed-container,
#media.blur > iframe[data-kind="soundcloud"] {
  filter: none !important;
}

/* Letzte Schutzregel: YouTube bleibt bei jedem Quellenwechsel exakt mittig. */
#media > iframe[data-kind="youtube"],
#media > iframe.youtube-obs-centered {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(52vw, 860px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 72px) !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  z-index: 900 !important;
}

/* Nur das abgelehnte Motiv wird unkenntlich; der Münzrahmen bleibt scharf. */
#media .song-cover-rejected .song-cover-image{filter:blur(80px) brightness(.2) saturate(0);transform:scale(1.7);}
#media .song-cover-rejected{overflow:hidden;}

/* DEINE 60 SEKUNDEN OBS/UDB IDLE LOGO V1
   Ersetzt die alte MP4-Playeranimation durch ein animiertes Theme-Logo. */
#media .player-logo-idle {
  position: absolute !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(8, 124, 255, .30), transparent 28%),
    radial-gradient(circle at 50% 74%, rgba(248, 201, 74, .20), transparent 36%),
    linear-gradient(180deg, rgba(1, 4, 12, .62), rgba(1, 4, 12, .94)),
    url("/theme/assets/deine60-bg.jpg?v=20260810") center / cover no-repeat !important;
}

#media .player-logo-idle::before,
#media .player-logo-idle::after {
  content: "" !important;
  position: absolute !important;
  inset: -22% !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

#media .player-logo-idle::before {
  background:
    linear-gradient(66deg, transparent 0 43%, rgba(8, 186, 255, .34) 49%, transparent 55%),
    linear-gradient(111deg, transparent 0 44%, rgba(248, 201, 74, .25) 50%, transparent 57%) !important;
  animation: playerLogoBeams 8s ease-in-out infinite alternate !important;
}

#media .player-logo-idle::after {
  background:
    radial-gradient(circle at 20% 35%, rgba(8,186,255,.80) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 58%, rgba(248,201,74,.88) 0 1px, transparent 2px),
    radial-gradient(circle at 47% 70%, rgba(255,255,255,.75) 0 1px, transparent 2px) !important;
  background-size: 90px 90px, 120px 120px, 72px 72px !important;
  opacity: .62 !important;
  animation: playerLogoStars 12s linear infinite !important;
}

#media .player-logo-idle img {
  position: relative !important;
  z-index: 3 !important;
  width: min(78vw, 1180px) !important;
  max-height: 82vh !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 0 22px rgba(8, 186, 255, .62))
    drop-shadow(0 0 38px rgba(248, 201, 74, .54))
    drop-shadow(0 24px 50px rgba(0, 0, 0, .82)) !important;
  animation: playerLogoFloat 5.2s ease-in-out infinite !important;
}

#media .player-logo-idle-orbit {
  position: absolute !important;
  z-index: 2 !important;
  width: min(58vw, 820px) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(248, 201, 74, .30) !important;
  box-shadow:
    0 0 60px rgba(8, 186, 255, .18),
    inset 0 0 55px rgba(248, 201, 74, .12) !important;
  animation: playerLogoOrbit 14s linear infinite !important;
}

#media .player-logo-idle-sparks {
  position: absolute !important;
  z-index: 4 !important;
  width: min(86vw, 1200px) !important;
  height: min(60vh, 620px) !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 2px, transparent 3px) 10% 25% / 190px 110px,
    radial-gradient(circle, rgba(248,201,74,.95) 0 2px, transparent 3px) 78% 42% / 160px 120px,
    radial-gradient(circle, rgba(8,186,255,.95) 0 2px, transparent 3px) 38% 70% / 210px 130px !important;
  opacity: .72 !important;
  animation: playerLogoSparkle 2.4s ease-in-out infinite alternate !important;
}

@keyframes playerLogoFloat {
  0%, 100% { transform: translateY(0) scale(.985) rotate(-.25deg); }
  50% { transform: translateY(-18px) scale(1.025) rotate(.18deg); }
}

@keyframes playerLogoBeams {
  from { transform: translateX(-4%) rotate(-1.5deg); opacity: .58; }
  to { transform: translateX(4%) rotate(1.5deg); opacity: .92; }
}

@keyframes playerLogoStars {
  to { transform: translate3d(-80px, 40px, 0); }
}

@keyframes playerLogoOrbit {
  to { transform: rotate(360deg); }
}

@keyframes playerLogoSparkle {
  from { opacity: .36; filter: brightness(.92); }
  to { opacity: .84; filter: brightness(1.35); }
}

@media (max-width: 700px) {
  #media .player-logo-idle img {
    width: 104vw !important;
  }
  #media .player-logo-idle-orbit {
    width: 92vw !important;
  }
}


/* DEINE60 COVER COIN FRAME V1 */
#media .song-cover-container{
  filter: drop-shadow(0 24px 74px rgba(0,0,0,.86)) drop-shadow(0 0 26px rgba(255,177,45,.22)) !important;
}
#media .song-cover-coin-frame{
  object-fit: cover !important;
}

/* OBS PLAYER 1 FULL ANIMATION V1
   Die MP4-Logoanimation im ersten OBS-Player wird vollständig angezeigt.
   Dadurch wird beim Verschieben/Skalieren der Browserquelle nichts vom Motiv abgeschnitten. */
#media video.player-logo-idle.background-animation,
#media video.player-logo-idle.fallback-animation,
#media .player-logo-idle.background-animation,
#media .player-logo-idle.fallback-animation{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #020617 !important;
}