/* The same pixel table becomes a quiet landing screen before a match exists. */
#mainMenu[hidden],#gameScreen[hidden],#lessonScene[hidden]{display:none}
#mainMenu{min-height:calc(100dvh - 44px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:80px;align-items:center;max-width:1060px;margin:auto;padding:35px 30px}
.menu-brand{text-align:center;position:relative}
.menu-brand .menu-kicker{font-size:16px;letter-spacing:7px;color:#c3cdb0;margin:0 0 15px}
.menu-brand h1{font-size:64px;letter-spacing:10px;line-height:1.3;color:#f3dda4;text-shadow:4px 5px #183d31,6px 7px #668260}
#menuArt{position:relative;height:220px;max-width:420px;margin:22px auto 0;isolation:isolate}
#menuArt:before{content:'';position:absolute;bottom:10px;left:18%;right:18%;height:24px;border:3px solid #9aad7866;background:#153c2f;border-radius:50%;box-shadow:0 9px #163a2d}
#menuArt .pixel-art{width:100%;height:100%}
.menu-amu{position:absolute;bottom:20px;width:160px;height:160px;left:calc(50% - 80px);filter:drop-shadow(6px 6px #102f2788)}
.menu-spirit{position:absolute;top:0;width:100px;height:100px;opacity:.8;filter:drop-shadow(4px 6px #112f28)}
.menu-spirit.water{left:15px;transform:rotate(-9deg)}
.menu-spirit.fire{right:15px;transform:rotate(9deg)}
.menu-panel{padding:26px;background:#163c31e8;border:3px solid #82996f;box-shadow:6px 8px #0e2c25,inset 0 0 0 3px #244d3f}
.menu-speaker{display:inline-block;color:#294c36;background:#dec880;padding:3px 10px;font-size:14px;font-weight:800;box-shadow:3px 3px #0d2d25}
#menuGreeting{font-size:18px;line-height:1.7;margin:16px 0 24px;color:#e8e0bc}
.menu-buttons{display:flex;flex-direction:column;gap:14px}
.menu-buttons button{min-height:54px;font-size:21px;letter-spacing:2px}
.menu-buttons button[hidden]{display:none}
#menuLearn{background:#cab16b;color:#283f31;text-shadow:none;box-shadow:0 5px #776239,inset 0 2px #f4dfa2}
.menu-utilities{display:flex;justify-content:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px dashed #7e956c}
.menu-utilities button{font-size:14px;padding:8px 13px}
@media(max-width:999px){
 #mainMenu{min-height:calc(100dvh - 24px);grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);gap:32px;max-width:850px;padding:10px 26px}
 .menu-brand h1{font-size:46px;letter-spacing:6px}.menu-brand .menu-kicker{font-size:13px;margin-bottom:8px;letter-spacing:4px}
 #menuArt{height:160px;margin-top:12px;max-width:320px}.menu-amu{width:120px;height:120px;left:calc(50% - 60px)}.menu-spirit{width:76px;height:76px}
 .menu-panel{padding:16px}#menuGreeting{font-size:16px;line-height:1.5;margin:10px 0 15px}
 .menu-buttons{gap:10px}.menu-buttons button{font-size:18px;min-height:39px;padding:6px 12px}
 .menu-utilities{margin-top:15px;padding-top:12px}.menu-utilities button{padding:6px 11px;font-size:13px}
}
@media(max-height:360px){#mainMenu{padding:4px 16px;gap:22px}.menu-panel{padding:10px}#menuGreeting{margin:7px 0 10px}.menu-utilities{margin-top:10px;padding-top:8px}.menu-brand h1{font-size:38px}#menuArt{height:125px}.menu-amu{height:100px;width:100px;left:calc(50% - 50px)}}