:root{
  --bg:#0b1220;
  --panel:rgba(10,16,34,.72);
  --text:#e6e9f5;
  --muted:#aab3d4;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
}

html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
input,textarea,select{
  -webkit-user-select:text;
  user-select:text;
}
.world{position:fixed;inset:0;display:block;width:100%;height:100%}

.pcHelp{
  position:fixed;left:50%;bottom:8px;transform:translateX(-50%);
  z-index:95;
  padding:6px 10px;
  font-size:12px;line-height:1.2;
  color:rgba(231,235,255,.78);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  pointer-events:none;
  max-width:calc(100vw - 20px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hitMarker{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:140;
  font-weight:1000;
  letter-spacing:2px;
  font-size:16px;
  color:rgba(255,255,255,.92);
  text-shadow:0 0 12px rgba(239,68,68,.55);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.12);
  pointer-events:none;
}

.crosshair{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:96px;
  height:96px;
  z-index:125;
  pointer-events:none;
  opacity:0;
  transition:opacity 90ms ease, transform 90ms ease;
  --c: rgba(231,235,255,.85);
  filter: drop-shadow(0 0 12px rgba(0,0,0,.45));
}
.crosshair.on{opacity:.9}
.crosshair.green{--c: rgba(34,197,94,.95)}
.crosshair.red{--c: rgba(239,68,68,.95)}
.crosshair.neutral{--c: rgba(231,235,255,.85)}
.crosshairRing{
  position:absolute;inset:0;
  border-radius:999px;
  border:2px solid var(--c);
  background:rgba(0,0,0,.06);
  box-shadow:0 0 14px rgba(0,0,0,.25) inset;
}
.crosshairDot{
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:var(--c);
  box-shadow:0 0 12px rgba(0,0,0,.25);
}
.crosshairDist{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:0.5px;
  color:var(--c);
  text-shadow:0 0 10px rgba(0,0,0,.75);
  opacity:0.95;
  max-width:calc(100% - 18px);
  text-align:center;
  display:block;
}

.hitFlash{
  position:fixed;inset:0;
  z-index:130;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 52%, rgba(var(--hitFlashRgb,255,255,255),.16) 0%, rgba(var(--hitFlashRgb,255,255,255),.08) 32%, rgba(var(--hitFlashRgb,255,255,255),0) 70%);
}
.hitFlash.on{animation:hitFlash 220ms ease-out}
@keyframes hitFlash{
  0%{opacity:0}
  12%{opacity:1}
  100%{opacity:0}
}

.splash{
  position:fixed;
  inset:0;
  z-index:190;
  background:
    radial-gradient(circle at 50% 60%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 70%),
    url("splash.png") center/cover no-repeat,
    url("cover.png") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  transition:opacity 650ms ease;
  pointer-events:none;
}
.splashShade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.25), rgba(11,18,32,.70));
}
.splashInner{
  position:relative;
  text-align:center;
  padding:18px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  max-width:min(92vw, 520px);
}
.splashTitle{
  font-size:38px;
  font-weight:1000;
  letter-spacing:1px;
  text-shadow:0 12px 30px rgba(0,0,0,.55);
}
.splashSub{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:rgba(231,235,255,.78);
}
.splash.out{opacity:0}
@media (prefers-reduced-motion: reduce){
  .splash{transition:none}
}

.topLeft{
  position:fixed;left:10px;top:10px;z-index:110;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  pointer-events:auto;
}

.radarPanel{position:relative;min-width:46px;min-height:46px}
.radarToggleBtn{
  position:absolute;left:0;top:0;z-index:3;
  width:30px;height:30px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

.topRight{
  position:fixed;right:10px;top:10px;z-index:110;
  display:flex;flex-direction:row;align-items:center;gap:8px;
  pointer-events:auto;
}
.hudQuickPanel{
  position:fixed;right:54px;top:10px;z-index:111;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px;
  border-radius:14px;
  background:var(--panel);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
  pointer-events:auto;
  --quickScale:1;
  transform:scale(var(--quickScale));
  transform-origin:100% 0;
}
.hudQuickPanel.free{
  transform:scale(var(--quickScale));
  transform-origin:0 0;
}
.hudQuickPanel .iconBtn{
  width:30px;height:30px;border-radius:10px;
  font-size:14px;
}

.combatHud{
  position:fixed;left:50%;top:10px;transform:translateX(-50%);
  z-index:115;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;
  width:min(520px,calc(100vw - 20px));
}
.hpRow{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}
.hpRow.target{background:rgba(0,0,0,.14)}
.hpLabel{
  font-size:12px;font-weight:800;
  color:rgba(231,235,255,.90);
  min-width:90px;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hpText{
  font-size:12px;font-weight:900;
  color:rgba(231,235,255,.90);
  min-width:44px;
  text-align:right;
}
.hpBar{
  flex:1;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  overflow:hidden;
}
.hpFill{
  height:100%;
  width:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(34,197,94,.92), rgba(250,204,21,.92));
  box-shadow:0 0 16px rgba(34,197,94,.18);
  transform-origin:left center;
}
.hpFill.enemy{
  background:linear-gradient(90deg, rgba(248,113,113,.95), rgba(245,158,11,.95));
  box-shadow:0 0 16px rgba(239,68,68,.18);
}
.iconBtn{
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(11,16,32,.52);color:var(--text);
  font-weight:900;cursor:pointer;
}
.iconBtn:active{transform:translateY(1px)}
.statusTile{
  display:flex;gap:10px;align-items:center;
  background:rgba(0,0,0,.25);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:8px 10px;
  max-width:min(70vw,520px);
}
.radar{
  width:var(--radarSize, 160px);height:var(--radarSize, 160px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,16,32,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.radarModeBtn{
  position:absolute;right:0;top:0;z-index:3;
  width:44px;height:30px;border-radius:12px;
  font-size:11px;letter-spacing:.4px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.speedBadge{
  position:absolute;
  right:0;
  bottom:0;
  z-index:3;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  text-transform:none;
}
.xpBoostBadge{
  position:absolute;
  left:0;
  top:-28px;
  z-index:3;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.35);
  color:#dcfce7;
  text-transform:none;
  white-space:nowrap;
}
.perfStats{
  position:absolute;
  right:0;
  top:-28px;
  z-index:3;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  text-transform:none;
  white-space:nowrap;
}
.altBadge{
  position:absolute;
  left:0;
  bottom:0;
  z-index:3;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  text-transform:none;
}
.radarSettingsPanel{
  position:absolute;
  left:calc(100% + 8px);
  top:0;
  width:190px;
  z-index:4;
  display:none;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,16,32,.85);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  pointer-events:auto;
}
.radarSettingsPanel[aria-hidden="true"]{display:none}
.uiEdit .radarSettingsPanel{display:flex}
.radarSettingsPanel.left{
  left:auto;
  right:calc(100% + 8px);
}
.radarSettingsTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:.4px;
  color:rgba(231,235,255,.92);
}
.radarSettingsRow{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.radarSettingsLabel{
  font-size:11px;
  color:rgba(231,235,255,.75);
  font-weight:700;
}
.radarSwitch{
  display:flex;
  gap:6px;
}
.radarSwitchBtn{
  flex:1;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:rgba(231,235,255,.82);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.radarSwitchBtn.active{
  border-color:rgba(59,130,246,.55);
  background:rgba(59,130,246,.18);
  color:#dbeafe;
}
.radarRangeRow{
  display:flex;
  align-items:center;
  gap:8px;
}
.radarRangeInput{
  flex:1;
  accent-color:#60a5fa;
}
.radarRangeValue{
  min-width:54px;
  text-align:right;
  font-size:11px;
  font-weight:800;
  color:rgba(231,235,255,.85);
}

.radarToasts{
  margin-top:6px;
  max-width:calc(var(--radarSize, 160px) + 6px);
  display:flex;
  flex-direction:column;
  gap:4px;
  pointer-events:none;
}
.radarToast{
  font-size:11px;
  line-height:1.2;
  padding:5px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  backdrop-filter:blur(10px);
  color:rgba(231,235,255,.92);
  opacity:1;
  transform:translateY(0);
  transition:opacity 180ms ease, transform 180ms ease;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.radarToast.kill{
  border-color:rgba(245,158,11,.32);
  color:#fff7ed;
  background:rgba(245,158,11,.12);
}
.radarToast.warn{
  border-color:rgba(239,68,68,.30);
  color:#fee2e2;
  background:rgba(239,68,68,.10);
}
.radarToast.msg{
  border-color:rgba(59,130,246,.30);
  color:#dbeafe;
  background:rgba(59,130,246,.10);
}
.radarToast.out{
  opacity:0;
  transform:translateY(-4px);
}

.systemNotices{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:140;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:none;
  max-width:min(520px, calc(100vw - 20px));
}
.systemNotice{
  font-size:13px;
  line-height:1.3;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  color:rgba(231,235,255,.96);
  opacity:1;
  transform:translateY(0);
  transition:opacity 180ms ease, transform 180ms ease;
  white-space:pre-line;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.systemNotice.warn{
  border-color:rgba(239,68,68,.32);
  color:#fee2e2;
  background:rgba(239,68,68,.12);
}
.systemNotice.msg{
  border-color:rgba(59,130,246,.32);
  color:#dbeafe;
  background:rgba(59,130,246,.12);
}
.systemNotice.out{
  opacity:0;
  transform:translateY(-6px);
}

.hud{
  position:fixed;left:50%;bottom:10px;z-index:120;
  --hudScale:1;
  transform:translateX(-50%) scale(var(--hudScale));
  transform-origin:50% 100%;
  width:min(calc(100vw - 20px), clamp(462px,48.3vw,765px));
  max-width:calc(100vw - 20px);
  background:var(--panel);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:12px;
}
.hud.free{
  transform:scale(var(--hudScale));
  transform-origin:0 0;
}
.hud.needSpawn{padding:10px}
.hud.needSpawn .hudRow{margin:6px 0}
.hudRow{display:flex;gap:10px;align-items:center;margin:8px 0}
.hudRow.wrap{flex-wrap:wrap}
.hudRow.small{font-size:12px}
.hudTopActions{justify-content:space-between;margin-top:0;gap:8px}
.hudTopLeft,.hudTopRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hudTopLeft{flex:1 1 auto}
.hudTopRight{flex:0 0 auto;max-width:100%;min-width:0}
.hudTopLeft .badge{font-size:12px;text-transform:none}
.hudTopLeft .btn{height:28px}
.quickContract{
  min-width:160px;
  padding:6px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(140deg,rgba(15,23,42,.72),rgba(8,12,22,.78));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.quickContractDock{
  position:fixed;
  left:50%;
  bottom:calc(8px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:130;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.quickContractDock .quickContract{
  pointer-events:auto;
}
.quickTitle{
  font-size:10px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(231,235,255,.72);
}
.quickName{
  margin-top:2px;
  font-size:12px;
  font-weight:800;
  color:#eef2ff;
}
.quickBar{
  margin-top:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.quickFill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,rgba(56,189,248,.8),rgba(34,197,94,.8));
}
.quickMeta{
  margin-top:4px;
  font-size:10px;
  color:var(--muted);
}
.hudPillInput{
  height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:var(--text);
  padding:0 10px;outline:none;font-size:12px;font-weight:700;text-transform:none;
  min-width:100px;max-width:160px;flex:0 1 140px;
}
.hudPillInput::placeholder{color:var(--muted)}
.muted{color:var(--muted)}

.hudTitle{font-size:16px;font-weight:900;letter-spacing:.2px}
.spawnHint{opacity:.92}

#spawnHeader,#spawnHint{display:none}
.hud.needSpawn #spawnHeader{display:flex;justify-content:space-between;align-items:center}
.hud.needSpawn #spawnHint{display:flex}
.hud.spawnOnly #hudNameRow{display:none}
.hud.spawnOnly #controlsHelpHud{display:none}
.hud.needSpawn .hudTopActions{justify-content:space-between}

@media (orientation: landscape){
  .hud{width:min(calc(100vw - 20px), clamp(330px,34.5vw,546px))}
}

.hudPrimaryRow .btn,
.hudSecondaryRow .btn{
  flex:1 1 0;
  min-width:90px;
}
.hudPrimaryRow .btn{
  font-size:15px;
  height:40px;
}
.hudSecondaryRow .btn{
  height:38px;
}
.hudSpawnRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.hudSpawnRow .hudSelect{
  flex:1 1 160px;
  min-width:140px;
  height:34px;
  line-height:34px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.hudSpawnRow #spawnBtn{margin-left:auto}
#spawnBtn.hasIndicators .btnIndCooldown{height:6px;top:7px}
#spawnBtn.hasIndicators .btnIndTextTop,
#spawnBtn.hasIndicators .btnIndTextBottom{font-size:12px}
.hud.needSpawn .hudSpawnRow{
  flex-direction:row;
  align-items:center;
}
.hud.needSpawn #spawnBtn{width:auto}
.hud.needSpawn #setSpawnBtn{display:none}

.badge{
  font-size:12px;font-weight:700;letter-spacing:.2px;
  padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);text-transform:lowercase;
}
.badge.pill{height:28px;display:inline-flex;align-items:center}
.badge.ok{border-color:rgba(34,197,94,.45);color:#d1fae5}
.badge.warn{border-color:rgba(245,158,11,.45);color:#ffedd5}
.badge.bad{border-color:rgba(239,68,68,.45);color:#fee2e2}
.badge.online{background:rgba(34,197,94,.22);border-color:rgba(34,197,94,.6);color:#dcfce7}
.badge.clickable{cursor:pointer}
.badgeRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.badgeIcons{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.badgeIcon{
  width:20px;height:20px;border-radius:6px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.18);
  background-size:cover;background-position:center;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.badgeIconEmpty{font-size:12px;color:var(--muted)}
.badgeList{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.badgeCatalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
.badgeItem{display:flex;gap:10px;align-items:flex-start}
.badgeItemText{display:flex;flex-direction:column;gap:2px}
.badgeItemTitle{font-weight:700;font-size:13px}
.badgeItemDesc{font-size:12px;color:var(--muted)}
.hint{opacity:.9}

.field{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 180px}
.fieldLabel{font-size:12px;color:var(--muted)}
.fieldInput{
  height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);color:var(--text);padding:0 10px;outline:none;
}
.fieldInput:focus{border-color:rgba(59,130,246,.6)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  height:36px;padding:0 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(59,130,246,.22);color:var(--text);
  cursor:pointer;font-weight:700;
}
.btn:disabled{color:var(--text)}
.btn.ghost{background:rgba(255,255,255,.06);font-weight:600}
.btn:active{transform:translateY(1px)}

.hubDot{
  display:inline-block;
  width:10px;height:10px;border-radius:999px;
  background:var(--bad);
  box-shadow:0 0 0 3px rgba(0,0,0,.18);
  flex:0 0 auto;
}
.hubDot.ok{
  background:var(--ok);
  box-shadow:0 0 0 3px rgba(34,197,94,.14), 0 0 18px rgba(34,197,94,.18);
}
.hubDot.bad{
  background:var(--bad);
  box-shadow:0 0 0 3px rgba(239,68,68,.14), 0 0 18px rgba(239,68,68,.16);
}
.hubLabel{line-height:1}
.hubLabel:empty{display:none}
#loginBtn{gap:8px}
.hubStatusBtn{
  padding:0 8px;border-radius:999px;
}
#clanBtn{gap:8px}

.modalBackdrop{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  pointer-events:auto;
}
.modal{
  width:min(760px,calc(100vw - 20px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  margin:12px 10px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px;
}
.modalHead{display:flex;justify-content:space-between;gap:12px;align-items:center}
.modalTitle{font-size:18px;font-weight:800}
.modalSub{font-size:12px;margin-top:2px}
.modalMsg{margin-top:8px}
.modalBody{margin-top:10px;display:grid;gap:10px}
#clanModal.modalBackdrop,
#clanInfoModal.modalBackdrop{
  align-items:flex-start;
}
.tabRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn.tab{
  height:32px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,.06);
}
.btn.tab.active{
  background:rgba(59,130,246,.22);
  border-color:rgba(59,130,246,.38);
}
.tabPill{display:inline-flex;align-items:center;gap:6px}
.tabUnread{
  height:18px;
  min-width:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#fff7ed;
  border:1px solid rgba(245,158,11,.45);
  background:rgba(245,158,11,.18);
}
.card{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px;
}
.taskCard{
  background:linear-gradient(90deg,rgba(34,197,94,.24) 0%,rgba(34,197,94,.24) calc(var(--task-progress,0) * 100%),rgba(0,0,0,.22) calc(var(--task-progress,0) * 100%),rgba(0,0,0,.22) 100%);
  border-color:rgba(34,197,94,.28);
}
.researchGrid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.researchCard.unlocked{
  border-color:rgba(34,197,94,.26);
  background:rgba(34,197,94,.08);
}
.researchCard.done{
  border-color:rgba(59,130,246,.28);
  background:rgba(59,130,246,.08);
}
.xpBar{
  margin-top:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.xpFill{
  height:100%;
  width:var(--xp-pct,0%);
  background:linear-gradient(90deg,rgba(34,197,94,.78),rgba(59,130,246,.78));
}
.cardHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cardTitle{font-weight:800}
.cardSub{font-size:12px;color:var(--muted);margin-top:4px}
.botUnlocks{margin-top:8px}
.botUnlocksTitle{
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(231,235,255,.85);
}
.botGrid{
  margin-top:6px;
  display:grid;
  gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
}
.botTile{
  min-height:92px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(0,0,0,.2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  gap:4px;
  justify-content:flex-start;
}
.botThumb{
  width:100%;
  height:58px;
  border-radius:8px;
  display:block;
  background:
    radial-gradient(circle at 30% 20%,rgba(59,130,246,.25),transparent 60%),
    radial-gradient(circle at 70% 80%,rgba(14,116,144,.22),transparent 65%),
    rgba(6,10,18,.85);
  border:1px solid rgba(255,255,255,.08);
}
.botTileName{
  font-size:11px;
  font-weight:800;
  line-height:1.1;
  color:#eef2ff;
}
.botTileId{
  margin-top:2px;
  font-size:10px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.botGridEmpty{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.abilityList{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.abilityItem{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:8px;
  background:rgba(0,0,0,.22);
}
.abilityHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.abilityTitle{font-weight:800;font-size:13px}
.abilityMeta{font-size:11px;color:var(--muted)}
.abilityTags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.abilityTag{
  font-size:11px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.abilityFxTag{
  border-color:rgba(59,130,246,.45);
  background:rgba(59,130,246,.18);
  color:#dbeafe;
}
.abilityDesc{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
  white-space:pre-line;
}
.abilityFxDesc{
  margin-top:4px;
  font-size:12px;
  color:rgba(147,197,253,.9);
  line-height:1.35;
}
.buffList{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:6px;
}
.buffItem{
  font-size:12px;
  color:var(--text);
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.buffItem small{
  color:var(--muted);
  font-weight:700;
}
.buffEmpty{
  font-size:12px;
  color:var(--muted);
}
.buffListHangar .buffItem{
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:6px 8px;
  background:rgba(0,0,0,.2);
}
.abilityFxPicker{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:6px;
}
.abilityFxChoice{
  flex:1;
  font-size:12px;
  color:var(--text);
  min-width:0;
}
.abilityFxBtn.btn{
  height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:12px;
}
.abilityEmpty{font-size:12px;color:var(--muted)}
.abilityTestBtn.btn{
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}

/* Input modal should never exceed the mobile viewport (esp. with keyboard). */
#inputModal.modalBackdrop{
  align-items:center;
  justify-content:center;
  padding:12px 10px;
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}
#inputModal .modal{
  width:min(520px, calc(100vw - 20px));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow:auto;
  margin:0;
}
#inputModal input.fieldInput{
  font-size:16px;
}

/* Simple yes/no confirm modal (avoid browser confirm which can exit fullscreen). */
#confirmModal.modalBackdrop{
  align-items:center;
  justify-content:center;
  padding:12px 10px;
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}
#confirmModal .modal{
  width:min(520px, calc(100vw - 20px));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow:auto;
  margin:0;
}
#confirmMsg{
  white-space:pre-line;
}

.hangarCanvas{
  width:100%;
  height:420px;
  display:block;
  background:#070a0f;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  outline:none;
  touch-action:none;
}

/* Hangar fullscreen modal */
#hangarModal.modalBackdrop{
  align-items:stretch;
  justify-content:stretch;
  background:rgba(0,0,0,.55);
}
.mechUnlockInfoModal{
  width:min(560px,calc(100vw - 20px));
}
#mechUnlockInfoModal.modalBackdrop{
  align-items:center;
  justify-content:center;
  padding:12px 10px;
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}
#mechUnlockInfoModal .modal{
  max-height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow:auto;
  margin:0;
}
#mechUnlockCurve svg{
  display:block;
  width:100%;
  height:auto;
}
.mechUnlockTable{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.mechUnlockTable td,.mechUnlockTable th{
  padding:6px 6px;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-align:left;
  vertical-align:top;
}
.mechUnlockTable th{
  font-weight:900;
  color:rgba(255,255,255,.85);
}
.modal.hangarModal{
  width:100vw;
  height:100vh;
  max-height:none;
  margin:0;
  border-radius:0;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.hangarHead{
  flex:0 0 auto;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
}
.hangarBody{
  flex:1 1 auto;
  margin-top:0;
  display:flex;
  min-height:0;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.hangarStage{
  position:relative;
  flex:1;
  min-height:0;
  background:#070a0f;
  --hangarUiScale: 1;
  --hangarUiPad: 12px;
  --hangarUiRadius: 14px;
  --hangarUiBorder: 1px solid rgba(255,255,255,.10);
  --hangarUiBg: rgba(0,0,0,.22);
  --hangarUiBlur: blur(12px);
  --hangarBtnH: 36px;
  --hangarFont: 14px;
  --hangarSmall: 12px;
  --hangarBadge: 12px;
}
@media (max-width: 640px), (max-height: 520px){
  .hangarStage{ --hangarUiScale: .9; }
}
@media (max-width: 480px), (max-height: 440px){
  .hangarStage{ --hangarUiScale: .82; }
}
.hangarStage .btn{
  height:calc(var(--hangarBtnH) * var(--hangarUiScale));
  padding:0 calc(12px * var(--hangarUiScale));
  border-radius:calc(10px * var(--hangarUiScale));
  font-size:calc(var(--hangarFont) * var(--hangarUiScale));
}
.hangarStage .fieldInput{
  height:calc(36px * var(--hangarUiScale));
  padding:0 calc(10px * var(--hangarUiScale));
  border-radius:calc(10px * var(--hangarUiScale));
  font-size:calc(var(--hangarFont) * var(--hangarUiScale));
}
.hangarStage .badge{
  font-size:calc(var(--hangarBadge) * var(--hangarUiScale));
  padding:calc(4px * var(--hangarUiScale)) calc(8px * var(--hangarUiScale));
}
.hangarStage .hangarModelUi{
  font-size:calc(var(--hangarFont) * var(--hangarUiScale));
}
.hangarCanvas.hangarCanvasFullscreen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  border:none;
}
.hangarSidePanel{
  position:absolute;
  left:12px;
  top:12px;
  bottom:calc(12px + 64px);
  width:min(33vw, 520px);
  min-width:220px;
  max-width:calc(100vw - 24px);
  padding:calc(10px * var(--hangarUiScale)) calc(12px * var(--hangarUiScale));
  border-radius:calc(var(--hangarUiRadius) * var(--hangarUiScale));
  border:var(--hangarUiBorder);
  background:var(--hangarUiBg);
  backdrop-filter:var(--hangarUiBlur);
  overflow:auto;
}
.hangarModelUi{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.hangarAbilityPanel{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  font-size:calc(var(--hangarFont) * var(--hangarUiScale));
}
.abilityListHangar .abilityItem{
  padding:calc(8px * var(--hangarUiScale));
  border-radius:calc(12px * var(--hangarUiScale));
}
.abilityListHangar .abilityTitle{
  font-size:calc(13px * var(--hangarUiScale));
}
.abilityListHangar .abilityMeta,
.abilityListHangar .abilityTag,
.abilityListHangar .abilityDesc,
.abilityListHangar .abilityFxDesc,
.abilityListHangar .abilityEmpty{
  font-size:calc(12px * var(--hangarUiScale));
}
.hangarStage .abilityTestBtn.btn{
  height:calc(28px * var(--hangarUiScale));
  padding:0 calc(10px * var(--hangarUiScale));
  font-size:calc(12px * var(--hangarUiScale));
}
.hangarModelDesc{
  max-width:100%;
  white-space:pre-line;
  line-height:1.25;
}
.hangarModelSelect{
  width:100%;
  max-width:100%;
}
.hangarActionBar{
  position:absolute;
  right:12px;
  bottom:12px;
  max-width:calc(100vw - 24px);
  padding:calc(10px * var(--hangarUiScale)) calc(12px * var(--hangarUiScale));
  border-radius:calc(var(--hangarUiRadius) * var(--hangarUiScale));
  border:var(--hangarUiBorder);
  background:var(--hangarUiBg);
  backdrop-filter:var(--hangarUiBlur);
}
.hangarRightUi{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
}
.hangarLightLabel{
  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
  color:rgba(231,235,255,.85);
  text-transform:uppercase;
}
.hangarLightValue{
  font-size:12px;
  font-weight:900;
  color:rgba(231,235,255,.92);
  min-width:20px;
  text-align:center;
}
.hangarLightSlider{
  width:220px;
  height:24px;
  transform:rotate(-90deg);
  touch-action:none;
  accent-color:#93c5fd;
}
@supports (writing-mode: vertical-lr) {
  .hangarLightSlider{
    transform:none;
    width:20px;
    height:220px;
    writing-mode: vertical-lr;
    direction: rtl;
  }
}

.touchUi{
  position:fixed;inset:0;z-index:80;
  pointer-events:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.touchStick{
  position:fixed;left:14px;bottom:18px;
  width:var(--stickSize, 150px);height:var(--stickSize, 150px);
  pointer-events:auto;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.touchBase{
  position:absolute;inset:0;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,16,32,.22);
  backdrop-filter:blur(8px);
}
.touchKnob{
  position:absolute;left:50%;top:50%;
  width:42%;height:42%;border-radius:999px;
  min-width:44px;min-height:44px;
  max-width:84px;max-height:84px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.touchLook{
  position:fixed;left:50%;right:0;top:0;bottom:0;
  width:auto;height:auto;border-radius:0;
  pointer-events:auto;
  touch-action:none;
  border:none;
  background:transparent;
  backdrop-filter:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.touchLookHint{
  position:absolute;right:10px;bottom:8px;
  font-size:12px;color:rgba(231,235,255,.62);
  display:none;
}
.touchButtons{
  position:fixed;inset:0;
  pointer-events:none;
  touch-action:none;
}
.touchBtnWrap{
  position:fixed;
  width:var(--btnSize, 56px);
  height:var(--btnSize, 56px);
  pointer-events:auto;
  touch-action:none;
  --btnSize: 56px;
}
#touchDigWrap,
#touchPlaceWrap{
  display:none;
}
body.terraformUiOn #touchDigWrap,
body.terraformUiOn #touchPlaceWrap,
body.uiEdit #touchDigWrap,
body.uiEdit #touchPlaceWrap{
  display:block;
}
#touchMicWrap{right:14px;bottom:210px}
#touchShootWrap{right:80px;bottom:210px}
#touchSpecialWrap{right:80px;bottom:144px}
#touchDownWrap{right:146px;bottom:210px}
#touchUpWrap{right:212px;bottom:210px}
#touchFlareWrap{right:14px;bottom:276px}
#touchDigWrap{right:80px;bottom:276px}
#touchPlaceWrap{right:146px;bottom:276px}
#touchDepositWrap{right:14px;bottom:342px}
body.uiEdit #touchDepositWrap{display:block}
body.uiEdit #touchDepositBtn{pointer-events:none}
.touchBtn{
  width:100%;height:100%;
  border-radius:calc(var(--btnSize, 56px) * 0.28);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(11,16,32,.52);color:var(--text);
  font-size:calc(var(--btnSize, 56px) * 0.36);font-weight:900;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.touchBtn.primary{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.35)}
.touchBtn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.touchBtn.mic{background:rgba(59,130,246,.20);border-color:rgba(59,130,246,.34);font-size:calc(var(--btnSize) * 0.26)}
.touchBtn.active{background:rgba(59,130,246,.42)}
.touchBtn:disabled{opacity:.42}
.touchBtn.cooldownActive:disabled{opacity:.9}
.touchBtn:active{transform:translateY(1px)}

.btnLabel{
  position:relative;
  z-index:2;
  pointer-events:none;
}

.btnIcon{position:relative}
.btnIcon::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:54%;height:54%;
  transform:translate(-50%,-50%);
  background:rgba(231,235,255,.92);
  z-index:2;
  -webkit-mask-image:var(--btnIconMask);
  mask-image:var(--btnIconMask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  opacity:.95;
  pointer-events:none;
}
.iconFlare{--btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%202l2.35%206.85H21l-5.55%204.03L17.8%2020%2012%2015.77%206.2%2020l2.35-7.12L3%208.85h6.65L12%202z%27/%3E%3C/svg%3E")}
.iconDig{--btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M14%202l-2%202%202%202-2%202-2-2-2%202%203.3%203.3-6.6%206.6L4%2018l6.6-6.6L14%2014l2-2-2-2%202-2-2-2z%27/%3E%3C/svg%3E")}
.iconPlace{--btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%203l5%205h-3v6h-4V8H7l5-5zm-7%2014h14v4H5v-4z%27/%3E%3C/svg%3E")}
.iconMic{--btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%2014a3%203%200%200%200%203-3V6a3%203%200%200%200-6%200v5a3%203%200%200%200%203%203zm5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011h-2z%27/%3E%3C/svg%3E")}
.iconOre{--btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%203l7%208-7%2010-7-10%207-8zm0%203.1L7.3%2011H16.7L12%206.1zm0%209.6l3.6-5.1H8.4L12%2015.7z%27/%3E%3C/svg%3E")}
.iconFullscreen{--btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M4%204h6v2H6v4H4V4zm10%200h6v6h-2V6h-4V4zM4%2014h2v4h4v2H4v-6zm14%200h2v6h-6v-2h4v-4z%27/%3E%3C/svg%3E")}
.iconInfo{--btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M11%207h2v2h-2V7zm1-5C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm1%2015h-2v-6h2v6z%27/%3E%3C/svg%3E")}
.iconReload{--btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M17.65%206.35A7.95%207.95%200%200%200%2012%204V1L7%206l5%205V7c2.76%200%205%202.24%205%205%200%202.76-2.24%205-5%205a5%205%200%200%201-4.58-3H5.26A7%207%200%200%200%2012%2021c3.86%200%207-3.14%207-7%200-1.93-.78-3.68-2.05-4.95z%27/%3E%3C/svg%3E")}
.iconExit{--btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M10%205v2H6v10h4v2H4V5h6zm3%203l5%204-5%204v-3H9v-2h4V8z%27/%3E%3C/svg%3E")}

.col{display:flex;flex-direction:column}

.switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.switch input{display:none}
.switchTrack{
  width:44px;height:24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  position:relative;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.switchThumb{
  position:absolute;
  top:2px;left:2px;
  width:20px;height:20px;
  border-radius:999px;
  background:rgba(231,235,255,.85);
  transition:transform 160ms ease, background 160ms ease;
}
.switch.on .switchTrack{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35)}
.switch.on .switchThumb{transform:translateX(20px);background:rgba(34,197,94,.9)}
.switchLabel{font-size:12px;color:rgba(231,235,255,.88);font-weight:800;letter-spacing:.2px}

.memberTable{
  margin-top:10px;
  display:grid;
  gap:6px;
}
.memberRow{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr 0.9fr 0.8fr 0.7fr auto;
  gap:8px;
  align-items:center;
  padding:8px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
  color:#ffffff;
}
.memberRow.head{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  font-size:12px;
  font-weight:900;
  color:rgba(231,235,255,.85);
}
.memberCell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.memberActions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn.sm{height:28px;padding:0 10px;border-radius:999px;font-size:12px}
.infoBtn{
  width:24px;min-width:24px;height:24px;padding:0;
  border-radius:999px;font-size:12px;font-weight:800;line-height:1;
}

.hasIndicators{position:relative;overflow:hidden}
.btnIndClock{
  position:absolute;
  inset:4px;
  border-radius:50%;
  z-index:1;
  opacity:0;
  display:none;
  pointer-events:none;
  transform:rotate(-90deg);
  background:
    conic-gradient(
      rgba(239,68,68,.85) calc(var(--coolPct, 0) * 1turn),
      rgba(255,255,255,.08) 0
    );
  -webkit-mask:radial-gradient(circle at center, transparent 46%, #000 54%);
  mask:radial-gradient(circle at center, transparent 46%, #000 54%);
  box-shadow:0 0 10px rgba(239,68,68,.25);
}
.cooldownClock .btnIndClock{
  display:block;
  opacity:var(--coolAlpha,0);
}
.cooldownClockOnly .btnIndCooldown{
  display:none;
}
.btnIndClockFill{
  position:absolute;
  inset:4px;
  border-radius:50%;
  z-index:1;
  opacity:0;
  display:none;
  pointer-events:none;
  transform:rotate(-90deg);
  background:
    conic-gradient(
      rgba(34,197,94,.85) calc(var(--fillPct, 0) * 1turn),
      rgba(255,255,255,.08) 0
    );
  -webkit-mask:radial-gradient(circle at center, transparent 46%, #000 54%);
  mask:radial-gradient(circle at center, transparent 46%, #000 54%);
  box-shadow:0 0 10px rgba(34,197,94,.25);
}
.fillClock .btnIndClockFill{
  display:block;
  opacity:var(--fillAlpha,0);
}
.btnIndBar{
  position:absolute;
  left:6px;right:6px;
  height:5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(
      90deg,
      var(--indColor, rgba(255,255,255,.75)) 0%,
      var(--indColor, rgba(255,255,255,.75)) calc(var(--indPct, 0) * 100%),
      rgba(255,255,255,.08) calc(var(--indPct, 0) * 100%),
      rgba(255,255,255,.08) 100%
    );
  opacity:0;
  pointer-events:none;
}
.btnIndCooldown{top:6px;--indPct:var(--coolPct,0);--indColor:rgba(239,68,68,.85);opacity:var(--coolAlpha,0)}
.btnIndActive{bottom:14px;--indPct:var(--activePct,0);--indColor:rgba(59,130,246,.85);opacity:var(--activeAlpha,0)}
.btnIndFill{bottom:6px;--indPct:var(--fillPct,0);--indColor:rgba(34,197,94,.85);opacity:var(--fillAlpha,0)}

.btnIndTextTop,
.btnIndTextBottom{
  position:absolute;
  left:50%;
  width:100%;
  text-align:center;
  transform:translateX(-50%);
  font-weight:1000;
  letter-spacing:.5px;
  color:rgba(231,235,255,.92);
  text-shadow:0 0 10px rgba(0,0,0,.55);
  pointer-events:none;
  display:none;
}
.btnIndTextTop{top:50%;transform:translate(-50%,-62%)}
.btnIndTextBottom{top:50%;transform:translate(-50%,6%)}

.btn.hasIndicators .btnIndTextTop,
.btn.hasIndicators .btnIndTextBottom{font-size:11px}
.touchBtn.hasIndicators .btnIndTextTop,
.touchBtn.hasIndicators .btnIndTextBottom{font-size:calc(var(--btnSize, 56px) * 0.24)}

.nearPanel{
  position:fixed;
  right:10px;
  top:58px;
  z-index:116;
  display:flex;
  gap:8px;
  align-items:center;
  pointer-events:auto;
}

.uiHandle{
  position:absolute;left:0;top:0;right:0;bottom:0;
  border:1px dashed rgba(231,235,255,.55);
  border-radius:16px;
  pointer-events:none;
  display:none;
}
.uiResizeHandle{
  position:absolute;right:-8px;bottom:-8px;
  width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(11,16,32,.62);
  backdrop-filter:blur(8px);
  display:none;
  pointer-events:auto;
  box-shadow:0 10px 22px rgba(0,0,0,.25);
  cursor:nwse-resize;
  --btnIconMask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M5%2019h4v-2H7v-2H5v4zm10-14h4v4h-2V7h-2V5zM5%205h4v2H7v2H5V5zm12%2010h2v4h-4v-2h2v-2z%27/%3E%3C/svg%3E");
}
.uiResizeHandle:not(.btnIcon)::before{
  content:"";
  position:absolute;left:9px;top:9px;
  width:12px;height:12px;border-radius:3px;
  border-right:2px solid rgba(231,235,255,.75);
  border-bottom:2px solid rgba(231,235,255,.75);
}
.uiEdit .touchStick .uiHandle,
.uiEdit .touchLook .uiHandle,
.uiEdit .touchBtnWrap .uiHandle,
.uiEdit .topLeft .uiHandle,
.uiEdit .hudQuickPanel .uiHandle{
  display:block;
}
.uiEdit .touchStick .uiResizeHandle,
.uiEdit .touchLook .uiResizeHandle,
.uiEdit .touchBtnWrap .uiResizeHandle,
.uiEdit .topLeft .uiResizeHandle,
.uiEdit .hudQuickPanel .uiResizeHandle{
  display:block;
}
.uiEdit .touchLook{
  border:1px dashed rgba(231,235,255,.28);
  background:rgba(11,16,32,.06);
}
.uiEdit .hud,
.uiEdit .hudQuickPanel{
  touch-action:none;
}

.uiEdit .hud .uiHandle,
.uiEdit .hud .uiResizeHandle{
  display:block;
}
.uiScaleControls{
  position:absolute;left:50%;bottom:-44px;
  transform:translateX(-50%);
  display:none;align-items:center;gap:6px;
  padding:6px 10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(11,16,32,.85);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  pointer-events:auto;
}
.uiEdit .hud .uiScaleControls,
.uiEdit .hudQuickPanel .uiScaleControls{
  display:flex;
}
.hudScaleBtn{
  width:16px;height:16px;border-radius:6px;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);
  color:#e7ebff;font-size:12px;line-height:14px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;
}
.hudScaleBtn:active{transform:translateY(1px)}

@media (hover: hover) and (pointer: fine) {
  .touchUi{display:none}
}
@media (hover: none) and (pointer: coarse) {
  .pcHelp{display:none}
}

/* Allow editing touch layout on desktop too (Edit Controls). */
body.uiEdit .touchUi{display:block}
#gfxBtn{display:none}
body.uiEdit #gfxBtn{display:inline-flex}
#flareBtn{display:none}