/* ============================================================
   UI CLEANUP v2 (2026-08-01) — online-mode ad slot rework.
   Loads after ui-cleanup-v1.css. Pure override layer, no DOM changes.

   Fixes three things reported from the live stream:
     1. Clicking an ad almost always opened Synapse. All 16 cards are
        position:absolute/inset:0 with pointer-events:auto and only
        opacity animating, so the LAST card in DOM order (index 15 =
        Synapse) sat on top and swallowed every click. Now pointer
        events are enabled only while a card is actually visible.
     2. Rotation was too fast to read (5s/card). Now 9s/card.
     3. The cards were a text marquee. Now each shows its game's art.
   Killing the marquee also removes 3 scrolling lanes x 16 cards of
   continuous animation, which is a straight win for OBS repaint cost.
   ============================================================ */

/* ---------- 1 + 2: click target follows the visible card ---------- */
.header-ad-card {
  pointer-events: none;                 /* base: never clickable */
  animation: header-ad-rotate-16b 144s linear infinite;
}
/* One slot = 9s = 6.25% of the 144s loop. The visible window runs slightly
   PAST its slot so the next card is already fading in — without that overlap
   there is a ~1.4s hole where the ad area shows nothing. */
@keyframes header-ad-rotate-16b {
  0%          { opacity: 0; pointer-events: none; }
  0.4%        { opacity: 1; pointer-events: auto; }
  6.0%        { opacity: 1; pointer-events: auto; }
  6.9%        { opacity: 0; pointer-events: none; }
  100%        { opacity: 0; pointer-events: none; }
}
.header-ad-card[data-ad-index="0"]  { animation-delay: 0s; }
.header-ad-card[data-ad-index="1"]  { animation-delay: 9s; }
.header-ad-card[data-ad-index="2"]  { animation-delay: 18s; }
.header-ad-card[data-ad-index="3"]  { animation-delay: 27s; }
.header-ad-card[data-ad-index="4"]  { animation-delay: 36s; }
.header-ad-card[data-ad-index="5"]  { animation-delay: 45s; }
.header-ad-card[data-ad-index="6"]  { animation-delay: 54s; }
.header-ad-card[data-ad-index="7"]  { animation-delay: 63s; }
.header-ad-card[data-ad-index="8"]  { animation-delay: 72s; }
.header-ad-card[data-ad-index="9"]  { animation-delay: 81s; }
.header-ad-card[data-ad-index="10"] { animation-delay: 90s; }
.header-ad-card[data-ad-index="11"] { animation-delay: 99s; }
.header-ad-card[data-ad-index="12"] { animation-delay: 108s; }
.header-ad-card[data-ad-index="13"] { animation-delay: 117s; }
.header-ad-card[data-ad-index="14"] { animation-delay: 126s; }
.header-ad-card[data-ad-index="15"] { animation-delay: 135s; }

/* ---------- 3: art tile instead of the scrolling name marquee ---------- */
.header-ad-row { display: none !important; }   /* kills 48 animated tracks */

.header-ad-card::before {
  content: '';
  position: absolute;
  left: 40px; top: 50%;
  transform: translateY(-50%);
  width: 196px; height: 196px;
  border-radius: 30px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 4px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  z-index: 3;
}

/* Copy block moves right of the tile and left-aligns. */
.header-ad-center {
  left: 268px;
  right: 32px;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 10px;
  background: none;                      /* radial scrim no longer needed */
}
.header-ad-name { font-size: 54px; letter-spacing: 0.5px; }
.header-ad-url  { font-size: 26px; opacity: 0.88; }

/* Per-card artwork. Index order must match the ADS array in HeaderBar.js. */
.header-ad-card[data-ad-index="0"]::before  { background-image: url('https://wordtycoon.live/portal/img/logo.png'); }
.header-ad-card[data-ad-index="1"]::before  { background-image: url('https://wordtycoon.live/portal/img/game-rectangled.png'); }
.header-ad-card[data-ad-index="2"]::before  { background-image: url('https://wordtycoon.live/portal/img/game-erectangled.png'); }
.header-ad-card[data-ad-index="3"]::before  { background-image: url('https://wordtycoon.live/portal/img/game-wikisearchle.png'); }
.header-ad-card[data-ad-index="4"]::before  { background-image: url('https://wordtycoon.live/portal/img/game-wikirectangled.png'); }
.header-ad-card[data-ad-index="5"]::before  { background-image: url('https://wordtycoon.live/portal/img/game-word500.png'); }
.header-ad-card[data-ad-index="6"]::before  { background-image: url('https://wordtycoon.live/portal/img/game-colour500.svg'); }
.header-ad-card[data-ad-index="7"]::before  { background-image: url('https://wordtycoon.live/portal/img/game-junkdrawer.png'); }
.header-ad-card[data-ad-index="8"]::before  { background-image: url('https://wordtycoon.live/portal/img/game-wordle.png'); }
.header-ad-card[data-ad-index="9"]::before  { background-image: url('https://wordtycoon.live/portal/img/game-betwixt.png'); }
.header-ad-card[data-ad-index="10"]::before { background-image: url('https://wordtycoon.live/portal/img/game-pixeletters.png'); }
.header-ad-card[data-ad-index="11"]::before { background-image: url('https://wordtycoon.live/portal/img/game-spellingbee.png'); }
.header-ad-card[data-ad-index="12"]::before { background-image: url('https://wordtycoon.live/portal/img/game-figural.png'); }
.header-ad-card[data-ad-index="13"]::before { background-image: url('https://wordtycoon.live/portal/img/game-unwordle.png'); }
.header-ad-card[data-ad-index="14"]::before { background-image: url('https://wordtycoon.live/portal/img/game-triangled.png'); }
.header-ad-card[data-ad-index="15"]::before { background-image: url('https://wordtycoon.live/portal/img/game-synapse.png'); }

/* ---------- Legal line relocated between the two podiums ---------- */
/* The graft in index.html moves .wt-legal-footer into the header, right
   under the URL row — i.e. below the last-round slots and above the live
   podium. Inside the header it scales with the scene, so it reads the
   same in OBS as on the web. */
.header-bar .wt-legal-footer {
  position: static;
  padding: 2px 0 6px;
  text-align: center;
  font-size: 20px;
  line-height: 1.3;
  color: rgba(155, 143, 181, 0.75);
  opacity: 1;
  white-space: normal;
  z-index: auto;
}
/* #dom-ui-container (the CSS3D wrapper) is pointer-events:none and that
   inherits all the way down, so anything inside the scene must opt back in
   — moving the footer into the header made these links unclickable.
   Enabled on the anchors only, so the rest of the strip stays click-through. */
.header-bar .wt-legal-footer a { color: inherit; margin: 0 6px; pointer-events: auto; }