/* Title screen only. Existing world controls and profile storage keep their IDs. */
#menu{isolation:isolate;display:flex;align-items:flex-end;justify-content:center;gap:0;padding:40px clamp(24px,5vw,88px);background:#244d48;backdrop-filter:none;overflow-y:auto}
#menu:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#102f2800 42%,#153c3640 62%,#102e2bd9 100%),linear-gradient(180deg,#122c2222,transparent 48%,#153c3333)}
#menu .cover-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:40% 55%;image-rendering:pixelated;pointer-events:none;user-select:none}
#menu .title{display:block;position:absolute;top:clamp(26px,6vh,70px);left:clamp(24px,5vw,88px);max-width:58%;margin:0;text-align:left}
#menu .title .eyebrow{display:block;color:#fff1c7;letter-spacing:3px;font-size:10px;margin-bottom:12px;text-shadow:1px 2px #324f43}
#menu .title h1{transform:none;font-family:ui-monospace,"Courier New",monospace;font-size:clamp(34px,4.9vw,74px);line-height:.98;letter-spacing:-3px;color:#fff0b8;text-shadow:3px 0 #31544c,-3px 0 #31544c,0 -3px #31544c,0 3px #31544c,3px 6px #203d36,5px 8px #203d3680}
#menu .title br{display:block}
#menu .cover-names{display:block;margin-bottom:14px;font-size:.43em;line-height:1.2;letter-spacing:1px;color:#fff7df;text-shadow:2px 2px #31544c}
#menu .cover-names em{font-style:normal;color:#f3c56f}
#menu .cover-game-name{display:block;text-transform:uppercase}
#menu .edition{display:block;margin-top:18px;font-size:12px;letter-spacing:1px;color:#fff3ce;text-shadow:1px 2px #31544c}
#menu .menu-box{position:relative;width:340px;max-width:38vw;max-height:calc(100dvh - 80px);margin:0;padding:26px 24px 24px;overflow-y:auto;text-align:left;background:#153f39ed;border:3px solid #e2c690;box-shadow:5px 5px 0 #112f2ba6,inset 0 0 0 3px #35594a}
#menu .profile-top{display:flex;align-items:center;margin-bottom:20px;padding-bottom:17px;border-bottom:1px solid #b8be8b50;gap:10px}
#menu #profile-face{width:44px;height:44px;border:2px solid #b2b78a;background:#d7d1a0;image-rendering:pixelated}
#menu .profile-top #profile,#menu #profile-settings{min-height:38px;font-size:12px;border:1px solid #a9af7c;background:#315e50;box-shadow:none;text-shadow:none}
#menu #profile-settings{margin-left:auto;padding:5px 7px}
#menu .menu-box>button,#menu #product-settings{min-height:48px;margin-top:10px;padding:10px 12px;font-size:13px;border:2px solid #afbd8c;background:#426d58;color:#fff3ce;box-shadow:inset 2px 2px #769271,inset -2px -2px #294a3c,0 3px #0c3029;text-shadow:1px 1px #243d30}
#menu .menu-box>button:hover,#menu #product-settings:hover{background:#567f5b;filter:none}
#menu .menu-box>#play{display:block;min-height:56px;margin:0 0 14px;background:#edb859;color:#273e32;border-color:#ffe5a0;box-shadow:inset 3px 3px #ffdc89,inset -3px -3px #b98139,0 4px #0d3029;font-size:16px;text-align:center;text-shadow:none}
#menu .menu-box>#play:hover{background:#ffd078}
#menu .menu-box button:focus-visible{outline:3px solid #fff5ce;outline-offset:4px}
#menu .menu-row{margin-top:0}
#menu #saveinfo{display:block;margin-top:20px;color:#ccd4b1;font-size:10px;line-height:1.5;text-align:center}
#menu .footer{display:none}
#boot-screen{background:#244d48;color:#fff0bc}
#boot-screen .boot-mark{font:700 22px ui-monospace,monospace;border-radius:0;border:3px solid #e9c47c;box-shadow:5px 5px #16372f;background:#406b55}
@media(max-width:760px) and (min-height:541px){
 #menu{display:flex;align-items:center;justify-content:flex-start;padding:0 18px max(24px,env(safe-area-inset-bottom));gap:0;overflow-y:auto}
 #menu:after{position:fixed;background:linear-gradient(180deg,#19423705 25%,#1d494030 48%,#193f36 74%)}
 #menu .cover-art{position:fixed;inset:0 0 auto;height:69dvh;min-height:420px;object-fit:cover;object-position:18% 55%}
 #menu .title{position:relative;top:auto;left:auto;flex:0 0 auto;align-self:stretch;max-width:100%;min-height:47dvh;padding:calc(24px + env(safe-area-inset-top)) 4px 0;text-align:center}
 #menu .title .eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:8px}
 #menu .title h1{font-size:clamp(32px,9.4vw,56px);letter-spacing:-2px;text-shadow:2px 0 #31544c,-2px 0 #31544c,0 -2px #31544c,0 2px #31544c,3px 5px #203d36}
 #menu .cover-names{font-size:.44em;margin-bottom:8px}
 #menu .edition{margin-top:12px;font-size:10px;letter-spacing:.4px}
 #menu .menu-box{width:min(360px,100%);max-width:100%;max-height:none;flex:0 0 auto;padding:20px}
 #menu .profile-top{margin-bottom:16px;padding-bottom:13px}
}
@media(max-height:540px){
 #menu{padding:16px 24px;align-items:flex-end}
 #menu .title{display:block;top:22px;left:24px;max-width:48%;margin:0}
 #menu .title h1{font-size:clamp(26px,4vw,38px);line-height:1;letter-spacing:-2px}
 #menu .cover-names{margin-bottom:8px}
 #menu .title .eyebrow,#menu .edition{display:none}
 #menu .menu-box{width:290px;max-width:43vw;max-height:calc(100dvh - 32px);padding:16px}
 #menu .profile-top{margin-bottom:12px;padding-bottom:10px}
 #menu .menu-box>button,#menu #product-settings{min-height:44px;font-size:11px;margin-top:7px}
 #menu .menu-box>#play{min-height:46px;font-size:14px;margin-bottom:10px}
 #menu #saveinfo{margin-top:12px;font-size:9px}
}

/* The illustrated family cover welcomes every visitor before profile selection. */
#profile-gate{isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(24px,6vw,100px);align-items:center;padding:clamp(24px,5vw,80px);background:#244d48;overflow-y:auto}
#profile-gate.hidden{display:none}
#profile-gate .access-cover-art{position:fixed;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:40% 55%;image-rendering:pixelated;pointer-events:none}
#profile-gate:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#153c3655,#153c3610 45%,#102e2bd9)}
.access-cover-intro{align-self:start;padding-top:3vh;color:#fff3ce;text-shadow:2px 3px #203d36}
.access-cover-intro small{font-size:11px;letter-spacing:2px}
.access-cover-intro h1{font:800 clamp(34px,5.2vw,76px)/1 ui-monospace,monospace;letter-spacing:-2px;margin:18px 0;color:#fff0b8}
.access-cover-intro p{font-size:clamp(13px,1.4vw,17px);line-height:1.7;max-width:410px}
#profile-gate .access-panel{width:100%;box-sizing:border-box;background:#153f39f5;border:3px solid #e2c690;border-radius:0;box-shadow:5px 5px #112f2ba6}
@media(max-width:760px) and (min-height:541px){
 #profile-gate{grid-template-columns:1fr;gap:24px;padding:28px 18px max(24px,env(safe-area-inset-bottom));align-content:start}
 #profile-gate .access-cover-art{height:75dvh;min-height:440px;object-position:18% 55%}
 #profile-gate:before{background:linear-gradient(180deg,#19423722 30%,#193f3680 55%,#193f36 74%)}
 .access-cover-intro{min-height:35dvh;text-align:center;padding:0}
 .access-cover-intro h1{font-size:clamp(36px,10vw,58px)}
 .access-cover-intro p{margin:0 auto}
 #profile-gate .access-panel{max-width:520px;margin:auto}
}
@media(max-height:540px){#profile-gate{padding:20px;gap:24px}.access-cover-intro h1{font-size:32px}.access-cover-intro p{font-size:12px}#profile-gate .access-panel{max-height:calc(100dvh - 40px);overflow-y:auto}}

#profile-gate .access-panel>h2:first-of-type{font:700 28px/1.2 system-ui,sans-serif;margin:12px 0 20px}