/* ACity: Alatau ridgelines, blue-hour glass and glacial mint. */
:root{--bg:#081725;--s1:rgba(10,29,44,.94);--s2:#152e40;--s3:#25465a;--t1:#f0f7fa;--t2:#a1b8c6;--accent:#6de4d3;--red:#ff857c;--line:#a0d9e424;--font:'Segoe UI',Arial,sans-serif;--panel-shadow:0 18px 48px #020d1a55,inset 0 1px #e1f8ff08;}
body{font-family:var(--font);}
button,input,summary,kbd{font-family:var(--font);}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
button:disabled{opacity:.5;}
::selection{background:#6de4d3;color:#091d2c;}
*{scrollbar-color:#416675 transparent;}
#join{display:grid;grid-template-columns:minmax(0,1fr) minmax(470px,580px);align-items:center;gap:clamp(28px,5vw,100px);padding:40px max(32px,calc((100vw - 1400px)/2));background:linear-gradient(90deg,#081725c9,#08172544 50%,#081725dd),url('/assets/brand/alatau.svg') center/cover fixed;overflow:auto;isolation:isolate;}
#join::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#071623 0%,transparent 45%);}
.city-intro{max-width:650px;width:100%;align-self:stretch;display:flex;flex-direction:column;justify-content:center;position:relative;min-height:700px;padding:50px 0;}
.city-location{display:flex;align-items:center;gap:10px;font:600 11px var(--font);letter-spacing:.15em;color:#b5ced7;}
.city-location>span{width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 15px #6de4d360;}
.city-location i{font:10px var(--font);letter-spacing:.06em;color:#789cab;margin-left:auto;}
.city-logo{display:block;width:min(540px,100%);height:auto;margin:24px 0 24px -20px;filter:drop-shadow(0 18px 28px #04102088);}
#join .city-intro h1{font:650 clamp(36px,4vw,60px)/1.08 var(--font);letter-spacing:-.055em;margin:0 0 22px;}
#join .city-intro h1 span{color:#6de4d3;}
.city-intro>p{color:#b8ccd7;font-size:18px;line-height:1.7;margin:0 0 30px;}
.city-modes{display:flex;gap:24px;border-top:1px solid #aeced32b;padding-top:22px;font-size:11px;font-weight:650;letter-spacing:.1em;}
.city-modes span{display:flex;align-items:center;gap:8px;}
.city-modes b{color:#6de4d3;font-size:10px;}
.city-signature{display:flex;gap:18px;align-items:center;margin-top:54px;font-weight:700;font-size:12px;letter-spacing:.18em;color:#c3d9e0;}
.city-signature span{font-size:9px;letter-spacing:.14em;color:#6e91a4;}
#join .card{width:100%;max-width:580px;max-height:none;overflow:visible;flex-shrink:0;margin:auto;gap:12px;padding:30px;border-radius:24px;border:1px solid #b4dce633;background:linear-gradient(145deg,#173246f5,#0b2032f7);box-shadow:0 30px 90px #020d1999,inset 0 1px #e1f8ff10;backdrop-filter:blur(18px);}
.studio-heading{display:flex;align-items:center;gap:12px;}
.studio-heading>img{flex:none;border:1px solid #83c2cb30;border-radius:12px;}
#join .eyebrow{font-size:10px;letter-spacing:.14em;color:#6de4d3;}
.studio-heading h2{font-size:23px;font-weight:600;letter-spacing:-.04em;line-height:1.25;margin:5px 0 0;}
.studio-number{font-size:11px;color:#698c9e;margin-left:auto;white-space:nowrap;}
#join .place{font-size:13px;font-weight:450;border-block:1px solid var(--line);padding:14px 0;margin:8px 0 0;color:#afccd7;line-height:1.5;}
#join label{font-size:14px;font-weight:550;color:#b8cfd9;margin:4px 0 0;}
#join #join-name{height:56px;min-height:56px;font:400 19px var(--font);background:#081b2cc9;border:1px solid #9bd5de30;border-radius:10px;color:var(--t1);padding:0 16px;}
#join #join-name::placeholder{color:#6c90a4;}
#join #join-name:focus{border-color:#6de4d3;box-shadow:0 0 0 3px #6de4d311;}
.avatar-picker{position:relative;min-height:320px;gap:0;padding:24px 0 0;margin:2px 0 0;border:1px solid #84bdcc26;border-radius:16px;background:radial-gradient(ellipse at 28% 50%,#326d7c66,transparent 65%),linear-gradient(160deg,#102d42,#091d2f);}
.avatar-picker::before{content:'';position:absolute;inset:55% 5% 10%;border:1px solid #6de4d31a;border-radius:50%;transform:perspective(200px) rotateX(65deg);pointer-events:none;}
.studio-tag{position:absolute;left:16px;top:14px;font-size:9px;letter-spacing:.15em;color:#729bad;}
#avatar-preview{position:relative;width:260px;height:300px;}
#avatar-preview canvas{width:265px!important;height:300px!important;}
#avatar-preview svg{width:220px;height:275px;}
.avatar-choice{position:relative;padding:20px 18px 20px 0;}
.avatar-choice .eyebrow{font-size:10px;}
#avatar-caption{font-size:15px;line-height:1.6;color:#d3e4eb;margin:10px 0 18px;}
#random-avatar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;font-size:14px;font-weight:550;padding:10px 12px;background:#1c4053;border:1px solid #70bacb50;border-radius:9px;color:#cdecef;}
#random-avatar:hover{background:#2a5465;border-color:#6de4d3;}
#random-avatar span{font-size:22px;color:#6de4d3;}
#join .join-music{font-size:13px!important;font-weight:400;min-height:34px;color:#a7c1ce;}
#join input#join-music{width:18px;height:18px;accent-color:#6de4d3;}
#join-btn{height:58px;min-height:58px;margin-top:0;border-radius:10px;background:#6de4d3;color:#0a2935;font-size:18px;font-weight:700;border:1px solid #a1f4e7;box-shadow:0 6px 24px #42cdb218;}
#join-btn:hover:not(:disabled){background:#a0f1e4;box-shadow:0 8px 28px #6de4d326;}
#join-status{font-size:12px;line-height:1.55;color:#7fa3b5;margin:0;min-height:18px;}
#splash{background:radial-gradient(ellipse at 50% 45%,#1a3c50,#081725 70%);}
.splash-logo{width:min(490px,80vw);height:auto;}
#splash p{font:500 11px var(--font);letter-spacing:.2em;color:#99beca;text-align:center;padding:0 20px;}
.splash-track{background:#6de4d31c;width:140px;}
.menu-logo{width:220px;max-width:80%;height:auto;margin:-10px 0 12px;}
/* Game UI retains its control positions, with the same brand across every surface. */
#hud{font-family:var(--font);--hud-ink:#091d2c;--hud-paper:#eaf7fc;--hud-amber:#6de4d3;}
#hud button,#hud input,#hud summary,#hud kbd{font-family:var(--font);}
#city-brand{position:fixed;top:24px;left:164px;display:flex;align-items:center;gap:9px;pointer-events:none;}
#city-brand img{border:1px solid #91d7df30;border-radius:9px;}
#city-brand>span{font-size:19px;line-height:1;font-weight:750;letter-spacing:-.05em;color:#eefaff;text-shadow:0 2px 8px #071725;}
#city-brand small{display:block;font-size:7px;letter-spacing:.18em;margin-top:5px;font-weight:500;color:#9dd6de;}
#menu-btn,#radio-btn{background:#0b2234e8;border:1px solid #a2d8e438;border-radius:12px;box-shadow:0 6px 20px #06162455;color:#d3edf2;}
#menu-btn:hover,#radio-btn:hover,#radio-btn.on{background:#1c4357;border-color:#6de4d3;color:#6de4d3;}
#ping{left:164px;top:75px;color:#94b6c6;background:#0b2234bd;border-radius:6px;padding:3px 8px;}
#street,#street.show{background:#0c2536df;border:1px solid #9cd1db22;border-left:3px solid #6de4d3;border-radius:8px;color:#e2f2f7;font-size:15px;letter-spacing:.04em;}
#vitals{background:linear-gradient(135deg,#143449f2,#0a2032f2);border:1px solid #9ad4df30;border-radius:16px;box-shadow:0 8px 30px #04142144;color:#dbecf3;}
#vitals span{font-size:11px;letter-spacing:.12em;color:#a6c4d2;}
#vitals progress,#vitals progress::-webkit-progress-bar{background:#254253;border-radius:8px;}
#vitals progress::-webkit-progress-value{background:#9cb9f4;border-radius:8px;}
#vitals progress::-moz-progress-bar{background:#9cb9f4;border-radius:8px;}
#vitals #hp-bar::-webkit-progress-value{background:#6de4d3;}
#vitals #hp-bar::-moz-progress-bar{background:#6de4d3;}
#money-value{font:650 31px var(--font);letter-spacing:-.05em;color:#ecf9ff;text-shadow:none;}
#eat-btn,#weapon-select{background:#1b3d51;border:1px solid #8ebfcc38;border-radius:9px;color:#c4e8ef;font-family:var(--font);}
#eat-btn{font-size:12px;}
#players,body.touch #players{background:#0b2234ed;border:1px solid #9ad4df30;border-radius:14px;overflow:hidden;}
#players h3{background:#17394c;font-size:10px;letter-spacing:.12em;color:#b5d1dd;}
#players h3 b{color:#6de4d3;}
#players li{border-bottom-color:#abcfdc13;}
#players small{color:#7eacbf;}
#players li .player-dot{border-color:#72a5b5;background:#e7f7ff;}
#players li button{background:#214559;border:1px solid #99c9d533;border-radius:8px;color:#cae6ef;}
#players li.speaking .player-voice{color:#6de4d3;}
#players li.speaking .player-dot{background:#6de4d3;box-shadow:0 0 10px #6de4d366;}
#radar{border:1px solid #91c7d842;border-radius:16px;background:#0b2538f0;box-shadow:0 14px 40px #04111e66;}
#radar header{height:42px;padding:0 13px;color:#b4d2dd;font-size:10px;letter-spacing:.1em;border-bottom:1px solid #9bcdd426;}
#radar header b{color:#b3f4e9;}
#radar header i{background:#6de4d3;}
#radar footer{padding:9px 12px;color:#a2c0ce;}
#radar button{border:1px solid #83bacb44;background:#1b4053;color:#cae9f2;border-radius:6px;}
#radar .you-dot{background:#6de4d3;}#radar .talk-dot{border-color:#6de4d3;}
#radar.expanded{border:1px solid #8bd2dd88;border-radius:20px;}
#attribution{color:#a0c3d0;}
#chat-input{background:#0d283beb;border:1px solid #91c7d842;border-radius:10px;color:#eaf7fc;}
.chat-row{background:#0a2132df;border-left:2px solid #5b9cab;border-radius:0 6px 6px 0;font-family:var(--font);}
#weapon-select{font-size:14px;letter-spacing:.04em;border-radius:12px;}
#voice-panel{background:#0b2538f2;border:1px solid #91c7d83b;border-radius:12px;color:#c5dfeb;font-family:var(--font);}
#voice-panel summary{color:#6de4d3;font-size:11px;}
#voice-panel button{background:#1b4053;color:#d3edf2;border:1px solid #83bacb3b;border-radius:8px;font-family:var(--font);}
#voice-volume{accent-color:#6de4d3;}
#voice-talk.speaking{background:#276e70;box-shadow:0 0 0 2px #6de4d3;}
#voice-self{background:#0a2435db;color:#8ab1c3;border-color:#45798b;border-radius:0 6px 6px 0;}
#voice-self.active{border-color:#6de4d3;color:#6de4d3;}
.speaker-marker{background:#0a2639ef;border-color:#6de4d388;color:#c9fcf2;border-radius:8px;font-family:var(--font);box-shadow:0 0 calc(var(--voice-level,0)*20px) #6de4d340;}
.speaker-marker .ui-icon{color:#6de4d3;}.speaker-marker.edge i{background:#6de4d3;}
#speedo,#jet{background:#0b2538eb;border:1px solid #91c7d838;border-radius:12px;color:#d6f2f5;font-family:var(--font);}
#speedo{font-weight:650;letter-spacing:-.05em;}
#hint,body.touch #hint,#toast{background:#102e42ed;color:#d6edf3;border:1px solid #9acdda33;border-radius:10px;font-family:var(--font);}
#toast{border-left:3px solid #6de4d3;}
#rocket-controls button{background:#0c293bec;border:1px solid #86c5d345;border-radius:10px;color:#9be9dc;font-family:var(--font);}
#menu .card,#help .card,#radio{background:linear-gradient(135deg,#143449f7,#0a2032f7);border:1px solid #9ad4df38;border-radius:20px;}
#menu h2,#help h2{font:600 32px var(--font);letter-spacing:-.05em;}
#menu button,#radio-stations button,#hud #emote-bar button{background:#193d51;border:1px solid #90c6d333;color:#d4edf4;border-radius:10px;font-family:var(--font);}
#menu button.primary,#menu #menu-close,#help-close,#radio-stations button.sel{background:#6de4d3;color:#0b2935;}
#menu button.primary:hover,#menu #menu-close:hover,#help-close:hover{background:#a0f1e4;box-shadow:none;}
.live-tag{color:#6de4d3;border-color:#6de4d344;}
#hud #emote-bar.open{background:#0b2538f2;border:1px solid #9ad4df38;border-radius:14px;}
kbd{background:#1e4055;color:#c6e3ee;border-color:#72a8bc38;}
#hud #emote-bar button::after{font-family:var(--font);color:#83b0c4;}
body.touch #touch-buttons button,body.touch #btn-car.show{background:#0b2538ec;border:1px solid #7bbdce66;color:#d1f1f5;border-radius:15px;}
body.touch #touch-buttons #btn-jump,body.touch #touch-buttons #btn-throw{background:#6de4d3;color:#092b38;}
body.touch #joystick{background:#0a2338aa;border-color:#78c3cf66;}#joystick-knob{background:#6de4d3bb;box-shadow:0 0 20px #6de4d325;}
#crosshair i{background:#dcfbf5;}#crosshair.hit i{background:#6de4d3;}
#damage-readout{background:#0b2538ed;color:#a1f8e6;border-radius:6px;font-family:var(--font);}
@media(min-width:1700px){#join{grid-template-columns:minmax(0,1fr) 640px;}#join .card{max-width:640px;padding:38px;}.avatar-picker{min-height:350px;}#avatar-preview{width:300px;height:340px;}#avatar-preview canvas{width:300px!important;height:340px!important;}}
@media(max-width:1100px){#join{grid-template-columns:minmax(0,1fr) minmax(420px,510px);gap:24px;padding:28px;}.city-location i{display:none;}.city-modes{gap:16px;font-size:9px;}.city-logo{margin-left:-12px;}.city-signature{flex-direction:column;align-items:flex-start;gap:10px;}#join .card{padding:24px;}#avatar-preview{width:225px;height:280px;}#avatar-preview canvas{width:247px!important;height:280px!important;}.avatar-picker{min-height:300px;}#street,#street.show{font-size:13px;}#city-brand{left:164px;}}
@media(max-width:850px){#join{display:flex;flex-direction:column;gap:22px;padding:26px 18px 34px;background-attachment:scroll;background-position:35% top;}#join::before{position:absolute;}.city-intro{align-self:center;max-width:580px;min-height:auto;flex-shrink:0;padding:0;}.city-location{font-size:9px;}.city-location i{display:block;font-size:8px;}.city-logo{width:270px;margin:12px auto 0;}#join .city-intro h1{font-size:32px;text-align:center;margin:8px 0 4px;}.city-intro>p,.city-modes,.city-signature{display:none;}#join .card{max-width:580px;margin:0;}#join .studio-heading h2{font-size:23px;}#avatar-preview{width:260px;height:300px;}#avatar-preview canvas{width:265px!important;height:300px!important;}.avatar-picker{min-height:320px;}}
@media(max-width:620px){#join{gap:16px;padding:20px 12px 28px;}#join .card{padding:22px 18px;border-radius:20px;gap:10px;}.city-location{font-size:8px;}.city-location i{font-size:7px;}.city-logo{width:240px;margin:8px auto 0;}#join .city-intro h1{font-size:27px;margin:6px 0 0;}.studio-heading{gap:10px;}.studio-heading>img{width:36px;height:36px;}#join .studio-heading h2{font-size:21px;}.studio-number{font-size:9px;}#join .eyebrow{font-size:9px;}.avatar-picker{flex-direction:row;min-height:290px;}#avatar-preview{width:52%;height:275px;}#avatar-preview canvas{width:243px!important;height:275px!important;max-width:none;}#avatar-preview svg{width:190px;height:245px;flex:none;}.avatar-choice{width:48%;padding:22px 12px 16px 0;text-align:left;}.avatar-choice .eyebrow{font-size:8px;}#avatar-caption{font-size:13px;line-height:1.55;margin:10px 0 14px;}#random-avatar{font-size:12px;padding:8px;min-height:46px;gap:2px;}#join .place{font-size:12px;padding:12px 0;}#join #join-name{height:52px;min-height:52px;font-size:17px;}#join-btn{font-size:17px;min-height:56px;}#join .join-music{font-size:12px!important;}#join-status{font-size:11px;}#city-brand{display:none;}#ping{top:26px;left:118px;font-size:9px;padding:4px;}#radar{border-radius:12px;}#radar header{height:31px;padding:0 7px;font-size:8px;letter-spacing:.04em;}#radar footer{padding:5px 7px;}#radar.expanded{border-width:1px;}#vitals{border-radius:12px;}#vitals span{font-size:9px;}#money-value{font-size:25px;}#eat-btn{font-size:10px;}#players,body.touch #players{border-radius:10px;}#voice-panel{border-radius:10px;}#voice-panel summary{font-size:10px;}#street,#street.show{font-size:10px;}#weapon-select{font-size:11px;}#menu .card,#help .card{padding:24px 20px;}.menu-logo{width:190px;}#speedo{font-size:27px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

#hud #menu-btn,#hud #radio-btn{border-radius:12px;}