/* Backstage is visible between the title, jacket, and translucent controls. */
.set-list{position:relative;isolation:isolate;height:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:0 0 max(12px,env(safe-area-inset-bottom));--song-color:#b780ff}
.set-background,.set-shade{position:absolute;inset:0;z-index:-2;pointer-events:none}
.set-background{background:url('assets/images/set-list-backstage.png') 50% 48%/cover no-repeat}
.set-shade{z-index:-1;background:linear-gradient(#04030bda,transparent 40%,#05020a70 60%,#040208ed),linear-gradient(90deg,#0005,transparent,#0005)}
.set-shade:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--song-color) 15%,transparent),transparent 65%);animation:set-tint .3s ease-out}
.set-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:max(8px,env(safe-area-inset-top)) 5% 0;min-height:48px}
.set-back{display:flex;align-items:center;gap:6px;min-height:44px;background:transparent;border:0;padding:0;font-size:28px}.set-back span,.set-brand{font-size:12px;letter-spacing:.1em}.set-brand{color:#d4c5e6;font-size:10px}
.set-heading{text-align:center;margin:auto 0; padding:6px 0 12px}.set-heading h1{font:400 clamp(32px,5.5svh,52px)/1.1 Georgia,serif;letter-spacing:.16em;margin:8px 0 12px;padding-left:.16em;text-shadow:0 0 20px #c191ff44}.set-heading p{font-size:10px;letter-spacing:.2em;margin:0;color:#d3c5e2}.set-heading .set-position{font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.2em;color:#fff}.set-position span{color:#baa8ce}
.set-carousel{position:relative;flex-shrink:0;width:100%;height:min(31svh,66vw);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.set-jacket{position:absolute;left:50%;height:100%;aspect-ratio:1;transform:translateX(-50%);border:1px solid #f8eaffba;background:#0a0611;box-shadow:0 0 18px color-mix(in srgb,var(--song-color) 30%,transparent);overflow:hidden}
.set-jacket img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;pointer-events:none}.set-jacket.is-selected{z-index:2;animation:set-slide .28s ease-out}.set-jacket.is-before{transform:translateX(-162%) scale(.88);filter:brightness(.48);border-color:#cbb9da55}.set-jacket.is-after{transform:translateX(62%) scale(.88);filter:brightness(.48);border-color:#cbb9da55}
.set-arrow{position:absolute;z-index:3;top:calc(50% - 23px);height:46px;width:32px;border:1px solid #d7c7ef66;background:#08030bc7;font:32px Georgia,serif;backdrop-filter:blur(4px)}.set-arrow.is-left{left:2%}.set-arrow.is-right{right:2%}
.set-info{text-align:center; padding:16px 6% 0;width:100%;animation:set-info .3s ease-out}.set-info h2{font:400 clamp(23px,3.6svh,34px)/1.1 Georgia,serif;letter-spacing:.03em;margin:0;text-shadow:0 2px 8px #000}.set-artist{font-size:12px;letter-spacing:.3em;margin:9px 0 13px}.set-meta{display:flex;justify-content:center;gap:20px;font-size:10px;letter-spacing:.1em;color:#cabdd6}.set-meta strong{font-size:14px;letter-spacing:.03em;margin-left:5px;color:#fff;font-weight:400}
.set-controls{position:relative;min-height:44px;margin:5px 0;display:grid;place-items:center}.set-preview{background:transparent;border:0;min-height:44px;font-size:12px;letter-spacing:.14em;color:#e2ccec}.set-preview-status{position:absolute;top:36px;white-space:nowrap;font-size:10px;color:#fff}
.set-modes{width:84%;margin:auto 0 0;text-align:center}.set-difficulties{display:flex;gap:8px}.set-difficulties button{width:100%;min-height:58px;padding:10px;background:#0008;border:1px solid #bfb3cf70;backdrop-filter:blur(5px)}.set-difficulties button[aria-pressed=true]{border-color:var(--song-color);box-shadow:inset 0 0 18px color-mix(in srgb,var(--song-color) 12%,transparent),0 0 12px color-mix(in srgb,var(--song-color) 12%,transparent)}.set-difficulties strong{display:block;font-size:17px;font-weight:500;letter-spacing:.2em}.set-difficulties span{display:block;font-size:10px;letter-spacing:.13em;color:#d0bfdf;margin-top:6px}.set-concept{font-size:10px;letter-spacing:.16em;margin:10px 0 12px;color:#dbcee6}
.set-future{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;color:#b5a3c6;font-size:10px;letter-spacing:.06em}.set-future small{width:100%;font-size:9px;letter-spacing:.15em;opacity:.75}
.set-footer{width:84%;padding-top:16px;text-align:center;margin-top:auto}.set-play{width:100%;min-height:56px;border:1px solid color-mix(in srgb,var(--song-color) 60%,white);background:linear-gradient(110deg,color-mix(in srgb,var(--song-color) 45%,#08040bd9),#100817cc);font:400 27px Georgia,serif;letter-spacing:.22em;box-shadow:0 0 20px color-mix(in srgb,var(--song-color) 20%,transparent);backdrop-filter:blur(5px)}.set-play span{font:16px Arial;margin-left:10px}.set-play:hover{filter:brightness(1.2)}.set-footer p{font-size:9px;letter-spacing:.17em;color:#bca8ce;margin:10px 0 0}
@keyframes set-slide{from{opacity:.6;translate:var(--slide) 0}to{opacity:1;translate:0 0}}@keyframes set-info{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes set-tint{from{opacity:.3}to{opacity:1}}
@media(max-height:680px){.set-heading{padding:0 0 8px}.set-heading h1{font-size:30px;margin:5px 0 7px}.set-carousel{height:27svh}.set-info{padding-top:10px}.set-info h2{font-size:23px}.set-artist{margin:5px 0 8px}.set-controls{margin:0;min-height:38px}.set-preview{min-height:38px}.set-concept{margin:7px 0}.set-difficulties button{min-height:52px;padding:7px}.set-future{gap:6px}.set-footer{padding-top:10px}.set-play{min-height:48px}.set-footer p{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.set-list *,.set-list *:after{animation:none!important;transition:none!important}}
.set-jacket.is-before{transform:translateX(-145%) scale(.88)}
.set-jacket.is-after{transform:translateX(45%) scale(.88)}
.set-arrow{width:44px}
@media(max-height:600px){.set-list{padding-bottom:max(8px,env(safe-area-inset-bottom))}.set-carousel{height:25svh}.set-heading h1{font-size:28px;margin:4px 0 5px}.set-footer{padding-top:6px}}