/* Countdown layout (site.json "layout": "countdown"). Loaded after style.css.
   Model: the Gen Gamer banner-countdown pages. Full-screen art, sticky offer pill, centred white timers. */
body.cdl { background: #08070f; color: #fffdfc; }
.cd-bg { position: fixed; inset: 0; z-index: -1; background-color: #08070f; background-size: cover; background-position: center top;
  background-image: radial-gradient(900px 600px at 50% 18%, rgba(123, 97, 255, .38), transparent 70%), radial-gradient(700px 500px at 80% 70%, rgba(40, 170, 200, .18), transparent 70%), linear-gradient(#0b0a14, #08070f); }

/* ---------- sticky offer pill ---------- */
.offer-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto; padding: 8px 12px;
  background: rgba(38, 38, 40, .88); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.offer-text { font-size: 14px; font-weight: 700; color: #fff; }
.offer-btn { display: inline-flex; align-items: center; gap: 6px; background: #ffd700; color: #333; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(255, 215, 0, .25); }
.offer-btn:hover { filter: brightness(1.06); }
@media (min-width: 700px) {
  .offer-bar { width: max-content; max-width: calc(100% - 24px); top: 8px; margin-top: 8px; padding: 6px 8px 6px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; }
}

/* ---------- hero: title + stacked timers ---------- */
.cd-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 16px 40px; min-height: calc(100vh - 60px); }
.cd-logo { font: 800 20px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none; margin: 0 0 54px; opacity: .92; }
.cd-logo span { color: var(--accent); margin-left: .35em; }
.cd-hero h1 { font: 700 32px/1.3 var(--font); text-transform: none; letter-spacing: 0; color: #fffdfc; margin: 0 0 10px; max-width: 20ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.cd-sub { font-size: 21px; line-height: 1.35; color: #fffdfc; margin: 0 0 6px; max-width: 30ch; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.cdt { width: 100%; max-width: 760px; margin: 26px 0 0; }
.cdt-label { font: 700 30px/1.2 var(--font); text-transform: none; letter-spacing: 0; color: #fffdfc; margin: 0 0 6px; text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
.cdt-live { display: none; color: #7dffa0; font-size: .7em; }
.cdt.is-live .cdt-live { display: inline; }
.cdt-clock { display: flex; justify-content: center; gap: 34px; margin: 0 0 10px; flex-wrap: nowrap; }
.cdt-clock .tbox { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.cdt-clock .tbox[hidden] { display: none; }
.cdt-clock .tbox b { font: 700 48px/1.15 var(--font); font-variant-numeric: tabular-nums; color: #fffdfc; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.cdt.is-live .cdt-clock .tbox b { color: #7dffa0; }
.cdt-clock .tbox i { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #fffdfc; margin-top: 2px; }
.cdt-when { font-size: 16px; color: #f1eef0; margin: 0 0 6px; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.cdt-more { margin: 4px auto 0; max-width: 760px; text-align: left; }
.cdt-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .78); padding: 4px 0; }
.cdt-more > summary::-webkit-details-marker { display: none; }
.cdt-more > summary span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.cdt-more[open] { background: rgba(14, 13, 24, .82); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 6px 16px 4px; margin-top: 10px; }
.cdt-more .timer-rule, .cdt-more .timer-src { font-size: 15px; }
.cdt-more .pill-muted { background: rgba(255, 255, 255, .14); color: #e9e6f2; }

/* ---------- offer banner between the first and second timer ---------- */
.cd-banner { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; max-width: 760px; min-height: 118px; margin: 26px 0 4px; padding: 18px 22px; text-align: left; text-decoration: none; color: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18); background: linear-gradient(100deg, rgba(60, 38, 150, .92), rgba(22, 96, 138, .9) 60%, rgba(18, 20, 44, .92)); box-shadow: 0 10px 34px rgba(0, 0, 0, .45); }
.cd-banner::after { content: ""; position: absolute; right: -40px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 0, .35), transparent 65%); }
.cd-banner-t { font: 800 24px/1.15 var(--display); text-transform: uppercase; letter-spacing: .01em; position: relative; z-index: 1; }
.cd-banner-s { font-size: 15px; font-weight: 600; color: #ffe27a; position: relative; z-index: 1; }
.cd-banner-tag { position: absolute; right: 12px; bottom: 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); z-index: 1; }
.cd-banner:hover { filter: brightness(1.08); }

/* ---------- actions + more timers ---------- */
.cd-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 30px 0 0; }
.cd-share { background: #ffe1df; color: #d12b2b; font: 700 16px/1 var(--font); border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer; }
.cd-toggle { background: rgba(255, 255, 255, .14); color: #fff; font: 600 15px/1 var(--font); border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; padding: 10px 16px; cursor: pointer; }
.cd-toggle:hover { background: rgba(255, 255, 255, .22); }
.cd-fs { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; opacity: .9; }
.cd-nav { margin: 26px 0 0; font-size: 15px; }
.cd-nav p { margin: 0 0 8px; color: #fffdfc; }
.cd-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; max-width: 560px; }
.cd-nav a { color: #fffdfc; text-decoration: none; }
.cd-nav a:hover { text-decoration: underline; }

/* ---------- fullscreen: title and timers only ---------- */
.is-fs .fs-hide, .is-fs .cd-content, .is-fs .cd-footer, .is-fs .cd-banner, .is-fs .cdt-more, .is-fs .cd-actions > :not(.cd-fs) { display: none; }
.is-fs .cd-hero { min-height: 100vh; justify-content: center; }

/* ---------- content panel under the hero ---------- */
.cd-content { max-width: 860px; margin: 0 auto 48px; padding: 26px 26px 20px; background: rgba(12, 11, 20, .94); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; }
.cd-content > :is(p, ul, ol, h2, h3, aside, details, .cta-wrap) { max-width: none; }
.cd-content h2 { font: 700 24px/1.25 var(--font); text-transform: none; letter-spacing: 0; margin-top: 30px; }
.cd-content .crumbs { margin-bottom: 10px; }
.cd-content .meta { margin-bottom: 18px; }
.cd-content .cta { background: #ffd700; color: #333; }
.cd-footer { background: rgba(8, 7, 15, .92); }
@media (max-width: 700px) {
  .cd-hero { padding-top: 26px; }
  .cd-logo { margin-bottom: 40px; }
  .cdt-clock { gap: 22px; }
  .cd-content { margin: 0 10px 36px; padding: 20px 16px 14px; }
  .cd-banner-t { font-size: 20px; }
}
@media (max-width: 380px) { .cdt-clock { gap: 16px; } .cdt-clock .tbox b { font-size: 44px; } }