/* Every control face is bundled WEBP artwork. Text, counters and interaction
   remain live DOM content; no gradient or inset-shadow paints a button. */
:is(.big-button,.text-button,.level-button,.settings-action,.settings-toggle,
 .lobby-play,.lobby-shortcut,.profile-pencil,.profile-tabs button,.profile-choice,
 .failure-booster,.failure-retry,.continue-action,
 #menu .lobby-counter,#hud #hud-coins,#menu #lobby-profile){
 background:transparent url('./assets/buttons/ui/surfaces.webp') var(--button-position,0% 0%)/300% 200% no-repeat!important;
 background-origin:border-box!important;background-clip:border-box!important;
 border-color:transparent!important;box-shadow:none!important;
}
:is(.big-button.green,.lobby-play,.settings-toggle,.profile-pencil,.failure-retry,.continue-action){--button-position:50% 0%}
:is(.theme-shortcut,.settings-action.remove-ads){--button-position:100% 0%}
:is(.settings-action.exit-game){--button-position:0% 100%}
:is(.profile-choice,.failure-booster,#menu .lobby-counter,#hud #hud-coins,#menu #lobby-profile){--button-position:50% 100%}
.profile-choice[aria-pressed=true]{--button-position:100% 100%}
.profile-tabs button[aria-selected=true],#profile-name-edit{--button-position:0% 0%}
.profile-tabs button[aria-selected=false]{--button-position:100% 0%}
.settings-toggle[aria-pressed=false]{--button-position:50% 100%}
.level-button:disabled{--button-position:50% 100%}

:is(.close-button,.settings-close,.profile-close,#levels-close,#collections-close,:is(#hint-price,#time-price,#connect-price)){
 --round-position:0%;
 background:transparent url('./assets/buttons/ui/round.webp') var(--round-position) center/300% 100% no-repeat!important;
 background-origin:border-box!important;border-color:transparent!important;box-shadow:none!important;
 clip-path:circle(48% at 50% 50%);
}
:is(#hint-price,#time-price,#connect-price){--round-position:50%;}
:is(#levels-close,#collections-close,.close-button)>.button-icon{width:64%;height:64%;object-fit:contain;margin:auto;display:block}
:is(#levels-close,#collections-close,.close-button){display:grid;place-items:center;padding:0}
.button-icon{object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
button::before,button::after{content:none!important}
button:active:not(:disabled){box-shadow:none!important}

/* Existing illustrated controls keep their original image and exact placement. */
#coins-watch-ad{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
#hud #restart-button{background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}
.victory-reward{background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}
.badge-grid .profile-choice{background:none!important;border:0!important;box-shadow:none!important}
:is(#hint-video,#time-video,#connect-video){background-color:transparent!important;box-shadow:none!important;border-color:transparent!important}
.continue-price,.continue-video-icon{background:none!important}

/* Off state is artwork, too; the indicator is baked into this WEBP. */
#settings-sound[aria-pressed=false]>.button-icon{content:url('./assets/buttons/ui/settings-sound-off.webp')}
#settings-vibration[aria-pressed=false]>.button-icon{content:url('./assets/buttons/ui/settings-vibration-off.webp')}
.profile-tabs{background:none;border-color:transparent;box-shadow:none}
#menu #lobby-profile .menu-profile-art{border-color:transparent;box-shadow:none}
.profile-choice>img:not(.button-icon){border-color:transparent;box-shadow:none}
.map-socket .map-lock>.button-icon{position:static;width:100%;height:100%;object-fit:contain}
:is(.close-button,.settings-close,.profile-close,#levels-close,#collections-close):focus-visible{outline:3px solid white;outline-offset:-5px}

/* Main menu: the quieter, lightly beveled reference finish, as raster art. */
#menu #lobby-levels,#menu #lobby-theme,#menu #play-button{
 background:transparent url('./assets/buttons/ui/menu-soft.webp') var(--menu-button-position,0%) center/300% 100% no-repeat!important;
 background-origin:border-box!important;border-color:transparent!important;box-shadow:none!important;
}
#menu #lobby-theme{--menu-button-position:50%}
#menu #play-button{--menu-button-position:100%}
#menu #lobby-lives,#menu #lobby-coins-button,#hud #hud-coins{
 background:transparent url('./assets/buttons/ui/menu-counter.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;
}
#menu #lobby-profile{
 background:transparent url('./assets/buttons/ui/menu-avatar.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;
}

/* Keep menu lettering crisp, without an offset duplicate beneath the text. */
#menu #lobby-levels,#menu #lobby-theme,#menu #play-button,#menu #play-button strong,#menu #play-button span{
 text-shadow:none!important;
}

/* Image crop coordinates and silhouette masks for the reference faces. */
#menu #lobby-levels{background-size:327.10843373493975% 226.95924764890282%!important;background-position:4.509283819628647% 47.901234567901234%!important;clip-path:polygon(99.55% 49.84%,99.55% 56.39%,99.55% 62.93%,99.55% 69.47%,99.56% 76.33%,98.81% 82.88%,97.31% 88.80%,94.91% 93.78%,91.60% 97.50%,87.25% 99.35%,82.44% 99.00%,78.53% 99.29%,75.23% 99.26%,72.23% 99.23%,69.39% 98.89%,66.99% 98.87%,64.90% 99.16%,62.81% 98.82%,61.02% 99.12%,59.23% 99.10%,57.59% 99.09%,55.95% 99.08%,54.46% 99.07%,52.97% 99.06%,51.34% 99.06%,50.00% 98.75%,48.51% 99.06%,46.88% 99.06%,45.39% 99.07%,43.90% 99.08%,42.26% 99.09%,40.62% 99.10%,38.83% 99.12%,36.89% 99.14%,34.95% 99.16%,32.71% 99.18%,30.31% 99.20%,27.62% 99.23%,24.62% 99.26%,21.17% 99.29%,17.11% 99.32%,12.45% 99.35%,8.25% 97.50%,4.94% 93.78%,2.69% 88.80%,1.19% 82.88%,0.44% 76.33%,0.30% 69.47%,0.30% 62.93%,0.30% 56.39%,0.30% 49.84%,0.30% 43.30%,0.30% 36.76%,0.30% 30.21%,0.44% 23.35%,1.19% 16.81%,2.54% 10.89%,4.94% 5.91%,8.25% 2.18%,12.45% 0.34%,17.11% 0.37%,21.17% 0.40%,24.62% 0.43%,27.62% 0.46%,30.31% 0.48%,32.71% 0.51%,34.95% 0.53%,36.89% 0.55%,38.83% 0.57%,40.62% 0.58%,42.26% 0.60%,43.90% 0.61%,45.39% 0.62%,46.88% 0.62%,48.51% 0.63%,49.85% 0.63%,51.34% 0.63%,52.97% 0.62%,54.46% 0.62%,55.95% 0.61%,57.59% 0.60%,59.23% 0.58%,61.02% 0.57%,62.96% 0.55%,64.90% 0.53%,67.14% 0.51%,69.54% 0.48%,72.23% 0.46%,75.23% 0.43%,78.68% 0.40%,82.74% 0.37%,87.40% 0.34%,91.60% 2.18%,94.91% 5.91%,97.31% 10.89%,98.81% 16.81%,99.56% 23.35%,99.55% 30.21%,99.55% 36.76%,99.55% 43.30%)}
#menu #lobby-theme{background-size:328.0966767371601% 227.67295597484275%!important;background-position:50.06622516556292% 47.783251231527096%!important;clip-path:polygon(99.55% 50.00%,99.55% 56.25%,99.55% 62.81%,99.55% 69.38%,99.41% 76.26%,98.81% 82.82%,97.30% 88.76%,94.89% 93.76%,91.73% 97.81%,87.36% 99.35%,82.69% 99.32%,78.62% 99.28%,75.31% 99.26%,72.30% 99.23%,69.60% 99.20%,67.19% 99.18%,64.94% 99.15%,63.00% 99.13%,61.05% 99.12%,59.25% 99.10%,57.61% 99.09%,55.97% 99.08%,54.48% 99.07%,52.98% 99.06%,51.34% 99.06%,50.00% 99.06%,48.51% 99.06%,46.87% 99.06%,45.37% 99.07%,43.88% 99.08%,42.24% 99.09%,40.59% 99.10%,38.80% 99.12%,36.85% 99.13%,34.91% 99.15%,32.65% 99.18%,30.25% 99.20%,27.55% 99.23%,24.54% 99.26%,21.23% 99.28%,17.16% 99.32%,12.49% 99.35%,8.27% 97.50%,4.96% 93.76%,2.55% 88.76%,1.04% 82.82%,0.29% 76.26%,0.30% 69.38%,0.30% 62.81%,0.30% 56.25%,0.30% 50.00%,0.30% 43.44%,0.30% 36.87%,0.30% 30.31%,0.29% 23.43%,1.04% 16.86%,2.55% 10.92%,4.96% 5.93%,8.27% 2.19%,12.49% 0.34%,17.16% 0.37%,21.23% 0.40%,24.54% 0.43%,27.55% 0.46%,30.25% 0.48%,32.65% 0.51%,34.91% 0.53%,36.85% 0.55%,38.80% 0.57%,40.59% 0.58%,42.24% 0.60%,43.88% 0.61%,45.37% 0.62%,46.87% 0.62%,48.51% 0.63%,50.00% 0.63%,51.34% 0.63%,52.98% 0.62%,54.48% 0.62%,55.97% 0.61%,57.61% 0.60%,59.25% 0.58%,61.05% 0.57%,63.00% 0.55%,64.94% 0.53%,67.19% 0.51%,69.60% 0.48%,72.30% 0.46%,75.31% 0.43%,78.62% 0.40%,82.69% 0.37%,87.36% 0.34%,91.58% 2.19%,94.89% 5.93%,97.30% 10.92%,98.66% 16.86%,99.41% 23.43%,99.55% 30.31%,99.55% 36.87%,99.55% 43.44%)}
#menu #play-button{background-size:327.6018099547511% 227.67295597484275%!important;background-position:95.4937044400265% 47.783251231527096%!important;clip-path:polygon(99.55% 50.00%,99.55% 56.25%,99.55% 62.81%,99.55% 69.69%,99.56% 76.57%,98.81% 82.82%,97.31% 89.08%,95.05% 94.07%,91.59% 97.50%,87.38% 99.35%,82.56% 99.32%,78.65% 99.28%,75.19% 99.26%,72.19% 99.23%,69.49% 99.20%,67.09% 99.18%,65.00% 99.15%,62.90% 99.13%,61.11% 99.12%,59.32% 99.10%,57.67% 99.09%,56.03% 99.08%,54.39% 99.07%,52.90% 99.06%,51.41% 99.06%,49.92% 99.06%,48.44% 99.06%,46.95% 99.06%,45.46% 99.07%,43.82% 99.08%,42.17% 99.09%,40.53% 99.10%,38.74% 99.12%,36.95% 99.13%,34.85% 99.15%,32.76% 99.18%,30.36% 99.20%,27.66% 99.23%,24.65% 99.26%,21.20% 99.28%,17.29% 99.32%,12.47% 99.35%,8.26% 97.50%,5.10% 93.76%,2.69% 88.76%,1.04% 82.82%,0.44% 76.26%,0.45% 69.38%,0.45% 62.81%,0.45% 56.25%,0.45% 50.00%,0.45% 43.44%,0.45% 36.87%,0.45% 30.31%,0.44% 23.43%,1.04% 16.86%,2.69% 10.92%,4.95% 5.61%,8.26% 2.19%,12.47% 0.34%,17.29% 0.37%,21.20% 0.40%,24.65% 0.43%,27.66% 0.46%,30.36% 0.48%,32.76% 0.51%,34.85% 0.53%,36.95% 0.55%,38.74% 0.57%,40.53% 0.58%,42.17% 0.60%,43.82% 0.61%,45.46% 0.62%,46.95% 0.62%,48.44% 0.63%,49.92% 0.63%,51.41% 0.63%,52.90% 0.62%,54.39% 0.62%,56.03% 0.61%,57.67% 0.60%,59.32% 0.58%,61.11% 0.57%,62.90% 0.55%,65.00% 0.53%,67.09% 0.51%,69.49% 0.48%,72.19% 0.46%,75.19% 0.43%,78.65% 0.40%,82.56% 0.37%,87.38% 0.34%,91.59% 2.19%,94.90% 5.61%,97.31% 10.61%,98.81% 16.86%,99.56% 23.11%,99.55% 29.99%,99.55% 36.87%,99.55% 43.44%)}

/* Album covers have a paper frame, never a stretched booster-button face. */
#collections-screen #collection-grid.collection-covers{padding:5px 50px 18px;gap:15px}
#collections-screen #collection-grid .album-cover{
 display:block;box-sizing:border-box;width:100%;min-width:0;
 padding:12px 12px 18px 15px;border:0;border-radius:20px;
 background:transparent url('./assets/buttons/ui/album-frame.webp') center/100% 100% no-repeat!important;
 box-shadow:none!important;color:#354271;overflow:hidden;
}
#collection-grid .album-cover .album-art{border-radius:10px}
#collection-grid .album-cover .album-art img{height:auto;aspect-ratio:3/2;width:100%;object-fit:cover}
#collection-grid .album-cover h2{margin:9px 0 6px;font-size:25px;line-height:1.2}
#collection-grid .album-cover p{margin:3px 0 0;font-size:14px;line-height:1.3;padding-bottom:3px}
@media(max-width:350px){#collections-screen #collection-grid.collection-covers{padding-left:24px;padding-right:24px}}

/* Settings uses separate images at the original rectangle/square dimensions. */
#pause-screen #settings-levels,#pause-screen #settings-info-close{
 background:transparent url('./assets/buttons/ui/settings-cyan.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;
}
#pause-screen #settings-theme{
 background:transparent url('./assets/buttons/ui/settings-purple.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;
}
#pause-screen #home-button{
 background:transparent url('./assets/buttons/ui/settings-red.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;
}
#pause-screen #settings-sound,#pause-screen #settings-vibration{
 background:transparent url('./assets/buttons/ui/settings-green.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;
}
#pause-screen #settings-sound[aria-pressed=false],#pause-screen #settings-vibration[aria-pressed=false]{
 background-image:url('./assets/buttons/ui/settings-muted.webp')!important;
}
#pause-screen #resume-button{
 background:transparent url('./assets/buttons/ui/settings-close.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;
 clip-path:none;
}

/* Profile keeps its original joined tabs and light portrait frames. */
#profile-editor #profile-tabs{gap:0;border:3px solid transparent;border-radius:26px;overflow:hidden;background:transparent url('./assets/buttons/ui/profile-tab-inactive.webp') center/100% 100% no-repeat;background-origin:border-box;box-shadow:none}
#profile-editor #profile-avatar-tab,#profile-editor #profile-badge-tab{
 border-radius:0;margin:0;
 background:transparent url('./assets/buttons/ui/profile-tab-inactive.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;box-shadow:none!important;
}
#profile-editor #profile-avatar-tab[aria-selected=true],#profile-editor #profile-badge-tab[aria-selected=true]{
 background-image:url('./assets/buttons/ui/profile-tab-active.webp')!important;
}
#profile-editor #profile-item-grid .avatar-choice{
 background:transparent url('./assets/buttons/ui/profile-avatar-frame.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;border-color:transparent!important;box-shadow:none!important;
}
#profile-editor #profile-item-grid .badge-choice{background:none!important;border:0!important;box-shadow:none!important}
#profile-editor #profile-name-edit{
 background:transparent url('./assets/buttons/ui/profile-edit-blue.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;
}
#profile-screen #profile-edit{
 background:transparent url('./assets/buttons/ui/profile-edit-green.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;
}
#profile-editor #profile-editor-close,#profile-screen #profile-close,#lives-screen #lives-close{
 background:transparent url('./assets/buttons/ui/settings-close.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;clip-path:none;
}
#lives-screen #lives-ok{
 background:transparent url('./assets/buttons/ui/lives-confirm.webp') center/100% 100% no-repeat!important;
 background-origin:border-box!important;border-color:transparent!important;box-shadow:none!important;
}