/* A single left-hand menu over the supplied painting. No image-baked controls. */
body.at-home{background:#17221b;color:#f1e6d2;min-height:100dvh;overflow-x:hidden}
body.at-home #app{position:relative;width:100%;max-width:none;min-height:100dvh;margin:0;padding:0;transform:none;left:auto;top:auto}
body.at-home>footer,body.at-home header .brand,body.at-home header #connection,body.at-home header #rules{display:none!important}
body.at-home>header{position:absolute;inset:26px 30px auto auto;display:flex;width:auto;max-width:none;height:auto;margin:0;padding:0;z-index:5;border:0;pointer-events:none}
body.at-home .header-right{gap:0;pointer-events:auto}
body.at-home #sound{width:48px;height:48px;min-height:48px;border:1px solid #beac7b70;border-radius:50%;background:#101b16a8;box-shadow:inset 0 1px 0 #e1d4ac14,0 3px 12px #0003}
body.at-home #sound:hover{background:#22392bc9;border-color:#cfc09b}
body.at-home #sound .ui-icon{width:25px;height:29px}
.home-main{position:relative;isolation:isolate;min-height:100dvh;display:flex;align-items:center;padding:70px clamp(36px,6.2vw,120px);overflow:hidden}
.home-main::before{content:"";position:fixed;inset:0;z-index:-2;background:#17221b url('/assets/main-menu-v82.webp') center center/cover no-repeat;pointer-events:none}
.home-main::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#07120bd1 0%,#0b180d7a 29%,#09130a0a 55%,transparent 80%),linear-gradient(0deg,#08110a36,transparent 32%);pointer-events:none}

.home-menu{width:350px;max-width:100%;position:relative;text-shadow:0 2px 12px #0005}
.home-menu h1{margin:0 0 30px;line-height:0}
.home-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 5px #0007)}
.home-nav{display:grid;gap:5px}
.home-menu button{min-height:48px;padding:10px 16px;border:1px solid transparent;border-radius:5px;background:transparent;box-shadow:none;color:#e5dcc5;font:21px/1.3 "Literata", Georgia,serif;text-align:left;cursor:pointer;transition:background .16s,border-color .16s}
.home-menu button:hover{background:#203729a6;border-color:#bba26a55;color:#fff0cb}
.home-menu button:focus-visible,.home-menu input:focus-visible,.home-menu select:focus-visible{outline:2px solid #dcc18b;outline-offset:3px}
.home-menu .home-primary{width:100%;background:linear-gradient(#634237,#452d25);border-color:#b796628a;color:#f4e3be;text-align:center;min-height:52px;box-shadow:inset 0 1px 0 #efd4a31c,0 3px 8px #0003}
.home-menu .home-primary:hover{background:linear-gradient(#78503c,#58372b);border-color:#d4b279}
.home-nav .home-primary{margin-bottom:8px;text-align:left}
.home-nav button:not(.home-primary){border-bottom-color:#c7b88922;border-radius:0}
.home-subhead{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid #c7b88944}
.home-subhead h2{font:25px/1.3 "Literata", Georgia,serif;margin:0;color:#efdfb8;outline:none}
.home-menu .home-back{font:15px/1.4 "Golos Text", system-ui,sans-serif;padding:8px 0;min-height:40px;color:#c4c3ad;border:0}
.home-content[data-page]:not([data-page="main"])>.home-primary{margin-top:18px}
.home-content[data-page="friends"]>.home-primary{margin-top:0}
.home-label{display:block;margin:0 0 9px;font:15px/1.4 "Golos Text", system-ui,sans-serif;color:#c5c7b6}
.home-menu input,.home-menu select{display:block;width:100%;height:48px;padding:0 13px;border:1px solid #b5b09261;border-radius:4px;background:#12221be8;color:#f3e9d7;font:16px "Golos Text", system-ui,sans-serif}
.home-menu select option{background:#16271d}
.home-menu input::placeholder{color:#a9b29e}
.home-join{margin-top:24px;padding-top:22px;border-top:1px solid #c7b88933}
.home-join-row{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:8px}
.home-menu .home-join-button{font:17px "Literata", Georgia,serif;padding:8px;text-align:center;border-color:#b5a57680;background:#1c3024}
.home-avatar-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 24px;justify-items:center}
.home-avatar-options button{width:76px;height:76px;min-height:76px;padding:3px;border:1px solid #8d805f;border-radius:50%;background:#15241bd9}
.home-avatar-options .avatar-art{display:block;width:100%;height:100%}
.home-avatar-options button[aria-pressed="true"]{border-color:#ead198;box-shadow:0 0 0 2px #d3b77570}
@media(min-width:1800px){.home-menu{width:390px}}
@media(max-width:1050px){.home-main{padding-inline:5vw}.home-main::after{background:linear-gradient(90deg,#07120bf0,#0b180dad 36%,#09130a1a 75%)}}
@media(max-width:650px){
 body.at-home>header{top:max(16px,env(safe-area-inset-top));right:20px}
 body.at-home #sound{width:44px;height:44px;min-height:44px}
 .home-main{padding:84px 26px 30px;align-items:center}
 .home-main::before{background-position:62% center}
 .home-main::after{background:linear-gradient(90deg,#07130be8,#07130bba 45%,#07130b55),linear-gradient(0deg,#08150cf2,#08150c88 65%,#08150c30)}
 .home-menu{width:340px;margin:auto}
 .home-menu h1{margin-bottom:24px}
 .home-subhead{margin-bottom:15px}
 .home-avatar-options{gap:10px;margin-bottom:18px}
 .home-avatar-options button{width:64px;height:64px;min-height:64px}
}
@media(max-height:500px) and (min-width:651px){
 .home-main{padding-block:24px}
 .home-menu{width:310px}
 .home-menu h1{max-width:220px;margin-bottom:12px}
 .home-nav{gap:0}.home-menu button{min-height:42px;padding-block:7px;font-size:19px}
 .home-nav .home-primary{min-height:44px;margin-bottom:2px}
 .home-subhead{margin-bottom:12px;padding-bottom:4px}.home-subhead h2{font-size:22px}
 .home-avatar-options{grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:14px}
 .home-avatar-options button{width:44px;height:44px;min-height:44px;padding:2px}
 .home-content[data-page]:not([data-page="main"])>.home-primary{margin-top:12px;min-height:44px}
 .home-join{margin-top:14px;padding-top:12px}
}
@media(prefers-reduced-motion:reduce){.home-menu button{transition:none}}

/* Waiting room shares the main menu's painting, typography and controls. */
.waiting.home-main{text-align:left;max-width:none;width:100%;margin:0;padding:70px clamp(36px,6.2vw,120px)}
.lobby-menu{width:380px}
.lobby-menu h1{max-width:290px;margin-bottom:24px}
.lobby-menu .home-subhead{justify-content:space-between;margin-bottom:14px}
.lobby-menu .home-subhead>span{font:14px "Golos Text", system-ui;color:#b9bfae}
.lobby-invite{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 16px;border-bottom:1px solid #c7b88933}
.lobby-invite .home-label{margin:0 0 4px;font-size:13px}
.lobby-invite .code{display:block;margin:0;font:27px/1.2 "Literata", Georgia,serif;letter-spacing:3px;color:#efdfb8}
.lobby-invite button{font:14px "Golos Text", system-ui;padding:8px 10px;min-height:40px;border-color:#b5a57650;background:#14271c80}
.lobby-menu .seats{margin:10px 0 18px}
.lobby-menu .seat{display:flex;gap:14px;align-items:center;min-height:62px;padding:8px 0;border-bottom:1px solid #c7b88922;font:17px/1.35 "Literata", Georgia,serif}
.lobby-menu .seat>div:last-child{min-width:0;overflow-wrap:anywhere}
.lobby-menu .seat small{display:block;margin-top:3px;font:12px/1.4 "Golos Text", system-ui;color:#b1b9a8}
.lobby-menu .seat-empty{color:#a4ad99;opacity:.7}
.lobby-menu .seat .avatar{width:40px;height:40px;flex:0 0 40px;background:#17271c66;border:1px dashed #a9996b66;border-radius:50%}
.lobby-actions{display:grid;grid-template-columns:1fr;gap:8px}
.lobby-menu .lobby-secondary{font-size:17px;min-height:42px;text-align:center;border-color:#b5a57660;background:#172c2080}
.lobby-menu button:disabled{opacity:.4;cursor:default;pointer-events:none}
.lobby-menu .lobby-leave{display:block;margin:12px 0 0;padding:8px 0}
@media(max-width:650px){.waiting.home-main{padding:76px 26px 30px}.lobby-menu h1{max-width:230px;margin-bottom:18px}.lobby-menu .seat{min-height:56px;padding-block:6px}.lobby-menu .seats{margin-bottom:12px}}
@media(max-height:550px) and (min-width:651px){.waiting.home-main{align-items:flex-start;padding-block:22px}.lobby-menu{width:560px;max-width:80vw}.lobby-menu h1{max-width:190px;margin-bottom:10px}.lobby-menu .seats{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:6px 0 12px}.lobby-actions{grid-template-columns:1fr 1fr}.lobby-actions .home-primary{min-height:42px;font-size:18px}.lobby-menu .lobby-leave{margin-top:4px}}

/* Larger portrait gallery with room for twelve choices. */
.home-menu:has(.home-avatar-options){width:460px}
.home-avatar-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:14px 0}
.home-avatar-options button{width:96px;height:96px;min-height:96px;padding:3px}
@media(max-width:650px){
 .home-avatar-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .home-avatar-options button{width:80px;height:80px;min-height:80px}
}

.profile-identity-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:10px}
.profile-identity-row>div{min-width:0}.profile-identity-row input{width:100%;min-width:0;box-sizing:border-box}

.profile-identity-row.profile-identity-guest{grid-template-columns:minmax(0,1fr)}