/* Still artwork, independent mascot parts, no video decoder or loop seams. */
.scene-art,.desk-front{position:absolute;inset:0;display:block;pointer-events:none}
.scene-art img,.desk-front img{display:block;width:100%;height:100%;object-fit:fill}
.brand{position:absolute;z-index:5;top:2.4%;left:4%;width:27%;max-width:135px;filter:drop-shadow(0 2px 2px #13031d);pointer-events:none}
.enter{left:7%;width:86%;top:auto;bottom:4.5%;height:8.5%;display:flex;justify-content:center;align-items:center;gap:14px;background:linear-gradient(110deg,#e8aa36,#fff0a5 48%,#edb343);border:2px solid #fff0a2;box-shadow:0 5px 0 #805013,0 7px 24px #190625a0,inset 0 2px 2px #fff9c3;color:#3b2109;font-weight:bold;font-size:clamp(20px,6vw,29px);text-shadow:0 1px #fff0aa}
.goldie{position:absolute;z-index:2;width:68%;aspect-ratio:2/3;left:16%;bottom:15%;pointer-events:none;isolation:isolate}
.goldie img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#doors .goldie{left:1%;bottom:14%;width:53%}
#lobby .goldie{left:30%;top:22%;bottom:auto;width:40%}
.desk-front{z-index:3;clip-path:inset(43% 0 0)}
.lobby-menu{z-index:5;top:57%;bottom:4%}
.scroll-cue{z-index:5;bottom:4%;background:#271037df;border:1px solid #f8cf6870;padding:10px 18px}
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:4}
.sparkles i{position:absolute;left:var(--x);top:var(--y);font:normal 17px Georgia,serif;color:#fff7c7;text-shadow:0 0 5px #fff,0 0 12px #ffd565;opacity:0;animation:twinkle var(--duration) ease-in-out var(--delay) infinite}
.door-aperture{position:absolute;left:20%;top:19%;width:60%;height:51.5%;overflow:hidden;border-radius:50% 50% 0 0 / 28% 28% 0 0;perspective:650px}
.door-interior{position:absolute;inset:0;background:linear-gradient(#ffd98745,#fff0b820),url('/assets/mobile-lobby-clean.webp') center/cover}
.door-leaf{position:absolute;top:0;width:50%;height:100%;background-image:url('/assets/mobile-doors-clean.webp');background-size:333.333% 194.175%;backface-visibility:hidden}
.left-leaf{left:0;background-position:28.5714% 39.175%;transform-origin:left center;transform:rotateY(calc(-1 * var(--door-angle,0deg)))}
.right-leaf{right:0;background-position:71.4286% 39.175%;transform-origin:right center;transform:rotateY(var(--door-angle,0deg))}
.motion-paused .goldie-eyes,.motion-paused .sparkles i{opacity:0}
.tab-hidden *,.scene:not(.active) *{animation-play-state:paused!important}
@keyframes twinkle{0%,65%,100%{opacity:0;transform:scale(.6)}78%{opacity:.85;transform:scale(1.12)}90%{opacity:0;transform:scale(.7)}}
@media(min-width:760px){
 .brand{top:5%;left:3%;width:14%;max-width:200px}
 .goldie{width:23%;left:64%;bottom:14%}
 #doors .goldie{left:18%;bottom:8%;width:24%}
 #lobby .goldie{left:17%;top:14%;bottom:auto;width:19%}
 .desk-front{clip-path:inset(55.2% 0 0)}
 .lobby-menu{left:57%;right:2.4%;top:17%;bottom:14%}
 .enter{left:34%;width:32%;bottom:6%;height:13%;font-size:clamp(22px,2.7vw,38px)}
 .door-aperture{left:39.4%;top:19%;width:21%;height:56.6%;border-radius:50% 50% 0 0 / 21% 21% 0 0}
 .door-interior{background-image:linear-gradient(#ffd98745,#fff0b820),url('/assets/desktop-lobby-clean.webp')}
 .door-leaf{background-image:url('/assets/desktop-doors-clean.webp');background-size:952.381% 176.678%}
 .left-leaf{background-position:44.0223% 43.7788%}.right-leaf{background-position:55.7542% 43.7788%}
}
@media(max-height:550px) and (max-width:759px){.goldie{width:45%;left:27.5%;bottom:15%}#lobby .goldie{width:27%;left:37%;top:8%}.brand{width:20%}.lobby-menu{top:50%;gap:3px}.destination{border-radius:10px}.enter{font-size:18px}.sparkles i{font-size:12px}}
/* Raised gold invitation: bevel, solid edge, soft halo and a moving highlight. */
.enter{overflow:hidden;isolation:isolate;border:2px solid #fff7c7;background:linear-gradient(180deg,#fff7ca 0%,#ffe894 13%,#eebb4d 46%,#d99620 51%,#f7d26b 83%,#ffe8a1 100%);box-shadow:inset 0 3px 1px #fffde7,inset 0 -3px 1px #b77a1d,0 3px 0 #b87915,0 7px 0 #825010,0 11px 0 #59320d,0 17px 22px #17051bd9,0 0 24px #ffd86685,0 0 54px #eab74245;transform:translateY(-4px);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;animation:invitation-glow 4.8s ease-in-out infinite}
.enter span{position:relative;z-index:2}.enter::after{content:"";position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 43%,#fffbe977 49%,#ffffffb3 50%,transparent 57%);transform:translateX(-85%);animation:invitation-sheen 6s ease-in-out infinite;pointer-events:none}
.enter:hover{transform:translateY(-7px);filter:brightness(1.09);box-shadow:inset 0 3px 1px #fffde7,inset 0 -3px 1px #b77a1d,0 5px 0 #b87915,0 10px 0 #825010,0 14px 0 #59320d,0 20px 25px #17051bcc,0 0 36px #ffdb7bcc,0 0 70px #eab74270}
.enter:active{transform:translateY(3px);box-shadow:inset 0 2px 4px #b8791540,0 3px 0 #825010,0 6px 0 #59320d,0 10px 15px #17051ba0,0 0 35px #ffd866a0}
@keyframes invitation-glow{0%,100%{filter:drop-shadow(0 0 3px #ffdc7960)}50%{filter:drop-shadow(0 0 12px #ffdc79a0)}}
@keyframes invitation-sheen{0%,65%{transform:translateX(-85%)}90%,100%{transform:translateX(85%)}}

/* Full rendered character performance with alpha, fixed floor anchor, no background motion. */
.goldie{filter:drop-shadow(0 9px 7px #16062265)}
.goldie-performance{clip-path:none;animation:none;object-fit:contain}

/* Arrival: the raised invitation overlaps Goldie's lower body on both layouts. */
#arrival .goldie{left:16%;bottom:1.5%;width:68%;z-index:4;filter:drop-shadow(0 3px 4px #16062255)}
#arrival .enter{left:7%;width:86%;bottom:4.5%;height:8.5%;z-index:5;font-size:clamp(20px,6vw,29px);gap:10px;padding:0 12px}
#arrival .goldie::before{content:"";position:absolute;z-index:-1;left:18%;width:62%;bottom:3.8%;height:3%;background:radial-gradient(ellipse,#18082085,transparent 70%);filter:blur(2px)}
@media(min-width:760px){
 #arrival .goldie{left:38.5%;bottom:0%;width:23%}
 #arrival .enter{left:33%;width:34%;bottom:5%;height:13%;font-size:clamp(22px,2.7vw,38px);gap:14px}
}
@media(max-height:550px) and (max-width:759px){
 #arrival .goldie{width:37%;left:31.5%;bottom:1.5%}
 #arrival .enter{left:15%;width:70%;height:13%;font-size:18px}
}

/* Logo navigation remains reachable in every scene and inside open panels. */
a.brand{pointer-events:auto;cursor:pointer;text-decoration:none;display:block;min-width:44px;min-height:44px;border-radius:7px}
a.brand:focus-visible{outline:3px solid #fff4bd;outline-offset:6px}
a.brand:hover{filter:drop-shadow(0 0 7px #ffd35f95)}
a.brand-dialog{position:relative;top:auto;left:auto;width:145px;max-width:50%;margin:0 auto 22px}
.login{min-height:44px;isolation:isolate;overflow:hidden;transition:color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease}
.login:hover,.login:focus-visible,.login:active,.login[aria-expanded="true"]{color:#35200b;border-color:#fff3b4;background:linear-gradient(180deg,#fff4c5 0%,#ffe38a 24%,#e8b13f 50%,#d69826 52%,#f5d072 85%,#ffe8a2 100%);text-shadow:0 1px #fff4bc;box-shadow:inset 0 2px 1px #fffbe6,inset 0 -2px 1px #bb8020,0 3px 0 #875514,0 0 20px #ffd16885}
.login::after{content:"";position:absolute;inset:-100%;pointer-events:none;background:linear-gradient(110deg,transparent 43%,#ffffff88 49%,transparent 55%);transform:translateX(-90%)}
.login:hover::after,.login:focus-visible::after,.login[aria-expanded="true"]::after{animation:login-shine 1.1s ease-out both}
.login:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #ab731e70,0 1px 0 #875514,0 0 22px #ffd168a0}
@keyframes login-shine{from{transform:translateX(-90%)}to{transform:translateX(90%)}}

.brand img{display:block;width:100%;height:auto;object-fit:contain}

/* Scroll-driven approach. Only the illustrated world moves; navigation stays reachable. */
.door-world{position:absolute;inset:0;transform:scale(var(--camera-scale,1));transform-origin:50% 45%;will-change:transform;pointer-events:none}
.stage.journey #doors,.stage.journey #lobby{visibility:visible;transition:none}
.stage.journey #doors{opacity:1;z-index:1}
.stage.journey #lobby{opacity:var(--lobby-dissolve,0);z-index:2}
.stage.journey .scene:not(.active){pointer-events:none}
.stage.journey #lobby:not(.active) .artboard{pointer-events:none}
/* Four horizontal destinations, stacked on the right on desktop and below Goldie on mobile. */
.lobby-menu{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,minmax(0,1fr))}
@media(min-width:760px){
 .lobby-menu{left:57%;right:2.4%;top:17%;bottom:14%;gap:3%;grid-template-columns:minmax(0,1fr)}
 .destination{grid-template-columns:13% minmax(0,1fr) 6%;grid-template-rows:1fr;gap:3%;text-align:left;padding:8px 18px;font-size:clamp(1rem,1.8vw,1.7rem)}
 .destination .arrow{display:block}
 .menu-icon{font-size:clamp(1.7rem,2.6vw,2.8rem)}
 .menu-icon svg{width:clamp(28px,3vw,42px);height:clamp(28px,3vw,42px)}
}
@media(prefers-reduced-motion:reduce){.door-world{transform:none;will-change:auto}}
.motion-paused .door-world{transform:none;will-change:auto}

/* Every destination shares the shiny gold interaction used by Member Login. */
.destination{isolation:isolate;overflow:hidden;transition:color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease}
.destination>span{position:relative;z-index:1}
.destination:hover,.destination:focus-visible,.destination:active,.destination[aria-expanded="true"]{color:#35200b;border-color:#fff3b4;background:linear-gradient(180deg,#fff4c5 0%,#ffe38a 24%,#e8b13f 50%,#d69826 52%,#f5d072 85%,#ffe8a2 100%);text-shadow:0 1px #fff4bc;box-shadow:inset 0 2px 1px #fffbe6,inset 0 -2px 1px #bb8020,0 3px 0 #875514,0 0 24px #ffd16895;filter:none}
.destination::after{content:"";position:absolute;inset:-100%;pointer-events:none;background:linear-gradient(110deg,transparent 43%,#ffffff88 49%,transparent 55%);transform:translateX(-90%)}
.destination:hover::after,.destination:focus-visible::after,.destination[aria-expanded="true"]::after{animation:login-shine 1.1s ease-out both}
.destination:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #ab731e70,0 1px 0 #875514,0 0 24px #ffd168a0}
.destination:is(:hover,:focus-visible,:active,[aria-expanded="true"]) .menu-icon{color:#885015;text-shadow:0 1px #fff3bd}
.destination:is(:hover,:focus-visible,:active,[aria-expanded="true"]) .menu-icon svg{fill:#fff0a5;stroke:#885015}

button.panel-action{width:100%;border:0;font-family:inherit;cursor:pointer}

/* The platform collection uses one complete banner per row on phones. */
dialog.games-panel{width:min(94vw,1160px);max-height:90svh;padding:24px;overscroll-behavior:contain;scrollbar-color:#b58b3d #241038}
dialog.games-panel .panel-header{position:sticky;top:-24px;z-index:3;display:grid;grid-template-columns:72px minmax(0,1fr) 44px;gap:16px;align-items:center;margin:-24px -24px 0;padding:16px 24px;background:#32173f;border-bottom:1px solid #a67b384d}
dialog.games-panel .brand-dialog{grid-column:1;grid-row:1;width:72px;max-width:none;margin:0}
dialog.games-panel .close{grid-column:3;grid-row:1;position:static}
dialog.games-panel h2{grid-column:2;grid-row:1;font-size:clamp(1.25rem,2.5vw,1.75rem);margin:0;line-height:1.15}
.games-intro{margin:18px 0 24px}
.games-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.game-banner{display:block;position:relative;width:100%;padding:0;border:0;border-radius:14px;background:#180b24;line-height:0;box-shadow:0 7px 20px #09030f60;isolation:isolate;transition:box-shadow .2s ease,transform .2s ease,filter .2s ease}
.game-banner img{display:block;width:100%;height:auto;aspect-ratio:7/3;object-fit:contain;border-radius:inherit}
.game-banner::after{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:inherit;pointer-events:none;transition:border-color .2s ease,box-shadow .2s ease}
.game-banner:hover,.game-banner:focus-visible{transform:translateY(-3px);filter:brightness(1.12);box-shadow:0 0 24px #f5c95f70,0 10px 28px #08030e88}
.game-banner:hover::after,.game-banner:focus-visible::after,.game-banner:active::after{border-color:#fff1b3;box-shadow:inset 0 0 18px #ffd56745}
.game-banner:active{transform:translateY(1px);filter:brightness(1.2);box-shadow:0 0 30px #f5c95f90}
.games-note{margin:24px 0 0}
.back-to-games{display:block;margin:0 auto 18px;padding:10px 16px;min-height:44px;background:transparent;border:1px solid #af843f;border-radius:10px;font-size:1rem;color:#ffdf8e}
.back-to-games:hover{background:#5f3b38}
body:has(#palace-dialog[open]){overflow:hidden!important}
@media(min-width:760px){.games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:759px){dialog.games-panel{width:96vw;padding:22px 12px 18px;border-radius:20px}dialog.games-panel .panel-header{top:-22px;margin:-22px -12px 0;padding:12px;grid-template-columns:52px minmax(0,1fr) 44px;gap:8px}dialog.games-panel .brand-dialog{width:52px}.games-intro{margin-bottom:18px}.game-banner{border-radius:9px}}
@media(prefers-reduced-motion:reduce){.game-banner,.game-banner::after{transition:none}.game-banner:hover,.game-banner:focus-visible,.game-banner:active{transform:none}}
[data-panel][aria-busy="true"]{cursor:progress}

/* Match typography to the artwork, which can be narrower than the viewport. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:has(body[data-scene="lobby"]){scrollbar-width:none}
html:has(body[data-scene="lobby"])::-webkit-scrollbar{display:none}
.artboard{container-type:inline-size}
#arrival .enter{
 top:auto;height:auto;min-height:max(44px,8.5%);padding:.45em .65em;
 display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.45em;
 font-size:clamp(1rem,5.1cqi,1.625rem);line-height:1.15;
}
#arrival .enter>span:first-child{min-width:0;text-wrap:balance}
#arrival .enter>span:last-child{font-size:1.25em;line-height:1}
.login{font-size:clamp(.875rem,3.8cqi,1rem);line-height:1.2;padding:8px 10px}
#doors .scroll-cue{
 left:25%;width:50%;bottom:2.5%;min-height:44px;padding:0 4px;
 border:0;border-radius:0;background:none;box-shadow:none;
 font-size:clamp(1rem,4.6cqi,1.25rem);line-height:1.2;gap:2px;
 color:#fff3ce;text-shadow:0 2px 4px #160520,0 0 8px #160520;
}
#doors .scroll-cue .chevron{font-size:1.5rem;line-height:.75}
.lobby-menu{
 top:auto;bottom:3.5%;min-height:50.5%;height:auto;gap:clamp(4px,1.5cqi,8px);
 grid-template-rows:repeat(4,minmax(max-content,1fr));
 overflow:visible;
 padding:2px;
}
.destination{
 grid-template-columns:clamp(24px,7.2cqi,32px) minmax(0,1fr) 12px;
 grid-template-rows:auto;gap:clamp(6px,2cqi,10px);min-height:56px;
 padding:8px clamp(8px,2.6cqi,14px);text-align:left;
 font-size:clamp(1rem,4.35cqi,1.1875rem);line-height:1.2;
}
.destination>span:nth-child(2){min-width:0;overflow-wrap:break-word;text-wrap:pretty}
.destination small{font-size:.875rem;line-height:1.2;margin-top:2px}
.destination .menu-icon{font-size:clamp(24px,7.2cqi,32px)}
.destination .menu-icon svg{display:block;width:100%;height:auto;aspect-ratio:1}
.destination .arrow{display:block;font-size:1.5rem;line-height:1}
@media(min-width:760px){
 #arrival .enter{min-height:13%;font-size:clamp(1.125rem,2.1cqi,2.25rem)}
 .login,.scene:not(#arrival) .login{font-size:clamp(.875rem,1.35cqi,1rem)}
 #doors .scroll-cue{left:39%;width:22%;bottom:2.5%;font-size:clamp(1rem,1.55cqi,1.25rem)}
 .lobby-menu{left:57%;right:2.4%;top:auto;bottom:14%;min-height:69%;gap:clamp(6px,1cqi,14px)}
 .destination{grid-template-columns:clamp(24px,2.6cqi,36px) minmax(0,1fr) 14px;gap:clamp(8px,1cqi,14px);font-size:clamp(1rem,1.55cqi,1.5rem);padding:8px 12px}
 .destination .menu-icon{font-size:clamp(24px,2.6cqi,36px)}
}
@media(max-height:550px) and (max-width:759px){
 #arrival .enter{min-height:13%}
 .lobby-menu{top:auto;min-height:52.5%;gap:4px}
 .destination{min-height:48px;padding:6px 8px}
 #doors .scroll-cue{left:54%;width:42%;bottom:3%}
}

/* Modern interface type, independent of the illustrated brand lettering. */
.login,.enter,.destination,dialog h2,.panel-action,.back-to-games{font-family:Montserrat,"Open Sans",Arial,sans-serif;letter-spacing:-.015em;font-weight:600}
dialog h2{font-size:clamp(1.375rem,3vw,1.75rem);line-height:1.3}
dialog p,.utility-bar,.utility-bar button,dialog .eyebrow{font-family:"Open Sans",Arial,sans-serif}
#arrival .enter{font-size:clamp(1rem,4.5cqi,1.375rem)}
.destination{font-size:clamp(1rem,4cqi,1.125rem);line-height:1.3}
.destination small{font-family:"Open Sans",Arial,sans-serif;letter-spacing:0}
@media(min-width:760px){#arrival .enter{font-size:clamp(1.125rem,1.8cqi,1.875rem)}.destination{font-size:clamp(1rem,1.35cqi,1.3125rem)}}

#arrival .enter{font-weight:700;text-shadow:0 1px 0 #fff0aa;-webkit-text-stroke:.2px currentColor}