/* Main menu owns its layout and brand cover here. Gameplay keeps the Canvas scene. */
#front{position:fixed;inset:0;z-index:6;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:20px;padding:28px 5vw 22px;overflow:hidden;background:#07131c url('../assets/ui/charcoal-camp.webp') 64% 45%/cover no-repeat}
#front::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#041018ed 0%,#041018aa 32%,#04101818 74%),linear-gradient(0deg,#041018f2,transparent 45%,#04101844)}
.menu-shade{display:none}
#menu-motes{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
.home-watermark,.home-rule,.scene-caption{display:none}
.mast{display:flex;align-items:center;gap:18px;min-height:30px;font:10px/1.5 var(--sans);letter-spacing:2px;color:#b5c4ba}
.mast .brand-word{font:15px/1 var(--serif);font-weight:400;letter-spacing:4px;color:#e6e0c9}
.monogram{position:relative;padding-right:9px;font:29px/1 var(--serif);color:var(--warm)}
.monogram span{position:absolute;font:13px var(--sans);left:12px;top:15px;color:var(--gold)}
.mast-sep{padding:0 17px;color:#738983}.edition{margin-left:auto;color:#a7b9ac;letter-spacing:1px;font-size:10px}.edition i{padding-left:10px;font-style:normal}
.menu-body{align-self:center;min-height:0;max-height:100%;width:min(440px,100%);padding:6px 8px 6px 4vw;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#91a59444 transparent;scroll-padding-block:12px}
.menu-body>.eyebrow{font:10px/2 var(--sans);letter-spacing:2px;color:#b4c2b3;margin:0}
.tiny-line{display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin-right:12px}
.menu-body h1{font:clamp(78px,7.6vw,108px)/1 var(--serif);font-weight:400;letter-spacing:.09em;color:#f0edda;margin:18px 0;text-shadow:0 3px 40px #0008}
.menu-body h1>span{margin-left:7px}.menu-body h1 small{display:block;font:11px/1.5 var(--sans);letter-spacing:6px;color:#b8c0ac;margin-top:12px}
.tagline{font:16px/1.8 var(--serif);color:#d1d7c6;letter-spacing:1.5px;margin:22px 0 5px}
.brand-promise{font:11px/1.8 var(--sans);color:#9fb2a7;letter-spacing:.6px;margin:0 0 22px}
.main-nav{width:100%;max-width:320px;display:grid;gap:2px}
.main-nav button{position:relative;display:flex;align-items:center;gap:18px;width:100%;min-height:46px;padding:11px 12px;text-align:left;font:15px/1.5 var(--serif);letter-spacing:1px;border:1px solid transparent;background:none}
.main-nav button:first-child{min-height:62px;margin-bottom:8px;padding:13px 16px;border-color:#b9ab784a;border-left:2px solid var(--gold);background:linear-gradient(90deg,#c6b78d26,#c6b78d05)}
.main-nav button:hover:not(:disabled),.main-nav button:focus-visible{background:linear-gradient(90deg,#c6b78d22,transparent);border-color:#c6b78d38;color:var(--warm)}
.main-nav button:disabled{opacity:.4}.main-nav small{display:block;font:10px/1.5 var(--sans);letter-spacing:.5px;margin-top:4px;color:#99afa5}
.nav-n{font:9px var(--mono);color:#80988c;letter-spacing:0}.nav-arrow{margin-left:auto;font:18px var(--sans);color:var(--gold)}
.menu-foot{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 22px;min-height:43px;padding-top:15px;border-top:1px solid #b5c5b324;font:11px/1.6 var(--sans);color:#9aafa4}
.menu-foot>span{margin-right:auto;display:flex;align-items:center;gap:10px}.menu-foot em{font-style:normal;font-size:10px;color:#8fa396;margin-left:3px}.menu-foot button{font:11px/1.5 var(--sans);min-height:32px;padding:4px 0;color:#b1c1b5}.menu-foot .ui-icon{width:16px;height:16px;color:var(--gold)}
#web-account{color:#dfcfaa}
.menu-foot .community-link{color:var(--gold);border:1px solid #c6b78d55;padding:4px 11px;background:#c6b78d12}
.menu-foot .community-link:hover{color:#f4e6bd;border-color:#d8c896;background:#c6b78d22}
#front.menu-enter .menu-body{animation:menu-arrive 650ms var(--ease) both}
@keyframes menu-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.quick-launch #front{visibility:hidden}
@media(max-height:800px){
 #front{padding-top:22px;padding-bottom:18px;gap:15px}
 .menu-body h1{font-size:76px;margin:10px 0}.menu-body h1 small{font-size:10px;margin-top:8px}
 .tagline{font-size:15px;margin:12px 0 4px}.brand-promise{margin-bottom:12px;font-size:10px}
 .main-nav button{min-height:41px;padding-block:9px;font-size:14px}.main-nav button:first-child{min-height:56px;margin-bottom:5px;padding-block:10px}
 .menu-foot{padding-top:10px;min-height:38px}
}
@media(max-width:700px){
 #front{padding-inline:6vw;gap:15px;background-position:65% center}
 #front::before{background:linear-gradient(90deg,#041018df,#04101860),linear-gradient(0deg,#041018f5,transparent 85%)}
 .mast{gap:12px;font-size:9px;letter-spacing:1px}.mast .muted,.mast-sep{display:none}.edition{font-size:9px}
 .menu-body{padding-inline:2vw 6px;width:100%}.menu-body>.eyebrow{font-size:9px;letter-spacing:1px}.tiny-line{width:20px;margin-right:9px}
 .menu-body h1{font-size:72px}.main-nav{max-width:340px}
 .menu-foot{justify-content:flex-start;gap:4px 17px}.menu-foot>span{flex-basis:100%}.menu-foot em{display:none}.menu-foot button{font-size:10px}
}
@media(max-height:560px) and (min-width:700px){
 #front{padding-block:14px;gap:10px}
 .menu-body{display:grid;grid-template-columns:260px minmax(220px,300px);column-gap:36px;width:min(690px,100%);align-items:center;padding-left:2vw}
 .menu-body>.eyebrow,.menu-body h1,.tagline,.brand-promise{grid-column:1}.menu-body h1{font-size:70px}.main-nav{grid-column:2;grid-row:1/5}
 .menu-foot{min-height:32px;padding-top:7px}.main-nav button{min-height:37px;padding-block:7px}.main-nav button:first-child{min-height:51px}
}
@media(prefers-reduced-motion:reduce){#front.menu-enter .menu-body{animation:none}}
.reduced #front.menu-enter .menu-body{animation:none}