/* Artwork has a dedicated cell, separate from controls and result footers. */
.artViewport{display:grid;place-items:center;min-width:0;min-height:0;width:100%;height:100%}
.homeArtViewport{grid-row:4;grid-column:1}
.classicViewport{grid-row:3;grid-column:1}
.ringViewport,.swapViewport{grid-row:4;grid-column:1}
.swapSide{display:contents}
.homeArtViewport>.homeArt,.classicViewport>.puzzleFrame,.ringViewport>.hoop,.swapViewport>.frame{width:var(--art-width,0px)!important;height:var(--art-height,0px)!important;max-width:none!important;max-height:none!important;min-height:0;margin:0!important;aspect-ratio:auto!important;justify-self:center;align-self:center}
@media(min-width:601px){
 body.bloomHome,body.bloomSwap,body.ringPage,body.arcade.is-playing{height:var(--play-height,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
 .homeStudio,.swapStudio,.ringStudio,.arcade.is-playing .gameShell{width:min(100%,1120px);height:var(--play-height,100dvh);min-height:0;margin:0 auto;padding:0 0 6px;display:flex;flex-direction:column;overflow:hidden;border:0;border-radius:0}
 .homeStudio:after{display:none}
 .bloomHome header,.bloomSwap .arcadeHeader,.arcade .arcadeHeader,.ringStudio>header{flex:0 0 56px;min-height:56px;padding:7px 20px;gap:7px}
 .bloomHome .brand,.bloomSwap .arcadeHeader .brand,.arcade .arcadeHeader .brand,.ringStudio .brand{font-size:27px;line-height:1.2}
 html[lang=en] .bloomHome .brand,html[lang=en] .bloomSwap .arcadeHeader .brand,html[lang=en] .arcade .arcadeHeader .brand,html[lang=en] .ringStudio .brand{font-size:30px}
 .bloomHome main{flex:1;min-height:0;padding:8px 28px 10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);grid-template-rows:18px 48px 25px minmax(0,1fr) 20px 44px;gap:6px 30px}
 .bloomHome .homeEyebrow{grid-column:1;grid-row:1;margin:0;font-size:11px;line-height:18px}
 .bloomHome h1,html[lang=en] .bloomHome h1{grid-column:1;grid-row:2;margin:0;font-size:38px;line-height:48px;letter-spacing:2px}
 html[lang=en] .bloomHome h1{font-size:31px;letter-spacing:0}
 .homePoem{grid-column:1;grid-row:3;margin:0;font-size:13px;line-height:22px}
 #homeCount{grid-column:1;grid-row:5;margin:0;font-size:12px;line-height:20px}
 .homeModes{grid-column:2;grid-row:1/6;display:grid;grid-template-rows:repeat(3,minmax(78px,100px));gap:12px;align-content:center;min-height:0}
 .homeModes .modeCard{min-height:0;padding:12px;grid-template-columns:52px minmax(0,1fr) 12px;column-gap:12px}
 .homeModes .modeCard>.studioProp,.homeModes .modeCard>.ringHomeIcon{width:52px;height:52px}
 .homeModes .modeCard h2{font-size:26px;line-height:1.2;margin:0 0 5px}
 html[lang=en] .homeModes .modeCard h2{font-size:26px}
 .homeModes .modeCard p{font-size:12px;min-height:0;line-height:1.35;margin:0}
 .homeModes .modeCard small{font-size:11px;min-height:0;line-height:1.35;margin:4px 0 0}
 .bloomHome .collectionBtn{grid-column:2;grid-row:6;min-height:44px;height:44px;width:90%;margin:0 auto;padding:8px 14px 12px;font-size:18px}
 .homeNote{grid-column:1;grid-row:6;align-self:center;font-size:11px;line-height:1.4;margin:0}
 /* Classic: board and a vertically browsable basket remain visible together. */
 .arcade.is-playing #game{flex:1;min-height:0;display:grid;grid-template-rows:24px 34px minmax(0,1fr) 58px;gap:3px;padding:0 14px}
 .arcade .gameTop{grid-row:1;min-height:0;padding:0 7px}
 .arcade .levelRibbon{grid-row:2;min-height:0;padding:0;justify-content:center}
 .arcade #gameName,html[lang=en] .arcade #gameName{font-size:27px;line-height:1.2;margin:0}
 .arcade .playLayout{grid-row:3;min-height:0;margin:0;padding:0 3px;overflow:hidden}
 .arcade .table{height:100%;min-height:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,30%);grid-template-rows:22px 3px minmax(0,1fr);gap:5px 20px}
 .arcade .tablebar{grid-row:1;grid-column:1;min-height:0;font-size:12px;padding:0 12px}
 .arcade .progressTrack{grid-row:2;grid-column:1;height:3px;margin:0 10%}
 .arcade .classicViewport{grid-row:3;grid-column:1}
 .arcade #puzzle{width:100%;height:100%;max-height:none;max-width:none}
 .arcade .trayHead{grid-row:1/3;grid-column:2;min-height:0;margin:0;gap:6px;white-space:nowrap}
 .arcade .trayHead>span{font-size:13px;letter-spacing:0}.arcade .trayHead small{font-size:10px;margin-left:4px}
 .arcade .trayHead button{font-size:12px;min-height:25px}
 .arcade #tray{grid-row:3;grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:10px;padding:12px;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;scroll-snap-type:none}
 .arcade #tray>.pieceTile{width:100%;height:auto;min-height:0;aspect-ratio:1;flex:none;margin:0}
 .arcade #classicResult{grid-row:1/4;grid-column:2;position:relative;inset:auto;align-self:center;height:100%;min-height:0}
 .arcade .playTip{display:none}
 .arcade .unifiedToolbar{grid-row:4;margin:0 auto;min-height:0;max-width:580px;padding:0}
 .unifiedToolbar>button,.arcade .unifiedToolbar>button{min-height:54px;padding:0;justify-content:center;font-size:12px}
 .unifiedToolbar>button>.prop{width:55px;height:36px}
 /* Swap: reserve the same board footer through play, completion and the next level. */
 .bloomSwap main{flex:1;min-height:0;width:100%;padding:0 24px 8px;display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:22px 36px 28px minmax(0,1fr) 58px;gap:4px 24px}
 .bloomSwap .level{grid-row:1;grid-column:1/-1;min-height:0;font-size:12px;margin:0;line-height:22px}
 .bloomSwap h1,html[lang=en] .bloomSwap h1{grid-row:2;grid-column:1/-1;font-size:27px;line-height:1.2;margin:0}
 .bloomSwap .stats{grid-row:3;grid-column:1/-1;min-height:0;font-size:12px;width:100%;max-width:none;margin:0;padding:0 20px}
 .bloomSwap .swapViewport{grid-row:4;grid-column:1}
 .bloomSwap .frame{position:relative;min-width:0;padding:0;border:0;background:none;box-shadow:none}
 .bloomSwap .board{position:absolute;inset:12.5%;width:75%;height:75%;aspect-ratio:auto!important}
 .bloomSwap .swapSide{grid-row:4;grid-column:2;display:grid;grid-template-rows:minmax(0,1fr) 22px;gap:8px;align-content:stretch;min-height:0}
 .bloomSwap .completion,.bloomSwap .notice{grid-row:1;grid-column:1;align-self:center;width:100%;margin:0;min-height:0;padding:0;font-size:13px}
 .bloomSwap .notice{height:auto;line-height:1.5}
 .bloomSwap .dots{grid-row:2;grid-column:1;width:90%;margin:0 auto;align-self:center}
 .bloomSwap .unifiedToolbar{grid-row:5;grid-column:1;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:stretch;justify-self:center;width:100%;max-width:none;height:58px;margin:0;padding:0}
 .bloomSwap .unifiedToolbar>button{height:58px;min-height:54px;font-size:12px}
 /* Rings: unchanged canvas size when the result appears. */
 .ringStudio>main{flex:1;min-height:0;padding:0 22px 8px;display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:30px 36px 28px minmax(0,1fr);gap:4px 24px}
 .ringStudio .ribbon{grid-row:1;grid-column:1/-1;min-height:0;font-size:12px}
 .ringStudio h1{grid-row:2;grid-column:1/-1;font-size:27px;line-height:1.2;margin:0}
 .ringStudio .hud{grid-row:3;grid-column:1/-1;min-height:0;padding:0 12px;font-size:12px}
 .ringStudio #timer{font-size:24px}
 .ringStudio .ringViewport{grid-row:4;grid-column:1}
 .ringStudio .ringControls{grid-row:4;grid-column:2;align-self:start;margin:18px 0 0;justify-content:center;gap:10px;height:40px}
 .ringStudio .turnControls,.ringStudio .result:not([hidden]){grid-row:4;grid-column:2;align-self:center;position:relative;inset:auto;margin:0;height:90px;min-height:0}
 .ringStudio .turnControls p{font-size:12px;line-height:1.5;margin:0;min-height:0}
 .ringStudio .result .paintButton{max-width:100%}
 .ringStudio .tools{grid-row:4;grid-column:2;align-self:end;margin:0 0 28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;height:58px}
 .ringStudio .tools button{width:auto;min-height:54px;justify-content:center;font-size:12px;line-height:1.3;gap:1px;color:#ffedce;text-shadow:0 2px 3px #392515}.ringStudio .toolArt{width:55px;height:36px}
 .ringStudio .progressText{grid-row:4;grid-column:2;align-self:end;font-size:11px;line-height:18px;margin:0 0 5px}
 .ringStudio .progressRail{grid-row:4;grid-column:2;align-self:end;height:3px;width:80%;margin:0 auto}
 dialog{max-height:calc(var(--play-height,100dvh) - 24px)}
}
@media(min-width:601px) and (max-height:540px){.homeModes .modeCard h2{font-size:23px}.homeModes{grid-template-rows:repeat(3,minmax(72px,88px))}.bloomHome main{grid-template-rows:16px 42px 20px minmax(0,1fr) 18px 40px;gap:4px 24px}.bloomHome h1,html[lang=en] .bloomHome h1{font-size:31px;line-height:42px}.bloomHome .collectionBtn{height:40px;min-height:40px}.ringStudio .tools{margin-bottom:24px}.ringStudio .ringControls{margin-top:8px}}
/* Reference zoom changes the inspection image, never the board or hit targets. */
.homeActions{display:contents}
@media(min-width:601px){
 /* The collection action follows the aligned entrances rather than the window bottom. */
 .homeActions{grid-column:2;grid-row:4;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:100% 64px;row-gap:12px;align-self:center;height:calc(var(--home-art-side,360px)*.901);position:relative;top:calc(var(--home-art-side,360px)*-.0104)}
 .homeActions .homeModes{grid-column:1;grid-row:1;align-self:stretch;height:100%;top:0}
 .bloomHome .homeActions #homeCollection{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:center;align-self:start;width:100%;height:64px;min-height:64px;margin:0;padding:0 24px 2px;font-size:21px;background-size:100% 155%;background-position:center 42.8%}
 /* Free Play uses the same landscape studio width as the main game. */
 body.arcade:not(.is-playing){height:var(--play-height,100dvh);overflow:hidden}
 .arcade:not(.is-playing) .gameShell{width:min(1120px,100%);height:var(--play-height,100dvh);min-height:0;display:flex;flex-direction:column;margin:0 auto;padding:0 0 10px;overflow:hidden;border:0;border-radius:0}
 .arcade #gallery.pbCabinet{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0 20px 16px;display:flex;flex-direction:column;overflow:hidden}
 .arcade #gallery .collectionHeader{flex:none;padding:16px 4px 8px;min-height:76px}
 .arcade #gallery .albumIntro{flex:none;padding:0 8px;margin:8px 0;font-size:13px}
 .arcade #gallery .collection{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
 .arcade #gallery .sectionhead{flex:none;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 10px;padding:0 8px}
 .arcade #gallery #count{font-size:13px;white-space:nowrap}
 .arcade #gallery #cards{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-color:#ba965c #372619;margin:0}
 .pbCabinet.pbCollection{width:min(1120px,96vw);max-width:1120px}
}
@media(max-width:600px){
 .bloomHome .homeActions #homeCollection{display:flex;align-items:center;justify-content:center;height:52px;min-height:52px;width:100%;margin:0;padding:0 24px 2px;background-size:100% 155%;background-position:center 42.8%;font-size:18px}
}
@media(max-width:600px) and (max-height:560px){
 .bloomHome .homeEyebrow,.bloomHome .homePoem,.bloomHome .homeNote{display:none}
 .bloomHome main{grid-template-rows:auto minmax(64px,1fr) auto auto 52px;gap:4px}
 .bloomHome .homeArtViewport{grid-row:auto}
 .bloomHome h1,html[lang=en] .bloomHome h1{font-size:25px}
}
@media(min-width:601px) and (max-height:650px){
 .arcade #gallery .collectionHeader{min-height:60px;padding:8px 4px 4px}
 .arcade #gallery .albumIntro{margin:4px 0;font-size:12px;line-height:1.4}
 .arcade #gallery .sectionhead{margin:4px 0 6px;gap:8px}
 .arcade #gallery .filters button{min-height:32px;padding:4px 8px}
}
.arcade #imageModal{padding:44px 12px 12px;width:min(840px,94vw);max-width:94vw}
.referenceTools{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 10px}
.referenceTools button{min-height:40px;min-width:44px;padding:7px 12px;font:15px var(--studioFont,serif)}
#referenceViewport{height:calc(var(--play-height,100dvh) - 150px);max-height:600px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;background:#17364233;border-radius:5px}
.arcade #referenceViewport #largeImage{display:block;margin:0 auto;height:auto!important;max-height:none!important;max-width:none!important;object-fit:contain;touch-action:pan-x pan-y}
.arcade #trayFilter{padding:2px 7px;border:1px solid #bda46f;border-radius:5px;flex:none}
.arcade #trayFilter[aria-pressed=true]{background:#234c55;color:#ffe9b7;border-color:#e6c481}
.arcade .trayHead{gap:6px}.arcade .trayHead>span{flex:1;min-width:0}
.arcade .trayHead small{letter-spacing:0}
@media(max-width:600px){.arcade .trayHead>span{font-size:13px;letter-spacing:0}.arcade .trayHead small{font-size:10px;margin-left:4px}.arcade .trayHead #trayFilter{min-height:25px;font-size:11px}}
@media(min-width:601px){.arcade #tray{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));grid-auto-rows:76px}.arcade #tray>.pieceTile{width:64px;height:64px;min-height:64px;margin:auto!important;aspect-ratio:1}}
.firstMoveGuide{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);width:max-content;max-width:82%;display:flex;align-items:center;gap:8px;padding:8px 10px;background:#173c47f2;color:#fff0c4;border:1px solid #d5ad64;border-radius:7px;box-shadow:0 3px 12px #0005;font:13px/1.4 var(--studioFont,serif);z-index:8;text-align:left;pointer-events:none}
.firstMoveGuide button{pointer-events:auto;flex:none;border:0;background:transparent;color:inherit;min-width:30px;min-height:30px;padding:0;font-size:22px}
.bootRetry{position:fixed;inset:0;display:grid;place-items:center;background:#173c47dd;z-index:100}.bootRetry button{padding:14px 26px;border:1px solid #d5ad64;border-radius:8px;background:#fff0c4;color:#173c47}
@media(max-width:600px){
 .bloomSwap main{grid-template-columns:minmax(0,1fr)}
 .bloomSwap main>*:not(.swapSide),.bloomSwap .swapSide>*{grid-column:1}
 .bloomSwap h1,html[lang=en] .bloomSwap h1,.arcade #gameName,html[lang=en] .arcade #gameName,.ringStudio h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:22px}
}

/* Share one artwork row so the visible wooden frame and entrances line up. */
@media(min-width:601px){
 .homeModes{grid-row:4;align-self:center;height:calc(var(--home-art-side,360px)*.901);position:relative;top:calc(var(--home-art-side,360px)*-.0104);grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;align-content:stretch}
 .homeModes .modeCard{min-height:0}
}
@media(min-width:601px) and (max-height:540px){
 .homeModes{gap:8px}
 .homeModes .modeCard{padding:4px 8px;grid-template-columns:36px minmax(0,1fr) 10px;column-gap:8px}
 .homeModes .modeCard>.studioProp,.homeModes .modeCard>.ringHomeIcon{width:36px;height:36px}
 .homeModes .modeCard h2,html[lang=en] .homeModes .modeCard h2{font-size:18px;margin-bottom:2px}
 .homeModes .modeCard p{font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .homeModes .modeCard small{font-size:9px;line-height:1.2;margin-top:2px}
}

.bloomSwap #menuDialog #swapJourney{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:18px;padding:8px 14px;border:1px solid #b89556;border-radius:8px;background:#214753;color:#fff0cf;font:17px/1.3 var(--studioFont,serif)}
.bloomSwap #menuDialog #swapJourney .prop{width:42px;height:30px}