.hab-body .hab-page { --text:#263744; --text-dim:#555045; --text-faint:#696054; --gold:#846027; --ember:#8e3e21; width:calc(100% - 52px); max-width:1320px; position:relative; margin:26px auto 36px; padding:24px 30px 32px; color:#263744; font-family:Georgia,serif; background:#f1e2bf url('../img/habilidades/card-habilidades-2026.png') center/100% 100%; border:3px double #9d7936; box-shadow:0 10px 24px #251a1766; }
.hab-page::before,.hab-page::after { content:''; position:absolute; top:-12px; bottom:-12px; width:19px; border:2px solid #4a351d; border-radius:8px; pointer-events:none; background:linear-gradient(to bottom,#172027 0 15px,transparent 15px calc(100% - 15px),#172027 calc(100% - 15px)),linear-gradient(90deg,#745025,#d6ad54,#87602b); }.hab-page::before { left:-12px; }.hab-page::after { right:-12px; }
.hab-body .hab-page-header { padding:13px 20px; margin:0 0 12px; background:linear-gradient(110deg,#14374c,#0a2236); border:3px double #b2924c; }
.hab-body .hab-titulo { font:700 28px Georgia,serif; color:#f5e1b2; }.hab-body .hab-subtitulo { font:italic 12px Georgia,serif; color:#d9c89e; }
.hab-body .hb-tabs { display:flex; justify-content:center; gap:8px; border:0; margin:0 0 18px; }.hab-body .hb-tab { flex:1; max-width:270px; padding:11px 15px; font:bold 14px Georgia,serif; border:3px double #b19149; border-radius:2px; color:#263b4a; background:#ecdbb7; }.hab-body .hb-tab.active { background:linear-gradient(#a67828,#d1ab52); color:#231e15; }
.hp-shell { display:grid; grid-template-columns:192px minmax(0,1fr); gap:18px; align-items:start; }.hp-categories { border:3px double #997538; background:#fff0ceaa; min-width:0; }.hp-heading { margin:0 0 10px; font:bold 15px Georgia,serif; color:#efd9a5; background:#14364a; padding:9px 11px; border-bottom:2px solid #b3934b; }.hp-categories>.hp-heading { margin-bottom:0; }
.hp-category-list { max-height:590px; overflow-y:auto; scrollbar-color:#a47b31 #ebd9af; }
.hp-category { display:block; width:100%; padding:12px 10px; text-align:left; border:0; border-bottom:1px solid #c1a972; color:#273943; background:transparent; cursor:pointer; font-family:Georgia,serif; }.hp-category strong { font-size:13px; display:block; }.hp-category small { font-size:10px; display:block; margin-top:5px; color:#6d5b37; }.hp-category.active { background:linear-gradient(110deg,#cfa746,#f3db88); box-shadow:inset 3px 0 #7b541d; }.hp-category:hover { background:#f6e5bb; }
.hp-content { min-width:0; }.hp-gates-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr); gap:16px; }.hp-caption { margin:5px 0 12px; font:italic 12px/1.5 Georgia,serif; color:#625234; text-align:center; }
.hp-gates-art { position:relative; aspect-ratio:1; min-height:370px; background:url('../img/habilidades/portoes-arte-2026.png') center/contain no-repeat; }
.hp-gate { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:4px; width:93px; padding:0; background:transparent; border:0; cursor:pointer; color:#f5e7c1; }.hp-gate b { width:49px; height:49px; display:grid; place-items:center; border-radius:50%; border:3px double #ad965e; background:radial-gradient(#32403d,#101d21); font:700 25px Georgia,serif; box-shadow:0 2px 6px #102a25aa; }.hp-gate span { font:10px Georgia,serif; padding:3px 4px; background:#132b35e6; border-radius:2px; }.hp-gate.open b { background:radial-gradient(#42bd68,#075735); border-color:#a4e8a3; }.hp-gate.active b { box-shadow:0 0 0 3px #dcc473,0 0 18px #6ee8ac; }
.hp-gate-detail,.hp-detail { min-width:0; padding:10px; background:#fff1d0cc; border:3px double #b18f44; }.hp-gate-detail>.hp-heading { margin:-10px -10px 10px; }
.hp-tech-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(265px,1fr); gap:15px; align-items:start; }.hp-tech-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.hp-tech { color:#263a47; background:#fff3d9c9; border:2px double #ae8e45; border-radius:3px; padding:10px 6px; cursor:pointer; font:12px Georgia,serif; }.hp-tech img { width:85px; height:85px; object-fit:contain; display:block; margin:0 auto 8px; }.hp-tech span { display:block; }.hp-tech.active { border-color:#805917; box-shadow:0 0 0 2px #d9b458; background:#f5e0ab; }
.hp-gate-detail .hp-tech-layout { display:flex; flex-direction:column; }.hp-gate-detail .hp-tech-grid { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }.hp-gate-detail .hp-tech img { width:45px; height:45px; }.hp-gate-detail .hp-tech { font-size:10px; }.hp-gate-detail .hp-detail { width:100%; border:0; padding:0; background:transparent; }
.hab-body .hp-content .hb-painel,.hab-body .hp-content .hb-combo-card,.hab-body .hp-content .hb-portao-card { padding:0; border:0; background:transparent; box-shadow:none; clip-path:none; margin:0; }
.hab-body .hp-content .hb-painel-header,.hab-body .hp-content .hb-combo-header { background:transparent; border:0; padding:0 0 12px; margin:0; }.hab-body .hp-content .hb-painel-titulo,.hab-body .hp-content .hb-combo-nome { color:#20394b !important; font:bold 21px Georgia,serif; }.hab-body .hp-content .hb-painel-desc { color:#5e513d; font:12px/1.5 Georgia,serif; }
.hab-body .hp-content .hb-sub-card { width:100%; max-width:none; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; clip-path:none; transform:none; }.hp-content .hb-sub-card::before,.hp-content .hb-sub-card::after { display:none; }
.hab-body .hp-content .hb-sub-img-wrap { width:100%; height:180px; margin:0; border-radius:0; background:#deceb0; }.hab-body .hp-content .hb-sub-img { width:100%; height:100%; object-fit:contain; }
.hab-body .hp-content .hb-sub-body { padding:10px 0 0; }.hab-body .hp-content .hb-sub-nome { font:bold 16px Georgia,serif; color:#213b4a; }.hab-body .hp-content .hb-sub-dano { color:#4c493b; }
.hab-body .hp-content .hb-sub-btn,.hab-body .hp-content .hb-btn-evoluir { background:linear-gradient(#204559,#102d41); color:#f7dda2; border:3px double #b18c41; border-radius:3px; font:bold 12px Georgia,serif; padding:9px; white-space:normal; max-width:100%; }.hp-content button:disabled { opacity:.6; cursor:not-allowed; }.hab-body .hp-content .hb-sub-qtd-input { background:#fff7e6; color:#243943; border:1px solid #a88b4f; }
.hab-body .hp-content .hb-portao-header { flex-direction:column; align-items:stretch; gap:8px; background:transparent; color:#213947; border:0; padding:8px; }.hab-body .hp-content .hb-portao-num,.hab-body .hp-content .hb-portao-nome,.hab-body .hp-content .hb-portao-bonus { color:#223d4b; }
.hp-content .pvpf-bloco-titulo { color:#854022; font-size:11px; }.hp-content .pvpf-linha { color:#534933; font-size:12px; }.hp-content .pvpf-linha strong { color:#253b4a; }
.hp-content .hb-modo-opcoes,.hp-content .hb-selo-grid { display:flex; flex-wrap:wrap; gap:10px; }.hp-content .hb-modo-opcao,.hp-content .hb-selo-card { max-width:150px; min-width:0; }.hp-content .hb-modo-aviso,.hp-content .hb-selo-info,.hp-content .hb-combo-reqs { color:#51432d; }
.hab-page button:focus-visible { outline:3px solid #4186a4; outline-offset:3px; }
.hab-body .hp-content .hb-combo-card { width:100%; max-width:none; }
.hab-body .hp-content .hb-combo-reqs { flex-direction:row; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.hab-body .hp-content .hb-combo-req { flex:0 1 auto; min-width:0; padding:8px 12px; border-radius:4px; font:700 13px/1.3 Georgia,serif; }
.hab-body .hp-content .hb-combo-req.ok,.hab-body .hp-content .hb-combo-status.ok { color:#18522b; background:#e0efd5; border:1px solid #538445; }
.hab-body .hp-content .hb-combo-req.falta,.hab-body .hp-content .hb-combo-status.falta { color:#862c24; background:#f8ded5; border:1px solid #b45c4e; }
.hab-body .hp-content .hb-combo-req.ok>span:first-child::before { content:'✓'; }
.hab-body .hp-content .hb-combo-req.falta>span:first-child::before { content:'×'; }
.hab-body .hp-content .hb-combo-status { padding:6px 10px; font:700 12px/1.3 Georgia,serif; }
.hab-body .hp-content .hb-combo-header { flex-wrap:wrap; align-items:center; }
.hab-body .hp-content .hb-combo-card>.hb-sub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; align-items:start; }
.hab-body .hp-content .hb-combo-card>.hb-sub-grid>.hb-sub-card { min-width:0; padding:12px; background:#fff1d0cc; border:3px double #b18f44; }
.hab-body .hp-content .hb-portao-card { opacity:1; }.hab-body .hp-content .hb-sub-dano strong { color:#8a421e; }
@media(max-width:1050px) { .hab-body .hab-page { padding:20px; }.hp-shell { grid-template-columns:155px minmax(0,1fr); gap:12px; }.hp-gates-layout,.hp-tech-layout { grid-template-columns:minmax(0,1fr) 255px; }.hp-gates-art { min-height:310px; }.hp-gate { width:76px; }.hp-gate b { width:39px; height:39px; }.hp-gate span { font-size:9px; } }
@media(max-width:800px) { .hp-shell { grid-template-columns:1fr; }.hp-category-list { display:flex; max-height:none; overflow-x:auto; }.hp-category { flex:0 0 145px; border-right:1px solid #bba066; }.hp-gates-layout,.hp-tech-layout { grid-template-columns:1fr; }.hp-gates-art { max-width:480px; margin:auto; width:100%; }.hab-body .hab-titulo { font-size:23px; }.hab-body .hb-tab { padding:8px 5px; font-size:12px; }.hab-body .hab-page { width:calc(100% - 30px); padding:16px; }.hp-detail { width:100%; } }

/* A arte da habilidade segue o mesmo tratamento dos jutsus (ver o bloco
   final de jutsus-pergaminho.css): moldura QUADRADA, com largura travada e
   centrada, em vez da faixa de 180px de altura a toda a largura que a regra
   acima dava — nessa, a imagem ficava a flutuar no meio de um rectangulo
   largo, com o rank encostado ao canto e o botao muito abaixo.
   A regra aplica-se a todos os cartoes de habilidade: categorias, variantes,
   mescladas, taijutsu, portoes e selo — todos saem do mesmo subCardHtml(). */
.hab-body .hp-content .hb-sub-img-wrap {
  width: min(190px, 100%);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  /* O mesmo bege do pergaminho dos jutsus (jutsus-pergaminho.css:62, que
     substitui o #102b3c de uma regra anterior do mesmo ficheiro). */
  background: #e2d2b3;
  border: 1px solid #a18244;
}
.hab-body .hp-content .hb-sub-img,
.hab-body .hp-content .hb-sub-img-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;
}