/* Responsive reference HUD. Zones remain full halves underneath explicit buttons. */
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#182a33;font-family:Arial,system-ui,sans-serif;color:#fff}button,select,input{font:inherit}button{cursor:pointer}#game{width:100%;height:100%;touch-action:none;display:block}#hud{position:fixed;inset:0;pointer-events:none;display:none;color:#fff;text-shadow:0 2px 4px #0009}button{-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none}.pill{background:linear-gradient(135deg,#152b30df,#111d29c2);border:1px solid #e2dbbe40;border-radius:9px;box-shadow:0 5px 16px #0004}.small{font-size:10px;color:#e0e7dc;opacity:.8}.logo{font-size:34px;line-height:.78;font-weight:1000;font-style:italic;letter-spacing:-2px;color:#fff;text-shadow:2px 4px 0 #172532,-1px -1px 0 #182830}.logo span{display:block;color:#f7ca4f}.top{position:absolute;inset:0;display:flex;align-items:flex-start;padding:18px;gap:18px}.gameLogo{font-size:31px;line-height:.85;transform:rotate(-5deg)}#formPanel{padding:7px 11px;margin-left:10px;margin-top:1px}#form{font-size:12px;font-weight:900}#matchPanel{position:absolute;right:170px;top:16px;padding:8px 12px;font-size:14px}.score{font-size:15px;font-weight:900;color:#f5db83;padding-top:3px}#tip{position:absolute;left:16px;bottom:175px;font-size:10px;line-height:1.6;padding:7px 10px;opacity:.75}
#compass{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:min(260px,25vw);display:flex;justify-content:space-around;align-items:center;font-size:14px;font-weight:bold;letter-spacing:3px;color:#faf9e7}#compass i{position:absolute;left:50%;top:19px;color:#f6d780;font-size:10px;font-style:normal}#miniMap{position:absolute;top:14px;right:14px;width:142px;height:142px;border:3px solid #d7ccaaa6;border-radius:7px;overflow:hidden;background:#567365;box-shadow:0 6px 15px #0006}#miniMap canvas{display:block;width:100%;height:100%}#miniCompass{position:absolute;top:3px;left:0;right:0;text-align:center;font-size:9px;color:white;font-weight:900}#leader{position:absolute;top:101px;left:16px;width:166px;padding:3px 6px;border:0;background:transparent;box-shadow:none}.rank{display:flex;align-items:center;gap:5px;margin-bottom:5px;background:#0f2831be;border-radius:5px;padding:4px 5px;border:1px solid #e1e8d32a}.rank .portrait{width:27px;height:27px;flex-shrink:0;border-radius:4px}.rank span{flex:1}.rank b{font-size:10px;display:block}.rank i{display:block;width:90%;height:4px;border-radius:2px;background:linear-gradient(90deg,#85c861,#c7dd8c);margin-top:5px}.rank strong{font-size:12px;color:#edd99c}#killfeed{font-size:10px;top:173px!important;right:14px!important}#killfeed .pill{padding:5px 8px!important;display:inline-block}#msg{position:absolute;left:50%;top:25%;transform:translateX(-50%);font-size:18px;font-weight:900;text-align:center;color:#fff4c5;opacity:0;transition:opacity .15s;white-space:nowrap}
#moveZone,#lookZone{position:absolute;top:0;height:100%;width:50%;touch-action:none;overscroll-behavior:none;pointer-events:auto;z-index:3}#moveZone{left:0}#lookZone{right:0}#lookZone:after{content:'DRAG TO TURN';position:absolute;right:9px;top:48%;writing-mode:vertical-rl;font-size:8px;letter-spacing:1px;color:#fffff04d;pointer-events:none}#joy{position:absolute;left:20px;bottom:20px;width:130px;height:130px;border-radius:50%;border:3px solid #ffffe438;background:radial-gradient(#33494318,#c2d5b42b);opacity:0;pointer-events:none;z-index:6;touch-action:none}#knob{position:absolute;left:43px;top:43px;width:44px;height:44px;border-radius:50%;background:#f1f1d487;border:2px solid #ffffff65;box-shadow:0 4px 10px #0002}.controls{--attack-size:96px;--special-size:76px;--jump-size:62px;position:absolute;right:max(21px,calc(env(safe-area-inset-right) + 8px));bottom:max(20px,calc(env(safe-area-inset-bottom) + 8px));width:186px;height:176px;pointer-events:none;z-index:50}.btn{width:76px;height:76px;border-radius:50%;border:2px solid #fff0cf87;background:radial-gradient(#425c52c9,#182e38e6);color:#fffef1;box-shadow:0 0 0 3px #20373a80,0 4px 12px #0005;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;pointer-events:auto}.btn svg{width:32px;height:32px;fill:#fff7db;stroke:#fff7db;stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round}.btn small{font-size:7px;font-weight:900;line-height:1.1;margin-top:4px}.attackBtn{border-color:#ffdfa2;background:radial-gradient(#6d715cb8,#293b36e6)}.btn:active{transform:scale(.92);background:#826d35}.btn.ready{border-color:#ffdd79;box-shadow:0 0 17px #ffe6a280}.btn em{position:absolute;bottom:-13px;white-space:nowrap;font-style:normal;color:#ffec9d;font-size:8px;font-weight:bold}.cd{position:absolute;inset:0;display:none;align-items:center;justify-content:center;border-radius:inherit;background:#101d2cce;font-size:24px;color:#fff;font-weight:900}.cooling .cd{display:flex}
.portrait{display:inline-block;background-repeat:no-repeat;background-color:#394a45;width:100%;height:100%;border-radius:7px;background-position:center}#hpbox{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);width:min(310px,35vw);padding-left:4px}.hpLabels{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:bold;color:#fffce7;padding-bottom:5px}#hpbar{height:12px;border:1px solid #e2dbc470;border-radius:4px;overflow:hidden;background:#1b3036d9;box-shadow:0 2px 6px #0005}#hp{height:100%;width:100%;background:linear-gradient(#c7e290,#89be4d);border-bottom:2px solid #679741}#resourcebar{height:5px;background:#19343ebe;border-radius:4px;margin-top:3px;overflow:hidden}#resource{height:100%;background:#66b7cd;width:100%}#hotbar{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto;z-index:40}.hot{width:57px;height:54px;border:2px solid #c2c6ad70;border-radius:6px;background:#20383ddb;color:#ebece1;padding:3px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 10px #0005}.hot.active{border-color:#ffdf89;box-shadow:0 0 9px #eeb5485c;transform:translateY(-2px)}.hot b{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:23px;color:#e9d29a}.hot b.portrait{width:32px;height:32px}.hot small{font-size:6px;font-weight:900;padding-top:2px}.hot em{position:absolute;right:2px;top:1px;background:#e6e8d6;color:#1b3237;font-size:8px;border-radius:3px;padding:1px 3px;font-style:normal}.hot>span{position:absolute;inset:0;background:#101d2cd9;display:none;align-items:center;justify-content:center;font-size:19px;border-radius:4px}.hot.cooling>span{display:flex}.healSlot b{color:#df8890}.healSlot{border-color:#cb929b}#abilityTip{position:absolute;left:50%;bottom:124px;transform:translateX(-50%);font-size:9px;color:#ffefd1;text-align:center;width:350px}#pauseButton{position:absolute;right:17px;top:163px;border:1px solid #ffffff4a;color:#f6f2d7;background:#173139ab;border-radius:6px;width:32px;height:30px;pointer-events:auto;z-index:60}#pauseOverlay{position:absolute;inset:0;background:#152b37d9;display:none;align-items:center;justify-content:center;pointer-events:auto;z-index:90}#pauseOverlay .tab{margin-top:16px;width:100%}
#lobby{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(0deg,#142834ff 0%,#182d3ccc 17%,transparent 28%,transparent 75%,#122637ee 93%),linear-gradient(90deg,#142c3cf2 0%,#152e3bdb 24%,transparent 39%,transparent 83%,#14283599 100%),#142834}.lobbyTop{display:flex;align-items:center;gap:32px;padding:23px 30px;background:linear-gradient(#182e3ff0,#152c3a40)}.lobbyTop .logo{font-size:44px;padding:7px 20px 8px 0;background:#1b30428a;border-radius:12px}.tabs{display:flex;gap:9px}.tab{border:1px solid #e1ddbe44;border-radius:7px;padding:10px 19px;background:#233b49df;color:#ebeddf;font-weight:900;font-size:12px}.tab.active{background:#edecd9;color:#233945;transform:skew(-5deg)}.profile{margin-left:auto;background:#1a303ee8;padding:10px 15px;border:1px solid #ffffff30;border-radius:8px;font-size:13px;font-weight:bold}.profile small{color:#c6d3d3;font-size:10px}.lobbyBody{display:flex;flex:1;align-items:center;padding:0 30px 100px}.panel{width:min(355px,38vw);background:linear-gradient(135deg,#142936f5,#1d343eeb);border:1px solid #d7d8bd54;border-radius:13px;padding:22px;box-shadow:0 13px 40px #0004}.panel h1{font-size:29px;line-height:1;margin:9px 0 11px;color:#fff7da;font-weight:1000}.eyebrow{font-size:9px;font-weight:900;letter-spacing:1.5px;color:#c9d8c5}.lobbyHint{font-size:11px;line-height:1.5;color:#ccdbd7}.modeRow{display:flex;flex-direction:column;gap:4px;background:#ffffff08;border:1px solid #ffffff19;padding:12px 10px;margin-top:12px;border-radius:7px;font-size:12px}.modeRow span{font-size:10px;color:#c8d3cf}.playBtn{width:100%;margin-top:16px;border:2px solid #fff0ac;border-radius:8px;background:linear-gradient(#ffe56a,#e4ae28);color:#21313c;padding:15px;font-size:24px;font-weight:1000;box-shadow:0 5px 0 #946a20}.playBtn:disabled{opacity:.55}.playBtn:active{transform:translateY(3px);box-shadow:0 2px 0 #946a20}.screen{display:none}.screen.active{display:block}.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.archiveCard{border:1px solid #bdbf9952;border-radius:7px;background:#294044;color:#eeeedf;padding:4px;font-size:7px;font-weight:bold;display:flex;flex-direction:column;align-items:center;gap:3px}.archiveCard .portrait{width:45px;height:43px}.archiveCard.active{border-color:#f9da80;background:#496258}.lobbyRoster{position:absolute;bottom:33px;left:50%;transform:translateX(-50%);display:flex;gap:8px;background:#182e3d85;border-radius:10px;padding:6px}.lobbyRoster .archiveCard{width:76px;height:78px;font-size:8px;background:#223844e8}.lobbyRoster .portrait{width:52px;height:53px}.version{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:9px;color:#dde3caa8;letter-spacing:.4px}.setting{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:17px 0;font-size:12px}.setting input,.setting select{width:120px}.mapPreview{width:100%;height:150px;object-fit:cover;border:1px solid #c1d1b767;border-radius:6px;margin:12px 0}
@media(pointer:fine){#moveZone,#lookZone,#joy{display:none}}
.hot em[hidden]{display:none}
@media(max-height:550px){.top{padding:10px 12px;gap:7px}.gameLogo{font-size:23px}#formPanel{padding:5px 7px;margin-left:5px}#form{font-size:10px}.small{font-size:8px}#matchPanel{right:132px;top:9px;font-size:11px;padding:6px 8px}.score{font-size:12px}#miniMap{top:9px;right:10px;width:112px;height:112px}#leader{top:78px;left:10px;width:135px;padding:0}.rank{padding:3px 4px;margin-bottom:3px}.rank .portrait{width:24px;height:24px}.rank b{font-size:8px}.rank i{height:3px;margin-top:3px}#compass{top:11px;font-size:11px}#compass i{top:14px}#killfeed{top:135px!important;font-size:8px}#msg{font-size:14px}.controls{--attack-size:76px;--special-size:62px;--jump-size:52px;right:max(16px,calc(env(safe-area-inset-right) + 8px));bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));width:154px;height:144px}.btn{width:58px;height:58px}.btn svg{width:25px;height:25px}.btn small{font-size:5px;margin-top:2px}.btn em{font-size:6px;bottom:-10px}#hotbar{bottom:10px;gap:4px}.hot{width:43px;height:43px}.hot b,.hot b.portrait{width:25px;height:25px;font-size:18px}.hot small{font-size:5px}#hpbox{bottom:62px;width:min(250px,33vw)}#hpbar{height:9px}.hpLabels{font-size:8px;padding-bottom:3px}#resourcebar{height:3px;margin-top:2px}#abilityTip{bottom:94px;font-size:7px}#pauseButton{right:11px;top:128px;width:25px;height:24px}#tip{bottom:145px;font-size:8px;left:10px}.lobbyTop{padding:9px 15px;gap:16px}.lobbyTop .logo{font-size:28px;padding:3px 13px 3px 0}.tab{font-size:9px;padding:7px 10px}.tabs{gap:5px}.profile{font-size:10px;padding:6px 9px}.profile small{font-size:8px}.lobbyBody{padding:0 15px 67px}.panel{padding:12px 14px;width:min(295px,36vw);border-radius:9px}.panel h1{font-size:22px;margin:6px 0}.eyebrow{font-size:7px;letter-spacing:.7px}.lobbyHint{font-size:8px}.modeRow{font-size:9px;padding:7px 8px;margin-top:7px;gap:2px}.modeRow span{font-size:7px}.playBtn{font-size:18px;padding:9px;margin-top:10px}.lobbyRoster{bottom:23px;gap:4px;padding:4px}.lobbyRoster .archiveCard{width:57px;height:54px;font-size:6px}.lobbyRoster .portrait{width:34px;height:34px}.version{font-size:6px;bottom:5px}.setting{font-size:9px;margin:9px 0}.setting input,.setting select{width:90px}.roster{margin:5px 0;gap:4px}.archiveCard .portrait{width:27px;height:26px}.archiveCard{font-size:5px;padding:3px}.mapPreview{height:86px;margin:6px 0}}
@media(pointer:coarse){#tip{display:none}}
@media(max-width:560px) and (orientation:portrait){.lobbyTop{flex-wrap:wrap;padding:15px}.tabs{order:3;width:100%;justify-content:center}.lobbyBody{padding:10px 15px 100px;align-items:flex-end}.panel{width:100%}.lobbyRoster{bottom:28px;gap:3px}.lobbyRoster .archiveCard{width:49px;font-size:6px}.lobbyRoster .portrait{width:36px;height:42px}#formPanel{display:none}#matchPanel{right:127px;font-size:10px}#miniMap{width:105px;height:105px}.gameLogo{font-size:24px}#compass{display:none}#leader{width:130px;top:90px}#hpbox{width:48vw}.controls{--attack-size:76px;--special-size:62px;--jump-size:52px;right:max(16px,calc(env(safe-area-inset-right) + 8px));bottom:max(136px,calc(env(safe-area-inset-bottom) + 136px));width:154px;height:144px}.btn{width:56px;height:56px}.btn small{font-size:5px}.btn svg{width:24px;height:24px}#hotbar{bottom:15px}.hot{width:50px;height:48px}#abilityTip{width:200px;font-size:7px}#pauseOverlay .panel{width:90vw}}

#buildVersion{position:absolute;left:16px;top:77px;font-size:9px;line-height:12px;color:#edf2ce;opacity:.75;pointer-events:none;text-shadow:0 1px 2px #000}
@media(max-height:550px){#buildVersion{left:10px;top:61px;font-size:7px}}

#poisonStatus{position:absolute;bottom:146px;left:50%;transform:translateX(-50%);background:#1d3c24e6;border:1px solid #93e86d;border-radius:8px;padding:4px 8px;color:#d9ffc4;font-size:9px;pointer-events:none;white-space:nowrap}#poisonStatus[hidden]{display:none}#hpbar.poisoned{box-shadow:0 0 8px #9bf069}
@media(max-height:550px){#poisonStatus{bottom:114px;font-size:8px;padding:3px 6px}}

/* Compact bottom HUD leaves the original third-person framing and feet clear. */
#hotbar{bottom:8px;gap:4px}.hot{width:50px;height:46px}.hot b,.hot b.portrait{width:28px;height:28px;font-size:21px}.hot small{font-size:5px}
#hpbox{bottom:64px;width:min(270px,31vw);padding-left:0}.hpLabels{font-size:9px;padding-bottom:3px}#hpbar{height:7px}#resourcebar{height:3px;margin-top:2px}
#abilityTip{bottom:97px}#poisonStatus{bottom:117px}
@media(max-height:550px){#hotbar{bottom:6px;gap:3px}.hot{width:36px;height:35px}.hot b,.hot b.portrait{width:23px;height:23px;font-size:17px}.hot small{font-size:5px;padding-top:1px}#hpbox{bottom:48px;width:min(240px,31vw)}.hpLabels{font-size:7.5px;padding-bottom:2px}#hpbar{height:6px}#resourcebar{height:2px;margin-top:1px}#abilityTip{bottom:73px;font-size:7px}#poisonStatus{bottom:86px;font-size:7px}}
@media(max-height:380px){#hotbar{bottom:4px}.hot{width:34px;height:32px}.hot b,.hot b.portrait{width:21px;height:21px}#hpbox{bottom:43px}.hpLabels{font-size:7px;padding-bottom:1px}#hpbar{height:5px}#abilityTip{bottom:66px}#poisonStatus{bottom:77px}}
@media(max-width:560px) and (orientation:portrait){#hpbox{width:min(270px,66vw)}}

/* Lobby rows stay in normal flow: menu, content, roster and version never overlap. */
#lobby{
 background:#142834;isolation:isolate;
 padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
 gap:0;
}
/* The embedded PNG belongs to an image element, outside CSS variable parsing. */
:is(#lobbyBackdrop,#onlineCampBackdrop){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% center;z-index:-2;pointer-events:none;user-select:none}
#lobbyMotion{position:absolute;z-index:-2;pointer-events:none;user-select:none;transform-origin:top left;image-rendering:auto}
#lobby::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#172831bd 0%,#1728314d 31%,transparent 52%);z-index:-1;pointer-events:none}
#lobby .lobbyTop{flex:none;min-height:80px;padding:14px 24px;gap:24px;background:linear-gradient(#142330d9,#152a3426)}
#lobby .lobbyTop .logo{font-size:40px;padding:6px 10px 6px 0;background:transparent}
#lobby .tabs{gap:8px;flex-wrap:nowrap}
#lobby .tab{min-height:44px;padding:10px 15px;font-size:12px;border-radius:6px}
#lobby .profile{font-size:13px;padding:10px 12px;line-height:1.3;flex-shrink:0}
#lobby .profile small{font-size:10px}
#lobby .lobbyBody{flex:1;min-height:0;padding:8px 24px;align-items:center;overflow:hidden}
#lobby .panel{width:min(350px,35vw);padding:18px;max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:10px;background:linear-gradient(135deg,#152834ed,#1b343ee3);scrollbar-width:thin}
#lobby .panel h1{font-size:28px;line-height:1.05;margin:8px 0 10px}
#lobby .eyebrow{font-size:9px;line-height:1.3;letter-spacing:1px}
#lobby .lobbyHint{font-size:11px;line-height:1.45}
#lobby .lobbyMeta{display:flex;gap:8px;margin-top:12px}
#lobby .modeRow{flex:1;min-width:0;margin-top:0;padding:9px 8px;gap:4px;font-size:11px;line-height:1.2}
#lobby .modeRow span{font-size:10px}
#lobby .playBtn{min-height:50px;margin-top:14px;font-size:25px;line-height:1.15;padding:12px}
#lobby .roster{gap:8px;margin:10px 0}
#lobby .archiveCard{min-height:56px;font-size:9px;padding:5px;gap:4px}
#lobby .archiveCard .portrait{width:36px;height:36px;border-radius:5px}
#lobby #archiveDetail{font-size:11px;line-height:1.45}
#lobby .lobbyRoster{position:relative;bottom:auto;left:auto;transform:none;flex:none;align-self:center;max-width:calc(100% - 32px);padding:8px;gap:8px;margin:4px 0 0;min-width:0;background:#152833da;border:1px solid #e1d5ae3b;border-radius:8px}
#lobby .lobbyRoster .archiveCard{width:72px;height:68px;min-height:0;flex-shrink:0;font-size:9px;padding:5px;gap:3px}
#lobby .lobbyRoster .portrait{width:42px;height:42px}
#lobby .version{position:relative;bottom:auto;left:auto;right:auto;flex:none;padding:7px 10px 8px;line-height:1.2;font-size:9px;background:transparent}
#lobby .setting{margin:13px 0;font-size:12px;gap:8px}
#lobby .setting input,#lobby .setting select{width:120px;min-height:30px}
#lobby .mapPreview{height:140px;margin:10px 0}
@media(max-height:550px) and (orientation:landscape){
 #lobby .lobbyTop{min-height:66px;padding:8px 18px;gap:18px}
 #lobby .lobbyTop .logo{font-size:32px;padding:5px 6px 5px 0}
 #lobby .tab{min-height:40px;padding:9px 13px;font-size:11px}
 #lobby .profile{font-size:11px;padding:8px 10px}
 #lobby .lobbyBody{padding:4px 18px}
 #lobby .panel{width:min(325px,35vw);padding:14px}
 #lobby .panel h1{font-size:24px;margin:6px 0 8px}
 #lobby .eyebrow{font-size:8px;letter-spacing:.8px}
 #lobby .lobbyHint{font-size:10px;line-height:1.35}
 #lobby .lobbyMeta{margin-top:10px;gap:6px}
 #lobby .modeRow{font-size:10px;padding:7px;gap:3px}
 #lobby .modeRow span{font-size:9px}
 #lobby .playBtn{min-height:44px;margin-top:11px;padding:9px;font-size:23px}
 #lobby .lobbyRoster{padding:6px;gap:6px;margin-top:4px}
 #lobby .lobbyRoster .archiveCard{width:60px;height:58px;font-size:8px;padding:4px}
 #lobby .lobbyRoster .portrait{width:33px;height:33px}
 #lobby .version{padding:6px 10px;font-size:8px}
 #lobby .roster{gap:6px;margin:8px 0}
 #lobby .archiveCard .portrait{width:32px;height:32px}
 #lobby #archiveDetail{font-size:10px}
 #lobby .mapPreview{height:98px;margin:8px 0}
 #lobby .setting{margin:10px 0;font-size:11px}
}
@media(max-width:760px) and (orientation:landscape){
 #lobby .lobbyTop{padding-left:12px;padding-right:12px;gap:12px}
 #lobby .lobbyTop .logo{font-size:29px}
 #lobby .tabs{gap:5px}
 #lobby .tab{padding-left:9px;padding-right:9px;font-size:10px}
 #lobby .profile{font-size:10px;padding:7px 8px}
 #lobby .lobbyBody{padding-left:12px;padding-right:12px}
 #lobby .panel{width:285px;max-width:44vw}
 #lobby .lobbyRoster .archiveCard{width:54px}
}
@media(max-height:380px) and (orientation:landscape){
 #lobby .lobbyTop{min-height:56px;padding-top:5px;padding-bottom:5px}
 #lobby .panel{padding:11px 13px}
 #lobby .panel h1{font-size:22px;margin:4px 0 6px}
 #playScreen .eyebrow,#playScreen .lobbyInstructions{display:none}
 #playScreen .modeRow b{display:none}
 #lobby .lobbyMeta{margin-top:8px}
 #lobby .modeRow{padding:6px}
 #lobby .playBtn{margin-top:9px;min-height:44px;padding:9px;font-size:22px}
 #lobby .lobbyRoster{padding:5px;gap:5px;margin-top:2px}
 #lobby .lobbyRoster .archiveCard{height:50px;width:54px;padding:3px;font-size:8px}
 #lobby .lobbyRoster .portrait{width:28px;height:28px}
 #lobby .version{font-size:7px;padding:4px 8px}
}
@media(max-width:600px) and (orientation:portrait){
 :is(#lobbyBackdrop,#onlineCampBackdrop){object-position:62% center}
 #lobby::before{background:linear-gradient(0deg,#142830e6 0%,#14283055 35%,transparent 60%)}
 #lobby .lobbyTop{flex-wrap:wrap;min-height:0;padding:14px 14px 8px;gap:12px;justify-content:space-between}
 #lobby .lobbyTop .logo{font-size:36px;padding:4px 0}
 #lobby .profile{font-size:12px;padding:9px 10px;margin-left:auto}
 #lobby .tabs{order:3;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 #lobby .tab{min-height:44px;font-size:10px;padding:9px 5px;letter-spacing:0}
 #lobby .lobbyBody{padding:10px 14px 6px;align-items:flex-end}
 #lobby .panel{width:100%;max-width:none;padding:17px;max-height:100%}
 #lobby .panel h1{font-size:27px;margin:8px 0 10px}
 #lobby .eyebrow{font-size:9px}
 #lobby .lobbyHint,#lobby #archiveDetail{font-size:11px}
 #lobby .playBtn{min-height:52px;font-size:25px;padding:12px}
 #lobby .lobbyRoster{width:calc(100% - 28px);max-width:none;padding:6px;gap:4px;margin:4px 0 0}
 #lobby .lobbyRoster .archiveCard{flex:1;min-width:0;width:auto;height:58px;font-size:8px;padding:3px}
 #lobby .lobbyRoster .portrait{width:31px;height:31px}
 #lobby .version{font-size:8px;padding:7px 8px}
 #lobby .archiveCard .portrait{width:42px;height:42px}
 #lobby .roster{gap:8px;margin:10px 0}
 #lobby .mapPreview{height:135px}
}
@media(max-width:370px) and (orientation:portrait){
 #lobby .lobbyTop{padding:10px 10px 6px;gap:8px}
 #lobby .tabs{gap:4px}
 #lobby .tab{font-size:9px;padding-left:3px;padding-right:3px}
 #lobby .lobbyBody{padding-left:10px;padding-right:10px}
 #lobby .lobbyRoster{width:calc(100% - 20px);gap:4px;padding:5px}
 #lobby .lobbyRoster .archiveCard{font-size:7px}
}

/* Three thumb buttons, ordered by reach and size. Gaps remain camera/tap space. */
.controls .btn{position:absolute}.controls #attack{width:var(--attack-size);height:var(--attack-size);right:0;bottom:0}.controls #special{width:var(--special-size);height:var(--special-size);left:0;bottom:10px}.controls #jump{width:var(--jump-size);height:var(--jump-size);left:7px;top:0}.controls #attack svg{width:38px;height:38px}.controls #attack small{font-size:8px}.controls #special small{max-width:85%;text-align:center;font-size:7px}.controls #jump small{font-size:7px}
#pickupTip{position:absolute;transform:translateX(-50%);pointer-events:none;z-index:8;padding:4px 7px;border:1px solid #f9db7a90;border-radius:5px;background:#152b32d9;color:#ffe793;white-space:nowrap;font-size:9px;font-weight:bold}#pickupTip[hidden]{display:none}
@media(max-height:550px){.controls #jump{left:5px}.controls #attack svg{width:32px;height:32px}.controls #attack small{font-size:7px}.controls #special small,.controls #jump small{font-size:6px}}
@media(max-width:560px) and (orientation:portrait){.controls #jump{left:5px}}
@media(pointer:fine){#pickupTip{display:none}}

/* v158: the match view keeps only navigation, input and vital status. */
#formPanel[hidden]{display:none!important}
#killfeed{position:absolute;left:max(16px,calc(env(safe-area-inset-left) + 12px));right:auto!important;top:max(18px,calc(env(safe-area-inset-top) + 12px))!important;width:min(310px,38vw);text-align:left;font-size:13px;font-weight:700;line-height:1.6;pointer-events:none;z-index:8;text-shadow:0 1px 3px #0009}
.eliminationLine{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;box-shadow:none;padding:0;margin:0 0 3px;color:#fff;animation:eliminationIn .16s ease-out}
@keyframes eliminationIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
#hudMenu{position:absolute;right:max(14px,calc(env(safe-area-inset-right) + 10px));top:max(164px,calc(env(safe-area-inset-top) + 164px));display:flex;gap:8px;pointer-events:auto;z-index:60}
#hudMenu button{position:static;width:42px;height:40px;min-width:42px;border:1px solid #ffffff45;border-radius:7px;background:#173139b3;color:#fff8df;box-shadow:0 2px 7px #0003;display:grid;place-items:center;font-size:18px;padding:8px;touch-action:manipulation}
#hudMenu button:focus-visible,#closeScoreboard:focus-visible{outline:2px solid #ffdf89;outline-offset:3px}
#scoreboardButton svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
#scoreboardOverlay{position:absolute;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:#10232c9e;pointer-events:auto;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));text-shadow:none}
#scoreboardOverlay[hidden]{display:none}
.scoreboardCard{width:min(490px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(135deg,#19333bf7,#152732fa);border:1px solid #e8dfb877;border-radius:14px;box-shadow:0 16px 48px #0007;padding:20px}
.scoreboardHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0}
.scoreboardHeader h2{margin:0;color:#fff3ce;font-size:23px;letter-spacing:1px;font-weight:900}
.scoreboardHeader p{margin:6px 0 0;color:#bacac9;font-size:10px;letter-spacing:.7px}
#closeScoreboard{border:1px solid #ffffff38;color:#f2f0db;background:#ffffff0c;border-radius:7px;width:38px;height:38px;flex-shrink:0;font-size:26px;line-height:1;touch-action:manipulation}
.scoreboardSummary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 11px;margin-top:7px;color:#d3e0d9;font-size:11px;letter-spacing:.5px;flex-shrink:0}
.scoreboardSummary strong{color:#ffdc82;font-size:22px}
.scoreboardScroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#8aa39c #172d33}
#scoreboardTable{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;table-layout:fixed}
#scoreboardTable th{text-align:left;color:#acc4bc;font-size:10px;letter-spacing:.8px;padding:8px 10px;background:#203b40;position:sticky;top:0;z-index:1}
#scoreboardTable th:first-child{width:40px}#scoreboardTable th:last-child{width:68px;text-align:right}
#scoreboardTable td{padding:6px 10px;border-bottom:1px solid #ffffff0c}
.scoreRank{color:#bdcfca}.scorePlayer>div{display:flex;gap:10px;align-items:center;min-width:0}.scorePlayer .portrait{width:29px;height:29px;flex-shrink:0;background-color:#263f40;border-radius:5px}.scorePlayer span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.scorePlayer small{color:#aadeb7;font-size:8px;padding:2px 4px;border:1px solid #aadfb750;border-radius:3px;margin-left:4px}.scoreElims{text-align:right;color:#f1d696;font-weight:900}
#scoreboardTable .yourScore{background:#9bcc7914}.yourScore .scoreRank,.yourScore .scorePlayer{color:#e8f7df}
.scoreboardCard footer{padding-top:12px;flex-shrink:0;text-align:center;color:#9db7b0;font-size:10px}
@media(max-height:550px){
 #killfeed{font-size:11px;left:max(12px,calc(env(safe-area-inset-left) + 10px));top:max(13px,calc(env(safe-area-inset-top) + 8px))!important}
 #hudMenu{right:max(10px,calc(env(safe-area-inset-right) + 8px));top:max(129px,calc(env(safe-area-inset-top) + 129px));gap:6px}
 #hudMenu button{width:38px;min-width:38px;height:36px;padding:7px}
 .scoreboardCard{width:min(440px,100%);padding:13px 16px;border-radius:10px}.scoreboardHeader h2{font-size:18px}.scoreboardHeader p{margin-top:4px;font-size:9px}.scoreboardSummary{padding:6px 0;margin-top:2px;font-size:10px}.scoreboardSummary strong{font-size:18px}#scoreboardTable td{padding:4px 9px}.scorePlayer .portrait{width:26px;height:26px}.scoreboardCard footer{padding-top:8px;font-size:9px}
}
@media(max-width:560px) and (orientation:portrait){#killfeed{width:calc(100% - 140px);font-size:11px}#hudMenu{top:max(129px,calc(env(safe-area-inset-top) + 129px))}.scoreboardCard{padding:16px}.scorePlayer>div{gap:8px}}

/* BEAST FLOW v159 — quieter glass surfaces, icon navigation and focused actions. */
:root{--bf-ink:#0c1a28;--bf-muted:#b2c5cd;--bf-gold:#ffe36d;--bf-cyan:#7ddcf2}
button,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--bf-cyan);outline-offset:3px}
#lobby{background:#102231;color:#f4f8fa}#lobby::before{background:linear-gradient(90deg,#0b182be6,#0b182b75 35%,#0b182b08 67%),linear-gradient(0deg,#07132485,transparent 30%)}
#lobby .lobbyTop{padding:18px 28px;gap:26px;min-height:106px;background:linear-gradient(#0d1b2dc9,transparent)}
.brandLogo{width:146px;height:98px;object-fit:contain;filter:drop-shadow(0 4px 8px #0005);flex-shrink:0;user-select:none}
#lobby .tabs{gap:7px;padding:5px;background:#0d1a2875;border:1px solid #ffffff12;border-radius:18px;backdrop-filter:blur(16px)}
#lobby .tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 16px;border:0;border-radius:12px;background:transparent;color:#c4d4dc;font-size:11px;letter-spacing:.7px;transform:none;transition:background .18s,color .18s,box-shadow .18s}
.tab svg,.secondaryBtn svg,.playBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#lobby .tab:hover{background:#ffffff10;color:white}#lobby .tab.active{color:#122435;background:linear-gradient(135deg,#fff3b0,#ffdf70);box-shadow:0 3px 14px #ffdc6c26}
#lobby .profile{display:flex;gap:10px;align-items:center;border:1px solid #ffffff16;border-radius:15px;background:#0d1a2870;backdrop-filter:blur(16px);padding:12px 16px;font-size:12px;max-width:190px}.profile b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile small{display:block;margin-top:4px;font-weight:600;letter-spacing:1px}.profileDot,.liveDot,.modeDot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8de8bc;box-shadow:0 0 10px #8de8bc55;flex-shrink:0}.profileDot{width:9px;height:9px}.liveDot{margin-right:5px}
#lobby .lobbyBody{padding:0 28px 18px;align-items:center}#lobby .panel{width:min(388px,39vw);padding:25px;border-radius:24px;border:1px solid #cfeaff26;background:linear-gradient(135deg,#132639ee,#0e1d2cdd);backdrop-filter:blur(18px);box-shadow:0 20px 60px #020a164a;scrollbar-color:#69808d transparent}
#lobby .panel h1{font-size:33px;letter-spacing:-.8px;margin:12px 0 8px;color:#fff;line-height:1.08}#lobby .eyebrow{font-size:9px;letter-spacing:1.8px;color:#a6c0cc}#lobby .lobbyHint{font-size:12px;color:#bdcdd7}
.sessionModes{display:flex;gap:5px;padding:4px;background:#07132166;border:1px solid #ffffff0a;border-radius:12px;margin:20px 0 18px}.modeChoice{flex:1;min-height:38px;border:0;border-radius:9px;background:transparent;color:#89a3b1;font-weight:800;font-size:10px;letter-spacing:1px;display:flex;align-items:center;justify-content:center;gap:7px}.modeChoice.active{color:#eafaff;background:#243d50;box-shadow:0 2px 6px #0002}.modeChoice:disabled{opacity:.4;cursor:default}
.nameField{display:block}.nameField>span{display:flex;justify-content:space-between;align-items:center;color:#e4edf3;font-weight:800;letter-spacing:1.2px;font-size:9px}.nameField small{color:#7993a3;font-size:8px}.nameField input{display:block;width:100%;padding:13px 14px;border:1px solid #a2cfed30;border-radius:12px;background:#07162677;color:#fff;font-size:13px;margin-top:8px;min-height:46px;box-sizing:border-box}.nameField input::placeholder{color:#829cae;font-size:11px}.fieldHint{font-size:10px;color:#8aa6b6;margin-top:8px;line-height:1.5}
.playBtn,#lobby .playBtn{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #fff3b0;border-radius:13px;min-height:54px;padding:14px 17px;background:linear-gradient(120deg,#fff09b,#ffdf61 60%,#f1bf39);box-shadow:0 5px 18px #f1bf3929,inset 0 1px #fff7cf;transform:none;color:#182938;font-size:15px;letter-spacing:1px;font-weight:900;margin-top:20px}.playBtn span{flex:1;text-align:left}.playBtn svg:first-child{fill:currentColor;stroke-width:1.3}.playBtn:hover{filter:brightness(1.06)}.playBtn:active{transform:translateY(1px);box-shadow:0 2px 8px #f1bf3925}.playBtn:disabled{cursor:wait;filter:saturate(.5);opacity:.6}
.connectionStatus{font-size:10px;line-height:1.5;color:#93b0c0;margin:12px 0 0;min-height:15px}.connectionStatus.error{color:#ffbdad}#lobby .version{font-size:8px;letter-spacing:1.2px;color:#d3e4ed66;padding:6px 10px}
#lobby .roster{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:16px 0}#lobby .archiveCard{border-radius:10px;min-height:62px;font-size:7px;gap:5px;border:1px solid #ffffff12;background:#07152366;padding:6px 2px;color:#9ab4c3}#lobby .archiveCard.active{border-color:#ffe478a8;background:#ffe47816;color:#ffe995}#lobby .archiveCard .portrait{width:32px;height:32px;background-color:transparent}
.characterHeading{display:flex;align-items:center;gap:13px;margin:12px 0 15px}.characterHeading .portrait{width:64px;height:64px;background-color:#263e4b;border:1px solid #ffffff19;border-radius:15px}.characterHeading h2{font-size:20px;margin:0 0 6px;color:white;letter-spacing:.5px}.characterHeading p{font-size:10px;color:#86bbcf;margin:0}.characterStats{display:flex;gap:6px;margin-bottom:13px}.characterStats span{flex:1;text-align:center;font-size:9px;color:#9cb8c7;border:1px solid #ffffff12;background:#ffffff04;padding:8px 3px;border-radius:9px}.characterStats b{color:white;margin-right:3px}
.skillCard{border:1px solid #ffffff0e;border-radius:11px;padding:10px 12px;background:#07172570;margin-top:7px}.skillCard header{display:flex;align-items:center;justify-content:space-between;gap:8px}.skillCard h3{font-size:10px;color:#eaf4fa;margin:0;font-weight:800;letter-spacing:.3px}.skillCard small{font-size:8px;color:#ffe28b;white-space:nowrap}.skillCard p{font-size:10px;line-height:1.5;margin:5px 0 0;color:#9fb8c6}
#pauseOverlay{background:#06111c88;backdrop-filter:blur(8px);padding:14px;text-shadow:none}.pauseCard{width:min(410px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;border:1px solid #cfeaff30;border-radius:24px;background:linear-gradient(140deg,#1a3045f5,#0d1d2ef7);box-shadow:0 24px 70px #0005;padding:23px 26px;text-align:center}.pauseLogo{display:block;width:105px;height:70px;object-fit:contain;margin:0 auto 10px}.pauseCard .eyebrow{color:#81adbf;font-size:8px;letter-spacing:2px}.pauseCard h1{font-size:25px;margin:8px 0;color:#fff;letter-spacing:.5px}.pauseCard>p{font-size:11px;color:#9fb9c8;line-height:1.5;margin:0 0 15px}.controlGuide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:13px 0}.controlGuide>div{padding:10px 4px;border-radius:10px;background:#08172677;border:1px solid #ffffff0b}.controlGuide b{display:block;font-size:8px;letter-spacing:1px;color:#d5eaf4}.controlGuide span{display:block;font-size:9px;color:#8ba9bb;margin-top:5px}.pauseCard .playBtn{margin-top:16px}.secondaryBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;margin-top:10px;border:1px solid #d0eaff24;border-radius:12px;background:#ffffff05;color:#abc3d2;font-size:10px;font-weight:800;letter-spacing:1px}.secondaryBtn:hover{background:#ffffff0d;color:white}
#death{position:absolute;left:50%;top:24%;transform:translateX(-50%);display:none;flex-direction:column;gap:6px;text-align:center;pointer-events:none;background:#10273988;border:1px solid #b1e9ff33;border-radius:13px;padding:12px 24px;text-shadow:0 1px 3px #0006;z-index:12}#death b{color:#d5f7ff;font-size:13px;letter-spacing:1.8px}#death span{font-size:10px;color:#a6d1e2}
#networkStatus{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);padding:9px 14px;border-radius:12px;color:#f4edcf;background:#14283ae8;border:1px solid #ffdc7945;font-size:11px;text-align:center;pointer-events:none;z-index:91;max-width:85vw}#networkStatus[hidden]{display:none}.scoreboardCard{border-radius:20px;border-color:#b5ddf633;background:linear-gradient(140deg,#1a3045f5,#0d1d2ef7);backdrop-filter:blur(16px)}
@media(max-height:600px) and (orientation:landscape){
 #lobby .lobbyTop{padding:7px 20px;min-height:76px;gap:18px}.brandLogo{width:114px;height:72px}#lobby .tab{min-height:42px;padding:9px 13px;font-size:10px}#lobby .profile{padding:9px 12px;font-size:11px}#lobby .lobbyBody{padding:0 20px 8px}#lobby .panel{width:min(365px,40vw);padding:17px 20px;border-radius:20px}#lobby .panel h1{font-size:27px;margin:8px 0 6px}#lobby .lobbyHint{font-size:10px}.sessionModes{margin:13px 0 12px}.modeChoice{min-height:32px}.nameField input{min-height:39px;padding:10px 12px;margin-top:6px}.fieldHint{margin-top:5px;font-size:9px}#lobby .playBtn{min-height:47px;padding:11px 14px;font-size:13px;margin-top:14px}.connectionStatus{margin-top:8px;font-size:9px}.pauseCard{padding:17px 23px;width:min(420px,100%);border-radius:20px}.pauseLogo{width:84px;height:55px;margin-bottom:5px}.pauseCard h1{font-size:21px;margin:6px 0}.pauseCard>p{font-size:10px;margin-bottom:10px}.controlGuide{margin:10px 0;gap:5px}.controlGuide>div{padding:7px 3px}.pauseCard .playBtn{min-height:44px;padding:10px 14px;margin-top:11px;font-size:12px}.secondaryBtn{min-height:38px;margin-top:8px}.characterHeading{margin:8px 0 11px}.skillCard{padding:8px 10px}.characterStats{margin-bottom:8px}#lobby .roster{margin:12px 0;gap:4px}#lobby .archiveCard{min-height:52px;font-size:6px}#lobby .archiveCard .portrait{width:26px;height:26px}
}
@media(max-width:800px) and (orientation:landscape){#lobby .lobbyTop{gap:11px;padding-right:12px;padding-left:12px}.brandLogo{width:96px;height:65px}#lobby .tab{gap:5px;padding:8px 9px;font-size:9px}.tab svg{width:17px;height:17px}#lobby .profile{padding:8px 9px;font-size:10px;max-width:150px}#lobby .lobbyBody{padding-left:13px;padding-right:13px}#lobby .panel{max-width:44vw;width:320px;padding:15px 17px}}
@media(max-height:380px) and (orientation:landscape){#lobby .lobbyTop{min-height:58px;padding-top:4px;padding-bottom:4px}.brandLogo{height:52px;width:83px}#lobby .tab{min-height:37px}#lobby .panel{padding:13px 17px}#playScreen .eyebrow{display:none}#lobby .panel h1{font-size:24px;margin:0 0 5px}.sessionModes{margin:9px 0}.modeChoice{min-height:28px}.nameField input{min-height:34px;padding:8px 11px}.fieldHint{font-size:8px}#lobby .playBtn{min-height:40px;margin-top:10px;padding:9px 12px}.connectionStatus{margin-top:7px;min-height:12px;font-size:8px}.pauseLogo{display:none}.pauseCard{padding:15px 22px}.pauseCard h1{font-size:21px}.controlGuide>div{padding:6px 3px}}
@media(max-width:600px) and (orientation:portrait){#lobby .lobbyTop{padding:12px 14px 7px;gap:10px;min-height:0;flex-wrap:wrap}.brandLogo{width:122px;height:81px}#lobby .profile{font-size:11px;padding:10px 12px;max-width:160px}#lobby .tabs{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px;gap:3px;border-radius:15px}#lobby .tab{flex-direction:column;gap:5px;min-height:53px;padding:7px 3px;font-size:8px;border-radius:10px}.tab svg{width:18px;height:18px}#lobby .lobbyBody{padding:10px 14px 14px;align-items:flex-end}#lobby .panel{width:100%;max-width:none;padding:23px;border-radius:23px}#lobby .panel h1{font-size:31px}.sessionModes{margin-top:18px}#lobby .playBtn{font-size:15px;min-height:54px}#lobby .roster{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}#lobby .archiveCard{font-size:6px;min-height:55px}#lobby .archiveCard .portrait{width:28px;height:28px}.pauseCard{padding:22px}.controlGuide{grid-template-columns:repeat(2,minmax(0,1fr))}.controlGuide>div{padding:9px}.skillCard p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.tab,.playBtn{transition:none}.eliminationLine{animation:none}}

/* Morning camp: open composition, quiet navigation and a single gold action. */
@font-face{font-family:Barlow;src:url('assets/fonts/Barlow-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:600 900;font-display:swap}
@font-face{font-family:BarlowCondensed;src:url('assets/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
:root{--bf-ink:#163b50;--bf-muted:#506c76;--bf-gold:#ffd640;--bf-cyan:#009cbd}
#lobby{color:var(--bf-ink);background:#ebf4ec;font-family:Barlow,system-ui,sans-serif;text-shadow:none}
.lobbyScene{position:absolute;inset:0;overflow:hidden;z-index:-2;pointer-events:none}
:is(#lobbyBackdrop,#onlineCampBackdrop){z-index:0;object-position:58% center}
#lobbyMotion{z-index:1}
#lobby::before{background:linear-gradient(90deg,#f4f8f1fa 0%,#f4f8f1f5 18%,#f4f8f1dc 26%,#f4f8f16b 36%,transparent 47%),linear-gradient(180deg,#edf8fc9e,transparent 24%);z-index:-1}
#lobby .lobbyTop{min-height:122px;padding:20px clamp(24px,4vw,64px);gap:48px;background:none}
#lobby .brandLogo{width:156px;height:100px;filter:drop-shadow(0 3px 0 #ffffff80) drop-shadow(0 5px 12px #2b593324)}
#lobby .tabs{gap:30px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;align-self:stretch;align-items:center}
#lobby .tab{position:relative;min-height:48px;padding:9px 0;gap:9px;border:0;border-radius:0;background:none;color:#305265;font-size:16px;font-weight:600;letter-spacing:0;box-shadow:none;transform:none;transition:color .18s}
#lobby .tab svg{width:18px;height:18px;stroke-width:1.7}
#lobby .tab:first-child svg{fill:currentColor;stroke-width:0}
#lobby .tab::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:2px;background:#e9b914;transform:scaleX(0);transition:transform .18s}
#lobby .tab.active,#lobby .tab:hover{background:none;color:#102e43;box-shadow:none}
#lobby .tab.active::after{transform:scaleX(1)}
#lobby .profile{gap:10px;max-width:225px;min-width:164px;border:1px solid #ffffffa6;border-radius:12px;background:#f4fbf0e8;padding:9px 12px;font-size:14px;box-shadow:0 3px 16px #31594312;backdrop-filter:blur(10px)}
#lobby .profile>div{min-width:0;flex:1}
#lobby .profileAvatar{width:36px;height:36px;border-radius:8px;background-color:#e5c979;flex-shrink:0}
#lobby .profile small{font-size:11px;font-weight:400;letter-spacing:0;color:#537365;margin-top:3px}
#lobby .profileDot{width:6px;height:6px;background:#319c61;box-shadow:none;align-self:flex-start;margin-top:5px}
#lobby .lobbyBody{padding:10px clamp(24px,4vw,64px) 32px;align-items:center;flex:1;min-height:0}
#lobby .panel{width:min(350px,35vw);max-width:none;padding:0 3px 5px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;scrollbar-color:#a5bfb2 transparent;max-height:100%;overflow-x:hidden;overflow-y:auto}
#lobby .panel h1{font-family:BarlowCondensed,Barlow,sans-serif;font-size:clamp(44px,4.4vw,64px);font-weight:800;letter-spacing:-.025em;line-height:.96;color:#133b50;margin:16px 0 18px}
#lobby .eyebrow{font-size:13px;font-weight:600;line-height:1.4;letter-spacing:0;color:#50756d}
.arenaLabel{display:flex;align-items:center;gap:7px}
.arenaLabel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.titleRule{display:block;width:44px;height:4px;background:#efbd2a;border-radius:2px;margin-top:17px}
.matchFacts{display:flex;align-items:center;gap:11px;font-size:13px;color:#32596a;font-weight:600}
.matchFacts i{width:3px;height:3px;border-radius:50%;background:#5e8c83}
#lobby .lobbyHint{font-size:12px;line-height:1.8;color:#526f74}
#lobby .matchIntro{margin-top:9px}
#lobby .sessionModes{gap:0;padding:0;background:#deebe799;border:1px solid #a9c4bb80;border-radius:8px;margin:25px 0 22px;overflow:hidden}
#lobby .modeChoice{min-height:43px;border-radius:7px;background:none;color:#56766f;font-size:14px;font-weight:600;letter-spacing:0;gap:8px;box-shadow:none}
#lobby .modeChoice.active{background:#173e51;color:#f4faf9;box-shadow:none}
#lobby .modeChoice:disabled{opacity:.45}
#lobby .modeDot{width:6px;height:6px;box-shadow:none;background:#76e9ce}
#lobby .nameField>span{font-size:12px;font-weight:600;letter-spacing:0;color:#244f5e}
#lobby .nameField small{font-size:11px;font-weight:400;color:#628278}
#lobby .nameField input{min-height:48px;margin-top:9px;padding:11px 13px;border:1px solid #9bbbae9c;border-radius:8px;background:#ffffffd9;color:#153f4f;font-family:Barlow,sans-serif;font-size:16px;box-shadow:0 2px 3px #40624604}
#lobby .nameField input::placeholder{color:#70877d;font-size:12px}
#lobby .fieldHint{font-size:11px;color:#59746d;line-height:1.6;margin-top:8px}
#lobby .playBtn{min-height:57px;padding:13px 17px;margin-top:22px;gap:12px;border:1px solid #e6b228;border-radius:8px;background:linear-gradient(120deg,#ffe36b,#ffd442 65%,#ffcd32);color:#173d4f;font-family:BarlowCondensed,Barlow,sans-serif;font-weight:800;font-size:23px;letter-spacing:.5px;box-shadow:0 4px 0 #d5a222,0 8px 17px #b28e2124;transition:filter .15s,transform .15s}
#lobby .playBtn svg{width:21px;height:21px}
#lobby .playBtn:hover{filter:brightness(1.035)}
#lobby .playBtn:active{transform:translateY(2px);box-shadow:0 2px 0 #d5a222,0 4px 9px #b28e2124}
#lobby .playBtn:disabled{filter:saturate(.5);opacity:.7;cursor:wait}
#lobby .connectionStatus{font-size:11px;color:#557970;line-height:1.7;margin:14px 0 0;min-height:19px;max-width:100%}
#lobby .connectionStatus.error{color:#b14729}
.lobbyFooter{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px clamp(24px,4vw,64px);background:linear-gradient(180deg,transparent,#eaf5e9b3);font-size:11px;color:#315a57;min-height:43px}
#lobby .version{padding:0;font-size:10px;letter-spacing:.4px;color:#4c6e61;line-height:1.4;position:static}
.keyboardHint{display:flex;align-items:center;gap:6px;color:#173f50;font-weight:600;background:#edf8ebe0;padding:5px 9px;border-radius:5px}
.keyboardHint>span{margin:0 4px;color:#7c9b8a}
.keyboardHint kbd{font:600 10px Barlow,sans-serif;border:1px solid #7c9b8a73;border-radius:3px;padding:1px 4px;color:#245354}
.touchHint{display:none}
#lobby .roster{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:18px 0}
#lobby .archiveCard{min-height:65px;padding:7px 2px;border:1px solid #a5c4b380;border-radius:7px;background:#fbfffa73;color:#4c7169;font-size:9px;font-weight:600;gap:6px}
#lobby .archiveCard.active{border-color:#cea930;background:#ffdc614a;color:#234e5b;box-shadow:inset 0 -2px #dcac2c}
#lobby .archiveCard .portrait{width:32px;height:32px;background-color:transparent}
#lobby .characterHeading{margin:14px 0;gap:13px}
#lobby .characterHeading .portrait{width:56px;height:56px;border-radius:9px;border:1px solid #bdd1bda6;background-color:#d7e7d08c}
#lobby .characterHeading h2{font-family:BarlowCondensed,Barlow,sans-serif;font-size:27px;color:#173e51;letter-spacing:0;margin:0 0 4px}
#lobby .characterHeading p{font-size:10px;color:#547d73;letter-spacing:.2px}
#lobby .characterStats{gap:0;margin-bottom:17px;border-block:1px solid #abc5b78c}
#lobby .characterStats span{border:0;border-right:1px solid #abc5b760;border-radius:0;background:none;padding:10px 2px;font-size:10px;color:#5c7c6e}
#lobby .characterStats span:last-child{border-right:0}
#lobby .characterStats b{color:#1f4b56;font-size:14px;font-weight:600}
#lobby .skillCard{border:0;border-left:2px solid #75b9ac;border-radius:0;background:#f6fbf073;padding:8px 11px;margin-top:10px}
#lobby .skillCard h3{font-size:12px;letter-spacing:0;font-weight:600;color:#204e5b}
#lobby .skillCard small{font-size:9px;color:#607b61;letter-spacing:0}
#lobby .skillCard p{font-size:11px;color:#567469;line-height:1.8;margin:5px 0 0}
#lobby .mapPreview{height:200px;border:1px solid #adc4aa;border-radius:8px;margin:18px 0}
#lobby .setting{font-size:14px;color:#2e5762;margin:25px 0;gap:12px;border-bottom:1px solid #b5cfc169;padding-bottom:19px}
#lobby .setting input{accent-color:#167c88;min-height:35px}
#lobby .setting select{border:1px solid #a0bcab;border-radius:6px;background:#fafff3;padding:6px 9px;color:#345e66;font-size:13px}
#lobby button:focus-visible,#lobby input:focus-visible,#lobby select:focus-visible{outline:3px solid #008aaf;outline-offset:4px}
@media(max-width:1100px){#lobby .lobbyTop{gap:28px}#lobby .tabs{gap:22px}#lobby .panel{width:min(325px,36vw)}#lobby .profile{min-width:150px;font-size:13px;max-width:180px}#lobby .brandLogo{width:138px;height:88px}}
@media(max-height:650px) and (orientation:landscape){
 #lobby .lobbyTop{min-height:78px;padding-top:6px;padding-bottom:6px;gap:24px}#lobby .brandLogo{width:108px;height:68px}#lobby .tabs{gap:23px}#lobby .tab{font-size:14px;min-height:42px}#lobby .profile{padding:7px 9px;font-size:12px;min-width:144px}#lobby .profileAvatar{width:29px;height:29px}#lobby .profile small{font-size:10px}
 #lobby .lobbyBody{padding-top:5px;padding-bottom:12px}#lobby .panel{width:min(305px,37vw)}#lobby .panel h1{font-size:43px;margin:11px 0 11px}#lobby .eyebrow{font-size:11px}.titleRule{height:3px;margin-top:10px}.matchFacts{font-size:11px}#lobby .matchIntro{margin-top:5px;font-size:11px}
 #lobby .sessionModes{margin:16px 0 13px}#lobby .modeChoice{min-height:35px;font-size:12px}#lobby .nameField>span{font-size:11px}#lobby .nameField input{min-height:39px;padding:8px 11px;margin-top:6px}#lobby .fieldHint{font-size:10px;margin-top:5px}#lobby .playBtn{min-height:45px;margin-top:14px;padding:9px 13px;font-size:21px}#lobby .connectionStatus{margin-top:9px;font-size:10px}
 .lobbyFooter{min-height:31px;padding-top:7px;padding-bottom:7px;font-size:10px}#lobby .version{font-size:9px}#lobby .roster{margin:12px 0}#lobby .archiveCard{min-height:52px;font-size:8px}#lobby .archiveCard .portrait{width:28px;height:28px}#lobby .characterHeading{margin:10px 0}#lobby .characterHeading .portrait{width:44px;height:44px}#lobby .characterStats{margin-bottom:10px}#lobby .skillCard{margin-top:7px;padding:6px 9px}#lobby .skillCard p{font-size:10px}#lobby .mapPreview{height:128px}
}
@media(max-width:850px) and (orientation:landscape){#lobby .lobbyTop{padding-inline:20px;gap:19px}#lobby .tabs{gap:18px}#lobby .tab{font-size:12px;gap:6px}#lobby .tab svg{width:15px;height:15px}#lobby .profile{min-width:126px;max-width:148px;font-size:11px}#lobby .profileAvatar{width:26px;height:26px}#lobby .lobbyBody{padding-inline:24px}#lobby .panel{width:290px;max-width:38vw}.lobbyFooter{padding-inline:24px}}
@media(max-height:420px) and (orientation:landscape){
 #lobby .lobbyTop{min-height:61px;padding-block:3px}#lobby .brandLogo{width:87px;height:54px}#lobby .tab{min-height:37px}#lobby .panel{padding-top:0;padding-bottom:3px}#lobby .panel h1{font-size:34px;margin:5px 0 8px}#lobby #playScreen .eyebrow{display:flex;font-size:10px}.titleRule{display:none}.matchFacts{font-size:10px}#lobby .matchIntro{font-size:10px;margin-top:3px}#lobby .sessionModes{margin:10px 0 9px}#lobby .modeChoice{min-height:31px;font-size:11px}#lobby .nameField>span{font-size:10px}#lobby .nameField input{min-height:34px;margin-top:5px;padding:6px 10px}#lobby .fieldHint{font-size:9px;margin-top:4px}#lobby .playBtn{min-height:40px;font-size:19px;margin-top:10px;padding:7px 12px}#lobby .connectionStatus{font-size:9px;margin-top:8px;line-height:1.6}.lobbyFooter{min-height:24px;padding-block:5px}.keyboardHint{display:none}
}
@media(max-width:640px) and (orientation:portrait){
 .lobbyScene{height:58%}:is(#lobbyBackdrop,#onlineCampBackdrop){object-position:67% 72%}#lobby::before{background:linear-gradient(0deg,#f4f8f1 0%,#f4f8f1 39%,#f4f8f1eb 46%,#f4f8f100 58%),linear-gradient(180deg,#e7f6efbf,transparent 22%)}
 #lobby .lobbyTop{min-height:0;padding:9px 20px 0;gap:12px;flex-wrap:wrap}#lobby .brandLogo{width:125px;height:81px}#lobby .profile{margin-left:auto;min-width:132px;max-width:165px;font-size:12px;padding:8px 10px;border-radius:9px}#lobby .profileAvatar{width:29px;height:29px}#lobby .profile small{font-size:10px}
 #lobby .tabs{width:100%;order:3;display:grid;grid-template-columns:repeat(4,1fr);gap:0;min-height:46px;background:#f4fbf0db;border:1px solid #d2e3cc9c;border-radius:8px;padding:0 7px;backdrop-filter:blur(12px)}#lobby .tab{flex-direction:row;gap:6px;font-size:12px;min-height:43px;padding:8px 0;border-radius:0}#lobby .tab svg{width:15px;height:15px}#lobby .tab::after{left:14px;right:14px;height:3px}
 #lobby .lobbyBody{padding:12px 24px 10px;align-items:flex-end;overflow:hidden}#lobby .panel{width:100%;max-width:none;padding:15px 0 4px;max-height:100%}#lobby .panel h1{font-size:51px;margin:10px 0 11px}.titleRule{display:none}#lobby .eyebrow{font-size:12px}.matchFacts{font-size:12px}#lobby .matchIntro{font-size:11px;margin-top:7px}#lobby .sessionModes{margin:19px 0 17px}#lobby .modeChoice{min-height:40px;font-size:13px}#lobby .nameField input{min-height:44px}#lobby .playBtn{min-height:51px;font-size:23px;margin-top:17px}#lobby .connectionStatus{margin-top:12px;font-size:10px;min-height:17px}
 .lobbyFooter{padding:8px 24px 11px;justify-content:center;background:#f4f8f1;min-height:32px}.keyboardHint,.touchHint{display:none}#lobby .version{font-size:9px}#lobby .roster{margin:15px 0}#lobby .archiveCard{min-height:62px;font-size:8px}#lobby .skillCard p{font-size:11px}#lobby .mapPreview{height:168px}
}
@media(max-width:370px) and (orientation:portrait){#lobby .lobbyTop{padding-inline:15px}#lobby .lobbyBody{padding-inline:20px}#lobby .profile{min-width:128px}.lobbyFooter{padding-inline:20px}#lobby .tab{font-size:11px;gap:4px}#lobby .panel h1{font-size:46px}#lobby .archiveCard{font-size:7px}}
@media(max-height:720px) and (orientation:portrait){#lobby .lobbyBody{padding-top:4px;padding-bottom:4px}#lobby .panel h1{font-size:43px;margin:8px 0}#lobby .sessionModes{margin:13px 0}#lobby .modeChoice{min-height:35px}#lobby .playBtn{min-height:45px;margin-top:13px}#lobby .connectionStatus{margin-top:9px}.lobbyFooter{padding-block:6px}}
@media(pointer:coarse) and (orientation:landscape){.keyboardHint{display:none}.touchHint{display:inline;font-family:Barlow,sans-serif;font-size:9px;background:#eef9e9d9;border-radius:4px;padding:4px 7px;color:#244f54}}
@media(prefers-reduced-motion:reduce){#lobby .tab,#lobby .tab::after,#lobby .playBtn{transition:none}}

@media(max-width:700px) and (orientation:landscape){#lobby .lobbyTop{gap:16px;padding-inline:16px}#lobby .tabs{gap:16px}#lobby .tab{font-size:11px;gap:5px}#lobby .profile{min-width:0;width:28px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none}#lobby .profile>div,#lobby .profileDot{display:none}#lobby .profileAvatar{width:28px;height:28px}#lobby .panel{width:270px;max-width:42vw}#lobby .lobbyBody{padding-inline:20px}}

html,body{font-family:Barlow,system-ui,sans-serif}

@media(max-height:340px) and (orientation:landscape){#lobby .lobbyTop{min-height:52px}#lobby .brandLogo{height:46px;width:74px}#lobby .tab{min-height:32px}#lobby .lobbyBody{padding-top:2px;padding-bottom:4px}#lobby .panel h1{font-size:29px;margin:3px 0 5px}#lobby .matchIntro{display:none}#lobby .sessionModes{margin:7px 0}#lobby .modeChoice{min-height:28px}#lobby .nameField input{min-height:31px}#lobby .nameField small{font-size:9px}#lobby .playBtn{min-height:35px;font-size:17px;margin-top:8px}#lobby .connectionStatus{font-size:8px;line-height:1.4;margin-top:6px;min-height:12px}#lobby .fieldHint{font-size:8px}.lobbyFooter{min-height:19px;padding-block:4px}#lobby .version{font-size:8px}}

/* v162: illustrated lettering, beveled controls and the gold/cyan brand system. */
html,body,#lobby,#lobby .nameField input,.touchHint{font-family:Barlow,system-ui,sans-serif}
.srOnly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#lobby .panel h1.graphicTitle,.pauseCard h1.graphicTitle{font-size:0;line-height:0;margin:12px -3px 17px;position:relative}
.graphicTitle img{display:block;width:100%;height:auto;max-height:96px;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 0 #ffffff80)}
.matchFacts{gap:10px;flex-wrap:wrap}.matchFacts>span{display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid #9ec3c873;background:#f3fbf5ae;border-radius:5px;font-size:11px}
.matchFacts svg{width:15px;height:15px;fill:none;stroke:#137e9e;stroke-width:1.7;stroke-linecap:round}
#lobby .tab{font-family:BarlowCondensed,Barlow,sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.6px}
#lobby .tab.active{color:#057392}#lobby .tab.active svg{filter:drop-shadow(0 1px #fff)}#lobby .tab::after{background:linear-gradient(90deg,#f6c536,#fff184,#f6c536);height:4px;box-shadow:0 2px 0 #b6a24d50}
#lobby .sessionModes{border:1px solid #769caab3;box-shadow:inset 0 2px 5px #16394b0d;gap:3px;padding:3px;background:#d7e8e4a6;border-radius:9px}
#lobby .modeChoice{border-radius:5px}#lobby .modeChoice.active{border:1px solid #3db0cd;background:linear-gradient(135deg,#1b6683,#143c55);box-shadow:inset 0 1px #ffffff45,0 2px 3px #15384521;text-shadow:0 1px #08283e}
#lobby .nameField input{border-color:#88afbd;box-shadow:inset 0 2px 4px #17436308;border-radius:7px}
#lobby .playBtn,.pauseCard .playBtn,.installHelp .playBtn{position:relative;border:2px solid #f5c033;border-radius:9px;background:linear-gradient(155deg,#fff5a3 0%,#ffe468 12%,#ffcf32 63%,#ffbc20 100%);box-shadow:inset 0 2px 0 #fff9c1,inset 0 -3px 0 #e89416,0 4px 0 #b16a0c,0 6px 0 #173c51,0 10px 18px #1b4a512b;color:#173951;font-family:BarlowCondensed,Barlow,sans-serif;letter-spacing:.7px;text-shadow:0 1px #ffef9f;font-size:24px;overflow:hidden}
#lobby .playBtn::before,.pauseCard .playBtn::before{content:'';position:absolute;top:3px;left:9px;right:9px;height:1px;background:#ffffe0b5;pointer-events:none}
#lobby .playBtn svg:first-child,.pauseCard .playBtn svg:first-child{background:#173b5120;border-radius:4px;padding:3px;box-sizing:content-box;width:17px;height:17px}
#lobby .playBtn svg:last-child,.pauseCard .playBtn svg:last-child{margin-left:auto}.playBtn>span{margin-right:auto}
#lobby .profile{border:1px solid #85c2d180;background:linear-gradient(130deg,#f7ffffee,#e8f4dbe6);box-shadow:inset 0 1px #fff,0 4px 0 #26617517}
#lobby .profileAvatar{border:2px solid #f1bf32;box-shadow:0 0 0 1px #315266;border-radius:8px}
#lobby .archiveCard{border:1px solid #a4bec8;border-radius:8px;background:linear-gradient(#f9ffffc9,#c5e3e38c);box-shadow:inset 0 1px #fff,0 3px 0 #7397a137}
#lobby .archiveCard.active{border-color:#b97713;box-shadow:inset 0 1px #fff3b3,0 3px 0 #927c1c;background:linear-gradient(#fff0a3,#f3ca61)}
#lobby .skillCard{border:1px solid #bed6d4;border-left:3px solid #13a2c5;border-radius:7px;background:linear-gradient(110deg,#f8fffaf0,#e8f4e58c);box-shadow:inset 0 1px #fff}
#lobby .skillCard header{gap:6px}#lobby .skillCard h3{font-family:BarlowCondensed,Barlow,sans-serif;font-size:15px;letter-spacing:.2px}#lobby .skillCard small{padding:3px 5px;border-radius:3px;background:#d7e7d8;color:#456a72;font-size:8px}
#pauseOverlay{background:radial-gradient(ellipse at top,#15556b9c,#051927ce);backdrop-filter:blur(10px);padding:18px}
.pauseCard{position:relative;width:min(480px,100%);border:2px solid #91d4e7;border-radius:16px;padding:22px 28px 26px;box-shadow:inset 0 2px #faffff,0 7px 0 #0a2c43,0 18px 60px #01172488;background:linear-gradient(155deg,#f3fffd,#e9f2e5 85%);color:#173f54;scrollbar-color:#75aeba transparent}
.pauseCard::before{content:'';display:block;height:5px;background:linear-gradient(90deg,#059ac7,#7eecfa 36%,#ffdf41 36%,#ffcf31 100%);margin:-22px -28px 18px;border-radius:12px 12px 0 0}
.pauseLogo{width:104px;height:68px;margin-bottom:10px;filter:drop-shadow(0 3px #143b4520)}
.pauseCard .pauseBadge{display:inline-flex;align-items:center;gap:6px;background:#d9efed;border:1px solid #a6ccd3;color:#388197;border-radius:20px;padding:4px 10px;font-size:9px;font-weight:600;letter-spacing:1px}
.pauseBadge svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3}
.pauseCard h1.graphicTitle{margin:8px 0 12px}.pauseCard .graphicTitle img{max-height:85px;object-position:center}
.pauseCard>p{color:#506f7b;font-size:12px;line-height:1.6;margin-bottom:16px}
.controlGuide{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0}
.controlGuide>div{border:1px solid #bbd3d7;border-radius:8px;background:linear-gradient(#faffff,#deeceb);box-shadow:inset 0 1px #fff,0 2px 0 #829dad30;padding:10px 3px}
.controlGuide svg{display:block;width:22px;height:22px;margin:0 auto 7px;fill:none;stroke:#127d9d;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.controlGuide b{font-family:BarlowCondensed,Barlow,sans-serif;font-size:12px;letter-spacing:.5px;color:#21485d}.controlGuide span{color:#66818b;font-size:9px;line-height:1.4}
.pauseCard .playBtn{min-height:52px;margin-top:13px;font-size:23px;padding:10px 14px}
.pauseCard .secondaryBtn{color:#e2f5fa;border:1px solid #2b7795;border-radius:8px;background:linear-gradient(#245d75,#163b53);box-shadow:inset 0 1px #6399aa,0 3px 0 #09273c;font-family:BarlowCondensed,Barlow,sans-serif;font-size:17px;letter-spacing:.5px;min-height:44px;margin-top:15px}
.pauseCard .secondaryBtn:hover{filter:brightness(1.15)}
#hudMenu button{border:1px solid #9bdfefb5;background:linear-gradient(145deg,#28657dcc,#0c314acc);box-shadow:inset 0 1px #c8edff60,0 3px 0 #06213880;border-radius:7px}
#pauseButton svg{width:19px;height:19px;fill:none;stroke:#e4faff;stroke-width:3}
.controls .btn{border-color:#a9efffa6;background:radial-gradient(ellipse at 35% 22%,#32799acc,#173d58e8 75%);box-shadow:inset 0 2px #e4faff70,inset 0 -4px #071b3680,0 0 0 2px #0a294780,0 5px 14px #0015245c}
.controls .attackBtn{border-color:#ffe575;background:radial-gradient(ellipse at 35% 22%,#9c7d2fcc,#554517de 75%);box-shadow:inset 0 2px #fff4b091,inset 0 -4px #42220a60,0 0 0 2px #122d4880,0 5px 14px #0015245c}
.controls .btn svg{filter:drop-shadow(0 2px #05233880)}.controls .btn small{font-family:BarlowCondensed,Barlow,sans-serif;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 2px #042231}
.hot{border-color:#7fc3d18c;border-radius:7px;background:linear-gradient(140deg,#204f64ec,#112e4bdf);box-shadow:inset 0 1px #c4eef059,inset 0 -2px #071b3780,0 4px 9px #05233950}.hot.active{border-color:#ffe45e;box-shadow:inset 0 1px #fff4a280,0 0 0 1px #1c496e,0 2px 8px #f6bd3533}.hot small{font-family:BarlowCondensed,Barlow,sans-serif;letter-spacing:.2px}
#hpbar{border-color:#c9f7e8a6;background:#10394fe8;border-radius:4px;box-shadow:0 1px 0 #082741,0 2px 5px #07223945}#hp{background:linear-gradient(#d0ffa1,#7fde71);border-bottom-color:#34a55d}.hpLabels{font-family:BarlowCondensed,Barlow,sans-serif;font-size:12px;letter-spacing:.35px;text-shadow:0 1px 3px #03283c}
.scoreboardCard{border:1px solid #81d8f06e;border-radius:12px;box-shadow:inset 0 3px #26a6c9,0 6px 0 #09233d,0 20px 50px #001f3780;background:linear-gradient(135deg,#225570f5,#102b47fa)}.scoreboardHeader h2{font-family:BarlowCondensed,Barlow,sans-serif;font-size:29px;color:#fff0a1;letter-spacing:1px;text-shadow:0 2px #062438}.scoreboardSummary strong{color:#ffdd4a}
.installPanel{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;margin-top:20px;padding:13px;border:1px solid #98c4d1;border-radius:10px;background:#f6fff8d9;box-shadow:0 3px 0 #6599a01a}.installPanel[hidden],.installHelp[hidden]{display:none}.installPanel>img{border-radius:9px}.installPanel b{font-family:BarlowCondensed,Barlow,sans-serif;font-size:15px;color:#24536a}.installPanel small{display:block;font-size:11px;line-height:1.5;color:#607f84;margin-top:3px}.installPanel .secondaryBtn{grid-column:1/-1;border:1px solid #47829b;background:linear-gradient(#277594,#14445e);color:#f3fdff;min-height:40px;margin:0;border-radius:6px;font-family:BarlowCondensed,Barlow,sans-serif;font-size:17px;box-shadow:inset 0 1px #8fc3d1,0 2px #0b324e}.installPanel svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.installPanel p{grid-column:1/-1;font-size:10px;margin:0;color:#647f7c}.installPanel p:empty{display:none}
.installHelp{position:fixed;inset:0;z-index:180;background:#08263bc9;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:22px;color:#21475b;text-align:center}.installHelp section{background:#effaf3;border:2px solid #99dbe7;border-radius:16px;padding:25px;width:min(370px,100%);box-shadow:0 6px 0 #133c58}.installHelp img{border-radius:16px}.installHelp h2{font-family:BarlowCondensed,Barlow,sans-serif;font-size:28px;margin:14px 0}.installHelp p{font-size:14px;line-height:1.6}.installHelp .playBtn{font-size:20px;padding:12px}
@media(max-height:650px) and (orientation:landscape){#lobby .graphicTitle img{max-height:66px}#lobby .panel h1.graphicTitle{margin:9px -3px 12px}#lobby .tab{font-size:16px}.pauseCard{width:min(450px,100%);padding:16px 22px 20px}.pauseCard::before{margin:-16px -22px 12px}.pauseLogo{height:45px;width:76px;margin-bottom:5px}.pauseCard .graphicTitle img{max-height:59px}.pauseCard>p{font-size:10px;margin-bottom:8px}.controlGuide{margin:8px 0;gap:6px}.controlGuide svg{width:18px;height:18px;margin-bottom:5px}.controlGuide>div{padding:7px 3px}.pauseCard .playBtn{min-height:42px;font-size:20px;margin-top:9px}.pauseCard .secondaryBtn{min-height:36px;font-size:15px;margin-top:11px}.hpLabels{font-size:9px}}
@media(max-height:420px) and (orientation:landscape){#lobby .panel h1.graphicTitle{margin:5px -3px 7px}#lobby .graphicTitle img{max-height:47px}.matchFacts>span{font-size:9px;padding:3px 5px;gap:4px}.matchFacts svg{width:12px;height:12px}#lobby .sessionModes{margin-block:8px}.pauseLogo{display:none}.pauseCard{width:min(480px,100%);padding:11px 20px 14px}.pauseCard::before{margin:-11px -20px 9px}.pauseCard .pauseBadge{display:none}.pauseCard h1.graphicTitle{margin:3px 0 8px}.pauseCard .graphicTitle img{max-height:49px}.pauseCard>p{margin-bottom:7px}.controlGuide{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:8px 0}.controlGuide>div{padding:7px 2px}.controlGuide b{font-size:10px}.controlGuide span{font-size:8px}.controlGuide svg{width:17px;height:17px}.pauseCard .playBtn{margin-top:8px;min-height:38px;padding:6px 12px;font-size:19px}.pauseCard .secondaryBtn{min-height:32px;font-size:14px;margin-top:10px}#lobby .playBtn{font-size:20px}}
@media(max-width:850px) and (orientation:landscape){#lobby .tab{font-size:14px;letter-spacing:.4px}}
@media(max-width:640px) and (orientation:portrait){#lobby .panel h1.graphicTitle{margin:8px -3px 11px}#lobby .graphicTitle img{max-height:74px}#lobby .tab{font-size:15px;letter-spacing:.3px}.pauseCard{padding:20px;max-width:400px}.pauseCard::before{margin:-20px -20px 15px}.controlGuide{grid-template-columns:repeat(3,minmax(0,1fr))}.pauseCard .graphicTitle img{max-height:70px}.hpLabels{font-size:10px}}
@media(max-height:340px) and (orientation:landscape){#lobby .graphicTitle img{max-height:38px}#lobby .panel h1.graphicTitle{margin:3px -3px 5px}#lobby .sessionModes{margin-block:6px}#lobby .playBtn{font-size:18px;min-height:35px;margin-top:7px}.pauseCard .graphicTitle img{max-height:39px}.controlGuide>div{padding-block:5px}}
@media(prefers-reduced-motion:reduce){.graphicTitle img{animation:none}}
/* Reserve room for the connection line above the footer on short phones. */
@media(max-height:420px) and (orientation:landscape){
 #lobby .matchIntro{display:none}#lobby .panel h1.graphicTitle{margin:4px -3px 6px}#lobby .graphicTitle img{max-height:42px}
 #lobby .sessionModes{margin:7px 0 7px;padding:2px}#lobby .modeChoice{min-height:28px}#lobby .nameField input{min-height:32px;margin-top:4px}#lobby .fieldHint{margin-top:3px}#lobby .playBtn{margin-top:9px;min-height:38px}#lobby .connectionStatus{margin-top:8px;line-height:1.4}#lobby .lobbyBody{padding-top:2px;padding-bottom:10px}
}
@media(max-height:340px) and (orientation:landscape){#lobby .graphicTitle img{max-height:35px}#lobby .panel h1.graphicTitle{margin:3px -3px 4px}#lobby .sessionModes{margin-block:5px}#lobby .nameField input{min-height:30px}#lobby .playBtn{min-height:34px;margin-top:7px}#lobby .connectionStatus{margin-top:6px}}
@media(max-height:420px) and (orientation:landscape){#lobby .fieldHint{display:none}#lobby .connectionStatus{min-height:12px;margin-top:6px;line-height:1.4}}
/* v163: Battle Royale menus, city roulette and match objectives. */
[hidden]{display:none!important}
.gameModes{display:flex;gap:6px;margin:0 0 9px}.gameModes button{flex:1;min-height:32px;padding:5px 8px;border:1px solid #84dbee55;border-radius:9px;background:#0b2843c9;color:#b3cede;font:800 15px/1 'BarlowCondensed',sans-serif;letter-spacing:.4px;cursor:pointer;box-shadow:inset 0 1px #ffffff16}.gameModes button.active{color:#fff5cb;border-color:#ffdc6a;background:linear-gradient(135deg,#705211,#302d24);box-shadow:0 2px 0 #08243a,inset 0 1px #fff5c344}.gameModes b{display:inline-flex;margin-left:4px;width:21px;height:19px;align-items:center;justify-content:center;background:#ffffff19;border-radius:5px;color:#fff}
#brLobbyCities{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;margin:7px 0 10px;font:600 11px/1.2 'Barlow',sans-serif;color:#355f6b}#brLobbyCities span{display:flex;align-items:center;gap:5px}#brLobbyCities i{width:6px;height:6px;background:var(--city-color);border-radius:2px;box-shadow:0 0 7px var(--city-color)}
.brFlow{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 15%,#236280e8,#05182beF 72%);backdrop-filter:blur(8px);color:#eef9ff;overflow:auto}
.brFlowCard{width:min(820px,94vw);position:relative;padding:24px 32px;border:1px solid #53d2ec88;border-top:3px solid #f2d667;border-radius:24px;background:linear-gradient(145deg,#193d57ed,#0b253bf5);box-shadow:0 25px 90px #020e23bb,inset 0 1px #ffffff22;text-align:center;isolation:isolate}.brFlowCard:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:repeating-linear-gradient(135deg,#79d7eb04 0 1px,transparent 1px 18px)}
.brFlowHeader{display:flex;align-items:center;justify-content:center;gap:25px;margin:0 auto 15px}.brFlowHeader img:first-child{width:110px;height:auto;max-height:78px;object-fit:contain}.brFlowHeader img:last-child{width:min(430px,62%);height:auto;max-height:82px;object-fit:contain}.brFlowEyebrow{display:flex;align-items:center;gap:15px;margin:10px auto 20px;max-width:460px}.brFlowEyebrow span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#54c7df)}.brFlowEyebrow span:last-child{transform:rotate(180deg)}.brFlowEyebrow b{font:800 23px/1 'BarlowCondensed',sans-serif;letter-spacing:1.2px;color:#ffe594;white-space:nowrap}
.brQueueLayout{display:grid;grid-template-columns:.8fr 1.5fr;gap:24px;align-items:center}.brQueueMeter{display:flex;align-items:center;flex-direction:column;gap:7px}.brClockRing{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;width:128px;height:128px;border:7px solid #39cdebbf;outline:1px solid #65ddf744;outline-offset:5px;box-shadow:0 0 35px #11cdef18,inset 0 0 28px #061c35;background:#08253d}.brClockRing strong{font:800 66px/.9 'BarlowCondensed',sans-serif;color:#fff}.brClockRing small{font-size:10px;font-weight:600;letter-spacing:1px;margin-top:10px;color:#99cbd9}.brQueueMeter>b{font:800 28px/1.1 'BarlowCondensed',sans-serif;margin-top:7px;color:#ffdc72}.brQueueMeter>span{font-size:12px;font-weight:600;letter-spacing:.7px}.brQueueMeter>small{font-size:10px;color:#92b9ca}.brQueueBar{width:180px;height:6px;margin:5px 0;background:#041524;border-radius:8px;overflow:hidden}.brQueueBar i{display:block;height:100%;background:linear-gradient(90deg,#21bdec,#fff083);box-shadow:0 0 8px #37d6ef}
#brCityCards{display:grid;grid-template-columns:1fr 1fr;gap:10px}#brCityCards figure{position:relative;overflow:hidden;border-radius:12px;border:1px solid #afd3de55;margin:0;aspect-ratio:1.75;background:#0b273f;box-shadow:0 4px 0 #05182a}#brCityCards img{display:block;object-fit:cover;width:100%;height:100%;transition:transform 3s}#brCityCards figcaption{position:absolute;bottom:0;left:0;right:0;padding:14px 8px 8px;background:linear-gradient(transparent,#051b30ed);font:800 17px/1 'BarlowCondensed',sans-serif;text-align:left;color:#fff;letter-spacing:.25px;text-shadow:0 2px #082e47}
.brFlowCard>.secondaryBtn{margin:20px auto 0;width:auto;min-width:200px;min-height:36px;font-size:14px}#brFoundRoster{font-size:12px;letter-spacing:1px;color:#9ecddd;margin:0 0 12px}.brSlotFrame{display:flex;align-items:center;justify-content:center;gap:15px}.brSlotArrow{color:#ffdf7a;font-style:normal;font-size:24px;filter:drop-shadow(0 0 10px #ffb74b99)}#brSlotWindow{width:min(460px,75vw);height:220px;position:relative;overflow:hidden;border:3px solid #f5dc81;border-radius:18px;box-shadow:0 0 0 5px #082d44,0 0 25px #27dafa38;background:#091f35}#brSlotTrack{will-change:transform}.brSlotCard{height:220px;position:relative;overflow:hidden}.brSlotCard img{width:100%;height:100%;object-fit:cover;display:block}.brSlotCard b{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#05233fea);font:800 29px/1 'BarlowCondensed',sans-serif;padding:30px 15px 15px;color:#fff;text-shadow:0 2px #052036}.brSlotCard:after{content:"";position:absolute;inset:0;border-bottom:4px solid var(--city-color);pointer-events:none}#brSpawnCity{font:800 24px/1.1 'BarlowCondensed',sans-serif;color:#ffdf85;letter-spacing:.5px;margin:18px 0 7px}#brSpawnCounter{font-size:11px;color:#abc8d5;letter-spacing:.7px;margin:0}
#brMatchHud{position:absolute;left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));pointer-events:none;display:flex;align-items:center;gap:10px;color:#fff}.brLocation{display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #4ca9c65a;border-radius:12px;background:linear-gradient(135deg,#0a2c45e8,#0b1f35df);box-shadow:0 4px 10px #041c3540}.brLocationMark{color:#6ae3fc;font-size:23px}.brLocation small{display:block;color:#8caebf;font-size:8px;letter-spacing:1px;font-weight:600}.brLocation b{display:block;font:800 19px/1.1 'BarlowCondensed',sans-serif;margin-top:2px}.brSurvivors{display:grid;grid-template-columns:20px auto;column-gap:6px;border-radius:10px;padding:8px;background:#0a243bdf;border:1px solid #4ca9c65a}.brSurvivors svg{width:19px;height:21px;fill:none;stroke:#fddd76;stroke-width:2;grid-row:span 2}.brSurvivors b{font:800 18px/1 'BarlowCondensed',sans-serif;color:#ffe392}.brSurvivors small{font-size:8px;letter-spacing:1px;color:#99bfce}#brCityStatus{display:flex;gap:5px}#brCityStatus i{height:11px;width:11px;border-radius:3px;background:var(--city-color);border:1px solid #ffffff44;box-shadow:0 0 8px color-mix(in srgb,var(--city-color),transparent 60%)}#brCityStatus i.fallen{background:#364755;box-shadow:none;opacity:.4}#brCityStatus i.warning{background:#ff703d;animation:br-warning 1s infinite}
#brWarning{position:fixed;top:max(75px,calc(env(safe-area-inset-top) + 65px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:9px 14px;background:linear-gradient(110deg,#82262aed,#352636f2);border:1px solid #ff9a55;border-radius:13px;min-width:290px;max-width:80vw;box-shadow:0 4px 24px #f7532533}.brWarningIcon{display:flex;align-items:center;justify-content:center;width:27px;height:27px;font:800 23px/1 'BarlowCondensed',sans-serif;background:#ffc664;color:#663b21;border-radius:7px}#brWarning small{display:block;font-size:9px;letter-spacing:.7px;font-weight:600;color:#ffcea0}#brWarning b{display:block;font:800 21px/1.1 'BarlowCondensed',sans-serif;margin-top:3px}#brWarningClock{font:800 35px/1 'BarlowCondensed',sans-serif;color:#fff1af;margin-left:auto}
#brCoreHud{position:fixed;top:max(75px,calc(env(safe-area-inset-top) + 65px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;border:1px solid #82e8f488;border-radius:14px;background:linear-gradient(135deg,#0a4b5fed,#0c2845f4);padding:10px 14px;width:min(410px,82vw);box-shadow:0 4px 22px #14d6f02a}.brCoreGem{font-size:33px;color:#5aebff;text-shadow:0 0 17px #0fdbff}.brCoreInfo{flex:1;min-width:0}.brCoreInfo>b{display:block;font:800 18px/1 'BarlowCondensed',sans-serif;letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff5bd}.brCoreInfo>span{display:block;margin:4px 0 6px;font-size:9px;color:#a6dbe9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brCaptureBar{height:6px;border-radius:4px;background:#061b30;overflow:hidden}.brCaptureBar i{height:100%;width:0;display:block;background:linear-gradient(90deg,#26dbfa,#ffe578);transition:width .1s linear}#brCoreClock{font:800 23px/1 'BarlowCondensed',sans-serif;color:#ffe590;white-space:nowrap}#brCoreHud.contested{border-color:#ffa37e;background:linear-gradient(135deg,#743635ef,#282640f4)}#brCoreHud.contested .brCoreGem{color:#ff9c62}
#brLava{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 20px #f9582999;animation:br-lava .5s alternate infinite;z-index:10}#brLavaNotice{position:fixed;left:50%;transform:translateX(-50%);bottom:190px;padding:8px 15px;border-radius:9px;background:#b13824e8;border:1px solid #ffb463;color:#fff3cf;font:800 17px/1.2 'BarlowCondensed',sans-serif;pointer-events:none;white-space:nowrap;z-index:11}.brDanger #miniMap{border-color:#ff8555!important;box-shadow:0 0 20px #ff643b55!important}.brSpectating .controls,.brSpectating #hotbar,.brSpectating #hpbox,.brSpectating #abilityTip,.brSpectating #lookZone,.brSpectating #moveZone{display:none!important}#brSpectate{position:absolute;left:50%;bottom:max(35px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:18px;border-radius:15px;background:#071f38ed;border:1px solid #73c3da77;padding:12px 20px;z-index:70}#brSpectate small{display:block;font-size:9px;letter-spacing:1px;color:#91b8ca}#brSpectate b{display:block;margin-top:4px;font:800 18px/1 'BarlowCondensed',sans-serif;white-space:nowrap}#brSpectate button{min-height:32px;padding:7px 12px;font-size:12px;margin:0;width:auto;white-space:nowrap}
.brResult{background:radial-gradient(ellipse at 50% 10%,#2a677de8,#04172bf5 80%)}.brResultCard{text-align:center;width:min(550px,94vw);padding:30px 42px;border:1px solid #ffe1988f;border-radius:24px;background:linear-gradient(145deg,#17465bd9,#09263fec);box-shadow:0 30px 100px #00152be0,inset 0 1px #ffffff2d}.brResultLaurel{font-size:48px;line-height:1;color:#ffe37f;margin:0 0 6px;text-shadow:0 0 35px #ffd56a55}#brVictoryArt{width:100%;height:auto;max-height:125px;object-fit:contain;filter:drop-shadow(0 5px 9px #041b3599)}.brResultBadge{display:inline-flex;font:800 18px/1 'BarlowCondensed',sans-serif;letter-spacing:1px;color:#fff3b5;border:1px solid #e8d07b66;border-radius:7px;padding:7px 14px;margin:15px 0 7px;background:#7b62232b}#brResultName{font:800 27px/1.1 'BarlowCondensed',sans-serif;color:#fff;margin:8px 0}#brResultReason{font-size:11px;letter-spacing:1.6px;color:#86bdd1;margin:0 0 20px}.brResultStats{display:grid;grid-template-columns:1fr 1fr;padding:12px 0 19px;margin-bottom:10px;border-top:1px solid #56adca33;gap:12px}.brResultStats div+div{border-left:1px solid #56adca33}.brResultStats strong{display:block;font:800 43px/1 'BarlowCondensed',sans-serif;color:#ffdf76}.brResultStats small{display:block;margin-top:5px;font-size:9px;font-weight:600;letter-spacing:1.1px;color:#a7c9d7}.brResultCard>.playBtn,.brResultCard>.secondaryBtn{margin:10px auto 0}
@keyframes br-warning{50%{opacity:.4;box-shadow:0 0 10px #ff7b37}}@keyframes br-lava{to{box-shadow:inset 0 0 55px 15px #ff9e3955}}
@media(max-width:650px){.brFlowCard{padding:18px;border-radius:18px}.brFlowHeader{gap:12px;margin-bottom:10px}.brFlowHeader img:first-child{width:76px;max-height:60px}.brFlowHeader img:last-child{width:70%;max-height:55px}.brFlowEyebrow{margin:8px 0 15px;gap:8px}.brFlowEyebrow b{font-size:21px}.brQueueLayout{grid-template-columns:1fr;gap:15px}.brClockRing{height:96px;width:96px;border-width:5px}.brClockRing strong{font-size:51px}.brClockRing small{font-size:8px;margin-top:6px}.brQueueMeter{gap:4px}.brQueueMeter>b{font-size:24px;margin-top:2px}#brCityCards{gap:7px}#brCityCards figcaption{font-size:16px;padding:15px 7px 7px}#brSlotWindow,.brSlotCard{height:190px}#brSpawnCity{font-size:21px}#brMatchHud{left:9px;top:9px;gap:6px}.brLocation{padding:6px 9px;gap:5px}.brLocation b{font-size:16px}.brLocation small{font-size:7px}.brLocationMark{font-size:18px}.brSurvivors{padding:6px}.brSurvivors b{font-size:16px}#brCityStatus{gap:3px}#brCityStatus i{width:8px;height:8px}#brWarning,#brCoreHud{top:65px;padding:8px 10px}#brWarning b{font-size:18px}#brWarning small{font-size:8px}.brCoreInfo>b{font-size:16px}#brCoreClock{font-size:20px}.battleRoyale #compass{top:43px;font-size:11px}.battleRoyale #miniMap{top:9px}#brSpectate{padding:9px 12px;gap:8px;width:90vw;justify-content:space-between;bottom:20px}#brSpectate b{font-size:16px;max-width:48vw;overflow:hidden;text-overflow:ellipsis}.brResultCard{padding:22px}.brResultLaurel{font-size:36px}#brResultName{font-size:23px}#brLavaNotice{font-size:13px;bottom:170px}}
@media(max-height:460px) and (orientation:landscape){.gameModes{margin-bottom:5px}.gameModes button{min-height:26px;font-size:12px;padding:3px 5px}#brLobbyCities{display:none!important}.matchIntro{display:none!important}.brFlow{padding:12px}.brFlowCard{padding:14px 22px;width:min(730px,94vw);border-radius:17px}.brFlowHeader{margin-bottom:5px;gap:15px}.brFlowHeader img:first-child{width:65px;max-height:42px}.brFlowHeader img:last-child{width:330px;max-height:44px}.brFlowEyebrow{margin:6px auto 10px}.brFlowEyebrow b{font-size:20px}.brQueueLayout{grid-template-columns:.8fr 1.4fr;gap:20px}.brClockRing{width:85px;height:85px;border-width:4px}.brClockRing strong{font-size:44px}.brClockRing small{font-size:7px;margin-top:5px}.brQueueMeter{gap:3px}.brQueueMeter>b{font-size:21px;margin-top:2px}.brQueueMeter>span{font-size:10px}.brQueueMeter>small{font-size:8px}.brQueueBar{margin:3px 0;height:5px;width:130px}#brCityCards{gap:7px}#brCityCards figure{aspect-ratio:2.2}#brCityCards figcaption{font-size:14px;padding:10px 7px 6px}.brFlowCard>.secondaryBtn{margin-top:10px;min-height:29px;font-size:12px}#brSlotWindow,.brSlotCard{height:135px;width:min(370px,68vw)}#brFoundRoster{margin-bottom:7px;font-size:10px}.brSlotCard b{font-size:23px;padding:15px 10px 10px}#brSpawnCity{margin:10px 0 3px;font-size:19px}#brSpawnCounter{font-size:9px}.brResultCard{padding:14px 22px;width:430px}.brResultLaurel{display:none}#brVictoryArt{max-height:64px}.brResultBadge{margin:8px 0 2px;font-size:15px;padding:5px 10px}#brResultName{font-size:21px;margin:4px 0}#brResultReason{margin-bottom:8px;font-size:9px}.brResultStats{padding:8px 0;margin:0}.brResultStats strong{font-size:29px}.brResultStats small{font-size:8px}.brResultCard>.playBtn{min-height:36px;margin-top:7px}.brResultCard>.secondaryBtn{min-height:28px;margin-top:5px}.battleRoyale #compass{top:9px}.brLocation{padding:5px 8px}.brLocation b{font-size:16px}.brSurvivors{padding:5px 7px}#brWarning,#brCoreHud{top:55px}#brLavaNotice{bottom:136px}}
@media(max-height:380px) and (orientation:landscape){#playScreen .arenaLabel{display:none}.gameModes{margin-top:-4px;margin-bottom:3px}.gameModes button{min-height:23px;font-size:11px}.battleRoyale #abilityTip{display:none}#brCoreHud,#brWarning{top:49px}.brFlowHeader img:first-child{max-height:33px;width:54px}.brFlowHeader img:last-child{max-height:35px}.brFlowEyebrow{margin:4px auto 8px}.brFlowEyebrow b{font-size:17px}.brFlowCard{padding:10px 18px}.brClockRing{width:70px;height:70px}.brClockRing strong{font-size:38px}#brCityCards figure{aspect-ratio:2.6}#brCityCards figcaption{font-size:13px}.brQueueLayout{gap:15px}.brQueueMeter>small{display:none}.brFlowCard>.secondaryBtn{margin-top:7px}#brSlotWindow,.brSlotCard{height:115px}#brSpawnCity{margin-top:8px;font-size:17px}}
@media(prefers-reduced-motion:reduce){#brCityStatus i.warning,#brLava{animation:none}.brCaptureBar i{transition:none}}
@media(max-height:380px) and (orientation:landscape){#lobby .matchFacts{display:none}#lobby .graphicTitle img{max-height:32px}#lobby .panel h1.graphicTitle{margin:3px 0 5px}.gameModes button{min-height:22px}.gameModes{margin-bottom:3px}#lobby .connectionStatus{font-size:8px}}
@media(max-width:370px) and (max-height:700px) and (orientation:portrait){#brLobbyCities,#lobby .matchIntro{display:none!important}#lobby .panel{padding:14px}#lobby .gameModes{margin-bottom:6px}#lobby .gameModes button{font-size:12px;min-height:28px}#lobby .graphicTitle img{max-height:50px}#lobby .panel h1.graphicTitle{margin:6px 0 9px}#lobby .playBtn{font-size:20px;margin-top:10px;min-height:44px}#lobby .connectionStatus{font-size:9px;margin-top:9px}}
@media(min-height:461px) and (max-height:760px) and (orientation:landscape){#lobby .graphicTitle img{max-height:58px}#lobby .panel h1.graphicTitle{margin:8px -3px 10px}#lobby .sessionModes{margin:14px 0 12px}#lobby .connectionStatus{margin-top:10px}}
@media(max-height:460px) and (orientation:landscape){#lobby .gameModes{margin-bottom:3px}#lobby .gameModes button{min-height:24px;padding:3px 5px}#lobby .graphicTitle img{max-height:38px}#lobby .connectionStatus{margin-top:5px;min-height:12px;line-height:1.35}}
@media(max-height:380px) and (orientation:landscape){#lobby .graphicTitle img{max-height:28px}#lobby .gameModes button{min-height:22px}#lobby .sessionModes{margin-block:3px}#lobby .nameField>span{font-size:8px}#lobby .playBtn{margin-top:5px;padding:5px 10px;min-height:32px}#lobby .connectionStatus{margin-top:4px}}

/* v165: art-directed mode cards, a compact match setup, and a clear touch hierarchy. */
#lobby::before{background:linear-gradient(90deg,#082e46a6,transparent 65%)}
#lobby .lobbyTop{background:linear-gradient(180deg,#0b2d45cc,#0b2d4500);border:0}
#lobby .tabs{background:#0d3044c9;border:1px solid #b0e9f52a;border-radius:8px;padding:3px 8px;gap:4px;backdrop-filter:blur(12px)}
#lobby .tab{color:#b9d8e2;font-size:17px;min-height:43px;padding:8px 17px;border-radius:4px;font-weight:800}
#lobby .tab.active{color:#fff3b3;background:#2d596c70}
#lobby .tab::after{height:2px;left:17px;right:17px;border-radius:0;background:#ffe276;box-shadow:none}
#lobby .tab svg{stroke:currentColor;filter:none}
#lobby .profile{border-color:#b0e9f533;background:#0d3044da;border-radius:8px;color:#f1fcff;box-shadow:none}
#lobby .profile small{color:#94b9c5}#lobby .profileDot{background:#6fe3c5}
#lobby .lobbyBody{align-items:center;padding-inline:clamp(24px,4vw,64px)}
#lobby .panel{width:min(405px,38vw);max-width:none;border:1px solid #b1e8ee3b;border-radius:12px;background:linear-gradient(145deg,#0d2d43ee,#0a2337ed);padding:22px;box-shadow:0 18px 70px #07223138;backdrop-filter:blur(14px);color:#e9faff;scrollbar-color:#41849b transparent}
.modeHeader{position:relative;margin:0 0 14px}.modeHeader>span{font-size:9px;font-weight:600;letter-spacing:2px;color:#8eabbc}.modeHeader h2{font:800 28px/1.05 BarlowCondensed,Barlow,sans-serif;letter-spacing:.5px;margin:6px 0 0;color:#f2fcff}.modeHeader i{position:absolute;right:0;top:6px;width:20px;height:5px;background:#6ddfe9;box-shadow:0 8px 0 #6ddfe934}
#lobby .gameModes{display:flex;flex-direction:column;gap:10px;margin:0 0 13px}
#lobby .gameModes .modeCard{position:relative;display:flex;align-items:center;flex:none;width:100%;height:98px;min-height:98px;text-align:left;padding:13px 16px;border:1px solid #6babbc5c;border-radius:7px;overflow:hidden;background:#143e56;color:#d0e7ee;box-shadow:none;isolation:isolate;transition:border-color .15s,transform .15s}
.modeArtwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 38%;z-index:-2;opacity:.8;transition:opacity .15s,transform .25s}
.modeCard::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#092739cc 5%,#0927398c 48%,#09273900 78%)}
.modeCopy{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:75%}.modeCopy>small{font:600 8px/1 Barlow,sans-serif;letter-spacing:1.7px;color:#a0c7d5}.modeCopy>strong{font:800 27px/1 BarlowCondensed,Barlow,sans-serif;letter-spacing:.4px;color:#f0fbff;text-shadow:0 2px 8px #032030}.modeCopy>span{font:600 10px/1 Barlow,sans-serif;letter-spacing:.2px;color:#abcad5}.modeCopy em{font-style:normal;color:#68d4df;margin:0 5px}
#lobby .gameModes .modeCard.active{border-color:#ffe075;color:#fff3bc;background:#143e56;box-shadow:inset 3px 0 0 #ffe075,0 0 0 1px #ffe07524}
.modeCard.active .modeArtwork{opacity:1}.modeCard.active .modeCopy>strong{color:#fff5c3}.modeCard:hover .modeArtwork{transform:scale(1.025)}
.modeSelected{position:absolute;right:10px;bottom:10px;width:19px;height:19px;display:grid;place-items:center;border:1px solid #7caebb;border-radius:3px;background:#1237498f}.modeSelected svg{width:14px;height:14px;fill:none;stroke:#ffed9b;stroke-width:3;opacity:0}.modeCard.active .modeSelected{border-color:#f9d767;background:#634f23}.modeCard.active .modeSelected svg{opacity:1}
#playScreen h1.graphicTitle,#playScreen .matchFacts,#playScreen .matchIntro,#brLobbyCities{display:none!important}
#lobby #playScreen .arenaLabel{display:flex;align-items:center;gap:5px;margin:0;font:600 9px/1.3 Barlow,sans-serif;letter-spacing:.4px;color:#99c2d0}
#lobby .arenaLabel svg{width:11px;height:11px;stroke:#5fdae1;fill:none}
#lobby .sessionModes{display:flex;flex-direction:row;margin:17px 0 16px;gap:5px;border:0;padding:0;background:transparent;box-shadow:none;border-radius:0}
#lobby .modeChoice{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border:1px solid #6395a65c;border-radius:5px;color:#a0c2ce;background:#12354b;font:800 16px/1 BarlowCondensed,Barlow,sans-serif;letter-spacing:.7px;box-shadow:none;text-shadow:none}
#lobby .modeChoice.active{border-color:#65d8e8;background:#155369;box-shadow:inset 0 -2px #67ddea;color:#f1ffff;text-shadow:none}
.modeChoice svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}.modeChoice .modeDot{width:4px;height:4px;margin-left:2px;background:#89f2c6;box-shadow:none}
#lobby .nameField>span{color:#b5d3de;font-size:10px;letter-spacing:.4px}#lobby .nameField small{color:#7798a6;font-size:9px}
#lobby .nameField input{margin-top:6px;min-height:43px;border:1px solid #6899ab6e;border-radius:5px;background:#071e30aa;color:#f3fcff;box-shadow:none;font-size:15px;padding:9px 12px}#lobby .nameField input::placeholder{color:#7496a6}
#lobby .fieldHint{margin-top:7px;color:#8aaab8;font-size:9px;line-height:1.5}
#lobby .playBtn{min-height:52px;margin-top:17px;border:1px solid #ffe898;border-radius:6px;background:linear-gradient(105deg,#ffe579,#ffc940);box-shadow:0 3px 0 #ab731e,0 8px 22px #031b333b;font-size:25px;color:#143649;letter-spacing:.9px;text-shadow:none}
#lobby .playBtn::before{display:none}#lobby .playBtn svg:first-child{background:transparent;box-shadow:none;padding:0}
#lobby .connectionStatus{font-size:9px;line-height:1.5;color:#89aebb;margin-top:13px;min-height:14px}#lobby .connectionStatus.error{color:#ffc296}
#lobby .lobbyFooter{background:linear-gradient(0deg,#082a4199,transparent);color:#d1e7e7}#lobby .version{color:#bcdbdf;font-size:9px}.keyboardHint{background:#143e51cc;color:#bcdce6}.keyboardHint kbd{color:#e5f7ff;border-color:#7fadbf6c}
#lobby #charactersScreen h1,#lobby #mapScreen h1,#lobby #settingsScreen h1{color:#edfaff}#lobby .eyebrow,#lobby .lobbyHint{color:#a2c3cc}#lobby .setting{color:#d4e9f0;border-color:#72afc23b}
@media(max-width:1000px) and (orientation:landscape){#lobby .panel{width:340px;max-width:42vw;padding:17px}#lobby .tab{padding-inline:11px;font-size:16px}#lobby .lobbyTop{gap:15px}.modeHeader h2{font-size:25px}.modeCopy>strong{font-size:24px}}
@media(max-width:640px) and (orientation:portrait){#lobby::before{background:linear-gradient(0deg,#082e46c4,transparent 72%)}#lobby .lobbyTop{padding:14px 16px 10px}#lobby .tabs{padding:3px 4px;gap:2px}#lobby .tab{font-size:15px;padding-inline:5px;min-height:40px}#lobby .tab::after{left:10px;right:10px}#lobby .lobbyBody{padding:12px 16px 8px;align-items:flex-end}#lobby .panel{width:100%;padding:18px;max-height:100%}.modeHeader{margin-bottom:12px}.modeHeader h2{font-size:26px}#lobby .gameModes .modeCard{height:82px;min-height:82px;padding:11px 14px}.modeCopy>strong{font-size:25px}.modeCopy>small{font-size:7px}.modeCopy>span{font-size:9px}#lobby .gameModes{gap:8px;margin-bottom:11px}#lobby .sessionModes{margin:13px 0}#lobby .modeChoice{min-height:38px}#lobby .nameField input{min-height:40px}#lobby .playBtn{margin-top:13px;min-height:48px}#lobby .connectionStatus{margin-top:11px}#lobby .lobbyFooter{min-height:30px;padding:7px 16px}}
@media(max-height:460px) and (orientation:landscape){#lobby .lobbyTop{min-height:57px;padding:4px 16px}#lobby .brandLogo{width:91px;height:55px}#lobby .tabs{padding:2px 4px}#lobby .tab{font-size:14px;min-height:35px;padding:7px 10px}#lobby .lobbyBody{padding:3px 20px 6px}#lobby .panel{width:min(380px,45vw);padding:12px 15px;border-radius:8px}.modeHeader{margin-bottom:7px}.modeHeader>span{display:none}.modeHeader h2{font-size:21px;margin:0}.modeHeader i{top:3px}#lobby .gameModes{gap:5px;margin-bottom:6px}#lobby .gameModes .modeCard{height:53px;min-height:53px;padding:7px 11px}.modeCopy{gap:4px}.modeCopy>small{display:none}.modeCopy>strong{font-size:21px}.modeCopy>span{font-size:8px}.modeSelected{right:7px;bottom:7px;width:15px;height:15px}#lobby #playScreen .arenaLabel{display:none}#lobby .sessionModes{margin:7px 0}#lobby .modeChoice{min-height:30px;font-size:13px}.modeChoice svg{width:12px;height:12px}#lobby .nameField>span{font-size:9px}#lobby .nameField input{min-height:31px;margin-top:4px;padding:6px 9px;font-size:13px}#lobby .playBtn{margin-top:8px;min-height:35px;font-size:21px;padding:6px 10px}#lobby .connectionStatus{margin-top:7px;font-size:8px;min-height:11px}#lobby .fieldHint{display:none}#lobby .lobbyFooter{min-height:19px;padding:4px 20px}#lobby .version{font-size:7px}}
@media(max-height:460px) and (orientation:landscape){#lobby .lobbyTop{min-height:45px;padding:2px 13px}#lobby .brandLogo{height:42px;width:74px}#lobby .tab{min-height:30px;padding:5px 8px;font-size:12px}#lobby .panel{padding:9px 12px}.modeHeader{display:none}#lobby .gameModes .modeCard{height:46px;min-height:46px}.modeCopy>strong{font-size:19px}#lobby .modeChoice{min-height:27px}#lobby .sessionModes{margin:6px 0}#lobby .nameField small{display:none}#lobby .nameField input{min-height:29px}#lobby .playBtn{margin-top:6px;min-height:32px}#lobby .connectionStatus{margin-top:5px}#lobby .lobbyFooter{min-height:17px}}

/* v164: transient online arrivals; safe placement below the match header. */
.sessionFeed{position:fixed;left:max(16px,env(safe-area-inset-left));top:max(83px,env(safe-area-inset-top));width:min(280px,36vw);display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:1050}
.sessionJoinLine{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #71d4df65;border-left:3px solid #63e2d5;border-radius:7px;padding:8px 10px 8px 31px;background:linear-gradient(110deg,#102e44ed,#102e44c9);color:#ddf7f4;font:600 12px/1.3 Barlow,sans-serif;box-shadow:0 3px 8px #06182d33;animation:sessionJoinLife 5.5s linear forwards}
.sessionJoinLine:before{content:'↗';position:absolute;left:9px;top:6px;font-size:17px;color:#76e9db}
@keyframes sessionJoinLife{0%{opacity:0;transform:translateX(-8px)}5%,74%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
.brWaiting .sessionFeed{top:auto;bottom:18px}
.battleRoyale #killfeed{left:auto;right:max(14px,env(safe-area-inset-right))!important;top:215px!important;width:min(245px,29vw);font-size:11px;text-align:right}
@media(max-height:460px) and (orientation:landscape){.sessionFeed{top:140px;left:max(12px,env(safe-area-inset-left));width:min(230px,35vw);gap:3px}.sessionJoinLine{font-size:10px;padding:6px 8px 6px 26px}.sessionJoinLine:before{left:7px;top:4px;font-size:15px}.sessionJoinLine:nth-child(n+2){display:none}.brWaiting .sessionFeed{top:auto;bottom:12px;width:min(205px,32vw)}.battleRoyale #killfeed{top:165px!important;font-size:9px;width:min(200px,30vw)}}
@media(max-width:560px) and (orientation:portrait){.sessionFeed{top:92px;width:min(245px,64vw)}.brWaiting .sessionFeed{top:12px;bottom:auto;width:min(265px,80vw)}.battleRoyale #killfeed{top:170px!important;width:155px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.sessionJoinLine{animation-name:sessionJoinLifeQuiet}@keyframes sessionJoinLifeQuiet{0%,74%{opacity:1}100%{opacity:0}}}
#lobby .tabs{align-self:center}#lobby .playBtn>span{white-space:nowrap}
@media(max-width:640px) and (max-height:720px) and (orientation:portrait){#lobby .lobbyBody{padding-top:6px}#lobby .panel{padding:14px;max-height:calc(100dvh - 183px)}.modeHeader{margin-bottom:9px}.modeHeader h2{font-size:23px}.modeHeader>span{font-size:7px}.modeHeader i{width:16px;height:4px}#lobby .gameModes .modeCard{height:65px;min-height:65px;padding:9px 11px}.modeCopy>strong{font-size:22px}.modeCopy>small{display:none}#lobby .gameModes{gap:6px;margin-bottom:8px}#lobby .sessionModes{margin:10px 0}#lobby .modeChoice{min-height:33px;font-size:14px}#lobby .nameField input{min-height:35px}#lobby .fieldHint{display:none}#lobby .playBtn{min-height:42px;margin-top:11px;font-size:22px}#lobby .connectionStatus{font-size:8px;margin-top:10px}}
@media(max-width:600px) and (max-height:340px) and (orientation:landscape){#lobby .playBtn{font-size:17px;gap:7px}#lobby .playBtn svg{width:14px;height:14px}#lobby .profile{min-width:0;padding:4px;width:35px}#lobby .profile>div,#lobby .profileDot{display:none}#lobby .profileAvatar{width:23px;height:23px}#lobby .lobbyTop{gap:8px}#lobby .tab{font-size:11px;padding-inline:6px}#lobby .tab svg{width:12px;height:12px}.modeCopy>strong{font-size:18px}}

/* Keep the complete Play panel visible on laptop and tablet landscape heights. */
@media(min-height:461px) and (max-height:760px) and (orientation:landscape){#lobby .lobbyTop{min-height:84px;padding:8px 20px;gap:15px}#lobby .brandLogo{width:110px;height:72px}#lobby .lobbyBody{padding-top:0;padding-bottom:10px}#lobby .lobbyFooter{min-height:30px;padding:7px 24px}#lobby .panel{padding:18px}.modeHeader{margin-bottom:12px}.modeHeader h2{font-size:25px}#lobby .gameModes .modeCard{height:86px;min-height:86px}#lobby .sessionModes{margin:12px 0}#lobby .nameField input{min-height:39px}#lobby .playBtn{min-height:46px;padding:9px 14px;margin-top:12px;font-size:23px}#lobby .connectionStatus{margin-top:10px}}

/* v167: one mobile menu family, with morning scenery and readable navy panels. */
:root{--bf-panel:linear-gradient(145deg,#0d2d43f5,#0a2337f5);--bf-border:#b1e8ee50;--bf-copy:#c2dce5;--bf-accent:#66dae8}
.pauseCard,.brResultCard,.brFlowCard{border:1px solid var(--bf-border);border-radius:12px;background:var(--bf-panel);color:#f2fcff;box-shadow:0 18px 70px #031e3b70;scrollbar-color:#41849b transparent}
#pauseOverlay,.brResult{background:radial-gradient(ellipse at top,#296b818c,#071d32d9);backdrop-filter:blur(10px)}
.pauseCard::before{height:3px;background:linear-gradient(90deg,var(--bf-accent) 0 45%,#ffd44f 45% 100%);border-radius:10px 10px 0 0}
.pauseCard .pauseBadge{background:#17495c;border-color:#5f9cab70;color:#bdebf2;font-size:11px;letter-spacing:.8px}
.pauseCard>p{color:var(--bf-copy);font-size:13px;line-height:1.5}
.controlGuide>div{border:1px solid #6199ab50;border-radius:7px;background:#153b50;color:#e8faff}
.controlGuide svg{stroke:var(--bf-accent)}.controlGuide b{color:#f1fcff;font-size:13px}.controlGuide span{color:var(--bf-copy);font-size:11px;line-height:1.3}
.pauseCard .secondaryBtn,.brResultCard .secondaryBtn,.brFlowCard .secondaryBtn{border:1px solid #699eaf77;border-radius:7px;background:#153b50;color:#d1eaf2;box-shadow:none;font:800 17px/1.1 BarlowCondensed,Barlow,sans-serif;letter-spacing:.5px;min-height:44px}
.brResultCard>.playBtn{border:2px solid #f5c033;border-radius:9px;background:linear-gradient(155deg,#fff5a3,#ffcf32 70%,#ffbc20);box-shadow:inset 0 2px #fff9c1,inset 0 -3px #e89416,0 4px 0 #b16a0c;color:#173951;font:800 24px/1 BarlowCondensed,Barlow,sans-serif;min-height:52px}
#brResultReason{color:var(--bf-copy);font-size:13px;letter-spacing:.8px}.brResultStats small{font-size:12px;color:var(--bf-copy)}.brResultStats strong{font-size:46px}
.brResultBadge{border-color:#ffe07588;background:#705d2d50;color:#fff2bd;font-size:19px}
#brFlowState{color:#f3fcff}#brSpawnCounter,#brFoundRoster,.brQueueMeter>small,.brQueueMeter>span{color:var(--bf-copy);font-size:12px}
.pauseCard button:focus-visible,.brResultCard button:focus-visible,.brFlowCard button:focus-visible{outline:3px solid var(--bf-accent);outline-offset:3px}
@media(max-height:460px) and (orientation:landscape){
 .pauseCard{width:min(690px,94vw);padding:12px 20px 16px;max-height:calc(100dvh - 24px)}.pauseCard::before{margin:-12px -20px 10px}.pauseLogo,.pauseCard .pauseBadge{display:none}.pauseCard h1.graphicTitle{margin:2px 0 7px}.pauseCard .graphicTitle img{max-height:45px}.pauseCard>p{font-size:12px;margin:0 0 8px}.controlGuide{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:8px 0}.controlGuide>div{padding:5px 4px;display:grid;grid-template-columns:20px 1fr;align-items:center;text-align:left;column-gap:5px}.controlGuide svg{grid-row:1/3;width:17px;height:17px;margin:0}.controlGuide b{font-size:12px}.controlGuide span{font-size:10px}.pauseCard .playBtn{min-height:38px;margin-top:8px;font-size:20px}.pauseCard .secondaryBtn{min-height:34px;margin-top:10px;font-size:16px}
 .brResultCard{width:min(470px,94vw);padding:12px 20px;max-height:calc(100dvh - 24px)}#brVictoryArt{max-height:52px}.brResultBadge{font-size:16px;margin:6px 0 2px}#brResultName{font-size:22px;margin:5px 0}#brResultReason{font-size:11px;margin-bottom:7px}.brResultStats{padding:7px 0;margin:0}.brResultStats strong{font-size:30px}.brResultStats small{font-size:10px;margin-top:4px}.brResultCard>.playBtn{min-height:38px;font-size:21px;margin-top:7px}.brResultCard>.secondaryBtn{min-height:33px;font-size:16px;margin-top:8px}
 #brSpawnCounter,#brFoundRoster,.brQueueMeter>small,.brQueueMeter>span{font-size:10px}
}
@media(max-width:370px) and (orientation:portrait){.pauseCard{padding:16px}.pauseCard::before{margin:-16px -16px 12px}.controlGuide span{font-size:10px}.pauseCard .graphicTitle img{max-height:58px}.pauseLogo{width:84px;height:55px}.brResultCard{padding:20px}#brResultName{font-size:24px}}
.controls #attack small,.controls #special small,.controls #jump small{font:800 11px/1 BarlowCondensed,Barlow,sans-serif;letter-spacing:.2px;color:#f3fcff}.hpLabels{font-size:12px}.hot{height:54px}.hot small{font-size:10px;line-height:1;font-weight:800}.hot em{font-size:11px}
@media(max-height:550px){.hpLabels{font-size:11px}#hpbox{bottom:56px}.hot{height:42px;width:38px}.hot small{font-size:9px}.controls #attack small,.controls #special small,.controls #jump small{font-size:10px}#abilityTip{bottom:82px}#poisonStatus{bottom:97px}}
@media(max-height:340px) and (orientation:landscape){.brResultCard{padding:10px 18px}#brVictoryArt{max-height:36px}.brResultBadge{font-size:14px;margin:4px 0 2px}#brResultName{font-size:20px;margin:4px 0}#brResultReason{font-size:11px;line-height:1.3;margin-bottom:4px}.brResultStats{padding:6px 0}.brResultStats strong{font-size:26px}.brResultCard>.playBtn{font-size:20px;padding:7px 12px;min-height:38px;margin-top:6px}.brResultCard>.secondaryBtn{padding:6px 12px;min-height:33px;margin-top:7px}}
/* v170: the same seven compact shields in lobby rankings, arrivals and scores. */
.rankIcon{width:29px;height:29px;flex:0 0 auto;overflow:visible;color:var(--rank-color,#b7ced8)}
.rankShield{fill:var(--rank-ink,#1b3241);stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}
.rankGlyph{fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rankNameBox{display:inline-flex!important;align-items:center;gap:7px;min-width:0;max-width:100%;padding:4px 9px 4px 5px;border-radius:6px;border:1px solid var(--rank-color);background:var(--rank-color);color:var(--rank-ink);font-weight:800;box-shadow:inset 0 1px #fff6,0 2px 0 #051b2a55}
.rankNameBox>.rankIcon{width:26px;height:26px}.rankNameBox>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rankNameBox small{color:inherit!important;font-size:9px;opacity:.7}.scorePlayer .rankNameBox{max-width:calc(100% - 42px)}
.joinedPlayer{font-weight:800}.plainPlayerName{overflow:hidden;text-overflow:ellipsis}
.accountModal{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:#031b2ac9;backdrop-filter:blur(12px)}
.accountModal[hidden]{display:none!important}.accountCard{position:relative;width:min(420px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:27px;border:1px solid #85d9e962;border-top:4px solid #ffe073;border-radius:13px;background:linear-gradient(140deg,#174056,#0b2639);box-shadow:0 16px 70px #0007;color:#e7f4f7;font:14px/1.4 Barlow,sans-serif}
.accountCard .eyebrow{font-size:10px;letter-spacing:2px;color:#9ebdcb}.accountCard h2{font:800 37px/.98 BarlowCondensed,Barlow,sans-serif;margin:10px 0;color:#fff2ba}.accountClose{position:absolute;right:12px;top:9px;width:32px;height:32px;border:1px solid #82c6d743;background:#14384c;color:#e4f3f7;font-size:23px;border-radius:7px;cursor:pointer}.accountCard p{margin:10px 0}.accountCard #accountIdentity{color:#91c6d6;font-size:12px}
.authSwitches,.rankModes{display:grid;grid-template-columns:1fr 1fr;gap:6px}.authSwitches button,.rankModes button{border:1px solid #4d879d;background:#122f42;color:#a9c8d3;border-radius:6px;padding:9px 7px;font:800 17px BarlowCondensed,Barlow,sans-serif;cursor:pointer}.authSwitches button.active,.rankModes button.active{border-color:#ffe16b;background:#ffe16b;color:#163b50;box-shadow:0 2px 0 #ad7f27}.accountCard label{display:block;margin-top:14px;font-size:12px;font-weight:700;color:#e3eff4}.accountCard label[hidden]{display:none}.accountCard label em{float:right;color:#86aab9;font-size:10px;font-style:normal}.accountCard input{display:block;width:100%;box-sizing:border-box;border:1px solid #588797;border-radius:6px;background:#0b2638;color:#fff;padding:10px 11px;font:15px Barlow,sans-serif;margin-top:5px;min-height:41px}.accountCard input:focus{outline:2px solid #79d8e7;outline-offset:1px}.accountCard label small{display:block;color:#92b2c1;font-size:10px;font-weight:400;line-height:1.35;margin-top:5px}.accountCard #authHelp{color:#a5c4cf;font-size:11px}.accountCard .playBtn{width:100%;min-height:43px;margin-top:13px;font-size:23px}.accountCard .secondaryBtn{width:100%;margin-top:11px;min-height:38px}.accountCard #authForgot{display:block;margin:11px auto 0;padding:5px;border:0;background:none;color:#a9e0ed;font:12px Barlow,sans-serif;text-decoration:underline;cursor:pointer}.accountCard #authMessage{font-size:12px;color:#a8efd1;line-height:1.45;overflow-wrap:anywhere}.accountCard #authMessage.error{color:#ffb4a6}.accountCard button:disabled{opacity:.48;cursor:default}
.accountModeRank{display:flex;align-items:center;gap:11px;padding:12px 10px;margin-top:10px;border:1px solid var(--rank-color);border-radius:8px;background:#08283c}.accountModeRank>.rankIcon{width:44px;height:44px}.accountModeRank small,.accountModeRank b,.accountModeRank em{display:block}.accountModeRank small{font-size:9px;color:#9dbfcf;letter-spacing:1px}.accountModeRank b{color:var(--rank-color);font:800 24px BarlowCondensed,Barlow,sans-serif}.accountModeRank em{font-size:10px;font-style:normal;color:#b2ced9}.accountCard #accountEmailStatus{font-size:10px;color:#abc6d1;line-height:1.5}
#lobby .profile{cursor:pointer;text-align:left;color:#eaf5f8;font-family:Barlow,sans-serif}#lobby .profile:focus-visible{outline:2px solid #ffe073;outline-offset:3px}
#lobby .tabs{flex-shrink:1}#lobby .tab{padding-inline:12px}#lobby .panel.rankPanel{width:min(620px,55vw);max-width:55vw;display:flex;flex-direction:column;overflow:hidden;padding:20px}#lobby #rankingScreen.active{display:flex;flex-direction:column;min-height:0;max-height:100%;flex:1}
.rankingHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.rankingHeader .eyebrow{font-size:9px!important}.rankingHeader h1{font:800 37px/1 BarlowCondensed,Barlow,sans-serif!important;margin:4px 0 0!important;color:#fff2b0}.rankingHeader #rankRefresh{width:32px;height:32px;background:#244d61;border:1px solid #74b2c360;border-radius:6px;color:#d3eff6;font-size:22px;cursor:pointer}.rankModes button{font-size:17px;padding:7px}.rankModes{margin-bottom:11px}#rankGuestNote{font:11px/1.4 Barlow,sans-serif;color:#aecad6;margin:0 0 7px}.rankJoinButton{align-self:flex-start;padding:6px 0;border:0;border-bottom:1px solid #ebcb6366;background:none;color:#ffe07c;font:800 14px BarlowCondensed,Barlow,sans-serif;cursor:pointer;margin-bottom:7px}.rankPersonal{display:flex;align-items:center;gap:10px;padding:9px 11px;border-left:3px solid var(--rank-color);border-radius:6px;background:#07334a;margin:0 0 8px}.rankPersonal .rankIcon{width:42px;height:42px}.rankPersonal small,.rankPersonal b,.rankPersonal span{display:block}.rankPersonal small{font-size:8px;letter-spacing:1px;color:#a4c1d0}.rankPersonal b{font:800 24px/1.1 BarlowCondensed,Barlow,sans-serif;color:var(--rank-color)}.rankPersonal span{font:10px Barlow,sans-serif;color:#bcdae4}
#rankLoadStatus{font:10px/1.35 Barlow,sans-serif;color:#96bacb;margin:0 0 6px}.rankingScroll{min-height:54px;max-height:280px;overflow:auto;overscroll-behavior:contain;border:1px solid #78adbd35;border-radius:7px;background:#092c407a;flex:1}.rankingScroll table{width:100%;border-collapse:collapse;table-layout:fixed}.rankingScroll th{position:sticky;top:0;background:#15384c;color:#86b1c4;font:700 10px Barlow,sans-serif;letter-spacing:.8px;padding:9px;text-align:left;z-index:1}.rankingScroll th:first-child{width:38px}.rankingScroll th:last-child{width:54px;text-align:right}.rankingScroll td{padding:6px 9px;border-top:1px solid #6eb2c21b;font-size:12px}.rankPosition{font:800 17px BarlowCondensed,Barlow,sans-serif;color:#afced8}.rankTotal{text-align:right;font:800 20px BarlowCondensed,Barlow,sans-serif!important;color:#fff1a4}.rankingScroll .rankNameBox{font-size:12px;max-width:100%;box-sizing:border-box}.rankingScroll #rankingEmpty{text-align:center;padding:17px 15px;margin:0;color:#a0c2d2;font-size:11px;line-height:1.5}.rankPagination{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:7px 0}.rankPagination button{width:29px;height:26px;border:1px solid #73adbe42;background:#244b60;color:#d8f0f6;border-radius:5px;cursor:pointer}.rankPagination button:disabled{opacity:.35;cursor:default}.rankPagination span{font:10px Barlow,sans-serif;color:#95b4c4}.rankGuide{border-top:1px solid #65a2b038;padding-top:7px;flex:0 0 auto}.rankGuide summary{color:#aad0dd;font:700 10px Barlow,sans-serif;cursor:pointer;letter-spacing:.5px}.rankGuide[open]{max-height:170px;overflow:auto}#rankTierGuide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:9px}#rankTierGuide>div{display:flex;align-items:center;gap:7px;padding:5px;border:1px solid #719bae26;border-radius:6px;background:#14374b}#rankTierGuide b{display:block;font:800 16px BarlowCondensed,Barlow,sans-serif;color:var(--rank-color)}#rankTierGuide small{display:block;font:9px Barlow,sans-serif;color:#afc9d5}
@media(max-width:900px) and (orientation:landscape){#lobby .tab{padding-inline:8px;font-size:14px;gap:5px}#lobby .panel.rankPanel{width:min(520px,70vw);max-width:70vw;padding:12px 15px}.rankingHeader{margin-bottom:6px}.rankingHeader h1{font-size:29px!important}.rankingScroll{max-height:none}.rankPersonal{padding:5px 9px;margin-bottom:5px}.rankPersonal .rankIcon{width:33px;height:33px}.rankPersonal b{font-size:20px}.rankModes{margin-bottom:6px}.rankModes button{font-size:14px;padding:5px}}
@media(max-width:640px) and (orientation:portrait){#lobby .tabs{grid-template-columns:repeat(5,minmax(0,1fr))}#lobby .tab{font-size:13px;padding-inline:2px;gap:3px}#lobby .tab svg{width:13px;height:13px}#lobby .panel.rankPanel{width:100%;max-width:100%;padding:17px}.rankingHeader h1{font-size:33px!important}.rankingScroll{max-height:275px}.rankingScroll th{padding:8px 7px}.rankingScroll th:first-child{width:27px}.rankingScroll th:last-child{width:44px}.rankingScroll td{padding:6px 7px}.rankingScroll .rankNameBox{font-size:11px;padding-right:6px;gap:5px}.rankingScroll .rankIcon{width:24px;height:24px}.accountCard{padding:23px}}
@media(max-width:370px) and (orientation:portrait){#lobby .tab{font-size:11px;gap:2px}#lobby .tab svg{width:11px;height:11px}#lobby .panel.rankPanel{padding:13px}.rankModes button{font-size:15px}.accountCard{padding:20px}.accountCard h2{font-size:31px}.accountCard label{margin-top:11px}.accountCard input{min-height:38px}.scorePlayer .rankNameBox{font-size:11px;gap:4px;padding-right:5px}.scorePlayer .rankIcon{width:22px;height:22px}}
@media(max-height:460px) and (orientation:landscape){#lobby .tab{font-size:11px;padding-inline:6px;gap:3px}#lobby .tab svg{width:12px;height:12px}#lobby .panel.rankPanel{padding:9px 12px}.rankingHeader .eyebrow{display:none}.rankingHeader h1{font-size:25px!important}.rankingHeader{margin-bottom:4px}.rankModes{margin-bottom:5px}.rankModes button{padding:4px;font-size:13px}#rankGuestNote{font-size:10px;margin-bottom:3px}.rankJoinButton{font-size:12px;margin-bottom:3px;padding:3px 0}.rankingScroll{min-height:40px}.rankingScroll td{padding-block:4px}.rankingScroll th{padding-block:5px}.rankPagination{margin:4px 0}.rankPagination button{height:22px}.rankGuide{padding-top:4px}.rankGuide summary{font-size:9px}.rankPersonal .rankIcon{width:28px;height:28px}.rankPersonal b{font-size:17px}.rankPersonal small{font-size:7px}.rankPersonal span{font-size:9px}.accountCard{width:min(520px,100%);padding:19px 24px}.accountCard h2{font-size:27px}.accountCard h2 br{display:none}.accountCard label{margin-top:9px}.accountCard input{min-height:35px;padding:7px 10px}.accountCard .playBtn{min-height:36px;font-size:20px}.accountCard p{margin:7px 0}}

#accountSummary[hidden],#authFields[hidden],#authSwitches[hidden],#authLoggedActions[hidden],#rankPersonal[hidden],#rankGuestNote[hidden],#rankAccountAction[hidden],#rankingEmpty[hidden],#authForgot[hidden]{display:none!important}

#lobby .rankingHeader h1{color:#fff2b0}
@media(max-height:460px) and (orientation:landscape){
 .rankingHeader #rankRefresh{width:26px;height:26px;font-size:20px}
 .rankPersonal{padding:4px 8px;gap:6px}
 .rankPersonal .rankIcon{width:25px;height:25px}
 .rankPersonal small{display:none}
 .rankPersonal>div{display:flex;flex-wrap:wrap;align-items:center;column-gap:7px}
 .rankPersonal b{font-size:16px}
 .rankPersonal span{font-size:8px}
 #rankLoadStatus{font-size:8px;margin-bottom:3px}
 .rankingScroll .rankNameBox{padding-block:2px}
 .rankingScroll .rankIcon{width:22px;height:22px}
}
/* Live camp: exactly the account's own Human plus accepted party members. */
.partyCamp{position:absolute;z-index:2;left:44%;right:4%;bottom:17%;height:44%;pointer-events:none;color:#fff9d4;font-family:Barlow,sans-serif}
.campTop{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;width:min(340px,90%);padding:8px 10px;border:1px solid #fff6c15c;border-radius:10px;background:#15364ee8;box-shadow:0 5px 20px #15334425;pointer-events:auto}
.campTop>div{display:flex;align-items:center;gap:10px}.campTop small{font-size:10px;letter-spacing:.1em;font-weight:700;color:#c3dee2}.campTop b{font-family:BarlowCondensed,Barlow,sans-serif;font-size:22px;color:#ffe779}
#friendsButton{display:flex;align-items:center;gap:6px;position:relative;padding:7px 10px;min-height:34px;border:1px solid #ffe37c8c;border-radius:7px;background:#ffe16a;color:#183647;font:700 11px Barlow,sans-serif;cursor:pointer}#friendsButton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}#friendsBadge{position:absolute;right:-6px;top:-7px;min-width:18px;height:18px;padding:1px 3px;border-radius:10px;background:#f26c51;border:2px solid #193e51;color:#fff;font-style:normal;font-size:10px}
.campMembers{position:absolute;left:0;right:0;top:54px;bottom:0}.campMember{position:absolute;left:var(--seat);bottom:0;width:clamp(65px,15vw,178px);height:100%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.campMember img{display:block;width:100%;max-height:calc(100% - 29px);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 3px #30412752);animation:campBreath 4.5s ease-in-out var(--delay) infinite}.campMembers:has(.campMember:nth-child(2)) .campMember{width:24%}.campMembers:has(.campMember:nth-child(4)) .campMember{width:18%}.campName{display:flex;align-items:center;gap:5px;max-width:100%;min-height:22px;background:#16364fe8;border:1px solid #fff6ba50;border-radius:5px;padding:3px 6px;font-size:12px;box-shadow:0 2px 4px #133a4224}.campName b{color:var(--name-color,#fff4cc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.campName small{font-size:8px;color:#a9cdd4}.campMember[data-me="true"] .campName{border-color:#ffe16a}.partyNotice{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:5px;background:#fff0aa;color:#244252;white-space:nowrap;font-size:10px;font-weight:700}.practiceCamp .campTop{top:0}
@keyframes campBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.socialModal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:#061c2bd9;backdrop-filter:blur(9px);color:#e4f1f2;font-family:Barlow,sans-serif}.socialModal[hidden]{display:none}.socialCard{width:min(680px,100%);max-height:100%;display:flex;flex-direction:column;background:linear-gradient(145deg,#183f53,#0b293d);border:1px solid #578492;border-top:4px solid #ffe06b;border-radius:16px;box-shadow:0 18px 55px #0006;overflow:hidden}.socialHeader{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;gap:10px;flex:none}.socialHeader small{font-size:10px;letter-spacing:.16em;color:#96bac7;font-weight:700}.socialHeader h2{font-family:BarlowCondensed,Barlow,sans-serif;font-size:31px;line-height:1;margin:7px 0 0;color:#fff1aa}.socialHeader>div:last-child{display:flex;gap:7px}.socialHeader button{width:33px;height:33px;border:1px solid #456b7e;border-radius:8px;background:#173c50;color:#c4e2e8;font:24px Barlow,sans-serif;cursor:pointer}.socialHeader button:disabled{opacity:.35}.socialContent{overflow:auto;padding:0 22px 8px;overscroll-behavior:contain;min-height:0;scrollbar-color:#496e7e transparent}.socialContent[hidden],.socialGuest[hidden]{display:none}.socialSection{margin-bottom:13px;padding:12px;background:#0b293f9e;border:1px solid #345c6f;border-radius:10px}.socialSection h3{font-size:11px;letter-spacing:.1em;color:#d4edf1;margin:0 0 9px;font-weight:700}.socialSectionTitle{display:flex;align-items:center;justify-content:space-between;gap:10px}.socialSectionTitle>span{font:22px BarlowCondensed,Barlow,sans-serif;color:#ffe46d}.socialSection p{font-size:11px;line-height:1.45;color:#9dc1cf;margin:4px 0 10px}.socialPerson,.socialInvite{display:flex;align-items:center;gap:9px;min-height:47px;padding:8px 0;border-bottom:1px solid #456b7e45}.socialPerson:last-child,.socialInvite:last-child{border-bottom:0}.socialPerson>.portrait{width:30px;height:33px;flex:none}.socialIdentity,.socialInvite>div:first-child{flex:1;min-width:0}.socialIdentity b,.socialInvite b{display:block;font-size:13px;overflow-wrap:anywhere}.socialIdentity small,.socialInvite small{display:block;font-size:9px;color:#829eaa;margin-top:3px;letter-spacing:.04em}.socialIdentity .friendOnline{color:#74e3b0}.socialActions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex:none;flex-wrap:wrap;max-width:55%}.socialActions button,.socialPartyActions button,#friendAdd{border:1px solid #416f82;border-radius:6px;background:#194458;color:#daf1f3;padding:7px 9px;font:700 10px Barlow,sans-serif;cursor:pointer}.socialActions button[data-action="friends/accept"],.socialActions button[data-action="party/accept"],#partyCreate,#friendAdd{background:#ffe16a;color:#17374d;border-color:#ffe99c}.socialActions button[data-action="friends/remove"]{font-size:19px;padding:2px 6px;min-width:23px}.socialActions button:disabled,.socialPartyActions button:disabled,#friendAdd:disabled{opacity:.35;cursor:default}.socialInParty{color:#8fdabd;font-size:9px}.socialPartyActions{display:flex;justify-content:flex-end;margin-top:8px}.socialPartyActions button{font-size:11px;min-height:32px}#friendForm{display:flex;gap:8px}#friendUsername{min-width:0;flex:1;background:#08273b;border:1px solid #4a7488;border-radius:7px;color:#e8f5f5;font:14px Barlow,sans-serif;padding:9px 10px;min-height:38px}#friendUsername::placeholder{color:#779eb0}.socialSection .socialHelp{font-size:10px;margin-bottom:0}.socialStatus{font-size:11px;color:#a9cbd4;line-height:1.4;margin:0;padding:8px 22px 15px;flex:none;min-height:24px}.socialStatus.error{color:#ffaf9c}.socialGuest{padding:16px 28px 30px;text-align:center}.socialGuest>.portrait{width:68px;height:78px;margin:0 auto}.socialGuest p{font-size:14px;line-height:1.6;color:#bfd4dc;margin:15px 0 20px}.socialGuest button{background:#ffe36c;border:1px solid #fff0a5;border-radius:9px;color:#17374d;font:700 13px Barlow,sans-serif;padding:14px 17px;cursor:pointer}.socialGuest button:disabled{opacity:.4}.socialModal button:focus-visible,.socialModal input:focus-visible,#friendsButton:focus-visible{outline:3px solid #a6eaff;outline-offset:3px}
@media(max-height:600px) and (orientation:landscape){.partyCamp{left:43%;right:3%;height:60%;bottom:10%}.campTop{width:min(245px,90%);padding:5px 8px}.campTop b{font-size:18px}.campTop small{font-size:9px}#friendsButton{min-height:28px;font-size:9px;padding:5px 7px}.campMembers{top:42px}.campName{font-size:10px;min-height:18px;padding:2px 4px}.campName small{font-size:7px}.socialHeader{padding:10px 15px}.socialHeader h2{font-size:25px}.socialContent{padding:0 15px 6px}.socialSection{padding:9px;margin-bottom:9px}.socialStatus{padding:5px 15px 10px}}
@media(max-width:640px) and (orientation:portrait){.partyCamp{left:6%;right:6%;top:158px;bottom:auto;height:clamp(132px,22vh,200px)}.campTop{width:min(280px,100%);padding:5px 8px}.campTop b{font-size:18px}.campTop small{font-size:9px}#friendsButton{min-height:28px;font-size:9px;padding:5px 7px}.campMembers{top:43px}.campMember{width:110px}.campMembers:has(.campMember:nth-child(2)) .campMember{width:27%}.campMembers:has(.campMember:nth-child(4)) .campMember{width:18%}.campName{font-size:9px;padding:2px 4px;min-height:18px}.campName small{display:none}.partyNotice{font-size:9px;bottom:-22px}.socialHeader{padding:15px 16px 12px}.socialHeader h2{font-size:27px}.socialContent{padding:0 14px 5px}.socialSection{padding:10px}.socialActions{max-width:55%;gap:4px}.socialActions button{padding:6px 7px;font-size:9px}.socialStatus{padding:8px 16px 14px}.socialGuest{padding:12px 18px 24px}.socialGuest p{font-size:12px}}
@media(max-width:370px) and (orientation:portrait){.partyCamp{top:140px;height:130px;left:7%;right:7%}.campMembers{top:41px}.socialPerson>.portrait{display:none}.socialActions{max-width:61%}.socialIdentity b{font-size:12px}.socialHeader h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.campMember img{animation:none}}
#lobby .panel{position:relative;z-index:3}#lobby .lobbyTop{position:relative;z-index:4}
@media(max-width:640px) and (orientation:portrait){.campTop{padding:3px 7px;min-height:26px}.campTop b{font-size:16px}#friendsButton{padding:3px 6px;min-height:24px}.campMembers{top:33px}.campMember img{max-height:calc(100% - 15px)}.campName{min-height:15px;padding:1px 3px;font-size:8px}.campMembers:has(.campMember:nth-child(4)) .campMember{width:19%}}

@media(max-height:720px) and (orientation:portrait){#lobby .panel:not(.rankPanel){max-height:calc(100% - 90px)}}

.socialGuest{min-height:0;overflow:auto}
@media(max-width:370px) and (orientation:portrait){#lobby .brandLogo{width:108px;flex:0 0 108px}#lobby .profile{min-width:120px;max-width:155px;flex:0 1 calc(100% - 120px);padding:6px 8px}}
@media(max-width:640px) and (max-height:720px) and (orientation:portrait){#lobby .panel:not(.rankPanel){padding:10px 12px}.modeHeader{margin-bottom:5px}.modeHeader h2{font-size:21px}.modeHeader>span{display:none}#lobby .gameModes .modeCard{height:52px;min-height:52px;padding:7px 10px}#lobby .gameModes{gap:5px;margin-bottom:5px}#lobby .modeCopy>strong{font-size:21px}#lobby .sessionModes{margin:6px 0}#lobby .modeChoice{min-height:30px}#lobby .nameField input{margin-top:4px;padding:7px 10px;min-height:35px}#lobby .playBtn{padding:7px 10px;min-height:40px;margin-top:7px}#lobby .connectionStatus{margin-top:6px;min-height:12px}}

/* v173: city names live inside the map, with room for two readable lines. */
.battleRoyale #miniMap{width:162px;height:162px}.battleRoyale #hudMenu{top:max(184px,calc(env(safe-area-inset-top) + 184px))}
@media(max-height:550px){.battleRoyale #miniMap{width:128px;height:128px}.battleRoyale #hudMenu{top:max(145px,calc(env(safe-area-inset-top) + 145px))}}
@media(max-width:560px) and (orientation:portrait){.battleRoyale #miniMap{width:118px;height:118px}.battleRoyale #hudMenu{top:max(135px,calc(env(safe-area-inset-top) + 135px))}}

/* v174: compact communications and a warning contained by the minimap. */
.voiceControls button,.chatToggle,.chatPanel button{cursor:pointer;color:#e5f2f6;border:1px solid #a3dae440;background:#102d3bed;border-radius:9px;touch-action:manipulation}.voiceButtons{display:flex;gap:6px;align-items:center}.voiceButtons button{width:36px;height:36px;padding:7px;display:grid;place-items:center}.voiceButtons svg,.chatToggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.voiceButtons button.enabled{color:#9ce8d4;border-color:#6fd1b75c;background:#103c39ee}.voiceSlash{stroke:#ff9f93;stroke-width:2.4}.voiceButtons button:disabled{opacity:.5}.voiceChannelRows{display:flex;gap:8px}.voiceChannelRows label{display:flex;align-items:center;gap:5px;font-size:11px;color:#b5d1df}.voiceControls select,.chatPanel select{background:#173646;color:#f3fcff;border:1px solid #a3dae440;border-radius:5px;font:inherit;padding:3px 4px;min-width:56px}.voiceStatus{display:block;color:#b3cbd7;font-size:10px;line-height:1.3;max-width:235px}.voiceStatus.error,#chatStatus.error{color:#ffb5a4}.lobbyVoice{position:absolute;top:42px;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;z-index:2}.lobbyVoice .voiceStatus{max-width:225px;text-align:right}.gameVoice{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(155px,calc(env(safe-area-inset-right) + 155px));z-index:12;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:auto}.battleRoyale .gameVoice{right:max(185px,calc(env(safe-area-inset-right) + 185px))}.gameVoice .voiceButtons{gap:4px}.gameVoice .voiceButtons button{width:32px;height:32px;padding:6px}.gameVoice #voiceChannelsButton{width:23px;font-size:19px}.gameVoice .voiceChannelRows{position:absolute;top:40px;right:0;padding:10px;background:#092635f5;border:1px solid #739daf70;border-radius:9px;flex-direction:column;gap:7px}.gameVoice .voiceStatus{max-width:105px;font-size:9px;text-align:right}.voiceConnections{color:#8ddac8;font-size:9px}.chatToggle{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:35;display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:11px;font-weight:700}.chatToggle i{font-style:normal;border-radius:10px;padding:2px 5px;background:#eb8464;color:#142630}.chatPanel{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(61px,calc(env(safe-area-inset-bottom) + 61px));width:min(300px,calc(100vw - 28px));max-height:52vh;z-index:36;padding:10px;border:1px solid #92c5d563;border-radius:12px;background:#082532f5;color:#ecf7fa;box-shadow:0 8px 30px #0004;pointer-events:auto}.chatPanel header{display:flex;gap:8px;align-items:center;font-size:12px}.chatPanel header select{margin-left:auto}.chatPanel header button{width:29px;height:29px;font-size:19px}.chatPanel #chatMessages{height:min(180px,27vh);overflow-y:auto;overflow-wrap:anywhere;padding:9px 0;font-size:12px;line-height:1.45;user-select:text}.chatPanel #chatMessages>div{margin-bottom:6px}.chatPanel #chatMessages b{color:#82d4e5}.chatPanel #chatMessages .chatMine b{color:#a9e6b0}.chatPanel form{display:flex;gap:5px}.chatPanel input{min-width:0;flex:1;border:1px solid #70b4cb50;border-radius:7px;background:#163b4c;color:white;padding:8px;font-size:14px}.chatPanel form button{width:34px}#chatStatus{display:block;margin-top:6px;font-size:10px;color:#a4c9d3}.battleRoyale #miniMap:has(#brWarning:not([hidden])){border-color:#ff936b;box-shadow:0 0 0 2px #ff713b45}.battleRoyale #miniMap #brWarning{position:absolute;left:3px;right:3px;bottom:3px;top:auto;width:auto;min-width:0;transform:none;display:flex;align-items:center;gap:4px;padding:4px 5px;border-radius:5px;border:1px solid #ff9b6980;background:#431c12f2;box-shadow:none}.battleRoyale #miniMap #brWarning .brWarningIcon{width:17px;height:20px;font-size:15px;flex-shrink:0}.battleRoyale #miniMap #brWarning small{font-size:7px;line-height:1.1;letter-spacing:.3px}.battleRoyale #miniMap #brWarning b{font-size:10px;line-height:1.15;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.battleRoyale #miniMap #brWarning strong{font-size:20px;margin-left:auto;line-height:1}.battleRoyale #miniMap #brWarning[hidden]{display:none}.voiceControls[hidden],.voiceChannelRows[hidden],.chatPanel[hidden],.chatToggle[hidden]{display:none!important}
@media(max-height:550px){.battleRoyale .gameVoice{right:max(150px,calc(env(safe-area-inset-right) + 150px))}.gameVoice .voiceStatus{max-width:110px}.lobbyVoice{top:39px}.lobbyVoice .voiceStatus{display:none}.lobbyVoice .voiceChannelRows{font-size:9px}.lobbyVoice .voiceButtons button{width:29px;height:29px;padding:5px}.lobbyVoice .voiceChannelRows select{font-size:10px}}
@media(max-width:560px) and (orientation:portrait){.battleRoyale .gameVoice{right:max(140px,calc(env(safe-area-inset-right) + 140px))}.gameVoice .voiceStatus,.voiceConnections{display:none}.gameVoice .voiceButtons{flex-direction:column}.gameVoice .voiceChannelRows{right:36px;top:0}.lobbyVoice{top:38px;right:0}.lobbyVoice .voiceButtons button{width:30px;height:30px;padding:5px}.lobbyVoice .voiceChannelRows{gap:5px}.lobbyVoice .voiceChannelRows label{font-size:9px;gap:2px}.lobbyVoice .voiceStatus{display:none}.chatToggle{bottom:max(10px,env(safe-area-inset-bottom));padding:7px 9px}.battleRoyale #miniMap #brWarning b{font-size:8px}.battleRoyale #miniMap #brWarning strong{font-size:17px}}

/* Lobby chat shares the audio toolbar, above the camp scene. */
.chatToggle{z-index:118}.chatPanel{z-index:119}.commsLobby .chatToggle{position:relative;right:auto;bottom:auto;gap:0;z-index:auto;width:36px;height:36px;padding:7px}.commsLobby .chatToggle>span{display:none}.commsLobby .chatToggle i{position:absolute;top:-6px;right:-6px;font-size:9px}.commsLobby .chatPanel{bottom:max(52px,calc(env(safe-area-inset-bottom) + 52px))}

.lobbyVoice{pointer-events:auto}
/* Match chat uses the minimap menu so it never covers touch attacks. */
#hudMenu .chatToggle{position:relative;right:auto;bottom:auto;gap:0;z-index:auto}
#hudMenu .chatToggle>span{display:none}
#hudMenu .chatToggle i{position:absolute;top:-6px;right:-6px;font-size:9px}
.gameFullscreen{width:100%;height:100%;overflow:hidden}
/* v175: mode choices use the same two-column footprint as Online / Practice. */
#lobby{--lobby-choice-size:40px;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
#lobby .panel:has(#playScreen.active){width:min(330px,38vw);padding:16px;max-width:none}
#lobby .gameModes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:0;margin:0 0 8px;border:0;border-radius:6px;background:none}
#lobby .gameModes .modeCard{width:auto;height:var(--lobby-choice-size);min-height:var(--lobby-choice-size);padding:0 5px;justify-content:center;text-align:center;border-radius:6px}
#lobby .modeCopy{width:100%;align-items:center;gap:0;min-width:0}
#lobby .modeCopy>strong{font:800 16px/1 BarlowCondensed,Barlow,sans-serif;letter-spacing:.2px;white-space:nowrap}
#lobby .modeCopy>small,#lobby .modeCopy>span,#lobby .modeSelected{display:none}
#lobby .modeArtwork{opacity:.22;object-position:center}
#lobby .modeCard.active .modeArtwork{opacity:.35}
#lobby .modeCard::before{background:#09273980}
#lobby .gameModes .modeCard.active{box-shadow:inset 0 -2px #ffe075;border-color:#ffe075}
#lobby .sessionModes{margin:8px 0 12px}
#lobby .modeChoice{min-height:var(--lobby-choice-size)}
#lobby .lobbyFooter{position:relative;z-index:5;min-height:48px;gap:8px;padding-top:5px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
#lobby .lobbyVoice{position:static;display:flex;flex-direction:row;align-items:center;gap:9px;pointer-events:auto}
#lobby .lobbyVoice .voiceButtons{gap:5px}
#lobby .lobbyVoice .voiceButtons button{width:38px;height:38px;padding:8px}
#lobby .lobbyVoice .voiceChannelRows{gap:8px}
#lobby .lobbyVoice .voiceChannelRows label{font-size:10px;gap:4px}
#lobby .lobbyVoice .voiceChannelRows select{font-size:10px;min-width:48px;min-height:30px;padding:3px}
#lobby .lobbyVoice .voiceStatus{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#lobby .campName.ranked{border-color:var(--rank-color);box-shadow:0 0 0 1px #071e3066,0 2px 5px #071e304d;color:var(--rank-color)}
#lobby .campName .rankIcon{width:19px;height:19px;flex:none}
#lobby .campName b{min-width:0;flex:1}
@media(max-height:600px) and (orientation:landscape){
 #lobby{--lobby-choice-size:34px}
 #lobby .panel:has(#playScreen.active){width:min(280px,38vw);padding:12px}
 #lobby .modeCopy>strong{font-size:15px}
 #lobby .campName .rankIcon{width:16px;height:16px}
 #lobby .lobbyFooter{min-height:44px}
 #lobby .lobbyVoice .voiceButtons button{width:34px;height:34px;padding:6px}
}
@media(max-width:600px) and (max-height:340px) and (orientation:landscape){
 #lobby .panel:has(#playScreen.active){width:43vw;padding:9px}
 #lobby .modeCopy>strong{font-size:13px}
}
@media(max-width:640px) and (orientation:portrait){
 #lobby{--lobby-choice-size:40px}
 #lobby .panel:has(#playScreen.active){width:100%;padding:14px}
 #lobby .lobbyFooter{justify-content:flex-end;padding-left:12px;padding-right:12px;min-height:48px}
 #lobby .version{display:none}
 #lobby .lobbyVoice{gap:6px}
 #lobby .lobbyVoice .voiceChannelRows{gap:5px}
 #lobby .lobbyVoice .voiceButtons{gap:4px}
 #lobby .campName{gap:3px}
 #lobby .campName .rankIcon{width:14px;height:14px}
}
@media(max-height:340px) and (orientation:landscape){
 #lobby:has(#rankingScreen.active) .lobbyBody{padding-top:0;padding-bottom:0}
 #lobby .panel.rankPanel{padding:7px 10px}
 #lobby .rankingHeader{margin-bottom:3px}
 #lobby .rankPersonal{padding:2px 8px;margin-bottom:3px}
 #lobby .rankPersonal .rankIcon{width:22px;height:22px}
 #lobby .rankingScroll{min-height:58px}
}

#downloadDiagnostics{margin-top:8px;font-size:11px;padding:7px 10px}#diagnosticsStatus{display:block;margin-top:5px;font-size:10px;line-height:1.3;color:#b1c8d2}

/* v177: landscape entry, readable match notices and accessible spectator taps. */
.displayEntry,.landscapeGate{position:fixed;inset:0;z-index:6001;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:linear-gradient(145deg,#072c40ed,#051c2af5);color:#e6f5f3;font-family:Barlow,sans-serif}
.displayEntryCard{position:relative;width:min(420px,100%);padding:32px 30px 28px;text-align:center;border:1px solid #79ced65c;border-radius:18px;background:linear-gradient(135deg,#1a4d5cee,#0c3044);box-shadow:0 20px 60px #0006}
.displayEntryIcon{width:76px;height:57px;fill:none;stroke:#ffe080;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 14px}
.displayEntryCard>small{color:#92c6ca;font-size:10px;font-weight:700;letter-spacing:3px}.displayEntryCard h2{font:800 36px/1 BarlowCondensed,Barlow,sans-serif;color:#fff1c1;margin:12px 0}.displayEntryCard p{font-size:14px;line-height:1.5;color:#b3d7dc;margin:0 0 17px}.displayEntryCard .playBtn{width:100%;font-size:23px;min-height:51px;margin:0}.displayEntryCard #fullscreenDismiss{position:absolute;right:3px;top:3px;width:44px;height:44px;border:0;background:none;color:#97bfc8;font:22px Barlow,sans-serif;padding:0;border-radius:8px}.displayEntryCard button:focus-visible{outline:2px solid #a8edff;outline-offset:2px}
.landscapeGate{z-index:6000;flex-direction:column;text-align:center;background:#092b3efc}.landscapeGate svg{width:82px;height:82px;fill:none;stroke:#ffde75;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.landscapeGate h2{font:800 32px/1 BarlowCondensed,Barlow,sans-serif;color:#fff0bf;margin:20px 0 10px}.landscapeGate p{color:#a4cbd4;font-size:13px;margin:0}
.displayNotice,.voiceNotice{position:fixed;left:50%;bottom:max(55px,calc(env(safe-area-inset-bottom) + 55px));transform:translateX(-50%);z-index:6002;width:max-content;max-width:min(440px,calc(100vw - 30px));padding:11px 14px;border:1px solid #80d0d76e;border-radius:9px;background:#103d50f5;color:#d7f3f4;font:12px/1.5 Barlow,sans-serif;text-align:center;pointer-events:none;box-shadow:0 5px 20px #0004}.voiceNotice.error{color:#ffe1bf;border-color:#e7b3856e}.displayEntry[hidden],.landscapeGate[hidden],.displayNotice[hidden],.voiceNotice[hidden]{display:none!important}.voiceButtons button.waiting{border-color:#ffe07d;color:#ffe07d;animation:voiceWaiting 1s ease-in-out infinite}@keyframes voiceWaiting{50%{opacity:.55}}
#miniMapDock{--map-size:142px;--map-top:14px;position:absolute;top:max(var(--map-top),env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:var(--map-size);pointer-events:none;z-index:9}
.battleRoyale #miniMapDock{--map-size:162px}#miniMapDock #miniMap{position:relative;top:0;right:0;width:100%;height:var(--map-size);margin:0}
#brAliveBar.brSurvivors{display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;min-width:72px;margin:6px 0 0 auto;padding:4px 9px;border:1px solid #b6d9d62e;border-radius:7px;background:#0b2d3ee8;box-shadow:0 2px 5px #0002}#brAliveBar svg{width:12px;height:15px;stroke:#d8dfac;stroke-width:1.6;fill:none}#brAliveBar b{font:800 20px/1 BarlowCondensed,Barlow,sans-serif;letter-spacing:.7px;color:#fff1b9}#brAliveBar[hidden]{display:none!important}
.battleRoyale #hudMenu{top:max(218px,calc(env(safe-area-inset-top) + 204px))}
.battleRoyale #killfeed{left:max(16px,calc(env(safe-area-inset-left) + 12px));right:auto!important;top:max(88px,calc(env(safe-area-inset-top) + 78px))!important;width:min(270px,35vw);text-align:left;font-size:11px;line-height:1.5}
#brCoreHud{left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));transform:none;width:min(275px,35vw);gap:7px;padding:8px 10px;border-radius:9px;box-shadow:0 3px 10px #06253533}.brCoreGem{font-size:21px}.brCoreInfo>b{font-size:14px;letter-spacing:.2px}.brCoreInfo>span{font-size:8px;margin:3px 0 5px}.brCaptureBar{height:4px}#brCoreClock{font-size:18px}
#brSpectate{pointer-events:auto;max-width:calc(100vw - 24px)}#brSpectate button{min-height:44px;pointer-events:auto;touch-action:manipulation}#brSpectate button:disabled{opacity:.4;cursor:default}.battleRoyale:not(.brWaiting) .sessionFeed{top:162px}
@media(max-height:550px){#miniMapDock{--map-size:112px;--map-top:9px;right:max(10px,env(safe-area-inset-right))}.battleRoyale #miniMapDock{--map-size:128px}.battleRoyale #hudMenu{top:max(174px,calc(env(safe-area-inset-top) + 165px))}#brAliveBar b{font-size:17px}#brAliveBar.brSurvivors{margin-top:5px;padding:3px 8px;min-width:63px}.battleRoyale #killfeed{left:max(12px,env(safe-area-inset-left));top:max(75px,calc(env(safe-area-inset-top) + 66px))!important;font-size:9px;width:min(230px,31vw)}#brCoreHud{left:max(12px,env(safe-area-inset-left));top:max(9px,env(safe-area-inset-top));padding:6px 8px;width:min(245px,32vw)}.brCoreInfo>b{font-size:12px}#brCoreClock{font-size:16px}.brCoreInfo>span{font-size:7px}.battleRoyale:not(.brWaiting) .sessionFeed{top:133px}.displayEntryCard{padding:22px 27px;width:min(410px,100%)}.displayEntryIcon{width:57px;height:43px;margin-bottom:8px}.displayEntryCard h2{font-size:31px;margin:9px 0}.displayEntryCard p{font-size:12px;margin-bottom:12px}.displayEntryCard .playBtn{min-height:44px;font-size:21px}}
@media(max-width:560px) and (orientation:portrait){.battleRoyale #miniMapDock{--map-size:118px}.battleRoyale #hudMenu{top:max(169px,calc(env(safe-area-inset-top) + 155px))}#brCoreHud{width:calc(100vw - 200px);left:10px}.brCoreGem{display:none}.brCoreInfo>b{font-size:11px}.brCoreInfo>span{font-size:7px}#brCoreClock{font-size:14px}.battleRoyale #killfeed{width:calc(100vw - 200px);left:10px;top:88px!important;font-size:9px}.displayEntryCard h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.voiceButtons button.waiting{animation:none}}

.brSpectating .voiceNotice{bottom:max(120px,calc(env(safe-area-inset-bottom) + 120px))}
.screen[hidden]{display:none!important}
/* v178: lobby categories occupy the page instead of a floating camp panel. */
#lobby.sectionPage{background:radial-gradient(ellipse at 90% 0%,#285c7199,transparent 65%),linear-gradient(150deg,#112b40,#0a2133 75%)}
#lobby.sectionPage::before{background:none}
#lobby.sectionPage :is(#lobbyBackdrop,#onlineCampBackdrop,#lobbyMotion,#partyCamp,.lobbyRoster){display:none!important}
#lobby.sectionPage .lobbyTop{background:#0b2438b3;border-bottom:1px solid #5a899333}
#lobby.sectionPage .lobbyBody{align-items:stretch;padding:18px 24px;min-height:0}
#lobby.sectionPage .panel.pagePanel{width:100%;max-width:none;height:100%;max-height:100%;padding:0 12px;border:0;border-radius:0;background:none;box-shadow:none;overflow:auto;overscroll-behavior:contain}
#lobby.sectionPage .pagePanel>.screen.active{width:100%;max-width:1180px;margin:0 auto;padding:0 0 16px}
#lobby.sectionPage .sectionHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;min-height:64px}
#lobby.sectionPage .sectionHeader h1{font:800 42px/1 BarlowCondensed,Barlow,sans-serif;color:#fff0b0;margin:7px 0 0}
#lobby.sectionPage .sectionHeader .eyebrow{font-size:10px;letter-spacing:1.5px;color:#93c4d1}
.sectionActions{display:flex;align-items:center;gap:10px}
#lobby .backToPlay{display:flex;align-items:center;justify-content:center;flex:none;min-height:44px;width:auto;padding:9px 16px;border:1px solid #719caf5c;border-radius:7px;background:#173c51;color:#d4edf2;font:700 13px Barlow,sans-serif;white-space:nowrap}
#lobby .backToPlay:hover{background:#28566b;border-color:#a6e0ee}
.backToPlay:focus-visible{outline:2px solid #a8ecff;outline-offset:3px}
.sectionIntro{font-size:14px;color:#a8cbd5;line-height:1.5;margin:0 0 20px}
.beastPageGrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:start}
#lobby.sectionPage #archive{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
#lobby.sectionPage #archive .archiveCard{min-width:0;min-height:155px;padding:15px 8px;font:800 17px BarlowCondensed,Barlow,sans-serif;color:#cee8ec;gap:10px;border-radius:10px;border:1px solid #4a7085;background:linear-gradient(145deg,#254e63,#15354c)}
#lobby.sectionPage #archive .archiveCard.active{border:2px solid #ffe078;background:linear-gradient(145deg,#4a5945,#234548);color:#ffedb1}
#lobby.sectionPage #archive .portrait{width:88px;height:92px;max-width:100%;border-radius:8px}
#lobby.sectionPage #archiveDetail{font-size:14px;line-height:1.5;background:#13354b9e;border:1px solid #4c788b55;border-radius:12px;padding:20px;min-width:0}
#lobby.sectionPage .characterHeading h2{font:800 30px/1 BarlowCondensed,Barlow,sans-serif;margin:0 0 5px;color:#fff0b0}
#lobby.sectionPage .characterHeading p{font-size:10px;letter-spacing:1px;color:#a4cbd5}
#lobby.sectionPage .characterStats{margin:16px 0;gap:12px}
#lobby.sectionPage .characterStats span{font-size:10px;flex:1;color:#9dc4ce}
#lobby.sectionPage .characterStats b{font-size:25px;color:#a6ead8}
#lobby.sectionPage .skillCard{margin:10px 0 0;padding:12px;background:#0b293b88;border-color:#54829455}
#lobby.sectionPage .skillCard h3{font-size:16px;color:#d5ecf0}
#lobby.sectionPage .skillCard p{font-size:12px;line-height:1.6;color:#acc9d2}
.arenaPageGrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:28px;align-items:center}
#lobby.sectionPage .mapPreview{display:block;width:100%;height:auto;max-height:calc(100dvh - 190px);object-fit:contain;aspect-ratio:8/5;margin:0;border:1px solid #4b8da1;border-radius:12px;background:#082438}
.arenaPageInfo{padding:22px;border-left:2px solid #e9ce73}
#lobby.sectionPage .arenaPageInfo .lobbyHint{font-size:16px;line-height:1.8;color:#d4e9ed;margin-top:14px}
.arenaPageInfo p{font-size:12px;color:#8fbbc9;line-height:1.8;margin:18px 0}
.arenaPageInfo .secondaryBtn{min-height:44px;width:100%}
#lobby.sectionPage #rankingScreen.active{display:block;max-width:1050px}
#lobby.sectionPage .rankModes{max-width:640px;gap:10px;margin-bottom:16px}
#lobby.sectionPage .rankModes button{min-height:44px;font-size:17px}
#lobby.sectionPage .rankingScroll{max-height:none;min-height:0;overflow:visible;border-radius:10px;margin-top:12px}
#lobby.sectionPage .rankingScroll th{font-size:11px;padding:12px 16px}
#lobby.sectionPage .rankingScroll td{padding:12px 16px;font-size:15px}
#lobby.sectionPage .rankingScroll .rankNameBox{font-size:15px}
#lobby.sectionPage .rankPersonal{margin-top:12px;padding:12px 16px}
#lobby.sectionPage .rankPagination{margin:12px 0}
#lobby.sectionPage .rankGuide{font-size:12px}
.settingsPageContent{max-width:740px;padding:10px 24px 22px;background:#153a4d8c;border:1px solid #51778a55;border-radius:12px}
#lobby.sectionPage .setting{min-height:54px;font-size:16px;margin:10px 0;padding-bottom:12px;border-bottom:1px solid #4d798444}
#lobby.sectionPage .setting input,#lobby.sectionPage .setting select{width:180px;max-width:45%;min-height:40px}
#lobby.sectionPage .frameRateSetting b{font:800 18px BarlowCondensed,Barlow,sans-serif;color:#91dbc8}
#lobby.sectionPage .settingsPageContent .lobbyHint{font-size:12px;line-height:1.6;margin:16px 0}
#lobby.sectionPage .settingsPageContent>.secondaryBtn{display:inline-flex;min-height:44px;width:auto;margin:10px 12px 4px 0;padding:10px 15px}
#lobby.sectionPage #diagnosticsStatus{display:block;line-height:1.5;margin-top:8px;color:#a0bdca}
.fpsCounter{position:absolute;left:max(14px,calc(env(safe-area-inset-left) + 10px));top:auto;bottom:max(168px,calc(env(safe-area-inset-bottom) + 168px));display:flex;align-items:baseline;gap:5px;padding:4px 7px;border:1px solid #90cbc847;border-radius:5px;background:#0b2b3bc7;color:#a3ecd7;font:11px/1 monospace;text-shadow:none;pointer-events:none;z-index:2;font-variant-numeric:tabular-nums}
.fpsCounter b{font-size:12px;font-weight:700;min-width:3ch;text-align:right}
.fpsCounter span{font-size:9px;color:#b1cbd1}
.battleRoyale .fpsCounter{top:max(64px,calc(env(safe-area-inset-top) + 60px));bottom:auto;padding:1px 5px}
@media(max-height:600px) and (orientation:landscape){
 #lobby.sectionPage .lobbyBody{padding:8px 14px}
 #lobby.sectionPage .panel.pagePanel{padding:0 5px}
 #lobby.sectionPage .sectionHeader{min-height:48px;margin-bottom:10px}
 #lobby.sectionPage .sectionHeader h1{font-size:30px}
 .sectionIntro{font-size:11px;margin-bottom:12px}
 .beastPageGrid{gap:16px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
 #lobby.sectionPage #archive{gap:8px}
 #lobby.sectionPage #archive .archiveCard{min-height:100px;padding:8px 4px;gap:5px;font-size:14px}
 #lobby.sectionPage #archive .portrait{width:57px;height:61px}
 #lobby.sectionPage #archiveDetail{padding:12px}
 #lobby.sectionPage .skillCard{padding:8px}
 #lobby.sectionPage .skillCard h3{font-size:13px}
 #lobby.sectionPage .skillCard p{font-size:11px}
 .arenaPageGrid{gap:16px;grid-template-columns:minmax(0,1.6fr) minmax(190px,1fr)}
 .arenaPageInfo{padding:14px}
 #lobby.sectionPage .arenaPageInfo .lobbyHint{font-size:12px}
 #lobby.sectionPage .rankingScroll td{padding:7px 12px;font-size:12px}
 #lobby.sectionPage .rankingScroll .rankNameBox{font-size:12px}
 .battleRoyale .fpsCounter{top:max(58px,calc(env(safe-area-inset-top) + 54px))}
}
@media(max-width:640px){
 #lobby.sectionPage .lobbyBody{padding:12px}
 #lobby.sectionPage .panel.pagePanel{padding:0 2px}
 #lobby.sectionPage .sectionHeader{min-height:54px;gap:8px;margin-bottom:12px}
 #lobby.sectionPage .sectionHeader h1{font-size:31px}
 #lobby.sectionPage .sectionHeader .eyebrow{font-size:8px;letter-spacing:1px}
 #lobby .backToPlay{padding:8px 11px;font-size:11px}
 .beastPageGrid,.arenaPageGrid{grid-template-columns:minmax(0,1fr);gap:16px}
 #lobby.sectionPage #archive .archiveCard{min-height:110px;padding:10px 4px;font-size:15px;gap:6px}
 #lobby.sectionPage #archive .portrait{width:60px;height:64px}
 #lobby.sectionPage #archiveDetail{padding:16px}
 #lobby.sectionPage .rankingScroll th,#lobby.sectionPage .rankingScroll td{padding:9px 7px;font-size:12px}
 #lobby.sectionPage .rankingScroll .rankNameBox{font-size:12px}
 #lobby.sectionPage .rankModes{gap:6px}
 #lobby.sectionPage .rankModes button{font-size:15px}
 .settingsPageContent{padding:8px 14px 16px}
 #lobby.sectionPage .setting{font-size:13px}
 #lobby.sectionPage .setting input,#lobby.sectionPage .setting select{width:140px}
 .fpsCounter{left:max(10px,env(safe-area-inset-left));padding:3px 5px}
}