/* First-fold layout only. Copy, translations and game behavior are unchanged. */
body:has(main>.hero)>.header{height:64px}
body:has(main>.hero)>.header .header-inner{padding-block:0}
main>.hero{padding-block:20px 24px;gap:clamp(28px,4vw,60px)}
main>.hero .eyebrow{margin-bottom:16px}
main>.hero .hero-copy{margin-block:20px;font-size:18px;line-height:1.5}
main>.hero .free-note{margin-top:12px}
main>.hero .store-row{margin-top:18px}
main>.hero .demo-label{margin-bottom:8px;font-size:11px;line-height:1.4}
main>.hero .demo{padding:16px}
main>.hero .demo-head{margin-bottom:10px}
main>.hero .demo-head h2{font-size:17px;line-height:1.3}
main>.hero .demo-head span{font-size:10px;line-height:1.4;padding:3px 6px}
main>.hero .sides{margin-bottom:10px}
main>.hero .side{min-height:40px;padding:7px 9px;line-height:1.3}
main>.hero .score-labels{margin-bottom:5px;line-height:1.3}
main>.hero .score-labels strong{font-size:20px;line-height:1.2}
main>.hero .score-track{height:8px}
main>.hero .half-marker{height:14px}
main>.hero .score-key{font-size:11px;margin-top:6px;margin-bottom:9px;line-height:1.35;gap:12px}
main>.hero .score-key>span:last-child{white-space:nowrap}
main>.hero .grid{gap:6px}
main>.hero .demo-message{margin-top:10px;min-height:0;font-size:14px;line-height:1.4}
main>.hero .demo-bottom{padding-top:6px;margin-top:8px;gap:10px;line-height:1.35}
main>.hero .reset{min-height:36px;padding:6px 0 6px 8px;flex-shrink:0}
main>.hero .demo-footnote{margin-top:8px;line-height:1.35}
@media(min-width:761px){
 main>.hero{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
 main>.hero #hero-title{font-size:clamp(2.5rem,4.7vw,4rem)}
 main>.hero .hero-content{padding-block:8px}
 main>.hero .hero-copy{max-width:490px}
}
@media(min-width:761px) and (max-height:800px){
 main>.hero{padding-block:14px 16px}
 main>.hero #hero-title{font-size:clamp(2.3rem,4.2vw,3.6rem)}
 main>.hero .eyebrow{margin-bottom:12px}
 main>.hero .hero-copy{font-size:17px;line-height:1.45;margin-block:16px}
 main>.hero .hero-actions{gap:16px}
 main>.hero .hero-actions .btn{min-height:46px;padding:10px 20px}
 main>.hero .free-note{margin-top:10px}
 main>.hero .store-row{margin-top:14px;gap:10px}
 main>.hero .release-badge{min-width:135px;padding:7px 12px}
}
@media(max-width:760px){
 main>.hero{padding-block:24px 28px;gap:24px}
 main>.hero .hero-copy{font-size:17px;line-height:1.5;margin-block:18px}
 main>.hero .demo-shell{max-width:390px}
 body:has(main>.hero)>.header{height:auto;min-height:64px}
 body:has(main>.hero)>.header .header-inner{min-height:64px;padding-block:8px}
}
@media(max-width:380px){main>.hero .demo{padding:14px}main>.hero .score-key{font-size:10px;gap:6px}main>.hero .demo-bottom{flex-wrap:wrap;gap:3px}main>.hero .reset{padding-left:0}}
@media(min-width:761px){
 main>.hero .demo-shell{max-width:420px}
 main>.hero .board-frame{width:clamp(250px,calc(100svh - 480px),386px);max-width:100%;margin-inline:auto}
}
@media(min-width:761px) and (max-height:800px){
 main>.hero .demo-victory{padding:12px}
 main>.hero .victory-card{padding:14px 10px}
 main>.hero .victory-card h3{font-size:28px;line-height:1.05;letter-spacing:-.5px;margin:8px 0}
 main>.hero .victory-eyebrow{font-size:10px;letter-spacing:1.5px}
 main>.hero .victory-card p{font-size:13px}
 main>.hero .victory-score{margin-top:8px;font-size:11px}
}

/* Header and demo share columns and panel width, keeping their right edges aligned. */
body:has(main>.hero)>.header .header-inner{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:clamp(28px,4vw,60px);row-gap:0}
body:has(main>.hero)>.header .brand{grid-column:1;grid-row:1;justify-self:start;margin:0}
body:has(main>.hero)>.header .nav{grid-column:1/-1;grid-row:1;justify-self:center}
body:has(main>.hero)>.header .nav-actions{grid-column:2;grid-row:1;justify-self:center;width:min(100%,420px);justify-content:flex-end;margin:0;gap:10px}
.js body:has(main>.hero)>.header .theme{display:grid;flex-shrink:0}
@media(max-width:760px){
 body:has(main>.hero)>.header .header-inner{grid-template-columns:minmax(0,1fr);column-gap:0}
 body:has(main>.hero)>.header .nav-actions{grid-column:1;width:min(100%,390px)}
}
@media(min-width:761px) and (max-width:1200px){
 body:has(main>.hero)>.header .language-name{display:none}
 body:has(main>.hero)>.header .language-short{display:inline}
}