:root{
  --grn:#59ff6e; --grn-dim:#1f7a2e; --red:#ff4d4d; --red-dim:#8a1f1f;
  --amber:#ffb347; --bg:#05080a; --panel:rgba(8,14,12,.72); --line:rgba(120,255,140,.14);
  --txt:#cfe8d2; --mut:#6f8a74;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:'Rajdhani',sans-serif;color:var(--txt);
  -webkit-user-select:none;user-select:none}
canvas.gl{position:fixed;inset:0;display:block}
.mono{font-family:'Share Tech Mono',monospace}

/* ---------- TOP BAR ---------- */
#topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:stretch;gap:8px;
  padding:8px 10px;pointer-events:none}
.tb{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 12px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:center}
#logo{flex-direction:row;align-items:center;gap:10px}
#logo .skull{width:34px;height:34px;border-radius:50%;border:2px solid var(--grn);display:flex;align-items:center;justify-content:center;font-size:18px}
#logo h1{font-family:'Black Ops One',cursive;font-size:19px;letter-spacing:1px;color:#fff;line-height:1}
#logo small{display:block;font-size:9px;letter-spacing:2px;color:var(--mut);font-weight:600}
.sideBox{min-width:150px;text-align:center}
.sideBox .lbl{font-size:10px;letter-spacing:2px;font-weight:700}
.sideBox .pct{font-family:'Share Tech Mono',monospace;font-size:24px;line-height:1.05}
.sideBox .sub{font-size:10px;color:var(--mut)}
#buyBox .lbl,#buyBox .pct{color:var(--grn)} #sellBox .lbl,#sellBox .pct{color:var(--red)}
#buyBox{border-color:rgba(89,255,110,.35)} #sellBox{border-color:rgba(255,77,77,.35)}
#priceBox{min-width:170px;text-align:center}
#priceBox .p{font-family:'Share Tech Mono',monospace;font-size:22px;color:#fff}
#priceBox .c{font-size:12px;font-weight:700}
#statsBox{flex-direction:row;gap:16px}
#statsBox .st{text-align:left}
#statsBox .st b{display:block;font-size:9px;letter-spacing:1.5px;color:var(--mut);font-weight:700}
#statsBox .st span{font-family:'Share Tech Mono',monospace;font-size:13px;color:#e6ffe9}
#srvBox{margin-left:auto;flex-direction:row;gap:14px;align-items:center}
#srvBox .st b{display:block;font-size:9px;letter-spacing:1.5px;color:var(--mut)}
#srvBox .st span{font-family:'Share Tech Mono',monospace;font-size:13px}
#srcTag{font-size:9px;letter-spacing:1px;padding:2px 6px;border:1px solid var(--line);border-radius:4px;color:var(--amber)}

/* ---------- ARMY PANELS ---------- */
.army{position:fixed;top:76px;width:172px;z-index:15;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;backdrop-filter:blur(8px)}
#armyG{left:10px;border-color:rgba(89,255,110,.3)} #armyR{right:10px;border-color:rgba(255,77,77,.3)}
.army h3{font-family:'Black Ops One',cursive;font-size:12px;letter-spacing:1px;margin-bottom:8px}
#armyG h3{color:var(--grn)} #armyR h3{color:var(--red)}
.army .row{display:flex;justify-content:space-between;font-size:11px;margin:3px 0;letter-spacing:.5px}
.army .row b{color:var(--mut);font-weight:600}
.army .row span{font-family:'Share Tech Mono',monospace;color:#eafff0}
.army .wp{margin-top:8px;font-size:10px;color:var(--mut);letter-spacing:1px}
.army .bar{height:5px;background:#0b1410;border-radius:3px;margin-top:4px;overflow:hidden}
.army .bar i{display:block;height:100%;border-radius:3px;transition:width .6s}
#armyG .bar i{background:linear-gradient(90deg,#1f7a2e,var(--grn))}
#armyR .bar i{background:linear-gradient(90deg,#8a1f1f,var(--red))}

/* ---------- HQ HEALTH ---------- */
.hq{margin-top:8px}
.hq b{font-size:9px;letter-spacing:1.5px;color:var(--mut)}
.hq .bar{height:7px}

/* ---------- TRADE FEED ---------- */
#feed{position:fixed;left:10px;bottom:10px;width:250px;max-height:32vh;z-index:15;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(8px);overflow:hidden;display:flex;flex-direction:column}
#feed h3{font-size:10px;letter-spacing:2px;color:var(--mut);padding:8px 12px 4px;font-weight:700}
#feedList{overflow:hidden;padding:0 12px 8px;flex:1}
.tr{display:flex;justify-content:space-between;font-family:'Share Tech Mono',monospace;font-size:11px;line-height:1.7}
.tr .b{color:var(--grn)} .tr .s{color:var(--red)} .tr .t{color:var(--mut);font-size:10px}

/* ---------- KILL FEED / EVENTS ---------- */
#events{position:fixed;right:10px;top:300px;width:230px;z-index:15;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.ev{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:6px;
  padding:5px 10px;font-size:11px;letter-spacing:.5px;animation:evin .3s ease;backdrop-filter:blur(6px)}
.ev .tm{float:right;color:var(--mut);font-family:'Share Tech Mono',monospace;font-size:10px}
.ev.g{border-left-color:var(--grn)} .ev.r{border-left-color:var(--red)} .ev.w{border-left-color:var(--amber);color:var(--amber)}
@keyframes evin{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}

/* ---------- CAMERA / LEGEND / SOUND ---------- */
#cams{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:16;display:flex;gap:6px}
#cams button{background:var(--panel);border:1px solid var(--line);color:var(--txt);font-family:'Rajdhani';
  font-weight:700;font-size:11px;letter-spacing:1px;padding:7px 12px;border-radius:6px;cursor:pointer;backdrop-filter:blur(6px)}
#cams button.on{border-color:var(--grn);color:var(--grn);box-shadow:0 0 10px rgba(89,255,110,.25)}
#cams button:hover{border-color:var(--amber)}
#legend{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:15;display:flex;gap:4px;pointer-events:none}
.lg{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 8px;text-align:center;backdrop-filter:blur(6px)}
.lg b{display:block;font-size:9px;color:#eafff0;letter-spacing:.5px}
.lg span{font-size:8px;color:var(--mut);font-family:'Share Tech Mono',monospace}

/* ---------- MINIMAP ---------- */
#mapWrap{position:fixed;right:10px;bottom:10px;z-index:15;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:6px;backdrop-filter:blur(8px)}
#mapWrap b{display:block;font-size:9px;letter-spacing:2px;color:var(--mut);text-align:center;margin-bottom:4px}
#minimap{display:block;border-radius:4px}

/* ---------- BANNER / FLASH ---------- */
#banner{position:fixed;top:38%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:30;text-align:center;
  font-family:'Black Ops One',cursive;pointer-events:none;opacity:0;transition:all .35s}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#banner .big{font-size:52px;letter-spacing:3px;text-shadow:0 0 30px currentColor}
#banner .sm{font-size:16px;letter-spacing:4px;color:#fff;opacity:.85;font-family:'Rajdhani';font-weight:700}
#flash{position:fixed;inset:0;z-index:25;pointer-events:none;opacity:0;background:#fff}
#vign{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}

/* ---------- MOBILE ---------- */
#togglePanels{display:none}

/* ---------- AUTHOR ---------- */
#logo a{pointer-events:auto;color:var(--amber);text-decoration:none;letter-spacing:1px}
#logo a:hover{color:#fff;text-shadow:0 0 8px var(--amber)}

/* ---------- CHAT ---------- */
#chatBtn{position:fixed;right:10px;bottom:140px;z-index:22;background:var(--panel);border:1px solid var(--grn);
  color:var(--grn);font-family:'Rajdhani';font-weight:700;font-size:12px;letter-spacing:1px;padding:9px 14px;
  border-radius:6px;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,0,0,.4)}
#chatBtn.on,#chatBtn:hover{background:rgba(89,255,110,.15);box-shadow:0 0 12px rgba(89,255,110,.3)}
#chatPanel{position:fixed;right:10px;bottom:186px;width:300px;height:min(400px,55vh);z-index:22;display:none;
  flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.6)}
#chatHead{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--grn)}
#chatHead span:first-child{flex:1}
#chatStatus{font-size:9px;color:var(--amber);font-weight:600;letter-spacing:.5px}
#chatClose{background:none;border:none;color:var(--mut);font-size:14px;cursor:pointer}
#chatClose:hover{color:var(--red)}
#chatLog{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.45}
.cmsg{word-wrap:break-word;overflow-wrap:anywhere}
.cmsg .ctm{color:var(--mut);font-family:'Share Tech Mono',monospace;font-size:9px;margin-right:5px}
.cmsg .cwho{color:var(--grn);margin-right:4px}
.cmsg .cwho.me{color:var(--amber)}
.chatRow{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.chatRow input{flex:1;min-width:0;font-family:'Rajdhani';font-size:13px;color:var(--txt);
  background:rgba(5,10,8,.8);border:1px solid var(--line);border-radius:5px;padding:7px 10px;outline:none}
.chatRow input:focus{border-color:var(--grn)}
.chatRow button{font-family:'Rajdhani';font-weight:700;font-size:11px;letter-spacing:1px;color:var(--grn);
  background:rgba(89,255,110,.12);border:1px solid var(--grn);border-radius:5px;padding:0 14px;cursor:pointer}
@media(max-width:900px){
  #chatPanel{right:6px;left:6px;width:auto;bottom:150px;height:50vh}
  #chatBtn{bottom:104px;right:6px;padding:8px 12px}
}

/* ---------- AUDIO MIXER ---------- */
#audioPanel{display:none;position:absolute;top:38px;right:0;width:220px;z-index:30;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;
  backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
#audioPanel .arow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#audioPanel .arow b{font-size:9px;letter-spacing:1.5px;color:var(--mut);width:42px}
#audioPanel .arow input[type=range]{flex:1;accent-color:var(--grn);height:4px}
#audioPanel .arow span{font-family:'Share Tech Mono',monospace;font-size:11px;color:#eafff0;width:24px;text-align:right}
#muteAllBtn{width:100%;background:rgba(255,77,77,.1);border:1px solid var(--red);color:var(--red);
  font-family:'Rajdhani';font-weight:700;font-size:10px;letter-spacing:1.5px;padding:6px;border-radius:5px;cursor:pointer}
#muteAllBtn:hover{background:rgba(255,77,77,.2)}
#audioPanel .ahint{margin-top:8px;font-size:9px;color:var(--mut);letter-spacing:.3px;text-align:center}
#audioPanel .ahint b{color:var(--amber)}

/* ---------- FLOATING PRICE (di atas front line) ---------- */
#floatPrice{position:fixed;z-index:12;display:none;pointer-events:none;text-align:center;
  transform:translate(-50%,-50%);text-shadow:0 2px 16px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.7);will-change:left,top}
#fpPrice{font-family:'Share Tech Mono',monospace;font-size:clamp(30px,4.2vw,56px);font-weight:700;
  color:#fff;line-height:1;letter-spacing:1px}
#fpDelta{font-family:'Rajdhani';font-size:clamp(11px,1.3vw,16px);font-weight:700;letter-spacing:3px;color:#fff;margin-top:3px}
#fpWin{font-family:'Black Ops One',cursive;font-size:clamp(12px,1.5vw,19px);letter-spacing:3px;margin-top:4px}
@media(max-width:900px){#fpPrice{font-size:22px}#fpWin{font-size:11px}}

/* ================= MOBILE LAYOUT (≤768px) =================
   HP: HUD minimal — topbar compact, panel stats & trades jadi toggle,
   battlefield dapet layar penuh. Desktop tetep full dashboard. */
@media(max-width:768px){
  #topbar{padding:5px 6px;gap:4px;flex-wrap:nowrap}
  .tb{padding:4px 7px;border-radius:6px}
  #logo .skull{width:24px;height:24px;font-size:12px}
  #logo h1{font-size:12px}
  #logo small{font-size:6px;letter-spacing:1px}
  .sideBox{min-width:64px}
  .sideBox .lbl{font-size:7px;letter-spacing:1px}
  .sideBox .pct{font-size:14px}
  .sideBox .sub{display:none}
  #priceBox{min-width:86px}
  #priceBox .p{font-size:13px}
  #priceBox .c{font-size:9px}
  #statsBox{display:none}
  #srvBox{margin-left:auto;gap:6px}
  #srvBox .st{display:none}
  #srcTag{font-size:7px;padding:2px 4px}

  /* panel berat: default sembunyi, muncul via toggle */
  .army{display:none;width:150px;top:56px;padding:8px;font-size:10px;z-index:26}
  body.mShowStats .army{display:block}
  .army .row{font-size:10px;margin:2px 0}
  .army h3{font-size:10px}
  #feed{display:none;width:190px;max-height:34vh;bottom:104px;z-index:26}
  body.mShowFeed #feed{display:flex}
  #events{width:150px;top:auto;bottom:150px;right:6px}
  .ev{font-size:9px;padding:4px 7px}
  #legend{display:none}
  #mapWrap{display:none}

  /* kamera & mobile bar */
  #cams{bottom:6px;gap:4px;flex-wrap:wrap;justify-content:center;max-width:96vw}
  #cams button{padding:6px 8px;font-size:9px;letter-spacing:.5px}
  #mobBar{display:flex}
  #floatPrice #fpPrice{font-size:20px}
  #fpDelta{font-size:9px;letter-spacing:1.5px}
  #fpWin{font-size:10px;letter-spacing:1.5px}
  #chatBtn{bottom:96px;right:6px;padding:8px 11px;font-size:11px}
  #chatPanel{right:6px;left:6px;width:auto;bottom:140px;height:52vh}
  #banner .big{font-size:30px}
  #banner .sm{font-size:11px;letter-spacing:2px}
  #audioPanel{width:190px}
}
/* tombol toggle mobile (hidden di desktop) */
#mobBar{display:none;position:fixed;left:6px;bottom:6px;z-index:27;gap:5px}
#mobBar button{background:var(--panel);border:1px solid var(--line);color:var(--txt);
  font-family:'Rajdhani';font-weight:700;font-size:10px;letter-spacing:1px;padding:8px 10px;
  border-radius:6px;backdrop-filter:blur(6px)}
#mobBar button.on{border-color:var(--grn);color:var(--grn)}

/* ---------- PILOT MODE ---------- */
#pilotPicker{display:none;position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:24;
  flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--amber);border-radius:8px;
  padding:12px;backdrop-filter:blur(10px)}
#pilotPicker .pp-row{display:flex;gap:6px;justify-content:center}
#pilotPicker button{background:rgba(20,30,26,.8);border:1px solid var(--line);color:var(--txt);
  font-family:'Rajdhani';font-weight:700;font-size:12px;letter-spacing:1px;padding:8px 16px;border-radius:6px;cursor:pointer}
#pilotPicker button.on,#pilotPicker button:hover{border-color:var(--amber);color:var(--amber)}
#pilotPicker [data-side].on{background:rgba(255,179,71,.12)}
#pilotPicker .pp-hint{font-size:9px;color:var(--mut);text-align:center;letter-spacing:.5px;max-width:280px}
#pilotHud{display:none;position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:24;
  align-items:center;gap:10px;background:var(--panel);border:1px solid var(--amber);border-radius:8px;
  padding:7px 12px;backdrop-filter:blur(8px)}
#pilotHud #pilotKind{font-family:'Black Ops One';font-size:12px;color:var(--amber);letter-spacing:1px}
#pilotHud .php-bar{width:130px;height:8px;background:#0b1410;border-radius:4px;overflow:hidden}
#pilotHud .php-bar i{display:block;height:100%;background:linear-gradient(90deg,#1f7a2e,var(--grn));border-radius:4px}
#pilotHud .pk{font-size:10px;color:var(--mut);letter-spacing:1px}
#pilotHud .pk b{color:#fff;font-family:'Share Tech Mono',monospace}
#pilotExit{background:rgba(255,77,77,.12);border:1px solid var(--red);color:var(--red);
  font-family:'Rajdhani';font-weight:700;font-size:10px;padding:4px 10px;border-radius:5px;cursor:pointer}
/* dpad mobile */
#padWrap{display:none;position:fixed;inset:auto 0 0 0;z-index:23;pointer-events:none}
#padMove{position:fixed;left:14px;bottom:64px;pointer-events:auto;text-align:center}
#padMove button,#padAct button{width:52px;height:52px;margin:3px;border-radius:12px;font-size:20px;
  background:rgba(10,16,12,.75);border:1px solid var(--line);color:var(--txt);backdrop-filter:blur(4px)}
#padMove button.on,#padAct button.on{border-color:var(--grn);color:var(--grn);background:rgba(89,255,110,.15)}
#padAct{position:fixed;right:14px;bottom:64px;pointer-events:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px}
#padFire{background:rgba(255,77,77,.2)!important;border-color:var(--red)!important;font-size:22px!important}
/* pad tampil di semua device saat pilot mode; di desktop semi-transparan */
@media(min-width:769px){
  #padMove button,#padAct button{opacity:0.55;width:46px;height:46px}
  #padMove button:hover,#padAct button:hover{opacity:1}
}

/* ---------- VIEWERS + CAPTURE ---------- */
#viewChip{display:flex;align-items:center;gap:5px;font-family:'Rajdhani';font-weight:700}
#viewChip b{font-family:'Share Tech Mono',monospace;font-size:14px;color:#eafff0}
#viewChip .vw{font-size:8px;letter-spacing:1.5px;color:var(--mut)}
#shotBtn{background:var(--panel);border:1px solid var(--line);color:var(--txt);
  font-size:14px;padding:7px 11px;border-radius:7px;cursor:pointer;backdrop-filter:blur(6px)}
#shotBtn:hover{border-color:#fff}
#shotBtn.hot{border-color:var(--red);animation:shotPulse 0.9s ease-in-out infinite}
@keyframes shotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,77,77,.6);transform:scale(1)}
  50%{box-shadow:0 0 14px 4px rgba(255,77,77,.35);transform:scale(1.08)}
}
@media(max-width:768px){
  #viewChip{padding:4px 6px}
  #viewChip .vw{display:none}
}

/* ---------- PHOENIX CTA ---------- */
#phoenixCta{display:flex;align-items:center;gap:5px;text-decoration:none;color:#ffd76a;
  border-color:rgba(255,215,106,.4);font-family:'Rajdhani';font-weight:700;font-size:11px;
  letter-spacing:1.5px;cursor:pointer;transition:all .2s}
#phoenixCta:hover{border-color:#ffd76a;background:rgba(255,215,106,.08);box-shadow:0 0 12px rgba(255,215,106,.25)}
@media(max-width:768px){#phoenixCta span{display:none}#phoenixCta{padding:4px 7px}}

/* ---------- ENV CHIP ---------- */
#envChip{display:flex;align-items:center;gap:6px;font-family:'Rajdhani';font-weight:700;font-size:10px;letter-spacing:1px;color:#cfe0d5}
#envChip #todI{font-size:13px}
@media(max-width:768px){#envChip #seasonI{display:none}}

/* ---------- AUDIO DI MOBILE: tombol proxy di mobBar + panel bawah ---------- */
@media(max-width:768px){
  #audioWrap{display:none}                 /* tombol topbar sempit: pindah ke bawah */
  #audioPanel{position:fixed;top:auto;bottom:52px;left:6px;right:auto;width:210px}
}

/* ---------- CHAT PIN ---------- */
#chatPin{display:block;text-decoration:none;text-align:center;padding:7px 10px;
  background:linear-gradient(90deg, rgba(255,215,106,.14), rgba(255,180,60,.08));
  border-bottom:1px solid rgba(255,215,106,.35);
  font-family:'Rajdhani';font-weight:700;font-size:11px;letter-spacing:1.5px;color:#ffd76a}
#chatPin b{color:#fff}
#chatPin:hover{background:rgba(255,215,106,.2)}

/* ---------- VIDEO REC ---------- */
#recBtn{background:var(--panel);border:1px solid var(--line);color:var(--txt);
  font-size:13px;padding:7px 10px;border-radius:7px;cursor:pointer;backdrop-filter:blur(6px);
  font-family:'Share Tech Mono',monospace;min-width:44px}
#recBtn:hover{border-color:#fff}
#recBtn.rec{border-color:var(--red);color:var(--red);animation:shotPulse 1s ease-in-out infinite}

/* ---------- VIP RUNNING TEXT ---------- */
#vipTicker{position:fixed;left:0;right:0;top:0;z-index:30;height:24px;overflow:hidden;
  background:linear-gradient(90deg, rgba(10,12,8,.92), rgba(30,24,8,.92), rgba(10,12,8,.92));
  border-bottom:1px solid rgba(255,215,106,.35);backdrop-filter:blur(6px)}
#topbar{top:24px!important}
.army{top:100px!important}
#newsChip{top:100px!important}
#vipTicker .vt-track{display:flex;width:max-content;animation:vtScroll 22s linear infinite}
#vipTicker:hover .vt-track{animation-play-state:paused}
#vipTicker .vt-set{display:flex;align-items:center;gap:26px;padding-right:26px;height:24px}
#vipTicker a{display:flex;align-items:center;gap:5px;text-decoration:none;white-space:nowrap;
  font-family:'Rajdhani';font-weight:700;font-size:12px;letter-spacing:1.2px;color:#e8dcb0}
#vipTicker a b{color:#ffd76a}
#vipTicker a:hover{color:#fff}
#vipTicker a:hover b{text-shadow:0 0 8px rgba(255,215,106,.8)}
#vipTicker i{color:rgba(255,215,106,.5);font-style:normal;font-size:10px}
@keyframes vtScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:768px){
  #vipTicker{height:22px}
  #vipTicker a{font-size:11px}
  #topbar{top:22px!important}
  .army{top:80px!important}
  #newsChip{top:80px!important}
}