/* ═══ PALETA: TARGARYEN + STARK ═══ */
:root{
  --black:#05060a;
  --fire:#8b0000; --fire-deep:#3d0a0a;
  --ice:#9fc3d8;  --ice-deep:#1d2b36;
  --gold:#c9a227; --gold-light:#e8c96a;
  --white:#eef4f8;
  --accent:var(--fire); --accent-soft:#e3b7b7; --accent-glow:rgba(255,90,50,.45);
}
body.house-ice{ --accent:var(--ice-deep); --accent-soft:#cfe6f2; --accent-glow:rgba(150,210,255,.4); }

*{-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{margin:0; overflow:hidden; background:var(--black); color:var(--white);
  font-family:'Eagle Lake','Times New Roman',serif; touch-action:manipulation;}
.fleur{font-family:'Fleur De Leah',cursive;}
.heart{font-family:Arial,Helvetica,sans-serif; color:var(--fire); text-shadow:0 0 14px rgba(139,0,0,.9);}

#fx{position:fixed; inset:0; z-index:6; pointer-events:none;}

/* ═══ ROLAGEM NARRATIVA (3 páginas em fluxo normal = texto sempre visível) ═══ */
#realm{position:fixed; inset:0; z-index:1; overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
#realm::-webkit-scrollbar{display:none;}
.page{position:relative; min-height:100vh; min-height:100dvh; scroll-snap-align:start; overflow:hidden;}

/* ═══ SLIDES "MOVIMENTO VIVO" ═══ */
.slideshow{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--black);}
.slide{position:absolute; inset:-6%; background-size:cover; background-position:center;
  opacity:0; transition:opacity 2.2s ease-in-out; will-change:transform,opacity;}
.slide.active{opacity:1;}
.kb-a{animation:kbA 16s ease-in-out infinite alternate;}
.kb-b{animation:kbB 16s ease-in-out infinite alternate;}
@keyframes kbA{from{transform:scale(1.02)}to{transform:scale(1.16) translate(1.6%,-1.8%)}}
@keyframes kbB{from{transform:scale(1.16) translate(-1.6%,1.4%)}to{transform:scale(1.02)}}
.veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(4,5,8,.34) 0%, rgba(4,5,8,.46) 55%, rgba(4,5,8,.9) 100%);}
.veil-split{background:linear-gradient(180deg, rgba(4,5,8,.7) 0%, rgba(4,5,8,.26) 24%,
  rgba(4,5,8,.12) 50%, rgba(4,5,8,.34) 74%, rgba(4,5,8,.78) 100%);}

/* ═══ CONTEÚDO (fluxo normal) ═══ */
.content{position:absolute; bottom: 0px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:70px 16px 46px; padding:calc(64px + env(safe-area-inset-top)) 16px calc(46px + env(safe-area-inset-bottom));}
.orn{color:var(--gold-light); letter-spacing:.35em; font-size:1rem; text-shadow:0 0 16px var(--accent-glow);}
.intro{text-align:center; max-width:560px; border-radius:18px; padding:14px 16px;
  background:radial-gradient(80% 100% at 50% 50%, rgba(3,5,9,.68), rgba(3,5,9,0) 94%);}
.intro p{margin:0 0 .8em; line-height:1.75; font-size:clamp(.95rem,4.5vw,1.12rem); color:#fff;
  text-shadow:0 1px 2px #000, 0 2px 10px #000, 0 0 22px rgba(0,0,0,.85);}
.intro p:last-child{margin:0;}

/* contagem regressiva */
.countdown{display:flex; gap:8px;}
.cd-tile{min-width:64px; padding:8px 6px; text-align:center; border-radius:12px;
  background:rgba(8,10,16,.55); border:1px solid rgba(201,162,39,.45);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.cd-tile b{display:block; font-size:1.3rem; color:var(--gold-light); text-shadow:0 0 12px var(--accent-glow);}
.cd-tile span{font-size:.62rem; letter-spacing:.18em; color:var(--accent-soft);}

/* cards-banner translúcidos */
.banner-card{width:100%; max-width:540px; text-align:center; border-radius:16px; padding:18px 16px;
  background:linear-gradient(170deg, rgba(8,10,16,.5), rgba(8,10,16,.66));
  border:1px solid rgba(159,195,216,.5);
  outline:1px solid rgba(159,195,216,.16); outline-offset:-6px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.5);}
.banner-card.fire{border-color:rgba(139,0,0,.8); outline-color:rgba(201,162,39,.2);}
.banner-card h3{font-size:1.02rem; letter-spacing:.14em; color:var(--accent-soft);
  text-shadow:0 1px 3px #000; margin-bottom:.6em;}
.banner-card p{margin:0; line-height:1.65; font-size:clamp(.93rem,4.3vw,1.03rem); color:#f4f8fb;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.8);}
.final{ position: absolute;left: 0;right: 0;top: 40px;z-index: 3;text-align: center;pointer-events: none;}
.final .big{font-size:clamp(2rem,10vw,3rem); color:#fff; text-shadow:0 2px 16px #000;}
.final .heart{font-size:1.4rem; vertical-align:middle; margin:0 .2em;}
.final p{margin:.4rem 0 0; color:var(--gold-light); letter-spacing:.3em; font-size:.8rem;}

/* botão-selo (confirmação) */
.seal-btn{display:inline-block; margin-top:14px; padding:10px 22px; border-radius:999px;
  background:radial-gradient(circle at 35% 30%, #a31621, #5e0b0b 65%); color:var(--gold-light);
  border:1px solid var(--gold); font-family:'Eagle Lake',serif; letter-spacing:.08em; text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,.6), inset 0 1px 4px rgba(255,255,255,.25); animation:sealPulse 2.6s infinite;}
.seal-btn:active{transform:scale(.97);}

/* ═══ PÁGINA 1 ═══ */
.trumpet{position:absolute; z-index:2; width:clamp(88px,27vw,160px); bottom:14px;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.75));}
.trumpet svg{width:100%; height:auto; display:block; transform-origin:50% 90%; animation:sway 5.5s ease-in-out infinite alternate;}
.trumpet.left{left:4px;} .trumpet.right{right:4px; transform:scaleX(-1);}
@keyframes sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.summon{position:absolute; inset:0; z-index:3; top: 200px; align-items:center; justify-content:center;
  padding:0 26px 170px; text-align:center; pointer-events:none;
  opacity:0; transform:translateY(16px); transition:opacity 1.8s ease, transform 1.8s ease;}
.summon.show{opacity:1; transform:none;}
.summon p{margin:0; line-height:1.8; font-size:clamp(1rem,4.9vw,1.3rem);
  text-shadow:0 2px 16px #000, 0 0 34px rgba(139,0,0,.65);}
.p1-top{position:absolute; left:0; right:0; top:40px; z-index:3; text-align:center; pointer-events:none;}
.names{margin:0; line-height:1;}
.names .fleur{font-size:clamp(2.7rem,13vw,4.4rem); color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.85), 0 0 28px rgba(201,162,39,.4);}
.names .heart{font-size:clamp(1.5rem,7vw,2.3rem); vertical-align:middle; margin:0 .18em;
  display:inline-block; animation:heartBeat 2.4s infinite;}
.motto{margin:.5rem 0 0; color:var(--gold-light); letter-spacing:.16em;
  font-size:clamp(.82rem,4vw,1rem); text-shadow:0 1px 10px #000;}

/* ═══ PRELOADER / SELO ═══ */
#preloader{position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; padding:28px; text-align:center;
  background:radial-gradient(120% 90% at 50% 12%, #1c0d0d 0%, #05060a 62%); transition:opacity .8s, visibility .8s;}
#preloader.done{opacity:0; visibility:hidden;}
#emblem{width:min(52vw,200px); border-radius:50%; filter:drop-shadow(0 0 22px rgba(139,0,0,.55)); animation:emblemPulse 3.2s infinite;}
.pre-names{margin:0;}
.pre-names .fleur{font-size:clamp(2.2rem,10vw,3.4rem); color:#fff;}
.pre-names .heart{font-size:clamp(1.2rem,6vw,1.8rem); vertical-align:middle; margin:0 .18em;}
.load-bar{width:min(72vw,320px); height:7px; border:1px solid rgba(201,162,39,.55); border-radius:99px; overflow:hidden; background:rgba(255,255,255,.06);}
#load-fill{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--fire),var(--gold)); transition:width .35s;}
#load-status{color:var(--ice); font-size:.85rem; letter-spacing:.12em;}
#enter-btn{border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--gold-light);}
#enter-btn[disabled]{opacity:.4;}
#enter-btn .seal{width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.1rem;
  background:radial-gradient(circle at 35% 30%, #a31621, #5e0b0b 60%, #3d0505);
  box-shadow:0 6px 24px rgba(0,0,0,.7), inset 0 2px 6px rgba(255,255,255,.25), inset 0 -6px 14px rgba(0,0,0,.6);}
#enter-btn:not([disabled]) .seal{animation:sealPulse 2s infinite;}
.seal-label{color:var(--gold-light);font-size:.85rem; letter-spacing:.14em;}

/* ═══ PORTÕES ═══ */
#gates{position:fixed; inset:0; z-index:1100; pointer-events:none;}
.gate{position:absolute; top:0; bottom:0; width:50.5%; display:flex; align-items:center; justify-content:center;
  font-size:22vmin; transition:transform 1.5s cubic-bezier(.77,0,.18,1); text-shadow:0 0 40px rgba(0,0,0,.8);}
.gate-left{left:0; background:linear-gradient(90deg,#000,#200808 70%,#3d0a0a); border-right:2px solid var(--gold);}
.gate-right{right:0; background:linear-gradient(270deg,#000,#0a141c 70%,#1d2b36); border-left:2px solid var(--ice);}
#gates.open .gate-left{transform:translateX(-101%);}
#gates.open .gate-right{transform:translateX(101%);}

/* ═══ CONTROLES FIXOS ═══ */
#house-toggle,#music-toggle{position:fixed; z-index:950; top:12px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(201,162,39,.6); background:rgba(6,7,10,.72); color:var(--gold-light); font-size:1.15rem;}
#house-toggle{left:12px;} #music-toggle{right:12px;}
#dots{position:fixed; z-index:950; right:8px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px;}
#dots button{width:38px; height:38px; border-radius:50%; border:1px solid rgba(201,162,39,.5);
  background:rgba(6,7,10,.66); font-size:1rem; transition:all .3s; opacity:.75;}
#dots button.active{opacity:1; border-color:var(--gold-light); box-shadow:0 0 14px var(--accent-glow); transform:scale(1.12);}

/* ═══ BOTÕES ═══ */
.btn-gold{background:linear-gradient(180deg,var(--gold-light),var(--gold) 60%,#a17f16); color:#191204;
  border:1px solid #6b5210; font-family:'Eagle Lake',serif; letter-spacing:.08em;}
.btn-ice{background:rgba(29,43,54,.6); color:var(--ice); border:1px solid rgba(159,195,216,.6); font-family:'Eagle Lake',serif;}

/* ═══ REVEAL ═══ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:none;}

/* ═══ ANIMAÇÕES ═══ */
@keyframes emblemPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes sealPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,201,106,0)}50%{box-shadow:0 0 26px 6px rgba(232,201,106,.4)}}
@keyframes heartBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}24%{transform:scale(1.06)}36%{transform:scale(1.16)}48%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .kb-a,.kb-b,.trumpet svg,.names .heart,#emblem{animation:none !important;}
}
@media (min-width:768px){ .intro{max-width:640px;} .summon p{max-width:640px;} }