/* Picture-first learning layout. Source pictures stay complete and contained. */
#app .main,#app .activity,#app .session-options{min-width:0}
#app .activity{width:100%;gap:12px;padding:clamp(16px,2.5vw,28px)}
#app .activity .picture{border-radius:8px;flex-shrink:0}
#app .picture canvas{display:block;max-width:100%;object-fit:contain}
#app .activity>.picture{width:100%;max-width:880px;height:clamp(280px,45svh,480px)}
#app .activity .word{font-size:clamp(23px,2.7vw,34px);line-height:1.2;max-width:950px;margin:0}
#app .activity .definition{font-size:18px;line-height:1.45;max-width:820px}
#app .activity .sentence{font-size:16px;line-height:1.4;max-width:820px}
#app .activity .reading{font-size:clamp(23px,3vw,36px);line-height:1.3;max-width:880px;margin:0}
#app .activity .discussion,#app .activity .paper-prompt{font-size:18px;line-height:1.45;max-width:820px}

/* Meet the Words: the picture leads, followed by concise text and navigation. */
#app .vocab-view>.picture{height:clamp(300px,49svh,520px)}
#app .vocab-view>.picture[data-picture-shape=landscape]{height:clamp(220px,36svh,380px)}
#app .vocab-navigation{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch;width:min(100%,720px);margin-top:8px}
#app .vocab-navigation>*{min-width:0;min-height:48px;margin:0;white-space:normal}
#app .vocab-navigation>:disabled{color:#596653;background:#eceee6;box-shadow:none}

/* Category and activity menus retain visible pictures at tablet sizes. */
#app .category .picture{height:128px;margin:0}
#app .mode-card .picture{height:152px;margin:0}
#app .category-grid{align-items:stretch}
#app .category-grid>.category{grid-column:auto;min-width:0}
#app .category-grid>.category:first-child{grid-column:1/-1}
#app .category-grid .category{gap:8px}

/* Recognition and sorting: no thumbnail-sized answer images on phones. */
#app[data-mode=identify] .target-picture .picture{height:clamp(260px,40svh,420px);max-width:880px}
#app[data-mode=identify] .answer .picture{width:100%;height:clamp(180px,23vw,260px)}
#app[data-mode=identify] .answer{padding:12px;gap:10px;font-size:16px;flex-direction:column}
#app[data-mode=identify] .answer-grid:not(.text-only){grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#app .category-answers{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#app .category-answers .answer{min-height:52px;font-size:17px}
#app .mystery-stage{width:min(100%,900px);max-width:900px}
#app .detective-controls{max-width:900px;gap:10px;flex-wrap:wrap}

/* A larger matching board may scroll vertically instead of crushing 60 cards. */
#app[data-mode=flip] .flip-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:1180px;gap:12px}
#app[data-mode=flip] .flip-tile{aspect-ratio:auto;min-height:216px;padding:10px;gap:8px;justify-content:center}
#app[data-mode=flip] .flip-tile .picture{height:160px;width:100%;flex:none}
#app[data-mode=flip] .flip-tile strong{font-size:14px;line-height:1.25}

/* Fewer wheel markers, then a full-size selected picture and definition. */
#app[data-mode=wheel] .wheel-stage{width:min(80svh,680px,100%);margin:8px auto}
#app[data-mode=wheel] .wheel-marker{width:30%}
#app[data-mode=wheel] .wheel-marker .picture{height:auto;aspect-ratio:1;border-radius:10px;background:var(--paper)}
#app[data-mode=wheel] .wheel-reading{width:100%;gap:12px;min-height:0}
#app[data-mode=wheel] .wheel-reading>.picture{width:100%;max-width:880px;height:clamp(280px,46svh,480px)}

/* Give spelling clues real space alongside the existing bakery animation. */
#app .spelling-scene-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);max-width:1100px;gap:22px}
#app .spelling-clue{flex-direction:column;gap:12px;min-width:0}
#app .word-workshop .spelling-clue .picture{width:100%;height:clamp(220px,30svh,320px);flex:0 0 auto}
#app .spelling-clue .definition{font-size:17px;text-align:center}

/* Shopping rows scroll independently; products and money remain contained. */
#app .shop-product>.picture{height:250px}
#app .shop-denomination-row .money-real-art.money-note{width:240px;min-height:178px}
#app .shop-denomination-row .money-real-art.money-portrait{width:180px;min-height:270px}
#app .shop-denomination-row .money-real-art.money-coin{width:150px;min-height:178px}
#app .shop-denomination-row .money-illustration{height:130px}
#app .shop-denomination-row .money-portrait .money-illustration{height:220px}
#app .shop-denomination-row .money-coin .money-illustration{height:130px}
#app .shop-customer .money-illustration{height:120px}

@media(max-width:800px){
 #app[data-mode=identify] .answer-grid:not(.text-only){grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .category-answers{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .category .picture{height:112px}
 #app .mode-card .picture{height:128px}
}
@media(max-width:700px){
 #app .main{padding:12px 12px 28px}
 #app .toolbar{flex-wrap:wrap;row-gap:8px}
 #app .activity{padding:16px;gap:12px}
 #app .activity>.picture,#app .vocab-view>.picture{height:clamp(280px,44svh,400px)}
 #app .vocab-view>.picture[data-picture-shape=landscape]{height:clamp(190px,30svh,280px)}
 #app .activity .definition{font-size:17px}
 #app .activity .sentence{font-size:15px}
 #app .vocab-navigation{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 #app .vocab-navigation>*{font-size:14px;padding:10px 6px}
 #app[data-mode=identify] .target-picture .picture{height:250px}
 #app[data-mode=identify] .answer-grid:not(.text-only){grid-template-columns:1fr}
 #app[data-mode=identify] .answer .picture{height:220px;width:100%;flex:auto}
 #app[data-mode=identify] .answer{flex-direction:column;min-height:0}
 #app[data-mode=flip] .flip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #app[data-mode=flip] .flip-tile{min-height:200px;padding:8px}
 #app[data-mode=flip] .flip-tile .picture{height:150px}
 #app .spelling-scene-row{grid-template-columns:1fr;max-width:520px;gap:16px}
 #app .word-workshop .spelling-clue .picture{width:100%;height:240px;flex-basis:auto}
 #app .spelling-clue .definition{font-size:16px;max-width:420px}
 #app .shop-product>.picture{height:220px}
 #app .category .picture{height:104px}
}