:root{
  --bg:#0b0d13; --panel:#111827; --text:#e5e7eb; --muted:#9ca3af; --brand:#22d3ee; --accent:#7c3aed;
}

/* Corrige vh real no mobile */
html, body {
  height: calc(var(--vh, 1vh) * 100);
}

html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif}
canvas{width:100%;height:100%;display:block;background:radial-gradient(1200px 800px at 50% 40%, #101522, #0b0d13 60%);touch-action:none}

/* HUD compacto */
.hud{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:6px;pointer-events:none;z-index:10}
.hud .row{display:flex;gap:6px}
.hud .box{background:rgba(0,0,0,.35);backdrop-filter:blur(2px);border:1px solid #1f2937;border-radius:10px;padding:5px 8px;font-weight:600;pointer-events:auto}
.hud-compact .box{font-size:12px;line-height:1}
.hud-compact .box.tiny{font-size:11px;padding:4px 6px}
.hud .btn{cursor:pointer}

/* Controles touch */
.controls{position:fixed;inset:0;display:flex;justify-content:space-between;align-items:end;padding:10px;pointer-events:none}
.leftPad{width:min(40vw,240px);height:min(40vw,240px);position:relative;border-radius:999px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.08);pointer-events:auto}
.stickInner{position:absolute;left:50%;top:50%;width:40%;height:40%;transform:translate(-50%,-50%);border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.stickThumb{position:absolute;width:32%;height:32%;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28)}
.rightPad{display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.btnCircle{width:min(18vw,112px);height:min(18vw,112px);min-width:80px;min-height:80px;border-radius:999px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);display:grid;place-items:center;color:#fff;font-weight:800}
.btnCircle:active{transform:scale(.98)}
.label{font-size:11px;color:var(--muted);text-align:center;margin-top:-6px}

/* Overlays */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:20}
.card{max-width:720px;width:100%;background:#0f1625;border:1px solid #1f2a44;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);padding:16px}
.card h2{margin:4px 0 8px 0;font-size:20px}
.card p,.card li{color:#cbd5e1;font-size:14px;line-height:1.4}
.card .footer{display:flex;justify-content:flex-end;margin-top:10px}
.card button{background:var(--brand);border:none;border-radius:10px;color:#001018;font-weight:800;padding:8px 12px;cursor:pointer}
.cfg{display:grid;gap:10px}
.cfgRow{display:flex;align-items:center;justify-content:space-between;font-size:14px}
.cfgBtn{background:#1f2a44;color:#e5e7eb;border:1px solid #2b3b60;border-radius:8px;padding:8px 10px;cursor:pointer}

/* Barra de progresso (desenhada no canvas, mas deixo estilo de fallback se usar DOM no futuro) */
.progress{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);width:70%;max-width:420px;height:12px;background:rgba(255,255,255,.08);border:1px solid #2b3b60;border-radius:10px;display:none}
.progress .bar{height:100%;background:#22d3ee;border-radius:10px;width:0%}

.bar{height:10px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden;margin-top:6px}
.bar .barFill{height:100%;width:0%;background:#22d3ee}


.toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  background: rgba(15,23,42,.95);
  color: #e5e7eb;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.25);
  font: 600 14px system-ui;
  z-index: 9999;
  pointer-events: none;
  opacity: 0; 
  transition: opacity .15s ease;
}
.toast.show { opacity: 1; }


/* ===== Oficina no mobile: rolagem vertical ===== */
#overlayHub {
  /* já é display:flex no JS; aqui só garantimos dimensões e rolagem */
  position: fixed;
  inset: 0;
  height: calc(var(--vh, 1vh) * 100); /* corrige 100vh no mobile */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;  /* scroll suave no iOS */
  padding-bottom: 12px;               /* respiro pro último botão */
}

/* Painéis mais compactos */
#overlayHub .panel {
  padding: 10px 12px;
  margin-bottom: 8px;
}

/* Títulos/descrições/custos mais próximos */
#overlayHub h2, 
#overlayHub h3 {
  margin: 6px 0 4px;
  line-height: 1.2;
}

#overlayHub p,
#overlayHub .desc,
#overlayHub .info,
#hubRepairInfo,
#hubDmgInfo,
#hubArmorInfo,
#hubCargoInfo {
  margin: 4px 0;
  line-height: 1.28;
  font-size: 0.98rem;
}

/* Botões com menos espaçamento vertical */
#overlayHub .cfgBtn,
#btnRepair, #btnDmg, #btnArmor, #btnCargo {
  margin-top: 6px;
}

@media (max-width: 480px) {
  #overlayHub { padding: 10px; }
  #overlayHub h2, #overlayHub h3 { font-size: 1rem; }
  #overlayHub .cfgBtn,
  #btnRepair, #btnDmg, #btnArmor, #btnCargo {
    padding: 8px 12px;
    font-size: 0.95rem;
  }
}


/* Cabeçalho da Cidadela "grudado" no topo enquanto rola */
#overlayHub .card > .panel:first-of-type {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11,13,19,0.92);        /* mesma cor do tema */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(148,163,184,.2);
}

/* Dá um respiro para não colar conteúdo no header sticky */
#hubTabSkins, #hubTabWorkshop, #hubTabShips {
  padding-top: 6px;
}


/* Cidadela: navegação fixa + conteúdo abaixo no mobile */
#overlayHub .card{ max-height: calc(var(--vh, 1vh) * 100 - 24px); overflow:auto; }
#overlayHub .hubTabs{ margin-top: 10px; }

/* se não houver .hubTabs no seu HTML, o JS já força scrollIntoView() ao abrir a aba */


/* Skins: bloqueadas = “sombra” */
.skin.locked img { filter: grayscale(1) brightness(0.2) contrast(1.2); }
.skin.locked .skinName { opacity: .6 }


/* área da direita */
.rightPad{
  position: fixed;            /* ou absolute, como já estava */
  right: 18px;
  bottom: 18px;
  pointer-events: none;       /* container não bloqueia; botões sim */
}

/* container do anel de botões à esquerda do FIRE */
.abilityRadial{
  position:absolute;
  right:0;
  bottom:0;
  width:min(18vw,112px);
  height:min(18vw,112px);
  min-width:80px;
  min-height:80px;
  pointer-events:none;
}

/* botão central (🔥) ancorado no canto inferior-direito */
#btnFire2{
  position:absolute;
  right:0;
  bottom:0;
  pointer-events:auto;
  z-index:3;
}

/* orbitando AO REDOR do 🔥, mas com o centro à esquerda dele */
.specOrbit{
  position:absolute;
  right:50%;           /* o centro da órbita fica à esquerda do FIRE */
  bottom:50%;
  transform-origin:center;
  --r:90px;            /* raio da órbita */
  transform:
    rotate(var(--a,0deg))
    translateX(var(--r))
    rotate(calc(-1 * var(--a,0deg)));
  pointer-events:auto;
  z-index:4;
}


/* visual: botão “POUSAR” (pequeno, mas destacado) */
.actionOrbit{
  z-index:4;
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset;
  font-size: 18px; /* ícone 🛬 fica legível */
}

/* estilo visual dos botões pequenos */
.btnCircleSmall {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  font-size: 20px;
}



/* responsivo: em telas pequenas, diminui o raio pra não colidir */
@media (max-width: 480px){
  .abilityRadial {
    width: 160px;
    height: 160px;
  }
  .specOrbit,
  .actionOrbit {
    --r: 54px;   /* antes 70; reduz pra evitar sobreposição */
  }
  .btnCircleSmall {
    width: 46px;
    height: 46px;
  }
  .btnCircle {
    width: 84px;
    height: 84px;
  }
}


/* se seus botões grandes/pequenos tiverem tamanhos fixos,
   mantenha-os consistentes aqui (exemplos): */
.btnCircle{
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
}
.btnCircleSmall{
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
}

/* Pequeno estilo para a seção de password */
#settings-password { padding:12px; border-radius:8px; background:rgba(255,255,255,0.03); }
#pw-input { padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.08); }
#pw-submit { padding:6px 10px; border-radius:6px; cursor:pointer; }
.locked { opacity:0.45; pointer-events:none; filter:grayscale(40%); }


/* Posição orbital dos botões pequenos ao redor do 🔥 */
.abilityRadial { position: relative; }
.abilityRadial .specOrbit,
.abilityRadial .actionOrbit {
  --r: 74px;                  /* raio padrão (desktop) */
  position: absolute;
  left: 44%; top: 40%;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateX(var(--r))
    rotate(calc(-1 * var(--a)));
}

/* MOBILE: aproxima os botões do centro */
@media (max-width: 480px) {
  .abilityRadial .specOrbit,
  .abilityRadial .actionOrbit { --r: 44px; } /* ajuste fino aqui (40–52) */
}

/* garante que o 🔥 fique no canto e o radial à esquerda dele */
.rightPad {
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  pointer-events: none;
}



/* [v0.7 START] Mercado Negro */
.janela { position: fixed; inset: 0; display: none; background: rgba(0,0,0,0.6); z-index: 9999; }
.janela-conteudo { max-width: 520px; margin: 5vh auto; background: #0b0d12; color: #e6e8ee; padding: 16px; border-radius: 12px; }
.merc-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.merc-item b { letter-spacing: .5px; }
.merc-item .acoes { display: flex; gap: 8px; }
#estoqueMetais { font-size: .95rem; opacity: .9; margin-top: 8px; }
/* [v0.7 END] */