/* DuelVerse — ad slots. HOUSE creatives only (DuelVerse brand, Crown Clash,
   cross-game promos) with the Split Crown logo. A signed sponsor's creative
   replaces a house one at integration time; there is no placeholder.
   Tokens mirror site.css (:root is defined there; ads.css loads after it).
   Rules: no popups, no overlays, never inside a game board, never mid-match. */

.adslot{
  position:relative;
  margin:0 auto 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
}
.adslot-label{
  position:absolute;top:0;right:0;z-index:2;
  font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
  background:rgba(5,5,5,.55);
  padding:3px 8px;
  border-radius:0 0 0 var(--radius-sm);
}
.ad-creative{
  display:flex;align-items:center;gap:16px;
  width:100%;height:100%;
  padding:12px 18px;
  color:var(--text);
}
.ad-creative:hover .ad-cta{background:var(--accent-2);color:#1b1030}
.ad-badge{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:14px;
  font-size:1.5rem;color:#fff;
  background:linear-gradient(145deg,var(--accent),#5b21b6);
  box-shadow:var(--glow);
}
.ad-copy{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto}
.ad-title{font-size:1.06rem;font-weight:800;letter-spacing:.01em;line-height:1.25}
.ad-text{font-size:.85rem;color:var(--muted);line-height:1.4}
.ad-cta{
  flex:0 0 auto;
  font-size:.82rem;font-weight:700;white-space:nowrap;
  color:#fff;background:var(--accent);
  padding:8px 14px;border-radius:var(--radius-sm);
  transition:background .15s ease,color .15s ease;
}

/* ---------- Split Crown logo in creatives ---------- */
.ad-logo-lockup{flex:0 0 auto;height:54px;width:auto}
.ad-logo-mark{flex:0 0 auto;width:72px;height:72px}

/* ---------- leaderboard 728x90 ---------- */
.adslot-leaderboard{width:min(728px,100%);height:90px}
.adslot-leaderboard .ad-creative{padding-top:16px}

/* ---------- rectangle 300x250 ---------- */
.adslot-rectangle{width:min(300px,100%);height:250px}
.adslot-rectangle .ad-creative{
  flex-direction:column;justify-content:center;text-align:center;
  gap:10px;padding:22px 20px 16px;
}
.adslot-rectangle .ad-copy{margin-right:0;align-items:center}
.adslot-rectangle .ad-title{font-size:1.3rem}
.adslot-rectangle .ad-badge{width:58px;height:58px;font-size:1.7rem}

/* ---------- house variants ---------- */
.ad-crown{
  background:
    radial-gradient(500px 180px at 88% -40%,rgba(124,58,237,.30),transparent 60%),
    linear-gradient(120deg,var(--panel-2),var(--panel));
}
.ad-brand{
  background:
    radial-gradient(500px 180px at 12% -40%,rgba(124,58,237,.26),transparent 60%),
    linear-gradient(120deg,var(--panel-2),var(--panel));
}
.ad-cross{
  background:
    radial-gradient(500px 180px at 8% -40%,rgba(124,58,237,.24),transparent 60%),
    linear-gradient(120deg,var(--panel),var(--panel-2));
}
.ad-house-rect{
  background:
    radial-gradient(320px 200px at 50% -30%,rgba(124,58,237,.32),transparent 62%),
    linear-gradient(170deg,var(--panel-2),var(--panel));
}

/* ---------- small screens ---------- */
@media (max-width:560px){
  .adslot-leaderboard{height:auto;min-height:90px}
  .adslot-leaderboard .ad-creative{gap:10px;padding:14px 12px 12px}
  .adslot-leaderboard .ad-badge{width:40px;height:40px;border-radius:11px;font-size:1.1rem}
  .adslot-leaderboard .ad-logo-lockup{height:38px}
  .adslot-leaderboard .ad-title{font-size:.92rem}
  .adslot-leaderboard .ad-text{font-size:.76rem}
  .adslot-leaderboard .ad-cta{font-size:.74rem;padding:6px 10px}
  .adslot-rectangle{height:auto;min-height:250px}
}
@media (prefers-reduced-motion:reduce){
  .ad-cta{transition:none}
}

/* ---------- Lite mode: slot stays, flat ---------- */
html[data-experience="lite"] .adslot .ad-creative{background:var(--panel)}
html[data-experience="lite"] .ad-badge{background:var(--accent);box-shadow:none}
html[data-experience="lite"] .ad-cta{transition:none}