: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)}
.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 */
/* ===== CONTROLES DIREITA – versão única e responsiva ===== */

/* ancoragem segura no canto */
.rightPad{
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  pointer-events: none;
}

/* FIRE no canto */
#btnFire2{
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  z-index: 3;
}

/* disco à esquerda do FIRE */
.abilityRadial{
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(96px, 18vmin, 132px);
  height: clamp(96px, 18vmin, 132px);
  pointer-events: none;
}

/* ORBITAIS – AQUI AFASTA MAIS */
.abilityRadial .specOrbit,
.abilityRadial .actionOrbit{
  position: absolute;
  left: 50%;
  top: 50%;
  /* aumentei o raio: */
  --r: clamp(60px, 11vmin, 110px);
  transform:
    translate(-50%, -50%)
    rotate(var(--a, 0deg))
    translateX(var(--r))
    rotate(calc(-1 * var(--a, 0deg)));
  pointer-events: auto;
  z-index: 4;
}

/* tamanhos responsivos */
.btnCircle{
  width: clamp(72px, 16vmin, 96px);
  height: clamp(72px, 16vmin, 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: clamp(40px, 10vmin, 56px);
  height: clamp(40px, 10vmin, 56px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: clamp(16px, 4vmin, 20px);
  backdrop-filter: blur(4px);
}
.actionOrbit{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset;
  font-size: clamp(16px, 4.2vmin, 18px);
}

/* telas muito pequenas – opcional manter */
@media (max-width: 380px), (max-height: 560px) {
  .abilityRadial{
    width: clamp(92px, 24vmin, 120px);
    height: clamp(92px, 24vmin, 120px);
  }
  .abilityRadial .specOrbit,
  .abilityRadial .actionOrbit{
    --r: clamp(48px, 10vmin, 72px); /* ainda mais afastado no micro */
  }
  .rightPad{
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
}



/* 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%); }


/* [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] */

/* Loja: linhas mais alinhadas e botões consistentes */
.merc-row {
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.merc-row .title { font-weight:800; letter-spacing:.3px; }
.merc-row .muted { opacity:.85; font-size:.95rem; }
.merc-row .actions { display:flex; gap:8px; }


#pw-balance { display:none !important; }


/* ===== Inventário (layout novo) ===== */
.invHeader {
  display: flex;
  align-items: center;
  justify-content: center;       /* centraliza o título */
  gap: 8px;
  margin-bottom: 8px;
  position: relative;
}
.invHeader h3 { margin: 0; font-size: 18px; text-align: center; }
.invHeader .btnSmall { position: absolute; right: 0; top: 0; }

.invStats .line { margin: 6px 0; }
.invStats .title { font-weight: 700; color: #e5e7eb; }
.invStats .parts span { margin-right: 8px; }
.invStats .sep { opacity: .5; margin: 0 6px; }
.invStats .metal b { color: #e5e7eb; }

.invOres .line.title { margin-top: 12px; font-weight: 700; color: #e5e7eb; }

.ores { list-style: none; padding: 0; margin: 6px 0 0 0; }
.ores li { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.ores li b { min-width: 92px; display: inline-block; }

/* Só o título do overlay de Inventário */
#overlayInventory .card > h2 {
  text-align: center;
  width: 100%;
}

/* Quando abrir o Hub no modo DARK, esconda o header padrão do Hub */
#overlayHub[data-opening="dark"] .card > .panel:first-of-type,
#overlayHub[data-opening="dark"] .card > .row {
  display: none !important;
}

/* Dark: esconda painéis legados (a tal segunda barra) dentro do hubTabDark */
#hubTabDark > .panel {
  display: none !important;
}

/* Covil Pirata: usar overlay minimalista (sem header/tabs da Cidadela) */
#overlayHub[data-opening="pirate"] .card > .panel:first-of-type,
#overlayHub[data-opening="pirate"] .hubTabs,
#overlayHub[data-opening="pirate"] .cfgBtn {
  color: #ffffff !important;
}
#overlayHub[data-opening="pirate"] [data-tab] {
  display: none !important;
}
#overlayHub[data-opening="pirate"] .cfgBtn:hover {
  filter: brightness(1.1);
}


/* Cartão do Covil */
.pirateCard {
  max-width: 420px;
  margin: 5vh auto;
  background: #0b0d12;
  border: 1px solid rgba(239,68,68,.25); /* vermelho sutil */
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.pirateCard .cfgBtn {
  background: #1a2538;
  border: 1px solid #2b3b60;
}
.pirateCard .cfgBtn:hover { filter: brightness(1.08); }

/* === Covil Pirata: botões com fonte branca e contraste === */
#overlayHub[data-opening="pirate"] .pirateCard .cfgBtn {
  color: #fff !important;
  background: #1a2233;
  border: 1px solid rgba(239,68,68,.28);
}
#overlayHub[data-opening="pirate"] .pirateCard .cfgBtn:hover {
  filter: brightness(1.1);
}

/* Covil Pirata */
.pirateCard .cfgBtn{
  color: #fff !important;
}
.pirateCard .panel .btn-row{
  display:flex; flex-wrap:wrap; gap:10px;
}
.pirateCard .panel .btn-row > .cfgBtn{
  flex: 0 0 auto; /* fica lado a lado; quebra quando faltar espaço */
}