position:absolute; left:var(--cmd-skill-sub-left); width:var(--cmd-skill-sub-size); height:var(--cmd-skill-sub-size); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border:var(--cmd-skill-sub-border) solid rgba(150,195,255,.55); box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.skill-sub.s1{ top:var(--cmd-skill-sub1-top); }
.skill-sub.s2{ top:var(--cmd-skill-sub2-top); }
.skill-sub.unlocked{ background:radial-gradient(circle at 30% 30%, #c8edff, #5f8bd1); color:#10213b; }
.skill-sub.locked{ background:radial-gradient(circle at 30% 30%, #1d222b, #070a0f); color:#ccc; border-color:rgba(255,255,255,.14); }
.skill-sub .lvl{ font-size:var(--cmd-skill-sub-level-font-size); font-weight:bold; }
.skill-sub .nm{ font-size:var(--cmd-skill-sub-name-font-size); line-height:1.05; margin-top:var(--cmd-skill-sub-name-margin-top); width:var(--cmd-skill-sub-name-width); }

.skill-connector{
  position:absolute; height:var(--cmd-skill-connector-thickness); background:rgba(214,176,98,.5);
}
.skill-connector.top{ left:var(--cmd-skill-connector-left); top:var(--cmd-skill-connector-top-top); width:var(--cmd-skill-connector-width); transform:rotate(var(--cmd-skill-connector-top-rotate)); transform-origin:left center; }
.skill-connector.bottom{ left:var(--cmd-skill-connector-left); top:var(--cmd-skill-connector-top-bottom); width:var(--cmd-skill-connector-width); transform:rotate(var(--cmd-skill-connector-bottom-rotate)); transform-origin:left center; }

.skill-card{
  position:absolute; left:var(--cmd-skill-card-left); top:var(--cmd-skill-card-top); width:var(--cmd-skill-card-width);
  background:linear-gradient(180deg, rgba(19,44,60,.90), rgba(12,26,38,.88));
  border:1px solid rgba(214,176,98,.14);
  border-radius:var(--cmd-skill-card-radius);
  padding:var(--cmd-skill-card-pad-top) var(--cmd-skill-card-pad-right) var(--cmd-skill-card-pad-bottom) var(--cmd-skill-card-pad-left);
  color:#e8e2cf;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.skill-card .card-title{ font-size:13px; color:#f1e2b4; }
.skill-card .card-max{ position:absolute; right:10px; top:10px; font-size:11px; color:#f1e2b4; }
.skill-card .card-sub{ margin-top:4px; font-size:10px; color:#c6d8db; }
.skill-card .card-body{ margin-top:8px; font-size:10px; line-height:1.2; color:#e7ecef; }
.skill-card .card-green{ color:#7dd36b; font-weight:bold; }
.skill-card .card-footer{ margin-top:10px; font-size:10px; color:#e8e2cf; line-height:1.15; }
.skill-card .card-maxbtn{
  margin-top:10px; text-align:center; color:#e4c987; font-size:12px;
  border-top:1px solid rgba(255,255,255,.08); padding-top:6px;
}

.skill-subreq{
  display:none;
}

@media (max-width: 900px){
  .commander-left{
    left:8px; top:66px; bottom:10px; width:62px; display:flex; flex-direction:column; gap:8px;
  }
  .commander-icon{ width:56px; height:56px; }
  .commander-icon::before{ inset:-3px; }
  .commander-lv{ min-width:20px; height:20px; font-size:11px; right:-2px; top:-2px; }
  .commander-respect{ min-width:18px; height:18px; font-size:10px; left:-2px; bottom:2px; }
  .commander-list-footer{ display:none; }
  .commander-center{ left:68px; right:260px; top:72px; bottom:8px; }
  .commander-stage{ width:min(100%, 290px); }
  .commander-right{ right:60px; top:76px; bottom:8px; width:196px; }
  .commander-header-row{ padding-right:0; }
  .commander-name{ font-size:18px; }
  .commander-role{ font-size:10px; margin-top:4px; }
  .commander-small-portrait{ width:30px; height:30px; border-radius:8px; }
  .commander-side-tabs{ right:-52px; top:6px; gap:8px; }
  .commander-vtab{ width:48px; min-height:70px; font-size:10px; gap:6px; padding:8px 4px; }
  .commander-vtab .ico{ font-size:16px; }
  .commander-respect-line{ gap:6px; margin-top:6px; }
  .commander-respect-num{ font-size:26px; min-width:22px; }
  .commander-progress-text{ min-width:48px; font-size:9px; }
  .commander-level-line, .commander-stamina-line{ font-size:9px; margin-top:8px; }
  .commander-stamina-label,.commander-level-label{ font-size:9px; }
  .commander-stats{ gap:2px; margin-top:8px; }
  .commander-stat .v{ font-size:12px; }
  .commander-stat .l{ font-size:8px; }
  .commander-equips-title{ margin-top:8px; font-size:12px; }
  .equipment-grid{ gap:4px; margin-top:6px; }
  .equip-slot{ min-height:50px; font-size:8px; }
  .equip-slot .icon{ font-size:14px; margin-bottom:3px; }
  .equip-slot .only-plus{ font-size:16px; margin-bottom:3px; }
  .skills-overlay{
  position:absolute; left:-800px; width:1200px; top:-10px; bottom:2px;
  background:linear-gradient(90deg, rgba(8,12,18,.03), rgba(8,12,18,.18) 14%, rgba(8,12,18,.42));
  border-radius:18px;
  padding:4px 14px 10px 14px;
  overflow:hidden;
  z-index:6;
  border:1px solid rgba(214,176,98,.05);
  pointer-events:auto;
}
  .skill-lanes{ width:100%; min-height:430px; }
  .skill-col{
  position:absolute; top:-24px; bottom:0px; width:260px;
}
.skill-col.c0{ left:-60px; }
.skill-col.c3{ left:260px; }
.skill-col.c5{ left:580px; }
  .skill-col-title{ font-size:11px; }
  .skill-main{ left:60px; top:92px; width:54px; height:54px; }
  .skill-main .lvl{ font-size:8px; }
  .skill-main .nm{ width:40px; font-size:7px; }
  .skill-sub{ left:120px; width:36px; height:36px; }
  .skill-sub .lvl{ font-size:7px; }
  .skill-sub .nm{ width:28px; font-size:6px; }
  .skill-sub.s1{ top:58px; } .skill-sub.s2{ top:160px; }
  .skill-connector.top{ left:94px; top:80px; width:30px; }
  .skill-connector.bottom{ left:94px; top:140px; width:30px; }
  .skill-card{ width:76px; top:44px; padding:4px; }
  .skill-card .card-title{ font-size:7px; }
  .skill-card .card-max{ font-size:6px; right:4px; top:4px; }
  .skill-card .card-sub{ font-size:6px; }
  .skill-card .card-body{ font-size:6px; }
  .skill-card .card-footer{ font-size:6px; }
  .skill-card .card-maxbtn{ font-size:7px; }
  .skill-col-lock{ left:66px; top:96px; width:48px; height:48px; font-size:12px; }
  .skill-col-lock small{ font-size:7px; bottom:-16px; }
}








/* ===== NOVA BARRA INFERIOR - HOTSPOTS LIMPOS =====
   IDs novos para evitar conflito com CSS antigo.
   Ordem correta:
   1) Items
   2) Fellowship
   3) Commander
   4) Mathom House
*/
#bottomUI{
  /* legacy decorative skin removed — actual nav is #navBar */
  position:absolute !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:auto !important;
  height:auto !important;
  background:none !important;
  z-index:30 !important;
  pointer-events:none !important;
  margin:0 !important;
  padding:0 !important;
}



@media (max-width: 900px){
  #bottomUI{
    width:auto;
    height:auto;
    right:0 !important;
    bottom:0 !important;
  }
  
  
  
  
}


/* Commander page visibility + click block */
#pageScreen.commanderPage{
  display:block !important;
  pointer-events:auto !important;
}
#pageScreen.commanderPage .commander-page{
  display:block;
}
body.commander-open #bottomUI{
  pointer-events:none !important;
}


/* ===== Commander isolated fixed canvas ===== */
.commander-page{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#081018;
}
.commander-canvas{
  position:relative;
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  transform:none !important;
  transform-origin:top left;
  overflow:hidden;
}
.commander-page .commander-bg,
.commander-page .commander-dim,
.commander-page .commander-top,
.commander-page .commander-left,
.commander-page .commander-center,

/* ===== V190 adjustable UI coordinates ===== */
/* Ajuste fino centralizado:
   1) Vídeo do comandante: posição, tamanho, zoom, raio
   2) Quadro de habilidades: posição, tamanho, padding, raio
   3) Habilidades dentro do quadro: colunas, nós, conectores, cartão
   4) Barra superior de recursos: shell, recursos base/hora e limite de blocos
*/
:root{
  /* ----- Top bar / recursos ----- */
  --topbar-top: 10px;
  --topbar-width: min(980px, calc(100vw - 28px));
  --topbar-padding-top: 10px;
  --topbar-padding-right: 12px;
  --topbar-padding-bottom: 12px;
  --topbar-padding-left: 12px;

  --topbar-main-gap: 18px;
  --topbar-main-padding-right: 120px;

  --topbar-chip-min-width: 112px;
  --topbar-chip-gap: 6px;
  --topbar-chip-font-size: 14px;
  --topbar-chip-icon-size: 19px;
  --topbar-rate-font-size: 10px;
  --topbar-rate-opacity: .88;

  --topbar-tiles-right: 26px;
  --topbar-tiles-top: 24px;
  --topbar-tiles-gap: 6px;
  --topbar-tiles-font-size: 14px;
  --topbar-tiles-icon-size: 18px;

  /* ----- Top bar mobile / recursos ----- */
  --topbar-mobile-top: 4px;
  --topbar-mobile-width: min(650px, calc(100vw - 16px));
  --topbar-mobile-shell-min-height: 92px;
  --topbar-mobile-padding-top: 16px;
  --topbar-mobile-padding-right: 70px;
  --topbar-mobile-padding-bottom: 30px;
  --topbar-mobile-padding-left: 36px;

  --topbar-mobile-main-gap: 8px;
  --topbar-mobile-main-padding-right: 82px;
  --topbar-mobile-main-padding-left: 8px;
  --topbar-mobile-main-margin-top: -2px;

  --topbar-mobile-chip-min-width: 78px;
  --topbar-mobile-chip-gap: 5px;
  --topbar-mobile-chip-font-size: 10px;
  --topbar-mobile-chip-icon-size: 14px;
  --topbar-mobile-rate-font-size: 8px;

  --topbar-mobile-tiles-right: 18px;
  --topbar-mobile-tiles-top: 20px;
  --topbar-mobile-tiles-gap: 4px;
  --topbar-mobile-tiles-font-size: 10px;
  --topbar-mobile-tiles-icon-size: 14px;

  /* ----- Vídeo do comandante ----- */
  --cmd-video-left: 47%;
  --cmd-video-top: 40%;
  --cmd-video-width: 90%;
  --cmd-video-height: 100%;
  --cmd-video-scale: 1;
  --cmd-video-object-x: 50%;
  --cmd-video-object-y: 50%;
  --cmd-video-radius: 18px;

  /* Commander full background video */
  --cmd-bg-video-opacity: 1;
  --cmd-bg-video-blur: 0px;
  --cmd-bg-video-brightness: 1;
  --cmd-bg-video-saturate: 1;

  /* Right panel sizing */
  --cmd-right-panel-width: 292px;
  --cmd-right-panel-top: 86px;
  --cmd-right-panel-bottom: 18px;
  --cmd-right-panel-right: 72px;

  /* Stamina bar */
  --cmd-stamina-bar-height: 8px;
  --cmd-stamina-bar-radius: 999px;
  --cmd-stamina-track-color: rgba(255,255,255,.14);
  --cmd-stamina-fill: linear-gradient(90deg,#b48329 0%, #e2b44c 52%, #c08727 100%);

  /* Stats row */
  --cmd-stat-grid-gap: 8px;
  --cmd-stat-icon-size: 28px;
  --cmd-stat-value-size: 16px;
  --cmd-stat-label-size: 10px;

  /* ----- Quadro de habilidades ----- */
  --cmd-skills-left: -560px;
  --cmd-skills-top: -10px;
  --cmd-skills-width: 1120px;
  --cmd-skills-bottom: 2px;
  --cmd-skills-padding-top: 4px;
  --cmd-skills-padding-right: 14px;
  --cmd-skills-padding-bottom: 10px;
  --cmd-skills-padding-left: 14px;
  --cmd-skills-radius: 18px;

  /* ----- Conteúdo da árvore de habilidades ----- */
  --cmd-skill-tree-radius: 14px;
  --cmd-skill-col-top: -24px;
  --cmd-skill-col-bottom: 0px;
  --cmd-skill-col-width: 260px;
  --cmd-skill-col0-left: -60px;
  --cmd-skill-col3-left: 260px;
  --cmd-skill-col5-left: 580px;

  --cmd-skill-title-left: 0px;
  --cmd-skill-title-top: -2px;
  --cmd-skill-title-font-size: 15px;

  --cmd-skill-lock-left: 110px;
  --cmd-skill-lock-top: 84px;
  --cmd-skill-lock-size: 72px;
  --cmd-skill-lock-font-size: 22px;
  --cmd-skill-lock-label-bottom: -24px;
  --cmd-skill-lock-label-font-size: 12px;

  --cmd-skill-main-left: 120px;
  --cmd-skill-main-top: 170px;
  --cmd-skill-main-size: 88px;
  --cmd-skill-main-border: 3px;
  --cmd-skill-main-level-font-size: 12px;
  --cmd-skill-main-name-font-size: 10px;
  --cmd-skill-main-name-width: 62px;
  --cmd-skill-main-name-margin-top: 3px;

  --cmd-skill-sub-left: 178px;
  --cmd-skill-sub-size: 56px;
  --cmd-skill-sub-border: 3px;
  --cmd-skill-sub1-top: 36px;
  --cmd-skill-sub2-top: 164px;
  --cmd-skill-sub-level-font-size: 10px;
  --cmd-skill-sub-name-font-size: 8px;
  --cmd-skill-sub-name-width: 44px;
  --cmd-skill-sub-name-margin-top: 2px;

  --cmd-skill-connector-left: 144px;
  --cmd-skill-connector-top-top: 56px;
  --cmd-skill-connector-top-bottom: 134px;
  --cmd-skill-connector-width: 48px;
  --cmd-skill-connector-thickness: 2px;
  --cmd-skill-connector-top-rotate: -22deg;
  --cmd-skill-connector-bottom-rotate: 22deg;

  --cmd-skill-card-left: 0px;
  --cmd-skill-card-top: 34px;
  --cmd-skill-card-width: 126px;
  --cmd-skill-card-radius: 12px;
  --cmd-skill-card-pad-top: 10px;
  --cmd-skill-card-pad-right: 10px;
  --cmd-skill-card-pad-bottom: 12px;
  --cmd-skill-card-pad-left: 10px;
}

.commander-page .commander-right{
  position:absolute;
}
.commander-page .commander-bg{ inset:0; }
.commander-page .commander-dim{ inset:0; }
.commander-page .commander-top{ left:0; top:0; right:0; height:68px; }
.commander-page .commander-left{
  left:12px; top:80px; bottom:16px; width:104px;
  display:flex; flex-direction:column; gap:12px; overflow:auto; align-items:center;
}
.commander-page .commander-center{
  position:absolute;
  left:110px;
  right:calc(var(--cmd-right-panel-width) + 96px);
  top:78px;
  bottom:18px;
  display:block;
  z-index:1;
  pointer-events:none;
}
.commander-page .commander-stage{
  position:absolute;
  inset:0;
  transform:none;
  margin:0;
  z-index:1;
  border-radius:0;
  overflow:hidden;
  display:block;
  background:transparent;
}
.commander-page .commander-stage video,
.commander-page .commander-stage img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--cmd-video-object-x) var(--cmd-video-object-y);
  transform:scale(var(--cmd-video-scale));
  border-radius:0;
  opacity:var(--cmd-bg-video-opacity);
  filter:blur(var(--cmd-bg-video-blur)) brightness(var(--cmd-bg-video-brightness)) saturate(var(--cmd-bg-video-saturate));
}
.commander-page .commander-stage .stage-fallback{
  display:none !important;
}
.commander-page .commander-right{
  position:absolute;
  right:var(--cmd-right-panel-right);
  top:var(--cmd-right-panel-top);
  bottom:var(--cmd-right-panel-bottom);
  width:var(--cmd-right-panel-width);
  display:flex; flex-direction:column; gap:8px;
  z-index:3;
}
.commander-page .commander-side-tabs{
  position:absolute; right:-62px; top:18px; display:flex; flex-direction:column; gap:10px; z-index:5;
}
.commander-page .commander-icon{ width:72px; height:72px; }
.commander-page .commander-icon::before{ inset:-3px; }
.commander-page .commander-lv{ min-width:24px; height:24px; font-size:13px; }
.commander-page .commander-respect{ min-width:20px; height:20px; font-size:11px; }
.commander-page .commander-name{ font-size:26px; }
.commander-page .commander-role{ font-size:13px; }
.commander-page .commander-small-portrait{ width:36px; height:36px; border-radius:9px; }
.commander-page .commander-respect-num{ font-size:34px; min-width:26px; }
.commander-page .commander-progress-text{ min-width:62px; font-size:10px; }
.commander-page .commander-level-line,
.commander-page .commander-stamina-line{ font-size:11px; margin-top:8px; }
.commander-page .commander-level-label,
.commander-page .commander-stamina-label{ font-size:10px; }
.commander-page .commander-stats{ gap:4px; margin-top:10px; }
.commander-page .commander-stat .v{ font-size:15px; }
.commander-page .commander-stat .l{ font-size:9px; }
.commander-page .commander-equips-title{ margin-top:8px; font-size:13px; }
.commander-page .equipment-grid{ gap:5px; margin-top:6px; }
.commander-page .equip-slot{ min-height:62px; font-size:9px; }
.commander-page .equip-slot .only-plus{ font-size:20px; margin-bottom:4px; }

.commander-page .skills-overlay{
  left:-520px;
  width:720px;
  top:10px;
  bottom:10px;
}
.commander-page .skill-col{ width:190px; }
.commander-page .skill-col.c0{ left:4px; }
.commander-page .skill-col.c3{ left:228px; }
.commander-page .skill-col.c5{ left:412px; }

/* Fixed-canvas scaling for all resolutions/orientations */
@media (max-width: 2000px){
  .commander-page{ overflow:hidden; }
}


/* ===== Isolated map responsiveness helpers ===== */
body.map-open #resourceTopBar{
  z-index:40 !important;
}
body.map-open #bottomUI{
  z-index:41 !important;
}


/* remove old center dock from map page entirely */
body.map-open #formationDock,
body.map-open #openFormation,
body.map-open #openReports{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}



/* ===== V180 single debug buttons ===== */
#bottomUI{
  overflow:visible !important;
}
#mapDebugButtons{
  position:absolute !important;
  inset:0 !important;
  z-index:600 !important;
  pointer-events:none !important;
}
body.commander-open #mapDebugButtons{
  display:none !important;
}
#mapDebugButtons .dbg-btn{
  position:absolute !important;
  display:block !important;
  background:transparent !important;
  border:none !important;
  border-radius:50% !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:-9999px !important;
  box-shadow:none !important;
  opacity:0 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select:none !important;
  width:34px !important;
  height:34px !important;
}
#dbgItems{ right:92px !important; bottom:8px !important; }
#dbgFellowship{ right:60px !important; bottom:9px !important; }
#dbgCommander{ right:30px !important; bottom:11px !important; }
#dbgMathom{ right:-12px !important; bottom:7px !important; width:42px !important; height:42px !important; }

@media (max-width: 900px){
  #mapDebugButtons .dbg-btn{
    font-size:8px !important;
  }
  #dbgItems{
    right:35.5% !important;
    bottom:4.8% !important;
    width:7.0% !important;
    height:22.0% !important;
  }
  #dbgFellowship{
    right:24.5% !important;
    bottom:5.2% !important;
    width:7.2% !important;
    height:22.8% !important;
  }
  #dbgCommander{
    right:14.5% !important;
    bottom:5.8% !important;
    width:7.4% !important;
    height:23.8% !important;
  }
  #dbgMathom{
    right:-1.0% !important;
    bottom:4.2% !important;
    width:10.6% !important;
    height:31.0% !important;
  }
}


/* ===== V186 hide debug visuals, keep click/touch ===== */
body.map-open .map-debug-text-cleanup{
  display:none !important;
}


/* ===== V187 hide stray text inside bottom bar containers ===== */
#bottomUI,
#bottomUI *{
  text-indent: -9999px !important;
}
#bottomUI .bottom-hit,
#bottomUI #mapDebugButtons,
#bottomUI .dbg-btn{
  text-indent: 0 !important;
}



/* ===== V188 full cleanup for invisible hit areas ===== */
#bottomUI .bottom-hit::before,
#bottomUI .bottom-hit::after,
#bottomUI .dbg-btn::before,
#bottomUI .dbg-btn::after{
  content:none !important;
}
#bottomUI .bottom-hit,
#bottomUI .dbg-btn{
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:-9999px !important;
}


/* ===== V195 commander page refinement (isolated) ===== */
.commander-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.16), transparent 20%),
    linear-gradient(180deg, rgba(3,8,16,.18), rgba(3,8,16,.42));
}
.commander-page .commander-stage{
  background:
    radial-gradient(circle at 36% 16%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(90deg, rgba(5,8,14,.56) 0%, rgba(5,8,14,.18) 26%, rgba(5,8,14,.20) 58%, rgba(5,8,14,.56) 100%);
}
.commander-page .commander-stage .stage-fallback{
  display:none !important;
}
.commander-page .commander-right .panel,
.commander-page .commander-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.commander-page .commander-stamina-label{
  color:#f0d995;
}


/* ===== V196 commander true full background cleanup ===== */
.commander-page{
  background:transparent;
}
.commander-bg,
.commander-dim{
  display:none !important;
}
.commander-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:transparent;
}
.commander-page .commander-center,
.commander-page .commander-stage,
.commander-page .commander-videoWrap,
.commander-page .commander-videoWrap video,
.commander-page .commander-stageFallback,
.commander-page .commander-stageFallback img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
}
.commander-page .commander-videoWrap,
.commander-page .commander-stageFallback{
  display:block !important;
}
.commander-page .commander-videoWrap video,
.commander-page .commander-stageFallback img,
.commander-page .commander-stage video,
.commander-page .commander-stage img{
  object-fit:cover !important;
  object-position:var(--cmd-video-object-x) var(--cmd-video-object-y) !important;
  transform:scale(var(--cmd-video-scale)) !important;
  border-radius:0 !important;
  opacity:var(--cmd-bg-video-opacity) !important;
  filter:none !important;
}
.commander-page .commander-stage .stage-fallback{
  display:none !important;
}
.commander-page .commander-top,
.commander-page .commander-left,
.commander-page .commander-right,
.commander-page .commander-side-tabs{
  z-index:4 !important;
}
.commander-page .commander-right,
.commander-page .commander-right .panel,
.commander-page .commander-card,
.commander-page .commander-mid-sep,
.commander-page .equipment-grid,
.commander-page .equip-slot{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.commander-page .commander-side-tabs{
  background:transparent !important;
}
.commander-page .commander-vtab{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#eee0b8 !important;
}
.commander-page .commander-vtab.active{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#f3d37c !important;
}
.commander-page .commander-small-portrait{
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.commander-page .commander-stats{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:var(--cmd-stat-grid-gap) !important;
}
.commander-page .commander-stat{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.commander-page .commander-stat .ico,
.commander-page .commander-stat img,
.commander-page .commander-stat .icon{
  width:var(--cmd-stat-icon-size) !important;
  height:var(--cmd-stat-icon-size) !important;
  display:block !important;
  margin:0 auto 6px auto !important;
}
.commander-page .commander-progress .bar{
  background:var(--cmd-stamina-track-color) !important;
  height:var(--cmd-stamina-bar-height) !important;
  border-radius:var(--cmd-stamina-bar-radius) !important;
}
.commander-page .commander-progress > div{
  background:var(--cmd-stamina-fill) !important;
  border-radius:var(--cmd-stamina-bar-radius) !important;
}
.commander-page .equipment-grid{
  gap:6px !important;
}
.commander-page .equip-slot{
  min-height:74px;
  color:#ead7ab;
}
.commander-page .equip-slot .icon{
  display:none !important;
}
.commander-page .equip-slot .only-plus{
  font-size:24px;
  line-height:1;
  margin-bottom:6px;
}


/* ===== V198 commander skill tree LOTR style ===== */
.commander-page *{
  text-shadow:
    0 1px 1px rgba(0,0,0,.95),
    0 0 3px rgba(0,0,0,.95),
    0 0 6px rgba(0,0,0,.70);
}
.commander-page .commander-right{
  width: 300px;
}
.commander-page .skills-overlay{
  position:absolute;
  left:-980px;
  width:1220px;
  top:-4px;
  bottom:0;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
  pointer-events:none;
}
.commander-page .skills-wrap,
.commander-page .skill-tree{
  position:relative;
  width:100%;
  height:100%;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.commander-page .skill-tree-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.commander-page .skill-col-tag{
  position:absolute;
  top:14px;
  font:700 16px Georgia,serif;
  color:#d9b86c;
}
.commander-page .skill-col-tag.r0{ left:168px; }
.commander-page .skill-col-tag.r3{ left:614px; }
.commander-page .skill-col-tag.r5{ left:960px; }

.commander-page .skill-node{
  position:absolute;
  width:82px;
  height:82px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  pointer-events:auto;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.commander-page .skill-node:hover{
  transform:translate(-50%, -50%) scale(1.06);
}
.commander-page .skill-node.unlocked.main{
  background:radial-gradient(circle at 35% 30%, rgba(255,243,198,.95), rgba(216,176,76,.95) 55%, rgba(122,86,20,.96) 100%);
  box-shadow:0 0 0 2px rgba(255,220,138,.85), 0 0 22px rgba(221,173,58,.35);
}
.commander-page .skill-node.unlocked.sub{
  width:58px;
  height:58px;
  background:radial-gradient(circle at 35% 30%, rgba(233,248,255,.96), rgba(143,211,255,.98) 55%, rgba(42,84,136,.98) 100%);
  box-shadow:0 0 0 2px rgba(185,233,255,.78), 0 0 18px rgba(88,176,255,.22);
}
.commander-page .skill-node.locked{
  width:72px;
  height:72px;
  background:radial-gradient(circle at 35% 30%, rgba(33,36,42,.96), rgba(8,10,14,.98) 70%);
  box-shadow:0 0 0 2px rgba(118,125,142,.48), inset 0 0 12px rgba(255,255,255,.03);
  cursor:default;
}
.commander-page .skill-node.locked::after{
  content:attr(data-lock);
  position:absolute;
  bottom:-24px;
  left:50%;
  transform:translateX(-50%);
  font:700 12px Georgia,serif;
  color:#d7c79f;
  white-space:nowrap;
}
.commander-page .skill-node img{
  width:62%;
  height:62%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
.commander-page .skill-node.sub img{
  width:60%;
  height:60%;
}
.commander-page .skill-node .lvl{
  position:absolute;
  inset:auto auto 6px 50%;
  transform:translateX(-50%);
  font:700 11px Arial,sans-serif;
  color:#fff4c9;
  white-space:nowrap;
}
.commander-page .skill-node .name{
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  width:88px;
  text-align:center;
  font:700 10px Georgia,serif;
  color:#e7d9b5;
}
.commander-page .skill-node.sub .name{
  width:66px;
  font-size:8px;
  top:calc(100% + 4px);
}
.commander-page .skill-node.active{
  filter:brightness(1.06);
}
.commander-page .skill-node.active::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,244,187,.9), 0 0 22px rgba(255,219,102,.58);
}
.commander-page .skill-info-inline{
  position:absolute;
  width:176px;
  min-height:112px;
  background:linear-gradient(180deg, rgba(16,37,78,.92), rgba(10,26,56,.92));
  border:1px solid rgba(121,173,255,.28);
  border-radius:14px;
  padding:10px 12px 12px 12px;
  color:#f4e8c2;
  z-index:20;
  pointer-events:none;
  box-shadow:0 10px 24px rgba(0,0,0,.36);
}
.commander-page .skill-info-inline .title{
  font:700 14px Georgia,serif;
  color:#f4dd98;
  margin-bottom:4px;
}
.commander-page .skill-info-inline .rank{
  font:700 11px Arial,sans-serif;
  color:#d7e8ff;
  margin-bottom:6px;
}
.commander-page .skill-info-inline .desc{
  font:700 11px/1.25 Georgia,serif;
  color:#ebdfbf;
}
.commander-page .skill-info-inline .max{
  margin-top:8px;
  font:700 11px Georgia,serif;
  color:#f4dd98;
}


/* ===== V200 remove commander right-side band ===== */
.commander-page,
.commander-page .commander-center,
.commander-page .commander-stage,
.commander-page .commander-videoWrap,
.commander-page .commander-videoWrap video,
.commander-page .commander-stageFallback,
.commander-page .commander-stageFallback img{
  right:0 !important;
  width:100% !important;
  max-width:none !important;
}

.commander-page{
  overflow:hidden !important;
  background:transparent !important;
}

.commander-page::before{
  right:0 !important;
  width:100% !important;
  background:transparent !important;
}

.commander-page .commander-stage{
  background:transparent !important;
}

.commander-page .commander-center{
  inset:0 !important;
}

.commander-page .commander-videoWrap video,
.commander-page .commander-stage video,
.commander-page .commander-stageFallback img{
  object-fit:cover !important;
  object-position:center center !important;
}


/* ===== V201 commander canvas full-width fix ===== */
#pageScreen.commanderPage,
#pageScreen.commanderPage .commander-page{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
}

.commander-page{
  display:block !important;
  background:transparent !important;
}

.commander-canvas{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  transform:none !important;
  overflow:hidden !important;
}

.commander-page .commander-center,
.commander-page .commander-stage,
.commander-page .commander-videoWrap,
.commander-page .commander-videoWrap video,
.commander-page .commander-stageFallback,
.commander-page .commander-stageFallback img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
}

.commander-page .commander-stage,
.commander-page .commander-videoWrap,
.commander-page .commander-stageFallback{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  background:transparent !important;
}

.commander-page .commander-stage video,
.commander-page .commander-videoWrap video,
.commander-page .commander-stageFallback img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.commander-page::before{
  background:transparent !important;
}


/* ===== V202 isolated commander fullwidth fix ===== */
#pageScreen.commanderPage{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
}
#pageScreen.commanderPage .commander-page{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}
#pageScreen.commanderPage .commander-canvas{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  transform:none !important;
}
#pageScreen.commanderPage .commander-bg,
#pageScreen.commanderPage .commander-dim,
#pageScreen.commanderPage .commander-center,
#pageScreen.commanderPage .commander-stage{
  position:absolute;
  inset:0;
}
#pageScreen.commanderPage .commander-stage video,
#pageScreen.commanderPage .commander-stage img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ===== V203 commander icon scroll hide only ===== */
.commander-left{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.commander-left::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}

/* ===== V206 real skill tree spacing fix ===== */
.commander-page .skill-node.unlocked.sub{
  width:52px !important;
  height:52px !important;
}
.commander-page .skill-node.sub .name{
  width:54px !important;
}


/* ===== V207 compressed skill tree layout ===== */
.commander-page .skills-overlay{
  width:1120px !important;
  left:-560px !important;
}
.commander-page .skill-col-tag.r0{ left:110px !important; }
.commander-page .skill-col-tag.r3{ left:510px !important; }
.commander-page .skill-col-tag.r5{ left:770px !important; }

.commander-page .skill-node{
  width:70px !important;
  height:70px !important;
}
.commander-page .skill-node.unlocked.sub{
  width:48px !important;
  height:48px !important;
}
.commander-page .skill-node.locked{
  width:62px !important;
  height:62px !important;
}
.commander-page .skill-node .name{
  width:66px !important;
  font-size:9px !important;
}
.commander-page .skill-node.sub .name{
  width:50px !important;
  font-size:7px !important;
}
.commander-page .skill-info-inline{
  width:160px !important;
}


/* ===== V210 skill tree fine position controls ===== */
/* Cada habilidade principal e sub habilidade agora tem coordenadas próprias.
   x = posição horizontal em %
   y = posição vertical em %
   Você pode ajustar cada nó individualmente sem quebrar os demais.
   Também há controles separados para aproximar/afastar cada sub da sua principal. */


/* ===== V211 fullscreen button ===== */
#btnFullscreen{
  position:fixed;
  right:12px;
  top:12px;
  z-index:10000;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(230,206,144,.55);
  background:radial-gradient(circle at 35% 30%, rgba(64,78,110,.92), rgba(16,22,36,.96));
  color:#f1d37d;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 18px/1 Arial,sans-serif;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
#btnFullscreen:active{
  transform:scale(.97);
}
#btnFullscreen.hidden{
  display:none !important;
}


/* ===== V215 commander hard reset scaling ===== */
/* Reset total da página de commander para manter SEMPRE a mesma composição visual.
   Canvas lógico fixo: 1280x720.
   Todo o conteúdo (ícones, vídeo, painel, equipamentos, skills) escala junto. */
#pageScreen.commanderPage{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
  display:block !important;
  pointer-events:auto !important;
}
#pageScreen.commanderPage .commander-page{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  overflow:hidden !important;
  background:#081018 !important;
}
#pageScreen.commanderPage .commander-canvas{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:1280px !important;
  height:720px !important;
  max-width:none !important;
  max-height:none !important;
  transform-origin:top left !important;
  overflow:hidden !important;
}
#pageScreen.commanderPage .commander-bg,
#pageScreen.commanderPage .commander-dim{
  display:none !important;
}
#pageScreen.commanderPage .commander-top{
  position:absolute !important;
  left:0 !important; top:0 !important; right:0 !important; height:68px !important;
  display:flex !important; align-items:center !important; gap:18px !important;
  padding:0 20px !important; box-sizing:border-box !important;
  z-index:8 !important;
}
#pageScreen.commanderPage .commander-left{
  position:absolute !important;
  left:12px !important; top:80px !important; bottom:16px !important; width:104px !important;
  display:flex !important; flex-direction:column !important; gap:12px !important;
  overflow:auto !important; align-items:center !important;
  background:transparent !important; z-index:8 !important;
  scrollbar-width:none !important; -ms-overflow-style:none !important;
}
#pageScreen.commanderPage .commander-left::-webkit-scrollbar{
  display:none !important; width:0 !important; height:0 !important;
}
#pageScreen.commanderPage .commander-center{
  position:absolute !important;
  left:110px !important; right:316px !important; top:78px !important; bottom:18px !important;
  display:flex !important; align-items:flex-end !important; justify-content:center !important;
  inset:auto !important; width:auto !important; height:auto !important;
  z-index:4 !important;
}
#pageScreen.commanderPage .commander-stage{
  position:relative !important;
  width:470px !important; max-width:100% !important; height:100% !important;
  display:flex !important; align-items:flex-end !important; justify-content:center !important;
  inset:auto !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
  background:transparent !important;
}
#pageScreen.commanderPage .commander-stage video,
#pageScreen.commanderPage .commander-stage img{
  position:static !important;
  width:auto !important; height:auto !important;
  max-height:96% !important; max-width:100% !important; object-fit:contain !important;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.5)) !important;
}
#pageScreen.commanderPage .commander-right{
  position:absolute !important;
  right:72px !important; top:56px !important; bottom:18px !important; width:292px !important;
  display:flex !important; flex-direction:column !important; gap:8px !important;
  inset:auto !important; height:auto !important; z-index:8 !important; overflow:visible !important;
}
#pageScreen.commanderPage #commanderPanel{
  position:relative !important;
  overflow:visible !important;
}
#pageScreen.commanderPage .commander-side-tabs{
  position:absolute !important; right:-62px !important; top:18px !important;
  display:flex !important; flex-direction:column !important; gap:10px !important; z-index:10 !important;
}
#pageScreen.commanderPage .skills-overlay{
  position:absolute !important;
  left:-560px !important; width:1120px !important; top:-10px !important; bottom:2px !important;
  z-index:6 !important; pointer-events:auto !important; overflow:visible !important;
}


/* ===== V216 commander disable internal media resize ===== */
/* Causa raiz: media queries internas ainda alteravam commander-left/center/right
   e outros blocos dentro do canvas fixo. Este patch trava os valores-base do layout
   para que apenas o canvas inteiro escale, sem reflow interno por breakpoint. */
#pageScreen.commanderPage .commander-top{
  left:0 !important; top:0 !important; right:0 !important; height:68px !important;
  gap:18px !important; padding:0 20px !important;
}
#pageScreen.commanderPage .commander-back{
  width:54px !important; height:54px !important; font-size:30px !important;
}
#pageScreen.commanderPage .commander-title{
  font-size:24px !important;
}
#pageScreen.commanderPage .commander-left{
  left:12px !important; top:80px !important; bottom:16px !important; width:104px !important;
  gap:12px !important;
}
#pageScreen.commanderPage .commander-icon{
  width:88px !important; height:88px !important;
}
#pageScreen.commanderPage .commander-icon::before{
  inset:-4px !important;
}
#pageScreen.commanderPage .commander-lv{
  min-width:28px !important; height:28px !important; font-size:16px !important;
  right:-6px !important; top:-6px !important;
}
#pageScreen.commanderPage .commander-respect{
  min-width:24px !important; height:24px !important; font-size:14px !important;
  left:-8px !important; bottom:4px !important;
}
#pageScreen.commanderPage .commander-center{
  left:110px !important; right:316px !important; top:78px !important; bottom:18px !important;
}
#pageScreen.commanderPage .commander-stage{
  width:min(100%, 470px) !important; height:100% !important;
}
#pageScreen.commanderPage .commander-right{
  right:72px !important; top:56px !important; bottom:18px !important; width:292px !important;
  gap:8px !important;
}
#pageScreen.commanderPage .commander-header-row{
  padding-right:0 !important;
}
#pageScreen.commanderPage .commander-name{
  font-size:24px !important;
}
#pageScreen.commanderPage .commander-role{
  font-size:13px !important; margin-top:5px !important;
}
#pageScreen.commanderPage .commander-small-portrait{
  width:40px !important; height:40px !important; border-radius:10px !important;
}
#pageScreen.commanderPage .commander-side-tabs{
  right:-62px !important; top:18px !important; gap:10px !important;
}
#pageScreen.commanderPage .commander-vtab{
  width:62px !important; min-height:86px !important; gap:8px !important;
  font-size:11px !important; padding:10px 6px !important;
}
#pageScreen.commanderPage .commander-vtab .ico{
  font-size:18px !important;
}
#pageScreen.commanderPage .commander-respect-line{
  gap:8px !important; margin-top:10px !important;
}
#pageScreen.commanderPage .commander-respect-num{
  font-size:40px !important; min-width:32px !important;
}
#pageScreen.commanderPage .commander-progress-text{
  min-width:62px !important; font-size:12px !important;
}
#pageScreen.commanderPage .commander-level-line,
#pageScreen.commanderPage .commander-stamina-line{
  font-size:12px !important; margin-top:10px !important;
}
#pageScreen.commanderPage .commander-stamina-label,
#pageScreen.commanderPage .commander-level-label{
  font-size:12px !important;
}
#pageScreen.commanderPage .commander-stats{
  gap:6px !important; margin-top:10px !important;
}
#pageScreen.commanderPage .commander-stat .v{
  font-size:18px !important;
}
#pageScreen.commanderPage .commander-stat .l{
  font-size:10px !important;
}
#pageScreen.commanderPage .commander-equips-title{
  margin-top:10px !important; font-size:18px !important;
}
#pageScreen.commanderPage .equipment-grid{
  gap:8px !important; margin-top:8px !important;
}
#pageScreen.commanderPage .equip-slot{
  min-height:68px !important; font-size:10px !important;
}
#pageScreen.commanderPage .equip-slot .only-plus{
  font-size:24px !important; margin-bottom:4px !important;
}
#pageScreen.commanderPage .skills-overlay{
  left:-560px !important; width:1120px !important; top:-10px !important; bottom:2px !important;
}


/* ===== V217 commander fixed aspect box + cover video ===== */
/* Estrutura:
   - viewport inteiro como moldura
   - commander canvas fixo 1280x720
   - escalonamento único do canvas inteiro
   - sobras viram letterbox/pillarbox
   - vídeo usa cover dentro da área de stage */
#pageScreen.commanderPage{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
  background:#05070d !important;
}

#pageScreen.commanderPage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.36)),
    radial-gradient(circle at center, rgba(255,255,255,.04), transparent 42%);
  pointer-events:none;
  z-index:0;
}

#pageScreen.commanderPage .commander-page{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  background:transparent !important;
}

#pageScreen.commanderPage .commander-canvas{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:1280px !important;
  height:720px !important;
  max-width:none !important;
  max-height:none !important;
  transform-origin:top left !important;
  overflow:hidden !important;
  background:#081018 !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 24px 60px rgba(0,0,0,.55);
  z-index:1 !important;
}

#pageScreen.commanderPage .commander-bg,
#pageScreen.commanderPage .commander-dim{
  display:none !important;
}

#pageScreen.commanderPage .commander-center{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  display:block !important;
  z-index:1 !important;
  pointer-events:none !important;
}

#pageScreen.commanderPage .commander-stage{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  background:#081018 !important;
  overflow:hidden !important;
}

#pageScreen.commanderPage .commander-stage video,
#pageScreen.commanderPage .commander-stage img,
#pageScreen.commanderPage .commander-videoWrap video,
#pageScreen.commanderPage .commander-stageFallback img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:50% 50% !important;
  border-radius:0 !important;
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
}

/* overlays acima do vídeo */
#pageScreen.commanderPage .commander-top,
#pageScreen.commanderPage .commander-left,
#pageScreen.commanderPage .commander-right,
#pageScreen.commanderPage .commander-side-tabs{
  z-index:8 !important;
}

#pageScreen.commanderPage .commander-card,
#pageScreen.commanderPage #commanderPanel,
#pageScreen.commanderPage .skills-overlay{
  overflow:visible !important;
}

/* mantém scroll funcional, mas invisível */
#pageScreen.commanderPage .commander-left{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
#pageScreen.commanderPage .commander-left::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}