/* The ad overlay. Positioned over whatever box the content would have used,
   never re-parented, always above every video window. */
.exp-ad {
  position: fixed;
  left: 0; top: 0;
  width: 480px; height: 270px;
  /* Must beat the content video window, which is NOT the 1/45/60 that
     video-window.css suggests: public/game/game.css:1833 carries a legacy
     `.exp-video-window { z-index: 96 }` from the old in-game player, and that
     wins. At 80 the ad played *behind* the video — audible, invisible, with
     only its drop shadow leaking past the edges. Kept well clear so another
     stylesheet has to try hard to get above it. */
  z-index: 2000;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
}

.exp-ad__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Covers the frame so the whole ad is clickable. The skip button sits above it. */
.exp-ad__click {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.exp-ad__click[hidden] { display: none; }

.exp-ad__badge {
  position: absolute;
  left: 10px; top: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font: 600 11px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Bottom-anchored stack: the CTA card sits directly above the foot in normal
   flow, so the two can never overlap regardless of frame size — no magic
   offsets to keep in sync as the CTA's content changes. */
.exp-ad__bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
  pointer-events: none;
}

/* The foot holds the XP bar and the skip button on one row. It spans the frame,
   so it stays transparent to clicks and only the button takes them back — the
   rest of that strip is still click-through to the advertiser. */
.exp-ad__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

/* The visible click-through. Dark and translucent because it always sits over
   video — the rest of the site is white, but this card never is. Reserves its
   layout space from frame one (so the foot never jumps when it reveals) and
   only fades its opacity in ~2s later. */
.exp-ad__cta {
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(10, 12, 18, .82);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.exp-ad__cta[hidden] { display: none; }
.exp-ad__cta.exp-ad__cta--on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.exp-ad__cta-logo {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(255, 255, 255, .1);
}
.exp-ad__cta-logo[hidden] { display: none; }

.exp-ad__cta-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exp-ad__cta-headline,
.exp-ad__cta-domain {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.exp-ad__cta-headline:empty,
.exp-ad__cta-domain:empty { display: none; }
.exp-ad__cta-domain {
  font-weight: 500;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .68);
}

.exp-ad__cta-btn {
  pointer-events: auto;
  flex: none;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--app-accent, #22d37a);
  color: #06210f;
  font: 700 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.exp-ad__cta-btn:hover { filter: brightness(1.08); }

/* The EXP bar from the logo: black track, blue ring, chunky segmented green
   fill. It sweeps to full over the eight seconds, and full means skippable. */
.exp-ad__xp {
  flex: 1;
  height: 16px;
  border: 3px solid #000;
  border-radius: 999px;
  background: #000;
  box-shadow: 0 0 0 2px #1b6fd4;
  overflow: hidden;
  transition: opacity .4s ease;
}
/* Its job is done at eight seconds; get it off the creative. */
.exp-ad__xp[data-done="1"] { opacity: 0; }

.exp-ad__xp-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background:
    repeating-linear-gradient(100deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #8cf58c 0%, #3ad63a 46%, #17a017 100%);
}

.exp-ad__skip {
  pointer-events: auto;
  flex: none;
  min-width: 96px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 3px;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
.exp-ad__skip:disabled {
  cursor: default;
  opacity: .82;
  border-color: rgba(255, 255, 255, .18);
}
.exp-ad__skip:not(:disabled):hover { background: rgba(0, 0, 0, .88); }

/* On a phone the countdown must not eat the frame. */
@media (max-width: 640px) {
  .exp-ad__bottom { left: 0; right: 0; padding: 0 8px 8px; gap: 6px; }
  .exp-ad__foot { gap: 8px; }
  .exp-ad__skip { min-width: 82px; padding: 8px 11px; font-size: 12px; }
  .exp-ad__xp { height: 12px; border-width: 2px; }
  .exp-ad__badge { left: 8px; top: 8px; }
  .exp-ad__cta { padding: 6px 8px; gap: 8px; }
  .exp-ad__cta-logo { width: 26px; height: 26px; }
  .exp-ad__cta-btn { padding: 7px 10px; font-size: 11.5px; }
}

/* ==========================================================================
   Companion card — outlives the ad by COMPANION_MS (ad-companion.js). One
   component, two placements: docked under the watch player in normal flow,
   or fixed to the corner over the game. Both share this base; the modifiers
   below only change position, sizing and the light/dark treatment.
   ========================================================================== */
.exp-companion {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

/* The anchor fills the whole card so anywhere except the ✕ opens the link —
   the close button sits above it in its own corner, out of the anchor. */
.exp-companion__link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 34px 10px 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.exp-companion__label {
  position: absolute;
  left: 12px; top: 6px;
  font: 700 9.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .62;
}

.exp-companion__logo {
  flex: none;
  width: 36px; height: 36px;
  margin-top: 8px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(127, 127, 127, .18);
}
.exp-companion__logo[hidden] { display: none; }

.exp-companion__info {
  flex: 1;
  min-width: 0;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exp-companion__headline,
.exp-companion__domain {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.exp-companion__headline:empty,
.exp-companion__domain:empty { display: none; }
.exp-companion__domain {
  font-weight: 500;
  font-size: 11px;
  opacity: .62;
}

.exp-companion__cta {
  flex: none;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font: 700 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
}

.exp-companion__close {
  position: absolute;
  right: 6px; top: 6px;
  z-index: 1;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

/* -- watch: docked under the player, native to the white site ------------- */
.exp-companion--watch {
  margin: 12px 0 4px;
  min-height: 62px;
  background: var(--app-tile, #e8e8ec);
  border: 1px solid var(--app-line, rgba(0, 0, 0, .12));
  color: var(--app-fg, #0f0f10);
}
.exp-companion--watch .exp-companion__cta {
  background: var(--app-accent, #22d37a);
  color: #06210f;
}
.exp-companion--watch .exp-companion__close {
  background: rgba(0, 0, 0, .06);
  color: var(--app-fg, #0f0f10);
}
.exp-companion--watch .exp-companion__close:hover { background: rgba(0, 0, 0, .12); }

/* -- game: fixed over the world, clear of the bottom HUD and below every
   floating video window (windows: 45, this: 44, ad overlay while live: 80) */
.exp-companion--game {
  position: fixed;
  left: 14px;
  bottom: 108px;
  z-index: 44;
  width: 240px;
  min-height: 62px;
  background: rgba(10, 12, 18, .88);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.exp-companion--game .exp-companion__cta {
  background: #22d37a;
  color: #06210f;
}
.exp-companion--game .exp-companion__close {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.exp-companion--game .exp-companion__close:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 640px) {
  .exp-companion--game { left: 8px; bottom: 128px; width: 210px; }
}