/* Shared liquid-glass controls, based on screen one's Start practice button. */
:root {
 --control-green:linear-gradient(155deg,rgba(230,255,244,.13),rgba(230,255,244,.02) 48%,rgba(230,255,244,.06)),linear-gradient(110deg,rgba(36,123,99,.82),rgba(24,85,64,.86));
 --control-rim:rgba(172,237,211,.55);
 --control-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 0 0 1px rgba(172,237,211,.16),inset 0 -1px 1px rgba(255,255,255,.12),0 4px 12px rgba(13,36,27,.12);
 --control-idle:linear-gradient(155deg,rgba(255,255,255,.65),rgba(255,255,255,.2) 48%,rgba(255,255,255,.42)) rgba(53,91,69,.08);
 --control-idle-shadow:inset 0 1px 2px #fff,inset 0 -1px 2px rgba(32,65,46,.12),0 2px 7px rgba(13,36,27,.06);
}
html body :is(.glass-pill,.sheet-intensity button,.ys-pose-chapters button,.style-filters button,.view-class,.detail-back,.save-class,.empty button,.player-exit,.player-audio button,.ysb-iconbutton) {
 border-radius:99px!important;
 border:1px solid rgba(92,136,109,.22)!important;
 background:var(--control-idle)!important;
 box-shadow:var(--control-idle-shadow)!important;
 backdrop-filter:blur(12px) saturate(120%)!important;
 -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
 color:#345543!important;text-shadow:none!important;
}
html body :is(.start,.primary,.player-play),
html body :is(.glass-pill[aria-checked=true],.sheet-intensity button[aria-pressed=true],.ys-pose-chapters button[aria-selected=true],.style-filters button[aria-pressed=true],.save-class[aria-pressed=true],.player-audio button[aria-pressed=true]) {
 border-radius:99px!important;
 border:1.5px solid var(--control-rim)!important;
 background:var(--control-green)!important;
 box-shadow:var(--control-shadow)!important;
 backdrop-filter:blur(12px) saturate(120%)!important;
 -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
 color:#fff!important;text-shadow:0 1px 2px #153e3229!important;
}
html body .board-glass-nav {background:var(--control-idle)!important;border:0!important;box-shadow:var(--control-idle-shadow),0 0 0 1px rgba(92,136,109,.22)!important}
/* Border-box keeps the sliding lens centred on each padded navigation slot. */
html body .board-glass-nav::before {box-sizing:border-box!important;background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.3),transparent 72%),linear-gradient(145deg,rgba(213,235,219,.52),rgba(151,181,160,.2) 52%,rgba(202,224,209,.38))!important;border:1px solid rgba(249,255,250,.55)!important;box-shadow:inset 0 1px 2px rgba(255,255,255,.75),inset 0 -1px 2px rgba(25,46,32,.15),0 2px 8px rgba(24,44,30,.1)!important;backdrop-filter:blur(12px) saturate(120%)!important;-webkit-backdrop-filter:blur(12px) saturate(120%)!important}
html body :is(.class-screen,.screen,.ysb-screen,.ys-pose-screen) .board-glass-nav button[aria-pressed=true] {color:#244d39!important;text-shadow:none!important}
html body :is(.class-screen,.screen,.ysb-screen,.ys-pose-screen) .board-glass-nav button[aria-pressed=true] .nav-home-smile {stroke:currentColor!important}
html body :is(.ysb-browse)::before {background:var(--control-idle)!important;border:1px solid rgba(92,136,109,.22)!important;box-shadow:var(--control-idle-shadow)!important}
html body :is(.glass-pill,.ys-pose-chapters button,.style-filters button,.start,.primary,.player-play,.view-class,.detail-back,.save-class,.player-audio button):focus-visible {outline:2px solid #247b63!important;outline-offset:3px!important}
html body .save-class[aria-pressed=true] svg {fill:currentColor}
@media(prefers-reduced-transparency:reduce) {
 html body :is(.glass-pill,.sheet-intensity button,.ys-pose-chapters button,.style-filters button,.view-class,.detail-back,.save-class,.empty button,.player-exit,.player-audio button,.ysb-iconbutton,.board-glass-nav) {backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 html body .board-glass-nav::before {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#dce9df!important}
}

/* Image surfaces follow the original photograph; no coloured letterboxing. */
html body .detail-art {height:auto;background:transparent;}
html body .detail-art img {height:auto;width:100%;display:block;}
html body .board-player .player-portrait {background:transparent!important;}
html body .board-player .player-portrait img {background:transparent!important;}

/* The player glass takes its colour from the dark scene underneath it. */
html body .board-player :is(.player-play,.player-audio button) {
 background:linear-gradient(155deg,rgba(230,255,244,.18),rgba(230,255,244,.025) 48%,rgba(230,255,244,.09)) rgba(172,237,211,.08)!important;
 border:1.5px solid var(--control-rim)!important;
 box-shadow:var(--control-shadow)!important;
 backdrop-filter:blur(14px) saturate(135%)!important;
 -webkit-backdrop-filter:blur(14px) saturate(135%)!important;
 color:#fff!important;
}
html body .board-player .player-audio button[aria-pressed=true] {
 background:linear-gradient(155deg,rgba(230,255,244,.2),rgba(230,255,244,.03) 48%,rgba(230,255,244,.1)) rgba(172,237,211,.13)!important;
}
@media(prefers-reduced-transparency:reduce) {
 html body .board-player :is(.player-play,.player-audio button) {background:#48544d!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}