/* Promotion placement (see includes/promo.php). Standalone: works on the legacy dark pages and the redesigned cream pages.
   Override --promo-fg / --promo-line / --promo-bg on a page or container to re-theme it. */
.promo {
  --promo-fg: #d9cfbf;          /* label + house text (legacy dark pages) */
  --promo-line: rgba(255, 255, 255, .18);
  --promo-bg: rgba(255, 255, 255, .06);
  --promo-accent: #f0c46b;
  width: 100%;
  margin: 12px auto;
  padding: 0 8px;
  box-sizing: border-box;
  text-align: center;
}
.promo-label { display: block; min-height: 16px; font: 11px/16px system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--promo-fg); opacity: .8; }

/* The frame is ALWAYS the reserved size for the breakpoint, so a campaign turning on/off never shifts the page. */
.promo-frame {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: calc(var(--w-m) * 1px);
  aspect-ratio: var(--w-m) / var(--h-m);
}
@media (min-width: 760px) and (min-height: 521px) { .promo-frame { max-width: calc(var(--w-t) * 1px); aspect-ratio: var(--w-t) / var(--h-t); } }
@media (min-width: 1000px) and (min-height: 521px) { .promo-frame { max-width: calc(var(--w-d) * 1px); aspect-ratio: var(--w-d) / var(--h-d); } }

.promo-link picture, .promo-link img { display: block; width: 100%; height: 100%; }
.promo-link img { object-fit: contain; border: 0; }
.promo-link:focus-visible { outline: 3px solid var(--promo-accent); outline-offset: 2px; }

/* House strip: shown when no campaign is eligible. Deliberately quiet. */
.promo-house {
  display: flex; align-items: center; justify-content: center; gap: 10px 18px; flex-wrap: wrap;
  padding: 8px 14px; box-sizing: border-box; overflow: hidden;
  background: var(--promo-bg); border: 1px solid var(--promo-line); border-radius: 10px;
  color: var(--promo-fg); text-decoration: none; font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.promo-house b { color: var(--promo-accent); font-weight: 600; }
.promo-house:hover { text-decoration: none; border-color: var(--promo-accent); }
.promo-house:focus-visible { outline: 3px solid var(--promo-accent); outline-offset: 2px; }

/* V2 contextual module (includes/cta.php). Deliberately styled as an advertisement, not as site navigation or a game control. */
.promo--cta { max-width: 728px; margin: 26px auto 0; text-align: left; --promo-fg: #6a5851; --promo-line: #e3d7c1; --promo-bg: #fffdf8; --promo-accent: #7a1e2c; }
.promo--cta .promo-label { text-align: left; }
.cta-box { padding: 14px 16px; background: var(--promo-bg); border: 1px dashed var(--promo-line); border-radius: 12px; }
.cta-box p { margin: 0 0 10px; font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: #2b1c19; }
.cta-link { display: inline-block; padding: 9px 16px; border: 1px solid var(--promo-accent); border-radius: 8px; color: var(--promo-accent); font: 600 14.5px system-ui, sans-serif; text-decoration: none; }
.cta-link:hover { background: rgba(122, 30, 44, .06); }
.cta-box small { display: block; margin-top: 10px; font: 12px/1.4 system-ui, sans-serif; color: var(--promo-fg); }

/* Small frames (320x50 mobile banner): the quiet house strip stays on one line */
@media (max-width: 759px), (max-height: 520px) {
  .promo-house { flex-wrap: nowrap; gap: 8px 12px; padding: 4px 10px; font-size: 13px; white-space: nowrap; }
  .promo-house span { overflow: hidden; text-overflow: ellipsis; }
}