/* One playable screen inside the browser's actual visible viewport. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.homeStudio,.swapStudio,.gameShell,.ringStudio{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.homeStudio img,.swapStudio img,.gameShell img,.ringStudio img,canvas{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
input,textarea,[contenteditable=true]{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
.arcade .pieceTile,.arcade .pieceTile canvas{touch-action:none}
@media(max-width:600px){
 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{height:var(--play-height,100dvh);min-height:0;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;padding-top:env(safe-area-inset-top);padding-bottom:max(4px,env(safe-area-inset-bottom));border:0;border-radius:0}
 .homeStudio:after{display:none}
 .bloomHome header,.bloomSwap .arcadeHeader,.arcade .arcadeHeader,.ringStudio>header{flex:0 0 46px;min-height:46px;padding:5px 12px 2px;gap:4px}
 .bloomHome .brand,.bloomSwap .arcadeHeader .brand,.arcade .arcadeHeader .brand,.ringStudio .brand{font-size:22px;letter-spacing:1px;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:25px;letter-spacing:0}
 .brand .mark{width:28px!important;height:28px!important;min-width:28px!important;flex-basis:28px!important}
 .bloomHome main{flex:1;min-height:0;padding:2px 14px 4px;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto auto;gap:5px}
 .homeEyebrow{font-size:10px;line-height:1.4;letter-spacing:.3px;margin:0}
 .bloomHome h1,html[lang=en] .bloomHome h1{font-size:36px;line-height:1.15;letter-spacing:2px;margin:0}
 html[lang=en] .bloomHome h1{font-size:27px;letter-spacing:0}
 .homePoem{font-size:11px;line-height:1.4;margin:0}
 .homeArt{height:min(100%,300px);width:auto;max-width:75vw;aspect-ratio:1;margin:auto;align-self:center}
 #homeCount{font-size:10px;line-height:1.4;margin:0}
 /* Entrances follow their content; extra height belongs to the framed textile. */
 .homeModes{min-height:0;display:grid;grid-template-rows:repeat(3,auto);gap:8px}
 .homeModes .modeCard{min-height:76px;padding:7px 10px;grid-template-columns:44px minmax(0,1fr) 12px;column-gap:10px}
 .homeModes .modeCard>.studioProp,.homeModes .modeCard>.ringHomeIcon{width:44px;height:44px;min-width:0}
 .homeModes .modeCard h2,html[lang=en] .homeModes .modeCard h2{font-size:22px;line-height:1.15;letter-spacing:1px;margin:0 0 3px}
 html[lang=en] .homeModes .modeCard h2{font-size:25px;letter-spacing:0}
 .homeModes .modeCard p{font-size:11px;line-height:1.35;min-height:0;margin:0}
 .homeModes .modeCard small{font-size:10px;line-height:1.3;min-height:0;margin:3px 0 0}
 .bloomHome .collectionBtn{height:40px;min-height:40px;font-size:16px;margin:1px auto 0;padding:6px 12px 10px}
 .homeNote{font-size:9px;line-height:1.35;margin:0}
 /* Classic: reserve space for the basket and five tools before sizing art. */
 .arcade.is-playing #game{flex:1;min-height:0;display:grid;grid-template-rows:22px 30px minmax(0,1fr) 56px;gap:2px}
 .arcade .gameTop{grid-row:1;min-height:0;padding:0 15px}
 .arcade .levelRibbon{grid-row:2;padding:0 10px;min-height:0;justify-content:center}
 .arcade #gameName,html[lang=en] .arcade #gameName{font-size:23px;line-height:1.2;margin:0}
 html[lang=en] .arcade #gameName{font-size:27px}
 .arcade .playLayout{grid-row:3;flex:1;min-height:0;padding:0 8px;overflow:hidden}
 .arcade .table{flex:1;min-height:0;display:grid;grid-template-rows:20px 3px minmax(0,1fr) 25px 78px;gap:2px}
 .arcade .tablebar{grid-row:1;min-height:0;padding:0 5px;font-size:11px}
 .arcade .progressTrack{grid-row:2;margin:0 9%;height:3px}
 .arcade .puzzleFrame{grid-row:3;width:auto;height:100%;max-height:calc(100vw - 16px);max-width:100%;aspect-ratio:1;min-width:0;margin:0;justify-self:center;align-self:center}
 .arcade #puzzle{height:100%;width:100%;max-height:100%}
 .arcade .trayHead{grid-row:4;min-height:0;margin:0 5px}
 .arcade .trayHead button{min-height:25px;font-size:11px}
 .arcade #tray{grid-row:5;min-height:0;height:78px;padding:6px 12px;gap:9px;overscroll-behavior:contain}
 .arcade .pieceTile{flex:0 0 60px;width:60px;height:60px;min-height:60px;touch-action:none}
 .arcade .pieceTile canvas{touch-action:none}
 .arcade .pieceTile.selected,.arcade .pieceTile.is-lifted,.arcade .pieceTile:active{transform:none!important}
 .arcade .table #continueNext{display:none!important}
 .arcade .unifiedToolbar{grid-row:4;margin:0;min-height:0;padding:0 5px}
 .unifiedToolbar>button,.arcade .unifiedToolbar>button{font-size:11px;min-height:52px;justify-content:center;padding:0}
 .unifiedToolbar>button>.prop{width:51px;height:34px}
 /* Rings: reserve the same footer space before and after completion. */
 .ringStudio>main{flex:1;min-height:0;padding:0 12px 2px;display:grid;grid-template-rows:28px 30px 26px minmax(0,1fr) 42px 76px 0 52px 16px 4px;gap:3px}
 .ringStudio .ribbon{grid-row:1;min-height:0;font-size:11px}
 .ringStudio h1{grid-row:2;font-size:24px;line-height:1.2;margin:0}
 .ringStudio .hud{grid-row:3;min-height:0;padding:0 3px;font-size:10px;gap:6px}
 .ringStudio #timer{font-size:21px;white-space:nowrap}
 .ringStudio #lockedCount{text-align:right;line-height:1.3}
 .ringStudio .hoop{grid-row:4;width:auto;height:100%;max-height:calc(100vw - 24px);max-width:100%;aspect-ratio:1;margin:0;justify-self:center;align-self:center}
 .ringStudio .ringControls{grid-row:5;margin:0;gap:6px;align-items:center}
 .ringStudio .ringControls button{width:38px;height:38px;min-height:38px}
 .ringStudio .turnControls{grid-row:6;margin:0 3px;min-height:0}
 .ringStudio .turnControls p{font-size:11px;min-height:0;line-height:1.35}
 .ringStudio .turnControls button{width:40px;height:40px;min-height:40px}
 .ringStudio .result{grid-row:6;margin:0;padding:2px 0}
 .ringStudio .result h2{font-size:23px;line-height:1.2;margin:0 0 3px}
 .ringStudio .result p{font-size:11px;line-height:1.3;margin:0 0 4px}
 .ringStudio .paintButton{height:44px;min-height:44px;font-size:17px;padding:6px 22px 10px}
 .ringStudio .textButton{padding:6px;min-height:30px;font-size:11px}
 .ringStudio .tools{grid-row:8;margin:0;min-height:0;align-items:center}
 .ringStudio .tools button{min-height:48px;font-size:11px;gap:0}
 .ringStudio .toolArt{width:48px;height:34px}
 .ringStudio .progressText{grid-row:9;font-size:10px;line-height:1.2;margin:0}
 .ringStudio .progressRail{grid-row:10;margin:auto;height:3px}
 .ringStudio:has(#result:not([hidden])) .turnControls{visibility:hidden;overflow:hidden}
 /* Swap: keep completion, Next and collection progress on the same screen. */
 .bloomSwap main{flex:1;width:100%;margin:0;min-height:0;padding:0 10px 3px;display:grid;grid-template-rows:20px 32px 25px minmax(0,1fr) 76px 0 28px 56px;gap:2px}
 .bloomSwap .level{grid-row:1;font-size:10px;line-height:1.3;margin:0;align-self:center}
 .bloomSwap h1,html[lang=en] .bloomSwap h1{grid-row:2;font-size:24px;line-height:1.2;margin:0}
 html[lang=en] .bloomSwap h1{font-size:27px}
 .bloomSwap .stats{grid-row:3;margin:0;padding:0 9px;font-size:11px}
 .bloomSwap .stats b{font-size:16px}
 .bloomSwap .frame{grid-row:4;position:relative;align-self:center;justify-self:center;width:auto;height:100%;max-height:calc(100vw - 20px);max-width:100%;aspect-ratio:var(--art-ratio,1);min-width:0;margin:0;padding:0}
 .bloomSwap .board{position:absolute;inset:12.5%;width:75%;height:75%;aspect-ratio:auto!important}
 .bloomSwap .completion{grid-row:5;margin:0;padding:1px 0}
 .bloomSwap .completion .winPanel{padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
 .bloomSwap .completion h2{font-size:23px;line-height:1.2;margin:2px 0 4px;white-space:normal}
 .bloomSwap .completion p{font-size:11px;margin:0 0 3px}
 .bloomSwap .completion .primary{height:44px;min-height:44px;font-size:19px;padding:6px 20px 10px}
 .bloomSwap .notice{grid-row:5;align-self:center;font-size:11px;line-height:1.3;min-height:0;height:auto;margin:0}
 .bloomSwap .dots{grid-row:7;align-self:center;margin:0 auto;min-height:0}
 .bloomSwap .unifiedToolbar{grid-row:8;margin:0}
 dialog{max-height:calc(var(--play-height,100dvh) - 24px)}
 @media(max-height:590px){
  .homeArt{max-height:72px}.bloomHome h1{font-size:26px}.homePoem{font-size:10px}.homeModes .modeCard h2{font-size:20px}.homeModes .modeCard p{font-size:10px}.homeModes .modeCard small{font-size:9px}
  .ringStudio>main{grid-template-rows:25px 27px 24px minmax(0,1fr) 38px 76px 0 48px 14px 3px;gap:2px}
 }
}
@media(max-width:600px) and (max-height:480px){body.bloomHome,body.bloomSwap,body.ringPage,body.arcade.is-playing{height:auto;min-height:480px;overflow-y:auto}.homeStudio,.swapStudio,.ringStudio,.arcade.is-playing .gameShell{height:480px;min-height:480px}}