@import url("/shared/styles/tokens.css");
/* ============================================================================
   UNIFIED GAMES.CSS - All Game Styling
   ============================================================================
   
   This consolidated stylesheet serves all game-related pages:
   - Quiz games
   - Puzzle games (Wordsearch, Slide, Memory)
   - Interactive games (Wedding Dash, Love Letters, Pairing Up, etc.)
   - Leaderboards & scoring
   - Preview mode styling
   
   Consolidates:
   - unveil/games/games.css (main)
   - All individual game styles
   - Game shell & common patterns
   
   ============================================================================ */

/* ============================================================================
   1. ROOT VARIABLES - Game Color Palette
   ============================================================================ */

:root {
  /* Canonical design tokens for games experience. */
  --enigmats-font-ui:
    "Raleway",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  --enigmats-font-display:
    "Cormorant Garamond",
    "Times New Roman",
    serif;
  /* Warm/light defaults — consistent with what theme.js produces at runtime.
     These prevent invisible text during the async gap between CSS parse and
     theme.js applying dynamic colours. theme.js always overrides these. */
  --enigmats-color-bg-top: #f8f0e4;
  --enigmats-color-bg-mid: #d4bea0;
  --enigmats-color-bg-bottom: #3d2e20;
  --enigmats-color-text: #1a1208;
  --enigmats-color-surface: rgba(255, 255, 255, 0.92);
  --enigmats-color-surface-muted: rgba(26, 18, 8, 0.62);
  --enigmats-color-border: rgba(26, 18, 8, 0.14);
  --enigmats-color-accent: #8e9380;
  --enigmats-color-accent-2: #6f7666;
  --enigmats-color-main: #7e866f;

  /* Game Colors */
  --game-bg: linear-gradient(
    180deg,
    var(--enigmats-color-bg-top) 0%,
    var(--enigmats-color-bg-mid) 45%,
    var(--enigmats-color-bg-bottom) 100%
  );
  --game-fg: var(--enigmats-color-text);
  --game-subtle: rgba(26, 18, 8, 0.06);
  --game-primary: #0d9488;
  --game-accent: var(--enigmats-color-accent);
  --game-accent-secondary: var(--enigmats-color-accent-2);
  --game-main: var(--enigmats-color-main);
  --game-card-bg: var(--enigmats-color-surface);
  --game-card-text: #0f172a;
  --game-card-muted: var(--enigmats-color-surface-muted);
  --game-border: var(--enigmats-color-border);
  --game-row-alt: rgba(26, 18, 8, 0.03);
  --game-radius: 16px;
  --game-pad: clamp(16px, 4vw, 32px);
  --game-shadow: 0 18px 40px rgba(26, 18, 8, 0.12);
  --game-cta-contrast: #0f172a;
  --game-title-color: var(--game-fg);
  --game-subtitle-color: var(--game-card-muted);
  --game-title-on-accent: #0f172a;
  --game-subtitle-on-accent: rgba(15, 23, 42, 0.86);
  --game-focus-ring: #facc15;
  --game-focus-ring-shadow: rgba(26, 18, 8, 0.72);
  --game-bottom-nav-offset: calc(62px + env(safe-area-inset-bottom));
  --game-preview-order-bar-offset: 0px;
}

/* ============================================================================
   2. FONT FACES
   ============================================================================ */

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Raleway-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Raleway-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Raleway-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Flowmery";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Flowmery-Regular.ttf") format("truetype");
}

/* ============================================================================
   3. RESET & BASE STYLES
   ============================================================================ */

body.game-body {
  margin: 0;
  font-family: var(--enigmats-font-ui);
  background: var(--game-bg);
  color: var(--game-fg);
  line-height: 1.5;
  text-align: center;
}

body.game-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-splash);
  pointer-events: none;
  background: var(--game-accent, #8e9380);
  opacity: 0;
  transition: opacity 340ms ease-out;
}

body.game-body.page-transitioning::after {
  opacity: 0.26;
}

body.preview-mode {
  padding-top: 54px;
  padding-bottom: 126px;
}

/* Keep template-shell/template-page headers flush to top in preview pages (leaderboards/profile/etc). */
body.preview-mode.template-shell,
body.preview-mode.template-page {
  padding-top: 0;
}

body.preview-mode::before {
  content: none;
}

/* ============================================================================
   4. PREVIEW MODE BANNER
   ============================================================================ */

.preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  padding: 12px 16px;
  background: var(--game-accent);
  color: var(--game-cta-contrast);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.preview-banner__label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.preview-banner__countdown {
  font-weight: 700;
}

.preview-order-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--game-bottom-nav-offset);
  z-index: var(--z-nav);
  background: rgba(10, 14, 30, 0.96);
  border-top: 1px solid var(--game-border);
  box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.22);
  padding: 10px 14px;
}

/* In preview mode, keep nav visible; only hide demo conversion bar. */
body.preview-mode .demo-bottom-bar {
  display: none !important;
}

body.preview-mode {
  --game-preview-order-bar-offset: 104px;
  padding-bottom: 190px;
}

.preview-order-bar__inner {
  width: min(960px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  align-items: center;
  gap: 10px;
}

.preview-order-bar__copy {
  margin: 0;
  text-align: left;
  font-weight: 600;
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.preview-order-bar__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.preview-order-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px clamp(8px, 1.8vw, 14px);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.78rem, 1.7vw, 0.92rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  min-width: 0;
}

.preview-order-bar__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}

.preview-order-bar__btn--primary {
  border: 1px solid color-mix(in srgb, var(--game-accent, #0ea5e9) 72%, #0f172a 28%);
  color: var(--game-cta-contrast, #ffffff);
  background: linear-gradient(
    135deg,
    var(--game-accent, #0ea5e9),
    var(--game-accent-secondary, #22d3ee)
  );
  text-shadow: none;
}

.preview-order-bar__btn--primary:hover,
.preview-order-bar__btn--primary:focus-visible {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--game-accent, #0ea5e9) 88%, #000000 12%),
    color-mix(in srgb, var(--game-accent-secondary, #22d3ee) 88%, #000000 12%)
  );
  color: var(--game-cta-contrast, #ffffff);
}

.preview-order-bar__btn:hover,
.preview-order-bar__btn:focus-visible {
  filter: brightness(1.04);
}

.checkout-sync-notice {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-modal);
  width: min(92vw, 560px);
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.checkout-sync-notice p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
}

.checkout-sync-notice button {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: 999px;
  font: inherit;
  padding: 7px 12px;
  cursor: pointer;
}

.checkout-sync-notice button:hover,
.checkout-sync-notice button:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 520px) {
  .preview-order-bar__inner {
    grid-template-columns: 1fr;
  }
  .preview-order-bar__copy {
    text-align: center;
    font-size: 0.84rem;
  }
  .preview-order-bar__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================================
   5. GAME VISIBILITY STATES
   ============================================================================ */

.game-body:not(.experience-ready) .pwa-shell,
.game-body:not(.experience-ready) footer,
.game-body:not(.experience-ready) .page-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.game-body .pwa-shell,
.game-body footer,
.game-body .page-footer {
  transition: opacity 350ms ease-out;
}

html.is-demo-mode body.game-body {
  visibility: visible !important;
}

html.is-demo-mode body.game-body:not(.home-body) .pwa-shell,
html.is-demo-mode body.game-body:not(.home-body) footer,
html.is-demo-mode body.game-body:not(.home-body) .page-footer {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ============================================================================
   6. LAYOUT CONTAINERS
   ============================================================================ */

.pwa-shell {
  min-height: 100vh;
  background: transparent;
  display: flex;
  justify-content: center;
}

.container {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: var(--game-pad);
  padding-left: max(var(--game-pad), env(safe-area-inset-left));
  padding-right: max(var(--game-pad), env(safe-area-inset-right));
  position: relative;
}

/* ============================================================================
   7. PAGE HEADER
   ============================================================================ */

.page-header {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 32px);
  padding: clamp(16px, 3vw, 32px);
  margin: clamp(12px, 3vw, 32px) auto;
  border-radius: var(--game-radius);
  background: var(--game-card-bg);
  box-shadow: var(--game-shadow);
  border: 1px solid var(--game-border);
  text-align: center;
  color: var(--game-fg);
}

.page-header__media {
  flex: 0 0 clamp(160px, 30vw, 300px);
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.page-header__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--game-radius);
  display: block;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
}

html.is-demo-mode .page-header__media img {
  object-fit: cover;
  background: transparent;
}

/* Hide backfill placeholder images/text until the real client skin is applied */
html.is-demo-mode.demo-skin-loading [data-hero-image],
html.preview-skin-loading [data-hero-image] {
  visibility: hidden;
}
html.is-demo-mode.demo-custom-overlay-pending .experience-splash__media,
html.is-demo-mode.demo-custom-overlay-pending .page-header__media img,
html.is-demo-mode.demo-custom-overlay-pending .page-header__eyebrow,
html.is-demo-mode.demo-custom-overlay-pending .page-header__title,
html.is-demo-mode.demo-custom-overlay-pending .page-header__subtitle,
html.is-demo-mode.demo-custom-overlay-pending [data-couple-name],
html.is-demo-mode.demo-custom-overlay-pending [data-event-copy],
html.is-demo-mode.demo-custom-overlay-pending .game-link-card__body {
  visibility: hidden;
}
html.is-demo-mode.demo-skin-loading .experience-splash__title,
html.is-demo-mode.demo-skin-loading .experience-splash__subtitle,
html.is-demo-mode.demo-skin-loading [data-couple-name],
html.preview-skin-loading .experience-splash__title,
html.preview-skin-loading .experience-splash__subtitle,
html.preview-skin-loading [data-couple-name] {
  visibility: hidden;
}

.hero-ribbon {
  position: relative;
  display: inline-flex;
  margin-top: 10px;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.72);
  color: #e0f2fe;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-ribbon:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.magic-message-bubble {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  z-index: var(--z-overlay);
  animation: magic-pop 0.25s ease, magic-fade 0.4s ease 3s forwards;
}

@keyframes magic-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes magic-fade {
  to {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
}

.page-header__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  align-items: center;
}

.page-header__eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--game-subtitle-color);
}

.page-header__title {
  margin: 0;
  font-size: clamp(3.6rem, 7vw, 4.6rem);
  color: var(--game-title-color);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}

.page-header__title[data-couple-name] {
  font-size: clamp(4.2rem, 8vw, 5.6rem);
  line-height: 1.02;
}

.page-header__subtitle {
  margin: 0;
  font-size: 1rem;
  color: var(--game-subtitle-color);
}

/* Global header text treatment: white fill + black outline across all pages. */
body.game-body :is(
    .page-header__eyebrow,
    .page-header__title,
    .template-game-title,
    .page-header__subtitle,
    .template-couple-name-line,
    .page-header__game-line,
    .page-header__couple-line
  ) {
  color: #ffffff !important;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.95);
  paint-order: stroke fill;
  text-shadow:
    1px 0 0 rgba(0, 0, 0, 0.95),
    -1px 0 0 rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(0, 0, 0, 0.95),
    0 -1px 0 rgba(0, 0, 0, 0.95),
    0 3px 14px rgba(0, 0, 0, 0.55) !important;
}

body.game-body :is(.page-header__eyebrow, .page-header__subtitle, .page-header__couple-line) {
  -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.95);
}

.helper-text {
  color: var(--game-card-muted);
  font-size: 0.9rem;
  margin: 4px 0 12px;
}

.page-header__game-line {
  margin: 0;
  font-size: clamp(3rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--game-title-color);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.page-header__couple-line {
  margin: 0;
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--game-fg);
}

.game-shell-card > .page-header {
  margin: 0 0 12px;
}

.game-shell-card > .page-header .page-header__text {
  gap: 8px;
}

.game-shell-card > .page-header .page-header__title {
  display: none;
}

.game-shell-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 0;
}

.game-shell-actions .cta,
.game-shell-actions .back-link {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 720px) {
  .game-shell-actions {
    flex-direction: row;
  }
}

.game-shell-enhanced .game-shell-card > .back-link,
.game-shell-enhanced .quiz-footer,
.game-shell-enhanced .game-shell-card .puzzle-header,
.game-shell-enhanced .game-shell-card .memory-header {
  display: none !important;
}

@media (max-width: 720px) {
  .page-header {
    flex-direction: column;
    text-align: center;
  }
  .page-header__media {
    width: 100%;
  }
  .page-header__title[data-couple-name] {
    font-size: clamp(3.2rem, 12vw, 4.4rem);
  }
}

/* ============================================================================
   8. GAME CARDS & CONTAINERS
   ============================================================================ */

.card {
  background: var(--game-card-bg);
  border-radius: var(--game-radius);
  padding: clamp(16px, 3vw, 24px);
  margin: 16px auto;
  box-shadow: 0 25px 45px rgba(3, 6, 16, 0.45);
  border: 1px solid var(--game-border);
  color: var(--game-card-text, #0f172a);
  text-align: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.card h1,
.card h2,
.card h3 {
  text-align: center;
  margin-top: 0;
}

/* ============================================================================
   9. EXPERIENCE NAVIGATION
   ============================================================================ */

.experience-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px auto 4px;
}

.experience-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--game-border);
  background: var(--game-card-bg);
  color: var(--game-fg);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.experience-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.18);
}

.experience-pill.is-active {
  background: linear-gradient(
    135deg,
    var(--game-accent),
    var(--game-accent-secondary)
  );
  color: var(--game-cta-contrast);
  border-color: transparent;
  box-shadow: 0 14px 26px rgba(13, 148, 136, 0.35);
}

/* ============================================================================
   10. EXPERIENCE SPLASH SCREEN
   ============================================================================ */

/* Returning visitors: suppress splash before body paints (set by inline head
   script that reads sessionStorage synchronously before first render). */
html.skip-splash #experience-splash {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.experience-splash {
  position: fixed;
  inset: 0;
  background: var(--experience-splash-bg, rgba(7, 10, 20, 0.92));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-splash);
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

.experience-splash--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.experience-splash--closing {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: none;
}

.experience-splash--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.experience-splash__card {
  --experience-splash-hero: url("/assets/img/hero-default.png");
  --experience-splash-hero-position: 50% 45%;
  --experience-splash-hero-scale: 1.06;
  --experience-splash-ink: #ffffff;
  --experience-splash-ink-muted: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 30px) clamp(16px, 4vw, 26px) clamp(110px, 20vh, 140px);
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  gap: 18px;
  position: relative;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  width: min(760px, calc(100dvw - 40px));
  max-width: min(760px, calc(100dvw - 40px));
  min-height: min(72vh, 560px);
  margin: 0 20px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 240ms ease,
    transform 240ms ease,
    filter 240ms ease;
}

.experience-splash--staging .experience-splash__card {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
}

.experience-splash__card::before,
.experience-splash__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.experience-splash__card::before {
  background: var(--experience-splash-hero) var(--experience-splash-hero-position) / cover no-repeat;
  filter: blur(12px) saturate(0.92);
  transform: scale(var(--experience-splash-hero-scale));
}

.experience-splash__card::after {
  background: rgba(7, 10, 20, 0.56);
}

.experience-splash__media {
  position: relative;
  z-index: var(--z-base);
  width: min(58dvw, 300px);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.experience-splash__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.experience-splash__text {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 0 22px clamp(56px, 9vh, 92px);
  max-width: 90%;
}

.experience-splash__text::before {
  content: "";
  position: absolute;
  inset: -10px -16px;
  z-index: -1;
  border-radius: 14px;
  background: rgba(10, 14, 26, 0.52);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.experience-splash__eyebrow {
  display: none;
}

.experience-splash__title {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(2rem, 5.8vw, 3.4rem);
  font-weight: 700;
  color: var(--experience-splash-ink);
  line-height: 1.05;
  letter-spacing: 0.03em;
  -webkit-text-stroke: 1.4px rgba(0, 0, 0, 0.96);
  paint-order: stroke fill;
  text-shadow: 0 5px 22px rgba(0, 0, 0, 0.7);
}

.experience-splash__subtitle {
  display: block;
  margin: 0;
  color: var(--experience-splash-ink-muted);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(1.05rem, 2.8vw, 1.4rem);
  font-style: italic;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.92);
  paint-order: stroke fill;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.68);
}

.experience-splash__namegate {
  margin-top: 8px;
  width: min(520px, 92%);
  display: grid;
  gap: 8px;
}

.experience-splash__namegate label {
  color: var(--experience-splash-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
}

.experience-splash__namegate input {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  padding: 0 12px;
}

.experience-splash__namegate input::placeholder {
  color: rgba(30, 41, 59, 0.66);
}

.experience-splash__namegate-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Unified splash name-gate: consistent across demo, preview, and live. */
.experience-splash {
  background:
    radial-gradient(1200px 760px at 50% -220px, rgba(255, 255, 255, 0.2), transparent 64%),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--game-accent, #1f3b5c) 58%, #060911 42%),
      color-mix(in srgb, var(--game-accent, #1f3b5c) 28%, #02040a 72%)
    );
}

.experience-splash__card {
  width: min(860px, calc(100dvw - 34px));
  max-width: min(860px, calc(100dvw - 34px));
  min-height: min(76vh, 600px);
  padding:
    clamp(16px, 3.6vw, 30px)
    clamp(16px, 3.6vw, 30px)
    clamp(96px, 18vh, 132px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
}

.experience-splash__card::after {
  background:
    linear-gradient(
      180deg,
      rgba(6, 10, 22, 0.34) 0%,
      rgba(6, 10, 22, 0.58) 62%,
      rgba(6, 10, 22, 0.72) 100%
    );
}

.experience-splash__text::before {
  content: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.experience-splash__title {
  font-family: "Flowmery", "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.72);
}

.experience-splash__subtitle {
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  color: #ffffff;
  font-weight: 700;
  -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.9);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 3px 14px rgba(0, 0, 0, 0.68);
}

.experience-splash__namegate {
  width: min(300px, 100%);
  gap: 10px;
  max-width: 100%;
  box-sizing: border-box;
  justify-items: center;
}

.experience-splash__namegate-row {
  width: min(300px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.experience-splash__namegate label {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}

.experience-splash__namegate input {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
  font-weight: 600;
  box-sizing: border-box;
}

.experience-splash__namegate input::placeholder {
  color: rgba(30, 41, 59, 0.66) !important;
  -webkit-text-fill-color: rgba(30, 41, 59, 0.66);
}

.experience-splash__namegate .primary-cta {
  min-height: 46px;
  width: auto;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--game-accent, #1f3b5c) 76%, #ffffff 24%),
    color-mix(in srgb, var(--game-accent, #1f3b5c) 58%, #0f172a 42%)
  );
  color: #ffffff;
}

.experience-splash__sidegate {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.experience-splash__sidegate legend {
  color: var(--experience-splash-ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.experience-splash__side-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: min(300px, 100%);
  margin: 0 auto;
}

.experience-splash__side-option {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 14, 31, 0.5);
  color: #ffffff;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 8px 10px;
  text-align: center;
}

.experience-splash__side-option img {
  width: clamp(44px, 8vw, 56px);
  height: clamp(44px, 8vw, 56px);
  object-fit: contain;
  image-rendering: pixelated;
}

.experience-splash__side-option span {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.experience-splash__side-option:hover,
.experience-splash__side-option:focus-visible {
  border-color: rgba(255, 255, 255, 0.54);
  transform: translateY(-1px);
}

.experience-splash__side-option.is-selected {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 12px 24px rgba(0, 0, 0, 0.28);
  background: color-mix(in srgb, var(--game-accent, #1f3b5c) 48%, rgba(8, 14, 31, 0.55));
}

.experience-splash__side-error {
  margin: 0;
  color: #fde68a;
  font-size: 0.82rem;
  font-weight: 700;
}

.experience-splash__namegate-submit {
  min-width: 46px;
  width: 46px;
  padding: 0;
  font-size: 1.35rem !important;
  line-height: 1;
}

body.game-body.splash-lock {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .experience-splash,
  .experience-splash--closing {
    transition-duration: 0ms;
  }
}

.experience-splash__footer-logo {
  position: absolute;
  z-index: var(--z-base);
  bottom: clamp(20px, 8%, 44px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(96px, 20vw, 140px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.38));
}

@media (max-width: 640px) {
  .experience-splash__footer-logo {
    width: 88px;
    bottom: 16px;
  }
  .experience-splash__card {
    min-height: min(84vh, 620px);
    padding:
      clamp(12px, 4.2vw, 20px)
      clamp(12px, 4.2vw, 20px)
      clamp(84px, 18vh, 108px);
    gap: 12px;
  }
  .experience-splash__media {
    width: min(54dvw, 208px);
    border-radius: 14px;
  }
  .experience-splash__text {
    max-width: 100%;
    padding: 0 10px;
    padding-bottom: clamp(52px, 9vh, 84px);
    gap: 8px;
  }
  .experience-splash__title {
    font-size: clamp(1.55rem, 7.2vw, 2.2rem);
    line-height: 1.08;
  }
  .experience-splash__subtitle {
    font-size: clamp(0.94rem, 4vw, 1.12rem);
    line-height: 1.3;
  }
  .experience-splash__namegate {
    width: 100%;
    gap: 8px;
  }
  .experience-splash__namegate-row {
    gap: 6px;
  }
  .experience-splash__namegate input {
    min-height: 46px;
  }
  .experience-splash__namegate .primary-cta {
    width: 100%;
  }
  .experience-splash__namegate .experience-splash__namegate-submit {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .experience-splash__side-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: min(260px, 100%);
  }
  .experience-splash__side-option {
    padding: 8px 6px;
  }
  .experience-splash__side-option img {
    width: clamp(44px, 14vw, 56px);
    height: clamp(44px, 14vw, 56px);
  }
  .experience-splash__card {
    text-align: center;
  }
  .experience-splash__text {
    text-align: center;
  }
}

/* ============================================================================
   11. BUTTONS & CALL-TO-ACTIONS
   ============================================================================ */

button:not(.experience-splash__side-option),
.cta,
.primary-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--game-accent),
    var(--game-accent-secondary)
  );
  color: var(--game-cta-contrast);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 18px rgba(13, 148, 136, 0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
  min-height: 44px;
  min-width: 44px;
}

button:not(.experience-splash__side-option):hover,
.cta:hover,
.primary-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 24px rgba(13, 148, 136, 0.35);
}

button:not(.experience-splash__side-option):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

a:focus-visible,
button:focus-visible,
.cta:focus-visible,
.primary-cta:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--game-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--game-focus-ring-shadow);
}

.ghost-link {
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  padding: 10px 16px;
  background: transparent;
  color: var(--game-fg);
  font-weight: 600;
  cursor: pointer;
}

.back-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--game-accent),
    var(--game-accent-secondary)
  );
  color: var(--game-cta-contrast);
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 12px 18px rgba(13, 148, 136, 0.25);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

/* ============================================================================
   12. FOOTER & METADATA
   ============================================================================ */

.quiz-footer,
.page-footer {
  margin: 24px auto;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.page-footer small a {
  color: inherit;
}

.page-footer small a img,
footer small a img {
  width: 72px !important;
  height: 72px !important;
}

.page-footer small a img.demo-home-footer-logo {
  width: 192px;
  height: 192px;
}

.page-footer small {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================================
   13. HOSTING EXPIRED MODAL
   ============================================================================ */

.hosting-expired {
  overflow: hidden;
}

.hosting-expired-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  display: grid;
  place-items: center;
  z-index: var(--z-splash);
  padding: 20px;
}

.hosting-expired-modal__card {
  width: min(520px, 94vw);
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--game-border);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  text-align: center;
}

.hosting-expired-modal__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--game-card-muted);
  margin: 0 0 8px;
}

.hosting-expired-modal__title {
  margin: 0 0 10px;
  font-size: 1.6rem;
}

.hosting-expired-modal__copy {
  margin: 0 0 20px;
  color: var(--game-card-muted);
}

/* ============================================================================
   14. LEADERBOARDS & SCORES
   ============================================================================ */

.leaderboards,
.leaderboard-card,
.puzzle-card {
  width: min(960px, 100%);
  max-width: 100%;
}

body.leaderboards-page #leaderboard-tabs {
  justify-content: center;
  align-items: center;
}

body.leaderboards-page {
  --game-home-ink: #1f1a14;
  --game-card-text: #1f1a14;
}

.leaderboard-card,
.puzzle-card {
  overflow-x: auto;
}

body.leaderboards-page .leaderboard-table-wrap {
  width: 100%;
  overflow-x: auto;
}

body.leaderboards-page .leaderboard-table {
  width: 100%;
  min-width: 100%;
}

.leaderboard-card table {
  min-width: 100%;
  table-layout: fixed;
}

.puzzle-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  text-align: center;
}

.puzzle-header h2 {
  margin: 0 0 6px;
}

.intro-copy {
  margin: 0;
  color: var(--game-card-muted);
}

.puzzle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.leaderboard-card table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.leaderboard-card th,
.leaderboard-card td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  font-size: 0.95rem;
}

.leaderboard-card tbody tr:nth-child(odd) {
  background: #f8fafc;
}

.player-name-row {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--game-card-muted);
  text-align: left;
}

.player-name-row strong {
  color: var(--game-fg);
}

.name-trigger {
  border: none;
  background: transparent;
  color: var(--game-primary);
  padding: 0;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.name-trigger:hover {
  color: var(--game-accent);
}

.name-trigger:focus-visible {
  outline: 2px solid var(--game-primary);
  border-radius: 999px;
  outline-offset: 2px;
}

/* Pairing Up memory board */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(76px, auto);
  gap: 10px;
  margin: 12px 0;
}

.memory-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 76px;
  height: clamp(76px, 18vw, 96px);
  perspective: 900px;
}

.memory-tile > button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  pointer-events: auto;
  touch-action: manipulation;
  z-index: var(--z-base);
  transform-style: preserve-3d;
  transition: transform 0.28s ease;
  box-shadow: 0 8px 18px rgba(3, 6, 16, 0.35);
}

.memory-face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.memory-face--back {
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.92), rgba(30, 41, 59, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
}

.memory-face--front {
  background: rgba(248, 250, 252, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.14);
  transform: rotateY(180deg);
}

.memory-face--front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-tile.is-flipped > button,
.memory-tile.is-matched > button {
  transform: rotateY(180deg) !important;
}

.memory-tile.is-matched > button {
  box-shadow:
    0 10px 22px rgba(3, 6, 16, 0.28),
    0 0 0 2px rgba(13, 148, 136, 0.46);
}

.memory-status {
  min-height: 1.25rem;
}

/* Robust fallback: if 3D transforms/backface fail, still show card faces correctly. */
.memory-face--back {
  opacity: 1;
  visibility: visible;
}

.memory-face--front {
  opacity: 0;
  visibility: hidden;
}

.memory-tile.is-flipped .memory-face--back,
.memory-tile.is-matched .memory-face--back {
  opacity: 0 !important;
  visibility: hidden !important;
}

.memory-tile.is-flipped .memory-face--front,
.memory-tile.is-matched .memory-face--front {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================================
   15. ERROR HANDLING
   ============================================================================ */

.quiz-error,
.game-error {
  color: var(--game-error-color, #b91c1c);
  font-weight: 600;
  text-align: center;
  margin: 0;
}

/* ============================================================================
   16. MODALS & DIALOGS
   ============================================================================ */

.completion-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 18, 0.4);
  backdrop-filter: blur(4px);
  padding: 16px;
  z-index: var(--z-overlay);
}

.completion-card {
  background: #fff;
  color: var(--game-home-ink, #241b14);
  border: 1px solid rgba(36, 27, 20, 0.14);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--game-shadow);
  text-align: center;
}

.completion-card .completion-message {
  color: var(--game-home-ink, #241b14);
}

/* Completion modal contrast lock across all themes/planes. */
.completion-card,
.completion-card .completion-message,
.completion-card :is(h1, h2, h3, h4, p, span, strong, em, small) {
  color: #0f172a !important;
}

.completion-card .actions :is(button, .cta, .primary-cta, .back-link),
.completion-card :is(button, .cta, .primary-cta, .back-link)[data-completion-close],
.completion-card :is(button, .cta, .primary-cta, .back-link)[data-modal-replay],
.completion-card :is(button, .cta, .primary-cta, .back-link)[data-modal-home],
.completion-card :is(button, .cta, .primary-cta, .back-link)[data-play-again],
.completion-card :is(button, .cta, .primary-cta, .back-link)[data-home-link] {
  background: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.92) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.completion-card .actions :is(button, .cta, .primary-cta, .back-link):hover,
.completion-card .actions :is(button, .cta, .primary-cta, .back-link):focus-visible {
  background: #1e293b !important;
}

.completion-modal[hidden] {
  display: none;
}

.player-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: var(--z-modal);
}

.player-modal[hidden] {
  display: none;
}

.player-modal__card {
  background: #ffffff;
  color: var(--game-home-ink, #241b14);
  border: 1px solid rgba(36, 27, 20, 0.14);
  border-radius: 20px;
  padding: clamp(20px, 5vw, 32px);
  width: min(420px, 100%);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
}

.player-modal__card h2 {
  margin-top: 0;
  color: var(--game-home-ink, #241b14);
}

.player-modal__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  margin-top: 12px;
  color: var(--game-home-ink, #241b14);
}

.player-modal__label input {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  font-size: 1rem;
  color: #0f172a;
  background: #ffffff;
}

.player-modal__label input:focus-visible {
  outline: 2px solid var(--game-primary);
  border-color: var(--game-primary);
}

.player-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}

.player-name-error {
  min-height: 1.2rem;
  color: var(--game-error-color, #b91c1c);
  font-size: 0.9rem;
  margin: 8px 0 0;
}

/* Profile name input: force readable contrast across demo/preview/live planes. */
body.profile-page .profile-field input {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}

body.profile-page .profile-field input::placeholder {
  color: rgba(30, 41, 59, 0.66) !important;
  -webkit-text-fill-color: rgba(30, 41, 59, 0.66);
}

/* ============================================================================
   17. GAME GROUP & LINK CARDS
   ============================================================================ */

.game-group-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--game-border);
  border-radius: 16px;
  background: rgba(4, 10, 26, 0.44);
}

.game-group-card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: #f8fbff;
}

.game-links {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  margin: 0;
}

.game-links__item--double {
  grid-column: span 1;
}

.game-link-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 12px;
  min-height: 72px;
  height: 100%;
  font-size: 1rem;
  text-decoration: none;
  color: var(--game-card-text, #ffffff);
  text-align: left;
  border-radius: 14px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--game-card-bg, rgba(0, 0, 0, 0.16)) 58%, rgba(0, 0, 0, 0.42) 42%);
  box-shadow: 0 18px 30px rgba(3, 6, 16, 0.55);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.game-link-card__icon {
  width: clamp(42px, 9vw, 54px);
  height: clamp(42px, 9vw, 54px);
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
  opacity: 0.95;
}

.game-link-card__label {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  background: none;
  padding: 0;
  border-radius: 0;
}

html.is-demo-mode body.game-body .game-link-card {
  color: #f8fbff;
  background: rgba(7, 10, 24, 0.92);
  border-color: rgba(255, 255, 255, 0.2);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.75);
}

html.is-demo-mode body.game-body .game-link-card:hover,
html.is-demo-mode body.game-body .game-link-card:focus-visible {
  background: rgba(12, 16, 36, 0.97);
  border-color: rgba(255, 255, 255, 0.4);
}

.game-link-card:hover,
.game-link-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.32);
  color: #f8fbff;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.9);
}

/* ============================================================================
   18. GLOBAL CTA NORMALIZATION
   ============================================================================ */

/* Global CTA row lock: keep Back/Home + Play Again side-by-side on all game screens. */
.game-shell-actions,
.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: stretch;
}

.game-shell-actions .cta,
.game-shell-actions .back-link,
.actions .cta,
.actions .back-link,
.actions button {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
}

/* Global CTA size normalization: equal heights for link/button pairs. */
.game-shell-actions .cta,
.game-shell-actions .back-link,
.actions .cta,
.actions .back-link,
.actions button {
  height: 48px;
  min-height: 48px;
  padding: 0 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}

/* Global CTA ordering: Back/Home left, Play/Replay right. */
.game-shell-actions .back-link,
.game-shell-actions [data-home-link],
.actions .back-link,
.actions [data-home-link] {
  order: 1;
}

.game-shell-actions [data-play-again],
.game-shell-actions #play-again-btn,
.game-shell-actions #replay-btn,
.game-shell-actions .love-letters-play-again,
.game-shell-actions button:not([data-home-link]),
.actions [data-play-again],
.actions #play-again-btn,
.actions #replay-btn,
.actions .love-letters-play-again,
.actions button:not([data-home-link]) {
  order: 2;
}

/* Global CTA typography lock: consistent CTA font family and size across planes. */
.game-shell-actions .cta,
.game-shell-actions .back-link,
.game-shell-actions button,
.actions .cta,
.actions .back-link,
.actions button,
#start-btn,
.primary-cta,
.back-link,
a.cta,
button.cta {
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
}

/* Ensure template bottom-nav icons always render across game pages. */
.template-bottom-nav__icon {
  display: block !important;
  width: 42px;
  height: 42px;
  opacity: 1 !important;
  visibility: visible !important;
  stroke: currentColor !important;
  fill: none !important;
}

.template-bottom-nav__icon * {
  stroke: currentColor !important;
  fill: none !important;
  vector-effect: non-scaling-stroke;
}

.template-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  z-index: var(--z-nav);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--game-card-bg, #ffffff) 94%, transparent);
  border-top: 1px solid var(--game-border, rgba(15, 23, 42, 0.16));
  box-shadow: 0 -10px 22px rgba(15, 23, 42, 0.16);
}

.template-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.game-body .template-bottom-nav__item {
  color: #000000 !important;
}

body.game-body .template-bottom-nav__item[aria-current="page"] {
  color: #000000 !important;
}

/* Hide legacy textual home links; template nav icon remains the home control. */
body.game-body a[data-home-link]:not(.template-bottom-nav__item) {
  display: none !important;
}

/* ============================================================================
   19. RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 640px) {
  .card {
    padding: 16px;
  }
  .memory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .puzzle-header {
    flex-direction: column;
    align-items: stretch;
  }
  .puzzle-actions {
    justify-content: flex-start;
  }
}