/* ==========================================================
   Cartas al Niño Dios — tokens
   Palette: midnight sky + antique gold + parchment + candle red
   Display: Cinzel  ·  Body: Cormorant Garamond  ·  Script: Sacramento
   ========================================================== */
:root{
  --navy-deep:   #060b1e;
  --navy:        #0d1836;
  --navy-soft:   #16224a;
  --gold:        #cda54b;
  --gold-bright: #f0d894;
  --gold-dim:    #8a7133;
  --parchment:   #f7ecd8;
  --parchment-2: #efe0bd;
  --ember:       #7c2430;
  --ink:         #362410;
  --star-white:  #fbf4e2;

  --font-display: 'Cinzel', serif;
  --font-body: 'Cormorant Garamond', serif;

  --ease-silk: cubic-bezier(.22,.8,.28,1);
}

*{ box-sizing: border-box; }
html, body{
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--navy-deep);
  font-family: var(--font-body);
  color: var(--parchment);
  -webkit-font-smoothing: antialiased;
}
button{ font-family: inherit; }
::selection{ background: var(--gold-dim); color: var(--navy-deep); }

/* focus visibility (accessibility) */
button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ==================== ambient background ==================== */
#sky{
  position: fixed; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,11,30,.62) 0%, rgba(6,11,30,.78) 60%, rgba(6,11,30,.95) 100%),
    url('https://images.unsplash.com/photo-1543589077-47d81606c1bf?q=80&w=1600&auto=format&fit=crop') center 30% / cover no-repeat,
    radial-gradient(ellipse at 50% 18%, rgba(205,165,75,.16), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(124,36,48,.14), transparent 55%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, #0a1330 100%);
  z-index: 0;
  animation: sky-drift 40s ease-in-out infinite;
}
@keyframes sky-drift{
  0%, 100%{ background-position: 0 0, center 30%, 0 0, 0 0, 0 0; filter: brightness(1); }
  50%{ background-position: 0 0, center 26%, 0 0, 0 0, 0 0; filter: brightness(1.06); }
}
#vignette{
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  box-shadow: inset 0 0 18vw 2vw rgba(0,0,0,.55);
}
.star{
  position: absolute;
  width: 2px; height: 2px;
  background: var(--star-white);
  border-radius: 50%;
  animation: twinkle ease-in-out infinite;
}
.star.big{ width:3px; height:3px; box-shadow: 0 0 6px 1px rgba(251,244,226,.8); }
@keyframes twinkle{
  0%, 100%{ opacity: .15; transform: scale(.8); }
  50%{ opacity: 1; transform: scale(1.15); }
}
#snow-container, #embers-container{ position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.snowflake{
  position: absolute;
  top: -5%;
  color: rgba(247,236,216,.75);
  user-select: none;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes fall{
  0%{ transform: translateY(-10vh) translateX(0); }
  100%{ transform: translateY(115vh) translateX(var(--drift, 20px)); }
}
.ember{
  position: absolute;
  bottom: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright), var(--gold) 60%, transparent 75%);
  animation-name: rise;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  box-shadow: 0 0 6px 1px rgba(240,216,148,.6);
}
@keyframes rise{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  12%{ opacity: .85; }
  100%{ transform: translateY(-108vh) translateX(var(--drift, 30px)); opacity: 0; }
}

/* shooting star comet */
.comet{
  position: fixed;
  top: 8%; left: -10%;
  width: 3px; height: 3px;
  background: var(--star-white);
  border-radius: 50%;
  z-index: 3;
  box-shadow: 0 0 8px 2px rgba(251,244,226,.9);
  animation: comet-fly 1.8s linear forwards;
  pointer-events: none;
}
.comet::after{
  content:'';
  position: absolute; top: 50%; right: 100%;
  width: 140px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251,244,226,.85));
  transform: translateY(-50%);
}
@keyframes comet-fly{
  0%{ transform: translate(0, 0); opacity: 0; }
  8%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{ transform: translate(120vw, 46vh); opacity: 0; }
}

/* ==================== screens ==================== */
.screen{
  position: fixed; inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity .5s var(--ease-silk), transform .5s var(--ease-silk), visibility 0s linear .5s;
  padding: 3vh 4vw;
}
.screen.active-screen{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity .5s var(--ease-silk), transform .5s var(--ease-silk), visibility 0s linear 0s;
}

/* write & view screens: same "internal scroll" pattern as the hero,
   so a long letter scrolls the whole popup instead of a nested box */
.screen--scroll{
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.screen--scroll::-webkit-scrollbar{ width: 6px; }
.screen--scroll::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius: 3px; }

.screen-inner{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vh, 2.2rem);
  padding: clamp(4rem, 8vh, 6rem) 4vw clamp(4rem, 8vh, 6rem);
}
.screen--hero{
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.screen--hero::-webkit-scrollbar{ width: 6px; }
.screen--hero::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius: 3px; }

.hero{
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3vh 4vw;
}

/* ==================== landing ==================== */
.landing-content{
  text-align: center;
  max-width: 720px;
  animation: rise-in 1s var(--ease-silk) both;
}
@keyframes rise-in{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}
.eyebrow{
  display: flex; align-items: center; justify-content: center; gap: .7em;
  font-family: var(--font-display);
  letter-spacing: .35em;
  font-size: clamp(.55rem, 1.4vw, .72rem);
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}
.eyebrow .line{ display:inline-block; width: 2.4em; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.eyebrow .line:last-child{ background: linear-gradient(270deg, transparent, var(--gold-dim)); }

.site-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 4.1rem);
  line-height: 1.08;
  margin: 0 0 .6rem;
  color: var(--parchment);
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.accent-word{
  color: var(--gold-bright);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  animation: word-glow 3.6s ease-in-out infinite;
}
@keyframes word-glow{
  0%, 100%{ filter: drop-shadow(0 0 6px rgba(240,216,148,.25)); }
  50%{ filter: drop-shadow(0 0 16px rgba(240,216,148,.55)); }
}
.eyebrow .line{ display:inline-block; width: 2.4em; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim)); position: relative; overflow: hidden; }
.eyebrow .line::after{
  content:'';
  position: absolute; top:0; left:-100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  animation: line-shimmer 3.2s ease-in-out infinite;
}
@keyframes line-shimmer{
  0%{ left: -60%; }
  100%{ left: 130%; }
}
.site-subtitle{
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--parchment-2);
  opacity: .85;
  margin: 0 0 2.4rem;
}

.btns-row{
  display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center;
}

.btn-elegant{
  font-family: var(--font-display);
  font-size: clamp(.78rem, 1.4vw, .95rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 1px solid var(--gold-bright);
  border-radius: 3px;
  padding: .95rem 1.9rem;
  display: inline-flex; align-items: center; gap: .65rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-silk), box-shadow .35s var(--ease-silk);
  box-shadow: 0 6px 20px rgba(205,165,75,.18);
}
.btn-elegant::after{
  content:'';
  position: absolute; top:0; left:-60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}
.btn-elegant:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(205,165,75,.32);
}
.btn-elegant:hover::after{ left: 130%; }
.btn-elegant:active{ transform: translateY(-1px) scale(.98); }
#btnWrite, #btnView{ animation: btn-breathe 3.6s ease-in-out infinite; }
#btnView{ animation-delay: .5s; }
@keyframes btn-breathe{
  0%, 100%{ box-shadow: 0 6px 20px rgba(205,165,75,.18); }
  50%{ box-shadow: 0 10px 30px rgba(205,165,75,.4); }
}

.btn-elegant--ghost{
  color: var(--gold-bright);
  background: rgba(20,28,58,.35);
  border: 1px solid var(--gold-dim);
  box-shadow: none;
}
.btn-elegant--ghost:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.btn-elegant.w-100{ width: 100%; justify-content: center; }
.btn-send{ align-self: center; margin-top: .6rem; }

/* ==================== scroll hint ==================== */
.scroll-hint{
  position: absolute;
  bottom: 1.5vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  color: var(--parchment-2);
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
  cursor: pointer;
  animation: hint-bounce 2.4s ease-in-out infinite;
  transition: opacity .3s ease, color .3s ease;
}
.scroll-hint:hover{ opacity: 1; color: var(--gold-bright); }
@keyframes hint-bounce{
  0%, 100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(7px); }
}

/* ==================== ribbon banner (below the fold) ==================== */
.ribbon-section{
  position: relative;
  padding: 2.2rem 0 5vh;
  background: linear-gradient(180deg, transparent, rgba(6,11,30,.55) 30%, rgba(6,11,30,.85));
}
.ribbon-caption{
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(.7rem, 1.3vw, .85rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .8;
  margin: 0 0 1.4rem;
}
.ribbon-wrapper{
  position: relative;
  height: clamp(88px, 11vw, 118px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ribbon-track{
  position: absolute; top: 0; left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  white-space: nowrap;
  animation: ribbon-scroll 26s linear infinite;
  will-change: transform;
}
.ribbon-wrapper:hover .ribbon-track{ animation-play-state: paused; }
@keyframes ribbon-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.ribbon-item{
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  text-decoration: none;
  width: clamp(64px, 8vw, 84px);
  flex-shrink: 0;
}
.ribbon-item .logo-badge{
  width: clamp(48px, 6vw, 64px);
  height: clamp(48px, 6vw, 64px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.12);
  border: 1px solid rgba(205,165,75,.4);
  transition: transform .35s var(--ease-silk), box-shadow .35s var(--ease-silk);
}
.ribbon-item span{
  font-family: var(--font-display);
  font-size: clamp(.6rem, 1vw, .7rem);
  letter-spacing: .03em;
  color: var(--parchment-2);
  opacity: .75;
  white-space: nowrap;
  transition: opacity .3s ease, color .3s ease;
}
.ribbon-item:hover .logo-badge{
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 14px 26px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.2);
}
.ribbon-item:hover span{ opacity: 1; color: var(--gold-bright); }

/* ==================== auth ==================== */
.auth-card{
  position: relative;
  width: min(92vw, 400px);
  background: linear-gradient(180deg, rgba(22,34,74,.92), rgba(10,17,40,.95));
  border: 1px solid rgba(205,165,75,.35);
  border-radius: 6px;
  padding: 2.2rem 2rem 1.8rem;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  animation: card-float 5s ease-in-out infinite;
}
@keyframes card-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}
.auth-kicker{
  text-align: center;
  font-style: italic;
  color: var(--parchment-2);
  margin: 0 0 1.2rem;
  font-size: .95rem;
  opacity: .8;
}
.auth-tabs{
  display: flex;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(205,165,75,.25);
}
.auth-tab{
  flex: 1;
  background: none; border: none;
  color: var(--parchment-2);
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .7rem 0;
  cursor: pointer;
  opacity: .55;
  border-bottom: 2px solid transparent;
  transition: opacity .3s ease, border-color .3s ease;
}
.auth-tab.active{ opacity: 1; color: var(--gold-bright); border-color: var(--gold); }

.auth-form{ display: none; flex-direction: column; gap: 1rem; }
.auth-form.active-form{ display: flex; animation: rise-in .45s var(--ease-silk) both; }
.auth-form label{
  font-size: .8rem;
  color: var(--parchment-2);
  letter-spacing: .04em;
  display: flex; flex-direction: column; gap: .4rem;
}
.auth-form input{
  background: rgba(6,11,30,.55);
  border: 1px solid rgba(205,165,75,.3);
  border-radius: 3px;
  padding: .65rem .8rem;
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.auth-form input:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(205,165,75,.15); outline:none; }
.auth-error{
  min-height: 1.1em;
  color: #e78b96;
  font-size: .82rem;
  text-align: center;
  margin: 0;
}

/* ==================== close button / caption ==================== */
.btn-close-screen{
  position: fixed;
  top: clamp(14px, 3vh, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(205,165,75,.4);
  background: rgba(13,24,54,.5);
  color: var(--gold-bright);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease, background .3s ease;
  z-index: 20;
}
.btn-close-screen:hover{ transform: rotate(90deg); background: rgba(124,36,48,.4); }

.screen-caption{
  font-family: var(--font-display);
  font-size: clamp(.75rem, 1.4vw, .95rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .8;
  margin: 0 0 clamp(1rem, 3vh, 2.2rem);
  text-align: center;
}

/* ==================== envelope ==================== */
.envelope-stage{
  width: clamp(240px, 62vmin, 460px);
  aspect-ratio: 1.5 / 1;
  max-height: 78vh;
  perspective: 1800px;
  transition: max-height .3s ease;
}
@media (min-width: 900px){
  .envelope-stage{ width: clamp(400px, 42vw, 640px); max-height: 80vh; }
}
@media (min-width: 1300px){
  .envelope-stage{ width: clamp(460px, 38vw, 760px); max-height: 82vh; }
}
/* once the letter has fully risen and "settled", the stage stops being a
   locked aspect-ratio box and becomes a normal flow-sized card — this is
   what lets real top/bottom breathing room and page scrolling work
   correctly for long letters, instead of the paper silently overflowing
   a fixed-size box with no space around it */
.envelope-stage.settled{
  aspect-ratio: unset;
  height: auto;
  max-height: none;
}
.envelope{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: envelope-float 4.2s ease-in-out infinite;
}
.envelope.settled{ height: auto; }
@keyframes envelope-float{
  0%, 100%{ transform: translateY(0) rotateZ(0deg); }
  50%{ transform: translateY(-6px) rotateZ(-.6deg); }
}
.envelope.seal-open, .envelope.flap-open, .envelope.paper-open{
  animation-play-state: paused;
}
.envelope.settled .env-back,
.envelope.settled .env-front-left,
.envelope.settled .env-flap,
.envelope.settled .wax-seal{
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.env-back{
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy));
  border: 1px solid rgba(205,165,75,.35);
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}

/* pocket (bottom folded flaps, flattened into one triangle) */
.env-front-left, .env-front-right{
  position: absolute; inset: 0;
  background: linear-gradient(200deg, var(--gold), var(--gold-dim));
  clip-path: polygon(0% 100%, 50% 42%, 100% 100%);
  z-index: 3;
  border-radius: 0 0 4px 4px;
}
.env-front-right{ display:none; } /* single shape suffices, kept for semantic symmetry */

/* letter / paper */
.paper{
  position: absolute;
  left: 6%; right: 6%;
  top: 8%;
  height: 84%;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 2;
  transform: translateY(14%) scale(.94);
  transition: transform .75s var(--ease-silk), z-index 0s linear .75s;
  pointer-events: none;
  overflow: hidden;
}
.envelope.paper-open .paper{
  transform: translateY(-46%) scale(1);
  z-index: 10;
  pointer-events: auto;
  transition: transform .75s .2s var(--ease-silk), z-index 0s linear 0s;
}
.envelope.paper-open.settled .paper{
  position: relative;
  left: auto; right: auto; top: auto;
  width: 88%;
  margin: 0 auto;
  height: auto;
  min-height: 50vh;
  max-height: none;
  overflow: visible;
  transform: none;
}
.paper-inner{
  height: 100%;
  padding: clamp(1rem, 4%, 1.6rem) clamp(1.1rem, 5%, 1.8rem);
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.paper-heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing: .03em;
  color: var(--ember);
  margin: 0 0 .7rem;
}
#letterText{
  min-height: clamp(180px, 42vh, 420px);
  resize: none;
  border: none;
  background: repeating-linear-gradient(var(--parchment) 0 34px, rgba(124,36,48,.14) 34px 35px);
  background-attachment: local;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 35px;
  color: var(--ink);
  padding: 0;
  width: 100%;
  overflow: hidden;
}
#letterText:focus{ outline: none; }
.message-script{
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
  min-height: clamp(140px, 30vh, 320px);
}

/* flap */
.env-flap{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(200deg, var(--gold-bright), var(--gold));
  clip-path: polygon(0% 0%, 50% 88%, 100% 0%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform .65s .1s var(--ease-silk);
  z-index: 4;
  border-radius: 4px 4px 0 0;
}
.envelope.flap-open .env-flap{
  transform: rotateX(-170deg);
}

.wax-seal{
  position: absolute;
  top: 46%; left: 50%;
  width: clamp(38px, 8vw, 56px);
  height: clamp(38px, 8vw, 56px);
  transform: translate(-50%, -50%) scale(1);
  background: radial-gradient(circle at 35% 30%, #a53645, var(--ember) 70%);
  border-radius: 50%;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-bright);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.08);
  transition: transform .4s var(--ease-silk), opacity .4s var(--ease-silk);
}
.envelope.seal-open .wax-seal{
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

/* ==================== toast ==================== */
.app-toast{
  position: fixed;
  top: 24px; left: 50%;
  transform: translate(-50%, -20px);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--navy-deep);
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .04em;
  padding: .7rem 1.4rem;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-silk), transform .4s var(--ease-silk);
}
.app-toast.show{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==================== help button & modal ==================== */
.help-btn{
  position: fixed;
  bottom: clamp(16px, 3vh, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--navy-deep);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 40;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  animation: btn-breathe 3.6s ease-in-out infinite;
  transition: transform .3s var(--ease-silk);
}
.help-btn:hover{ transform: scale(1.08) rotate(8deg); }

.help-overlay{
  position: fixed; inset: 0;
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,11,30,.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease-silk), visibility 0s linear .4s;
  padding: 4vh 4vw;
}
.help-overlay.show{
  opacity: 1;
  visibility: visible;
  transition: opacity .4s var(--ease-silk), visibility 0s linear 0s;
}
.help-card{
  position: relative;
  width: min(92vw, 460px);
  max-height: 86vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(22,34,74,.96), rgba(10,17,40,.98));
  border: 1px solid rgba(205,165,75,.35);
  border-radius: 6px;
  padding: 2.2rem 2rem 1.8rem;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  transform: translateY(16px) scale(.97);
  transition: transform .4s var(--ease-silk);
}
.help-overlay.show .help-card{ transform: translateY(0) scale(1); }
.help-card .btn-close-screen{ position: absolute; top: 1rem; right: 1rem; }
.help-title{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--gold-bright);
  text-align: center;
  margin: 0 0 1.3rem;
}
.help-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 1rem;
}
.help-list li{
  display: flex; align-items: flex-start; gap: .8rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--parchment-2);
}
.help-list li i{
  color: var(--gold);
  margin-top: .2rem;
  width: 1.1em;
  flex-shrink: 0;
}
.help-list li strong{ color: var(--gold-bright); font-weight: 600; }

.help-panel{ display: none; }
.help-panel.active-panel{ display: block; animation: rise-in .4s var(--ease-silk) both; }
.terms-text{
  display: flex;
  flex-direction: column;
  gap: .9rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--parchment-2);
}
.terms-text strong{ color: var(--gold-bright); }

/* ==================== responsive ==================== */
@media (max-height: 640px){
  .site-subtitle{ margin-bottom: 1.4rem; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
@media (max-width: 480px){
  .btns-row{ flex-direction: column; align-items: stretch; }
  .btn-elegant{ justify-content: center; }
  .auth-card{ padding: 1.6rem 1.3rem 1.4rem; }
}