/* ============================================================
 * sponsored_ad.css — polished styling for in-game Sponsored Ad
 * tiles (text / banner / video). Served markup comes from
 * backend/ads_serve.php; this file gives those classes a real,
 * theme-aware design. Colors reuse the board skin variables
 * (--panel, --text, --text-dim, --accent, --line) with safe
 * fallbacks, so the card adapts to Dark / Light / other skins.
 * ============================================================ */

.abp-ad-slot {
  display: block;
  width: 100%;
}

/* ---- Card shell ------------------------------------------------ */
.abp-sponsored-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--panel, #101833) 92%, #fff 0%) 0%,
      color-mix(in srgb, var(--panel, #101833) 100%, #000 6%) 100%);
  border: 1px solid var(--line, #1c2747);
  box-shadow:
    0 18px 48px -18px rgba(0, 0, 0, .65),
    0 2px 0 0 rgba(255, 255, 255, .03) inset;
  isolation: isolate;
}

/* Accent glow strip along the top edge */
.abp-sponsored-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent, #4f7cff) 25%,
    color-mix(in srgb, var(--accent, #4f7cff) 70%, #fff 30%) 50%,
    var(--accent, #4f7cff) 75%,
    transparent 100%);
  opacity: .9;
  z-index: 2;
}

/* ---- Header (Sponsored pill) ----------------------------------- */
.abp-sponsored-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
}

.abp-sponsored-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim, #a9b9ff);
  background: color-mix(in srgb, var(--accent, #4f7cff) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #4f7cff) 40%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
}

.abp-sponsored-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #4f7cff);
  box-shadow: 0 0 8px var(--accent, #4f7cff);
}

/* ---- Body ------------------------------------------------------ */
.abp-sponsored-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 14px 16px;
}

/* ---- Media (banner / video) ------------------------------------ */
.abp-ad-media {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.018) 0 10px,
      rgba(255,255,255,0) 10px 20px),
    rgba(0, 0, 0, .28);
  border: 1px solid var(--line, #1c2747);
}

.abp-ad-media--banner {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abp-ad-media--banner img {
  border-radius: 11px;
}

/* Maintain a pleasing video frame when no explicit size is given */
.abp-ad-media--video {
  aspect-ratio: 16 / 9;
  background: #0a0e18;
}

.abp-ad-media--video iframe,
.abp-ad-media--video .abp-ad-video {
  width: 100%;
  height: 100%;
  display: block;
  /* contain (not cover) so portrait / odd-ratio clips aren't cropped at the
     top and bottom — the whole frame shows, letterboxed against the matte. */
  object-fit: contain;
  border: 0;
}

.abp-ad-video-link { display: block; text-decoration: none; }

/* ---- Text meta block ------------------------------------------- */
.abp-sponsored-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The title anchor (rendered inline-styled by PHP; we enrich it) */
.abp-sponsored-meta > a:first-child {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text, #e6edff) !important;
  text-decoration: none;
  letter-spacing: -.01em;
}
.abp-sponsored-meta > a:first-child:hover {
  color: color-mix(in srgb, var(--accent, #4f7cff) 60%, var(--text, #e6edff)) !important;
}

.abp-sponsored-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #4f7cff);
  letter-spacing: .02em;
  word-break: break-word;
}

.abp-sponsored-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim, #a9b9ff);
}

/* ---- CTA button ------------------------------------------------ */
.abp-sponsored-cta {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #4f7cff) 90%, #fff 10%),
    var(--accent, #4f7cff));
  border: 1px solid color-mix(in srgb, var(--accent, #4f7cff) 60%, #000 10%);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent, #4f7cff) 80%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.abp-sponsored-cta::after {
  content: "→";
  font-weight: 700;
  transition: transform .12s ease;
}
.abp-sponsored-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent, #4f7cff) 90%, transparent);
  transform: translateY(-1px);
}
.abp-sponsored-cta:hover::after { transform: translateX(3px); }
.abp-sponsored-cta:active { transform: translateY(0); }

/* ---- The "You landed on a Sponsored Ad tile" caption ----------- */
.abp-ad-caption {
  margin: 12px 2px 0;
  font-size: 12px;
  color: var(--text-dim, #a9b9ff);
  opacity: .8;
  text-align: center;
}

/* Fallback for browsers without color-mix(): keep it readable */
@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .abp-sponsored-pill {
    color: #a9b9ff;
    background: rgba(79, 124, 255, .14);
    border-color: rgba(79, 124, 255, .4);
  }
  .abp-sponsored-cta {
    background: #4f7cff;
    border-color: #3a63d6;
  }
}

/* Small screens: tighten padding, full-bleed card */
@media (max-width: 480px) {
  .abp-sponsored-card { max-width: 100%; border-radius: 14px; }
  .abp-sponsored-body { padding: 4px 12px 14px; }
  .abp-sponsored-meta > a:first-child { font-size: 16px; }
}

/* ============================================================
 * EARN-PAGE VARIANT (dark cyan-glass)
 * The Earn page runs a dark theme (body.tron): dark glass cards,
 * cyan accent (#12d7ff / rgba(18,215,255,…)), light text. Its own
 * surrounding cards (the chart panel and modals) use
 * background rgba(6,12,28,…) with rgba(18,215,255,.18) borders and
 * rgba(234,247,255,…) text. We match THAT exactly so the sponsored
 * card reads as one of the page's own cards instead of a white box.
 * All colors are explicit (no var()) so no external accent bleeds in.
 * ============================================================ */
.sponsor-card { margin-top: 18px; margin-bottom: 18px; }

.sponsor-card .abp-sponsored-card {
  background: linear-gradient(180deg, rgba(10,18,38,.92) 0%, rgba(6,12,28,.86) 100%);
  border: 1px solid rgba(18,215,255,.18);
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.6);
}
/* Soft cyan accent strip (subtle, not a loud glow) */
.sponsor-card .abp-sponsored-card::before {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(18,215,255,.7) 40%, rgba(120,235,255,.9) 50%, rgba(18,215,255,.7) 60%, transparent);
  opacity: .65;
}
.sponsor-card .abp-sponsored-pill {
  color: rgba(234,247,255,.92);
  background: rgba(18,215,255,.10);
  border-color: rgba(18,215,255,.22);
}
.sponsor-card .abp-sponsored-pill::before {
  background: #12d7ff;
  box-shadow: 0 0 8px rgba(18,215,255,.6);
}
.sponsor-card .abp-sponsored-meta > a:first-child { color: rgba(234,247,255,.95) !important; }
.sponsor-card .abp-sponsored-meta > a:first-child:hover { color: #12d7ff !important; }
.sponsor-card .abp-sponsored-link { color: rgba(120,200,255,.95); }
.sponsor-card .abp-sponsored-desc { color: rgba(234,247,255,.7); }
.sponsor-card .abp-ad-media {
  background: rgba(0,0,0,.25);
  border-color: rgba(18,215,255,.14);
}
.sponsor-card .abp-ad-media--video { background: rgba(0,0,0,.35); }
.sponsor-card .abp-sponsored-cta {
  color: #04121c;
  background: linear-gradient(180deg, #3ee0ff, #12d7ff);
  border-color: rgba(18,215,255,.55);
  box-shadow: 0 8px 20px -10px rgba(18,215,255,.5);
}
.sponsor-card .abp-sponsored-cta:hover {
  box-shadow: 0 11px 24px -10px rgba(18,215,255,.65);
}