:root{--ink:#071017;--panel:rgba(7,14,20,.82);--panel2:rgba(15,25,32,.68);--line:rgba(235,248,255,.82);--muted:#a9b7bf;--cyan:#2cddff;--cyan2:#087d9d;--danger:#ff4867;--glow:0 0 22px rgba(44,221,255,.18)}
*{box-sizing:border-box}html,body,main{width:100%;height:100%;margin:0;overflow:hidden}body{background:#05090c;color:#f4fbff;font-family:Arial,Helvetica,sans-serif;font-weight:600}button,input{font:inherit}#arena-shell{position:relative;background:radial-gradient(circle at 50% 46%,#143748 0,#07151f 38%,#020508 100%)}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;background:linear-gradient(135deg,rgba(22,78,101,.22),transparent 48%),repeating-linear-gradient(0deg,transparent 0 59px,rgba(97,224,255,.035) 60px),repeating-linear-gradient(90deg,transparent 0 59px,rgba(97,224,255,.035) 60px)}
.ui-frame{position:absolute;inset:0;pointer-events:none}.ui-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px #000;pointer-events:none}.topbar,.left-rail,.right-rail,.hotbar{position:absolute;background:var(--panel);border:1px solid var(--line);box-shadow:var(--glow),inset 0 0 0 1px rgba(0,0,0,.75);backdrop-filter:blur(5px)}
.topbar{z-index:2;left:18px;right:18px;top:14px;height:58px;display:flex;align-items:center}.brand-lockup{height:100%;min-width:300px;display:flex;align-items:center;border-right:1px solid var(--line)}.brand-mark{display:grid;place-items:center;width:58px;height:100%;font-size:22px;background:linear-gradient(145deg,var(--cyan2),#102834);border-right:1px solid var(--line);text-shadow:0 0 12px var(--cyan)}.brand-lockup div{padding-left:14px;letter-spacing:1px}.brand-lockup strong{display:block;font-size:16px}.brand-lockup small{display:block;color:var(--muted);font-size:9px;letter-spacing:2px;margin-top:3px}.server-strip{display:flex;align-items:center;gap:26px;padding:0 22px;color:var(--muted);font-size:10px;letter-spacing:1px}.server-strip b{color:white}.signal{display:inline-block;width:7px;height:7px;margin-right:7px;background:#5eff9c;border-radius:50%;box-shadow:0 0 10px #5eff9c}.account-strip{margin-left:auto;height:100%;display:flex;align-items:center}.credits,.square-icon{height:100%;display:grid;place-items:center;border-left:1px solid var(--line)}.credits{padding:0 18px;font-size:18px}.square-icon{width:56px;font-size:24px}.menu-icon{font-size:22px}
.left-rail,.right-rail{top:86px;width:310px;bottom:104px;padding:10px}.left-rail{left:18px}.right-rail{right:18px}.rail-title{height:28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:1px}.rail-title span{font-size:9px;color:var(--cyan)}.tabs{display:flex;margin:8px 0;border:1px solid var(--line);height:29px}.tabs>*{display:grid;place-items:center;width:50%;font-size:10px}.tabs b{background:rgba(255,255,255,.15);border-right:1px solid var(--line)}.tabs span{color:var(--muted)}.vitals{display:flex;align-items:center;height:32px;border:1px solid var(--line);padding:0 8px;font-size:10px}.vitals i{height:4px;flex:1;margin:0 8px;background:linear-gradient(90deg,var(--cyan) 0 78%,rgba(255,255,255,.15) 78%)}.vitals b{font-size:15px}.equipment-layout{height:58%;min-height:240px;display:grid;grid-template-columns:74px 1fr 74px;gap:7px;padding:10px 0}.equip-col{display:flex;flex-direction:column;justify-content:space-between}.equip-cell{aspect-ratio:1;border:1px solid var(--line);padding:4px;color:var(--muted);background:rgba(0,0,0,.15)}.equip-cell small{display:block;font-size:8px;color:white}.equip-cell b{display:grid;place-items:center;height:42px;font-size:27px;font-weight:400}.operator{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;background:radial-gradient(ellipse,rgba(44,221,255,.15),transparent 62%)}.operator-head{width:38px;height:38px;border:2px solid var(--line);border-radius:50%}.operator-body{width:77px;height:145px;margin-top:-2px;border:2px solid var(--line);clip-path:polygon(31% 0,69% 0,88% 34%,69% 100%,31% 100%,12% 34%);background:linear-gradient(90deg,transparent 47%,rgba(44,221,255,.3) 49%,rgba(44,221,255,.3) 51%,transparent 53%)}.operator small{margin-top:9px;color:var(--cyan);font-size:8px;letter-spacing:2px}.weapon-card{height:70px;border:1px solid var(--line);padding:7px;position:relative;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.2))}.weapon-card small{display:block;font-size:8px}.weapon-card b{display:block;text-align:center;font-size:27px;letter-spacing:3px;color:#c6f6ff}.weapon-card span{position:absolute;bottom:5px;left:7px;font-size:9px}.weight-line{display:flex;justify-content:space-between;font-size:9px;padding:10px 2px}.weight-line b{font-size:11px}.grid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:10px;border-left:1px solid var(--line);border-top:1px solid var(--line)}.grid i{aspect-ratio:1;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:8px;color:var(--muted);background:rgba(0,0,0,.1)}.grid .occupied{color:white;background:radial-gradient(circle,rgba(44,221,255,.36),rgba(7,14,20,.6));box-shadow:inset 0 0 10px rgba(44,221,255,.4)}.mission-card{margin-top:14px;border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:7px;position:relative}.mission-card small{font-size:8px;color:var(--cyan);letter-spacing:1px}.mission-card b{font-size:15px}.mission-card span{font-size:10px;color:var(--muted);max-width:180px}.mission-card em{font-size:10px;font-style:normal;color:var(--cyan)}
.hotbar{z-index:2;bottom:16px;left:50%;transform:translateX(-50%);height:70px;padding:5px;display:flex;gap:4px}.quick-slot{position:relative;width:58px;border:1px solid var(--line);background:rgba(255,255,255,.05);display:grid;place-items:center;color:var(--muted)}.quick-slot small{position:absolute;left:4px;top:3px;font-size:9px;color:white}.quick-slot b{font-size:17px;color:white}.quick-slot.wide{width:225px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:7px 10px}.quick-slot.wide b{font-size:11px}.quick-slot.wide span{font-size:9px;color:var(--muted);margin-top:5px}.quick-slot.bag,.quick-slot.lock{font-size:24px}.reticle{position:absolute;right:28px;bottom:112px;width:46px;height:46px;border:1px solid var(--line);background:var(--panel)}.reticle:before,.reticle:after{content:"";position:absolute;background:white}.reticle:before{width:24px;height:1px;left:10px;top:22px}.reticle:after{height:24px;width:1px;top:10px;left:22px}.reticle span{position:absolute;width:12px;height:12px;border:1px solid white;border-radius:50%;left:16px;top:16px}
.panel{z-index:5;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 48px));padding:28px;background:linear-gradient(145deg,rgba(10,19,26,.96),rgba(5,10,14,.92));border:1px solid var(--line);box-shadow:0 0 0 5px rgba(0,0,0,.45),0 25px 80px rgba(0,0,0,.65),0 0 50px rgba(44,221,255,.14);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}.panel:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:linear-gradient(var(--cyan),transparent 62%)}.panel-tag{display:flex;justify-content:space-between;color:var(--cyan);font-size:9px;letter-spacing:2px}.panel h1{font-size:44px;letter-spacing:3px;margin:22px 0 2px;line-height:1}.panel h1 span{color:var(--cyan);text-shadow:0 0 16px rgba(44,221,255,.55)}.panel>p{margin:0 0 28px;color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase}.panel label{display:block;font-size:9px;letter-spacing:1.5px;margin-bottom:7px;color:var(--muted)}.panel input{width:100%;height:48px;border:1px solid var(--line);outline:0;background:rgba(0,0,0,.4);color:white;padding:0 14px;font-size:14px;border-radius:0}.panel input:focus{border-color:var(--cyan);box-shadow:inset 0 0 14px rgba(44,221,255,.1)}.panel button{width:100%;height:52px;margin-top:10px;border:1px solid #8bf0ff;background:linear-gradient(90deg,#087c99,#0ab5d7);color:white;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 17px;letter-spacing:2px;border-radius:0}.panel button:hover{filter:brightness(1.2);box-shadow:0 0 22px rgba(44,221,255,.3)}.panel button b{font-size:28px;font-weight:300}.panel>small{display:block;color:#819099;font-size:9px;line-height:1.5;margin-top:14px;text-align:center}.panel #error{min-height:16px;margin-top:8px;color:var(--danger);font-size:10px;text-align:center}.hidden{display:none!important}#hud{z-index:6;position:absolute;top:86px;left:50%;transform:translateX(-50%);min-width:240px;background:var(--panel);border:1px solid var(--line);padding:8px 12px;font-size:11px}#scores{margin:8px 0 0;padding-left:22px;color:var(--muted)}
@media(max-width:980px){.left-rail,.right-rail{width:220px}.equipment-layout{grid-template-columns:54px 1fr 54px}.equip-cell b{font-size:20px}.server-strip{display:none}.brand-lockup{min-width:240px}.hotbar .quick-slot:nth-of-type(5),.hotbar .quick-slot:nth-of-type(6){display:none}}
@media(max-width:720px){.left-rail,.right-rail{display:none}.topbar{left:8px;right:8px;top:8px;height:50px}.brand-lockup{min-width:0;border-right:0}.brand-mark{width:48px}.brand-lockup div{padding:0 9px}.brand-lockup small,.credits{display:none}.square-icon{width:46px}.hotbar{bottom:8px;height:58px}.quick-slot{width:46px}.quick-slot.wide{width:150px}.reticle{display:none}.panel{padding:22px}.panel h1{font-size:35px}}
@media(max-height:720px){.left-rail,.right-rail{bottom:86px}.equipment-layout{height:48%;min-height:180px}.equip-cell:nth-child(3){display:none}.operator-body{height:98px}.hotbar{height:58px}.panel{padding:20px}.panel h1{margin-top:14px}.panel>p{margin-bottom:17px}}