@font-face {
  font-family: "Nordique Pro";
  src: url('../assets/fonts/nordique-pro/NordiquePro-Light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Nordique Pro";
  src: url('../assets/fonts/nordique-pro/NordiquePro-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nordique Pro";
  src: url('../assets/fonts/nordique-pro/NordiquePro-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Nordique Pro";
  src: url('../assets/fonts/nordique-pro/NordiquePro-Semibold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Nordique Pro";
  src: url('../assets/fonts/nordique-pro/NordiquePro-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Nordique Pro";
  src: url('../assets/fonts/nordique-pro/NordiquePro-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Nordique Pro";
  src: url('../assets/fonts/nordique-pro/NordiquePro-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --fortune-font: "Nordique Pro", "Segoe UI", Arial, sans-serif;
  --fortune-panel-bg: linear-gradient(180deg, rgba(73, 10, 6, 0.84), rgba(42, 5, 3, 0.87));
  --fortune-panel-bg-strong: linear-gradient(180deg, rgb(50 2 0), rgba(42, 5, 3, 0.95));
  --fortune-panel-text: #f0cc80;
  --fortune-white: #fff;
  --fortune-gold: #e9a318;
  --fortune-gold-soft: rgba(240, 204, 128, .38);
  --fortune-red-top: #db1a12;
  --fortune-red-bottom: #a60705;
  --fortune-red-hover-top: #ed2419;
  --fortune-red-hover-bottom: #b20806;
  --fortune-focus: #ffe28b;
  --fortune-panel-border: rgba(224, 148, 28, .48);
  --fortune-soft-shadow: 0 2px 5px rgba(0, 0, 0, .24);
  --fortune-game-bg: url('../games/day1/assets/festive_shopping_bg.webp');
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--fortune-font) !important;
}

/* Campaign requirement: Nordique Pro is the sole UI typeface across every page,
   game, modal and dynamically injected component. Fallbacks remain for glyphs
   that are not present in the supplied family (for example some emoji/symbols). */
*,
*::before,
*::after {
  font-family: var(--fortune-font) !important;
}

.fortune-scorecard-game-title,
.fortune-scorecard-game-title * {
  font-family: "Fortune Berkshire", Georgia, serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
[class*="title"],
[class*="heading"] {
  font-family: var(--fortune-font) !important;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--fortune-focus) !important;
  outline-offset: 3px;
}

/* Shared premium action language. Icon-only controls keep their geometry but use the same red/gold family. */
:is(.primary-btn, .btn-primary, .cta, .action-btn, .logout-btn, .journey-summary-btn, .control-btn, .small-action, .tool.primary, .node-action, #cardCtaButton) {
  background: linear-gradient(180deg, var(--fortune-red-top), var(--fortune-red-bottom)) !important;
  color: var(--fortune-white) !important;
  border-color: rgba(241, 169, 32, .88) !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--fortune-soft-shadow) !important;
  text-shadow: none !important;
}

:is(.secondary-btn, .btn-secondary, .primary-btn--secondary, .action-btn.alt) {
  background: linear-gradient(180deg, #bf1811, #800503) !important;
  color: #fff !important;
  border-color: rgba(240, 176, 44, .65) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 5px rgba(0, 0, 0, .22) !important;
}

:is(.primary-btn, .btn-primary, .cta, .action-btn, .logout-btn, .journey-summary-btn, .control-btn, .small-action, .tool.primary, #cardCtaButton):hover:not(:disabled),
:is(.secondary-btn, .btn-secondary, .primary-btn--secondary, .action-btn.alt):hover:not(:disabled) {
  background: linear-gradient(180deg, var(--fortune-red-hover-top), var(--fortune-red-hover-bottom)) !important;
  filter: brightness(1.03);
}

:is(.primary-btn, .btn-primary, .cta, .action-btn, .logout-btn, .journey-summary-btn, .control-btn, .small-action, .tool.primary, #cardCtaButton):active:not(:disabled),
:is(.secondary-btn, .btn-secondary, .primary-btn--secondary, .action-btn.alt):active:not(:disabled) {
  transform: translateY(1px) scale(.99);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 1px 3px rgba(0, 0, 0, .24) !important;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .52;
  filter: saturate(.55);
}

/* --------------------------------------------------------------------------
   Home / landing page
   -------------------------------------------------------------------------- */
body.theme-2026-home .auth-card {
  background: var(--fortune-panel-bg) !important;
  color: var(--fortune-panel-text);
  box-shadow: inset 0 0 28px rgba(100, 15, 6, .28), 0 4px 16px rgba(0, 0, 0, .16) !important;
}

body.theme-2026-home .auth-heading h2,
body.theme-2026-home .auth-heading p,
body.theme-2026-home .auth-form label,
body.theme-2026-home .optional-grid label,
body.theme-2026-home .secure-note,
body.theme-2026-home .otp-panel,
body.theme-2026-home .returning-panel {
  color: var(--fortune-panel-text) !important;
}

/* Remove the small floating-card look while preserving campaign highlights. */
body.theme-2026-home .mini-card,
body.theme-2026-home .morya-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
}

body.theme-2026-home .mini-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(5px, .4vw, 8px));
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: rgba(240, 204, 128, .34);
}

body.theme-2026-home .landing-benefits {
  background: var(--fortune-panel-bg-strong) !important;
  box-shadow: inset 0px 0px 10px 70px rgb(82 2 0) !important;
}

body.theme-2026-home .benefit-item p,
body.theme-2026-home .benefit-item b,
body.theme-2026-home .benefit-item small {
  color: var(--fortune-panel-text) !important;
}

body.theme-2026-home .days-badge {
  background: var(--fortune-panel-bg-strong) !important;
  box-shadow: inset 0 0 14px rgba(100, 14, 4, .28) !important;
}

body.theme-2026-home .primary-btn {
  font-size: clamp(13px, .85vw, 16px) !important;
}

@media (max-width: 820px) {
  body.theme-2026-home .fortune-logo {
    width: 125px !important;
  }

  body.theme-2026-home .hero-panel {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  body.theme-2026-home .auth-card {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  body.theme-2026-home .hero-pills,
  body.theme-2026-home .landing-benefits {
    width: calc(100% - 60px) !important;
  }
}

@media (max-width: 350px) {
  body.theme-2026-home .fortune-logo {
    width: 125px !important;
  }

  body.theme-2026-home .hero-panel,
  body.theme-2026-home .auth-card {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.theme-2026-home .hero-pills,
  body.theme-2026-home .landing-benefits {
    width: calc(100% - 40px) !important;
  }
}

/* --------------------------------------------------------------------------
   Dashboard — retain the journey mechanics but move from white cards to the
   same deep red/gold visual language as the supplied reference.
   -------------------------------------------------------------------------- */
body.production-dashboard {
  color: var(--fortune-panel-text) !important;
  background: #220b0600 url(../assets/home/new_bg_v1.webp) top/ cover fixed no-repeat !important;
}

body.production-dashboard .festival-shell {
  background: linear-gradient(180deg, rgb(40 6 3 / 3%), rgb(23 4 2 / 27%)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.production-dashboard .festival-shell::before {
  opacity: 0 !important;
}

body.production-dashboard .festival-shell::after {
  background: linear-gradient(180deg, rgba(20, 3, 2, .06), rgba(20, 3, 2, .20)) !important;
}

body.production-dashboard .topbar {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.production-dashboard :is(.welcome-copy span, .welcome-copy strong, .score-summary-card small,
  .score-summary-card strong, .campaign-status-card .progress-copy span,
  .campaign-status-card .progress-copy strong, .campaign-status-card .progress-meta,
  .journey-heading h2, .journey-subcopy, .legend-mini, .section-kicker) {
  color: var(--fortune-panel-text) !important;
}

body.production-dashboard :is(.welcome-panel, .dashboard-score-card, .campaign-status-card) {
  border: 0 !important;
  box-shadow: none !important;
}

body.production-dashboard .welcome-panel {
  border-right: 1px solid rgba(240, 204, 128, .28) !important;
}

body.production-dashboard .profile-mark {
  background: var(--fortune-panel-bg) !important;
  border-color: rgba(236, 169, 43, .58) !important;
  box-shadow: none !important;
}

body.production-dashboard .profile-mark::before,
body.production-dashboard .profile-mark::after {
  border-color: var(--fortune-panel-text) !important;
}

body.production-dashboard .campaign-status-card .progress-track {
  background: rgba(43, 4, 2, .72) !important;
  border-color: rgba(240, 204, 128, .28) !important;
}

body.production-dashboard .campaign-status-card .progress-track i {
  background: linear-gradient(90deg, #ef3c17, #d90f0b) !important;
}

body.production-dashboard .journey-heading {
  background: transparent !important;
}

body.production-dashboard .journey-stage {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.production-dashboard .journey-stage::before,
body.production-dashboard .journey-stage::after,
body.production-dashboard .stage-motif {
  opacity: .12 !important;
}

body.production-dashboard .node-card {
  color: var(--fortune-panel-text) !important;
  background: var(--fortune-panel-bg) !important;
  border: 1px solid rgba(228, 151, 29, .38) !important;
  box-shadow: none !important;
}

body.production-dashboard .node-card::before {
  display: none !important;
}

body.production-dashboard .node-card strong,
body.production-dashboard .node-card em,
body.production-dashboard .best-score-badge {
  color: var(--fortune-panel-text) !important;
}

body.production-dashboard .node-card small {
  background: linear-gradient(180deg, #9a170e, #650704) !important;
  color: #ffe0a4 !important;
  box-shadow: none !important;
}

body.production-dashboard .milestone,
body.production-dashboard .state-icon {
  background: var(--fortune-panel-bg) !important;
  border-color: rgba(229, 163, 41, .60) !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
}

body.production-dashboard .start-gate,
body.production-dashboard .finish-gate {
  background: var(--fortune-panel-bg) !important;
  color: var(--fortune-panel-text) !important;
  border-color: rgba(229, 163, 41, .46) !important;
  box-shadow: none !important;
}

body.production-dashboard .celebration-cta,
body.production-dashboard .festival-footer {
  background: var(--fortune-panel-bg) !important;
  border-color: 9px solid rgba(229, 163, 41, .46) !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
  border: none !important;
}

body.production-dashboard .celebration-cta-copy :is(small, strong, span),
body.production-dashboard .festival-footer :is(strong, small) {
  color: var(--fortune-panel-text) !important;
}

body.production-dashboard .footer-icon {
  background: transparent !important;
  color: #ffd45c !important;
  box-shadow: none !important;
}

body.production-dashboard .journey-summary-btn,
body.production-dashboard .logout-btn,
body.production-dashboard #cardCtaButton {
  border-radius: 12px !important;
}

.fortune-journey-back,
.fortune-day-chip {
  pointer-events: auto;
  border: 1px solid rgba(255, 214, 126, .62);

  color: #fff7df;
  box-shadow: 0 8px 26px rgba(45, 17, 8, .28), inset 0 1px rgba(255, 255, 255, .15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(180deg, var(--fortune-red-top), var(--fortune-red-bottom)) !important;
}

@media (max-width: 760px) {
  body.production-dashboard .festival-shell {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  body.production-dashboard .topbar,
  body.production-dashboard .journey-panel,
  body.production-dashboard .celebration-cta,
  body.production-dashboard .festival-footer {
    margin-left: 30px !important;
    margin-right: 30px !important;
    display: grid;
  }

  body.production-dashboard .topbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 350px) {

  body.production-dashboard .topbar,
  body.production-dashboard .journey-panel,
  body.production-dashboard .celebration-cta,
  body.production-dashboard .festival-footer {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   Shared Day 1–4 background and panel language
   -------------------------------------------------------------------------- */
body.day-1-theme,
body.day-2-theme,
body.day-3-theme,
body.day-4-theme {
  background-color: #240b05 !important;
  background-image:
    linear-gradient(180deg, rgba(30, 5, 2, .28), rgba(25, 4, 2, .54)),
    var(--fortune-game-bg) !important;
  background-position: top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: var(--fortune-panel-text) !important;
}

/* Day 1 — remove floating-card feel, preserve board interaction. */
body.day-1-theme .stage {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.day-1-theme .sidebar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.day-1-theme .title-card,
body.day-1-theme .day-card,
body.day-1-theme .toolbar,
body.day-1-theme .footer-note {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
}

body.day-1-theme .title-card :is(h1, p),
body.day-1-theme .day-card,
body.day-1-theme .status,
body.day-1-theme .footer-note {
  color: var(--fortune-panel-text) !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .48) !important;
}

body.day-1-theme .panel {
  color: var(--fortune-panel-text) !important;
  background: var(--fortune-panel-bg) !important;
  border: 1px solid rgba(229, 158, 34, .38) !important;
  box-shadow: none !important;
}

body.day-1-theme .panel.howto {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.day-1-theme .panel :is(.label, .timer, .pairs, .stat, .howto-title, p) {
  color: var(--fortune-panel-text) !important;
}

body.day-1-theme .score-ring,
body.day-1-theme .mobile-stat {
  background: var(--fortune-panel-bg) !important;
  color: var(--fortune-panel-text) !important;
  border-color: rgba(229, 158, 34, .38) !important;
  box-shadow: none !important;
}

body.day-1-theme .board-wrap {
  box-shadow: none !important;
  background: unset;
  border: 0 !important;
}

body.day-1-theme .modal {
  background: var(--fortune-panel-bg-strong) !important;
  color: var(--fortune-panel-text) !important;
  border-color: rgba(231, 164, 42, .46) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .26) !important;
}

body.day-1-theme .modal :is(h2, p, .modal-kicker) {
  color: var(--fortune-panel-text) !important;
}

body.day-1-theme .how-modal-icon {
  display: none !important;
}

body.day-1-theme .tool {
  background: var(--fortune-panel-bg) !important;
  color: var(--fortune-panel-text) !important;
  border-color: rgba(230, 161, 34, .34) !important;
  box-shadow: none !important;
}

p.howto-kicker {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  display: block;
  max-width: 100%;
}

@media (max-width: 700px) {
  body.day-1-theme .content {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  body.day-1-theme .sidebar {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 350px) {

  body.day-1-theme .content,
  body.day-1-theme .sidebar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Day 2 — stage is intentionally transparent; only functional sub-panels remain. */
body.day-2-theme .game-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.day-2-theme .game-shell::before,
body.day-2-theme .game-shell::after,
body.day-2-theme .festive-top {
  background: transparent !important;
  opacity: 0 !important;
}

body.day-2-theme :is(.stat-card, .progress-card, .footer-strip, .modal) {
  background: var(--fortune-panel-bg) !important;
  border-color: rgba(231, 163, 38, .40) !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
}

body.day-2-theme .objective {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}

body.day-2-theme :is(h1, .title-kicker, .stat-label, .stat-value, .swipe-hint, .swipe-gesture,
  .progress-ribbon, .evo-item, .tip-txt, .modal h2, .modal p, .modal-stat small, .modal-stat strong,
  .festival-score-line) {
  color: var(--fortune-panel-text) !important;
  text-shadow: none !important;
}

body.day-2-theme .progress-ribbon {
  background: linear-gradient(180deg, var(--fortune-red-top), var(--fortune-red-bottom)) !important;
  box-shadow: none !important;
}

body.day-2-theme .evo-item,
body.day-2-theme .modal-stat {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(240, 204, 128, .16) !important;
  box-shadow: none !important;
}

body.day-2-theme .board-wrap {
  box-shadow: none !important;
  border: 1px solid rgba(232, 165, 42, .28) !important;
}

body.day-2-theme .icon-btn {
  background: linear-gradient(180deg, var(--fortune-red-top), var(--fortune-red-bottom)) !important;
  color: #fff !important;
  border-color: rgba(241, 169, 32, .75) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 5px rgba(0, 0, 0, .24) !important;
}

@media (max-width: 520px) {
  body.day-2-theme {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.day-2-theme .topbar,
  body.day-2-theme .stats,
  body.day-2-theme .board-zone {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.day-2-theme .objective,
  body.day-2-theme .progress-card,
  body.day-2-theme .footer-strip {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
}

@media (max-width: 350px) {

  body.day-2-theme .topbar,
  body.day-2-theme .stats,
  body.day-2-theme .board-zone {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body.day-2-theme .objective,
  body.day-2-theme .progress-card,
  body.day-2-theme .footer-strip {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
}

/* Day 3 — keep basket/category feedback, simplify the surrounding chrome. */
body.day-3-theme .game {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.day-3-theme .game::before,
body.day-3-theme .game::after {
  opacity: .15 !important;
}

body.day-3-theme :is(.hud-card, .mission-card, .hint-card, .modal) {
  background: var(--fortune-panel-bg) !important;
  border-color: rgba(232, 163, 39, .38) !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
}

body.day-3-theme :is(.hud-copy small, .hud-copy strong, .mission-card h1, .mission-card p,
  .hint-card p, .modal h2, .modal p, .eyebrow, .festival-score-line) {
  color: var(--fortune-panel-text) !important;
}

body.day-3-theme .guest-stage,
body.day-3-theme .play-zone {
  box-shadow: none !important;
}

body.day-3-theme .food-card {
  background: rgba(45, 6, 3, .42) !important;
  border-color: rgba(232, 163, 39, .30) !important;
  box-shadow: none !important;
}

body.day-3-theme .food-name,
body.day-3-theme .drag-label {
  color: var(--fortune-panel-text) !important;
}

body.day-3-theme .round-btn {
  background: linear-gradient(180deg, var(--fortune-red-top), var(--fortune-red-bottom)) !important;
  color: #fff !important;
  border-color: rgba(241, 169, 32, .75) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 5px rgba(0, 0, 0, .24) !important;
}

@media (max-width: 699px) {
  body.day-3-theme .game {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 350px) {
  body.day-3-theme .game {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Day 4 — use the shared festive background behind the existing canvas/physics. */
body.day-4-theme .game-shell {
  background:
    linear-gradient(180deg, rgba(29, 4, 2, .16), rgba(25, 4, 2, .34)),
    var(--fortune-game-bg) center/cover no-repeat !important;
  box-shadow: none !important;
}

body.day-4-theme :is(.timer-card, .score-card, .title-plaque, .balance-status, .control-dock, .modal__card, .credits-panel) {
  background: var(--fortune-panel-bg) !important;
  color: var(--fortune-panel-text) !important;
  border-color: rgba(232, 163, 39, .40) !important;
  box-shadow: none !important;
}

body.day-4-theme :is(.timer-card small, .timer-card strong, .timer-card span,
  .score-card small, .score-card strong, .score-card span, .title-plaque strong, .title-plaque span,
  .balance-status__top, .control-copy strong, .control-copy span, .control-copy small,
  .modal__card h1, .modal__card h2, .modal__card p, .eyebrow, .how-list, .result-reason) {
  color: var(--fortune-panel-text) !important;
}

body.day-4-theme :is(.round-btn, .mini-btn, .control-btn) {
  background: linear-gradient(180deg, var(--fortune-red-top), var(--fortune-red-bottom)) !important;
  color: #fff !important;
  border-color: rgba(241, 169, 32, .76) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 5px rgba(0, 0, 0, .24) !important;
}

body.day-4-theme :is(.quick-rules > div, .stats-grid > div, .result-score) {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(240, 204, 128, .16) !important;
  box-shadow: none !important;
}

@media (max-width: 520px) {
  body.day-4-theme .hud {
    left: 30px !important;
    right: 30px !important;
    margin-top: 3.6dvh;
  }

  body.day-4-theme .control-dock {
    left: 30px !important;
    right: 30px !important;
  }
}

@media (max-width: 350px) {

  body.day-4-theme .hud,
  body.day-4-theme .control-dock {
    left: 20px !important;
    right: 20px !important;
  }
}

/* Day 5 receives the same typography/button/panel palette without changing its runner environment. */
body.day-5-theme .panel,
body.day-5-theme .modal-card,
body.day-5-theme .instruction-card {
  background: var(--fortune-panel-bg) !important;
  color: var(--fortune-panel-text) !important;
  border-color: rgba(232, 163, 39, .46) !important;
  box-shadow: none !important;
}

body.day-5-theme :is(.panel, .panel *, .modal-card, .modal-card *, .instruction-card, .instruction-card *) {
  color: var(--fortune-panel-text);
}

body.day-5-theme .icon-btn {
  border-color: rgba(241, 169, 32, .66) !important;
  background: linear-gradient(180deg, rgba(219, 26, 18, .92), rgba(166, 7, 5, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 5px rgba(0, 0, 0, .24) !important;
}

body.day-5-theme .touch-btn {
  background: linear-gradient(180deg, rgba(219, 26, 18, .94), rgba(166, 7, 5, .94)) !important;
  border-color: rgba(241, 169, 32, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 2px 5px rgba(0, 0, 0, .24) !important;
}

/* Final modal/rule-card polish: retain hierarchy without pale floating cards. */
body.day-1-theme .how-modal-rules>div {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(240, 204, 128, 0.18) !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
}

body.day-1-theme .how-modal-rules>div b,
body.day-1-theme .how-modal-rules>div strong,
body.day-1-theme .how-modal-rules>div span {
  color: var(--fortune-panel-text) !important;
}

body.day-1-theme .how-modal-rules>div b {
  background: linear-gradient(180deg, #db1a12, #a60705) !important;
  color: #fff !important;
  border: 1px solid rgba(240, 204, 128, 0.32) !important;
  box-shadow: none !important;
}

body.day-3-theme .rule-cards span {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(240, 204, 128, 0.16) !important;
  box-shadow: none !important;
  color: rgba(240, 204, 128, 0.9) !important;
}

body.day-3-theme .rule-cards span b {
  color: var(--fortune-panel-text) !important;
}

body.day-4-theme .text-btn {
  color: var(--fortune-panel-text) !important;
  text-decoration-color: rgba(240, 204, 128, .6) !important;
}

body.day-4-theme .text-btn:hover {
  color: #fff1c5 !important;
}

/* --------------------------------------------------------------------------
   Celebration card flow — same immersive maroon/gold system as the campaign.
   -------------------------------------------------------------------------- */
body.celebration-theme {
  background: #220b06 url('../assets/home/desktop-bg.webp') center/cover fixed no-repeat !important;
  color: var(--fortune-panel-text) !important;
}

body.celebration-theme .card-shell {
  background: linear-gradient(180deg, rgba(28, 4, 2, .32), rgba(20, 3, 2, .52)) !important;
}

body.celebration-theme :is(.back-btn, .score-pill, .mini-brand) {
  background: var(--fortune-panel-bg) !important;
  border-color: rgba(240, 204, 128, .34) !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
}

/* Celebration brand is intentionally logo-only with no surrounding panel. */
body.celebration-theme .mini-brand {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.celebration-theme .mini-brand img {
  display: block;
  width: auto;
  height: 46px;
  max-width: min(230px, 100%);
  object-fit: contain;
}

body.celebration-theme :is(.mini-brand strong, .mini-brand span, .score-pill small, .score-pill strong, .back-btn) {
  color: var(--fortune-panel-text) !important;
}

body.celebration-theme .wizard-card {
  background: var(--fortune-panel-bg-strong) !important;
  border-color: rgba(240, 204, 128, .35) !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
}

body.celebration-theme :is(.wizard-step > small, .wizard-step h1, .wizard-step h2, .step-copy, .final-message,
  .final-message b, .inline-message, .share-note, .custom-wish > span) {
  color: var(--fortune-panel-text) !important;
}

body.celebration-theme .step-icon {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(240, 204, 128, .32) !important;
  color: #fff0b9 !important;
}

body.celebration-theme .wizard-progress span {
  background: rgba(255, 255, 255, .05) !important;
  color: var(--fortune-panel-text) !important;
  border-color: rgba(240, 204, 128, .28) !important;
}

body.celebration-theme .wizard-progress span.active,
body.celebration-theme .wizard-progress span.done {
  background: linear-gradient(180deg, var(--fortune-red-top), var(--fortune-red-bottom)) !important;
  color: #fff !important;
  border-color: rgba(240, 204, 128, .64) !important;
}

body.celebration-theme .wizard-progress i {
  background: rgba(240, 204, 128, .34) !important;
}

body.celebration-theme :is(.final-score-preview, .warning-box, .journey-recap-top span, .journey-recap-row) {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(240, 204, 128, .18) !important;
  box-shadow: none !important;
  color: var(--fortune-panel-text) !important;
}

body.celebration-theme :is(.final-score-preview span, .final-score-preview strong, .warning-box p,
  .journey-recap-top small, .journey-recap-top b, .journey-recap-row strong,
  .journey-recap-row small, .journey-recap-row b) {
  color: var(--fortune-panel-text) !important;
}

body.celebration-theme .journey-recap-row>i {
  background: linear-gradient(180deg, var(--fortune-red-top), var(--fortune-red-bottom)) !important;
  color: #fff !important;
}

body.celebration-theme :is(.wish-option, .custom-wish textarea, .camera-stage) {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(240, 204, 128, .22) !important;
  color: var(--fortune-panel-text) !important;
  box-shadow: none !important;
}

body.celebration-theme .wish-option.selected {
  background: rgba(166, 7, 5, .30) !important;
  border-color: rgba(240, 204, 128, .58) !important;
}

body.celebration-theme :is(.wish-option span, .camera-placeholder, .camera-placeholder strong, .custom-wish textarea) {
  color: var(--fortune-panel-text) !important;
}

body.celebration-theme .custom-wish textarea::placeholder {
  color: rgba(240, 204, 128, .60) !important;
}

body.celebration-theme .secondary-btn {
  background: linear-gradient(180deg, #bd1710, #820604) !important;
  color: #fff !important;
  border-color: rgba(240, 204, 128, .62) !important;
}

body.celebration-theme .canvas-wrap {
  border-color: rgba(240, 204, 128, .35) !important;
  background: rgba(30, 4, 2, .70) !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  body.celebration-theme .card-shell {
    padding: 18px 30px 30px !important;
  }

  body.celebration-theme .wizard-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 350px) {
  body.celebration-theme .card-shell {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Day 5 overlay cards follow the same campaign palette while retaining the
   runner environment and gameplay-specific HUD geometry. */
body.day-5-theme .modal,
body.day-5-theme .rotate-card {
  background: var(--fortune-panel-bg-strong) !important;
  color: var(--fortune-panel-text) !important;
  border-color: rgba(240, 204, 128, .60) !important;
  box-shadow: none !important;
}

body.day-5-theme :is(.modal h2, .modal p, #loadingText, .result-score, .result-caption, .rotate-card h2, .rotate-card p) {
  color: var(--fortune-panel-text) !important;
}

body.day-5-theme .modal::before,
body.day-5-theme .modal::after {
  color: var(--fortune-panel-text) !important;
}

body.day-5-theme :is(.break-card, .meta-pill) {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(240, 204, 128, .18) !important;
  color: var(--fortune-panel-text) !important;
  box-shadow: none !important;
}

body.day-5-theme .break-card strong {
  color: var(--fortune-panel-text) !important;
}

/* Day 4 explicitly uses the supplied Ganesha stage artwork. */
body.day-4-theme {
  --fortune-game-bg: url('../games/day4/assets/ganesha_stage_bg.webp');
}

/* ========================================================================== 
   Day 4 background ownership correction — 2026-09-04
   Page/body uses the supplied horizontal game background. The gameplay stage
   uses the supplied portrait Ganesha artwork without cover-cropping the idol.
   ========================================================================== */
body.day-4-theme {
  background-color: #32160d !important;
  background-image:
    linear-gradient(180deg, rgba(30, 8, 4, .14), rgba(22, 6, 3, .30)),
    url('../games/day4/assets/game_background.webp') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body.day-4-theme .game-shell {
  background-color: transparent !important;
  background-image:
    linear-gradient(180deg, rgba(30, 7, 2, .02), rgba(28, 7, 2, .12)),
    url('../games/day4/assets/ganesha_stage_bg.webp') !important;
  background-position: center, center 19% !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 900px) {
  body.day-4-theme .game-shell {
    /* Give the compact title/balance stack clear air above Bappa's crown. */
    background-position: center, center 45% !important;
    background-size: 100% 100%, cover !important;
  }
}

/* ========================================================================== 
   2026-09-04 Day 4 compact campaign-toolbar clearance
   This lives in the shared theme because it loads after the Day 4 stylesheet.
   It supersedes the older generic 30px mobile gutter rule for the native HUD.
   ========================================================================== */
@media (max-width: 620px) {
  body.day-4-theme .day4-page-layout .hud {
    left: 158px !important;
    right: 6px !important;
  }
}

@media (max-width: 380px) {
  body.day-4-theme .day4-page-layout .hud {
    left: 156px !important;
    right: 6px !important;
  }
}

/* 2026-09-04 Day 2 phone footer safe gutter.
   The benefits strip is the page-width bottom section; unlike content cards it
   should not inherit the theme's 30px mobile content gutter. */
@media (max-width: 520px) {
  body.day-2-theme .footer-strip {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* ========================================================================== 
   2026-09-04 Day 4 final alignment overrides
   Keep the shared campaign theme from re-introducing legacy mobile gutters or
   stage offsets after games/day4/styles.css has established its final layout.
   ========================================================================== */
@media (min-width: 621px) and (max-width: 900px) {
  body.day-4-theme .day4-page-layout .game-shell {
    background-position: center, center 46% !important;
    background-size: 100% 100%, cover !important;
  }
}

@media (max-width: 620px) {
  body.day-4-theme .day4-page-layout .game-shell {
    background-position: center, center 45% !important;
    background-size: 100% 100%, cover !important;
  }

  body.day-4-theme .fortune-game-shell-tools {
    width: auto !important;
    padding: 0 !important;
    grid-template-columns: auto !important;
  }

  body.day-5-theme .fortune-game-shell-tools {
    align-items: center;
    width: calc(100% - 90px) !important;
  }

  body.day-4-theme .fortune-game-brand-logo {
    margin-top: 0px !important;
  }

  body.day-4-theme .fortune-game-tool-row {
    display: none !important;
  }

  body.day-4-theme .day4-top-stack .hud {
    left: 0 !important;
    right: 0 !important;
  }

  body.day-4-theme .day4-page-layout .control-dock {
    left: 10px !important;
    right: 10px !important;
  }
}

@media (max-width: 380px) {
  body.day-4-theme .day4-top-stack .hud {
    left: 0 !important;
    right: 0 !important;
    margin-top: 5.5dvh;
  }

  body.day-4-theme .day4-page-layout .control-dock {
    left: 8px !important;
    right: 8px !important;
  }
}

/* 2026-09-09 Selfie Card typography + action polish.
   BerkshireSwash is intentionally scoped to Celebration Card labels, scores
   and button text only; the rest of the campaign remains Nordique Pro. */
@font-face {
  font-family: "BerkshireSwash";
  src: url('../assets/fonts/BerkshireSwash-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body.celebration-theme :is(button,
  .score-pill small,
  .score-pill strong,
  .final-score-preview span,
  .final-score-preview strong,
  .wizard-step > small,
  .wish-option span b,
  .custom-wish > span,
  .custom-wish > small,
  .journey-recap-top small,
  .journey-recap-top b,
  .journey-recap-row > b) {
  font-family: 'Nordique Pro', Georgia, serif !important;
  font-weight: 400 !important;
}

body.celebration-theme :is(.primary-btn, .secondary-btn, .card-design-btn, .wizard-close) {
  background: linear-gradient(180deg, var(--fortune-red-top), var(--fortune-red-bottom)) !important;
  border-color: rgba(240, 204, 128, .72) !important;
  color: #fff0b9 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 202, 80, .12), 0 5px 14px rgba(0, 0, 0, .22) !important;
}

body.celebration-theme :is(.primary-btn, .secondary-btn, .card-design-btn):hover {
  background: linear-gradient(180deg, var(--fortune-red-hover-top), var(--fortune-red-hover-bottom)) !important;
}

/* ================================================================
   Dashboard state icons - browser-safe vector/CSS shapes (v1.7.3)
   ----------------------------------------------------------------
   Keep the badge fully inside the milestone circle and draw every
   state symbol with CSS. No Unicode symbol/emoji font is involved.
   ================================================================ */
body.production-dashboard .milestone .state-icon {
  top: 2px !important;
  right: 2px !important;
  overflow: hidden !important;
  line-height: 1;
  font-size: 0 !important;
  font-family: Arial, sans-serif !important;
  text-rendering: geometricPrecision;
}

/* Reset every legacy text/emoji pseudo-icon before drawing shapes. */
body.production-dashboard .milestone .state-icon::before,
body.production-dashboard .milestone .state-icon::after {
  content: "" !important;
  position: absolute;
  box-sizing: border-box;
  margin: 0 !important;
}

/* Completed / played: compact centered CSS check mark. */
body.production-dashboard .day-node[data-state="completed"] .state-icon::before,
body.production-dashboard .day-node[data-state="played"] .state-icon::before {
  display: block !important;
  width: 6px;
  height: 10px;
  left: 50%;
  top: 46%;
  border: 0;
  border-right: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  border-radius: 0;
  background: transparent;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
}

body.production-dashboard .day-node[data-state="completed"] .state-icon::after,
body.production-dashboard .day-node[data-state="played"] .state-icon::after {
  display: none !important;
}

/* Available / active: centered CSS play triangle. */
body.production-dashboard .day-node[data-state="available"] .state-icon::before,
body.production-dashboard .day-node[data-state="active"] .state-icon::before {
  display: block !important;
  width: 0;
  height: 0;
  left: 53%;
  top: 50%;
  border: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  background: transparent;
  transform: translate(-50%, -50%);
}

body.production-dashboard .day-node[data-state="available"] .state-icon::after,
body.production-dashboard .day-node[data-state="active"] .state-icon::after {
  display: none !important;
}

/* In progress: centered partial ring. */
body.production-dashboard .day-node[data-state="in-progress"] .state-icon::before {
  display: block !important;
  width: 12px;
  height: 12px;
  left: 50%;
  top: 50%;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%) rotate(-20deg);
}

body.production-dashboard .day-node[data-state="in-progress"] .state-icon::after {
  display: none !important;
}

/* Locked / closed: centered CSS padlock. */
body.production-dashboard .day-node[data-state*="locked"] .state-icon::before,
body.production-dashboard .day-node[data-state="closed"] .state-icon::before {
  display: block !important;
  width: 9px;
  height: 7px;
  left: 50%;
  top: 40%;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  transform: translate(-50%, -50%);
}

body.production-dashboard .day-node[data-state*="locked"] .state-icon::after,
body.production-dashboard .day-node[data-state="closed"] .state-icon::after {
  display: block !important;
  width: 12px;
  height: 9px;
  left: 50%;
  top: 63%;
  border: 0;
  border-radius: 2px;
  background: currentColor !important;
  transform: translate(-50%, -50%);
}