/* ═══════════════════════════════════════════════
   SEA-4b (spec 05 §7.1) — vendored fonts for the "Vianočný režim" widget (public/fonts/VENDORED.md).
   latin-ext first: browsers try @font-face blocks for the same family/weight in source order and
   only download the one whose unicode-range actually covers the text being rendered, so listing the
   Slovak/Czech-diacritic subset first costs nothing for plain-latin runs.
   ═══════════════════════════════════════════════ */
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-400-latin-ext-300c86290d94407bb7e3c1fb73480926.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-400-latin-fe13b76807ccefadc78e1924a7ca9efa.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-600-latin-ext-8b36bd4eb7a523cdec182499c1bf9f51.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-600-latin-8dc6514fff29976fee6f4702aaf44467.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-700-latin-ext-1869883c682cba7d574c6f925d5c3ec9.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-700-latin-f5f4fc785bfbd8cbc03bf89fcdcecca3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/PlayfairDisplay/PlayfairDisplay-400-latin-ext-cac109a776f031fe19ca83b6488033eb.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/PlayfairDisplay/PlayfairDisplay-400-latin-8a53e5ecdbffafb4aaa40a23fdece238.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/PlayfairDisplay/PlayfairDisplay-700-latin-ext-c0d76cfbf5db6a8cf30c574edf500469.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/PlayfairDisplay/PlayfairDisplay-700-latin-9401d0214a9375f173f72cc417f6fa06.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════
   ADV-3 — Native calendar (body.vyhraj-season) + games hub (body.vyhraj-hry)
   Theme default per spec 7.3: ADVENT = deep green / gold.
   ═══════════════════════════════════════════════ */

body.vyhraj-season {
  --season-bg:      #0a1f16;
  --season-surface: #123021;
  --season-line:    rgba(255,255,255,.08);
  --season-text:    #eafff2;
  --season-muted:   #9fc9ac;
  --season-primary: #1e7d4a;
  --season-gold:    #ffd700;
  --season-danger:  #ff6b6b;
  --season-radius:  16px;
  /* SEA-4b (spec 05 §7.1) — the "Vianočný režim" calendar-widget palette. Same hex values as
     SeasonThemeServiceImpl's DEFAULT_* constants, so a campaign with no override renders identically
     whether native.html (theme == null, no _widget_css.html run at all) or a themed white-label page. */
  --cal-bg-from:      #2b0f16;
  --cal-bg-to:        #4a1a24;
  --cal-window-closed:#6b2430;
  --cal-window-today: #e0a63e;
  --cal-window-open:  #ede3d0;
  --cal-text-on-dark: #f4e3b8;
  --cal-text-on-light:#3d1a1f;
  --cal-accent-gold:  #c9a227;
  --cal-accent-sage:  #7c8f6e;
  background: var(--season-bg);
  color: var(--season-text);
}

.season-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

.season-hero {
  text-align: center;
  padding: 40px 0 28px;
}

.season-eyebrow {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--season-surface);
  color: var(--season-gold);
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ── Progress + badges ─────────────────────────── */

.season-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.season-progress { flex: 1; height: 10px; border-radius: 999px; background: var(--season-surface); overflow: hidden; }
.season-progress-bar { height: 100%; background: var(--season-gold); transition: width .4s ease; }
.season-progress-label { font-size: .85rem; color: var(--season-muted); white-space: nowrap; }

.season-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.season-badge {
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--season-surface); color: var(--season-muted); border: 1px solid var(--season-line);
}
.season-badge.is-unlocked { color: #1a1203; background: var(--season-gold); border-color: var(--season-gold); }

.season-pro-hint { color: var(--season-gold); font-size: .85rem; margin-bottom: 16px; }

/* ── Tile grid ──────────────────────────────────── */

.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 10px;
}

.season-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--season-line);
  background: var(--season-surface);
  color: var(--season-text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
}

.season-tile.state-locked { opacity: .45; cursor: not-allowed; }
.season-tile.state-open { border-color: var(--season-gold); box-shadow: 0 0 0 1px var(--season-gold) inset; }
.season-tile.is-today { border-color: var(--season-gold); background: rgba(255,215,0,.12); }
.season-tile.is-completed { background: var(--season-primary); }
.season-tile.state-past:not(.is-completed) { opacity: .5; }

.season-tile-check { color: var(--season-gold); font-size: 1rem; }
.season-tile-teaser { font-size: .55rem; font-weight: 400; color: var(--season-muted); text-align: center; }

/* adv-review.md smoke check (ii): ?date= admin preview — tile clicks 404 (resolveInteractive always
   uses the real clock), so the grid is shown inert instead of pretending it's clickable. */
.season-preview-notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--season-gold);
  background: rgba(255,215,0,.1);
  color: var(--season-gold);
  font-size: .85rem;
}
.season-grid-shell.is-preview .season-tile { pointer-events: none; }

/* ── Modal ──────────────────────────────────────── */

.season-modal {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
}
.season-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.season-modal-dialog {
  position: relative; z-index: 1;
  max-width: 480px; width: calc(100% - 32px);
  max-height: 85vh; overflow-y: auto;
  background: var(--season-surface, #18233d);
  color: var(--season-text, #eef3ff);
  border-radius: var(--season-radius, 16px);
  padding: 28px 20px 20px;
}
.season-modal-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; color: inherit; font-size: 1.6rem; cursor: pointer;
}

.season-window-question-text { font-size: 1.05rem; margin: 8px 0 16px; }
.season-options { display: flex; flex-direction: column; gap: 8px; }
.season-option {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--season-line);
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.season-option:hover { border-color: var(--season-gold); }
.season-scramble input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--season-line); margin-bottom: 10px; }
.season-attempts-left { font-size: .8rem; color: var(--season-muted); margin-top: 10px; }

.season-find-competition { display: flex; flex-direction: column; gap: 10px; }
.season-find-clue { font-size: 1rem; }
.season-find-catalogue-link {
  display: inline-block; margin-top: 4px; padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--season-gold); color: var(--season-gold); text-decoration: none; font-weight: 600;
}
.season-find-not-yet { font-size: .85rem; color: var(--season-muted); margin-top: 4px; }

.season-result { font-weight: 700; font-size: 1.1rem; }
.season-result.is-correct { color: #30c48d; }
.season-result.is-incorrect, .season-window-wrong { color: var(--season-danger); }
.season-reward { color: var(--season-gold); font-weight: 600; }
.season-window-wrong { font-size: .85rem; margin-top: 8px; }
.season-share {
  margin-top: 12px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--season-gold);
  background: transparent; color: var(--season-gold); cursor: pointer;
}

/* ── Countdown / summary ────────────────────────── */

.season-countdown-card, .season-summary-card { text-align: center; padding: 40px 0; }
.season-countdown-days { font-size: 1.4rem; color: var(--season-gold); font-weight: 700; }
.season-countdown-live { font-size: 2rem; font-variant-numeric: tabular-nums; margin-top: 8px; }

/* F2 (item 8) — recap: draw winners, masked m***@domain. */
.season-recap-winners { margin-top: 28px; }
.season-recap-winners h3 { font-size: 1.1rem; color: var(--season-gold); margin-bottom: 10px; }
.season-recap-winners-list { list-style: decimal inside; margin: 0; padding: 0; }
.season-recap-winners-list li { padding: 4px 0; }
.season-recap-winner-prize { color: var(--season-muted); }

/* ── Homepage banner (unscoped — shown on domov.html, default theme) ──── */

.season-home-banner { margin: 16px 0; }
.season-home-banner-link {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-radius: 14px; background: #123021; color: #eafff2; text-decoration: none;
}
.season-home-banner-icon { font-size: 1.8rem; }
.season-home-banner-text { flex: 1; display: flex; flex-direction: column; }
.season-home-banner-text strong { font-size: 1rem; }
.season-home-banner-text span { font-size: .85rem; color: #9fc9ac; }
.season-home-banner-cta { font-weight: 700; color: #ffd700; white-space: nowrap; }

/* ── Games hub (/hry) ───────────────────────────── */

.hry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.hry-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px; border-radius: 14px; border: 1px solid rgba(0,0,0,.08);
  text-decoration: none; color: inherit; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.hry-tile-icon { font-size: 1.8rem; }
.hry-tile-title { font-weight: 700; }
.hry-tile-description { font-size: .85rem; color: #666; }
.hry-tile-state { font-size: .8rem; font-weight: 600; color: #1e7d4a; margin-top: 6px; }
.hry-tile.is-disabled { opacity: .55; cursor: default; }

/* ── ADV-5: white-label (/k/**) ─────────────────── */

/* ?embed=1: the iframe content must show the client's own page background through. */
body.vyhraj-season.is-embed { background: transparent; }

.season-wl-header { display: flex; align-items: center; gap: 10px; padding: 12px 0 20px; }
.season-wl-logo { max-height: 40px; max-width: 160px; object-fit: contain; }
.season-wl-powered { text-align: center; margin-top: 20px; font-size: .75rem; }
.season-wl-powered a { color: var(--season-muted); text-decoration: none; }
.season-wl-powered a:hover { text-decoration: underline; }

.season-coupon { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.season-coupon-code {
  padding: 6px 10px; border-radius: 8px; background: var(--season-surface);
  border: 1px dashed var(--season-gold); color: var(--season-gold); font-weight: 700; letter-spacing: .05em;
}
.season-coupon-copy {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--season-gold);
  background: transparent; color: var(--season-gold); cursor: pointer; font-size: .85rem;
}
.season-cta-link {
  display: inline-block; margin-top: 10px; padding: 8px 16px; border-radius: 8px;
  background: var(--season-gold); color: #1a1203; font-weight: 700; text-decoration: none;
}

.season-sponsor { margin: 4px 0 12px; }
.season-sponsor a {
  display: flex; align-items: center; gap: 8px; color: var(--season-muted); text-decoration: none; font-size: .8rem;
}
.season-sponsor a:hover { color: var(--season-gold); }
.season-sponsor-logo { max-height: 24px; max-width: 100px; object-fit: contain; }

/* SEA-4 (spec 05 §4.1/§7.5) — the outer iframe container; the widget's own visual pass (below) lives
   inside that iframe's own document, not here. */
.season-anon-embed { min-height: 200px; }

.season-native-extras { margin-top: 48px; }
.season-native-extras h2 { text-align: center; margin-bottom: 20px; }
.season-native-extras-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

.season-native-b2b-cta {
  margin-top: 40px; padding: 24px; border-radius: var(--season-radius);
  background: var(--season-surface); text-align: center;
}
.season-native-b2b-cta p { margin-bottom: 12px; }

.season-sponsor-wall { margin-top: 40px; text-align: center; }
.season-sponsor-wall-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 12px; }
.season-sponsor-wall-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 140px;
  color: var(--season-muted); text-decoration: none; font-size: .8rem;
}
.season-sponsor-wall-item:hover { color: var(--season-gold); }
.season-sponsor-wall-item img { max-height: 40px; max-width: 120px; object-fit: contain; }
.season-sponsor-wall-caption { font-size: .7rem; opacity: .8; }

/* ═══════════════════════════════════════════════
   SEA-4b (spec 05 §7) — "Vianočný režim" calendar widget, ported from the Lovable mockup
   (docs/games-roadmap/mockup/{styles.css,ParticipantPreview.tsx}). Fonts: Playfair Display (display),
   Quicksand (body) — vendored under /fonts, @font-face further down. Every colour below reads a
   --cal-* custom property, written either by the body.vyhraj-season default above or overridden
   per-campaign by _widget_css.html. .cal-* classes are additive to the v1 .season-* classes they sit
   alongside (same elements keep both), never a replacement — the v1 rules above still supply layout
   (flex/position) the new rules do not repeat.
   ═══════════════════════════════════════════════ */

.cal-widget {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 20px;
  background: linear-gradient(to bottom right, var(--cal-bg-from), var(--cal-bg-to));
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@media (min-width: 640px) { .cal-widget { padding: 32px; } }

.cal-header { position: relative; z-index: 10; text-align: center; margin-bottom: 24px; padding-top: 8px; }
.cal-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .32em;
  color: var(--cal-accent-sage); margin: 0;
}
.cal-title {
  font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 700; line-height: 1.2;
  color: var(--cal-text-on-dark); margin: 16px 0 0;
}
.cal-intro { font-size: 15px; font-weight: 600; color: var(--cal-text-on-dark); opacity: .95; margin: 10px auto 0; max-width: 28rem; }
@media (min-width: 640px) {
  .cal-eyebrow { font-size: 12px; }
  .cal-title { font-size: 36px; }
  .cal-intro { font-size: 16px; }
}

/* ── Grid + tiles (spec 7.2 — values from the mockup, not approximations) ──── */

.cal-grid {
  position: relative;
  z-index: 10;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 640px) { .cal-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (min-width: 768px) { .cal-grid { grid-template-columns: repeat(6, 1fr); } }

.cal-window {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1.5px solid color-mix(in oklab, var(--cal-accent-gold) 30%, transparent);
  box-shadow: 0 2px 8px rgb(0 0 0 / .2);
  padding: 4px;
}
.cal-window.cal-window-closed { background: var(--cal-window-closed); }
.cal-window.cal-window-today { background: var(--cal-window-today); }
.cal-window.cal-window-open { background: var(--cal-window-open); isolation: isolate; overflow: hidden;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--cal-text-on-dark) 55%, transparent),
              inset 0 -5px 9px color-mix(in oklab, var(--cal-text-on-light) 7%, transparent),
              0 2px 8px rgb(0 0 0 / .2);
}
.cal-window.cal-window-open::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 96px 96px; mix-blend-mode: multiply;
}
.cal-window.cal-window-missed { opacity: .6; }

.cal-icon { position: relative; z-index: 1; width: 28px; height: 28px; }
@media (min-width: 640px) { .cal-icon { width: 36px; height: 36px; } }
.cal-icon-sm { width: 12px; height: 12px; }
.cal-window-closed .cal-icon { color: var(--cal-text-on-dark); opacity: .25; }
.cal-window-today .cal-icon, .cal-window-today .cal-day-badge { color: var(--cal-text-on-light); }
.cal-window-open .cal-icon { color: var(--cal-text-on-light); }

.cal-day-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  font-family: 'Quicksand', sans-serif; font-size: 10px; font-weight: 700;
  background: rgb(255 255 255 / .25); color: var(--cal-text-on-light);
}
.cal-window-closed .cal-day-badge { background: rgb(0 0 0 / .2); color: var(--cal-text-on-dark); }
@media (min-width: 640px) { .cal-day-badge { width: 24px; height: 24px; font-size: 11px; } }

.cal-check-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--cal-accent-gold); color: var(--cal-window-open);
}
@media (min-width: 640px) { .cal-check-badge { width: 24px; height: 24px; } }

.cal-lock-badge { position: absolute; bottom: 6px; right: 6px; z-index: 2; width: 12px; height: 12px; color: var(--cal-text-on-dark); opacity: .6; }
@media (min-width: 640px) { .cal-lock-badge { width: 14px; height: 14px; } }

.cal-missed-label {
  position: absolute; left: 5px; bottom: 5px; z-index: 10; font-family: 'Quicksand', sans-serif;
  font-size: 9px; font-weight: 700; color: var(--cal-text-on-light); opacity: .75;
}

.cal-today-cta {
  border-radius: 14px;
  filter: drop-shadow(0 3px 5px color-mix(in oklab, var(--cal-text-on-light) 24%, transparent))
          drop-shadow(0 0 8px color-mix(in oklab, var(--cal-accent-gold) 44%, transparent))
          drop-shadow(0 0 16px color-mix(in oklab, var(--cal-window-today) 28%, transparent));
}
.cal-window-today {
  border-width: 4px;
  border-color: color-mix(in oklab, var(--cal-accent-gold) 82%, var(--cal-text-on-dark));
}
.cal-today-intro { animation: cal-today-intro 900ms ease-in-out 3; }
@keyframes cal-today-intro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes cal-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgb(0 0 0 / .2), 0 0 0 0 color-mix(in oklab, var(--cal-accent-gold) 0%, transparent); }
  50% { transform: scale(1.03); box-shadow: 0 2px 10px rgb(0 0 0 / .25), 0 0 22px 6px color-mix(in oklab, var(--cal-accent-gold) 50%, transparent); }
}
.cal-today-pulse { animation: cal-pulse 2.5s ease-in-out infinite; }
.cal-today-hover { transition: transform 150ms ease-out, filter 150ms ease-out; }
.cal-today-hover:hover { transform: translateY(-3px); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.cal-today-hover:active { transform: translateY(-1px); }

/* 1) First open: 3D flip + scale, 350ms — replaces the pulse while it runs, then the pulse resumes. */
@keyframes cal-flip {
  0% { transform: perspective(800px) rotateY(0deg) scale(1); }
  50% { transform: perspective(800px) rotateY(180deg) scale(.85); }
  100% { transform: perspective(800px) rotateY(360deg) scale(1); }
}
.cal-flip { animation: cal-flip 350ms ease-out; }
/* 2) Icon fade-in after the flip: 200ms, delayed 350ms so it starts once the flip completes. */
@keyframes cal-icon-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.cal-icon-in { animation: cal-icon-in 200ms ease-out 350ms both; }

.cal-bow {
  position: absolute; top: 4px; left: 4px; z-index: 2; width: 23px; height: 20px;
  color: var(--cal-accent-gold); filter: drop-shadow(0 1px 1px rgb(0 0 0 / .22));
}

/* ── Content tags (spec 7.2) — bottom-left chip previewing what an unlocked door contains. ──── */
.cal-content-tag {
  position: absolute; left: 5px; bottom: 5px; z-index: 10; max-width: calc(100% - 12px);
  border-radius: 999px; padding: 2px 5px;
  background: color-mix(in oklab, var(--cal-window-open) 90%, var(--cal-accent-sage));
  color: var(--cal-text-on-light); font-family: 'Quicksand', sans-serif; font-size: 9px; font-weight: 700;
  line-height: 1.2; white-space: nowrap; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--cal-text-on-dark) 35%, transparent);
}
.cal-content-tag-prize { background: color-mix(in oklab, var(--cal-window-open) 80%, var(--cal-accent-gold)); }
.cal-content-tag-tip { background: color-mix(in oklab, var(--cal-window-open) 82%, var(--cal-accent-sage)); }
.cal-content-tag-quiz { background: color-mix(in oklab, var(--cal-window-open) 88%, var(--cal-bg-to)); }
.cal-content-tag-bonus { background: color-mix(in oklab, var(--cal-window-open) 87%, var(--cal-accent-gold)); }
@media (min-width: 640px) { .cal-content-tag { left: 6px; bottom: 6px; padding: 2px 6px; font-size: 10px; } }

/* ── Footer line ──────────────────────────────────────────────────────────── */
.cal-footer-line {
  position: relative; z-index: 10; margin: 20px 0 0; text-align: center;
  font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 700; color: color-mix(in oklab, var(--cal-text-on-dark) 70%, transparent);
}
.cal-footer-date { color: var(--cal-accent-gold); }

/* ── Modal (spec 7.2) — the v1 fragment's own content renders inside this styling. ──────────── */
.cal-modal-dialog {
  background: var(--cal-window-open); color: var(--cal-text-on-light); text-align: center;
  padding-top: 44px;
}
.cal-modal-close { color: color-mix(in oklab, var(--cal-text-on-light) 60%, transparent); }
.cal-modal-close:hover { background: rgb(0 0 0 / .1); color: var(--cal-text-on-light); }
.cal-modal-icon {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 999px; background: color-mix(in oklab, var(--cal-accent-gold) 20%, transparent);
}
.cal-modal-icon .cal-icon { width: 24px; height: 24px; color: var(--cal-accent-gold); }
.cal-modal-dialog h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; }
.cal-modal-dialog .season-window-question-text,
.cal-modal-dialog .season-explanation { font-size: 14px; }

/* ── F2 (item 2/3) — the modal's own controls: option buttons, one primary gold action, secondary
   outline buttons, the e-mail form. Only --cal-* tokens (hex, _widget_css.html) — no Bootstrap on
   /k/**, and on the native page these selectors outrank Bootstrap's .btn-warning inside the modal. ── */
.cal-modal-dialog .cal-btn,
.cal-modal-dialog .btn-warning,
.cal-modal-dialog .season-share,
.cal-modal-dialog .season-coupon-copy,
.cal-modal-dialog .season-email-resend,
.cal-modal-dialog .season-find-catalogue-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.cal-modal-dialog .cal-btn-primary,
.cal-modal-dialog .btn-warning {
  width: 100%; background: var(--cal-accent-gold); border-color: var(--cal-accent-gold); color: var(--cal-text-on-light);
  box-shadow: 0 2px 6px color-mix(in oklab, var(--cal-text-on-light) 22%, transparent);
}
.cal-modal-dialog .cal-btn-primary:hover,
.cal-modal-dialog .btn-warning:hover { background: color-mix(in oklab, var(--cal-accent-gold) 86%, var(--cal-text-on-light)); color: var(--cal-text-on-light); }
.cal-modal-dialog .cal-btn-secondary,
.cal-modal-dialog .season-share,
.cal-modal-dialog .season-coupon-copy,
.cal-modal-dialog .season-email-resend,
.cal-modal-dialog .season-find-catalogue-link {
  background: transparent; color: var(--cal-text-on-light);
  border-color: color-mix(in oklab, var(--cal-accent-gold) 70%, var(--cal-text-on-light));
}
.cal-modal-dialog .cal-btn-secondary:hover,
.cal-modal-dialog .season-share:hover,
.cal-modal-dialog .season-coupon-copy:hover,
.cal-modal-dialog .season-email-resend:hover,
.cal-modal-dialog .season-find-catalogue-link:hover { background: color-mix(in oklab, var(--cal-accent-gold) 16%, transparent); color: var(--cal-text-on-light); }
.cal-modal-dialog .cal-btn:focus-visible,
.cal-modal-dialog .btn-warning:focus-visible,
.cal-modal-dialog .season-option:focus-visible,
.cal-modal-dialog .season-email-input:focus-visible { outline: 3px solid color-mix(in oklab, var(--cal-accent-gold) 60%, transparent); outline-offset: 2px; }
.cal-modal-dialog .season-pool-account-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cal-modal-dialog .season-pool-account-cta .cal-btn { width: 100%; }

.cal-modal-dialog .season-options { gap: 10px; margin-top: 4px; }
.cal-modal-dialog .season-option {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 16px; border-radius: 14px;
  border: 1.5px solid color-mix(in oklab, var(--cal-accent-gold) 55%, transparent);
  background: color-mix(in oklab, var(--cal-window-open) 55%, #ffffff); color: var(--cal-text-on-light);
  font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 700; text-align: center;
  box-shadow: 0 1px 3px color-mix(in oklab, var(--cal-text-on-light) 14%, transparent);
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.cal-modal-dialog .season-option:hover { border-color: var(--cal-accent-gold); background: color-mix(in oklab, var(--cal-accent-gold) 18%, var(--cal-window-open)); }
.cal-modal-dialog .season-option:active { transform: translateY(1px); }
.cal-modal-dialog .season-attempts-left {
  display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--cal-text-on-light); background: color-mix(in oklab, var(--cal-accent-gold) 18%, transparent);
}
.cal-modal-dialog .season-scramble input {
  font: inherit; font-size: 16px; padding: 12px 16px; border-radius: 999px; color: var(--cal-text-on-light);
  border: 1.5px solid color-mix(in oklab, var(--cal-accent-gold) 45%, transparent);
  background: color-mix(in oklab, var(--cal-window-open) 55%, #ffffff);
}

.cal-modal-dialog .season-email-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; text-align: left; }
.cal-modal-dialog .season-email-why { margin: 0; font-size: 14px; text-align: center; }
.cal-modal-dialog .season-email-label { margin: 4px 0 -6px; font-size: 13px; font-weight: 700; }
.cal-modal-dialog .season-email-input {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 12px 18px; border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--cal-accent-gold) 45%, transparent);
  background: color-mix(in oklab, var(--cal-window-open) 55%, #ffffff); color: var(--cal-text-on-light);
  font: inherit; font-size: 16px; /* 16px: iOS Safari zooms any smaller input on focus */
}
.cal-modal-dialog .season-email-input:focus { border-color: var(--cal-accent-gold); }
.cal-modal-dialog .season-consent { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13px; line-height: 1.45; cursor: pointer; }
.cal-modal-dialog .season-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cal-accent-gold); cursor: pointer; }
.cal-modal-dialog .season-email-status { margin: 0; font-size: 13px; font-weight: 700; color: color-mix(in oklab, var(--season-danger) 55%, var(--cal-text-on-light)); }
.cal-modal-dialog .season-email-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* The client-rendered states (fresh result, e-mail wait) carry no <h3> under the absolutely placed icon
   disc (.cal-modal-icon, top 20 px + 48 px) — without this their first line sits behind it. */
.cal-modal-dialog #seasonModalContent > .season-result:first-child,
.cal-modal-dialog .season-email-wait { margin-top: 28px; }
.cal-modal-dialog .season-email-wait .season-email-status { color: var(--cal-text-on-light); font-size: 15px; font-weight: 600; }

/* ── F2 (item 4) — only tomorrow's locked tile carries the teaser line. ── */
.cal-window-closed .season-tile-teaser { color: var(--cal-text-on-dark); opacity: .9; font-weight: 700; line-height: 1.2; padding: 0 2px; }

/* ── F2 (item 5) — "Čo môžeš v Advente získať" as chips. ── */
.cal-widget .season-pool-teaser { position: relative; z-index: 10; text-align: center; margin: 0 0 20px; }
.cal-widget .season-pool-teaser-heading {
  margin: 0 0 10px; font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700;
  color: var(--cal-text-on-dark);
}
.cal-widget .season-pool-teaser-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cal-widget .season-pool-teaser-list li {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--cal-text-on-dark);
  background: color-mix(in oklab, var(--cal-accent-gold) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--cal-accent-gold) 60%, transparent);
}

/* ── "Powered by Vyhrat.sk" pill (spec 7.1) — fixed brand colours, independent of theme. ────── */
.cal-powered {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: #0f2440; color: #e3a82b; font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 8px rgb(15 36 64 / .24); text-decoration: none;
}
@media (min-width: 640px) { .cal-powered { font-size: 14px; } }

/* ── Decorations (spec 7.2) — all aria-hidden, pointer-events:none, behind the grid. ─────────── */
.cal-snow, .cal-stars, .cal-garland, .cal-branches { pointer-events: none; position: absolute; inset: 0; }
.cal-snow { z-index: 20; overflow: hidden; }
.cal-snow span {
  position: absolute; top: -5%; width: 4px; height: 4px; border-radius: 999px;
  background: var(--cal-text-on-dark); opacity: .32; animation: cal-snow-fall 10s linear infinite;
}
.cal-snow span:nth-child(1) { left: 8%; animation-duration: 10.7s; animation-delay: -1.1s; }
.cal-snow span:nth-child(2) { left: 16%; width: 3px; height: 3px; animation-duration: 11.4s; animation-delay: -2.2s; }
.cal-snow span:nth-child(3) { left: 24%; animation-duration: 12.1s; animation-delay: -3.3s; }
.cal-snow span:nth-child(4) { left: 32%; width: 2px; height: 2px; animation-duration: 12.8s; animation-delay: -4.4s; }
.cal-snow span:nth-child(5) { left: 40%; animation-duration: 13.5s; animation-delay: -5.5s; }
.cal-snow span:nth-child(6) { left: 48%; width: 3px; height: 3px; animation-duration: 14.2s; animation-delay: -6.6s; }
.cal-snow span:nth-child(7) { left: 56%; animation-duration: 14.9s; animation-delay: -7.7s; }
.cal-snow span:nth-child(8) { left: 64%; width: 2px; height: 2px; animation-duration: 15.6s; animation-delay: -8.8s; }
.cal-snow span:nth-child(9) { left: 72%; animation-duration: 16.3s; animation-delay: -9.9s; }
.cal-snow span:nth-child(10) { left: 80%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: -11s; }
.cal-snow span:nth-child(11) { left: 88%; animation-duration: 17.7s; animation-delay: -12.1s; }
.cal-snow span:nth-child(12) { left: 96%; width: 2px; height: 2px; animation-duration: 18.4s; animation-delay: -13.2s; }
@keyframes cal-snow-fall { from { transform: translate3d(0, -8%, 0); } to { transform: translate3d(22px, 108%, 0); } }

.cal-garland { z-index: 5; width: 100%; height: 76px; color: var(--cal-accent-gold); overflow: visible; }
.cal-garland path { fill: none; stroke: currentColor; stroke-width: 2; opacity: .58; }
@media (max-width: 639px) {
  .cal-garland { height: 44px; transform: translateY(-8px); opacity: .68; }
  .cal-garland path { stroke-width: 1.7; }
}
.cal-garland-light { fill: currentColor; animation: cal-light-pulse 2.8s ease-in-out infinite; }
.cal-garland-light-1 { animation-delay: 1.4s; }
@keyframes cal-light-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

.cal-branch { position: absolute; width: 110px; color: var(--cal-accent-sage); opacity: .55; }
.cal-branch path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.cal-branch-top { top: 0; left: 0; }
.cal-branch-bottom { right: -15px; bottom: -18px; width: 92px; opacity: .32; transform: rotate(180deg); }

.cal-stars { z-index: 1; width: 100%; height: 100%; color: var(--cal-text-on-dark); }
.cal-stars circle { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: cal-twinkle 3.6s ease-in-out infinite; }
.cal-stars circle:nth-child(3n + 2) { animation-delay: 1.2s; }
.cal-stars circle:nth-child(3n) { animation-delay: 2.4s; }
@keyframes cal-twinkle { 0%, 100% { opacity: .18; transform: scale(.75); } 50% { opacity: .65; transform: scale(1.15); } }

/* ── Confetti (spec 7.2/7.4) — a short CSS-only burst, JS-spawned only for a highlight=1 reveal. ── */
.cal-confetti { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.cal-confetti span {
  position: absolute; top: -10%; width: 7px; height: 10px; opacity: 0;
  background: var(--cal-accent-gold); animation: cal-confetti-fall 1100ms ease-in forwards;
}
@keyframes cal-confetti-fall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--cal-confetti-dx, 12px), 340%, 0) rotate(var(--cal-confetti-rot, 260deg)); }
}

/* ── prefers-reduced-motion (spec 7.2) — off every infinite/looping animation, floor one-shots at
   1ms, keep the today CTA visually obvious with a static glow instead of the pulse. ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .cal-today-pulse, .cal-today-intro, .cal-snow span, .cal-garland-light, .cal-stars circle, .cal-confetti span {
    animation: none;
  }
  .cal-flip { animation-duration: 1ms; }
  .cal-icon-in { animation-duration: 1ms; animation-delay: 0ms; }
  .cal-today-hover { transition-duration: 1ms; }
  .cal-window-today {
    box-shadow: 0 2px 10px rgb(0 0 0 / .25),
                0 0 22px 6px color-mix(in oklab, var(--cal-accent-gold) 45%, transparent),
                0 0 44px 14px color-mix(in oklab, var(--cal-window-today) 26%, transparent);
  }
}