/* Main menu: native console icons, then a character with room to breathe. */
/* The home screen owns scrolling; its outer page stays within the viewport. */
.pixel-app[data-home="true"]{height:100svh;height:100dvh;min-height:0;overflow:hidden}
.pixel-app[data-home="true"]>.app-shell{height:100%;min-height:0}
#home-screen{padding-block:72px 24px;min-height:0;overscroll-behavior:contain}
#home-screen .menu-options{--home-controls-width:720px;width:min(100%,820px);gap:16px}
#home-screen .home-brand{margin:0 0 26px;column-gap:20px}
#home-screen .brand-wordmark{font-size:80px;margin:0}
#home-screen .home-brand>img{width:76px}
#home-screen .language-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,var(--home-controls-width));justify-self:center;gap:12px}
#home-screen .language-option:last-child{grid-column:auto}
#home-screen .language-option>span{min-height:72px;padding:4px;border:0;background:transparent;box-shadow:none}
#home-screen .language-option img{display:block;width:48px;height:auto;aspect-ratio:3/2;max-width:100%;object-fit:contain;image-rendering:pixelated;transition:transform .16s ease}
#home-screen .language-option:hover>span{background:transparent}
#home-screen .language-option:hover img{transform:scale(1.12)}
#home-screen .language-option input:checked+span{background:transparent;border:0;box-shadow:none}
#home-screen .language-option input:checked+span img{transform:scale(1.5)}
#home-screen .language-option input:focus-visible+span{outline-offset:3px}
#home-screen .console-options{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,var(--home-controls-width));justify-self:center;gap:20px}
#home-screen .console-card{min-height:116px;min-width:0;padding:10px;gap:0;align-items:center;justify-content:center;background:var(--surface);border:2px solid var(--edge);box-shadow:4px 4px 0 var(--shadow);color:var(--ink);transition:transform .15s,color .15s}
#home-screen .console-card>svg{width:min(100%,156px);height:auto;aspect-ratio:3/2}
#home-screen .console-card:hover{color:var(--accent);background:var(--raised);border-color:var(--accent);transform:translateY(-2px)}
#home-screen .console-card:hover::before{content:none}
#home-screen .console-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
#home-screen .console-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#home-screen .home-study-links{display:flex;justify-content:center;justify-self:center;width:min(100%,var(--home-controls-width))}
#home-screen .vocabulary-test{width:100%;min-height:56px;font-size:28px}
#home-screen .pixelpotes-link{width:min(100%,320px);min-height:52px;font-size:26px}
#home-screen .home-pixelpote{display:grid;justify-items:center;gap:2px;min-width:0}
#home-screen .home-pixelpote-stage{position:relative;display:grid;place-items:center;width:100%;min-width:0}
#home-screen .home-pixelpote-character{display:block;width:min(100%,480px);height:auto;aspect-ratio:1;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation}
#home-screen .home-pixelpote-character canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
#home-screen .home-pixelpote-character:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}
#home-screen .home-pixelpote-character:active:not(:disabled){transform:translateY(2px)}
#home-screen .home-pixelpote-bubble{position:absolute;z-index:2;bottom:calc(100% - var(--pp-head-top,7.4%) + 16px);left:50%;transform:translateX(-50%);width:440px;max-width:calc(100% - 8px);margin:0;font-size:26px;line-height:1.25;text-align:center;pointer-events:none;overflow-wrap:anywhere}
#home-screen .home-pixelpote-bubble::after{left:calc(50% - 5px);bottom:-8px}
#home-screen .home-pixelpote-status{position:absolute;max-width:260px;margin:0;text-align:center;color:var(--muted);font-size:18px;pointer-events:none}
#home-screen .pixelpotes-link{display:flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;color:var(--accent);border-color:var(--edge-light)}
#home-screen .trial-test-tools:has([hidden]):not(:has(button:not([hidden]))){display:none}
#home-screen .home-legal{margin-top:4px}
@media(max-width:760px){
 #home-screen{padding:72px 16px 22px}
 #home-screen .menu-options{gap:12px}
 #home-screen .home-brand{margin-bottom:24px;column-gap:12px}
 #home-screen .brand-wordmark{font-size:clamp(36px,calc(20vw - 25.6px),64px)}
 #home-screen .home-brand>img{width:52px}
 #home-screen .language-options{gap:8px}
 #home-screen .language-option>span{min-height:60px;padding:4px 2px}
 #home-screen .language-option img{width:clamp(30px,10vw,44px)}
 #home-screen .console-options{gap:12px}
 #home-screen .console-card{min-height:88px;padding:6px}
 #home-screen .console-card>svg{width:min(100%,132px)}
 #home-screen .home-pixelpote-character{width:min(100%,420px)}
 #home-screen .home-pixelpote-bubble{font-size:24px}
}
@media(max-height:520px) and (orientation:landscape){
 #home-screen{padding-top:54px}
 #home-screen .menu-options{gap:10px}
 #home-screen .home-brand{margin:0 0 18px}
 #home-screen .brand-wordmark{font-size:48px}
 #home-screen .home-brand>img{width:48px}
 #home-screen .home-pixelpote-character{width:min(100%,360px)}
}
@media(prefers-reduced-motion:reduce){#home-screen .console-card,#home-screen .language-option img{transition:none}}