/* Menu sizing is independent of the board HUD and uses the remaining viewport height. */
#home-screen{padding-top:env(safe-area-inset-top);padding-bottom:max(8px,env(safe-area-inset-bottom))}
#home-screen .game-top{flex:0 0 56px}
#home-screen .home-content{width:min(1000px,100%);max-height:820px;flex:1 1 0;min-height:0;padding:12px 3px;gap:clamp(6px,1.2dvh,13px);overflow:visible;justify-content:center}
#home-screen .home-content> :not(.mode-grid){flex-shrink:0}
#home-screen .home-title h1{font-size:clamp(24px,4.5dvh,42px);line-height:1.22;margin:8px 0;letter-spacing:-.8px}
#home-screen .home-title p{font-size:11px;line-height:1.5;margin:6px 0 0}
#home-screen .home-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:stretch;gap:12px;width:min(650px,100%)}
#home-screen .variant-switch{width:100%;justify-content:center;align-items:stretch;padding:4px;gap:4px}
#home-screen .variant-switch button{flex:1;padding:8px 6px;font-size:12px;white-space:nowrap}
#home-screen .home-learning-modes{width:100%;gap:8px}
#home-screen .home-learning-modes button{padding:9px 6px;gap:4px}
#home-screen .home-learning-modes strong{font-size:12px;line-height:1.3}
#home-screen .home-learning-modes small{font-size:9px;line-height:1.3}
#home-screen .play-title{margin:0}
#home-screen .mode-grid{flex:1 1 0;min-height:0;max-height:270px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:16px;width:100%}
#home-screen .mode-card{min-width:0;min-height:0;padding:14px 9px;gap:5px;justify-content:center}
#home-screen .mode-art{font-size:clamp(34px,6.5dvh,64px);height:1em;line-height:1;margin:0;flex-shrink:0}
#home-screen .custom-card .mode-art{font-size:clamp(30px,5.5dvh,54px)}
#home-screen .mode-stars{font-size:10px;min-height:0;line-height:1.4}
#home-screen .mode-card strong{font-size:clamp(18px,2.7dvh,24px);line-height:1.2;margin:0}
#home-screen .mode-card small{font-size:10px;line-height:1.4}
#home-screen .mode-pool{font-size:9px;line-height:1.3;margin-top:5px;padding:5px 9px;max-width:100%}
#home-screen .variant-library{font-size:10px;line-height:1.5;gap:4px 10px;max-width:100%;padding:0 2px}
#home-screen .home-bottom{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 18px;width:100%}
#home-screen .resume-button{position:static;min-height:34px;margin:0;padding:7px 13px;font-size:11px;line-height:1.4}
#home-screen .home-settings-note{margin:0;flex-wrap:wrap;gap:4px 8px;font-size:10px;line-height:1.5}
#home-screen .home-settings-note button{font-size:10px;padding:3px 0;line-height:1.4}
#home-screen .home-footer{flex:0 0 24px;font-size:9px;line-height:1.4;margin:0 auto}
@media(max-width:720px) and (orientation:portrait){
 #home-screen .game-top{flex-basis:48px}
 #home-screen .home-content{max-height:900px;padding:8px 2px;gap:clamp(6px,1.2dvh,10px)}
 #home-screen .home-title h1{font-size:clamp(22px,3.3dvh,29px);margin:5px 0;line-height:1.23}
 #home-screen .home-eyebrow{font-size:8px;letter-spacing:2px}
 #home-screen .home-title p{font-size:10px;max-width:340px;line-height:1.5}
 #home-screen .home-options{grid-template-columns:1fr;gap:7px;width:min(420px,100%)}
 #home-screen .variant-switch{width:min(280px,100%);justify-self:center;padding:3px}
 #home-screen .variant-switch button{font-size:12px;padding:6px}
 #home-screen .home-learning-modes button{padding:8px 5px;gap:3px}
 #home-screen .home-learning-modes strong{font-size:11px}
 #home-screen .home-learning-modes small{font-size:9px}
 #home-screen .play-title{display:none}
 #home-screen .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));max-width:420px;max-height:360px;gap:10px}
 #home-screen .mode-card{padding:10px 6px;gap:4px;border-radius:14px}
 #home-screen .mode-art{font-size:clamp(25px,4dvh,38px)}
 #home-screen .custom-card .mode-art{font-size:clamp(23px,3.6dvh,34px)}
 #home-screen .mode-stars{font-size:9px;line-height:1.2}
 #home-screen .mode-card strong{font-size:18px}
 #home-screen .mode-card small{font-size:9px}
 #home-screen .mode-pool{font-size:8px;margin-top:2px;padding:4px 8px}
 #home-screen .variant-library{font-size:9px;line-height:1.4;max-width:420px}
 #home-screen .home-bottom{gap:6px;flex-direction:column}
 #home-screen .home-settings-note,#home-screen .home-settings-note button{font-size:9px}
 #home-screen .resume-button{font-size:10px;min-height:31px;padding:6px 11px}
 #home-screen .home-footer{flex-basis:20px;font-size:8px;justify-content:center}
}
@media(min-width:721px) and (max-height:760px){
 #home-screen .game-top{flex-basis:46px}
 #home-screen .home-content{padding:7px 3px;gap:8px}
 #home-screen .home-title h1{font-size:30px;margin:5px 0;line-height:1.16}
 #home-screen .home-title p{font-size:10px;margin-top:4px}
 #home-screen .play-title{display:none}
 #home-screen .mode-card{padding:10px 8px;gap:4px}
 #home-screen .mode-art{font-size:42px}
 #home-screen .custom-card .mode-art{font-size:36px}
 #home-screen .mode-card strong{font-size:20px}
 #home-screen .mode-pool{margin-top:3px;padding:4px 8px}
}
@media(max-width:720px) and (orientation:portrait) and (max-height:740px){
 #home-screen .home-title p,#home-screen .home-eyebrow,#home-screen .mode-stars{display:none}
 #home-screen .home-title h1{font-size:23px;line-height:1.18;margin:2px 0}
 #home-screen .home-content{gap:6px;padding:5px 2px}
 #home-screen .mode-card{padding:8px 6px;gap:3px}
 #home-screen .mode-art{font-size:25px}
 #home-screen .custom-card .mode-art{font-size:23px}
 #home-screen .mode-card strong{font-size:17px}
}
@media(max-width:720px) and (orientation:portrait) and (max-height:540px){
 #home-screen .game-top{flex-basis:39px}
 #home-screen .home-content{gap:5px;padding:4px 2px}
 #home-screen .home-title h1{font-size:19px;line-height:1.1}
 #home-screen .home-options{gap:5px}
 #home-screen .variant-switch button{font-size:11px;padding:5px}
 #home-screen .home-learning-modes button{padding:6px 5px;gap:2px}
 #home-screen .home-learning-modes strong{font-size:10px}
 #home-screen .home-learning-modes small{font-size:8px}
 #home-screen .mode-grid{gap:8px}
 #home-screen .mode-art{display:none}
 #home-screen .mode-card{padding:7px 5px;gap:3px}
 #home-screen .mode-card strong{font-size:16px}
 #home-screen .mode-card small{font-size:9px}
 #home-screen .mode-pool{font-size:8px;padding:3px 6px}
 #home-screen .variant-library{font-size:8px;line-height:1.3}
 #home-screen .home-bottom{gap:3px}
 #home-screen .resume-button{min-height:28px;font-size:10px;padding:5px 10px}
 #home-screen .home-footer{flex-basis:16px;font-size:7px}
}
@media(orientation:landscape) and (max-height:600px){
 #home-screen .game-top{flex-basis:36px}
 #home-screen .home-content{max-width:920px;gap:5px;padding:4px 3px}
 #home-screen .home-title h1{font-size:23px;line-height:1.15;margin:0}
 #home-screen .home-title h1 br,#home-screen .home-title p,#home-screen .home-eyebrow,#home-screen .play-title{display:none}
 #home-screen .home-options{max-width:650px;gap:8px}
 #home-screen .variant-switch{padding:3px}
 #home-screen .variant-switch button{font-size:11px;padding:5px}
 #home-screen .home-learning-modes button{padding:5px;gap:2px}
 #home-screen .home-learning-modes strong{font-size:10px}
 #home-screen .home-learning-modes small{font-size:8px}
 #home-screen .mode-grid{max-width:780px;max-height:190px;gap:10px}
 #home-screen .mode-card{padding:8px 5px;gap:3px;border-radius:12px}
 #home-screen .mode-art{font-size:32px}
 #home-screen .custom-card .mode-art{font-size:28px}
 #home-screen .mode-stars{font-size:8px}
 #home-screen .mode-card strong{font-size:17px}
 #home-screen .mode-card small{font-size:9px}
 #home-screen .mode-pool{font-size:8px;margin-top:2px;padding:3px 7px}
 #home-screen .variant-library{font-size:8px}
 #home-screen .home-bottom{gap:5px 12px}
 #home-screen .resume-button{font-size:9px;min-height:28px;padding:5px 9px}
 #home-screen .home-settings-note,#home-screen .home-settings-note button{font-size:9px}
 #home-screen .home-footer{flex-basis:16px;font-size:7px}
}
@media(orientation:landscape) and (max-height:360px){
 #home-screen .game-top{flex-basis:32px}
 #home-screen .home-content{gap:4px;padding:3px}
 #home-screen .home-title h1{font-size:18px}
 #home-screen .mode-art,#home-screen .mode-stars{display:none}
 #home-screen .mode-card strong{font-size:16px}
 #home-screen .mode-card{padding:6px 4px}
 #home-screen .home-footer{flex-basis:13px;font-size:6px}
}