/* Larger actual play surfaces on tablets and roomy desktop windows. Phones retain their layout. */
@media(min-width:700px) and (min-height:600px){
 body.roomy-play>:is(#puzzle-screen,.activity-screen):not(#home-screen):not(#family-screen){
  max-width:none;width:100%;padding:calc(var(--floating-nav-height) + 6px) 12px 12px;
 }
 body.roomy-play>:is(#puzzle-screen,.activity-screen):not(#home-screen):not(#family-screen) h1{font-size:28px;line-height:1.15;margin:0;letter-spacing:-.7px}
 body.roomy-play>.activity-screen:not(#home-screen):not(#family-screen) :is(.home-kicker,.balloon-kicker,.space-kicker,.ocean-kicker,.dino-kicker){display:none}
 body.roomy-play :is(.balloon-top,.space-top,.ocean-top,.dino-top,.pizza-heading,.coloring-heading,.peek-heading,.counting-heading,.doctor-heading,.slide-heading,.music-heading,.bh-heading,.picnic-heading,.fw-heading,.seasonal-heading,.family-game-head){min-height:44px;margin:0 0 8px;gap:10px}
 body.roomy-play :is(.balloon-message,.space-hint,.ocean-message,.dino-message,.counting-help,.slide-hint,.doctor-status){font-size:14px;line-height:1.3;margin:8px 0 0}
 body.roomy-play :is(.space-field,.ocean-game,.dino-board,.peek-meadow,.counting-field,.doctor-clinic,.slide-field,.picnic-scene,.fw-world){height:var(--play-height,calc(100dvh - 180px));min-height:0;max-height:none}
 body.roomy-play #balloon-field{height:var(--play-height,calc(100dvh - 180px));min-height:0}
 body.roomy-play .balloon-score{display:grid;grid-template-columns:auto 140px;align-items:center;gap:3px 10px;min-width:0;padding:6px 12px}
 body.roomy-play .balloon-score>span{font-size:18px}
 body.roomy-play .balloon-score .balloon-bonus{grid-column:1/-1;grid-row:2;font-size:12px;margin:0;line-height:1.2}
 body.roomy-play .balloon-progress{grid-column:2;grid-row:1;width:140px;height:12px;margin:0;padding:2px}
 body.roomy-play :is(.space-screen,.ocean-screen,.counting-screen):not([hidden]){display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:8px 14px;align-content:start;align-items:center}
 body.roomy-play :is(.space-top,.ocean-top,.counting-heading){display:contents}
 body.roomy-play :is(.space-top,.ocean-top,.counting-heading)>div:first-child{grid-column:1;grid-row:1}
 body.roomy-play :is(.space-scores,.ocean-score,.counting-count){grid-column:3;grid-row:1}
 body.roomy-play :is(.space-duration-options,.ocean-size-options,.counting-modes){grid-column:2;grid-row:1;gap:8px;margin:0;flex-wrap:nowrap;justify-content:center}
 body.roomy-play :is(.space-duration-options,.counting-modes) button{min-width:88px;min-height:48px;font-size:14px;padding:6px 10px}
 body.roomy-play .ocean-size-options button{min-width:44px;min-height:48px}
 body.roomy-play :is(.space-screen,.ocean-screen,.counting-screen)>:not(.space-top):not(.ocean-top):not(.counting-heading):not(.space-duration-options):not(.ocean-size-options):not(.counting-modes){grid-column:1/-1}
 body.roomy-play .space-timer,body.roomy-play .space-popped{min-width:74px;padding:4px 8px}
 body.roomy-play .space-timer strong,body.roomy-play .space-popped strong{font-size:24px}
 body.roomy-play .space-timer small,body.roomy-play .space-popped small{font-size:11px}
 body.roomy-play .counting-count{padding:5px 10px;min-width:78px;font-size:20px}
 body.roomy-play .counting-count strong{font-size:28px}
 body.roomy-play .counting-stage-track{height:10px;margin:1px 3px 2px}
 body.roomy-play .counting-field{--can-scale:1.16}
 body.roomy-play .counting-field .counting-slingshot{max-height:225px;max-width:190px}
 body.roomy-play .ocean-game{padding:14px 18px 18px}
 body.roomy-play .ocean-cards{max-width:none;width:100%;gap:12px}
 body.roomy-play .dino-top{align-items:center;flex-wrap:wrap}
 body.roomy-play .dino-options{gap:8px;flex-wrap:nowrap}
 body.roomy-play .dino-color-picker button{width:44px;height:48px;min-width:44px}
 body.roomy-play .dino-difficulty-label{gap:5px;font-size:12px}
 body.roomy-play .dino-difficulty{min-height:48px;max-width:165px}
 body.roomy-play .dino-guide-toggle{min-height:48px;padding:6px 10px;font-size:13px}
 body.roomy-play .peek-alphabet{margin:0 0 8px;padding:3px 7px}
 body.roomy-play .peek-alphabet span{min-height:26px}
 body.roomy-play .peek-target{padding:4px 8px;gap:8px;font-size:16px}
 body.roomy-play .peek-target strong{width:42px;min-width:42px;height:40px;font-size:30px;line-height:40px;padding:0}
 body.roomy-play .slide-progress{margin:0 3px 7px}
 body.roomy-play .slide-rider-choices{gap:8px;padding:7px;margin-bottom:8px}

 /* Keep every loose puzzle piece around a larger square; Pictures still opens the full library. */
 body.roomy-play #puzzle-screen .board-heading{min-height:48px;margin:0 0 8px;gap:12px}
 body.roomy-play #puzzle-screen .board-heading h2{font-size:24px;min-width:0}
 body.roomy-play #puzzle-screen .puzzle-table{--board-size:min(calc(100vw - 248px),calc(var(--play-height,calc(100dvh - 200px)) - 20px));height:var(--play-height,calc(100dvh - 200px));min-height:0}
 body.roomy-play #puzzle-screen .board{width:var(--board-size);max-width:none;max-height:none}
 body.roomy-play #puzzle-screen .puzzle-table[data-all-pieces=simple] .piece{width:max(44px,min(calc(var(--board-size)/var(--puzzle-cols)*.79),calc(var(--play-height)*.17),calc((100% - var(--board-size))/2 - 20px)))}
 body.roomy-play #puzzle-screen .puzzle-table[data-all-pieces=simple] .piece:nth-child(odd){left:calc((100% - var(--board-size))/4)}
 body.roomy-play #puzzle-screen .puzzle-table[data-all-pieces=simple] .piece:nth-child(even){left:calc(100% - (100% - var(--board-size))/4)}
 body.roomy-play #puzzle-screen .puzzle-table[data-all-pieces=dense] .piece:nth-child(4n+1){left:calc((100% - var(--board-size))/8)}
 body.roomy-play #puzzle-screen .puzzle-table[data-all-pieces=dense] .piece:nth-child(4n+3){left:calc((100% - var(--board-size))*3/8)}
 body.roomy-play #puzzle-screen .puzzle-table[data-all-pieces=dense] .piece:nth-child(4n+2){left:calc(100% - (100% - var(--board-size))*3/8)}
 body.roomy-play #puzzle-screen .puzzle-table[data-all-pieces=dense] .piece:nth-child(4n+4){left:calc(100% - (100% - var(--board-size))/8)}
 body.roomy-play #puzzle-screen .chooser{display:none}
 body.roomy-play #puzzle-screen .board-footer{min-height:36px}

 /* A bigger preparation board, with the ingredient/tools tray alongside it. */
 body.roomy-play #pizza-screen .pizza-heading{min-height:34px;margin-bottom:5px}
 body.roomy-play #pizza-screen .pizza-steps{gap:8px;margin:0 0 8px}
 body.roomy-play #pizza-screen .pizza-steps li{width:49px;height:44px;min-height:44px}
 body.roomy-play #pizza-screen .pizza-kitchen{height:var(--play-height,calc(100dvh - 200px));padding:12px 18px 16px;gap:18px;align-items:center;flex-direction:row}
 body.roomy-play #pizza-screen .pizza-worktop{min-width:0;align-self:center}
 body.roomy-play #pizza-screen .pizza-stage{width:min(100%,calc(var(--play-height,calc(100dvh - 200px)) - 54px));min-width:0;max-width:820px}
 body.roomy-play #pizza-screen .pizza-tools{width:160px;max-height:calc(var(--play-height,calc(100dvh - 200px)) - 30px);overflow-y:auto;padding:8px;gap:9px;flex:none}
 body.roomy-play #pizza-screen :is(.pizza-toppings,.pizza-sauce-options){grid-template-columns:repeat(2,minmax(0,1fr))}
 body.roomy-play #pizza-screen .pizza-topping-button{min-width:0;min-height:65px}
 body.roomy-play #pizza-screen .pizza-bake{font-size:18px;gap:6px;padding:6px}
 body.roomy-play #pizza-screen .pizza-bake :is(.pizza-oven-icon,.pizza-slice-icon){width:48px;height:50px}

 /* The picture itself gains the height formerly occupied by wrapped picture buttons and tray. */
 body.roomy-play #seasonal-screen .seasonal-levels{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:9px;margin:0 0 8px;padding:2px 3px 6px;overscroll-behavior-x:contain}
 body.roomy-play #seasonal-screen .seasonal-levels button{flex:none;min-width:65px;min-height:48px;height:48px;width:75px}
 body.roomy-play #seasonal-screen .seasonal-progress{margin:0 3px 7px}
 body.roomy-play #seasonal-screen .seasonal-table{display:grid;grid-template-columns:minmax(0,1fr) 224px;grid-template-rows:minmax(0,1fr);gap:12px;height:var(--play-height,calc(100dvh - 215px));padding:10px;align-items:stretch}
 body.roomy-play #seasonal-screen .seasonal-board{height:auto;aspect-ratio:auto;min-height:0;max-height:none;width:100%}
 body.roomy-play #seasonal-screen .seasonal-tray-wrap{margin:0;padding:7px;min-height:0;overflow-y:auto}
 body.roomy-play #seasonal-screen .seasonal-tray-head{display:block;padding:3px 3px 8px}
 body.roomy-play #seasonal-screen .seasonal-tray-head span{display:block;font-size:12px;line-height:1.4;margin-top:5px}
 body.roomy-play #seasonal-screen .seasonal-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0;overflow:visible;padding:3px 0 8px;align-content:start}
 body.roomy-play #seasonal-screen .seasonal-piece{min-width:0;min-height:75px;padding:3px;border-width:2px}
 body.roomy-play #seasonal-screen .seasonal-piece img{width:100%;height:50px}
 body.roomy-play #seasonal-screen .seasonal-piece span{font-size:10px;line-height:1.15}

 /* Enlarge the patient and its calibrated targets as one coordinate space. */
 body.roomy-play #doctor-screen .doctor-room{grid-template-columns:minmax(0,1fr) 160px;gap:12px}
 body.roomy-play #doctor-screen .doctor-stage{width:min(94%,calc((var(--play-height,calc(100dvh - 190px)) - 22px)*.9));margin-bottom:1%;max-height:none}
 body.roomy-play #doctor-screen .doctor-tools{gap:8px;padding:9px;min-height:0;overflow-y:auto;max-height:var(--play-height,calc(100dvh - 190px))}
 body.roomy-play #doctor-screen .doctor-tools button{min-height:82px;font-size:12px}
 body.roomy-play #doctor-screen .doctor-tools button svg{height:55px}
 body.roomy-play #doctor-screen .doctor-progress{margin-top:6px}

 /* Let the room and measured native instrument controls use the recovered area. */
 body.roomy-play #music-screen .music-picker{margin:0 0 6px;padding-bottom:5px;gap:7px}
 body.roomy-play #music-screen .music-picker button{min-height:64px;min-width:80px;padding:3px;flex:1 0 80px}
 body.roomy-play #music-screen .music-picker button strong{font-size:12px}
 body.roomy-play #music-screen #music-picker .instrument-icon{height:34px;width:54px}
 body.roomy-play #music-screen .music-meter{margin:0 3px 6px;font-size:12px}
 body.roomy-play #music-screen .music-room{height:var(--play-height,calc(100dvh - 245px));padding:52px 12px 8px}
 body.roomy-play #music-screen .music-room-label{position:absolute;left:50%;top:7px;transform:translateX(-50%);padding:3px 14px;white-space:nowrap}
 body.roomy-play #music-screen .music-room-label h2{font-size:17px;line-height:1.2;margin:0}
 body.roomy-play #music-screen .music-room-label p{font-size:12px;line-height:1.2;margin:1px 0}
 body.roomy-play #music-screen .music-instrument{height:100%;max-width:none;width:100%}
 body.roomy-play #music-screen .music-drum-kit{width:100%;max-width:none;height:100%}

 /* The sheet keeps its saved logical aspect ratio; only its display size changes. */
 body.roomy-play #coloring-screen .coloring-workspace{height:var(--play-height,calc(100dvh - 155px));min-height:0;grid-template-columns:78px minmax(0,1fr) 126px;gap:10px;padding:12px}
 body.roomy-play #coloring-screen .coloring-paper-wrap{position:relative;container-type:size;height:100%;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:20px}
 body.roomy-play #coloring-screen .coloring-paper,
 body.roomy-play #coloring-screen .coloring-paper.portrait{width:min(100cqw,calc((100cqh - 20px)*var(--sheet-ratio,4/3)));max-height:none;flex:none}
 body.roomy-play #coloring-screen .coloring-hint{position:absolute;bottom:0;font-size:12px}
 body.roomy-play #coloring-screen .coloring-side-actions{gap:12px}
 body.roomy-play #coloring-screen .coloring-tools{padding:8px 4px;gap:10px}
 body.roomy-play #coloring-screen .coloring-brushes{flex-wrap:wrap;gap:4px}

 /* Large landscape boards use a side console instead of stacking rules and buttons. */
 body.roomy-play .family-game-panel{width:100%;max-width:none;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:12px 18px;align-items:start}
 body.roomy-play :is(.tic-board,.checkers-board){grid-column:1;grid-row:1/7;width:min(100%,calc(var(--play-height,calc(100dvh - 170px)) - 26px));max-width:none;margin:auto}
 body.roomy-play .family-game-panel>:not(.tic-board):not(.checkers-board){grid-column:2;min-width:0;margin:0}
 body.roomy-play .family-modes{flex-wrap:wrap;gap:10px}
 body.roomy-play .family-modes button{flex:1;min-height:48px;padding:7px 10px;font-size:15px}
 body.roomy-play .family-game-panel .family-status{display:block;text-align:center;font-size:23px;padding:9px 12px}
 body.roomy-play .family-game-panel .family-rule{font-size:14px;line-height:1.5}
 body.roomy-play .family-game-panel .family-again{width:100%;font-size:16px;min-height:48px}

 body.roomy-play #birdhouse-screen .bh-scene{height:auto;width:min(100%,calc(var(--play-height,calc(100dvh - 150px))*5/3));aspect-ratio:5/3;max-height:none;min-height:0}
 body.roomy-play #picnic-screen .picnic-scene{aspect-ratio:auto;min-height:0;max-height:none}
 body.roomy-play #picnic-screen .picnic-footer{margin-top:9px;gap:12px}
 body.roomy-play #firefly-screen .fw-world{min-height:0}
 body.roomy-play #firefly-screen #fw-lanterns{padding:18px 12% 4px;gap:5%;align-items:flex-start}
 body.roomy-play #firefly-screen .fw-lantern{width:clamp(155px,18vw,235px);height:clamp(235px,calc(var(--play-height,600px)*.45),340px)}
 body.roomy-play #firefly-screen .fw-glass{height:calc(100% - 90px)}
 body.roomy-play #firefly-screen #fw-bugs{margin:15px 4% 15px 19%;gap:10px}
 body.roomy-play #firefly-screen .fw-firefly{height:112px}
 body.roomy-play #firefly-screen .fw-bug-body{width:44px;height:70px}
 body.roomy-play #firefly-screen .fw-captured .fw-bug-body{width:13px;height:22px}
}

@media(min-width:1000px) and (min-height:600px) and (orientation:landscape){
 body.roomy-play #music-screen:not([hidden]){display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 12px;align-content:start}
 body.roomy-play #music-screen .music-heading{grid-column:1/-1;grid-row:1;margin-bottom:0}
 body.roomy-play #music-screen .music-picker{grid-column:1;grid-row:2;flex-direction:column;height:var(--play-height,calc(100dvh - 175px));overflow-y:auto;overflow-x:hidden;margin:0;padding:2px 4px 8px;gap:10px}
 body.roomy-play #music-screen .music-picker button{flex:0 0 66px;min-width:0;width:100%}
 body.roomy-play #music-screen .music-room{grid-column:2;grid-row:2}
 body.roomy-play #music-screen .music-meter{grid-column:1/-1;grid-row:3;margin:0 4px}
}

@media(min-width:700px) and (min-height:600px) and (orientation:portrait){
 body.roomy-play .ocean-cards[data-pairs='6']{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
 body.roomy-play .ocean-cards[data-pairs='8']{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
 body.roomy-play .ocean-cards[data-pairs='10']{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr))}
 body.roomy-play #dino-screen .dino-top{display:block}
 body.roomy-play #dino-screen .dino-top>div:first-child{margin-bottom:7px}
 body.roomy-play #dino-screen .dino-options{display:flex;flex-wrap:nowrap;justify-content:space-between;width:100%}
 body.roomy-play #seasonal-screen .seasonal-table{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 240px}
 body.roomy-play #seasonal-screen .seasonal-tray-wrap{display:block;overflow:visible}
 body.roomy-play #seasonal-screen .seasonal-tray-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:7px}
 body.roomy-play #seasonal-screen .seasonal-tray-head span{margin:0;max-width:240px}
 body.roomy-play #seasonal-screen .seasonal-tray{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;min-height:0;gap:8px}
 body.roomy-play #seasonal-screen .seasonal-piece{min-height:75px}
 body.roomy-play #coloring-screen .coloring-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 76px 146px;gap:10px}
 body.roomy-play #coloring-screen .coloring-paper-wrap{grid-row:1;order:0}
 body.roomy-play #coloring-screen .coloring-side-actions{grid-row:2;order:1;flex-direction:row;justify-content:center;gap:18px}
 body.roomy-play #coloring-screen .coloring-tools{grid-row:3;order:2;display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;width:100%;padding:8px}
 body.roomy-play #coloring-screen .coloring-colors{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
 body.roomy-play #coloring-screen .coloring-color{min-height:55px;padding:3px}
 body.roomy-play #coloring-screen .coloring-color svg{height:29px}
 body.roomy-play #coloring-screen .coloring-color small{font-size:11px}
 body.roomy-play #coloring-screen .coloring-brushes{gap:8px;align-content:center}
 body.roomy-play .family-game-panel{grid-template-columns:1fr 1fr 160px;gap:10px;padding:10px}
 body.roomy-play :is(.tic-board,.checkers-board){grid-column:1/-1;grid-row:2;width:min(100%,calc(var(--play-height,calc(100dvh - 170px)) - 156px))}
 body.roomy-play .family-game-panel .family-modes,body.roomy-play .family-game-panel .family-mode-note{grid-column:1/3;grid-row:1;align-self:center}
 body.roomy-play .family-game-panel .family-status{grid-column:3;grid-row:1}
 body.roomy-play .family-game-panel .family-rule{grid-column:1/3;grid-row:3}
 body.roomy-play .family-game-panel .family-again{grid-column:3;grid-row:3;align-self:center}
 body.roomy-play .family-game-panel .checker-end-turn{grid-row:4}
 body.roomy-play .family-game-panel .family-rule{font-size:13px}
 body.roomy-play #birdhouse-screen .bh-scene{aspect-ratio:5/4;width:min(100%,calc(var(--play-height,calc(100dvh - 150px))*5/4))}
 body.roomy-play #firefly-screen #fw-bugs{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:25px}
}

@media(min-width:700px) and (min-height:600px) and (max-height:740px) and (orientation:landscape){
 body.roomy-play #seasonal-screen .seasonal-table{grid-template-columns:minmax(0,1fr) 300px}
 body.roomy-play #seasonal-screen .seasonal-tray{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.roomy-play #firefly-screen #fw-hint{margin:54px 0 4px;font-size:17px;padding:5px}
 body.roomy-play #firefly-screen #fw-lanterns{padding:12px 12% 0}
 body.roomy-play #firefly-screen .fw-lantern{height:clamp(180px,calc(var(--play-height,430px)*.43),255px)}
 body.roomy-play #firefly-screen .fw-glass{height:calc(100% - 76px)}
 body.roomy-play #firefly-screen #fw-bugs{margin:8px 4% 8px 19%;gap:8px}
 body.roomy-play #firefly-screen .fw-firefly{height:90px}
}