@scope (#soundtrack) {
@font-face{font-family:Cinzel;src:url('../assets/cinzel-bold.ttf')}*{box-sizing:border-box}body{margin:0;background:#070d19;color:#f3e7ca;font-family:Georgia,serif;min-height:100svh;overflow-x:hidden;background-image:radial-gradient(ellipse at 50% 56%,#1c355044,transparent 63%)}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;font:inherit}button:focus-visible,a:focus-visible,.carousel:focus-visible{outline:2px solid #f6d48c;outline-offset:4px}header{height:70px;border-bottom:1px solid #c2a06330;display:flex;align-items:center;justify-content:space-between;margin:0 5vw;font:11px Cinzel,serif;letter-spacing:.07em}header a{color:#dac18c;text-decoration:none}header>span{letter-spacing:.18em}header button{border:0;background:none;padding:12px;color:#d9c9a9;font:10px Cinzel,serif}.intro{text-align:center;padding:32px 15px 0}.eyebrow{font:10px Cinzel,serif;letter-spacing:.3em;color:#cba66b}h1{font:clamp(27px,3vw,44px)/1.2 Cinzel,serif;margin:14px 0;color:#ffedc7}.intro>p:last-child{font:15px/1.6 Georgia,serif;color:#aab6c9;margin:0}.carousel{height:530px;position:relative;perspective:1400px;touch-action:pan-y;cursor:grab;overflow:hidden;outline-offset:-6px!important}.carousel:active{cursor:grabbing}#cards{position:absolute;inset:0;transform-style:preserve-3d}.song-card{position:absolute;left:50%;top:39px;width:286px;height:438px;margin-left:-143px;padding:22px 21px 18px;background:linear-gradient(155deg,#21324a,#0c1627 50%,#111c30);border:1px solid #b7985c;box-shadow:0 22px 34px #0008,inset 0 0 0 5px #0c1627,inset 0 0 0 6px #a489554d;transition:transform .7s cubic-bezier(.22,.7,.22,1),opacity .7s,filter .7s;transform-origin:center;will-change:transform;user-select:none}.song-card::before{content:'◇';position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:28px;text-shadow:0 0 8px #d8b25b;color:#f3d394}.song-card.active{box-shadow:0 22px 40px #000a,0 0 38px #c89a3725,inset 0 0 0 5px #0c1627,inset 0 0 0 6px #c29b5b8c}.cover{width:242px;height:242px;display:block;object-fit:contain;border:1px solid #b3a07888;pointer-events:none}.song-card h2{font:700 17px/1.45 Cinzel,serif;text-align:center;margin:18px -6px 0;height:50px;display:flex;align-items:center;justify-content:center;color:#f7dfa8}.song-card .caption{font:9px/1.4 Cinzel,serif;letter-spacing:.18em;text-align:center;color:#9aaec8;margin:7px 0 5px}.preview{width:100%;height:45px;border:0;background:transparent url('../assets/begin-frame.png') center/100% 147% no-repeat;font:700 12px Cinzel,serif;letter-spacing:.06em;color:#fff0c3;text-shadow:0 1px 5px #000;position:relative}.preview:hover{filter:brightness(1.2)}.preview:disabled{cursor:default}.progress{height:2px;background:#8c74472b;margin:4px 6px 0}.progress i{display:block;height:100%;background:#f6d488;box-shadow:0 0 5px #ffe6a5;width:0}.browse{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:-12px}.browse button{width:44px;height:44px;border:1px solid #9a7d4955;background:#101c2b;font-size:30px;line-height:1}.browse button:hover{border-color:#f7d89d}#position{font:12px Cinzel,serif;letter-spacing:.18em;color:#d5b77e;min-width:66px;text-align:center}#announcement{min-height:24px;text-align:center;font:12px/1.6 Georgia,serif;color:#bdc8d7;margin:10px 16px}.dots{display:flex;justify-content:center;gap:12px}.dots button{height:20px;width:16px;padding:5px;border:0;background:none}.dots button::after{content:'';display:block;width:5px;height:5px;background:#66748a;transform:rotate(45deg)}.dots button[aria-current=true]::after{background:#ffde9b;box-shadow:0 0 9px #efc570}footer{margin:20px 5vw 0;padding:18px 0;border-top:1px solid #c2a06326;font:9px Cinzel,serif;letter-spacing:.12em;color:#7b8da5;display:flex;justify-content:space-between}footer span{letter-spacing:.03em}@media(max-width:767px){header{margin:0 18px;height:58px}header>span{display:none}.intro{padding-top:24px}h1{font-size:27px}.intro>p:last-child{font-size:13px}.carousel{height:465px}.song-card{width:250px;height:390px;margin-left:-125px;padding:19px 19px 12px;top:32px}.cover{width:210px;height:210px}.song-card h2{font-size:15px;margin-top:12px;height:45px}.song-card .caption{font-size:8px}.preview{height:44px;font-size:10px}.browse{margin-top:-10px}footer{line-height:1.8}footer span{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* A rigid 22px blue-and-gold sleeve: each edge is an independent 3D face. */
.song-card{--depth:22px;padding:0;background:none;border:0;box-shadow:none;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,.7,.22,1)}
.song-card::before{display:none}.song-card.active{box-shadow:none}
.card-front,.card-back{position:absolute;inset:0;border:1px solid #d3b574;background:linear-gradient(155deg,#21324a,#0c1627 50%,#111c30);backface-visibility:hidden}
.card-front{padding:22px 21px 18px;transform:translateZ(11px);box-shadow:inset 0 0 0 3px #0a1221,inset 0 0 0 4px #b89a5d,inset 0 0 0 6px #26394c;}
.card-front::before{content:'◇';position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:28px;text-shadow:0 0 8px #d8b25b;color:#f3d394}
.song-card.active .card-front{box-shadow:0 22px 40px #0009,0 0 38px #c89a3725,inset 0 0 0 3px #0a1221,inset 0 0 0 4px #e4c987,inset 0 0 0 6px #344860}
.card-back{transform:translateZ(-11px) rotateY(180deg);box-shadow:0 22px 32px #000b}
.card-left,.card-right{position:absolute;top:0;width:var(--depth);height:100%;background:linear-gradient(90deg,#e0bc72 0%,#80602e 9%,#16243a 15%,#354963 38%,#101a2b 70%,#aa8548 91%,#f6d994 100%);border-top:1px solid #f0d299;border-bottom:1px solid #957440;pointer-events:none;backface-visibility:hidden}
.card-left{left:0;transform:translateX(-50%) rotateY(-90deg)}.card-right{right:0;transform:translateX(50%) rotateY(90deg)}
.card-left::after,.card-right::after{content:'';position:absolute;inset:20px 7px;border:1px solid #c9a46088;background:repeating-linear-gradient(0deg,transparent 0 58px,#ddbb7944 59px 60px,transparent 61px 90px)}
.card-top,.card-bottom{position:absolute;left:0;width:100%;height:var(--depth);background:linear-gradient(#f5d891,#7c5a2c 12%,#20314a 25%,#0b1628 75%,#ad8749 90%,#e8c47c);backface-visibility:hidden;pointer-events:none}
.card-top{top:0;transform:translateY(-50%) rotateX(90deg)}.card-bottom{bottom:0;transform:translateY(50%) rotateX(-90deg)}
@media(max-width:767px){.song-card{padding:0}.card-front{padding:19px 19px 12px}}

}

#soundtrack{position:relative;min-height:100svh;padding:82px 0 28px;background:radial-gradient(ellipse at 50% 56%,#1c355044,transparent 63%),#070d19;color:#f3e7ca;overflow:hidden;font-family:Georgia,serif;scroll-margin-top:0}
#soundtrack #world{position:absolute;top:0}
#soundtrack .intro{padding-top:12px}
#soundtrack .intro h2{font:clamp(27px,3vw,44px)/1.2 Cinzel,serif;margin:14px 0;color:#ffedc7;text-transform:none}
#soundtrack #rotation{display:block;margin:0 5vw 0 auto;border:0;background:none;color:#dac18c;font:11px Cinzel,serif;min-height:32px;cursor:pointer}
#soundtrack .carousel{height:500px}#soundtrack .browse{margin-top:0}
#rhythm .soundtrack-link{display:inline-block;font:700 12px Cinzel,serif;color:#ffe5a1;padding:7px 12px;text-decoration:none;border-bottom:1px solid #bc9758;line-height:1.3}
#rhythm .wrap{text-align:center}
#rhythm .beat-shell{width:min(100%,calc((100svh - 344px)*1.7768))}
@media(max-width:767px){#soundtrack{padding-top:78px}#soundtrack .carousel{height:440px}#rhythm .beat-shell{width:min(100%,calc((100svh - 466px)*1.7768))}}
@media(min-width:768px) and (max-width:1023px){#rhythm .beat-shell{width:min(100%,calc((100svh - 400px)*1.7768))}}

#soundtrack .intro p{max-width:none;margin-left:auto;margin-right:auto}#soundtrack #announcement{max-width:none}#soundtrack .intro{display:block;text-align:center}

#soundtrack .cover-retry:not([hidden]){display:block;position:absolute;top:130px;left:50%;transform:translateX(-50%);z-index:2;background:#101c2b;border:1px solid #d5b77e;color:#ffedc7;padding:10px 16px;font:700 13px Georgia,serif}

/* A visible onward journey, using the game's existing gold carved frame. */
.journey-cta{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:62px;padding:10px 38px;color:#fff0c3;text-decoration:none;background:transparent url('../assets/begin-frame.png') center/100% 140% no-repeat;font:900 17px/1.3 Cinzel,Georgia,serif;text-shadow:0 2px 4px #000;transition:filter .2s}
.journey-cta span{display:grid;gap:3px}.journey-cta small{display:block;font:700 9px/1.2 Cinzel,serif;letter-spacing:.13em;color:#c8af7f}.journey-cta b{font-size:25px;font-weight:400}
.journey-cta:hover{filter:brightness(1.2)}.journey-cta:focus-visible{outline:2px solid #ffe4a3;outline-offset:3px}
#rhythm .soundtrack-link{display:flex;width:max-content;max-width:100%;margin:8px 0 0 auto;padding:10px 38px;min-height:62px;border:0;color:#fff0c3;font:900 17px/1.3 Cinzel,Georgia,serif}
#rhythm .beat-shell{width:min(100%,calc((100svh - 376px)*1.7768))}
#soundtrack .stage-invitation{display:flex;align-items:center;flex-direction:column;padding:22px 18px 16px;text-align:center;gap:8px}
#soundtrack .stage-rule{height:1px;width:180px;background:linear-gradient(90deg,transparent,#c5a461,transparent)}
#soundtrack .stage-invitation p{margin:8px 0 2px;font:italic 18px/1.4 Georgia,serif;color:#f3dbac;max-width:none}
#soundtrack .stage-invitation>small{font:11px/1.5 Cinzel,serif;color:#b8c4d7;letter-spacing:.06em}
#soundtrack .intro{padding-top:0}#soundtrack .carousel{height:470px}
#soundtrack #announcement{font-size:14px;color:#e1d4b6}
@media(max-width:1023px){#soundtrack{padding-top:120px}}
@media(max-width:767px){#rhythm .soundtrack-link{width:100%;font-size:14px;min-height:58px;padding:10px 29px;gap:15px}#rhythm .beat-shell{width:min(100%,calc((100svh - 494px)*1.7768))}#soundtrack .carousel{height:430px}#soundtrack .stage-invitation{padding-top:20px}.journey-cta{font-size:15px;padding:10px 30px}}
/* Keep the onward invitation visible without clipping the 3D card edges. */
#soundtrack{padding-top:78px}
#soundtrack #rotation{position:absolute;top:78px;right:3vw;margin:0}
#soundtrack .intro .eyebrow{display:none}
#soundtrack .intro h2{font-size:36px;margin:8px 0}
#soundtrack .intro>p:last-child{font-size:14px;line-height:1.4}
#soundtrack .carousel{height:500px}
#soundtrack .stage-invitation{padding:10px 18px 4px;gap:3px}
#soundtrack .stage-invitation p{font-size:16px;margin:4px 0 0}
@media(max-width:1023px){#soundtrack{padding-top:120px}#soundtrack #rotation{top:110px;right:12px;font-size:9px}}
@media(max-width:767px){#soundtrack .intro{padding-top:20px}#soundtrack .intro h2{font-size:28px}#soundtrack .carousel{height:440px}}

/* Keep labels within the unmodified carved frame's central safe area. */
.journey-cta,#rhythm .soundtrack-link{display:flex;box-sizing:border-box;width:min(420px,100%);aspect-ratio:1915/452;height:auto;min-height:0;padding:0 15%;margin:8px auto 0;border:0;background-size:100% 100%;gap:0;font:700 16px/1.2 Cinzel,Georgia,serif;white-space:nowrap;text-align:center}
.journey-cta span{display:block}
#rhythm .soundtrack-link{padding:0 48px}
.stage-invitation .journey-cta{padding:0 44px;width:min(360px,100%)}
@media(max-width:767px){.journey-cta,#rhythm .soundtrack-link{width:min(340px,100%);font-size:13px;padding:0 36px}.stage-invitation .journey-cta{width:min(340px,100%);font-size:14px}}