/* Keep the existing artwork and all cards; only the board scrolls in play. */
html{height:100%;overflow:hidden}
body[data-kd-game="memory"]{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) max(54px,env(safe-area-inset-bottom)) env(safe-area-inset-left)}
body[data-kd-game="memory"] .topbar{flex:none;width:100%;padding-top:8px}
body[data-kd-game="memory"]>main{flex:1;min-height:0;display:flex;flex-direction:column}
body[data-kd-game="memory"] .chapter{flex:none;margin:12px auto}
body[data-kd-game="memory"] .play-area{flex:1;min-height:0;width:100%;align-items:start}
body[data-kd-game="memory"] .game-panel{height:100%;min-height:0;display:flex;flex-direction:column}
body[data-kd-game="memory"] .game-top,body[data-kd-game="memory"] .progress{flex:none}
body[data-kd-game="memory"] .board{width:100%;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-content:start;grid-auto-rows:max-content;align-items:start;scrollbar-gutter:stable;padding:5px 6px 9px}
body[data-kd-game="memory"] .card{min-height:72px;max-height:180px}
body[data-kd-game="memory"] .board-footer{flex:none;min-height:44px;margin-top:8px}
body[data-kd-game="memory"] .journey{flex:none;width:min(880px,calc(100% - 24px));padding:8px 12px;margin:10px auto 0}
body[data-kd-game="memory"] .journey>div{margin:6px 0}
body[data-kd-game="memory"] .companion{max-height:100%;position:static;padding-bottom:0;margin-top:0}
body[data-kd-game="memory"] .companion img{max-height:180px;width:100%;margin-top:10px}
body[data-kd-game="memory"] dialog{overflow:auto;overscroll-behavior:contain}

@media(max-height:900px){
 body[data-kd-game="memory"] .journey{display:none}
 body[data-kd-game="memory"] .chapter{margin:7px auto}
 body[data-kd-game="memory"] .chapter h1{font-size:clamp(22px,3vw,34px);margin:4px 0}
 body[data-kd-game="memory"] .difficulty-badge{margin-bottom:6px}
 body[data-kd-game="memory"] .game-panel{padding:12px}
 body[data-kd-game="memory"] .progress{margin:8px 0}
}
@media(max-width:680px),(max-height:700px){
 body[data-kd-game="memory"] .topbar{padding-top:4px;gap:6px}
 body[data-kd-game="memory"] .topbar .kd-brand>.kd-logo{width:100px}
 body[data-kd-game="memory"] .play-area{display:block}
 body[data-kd-game="memory"] .companion{display:none}
 body[data-kd-game="memory"] .chapter{margin:3px auto 6px}
 body[data-kd-game="memory"] .chapter h1{font-size:20px;margin:0 0 3px}
 body[data-kd-game="memory"] .game-panel{padding:8px}
}
@media(max-height:460px){
 body[data-kd-game="memory"]{padding-bottom:max(48px,env(safe-area-inset-bottom))}
 body[data-kd-game="memory"] .topbar{padding-top:0}
 body[data-kd-game="memory"]>main{padding-top:0}
 body[data-kd-game="memory"] .chapter,body[data-kd-game="memory"].memory-playing .chapter{margin:2px auto 4px}
 body[data-kd-game="memory"] .chapter h1{font-size:16px;line-height:1.1;margin:0 0 2px}
 body[data-kd-game="memory"] .chapter p{font-size:12px;line-height:1.15}
 body[data-kd-game="memory"] .game-panel{padding:6px 10px;border-radius:15px}
 body[data-kd-game="memory"] .level-pill{padding:4px 7px}
 body[data-kd-game="memory"] .progress{margin:5px 0;height:3px}
 body[data-kd-game="memory"] .board{padding-top:3px;padding-bottom:8px;gap:8px}
 body[data-kd-game="memory"] .card{max-height:76px}
 body[data-kd-game="memory"] .board-footer{flex-wrap:nowrap;margin-top:3px;gap:8px}
 body[data-kd-game="memory"] #feedback{order:0;flex:1;width:auto;min-height:0}
 body[data-kd-game="memory"] .board-footer .text-button{flex:none}
}

/* Very short windows and large text need a scrollable fallback, not clipped controls. */
@media(min-width:500px) and (min-height:320px) and (max-height:460px){
 body[data-kd-game="memory"] .topbar{position:absolute;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));width:152px;padding:0;flex-direction:column;gap:8px}
 body[data-kd-game="memory"] .toolbar{gap:4px}
 body[data-kd-game="memory"] #levelsButton{width:56px;min-width:56px;padding:0 2px;font-size:11px}
 body[data-kd-game="memory"] .chapter{position:absolute;top:94px;left:max(8px,env(safe-area-inset-left));width:146px;padding:0;margin:0}
 body[data-kd-game="memory"] .chapter h1{font-size:16px;margin-bottom:6px}
 body[data-kd-game="memory"] .chapter p{font-size:13px;line-height:1.25}
 body[data-kd-game="memory"] .play-area{padding:6px 8px 0 164px}
 body[data-kd-game="memory"] .game-panel{padding:6px}
 body[data-kd-game="memory"] .card{min-height:72px;max-height:72px}
 body[data-kd-game="memory"] .board-footer .text-button{font-size:11px;gap:3px;padding-inline:2px}
 body[data-kd-game="memory"] #feedback{font-size:11px}
}

@media(max-height:319px){
 html{overflow:auto}
 body[data-kd-game="memory"]{height:auto;min-height:100dvh;overflow:visible}
 body[data-kd-game="memory"]>main,body[data-kd-game="memory"] .play-area{flex:none}
 body[data-kd-game="memory"] .game-panel{height:auto}
 body[data-kd-game="memory"] .board{flex:none;max-height:220px}
}

/* A save warning is a decision screen: let all its actions remain reachable. */
html.memory-save-warning{overflow:auto}
html.memory-save-warning body[data-kd-game="memory"]{height:auto;min-height:100dvh;overflow:visible}
html.memory-save-warning body[data-kd-game="memory"]>main,html.memory-save-warning body[data-kd-game="memory"] .play-area{flex:none}
html.memory-save-warning body[data-kd-game="memory"] .game-panel{height:auto}
html.memory-save-warning body[data-kd-game="memory"] .board{flex:none;max-height:260px}

/* Keep the existing language switch clear of the age selector. */
body[data-kd-game="memory"]>.kd-language-switch{left:max(8px,env(safe-area-inset-left));right:auto;}