/* Главный экран — отдельный лёгкий интерфейс, город загружается по выбору игрока. */
#join.front-shell{--front-amber:#eeb662;--front-paper:#f0e8d9;display:block;position:fixed;inset:0;padding:0;background:#091219;color:var(--front-paper);overflow:auto;font-family:Arial,Helvetica,sans-serif;z-index:110}
#join.front-shell.hidden{display:none!important}.front-shell [hidden]{display:none!important}
#settings-panel{z-index:160}
#join.front-shell{place-items:normal;justify-items:normal;align-items:normal}
#join.front-shell>.front-header{box-sizing:border-box;width:100%}
#join .front-wordmark h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(68px,7.8vw,136px);font-weight:900;line-height:.91;letter-spacing:-.035em;margin:22px 0}
#join .front-wordmark h1 span{color:var(--front-amber)}
.front-shell:not([data-page=home]) .front-nav button:first-child:not([aria-current=page]):before{display:none}
.front-shell:not([data-page=home]) .front-footer{display:none}
.front-background{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,10,14,.73),rgba(4,10,14,.19) 45%,rgba(4,10,14,.08)),linear-gradient(0deg,rgba(4,10,14,.7),transparent 25%),url('/assets/menu/neighborhood-dusk.jpg') center/cover no-repeat;transition:filter .4s}
.front-shell:not([data-page=home]) .front-background{filter:brightness(.48)}
.front-header,.front-footer{position:relative;display:flex;align-items:center;justify-content:space-between;padding:28px 4.5vw;letter-spacing:.19em;font-size:10px}
.front-header{z-index:2}.front-location{color:#f0e8d9;text-decoration:none}.front-location span{color:var(--front-amber);margin:0 12px}
.front-shell button{font-family:inherit;cursor:pointer;touch-action:manipulation}.front-shell button:focus-visible,.front-shell a:focus-visible,.front-shell input:focus-visible{outline:2px solid var(--front-amber);outline-offset:5px}.front-shell button:disabled{cursor:not-allowed}
#front-profile{display:flex;align-items:center;gap:14px;background:none;border:0;color:var(--front-paper);font-size:11px;letter-spacing:.15em;padding:0}#front-profile svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.3}
.front-sidebar{position:relative;margin:3vh 0 100px 4.5vw;width:38vw;max-width:520px;z-index:1}.front-eyebrow{font-size:10px;letter-spacing:.2em;font-weight:700;color:var(--front-amber)}
.front-wordmark h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-stretch:condensed;letter-spacing:-.035em;font-size:clamp(68px,7.8vw,136px);font-weight:900;line-height:.91;margin:22px 0;color:#f4edde;text-shadow:0 3px 30px #0004}.front-wordmark h1 span{color:var(--front-amber)}.front-wordmark>p{font-size:clamp(12px,1.2vw,18px);letter-spacing:.065em;margin:22px 0 0;color:#dfd8ca}
.front-nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:6vh}.front-nav button{position:relative;border:0;background:none;color:#c2c3bd;font-size:clamp(16px,1.6vw,23px);letter-spacing:.12em;text-transform:uppercase;padding:12px 22px;transition:color .2s,transform .2s}.front-nav button:first-child{color:var(--front-amber)}.front-nav button:first-child:before,.front-nav button[aria-current=page]:before{content:'';position:absolute;left:0;top:15px;bottom:15px;width:3px;background:var(--front-amber)}.front-nav button:hover,.front-nav button[aria-current=page]{color:var(--front-amber);transform:translateX(4px)}.front-nav button span{font-size:18px;margin-left:35px}
.front-content{position:absolute;left:43%;right:4.5vw;top:110px;bottom:80px;z-index:1}.front-home{height:100%;position:relative}.front-scene-caption{position:absolute;right:0;bottom:0;padding:15px 20px;border-left:1px solid #eeb66280;background:linear-gradient(90deg,#0c1920b0,transparent);font-size:10px;letter-spacing:.2em}.front-scene-caption small{display:block;margin:8px 0 0 16px;font-size:12px;letter-spacing:.02em;color:#c9c8bc}.front-live-light{display:inline-block;width:5px;height:5px;background:var(--front-amber);border-radius:50%;margin-right:8px;box-shadow:0 0 12px #eeb662}
.front-continue{position:absolute;bottom:94px;right:0;max-width:100%;background:#0c1920c9;border:1px solid #eeb66270;padding:14px 20px;color:var(--front-amber);font-size:13px}.front-meeting{background:#142a32e8;border-left:2px solid var(--front-amber);padding:16px;max-width:460px;font-size:14px;line-height:1.6}
.front-back{background:none;color:#d2d0c5;border:0;padding:4px 0 15px;font-size:12px;letter-spacing:.06em}.front-panel{padding:26px 30px 30px;background:linear-gradient(145deg,#10212af5,#08131bef);border:1px solid #dfd4b322;border-radius:3px;box-shadow:0 20px 70px #0003;max-width:850px}.front-panel-heading h2{font-size:clamp(26px,3vw,42px);font-weight:600;line-height:1.1;margin:12px 0}.front-panel-heading>p{color:#b5bcb9;font-size:13px;line-height:1.7;margin:0 0 25px}.front-footer{position:fixed;bottom:0;left:0;right:0;pointer-events:none;color:#b0b4ad;font-size:9px;z-index:2}.front-footer i{color:var(--front-amber);margin:0 10px;font-style:normal}
.front-mode-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px}.front-mode-list{display:flex;flex-direction:column;gap:6px}.front-mode-list button{display:grid;grid-template-columns:24px 1fr;gap:7px 10px;text-align:left;background:#ffffff03;border:1px solid #ffffff0d;border-left:2px solid transparent;padding:14px 10px;color:#a7b3b3;min-height:80px}.front-mode-list button[aria-pressed=true]{background:#eeb6620c;border-left-color:var(--front-amber);color:var(--front-paper)}.front-mode-list button>span{font-size:10px;color:#d5a65e;margin-top:3px}.front-mode-list strong{font-size:14px;line-height:1.3}.front-mode-list small{grid-column:2;font-size:8px;letter-spacing:.1em;line-height:1.5}
.front-mode-detail{min-width:0}.front-mode-art{height:120px;position:relative;overflow:hidden;background:linear-gradient(0deg,#0f2028aa,transparent),url('/assets/menu/neighborhood-dusk.jpg') 65% 62%/cover}.front-mode-art[data-mode=zombie]{filter:sepia(.3) hue-rotate(18deg)}.front-mode-art[data-mode=race]{background-position:33% 75%}.front-mode-art[data-mode=flight]{background-position:center top}.front-mode-art>span{position:absolute;top:12px;left:12px;font:9px/1.6 monospace;color:#fff9;letter-spacing:.08em}.front-mode-art>b{position:absolute;bottom:12px;right:12px;font-size:10px;letter-spacing:.3em}.front-mode-art>i{position:absolute;inset:12px;border:1px solid #ffffff1a}.front-mode-copy{padding-top:18px}.front-mode-copy h3{font-size:26px;letter-spacing:-.02em;line-height:1.12;margin:10px 0}.front-mode-copy p{font-size:12px;line-height:1.7;color:#b7c1bf}.front-mode-copy .front-mode-quote{font-size:14px;color:var(--front-paper)}.front-mode-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:8px;letter-spacing:.13em;color:var(--front-amber);padding:12px 0;border-top:1px solid #fff1;border-bottom:1px solid #fff1}.front-mode-copy .front-mode-goal{font-size:11px;color:#9faaa7}
.front-primary{background:var(--front-amber);border:1px solid var(--front-amber);color:#172028;padding:15px 22px;font-size:13px;font-weight:700;letter-spacing:.03em;border-radius:2px}.front-primary:hover{background:#f9c989}.front-primary:disabled{background:#273437;border-color:#5c655e;color:#a3ada7}.front-play-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:22px}.front-text-button{border:0;background:none;color:#d2d6c8;font-size:11px;padding:9px 0}.front-text-button:hover{color:var(--front-amber)}.front-tutorial{display:block;margin-top:18px;font-size:10px;color:#9facac;text-align:left}.front-basics{border-top:1px solid #fff1;padding-top:12px;font-size:12px;color:#bec7c2;line-height:1.7}.front-basics p{margin:6px 0}.front-loading{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid #eeb66233;margin-top:16px;padding-top:14px;font-size:12px}.front-loading a{font-size:10px;color:var(--front-amber);margin-left:auto}.front-loading i{height:7px;width:7px;border-radius:50%;background:var(--front-amber);animation:front-pulse 1.4s infinite}.front-loading p{margin:0;flex:1;line-height:1.5}
.front-character #join-form.card{background:none;border:0;box-shadow:none;backdrop-filter:none;max-width:none;max-height:none;overflow:visible;width:100%;padding:0;margin:0;color:var(--front-paper)}.front-character .studio-heading,.front-character #map-name,.front-character .studio-tag{display:none}.front-character #join-name{box-sizing:border-box;width:100%;background:#06121a99;color:var(--front-paper);border:1px solid #c4d4cc33;border-radius:2px;font-size:17px;padding:13px;margin:10px 0 18px}.front-character .avatar-picker{margin:0 0 18px;background:#08141a;border:1px solid #e4d6b51a;border-radius:2px;min-height:220px}.front-character #avatar-preview{height:240px}.front-character #avatar-preview>canvas{max-width:100%;height:240px!important;object-fit:contain}.front-character #avatar-preview>svg{height:220px;width:200px}.front-character #random-avatar{background:none;border:1px solid #eeb66270;color:var(--front-amber);padding:10px 15px;border-radius:2px}.front-character .pack-choice{border:1px solid #d5e4de22;border-radius:2px;background:#09171c;margin:15px 0}.front-character .pack-choice label{background:none;border:0;border-radius:2px;color:#d8dfd7;font-size:12px}.front-character .pack-choice small{color:#98a9a7}.front-character .pack-choice legend{font-size:10px;letter-spacing:.15em;color:var(--front-amber)}.front-character .avatar-choice p{color:#d3ddd3;font-size:14px}.front-character #join-status{color:#d6ba89;font-size:12px;line-height:1.5}
.front-steps{list-style:none;padding:0;margin:0 0 24px}.front-steps li{display:flex;gap:18px;border-bottom:1px solid #fff1;padding:16px 0}.front-steps li>span{font:12px monospace;color:var(--front-amber);padding-top:3px}.front-steps h3{font-size:16px;font-weight:500;margin:0 0 7px}.front-steps p{font-size:12px;line-height:1.7;color:#b2c0be;margin:0}.front-squad-note,.front-muted{font-size:11px;color:#a2b0af;line-height:1.7}.front-invite{display:flex;gap:8px;margin:12px 0}.front-invite input{width:100%;min-width:0;background:#06121a;border:1px solid #ffffff26;color:#c5d5ce;padding:12px;font:11px monospace}.front-invite button{background:none;color:var(--front-amber);border:1px solid #eeb66266;padding:10px;font-size:11px}.front-squad-members{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}.front-squad-members li{padding:15px;border:1px solid #eeb66244;color:var(--front-paper);font-size:13px}.front-squad .front-primary{margin-top:12px}
.front-chronicle>p{font-size:14px;line-height:1.85;color:#bac5c2}.front-chronicle .front-lead{font-size:20px;color:var(--front-paper)}.front-chronicle blockquote{font-size:22px;line-height:1.5;margin:25px 0;padding-left:20px;border-left:2px solid var(--front-amber);color:var(--front-paper)}.front-chronicle .front-story-signature{color:var(--front-amber);margin:25px 0}
@keyframes front-pulse{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){.front-shell *{animation:none!important;transition:none!important}}
@media(min-width:1500px){.front-content{left:44%;right:6vw;top:125px}.front-panel{padding:35px}.front-mode-layout{grid-template-columns:215px minmax(0,1fr)}.front-mode-art{height:150px}.front-mode-copy p{font-size:14px}}
@media(max-width:1100px){.front-sidebar{width:32vw}.front-wordmark h1{font-size:7.5vw}.front-content{left:37%;right:3vw;top:100px}.front-panel{padding:22px}.front-mode-layout{grid-template-columns:150px minmax(0,1fr);gap:15px}.front-mode-list strong{font-size:12px}.front-mode-list button{padding:12px 8px}.front-mode-copy h3{font-size:23px}.front-wordmark>p{font-size:11px}.front-nav button{font-size:17px}}
@media(max-width:760px){.front-header{padding:20px 6vw}.front-location{font-size:9px}.front-sidebar{margin:6vh 6vw 95px;width:86vw;max-width:none}.front-wordmark h1{font-size:clamp(74px,15vw,118px);margin-top:18px}.front-wordmark>p{font-size:13px}.front-nav{margin-top:5vh;gap:3px}.front-nav button{font-size:19px;padding:12px 20px}.front-content{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:0 5vw 90px}.front-home{position:fixed;right:5vw;bottom:75px;height:70px;width:45vw;pointer-events:none}.front-home button,.front-home .front-meeting{pointer-events:auto}.front-scene-caption{font-size:8px;padding:10px}.front-scene-caption small{font-size:10px;line-height:1.6}.front-home .front-continue{bottom:90px;font-size:10px;padding:10px}.front-meeting{position:fixed;top:65px;right:5vw;left:5vw;font-size:12px}.front-footer{padding:20px 6vw;font-size:7px;letter-spacing:.12em}.front-shell:not([data-page=home]) .front-sidebar{margin:10px 6vw 18px;width:auto}.front-shell:not([data-page=home]) .front-wordmark{display:none}.front-shell:not([data-page=home]) .front-nav{margin:0;flex-direction:row;flex-wrap:wrap;gap:2px}.front-shell:not([data-page=home]) .front-nav button{font-size:10px;padding:9px 8px;letter-spacing:.04em}.front-shell:not([data-page=home]) .front-nav button:before{display:none}.front-shell:not([data-page=home]) .front-nav button span{display:none}.front-panel{padding:22px 18px}.front-mode-layout{grid-template-columns:1fr}.front-mode-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.front-mode-list button{min-height:68px}.front-mode-art{height:130px;background-position:65% 65%}.front-mode-copy h3{font-size:28px}.front-mode-copy p{font-size:13px}.front-panel-heading h2{font-size:32px}.front-play-actions{margin-top:20px}.front-primary{width:100%;min-height:48px}.front-mode-meta{font-size:9px}.front-shell:not([data-page=home]) .front-background{background-position:65% center}.front-chronicle>p{font-size:14px}.front-character .avatar-picker{display:flex}.front-character .avatar-choice{min-width:0}.front-character .avatar-choice p{font-size:12px}}
@media(max-height:650px) and (min-width:761px){.front-header{padding-top:18px;padding-bottom:18px}.front-sidebar{margin-top:10px}.front-wordmark h1{font-size:8vw;max-height:180px}.front-nav{margin-top:20px}.front-nav button{font-size:16px;padding:9px 20px}.front-content{top:75px}.front-footer{padding-top:15px;padding-bottom:15px}}
@media(max-width:1100px) and (min-width:761px){#join .front-wordmark h1{font-size:7.5vw}}
@media(max-width:760px){#join .front-wordmark h1{font-size:clamp(74px,15vw,118px);margin-top:18px}.front-shell:not([data-page=home]) .front-nav button{min-height:40px;font-size:11px}.front-location{letter-spacing:.1em}#front-profile{font-size:9px;max-width:45%;gap:8px}#front-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}