/* ═══════════════════════════════════════════════
   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; }

/* Review #95: inside the client's iframe a fixed overlay adds nothing to the document height, so
   the frame never grew and the window scrolled inside an 85vh box. Here the modal is part of the
   page (season.js moves it under <body> and sets the dialog's margin-top to the clicked tile), the
   document grows with it and the loader resizes the iframe to fit. The frame itself never scrolls:
   the square tiles shrink when a scrollbar narrows the page, so a scrollbar could otherwise keep
   itself necessary at exactly the height it was measured at. */
body.vyhraj-season.is-embed { overflow-y: hidden; }
body.vyhraj-season.is-embed .season-modal {
  position: absolute; top: 0; right: 0; bottom: auto; left: 0;
  min-height: 100%;
  align-items: flex-start;
}
body.vyhraj-season.is-embed .season-modal-dialog { max-height: none; overflow: visible; margin-bottom: 16px; }

.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-scramble { background: color-mix(in oklab, var(--cal-window-open) 88%, var(--cal-accent-sage)); }
.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-email-correct,
.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-email-correct,
.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-email-correct: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 {
  box-sizing: border-box; width: 100%; max-width: 100%;
  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);
  }
}