/* ====================================================================
   P.A.T.U.F.E.T. — Styles
   Storybook-magical palette: deep navy + gold + soft teal + parchment.
   Three view-states live in the same DOM, swapped via body classes.
   ==================================================================== */

:root {
  /* Core palette */
  --navy-0: #060a1a;
  --navy-1: #0a1228;
  --navy-2: #1a2347;
  --gold:   #d4af37;
  --gold-soft: #efd58a;
  --teal:   #5fb8b8;
  --cream:  #f4e9d0;
  --rose:   #d68aa2;

  /* Section accent — overridden per [data-section] below.
     Used by glowing titles, particle hints, etc. */
  --accent:       var(--gold);
  --accent-soft:  var(--gold-soft);
  --accent-glow:  rgba(212,175,55,0.55);

  --radius-lg: 18px;
  --radius-md: 10px;

  /* Animation tokens */
  --ease-out: cubic-bezier(.16,.84,.36,1);
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

body {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 50% 35%, var(--navy-2) 0%, var(--navy-1) 55%, var(--navy-0) 100%);
  color: var(--cream);
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

/* Subtle vignette so the gold pops off the dark */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

/* ---- Background canvas ---- */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---- Sound toggle ---- */
.sound-toggle {
  position: fixed;
  top: env(safe-area-inset-top, 12px);
  right: 12px;
  margin-top: 12px;
  z-index: 50;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(10,18,40,0.65);
  border: 1px solid rgba(212,175,55,0.45);
  font-size: 20px;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .15s var(--ease-out), border-color .2s;
}
.sound-toggle:hover, .sound-toggle:focus-visible { transform: scale(1.06); outline: none; border-color: var(--gold); }
.sound-toggle .sound-off { display: none; }
.sound-toggle[aria-pressed="false"] .sound-on  { display: none; }
.sound-toggle[aria-pressed="false"] .sound-off { display: inline; }

/* ---- Stage / view layout ---- */
.stage {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px 80px;
}

.view {
  width: 100%;
  max-width: 520px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  grid-area: 1 / 1;
}
.stage > .view { grid-row: 1; grid-column: 1; }

body.state-landing .view-landing,
body.state-loading .view-loading,
body.state-reveal  .view-reveal,
body.state-gallery .view-gallery {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body:not(.state-landing) .view-landing,
body:not(.state-loading) .view-loading,
body:not(.state-reveal)  .view-reveal,
body:not(.state-gallery) .view-gallery {
  position: absolute;
}

/* ============================================================
   LANDING
   ============================================================ */
.logo {
  width: min(260px, 60vw);
  margin: 8px auto 18px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55));
  animation: logo-enter 1.2s var(--ease-out) both;
}

.logo-orb {
  width: min(320px, 78vw);
  aspect-ratio: 1;
  margin: 8px auto 18px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(244,233,208,0.2) 0%, rgba(10,18,40,0.2) 58%, rgba(6,10,26,0) 100%);
  -webkit-mask-image: radial-gradient(circle at center, #000 70%, rgba(0,0,0,0.82) 84%, rgba(0,0,0,0.35) 93%, transparent 100%);
    mask-image: radial-gradient(circle at center, #000 70%, rgba(0,0,0,0.82) 84%, rgba(0,0,0,0.35) 93%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  -webkit-mask-position: center;
    mask-position: center;
  -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  animation: logo-enter 1.2s var(--ease-out) both;
}

.logo-orb picture {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.logo-orb::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.28) 0%, rgba(95,184,184,0.1) 46%, rgba(10,18,40,0) 78%);
  filter: blur(16px);
  pointer-events: none;
}

.logo-orb::after {
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 62%, rgba(212,175,55,0.12) 80%, rgba(95,184,184,0.06) 90%, transparent 100%);
  filter: blur(9px);
  box-shadow: inset 0 0 62px rgba(10,18,40,0.36), 0 0 52px rgba(212,175,55,0.14);
  pointer-events: none;
}

/* Gold shimmer sweep on the logo */
.logo {
  position: relative;
}
.view-landing .logo {
  width: 100%;
  max-width: none;
  margin: 0;
  justify-self: center;
  transform: translateX(0) scale(1.04);
  z-index: 1;
  animation: logo-shimmer 2.2s 1.1s var(--ease-out) 1;
}
@keyframes logo-shimmer {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position:   0% 0; mask-position:   0% 0; }
}
@keyframes logo-enter {
  from { opacity: 0; transform: scale(0.7) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);   }
}

.title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(22px, 5vw, 30px);
  letter-spacing: 0.04em;
  margin: 4px 0 2px;
  color: var(--cream);
}
.title-acronym {
  display: block;
  color: var(--gold);
  letter-spacing: 0.18em;
  font-size: 1.15em;
  margin-top: 2px;
  text-shadow: 0 0 18px rgba(212,175,55,0.35);
}
.subtitle {
  font-style: italic;
  color: rgba(244,233,208,0.75);
  font-size: clamp(12px, 2.6vw, 14px);
  margin: 2px 0 22px;
}
/* ---- Countdown ---- */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(10,18,40,0.55);
  border: 1px solid rgba(212,175,55,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
  animation: fade-up .6s .9s var(--ease-out) both;
}
.countdown:empty { display: none; }

.countdown-number {
  font-size: clamp(28px, 7vw, 42px);
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(212,175,55,0.4);
  line-height: 1;
}
.countdown-label {
  font-size: clamp(13px, 2.8vw, 16px);
  color: var(--cream);
  opacity: 0.85;
}
/* Special states */
.countdown.countdown-today {
  border-color: rgba(212,175,55,0.7);
  background: rgba(212,175,55,0.12);
  font-size: clamp(14px, 3.2vw, 17px);
  color: var(--gold-soft);
  justify-content: center;
}

.intro {
  font-size: clamp(15px, 3.4vw, 17px);
  margin: 0 auto 26px;
  max-width: 38ch;
  color: var(--cream);
}
.intro strong { color: var(--gold-soft); }

/* Code input — 4 big boxes */
.code-form { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.code-input {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.code-box {
  aspect-ratio: 1 / 1.1;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  border-radius: 14px;
  background: rgba(10,18,40,0.75);
  border: 2px solid rgba(212,175,55,0.45);
  color: var(--gold-soft);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(28px, 8vw, 38px);
  text-align: center;
  text-transform: uppercase;
  outline: none;
  caret-color: var(--gold);
  transition: border-color .18s, box-shadow .18s, transform .12s var(--ease-out);
  box-shadow: inset 0 0 16px rgba(0,0,0,0.45);
}
.code-box:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.20), inset 0 0 16px rgba(0,0,0,0.45);
  transform: translateY(-1px);
}
.code-box.filled { color: var(--gold); }

.submit-btn {
  background: linear-gradient(180deg, var(--gold) 0%, #b8902a 100%);
  color: #1a1404;
  font-weight: 700;
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(15px, 3.5vw, 17px);
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(212,175,55,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .12s var(--ease-out), box-shadow .2s, filter .2s;
  min-height: 48px;
  min-width: 220px;
}
.submit-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.submit-btn:active { transform: translateY(0); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.error {
  min-height: 1.4em;
  margin: 4px 0 0;
  font-weight: 600;
  color: #ffb38a;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.code-form.shake .code-input { animation: shake .45s var(--ease-out); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* ============================================================
   LOADING
   ============================================================ */
.logo-orb-loading {
  width: min(190px, 48vw);
  margin: 0 auto 10px;
  -webkit-mask-image: radial-gradient(circle at center, #000 72%, rgba(0,0,0,0.82) 85%, rgba(0,0,0,0.36) 94%, transparent 100%);
          mask-image: radial-gradient(circle at center, #000 72%, rgba(0,0,0,0.82) 85%, rgba(0,0,0,0.36) 94%, transparent 100%);
}

.logo-orb-loading::before {
  inset: -12%;
  background: radial-gradient(circle, rgba(212,175,55,0.24) 0%, rgba(95,184,184,0.08) 48%, rgba(10,18,40,0) 80%);
  filter: blur(18px);
}

.logo-orb-loading::after {
  inset: -5%;
  background: radial-gradient(circle, transparent 62%, rgba(212,175,55,0.11) 80%, rgba(95,184,184,0.05) 90%, transparent 100%);
  filter: blur(10px);
  box-shadow: inset 0 0 56px rgba(10,18,40,0.34), 0 0 46px rgba(212,175,55,0.12);
}

.logo-loading {
  width: 104%;
  max-width: none;
  margin: 0;
  justify-self: center;
  transform: scale(1.02);
  animation: logo-pulse 1.6s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(212,175,55,0)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(212,175,55,0.55)); }
}

/* ---- Compass ---- */
.compass {
  width: min(100px, 22vw);
  height: min(100px, 22vw);
  margin: 4px auto 16px;
  animation: compass-spin 9s linear infinite;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.30));
}
@keyframes compass-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Narrative steps ---- */
.loading-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  min-height: 6.4em; /* reserve space so layout doesn't jump as lines appear */
}
.loading-step {
  font-family: 'Cinzel', serif;
  font-size: clamp(12px, 3vw, 15px);
  letter-spacing: 0.05em;
  color: var(--gold-soft);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  /* prefix — different icon on last step */
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.loading-step::before {
  content: '›';
  color: var(--gold);
  font-size: 1.1em;
  flex-shrink: 0;
}
.loading-step[data-step="4"]::before { content: '✦'; font-size: 0.85em; }
.loading-step.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Ticker-tape progress bar ---- */
.ticker-bar {
  width: min(280px, 75vw);
  margin: 0 auto;
  /* Ruler tick marks via CSS gradient — no extra DOM */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(212,175,55,0.40) 0px,
    rgba(212,175,55,0.40) 1px,
    transparent 1px,
    transparent calc(100% / 10)
  );
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: top;
  padding-top: 8px; /* space for the tick marks above the bar */
}
.ticker-fill {
  height: 7px;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #8a6a10, #d4af37, #f0d870, #d4af37);
  box-shadow: 0 0 8px rgba(212,175,55,0.55);
  /* animation is started/restarted by JS adding .running */
}
.ticker-fill.running {
  animation: ticker-progress 4.3s cubic-bezier(0.15, 0, 0.25, 1) forwards;
}
@keyframes ticker-progress {
  /* Pauses at each step arrival, then jumps forward */
  0%   { width: 0%;   }
  4%   { width: 13%;  } /* burst after step 1 */
  22%  { width: 17%;  } /* stall before step 2 */
  27%  { width: 47%;  } /* jump when step 2 fires */
  46%  { width: 51%;  } /* stall before step 3 */
  52%  { width: 73%;  } /* jump when step 3 fires */
  71%  { width: 76%;  } /* stall before step 4 */
  76%  { width: 95%;  } /* jump when step 4 fires */
  94%  { width: 97%;  } /* almost done... */
  100% { width: 100%; } /* complete — reveal fires immediately after */
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal-line { display: inline-block; }
.reveal-hello {
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 7vw, 40px);
  color: var(--cream);
  margin: 8px 0 4px;
  opacity: 0;
  transform: translateY(14px);
}
.reveal-assigned {
  font-size: clamp(15px, 3.4vw, 17px);
  color: rgba(244,233,208,0.85);
  margin: 4px 0 18px;
  opacity: 0;
  transform: translateY(14px);
}
.reveal-section {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(46px, 12vw, 88px);
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 4px 0 22px;
  opacity: 0;
  transform: scale(0.7);
  text-shadow:
    0 0 14px var(--accent-glow),
    0 0 36px var(--accent-glow);
}

/* Sequential reveal — driven by body.reveal-stage-N classes */
body.reveal-stage-1 .reveal-hello,
body.reveal-stage-2 .reveal-hello,
body.reveal-stage-3 .reveal-hello {
  animation: fade-up .55s var(--ease-out) forwards;
}
body.reveal-stage-2 .reveal-assigned,
body.reveal-stage-3 .reveal-assigned {
  animation: fade-up .55s .15s var(--ease-out) forwards;
}
body.reveal-stage-3 .reveal-section {
  animation: section-pop .9s var(--ease-out) forwards, section-glow 2.6s 1s ease-in-out infinite;
}
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes section-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes section-glow {
  0%, 100% { text-shadow: 0 0 14px var(--accent-glow), 0 0 36px var(--accent-glow); }
  50%      { text-shadow: 0 0 22px var(--accent-glow), 0 0 64px var(--accent-glow); }
}

.reveal-flavor {
  max-width: 40ch;
  margin: 0 auto 18px;
  font-size: clamp(14px, 3vw, 16px);
  font-style: italic;
  color: var(--accent-soft);
  opacity: 0;
  line-height: 1.55;
}
body.reveal-stage-3 .reveal-flavor {
  animation: fade-up .6s .6s var(--ease-out) forwards;
}

.reveal-message {
  max-width: 38ch;
  margin: 0 auto 22px;
  font-size: clamp(15px, 3.4vw, 17px);
  color: var(--cream);
  opacity: 0;
}
body.reveal-stage-3 .reveal-message {
  animation: fade-up .6s 1.1s var(--ease-out) forwards;
}
.reveal-message strong { color: var(--gold-soft); }

/* ---- Shared action buttons ---- */
.reveal-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.action-btn {
  padding: 12px 26px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid rgba(212,175,55,0.55);
  color: var(--gold-soft);
  font-weight: 600;
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(14px, 3.2vw, 16px);
  transition: background .2s, transform .12s var(--ease-out), border-color .2s, filter .2s;
  min-height: 46px;
  min-width: 220px;
}
.action-btn:hover {
  background: rgba(212,175,55,0.12);
  border-color: var(--gold);
  transform: translateY(-1px);
}
/* Primary = filled accent; uses the section accent on reveal/gallery */
.action-btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  border-color: transparent;
  color: #16110a;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
}
.action-btn-primary:hover { filter: brightness(1.08); background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%); }

/* Reveal-screen entrance for the action buttons */
.reveal-actions .action-btn { opacity: 0; }
body.reveal-stage-3 #explore-btn { animation: fade-up .5s 1.3s var(--ease-out) forwards; }
body.reveal-stage-3 #restart-btn { animation: fade-up .5s 1.5s var(--ease-out) forwards; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(22px, 5.5vw, 32px);
  color: var(--gold);
  margin: 4px 0 4px;
  text-shadow: 0 0 18px rgba(212,175,55,0.35);
}
.gallery-sub {
  color: rgba(244,233,208,0.8);
  font-size: clamp(13px, 3vw, 16px);
  margin: 0 0 20px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 auto 22px;
  max-width: 480px;
}
.gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 12px;
  border-radius: 16px;
  background: rgba(10,18,40,0.7);
  border: 1.5px solid var(--card-accent, rgba(212,175,55,0.4));
  color: var(--cream);
  cursor: pointer;
  transition: transform .14s var(--ease-out), box-shadow .2s, background .2s;
  min-height: 92px;
}
.gallery-card:hover,
.gallery-card:focus-visible {
  transform: translateY(-3px) scale(1.03);
  outline: none;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45),
              0 0 18px color-mix(in srgb, var(--card-accent) 55%, transparent);
}
.gallery-card .card-emoji {
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
.gallery-card .card-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(12px, 2.8vw, 15px);
  color: var(--card-accent, var(--gold-soft));
  letter-spacing: 0.02em;
}
.gallery-card.active {
  background: color-mix(in srgb, var(--card-accent) 18%, rgba(10,18,40,0.7));
  border-color: var(--card-accent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--card-accent) 55%, transparent);
}
.gallery-card.is-mine::after {
  content: "La teva secció";
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Quicksand', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #16110a;
  background: var(--gold);
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.gallery-detail {
  margin: 0 auto 16px;
  max-width: 44ch;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(10,18,40,0.58);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, rgba(244,233,208,0.25));
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}

.gallery-detail-name {
  margin: 0 0 6px;
  font-family: 'Cinzel', serif;
  font-size: clamp(22px, 5.2vw, 32px);
  color: var(--accent-soft);
  text-shadow: 0 0 16px var(--accent-glow);
}

.gallery-detail-flavor {
  margin: 0;
  color: rgba(244,233,208,0.92);
  font-size: clamp(14px, 3.1vw, 16px);
  line-height: 1.55;
}

@media (max-width: 460px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ============================================================
   8 Section themes — accent + ambient overlay tint
   ============================================================ */
body[data-section="1"] { --accent: #c8a8ff; --accent-soft: #e6d6ff; --accent-glow: rgba(200,168,255,0.55); }
body[data-section="2"] { --accent: #6bd5d5; --accent-soft: #b6ecec; --accent-glow: rgba(107,213,213,0.55); }
body[data-section="3"] { --accent: #7ed29b; --accent-soft: #bce7c8; --accent-glow: rgba(126,210,155,0.55); }
body[data-section="4"] { --accent: #ff9a5a; --accent-soft: #ffc9a4; --accent-glow: rgba(255,154,90,0.55); }
body[data-section="5"] { --accent: #c8b78a; --accent-soft: #e6d9b6; --accent-glow: rgba(200,183,138,0.55); }
body[data-section="6"] { --accent: #e07a6a; --accent-soft: #f1aea4; --accent-glow: rgba(224,122,106,0.55); }
body[data-section="7"] { --accent: #f4a7c4; --accent-soft: #ffd0e0; --accent-glow: rgba(244,167,196,0.55); }
body[data-section="8"] { --accent: #b48cf0; --accent-soft: #d9c1ff; --accent-glow: rgba(180,140,240,0.55); }

/* Per-section soft background tint on reveal + gallery */
body.state-reveal[data-section]::before,
body.state-gallery[data-section]::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 60%, var(--accent-glow) 0%, transparent 55%);
  opacity: 0.35;
  mix-blend-mode: screen;
  animation: tint-fade 1.2s var(--ease-out);
}
@keyframes tint-fade { from { opacity: 0; } to { opacity: 0.35; } }

/* ---- Footer ---- */
.site-foot {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(244,233,208,0.35);
  padding: 10px 0 14px;
  z-index: 2;
  pointer-events: none;
  font-family: 'Cinzel', serif;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 380px) {
  .code-input { gap: 8px; }
  .code-box { border-radius: 12px; min-height: 50px; }
  .submit-btn { min-width: 0; width: 100%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .logo { animation: none; }
  body.state-reveal[data-section]::before { animation: none; }
}