/* Layout density changes CSS dimensions only; the paint bitmap stays 1600 × 1200. */
:root{--available-height:800px;--card-art:clamp(100px,calc(var(--available-height) - 425px),230px)}
body{font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif}
button{min-width:56px}
.app-shell{min-height:0}
.game-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.game-nav .nav-button{white-space:normal;min-height:56px;padding:7px 10px;font-size:18px}
.game-nav .nav-button span{font-size:23px;margin-right:4px}
.answer-card img{height:var(--card-art);max-height:var(--card-art);width:100%}
.answer-cards[data-count="4"] .answer-card img{height:clamp(75px,calc((var(--available-height) - 450px)/2),155px)}
.compact-height .answer-cards[data-count="4"] .answer-card img{height:var(--card-art);max-height:var(--card-art)}
.density-compact .app-shell{padding:6px 14px 10px}
.density-compact .topbar{margin-bottom:6px}
.density-compact .brand{font-size:22px}
.density-compact .brand-mark{width:36px;height:36px;border-radius:12px;font-size:27px}
.density-compact .game-nav{margin-bottom:10px;padding:4px;border-radius:17px}
.density-compact h1{font-size:clamp(26px,3.5vw,35px);letter-spacing:-.5px}
.density-compact .intro-row{margin-bottom:4px}
.density-compact .intro-row .eyebrow{display:none}
.density-compact .level-pill{padding:4px 9px;font-size:12px}
.density-compact .word-actions{margin-bottom:7px}
.density-compact .question-hint{font-size:16px}
.density-compact .answer-cards{gap:12px}
.density-compact .answer-card{padding:8px;border-radius:21px;gap:4px}
.density-compact .word-label{font-size:clamp(18px,2.8vw,25px)}
.density-compact .feedback{min-height:36px;font-size:22px}
.density-compact .journey{height:20px}
.density-compact footer{margin-top:7px;gap:0}
.density-compact .round-card{padding:18px;margin:8px auto}
.density-compact .round-symbol{font-size:48px}
.density-compact .round-actions{margin-top:14px;gap:12px}
.density-compact .welcome-card{padding:18px;max-width:440px}
.density-compact .welcome-flower{font-size:62px;margin:4px}
.density-compact .start-overlay{min-height:360px}
.density-compact .coloring-gallery-heading,.density-compact .coloring-editor-heading,.density-compact .matching-toolbar,.density-compact .mosaic-toolbar{margin-bottom:8px;gap:8px}
.density-compact .coloring-title,.density-compact .matching-title,.density-compact .mosaic-title{font-size:27px}
.density-compact .coloring-card{min-height:138px;padding:8px;gap:5px}
.density-compact .coloring-thumbnail{height:95px}
.density-compact .coloring-grid{gap:10px}
.density-compact .coloring-palette{margin:6px 0 10px}
.density-compact .coloring-actions{margin-top:8px}
.density-compact .coloring-frame{max-width:min(640px,calc((var(--available-height) - 455px)*1.333333))}
.density-compact.compact-height .coloring-frame{max-width:min(560px,calc((var(--available-height) - 280px)*1.333333))}
.density-compact .matching-instruction{font-size:23px;margin:6px 0}
.density-compact .matching-pair-art{min-height:65px}
.density-compact .matching-pair-art img,.density-compact .matching-board[data-pairs="1"] .matching-option img{max-height:clamp(65px,calc((var(--available-height) - 540px)/2),135px)}
.density-compact .matching-option img{max-height:clamp(65px,calc((var(--available-height) - 540px)/2),115px)}
.density-compact .matching-target,.density-compact .matching-option{padding:7px}
.density-compact .matching-item-label{font-size:18px}
.density-compact .matching-tap-guide{margin:6px 0}
.density-compact .matching-status{margin:4px 0 6px;min-height:28px;font-size:21px}
.density-compact .mosaic-prompt{margin:5px 0 9px}
.density-compact .mosaic-preview{height:64px;width:90px}
.density-compact .mosaic-image-label{font-size:23px}
.density-compact .mosaic-instruction{font-size:18px}
.density-compact .mosaic-status{margin:10px 0 5px;min-height:28px;font-size:20px}
.density-compact .mosaic-workbench{gap:20px}
.density-compact .mosaic-board{max-width:min(440px,calc(var(--available-height) - 345px))}
.density-compact .mosaic-tray{max-width:360px;gap:12px}
.mosaic-slot,.mosaic-piece{min-width:56px;min-height:56px}
#display-parent-info{margin:0 auto;max-width:760px;width:100%}
#display-parent-info summary{cursor:pointer;padding:10px;min-height:44px}
#art-parent-info summary{cursor:pointer;min-height:44px;padding:10px}
#art-parent-info a{display:inline-block;min-height:56px;padding:16px}
.density-options{display:flex;justify-content:center;gap:10px;padding:8px}
.density-options button[aria-pressed="true"]{background:var(--teal);color:white}
/* Normal density keeps its extra space only when the parent viewport has room.
   The iframe grows with content, so viewport-height media queries would be wrong. */
:root:not(.density-compact) .app-shell{padding-top:clamp(6px,calc((var(--available-height) - 800px)/17),12px)}
:root:not(.density-compact) .topbar{margin-bottom:clamp(6px,calc((var(--available-height) - 700px)/15),20px)}
:root:not(.density-compact) .game-nav{padding:clamp(4px,calc((var(--available-height) - 700px)/50),6px);margin-bottom:clamp(10px,calc((var(--available-height) - 600px)/16),28px)}
:root:not(.density-compact) .matching-toolbar,:root:not(.density-compact) .coloring-editor-heading{margin-bottom:clamp(8px,calc((var(--available-height) - 700px)/20),16px)}
:root:not(.density-compact) .matching-instruction{font-size:clamp(23px,calc(23px + (var(--available-height) - 700px)/38),31px);margin:6px 0 clamp(6px,calc((var(--available-height) - 700px)/17),18px)}
:root:not(.density-compact) .matching-pair-art{min-height:65px}
:root:not(.density-compact) .matching-pair-art img,:root:not(.density-compact) .matching-option img,:root:not(.density-compact) .matching-board[data-pairs="1"] .matching-option img{max-height:clamp(65px,calc((var(--available-height) - 540px)/2),170px)}
:root:not(.density-compact) .matching-target,:root:not(.density-compact) .matching-option{padding:clamp(7px,calc((var(--available-height) - 750px)/18),14px)}
:root:not(.density-compact) .matching-item-label{font-size:clamp(18px,calc(18px + (var(--available-height) - 750px)/129),20px)}
:root:not(.density-compact) .matching-tap-guide{margin:clamp(4px,calc((var(--available-height) - 700px)/20),15px) 0}
:root:not(.density-compact) .matching-status{min-height:28px;font-size:clamp(21px,calc(21px + (var(--available-height) - 700px)/100),24px);margin:clamp(4px,calc((var(--available-height) - 700px)/22),14px) 0}
/* Leave room for tools and the 56px action row beneath the unmodified bitmap. */
.coloring-frame{max-width:min(640px,max(280px,calc((var(--available-height) - 565px)*1.333333)))}
.density-compact .coloring-frame{max-width:min(640px,max(280px,calc((var(--available-height) - 485px)*1.333333)))}
.compact-height .coloring-workspace{grid-template-columns:440px minmax(0,1fr);gap:12px;align-items:start}
.compact-height .coloring-tools{align-content:start;gap:6px}
.compact-height .coloring-palette{gap:8px;align-content:start;flex-wrap:wrap}
.density-compact.compact-height .coloring-palette{margin:0}
.compact-height .coloring-sizes{width:100%}
.compact-height .coloring-frame,.density-compact.compact-height .coloring-frame{grid-row:1 / span 2;margin:0 auto;max-width:min(520px,max(280px,calc((var(--available-height) - 370px)*1.333333)))}
.compact-height .coloring-actions{margin-top:8px}
.compact-height .coloring-status{margin-top:4px;min-height:18px}
@media(min-width:1100px){.game-nav{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:540px){.game-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.density-compact .app-shell{padding:6px}.game-nav .nav-button{font-size:17px}.repeat-button{font-size:16px;white-space:normal}.coloring-palette{flex-wrap:wrap}.coloring-color{width:56px;min-width:56px}.density-compact .coloring-frame{max-width:100%}.density-compact .mosaic-board{max-width:100%}}