:root{--suit-color:#ff783f}
.brand{font-family:'Barlow Condensed',Impact,sans-serif;font-size:29px;letter-spacing:.8px}.brand>span:last-child{white-space:nowrap}.brand-symbol{letter-spacing:-3px}.hud-brand{font-family:'Barlow Condensed',Impact,sans-serif;font-size:25px}
@media(max-width:760px){#lobby header{flex-wrap:wrap;gap:12px}.brand{font-size:25px}.brand-symbol{font-size:34px}.header-right{margin-left:auto}.hud-brand{font-size:19px;letter-spacing:.3px}.hud-brand small{font-size:9px;letter-spacing:1px}}
.operator-picker{padding:0;margin:0 0 18px;border:0;min-width:0}
.operator-picker legend{display:flex;justify-content:space-between;width:100%;margin-bottom:9px;font-size:12px;letter-spacing:1px;color:#d5e1e1}
.operator-picker legend span{font-size:10px;letter-spacing:.7px;color:#88a3a6}
.operator-picker>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.operator-picker button{display:flex;align-items:center;justify-content:center;gap:7px;background:#101f28;border:1px solid #5c78825c;padding:11px 5px;font-size:13px;font-weight:700;letter-spacing:1px;min-height:41px;transition:background .15s,border-color .15s}
.operator-picker button i{width:7px;height:12px;display:block;background:var(--suit);box-shadow:3px 0 0 color-mix(in srgb,var(--suit) 25%,transparent)}
.operator-picker button:hover,.operator-picker button.selected{border-color:var(--suit);background:color-mix(in srgb,var(--suit) 13%,#101f28);color:var(--suit)}
.operator-picker button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.crew-panel{position:absolute;right:44px;top:50%;transform:translateY(-46%);width:min(650px,calc(100% - 570px));padding:20px 24px;background:linear-gradient(145deg,#112630e8,#0a161ed9);border:1px solid #607c8766;border-top:2px solid var(--suit-color);box-shadow:0 20px 70px #0004}
.crew-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:1.5px;color:#92b0b9}
.crew-top>span:last-child{color:var(--suit-color)}
.crew-art{display:block;width:100%;height:clamp(160px,38vh,385px);object-fit:contain;image-rendering:pixelated;margin:8px auto 0;filter:drop-shadow(0 12px 14px #03090b99)}
.crew-caption{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #8faeb43b;padding-top:17px;gap:10px}
.crew-caption .eyebrow{font-size:12px;letter-spacing:2px;color:#92aab2}
.crew-caption h2{font:800 clamp(30px,3vw,48px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:3px;color:var(--suit-color);margin:6px 0 0}
.crew-stamp{border:1px solid #6f939764;padding:9px 11px;font-size:11px;line-height:1.4;letter-spacing:2px;color:#c3d6d5}
#operator-description{font-size:14px;line-height:1.5;color:#bbcbd0;margin:13px 0 18px;min-height:42px}
.crew-bottom{border-top:1px solid #8faeb425;padding-top:12px}
.crew-bottom .profile-rank{font-size:12px}.crew-bottom .rank-track{margin:8px 0 9px}
.crew-bottom>span{font-size:12px;color:#78959e}
#hud-operator{position:absolute;top:116px;left:32px;font-size:11px;letter-spacing:1.2px;color:var(--suit-color);text-shadow:0 2px 4px #000}
@media(max-height:500px){#hud-operator{display:none}}
@media(min-width:1001px){.lobby-main{padding-top:25px;padding-bottom:25px;flex-shrink:0}#lobby{overflow-y:auto;overflow-x:hidden}#lobby header,#lobby footer{flex-shrink:0}}
@media(min-width:1001px) and (max-height:850px){.lobby-main h1{font-size:64px;margin:15px 0}.lobby-main .intro{margin-bottom:15px}.deploy-card{padding:17px 19px}.operator-picker{margin-bottom:12px}.crew-panel{padding:16px 20px}.crew-art{height:clamp(120px,30vh,285px)}#operator-description{margin:9px 0 12px;min-height:0}.crew-caption{padding-top:12px}}
@media(max-width:1000px){#lobby.screen{height:100dvh;min-height:0;overflow:auto}.lobby-main{margin:0 auto;width:min(100%,480px);padding:30px 0}.deploy-card{width:100%}.crew-panel{position:relative;right:auto;top:auto;transform:none;width:min(100%,480px);margin:0 auto 28px;padding:19px;flex-shrink:0}.crew-art{height:auto;max-height:320px;aspect-ratio:3/2}.crew-caption h2{font-size:38px}.crew-top{font-size:11px}.crew-stamp{font-size:10px}.crew-bottom>span{font-size:12px}#lobby footer{flex-shrink:0}.lobby-links{max-width:none}.lobby-main h1{font-size:clamp(52px,9vw,72px)}}
@media(max-width:760px){#hud-operator{left:18px;top:103px;font-size:10px}.operator-picker legend{font-size:11px}.operator-picker legend span{font-size:9px}.operator-picker button{font-size:12px}.crew-art{max-height:260px}#operator-description{font-size:14px;min-height:42px}.crew-panel{padding:15px}.crew-top{letter-spacing:1px}}