:root {
  --ratio: 941 / 1672;
  --cream: #fff4dc;
  --brown: #4b2f20;
  --gold: #d4a75d;
  --night: #091329;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(238,205,145,.15), transparent 32%),
    linear-gradient(135deg, #080b13, #1a1722 45%, #0a111d);
  font-family: Georgia, "Times New Roman", serif;
}
button, img { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

/* Small Bootstrap utility fallback for offline opening */
.container-fluid{width:100%;margin:0 auto}.p-0{padding:0!important}.d-flex{display:flex!important}.d-grid{display:grid!important}.justify-content-between{justify-content:space-between!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.gap-2{gap:.5rem!important}.mb-0{margin-bottom:0!important}.mb-3{margin-bottom:1rem!important}.p-4{padding:1.5rem!important}.h4{font-size:1.5rem}.small{font-size:.875rem}.card{position:relative;display:flex;flex-direction:column}.card-body{flex:1 1 auto}.border-0{border:0!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.btn{display:inline-block;padding:.55rem .8rem;border:1px solid transparent;border-radius:.5rem;background:transparent;text-align:center;cursor:pointer}.btn-outline-secondary{color:#5f5047;border-color:#9e8f83;background:rgba(255,255,255,.35)}.btn-close{width:1em;height:1em;border:0;background:transparent;position:relative;cursor:pointer}.btn-close::before,.btn-close::after{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;background:#4c3b31}.btn-close::before{transform:rotate(45deg)}.btn-close::after{transform:rotate(-45deg)}

.app-shell { width: 100vw; height: 100svh; display: grid; place-items: center; padding: clamp(0px, 1.2vmin, 14px); }
.game-viewport {
  position: relative;
  width: min(calc(100vw - 2.4vmin), calc(100svh * 941 / 1672));
  height: min(calc(100svh - 2.4vmin), calc(100vw * 1672 / 941));
  aspect-ratio: var(--ratio);
  overflow: hidden;
  isolation: isolate;
  border-radius: 4.2% / 2.35%;
  background: #10182a;
  box-shadow: 0 28px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.06);
  container-type: inline-size;
}

/* INITIAL ASSET LOADER */
.loading-screen {
  position:absolute; inset:0; z-index:300; display:grid; place-items:center;
  padding:9%; overflow:hidden; opacity:1; visibility:visible;
  background:
    radial-gradient(circle at 50% 34%, rgba(228,177,90,.23), transparent 30%),
    linear-gradient(180deg, #0a1020 0%, #101a32 55%, #080d19 100%);
  transition:opacity .6s ease, visibility 0s linear .62s;
}
.loading-screen::before,
.loading-screen::after {
  content:""; position:absolute; inset:4%; border:1px solid rgba(231,195,124,.38);
  border-radius:5% / 3%; pointer-events:none;
}
.loading-screen::after { inset:5.1%; border-color:rgba(255,244,216,.13); }
.loading-screen.is-leaving { opacity:0; visibility:hidden; }
.loading-card {
  width:88%; display:flex; flex-direction:column; align-items:center; text-align:center;
  color:#f8e8c4; transform:translateY(-2%);
}
.loading-heart {
  display:grid; place-items:center; width:12cqw; aspect-ratio:1; margin-bottom:1.2cqh;
  color:#e7b45d; font-size:7cqw; line-height:1;
  filter:drop-shadow(0 0 1.2cqh rgba(231,180,93,.42));
  animation:loadingHeart 1.45s ease-in-out infinite;
}
.loading-logo { width:88%; height:auto; display:block; object-fit:contain; filter:drop-shadow(0 .35cqh .5cqh rgba(0,0,0,.38)); }
.loading-divider { width:72%; margin:2.2cqh 0 1.5cqh; display:flex; align-items:center; gap:3%; color:#d7a854; }
.loading-divider i { flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(221,178,95,.8), transparent); }
.loading-divider span { font-style:normal; font-size:2.4cqw; }
.loading-label { margin:0 0 1.2cqh; font-size:2.15cqw; letter-spacing:.12em; text-transform:uppercase; color:#f5e4bf; }
.loading-track {
  width:76%; height:1.05cqh; padding:.12cqh; overflow:hidden; border-radius:999px;
  border:1px solid rgba(233,198,129,.55); background:rgba(1,4,11,.58);
  box-shadow:inset 0 .16cqh .35cqh rgba(0,0,0,.52), 0 0 1cqh rgba(222,174,82,.12);
}
.loading-track span {
  display:block; width:0; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#9c6426,#e8bd68 58%,#fff0b2);
  box-shadow:0 0 .8cqh rgba(239,195,105,.54);
  transition:width .18s ease;
}
.loading-percent { margin-top:.8cqh; color:#d8bd88; font-size:1.85cqw; font-variant-numeric:tabular-nums; }
@keyframes loadingHeart { 0%,100%{transform:scale(.9);opacity:.72} 50%{transform:scale(1.08);opacity:1} }

.scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .65s ease, transform .8s cubic-bezier(.2,.72,.2,1), visibility 0s linear .7s;
  overflow: hidden;
}
.scene.is-active {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s;
}
.fill-layer, .screen-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.fill-layer { z-index: 0; }
.screen-frame { z-index: 50; object-fit: fill; }
.asset-button { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 20; transition: transform .15s ease, filter .15s ease; }
.asset-button img { width: 100%; height: auto; display: block; pointer-events: none; }
.asset-button:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.04); }
.asset-button:active { transform: translateY(1px) scale(.975); }
.asset-button:focus-visible { outline: 3px solid rgba(255,235,160,.95); outline-offset: 4px; border-radius: 14px; }

/* TITLE */
.title-logo { position:absolute; z-index:6; width:67%; height:33.5%; left:16.5%; top:2.8%; object-fit:fill; filter:drop-shadow(0 .3cqh .35cqh rgba(50,25,10,.15)); }
.title-sign { position:absolute; z-index:7; width:23.7%; height:18.5%; left:3.4%; top:55%; object-fit:fill; filter:drop-shadow(0 .6cqh .5cqh rgba(0,0,0,.25)); }
.title-couple { position:absolute; z-index:8; width:34%; height:21.8%; left:33%; top:56%; object-fit:fill; animation:titleIdle 4.2s ease-in-out infinite; filter:drop-shadow(0 .55cqh .32cqh rgba(30,20,10,.27)); }
.title-start { left: 17.8%; top: 81.1%; width: 64.4%; animation: promptPulse 2.3s ease-in-out infinite; }
.scene-title.is-ready { cursor:pointer; }
.title-actions { position:absolute; z-index:21; left:4.8%; right:4.8%; bottom:3%; height:8%; pointer-events:none; }
.title-actions .asset-button { width:34%; height:100%; pointer-events:auto; }
.title-actions .title-skip { position:absolute; left:0; bottom:0; }
.title-actions .asset-button img { width:100%; height:100%; object-fit:fill; }
.title-ornament { position: absolute; left: 38.5%; bottom: 2%; width: 23%; height: auto; pointer-events: none; }
.background-music { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.title-ambient { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.title-fx { position: absolute; width: 4.5%; animation: drift 7s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgba(255,215,140,.45)); }
.title-fx-1 { left: 8%; top: 9%; }
.title-fx-2 { right: 11%; top: 15%; animation-delay: -2s; }
.title-fx-3 { left: 44%; top: 4%; animation-delay: -4s; }
.title-fx-4 { right: 7%; top: 28%; animation-delay: -1s; }
.css-star { position:absolute; width:6px; aspect-ratio:1; background:#fff4b5; transform:rotate(45deg); box-shadow:0 0 12px #ffd778; animation:twinkle 2.1s ease-in-out infinite; }
.cs-1 { left:31%; top:5%; } .cs-2 { right:20%; top:7%; animation-delay:-.8s; } .cs-3 { left:55%; top:24%; animation-delay:-1.4s; }

/* PROLOGUE */
.scene-prologue::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to bottom, rgba(2,6,18,.08), transparent 24%, rgba(5,7,13,.08) 60%, rgba(3,4,8,.22)); }
.prologue-menu { width:10.5%; height:6.8%; left:2.4%; top:1.4%; z-index:25; }
.prologue-menu img { width:100%; height:100%; object-fit:fill; }
.prologue-logo { position:absolute; z-index:8; width:65%; height:10%; left:17.5%; top:13.7%; object-fit:fill; filter:drop-shadow(0 .25cqh .3cqh rgba(0,0,0,.32)); }
.prologue-lantern { position:absolute; z-index:7; width:8%; height:11%; top:19%; object-fit:contain; animation:lanternSway 4.5s ease-in-out infinite; transform-origin:50% 0; filter:drop-shadow(0 0 1.5cqh rgba(255,175,64,.38)); }
.lantern-left { left:3.2%; }
.lantern-right { right:3.2%; animation-delay:-2s; }
.prologue-couple { position:absolute; z-index:9; width:27%; height:18%; left:36.5%; top:40.8%; object-fit:fill; animation:coupleNightIdle 4.2s ease-in-out infinite; filter:drop-shadow(0 .45cqh .28cqh rgba(0,0,0,.48)); }
.prologue-dialogue { position:absolute; z-index:10; width:68%; height:24.8%; left:16%; top:59.5%; object-fit:fill; filter:drop-shadow(0 .75cqh .5cqh rgba(0,0,0,.38)); }
.prologue-begin { width:56%; height:7.4%; left:22%; top:86.3%; z-index:16; animation:buttonGlow 2.2s ease-in-out infinite; }
.prologue-begin img { width:100%; height:100%; object-fit:fill; }
.prologue-stars { position:absolute; inset:0; z-index:5; pointer-events:none; }
.night-fx { position:absolute; width:3%; animation:twinkle 2.4s ease-in-out infinite; filter:drop-shadow(0 0 8px rgba(255,208,103,.55)); }
.nf-1 { left:17%; top:4%; } .nf-2 { right:18%; top:4.5%; animation-delay:-.7s; } .nf-3 { left:62%; top:8%; animation-delay:-1.4s; } .nf-4 { right:8%; top:31%; animation-delay:-1.9s; }

.scene-curtain { position:absolute; z-index:90; inset:0; display:grid; place-items:center; visibility:hidden; opacity:0; background:#070a14; transition:opacity .36s ease, visibility 0s linear .4s; pointer-events:none; }
.scene-curtain span { color:#f49da4; font-size:12cqw; filter:drop-shadow(0 0 20px rgba(244,157,164,.55)); transform:scale(.75); transition:transform .45s ease; }
.scene-curtain.show { visibility:visible; opacity:1; transition-delay:0s; }
.scene-curtain.show span { transform:scale(1); }

/* Menu */
.quest-menu { position:absolute; z-index:110; inset:0; visibility:hidden; pointer-events:none; }
.quest-menu.is-open { visibility:visible; pointer-events:auto; }
.quest-menu-backdrop { position:absolute; inset:0; background:rgba(2,5,12,.64); opacity:0; transition:opacity .25s ease; }
.quest-menu-panel { position:absolute; top:0; left:0; bottom:0; width:min(82%, 390px); border-radius:0 22px 22px 0; color:#3e2a1e; background:linear-gradient(180deg,#fff8e9,#f4e2be); transform:translateX(-105%); transition:transform .3s cubic-bezier(.2,.75,.2,1); }
.quest-menu.is-open .quest-menu-backdrop { opacity:1; }
.quest-menu.is-open .quest-menu-panel { transform:translateX(0); }
.btn-wedding { color:#41291d; border:1px solid #b78642; background:linear-gradient(#fff3d1,#e9c982); box-shadow:inset 0 1px rgba(255,255,255,.75); }
.btn-wedding:hover { color:#2d1b12; background:linear-gradient(#fff8e6,#edcf8d); border-color:#9e6c2e; }
.wedding-modal { color:#40291d; border:2px solid #c49b59; border-radius:20px; background:linear-gradient(180deg,#fffaf0,#f3dfb9); box-shadow:0 20px 60px rgba(0,0,0,.4); }


@keyframes titleIdle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-.45cqh)} }
@keyframes coupleNightIdle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-.35cqh)} }
@keyframes promptPulse { 0%,100%{filter:brightness(1);transform:scale(1)} 50%{filter:brightness(1.13);transform:scale(1.018)} }
@keyframes drift { 0%{transform:translate(0,0) rotate(-7deg)} 100%{transform:translate(10px,18px) rotate(12deg)} }
@keyframes twinkle { 0%,100%{opacity:.35;transform:scale(.7) rotate(45deg)} 50%{opacity:1;transform:scale(1.25) rotate(45deg)} }
@keyframes lanternSway { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
@keyframes buttonGlow { 0%,100%{filter:drop-shadow(0 0 .6cqh rgba(255,194,90,.25))} 50%{filter:drop-shadow(0 0 1.2cqh rgba(255,194,90,.62));transform:scale(1.018)} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
@media (max-width:480px) {
  .app-shell { padding:0; }
  .game-viewport { width:100vw; height:100svh; border-radius:0; }
}

/* Scene 3: Character Selection */
.scene-character { background: linear-gradient(180deg, #f7efdf, #eedfca); }
.character-menu { width:10.4%; height:6.3%; left:2.2%; top:1.35%; z-index:25; }
.character-menu img { width:100%; height:100%; object-fit:fill; }
.character-logo { position:absolute; z-index:8; width:58.5%; left:20.7%; top:3.65%; object-fit:contain; filter:drop-shadow(0 .18cqh .25cqh rgba(110,81,48,.18)); }
.character-banner { position:absolute; z-index:8; width:82%; left:9%; top:12.6%; object-fit:contain; }
.character-subtitle {
  position:absolute; z-index:9; left:10%; width:80%; top:28.9%; margin:0;
  text-align:center; color:#694932; font-size:2.15cqw; line-height:1.25; text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.character-cards {
  position:absolute; z-index:10; left:6%; right:6%; top:34%;
  display:flex; justify-content:space-between; align-items:flex-start; gap:1.4%;
}
.character-card { width:31.6%; position:relative; transition:transform .22s ease, filter .22s ease; }
.character-card img { width:100%; height:auto; display:block; object-fit:contain; }
.character-card:hover { transform:translateY(-.4cqh) scale(1.012); }
.character-card.is-selected { transform:translateY(-.55cqh) scale(1.03); filter:drop-shadow(0 0 1cqh rgba(217,175,92,.45)); }
.character-card.is-selected::after {
  content:""; position:absolute; inset:1.8% 6.2% 1.3% 6.2%; border-radius:3.2cqw;
  box-shadow:0 0 0 .35cqw rgba(223,186,100,.88), 0 0 1.6cqh rgba(223,186,100,.36) inset;
  pointer-events:none;
}
.character-name-label { position:absolute; z-index:9; width:64%; left:18%; top:64.4%; object-fit:contain; }
.character-name-box { position:absolute; z-index:11; left:9%; width:82%; top:70.2%; }
.character-name-frame { width:100%; height:auto; display:block; object-fit:contain; }
.guest-name-input {
  position:absolute; left:7.2%; top:18%; width:77%; height:63%;
  border:0; outline:0; background:transparent; color:#6a4a32; font-size:2.7cqw; font-family:Georgia, "Times New Roman", serif;
}
.guest-name-input::placeholder { color:#bba78e; }
.character-continue { position:absolute; z-index:11; width:48%; left:26%; top:81.3%; transition:transform .2s ease, opacity .2s ease, filter .2s ease; }
.character-continue img { width:100%; height:auto; display:block; object-fit:contain; }
.character-continue:not(.is-disabled):hover { transform:translateY(-.18cqh) scale(1.012); filter:drop-shadow(0 0 1cqh rgba(225,184,93,.34)); }
.character-continue.is-disabled { opacity:.58; filter:saturate(.7); cursor:not-allowed; }
.character-status {
  position:absolute; z-index:12; left:11%; right:11%; top:89.6%; text-align:center;
  color:#72543d; font-size:1.55cqw; line-height:1.3; text-shadow:0 1px rgba(255,255,255,.55);
}
.character-sparkles { position:absolute; inset:0; z-index:6; pointer-events:none; }
.char-fx { position:absolute; opacity:.9; animation:twinkle 2.7s ease-in-out infinite; }
.char-fx-heart { width:2.8%; left:48.6%; top:10.6%; animation-duration:2.1s; }
.char-fx-s1 { width:1.75%; left:7%; top:34%; }
.char-fx-s2 { width:1.6%; left:85%; top:8%; animation-delay:-.6s; }
.char-fx-s3 { width:1.5%; left:9%; top:74%; animation-delay:-1.2s; }
.char-fx-s4 { width:1.2%; right:8%; top:69%; animation-delay:-1.7s; }
.char-fx-s5 { width:1.4%; left:53%; top:55%; animation-delay:-1s; }
.char-fx-s6 { width:1.4%; right:11%; top:29%; animation-delay:-1.4s; }

@media (max-width: 480px) {
  .character-subtitle { font-size:3.25cqw; }
  .guest-name-input { font-size:4.1cqw; }
  .character-status { font-size:2.45cqw; }
}

/* Scene 4: Main World Map */
.scene-worldmap { background:#154d76; }
.worldmap-background { object-fit:cover; }
.worldmap-header {
  position:absolute; z-index:18; top:.8%; left:1.8%; width:96.4%; height:auto;
  object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 .18cqh .18cqh rgba(70,49,24,.2));
}
.worldmap-menu-hitbox {
  position:absolute; z-index:30; top:1%; left:1.7%; width:12.3%; height:8.4%;
  padding:0; border:0; background:transparent; cursor:pointer; border-radius:25%;
}
.worldmap-menu-hitbox:focus-visible { outline:3px solid rgba(255,235,160,.95); outline-offset:2px; }
.worldmap-stage-layer { position:absolute; inset:0; z-index:15; pointer-events:none; }
.map-stage { pointer-events:auto; transform-origin:center; }
.map-stage img { width:100%; height:auto; display:block; }
.map-stage-1 { left:35.5%; top:13.8%; width:29%; }
.map-stage-2 { right:5.2%; top:37.4%; width:27%; }
.map-stage-3 { left:5.3%; top:43%; width:27%; }
.map-stage-4 { right:8%; top:59.2%; width:28%; }
.map-stage-5 { left:4.2%; top:62.1%; width:27%; }
.map-stage:hover { transform:translateY(-.3cqh) scale(1.025); }
.map-stage.is-active {
  transform:translateY(-.25cqh) scale(1.04);
  filter:drop-shadow(0 0 .7cqh rgba(255,219,119,.95)) drop-shadow(0 .35cqh .35cqh rgba(56,38,17,.32));
}
.map-stage.is-active::after {
  content:""; position:absolute; inset:10% 8% 7%; border-radius:28%; pointer-events:none;
  box-shadow:0 0 1.3cqh rgba(255,221,128,.42);
}
.worldmap-path-nodes { position:absolute; inset:0; z-index:10; pointer-events:none; }
.path-node { position:absolute; width:4.2%; height:auto; filter:drop-shadow(0 .14cqh .12cqh rgba(52,34,13,.25)); }
.path-node-a { left:51%; top:33.9%; }
.path-node-b { left:49.2%; top:43.4%; }
.path-node-c { left:43.4%; top:55.5%; }
.path-node-d { left:37.5%; top:66.5%; }
.worldmap-frame { z-index:60; }

.worldmap-navbar {
  position:absolute; z-index:40; left:.35%; width:99.3%; bottom:.25%;
  aspect-ratio:1718/366; pointer-events:auto;
}
.worldmap-navbar-base { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.worldmap-arrow { position:absolute; z-index:8; top:29%; width:9%; height:44%; padding:0; border:0; background:transparent; cursor:pointer; }
.worldmap-arrow-left { left:0; }
.worldmap-arrow-right { right:0; }
.worldmap-arrow:focus-visible { outline:3px solid rgba(198,151,63,.95); outline-offset:-6px; border-radius:30%; }
.worldmap-nav-items {
  position:absolute; z-index:5; left:8.8%; right:8.8%; top:34%; bottom:2%;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:end; gap:1.3%;
}
.worldmap-nav-item {
  position:relative; height:100%; min-width:0; padding:0 1%; border:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; cursor:pointer;
  color:#4b3020; font-family:Georgia,"Times New Roman",serif; transition:transform .18s ease, filter .18s ease;
}
.worldmap-nav-item:hover { transform:translateY(-.25cqh); filter:brightness(1.04); }
.nav-icon-wrap {
  width:77%; height:62%; display:grid; place-items:center; border-radius:20%;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav-icon-wrap img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.worldmap-nav-item.is-active .nav-icon-wrap {
  background:rgba(255,248,225,.64); box-shadow:0 0 0 .25cqw rgba(213,167,74,.92),0 0 .95cqh rgba(255,213,106,.58);
  transform:translateY(-.25cqh) scale(1.03);
}
.nav-stage-label {
  display:block; min-height:2.5em; margin-top:1%; text-align:center; font-size:1.25cqw; line-height:1.03;
  font-weight:700; text-shadow:0 1px rgba(255,255,255,.72); white-space:normal;
}
.worldmap-nav-item.is-active .nav-stage-label { color:#342014; }
.nav-avatar-marker {
  position:absolute; z-index:12; top:7.5%; width:7.2%; height:auto; left:13.9%;
  transform:translateX(-50%); pointer-events:none; transition:left .42s cubic-bezier(.25,.8,.25,1), transform .3s ease;
  filter:drop-shadow(0 .25cqh .2cqh rgba(67,42,16,.34)); animation:markerBounce 2.1s ease-in-out infinite;
}

.worldmap-effects { position:absolute; inset:0; z-index:12; pointer-events:none; }
.wm-sparkle,.wm-petal { position:absolute; height:auto; opacity:.18; }
.wm-sparkle { width:2.4%; animation:twinkle 2.6s ease-in-out infinite; }
.wm-sparkle-1 { left:23%; top:9%; }
.wm-sparkle-2 { right:22%; top:8.4%; animation-delay:-.8s; }
.wm-sparkle-3 { right:9%; top:29%; animation-delay:-1.5s; }
.wm-petal { width:2.3%; animation:mapPetal 7s ease-in-out infinite; }
.wm-petal-1 { left:82%; top:71%; }
.wm-petal-2 { left:16%; top:55%; animation-delay:-3.1s; }
@keyframes markerBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-.45cqh)} }
@keyframes mapPetal { 0%,100%{transform:translate(0,0) rotate(-8deg);opacity:.45} 50%{transform:translate(1.2cqw,1.4cqh) rotate(14deg);opacity:.95} }

@media (max-width:480px) {
  .nav-stage-label { font-size:2.05cqw; }
  .map-stage-1 { width:30.5%; left:34.7%; }
}

/* World map polish overrides */
.path-node { display:none; }
.route-dot {
  position:absolute; width:3.2%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#fff8d9 0 24%,#e5be69 25% 48%,#aa7528 49% 72%,#fff0b6 73% 82%,#8c5b20 83% 100%);
  box-shadow:0 .16cqh .18cqh rgba(62,38,12,.27),0 0 .45cqh rgba(255,231,155,.32);
}
.route-dot-a { left:51.2%; top:34.2%; }
.route-dot-b { left:49.4%; top:44%; }
.route-dot-c { left:43.7%; top:55.8%; }
.route-dot-d { left:37.8%; top:66.9%; }
.nav-icon-wrap { width:68%; height:54%; }
.nav-stage-label { font-size:clamp(7px,1.6cqw,15px); }
.nav-avatar-marker { top:2.5%; width:6.2%; }

/* =========================================================
   STAGE 1 V2 — clean reconstruction from separated assets
   ========================================================= */
#stage1Scene.scene-stage1-v2 {
  color:#4c2f20;
  background:#f5e8d2;
  overflow:hidden;
}
#stage1Scene .s1-background {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top;
  z-index:0; display:block;
}
#stage1Scene .s1-paper-body {
  display:none;
}
#stage1Scene .s1-menu { left:2.8%; top:1.65%; width:9.7%; z-index:35; }
#stage1Scene .s1-menu img { width:100%; height:auto; }
#stage1Scene .s1-corner { position:absolute; z-index:16; width:13%; right:.8%; top:.4%; opacity:.88; pointer-events:none; }
#stage1Scene .s1-logo { position:absolute; z-index:17; width:61.5%; left:19.3%; top:2.15%; height:auto; filter:drop-shadow(0 .12cqh .12cqh rgba(87,55,25,.13)); }

#stage1Scene .s1-heading {
  position:absolute; z-index:18; left:7%; right:7%; top:10.7%; height:11.3%; text-align:center;
  display:flex; flex-direction:column; align-items:center; color:#43291c;
}
#stage1Scene .s1-badge-row { width:42%; height:25%; display:flex; align-items:center; justify-content:center; gap:2%; }
#stage1Scene .s1-stage-badge { width:64%; height:100%; object-fit:contain; }
#stage1Scene .s1-sparkle { width:16%; height:100%; object-fit:contain; }
#stage1Scene .s1-title-row { width:100%; height:39%; display:grid; grid-template-columns:9% 1fr 9%; align-items:center; margin-top:.15cqh; }
#stage1Scene .s1-title-row img { width:100%; height:100%; object-fit:contain; }
#stage1Scene .s1-title-row h1 { margin:0; font-size:4.7cqw; line-height:1; font-weight:700; white-space:nowrap; letter-spacing:-.025em; text-shadow:0 1px rgba(255,255,255,.52); }
#stage1Scene .s1-heading > p { margin:.15cqh 0 0; font-size:1.55cqw; line-height:1.15; font-weight:600; }
#stage1Scene .s1-heading-heart { width:4.3%; margin-top:.35cqh; animation:markerBounce 2.2s ease-in-out infinite; filter:drop-shadow(0 0 .38cqh rgba(241,133,144,.4)); }

#stage1Scene .s1-couple {
  position:absolute; z-index:12; left:29%; width:42%; top:21.2%; height:23.5%;
  animation:coupleNightIdle 4.3s ease-in-out infinite;
}
#stage1Scene .s1-couple > img { width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block; filter:drop-shadow(0 .38cqh .25cqh rgba(62,38,17,.25)); }
#stage1Scene .s1-person-hit { position:absolute; top:0; bottom:0; width:50%; border:0; background:transparent; cursor:pointer; border-radius:36%; }
#stage1Scene .s1-person-left { left:0; }
#stage1Scene .s1-person-right { right:0; }
#stage1Scene .s1-person-hit:hover { background:radial-gradient(circle,rgba(255,242,188,.13),transparent 68%); }
#stage1Scene .s1-person-hit:focus-visible { outline:3px solid rgba(255,224,128,.9); outline-offset:2px; }

#stage1Scene .s1-profiles {
  position:absolute; z-index:20; left:9.3%; right:9.3%; top:45.6%; height:20.4%;
  display:grid; grid-template-columns:1fr 5.2% 1fr; gap:1.2%; align-items:stretch;
}
#stage1Scene .s1-profile-card { position:relative; min-width:0; height:100%; }
#stage1Scene .s1-card-shell { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; filter:drop-shadow(0 .38cqh .24cqh rgba(92,61,31,.14)); }
#stage1Scene .s1-card-copy { position:absolute; inset:7.8% 8.2% 7.5%; display:flex; flex-direction:column; color:#4c3021; }
#stage1Scene .s1-card-copy header { height:23%; display:flex; align-items:center; justify-content:center; gap:4%; text-align:left; }
#stage1Scene .s1-card-copy header > img { width:17%; height:82%; object-fit:contain; }
#stage1Scene .s1-card-copy h2 { margin:0; font-size:2.12cqw; line-height:1; letter-spacing:.05em; }
#stage1Scene .s1-card-copy header p { margin:.34em 0 0; font-size:1.5cqw; line-height:1; }
#stage1Scene .s1-card-rule { height:1px; margin:1.4% 0 4.2%; background:linear-gradient(90deg,transparent,#c9a778 14%,#c9a778 86%,transparent); }
#stage1Scene .s1-stat { height:15%; display:grid; grid-template-columns:12% 31% 1fr; align-items:center; column-gap:2%; font-size:1.42cqw; line-height:1; }
#stage1Scene .s1-stat img { width:80%; max-height:88%; object-fit:contain; justify-self:center; }
#stage1Scene .s1-stat b { font-weight:600; }
#stage1Scene .s1-skill { margin-top:auto; min-height:24%; display:grid; grid-template-columns:13% 1fr; align-items:start; gap:2%; font-size:1.18cqw; line-height:1.25; text-align:center; }
#stage1Scene .s1-skill img { width:80%; margin-top:5%; justify-self:center; }
#stage1Scene .s1-skill p { margin:0; }
#stage1Scene .s1-profile-heart { width:100%; align-self:center; justify-self:center; filter:drop-shadow(0 .18cqh .12cqh rgba(78,48,18,.25)); }

#stage1Scene .s1-family { position:absolute; z-index:21; left:5.4%; right:5.4%; top:66.6%; height:15.5%; }
#stage1Scene .s1-family-title { position:absolute; z-index:5; width:58%; left:21%; top:0; height:14%; object-fit:contain; }
#stage1Scene .s1-family-panel-wrap { position:absolute; left:0; right:0; top:14%; bottom:0; }
#stage1Scene .s1-family-panel { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; filter:drop-shadow(0 .28cqh .18cqh rgba(88,56,30,.12)); }
#stage1Scene .s1-family-col { position:absolute; z-index:4; top:18%; width:36%; text-align:center; color:#503324; }
#stage1Scene .s1-family-left { left:2.2%; }
#stage1Scene .s1-family-right { right:2.2%; }
#stage1Scene .s1-family-name { height:25%; display:flex; align-items:center; justify-content:center; gap:3%; border-bottom:1px solid rgba(169,130,84,.23); padding-bottom:2.2%; }
#stage1Scene .s1-family-name img { width:10%; height:100%; object-fit:contain; }
#stage1Scene .s1-family-name h3 { margin:0; font-size:1.28cqw; letter-spacing:.03em; }
#stage1Scene .s1-family-col > p { margin:6% 0 0; font-size:1.23cqw; line-height:1.35; }
#stage1Scene .s1-family-center { position:absolute; z-index:4; left:40%; width:20%; top:12%; height:78%; text-align:center; }
#stage1Scene .s1-family-center > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
#stage1Scene .s1-family-center p { position:absolute; z-index:2; left:18%; right:18%; top:24%; margin:0; font-size:1.02cqw; line-height:1.24; }
#stage1Scene .s1-family-plant { position:absolute; z-index:6; bottom:-4%; width:10%; height:auto; }
#stage1Scene .s1-family-plant-left { left:-2.2%; }
#stage1Scene .s1-family-plant-right { right:-1.7%; }

#stage1Scene .s1-navbar { position:absolute; z-index:42; left:.7%; right:.7%; bottom:.35%; height:16.3%; }
#stage1Scene .s1-nav-panel { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
#stage1Scene .s1-nav-title { position:absolute; z-index:3; width:36%; left:32%; top:7%; height:14%; object-fit:contain; }
#stage1Scene .s1-nav-arrow { position:absolute; z-index:8; top:39%; width:7%; height:33%; padding:0; border:0; background:transparent; cursor:pointer; }
#stage1Scene .s1-nav-arrow img { width:100%; height:100%; object-fit:contain; }
#stage1Scene .s1-nav-prev { left:1.3%; }
#stage1Scene .s1-nav-next { right:1.3%; }
#stage1Scene .s1-nav-dots { position:absolute; z-index:2; left:10.5%; width:79%; top:51%; height:8%; object-fit:fill; opacity:.95; }
#stage1Scene .s1-nav-items { position:absolute; z-index:6; left:9%; right:9%; top:23%; bottom:2.5%; display:grid; grid-template-columns:repeat(5,1fr); gap:1.2%; }
#stage1Scene .s1-nav-item.worldmap-nav-item { position:relative; height:100%; width:auto; min-width:0; padding:0; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; color:#4b3020; overflow:visible; }
#stage1Scene .s1-nav-icon { width:72%; height:54%; object-fit:contain; z-index:3; }
#stage1Scene .s1-active-frame { position:absolute; z-index:1; width:86%; height:59%; top:3%; object-fit:fill; opacity:0; }
#stage1Scene .s1-nav-item.is-active .s1-active-frame { opacity:1; }
#stage1Scene .s1-nav-badge { position:absolute; z-index:5; width:20%; height:auto; left:8%; top:54%; object-fit:contain; }
#stage1Scene .s1-nav-item > span { position:relative; z-index:5; min-height:2.3em; margin-top:1%; font-size:1.28cqw; line-height:1.02; text-align:center; font-weight:700; text-shadow:0 1px rgba(255,255,255,.8); }
#stage1Scene .s1-guest-marker { position:absolute; z-index:12; width:5.6%; height:auto; left:16.8%; top:1.2%; transform:translateX(-50%); animation:markerBounce 2.1s ease-in-out infinite; filter:drop-shadow(0 .2cqh .18cqh rgba(65,41,18,.3)); }
#stage1Scene .s1-screen-frame { z-index:70; }

@media (max-width:480px) {
  #stage1Scene .s1-title-row h1 { font-size:5.9cqw; }
  #stage1Scene .s1-heading > p { font-size:2.03cqw; }
  #stage1Scene .s1-card-copy h2 { font-size:2.7cqw; }
  #stage1Scene .s1-card-copy header p { font-size:1.92cqw; }
  #stage1Scene .s1-stat { font-size:1.83cqw; }
  #stage1Scene .s1-skill { font-size:1.5cqw; }
  #stage1Scene .s1-family-name h3 { font-size:1.55cqw; }
  #stage1Scene .s1-family-col > p { font-size:1.48cqw; }
  #stage1Scene .s1-family-center p { font-size:1.2cqw; }
  #stage1Scene .s1-nav-item > span { font-size:1.66cqw; }
}

/* Stage 1 final readability and visual-balance refinements */
#stage1Scene.scene-stage1-v2::before {
  content:""; position:absolute; z-index:5; left:0; right:0; top:0; height:10.1%;
  background:linear-gradient(180deg,rgba(255,249,237,.99) 0%,rgba(250,241,224,.98) 76%,rgba(248,238,219,.78) 91%,rgba(248,238,219,0) 100%);
  pointer-events:none;
}
#stage1Scene .s1-title-row h1 { font-size:5.35cqw; }
#stage1Scene .s1-heading > p { font-size:1.72cqw; }
#stage1Scene .s1-card-copy h2 { font-size:2.35cqw; }
#stage1Scene .s1-card-copy header p { font-size:1.68cqw; }
#stage1Scene .s1-stat { font-size:1.62cqw; }
#stage1Scene .s1-skill { font-size:1.33cqw; }
#stage1Scene .s1-family-name h3 { font-size:1.43cqw; }
#stage1Scene .s1-family-col > p { font-size:1.38cqw; }
#stage1Scene .s1-family-center p { font-size:1.11cqw; }
#stage1Scene .s1-nav-item > span { font-size:1.38cqw; }
@media (max-width:480px) {
  #stage1Scene .s1-title-row h1 { font-size:6.05cqw; }
  #stage1Scene .s1-heading > p { font-size:2.15cqw; }
  #stage1Scene .s1-card-copy h2 { font-size:2.85cqw; }
  #stage1Scene .s1-card-copy header p { font-size:2.05cqw; }
  #stage1Scene .s1-stat { font-size:1.95cqw; }
  #stage1Scene .s1-skill { font-size:1.62cqw; }
  #stage1Scene .s1-family-name h3 { font-size:1.72cqw; }
  #stage1Scene .s1-family-col > p { font-size:1.65cqw; }
  #stage1Scene .s1-family-center p { font-size:1.32cqw; }
  #stage1Scene .s1-nav-item > span { font-size:1.78cqw; }
}

/* =========================================================
   Shared universal World Map navigation
   Reused by the World Map, Stage 1 and Stage 2.
   ========================================================= */
.universal-stage-nav {
  position:absolute;
  z-index:82;
  left:.75%;
  right:.75%;
  bottom:.45%;
  height:15.9%;
  visibility:hidden;
  opacity:0;
  transform:translateY(6%);
  pointer-events:none;
  transition:opacity .28s ease, transform .36s ease, visibility 0s linear .38s;
}
.universal-stage-nav.is-visible {
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  transition-delay:0s;
}
.universal-nav-panel { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.universal-nav-title { position:absolute; z-index:3; width:34%; left:33%; top:5.2%; height:14.5%; object-fit:contain; pointer-events:none; }
.universal-nav-dots { position:absolute; z-index:2; left:11.2%; width:77.6%; top:48.3%; height:5.2%; object-fit:fill; opacity:.92; pointer-events:none; }
.universal-nav-arrow {
  position:absolute; z-index:12; top:39%; width:6.8%; height:31%; padding:0; border:0; background:transparent;
  cursor:pointer; transition:transform .15s ease, filter .15s ease;
}
.universal-nav-arrow img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.universal-nav-prev { left:1.2%; }
.universal-nav-next { right:1.2%; }
.universal-nav-arrow:hover { transform:scale(1.08); filter:brightness(1.06); }
.universal-nav-arrow:active { transform:scale(.95); }
.universal-nav-arrow:focus-visible { outline:3px solid rgba(198,151,63,.95); outline-offset:-4px; border-radius:35%; }
.universal-nav-items {
  position:absolute; z-index:6; left:9.2%; right:9.2%; top:21%; bottom:5.5%;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.9%; align-items:stretch;
}
.universal-nav-item {
  position:relative; min-width:0; height:100%; padding:0 .2cqw; border:0; background:transparent; cursor:pointer;
  display:grid; grid-template-rows:minmax(0,1fr) 2.15em; place-items:center; overflow:visible;
  color:#4b3020; font-family:Georgia,"Times New Roman",serif;
  transition:transform .18s ease, filter .18s ease;
}
.universal-nav-item:hover { transform:translateY(-.25cqh); filter:brightness(1.04); }
.universal-nav-item:focus-visible { outline:3px solid rgba(210,167,83,.9); outline-offset:2px; border-radius:16px; }
.universal-icon-wrap { position:relative; z-index:3; align-self:end; width:70%; height:100%; display:grid; place-items:end center; }
.universal-stage-icon { width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block; filter:drop-shadow(0 .18cqh .13cqh rgba(76,48,20,.2)); }
.universal-active-frame { position:absolute; z-index:1; left:9%; top:7%; width:82%; height:72%; object-fit:contain; opacity:0; transition:opacity .18s ease, transform .18s ease; }
.universal-nav-item.is-active .universal-active-frame { opacity:1; transform:scale(1.02); }
.universal-nav-item.is-active .universal-stage-icon { transform:translateY(-.15cqh) scale(1.035); }
.universal-stage-badge { position:absolute; z-index:7; width:18%; height:auto; left:8%; top:43%; object-fit:contain; }
.universal-stage-label {
  position:relative; z-index:7; width:100%; min-height:2.15em; margin:0; text-align:center; align-self:start;
  font-size:1.28cqw; line-height:1.05; font-weight:700; text-shadow:0 1px rgba(255,255,255,.82);
}
.universal-nav-avatar.nav-avatar-marker {
  position:absolute; z-index:14; width:5.3%; height:auto; top:-2.5%; left:16.8%;
  transform:translateX(-50%); pointer-events:none;
  transition:left .42s cubic-bezier(.25,.8,.25,1);
  filter:drop-shadow(0 .2cqh .18cqh rgba(65,41,18,.3));
  animation:markerBounce 2.1s ease-in-out infinite;
}
.universal-screen-frame {
  position:absolute; z-index:96; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none;
  visibility:hidden; opacity:0; transition:opacity .22s ease, visibility 0s linear .24s;
}
.universal-screen-frame.is-visible { visibility:visible; opacity:1; transition-delay:0s; }

/* =========================================================
   Scene 6: Stage 2 — The Path of Memories
   ========================================================= */
#stage2Scene.scene-stage2 { background:#8ab4cc; color:#4a3021; }
#stage2Scene .s2-background { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; }
#stage2Scene .s2-top-fade {
  position:absolute; z-index:4; left:0; right:0; top:0; height:21.5%; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,249,237,.995) 0%,rgba(251,243,228,.98) 58%,rgba(250,242,226,.80) 76%,rgba(248,239,220,.22) 94%,transparent 100%);
}
#stage2Scene .s2-menu { width:10.4%; height:6.4%; left:2.2%; top:1.35%; z-index:26; }
#stage2Scene .s2-menu img { width:100%; height:100%; object-fit:fill; }
#stage2Scene .s2-corner { position:absolute; z-index:8; right:1.4%; top:.75%; width:11.8%; height:8.8%; object-fit:contain; }
#stage2Scene .s2-logo { position:absolute; z-index:9; left:20.5%; top:3.15%; width:59%; height:7.6%; object-fit:contain; filter:drop-shadow(0 .16cqh .14cqh rgba(78,51,24,.18)); }
#stage2Scene .s2-title-block { position:absolute; z-index:10; left:4.3%; top:10.5%; width:91.4%; height:14.5%; object-fit:contain; filter:drop-shadow(0 .18cqh .16cqh rgba(76,49,22,.12)); }
#stage2Scene .s2-couple {
  position:absolute; z-index:13; left:11.2%; top:21.4%; width:20.8%; height:12.6%; object-fit:contain;
  filter:drop-shadow(0 .3cqh .2cqh rgba(65,42,19,.26)); animation:coupleNightIdle 4.2s ease-in-out infinite;
}
#stage2Scene .s2-memory { z-index:22; transform-origin:center; }
#stage2Scene .s2-memory img { width:100%; height:auto; display:block; filter:drop-shadow(0 .34cqh .23cqh rgba(78,51,25,.22)); }
#stage2Scene .s2-memory:hover { transform:translateY(-.28cqh) scale(1.015); filter:brightness(1.025); }
#stage2Scene .s2-memory-1 { left:34.2%; top:27.2%; width:56%; }
#stage2Scene .s2-memory-2 { left:6.2%; top:39.6%; width:55%; }
#stage2Scene .s2-memory-3 { right:5.1%; top:51.5%; width:55.5%; }
#stage2Scene .s2-memory-4 { left:5.8%; top:62.4%; width:53%; }

#stage2Scene .s2-route-nodes { position:absolute; inset:0; z-index:12; pointer-events:none; }
#stage2Scene .s2-node {
  position:absolute; width:4.3%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fffdf3 0 42%,#f4dfad 43% 61%,#9d733d 62% 70%,#f9efd2 71% 83%,rgba(113,74,34,.45) 84% 100%);
  box-shadow:0 .18cqh .2cqh rgba(73,46,17,.25),0 0 .45cqh rgba(255,235,166,.5);
}
#stage2Scene .s2-node-1 { left:21%; top:29.6%; }
#stage2Scene .s2-node-2 { left:70.7%; top:38.3%; }
#stage2Scene .s2-node-3 { left:41.7%; top:47.5%; }
#stage2Scene .s2-node-4 { left:28.3%; top:55.1%; }
#stage2Scene .s2-node-5 { left:73%; top:62.8%; }

#stage2Scene .s2-prop { position:absolute; z-index:17; height:auto; pointer-events:none; filter:drop-shadow(0 .25cqh .2cqh rgba(55,36,17,.22)); }
#stage2Scene .s2-sign { left:39%; top:70%; width:22%; }
#stage2Scene .s2-gate { left:57%; top:69.2%; width:24.5%; z-index:18; }
#stage2Scene .s2-signpost { right:4.2%; top:39.5%; width:12%; }
#stage2Scene .s2-bench { left:3.7%; top:70.7%; width:25.5%; }
#stage2Scene .s2-lamp { right:3.2%; top:62.6%; width:7.3%; }
#stage2Scene .s2-bird { right:11%; top:70%; width:6.6%; }

#stage2Scene .s2-next-stage {
  position:absolute; z-index:28; right:3.5%; top:76.2%; width:36.8%; height:6.45%;
  border:2px solid rgba(166,124,70,.78); border-radius:22% / 48%; cursor:pointer;
  display:grid; grid-template-columns:18% 1fr 12%; align-items:center; padding:0 5%;
  color:#4a3021; background:linear-gradient(180deg,rgba(255,251,240,.98),rgba(247,228,193,.98));
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.58),0 .45cqh .35cqh rgba(71,45,21,.2);
  font-family:Georgia,"Times New Roman",serif; transition:transform .16s ease, filter .16s ease;
}
#stage2Scene .s2-next-stage img { width:72%; justify-self:center; filter:drop-shadow(0 .1cqh .1cqh rgba(85,50,28,.18)); }
#stage2Scene .s2-next-stage span { font-size:3.1cqw; font-weight:700; letter-spacing:.01em; }
#stage2Scene .s2-next-stage b { font-size:5cqw; line-height:1; font-weight:400; color:#9a764c; }
#stage2Scene .s2-next-stage:hover { transform:translateY(-.2cqh) scale(1.012); filter:brightness(1.035); }
#stage2Scene .s2-next-stage:active { transform:translateY(.1cqh) scale(.985); }
#stage2Scene .s2-next-stage:focus-visible { outline:3px solid rgba(255,225,139,.96); outline-offset:3px; }

@media (max-width:480px) {
  .universal-stage-label { font-size:1.78cqw; }
  #stage2Scene .s2-next-stage span { font-size:3.7cqw; }
}

/* Stage 2 final spacing refinements after composite audit */
#stage2Scene .s2-couple { left:13.2%; top:22.1%; width:17.4%; height:10.8%; }
#stage2Scene .s2-memory-1 { left:35.2%; top:28.8%; width:54.2%; }
#stage2Scene .s2-memory-2 { left:6.2%; top:40.2%; width:53.2%; }
#stage2Scene .s2-memory-3 { right:5.1%; top:51.7%; width:53.5%; }
#stage2Scene .s2-memory-4 { left:7.2%; top:60.9%; width:49.5%; }
#stage2Scene .s2-node-1 { left:21.2%; top:30.8%; }
#stage2Scene .s2-node-2 { left:70.7%; top:38.9%; }
#stage2Scene .s2-node-3 { left:42.3%; top:48.1%; }
#stage2Scene .s2-node-4 { left:28.5%; top:55.6%; }
#stage2Scene .s2-node-5 { left:73.2%; top:62.9%; }
#stage2Scene .s2-sign { left:39%; top:71.1%; width:20%; }
#stage2Scene .s2-gate { left:57.2%; top:69.7%; width:20.8%; }
#stage2Scene .s2-bench { left:4%; top:71.8%; width:20.5%; }
#stage2Scene .s2-lamp { right:3.8%; top:64.8%; width:5.7%; }
#stage2Scene .s2-bird { right:12.5%; top:70.5%; width:5.2%; }
#stage2Scene .s2-next-stage { right:3.5%; top:76.1%; width:35.8%; height:6.15%; z-index:30; }



/* =========================================================
   Stage 3 — Memory Gallery
   Clean, layered composition using transparent production assets.
   ========================================================= */
#stage3Scene { background:#5f412c; color:#4a3021; }
#stage3Scene .s3-background {
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; pointer-events:none;
}
#stage3Scene .s3-top-cream {
  position:absolute; z-index:2; left:0; right:0; top:0; height:13.2%;
  background:linear-gradient(180deg,#fffaf0 0%,#f8ecd8 88%,rgba(248,236,216,.1) 100%);
  pointer-events:none;
}
#stage3Scene .s3-menu { z-index:30; left:2.7%; top:1.55%; width:9.7%; height:6.1%; }
#stage3Scene .s3-menu img { width:100%; height:100%; object-fit:contain; }
#stage3Scene .s3-logo {
  position:absolute; z-index:12; left:20.7%; top:2.8%; width:58.6%; height:7.2%;
  object-fit:contain; pointer-events:none;
}
#stage3Scene .s3-corner {
  position:absolute; z-index:12; right:1.8%; top:.75%; width:10.4%; height:8.4%;
  object-fit:contain; pointer-events:none;
}
#stage3Scene .s3-sign {
  position:absolute; z-index:18; left:15.7%; top:11.25%; width:68.6%; height:10.1%;
  object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 .34cqh .24cqh rgba(39,21,9,.28));
}
#stage3Scene .s3-frame {
  position:absolute; z-index:14;
  filter:drop-shadow(0 .28cqh .2cqh rgba(32,18,8,.28));
}
#stage3Scene button.s3-frame { transition:transform .16s ease, filter .16s ease; }
#stage3Scene button.s3-frame:hover { transform:translateY(-.18cqh) scale(1.018); filter:brightness(1.04) drop-shadow(0 .36cqh .25cqh rgba(32,18,8,.3)); }
#stage3Scene .s3-frame img { width:100%; height:auto; display:block; }
#stage3Scene .s3-frame-guitar { left:8.1%; top:24.7%; width:24.1%; }
#stage3Scene .s3-frame-oval { left:61.3%; top:23.3%; width:13.4%; }
#stage3Scene .s3-frame-sunset { right:4.5%; top:25.1%; width:18.5%; }
#stage3Scene .s3-frame-picnic { right:6.7%; top:33.0%; width:23.4%; }
#stage3Scene .s3-frame-small { left:35.3%; top:30.0%; width:5.5%; }
#stage3Scene .s3-frame-note { left:51.2%; top:33.3%; width:5.8%; }

#stage3Scene .s3-photo-line {
  position:absolute; z-index:21; left:7.2%; right:7.2%; top:41.0%; height:11.8%;
  display:flex; align-items:flex-start; justify-content:space-between; gap:.6%;
  transform:rotate(-.25deg);
}
#stage3Scene .s3-photo-line::before {
  content:""; position:absolute; z-index:0; left:-1.5%; right:-1.5%; top:4.2%; height:2px;
  background:#765034; box-shadow:0 1px rgba(255,232,186,.42); pointer-events:none;
}
#stage3Scene .s3-polaroid {
  position:relative; z-index:2; width:15%; flex:0 0 15%; transform-origin:50% 0;
  transition:transform .16s ease, filter .16s ease;
}
#stage3Scene .s3-polaroid:nth-child(2n) { transform:rotate(1.8deg); }
#stage3Scene .s3-polaroid:nth-child(2n+1) { transform:rotate(-1.4deg); }
#stage3Scene .s3-polaroid:hover { transform:translateY(-.28cqh) rotate(0deg) scale(1.045); z-index:5; filter:brightness(1.04); }
#stage3Scene .s3-polaroid img { width:100%; height:auto; display:block; }

#stage3Scene .s3-collectible-title {
  position:absolute; z-index:24; left:29%; top:51.15%; width:42%; height:3.2%;
  object-fit:contain; pointer-events:none;
}
#stage3Scene .s3-card-row {
  position:absolute; z-index:23; left:3.5%; right:3.5%; top:54.35%; height:13.75%;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.72%; align-items:start;
}
#stage3Scene .s3-card { position:relative; width:100%; transition:transform .16s ease, filter .16s ease; }
#stage3Scene .s3-card img { width:100%; height:auto; display:block; }
#stage3Scene .s3-card:hover { transform:translateY(-.24cqh) scale(1.024); filter:brightness(1.04); z-index:3; }

/* The room background already contains the sofa, table and sideboard.
   Only unique foreground props are layered here to prevent duplication. */
#stage3Scene .s3-prop {
  position:absolute; z-index:15; pointer-events:none;
  filter:drop-shadow(0 .28cqh .22cqh rgba(28,14,6,.28));
}
#stage3Scene .s3-sofa,
#stage3Scene .s3-table,
#stage3Scene .s3-sideboard { display:none !important; }
#stage3Scene .s3-camera { right:1.8%; top:67.9%; width:18.3%; z-index:20; }
#stage3Scene .s3-photo { right:9.2%; top:75.1%; width:15.3%; z-index:21; transform:rotate(7deg); }
#stage3Scene .s3-story { z-index:31; left:32.8%; top:76.55%; width:34.4%; }
#stage3Scene .s3-story img { width:100%; height:auto; display:block; }

/* Reliable modal layer: detached from scene stacking and fully clickable. */
.local-modal {
  position:fixed !important; inset:0 !important; z-index:999999 !important;
  display:none; place-items:center; padding:clamp(18px,5vw,56px);
  pointer-events:none; isolation:isolate;
}
.local-modal.show { display:grid !important; pointer-events:auto !important; }
.local-modal-backdrop {
  position:absolute; inset:0; z-index:0; background:rgba(7,5,9,.78);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  pointer-events:auto; cursor:pointer;
}
.local-modal-card {
  position:relative; z-index:2; width:min(88vw,460px); max-height:min(82vh,620px);
  overflow:auto; padding:32px 28px 26px; text-align:center; pointer-events:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.local-modal-card h2 { margin:0 34px 14px; color:#4b2e1f; }
.local-modal-card p { margin:0 0 22px; line-height:1.55; white-space:normal; }
.local-modal-card .btn { min-width:130px; pointer-events:auto; }
.local-close { position:absolute !important; z-index:4 !important; top:16px !important; right:16px !important; width:24px; height:24px; pointer-events:auto !important; }
body.modal-open-local { overflow:hidden; }
.quest-menu { z-index:4500; }
.modal-backdrop { display:none !important; }
#infoModal { display:none !important; }


/* STAGE 4 — WEDDING KINGDOM
   Composed from individually cleaned transparent assets. */
#stage4Scene {
  background:
    radial-gradient(circle at 50% 76%, rgba(255,255,255,.38), transparent 29%),
    linear-gradient(180deg, #fbf5e9 0%, #f8ecda 53%, #eddbbd 100%);
  color:#4d3120;
}
#stage4Scene .s4-hero {
  position:absolute;
  z-index:0;
  left:0;
  top:8.35%;
  width:100%;
  height:91.65%;
  display:block;
  object-fit:cover;
  object-position:center 40%;
}
#stage4Scene .s4-header-paper {
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  top:0;
  height:10.1%;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(255,249,237,.99) 0%,
    rgba(250,241,224,.98) 76%,
    rgba(248,238,219,.78) 91%,
    rgba(248,238,219,0) 100%
  );
}
#stage4Scene .s4-paper-body {
  display:none;
}
#stage4Scene .s4-menu {
  left:2.8%;
  top:1.65%;
  width:9.7%;
  z-index:35;
}
#stage4Scene .s4-menu img {
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
#stage4Scene .s4-corner {
  position:absolute;
  z-index:16;
  width:13%;
  height:auto;
  right:.8%;
  top:.4%;
  opacity:.88;
  object-fit:contain;
  pointer-events:none;
}
#stage4Scene .s4-logo {
  position:absolute;
  z-index:17;
  left:19.3%;
  top:2.15%;
  width:61.5%;
  height:auto;
  display:block;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 .12cqh .12cqh rgba(87,55,25,.13));
}
#stage4Scene .s4-banner {
  position:absolute;
  z-index:18;
  left:17.8%;
  top:12.45%;
  width:64.4%;
  height:auto;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 .38cqh .24cqh rgba(35,25,10,.28));
}

#stage4Scene::after {
  content:none;
}
#stage4Scene .s4-petals {
  position:absolute;
  z-index:9;
  left:2.5%;
  top:12.9%;
  width:95%;
  height:34.5%;
  object-fit:fill;
  opacity:.18;
  pointer-events:none;
  animation:s4PetalFloat 6.8s ease-in-out infinite alternate;
}
#stage4Scene .s4-couple {
  left:40.2%;
  top:42.15%;
  width:19.6%;
  z-index:21;
  animation:titleIdle 4.4s ease-in-out infinite;
  filter:drop-shadow(0 .42cqh .28cqh rgba(34,21,10,.3));
}
#stage4Scene .s4-sign {
  right:6.9%;
  top:43.15%;
  width:11.7%;
  z-index:20;
  filter:drop-shadow(0 .3cqh .24cqh rgba(41,28,14,.28));
}
#stage4Scene .s4-details-panel {
  position:absolute;
  z-index:24;
  left:6.9%;
  right:6.9%;
  top:54.1%;
  height:22.6%;
}
#stage4Scene .s4-panel-shell {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
  pointer-events:none;
  filter:drop-shadow(0 .32cqh .28cqh rgba(68,42,22,.16));
}
#stage4Scene .s4-panel-content {
  position:absolute;
  inset:6.7% 6.5% 6.2%;
  color:#4d3120;
}
#stage4Scene .s4-panel-lead {
  display:grid;
  grid-template-columns:8% 1fr 8%;
  align-items:center;
  gap:2%;
  height:21.5%;
  text-align:center;
}
#stage4Scene .s4-heart {
  color:#c89a45;
  font-size:2.2cqw;
  line-height:1;
  text-shadow:0 1px rgba(255,255,255,.86), 0 .12cqh .12cqh rgba(79,45,15,.18);
}
#stage4Scene .s4-panel-lead p {
  margin:0;
  font-size:2.23cqw;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.012em;
}
#stage4Scene .s4-detail-table {
  height:78.5%;
  border-top:.13cqh solid rgba(175,133,78,.42);
}
#stage4Scene .s4-detail-row {
  display:grid;
  grid-template-columns:35.5% 64.5%;
  align-items:center;
  height:25%;
  border-bottom:.13cqh solid rgba(175,133,78,.38);
  padding:.15% 1.1%;
  border-radius:.7cqh;
  outline:none;
  cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease;
}
#stage4Scene .s4-detail-row:last-child { border-bottom:0; }
#stage4Scene .s4-detail-row:hover { background:rgba(255,250,238,.34); }
#stage4Scene .s4-detail-row:focus-visible {
  background:rgba(255,250,238,.5);
  box-shadow:inset 0 0 0 .22cqh rgba(209,164,78,.68);
}
#stage4Scene .s4-detail-label {
  display:flex;
  align-items:center;
  gap:1.15cqw;
  min-width:0;
  color:#6a452c;
  font-size:1.92cqw;
  font-weight:700;
  letter-spacing:.055em;
  white-space:nowrap;
}
#stage4Scene .s4-icon {
  display:grid;
  place-items:center;
  width:3.55cqw;
  height:3.55cqw;
  flex:0 0 3.55cqw;
  color:#a97738;
}
#stage4Scene .s4-icon svg {
  width:100%;
  height:100%;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#stage4Scene .s4-detail-value {
  min-width:0;
  color:#4d3120;
  font-size:1.85cqw;
  line-height:1.12;
}
#stage4Scene .s4-detail-value strong {
  display:block;
  font-size:2.03cqw;
  line-height:1.08;
  letter-spacing:.015em;
  font-weight:700;
}
#stage4Scene .s4-detail-value span {
  display:block;
  margin-top:.24cqh;
  color:#65422b;
  font-size:1.73cqw;
  line-height:1.05;
}
#stage4Scene .s4-actions {
  position:absolute;
  z-index:27;
  left:9.25%;
  right:9.25%;
  top:77.35%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:7.5%;
  align-items:start;
}
#stage4Scene .s4-action {
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  aspect-ratio:1890 / 457;
  min-width:0;
  margin:0;
  padding:0;
  display:block;
  overflow:visible;
}
#stage4Scene .s4-action img {
  width:100%;
  height:auto;
  aspect-ratio:1890 / 457;
  display:block;
  object-fit:contain;
  object-position:center;
}
#stage4Scene .s4-map-btn,
#stage4Scene .s4-calendar-btn {
  justify-self:stretch;
  align-self:start;
}
#stage4Scene .s4-action:hover {
  transform:translateY(-.2cqh) scale(1.018);
  filter:brightness(1.06) drop-shadow(0 .24cqh .18cqh rgba(64,42,19,.18));
}
#stage4Scene .s4-action:active { transform:translateY(.08cqh) scale(.985); }

@keyframes s4PetalFloat {
  from { transform:translate3d(-.35%,0,0); }
  to { transform:translate3d(.35%,.6%,0); }
}

@media (max-width:480px) {
  #stage4Scene .s4-panel-lead p { font-size:2.47cqw; }
  #stage4Scene .s4-detail-label { font-size:2.05cqw; }
  #stage4Scene .s4-detail-value strong { font-size:2.16cqw; }
  #stage4Scene .s4-detail-value span { font-size:1.84cqw; }
}


/* Scene 9: Stage 5 — The Guild Hall */
.scene-stage5 { background:#21160f; color:#4f3322; }
.s5-background { filter:saturate(.95) brightness(.9); }
.scene-stage5::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(25,12,5,.08),transparent 35%,rgba(20,10,5,.12)); }
.s5-top-header { position:absolute; z-index:15; left:1.4%; right:1.4%; top:1.1%; height:9.2%; border:2px solid rgba(178,137,81,.75); border-radius:2.4cqw; background:linear-gradient(180deg,rgba(255,250,238,.98),rgba(244,228,198,.96)); box-shadow:0 .6cqh 1.2cqh rgba(0,0,0,.28), inset 0 0 0 .25cqw rgba(255,255,255,.65); display:grid; place-items:center; }
.s5-brand { text-align:center; line-height:1.05; text-shadow:0 1px rgba(255,255,255,.8); }
.s5-brand span { display:block; font-size:2.25cqw; letter-spacing:.45cqw; }
.s5-brand strong { display:block; margin-top:.45cqh; font-size:4.9cqw; letter-spacing:.35cqw; color:#3c271c; }
.s5-menu { position:absolute; left:2.8%; top:14%; width:10.8%; height:72%; border:1px solid #b69a73; border-radius:2cqw; background:linear-gradient(#fffaf0,#e8d4ae); box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.65),0 .25cqh .55cqh rgba(79,50,28,.22); color:#5a402d; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3cqh; cursor:pointer; }
.s5-menu span { width:42%; height:.18cqh; background:#73543a; border-radius:99px; }
.s5-menu small { font-weight:700; font-size:1.25cqw; letter-spacing:.15cqw; margin-top:.2cqh; }
.s5-title-plaque { position:absolute; z-index:14; top:11.3%; left:26.5%; width:47%; min-height:9.8%; text-align:center; color:#fff0d4; padding:1.25cqh 2cqw .8cqh; border:.35cqw solid #c3a16c; border-radius:4cqw 4cqw 2cqw 2cqw; background:linear-gradient(180deg,#76583b,#4e3526); box-shadow:0 .65cqh 1cqh rgba(0,0,0,.38), inset 0 0 0 .3cqw #3b281f; }
.s5-title-plaque small { display:block; font-size:2.05cqw; letter-spacing:.35cqw; }
.s5-title-plaque strong { display:block; font-size:4.25cqw; line-height:1.05; margin:.25cqh 0 .55cqh; }
.s5-title-plaque span { display:block; width:115%; margin-left:-7.5%; padding:.48cqh 1.5cqw; border:1px solid #b99459; background:#f5e6c7; color:#5c3f2c; font-size:1.65cqw; border-radius:99px; }
.s5-couple-button { z-index:9; width:25%; left:37.5%; top:34.5%; filter:drop-shadow(0 .6cqh .35cqh rgba(0,0,0,.38)); }
.s5-message-bubble { position:absolute; z-index:10; left:34%; top:27.4%; width:32%; padding:1.05cqh 1cqw 1.2cqh; border:.24cqw solid #b6986f; border-radius:2.2cqw; background:linear-gradient(#fffaf0,#f0dfc1); text-align:center; font-size:1.82cqw; line-height:1.15; box-shadow:0 .45cqh .7cqh rgba(0,0,0,.25); }
.s5-message-bubble::after { content:""; position:absolute; left:46%; bottom:-1.25cqh; width:2.4cqw; height:2.4cqw; background:#f0dfc1; border-right:.24cqw solid #b6986f; border-bottom:.24cqw solid #b6986f; transform:rotate(45deg); }
.s5-message-bubble i { position:absolute; left:47.5%; bottom:-2.25cqh; z-index:2; color:#d76f68; font-style:normal; font-size:2.3cqw; text-shadow:0 1px #fff; }
.s5-action-grid { position:absolute; z-index:16; left:3.2%; right:3.2%; top:53.3%; height:23.8%; display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.2%; align-items:stretch; }
.s5-card { position:relative; min-width:0; padding:1.2cqh 1.8cqw 1.3cqh; border:.28cqw solid #b99462; border-radius:2.8cqw; background:linear-gradient(180deg,rgba(255,249,236,.98),rgba(242,224,190,.98)); box-shadow:0 .65cqh 1cqh rgba(0,0,0,.35),inset 0 0 0 .23cqw rgba(255,255,255,.65); display:flex; flex-direction:column; align-items:stretch; }
.s5-card h2 { margin:0; text-align:center; font-size:2.05cqw; letter-spacing:.16cqw; color:#583b29; white-space:nowrap; }
.s5-card h2 span { color:#b38a51; }
.s5-card p { margin:.6cqh 0 .75cqh; text-align:center; font-size:1.48cqw; line-height:1.2; }
.s5-choice { display:flex; align-items:center; gap:.65cqw; height:3.05cqh; margin-bottom:.35cqh; padding:0 .9cqw; border:1px solid #c8ad83; border-radius:1.15cqw; background:rgba(255,255,255,.4); font-size:1.45cqw; cursor:pointer; }
.s5-choice input { position:absolute; opacity:0; }
.s5-choice:has(input:checked) { border-color:#a97837; background:#fff4d8; box-shadow:inset 0 0 0 .15cqw #d6ad68; }
.s5-choice span { color:#c9685d; font-size:1.65cqw; }
.s5-field-label { margin:.12cqh .25cqw .25cqh; font-size:1.15cqw; }
.s5-field-label small { font-size:.85em; color:#896f5d; }
.s5-card select,.s5-card textarea { width:100%; border:1px solid #c8ad83; border-radius:1.15cqw; background:rgba(255,255,255,.56); color:#5c4332; font:inherit; outline:none; }
.s5-card select { height:3.1cqh; padding:0 .8cqw; font-size:1.25cqw; }
.s5-card textarea { flex:1; resize:none; min-height:7.8cqh; padding:1cqh 1cqw; font-size:1.28cqw; line-height:1.3; }
.s5-card select:focus,.s5-card textarea:focus { border-color:#a87434; box-shadow:0 0 0 .22cqw rgba(196,146,73,.3); }
.s5-count { margin-top:-1.85cqh; margin-right:.75cqw; text-align:right; font-size:1cqw; color:#9f8974; pointer-events:none; }
.s5-gold-button { margin-top:auto; min-height:3.55cqh; border:.2cqw solid #8a5e25; border-radius:1.2cqw; background:linear-gradient(#caa25f,#a77835); color:#fff6df; text-shadow:0 1px #6b461d; box-shadow:inset 0 0 0 .2cqw rgba(255,225,157,.35),0 .25cqh .35cqh rgba(86,51,17,.2); font-family:Georgia,"Times New Roman",serif; font-size:1.55cqw; cursor:pointer; transition:filter .15s,transform .15s; }
.s5-gold-button:hover { filter:brightness(1.08); transform:translateY(-1px); }
.s5-gold-button:active { transform:translateY(1px); }
.s5-gift img { width:54%; height:9.2cqh; margin:-.2cqh auto .2cqh; object-fit:contain; filter:drop-shadow(0 .35cqh .25cqh rgba(80,45,15,.28)); }
.s5-gift small { text-align:center; margin-top:.45cqh; font-size:1.05cqw; color:#85604a; }
.s5-thanks { position:absolute; z-index:15; top:78%; left:24%; width:52%; min-height:5%; padding:.6cqh 2cqw; border:.25cqw solid #9d7445; border-radius:1.5cqw; background:linear-gradient(180deg,rgba(105,72,42,.97),rgba(70,45,29,.97)); color:#f7dfb8; text-align:center; box-shadow:0 .4cqh .75cqh rgba(0,0,0,.35); }
.s5-thanks strong { display:block; font-size:1.8cqw; letter-spacing:.25cqw; }
.s5-thanks span { display:block; margin-top:.12cqh; font-size:1.12cqw; }
.s5-toast { position:absolute; z-index:120; left:50%; top:45%; transform:translate(-50%,-50%) scale(.92); width:72%; padding:2.2cqh 4cqw; border:.3cqw solid #c09a5f; border-radius:2.5cqw; background:linear-gradient(#fffaf0,#f0dcb4); color:#4b3121; text-align:center; box-shadow:0 1.2cqh 3cqh rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:.25s ease; }
.s5-toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.s5-toast strong { display:block; font-size:2.6cqw; margin-bottom:.7cqh; }
.s5-toast span { font-size:1.6cqw; line-height:1.35; }


/* =========================================================
   Final component polish
   One authoritative layer for navigation, modals, and menu.
   ========================================================= */
.quest-menu-panel {
  width:min(84%, 410px);
  border:1px solid rgba(164,119,61,.72);
  border-radius:0 26px 26px 0;
  overflow:hidden;
  box-shadow:18px 0 55px rgba(0,0,0,.34), inset -1px 0 rgba(255,255,255,.55);
}
.quest-menu-panel .card-body { display:flex; flex-direction:column; justify-content:center; }
.quest-menu-panel h2 { color:#4a2f20; letter-spacing:.03em; }
.quest-menu-panel .btn { min-height:46px; font-weight:700; }

.universal-nav-item::before {
  content:"";
  position:absolute;
  inset:1.5% 5% 0;
  z-index:0;
  border-radius:18% / 12%;
  background:rgba(255,250,238,0);
  transition:background .18s ease, box-shadow .18s ease;
}
.universal-nav-item:hover::before { background:rgba(255,250,238,.28); }
.universal-nav-item.is-active::before {
  background:rgba(255,247,225,.36);
  box-shadow:inset 0 0 0 1px rgba(188,139,62,.18);
}
.universal-nav-item.is-active .universal-stage-label { color:#3e281b; }
.universal-nav-item.is-active .universal-stage-icon { transform:translateY(-.12cqh) scale(1.025); }

.local-modal {
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:none;
  place-items:center;
  padding:clamp(18px,4vw,52px);
  pointer-events:none;
  isolation:isolate;
}
.local-modal.show { display:grid !important; pointer-events:auto !important; }
.local-modal-backdrop {
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(8,5,10,.78);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  cursor:pointer;
}
.local-modal-card {
  position:relative;
  z-index:2;
  width:min(88vw, 620px);
  max-height:88vh;
  overflow:auto;
  padding:clamp(22px,4vw,34px);
  text-align:center;
  border-radius:26px;
  box-shadow:0 28px 90px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.6);
  scrollbar-width:thin;
}
.local-modal-media {
  margin:0 0 18px;
  width:100%;
  border:1px solid rgba(177,128,68,.42);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(241,224,190,.7));
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.3);
}
.local-modal-media[hidden] { display:none !important; }
.local-modal-media img {
  display:block;
  width:100%;
  height:auto;
  max-height:52vh;
  padding:12px;
  object-fit:contain;
}
.local-modal-media figcaption {
  padding:0 14px 12px;
  color:#76543d;
  font-size:.9rem;
}
.local-modal-copy h2 { margin:0 34px 12px; color:#4b2e1f; line-height:1.15; }
.local-modal-body { margin:0 0 22px; color:#5b4030; line-height:1.55; }
.local-modal-card > .btn { min-width:144px; min-height:42px; font-weight:700; }
.local-close {
  position:absolute !important;
  z-index:4 !important;
  top:17px !important;
  right:18px !important;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(255,255,255,.46);
}
body.modal-open-local { overflow:hidden; }

#stage4Scene .s4-detail-row:last-child .s4-detail-value span {
  font-size:1.34cqw;
  line-height:1.16;
  margin-top:.2cqh;
}
#stage4Scene .s4-detail-row:last-child .s4-detail-value strong { font-size:1.82cqw; }

@media (max-width:480px) {
  .universal-stage-label { font-size:1.58cqw; }
  .local-modal-card { width:min(92vw,620px); border-radius:20px; }
  .local-modal-media img { padding:8px; }
}

@media (max-width:480px) {
  .loading-label { font-size:3.2cqw; }
  .loading-percent { font-size:2.8cqw; }
}

/* =========================================================
   ADVENTURE ENHANCEMENT LAYER V2
   Passport, quests, inventory, ambience, progress and Guild Hall
   ========================================================= */
.adventure-hud {
  position:absolute; z-index:78; right:1.2%; top:9.2%; display:flex; flex-direction:column; gap:.55cqh;
  pointer-events:auto;
}
.adventure-hud[hidden] { display:none !important; }
.hud-button {
  width:6.4cqw; min-width:40px; aspect-ratio:1; padding:.35cqh .35cqw; border:.2cqw solid rgba(187,145,76,.72);
  border-radius:50%; background:linear-gradient(180deg,rgba(255,249,235,.94),rgba(237,215,176,.92));
  color:#563b28; box-shadow:0 .28cqh .55cqh rgba(54,31,14,.22),inset 0 0 0 .15cqw rgba(255,255,255,.7);
  display:grid; place-items:center; cursor:pointer; transition:transform .18s ease,filter .18s ease,opacity .18s;
}
.hud-button span { display:block; font-size:2.45cqw; line-height:1; }
.hud-button small { display:none; }
.hud-button:hover { transform:translateX(-.18cqw) scale(1.05); filter:brightness(1.05); }
.hud-button:focus-visible { outline:.32cqw solid rgba(255,227,145,.95); outline-offset:.25cqw; }
.hud-music { margin-top:.7cqh; }

.journey-toast {
  position:absolute; z-index:190; left:50%; top:8.8%; width:min(74%,620px); padding:1.05cqh 3.5cqw;
  transform:translate(-50%,-150%) scale(.94); opacity:0; pointer-events:none;
  color:#4d311f; text-align:center; border:.25cqw solid #c39a5c; border-radius:2.2cqw;
  background:linear-gradient(180deg,rgba(255,251,241,.98),rgba(241,220,182,.97));
  box-shadow:0 .8cqh 2.4cqh rgba(17,10,5,.38), inset 0 0 0 .18cqw rgba(255,255,255,.65);
  transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.journey-toast.is-visible { opacity:1; transform:translate(-50%,0) scale(1); }
.journey-toast strong { display:block; font-size:2.25cqw; letter-spacing:.06em; }
.journey-toast span { display:block; margin-top:.28cqh; font-size:1.45cqw; line-height:1.25; }
.journey-toast.is-collect { border-color:#d7ad5f; box-shadow:0 0 1.5cqh rgba(245,203,111,.45),0 .8cqh 2.4cqh rgba(17,10,5,.38); }
.journey-toast.is-achievement { color:#fff0c8; border-color:#e0b86a; background:linear-gradient(180deg,#725231,#3c281a); }

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation:none !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }

.title-countdown {
  position:absolute; z-index:19; left:22%; width:56%; top:76.4%; min-height:4.25%; padding:.5cqh 2cqw;
  text-align:center; color:#5d3d28; border:.16cqw solid rgba(187,145,76,.48); border-radius:999px;
  background:linear-gradient(180deg,rgba(255,249,236,.84),rgba(241,220,183,.8));
  box-shadow:0 .28cqh .5cqh rgba(62,36,18,.16); backdrop-filter:blur(3px);
}
.title-countdown .countdown-kicker { display:block; font-size:1.02cqw; letter-spacing:.14em; color:#977040; }
.title-countdown strong { display:block; margin-top:.12cqh; font-size:1.75cqw; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.title-mode-hint { position:absolute; z-index:18; left:25%; width:50%; top:86.5%; text-align:center; color:#76563d; pointer-events:none; }
.title-mode-hint span { display:block; font-size:1.25cqw; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.title-mode-hint small { display:none; }

.worldmap-progress-card {
  position:absolute; z-index:22; left:3.5%; top:76.6%; width:28%; padding:.65cqh 1.25cqw .75cqh;
  border:.2cqw solid #c09a62; border-radius:1.5cqw; color:#553722;
  background:linear-gradient(180deg,rgba(255,248,233,.94),rgba(239,217,180,.93));
  box-shadow:0 .35cqh .7cqh rgba(46,28,13,.2);
}
.worldmap-progress-card span { display:block; font-size:1.12cqw; letter-spacing:.08em; text-transform:uppercase; }
.worldmap-progress-card strong { display:block; margin:.15cqh 0 .4cqh; font-size:1.55cqw; }
.worldmap-progress-card i,.menu-progress-track,.quest-entry i,.s3-discovery-progress i { display:block; height:.6cqh; overflow:hidden; border-radius:999px; background:rgba(91,61,34,.17); }
.worldmap-progress-card i b,.menu-progress-track span,.quest-entry i b,.s3-discovery-progress i b { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b27634,#f0c86e); transition:width .35s ease; }
.map-stage.is-visited::after,.universal-nav-item.is-visited::after {
  content:"✓"; position:absolute; z-index:12; right:4%; top:1%; display:grid; place-items:center; width:2.7cqw; aspect-ratio:1;
  border-radius:50%; border:.16cqw solid #fff1bd; background:#8a6d38; color:#fff7df; font-size:1.4cqw; box-shadow:0 .2cqh .38cqh rgba(48,29,13,.28);
}
.map-stage.is-complete::after,.universal-nav-item.is-complete::after { background:#4f8c5f; box-shadow:0 0 .8cqh rgba(111,193,123,.5); }
.route-dot.is-travelled { filter:hue-rotate(35deg) saturate(1.25) drop-shadow(0 0 .5cqh rgba(255,223,118,.8)); }

.secret-heart {
  position:absolute; z-index:35; width:4.2cqw; aspect-ratio:1; padding:0; border:0; background:transparent; cursor:pointer;
  color:#e67f87; filter:drop-shadow(0 0 .7cqh rgba(255,191,190,.62)); animation:secretHeartFloat 2.8s ease-in-out infinite;
}
.secret-heart span { display:block; font-size:3cqw; line-height:1; text-shadow:0 1px #fff4e5; }
.secret-heart i { position:absolute; right:-.2cqw; top:-.2cqh; display:grid; place-items:center; width:1.4cqw; aspect-ratio:1; border-radius:50%; background:#fff0c9; color:#986e35; font-size:.9cqw; font-style:normal; }
.secret-heart:hover { transform:scale(1.14); }
.secret-heart.is-collected { opacity:0; visibility:hidden; pointer-events:none; transform:scale(.3); transition:.35s ease; }
.secret-heart-stage1 { left:8.5%; top:48%; }
.secret-heart-stage2 { right:8.8%; top:29%; }
.secret-heart-stage3 { left:5.5%; top:66%; }
.secret-heart-stage4 { right:5.7%; top:36.5%; }
.secret-heart-stage5 { left:7%; top:48%; }
@keyframes secretHeartFloat { 0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-.5cqh) rotate(7deg)} }



.npc-butterfly { right:8%; top:48%; }
.npc-bird-guide { right:18%; top:63%; font-size:2cqw; }
.npc-camera { right:3.8%; top:70.5%; }
.npc-castle-guard { left:5.2%; top:43.5%; }
.npc-guild-cat { right:6%; top:47%; }
@keyframes npcBob { 0%,100%{transform:translateY(0)}50%{transform:translateY(-.4cqh)} }

.s3-discovery-progress {
  position:absolute; z-index:24; left:34%; top:51.4%; width:32%; padding:.45cqh 1.2cqw .65cqh;
  text-align:center; color:#5b3c28; border:.18cqw solid #bd9660; border-radius:1.3cqw; background:rgba(255,244,223,.91);
}
.s3-discovery-progress span { display:block; font-size:1.05cqw; letter-spacing:.08em; text-transform:uppercase; }
.s3-discovery-progress strong { display:block; font-size:1.45cqw; margin:.12cqh 0 .3cqh; }
.s3-discovery-progress.is-complete { box-shadow:0 0 1.1cqh rgba(242,198,93,.55); }
.s3-touch-hint { position:absolute; z-index:23; left:22%; right:22%; top:56.8%; margin:0; text-align:center; color:#fff2d6; font-size:1.15cqw; text-shadow:0 1px 3px #4a2816; }
.s3-card.is-collected { filter:drop-shadow(0 0 .8cqh rgba(255,214,110,.78)); }
.s3-card.is-collected::after { content:"✓"; position:absolute; z-index:4; right:4%; top:3%; width:2.3cqw; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#589463; color:#fff; font-size:1.3cqw; border:.15cqw solid #fff0be; }
.s3-camera { cursor:pointer; }

.guild-guest-board {
  position:absolute; z-index:13; left:27.5%; top:46%; width:45%; min-height:5.7%; padding:.55cqh 1.2cqw;
  border:.2cqw solid #b68d58; border-radius:1.45cqw; background:linear-gradient(180deg,rgba(255,247,231,.95),rgba(232,205,162,.94));
  box-shadow:0 .35cqh .65cqh rgba(30,17,8,.25); color:#4c3020; text-align:center;
}
.guild-guest-board header { display:flex; justify-content:space-between; align-items:center; font-size:1.05cqw; letter-spacing:.08em; }
.guild-guest-board header strong { color:#8b663b; }
.guild-avatar-row { display:flex; justify-content:center; gap:.45cqw; margin:.35cqh 0 .2cqh; min-height:2.7cqh; }
.guild-mini-avatar { position:relative; width:4.4cqw; aspect-ratio:1; padding:0; border:.14cqw solid #c3a06a; border-radius:50%; background:#fff4dc; cursor:pointer; }
.guild-mini-avatar img { width:100%; height:100%; object-fit:contain; }
.guild-mini-avatar span { display:none; }
.guild-mini-avatar.is-you { box-shadow:0 0 .7cqh rgba(248,204,99,.85); border-color:#e0b85d; }
.guild-guest-board p { margin:.1cqh 0 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.88cqw; color:#72513a; }

/* Rich Journey Menu */
.quest-menu-panel { width:min(90%,430px); overflow:auto; }
.quest-menu-content { min-height:100%; padding:2.2cqh 2.6cqw 3cqh; }
.quest-menu-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.2cqh; }
.quest-menu-header span { font-size:1.05cqw; letter-spacing:.15em; color:#987142; }
.quest-menu-header h2 { margin:.15cqh 0 0; font-size:3.1cqw; color:#4b3020; }
.quest-menu-x { width:4.5cqw; aspect-ratio:1; border:0; border-radius:50%; background:rgba(139,95,47,.12); color:#5c3c27; font-size:3cqw; cursor:pointer; }
.menu-guest-summary { display:grid; grid-template-columns:6.8cqw 1fr auto; align-items:center; gap:1.4cqw; padding:1.05cqh 1.4cqw; border:.18cqw solid #c7a16b; border-radius:1.7cqw; background:rgba(255,255,255,.42); }
.menu-guest-summary img { width:6.8cqw; height:6.8cqw; object-fit:contain; border-radius:50%; background:#f8e6c1; }
.menu-guest-summary strong,.menu-guest-summary span { display:block; }
.menu-guest-summary strong { font-size:1.85cqw; }.menu-guest-summary span { margin-top:.2cqh; font-size:1.1cqw; color:#8a684c; }
.menu-guest-summary b { display:grid; place-items:center; width:5.2cqw; aspect-ratio:1; border-radius:50%; background:#6d4a2d; color:#fff1cf; font-size:1.35cqw; }
.menu-progress-track { margin:.65cqh .4cqw 1.2cqh; height:.7cqh; }
.menu-hub-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7cqh .7cqw; }
.menu-hub-grid button { min-height:7.4cqh; padding:.7cqh 1cqw; border:.18cqw solid #c7a16b; border-radius:1.35cqw; background:linear-gradient(180deg,rgba(255,250,238,.95),rgba(237,215,177,.9)); color:#4e3221; text-align:left; cursor:pointer; }
.menu-hub-grid button span { float:left; margin-right:1cqw; font-size:2.6cqw; }.menu-hub-grid button b,.menu-hub-grid button small { display:block; }.menu-hub-grid button b { font-size:1.45cqw; }.menu-hub-grid button small { margin-top:.2cqh; color:#876b55; font-size:.95cqw; }
.menu-quick-actions { display:grid; gap:.58cqh; margin-top:1.2cqh; }
.menu-quick-actions button { min-height:3.8cqh; border:.15cqw solid #bba17e; border-radius:1.1cqw; background:rgba(255,255,255,.38); color:#5a3d2b; cursor:pointer; font-size:1.3cqw; }
.menu-quick-actions .menu-action-primary { color:#fff3d8; border-color:#7f5728; background:linear-gradient(#c79d59,#96652e); }
#menuResetJourney { color:#9b433a; }

/* Adventure Hub */
.adventure-modal,.choice-modal { position:fixed; inset:0; z-index:500; visibility:hidden; opacity:0; pointer-events:none; display:grid; place-items:center; padding:18px; transition:opacity .22s ease,visibility 0s linear .24s; }
.adventure-modal.is-open,.choice-modal.is-open { visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; }
.adventure-modal-backdrop,.choice-modal-backdrop { position:absolute; inset:0; background:rgba(5,8,16,.74); backdrop-filter:blur(5px); }
.adventure-modal-card { position:relative; width:min(94vw,680px); max-height:min(90vh,920px); overflow:hidden; border:.24cqw solid #c69b58; border-radius:24px; background:linear-gradient(180deg,#fffaf0,#efd9b2); box-shadow:0 28px 80px rgba(0,0,0,.55); color:#4c3121; }
.adventure-modal-card>header { display:flex; justify-content:space-between; align-items:flex-start; padding:18px 22px 14px; border-bottom:1px solid rgba(175,133,74,.3); background:linear-gradient(180deg,#6a4a30,#4a3021); color:#fff0cc; }
.adventure-modal-card>header span { font-size:.72rem; letter-spacing:.17em; opacity:.8; }.adventure-modal-card>header h2 { margin:3px 0 0; font-size:1.45rem; }
.adventure-modal-card>header button { width:40px; height:40px; border:1px solid rgba(255,235,190,.35); border-radius:50%; background:rgba(255,255,255,.08); color:#fff3d5; font-size:1.8rem; cursor:pointer; }
.adventure-tabs { display:grid; grid-template-columns:repeat(4,1fr); background:#ead3ab; border-bottom:1px solid rgba(163,121,63,.3); }
.adventure-tabs button { padding:11px 4px; border:0; border-right:1px solid rgba(157,115,60,.18); background:transparent; color:#68472f; cursor:pointer; font-weight:700; }
.adventure-tabs button.is-active { background:#fff4dc; box-shadow:inset 0 -3px #b77e35; }
.adventure-hub-content { max-height:68vh; overflow:auto; padding:20px; }
.passport-card { overflow:hidden; border:2px solid #bf9457; border-radius:20px; background:linear-gradient(145deg,#fff8e8,#e8cca0); box-shadow:inset 0 0 0 5px rgba(255,255,255,.4); }
.passport-topline { display:flex; justify-content:space-between; padding:10px 15px; color:#f7e7c2; background:#57402f; font-size:.78rem; letter-spacing:.1em; }
.passport-identity { display:grid; grid-template-columns:100px 1fr 70px; align-items:center; gap:14px; padding:18px; }
.passport-avatar { display:grid; place-items:center; width:96px; height:96px; border:2px solid #c69d62; border-radius:50%; background:#faeacb; }.passport-avatar img { max-width:90%; max-height:90%; }
.passport-identity small { letter-spacing:.12em; color:#94704a; }.passport-identity h3 { margin:3px 0; font-size:1.65rem; }.passport-identity p { margin:0; color:#76543b; }
.passport-seal { display:grid; place-items:center; width:68px; height:68px; border-radius:50%; border:3px double #9e6a2e; color:#8b5a28; font-weight:700; font-size:1.35rem; transform:rotate(-7deg); }.passport-seal small{font-size:.7rem}
.passport-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(157,113,57,.28); border-bottom:1px solid rgba(157,113,57,.28); }.passport-stats div { padding:12px 5px; text-align:center; border-right:1px solid rgba(157,113,57,.22); }.passport-stats div:last-child{border-right:0}.passport-stats strong,.passport-stats span{display:block}.passport-stats strong{font-size:1.15rem}.passport-stats span{font-size:.68rem;text-transform:uppercase;color:#876644}
.passport-rsvp { display:flex; justify-content:space-between; padding:13px 18px; font-size:.85rem; }.passport-rsvp span{letter-spacing:.1em}.passport-rsvp strong{color:#745028}
.hub-section-block { margin-top:18px; }.hub-section-block>header { display:flex; justify-content:space-between; align-items:center; }.hub-section-block h3{margin:0;font-size:1.1rem}.achievement-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}.achievement-list li{display:flex;gap:10px;padding:10px 12px;border:1px solid rgba(177,131,69,.32);border-radius:12px;background:rgba(255,255,255,.38)}.achievement-list li>span{color:#c3923e}.achievement-list b,.achievement-list small{display:block}.achievement-list small{margin-top:2px;color:#7b624f}.empty-entry{color:#8c7867;font-style:italic}
.hub-action-row { display:flex; gap:10px; margin-top:16px; }.hub-action-row button { flex:1; min-height:44px; border:1px solid #a97737; border-radius:12px; background:linear-gradient(#fff2cf,#e5bf78); color:#51341f; cursor:pointer; font-weight:700; }
.quest-log { display:grid; gap:10px; }.quest-entry { display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; padding:12px; border:1px solid rgba(180,137,75,.34); border-radius:13px; background:rgba(255,255,255,.38); }.quest-entry.is-complete{background:rgba(223,242,214,.62);border-color:rgba(94,143,84,.45)}.quest-check{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#7b5a3d;color:#fff0d0}.quest-entry.is-complete .quest-check{background:#59845d}.quest-entry h3{margin:0;font-size:1rem}.quest-entry p{margin:3px 0 7px;color:#7a6453;font-size:.83rem}.quest-entry strong{font-size:.82rem}.quest-entry i{height:6px}
.inventory-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.inventory-item { display:grid; grid-template-columns:52px 1fr; gap:10px; min-height:94px; padding:12px; border:1px solid rgba(180,137,75,.34); border-radius:14px; background:rgba(255,255,255,.4); }.inventory-item>span{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#f2d49d;font-size:1.7rem}.inventory-item h3{margin:0;font-size:.95rem}.inventory-item p{margin:4px 0 0;color:#786453;font-size:.78rem;line-height:1.3}.inventory-item.is-locked{filter:grayscale(.9);opacity:.58}
.settings-list { display:grid; gap:10px; }.settings-list article { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:13px; border:1px solid rgba(180,137,75,.34); border-radius:13px; background:rgba(255,255,255,.4); }.settings-list h3{margin:0;font-size:1rem}.settings-list p{margin:3px 0 0;font-size:.8rem;color:#79634f}.setting-toggle,.setting-cycle{min-width:72px;padding:8px 12px;border:1px solid #ac7b3d;border-radius:999px;background:#e2c396;color:#573821;cursor:pointer;text-transform:capitalize}.setting-toggle.is-on{background:#5e8b61;color:white;border-color:#4f7652}.settings-danger{margin-top:18px;padding-top:15px;border-top:1px solid rgba(167,122,62,.3)}.settings-danger button{width:100%;padding:11px;border:1px solid #b4645c;border-radius:11px;background:rgba(185,79,70,.09);color:#9a443e;cursor:pointer}

.choice-card { position:relative; width:min(92vw,500px); padding:28px 24px; text-align:center; color:#4b3020; border:2px solid #c99e5f; border-radius:22px; background:linear-gradient(180deg,#fffaf0,#edd5aa); box-shadow:0 25px 70px rgba(0,0,0,.55); }.choice-heart{display:block;color:#df7b82;font-size:2.8rem}.choice-eyebrow{margin:5px 0;color:#977040;font-size:.72rem;letter-spacing:.15em}.choice-card h2{margin:8px 0;font-size:1.55rem}.choice-card>p:not(.choice-eyebrow){margin:0 0 16px;color:#765e4b}.choice-options{display:grid;gap:9px}.choice-options button{padding:12px;border:1px solid #ad7c3b;border-radius:12px;background:linear-gradient(#fff2cf,#e5bf78);color:#50341f;cursor:pointer;font-weight:700}.choice-options button:last-child{background:linear-gradient(#f3d8c7,#e7ae92)}

.scene-curtain.transition-stage1 { background:radial-gradient(circle,#536d40,#152313 75%); }.scene-curtain.transition-stage2 { background:radial-gradient(circle,#85653f,#24170e 75%); }.scene-curtain.transition-stage3 { background:radial-gradient(circle,#5a4133,#1b100c 75%); }.scene-curtain.transition-stage4 { background:radial-gradient(circle,#325b89,#102039 75%); }.scene-curtain.transition-stage5 { background:radial-gradient(circle,#69482d,#1d120b 75%); }
.scene-curtain.transition-stage2 span,.scene-curtain.transition-stage3 span,.scene-curtain.transition-stage4 span,.scene-curtain.transition-stage5 span { color:#f5d58b; }

.post-wedding-mode .title-countdown { border-color:#c49a5c; background:linear-gradient(180deg,rgba(255,247,228,.94),rgba(229,199,145,.91)); }

@media (max-width: 560px) {
  .adventure-hud { right:.5%; top:10.5%; gap:.35cqh; }.hud-button{width:8.8cqw}.hud-button span{font-size:3.4cqw}
  .journey-toast { top:8%; width:86%; }.journey-toast strong{font-size:3.3cqw}.journey-toast span{font-size:2.25cqw}
  .title-countdown { left:18%; width:64%; }.title-countdown .countdown-kicker{font-size:1.6cqw}.title-countdown strong{font-size:2.35cqw}
  .worldmap-progress-card { width:34%; right:3%; }.worldmap-progress-card span{font-size:1.7cqw}.worldmap-progress-card strong{font-size:2.15cqw}
  .secret-heart{width:6.4cqw}.secret-heart span{font-size:4.8cqw}.secret-heart i{width:2.2cqw;font-size:1.4cqw}
  .s3-discovery-progress{left:29%;width:42%}.s3-discovery-progress span{font-size:1.7cqw}.s3-discovery-progress strong{font-size:2.1cqw}.s3-touch-hint{font-size:1.7cqw}
  .guild-guest-board{left:22%;width:56%}.guild-guest-board header{font-size:1.5cqw}.guild-mini-avatar{width:6cqw}.guild-guest-board p{font-size:1.25cqw}
  .quest-menu-header span{font-size:1.7cqw}.quest-menu-header h2{font-size:4.7cqw}.quest-menu-x{width:7cqw;font-size:4.5cqw}.menu-guest-summary{grid-template-columns:10cqw 1fr auto}.menu-guest-summary img{width:10cqw;height:10cqw}.menu-guest-summary strong{font-size:2.8cqw}.menu-guest-summary span{font-size:1.75cqw}.menu-guest-summary b{width:8cqw;font-size:2cqw}.menu-hub-grid button{min-height:9.2cqh}.menu-hub-grid button span{font-size:4cqw}.menu-hub-grid button b{font-size:2.25cqw}.menu-hub-grid button small{font-size:1.55cqw}.menu-quick-actions button{font-size:2cqw}
  .adventure-modal { padding:9px; }.adventure-modal-card{width:98vw;max-height:94vh;border-radius:16px}.adventure-modal-card>header{padding:14px}.adventure-hub-content{padding:13px;max-height:72vh}.adventure-tabs button{font-size:.74rem;padding:9px 2px}.passport-identity{grid-template-columns:74px 1fr 54px;padding:13px;gap:9px}.passport-avatar{width:72px;height:72px}.passport-identity h3{font-size:1.15rem}.passport-seal{width:52px;height:52px;font-size:1rem}.passport-stats span{font-size:.55rem}.inventory-grid{grid-template-columns:1fr}
}

/* =========================================================
   V3 POLISH — real asset controls, cleaner invitation UI,
   stronger modal stacking, and app-like refinement.
   ========================================================= */
.quest-menu,
.local-modal,
.choice-modal,
.adventure-modal { z-index: 3200 !important; }
.quest-menu { z-index: 3100 !important; }
.universal-stage-nav { z-index: 1200; }
.universal-screen-frame { z-index: 1190; pointer-events:none; }
.quest-menu-panel,
.local-modal-card,
.choice-card,
.adventure-modal-card { isolation:isolate; pointer-events:auto; }
.quest-menu-content,
.adventure-hub-content,
.local-modal-card { scrollbar-gutter: stable both-edges; }
body.modal-open-local .universal-stage-nav,
body.adventure-modal-open .universal-stage-nav { pointer-events:none; opacity:.4; }

.adventure-hud {
  z-index: 1600;
  right: 1.15%;
  top: 10.6%;
  gap: .58cqh;
}
.hud-button {
  width: 7.5cqw;
  min-width: 56px;
  min-height: 7.2cqw;
  aspect-ratio: auto;
  padding: .5cqh .42cqw .56cqh;
  border-radius: 1.45cqw;
  grid-template-rows: auto auto;
  gap: .18cqh;
  background: linear-gradient(180deg, rgba(255, 252, 246, .98), rgba(236, 216, 180, .96));
  box-shadow: 0 .42cqh .9cqh rgba(54, 31, 14, .20), inset 0 0 0 .13cqw rgba(255,255,255,.92);
}
.hud-button small {
  display:block;
  font-size: .92cqw;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .02em;
  color:#563b28;
}
.hud-button:hover { transform: translateX(-.14cqw) translateY(-.06cqh) scale(1.03); }
.hud-button.is-muted { opacity: .86; filter: saturate(.82); }
.hud-icon-wrap {
  display:grid;
  place-items:center;
  width:3.35cqw;
  min-width:26px;
  aspect-ratio:1;
  margin-inline:auto;
  border-radius:50%;
  border:.14cqw solid rgba(193,147,67,.52);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(248,232,198,.98) 42%, rgba(232,203,152,.98) 100%);
  box-shadow: inset 0 0 0 .1cqw rgba(255,255,255,.72), 0 .18cqh .32cqh rgba(73,43,20,.16);
}
.hud-icon-wrap img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 .08cqh .12cqh rgba(71,41,15,.18)); }
#persistentMusicButton.is-muted .hud-icon-wrap img { filter: grayscale(1) opacity(.72); }

.secret-heart {
  width: 4.65cqw;
  display:grid;
  place-items:center;
}
.secret-heart-img { width:100%; height:100%; object-fit:contain; display:block; }
.secret-heart i {
  right:-.05cqw;
  top:.15cqh;
  width:1.45cqw;
  border:.08cqw solid rgba(171,125,58,.32);
  box-shadow:0 .12cqh .2cqh rgba(70,42,17,.18);
}





.menu-hub-grid button {
  display:grid;
  grid-template-columns: 3.4cqw 1fr;
  align-items:center;
  gap:.8cqw;
  min-height:7.9cqh;
  padding:.7cqh .95cqw;
}
.menu-card-icon {
  width:3.25cqw;
  min-width:28px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:1cqw;
  border:.12cqw solid rgba(191,149,80,.46);
  background:linear-gradient(180deg,#fffdf9,#efdcb6);
  box-shadow: inset 0 0 0 .09cqw rgba(255,255,255,.8);
}
.menu-card-icon img { width:74%; height:74%; object-fit:contain; }
.menu-card-copy { display:block; }
.menu-card-copy b, .menu-card-copy small { display:block; }
.menu-card-copy b { font-size:1.34cqw; }
.menu-card-copy small { margin-top:.18cqh; font-size:.9cqw; color:#846a55; }

.adventure-modal-card {
  width:min(94vw, 760px);
  max-height:min(92vh, 940px);
  box-shadow: 0 34px 94px rgba(0,0,0,.58);
}
.adventure-tabs button { font-size:.92rem; }
.passport-card { border-color:#c49b5c; background:linear-gradient(145deg,#fff9ef,#ecd5ad); }
.passport-topline { padding:11px 16px; }
.passport-identity { align-items:center; }
.passport-rsvp { background:rgba(255,255,255,.2); }
.achievement-list li { align-items:flex-start; }
.achievement-list li>span {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#fff0cd,#e0ba6f);
  color:#7d5724;
  flex:0 0 auto;
}

.inventory-grid { gap:12px; }
.inventory-item {
  grid-template-columns: 68px 1fr;
  gap: 12px;
  min-height: 108px;
  align-items: center;
  padding: 13px;
}
.inventory-item-asset {
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(180deg,#fffdf8,#f0ddb6);
  border:1px solid rgba(185,141,70,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}
.inventory-item-asset img { width:82%; height:82%; object-fit:contain; }
.inventory-item-asset--locked img { filter:grayscale(1) opacity(.58); }
.inventory-titlebar {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.inventory-titlebar b {
  flex:0 0 auto;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(184,137,62,.14);
  color:#885a28;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.inventory-item.is-locked .inventory-titlebar b {
  background:rgba(98,82,67,.14);
  color:#7d6d60;
}

.local-modal-card {
  width:min(92vw, 760px);
  max-width:760px;
  display:grid;
  grid-template-columns:minmax(0, 250px) minmax(0, 1fr);
  align-items:stretch;
  gap:0;
  overflow:hidden;
}
.local-modal:not(.has-image) .local-modal-card { grid-template-columns:1fr; }
.local-modal-media {
  margin:0;
  min-height:100%;
  background:linear-gradient(180deg, rgba(255,249,235,.95), rgba(239,219,179,.9));
  border-right:1px solid rgba(186,143,72,.2);
}
.local-modal-copy { padding:26px 28px 18px; }
.local-modal-card>.btn { margin:0 28px 24px; justify-self:start; }
.local-close { z-index:4; }

.s5-gold-button { font-size:1.36cqw; }
.s5-gold-button img { width:1.7cqw; height:1.7cqw; object-fit:contain; }

@media (max-width: 900px) {
  .local-modal-card,
  .local-modal:not(.has-image) .local-modal-card { grid-template-columns:1fr; }
  .local-modal-media { border-right:0; border-bottom:1px solid rgba(186,143,72,.2); }
}

@media (max-width: 560px) {
  .adventure-hud { right:.55%; top:10.9%; }
  .hud-button { width:10.2cqw; min-height:8.9cqw; border-radius:2.05cqw; }
  .hud-button small { font-size:1.45cqw; }
  .hud-icon-wrap { width:4.6cqw; }
  .secret-heart { width:6.6cqw; }
  
  
  .menu-hub-grid button { grid-template-columns:5.4cqw 1fr; }
  .menu-card-icon { width:5.1cqw; }
  .menu-card-copy b { font-size:2.15cqw; }
  .menu-card-copy small { font-size:1.5cqw; }
  .inventory-item { grid-template-columns:56px 1fr; min-height:96px; }
  .inventory-item-asset { width:52px; height:52px; }
  .inventory-titlebar { flex-direction:column; align-items:flex-start; gap:5px; }
  .s5-gold-button { font-size:2.05cqw; }
}

/* V4 refinement: fix overlapping HUD/menu inventory icons */
.hud-button > span { float:none !important; margin-right:0 !important; font-size:inherit !important; line-height:normal !important; }
.hud-button .hud-icon-wrap {
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:clamp(28px, 3.2cqw, 48px) !important;
  height:clamp(28px, 3.2cqw, 48px) !important;
  min-width:unset !important;
  margin:0 auto !important;
  overflow:hidden;
  font-size:0 !important;
}
.hud-button .hud-label {
  display:block !important;
  margin-top:2px !important;
  font-size:clamp(10px, .88cqw, 13px) !important;
  line-height:1.05 !important;
  text-align:center !important;
  white-space:nowrap;
}
.hud-button {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  overflow:hidden;
}
.hud-button img { display:block; max-width:76%; max-height:76%; object-fit:contain; }

.menu-hub-grid button > span { float:none !important; margin-right:0 !important; font-size:inherit !important; }
.menu-hub-grid button {
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  overflow:hidden;
}
.menu-card-icon {
  flex:0 0 clamp(38px,3.25cqw,54px) !important;
  width:clamp(38px,3.25cqw,54px) !important;
  height:clamp(38px,3.25cqw,54px) !important;
  min-width:unset !important;
  min-height:unset !important;
  margin:0 !important;
  overflow:hidden;
  border-radius:14px !important;
}
.menu-card-icon img {
  width:76% !important;
  height:76% !important;
  object-fit:contain !important;
  display:block;
}
.menu-card-copy {
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  min-width:0;
  flex:1 1 auto;
}
.menu-card-copy b,
.menu-card-copy small {
  display:block !important;
  float:none !important;
}
.menu-card-copy b {
  font-size:clamp(13px,1.22cqw,18px) !important;
  line-height:1.12 !important;
}
.menu-card-copy small {
  margin-top:0 !important;
  font-size:clamp(10px,.84cqw,13px) !important;
  line-height:1.22 !important;
}

.inventory-grid { gap:12px !important; }
.inventory-item {
  display:grid !important;
  grid-template-columns:64px minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  min-height:110px !important;
  overflow:hidden;
}
.inventory-item-asset {
  width:64px !important;
  height:64px !important;
  border-radius:16px !important;
  overflow:hidden;
}
.inventory-item-asset img {
  width:80% !important;
  height:80% !important;
  object-fit:contain !important;
  display:block;
}
.inventory-item h3 {
  line-height:1.15 !important;
  font-size:clamp(14px,.98rem,17px) !important;
}
.inventory-item p {
  margin-top:6px !important;
  font-size:clamp(11px,.81rem,13px) !important;
  line-height:1.35 !important;
}
.inventory-titlebar {
  align-items:center !important;
}

@media (max-width: 560px) {
  .menu-hub-grid button { gap:10px !important; }
  .menu-card-icon { flex-basis:44px !important; width:44px !important; height:44px !important; }
  .menu-card-copy b { font-size:13px !important; }
  .menu-card-copy small { font-size:10px !important; }
  .inventory-item { grid-template-columns:56px minmax(0,1fr) !important; min-height:96px !important; }
  .inventory-item-asset { width:56px !important; height:56px !important; }
  .hud-button .hud-label { font-size:10px !important; }
}


/* =========================================================
   V5 CLEAN UI REVISION
   Requested refinements: cleaner Stage 1 typography, a lower
   Stage 3 discovery panel, and removal of duplicated floating UI.
   ========================================================= */

/* All profile, agenda, keepsake and music actions remain available
   from the main Menu, so the duplicated side HUD stays removed. */
.adventure-hud,
.secret-heart,


/* Stage 1 — clearer, calmer copy hierarchy. */
#stage1Scene .s1-heading > p {
  width:76%;
  max-width:76%;
  margin-top:.24cqh;
  font-size:1.54cqw;
  line-height:1.28;
  font-weight:600;
  letter-spacing:.01em;
  text-wrap:balance;
}
#stage1Scene .s1-card-copy {
  inset:7.4% 8.4% 7.1%;
}
#stage1Scene .s1-card-copy header {
  height:22%;
  gap:3.6%;
}
#stage1Scene .s1-card-copy header > img {
  width:15.5%;
  height:78%;
}
#stage1Scene .s1-card-copy h2 {
  font-size:2.22cqw;
  letter-spacing:.065em;
}
#stage1Scene .s1-card-copy header p {
  margin:.3em 0 0;
  color:#8a643a;
  font-size:1.47cqw;
  font-style:italic;
  letter-spacing:.02em;
}
#stage1Scene .s1-card-rule {
  margin:1.1% 0 3.6%;
}
#stage1Scene .s1-stat {
  height:15.4%;
  grid-template-columns:11% 34% 1fr;
  column-gap:2.2%;
  font-size:1.46cqw;
}
#stage1Scene .s1-stat b {
  color:#7a542e;
  font-size:.92em;
  font-weight:700;
  letter-spacing:.035em;
  text-transform:uppercase;
}
#stage1Scene .s1-stat span {
  font-weight:600;
  color:#4b3021;
}
#stage1Scene .s1-skill {
  min-height:25%;
  grid-template-columns:12% 1fr;
  gap:2.2%;
  text-align:left;
  font-size:1.12cqw;
  line-height:1.2;
}
#stage1Scene .s1-skill p {
  display:flex;
  flex-direction:column;
  gap:.16cqh;
}
#stage1Scene .s1-skill b {
  color:#8d6434;
  font-size:.9em;
  letter-spacing:.045em;
  text-transform:uppercase;
}
#stage1Scene .s1-skill span {
  display:block;
  color:#4e3423;
  font-weight:600;
}

#stage1Scene .s1-family {
  top:66.25%;
  height:16.15%;
}
#stage1Scene .s1-family-title {
  width:54%;
  left:23%;
  top:-.5%;
  height:15%;
}
#stage1Scene .s1-family-panel-wrap {
  top:13.5%;
}
#stage1Scene .s1-family-col {
  top:13.5%;
  width:35.5%;
}
#stage1Scene .s1-family-left { left:2.5%; }
#stage1Scene .s1-family-right { right:2.5%; }
#stage1Scene .s1-family-name {
  height:24%;
  gap:3.2%;
  padding-bottom:2.1%;
  border-bottom-color:rgba(165,123,72,.3);
}
#stage1Scene .s1-family-name img {
  width:10.5%;
  height:92%;
}
#stage1Scene .s1-family-name h3 {
  font-size:1.34cqw;
  letter-spacing:.055em;
  white-space:nowrap;
}
#stage1Scene .s1-family-kicker { display:none; }
#stage1Scene .s1-family-parents {
  margin:5.3% 0 0;
  font-size:1.38cqw;
  line-height:1.22;
  font-weight:600;
}
#stage1Scene .s1-family-parents span,
#stage1Scene .s1-family-parents em {
  display:block;
}
#stage1Scene .s1-family-parents em {
  margin:.16cqh 0;
  color:#b08750;
  font-size:.92em;
  font-style:normal;
  font-weight:700;
}
#stage1Scene .s1-family-center {
  left:40.2%;
  width:19.6%;
  top:9%;
  height:82%;
}
#stage1Scene .s1-family-center p {
  left:12%;
  right:12%;
  top:28%;
  margin:0;
  font-size:1.04cqw;
  line-height:1.2;
  font-weight:600;
  text-wrap:balance;
}
#stage1Scene .s1-family-center p span,
#stage1Scene .s1-family-center p strong { display:block; }
#stage1Scene .s1-family-center p strong {
  margin-top:.2cqh;
  color:#7c5631;
  font-size:1.04em;
}
#stage1Scene .s1-family-plant {
  bottom:-2.5%;
  width:9.4%;
}

/* Stage 3 — centered memory discovery progress. */
#stage3Scene .s3-story { display:none !important; }
#stage3Scene .s3-discovery-progress {
  position:absolute;
  z-index:31;
  left:27.5%;
  top:75.65%;
  width:45%;
  min-height:6.65%;
  padding:.62cqh 2.1cqw .58cqh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  color:#5a3925;
  border:.18cqw solid #b98a4d;
  border-radius:1.65cqw;
  background:
    linear-gradient(180deg,rgba(255,252,241,.98),rgba(245,225,186,.97));
  box-shadow:
    inset 0 0 0 .15cqw rgba(255,255,255,.8),
    0 .42cqh .8cqh rgba(67,38,17,.2);
}
#stage3Scene .s3-discovery-progress::before,
#stage3Scene .s3-discovery-progress::after {
  content:"◇";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#b88b4d;
  font-size:1.3cqw;
}
#stage3Scene .s3-discovery-progress::before { left:1.15cqw; }
#stage3Scene .s3-discovery-progress::after { right:1.15cqw; }
#stage3Scene .s3-progress-kicker {
  display:block;
  margin-bottom:.16cqh;
  color:#a17a49;
  font-size:.72cqw;
  line-height:1;
  font-weight:700;
  letter-spacing:.14em;
}
#stage3Scene .s3-progress-main {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:1.15cqw;
  line-height:1;
}
#stage3Scene .s3-progress-main span {
  display:inline;
  font-size:1.42cqw;
  font-weight:700;
  letter-spacing:.025em;
  text-transform:none;
}
#stage3Scene .s3-progress-main strong {
  display:inline;
  margin:0;
  color:#926a39;
  font-size:1.54cqw;
  font-variant-numeric:tabular-nums;
}
#stage3Scene .s3-discovery-progress > i {
  display:block;
  width:78%;
  height:.46cqh;
  margin:.38cqh auto .28cqh;
  overflow:hidden;
  border-radius:999px;
  border:.08cqw solid rgba(145,100,50,.34);
  background:rgba(126,82,37,.16);
  box-shadow:inset 0 .09cqh .18cqh rgba(80,45,18,.18);
}
#stage3Scene .s3-discovery-progress > i b {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#b9833f,#e2b85f,#f3d58b);
  transition:width .35s ease;
}
#stage3Scene .s3-discovery-progress small {
  display:block;
  color:#806044;
  font-size:.79cqw;
  line-height:1.1;
  font-style:italic;
  letter-spacing:.01em;
}
#stage3Scene .s3-discovery-progress.is-complete {
  border-color:#c89d54;
  box-shadow:
    inset 0 0 0 .15cqw rgba(255,255,255,.82),
    0 0 1.15cqh rgba(238,195,95,.28),
    0 .42cqh .8cqh rgba(67,38,17,.2);
}
#stage3Scene .s3-touch-hint { display:none !important; }

@media (max-width:480px) {
  #stage1Scene .s1-heading > p { width:82%; max-width:82%; font-size:1.9cqw; }
  #stage1Scene .s1-card-copy h2 { font-size:2.7cqw; }
  #stage1Scene .s1-card-copy header p { font-size:1.82cqw; }
  #stage1Scene .s1-stat { font-size:1.78cqw; }
  #stage1Scene .s1-skill { font-size:1.38cqw; }
  #stage1Scene .s1-family-name h3 { font-size:1.61cqw; }
  #stage1Scene .s1-family-parents { font-size:1.64cqw; }
  #stage1Scene .s1-family-center p { font-size:1.22cqw; }
  #stage3Scene .s3-discovery-progress { left:25%; width:50%; }
  #stage3Scene .s3-progress-kicker { font-size:.94cqw; }
  #stage3Scene .s3-progress-main span { font-size:1.74cqw; }
  #stage3Scene .s3-progress-main strong { font-size:1.9cqw; }
  #stage3Scene .s3-discovery-progress small { font-size:1.02cqw; }
}

/* =========================================================
   V6 — Clean stage navigation + unified Guest Guild chat
   ========================================================= */

/* The former illustrated world-map navbar is intentionally retired. */
.universal-stage-nav,
#stage2Scene .s2-next-stage,
.s5-thanks { display:none !important; }

/* Paired parchment controls: navigation without a second map/menu layer. */
.stage-step-controls {
  position:absolute;
  z-index:1220;
  left:5.2%;
  right:5.2%;
  bottom:max(1.15%, env(safe-area-inset-bottom));
  height:6.65%;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:2.4%;
  visibility:hidden;
  opacity:0;
  transform:translateY(22%);
  pointer-events:none;
  transition:opacity .24s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .34s;
}
.stage-step-controls.is-visible {
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  transition-delay:0s;
}
.stage-step-button {
  width:100%;
  height:100%;
  min-width:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 .36cqh .28cqh rgba(48,27,12,.24));
  transition:transform .16s ease, filter .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.stage-step-button img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.stage-step-button:hover {
  transform:translateY(-.22cqh) scale(1.012);
  filter:drop-shadow(0 .5cqh .34cqh rgba(48,27,12,.28)) brightness(1.025);
}
.stage-step-button:active { transform:translateY(.08cqh) scale(.982); }
.stage-step-button:focus-visible {
  outline:.24cqw solid rgba(255,225,150,.98);
  outline-offset:.28cqw;
}
body.modal-open-local .stage-step-controls,
body.adventure-modal-open .stage-step-controls,
body.guild-chat-open .stage-step-controls { pointer-events:none; opacity:.2; }

/* Keep the delicate screen frame, without the heavy navbar panel. */
.universal-screen-frame { z-index:1180; }

/* Stage 5: one compact, fully-clickable Guest Guild card. */
#stage5Scene .guild-guest-board {
  position:absolute;
  z-index:24;
  left:16.5%;
  top:44.25%;
  width:67%;
  min-height:8.05%;
  padding:.68cqh 1.7cqw .62cqh;
  border:.2cqw solid #a97b43;
  border-radius:1.55cqw;
  background:
    linear-gradient(180deg,rgba(255,251,237,.98),rgba(240,217,175,.97));
  box-shadow:
    inset 0 0 0 .14cqw rgba(255,255,255,.82),
    0 .42cqh .72cqh rgba(35,18,8,.3);
  color:#4b3020;
  font-family:Georgia,"Times New Roman",serif;
  text-align:left;
  cursor:pointer;
  display:grid;
  grid-template-columns:31% 1fr;
  grid-template-areas:
    "copy avatars"
    "message open";
  grid-template-rows:auto auto;
  column-gap:1.35cqw;
  row-gap:.24cqh;
  align-items:center;
  overflow:hidden;
  transition:transform .17s ease, filter .17s ease, box-shadow .17s ease;
  -webkit-tap-highlight-color:transparent;
}
#stage5Scene .guild-guest-board::before,
#stage5Scene .guild-guest-board::after {
  content:"◇";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#b4884e;
  font-size:1.22cqw;
  pointer-events:none;
}
#stage5Scene .guild-guest-board::before { left:.65cqw; }
#stage5Scene .guild-guest-board::after { right:.65cqw; }
#stage5Scene .guild-guest-board:hover {
  transform:translateY(-.18cqh);
  filter:brightness(1.025);
  box-shadow:inset 0 0 0 .14cqw rgba(255,255,255,.86),0 .58cqh .86cqh rgba(35,18,8,.34);
}
#stage5Scene .guild-guest-board:active { transform:translateY(.05cqh) scale(.992); }
#stage5Scene .guild-guest-board:focus-visible {
  outline:.25cqw solid rgba(255,225,150,.98);
  outline-offset:.22cqw;
}
.guild-board-copy { grid-area:copy; min-width:0; display:flex; flex-direction:column; line-height:1; }
.guild-board-copy small {
  color:#9b7446;
  font-size:.74cqw;
  font-style:normal;
  font-weight:700;
  letter-spacing:.13em;
}
.guild-board-copy strong {
  margin-top:.18cqh;
  color:#4f3020;
  font-size:1.52cqw;
  letter-spacing:.045em;
}
.guild-board-copy em {
  margin-top:.2cqh;
  color:#8a633c;
  font-size:.84cqw;
  font-style:normal;
}
#stage5Scene .guild-avatar-row {
  grid-area:avatars;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.42cqw;
  min-width:0;
  min-height:3.15cqh;
  margin:0;
}
#stage5Scene .guild-mini-avatar,
#stage5Scene .guild-more-avatar {
  position:relative;
  flex:0 0 auto;
  width:4.65cqw;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:.13cqw solid #bb9157;
  background:#fff4d9;
  box-shadow:0 .14cqh .22cqh rgba(73,43,20,.18);
}
#stage5Scene .guild-mini-avatar { border-radius:50%; }
#stage5Scene .guild-mini-avatar img { width:100%; height:100%; object-fit:contain; }
#stage5Scene .guild-mini-avatar.is-you {
  border-color:#d5a94f;
  box-shadow:0 0 .6cqh rgba(242,199,91,.68),0 .14cqh .22cqh rgba(73,43,20,.18);
}
#stage5Scene .guild-more-avatar {
  border-radius:.8cqw;
  color:#67452c;
  background:linear-gradient(180deg,#fff8e8,#e9ca94);
}
#stage5Scene .guild-more-avatar b { font-size:2.15cqw; line-height:.6; transform:translateY(-.16cqh); }
#stage5Scene .guild-more-avatar small { position:absolute; bottom:.12cqh; right:.3cqw; color:#8f6536; font-size:.58cqw; font-weight:700; }
.guild-board-message {
  grid-area:message;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#725139;
  font-size:.82cqw;
  line-height:1.15;
}
.guild-board-open {
  grid-area:open;
  justify-self:end;
  color:#79542f;
  font-size:.8cqw;
  font-weight:700;
  letter-spacing:.03em;
  white-space:nowrap;
}
.guild-board-open::after { content:"  •  Ucapan"; color:#ad8048; font-weight:400; }

/* Full Guest Guild group-chat window. */
.guild-chat-modal {
  position:fixed;
  inset:0;
  z-index:4100;
  display:grid;
  place-items:center;
  padding:18px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .24s;
}
.guild-chat-modal.is-open {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition-delay:0s;
}
.guild-chat-backdrop {
  position:absolute;
  inset:0;
  background:rgba(18,10,7,.76);
  backdrop-filter:blur(6px);
}
.guild-chat-window {
  position:relative;
  width:min(94vw,570px);
  height:min(84vh,780px);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  border:3px solid #b88a4b;
  border-radius:24px;
  background:#f7ecd4;
  box-shadow:0 28px 86px rgba(0,0,0,.58),inset 0 0 0 3px rgba(255,250,229,.8);
  color:#4c3121;
}
.guild-chat-header {
  display:grid;
  grid-template-columns:52px 1fr 42px;
  align-items:center;
  gap:12px;
  padding:16px 17px;
  border-bottom:1px solid rgba(196,150,79,.34);
  background:
    linear-gradient(180deg,rgba(103,70,43,.99),rgba(69,44,29,.99));
  color:#fff0ca;
}
.guild-chat-emblem {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,228,171,.46);
  border-radius:16px;
  background:linear-gradient(145deg,#a55e50,#71402f);
  color:#ffe6b0;
  font-size:1.45rem;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}
.guild-chat-header small { display:block; color:#d9bc85; font-size:.66rem; font-weight:700; letter-spacing:.16em; }
.guild-chat-header h2 { margin:3px 0 1px; color:#fff3d6; font-size:1.35rem; line-height:1.08; }
.guild-chat-header p { margin:0; color:#d7c09b; font-size:.78rem; }
.guild-chat-close {
  width:40px;
  height:40px;
  padding:0 0 4px;
  border:1px solid rgba(255,230,182,.35);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff1d0;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}
.guild-chat-close:hover { background:rgba(255,255,255,.16); }
.guild-chat-close:focus-visible { outline:3px solid #f4cf83; outline-offset:2px; }
.guild-chat-messages {
  min-height:0;
  overflow-y:auto;
  padding:20px 18px 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
  scrollbar-color:#c09a62 rgba(124,83,43,.12);
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.7),transparent 30%),
    linear-gradient(180deg,#fffaf0,#efe0c3);
}
.guild-chat-entry {
  width:min(88%,470px);
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:10px;
  align-items:start;
  align-self:flex-start;
}
.guild-chat-entry > img {
  width:46px;
  aspect-ratio:1;
  object-fit:contain;
  border:2px solid #c49a5d;
  border-radius:50%;
  background:#fff4da;
  box-shadow:0 3px 8px rgba(76,45,21,.15);
}
.guild-chat-entry-copy { min-width:0; }
.guild-chat-entry-copy strong {
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 5px 4px;
  color:#5b3b27;
  font-size:.82rem;
}
.guild-chat-entry-copy strong small {
  padding:2px 6px;
  border-radius:999px;
  background:#e5c889;
  color:#6c4929;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.guild-chat-entry-copy p {
  position:relative;
  margin:0;
  padding:11px 13px;
  border:1px solid rgba(179,132,65,.34);
  border-radius:5px 17px 17px 17px;
  background:#fff9e9;
  color:#5c4130;
  font-size:.9rem;
  line-height:1.48;
  overflow-wrap:anywhere;
  box-shadow:0 5px 14px rgba(77,47,24,.09);
}
.guild-chat-entry-copy p::before {
  content:"";
  position:absolute;
  left:-7px;
  top:-1px;
  width:13px;
  height:13px;
  border-left:1px solid rgba(179,132,65,.34);
  background:#fff9e9;
  clip-path:polygon(100% 0,100% 100%,0 0);
}
.guild-chat-entry.is-own-message {
  grid-template-columns:minmax(0,1fr) 46px;
  align-self:flex-end;
}
.guild-chat-entry.is-own-message > img { grid-column:2; }
.guild-chat-entry.is-own-message .guild-chat-entry-copy { grid-column:1; grid-row:1; }
.guild-chat-entry.is-own-message .guild-chat-entry-copy strong { justify-content:flex-end; margin-right:4px; }
.guild-chat-entry.is-own-message .guild-chat-entry-copy p {
  border-radius:17px 5px 17px 17px;
  background:#ead3a6;
}
.guild-chat-entry.is-own-message .guild-chat-entry-copy p::before {
  left:auto;
  right:-7px;
  background:#ead3a6;
  clip-path:polygon(0 0,100% 0,0 100%);
  border-left:0;
  border-right:1px solid rgba(179,132,65,.34);
}
.guild-chat-empty { margin:auto; color:#7a5b42; text-align:center; }
.guild-chat-footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:10px 16px;
  border-top:1px solid rgba(181,136,70,.3);
  background:linear-gradient(180deg,#f4e4c4,#e6cca0);
  color:#725035;
}
.guild-chat-footer p { margin:0; font-size:.78rem; text-align:center; }
.guild-chat-footer span { color:#a86f57; }
body.guild-chat-open { overflow:hidden; }

@media (max-width:480px) {
  .stage-step-controls { left:3.2%; right:3.2%; height:6.8%; gap:1.4%; bottom:max(.9%, env(safe-area-inset-bottom)); }
  #stage5Scene .guild-guest-board { left:12.8%; width:74.4%; top:44%; min-height:8.35%; padding:.72cqh 2cqw .65cqh; grid-template-columns:30% 1fr; }
  .guild-board-copy small { font-size:.92cqw; }
  .guild-board-copy strong { font-size:1.82cqw; }
  .guild-board-copy em { font-size:1.05cqw; }
  #stage5Scene .guild-mini-avatar,
  #stage5Scene .guild-more-avatar { width:5.1cqw; }
  .guild-board-message,.guild-board-open { font-size:1.02cqw; }
  .guild-chat-modal { padding:9px; }
  .guild-chat-window { width:98vw; height:min(91vh,780px); border-radius:17px; }
  .guild-chat-header { grid-template-columns:44px 1fr 38px; gap:9px; padding:13px; }
  .guild-chat-emblem { width:42px; height:42px; border-radius:13px; }
  .guild-chat-header h2 { font-size:1.18rem; }
  .guild-chat-header p { font-size:.7rem; }
  .guild-chat-messages { padding:16px 12px 20px; gap:14px; }
  .guild-chat-entry { width:94%; grid-template-columns:40px minmax(0,1fr); gap:8px; }
  .guild-chat-entry > img { width:40px; }
  .guild-chat-entry.is-own-message { grid-template-columns:minmax(0,1fr) 40px; }
  .guild-chat-entry-copy p { font-size:.84rem; padding:10px 11px; }
}

@media (prefers-reduced-motion:reduce) {
  .stage-step-controls,.stage-step-button,.guild-guest-board,.guild-chat-modal { transition:none !important; }
}

/* =========================================================
   V7 FINAL SPACING POLISH
   A single invitation CTA on the World Map, a roomier Guild
   Hall composition, and consistently centered modal actions.
   ========================================================= */

/* World Map: progress first, then one clear centered invitation. */
.worldmap-progress-card {
  left:27%;
  right:auto;
  top:71.9%;
  width:46%;
  padding:.72cqh 1.55cqw .78cqh;
  text-align:center;
  border-radius:1.7cqw;
  box-shadow:0 .38cqh .76cqh rgba(46,28,13,.22), inset 0 0 0 .12cqw rgba(255,255,255,.5);
}
.worldmap-progress-card span {
  font-size:1.08cqw;
  letter-spacing:.12em;
}
.worldmap-progress-card strong {
  margin:.12cqh 0 .42cqh;
  font-size:1.46cqw;
}
.worldmap-progress-card i {
  width:82%;
  margin:0 auto;
}
.worldmap-start-button {
  position:absolute;
  z-index:23;
  left:22%;
  top:78.15%;
  width:56%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 .36cqh .3cqh rgba(55,34,16,.22));
  transition:transform .17s ease, filter .17s ease;
  -webkit-tap-highlight-color:transparent;
}
.worldmap-start-button img {
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
}
.worldmap-start-button:hover {
  transform:translateY(-.2cqh) scale(1.012);
  filter:drop-shadow(0 .52cqh .36cqh rgba(55,34,16,.28)) brightness(1.025);
}
.worldmap-start-button:active { transform:translateY(.06cqh) scale(.986); }
.worldmap-start-button:focus-visible {
  outline:.24cqw solid rgba(255,231,165,.98);
  outline-offset:.26cqw;
  border-radius:999px;
}

/* Stage 5: use the available lower space to give every action more air. */
#stage5Scene .guild-guest-board {
  top:47.15%;
  min-height:8.7%;
  padding:.78cqh 1.85cqw .72cqh;
}
#stage5Scene .s5-action-grid {
  top:56.75%;
  height:26.15%;
}
#stage5Scene .s5-card {
  padding:1.35cqh 1.85cqw 1.45cqh;
}
#stage5Scene .s5-card p { margin:.72cqh 0 .9cqh; }
#stage5Scene .s5-card textarea { min-height:9.2cqh; }

/* Every textual modal close action occupies the visual center. */
.local-modal-card > .btn[data-close-local-modal] {
  grid-column:1 / -1;
  justify-self:center;
  align-self:center;
  min-width:152px;
  margin:0 auto 24px;
  text-align:center;
}

@media (max-width:560px) {
  .worldmap-progress-card {
    left:25%;
    right:auto;
    top:72.05%;
    width:50%;
    padding:.68cqh 1.8cqw .74cqh;
  }
  .worldmap-progress-card span { font-size:1.52cqw; }
  .worldmap-progress-card strong { font-size:2.02cqw; }
  .worldmap-start-button {
    left:18%;
    top:78.35%;
    width:64%;
  }
  #stage5Scene .guild-guest-board {
    left:12.8%;
    top:47.05%;
    width:74.4%;
    min-height:8.85%;
    padding:.78cqh 2cqw .72cqh;
  }
  #stage5Scene .s5-action-grid {
    top:56.85%;
    height:26.2%;
  }
}

@media (prefers-reduced-motion:reduce) {
  .worldmap-start-button { transition:none !important; }
}

/* =========================================================
   V8 — MOBILE READABILITY + UNIFIED RSVP / WISH
   Larger foreground typography, one focused Stage 5 response
   card, a clearer Guest Guild affordance, and calm spacing.
   ========================================================= */

/* Stage 1: preserve the illustrated composition while lifting the
   smallest profile and family copy above mobile readability limits. */
#stage1Scene .s1-heading > p {
  font-size:clamp(9px,2.08cqw,11px);
  line-height:1.28;
}
#stage1Scene .s1-profiles {
  top:45.35%;
  height:21.25%;
}
#stage1Scene .s1-card-copy h2 {
  font-size:clamp(10px,2.7cqw,14px);
}
#stage1Scene .s1-card-copy header p {
  font-size:clamp(8px,2.02cqw,11px);
}
#stage1Scene .s1-stat {
  font-size:clamp(7.5px,1.85cqw,10px);
}
#stage1Scene .s1-skill {
  font-size:clamp(7px,1.52cqw,9px);
  line-height:1.24;
}
#stage1Scene .s1-family {
  top:67.05%;
  height:17.35%;
}
#stage1Scene .s1-family-title {
  top:-.35%;
  height:14.5%;
}
#stage1Scene .s1-family-panel-wrap {
  top:12.9%;
}
#stage1Scene .s1-family-col {
  top:13.2%;
}
#stage1Scene .s1-family-name {
  height:27%;
  padding-bottom:2.8%;
}
#stage1Scene .s1-family-name h3 {
  font-size:clamp(8.5px,2.15cqw,11.5px);
  line-height:1.05;
  letter-spacing:.035em;
}
#stage1Scene .s1-family-parents {
  margin:4.4% 0 0;
  font-size:clamp(8px,2.02cqw,10.5px);
  line-height:1.24;
}

/* Stage 3: the progress card is now a readable focal point rather than
   decorative micro-copy. */
#stage3Scene .s3-discovery-progress {
  left:20%;
  top:74.75%;
  width:60%;
  min-height:8.15%;
  padding:.72cqh 2.35cqw .68cqh;
  border-width:.22cqw;
  border-radius:1.9cqw;
}
#stage3Scene .s3-progress-kicker {
  margin-bottom:.22cqh;
  font-size:clamp(7px,1.52cqw,9px);
  letter-spacing:.12em;
}
#stage3Scene .s3-progress-main {
  gap:1.45cqw;
}
#stage3Scene .s3-progress-main span {
  font-size:clamp(11px,2.72cqw,15px);
  line-height:1.05;
}
#stage3Scene .s3-progress-main strong {
  font-size:clamp(11px,2.82cqw,15px);
}
#stage3Scene .s3-discovery-progress > i {
  width:82%;
  height:.52cqh;
  margin:.46cqh auto .34cqh;
}
#stage3Scene .s3-discovery-progress small {
  font-size:clamp(7.5px,1.62cqw,9.5px);
  line-height:1.18;
}

/* Stage 4: expand the information panel slightly and use minimum pixel
   sizes so dates, times, and venue details remain legible on phones. */
#stage4Scene .s4-details-panel {
  left:5.7%;
  right:5.7%;
  top:53.55%;
  height:25.35%;
}
#stage4Scene .s4-panel-content {
  inset:5.8% 5.5% 5.4%;
}
#stage4Scene .s4-panel-lead {
  height:19.5%;
  grid-template-columns:7% 1fr 7%;
}
#stage4Scene .s4-panel-lead p {
  font-size:clamp(10px,2.42cqw,13px);
  line-height:1.24;
}
#stage4Scene .s4-detail-table {
  height:80.5%;
  display:grid;
  grid-template-rows:.9fr .9fr .9fr 1.3fr;
}
#stage4Scene .s4-detail-row {
  height:auto;
  grid-template-columns:35% 65%;
  padding:.15% 1%;
}
#stage4Scene .s4-detail-label {
  gap:.95cqw;
  font-size:clamp(8.5px,2.14cqw,11.5px);
  letter-spacing:.04em;
}
#stage4Scene .s4-icon {
  width:3.8cqw;
  height:3.8cqw;
  flex-basis:3.8cqw;
}
#stage4Scene .s4-detail-value strong {
  font-size:clamp(9.5px,2.35cqw,12.5px);
  line-height:1.08;
}
#stage4Scene .s4-detail-value span {
  font-size:clamp(8.5px,2.02cqw,11px);
  line-height:1.12;
}
#stage4Scene .s4-detail-row:last-child .s4-detail-value strong {
  font-size:clamp(8.5px,2.12cqw,11.5px);
}
#stage4Scene .s4-detail-row:last-child .s4-detail-value span {
  font-size:clamp(7.5px,1.82cqw,9.5px);
  line-height:1.14;
}
#stage4Scene .s4-actions {
  top:79.15%;
}

/* Stage 5: two calm cards instead of three narrow columns. */
#stage5Scene .guild-guest-board {
  top:46.7%;
  left:11.8%;
  width:76.4%;
  min-height:9.45%;
  padding:.85cqh 2.2cqw .76cqh;
  grid-template-columns:29% 1fr;
  column-gap:1.7cqw;
  row-gap:.38cqh;
  border:.25cqw solid #d0a44d;
  box-shadow:
    inset 0 0 0 .15cqw rgba(255,255,255,.88),
    0 0 0 .13cqw rgba(250,217,133,.42),
    0 0 1.15cqh rgba(241,187,68,.25),
    0 .48cqh .82cqh rgba(35,18,8,.3);
  animation:guildBoardCue 3.4s ease-in-out infinite;
}
#stage5Scene .guild-guest-board:hover {
  box-shadow:
    inset 0 0 0 .15cqw rgba(255,255,255,.9),
    0 0 0 .16cqw rgba(250,217,133,.56),
    0 0 1.55cqh rgba(241,187,68,.38),
    0 .6cqh .9cqh rgba(35,18,8,.34);
}
.guild-board-copy small {
  font-size:clamp(7px,1.45cqw,9px);
}
.guild-board-copy strong {
  margin-top:.22cqh;
  font-size:clamp(10px,2.35cqw,13px);
}
.guild-board-copy em {
  margin-top:.25cqh;
  font-size:clamp(8px,1.82cqw,10px);
}
#stage5Scene .guild-avatar-row {
  gap:.55cqw;
  min-height:3.55cqh;
}
#stage5Scene .guild-mini-avatar,
#stage5Scene .guild-more-avatar {
  width:5.25cqw;
  border-width:.16cqw;
}
.guild-board-message {
  font-size:clamp(7.5px,1.62cqw,9.5px);
}
.guild-board-open {
  display:inline-flex;
  align-items:center;
  gap:.55cqw;
  justify-self:end;
  padding:.34cqh .85cqw;
  border:.12cqw solid rgba(184,133,57,.5);
  border-radius:999px;
  background:rgba(255,248,225,.66);
  color:#70481f;
  font-size:clamp(7.5px,1.62cqw,9.5px);
  letter-spacing:.02em;
  box-shadow:inset 0 0 0 .1cqw rgba(255,255,255,.55);
}
.guild-board-open::before {
  content:"";
  width:1.15cqw;
  aspect-ratio:1;
  border-radius:50%;
  background:#d8a53d;
  box-shadow:0 0 .45cqh rgba(229,174,60,.72);
}
.guild-board-open::after { content:""; }

#stage5Scene .s5-action-grid {
  top:57.15%;
  height:27.3%;
  left:4.25%;
  right:4.25%;
  grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
  gap:1.65%;
}
#stage5Scene .s5-card {
  padding:1.25cqh 1.55cqw 1.3cqh;
  border-radius:2.45cqw;
}
#stage5Scene .s5-card h2 {
  font-size:clamp(9.5px,2.25cqw,12.5px);
  letter-spacing:.08cqw;
}
#stage5Scene .s5-card p {
  margin:.48cqh 0 .62cqh;
  font-size:clamp(7.5px,1.72cqw,9.5px);
  line-height:1.22;
}
#stage5Scene .s5-rsvp-wish h2 {
  white-space:normal;
}
#stage5Scene .s5-choice-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7cqw;
  margin-bottom:.46cqh;
}
#stage5Scene .s5-choice {
  min-width:0;
  height:3.25cqh;
  margin:0;
  padding:0 .75cqw;
  justify-content:center;
  gap:.45cqw;
  font-size:clamp(7.5px,1.7cqw,9.5px);
  white-space:nowrap;
}
#stage5Scene .s5-choice span {
  font-size:clamp(8px,1.82cqw,10px);
}
#stage5Scene .s5-field-label {
  margin:.08cqh .2cqw .28cqh;
  font-size:clamp(7.5px,1.62cqw,9px);
}
#stage5Scene .s5-card textarea {
  min-height:7.9cqh;
  padding:.75cqh .85cqw;
  font-size:clamp(8.5px,1.88cqw,10.5px);
  line-height:1.3;
}
#stage5Scene .s5-count {
  margin-top:-1.62cqh;
  margin-right:.65cqw;
  font-size:clamp(7px,1.45cqw,8.5px);
}
#stage5Scene .s5-gold-button {
  min-height:3.75cqh;
  margin-top:.5cqh;
  font-size:clamp(8.5px,1.9cqw,10.5px);
}
#stage5Scene .s5-gift h2 {
  font-size:clamp(8.5px,1.92cqw,10.5px);
}
#stage5Scene .s5-gift p {
  font-size:clamp(7px,1.52cqw,8.5px);
}
#stage5Scene .s5-gift img {
  width:66%;
  height:10.2cqh;
  margin:0 auto .1cqh;
}
#stage5Scene .s5-gift small {
  font-size:clamp(7px,1.45cqw,8.5px);
}

@keyframes guildBoardCue {
  0%,100% { filter:brightness(1); }
  50% { filter:brightness(1.035); }
}

@media (max-width:560px) {
  #stage1Scene .s1-profiles { left:7.8%; right:7.8%; }
  #stage1Scene .s1-card-copy { inset:7.1% 7.5% 6.8%; }
  #stage1Scene .s1-family { left:4.4%; right:4.4%; }

  #stage3Scene .s3-discovery-progress {
    left:17%;
    width:66%;
    top:74.6%;
  }

  #stage4Scene .s4-details-panel {
    left:4.8%;
    right:4.8%;
  }
  #stage4Scene .s4-panel-content {
    inset:5.4% 4.9% 5.2%;
  }

  #stage5Scene .guild-guest-board {
    left:9.5%;
    width:81%;
    top:46.55%;
    min-height:9.65%;
    padding:.86cqh 2.35cqw .78cqh;
    grid-template-columns:28.5% 1fr;
  }
  #stage5Scene .guild-mini-avatar,
  #stage5Scene .guild-more-avatar { width:5.45cqw; }
  #stage5Scene .s5-action-grid {
    top:57.2%;
    left:3.65%;
    right:3.65%;
    height:27.35%;
  }
}

@media (max-width:370px) {
  #stage1Scene .s1-family-name h3 { font-size:8px; }
  #stage1Scene .s1-family-parents { font-size:7.6px; }
  #stage4Scene .s4-detail-label { font-size:8px; }
  #stage4Scene .s4-detail-value strong { font-size:9px; }
  #stage5Scene .guild-board-message { max-width:28cqw; }
  #stage5Scene .s5-choice { padding:0 .45cqw; font-size:7px; }
}

@media (prefers-reduced-motion:reduce) {
  #stage5Scene .guild-guest-board { animation:none !important; }
}

/* V8 final readability calibration after multi-device render review. */
.journey-toast {
  width:min(78%,620px);
  padding:1.08cqh 3.4cqw 1.12cqh;
}
.journey-toast strong {
  font-size:clamp(11px,2.85cqw,15px);
  line-height:1.08;
}
.journey-toast span {
  margin-top:.34cqh;
  font-size:clamp(8.5px,2.12cqw,11px);
  line-height:1.28;
}

#stage1Scene .s1-family-col { width:37%; }
#stage1Scene .s1-family-left { left:1.8%; }
#stage1Scene .s1-family-right { right:1.8%; }
#stage1Scene .s1-family-center { left:41%; width:18%; }
#stage1Scene .s1-family-name h3 {
  font-size:clamp(10px,2.48cqw,12.5px);
}
#stage1Scene .s1-family-parents {
  font-size:clamp(9.5px,2.28cqw,11.5px);
}

#stage3Scene .s3-progress-kicker {
  font-size:clamp(7.5px,1.72cqw,9.5px);
}
#stage3Scene .s3-discovery-progress small {
  font-size:clamp(8px,1.82cqw,10px);
}

#stage4Scene .s4-details-panel {
  top:53.2%;
  height:26.25%;
}
#stage4Scene .s4-detail-table {
  grid-template-rows:.82fr .82fr .82fr 1.54fr;
}
#stage4Scene .s4-detail-row:last-child .s4-detail-value span {
  font-size:clamp(8.5px,2.02cqw,10px);
  line-height:1.17;
}
#stage4Scene .s4-actions { top:79.9%; }

.guild-board-copy small { font-size:clamp(7.5px,1.65cqw,9.5px); }
.guild-board-copy em { font-size:clamp(8.5px,1.92cqw,10.5px); }
.guild-board-message { font-size:clamp(8px,1.78cqw,10px); }
.guild-board-open { font-size:clamp(8px,1.78cqw,10px); }
#stage5Scene .s5-card p { font-size:clamp(8px,1.82cqw,10px); }
#stage5Scene .s5-field-label { font-size:clamp(8px,1.72cqw,9.5px); }
#stage5Scene .s5-card textarea { font-size:clamp(9px,1.98cqw,11px); }

@media (max-width:370px) {
  #stage1Scene .s1-family-name h3 { font-size:9.5px; }
  #stage1Scene .s1-family-parents { font-size:9px; }
  #stage4Scene .s4-detail-row:last-child .s4-detail-value span { font-size:8px; }
}

/* Final micro-adjustments: keep the smallest informational copy readable. */
.journey-toast span { font-size:clamp(9.5px,2.28cqw,11.5px); }
#stage1Scene .s1-stat { font-size:clamp(8.2px,1.95cqw,10.5px); }
#stage1Scene .s1-skill { font-size:clamp(7.5px,1.62cqw,9.5px); }
#stage1Scene .s1-family-name h3 { font-size:clamp(11px,2.58cqw,13px); }
#stage1Scene .s1-family-parents { font-size:clamp(10.2px,2.42cqw,12px); line-height:1.28; }
#stage4Scene .s4-detail-row:last-child .s4-detail-value strong { font-size:clamp(9.5px,2.22cqw,11.5px); }
#stage4Scene .s4-detail-row:last-child .s4-detail-value span { font-size:clamp(9px,2.12cqw,10.5px); line-height:1.2; }
#stage5Scene .s5-card p { font-size:clamp(8.5px,1.9cqw,10px); }
#stage5Scene .s5-field-label { font-size:clamp(8.5px,1.82cqw,9.8px); }
#stage5Scene .s5-card textarea { font-size:clamp(9.5px,2.08cqw,11px); }

@media (max-width:370px) {
  #stage1Scene .s1-family-name h3 { font-size:10.5px; }
  #stage1Scene .s1-family-parents { font-size:9.7px; }
  #stage4Scene .s4-detail-row:last-child .s4-detail-value span { font-size:8.6px; }
}

/* Small-screen finishing pass. */
.journey-toast span { font-size:clamp(10px,2.36cqw,12px); }
#stage1Scene .s1-family-name h3 { font-size:clamp(11.5px,2.65cqw,13px); }
#stage1Scene .s1-family-parents { font-size:clamp(10.5px,2.48cqw,12px); }
@media (max-width:370px) {
  #stage1Scene .s1-family-name h3 { font-size:11px; }
  #stage1Scene .s1-family-parents { font-size:10.2px; }
}

/* V10: Stage 3 original-photo viewer. The lightweight artwork remains in-scene;
   full memory photos are requested only after the visitor clicks an item. */
.local-modal.is-real-photo .local-modal-card {
  width:min(94vw, 980px);
  max-width:980px;
  grid-template-columns:minmax(0, 560px) minmax(260px, 1fr);
}
.local-modal.is-real-photo .local-modal-media {
  min-height:0;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(34,24,19,.96), rgba(17,12,10,.98));
}
.local-modal.is-real-photo .local-modal-media img {
  width:100%;
  height:100%;
  max-height:72vh;
  padding:8px;
  object-fit:contain;
}
#stage3Scene button.s3-frame-small {
  cursor:pointer;
  transition:transform .16s ease, filter .16s ease;
}
#stage3Scene button.s3-frame-small:hover {
  transform:translateY(-.18cqh) scale(1.03);
  filter:brightness(1.04) drop-shadow(0 .3cqh .2cqh rgba(32,18,8,.28));
}
@media (max-width:900px) {
  .local-modal.is-real-photo .local-modal-card {
    width:min(94vw, 760px);
    grid-template-columns:1fr;
  }
  .local-modal.is-real-photo .local-modal-media img { max-height:62vh; }
}


/* Final cleanup: Stage 3 photo modal contains only the selected image and close control. */
.local-modal.is-photo-only .local-modal-card {
  width:min(94vw, 980px);
  max-width:980px;
  max-height:90vh;
  display:block;
  padding:0;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
}
.local-modal.is-photo-only .local-modal-media {
  display:grid !important;
  place-items:center;
  min-height:0;
  margin:0;
  border:0;
  background:transparent;
}
.local-modal.is-photo-only .local-modal-media img {
  display:block;
  width:auto;
  max-width:92vw;
  height:auto;
  max-height:86vh;
  padding:0;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 18px 58px rgba(0,0,0,.48);
}
.local-modal.is-photo-only .local-modal-copy,
.local-modal.is-photo-only .local-modal-card > .btn[data-close-local-modal],
.local-modal.is-photo-only .local-modal-media figcaption {
  display:none !important;
}
.local-modal.is-photo-only .local-close {
  top:10px !important;
  right:10px !important;
  width:36px;
  height:36px;
  padding:8px;
  border-radius:50%;
  background-color:rgba(255,255,255,.92);
  box-shadow:0 4px 18px rgba(0,0,0,.28);
}
@media (max-width:560px) {
  .local-modal.is-photo-only { padding:10px; }
  .local-modal.is-photo-only .local-modal-media img {
    max-width:calc(100vw - 20px);
    max-height:88vh;
    border-radius:10px;
  }
}

/* Photo-only modal refinement: keep the popup limited to the real photo itself. */
.local-modal.is-photo-only .local-modal-card {
  width:fit-content;
  max-width:94vw;
}
.local-modal.is-photo-only .local-modal-media {
  width:fit-content;
  max-width:92vw;
  overflow:visible;
  border-radius:0;
  box-shadow:none;
}
.local-modal.is-photo-only .local-modal-media img {
  max-width:92vw;
}

/* V11 — Stage 1 card text safety + server-backed Guild chat */
#stage1Scene .s1-stat {
  grid-template-columns: 12% 29% minmax(0, 1fr);
  column-gap: 3%;
  font-size: 1.34cqw;
}
#stage1Scene .s1-stat b,
#stage1Scene .s1-stat span {
  min-width: 0;
  white-space: nowrap;
}
#stage1Scene .s1-stat b {
  font-size: .95em;
  letter-spacing: .025em;
}
#stage1Scene .s1-stat span {
  overflow: hidden;
  text-overflow: ellipsis;
}
#stage1Scene .s1-skill {
  font-size: 1.06cqw;
  line-height: 1.16;
}
#stage1Scene .s1-skill span { white-space: nowrap; }
.guild-board-open::after { content:"  •  Ucapan"; }

.guild-chat-messages {
  overflow-anchor: none;
  overscroll-behavior: contain;
}
.guild-chat-load-status {
  position: sticky;
  top: 0;
  z-index: 3;
  align-self: center;
  width: fit-content;
  max-width: 90%;
  margin: -8px auto 2px;
  padding: 6px 11px;
  border: 1px solid rgba(176,130,67,.3);
  border-radius: 999px;
  background: rgba(255,249,232,.94);
  color: #7b5a3d;
  font-size: .72rem;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(76,45,21,.08);
  transition: opacity .18s ease;
}
.guild-chat-load-status[hidden] { display: none; }
.guild-chat-load-status.is-error {
  color:#8a3f35;
  border-color:rgba(164,79,65,.28);
  background:rgba(255,238,231,.96);
}
.guild-chat-entry-copy strong time {
  margin-left:auto;
  color:#9a7a5c;
  font-size:.62rem;
  font-weight:400;
  white-space:nowrap;
}
.guild-chat-entry.is-own-message .guild-chat-entry-copy strong time {
  margin-left:0;
  margin-right:auto;
  order:-1;
}
.guild-chat-empty {
  padding: 24px 14px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  #stage1Scene .s1-stat { font-size: 1.58cqw; grid-template-columns:12% 28% minmax(0,1fr); }
  #stage1Scene .s1-skill { font-size: 1.24cqw; }
  .guild-chat-load-status { font-size:.66rem; }
  .guild-chat-entry-copy strong time { font-size:.57rem; }
}
.guild-chat-entry-copy p { white-space:pre-wrap; }