/* ═══════════════════════════════════════════════════════════════
   TAVERN ECLIPSE - cinematic walkthrough landing page
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#0b0603;
  --wood-1:#2b1a0d;
  --wood-2:#190e06;
  --wood-3:#120903;
  --brass:#b98f52;
  --brass-dim:rgba(185,143,82,.38);
  --brass-hi:#e6c37c;
  --brass-dark:#8a5f1c;
  --brass-light:#e8c06a;
  --brass-glint:#f7dfa4;
  --gold:#f0d493;
  --parch:#d8c49c;
  --parch-2:#c9b184;
  --parch-light:#f3e7c8;
  --parch-dark:#d3ba8b;
  --ink:#2e1e0f;
  --ember:#ff9a3c;
  --ember-deep:#ff6a1f;
  --crimson:#c8452c;
  --text:#ecdcb8;
  --muted:#b39c75;
  --ff-display:'Cinzel Decorative',serif;
  --ff-head:'Cinzel',serif;
  --ff-body:'EB Garamond',Georgia,serif;
  --nav-h:68px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M2 46V16Q2 2 16 2h30' fill='none' stroke='%23b98f52' stroke-width='2.5'/%3E%3Cpath d='M9 46V18q0-9 9-9h28' fill='none' stroke='%23b98f52' stroke-width='1' opacity='.5'/%3E%3Ccircle cx='8' cy='8' r='2.6' fill='%23d8b06a'/%3E%3C/svg%3E");
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  background:var(--bg);
  scrollbar-width:none;
}
html::-webkit-scrollbar{display:none}
html.modal-open{overflow:hidden}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:18px;
  line-height:1.55;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden;height:100vh}

img{-webkit-user-drag:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

#scrollspace{width:1px}

/* ─────────────── LOADER ─────────────── */
#loader{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%, #170b06 0%, #0b0502 55%, #050201 100%);
  transition:opacity 1s ease .15s, visibility 1s .15s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-eclipse{width:150px;height:150px}
.loader-corona{opacity:.25;transition:opacity .5s;transform-origin:center;animation:coronaPulse 3.2s ease-in-out infinite}
@keyframes coronaPulse{0%,100%{transform:scale(.97)}50%{transform:scale(1.03)}}
.loader-ring{transition:stroke-dashoffset .45s ease;filter:drop-shadow(0 0 6px rgba(255,110,40,.8))}
.loader-title{
  font-family:var(--ff-display);font-weight:900;letter-spacing:.3em;
  font-size:20px;color:var(--gold);margin-top:22px;text-indent:.3em;
}
.loader-text{font-style:italic;color:var(--muted);margin-top:10px;font-size:16px}

/* ─────────────── STAGE / SCENES ─────────────── */
#stage{
  position:fixed;inset:0;z-index:1;
  overflow:hidden;
  perspective:1200px;
  background:var(--bg);
}
.scene{
  position:absolute;inset:0;
  visibility:hidden;
  opacity:0;
  will-change:transform,opacity;
  transform-style:preserve-3d;
}
.scene .zoom{
  position:absolute;inset:0;
  transform-origin:0 0;
  will-change:transform;
}
.scene img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  display:block;
}

/* ─────────────── ATMOSPHERE OVERLAYS ─────────────── */
#fx{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  mix-blend-mode:screen;
}
#vignette{
  position:fixed;inset:0;z-index:4;pointer-events:none;
  background:
    radial-gradient(115% 90% at 50% 42%, rgba(0,0,0,0) 42%, rgba(6,2,0,.42) 78%, rgba(4,1,0,.78) 100%);
  opacity:var(--vig,1);
}
#grain{
  position:fixed;inset:-40px;z-index:5;pointer-events:none;
  background-image:var(--noise);
  opacity:.05;
  animation:grainShift .9s steps(2) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  50%{transform:translate(14px,-9px)}
  100%{transform:translate(-11px,6px)}
}

/* ─────────────── UI COMMON ─────────────── */
.ui{
  position:fixed;inset:0;z-index:10;
  pointer-events:none;
  visibility:hidden;
}
.ui.visible{visibility:visible}
.pe{pointer-events:auto}

/* staggered entrances */
.ui [data-stg]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease, transform .9s cubic-bezier(.22,.9,.3,1);
  transition-delay:calc(var(--d,0)*1ms);
}
.ui.is-in [data-stg]{opacity:1;transform:translateY(0)}
.ui [data-stg="0"]{--d:0}
.ui [data-stg="1"]{--d:130}
.ui [data-stg="2"]{--d:260}
.ui [data-stg="3"]{--d:390}
.ui [data-stg="4"]{--d:520}
.ui [data-stg="5"]{--d:650}

.scene-head{position:absolute;top:calc(var(--nav-h) + clamp(20px,4vh,52px));left:clamp(24px,6vw,96px);max-width:560px}
.scene-head.center{left:50%;transform:translateX(-50%);text-align:center;width:max-content;max-width:92vw}
.scene-head.center[data-stg]{transform:translateX(-50%) translateY(26px)}
.ui.is-in .scene-head.center[data-stg]{transform:translateX(-50%) translateY(0)}
.kicker{
  font-style:italic;color:var(--muted);font-size:clamp(15px,1.5vw,18px);
  margin-bottom:8px;text-shadow:0 2px 8px #000;
}
.scene-head h2{
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(28px,3.6vw,46px);
  letter-spacing:.1em;color:var(--gold);
  text-shadow:0 2px 6px rgba(0,0,0,.9), 0 0 34px rgba(255,150,60,.25);
}
.scene-head h2::after{
  content:"";display:block;height:10px;margin-top:10px;width:min(300px,60%);
  background:
    radial-gradient(circle at 6px 5px, var(--brass-hi) 2.6px, transparent 3px),
    linear-gradient(90deg, var(--brass) 0%, rgba(185,143,82,0) 100%);
  background-size:100% 100%, 100% 1.5px;
  background-position:0 0, 0 4.5px;
  background-repeat:no-repeat;
}
.scene-head.center h2::after{
  margin-inline:auto;
  background:
    radial-gradient(circle at 50% 5px, var(--brass-hi) 2.6px, transparent 3px),
    linear-gradient(90deg, rgba(185,143,82,0), var(--brass), rgba(185,143,82,0));
  background-size:100% 100%, 100% 1.5px;
  background-position:0 0, 0 4.5px;
  background-repeat:no-repeat;
}

/* ─────────────── PANELS (carved wood + brass - from the old build) ─────────────── */
.panel{
  position:relative;
  background:
    linear-gradient(160deg, rgba(48,30,15,.55), rgba(20,11,5,.4) 60%),
    linear-gradient(180deg,#2e1c0e 0%,#1c1007 55%,#140a04 100%);
  border:1px solid var(--brass-dim);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,220,160,.09),
    inset 0 -14px 30px rgba(0,0,0,.5),
    0 14px 44px rgba(0,0,0,.65);
}
.panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--noise);opacity:.07;
}
.c-tl,.c-tr,.c-bl,.c-br{
  position:absolute;width:26px;height:26px;pointer-events:none;
  background:var(--corner) no-repeat center/contain;z-index:2;
}
.c-tl{top:5px;left:5px}
.c-tr{top:5px;right:5px;transform:rotate(90deg)}
.c-br{bottom:5px;right:5px;transform:rotate(180deg)}
.c-bl{bottom:5px;left:5px;transform:rotate(270deg)}

/* small caps eyebrow (assets style) */
.eyebrow{
  font-family:var(--ff-head);font-size:12px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--brass-light);
  text-shadow:0 0 14px rgba(255,122,47,.35), 0 2px 4px rgba(0,0,0,.8);
}

/* ─────────────── BUTTONS (forged brass · carved oak · parchment) ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--ff-head);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:14px;text-decoration:none;white-space:nowrap;cursor:pointer;
  padding:13px 26px;
  border-radius:6px;
  transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn:active{transform:translateY(1px) scale(.99)}

.btn-brass{
  color:#2a1a08;
  background:linear-gradient(180deg, var(--brass-glint) 0%, var(--brass-light) 18%, #c9973b 52%, var(--brass-dark) 100%);
  border:1px solid #6e4c14;
  box-shadow:
    inset 0 1px 0 rgba(255,245,214,.8),
    inset 0 -2px 3px rgba(90,55,10,.55),
    0 4px 14px rgba(0,0,0,.55);
  text-shadow:0 1px 0 rgba(255,240,200,.55);
}
.btn-brass:hover,.btn-brass:focus-visible{
  filter:brightness(1.09);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,245,214,.8),
    inset 0 -2px 3px rgba(90,55,10,.55),
    0 6px 20px rgba(0,0,0,.6),
    0 0 26px rgba(255,150,60,.45);
}

.btn-oak{
  color:var(--parch);
  background:linear-gradient(180deg,#56381e 0%,#3a2413 55%,#2a1a0c 100%);
  border:1px solid var(--brass-dark);
  box-shadow:
    inset 0 1px 0 rgba(214,168,96,.35),
    inset 0 -2px 4px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.55);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.btn-oak:hover,.btn-oak:focus-visible{
  filter:brightness(1.18);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(214,168,96,.5),
    inset 0 -2px 4px rgba(0,0,0,.6),
    0 6px 18px rgba(0,0,0,.6),
    0 0 22px rgba(201,151,59,.35);
}

.btn-parch{
  color:#201209;
  background:linear-gradient(180deg,var(--parch-light),var(--parch-dark));
  border:1px solid #a9884f;
  box-shadow:
    inset 0 1px 0 rgba(255,250,230,.9),
    inset 0 -2px 3px rgba(140,105,55,.45),
    0 3px 10px rgba(0,0,0,.4);
}
.btn-parch:hover,.btn-parch:focus-visible{
  filter:brightness(1.05);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,250,230,.9),
    inset 0 -2px 3px rgba(140,105,55,.45),
    0 6px 16px rgba(0,0,0,.5),
    0 0 18px rgba(232,192,106,.35);
}

.btn-lg{font-size:15.5px;padding:16px 36px}
.btn-sm{font-size:11.5px;padding:9px 18px;letter-spacing:.2em}

.btn-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.btn-row.tight{gap:12px;margin-top:4px}

/* ─────────────── GHOST LINKS ─────────────── */
.ghost-links{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  margin-top:4px;
}
.ghost-link{
  font-family:var(--ff-head);font-size:12.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass-light);text-decoration:none;
  border-bottom:1px solid rgba(232,192,106,.35);
  padding:.2em .1em;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
  transition:color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
.ghost-link:hover,.ghost-link:focus-visible{
  color:var(--brass-glint);border-color:var(--brass-light);
  text-shadow:0 0 16px rgba(255,180,94,.6);
}
.ghost-sep{color:var(--brass-dark);font-size:11px}

/* ─────────────── SOCIAL ICONS (small round) ─────────────── */
.social-row{display:flex;gap:14px;justify-content:center}
.social{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  color:var(--brass-light);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,225,160,.16), transparent 62%),
    linear-gradient(180deg,#4a2f18,#241408);
  border:1px solid var(--brass-dark);
  box-shadow:inset 0 1px 0 rgba(230,190,120,.3), 0 4px 12px rgba(0,0,0,.55);
  transition:transform .18s ease, box-shadow .25s ease, color .2s ease;
}
.social svg{width:20px;height:20px;fill:currentColor}
.social:hover,.social:focus-visible{
  color:var(--brass-glint);
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(230,190,120,.4),
    0 8px 18px rgba(0,0,0,.6),
    0 0 22px rgba(255,150,60,.4);
}

/* ─────────────── TOP NAV BAR (scenes 2 → 6) ─────────────── */
#siteNav{
  position:fixed;inset:0 0 auto 0;z-index:24;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--nav-h);
  padding-inline:clamp(16px,4vw,48px);
  background:linear-gradient(180deg, rgba(26,15,8,.94), rgba(16,9,5,.86));
  backdrop-filter:blur(8px);
  box-shadow:0 2px 0 rgba(185,143,82,.3), 0 10px 30px rgba(0,0,0,.55);
  visibility:hidden;
  opacity:0;transform:translateY(-100%);
  transition:opacity .6s ease, transform .6s ease, visibility .6s;
}
#siteNav.visible{visibility:visible;opacity:1;transform:none}

.brand{display:inline-flex;align-items:center;gap:10px}
.brand-eclipse{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(255,122,47,.55))}
.ec-body{fill:#130a06}
.ec-ring{fill:none;stroke:var(--ember-deep);stroke-width:2.4}
.ec-corona{fill:none;stroke:#ffb45e;stroke-width:.9;opacity:.55}
.brand-name{
  font-family:var(--ff-head);font-weight:700;font-size:16px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--parch-light);text-shadow:0 2px 6px rgba(0,0,0,.8);
}
.brand-name em{font-style:normal;color:var(--brass-light)}
.brand:hover .brand-name{color:var(--brass-glint)}

.nav-links{display:flex;gap:clamp(16px,2.4vw,36px)}
.nav-links button{
  position:relative;
  font-family:var(--ff-head);font-size:13px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--parch);padding:.35em 0;
  text-shadow:0 2px 6px rgba(0,0,0,.85);
  transition:color .2s ease;
}
.nav-links button::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--brass),var(--brass-light));
  box-shadow:0 0 10px rgba(232,192,106,.55);
  transition:right .25s ease;
}
.nav-links button:hover,.nav-links button:focus-visible,.nav-links button.active{color:var(--brass-light)}
.nav-links button:hover::after,.nav-links button:focus-visible::after,.nav-links button.active::after{right:0}

.nav-actions{display:flex;align-items:center;gap:14px}

.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:9px;
  background:linear-gradient(180deg,#4a2f18,#241408);
  border:1px solid var(--brass-dark);border-radius:6px;
}
.nav-burger span{height:2px;background:var(--brass-light);border-radius:2px;transition:transform .25s ease, opacity .2s ease}
#siteNav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#siteNav.open .nav-burger span:nth-child(2){opacity:0}
#siteNav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─────────────── SCENE 1 - HERO ─────────────── */
.ui-hero .hero-center{
  position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);
  text-align:center;width:min(680px,92vw);
  padding-top:12.4em; /* pushes content below the baked-in door art (was a <br> stack) */
}

/* handwritten-style note above the two paths */
.hand-note{
  font-style:italic;
  font-size:clamp(17.5px,1.9vw,22px);line-height:1.45;
  color:var(--parch);
  margin:0 auto 28px;max-width:440px;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 28px rgba(0,0,0,.75);
}
.ui-hero .social-row{margin-top:26px}

/* mouse-shaped scroll cue (repeated on every scene except the last) */
.scroll-cue{
  position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));
  width:26px;height:42px;
  border:2px solid rgba(232,192,106,.65);
  border-radius:14px;
  box-shadow:0 0 14px rgba(0,0,0,.6), inset 0 0 8px rgba(0,0,0,.5);
  transition:opacity .6s ease;
}
.scroll-cue[data-stg]{transform:translateX(-50%) translateY(26px)}
.ui.is-in .scroll-cue[data-stg]{transform:translateX(-50%) translateY(0)}
.scroll-cue.gone{opacity:0!important;pointer-events:none}
.scroll-cue span{
  position:absolute;left:50%;top:7px;
  width:4px;height:8px;margin-left:-2px;border-radius:2px;
  background:var(--brass-light);
  box-shadow:0 0 8px rgba(232,192,106,.8);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%,100%{transform:translateY(0);opacity:1}
  70%{transform:translateY(14px);opacity:0}
  85%{transform:translateY(0);opacity:0}
}

/* ─────────────── SCENE 2 - TAVERN ECLIPSE (ABOUT) ─────────────── */
.hall-block{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  text-align:center;
  width:min(820px,92vw);
  padding-top:18.6em; /* pushes content below the baked-in hall art (was a <br> stack) */
}
.hall-title{
  font-family:var(--ff-head);font-weight:900;
  font-size:clamp(38px,6vw,74px);line-height:1.05;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--parch-light);
  text-shadow:
    0 0 32px rgba(255,122,47,.38),
    0 0 8px rgba(255,180,94,.3),
    0 4px 14px rgba(0,0,0,.9);
  margin-top:10px;
}
.hall-lead{
  margin:18px auto 0;max-width:56ch;
  font-size:clamp(16.5px,1.8vw,20px);
  color:#f1e3bf;
  text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.6);
}
.stat-chips{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.stat-chip{
  min-width:88px;padding:12px 16px 10px;text-align:center;
  color:var(--ink);
  background:
    var(--noise),
    radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.5), rgba(255,246,220,0) 60%),
    linear-gradient(172deg,#dcc89f 0%,#cbb283 55%,#b89e6e 100%);
  background-blend-mode:overlay,normal,normal;
  clip-path:polygon(4% 2%,96% 0,100% 10%,99% 92%,94% 100%,5% 98%,0 90%,2% 8%);
  box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 0 20px rgba(90,60,20,.26);
}
.stat-chip:nth-child(odd){transform:rotate(-1.4deg)}
.stat-chip:nth-child(even){transform:rotate(1.2deg)}
.chip-name{
  display:block;font-family:var(--ff-head);font-weight:700;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#54371a;
}
.chip-val{
  display:block;font-family:var(--ff-head);font-weight:800;
  font-size:27px;line-height:1.15;color:#3a2410;margin-top:2px;
  text-shadow:0 1px 0 rgba(255,240,210,.55);
}

/* second space for text - a quiet word from the corner */
.hall-aside{
  position:absolute;right:clamp(24px,6vw,96px);bottom:clamp(96px,14vh,150px);
  max-width:340px;text-align:right;
  font-style:italic;
  font-size:clamp(14.5px,1.4vw,17.5px);
  color:var(--muted);
  text-shadow:0 2px 8px #000, 0 0 22px rgba(0,0,0,.7);
}

/* ─────────────── SCENE 3 - THE WORLD (carved-wood cards → modals) ─────────────── */
.lore-row{
  position:absolute;left:50%;bottom:clamp(84px,13vh,140px);
  transform:translateX(-50%);
  display:flex;gap:clamp(14px,2vw,26px);
  justify-content:center;
  width:min(1120px,94vw);
}
.world-card{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  padding:26px 22px 24px;text-align:center;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card-icon{
  width:56px;height:56px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--brass-dim);transform:rotate(45deg);
  background:linear-gradient(135deg,#33200f,#170c05);
  box-shadow:inset 0 0 12px rgba(0,0,0,.7), 0 0 18px rgba(255,140,50,.14);
}
.card-icon svg{
  width:28px;height:28px;transform:rotate(-45deg);
  fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,170,80,.45));
}
.world-card h3{
  font-family:var(--ff-head);font-weight:700;font-size:clamp(16px,1.5vw,20px);
  letter-spacing:.08em;color:var(--gold);margin-bottom:8px;
}
.world-card p{font-size:clamp(14px,1.3vw,16.5px);color:var(--muted);line-height:1.5}
.world-cta{
  margin-top:14px;
  display:inline-block;padding:9px 18px;
  font-family:var(--ff-head);font-size:11.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--parch);
  background:linear-gradient(180deg, rgba(32,19,9,.82), rgba(16,9,4,.86));
  border:1px solid var(--brass-dim);
  transition:color .2s ease, border-color .25s ease, box-shadow .25s ease;
}
.ui.is-in .world-card[data-stg]:hover,.ui.is-in .world-card[data-stg]:focus-visible{
  transform:translateY(-8px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,220,160,.09),
    inset 0 -14px 30px rgba(0,0,0,.5),
    0 22px 50px rgba(0,0,0,.7),
    0 0 30px rgba(255,140,50,.2);
  z-index:3;
}
.world-card:hover .world-cta,.world-card:focus-visible .world-cta{
  color:var(--gold);border-color:var(--brass);
  box-shadow:0 0 18px rgba(255,150,60,.25);
}

/* ─────────────── SCENE 4 - CARD DOCK (oak frame · parchment heart) ─────────────── */
.card-dock{
  position:absolute;left:50%;bottom:clamp(84px,11vh,120px);transform:translateX(-50%);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,20px);align-items:end;
  width:min(1080px,94vw);
}
.card{
  position:relative;border-radius:8px;padding:7px;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.14) 0 6px, rgba(255,205,130,.05) 6px 11px),
    linear-gradient(180deg,#55371d,#241408);
  border:1px solid #170d06;
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.45);
}
.card-inner{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:15px 16px 17px;border-radius:5px;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.55), transparent 55%),
    radial-gradient(130% 110% at 50% 110%, rgba(122,84,40,.28), transparent 55%),
    repeating-linear-gradient(0deg, rgba(120,85,40,.05) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--parch-light) 0%, #ead9b0 48%, var(--parch-dark) 100%);
  border:1px solid rgba(122,84,40,.5);
  box-shadow:inset 0 0 26px rgba(110,74,32,.3);
}

/* forged brass corner brackets */
.card::before,.card::after,
.card-inner::before,.card-inner::after{
  content:"";position:absolute;width:20px;height:20px;z-index:3;pointer-events:none;
  background-image:radial-gradient(circle at var(--rivet,25% 25%), var(--brass-glint) 0 2px, var(--brass) 2.6px, transparent 3.6px);
}
.card::before{top:3px;left:3px;border-top:3px solid var(--brass);border-left:3px solid var(--brass);border-top-left-radius:8px;--rivet:30% 30%}
.card::after{bottom:3px;right:3px;border-bottom:3px solid var(--brass-dark);border-right:3px solid var(--brass-dark);border-bottom-right-radius:8px;--rivet:70% 70%}
.card-inner::before{top:-6px;right:-6px;border-top:3px solid var(--brass);border-right:3px solid var(--brass);border-top-right-radius:8px;--rivet:70% 30%}
.card-inner::after{bottom:-6px;left:-6px;border-bottom:3px solid var(--brass-dark);border-left:3px solid var(--brass-dark);border-bottom-left-radius:8px;--rivet:30% 70%}

.card-title{
  font-family:var(--ff-head);font-weight:700;font-size:16px;
  letter-spacing:.1em;text-transform:uppercase;color:#3a2410;
}
.card-title::after{
  content:"";display:block;width:54px;height:2px;margin-top:6px;
  background:linear-gradient(90deg,var(--brass-dark),transparent);
}
.card-inner p{font-size:14.5px;line-height:1.45;color:#4a341e}
.card-inner .btn{align-self:flex-start;margin-top:2px}

/* decorative tilts - applied once the stagger has landed */
.ui.is-in .card--tilt-a[data-stg]{transform:rotate(-1.4deg)}
.ui.is-in .card--tilt-b[data-stg]{transform:rotate(.9deg) translateY(6px)}
.ui.is-in .card--tilt-c[data-stg]{transform:rotate(-.7deg)}
.ui.is-in .card--tilt-d[data-stg]{transform:rotate(1.3deg) translateY(4px)}
.ui.is-in .card[data-stg]:hover{
  transform:rotate(0deg) translateY(-10px);
  box-shadow:0 30px 50px rgba(0,0,0,.65), 0 0 34px rgba(255,140,50,.2);
  z-index:3;
}

/* media sockets - placeholders, never baked media */
.media-socket{
  position:relative;aspect-ratio:16/9;
  display:grid;place-items:center;border-radius:4px;
  background:
    repeating-linear-gradient(45deg, rgba(201,151,59,.12) 0 10px, transparent 10px 20px),
    linear-gradient(180deg,#2d1c0f,#1c1007);
  border:1px dashed rgba(201,151,59,.55);
  box-shadow:inset 0 0 22px rgba(0,0,0,.65);
  overflow:hidden;
}
.socket-glyph{
  width:30px;height:30px;position:relative;
  border:2px solid rgba(232,192,106,.7);border-radius:50%;
  box-shadow:0 0 16px rgba(232,192,106,.25), inset 0 0 10px rgba(0,0,0,.5);
}
.socket-glyph::before{
  content:"";position:absolute;inset:7px;border-radius:3px;
  border:2px solid rgba(232,192,106,.55);
}
.socket-glyph--play::before{
  inset:0;border:none;border-radius:0;
  clip-path:polygon(38% 28%,74% 50%,38% 72%);
  background:rgba(232,192,106,.75);
}
.socket-tag{
  position:absolute;right:8px;bottom:6px;
  font-family:var(--ff-head);font-size:9px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(232,192,106,.8);
}

/* sockets holding real media (img / gif / video) */
.media-socket img,.media-socket video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.media-socket.has-media{
  border:1px solid rgba(90,60,20,.5);
}
.media-socket.has-media .socket-tag{
  color:#f3e0b0;background:rgba(20,10,4,.55);
  padding:2px 7px;border-radius:3px;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.socket-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}

/* ─────────────── SCENE 5 - FEATURES (wanted posters → modals) ─────────────── */
.poster-row{
  position:absolute;left:50%;bottom:clamp(84px,12vh,130px);
  transform:translateX(-50%);
  display:flex;justify-content:center;align-items:stretch;
  gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;
  width:min(1040px,94vw);
}
.poster{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  width:clamp(150px,16vw,178px);
  padding:22px 14px 14px;
  cursor:pointer;text-align:center;
  color:var(--ink);font-family:var(--ff-body);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,246,220,.6), transparent 60%),
    radial-gradient(140% 90% at 50% 115%, rgba(112,74,32,.35), transparent 60%),
    linear-gradient(170deg, var(--parch-light), #ead9b0 55%, var(--parch-dark));
  border:1px solid rgba(110,74,32,.6);
  border-radius:3px 3px 5px 5px;
  box-shadow:
    inset 0 0 20px rgba(110,74,32,.3),
    0 14px 26px rgba(0,0,0,.55);
  clip-path:polygon(0 0,100% 0,100% 96%,92% 100%,8% 99%,0 96%);
  transition:transform .25s ease, box-shadow .25s ease;
}
.poster-nail{
  position:absolute;top:7px;left:50%;
  width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #f2d694, #8a5f1c 58%, #3c2708);
  box-shadow:0 2px 3px rgba(0,0,0,.55);
}
.poster-sun{
  width:34px;height:34px;margin-top:2px;border-radius:50%;
  background:
    radial-gradient(circle, #7d1d16 0 32%, transparent 33%),
    repeating-conic-gradient(from 0deg, #a4562b 0deg 12deg, transparent 12deg 30deg);
  -webkit-mask:radial-gradient(circle, #000 0 62%, transparent 63%);
          mask:radial-gradient(circle, #000 0 62%, transparent 63%);
  opacity:.85;
}
.poster-title{
  font-family:var(--ff-head);font-weight:700;
  font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:#3a2410;
}
.poster-copy{font-style:italic;font-size:13px;line-height:1.4;color:#55402a}
.poster-cta{
  margin-top:6px;
  font-family:var(--ff-head);font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass-dark);
  border-bottom:1px solid rgba(138,95,28,.5);padding-bottom:2px;
}
.ui.is-in .poster[data-stg]:nth-child(odd){transform:rotate(-1.6deg)}
.ui.is-in .poster[data-stg]:nth-child(even){transform:rotate(1.4deg) translateY(5px)}
.ui.is-in .poster[data-stg]:hover,.ui.is-in .poster[data-stg]:focus-visible{
  transform:rotate(0deg) translateY(-8px);
  box-shadow:
    inset 0 0 20px rgba(110,74,32,.3),
    0 22px 40px rgba(0,0,0,.65),
    0 0 30px rgba(255,140,50,.25);
  z-index:3;
}

/* ─────────────── SCENE 6 - FINALE (soft panel) ─────────────── */
.final-panel{
  position:absolute;left:50%;bottom:clamp(26px,8vh,84px);transform:translateX(-50%);
  width:min(660px,94vw);
  padding:clamp(24px,3.4vh,38px) clamp(20px,4vw,48px) 20px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;
  background:linear-gradient(180deg, rgba(32,19,10,.72), rgba(14,8,4,.8));
  border:1px solid rgba(185,143,82,.28);
  border-radius:14px;
  backdrop-filter:blur(3px);
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,160,.08);
}
.final-panel[data-stg]{transform:translateX(-50%) translateY(26px)}
.ui.is-in .final-panel[data-stg]{transform:translateX(-50%) translateY(0)}
.final-line{
  font-style:italic;
  font-size:clamp(17px,1.8vw,20px);line-height:1.45;
  color:var(--text);
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.final-line em{color:var(--gold)}
.final-panel .social-row{margin-top:2px}
.final-foot{
  margin-top:6px;font-size:13px;color:rgba(179,156,117,.75);
  border-top:1px solid rgba(185,143,82,.22);padding-top:12px;width:100%;
}

/* ─────────────── HUD ─────────────── */
#hud{
  position:fixed;right:clamp(12px,2.2vw,30px);top:50%;transform:translateY(-50%);
  z-index:20;display:flex;flex-direction:column;gap:20px;
  opacity:0;transition:opacity .8s ease;pointer-events:none;
}
#hud.visible{opacity:1;pointer-events:auto}
.hud-stop{display:flex;align-items:center;justify-content:center;padding:4px}
.hud-dot{
  width:11px;height:11px;flex:none;
  transform:rotate(45deg);
  border:1.5px solid var(--brass);
  background:rgba(20,11,5,.7);
  transition:background .4s, box-shadow .4s, border-color .4s;
}
.hud-stop:hover .hud-dot{border-color:var(--gold)}
.hud-stop.active .hud-dot{
  background:var(--ember);border-color:var(--gold);
  box-shadow:0 0 12px 3px rgba(255,150,60,.55);
}

/* ─────────────── TOAST ─────────────── */
#toast{
  position:fixed;left:50%;bottom:clamp(20px,4vh,44px);transform:translate(-50%,16px);
  z-index:30;pointer-events:none;
  font-style:italic;font-size:15.5px;color:var(--ink);
  background:linear-gradient(175deg,#dcc89f,#c3aa7c);
  clip-path:polygon(2% 0,98% 2%,100% 90%,96% 100%,3% 98%,0 88%);
  padding:12px 26px;box-shadow:0 12px 30px rgba(0,0,0,.6);
  opacity:0;transition:opacity .4s, transform .4s;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ─────────────── MODAL - parchment scroll (paper style, from the old build) ─────────────── */
.modal-root{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  padding:max(4vh,20px) 4vw;
}
.modal-root[hidden]{display:none}

.modal-backdrop{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(60,25,8,.35), transparent 70%),
    rgba(6,3,2,.78);
  backdrop-filter:blur(4px);
  animation:fadeIn .28s ease both;
}

.modal{
  position:relative;width:min(680px,100%);max-height:min(86vh,860px);
  display:flex;color:var(--ink);
  background:
    var(--noise),
    radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.5), rgba(255,246,220,0) 55%),
    linear-gradient(168deg,#e0cda6 0%,#cbb283 55%,#b49a6a 100%);
  background-blend-mode:overlay,normal,normal;
  clip-path:polygon(1.2% 0,98.8% .6%,100% 3%,99.6% 97%,98% 100%,2.4% 99.4%,0 96.6%,.5% 2.4%);
  box-shadow:0 30px 80px rgba(0,0,0,.75), inset 0 0 40px rgba(90,60,20,.3);
  animation:modalIn .34s cubic-bezier(.2,.9,.3,1.15) both;
}
.modal-scroll{
  flex:1;overflow-y:auto;min-width:0;
  padding:clamp(20px,3.2vh,30px) clamp(20px,3.4vw,34px) clamp(22px,3.4vh,32px);
  scrollbar-width:thin;scrollbar-color:rgba(122,84,40,.55) transparent;
}
.modal-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  border-bottom:2px solid rgba(122,84,40,.4);
  padding-bottom:12px;
}
.modal-kicker{
  font-family:var(--ff-head);font-size:11px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:#7a5426;
}
.modal-title{
  font-family:var(--ff-head);font-weight:800;font-size:clamp(20px,2.4vw,26px);
  letter-spacing:.08em;text-transform:uppercase;color:#3a2410;margin-top:2px;
}
.modal-close{
  flex:none;width:38px;height:38px;
  display:grid;place-items:center;font-size:15px;border-radius:50%;
  color:var(--parch);
  background:linear-gradient(180deg,#3f2712,#1c1007);
  border:1px solid var(--brass-dim);
  box-shadow:inset 0 1px 0 rgba(255,220,160,.2), 0 3px 8px rgba(0,0,0,.4);
  transition:transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.modal-close:hover,.modal-close:focus-visible{
  color:var(--gold);transform:rotate(90deg);
  box-shadow:inset 0 1px 0 rgba(255,220,160,.3), 0 4px 12px rgba(0,0,0,.5), 0 0 16px rgba(255,150,60,.35);
}

.modal-body{display:flex;flex-direction:column;gap:15px;padding-top:16px}
.modal-body p{color:#4a341e;font-size:16.5px}
.modal-body .divider{
  height:2px;border:none;
  background:linear-gradient(90deg,transparent,rgba(138,95,28,.55),transparent);
  margin-block:4px;
}
.modal-body ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.modal-body li{padding-left:1.4em;position:relative;color:#4a341e;font-size:16px}
.modal-body li::before{
  content:"✦";position:absolute;left:.2em;top:.32em;
  color:var(--brass-dark);font-size:.8em;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{
  from{opacity:0;transform:translateY(34px) scale(.94) rotate(-.6deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
}

/* ─────────────── LIGHTBOX (gallery larger view) ─────────────── */
.gallery-thumb{cursor:pointer;transition:transform .2s ease, box-shadow .25s ease}
.gallery-thumb:hover,.gallery-thumb:focus-visible{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 10px 22px rgba(0,0,0,.5), 0 0 18px rgba(255,150,60,.35);
  z-index:2;
}

.lightbox-root{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:4vh clamp(56px,8vw,110px);
}
.lightbox-root[hidden]{display:none}
.lightbox-backdrop{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(60,25,8,.3), transparent 70%),
    rgba(4,2,1,.9);
  backdrop-filter:blur(6px);
  animation:fadeIn .25s ease both;
}
.lightbox{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:min(1100px,100%);
  animation:modalIn .3s cubic-bezier(.2,.9,.3,1.15) both;
}
.lightbox img{
  max-width:100%;max-height:76vh;display:block;
  border:1px solid var(--brass-dim);
  background:#0d0703;
  box-shadow:0 30px 80px rgba(0,0,0,.8), 0 0 40px rgba(255,140,50,.12);
}
.lightbox-caption{
  font-family:var(--ff-head);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass-light);text-shadow:0 2px 6px #000;
}
.lightbox-btn{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;font-size:16px;
  color:var(--parch);
  background:linear-gradient(180deg,#3f2712,#1c1007);
  border:1px solid var(--brass-dim);
  box-shadow:inset 0 1px 0 rgba(255,220,160,.2), 0 4px 10px rgba(0,0,0,.5);
  transition:transform .18s ease, box-shadow .25s ease, color .2s ease;
}
.lightbox-btn:hover,.lightbox-btn:focus-visible{
  color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,220,160,.3), 0 4px 12px rgba(0,0,0,.6), 0 0 18px rgba(255,150,60,.35);
}
.lightbox-close{position:absolute;top:clamp(12px,3vh,28px);right:clamp(12px,3vw,28px);z-index:2}
.lightbox-close:hover,.lightbox-close:focus-visible{transform:rotate(90deg)}
.lightbox-prev{position:absolute;left:clamp(8px,2vw,30px);top:50%;transform:translateY(-50%);z-index:2}
.lightbox-next{position:absolute;right:clamp(8px,2vw,30px);top:50%;transform:translateY(-50%);z-index:2}
.lightbox-prev:hover,.lightbox-prev:focus-visible{transform:translateY(-50%) scale(1.08)}
.lightbox-next:hover,.lightbox-next:focus-visible{transform:translateY(-50%) scale(1.08)}
@media (max-width:620px){
  .lightbox-root{padding:3vh 46px}
  .lightbox-btn{width:38px;height:38px;font-size:14px}
  .lightbox img{max-height:66vh}
}

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width:1080px){
  .card-dock{grid-template-columns:repeat(2,1fr);width:min(640px,94vw)}
  .lore-row{flex-wrap:wrap;width:min(640px,94vw)}
  .world-card{flex:1 1 44%;padding:18px 14px 16px}
  .card-icon{width:46px;height:46px}
  .card-icon svg{width:23px;height:23px}
}
@media (max-width:920px){
  body{font-size:16.5px}
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;gap:0;
    background:linear-gradient(180deg,rgba(26,15,8,.98),rgba(14,8,4,.98));
    border-bottom:1px solid rgba(201,151,59,.4);
    box-shadow:0 18px 30px rgba(0,0,0,.6);
    max-height:0;overflow:hidden;
    transition:max-height .35s ease;
  }
  #siteNav.open .nav-links{max-height:340px}
  .nav-links button{
    text-align:left;
    padding:.95em clamp(16px,4vw,48px);
    border-top:1px solid rgba(201,151,59,.14);
  }
  .nav-links button::after{display:none}
  .nav-burger{display:flex}

  #hud{
    right:auto;left:50%;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%);flex-direction:row;gap:16px;
  }
  .scroll-cue{bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .hall-aside{display:none}
  .card-dock{bottom:104px}
  .lore-row{bottom:110px}
  .poster-row{bottom:110px}
}
@media (max-width:620px){
  .scene-head{left:24px;right:24px}
  .ui-hero .hero-center{top:56%}
  .hand-note{max-width:86vw}
  .btn{padding:12px 18px;font-size:12.5px}
  .btn-lg{font-size:14px;padding:14px 24px}
  .social{width:40px;height:40px}
  .social svg{width:18px;height:18px}
  .nav-actions .btn{padding:8px 14px;font-size:10.5px}
  .brand-name{font-size:13px;letter-spacing:.1em}
  .brand-eclipse{width:24px;height:24px}

  .hall-block{width:92vw}
  .hall-title{font-size:clamp(30px,9vw,44px)}
  .stat-chip{min-width:72px;padding:10px 12px 8px}
  .chip-val{font-size:22px}

  .lore-row{gap:10px;bottom:104px}
  .world-card{padding:14px 10px 12px}
  .world-card p{display:none}
  .world-cta{margin-top:10px;padding:7px 12px;font-size:10px}

  .card-dock{grid-template-columns:repeat(2,1fr);gap:10px;width:94vw;bottom:96px}
  .card-inner{padding:10px 11px 12px;gap:7px}
  .card-inner p{display:none}
  .card-title{font-size:13px}

  .poster-row{gap:8px;bottom:104px}
  .poster{width:clamp(120px,29vw,150px);padding:18px 8px 10px}
  .poster-copy{display:none}
  .poster-sun{width:26px;height:26px}

  .final-panel{bottom:64px;gap:12px}
  .btn-row.tight .btn{padding:10px 14px;font-size:11px}

  .modal-scroll{padding:18px 16px 20px}
  .modal-title{font-size:19px}
  .socket-grid{grid-template-columns:repeat(2,1fr)}
}

/* ─────────────── REDUCED MOTION ─────────────── */
@media (prefers-reduced-motion:reduce){
  #fx,#grain{display:none}
  .scroll-cue span,.loader-corona{animation:none!important}
  .ui [data-stg]{transition-duration:.2s;transform:none}
  .modal,.modal-backdrop{animation:none}
}