/* Expanded GNARLY karaoke inspired by the native NowPlayingScreen.
 * Same page/player/lyrics; no second audio graph or media source.
 */
.karaoke-stage[hidden]{display:none!important}
.karaoke-stage{
 position:fixed;inset:0;z-index:90;isolation:isolate;overflow:hidden;
 background:rgba(10,13,17,.94);color:#f7f9fa;
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Arial,sans-serif;
 padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
}
html.karaoke-stage-open,html.karaoke-stage-open body{overflow:hidden;overscroll-behavior:none}
.karaoke-stage-wallpaper{position:absolute;inset:-12%;z-index:-2;overflow:hidden;pointer-events:none;background:#0d1118}
.karaoke-stage-wallpaper img{width:100%;height:100%;object-fit:cover;filter:blur(55px) saturate(1.6);opacity:.27;transform:scale(1.12)}
.karaoke-stage:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,9,13,.78),rgba(10,13,17,.72) 48%,rgba(11,14,19,.90))}
.karaoke-stage-glass{height:100%;width:min(100%,930px);margin:0 auto;display:flex;flex-direction:column;min-height:0;padding:clamp(10px,3vw,24px) clamp(14px,3.4vw,32px) 12px}
.karaoke-stage-header{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding:4px 0 16px}
.karaoke-stage-art{width:58px;height:58px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.19);box-shadow:0 8px 22px #0005}
.karaoke-stage-song{min-width:0;flex:1}
.karaoke-stage-song h2{font-size:clamp(16px,4.3vw,24px);line-height:1.12;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 5px}
.karaoke-stage-song p{color:#bdc6c8;font-size:13px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.karaoke-stage-transport{flex:0 0 42px;height:42px;border-radius:50%;background:#f7f9fa;color:#151b1d;font-size:18px;font-weight:850;box-shadow:0 3px 12px #0004}
.karaoke-stage-close{flex:0 0 42px;height:42px;border-radius:50%;background:#ffffff17;border:1px solid #ffffff26;color:#f7f7f7;font-size:17px}
.karaoke-stage-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;flex:0 0 auto;margin:4px 0 16px}
.karaoke-stage-actions button,.karaoke-stage-footer button{border:1px solid #ffffff30;background:rgba(255,255,255,.11);color:#fafbff;border-radius:999px;padding:10px 13px;min-height:39px;font-size:13px;font-weight:730;touch-action:manipulation}
.karaoke-stage-actions button[aria-pressed="true"]{background:color-mix(in srgb,var(--acid,#46ff12) 20%,#171d21);border-color:var(--acid,#46ff12);color:#fff}
.karaoke-stage-actions button:disabled{opacity:.4}
.karaoke-score-card{flex:0 0 auto;display:grid;grid-template-columns:1fr 1.25fr;gap:7px 13px;padding:14px 17px 11px;border:1px solid color-mix(in srgb,var(--acid,#46ff12) 24%,#ffffff33);border-radius:22px;background:rgba(97,116,119,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px #ffffff10}
.karaoke-score-label{display:block;color:#d4dde1;font-size:10px;letter-spacing:.11em;font-weight:850}
.karaoke-score-number{display:block;font-size:27px;line-height:1.3;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.karaoke-score-right{align-self:center;text-align:right;display:flex;flex-direction:column;gap:6px}
.karaoke-score-right strong{display:inline-block;align-self:flex-end;border-radius:20px;background:color-mix(in srgb,var(--acid,#46ff12) 19%,#26383d);padding:6px 10px;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.karaoke-score-right small{font-size:10px;color:#bcc7d0;line-height:1.3}
.karaoke-score-meter{grid-column:1/-1;overflow:hidden;background:#ffffff18;border-radius:20px;height:4px}
.karaoke-score-meter span{display:block;height:100%;width:0%;border-radius:inherit;background:var(--acid,#46ff12);transition:width .09s linear}
.karaoke-score-rating{grid-column:1/-1;min-height:18px;margin:1px 0 0;text-align:center;font-size:11px;line-height:1.4;color:#d9e1e3}
.karaoke-stage-status{flex:0 0 auto;text-align:center;font-size:11px;font-weight:700;color:#d1dadc;letter-spacing:.04em;padding:14px 0 5px}
.karaoke-reader{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-padding-block:32vh 28vh;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent)}
.karaoke-reader::-webkit-scrollbar{display:none}
.karaoke-reader-lines{min-height:100%;display:flex;flex-direction:column;align-items:stretch;gap:clamp(15px,4vh,31px);padding:20vh 0 28vh}
.karaoke-reader-line{
 display:block;width:100%;margin:0;padding:8px clamp(7px,3vw,28px);border:0;border-radius:18px;
 text-align:center;background:transparent;color:#d1d4da;font-family:var(--gnarly-lyric-font,-apple-system,BlinkMacSystemFont,sans-serif);
 font-weight:var(--gnarly-lyric-weight,750);font-size:clamp(22px,5vw,43px);line-height:1.35;
 letter-spacing:var(--gnarly-lyric-spacing,-.012em);text-transform:var(--gnarly-lyric-transform,none);
 overflow-wrap:anywhere;opacity:.25;transition:opacity .2s ease,color .2s ease,text-shadow .2s ease;touch-action:manipulation}
.karaoke-reader-line.is-live{opacity:1;color:var(--acid,#46ff12);background:color-mix(in srgb,var(--acid,#46ff12) 8%,transparent);text-shadow:0 0 19px color-mix(in srgb,var(--acid,#46ff12) 28%,transparent);font-size:clamp(25px,5.8vw,47px)}
.karaoke-reader-line.is-past{opacity:.12}
.karaoke-reader-line.is-future{opacity:calc(.48 - .075 * var(--distance,1))}
.karaoke-reader-line:focus-visible,.karaoke-stage button:focus-visible{outline:2px solid var(--acid,#46ff12);outline-offset:2px}
.karaoke-reader-empty{font-size:17px;font-weight:700;text-align:center;color:#b5c6cd;padding:16px}
.karaoke-stage-footer{flex:0 0 auto;display:flex;align-items:center;gap:9px;justify-content:space-between;padding:10px 0 2px}
.karaoke-stage-footer button{white-space:nowrap}
.karaoke-stage-footer button.is-following{border-color:color-mix(in srgb,var(--acid,#46ff12) 35%,transparent);color:var(--acid,#46ff12)}
.karaoke-stage-footer span{font-size:10px;max-width:48%;text-align:right;line-height:1.4;color:#bac5cb}
.karaoke-compact-expand{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:rgba(10,16,18,.63);border:1px solid #ffffff5b;color:var(--acid,#46ff12);touch-action:manipulation}
.karaoke-compact-expand svg{width:17px;height:17px}
.app-shell .floating-lyrics{position:relative;padding-right:43px}
.app-shell .floating-lyrics #floating-line{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){
 .karaoke-stage-art{height:48px;width:48px;border-radius:11px}
 .karaoke-stage-actions{gap:6px}
 .karaoke-stage-actions button{font-size:11px;padding:9px 10px}
 .karaoke-score-card{padding:11px 12px}
 .karaoke-reader-lines{padding-top:20vh;gap:19px}
 .karaoke-stage-footer button{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.karaoke-reader-line,.karaoke-score-meter span{transition:none}}

/* Scope existing Aa art compositions inside the fullscreen reader without
 * promoting the entire dialog to the app's layout shell. */
.karaoke-stage .karaoke-stage-art-root.app-shell{all:unset;display:block;width:100%;min-height:100%;font-family:inherit;color:inherit}
.karaoke-stage .karaoke-stage-art-root .gnarly-typeart{font-size:inherit;max-width:100%;justify-content:center}
.karaoke-stage .karaoke-reader-line.is-live .gnarly-typeart{font-size:inherit}

/* More detail from actual HD artwork; 55px blur excessively erased cover texture. */
.karaoke-stage-wallpaper{inset:-4%}
.karaoke-stage-wallpaper img{filter:blur(clamp(11px,2vw,24px)) saturate(1.3);opacity:.55;transform:scale(1.04);image-rendering:auto}
.karaoke-stage-fullscreen{flex:0 0 42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-size:23px;font-weight:700;touch-action:manipulation}
.karaoke-stage-fullscreen[aria-pressed="true"]{color:var(--acid);border-color:var(--acid)}


/* KARAOKE STAGE HOTFIX · do not let LRC follow-mode move the document viewport.
 * Stacking, scroll boundaries and touch targets remain independent of all
 * GNARLY smart queue, omnibox, themes, fullscreen and player surfaces.
 */
.karaoke-stage:not([hidden]){
 position:fixed!important;inset:0!important;
 width:100%!important;height:100vh;height:100dvh;
 max-height:100dvh;overflow:hidden!important;z-index:1000;
 display:flex;align-items:stretch;justify-content:center;
 pointer-events:auto;touch-action:manipulation;
 padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
 box-sizing:border-box;
}
.karaoke-stage-glass{
 position:relative;isolation:isolate;flex:1 1 auto;
 max-width:min(100%,1100px);width:100%;height:100%;max-height:100%;
 min-height:0;overflow:hidden;display:flex;flex-direction:column;
 padding:clamp(10px,2vh,22px) clamp(12px,3vw,28px) clamp(7px,1.2vh,14px);
 box-sizing:border-box;
}
.karaoke-stage-header{
 position:relative;z-index:4;display:flex;flex:none;align-items:center;
 gap:clamp(6px,1.3vw,14px);width:100%;min-width:0;
 padding:3px 0 clamp(9px,1.6vh,16px);
 margin:0;overflow:visible;
}
.karaoke-stage-header button{
 display:grid;place-items:center;flex-shrink:0;min-width:44px;
 min-height:44px;touch-action:manipulation;position:relative;z-index:4;
}
.karaoke-stage-song{min-width:0;flex:1 1 0;overflow:hidden}
.karaoke-stage-header h2,.karaoke-stage-header p{min-width:0}
.karaoke-stage-actions{
 position:relative;z-index:4;flex:none;min-width:0;
 gap:8px;display:flex;align-items:center;margin:0 0 clamp(8px,1.6vh,16px);
}
.karaoke-stage-actions button{
 min-height:43px;touch-action:manipulation;pointer-events:auto;
}
.karaoke-stage .karaoke-score-card,.karaoke-stage .karaoke-stage-status{
 position:relative;flex:none;z-index:2;
}
.karaoke-stage-status{padding:clamp(6px,1.25vh,12px) 0 5px}
.karaoke-stage .karaoke-reader{
 position:relative;flex:1 1 0;min-height:60px;max-height:100%;
 overflow-y:auto;overflow-x:hidden;
 overscroll-behavior-y:contain;touch-action:pan-y;
 scroll-behavior:auto;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 96%,transparent);
}
.karaoke-stage .karaoke-reader-lines{min-height:100%;padding-top:14vh;padding-bottom:20vh}
.karaoke-stage .karaoke-reader-line{line-height:1.27}
.karaoke-stage .karaoke-reader-line.is-future{opacity:calc(.65 - .075*var(--distance,1))}
.karaoke-stage .karaoke-reader-line.is-past{opacity:.22}
.karaoke-stage-footer{position:relative;z-index:4;flex:none;min-height:48px}
.karaoke-stage-feedback{
 position:relative;z-index:5;flex:none;margin:0 0 10px;
 border-radius:12px;border:1px solid rgba(125,255,96,.4);
 background:rgba(17,42,31,.92);color:#f5fff3;
 padding:10px 13px;line-height:1.35;font-size:12px;font-weight:680;
}
.karaoke-stage-feedback[hidden],.karaoke-stage-font-menu[hidden]{display:none!important}
.karaoke-stage-font-menu:not([hidden]){
 position:relative;z-index:6;flex:0 1 auto;min-height:0;
 max-height:min(28dvh,215px);overflow-y:auto;overscroll-behavior:contain;
 display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;
 margin:0 0 10px;padding:10px;border:1px solid rgba(255,255,255,.22);
 border-radius:14px;background:rgba(11,21,25,.96);box-shadow:0 8px 20px #0008;
}
.karaoke-stage-font-menu button{
 padding:9px;border-radius:9px;min-height:36px;text-align:left;
 background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
 color:#fff;font-size:12px;touch-action:manipulation;
}
.karaoke-stage-font-menu button[aria-pressed="true"]{
 border-color:var(--acid,#46ff12);color:var(--acid,#46ff12);
}
@media(max-width:540px){
 .karaoke-stage-glass{padding-inline:12px}
 .karaoke-stage-header{gap:5px}
 .karaoke-stage-art{width:44px;height:44px;flex:0 0 44px}
 .karaoke-stage-header button{width:40px;min-width:40px;height:42px;min-height:42px;flex-basis:40px}
 .karaoke-stage-actions{gap:6px}
 .karaoke-stage-actions button{min-height:40px;padding:8px 9px;font-size:11px}
 .karaoke-score-card{padding:9px 11px}
 .karaoke-reader-line.is-live{font-size:clamp(25px,7vw,37px)}
 .karaoke-stage-footer span{font-size:9px}
}
@media(max-height:690px){
 .karaoke-stage-glass{padding-block:6px}
 .karaoke-stage-header{padding-bottom:6px}
 .karaoke-stage-actions{margin-bottom:6px}
 .karaoke-score-card{padding-block:7px}
 .karaoke-stage-status{padding:6px 0 2px}
 .karaoke-reader-lines{padding-top:9vh;padding-bottom:15vh}
}
@media(prefers-reduced-motion:reduce){
 .karaoke-stage .karaoke-reader-line{transition:none}
}