/* All completion effects stay above the artwork without changing its geometry. */
.bloomCelebration{position:absolute;inset:0;z-index:18;pointer-events:none;overflow:hidden;contain:strict}
.hoop>.bloomCelebration{inset:6%;border-radius:50%}
.puzzleFrame>.bloomCelebration{inset:12.5%}
.bloomShine{position:absolute;inset:-60%;background:linear-gradient(112deg,transparent 41%,#fff5ce18 46%,#fff3c777 50%,#fff5ce18 54%,transparent 59%);mix-blend-mode:screen;animation:bloomSweep 1s .06s ease-in-out 2 both}
.bloomPetal{position:absolute;left:var(--x);top:-15px;width:7px;height:11px;border-radius:80% 15% 75% 25%;background:var(--color);box-shadow:0 0 4px #fff0b444;animation:bloomFall 2.1s var(--delay) ease-out both}
@keyframes bloomSweep{0%{transform:translateX(-70%);opacity:0}15%,75%{opacity:1}100%{transform:translateX(70%);opacity:0}}
@keyframes bloomFall{0%{transform:translate(0,-10px) rotate(0);opacity:0}12%{opacity:.85}100%{transform:translate(var(--drift),300px) rotate(220deg);opacity:0}}
.bloomResultEnter{animation:bloomResultFade .3s .55s ease both!important}
@keyframes bloomResultFade{from{opacity:0}to{opacity:1}}
/* These are visual presses only; the surrounding layout never shifts. */
button,a[href],[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:not(.tile):not(.pieceTile),a[href],[role=button]{transition:filter .12s ease,transform .12s ease}
button:not(:disabled):not(.tile):not(.pieceTile):active,a[href]:active,.bloomPressed,.bloomTap{transform:translateY(2px) scale(.97)!important;filter:brightness(1.2)!important}
.bloomTap{animation:bloomButtonPress .23s ease both!important}
@keyframes bloomButtonPress{0%,65%{transform:translateY(2px) scale(.97);filter:brightness(1.2)}100%{transform:none;filter:brightness(1)}}
/* One small result footer: time and a painted Next button, without a second image. */
.bloomResult{text-align:center;color:#ffedc9}
.bloomResult p,.ringStudio .result p,.bloomSwap .completion p{font:11px/1.4 var(--studioFont,serif);color:#f2dbac;margin:0 0 4px}
.bloomNext,.ringStudio .result .paintButton,.bloomSwap .completion .primary{display:block;width:250px;max-width:90%;height:52px;min-height:52px;margin:0 auto;padding:11px 24px 13px;border:0;border-radius:0;box-shadow:none;background:transparent url('classic/assets/ui/studio-button.webp') center/100% 100% no-repeat;color:#fff0cf;font:17px/1.2 var(--studioFont,serif);text-shadow:0 2px 2px #173345}
html[lang=en] .bloomNext,html[lang=en] .ringStudio .result .paintButton,html[lang=en] .bloomSwap .completion .primary{font-family:Georgia,serif;font-size:16px}
.ringStudio .result h2,.bloomSwap .completion h2{display:none}
.ringStudio .result{position:absolute;inset:0;margin:0;padding:2px 0}
.ringStudio main{position:relative}
.ringStudio .turnControls{min-height:76px}
.ringStudio .result:not([hidden]){position:relative;height:76px;margin-top:-76px}
.ringStudio:has(#result:not([hidden])) .turnControls{visibility:hidden}
.ringStudio .result .textButton:not([hidden]){display:inline-block;min-height:28px;padding:3px;font-size:10px}
.ringStudio .result:has(.textButton:not([hidden])) .paintButton{display:inline-block;min-width:130px;width:150px;vertical-align:middle}
.hoop.is-complete,.bloomSwap .frame:has(.complete),.puzzleFrame.piece-set,.puzzleFrame:has(.cloth-reveal){animation:none!important}
.bloomSwap .completion{height:76px;min-height:76px;margin:0;animation:none}
.bloomSwap .completion[hidden]{display:block!important;visibility:hidden}
.bloomSwap main:has(.board.complete) .notice{display:block;visibility:hidden}
.bloomSwap .unifiedToolbar{display:flex!important}
.arcade #classicResult{position:absolute;bottom:0;left:0;right:0;z-index:3;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.arcade #classicResult[hidden]{display:none}
.arcade.puzzle-complete .trayHead,.arcade.puzzle-complete #tray,.arcade.puzzle-complete .playTip{visibility:hidden}
.arcade #tray>.pieceTile:first-child{margin-left:auto}.arcade #tray>.pieceTile:last-child{margin-right:auto}
.arcade #continueNext{display:none!important}
@media(max-width:600px){
 .bloomSwap main,.ringStudio>main{grid-template-columns:minmax(0,1fr)}
 .bloomSwap main>*,.ringStudio>main>*{grid-column:1}
 .ringStudio .turnControls{min-height:0;height:76px}
 .ringStudio .result:not([hidden]){grid-row:6;position:relative;height:76px;margin:0}
 .bloomSwap .completion{grid-row:5;align-self:center;justify-self:stretch}
 .arcade #classicResult{grid-row:4 / 6;grid-column:1;position:relative;inset:auto;align-self:center;height:100%;min-height:0}
 .arcade .table>.puzzleFrame,.arcade .table>.trayHead,.arcade .table>#tray{grid-column:1}
}
@media(prefers-reduced-motion:reduce){.bloomCelebration{display:none}.bloomResultEnter,.bloomTap{animation:none!important}button,a[href]{transition:none!important}.bloomPressed,.bloomTap{filter:brightness(1.2)!important}}

/* Language belongs with the rest of the settings, on every screen. */
header .bloomLang,header #language{display:none!important}
.bloomHome .homeSettings{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;background:transparent;color:#e9c888}
.homeSettings .homeGear{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:40px;background:url('classic/assets/ui/studio-props.webp') 50% 50%/300% 300% no-repeat}
.bloomHome .homeSettings{position:relative}
.homeSettingsDialog{position:fixed;inset:0;margin:auto;width:min(350px,90vw);padding:32px 24px 24px;border:1px solid #a98d60;border-radius:10px;background:#193b44;color:#fff0cf;font:16px/1.5 var(--studioFont,serif)}
.homeSettingsDialog::backdrop{background:#112a32a6}
.homeSettingsDialog h2{font-size:24px;font-weight:400;margin:0 0 22px;text-align:center}
.homeSettingsDialog .settingRow{display:flex;align-items:center;justify-content:space-between;gap:15px}
.homeSettingsDialog select{font:15px var(--studioFont,serif);padding:9px 12px;border:1px solid #b49766;border-radius:6px;background:#f3e6c9;color:#493923;min-height:44px}
.homeSettingsDialog .close{position:absolute;right:8px;top:6px;width:36px;height:36px;min-height:36px;border:0;background:none;color:#fff0cf}