@font-face{font-family:'Unifont JP';src:url('assets/fonts/unifont_jp-18.0.01.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
:root{--pixel-green:#008568;--pixel-dark:#005b46;--pixel-light:#50c6a1;--pixel-black:#111;--pixel-white:#fff}
body{font-family:'Unifont JP',Meiryo,monospace;letter-spacing:.05em}h2,nav a,.menu-toggle,th{font-weight:400}
.about-section,.ranking-section{background-color:var(--pixel-green);background-image:linear-gradient(90deg,transparent 31px,#ffffff09 31px),linear-gradient(transparent 31px,#ffffff09 31px);background-size:32px 32px;border-bottom:8px solid #111}
.about-content,.ranking-section table,.map-placeholder{border:4px solid #111;border-radius:0;box-shadow:8px 8px 0 var(--pixel-dark)}
.about-content{background:#fff;color:#111;padding:32px;box-shadow:inset 4px 4px #e8efeb,8px 8px 0 var(--pixel-dark)}
.about-section .text-placeholder span{background:#dce8e1;height:8px}
.text-placeholder span,.skeleton{border-radius:0}
.members-section{padding-bottom:96px}
.member-slots>div,.member-slots>div:nth-child(n){border:4px solid #111;border-radius:0;background:#edf5f1;box-shadow:inset 6px 6px #fff,inset -6px -6px #cadfd3,6px 6px 0 #111}
.ranking-section th{background:#edf5f1;border-bottom:4px solid #111}
.ranking-section td{border-bottom:2px solid #dce7e2}
.map-section{background:#edf5f1;border-bottom:8px solid #111}
.map-placeholder{background:#fff;color:#111;box-shadow:inset 6px 6px #e8efeb,8px 8px 0 var(--pixel-dark)}
footer{border-top:4px solid #005b46}
@media(max-width:760px){.header-variant .menu-toggle{background:var(--pixel-green);color:#fff;border:4px solid #111;box-shadow:inset 3px 3px #50c6a1,inset -3px -3px #005b46,4px 4px 0 #111}.about-content{padding:24px}.member-slots{gap:20px}.about-section,.ranking-section{padding-left:6%;padding-right:calc(6% + 4px)}.header-variant.is-compact nav{max-height:calc(100dvh - 100px);overflow:auto}}

.site-header{background:var(--pixel-green);color:#fff;border-bottom:4px solid #111}.site-header nav a{color:#fff}.site-header nav a:hover,.site-header nav a:focus-visible{background:#111;color:#fff}.hero{padding:0;background:#fff}.hero img{width:100%;height:auto;object-fit:contain;border-bottom:4px solid #111}.menu-toggle{border-radius:0}

.movie-slot{display:flex;justify-content:center;margin-top:24px}
.movie-button{font:inherit;letter-spacing:.05em;min-height:56px;width:min(100%,280px);padding:12px 24px;background:#fff;color:#111;border:4px solid #111;border-radius:0;box-shadow:inset 4px 4px #edf5f1,inset -4px -4px #cadfd3,4px 4px 0 #005b46}
.movie-button:disabled{opacity:1;cursor:default}
@media(max-width:760px){.movie-slot{margin-top:16px}.movie-button{min-height:52px;width:100%;font-size:16px}}
.movie-button:not(:disabled){cursor:pointer}.movie-button:not(:disabled):hover{background:#edf5f1}.movie-button:focus-visible{outline:3px solid #fff;outline-offset:6px}.movie-open{overflow:hidden}#movie-dialog{padding:0;width:min(960px,92vw);max-width:92vw;max-height:90dvh;background:#111;color:#fff;border:4px solid #008568;box-shadow:8px 8px 0 #000}#movie-dialog::backdrop{background:rgba(0,0,0,.8)}.movie-dialog-inner{padding:12px;display:flex;flex-direction:column;gap:12px}.movie-close{align-self:flex-end;background:#fff;color:#111;font:inherit;padding:8px 20px;border:2px solid #008568;cursor:pointer}.movie-close:focus-visible{outline:3px solid #50c6a1;outline-offset:3px}#movie-dialog video{display:block;width:100%;max-height:75dvh;background:#000}

/* Supplied Minecraft character PNGs in the PV lineup order. */
.hero-lineup{background:#fff;padding:28px 12px 16px;border-bottom:4px solid #111;overflow-x:auto;overflow-y:hidden}
.hero-lineup:focus-visible{outline:3px solid #008568;outline-offset:-4px}
.hero-lineup-track{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));align-items:end;width:100%;max-width:1920px;margin:auto;padding:4px 24px}
.hero-character{position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:0;animation:character-enter .45s both;animation-delay:calc(var(--character-index)*.1s)}
.hero-character img{width:160%;height:clamp(100px,13vw,210px);max-width:none;object-fit:contain;border:0;flex-shrink:0}
@keyframes character-enter{from{opacity:0;translate:-24px 8px}to{opacity:1;translate:0 0}}
@media(max-width:760px){.hero-lineup{padding:20px 8px 12px}.hero-lineup-track{width:1512px;max-width:none;padding:4px 32px;grid-template-columns:repeat(18,1fr)}.hero-character img{height:160px}}
@media(prefers-reduced-motion:reduce){.hero-character{animation:none}}

/* Bring the character lineup closer together. */
.hero-lineup-track{width:88%;padding-left:12px;padding-right:12px}
.hero-character img{width:200%;height:clamp(110px,14vw,225px)}
@media(max-width:760px){.hero-lineup-track{width:1200px;padding-left:28px;padding-right:28px}.hero-character img{height:160px}}

/* Scroll-controlled scenes from the supplied background movie. */
.scroll-scene-page{background:#111;isolation:isolate}
.scroll-background-layer{position:fixed;inset:0;z-index:0;pointer-events:none;background:#172d24 url('assets/scroll-background-poster.jpg') center/cover no-repeat}
.scroll-background-layer:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.18)}
#scroll-background{display:block;width:100%;height:100%;object-fit:cover}
.scroll-scene-page main,.scroll-scene-page footer{position:relative;z-index:1}
.scroll-scene-page .site-header{z-index:20;background:rgba(0,133,104,.96)}
.scroll-scene-page .hero{display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100svh - 110px);padding:0;background:none;border-bottom:4px solid #111}
.scene-hero-logo{display:flex;align-items:center;justify-content:center;flex:1;padding:40px 20px 16px;min-height:260px}
.scene-hero-logo>img{width:min(520px,70vw);max-height:56svh;height:auto;object-fit:contain;border:0;filter:drop-shadow(0 3px 0 rgba(0,0,0,.2))}
.scroll-scene-page .hero-lineup{flex-shrink:0;background:rgba(0,133,104,.68);border-top:3px solid rgba(255,255,255,.5);border-bottom:0;padding-top:10px;padding-bottom:10px}
.scroll-scene-page .hero-character{animation:none}
.scroll-scene-page .about-section,.scroll-scene-page .members-section,.scroll-scene-page .ranking-section{min-height:100svh;padding:10svh 5%;margin-top:0;margin-bottom:0;background:rgba(0,133,104,.42);background-image:none;border-bottom:4px solid #111;align-content:center}
.scroll-scene-page .about-section{gap:7%;min-height:100svh}
.scroll-scene-page .about-logo{padding:0}
.scroll-scene-page .about-logo>img{max-height:40svh;object-fit:contain}
.scroll-scene-page .about-content{background:rgba(255,255,255,.94)}
.scroll-scene-page .members-section{display:flex;flex-direction:column;justify-content:center;min-height:110svh}
.scroll-scene-page .members-section>h2,.scroll-scene-page .ranking-section h2,.scroll-scene-page .map-section h2{color:#fff;text-shadow:2px 2px 0 #111}
.scroll-scene-page .member-slots{gap:28px}
.scroll-scene-page .member-slots>div:nth-child(n){aspect-ratio:4/3;background:rgba(255,255,255,.76);box-shadow:4px 4px 0 #111;border-width:3px}
.scroll-scene-page .ranking-section{display:flex;flex-direction:column;justify-content:center;min-height:95svh}
.scroll-scene-page .ranking-section .heading-row{align-items:center}
.scroll-scene-page .ranking-section table{background:rgba(255,255,255,.95)}
.scroll-scene-page .ranking-section .connection-status{color:#fff}
.scroll-scene-page .map-section{min-height:100svh;background:rgba(0,0,0,.12);padding:10svh 0;border-bottom:4px solid #111;display:flex;align-items:center}
.scroll-scene-page .map-section>.section-inner{width:78%;max-width:1000px}
.scroll-scene-page .map-placeholder{height:55svh;min-height:280px;background:rgba(255,255,255,.86)}
.scene-motion-toggle{position:fixed;right:18px;bottom:18px;z-index:25;background:#fff;color:#111;border:3px solid #111;padding:9px 14px;font:inherit;font-size:12px;line-height:1.5;box-shadow:3px 3px 0 #005b46}
.scene-motion-toggle:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:760px){.scroll-scene-page .hero{min-height:calc(100svh - 86px)}.scene-hero-logo{padding:30px 20px;min-height:280px}.scene-hero-logo>img{width:88vw;max-height:48svh}.scroll-scene-page .hero-lineup{padding-top:8px;padding-bottom:8px}.scroll-scene-page .about-section,.scroll-scene-page .members-section,.scroll-scene-page .ranking-section{padding:64px 6%;min-height:100svh}.scroll-scene-page .about-section{gap:26px}.scroll-scene-page .about-logo>img{max-height:34svh}.scroll-scene-page .about-content{padding:24px 18px}.scroll-scene-page .member-slots{gap:18px}.scroll-scene-page .member-slots>div:nth-child(n){aspect-ratio:4/3}.scroll-scene-page .members-section{min-height:110svh}.scroll-scene-page .ranking-section .heading-row{align-items:flex-start;flex-direction:column;gap:10px}.scroll-scene-page .ranking-section .heading-row h2{font-size:25px}.scroll-scene-page .map-section{padding:64px 0}.scroll-scene-page .map-section>.section-inner{width:88%}.scroll-scene-page .map-placeholder{height:55svh;min-height:280px}.scene-motion-toggle{right:12px;bottom:12px;font-size:11px;padding:8px 10px}}
@media(max-width:350px){.scroll-scene-page .ranking-section .heading-row h2{font-size:22px}.scroll-scene-page .about-content{padding:20px 14px}}

/* Restore the supplied full key visual; scene time anchors stay unchanged. */
.scroll-scene-page .hero{min-height:0}
.scroll-scene-page .scene-hero-logo{display:block;flex:none;padding:0;min-height:0;background:#fff}
.scroll-scene-page .scene-hero-logo>img{width:100%;max-width:none;max-height:none;height:auto;object-fit:contain;filter:none;border:0}

/* Reveal the character row at the bottom of the introduction. */
.scroll-scene-page .about-section>.hero-lineup{grid-column:1/-1;width:calc(100% + 10vw);margin-left:-5vw;margin-top:48px;flex-shrink:0;background:rgba(0,133,104,.68);border-top:3px solid rgba(255,255,255,.5);border-bottom:0;padding:16px 12px}
.scroll-scene-page .about-section>.hero-lineup .hero-character{animation:none}
.scroll-scene-page .hero-lineup.reveal-ready .hero-character{opacity:0;translate:-16px 12px;transition:opacity 1s ease,translate 1s ease;transition-delay:calc(var(--character-index)*.25s)}
.scroll-scene-page .hero-lineup.reveal-ready.is-revealed .hero-character{opacity:1;translate:0 0}
@media(max-width:760px){.scroll-scene-page .about-section>.hero-lineup{width:calc(100% + 12vw);margin-left:-6vw;margin-top:20px}.scroll-scene-page .hero-lineup.reveal-ready .hero-character{transition-delay:0s}}
@media(prefers-reduced-motion:reduce){.scroll-scene-page .hero-lineup.reveal-ready .hero-character{opacity:1;translate:none;transition:none}}

.scroll-scene-page .about-section>.hero-lineup{width:auto;min-width:0;margin-left:-5.555556%;margin-right:-5.555556%}
@media(max-width:760px){.scroll-scene-page .about-section>.hero-lineup{width:auto;margin-left:-6.818182%;margin-right:-6.818182%}}

.scroll-scene-page .hero-lineup.click-reveal{cursor:pointer}
.scroll-scene-page .hero-lineup.click-reveal .hero-character{opacity:0;translate:0 8px;pointer-events:none;transition:opacity .7s ease,translate .7s ease;transition-delay:0s}
.scroll-scene-page .hero-lineup.click-reveal .hero-character.is-visible{opacity:1;translate:0 0;pointer-events:auto;cursor:pointer}
.scroll-scene-page .hero-character:focus-visible{outline:2px solid white;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.scroll-scene-page .hero-lineup.click-reveal .hero-character{transition:none}}

.scroll-scene-page .members-section{min-height:0;padding-top:64px;padding-bottom:64px}
.member-faces{display:grid;grid-template-columns:repeat(4,64px);gap:18px 26px;justify-content:center;list-style:none;padding:0;margin:28px auto 0}
.member-faces li{margin:0;padding:0}
.member-faces img{width:64px;height:64px;image-rendering:pixelated;border:2px solid #111;box-shadow:3px 3px 0 rgba(0,0,0,.4);background:#fff}
@media(max-width:400px){.member-faces{grid-template-columns:repeat(4,48px);gap:16px 18px}.member-faces img{width:48px;height:48px}}

/* Enter once on scroll, then keep every character visible. */
.scroll-scene-page .hero-lineup .hero-character{cursor:pointer}
.scroll-scene-page .hero-lineup.scroll-reveal .hero-character{opacity:0;translate:0 10px;transition:opacity 1s ease,translate 1s ease;transition-delay:calc(var(--character-index)*.25s)}
.scroll-scene-page .hero-lineup.scroll-reveal.is-revealed .hero-character{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.scroll-scene-page .hero-lineup.scroll-reveal .hero-character{opacity:1;translate:none;transition:none}}

/* Slow left-to-right fade only; keep revealed characters on screen. */
.scroll-scene-page .hero-lineup.scroll-reveal .hero-character{translate:none;transition:opacity 1.6s ease;transition-delay:calc(var(--character-index)*.5s)}
.scroll-scene-page .hero-lineup.scroll-reveal.is-revealed .hero-character{translate:none}
@media(prefers-reduced-motion:reduce){.scroll-scene-page .hero-lineup.scroll-reveal .hero-character{transition:none}}

/* Center the introduction without the duplicate logo. */
.scroll-scene-page .about-section{grid-template-columns:minmax(0,1fr);gap:28px}
.scroll-scene-page .about-section>.about-content{width:min(100%,640px);justify-self:center}
.scroll-scene-page .about-section>.about-movie{justify-self:center;width:min(100%,300px)}
.scroll-scene-page .about-movie .movie-slot{margin:0}
.scroll-scene-page .about-section>.hero-lineup{margin-top:20px}


/* The curtain covers only the background video, beneath page content. */

/* Give each background scene room before the next section enters. */
.scroll-scene-page .about-section,.scroll-scene-page .members-section,.scroll-scene-page .ranking-section,.scroll-scene-page .map-section{min-height:150svh}
.scroll-scene-page .about-section{align-content:center}
@media(max-width:760px){.scroll-scene-page .about-section,.scroll-scene-page .members-section,.scroll-scene-page .ranking-section,.scroll-scene-page .map-section{min-height:150svh}}

/* Solid emerald background below the hero. */
body.scroll-scene-page{background:#008568}
.scroll-scene-page .about-section,.scroll-scene-page .members-section,.scroll-scene-page .ranking-section,.scroll-scene-page .map-section{background:#008568;background-image:none}

.scroll-scene-page .about-section{background:rgba(0,133,104,.42);background-image:none}
.scroll-background-layer[hidden]{display:none}

/* Participants use their content height rather than the former scene spacer. */
.scroll-scene-page .members-section{min-height:0;padding-top:48px;padding-bottom:48px}
@media(max-width:760px){.scroll-scene-page .members-section{min-height:0;padding-top:40px;padding-bottom:40px}}

/* Keep the introduction on the opening street frame. */
.scroll-background-layer{background-image:url('assets/about-street-first.jpg')}
.scroll-scene-page .members-section{width:100%;max-width:none;padding-left:6%;padding-right:6%}

/* Content-led spacing and emerald section palette. */
.scroll-scene-page .about-section,
.scroll-scene-page .members-section,
.scroll-scene-page .ranking-section,
.scroll-scene-page .map-section{width:100%;max-width:none;min-height:0;margin:0;padding:80px 6%;border-bottom:3px solid #111}
.scroll-scene-page .about-section{padding-bottom:0;gap:28px}
.scroll-scene-page .about-section>.hero-lineup{margin-top:32px;padding-top:24px;padding-bottom:24px}
.scroll-scene-page .members-section{background:#d8f3e8;color:#111}
.scroll-scene-page .members-section>h2{color:#111;text-shadow:none;text-align:center}
.scroll-scene-page .ranking-section{background:#f8fcfa;color:#111;align-items:center}
.scroll-scene-page .ranking-section h2{color:#111;text-shadow:none}
.scroll-scene-page .ranking-section .connection-status{color:#53675e}
.scroll-scene-page .ranking-section>.heading-row,
.scroll-scene-page .ranking-section>table{width:100%;max-width:860px}
.scroll-scene-page .ranking-section table{background:#fff}
.scroll-scene-page .map-section{background:#005c49;padding:72px 6% 80px}
.scroll-scene-page .map-section>.section-inner{width:100%;max-width:1000px;margin:auto}
.scroll-scene-page .map-placeholder{height:380px;min-height:0;background:#edf7f2}
@media(max-width:760px){
 .scroll-scene-page .about-section,.scroll-scene-page .members-section,.scroll-scene-page .ranking-section,.scroll-scene-page .map-section{min-height:0;padding:48px 6%}
 .scroll-scene-page .about-section{padding-bottom:0}
 .scroll-scene-page .about-section>.hero-lineup{margin-top:16px}
 .scroll-scene-page .map-section>.section-inner{width:100%}
 .scroll-scene-page .map-placeholder{height:300px;min-height:0}
}

.scroll-scene-page .about-section>.about-content{width:min(100%,760px);padding:40px}
.intro-label{font-size:14px;letter-spacing:.12em;color:#00664e;margin-bottom:24px}
.intro-catch{font-size:clamp(23px,3.2vw,36px);line-height:1.5;margin-bottom:20px;letter-spacing:.03em}
.scroll-scene-page .about-content h2{font-size:24px;margin-bottom:28px}
.scroll-scene-page .about-content .text-placeholder{gap:15px}
@media(max-width:760px){.scroll-scene-page .about-section>.about-content{padding:28px 22px}.intro-label{margin-bottom:20px}.intro-catch{font-size:24px}.scroll-scene-page .about-content h2{font-size:21px}}

.live-section,.creators-section{padding:72px 6%;border-bottom:3px solid #111;color:#111}
.live-section{background:#fff}
.creators-section{background:#d8f3e8}
.content-width{width:100%;max-width:1000px;margin:auto}
.live-section h2,.creators-section h2{text-align:center;margin-bottom:32px}
.live-slots,.creator-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.live-slots>div{aspect-ratio:16/9;background:#edf7f2;border:2px solid #111}
.creator-slots>div{height:120px;background:rgba(255,255,255,.75);border:2px solid #111}
@media(max-width:760px){.live-section,.creators-section{padding:48px 6%}.live-slots,.creator-slots{grid-template-columns:1fr;gap:18px}.live-slots{max-width:440px;margin:auto}.creator-slots>div{height:90px}}

/* One introduction scene, centered through the summoner lineup. */
.scroll-scene-page .about-section{text-align:center}
.scroll-scene-page .about-section>.intro-label{justify-self:center;color:#fff;font-size:24px;letter-spacing:.08em;margin:0 0 8px;text-shadow:2px 2px 0 #003f32}
.scroll-scene-page .about-content{text-align:center}
.scroll-scene-page .about-content .text-placeholder span{justify-self:center;width:100%}
.scroll-scene-page .about-content .text-placeholder span:nth-child(3){width:85%}
.scroll-scene-page .about-content .text-placeholder span:last-child{width:65%}
.scroll-scene-page .summoners-heading{color:#fff;text-shadow:2px 2px 0 #003f32;font-size:26px;margin-top:24px;scroll-margin-top:130px}
.scroll-scene-page .about-section>.hero-lineup{margin-top:0;background:transparent;border-top:0}
@media(max-width:760px){.scroll-scene-page .about-section>.intro-label{font-size:21px}.scroll-scene-page .summoners-heading{font-size:22px;margin-top:16px}}

/* Only participants confirmed live retain their original colors. */
.hero-lineup .hero-character img{filter:grayscale(1);transition:filter .4s ease}
.hero-lineup .hero-character[data-live='true'] img{filter:grayscale(0)}

.stream-popup{position:fixed;z-index:40;max-width:calc(100vw - 24px);padding:14px 18px;background:#fff;color:#111;border:3px solid #111;box-shadow:4px 4px 0 #005c49;font:16px/1.5 'Unifont JP',monospace;text-align:center}
.stream-popup[hidden]{display:none}
.stream-popup:after{content:'';position:absolute;top:100%;left:var(--arrow-x,50%);width:12px;height:12px;background:#fff;border-right:3px solid #111;border-bottom:3px solid #111;transform:translate(-50%,-4px) rotate(45deg)}
.stream-popup a{display:block;color:#005c49;text-decoration:underline;text-underline-offset:4px;padding:4px}
.stream-popup a:focus-visible{outline:2px solid #008568;outline-offset:4px}

/* Mobile: all eighteen summoners fit without horizontal scrolling. */
@media(max-width:760px){
 .scroll-scene-page .about-section>.hero-lineup{width:100%;margin-left:0;margin-right:0;padding:12px 0 28px;overflow:visible}
 .hero-lineup .hero-lineup-track{width:100%;max-width:100%;padding:0;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:24px}
 .hero-lineup .hero-character{width:100%;min-width:0}
 .hero-lineup .hero-character img{width:145%;height:auto;aspect-ratio:868/962;object-fit:contain}
}

/* Tighter mobile summoner spacing. */
@media(max-width:760px){
 .hero-lineup .hero-lineup-track{width:88%;margin-left:auto;margin-right:auto;row-gap:10px}
 .hero-lineup .hero-character img{width:155%}
 .scroll-scene-page .about-section>.hero-lineup{padding-top:6px;padding-bottom:18px}
}

/* Keep stream bubbles on one line, without the green offset shadow. */
.stream-popup{width:max-content;white-space:nowrap;box-shadow:none}
.stream-popup a,.stream-popup span{white-space:nowrap}

/* Guild noticeboard palette with a repeating triangular backdrop. */
.scroll-scene-page .members-section{
 background-color:#b68d61;
 background-image:conic-gradient(from 30deg at 50% 75%,#c6a477 0deg 60deg,#ac8054 60deg 120deg,#c6a477 120deg 180deg,#b68d61 180deg 240deg,#d0b18b 240deg 300deg,#b68d61 300deg 360deg);
 background-size:96px 112px;
 border-top:8px solid #6c4b31;
 border-bottom:8px solid #6c4b31;
 box-shadow:inset 0 4px 0 #dfc398,inset 0 -4px 0 #8e633d;
 color:#2d2016;
}
.scroll-scene-page .members-section>h2{color:#2d2016;text-shadow:none}
.scroll-scene-page .members-section .member-faces{padding:28px 34px;background:#e5d3ad;border:5px solid #795334;box-shadow:inset 0 0 0 3px #f1e4c8,5px 5px 0 rgba(63,39,22,.28)}
.scroll-scene-page .members-section .member-faces img{border-color:#563d29;box-shadow:3px 3px 0 #ae8a5e;background:#f6ecd8}
@media(max-width:400px){.scroll-scene-page .members-section .member-faces{padding:22px 18px}}
@media(max-width:760px){.scroll-scene-page .members-section .member-faces{width:100%;max-width:400px;grid-template-columns:repeat(4,minmax(0,64px));column-gap:14px;padding:24px 18px}.scroll-scene-page .members-section .member-faces img{width:100%;height:auto;aspect-ratio:1}}
@media(max-width:400px){.scroll-scene-page .members-section .member-faces{grid-template-columns:repeat(4,minmax(0,48px));column-gap:12px;padding:22px 16px}}

/* Evenly aligned wooden panels instead of overlapping triangles. */
.scroll-scene-page .members-section{
 background-color:#bd986c;
 background-image:linear-gradient(to right,rgba(91,60,34,.22) 1px,transparent 1px),linear-gradient(to bottom,rgba(91,60,34,.22) 1px,transparent 1px);
 background-size:64px 64px;
 background-position:0 0;
}

/* Clean triangular tiles and a wooden participant sign. */
.scroll-scene-page .members-section{
 background-color:#c5a278;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'%3E%3Cpath fill='%23b58e62' d='M0 0h96L48 84z'/%3E%3C/svg%3E");
 background-size:96px 84px;
}
.scroll-scene-page .members-section>h2{
 display:table;align-self:center;max-width:100%;margin:0 auto;
 padding:12px 38px;background:#8d613d;color:#fff3d9;
 border:4px solid #563a25;
 box-shadow:inset 0 3px 0 #ba8b5d,inset 0 -3px 0 #70482b,4px 4px 0 rgba(66,42,23,.25);
 text-shadow:2px 2px 0 #563a25;letter-spacing:.12em;
}

/* Fine triangular outlines, matching the supplied reference. */
.scroll-scene-page .members-section{
 background-color:#ddc5a3;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='166.276' viewBox='0 0 96 166.276'%3E%3Cpath d='M0 0H96M0 83.138H96M0 166.276H96M0 0L96 166.276M96 0L0 166.276' fill='none' stroke='%23947550' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E");
 background-size:96px 166.276px;
}

/* Pixel-stepped triangle outlines and crisp noticeboard edges. */
.scroll-scene-page .members-section{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2280%22%20viewBox%3D%220%200%2048%2080%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23947550%22%20stroke-opacity%3D%22.26%22%20stroke-width%3D%221%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M0%200H48M0%2040H48M0%2080H48%22%2F%3E%3Cpath%20d%3D%22M0%200V4H2V8H4V12H6V16H8V20H12V24H14V28H16V32H18V36H20V40H24%22%2F%3E%3Cpath%20d%3D%22M48%200V4H46V8H44V12H42V16H40V20H36V24H34V28H32V32H30V36H28V40H24%22%2F%3E%3Cpath%20d%3D%22M24%2040V44H22V48H20V52H18V56H16V60H12V64H10V68H8V72H6V76H4V80H0%22%2F%3E%3Cpath%20d%3D%22M24%2040V44H26V48H28V52H30V56H32V60H36V64H38V68H40V72H42V76H44V80H48%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:96px 160px;image-rendering:pixelated}
.scroll-scene-page .members-section>h2{box-shadow:inset 0 4px #ba8b5d,inset 0 -4px #70482b,4px 4px #795334;text-shadow:2px 2px #563a25}
.scroll-scene-page .members-section .member-faces{box-shadow:inset 0 0 0 4px #f1e4c8,6px 6px #ad8b62}

/* Guild ranking board replaces the participant icon section. */
.scroll-scene-page .ranking-section{background-color:#ddc5a3;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2280%22%20viewBox%3D%220%200%2048%2080%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23947550%22%20stroke-opacity%3D%22.26%22%20stroke-width%3D%221%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M0%200H48M0%2040H48M0%2080H48%22%2F%3E%3Cpath%20d%3D%22M0%200V4H2V8H4V12H6V16H8V20H12V24H14V28H16V32H18V36H20V40H24%22%2F%3E%3Cpath%20d%3D%22M48%200V4H46V8H44V12H42V16H40V20H36V24H34V28H32V32H30V36H28V40H24%22%2F%3E%3Cpath%20d%3D%22M24%2040V44H22V48H20V52H18V56H16V60H12V64H10V68H8V72H6V76H4V80H0%22%2F%3E%3Cpath%20d%3D%22M24%2040V44H26V48H28V52H30V56H32V60H36V64H38V68H40V72H42V76H44V80H48%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:96px 160px;border-top:8px solid #6c4b31;border-bottom:8px solid #6c4b31;box-shadow:inset 0 4px #dfc398,inset 0 -4px #8e633d;color:#2d2016;gap:28px}
.scroll-scene-page .ranking-section>.ranking-sign{display:table;align-self:center;margin:0 auto;padding:14px 30px;background:#8d613d;color:#fff3d9;border:4px solid #563a25;box-shadow:inset 0 4px #ba8b5d,inset 0 -4px #70482b,4px 4px #795334;text-shadow:2px 2px #563a25;font-size:28px;text-align:center}
.ranking-board{width:100%;max-width:860px;padding:28px;background:#e5d3ad;border:5px solid #795334;box-shadow:inset 0 0 0 4px #f1e4c8,6px 6px #ad8b62}
.scroll-scene-page .ranking-section .connection-status{display:block;margin-bottom:16px;color:#6a5138;text-align:right}
.scroll-scene-page .ranking-section .ranking-board table{background:transparent;border:0;box-shadow:none;color:#2d2016}
.ranking-board th{border-bottom-color:#795334}
.ranking-board td{border-bottom-color:#c4a67e}
.ranking-board .skeleton{background:#c9b38c}
@media(max-width:760px){.scroll-scene-page .ranking-section>.ranking-sign{font-size:23px;padding:12px 18px}.ranking-board{padding:24px 16px}.scroll-scene-page .ranking-section{gap:24px}}
@media(max-width:350px){.scroll-scene-page .ranking-section>.ranking-sign{font-size:20px;padding:12px 10px}}

/* EconomyBoard RICH: eight descending rows, rank / face / name / amount. */
.mod-ranking-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mod-rank-row{display:grid;grid-template-columns:48px 36px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:68px;padding:10px 16px;background:#d2bb91;border-left:5px solid transparent;color:#372719}
.mod-rank-row:nth-child(-n+3){background:#f0dfb7}
.mod-rank-row:nth-child(1){border-left-color:#c99928}
.mod-rank-row:nth-child(2){border-left-color:#9ca6ad}
.mod-rank-row:nth-child(3){border-left-color:#b57749}
.mod-rank-place{white-space:nowrap;font-size:21px}
.mod-rank-row:nth-child(1) .mod-rank-place{color:#86600b}
.mod-rank-row:nth-child(2) .mod-rank-place{color:#5e6971}
.mod-rank-row:nth-child(3) .mod-rank-place{color:#93592e}
.rank-face-placeholder{width:32px;height:32px;background:#c0a77e;image-rendering:pixelated}
.rank-name-placeholder{height:9px;width:min(100%,150px);background:#bca47a}
.mod-rank-amount{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;white-space:nowrap}
.rank-amount-placeholder{width:70px;height:9px;background:#bca47a}
.mod-rank-amount small{font-size:12px;color:#776144}
@media(max-width:760px){.ranking-board{padding:16px 10px}.mod-rank-row{grid-template-columns:32px 24px minmax(0,1fr) auto;gap:8px;padding:10px 8px;min-height:58px}.rank-face-placeholder{width:24px;height:24px}.mod-rank-place{font-size:17px}.rank-amount-placeholder{width:36px}.mod-rank-amount{gap:4px}.mod-rank-amount small{font-size:10px}}

/* Map backdrop: still frame from the opening street scene. */
.scroll-scene-page .map-section{
 background-color:#315c4d;
 background-image:linear-gradient(rgba(0,70,54,.35),rgba(0,70,54,.35)),url('assets/about-street-first.jpg');
 background-position:center;
 background-size:cover;
 background-repeat:no-repeat;
}

.scroll-scene-page .map-placeholder{box-shadow:none}

.scroll-scene-page .map-section{background-image:linear-gradient(rgba(0,50,42,.28),rgba(0,50,42,.28)),url('assets/map-ship-still.jpg');background-position:center;background-size:cover}

.scroll-scene-page .map-section{background-image:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.16)),url('assets/map-ship-provided.jpg');background-position:center;background-size:cover}

/* Two separately suspended signs: emerald logo and wooden navigation. */
.scroll-scene-page .hanging-header{background:transparent;border:0;box-shadow:none;min-height:132px;padding:28px 5% 12px;gap:38px;align-items:flex-start;color:#fff;pointer-events:none}
.hanging-header .site-logo,.hanging-menu-board{position:relative;pointer-events:auto;animation:sign-drop .95s both;transform-origin:top center}
.hanging-header .site-logo{width:166px;height:90px;background:#008568;border:4px solid #003f32;padding:4px 10px;box-shadow:inset 0 3px #50c6a1,inset 0 -3px #005b46,4px 4px #1113;flex-shrink:0}
.hanging-header .site-logo img{height:74px;object-fit:contain}
.hanging-menu-board{width:min(100%,1000px);margin-left:auto;min-height:76px;margin-top:7px;background:#956b45;border:4px solid #503720;box-shadow:inset 0 4px #c49b6b,inset 0 -4px #704a2c,4px 4px #1113;padding:10px 18px;animation-delay:.12s}
.hanging-header .site-logo:before,.hanging-header .site-logo:after,.hanging-menu-board:before,.hanging-menu-board:after{content:'';position:absolute;width:6px;height:48px;bottom:calc(100% + 2px);left:17px;background:repeating-linear-gradient(to bottom,#40382a 0 5px,#b4a281 5px 8px);border-left:1px solid #24251e;border-right:1px solid #24251e;pointer-events:none}
.hanging-header .site-logo:after,.hanging-menu-board:after{left:auto;right:17px}
.hanging-header nav{display:flex;max-width:none;width:100%;gap:8px;justify-content:space-around}
.hanging-header nav a{color:#fff3d8;padding:10px 8px;font-size:14px}
.hanging-header nav a:hover,.hanging-header nav a:focus-visible{background:#65462d;color:#fff}
@keyframes sign-drop{0%{transform:translateY(-180px)}58%{transform:translateY(9px)}76%{transform:translateY(-5px)}90%{transform:translateY(2px)}100%{transform:translateY(0)}}
@media(max-width:1000px) and (min-width:761px){.scroll-scene-page .hanging-header{gap:24px;padding-left:3%;padding-right:3%}.hanging-header .site-logo{width:130px}.hanging-menu-board{padding:10px 8px}.hanging-header nav a{font-size:12px;padding:10px 4px}}
@media(max-width:760px){
 .scroll-scene-page .hanging-header{min-height:112px;padding:24px 5% 10px;gap:24px;align-items:flex-start}
 .hanging-header .site-logo{width:116px;height:74px;padding:2px 6px}
 .hanging-header .site-logo img{height:62px}
 .hanging-menu-board{width:auto;min-width:116px;min-height:58px;padding:4px 10px;margin-top:6px}
 .hanging-header .menu-toggle{display:block;background:transparent;color:#fff3d8;border:0;box-shadow:none;padding:10px;width:100%;min-height:42px}
 .hanging-header nav{display:none;position:absolute;top:calc(100% + 10px);right:-4px;left:auto;width:min(280px,85vw);background:#956b45;border:4px solid #503720;padding:12px;box-shadow:inset 0 3px #c49b6b;max-height:70vh;overflow:auto}
 .hanging-header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:2px}
 .hanging-header nav a{text-align:center;font-size:16px;padding:12px}
 .hanging-header .site-logo:before,.hanging-header .site-logo:after,.hanging-menu-board:before,.hanging-menu-board:after{height:42px;left:12px;width:5px}
 .hanging-header .site-logo:after,.hanging-menu-board:after{left:auto;right:12px}
}
@media(prefers-reduced-motion:reduce){.hanging-header .site-logo,.hanging-menu-board{animation:none}}

/* Crisp pixel-board rims and plain dark suspension straps. */
.hanging-header .site-logo,.hanging-header .hanging-menu-board{border-radius:0;border-width:4px;outline:2px solid #222;outline-offset:2px}
.hanging-header .site-logo{box-shadow:inset 4px 4px #36b595,inset -4px -4px #005441,4px 4px #222}
.hanging-header .hanging-menu-board{background:#956b45;box-shadow:inset 4px 4px #bd9162,inset -4px -4px #6c472c,4px 4px #222}
.hanging-header .site-logo:before,.hanging-header .site-logo:after,.hanging-header .hanging-menu-board:before,.hanging-header .hanging-menu-board:after{background:#303632;border:0;width:6px}
.hanging-header nav a:hover,.hanging-header nav a:focus-visible{box-shadow:inset 2px 2px #4c3322,inset -2px -2px #bc9166}

/* Remove the outer black outline and offset backing from both signs. */
.hanging-header .site-logo,.hanging-header .hanging-menu-board{outline:none}
.hanging-header .site-logo{box-shadow:inset 4px 4px #36b595,inset -4px -4px #005441}
.hanging-header .hanging-menu-board{box-shadow:inset 4px 4px #bd9162,inset -4px -4px #6c472c}

/* Shorter suspension, keeping both signs closer to the top. */
.scroll-scene-page .hanging-header{padding-top:14px;min-height:118px}
.hanging-header .site-logo:before,.hanging-header .site-logo:after,.hanging-header .hanging-menu-board:before,.hanging-header .hanging-menu-board:after{height:24px}
@media(max-width:760px){.scroll-scene-page .hanging-header{padding-top:12px;min-height:100px}.hanging-header .site-logo:before,.hanging-header .site-logo:after,.hanging-header .hanging-menu-board:before,.hanging-header .hanging-menu-board:after{height:21px}}

/* Square paintings in simple pixel frames. */
.gallery-section{padding:72px 6% 80px;background:#f3ecdd;border-bottom:4px solid #6c4b31;color:#30241b}
.gallery-section h2{text-align:center;margin-bottom:36px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
.gallery-piece{margin:0;min-width:0}
.pixel-frame{aspect-ratio:1;background:#e5d8be;border:8px solid #785436;box-shadow:inset 4px 4px #b98d5e,inset -4px -4px #553922;position:relative;padding:6px}
.pixel-frame:before{content:'';position:absolute;inset:-8px;border-top:3px solid #b98d5e;border-left:3px solid #b98d5e;border-bottom:3px solid #553922;border-right:3px solid #553922;pointer-events:none}
.pixel-frame img{display:block;width:100%;height:100%;object-fit:cover;border:0}
.gallery-piece figcaption{text-align:center;font-size:16px;line-height:1.6;margin-top:14px;overflow-wrap:anywhere}
@media(max-width:760px){.gallery-section{padding:48px 6%}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.pixel-frame{border-width:6px;padding:4px}.pixel-frame:before{inset:-6px}.gallery-piece figcaption{font-size:14px}.hanging-header nav a{font-size:14px}}

/* A black three-line menu on mobile and after the desktop hero. */
.hanging-header .menu-toggle{font-size:0;line-height:0;position:relative}
.hanging-header .menu-toggle:before{content:'';display:block;width:26px;height:20px;margin:auto;background:linear-gradient(to bottom,#111 0 3px,transparent 3px 8px,#111 8px 11px,transparent 11px 17px,#111 17px 20px)}
@media(min-width:761px){
 .hanging-header.is-past-hero .hanging-menu-board{width:80px;min-height:58px;padding:4px 10px}
 .hanging-header.is-past-hero .menu-toggle{display:block;width:100%;min-height:42px;padding:8px;background:transparent;border:0;box-shadow:none}
 .hanging-header.is-past-hero nav{display:none;position:absolute;top:calc(100% + 12px);right:-4px;width:250px;background:#956b45;border:4px solid #503720;padding:12px;max-height:70vh;overflow:auto}
 .hanging-header.is-past-hero nav.open{display:flex;flex-direction:column;align-items:stretch;gap:2px}
 .hanging-header.is-past-hero nav a{text-align:center;padding:12px;font-size:16px}
 .hanging-header.is-past-hero .hanging-menu-board:before{left:12px}
 .hanging-header.is-past-hero .hanging-menu-board:after{right:12px}
}
@media(max-width:760px){.hanging-header .hanging-menu-board{min-width:80px}.hanging-header .menu-toggle{font-size:0;line-height:0}}

/* The menu opens inside the same expanding wooden sign. */
@media(min-width:761px){
 .hanging-header.is-past-hero .hanging-menu-board{width:132px;transition:width .35s ease;display:flex;align-items:center;gap:12px;min-height:64px}
 .hanging-header.is-past-hero.menu-expanded .hanging-menu-board{width:min(1000px,calc(100% - 190px))}
 .hanging-header.is-past-hero .menu-toggle{width:52px;flex:0 0 52px;margin-left:auto;margin-right:auto}
 .hanging-header.is-past-hero.menu-expanded .menu-toggle{margin:0}
 .hanging-header.is-past-hero nav.open{position:static;display:flex;flex-direction:row;align-items:center;justify-content:space-around;width:auto;flex:1;max-height:none;overflow:visible;border:0;background:transparent;box-shadow:none;padding:0;gap:4px}
 .hanging-header.is-past-hero nav a{font-size:13px;padding:10px 5px}
}
@media(max-width:760px){
 .hanging-header .hanging-menu-board{min-width:116px;transition:width .3s ease}
 .hanging-header.menu-expanded .hanging-menu-board{width:calc(100vw - 10vw);position:absolute;right:5%;top:24px;margin-top:6px;z-index:2;min-width:0}
 .hanging-header.menu-expanded .menu-toggle{width:64px;margin-left:auto}
 .hanging-header nav.open{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-height:none;overflow:visible;border:0;box-shadow:none;background:transparent;padding:8px 4px 12px;gap:2px}
 .hanging-header nav a{font-size:15px;padding:10px 5px}
}
@media(prefers-reduced-motion:reduce){.hanging-header.is-past-hero .hanging-menu-board,.hanging-header .hanging-menu-board{transition:none}}

/* Expand the same sign downward, with a single vertical list. */
@media(min-width:761px){
 .hanging-header.is-past-hero.menu-expanded .hanging-menu-board{width:240px;display:block}
 .hanging-header.is-past-hero.menu-expanded .menu-toggle{margin-left:auto;margin-right:auto}
 .hanging-header.is-past-hero nav.open{display:flex;flex-direction:column;align-items:stretch;width:100%;padding:8px 0 12px;gap:2px}
 .hanging-header.is-past-hero nav a{font-size:16px;padding:12px 10px;text-align:center}
}
@media(max-width:760px){
 .hanging-header.menu-expanded .hanging-menu-board{width:min(240px,80vw);position:relative;right:auto;top:auto;margin-top:6px}
 .hanging-header.menu-expanded .menu-toggle{margin-left:auto;margin-right:auto}
 .hanging-header nav.open{display:flex;flex-direction:column;align-items:stretch;grid-template-columns:none;padding:8px 0 12px}
}

/* Opening the sign must not push the page and trigger auto-close. */
@media(min-width:761px){.hanging-header.is-past-hero.menu-expanded .hanging-menu-board{position:absolute;right:5%;top:21px;margin-top:0}}
@media(max-width:760px){.hanging-header.menu-expanded .hanging-menu-board{position:absolute;right:5%;top:18px;margin-top:0;width:min(240px,80vw)}}

/* Below the hero: a blank sign opens the original full navigation again. */
.hanging-header .menu-toggle:before{display:none}
.scroll-scene-page .hanging-header{height:118px;min-height:118px}
@media(min-width:761px){
 .hanging-header.is-past-hero:not(.menu-expanded) .hanging-menu-board{width:132px;min-height:64px;display:block;animation:blank-sign-drop .7s both}
 .hanging-header.is-past-hero:not(.menu-expanded) .menu-toggle{width:100%;height:48px;min-height:48px;margin:0;padding:0}
 .hanging-header.is-past-hero.menu-expanded .hanging-menu-board{position:absolute;right:5%;top:21px;width:calc(90% - 204px);max-width:1000px;min-height:76px;display:flex;align-items:center;margin:0;padding:10px 18px;animation:full-sign-drop .8s both}
 .hanging-header.is-past-hero.menu-expanded .menu-toggle{display:none}
 .hanging-header.is-past-hero.menu-expanded nav.open{position:static;display:flex;flex-direction:row;width:100%;max-height:none;gap:8px;padding:0;border:0;background:transparent;justify-content:space-around}
 .hanging-header.is-past-hero.menu-expanded nav a{font-size:14px;padding:10px 8px}
}
@media(max-width:1000px) and (min-width:761px){.hanging-header.is-past-hero.menu-expanded .hanging-menu-board{right:3%;width:calc(94% - 154px);padding:10px 8px}.hanging-header.is-past-hero.menu-expanded nav a{font-size:12px;padding:10px 4px}}
@media(max-width:760px){
 .scroll-scene-page .hanging-header{height:100px;min-height:100px}
 .hanging-header:not(.menu-expanded) .menu-toggle{height:42px;min-height:42px}
 .hanging-header.is-past-hero:not(.menu-expanded) .hanging-menu-board{animation:blank-sign-drop .7s both}
 .hanging-header.menu-expanded .hanging-menu-board{position:absolute;right:5%;top:18px;width:min(280px,85vw);padding:10px;animation:full-sign-drop .8s both}
 .hanging-header.menu-expanded .menu-toggle{display:none}
 .hanging-header.menu-expanded nav.open{display:flex;flex-direction:column;position:static;width:100%;padding:4px 0;border:0;background:transparent}
}
@keyframes blank-sign-drop{0%{transform:translateY(-160px)}65%{transform:translateY(5px)}85%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes full-sign-drop{0%{transform:translateY(-180px)}65%{transform:translateY(7px)}85%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hanging-header .hanging-menu-board{animation:none!important}}

/* Lift the logo sign out of view after the hero. */
.hanging-header .site-logo{transition:transform .32s ease,opacity .25s ease}
.hanging-header.is-past-hero .site-logo{transform:translateY(-180px);opacity:0;pointer-events:none;visibility:hidden;transition:transform .32s ease,opacity .25s ease,visibility 0s .32s;animation:none}
@media(prefers-reduced-motion:reduce){.hanging-header .site-logo,.hanging-header.is-past-hero .site-logo{transition:none}}

/* Pixel graph-paper backdrop for the gallery. */
.gallery-section{
 background-color:#f3ecdd;
 background-image:linear-gradient(to right,#cbbd9f55 2px,transparent 2px),linear-gradient(to bottom,#cbbd9f55 2px,transparent 2px);
 background-size:32px 32px;
 background-position:0 0;
}

/* Original Minecraft food textures, drifting gently at the section edges. */
.has-floating-food{position:relative;isolation:isolate}
.floating-food{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.floating-food img{position:absolute;width:56px;height:56px;image-rendering:pixelated;object-fit:contain;animation:food-drift 6s ease-in-out infinite;opacity:.85}
.floating-food .food-0{left:2%;top:20%;--tilt:-12deg}
.floating-food .food-1{right:2%;bottom:12%;--tilt:13deg;animation-duration:7.5s;animation-delay:-3s}
@keyframes food-drift{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-16px) rotate(calc(var(--tilt) + 5deg))}}
@media(max-width:760px){.floating-food img{width:32px;height:32px;opacity:.7}.floating-food .food-0{left:1%;top:12%}.floating-food .food-1{right:1%;bottom:7%}}
@media(prefers-reduced-motion:reduce){.floating-food img{animation:none;transform:rotate(var(--tilt))}}

/* Foreground food rail: no item sits beneath the content or its frames. */
.food-overlay{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .18s ease}
.food-overlay.is-visible{opacity:1}
.floating-item{position:absolute;width:clamp(24px,3vw,44px);height:clamp(24px,3vw,44px);object-fit:contain;image-rendering:pixelated;animation:food-drift 6s ease-in-out infinite}
.food-overlay .item-0{left:6px;top:38%;--tilt:-10deg}
.food-overlay .item-1{right:6px;top:73%;--tilt:12deg;animation-duration:7.5s;animation-delay:-3s}
@media(max-width:760px){.floating-item{width:20px;height:20px}.food-overlay .item-0{left:0}.food-overlay .item-1{right:0}}
@media(prefers-reduced-motion:reduce){.food-overlay{transition:none}.floating-item{animation:none;transform:rotate(var(--tilt))}}

/* Large items appear for two seconds, then relocate in free space. */
.food-overlay.random-food-overlay{opacity:1;transition:none}
.random-food-overlay .random-item{width:clamp(60px,7.5vw,110px);height:clamp(60px,7.5vw,110px);opacity:0;transition:opacity .2s ease;animation:food-drift 6s ease-in-out infinite;--tilt:0deg}
.random-food-overlay .random-item.is-showing{opacity:1}
@media(max-width:760px){.random-food-overlay .random-item{width:50px;height:50px}}
@media(prefers-reduced-motion:reduce){.random-food-overlay .random-item{animation:none;transition:none}}

.official-post{width:100%;max-width:550px;justify-self:center;min-width:0}.official-post .twitter-tweet{margin:0 auto!important}.official-post>blockquote{background:#fff;border:2px solid #111;padding:20px;margin:0}.official-post a{color:#005c49;text-decoration:underline}

.x-movie-container{width:min(900px,82vw);aspect-ratio:16/9;background:#000}.x-movie-container iframe{display:block;width:100%;height:100%;border:0}.x-movie-link{display:block;color:#fff;text-align:center;margin-top:12px;text-decoration:underline}

.x-movie-container{display:flex;align-items:center;justify-content:center;height:auto;min-height:240px}.x-movie-container iframe{max-width:100%}

/* Fit the complete X post; leave widget sizing under X's control. */
#movie-dialog{width:min(610px,94vw);max-width:94vw;max-height:90dvh;box-shadow:none;overflow-y:auto;overflow-x:hidden}
#movie-dialog .movie-dialog-inner{padding:12px;gap:12px;align-items:center}
#movie-dialog .movie-close{position:sticky;top:0;z-index:2;flex-shrink:0;align-self:flex-end}
#movie-dialog .x-movie-container{display:block;width:100%;max-width:550px;aspect-ratio:auto;min-height:0;height:auto;background:transparent;flex-shrink:0}
#movie-dialog .x-movie-container iframe{width:100%;height:revert;max-width:100%;border:0}
#movie-dialog .x-movie-container .twitter-tweet{margin:0 auto!important;max-width:100%!important}
#movie-dialog .x-movie-link{margin:0 0 8px;font-size:14px}

/* Pixel cross in the upper right; no separate outbound link. */
#movie-dialog .movie-close{width:40px;height:40px;min-height:40px;padding:8px;background:transparent;color:#fff;border:0;display:grid;place-items:center;margin:0;align-self:flex-end}
.movie-close span{display:block;width:24px;height:24px;background:currentColor;clip-path:polygon(0 0,25% 0,25% 12.5%,37.5% 12.5%,37.5% 25%,50% 37.5%,62.5% 25%,62.5% 12.5%,75% 12.5%,75% 0,100% 0,100% 25%,87.5% 25%,87.5% 37.5%,75% 37.5%,62.5% 50%,75% 62.5%,87.5% 62.5%,87.5% 75%,100% 75%,100% 100%,75% 100%,75% 87.5%,62.5% 87.5%,62.5% 75%,50% 62.5%,37.5% 75%,37.5% 87.5%,25% 87.5%,25% 100%,0 100%,0 75%,12.5% 75%,12.5% 62.5%,25% 62.5%,37.5% 50%,25% 37.5%,12.5% 37.5%,12.5% 25%,0 25%)}
#movie-dialog .movie-close:hover{color:#50c6a1}

.movie-close span{width:4px;height:4px;clip-path:none;transform:translate(-10px,-10px);box-shadow:4px 4px currentColor,8px 8px currentColor,12px 12px currentColor,16px 16px currentColor,20px 20px currentColor,20px 0 currentColor,16px 4px currentColor,12px 8px currentColor,8px 12px currentColor,4px 16px currentColor,0 20px currentColor}

/* Keep the pixel close control outside the top-right corner. */
#movie-dialog{overflow:visible;max-height:none;margin:auto}
#movie-dialog .movie-dialog-inner{position:static;max-height:calc(100dvh - 128px);overflow-y:auto;overflow-x:hidden;padding:12px}
#movie-dialog .movie-close{position:absolute;top:-46px;right:-4px;margin:0;z-index:3}

/* Use the compact blank menu sign from the first view as well. */
@media(min-width:761px){
 .hanging-header:not(.menu-expanded) .hanging-menu-board{width:132px;min-height:64px;display:block;padding:4px 10px}
 .hanging-header:not(.menu-expanded) nav{display:none}
 .hanging-header:not(.menu-expanded) .menu-toggle{display:block;width:100%;height:48px;min-height:48px;margin:0;padding:0;background:transparent;border:0;box-shadow:none}
 .hanging-header.menu-expanded .hanging-menu-board{position:absolute;right:5%;top:21px;width:calc(90% - 204px);max-width:1000px;min-height:76px;display:flex;align-items:center;margin:0;padding:10px 18px}
 .hanging-header.menu-expanded .menu-toggle{display:none}
 .hanging-header.menu-expanded nav.open{position:static;display:flex;flex-direction:row;width:100%;max-height:none;gap:8px;padding:0;border:0;background:transparent;justify-content:space-around}
 .hanging-header.menu-expanded nav a{font-size:14px;padding:10px 8px}
}
@media(max-width:1000px) and (min-width:761px){.hanging-header.menu-expanded .hanging-menu-board{right:3%;width:calc(94% - 154px);padding:10px 8px}.hanging-header.menu-expanded nav a{font-size:12px;padding:10px 4px}}

/* Overlay the header on the hero without reserving a header-height gap. */
.scroll-scene-page .hanging-header{position:fixed;top:0;left:0;width:100%}
.scroll-scene-page .hero{margin-top:0;padding-top:0}
@media(min-width:761px){
 .hanging-header:not(.is-past-hero):not(.menu-expanded) .hanging-menu-board{width:min(100%,1000px);min-height:76px;padding:10px 18px;display:block}
 .hanging-header:not(.is-past-hero):not(.menu-expanded) nav{display:flex;flex-direction:row;position:static;width:100%;padding:0;border:0;background:transparent;justify-content:space-around}
 .hanging-header:not(.is-past-hero):not(.menu-expanded) .menu-toggle{display:none}
}
@media(max-width:1000px) and (min-width:761px){.hanging-header:not(.is-past-hero):not(.menu-expanded) .hanging-menu-board{padding:10px 8px}}

/* Full-screen desktop hero, including 1920 × 1080. */
@media(min-width:761px){
 .scroll-scene-page .hero{height:100svh;min-height:100svh}
 .scroll-scene-page .scene-hero-logo{height:100%;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
 .scroll-scene-page .scene-hero-logo>img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border:0}
}

/* Always show the complete cast; scale down instead of cropping. */
@media(min-width:761px){
 .scroll-scene-page .scene-hero-logo{background:#83f7df}
 .scroll-scene-page .scene-hero-logo>img{object-fit:contain;object-position:center}
}

/* Pixel stars gather, then the opening reveals outward from the center. */
html.opening-active body:before{content:'';position:fixed;inset:0;background:#060e13;z-index:999;pointer-events:none;animation:opening-underlay 3.4s both}
.opening-scene{background:transparent!important;isolation:isolate;animation:opening-disappear 3.4s both}
.opening-dark{position:absolute;inset:0;background:#060e13;animation:opening-aperture 1.15s cubic-bezier(.65,0,.2,1) 1.85s both}
.opening-stars{position:absolute;inset:0;animation:opening-star-exit .5s ease 2.05s both}
.opening-star{position:absolute;width:var(--size);height:var(--size);background:#e5fff9;box-shadow:0 0 10px #9effdf,0 0 25px #4ed5bc;clip-path:polygon(40% 0,60% 0,60% 30%,70% 30%,70% 40%,100% 40%,100% 60%,70% 60%,70% 70%,60% 70%,60% 100%,40% 100%,40% 70%,30% 70%,30% 60%,0 60%,0 40%,30% 40%,30% 30%,40% 30%);animation:opening-twinkle .65s ease var(--delay) both}
.opening-glow{position:absolute;left:50%;top:50%;width:20vmax;height:20vmax;margin:-10vmax;background:radial-gradient(circle,#fff 0,#d1fff0 12%,#62dbbc66 35%,transparent 68%);mix-blend-mode:screen;animation:opening-burst 1.15s ease-out 1.7s both;pointer-events:none}
@keyframes opening-twinkle{0%{opacity:0;transform:scale(.1)}40%{opacity:1;transform:scale(1.25)}70%,100%{opacity:1;transform:scale(1)}}
@keyframes opening-aperture{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,0 0)}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,0 0,0 100%,100% 100%,100% 0,0 0,0 0)}}
@keyframes opening-burst{0%{opacity:0;transform:scale(.05)}20%{opacity:1;transform:scale(.5)}65%{opacity:.8;transform:scale(12)}100%{opacity:0;transform:scale(18)}}
@keyframes opening-star-exit{to{opacity:0;transform:scale(1.08)}}
@keyframes opening-disappear{0%,90%{opacity:1}100%{opacity:0}}
@keyframes opening-underlay{0%,54%{opacity:1}55%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.opening-scene,html.opening-active body:before{display:none}html.opening-active{overflow:auto}}
@property --opening-radius{syntax:'<length>';inherits:false;initial-value:0px}
.opening-dark{--opening-radius:0px;clip-path:none;mask-image:radial-gradient(circle at center,transparent 0 var(--opening-radius),#000 calc(var(--opening-radius) + 2px));animation:opening-reveal 1.15s cubic-bezier(.65,0,.2,1) 1.85s both}
@keyframes opening-reveal{from{--opening-radius:0px}to{--opening-radius:150vmax}}

/* Supplied star artwork, larger with a soft luminous edge. */
.opening-star{clip-path:none;background:#e5fff9;box-shadow:none;mask:url('assets/opening-star.svg') center/contain no-repeat;filter:drop-shadow(0 0 10px #9effdf)}
@media(max-width:760px){.opening-star{width:calc(var(--size)*.8);height:calc(var(--size)*.8)}}

/* Random tilted stars and cast faces enter from either side. Final reveal is circular. */
.opening-cast{animation:opening-disappear 5.2s both}
html.opening-active body:before{animation-duration:5.2s}
.opening-cast .opening-star{animation-name:opening-tilted-twinkle}
@keyframes opening-tilted-twinkle{0%{opacity:0;transform:scale(.1) rotate(var(--angle))}45%{opacity:1;transform:scale(1.2) rotate(var(--angle))}100%{opacity:1;transform:scale(1) rotate(var(--angle))}}
.opening-cast .opening-stars{animation-delay:3.1s}
.opening-face-layer{position:absolute;inset:0;overflow:hidden}
.opening-face{position:absolute;width:clamp(90px,15vmin,170px);height:clamp(90px,15vmin,170px);object-fit:cover;border-radius:50%;border:3px solid #c4fff0;box-shadow:0 0 22px #4ed5bc44;animation:opening-face-enter 2s ease var(--face-delay) both}
@keyframes opening-face-enter{0%{opacity:0;transform:translateX(var(--from)) rotate(var(--face-angle))}25%,70%{opacity:1;transform:translateX(0) rotate(var(--face-angle))}100%{opacity:0;transform:translateX(0) rotate(var(--face-angle)) scale(.92)}}
.opening-final-circle{position:absolute;left:50%;top:50%;width:min(72vmin,600px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;overflow:hidden;background:#b6ffed;border:4px solid #e6fff8;box-shadow:0 0 48px #91ffdb88;display:flex;align-items:center;justify-content:center;animation:opening-circle-cast 1.5s ease 2.5s both}
.opening-final-circle img{width:100%;height:auto;max-width:none;object-fit:contain}
@keyframes opening-circle-cast{0%{opacity:0;transform:scale(.15)}25%,65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
.opening-cast .opening-dark{animation-delay:3.55s;animation-duration:1.3s}
.opening-cast .opening-glow{animation-delay:3.45s;animation-duration:1.3s}
@keyframes opening-underlay{0%,65%{opacity:1}66%,100%{opacity:0}}
@media(max-width:760px){.opening-face{width:80px;height:80px}.opening-final-circle{width:86vmin}}

/* The final three are revealed at their exact positions in the hero artwork. */
.opening-cast .opening-final-circle{background-repeat:no-repeat;border:0;box-shadow:0 0 36px #91ffdb88;animation:opening-aligned-circle 1.5s ease 2.5s both}
@keyframes opening-aligned-circle{0%{opacity:0;clip-path:circle(0% at center)}25%,70%{opacity:1;clip-path:circle(50% at center)}100%{opacity:0;clip-path:circle(50% at center)}}
.opening-cast .opening-dark{mask-image:radial-gradient(circle at var(--reveal-x,50%) var(--reveal-y,50%),transparent 0 var(--opening-radius),#000 calc(var(--opening-radius) + 2px))}
.opening-cast .opening-glow{left:var(--reveal-x,50%);top:var(--reveal-y,50%)}

/* Six faces, evenly spaced in two columns; no opening stars. */
.opening-cast .opening-face{width:clamp(100px,16vmin,180px);height:clamp(100px,16vmin,180px);margin-top:clamp(-90px,-8vmin,-50px)}
@media(max-width:760px){.opening-cast .opening-face{width:clamp(72px,22vw,110px);height:clamp(72px,22vw,110px);margin-top:calc(clamp(72px,22vw,110px)/-2)}}

/* The logo travels upward before becoming hidden, without fading in place. */
.hanging-header .site-logo{transition:none}.hanging-header.is-past-hero .site-logo{transition:none}

/* The whole cast pops up together, with no left-to-right delay. */
.scroll-scene-page .hero-lineup.scroll-reveal .hero-character{opacity:0;translate:0 44px;transition:translate .75s cubic-bezier(.2,1.45,.45,1),opacity .4s ease;transition-delay:0s}
.scroll-scene-page .hero-lineup.scroll-reveal.is-revealed .hero-character{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.scroll-scene-page .hero-lineup.scroll-reveal .hero-character{opacity:1;translate:none;transition:none}}

/* Rankings follow list order without displaying place numbers. */
.mod-rank-row{grid-template-columns:36px minmax(0,1fr) auto}
@media(max-width:760px){.mod-rank-row{grid-template-columns:24px minmax(0,1fr) auto}}

/* Reveal both signs three seconds after the opening has finished. */
html.header-pending .hanging-header{visibility:hidden;pointer-events:none}
html.header-pending .hanging-header .site-logo,html.header-pending .hanging-menu-board{visibility:hidden;pointer-events:none}
.hanging-header.header-arriving .site-logo,.hanging-header.header-arriving .hanging-menu-board{animation:header-after-opening .85s ease-out both}
@keyframes header-after-opening{0%{translate:0 -180px}65%{translate:0 6px}85%{translate:0 -3px}100%{translate:0 0}}
@media(prefers-reduced-motion:reduce){.hanging-header.header-arriving .site-logo,.hanging-header.header-arriving .hanging-menu-board{animation:none}}

/* Staggered cast portraits drop in from above, rather than two aligned columns. */
.opening-cast .opening-face{margin-left:clamp(-90px,-8vmin,-50px);animation-name:opening-face-drop}
@keyframes opening-face-drop{0%{opacity:0;transform:translateY(-180px) rotate(calc(var(--face-angle) - 8deg))}27%{opacity:1;transform:translateY(8px) rotate(var(--face-angle))}40%,76%{opacity:1;transform:translateY(0) rotate(var(--face-angle))}100%{opacity:0;transform:translateY(6px) rotate(var(--face-angle)) scale(.94)}}
@media(max-width:760px){.opening-cast .opening-face{margin-left:calc(clamp(72px,22vw,110px)/-2)}}

/* Listener participation and the official hashtag. */
.enjoy-section{padding:72px 6% 80px;background:#e1f4eb;color:#153d30;border-bottom:3px solid #111;text-align:center}
.enjoy-section h2{margin-bottom:32px}
.enjoy-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;text-align:left}
.enjoy-cards article{display:flex;flex-direction:column;padding:26px 22px;background:#fffdf5;border:3px solid #164c3b}
.enjoy-cards h3{font-size:21px;font-weight:400;margin:0 0 16px;line-height:1.5}
.enjoy-cards p{font-size:16px;line-height:1.9;margin:0 0 24px}
.enjoy-link{display:block;margin-top:auto;text-align:center;padding:10px 12px;border:2px solid #164c3b;background:#008568;color:#fff;font-size:15px}
.enjoy-link:hover{background:#005c49}
.enjoy-tag{display:inline-block;font-size:clamp(22px,3vw,30px);margin-top:34px;text-decoration:underline;text-underline-offset:7px}
@media(max-width:760px){.enjoy-section{padding:48px 6%}.enjoy-cards{grid-template-columns:1fr;gap:18px}.enjoy-cards article{padding:24px}.enjoy-tag{font-size:24px}}