@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--gold:#dfc38e;--text:#f2edde;--muted:#a6b4a5;--line:#c5ba8333;font-family:Manrope,system-ui,sans-serif;font-size:16px;background:#08150f;color:var(--text)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#21443180,transparent 65%)}#atmosphere{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button,input,select,textarea{font:inherit;font-size:.875rem}button{cursor:pointer;border:1px solid var(--line);background:#14251c;color:var(--text);border-radius:8px;padding:10px 15px;min-height:44px}button:hover{border-color:var(--gold);background:#263b2b}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.icon{font-size:1.25rem;width:44px;padding:5px}.primary{background:linear-gradient(115deg,#e8d3a3,#b89c66);color:#182016;border:0;font-weight:700}.primary:hover{background:#efdcad}header{max-width:1500px;margin:auto;height:96px;padding:0 5%;display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line)}.brand{color:var(--gold);text-decoration:none;display:flex;align-items:center;gap:15px}.brand strong{font-size:2rem;letter-spacing:-3px}.brand span,.edition,.eyebrow{font-size:.875rem;letter-spacing:.14em;line-height:1.7}.brand span{max-width:80px;font-size:.875rem;line-height:1.3}.edition{margin-left:auto;color:var(--muted)}main{max-width:1400px;padding:38px 36px;margin:auto;display:grid;grid-template-columns:minmax(200px,1fr) minmax(320px,470px) minmax(235px,1fr);gap:clamp(24px,4vw,66px);align-items:start}.intro{padding-top:24px}.eyebrow{color:var(--gold);margin:0 0 14px}.intro .eyebrow{max-width:220px;font-size:.875rem}h1,h2,p{margin-top:0}h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}h1{font-size:clamp(3.5rem,5.8vw,5.8rem);line-height:.95;letter-spacing:-.04em;margin-bottom:22px}h1 span{display:block;color:var(--gold);font-size:1.4rem;padding-top:22px;letter-spacing:0}.lede{font-size:1.15rem;color:#bdc9b9;line-height:1.65;margin-bottom:38px}.rule{display:flex;align-items:start;gap:15px;margin:22px 0}.rule b{font-family:Georgia,serif;color:var(--gold);font-weight:400;padding-top:3px}.rule p{font-size:1rem;margin:0;line-height:1.6}.rule small{display:block;font-size:.875rem;color:var(--muted)}.record{border-top:1px solid var(--line);padding-top:26px;margin-top:36px;display:grid;gap:5px}.record span,.record small,.practice{font-size:.875rem;color:var(--muted)}.record strong{font-family:Georgia,serif;font-size:2.25rem;font-weight:400;color:var(--gold)}.practice{max-width:235px;line-height:1.7;margin-top:25px}.play{min-width:0;background:linear-gradient(150deg,#13261fdf,#07150fe8);border:1px solid #dac69540;border-radius:20px;padding:15px;box-shadow:0 25px 80px #0006,inset 0 0 35px #c7d3a204}.hud{display:flex;align-items:center;gap:20px;padding:0 5px 12px}.hud div{display:grid;gap:3px}.hud span{font-size:.875rem;letter-spacing:.12em;color:var(--muted)}.hud strong{font-size:1.8rem;color:var(--gold);font-weight:500;line-height:1.1}.score{margin-right:auto}.hud .score strong{color:var(--text)}.progress{height:2px;background:#bac8911c;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .5s ease}.arena{position:relative;width:100%;aspect-ratio:420/600;isolation:isolate}#game{display:block;width:100%;height:100%;touch-action:none;border-radius:10px}.start-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse,#0b1c12e8 15%,#0b1c1266 70%,transparent);border-radius:12px;padding:24px}.start-cover[hidden]{display:none}.start-cover h2{font-size:clamp(2.5rem,4vw,3.7rem);line-height:1;margin:8px 0 20px}.start-cover p{color:#c9d0bd;line-height:1.7}.start-cover .primary{min-width:220px;display:flex;justify-content:space-between;gap:20px;margin:8px 0 18px}.start-cover small{font-size:.875rem;color:var(--muted)}.play-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 15px}.play-bottom span{font-size:.875rem;line-height:1.6;color:var(--gold);max-width:200px;letter-spacing:.04em}.play-bottom button{white-space:nowrap}.music{border-top:1px solid var(--line);padding:12px 3px 0}.music-bar{display:flex;align-items:center;gap:12px}.music-bar div{min-width:0;flex:1}.music-bar small{display:block;color:var(--gold);font-size:.875rem;letter-spacing:.07em}.music-bar b{display:block;font-size:.875rem;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);margin-top:5px}.disc{border:1px solid var(--line);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;color:var(--gold);font-size:1.25rem}#musicPanel{padding-top:18px;font-size:.875rem}label{display:block;margin:14px 0 6px}input,textarea,select{width:100%;padding:11px;background:#0a1911;color:var(--text);border:1px solid var(--line);border-radius:6px}textarea{resize:vertical}details{margin-top:14px}summary{cursor:pointer;line-height:1.8;color:var(--gold)}form button{margin-top:12px}#musicStatus{color:var(--muted);line-height:1.6;margin:14px 0}iframe{width:100%;border:0;border-radius:6px}.music-controls{display:flex;gap:8px}.collection{padding-top:14px}.up-next{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:28px}.queue{display:flex;align-items:end;justify-content:space-between;gap:8px}.queue>div{text-align:center}.queue canvas{display:block;width:64px;height:64px;margin:auto}.queue>div:first-child canvas{width:82px;height:82px}.queue span{font-size:.875rem;color:var(--muted)}.collection-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.collection-title h2{font-size:1.8rem;margin:0}.collection-title span{font-size:.875rem;color:var(--gold);white-space:nowrap}.muted{font-size:.875rem;color:var(--muted);line-height:1.7;margin:8px 0 16px}#tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px}.tier{text-align:center;opacity:.5;transition:opacity .5s;color:var(--muted)}.tier.unlocked{opacity:1;color:var(--gold)}.tier canvas{width:64px;height:64px;max-width:100%;display:block;margin:auto}.tier span{display:block;font-size:.875rem;line-height:1.4}.tier small{font-size:.875rem;color:var(--muted)}.field-note{border-top:1px solid var(--line);margin-top:28px;padding-top:23px}.field-note p{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;line-height:1.35;color:#d1d9c4}.field-note small{font-size:.875rem;line-height:1.6;color:var(--muted)}footer{max-width:1328px;margin:0 auto;padding:22px 30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:20px;font-size:.875rem;color:var(--gold);letter-spacing:.07em}footer span{margin-right:auto;color:var(--muted)}footer button{font-size:.875rem;letter-spacing:0}#toast{position:absolute;top:22px;left:10px;right:10px;text-align:center;pointer-events:none;font-size:1rem;color:var(--gold);opacity:0;transition:opacity .35s;text-shadow:0 2px 10px #000}#toast.visible{opacity:1}#danger{position:absolute;top:24%;left:12%;right:12%;text-align:center;font-size:.875rem;color:#ffd0b3;background:#532b1ce8;border-radius:20px;pointer-events:none}#danger:empty{display:none}dialog{background:#102319;color:var(--text);border:1px solid #dfc38e77;border-radius:20px;padding:36px;max-width:440px;width:calc(100% - 32px);box-shadow:0 30px 150px #000}dialog::backdrop{background:#030d09bf;backdrop-filter:blur(7px)}dialog h2{font-size:2.7rem;line-height:1;margin:12px 0 20px}dialog p{line-height:1.75;color:#c3cdbb}dialog button{width:100%;margin-top:12px}
@media(min-width:1500px){main{padding-top:50px}.arena{max-height:620px}}@media(max-width:1100px){main{grid-template-columns:minmax(300px,470px) minmax(230px,300px);justify-content:center;gap:35px}.intro{display:none}header{height:80px}.edition{font-size:.875rem}footer span{display:none}}@media(max-width:650px){header{height:64px;padding:0 18px}.brand strong{font-size:1.8rem}.brand span{max-width:none}.edition{display:none}header .icon{margin-left:auto}main{display:flex;flex-direction:column;padding:14px 12px 24px;gap:24px;align-items:center}.play{width:100%;max-width:440px;padding:12px;border-radius:16px}.arena{max-height:62svh;aspect-ratio:420/600;display:flex;justify-content:center}#game{width:auto;max-width:100%;height:100%;aspect-ratio:420/600}.hud strong{font-size:1.5rem}.play-bottom span{font-size:.875rem;max-width:180px}.collection{width:100%;max-width:440px;padding:0 12px}.up-next{padding-bottom:16px;margin-bottom:20px}.queue{justify-content:start;gap:35px}.up-next .eyebrow{margin-bottom:0}.field-note{margin-top:20px}.tier canvas{width:76px;height:76px}footer{padding:18px;gap:10px;flex-wrap:wrap;letter-spacing:0}footer button{margin-left:auto}.start-cover h2{font-size:2.8rem}.start-cover .eyebrow{margin-bottom:0}.start-cover p{margin-bottom:8px}.start-cover .primary{margin-bottom:12px}}@media(max-height:600px) and (orientation:landscape){header{height:60px}main{grid-template-columns:minmax(290px,380px) minmax(230px,340px);padding:20px;gap:28px}.intro{display:none}.arena{max-height:none}.play{padding:10px}.collection{padding-top:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.remove-playlist{margin-top:8px;font-size:.875rem;width:100%;background:transparent}

/* Blueprint evolution: polished charcoal, champagne trim and a jar-first stage. */
:root{--gold:#e5c384;--text:#f4eedb;--muted:#b7b6a2;--line:#c4a36a55;background:#11120e}
body{background:linear-gradient(#0d100c80,#11100e99),url('lounge-scene.png') center/cover fixed}
#atmosphere{opacity:.3;z-index:0;mix-blend-mode:screen}header,main,footer{position:relative}
header{height:78px;border-bottom-color:#d9b57555}.brand{color:#e9c98e}
main{max-width:1460px;grid-template-columns:minmax(190px,.8fr) minmax(360px,540px) minmax(240px,1fr);gap:32px;padding-top:28px}
h1{color:#ecd19a;text-shadow:0 2px 1px #24170b;font-size:clamp(3.5rem,5vw,5rem)}h1 span{display:none}.lede{color:#d1cab3;margin-top:25px}
.play{background:linear-gradient(135deg,#181c1aee,#080c0bf5);border:1px solid #e1c48b9c;border-radius:15px;padding:12px;box-shadow:0 25px 75px #0009,inset 0 0 0 4px #d1d9bd0b}
.hud{gap:8px;padding:0 0 10px}.hud>div{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #b8bca64d;border-radius:8px;background:linear-gradient(#22292599,#05090799);box-shadow:inset 0 1px 3px #eee1}.hud span{color:#e2d9bc}.hud strong{font-family:Georgia,serif;font-size:1.7rem}.hud .score{flex:1;justify-content:space-between;margin:0}.hud .score strong{color:#ecd19a}.hud .icon{border-color:#baa37799;box-shadow:inset 0 0 8px #e8be6a18}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 68px;gap:2px;align-items:start;position:relative;background:radial-gradient(ellipse at 45% 65%,#a989321a,transparent 70%),linear-gradient(#0a0d0a55,#070b0966);border-radius:8px}
.arena{aspect-ratio:420/600;max-height:none!important;min-width:0}#game{width:100%;height:100%;outline-offset:-2px}
.stage .up-next{margin:47px 0 0;padding:9px 4px 12px;border:1px solid #d1b37366;border-radius:7px;background:linear-gradient(120deg,#222622d9,#060a08ed);box-shadow:inset 0 0 0 3px #d1d9bd08}
.stage .up-next .eyebrow{text-align:center;font-size:.875rem;letter-spacing:0;margin-bottom:8px}.stage .queue{display:flex;flex-direction:column;gap:12px;align-items:center}.stage .queue canvas,.stage .queue>div:first-child canvas{width:56px;height:56px}.stage .queue span{font-size:.875rem;color:#d4c5a2}.stage .queue>div{width:100%}
.play-bottom{padding:6px 2px 12px}.play-bottom span{color:#f1d59f;letter-spacing:.06em}.music{border:1px solid #c3a46e70;border-radius:9px;padding:10px;background:linear-gradient(110deg,#20231c,#080d0a)}.disc{background:radial-gradient(circle,#cab477 0 8%,#343628 10% 30%,#0c110b 32% 60%,#8d78553b 62%);color:#ebd7a1}.music-bar small{letter-spacing:.04em}.music-bar b{color:#c1baa5}
.collection{border:1px solid #d2b27370;border-radius:10px;padding:20px;background:linear-gradient(130deg,#111610de,#10130ef2)}.collection-title h2{color:#e7d0a1;font-size:1.8rem}.tier{opacity:.7}.tier.unlocked{opacity:1}.field-note{border-top-color:#c6a66e66}.field-note p{color:#ded4bb}.intro .record{border-top-color:#c6a66e66}.record strong{color:#ead099}.practice{color:#b6b4a4}
.start-cover{background:radial-gradient(ellipse,#10170ce8,#10150aaa 55%,transparent 80%);padding:16px}.start-cover h2{color:#ead5a4;font-size:clamp(2.25rem,3.5vw,3.25rem)}.start-cover .primary{min-width:0;width:100%;max-width:235px}.start-cover small{font-size:.875rem}.start-cover .eyebrow{letter-spacing:.04em}
button{background:#1b2119;border-color:#bfa16b66}button:hover{background:#33382a}.primary{background:linear-gradient(115deg,#ecd4a3,#ba965e);color:#151910}dialog{background:linear-gradient(130deg,#25271d,#0a100c);border-color:#d3b780}input,textarea,select{background:#11160f}#toast{top:10px;font-size:.875rem}footer{border-top-color:#d2b27355}
@media(max-width:1100px){main{grid-template-columns:minmax(350px,540px) minmax(235px,300px);gap:24px}.intro{display:none}}
@media(max-width:700px){header{height:60px;padding:0 16px}main{display:flex;padding:10px 10px 22px;gap:20px}.play{max-width:500px;padding:9px;width:100%}.stage{grid-template-columns:minmax(0,1fr) 60px;gap:0}.stage .up-next{margin-top:36px;padding:8px 2px}.stage .queue canvas,.stage .queue>div:first-child canvas{width:50px;height:50px}.arena{display:block;width:100%;height:auto}#game{width:100%;max-width:none;height:100%}.hud>div{padding:8px;gap:7px}.hud strong{font-size:1.4rem}.hud span{font-size:.875rem;letter-spacing:0}.hud .icon{width:42px}.start-cover{padding:12px}.start-cover h2{font-size:2.25rem;margin:10px 0}.start-cover p{font-size:1rem;line-height:1.5}.start-cover small{display:none}.start-cover .primary{margin-bottom:5px}.start-cover .eyebrow{font-size:.875rem}.collection{max-width:500px;padding:18px}.play-bottom span{max-width:190px}.play-bottom .primary{padding:10px}.music-bar{gap:8px}.music-bar small{font-size:.875rem}.disc{flex-shrink:0}}
@media(max-height:600px) and (orientation:landscape){main{display:grid;grid-template-columns:minmax(360px,520px) minmax(235px,320px);gap:20px;padding:15px}.play{width:100%;max-width:none}.collection{width:100%}.stage{grid-template-columns:minmax(0,1fr) 64px}.intro{display:none}}
/* Jar-first mobile edition: panels open above a stable, fixed playfield. */
[hidden]{display:none!important}.mobile-title{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font:500 1.2rem Georgia,serif;letter-spacing:.08em;margin:0 4px 10px}.mobile-title span{font:12px Manrope,sans-serif;color:var(--muted);letter-spacing:0}.game-tools{display:flex;gap:5px;margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}.game-tools button{flex:1;min-width:0;display:grid;gap:2px;place-content:center;font-size:22px;border:0;background:none;padding:4px;min-height:52px;color:var(--gold)}.game-tools span{font:14px Manrope,sans-serif;letter-spacing:0}.music{padding:4px 8px}.music-bar{gap:8px}.music-bar b{font-size:12px;margin:0}.music-bar .disc{width:30px;height:30px;font-size:18px}.music-bar small{font-size:12px}.music-bar .icon{height:38px;min-height:38px}.music-bar div{display:grid}.music{flex-shrink:0}.panel-head{display:flex;align-items:center;gap:12px;justify-content:space-between}.panel-head h2{font-size:2rem;margin:0}.panel-head button{width:44px;margin:0;font-size:24px;flex-shrink:0}#toolDialog{max-height:80dvh;overflow:auto;padding:22px}#panelBody{margin-top:16px}#panelBody .collection{border:0;padding:0;background:none}#panelBody .music{border:0;padding:0}#panelBody footer{display:grid;padding:0}#panelBody button{margin-top:5px}#musicPanel{padding-top:0}.board-tabs{display:flex;gap:8px;margin:12px 0}.board-tabs button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.board-meta{font-size:14px!important;line-height:1.6!important}.board-row{display:grid;grid-template-columns:1fr auto;gap:5px 14px;padding:14px 0;border-bottom:1px solid var(--line)}.board-row strong{font-size:16px;overflow-wrap:anywhere}.board-row b{color:var(--gold);font-size:18px}.board-row small{grid-column:1/-1;color:var(--muted);font-size:14px}.board-row.champion{border:1px solid var(--gold);border-radius:12px;padding:14px;margin:10px 0;background:#a0802111}.board-empty{padding:20px 0;font-size:16px}#scoreForm{border-top:1px solid var(--line);margin:20px 0;padding-top:6px}#scoreForm small{display:block;font-size:14px;line-height:1.5;margin-top:8px;color:var(--muted)}#scoreStatus{font-size:14px;line-height:1.5}#toolDialog input[type=range]{padding:0;accent-color:var(--gold)}#dialog{max-height:85dvh;overflow:auto}body>footer{display:none}
@media(max-width:700px){html,body{height:var(--viewport,100dvh);overflow:hidden}body{display:flex;flex-direction:column}body>header{display:none}main{display:flex;flex:1;min-height:0;margin:0;padding:calc(6px + env(safe-area-inset-top)) 8px calc(6px + env(safe-area-inset-bottom));width:100%;align-items:center;gap:0}.intro{display:none}.collection{display:none}.play{height:100%;min-height:0;display:flex;flex-direction:column;padding:8px;max-width:520px;background:linear-gradient(#111a12d9,#09110ce8);border-radius:18px}.mobile-title{font-size:17px;margin-bottom:5px;height:22px;flex-shrink:0}.hud{padding-bottom:5px;flex-shrink:0}.hud>div{padding:6px 8px}.hud strong{font-size:22px}.hud span{font-size:14px}.hud .icon{height:40px;min-height:40px}.stage{flex:1;min-height:0;display:flex;justify-content:center;background:none}.arena{height:100%;width:auto;max-width:100%;aspect-ratio:420/600;flex-shrink:1}.stage .up-next{position:absolute;right:0;top:0;margin:0;padding:3px 2px;width:45px;border:0;background:#10171099;box-shadow:none}.stage .up-next .eyebrow{font-size:12px}.stage .queue{gap:2px}.stage .queue>div:first-child{display:none}.stage .queue span{display:none}.stage .queue canvas{width:39px;height:39px}.play-bottom{flex-shrink:0;padding:0 3px 4px;min-height:34px}.play-bottom span{font-size:12px;max-width:none;letter-spacing:0}.play-bottom button{min-height:34px;padding:5px 10px;font-size:14px}.music-bar small{display:none}.music-bar b{font-size:14px}.music-bar b:empty:before{content:'XD Music Lounge'}.music{margin:0}.game-tools{margin-top:3px;padding-top:2px}.game-tools button{min-height:48px}.game-tools span{font-size:14px}#toolDialog{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:540px;border-radius:22px 22px 0 0;max-height:78dvh}#panelBody .collection{display:block;width:100%}.start-cover h2{font-size:2.5rem}.start-cover p{font-size:16px}.start-cover .eyebrow{display:none}#toast{font-size:14px;top:4px}.progress{flex-shrink:0}.panel-head h2{font-size:28px}}
@media(max-height:650px) and (max-width:700px){.mobile-title{display:none}.hud>div{padding:4px 7px}.music-bar b{font-size:12px}.game-tools button{min-height:44px;font-size:18px}.start-cover p{display:none}.play-bottom span{font-size:12px}.game-tools span{font-size:12px}}
/* One viewport on every device; secondary content belongs in tool panels. */
html,body{height:var(--viewport,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
body{display:flex;flex-direction:column}
body>header,body>footer,main>.intro,main>.collection{display:none}
main{display:flex;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));gap:0;align-items:center;justify-content:center;overflow:hidden}
.play{height:100%;min-height:0;max-height:100%;width:100%;max-width:620px;display:flex;flex-direction:column;padding:10px;border-radius:18px;overflow:hidden}
.mobile-title{display:flex;height:24px;flex-shrink:0;margin:0 4px 6px;font-size:18px;align-items:center}
.hud{flex-shrink:0;padding:0 0 6px;gap:8px}.hud>div{padding:6px 10px}.hud strong{font-size:24px}.hud span{font-size:14px}.hud .icon{height:42px;min-height:42px}
.progress{flex-shrink:0}
.stage{display:flex;flex:1;min-height:0;min-width:0;justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 70%,#baa55a0d,transparent 70%)}
.arena{flex:none;min-height:0;min-width:0;max-width:100%;max-height:100%!important;aspect-ratio:420/600;margin:0 auto;align-self:center}
#game{width:100%;height:100%;max-width:none;aspect-ratio:auto}
.stage .up-next{position:absolute;right:0;top:4px;margin:0;padding:5px 3px;width:48px;border:0;background:#10171099;box-shadow:none}
.stage .up-next .eyebrow{font-size:12px;margin:0 0 3px}.stage .queue{gap:3px}.stage .queue>div:first-child,.stage .queue span{display:none}.stage .queue canvas{width:40px;height:40px}
.play-bottom{flex-shrink:0;min-height:36px;padding:2px 3px 5px;gap:8px}.play-bottom span{font-size:13px;max-width:none;letter-spacing:0;line-height:1.4}.play-bottom button{min-height:34px;padding:5px 12px;font-size:14px}
.music{flex-shrink:0;margin:0;padding:3px 8px}.music-bar .disc{width:28px;height:28px;flex-shrink:0}.music-bar small{display:none}.music-bar b{font-size:14px;margin:0}.music-bar .icon{min-height:34px;height:34px}
.game-tools{flex-shrink:0;margin-top:4px;padding-top:3px;gap:4px}.game-tools button{min-height:48px;font-size:22px}.game-tools span{font-size:14px}
#toolDialog{max-height:calc(var(--viewport,100dvh) - 24px);overflow:hidden;padding:20px;width:min(540px,calc(100% - 24px));max-width:540px}
#toolDialog[open]{display:flex;flex-direction:column}.panel-head{flex-shrink:0}.panel-head h2{font-size:28px}#panelBody{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:0 3px 4px}#panelBody .collection{display:block;max-width:none;width:100%;margin:0}
#dialog{max-height:calc(var(--viewport,100dvh) - 24px);overflow-y:auto;overscroll-behavior:contain}
@media(min-width:701px){#toolDialog{inset:0;margin:auto;border-radius:20px}.start-cover h2{font-size:clamp(2rem,4vh,3rem)}}
@media(max-width:700px){main{padding:calc(6px + env(safe-area-inset-top)) 8px calc(6px + env(safe-area-inset-bottom))}.play{padding:8px;max-width:520px}.mobile-title{font-size:17px;height:22px}.hud strong{font-size:22px}.hud>div{padding:5px 8px}#toolDialog{inset:auto 0 0;margin:0 auto;width:100%;border-radius:22px 22px 0 0;max-height:calc(var(--viewport,100dvh) - 12px)}}
@media(max-height:650px) and (orientation:portrait){.mobile-title{display:none}.hud>div{padding:4px 7px}.play-bottom span{font-size:12px}.game-tools button{font-size:18px;min-height:44px}.game-tools span{font-size:14px}.start-cover p{display:none}}
/* Low-height landscape keeps the jar tall and moves controls beside it. */
@media(orientation:landscape) and (max-height:600px){
 main{padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
 .play{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) minmax(195px,260px);grid-template-rows:24px 44px minmax(0,1fr) 40px 56px;gap:5px 14px;padding:8px}
 .stage{grid-column:1;grid-row:1/-1;height:100%;width:100%}.mobile-title{grid-column:2;grid-row:1;font-size:16px;margin:0;height:24px}.mobile-title span{font-size:12px}.hud{grid-column:2;grid-row:2;padding:0;gap:5px}.hud>div{gap:5px;padding:5px}.hud strong{font-size:20px}.hud span{font-size:12px}.hud .icon{width:38px;min-width:38px;height:40px;min-height:40px}.progress{display:none}
 .play-bottom{grid-column:2;grid-row:3;align-self:end;display:flex;flex-direction:column;align-items:stretch;padding:0;gap:5px}.play-bottom span{text-align:center;font-size:12px}.play-bottom button{min-height:34px}.music{grid-column:2;grid-row:4;align-self:center;min-width:0}.music-bar{gap:5px}.music-bar b{font-size:12px}.game-tools{grid-column:2;grid-row:5;margin:0;align-self:stretch}.game-tools button{font-size:18px;min-height:44px;padding:3px 0}.game-tools span{font-size:12px}.start-cover h2{font-size:28px;margin:5px 0 12px}.start-cover p,.start-cover small,.start-cover .eyebrow{display:none}.start-cover{padding:10px}.stage .up-next{width:43px}.stage .queue canvas{width:35px;height:35px}
}

/* Direct song selection and device controls. */
#fullscreen{flex:0 0 36px;min-width:36px;font-size:24px}
.song-list{display:grid;gap:8px;margin:12px 0;max-height:38dvh;overflow-y:auto}
.song-list button{text-align:left;min-height:48px;white-space:normal;font-size:15px}
.song-list button[aria-pressed="true"]{border-color:#e5c88d;background:#30402d;color:#ffe7b3}
#songForm{display:grid;gap:10px;padding:12px 0}
#songLink{min-width:0;width:100%;font-size:16px}
.player-fallback{margin-top:16px}.player-fallback iframe{width:100%;border:0;margin-top:10px}
:fullscreen main{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Desktop keeps the surrounding lounge; mobile retains its compact toolbar. */
.desktop-side{display:none}
@media(min-width:1100px) and (min-height:601px){
 main{display:grid;grid-template-columns:minmax(240px,1fr) minmax(350px,560px) minmax(270px,1fr);gap:clamp(16px,2vw,32px);max-width:1600px;margin:0 auto;padding:16px 24px;align-items:stretch}
 main>.intro{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:12px 4px 12px 0}
 .intro h1{font-size:48px;margin-bottom:8px}.intro .eyebrow{font-size:13px;max-width:none;margin-bottom:8px}.intro .lede{font-size:16px;margin:4px 0 10px;line-height:1.4}.intro .lede br{display:none}
 .intro .rule{margin:5px 0;gap:10px}.intro .rule p{font-size:14px}.intro .rule small{font-size:13px}
 .intro .record{padding-top:10px;margin-top:10px;grid-template-columns:1fr auto}.intro .record strong{grid-column:2;grid-row:1/3;font-size:28px}.intro .record small{font-size:13px}.intro .practice{margin:8px 0 14px;max-width:none;font-size:13px}
 .desktop-board,.desktop-music{border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,#191e18ec,#0b110deb);padding:16px}
 .desktop-board h2,.desktop-music h2{font-size:27px;color:var(--gold);margin:0 0 10px}.desktop-board .board-meta{font-size:13px;line-height:1.5}.desktop-board .board-tabs{display:flex;gap:6px}.desktop-board button{font-size:13px;padding:8px;flex:1}
 #desktopSettings{margin-top:12px;flex-shrink:0}
 main>.desktop-side{display:flex;flex-direction:column;gap:16px;min-height:0;overflow-y:auto;padding-right:3px}
 .desktop-side .collection{display:block;width:100%;padding:16px;max-width:none}.desktop-side .collection-title h2{font-size:25px}.desktop-side .field-note{margin-top:12px;padding-top:12px}.desktop-side .field-note p{font-size:20px;margin-bottom:8px}.desktop-side .tier canvas{width:48px;height:48px}
 #desktopMusic #musicPanel{padding:0}#desktopMusic .song-list{max-height:180px}#desktopMusic .music-controls button{flex:1;padding:8px}#desktopMusic #musicStatus{font-size:13px}
 .play{max-width:none;width:100%;height:100%;padding:12px}.play .game-tools{display:none}.mobile-title{display:flex}
 .music-bar small{display:block;font-size:12px}.music-bar b{font-size:14px}.music{padding:8px}
 .stage .up-next{width:54px}.stage .queue canvas{width:46px;height:46px}
}
html.xd-stash-embedded,html.xd-stash-embedded body{width:100%;height:100%;min-height:0;overflow:hidden}
html.xd-stash-embedded body>header,html.xd-stash-embedded body>footer{display:none!important}
html.xd-stash-embedded main{height:100%;max-width:none;margin:0;padding:clamp(6px,1.2vh,14px);align-items:stretch}
html.xd-stash-embedded .play{height:100%;min-height:0}
@media(min-width:1100px) and (min-height:601px){html.xd-stash-embedded main{grid-template-columns:minmax(180px,.8fr) minmax(300px,440px) minmax(220px,.9fr);gap:clamp(14px,2vw,34px)}html.xd-stash-embedded .intro{padding-top:8px;overflow:auto}html.xd-stash-embedded .desktop-side{min-height:0;overflow:auto}}

.song-list button span,.song-list button small{display:block}.song-list button span{font-weight:700;color:var(--text)}.song-list button small{margin-top:4px;color:var(--muted);font-size:13px;text-transform:capitalize}.song-loading{margin:0;padding:12px;color:var(--muted);line-height:1.5}