@font-face{font-family:'Menu Baloo';src:url('../cards/fonts/baloo-2.ttf') format('truetype');font-weight:400 800;font-display:swap}
.app-screen.main-menu-screen,.app-screen.menu-settings-screen{padding:0;overflow:hidden;background:#102a27;font-family:'Menu Baloo','Trebuchet MS',sans-serif;color:#fff0cc;isolation:isolate}
.menu-scene{position:absolute;inset:0;z-index:-2;background:url('../assets/limestone-v4.png') center/cover no-repeat;animation:menu-scene-enter 240ms var(--ui-ease) both}
.menu-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b292000 42%,#0a25253b 62%,#061b2696 100%),linear-gradient(0deg,#061b20c4,transparent 16%,transparent 90%,#10291a50)}
.menu-brand{position:absolute;left:5.2%;top:10%;width:54%;filter:drop-shadow(0 4px 8px #0b23197a)}
.menu-eyebrow{margin:0 0 8px;color:#ffedbb;font:800 clamp(9px,1vw,13px)/1.2 'Trebuchet MS',sans-serif;letter-spacing:3.5px;text-shadow:0 2px 5px #132b24}
.app-screen .menu-wordmark{display:flex;align-items:center;gap:.02em;margin:0;width:max-content;max-width:100%;font:800 clamp(42px,7.3vw,120px)/.95 'Menu Baloo',sans-serif;letter-spacing:-.055em;color:#ffd66a;-webkit-text-stroke:1px #f7b855;text-shadow:0 2px 0 #fff0a3,0 5px 0 #92502a,0 8px 0 #362015,0 11px 16px #14241b9c}
.menu-wordmark i{font-style:normal;font-size:.8em;color:#fff0ab;line-height:.8;transform:translateY(-.07em);padding:0 .03em}
.menu-tagline{margin:18px 0 0 4px;display:flex;align-items:center;gap:12px;color:#fff0cd;font:900 clamp(10px,1.14vw,15px)/1.2 'Trebuchet MS',sans-serif;letter-spacing:3px;text-shadow:0 2px 4px #10291b}
.menu-tagline::before{content:'';width:28px;height:2px;background:#ffd378;box-shadow:0 1px #674429}
.menu-actions{position:absolute;right:6%;top:50%;transform:translateY(-46%);width:32%;max-width:410px;display:grid;gap:16px;z-index:1}
.menu-actions__label{margin:0 0 0 12px;font:800 10px 'Trebuchet MS',sans-serif;letter-spacing:3px;color:#eddfb5;text-shadow:0 2px #082522}
.app-screen .menu-action{--menu-icon-hole:#ad7134;position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:91px;padding:14px 20px 14px 16px;cursor:pointer;border:3px solid #75451f;border-top-color:#d19a4c;border-radius:16px;background:linear-gradient(175deg,#ffdf90,#e7b85c 58%,#d99d42);color:#49301a;box-shadow:inset 0 2px #fff2b9,0 6px 0 #613a22,0 9px 0 #153025,0 14px 22px #021b1f80;text-align:left;transition:transform 160ms var(--ui-ease),filter 160ms var(--ui-ease);outline-offset:6px}
.menu-action::after{content:'';position:absolute;inset:5px;border:1px solid #fff0b04f;border-radius:10px;pointer-events:none}
.app-screen .menu-action--multiplayer{--menu-icon-hole:#2a6e65;background:linear-gradient(175deg,#3d9686,#256c62 70%,#21554e);color:#fff0c8;border-color:#102f2e;border-top-color:#77b49b;box-shadow:inset 0 2px #79ba9a,0 6px 0 #102c29,0 9px 0 #0c2327,0 14px 22px #021b1f80}
.app-screen .menu-action--settings{--menu-icon-hole:#3e4e49;background:linear-gradient(175deg,#56645a,#384d47);color:#ece1bf;border-color:#1a322e;border-top-color:#8a9780;box-shadow:inset 0 2px #94a28666,0 6px 0 #182d29,0 9px 0 #0c2327,0 14px 22px #021b1f80;min-height:76px}
.menu-action__icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;filter:drop-shadow(0 2px #17362b20)}
.menu-action__icon svg{width:41px;height:41px}
.menu-action__copy{display:flex;flex:1;flex-direction:column;gap:4px}
.menu-action__copy strong{font:800 clamp(21px,2.5vw,32px)/1.1 'Menu Baloo',sans-serif;white-space:nowrap;letter-spacing:-.5px}
.menu-action__copy small{font:800 8px/1.2 'Trebuchet MS',sans-serif;letter-spacing:2px;opacity:.8}
.menu-action__arrow{font:800 34px/1 'Menu Baloo',sans-serif;opacity:.7;padding-left:5px}
.menu-footer{position:absolute;left:5.2%;right:6%;bottom:4.2%;display:flex;align-items:center;justify-content:space-between;font:900 10px 'Trebuchet MS',sans-serif;letter-spacing:2px;color:#fff1c1;text-shadow:0 2px #163028}
.menu-footer>span:first-child{border-left:3px solid #eeb753;padding-left:10px}
.menu-footer__hint{font-size:8px;letter-spacing:2px;opacity:.8}
.main-menu-screen>.screen-status{position:absolute;bottom:0;left:0;right:0;margin:0;text-align:center;font-size:10px;pointer-events:none}
.menu-motes{position:absolute;inset:0;overflow:hidden}.menu-motes i{position:absolute;width:4px;height:4px;background:#ffdc7a;border-radius:50%;box-shadow:0 0 10px #ffdc7a;opacity:0;animation:menu-mote 9s ease-in-out infinite}.menu-motes i:nth-child(1){left:8%;top:59%;animation-delay:-1s}.menu-motes i:nth-child(2){left:21%;top:79%;animation-delay:-4s}.menu-motes i:nth-child(3){left:44%;top:46%;animation-delay:-2s}.menu-motes i:nth-child(4){left:37%;top:87%;animation-delay:-6s}.menu-motes i:nth-child(5){left:52%;top:64%;animation-delay:-7s}.menu-motes i:nth-child(6){left:15%;top:39%;animation-delay:-3s}.menu-motes i:nth-child(7){left:65%;top:84%;animation-delay:-5s}
@keyframes menu-mote{0%,100%{opacity:0;transform:translate(0,0)}30%,65%{opacity:.65}90%{opacity:0;transform:translate(10px,-60px)}}@keyframes menu-scene-enter{from{opacity:.5;transform:scale(1)}to{opacity:1;transform:scale(1)}}
@media(hover:hover)and(pointer:fine){.app-screen .menu-action:hover{transform:translateX(-5px);filter:brightness(1.1)}}.app-screen .menu-action:active{transform:translateY(3px)}.app-screen .menu-action:focus-visible{outline:3px solid #ffefad}
.menu-settings-screen .menu-scene::after{background:#061f24c4;backdrop-filter:blur(5px)}
.menu-settings{width:min(800px,90vw);height:100%;max-height:100%;margin:auto;display:flex;flex-direction:column;justify-content:center;padding:28px 0;gap:20px}
.menu-settings__header{position:relative;padding-right:120px}.app-screen .menu-settings__header h1{font:800 52px/1 'Menu Baloo',sans-serif;margin:0;color:#ffe4a3}.menu-back{position:absolute;right:0;top:18px;min-height:42px;padding:9px 13px;border:1px solid #bfa66c;border-radius:9px;background:#183b31;color:#ffebbe;cursor:pointer}
.menu-settings__controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.menu-setting{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:94px;padding:18px;background:linear-gradient(135deg,#315342ed,#18372eeb);border:1px solid #bfa66c88;border-radius:13px;color:#fff0c9;text-align:left;cursor:pointer;box-shadow:0 4px #0b211c}.menu-setting strong{display:block;font:800 24px/1.2 'Menu Baloo',sans-serif}.menu-setting small{display:block;font:11px/1.4 'Trebuchet MS',sans-serif;color:#bccdb8;margin-top:4px}.menu-setting__value{flex-shrink:0;min-width:54px;padding:7px 10px;border:1px solid #b9a46c;border-radius:8px;background:#153328;color:#f6d58c;text-align:center;font:800 12px 'Trebuchet MS',sans-serif}.menu-setting[aria-pressed=true] .menu-setting__value{background:#e7c27a;color:#293723}.menu-settings__links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.menu-settings__links button,.menu-settings__links a{padding:8px 12px;min-height:36px;border:1px solid #708c6b77;border-radius:7px;background:#17382c;color:#dddbb7;font:11px 'Trebuchet MS',sans-serif;text-decoration:none;cursor:pointer}.menu-settings-screen>.screen-status{position:absolute;bottom:3px;left:4%;right:4%;text-align:center;font-size:11px;margin:0}
@media(max-height:500px){.menu-brand{top:11%;left:4.4%;width:54%}.menu-eyebrow{font-size:8px;letter-spacing:2.5px;margin-bottom:6px}.app-screen .menu-wordmark{font-size:clamp(38px,7.4vw,76px);text-shadow:0 1px #fff0a3,0 4px #92502a,0 6px #362015,0 9px 14px #14241b9c}.menu-tagline{font-size:9px;margin-top:12px;letter-spacing:2px;gap:8px}.menu-actions{right:4.2%;width:34%;gap:12px;transform:translateY(-45%)}.menu-actions__label{font-size:8px;letter-spacing:2px;margin-left:8px}.app-screen .menu-action{min-height:66px;padding:10px 12px;gap:10px;border-radius:12px;border-width:2px}.app-screen .menu-action--settings{min-height:58px}.menu-action__icon{width:34px;height:34px}.menu-action__icon svg{width:31px;height:31px}.menu-action__copy strong{font-size:23px}.menu-action__copy small{font-size:7px;letter-spacing:1.4px}.menu-action__arrow{font-size:27px}.menu-footer{bottom:4%;font-size:8px}.menu-footer__hint{font-size:6px;letter-spacing:1.4px}.menu-settings{width:min(760px,91vw);gap:12px;padding:14px 0}.menu-settings__header .menu-eyebrow{display:none}.app-screen .menu-settings__header h1{font-size:34px}.menu-back{top:0;min-height:35px;padding:7px 12px;font-size:11px}.menu-settings__controls{gap:9px}.menu-setting{min-height:74px;padding:12px}.menu-setting strong{font-size:19px}.menu-setting small{font-size:9px}.menu-setting__value{min-width:46px;font-size:10px;padding:7px}.menu-settings__links{gap:6px}.menu-settings__links button,.menu-settings__links a{font-size:9px;min-height:30px;padding:6px 8px}}
@media(max-width:650px)and(orientation:landscape){.menu-brand{left:3.8%;top:14%}.menu-eyebrow{font-size:6px;letter-spacing:1.8px}.app-screen .menu-wordmark{font-size:7.5vw}.menu-tagline{font-size:7px;letter-spacing:1.2px;margin-top:10px}.menu-actions{width:35%;right:3.8%;gap:10px}.app-screen .menu-action{min-height:58px;padding:8px;gap:6px}.app-screen .menu-action--settings{min-height:52px}.menu-action__icon{width:27px;height:27px}.menu-action__icon svg{width:27px;height:27px}.menu-action__copy strong{font-size:18px;letter-spacing:-.3px}.menu-action__copy small{font-size:5.5px;letter-spacing:1px}.menu-actions__label{font-size:6px;letter-spacing:1.5px}.menu-action__arrow{font-size:22px;padding:0}.menu-footer{font-size:6px}.menu-footer__hint{font-size:5px}.menu-settings{gap:9px;width:92vw}.menu-setting{min-height:62px;padding:9px}.menu-setting strong{font-size:17px}.menu-setting small{font-size:8px}.menu-setting__value{padding:6px;min-width:40px;font-size:9px}}
@media(orientation:portrait){.menu-scene{background-position:34% center}.menu-brand{width:90%;left:5%;top:10%}.app-screen .menu-wordmark{font-size:12vw}.menu-actions{width:78%;max-width:360px;right:11%;top:55%;gap:15px}.menu-action__copy strong{font-size:26px}.menu-footer__hint{display:none}.menu-settings{width:90vw;overflow:auto;justify-content:start;padding-top:28px}.menu-settings__controls{grid-template-columns:1fr}.menu-settings__header{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.menu-scene,.menu-motes i{animation:none}.menu-action{transition:none}}.menu-reduced .menu-scene,.menu-reduced .menu-motes i{animation:none}

/* Compact landscape controls retain proper touch areas and remain scrollable with a keyboard. */
.app-screen.main-menu-screen,.app-screen.menu-settings-screen { padding:0; }
.menu-brand { left:max(5.2%,env(safe-area-inset-left)); }
.menu-actions { right:max(6%,env(safe-area-inset-right)); }
.menu-footer { left:max(5.2%,env(safe-area-inset-left)); right:max(6%,env(safe-area-inset-right)); bottom:max(4.2%,env(safe-area-inset-bottom)); }
.menu-settings-screen .menu-settings { box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; justify-content:safe center; padding: max(16px,env(safe-area-inset-top)) 4px max(20px,env(safe-area-inset-bottom)); }
.menu-settings__controls,.menu-settings__header,.menu-settings__links { flex-shrink:0; }
.menu-settings__links :is(a,button),.menu-back { min-height:44px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; }
.menu-setting small { font-size:12px; line-height:1.4; }
.menu-setting__value { font-size:12px; }
.menu-settings__header { min-height:44px; }
.menu-setting:focus-visible { outline:3px solid #fff0b7; outline-offset:4px; }
@media(max-height:500px) { .menu-settings { gap:10px; } .menu-setting { padding:10px 12px; } .menu-setting small { font-size:11px; } .menu-settings__links { gap:6px; } .menu-actions { right:max(4.2%,env(safe-area-inset-right)); } }
@media(max-height:340px) { .menu-settings-screen .menu-settings { justify-content:flex-start; } .menu-actions__label,.menu-footer__hint { display:none; } }