/* R7.10.110 — Character UI compacta no padrão Zenkai/Huntera.
   Somente apresentação: ficha + roster. Nenhuma regra de progressão/troca/save muda. */

/* =========================
   FICHA DO PERSONAGEM
   ========================= */
#infoModal.character-mode{
  place-items:center!important;
  background:rgba(2,7,14,.72)!important;
  backdrop-filter:blur(1px)!important;
}
#infoModal.character-mode .modal.compact{
  width:min(820px,calc(100vw - 44px))!important;
  height:min(560px,calc(100dvh - 92px))!important;
  max-height:none!important;
  transform:none!important;
  overflow:hidden!important;
  border:1px solid #11a9ff!important;
  border-radius:3px!important;
  background:#06111f!important;
  box-shadow:
    0 0 0 2px #062f57,
    0 0 0 3px #d99b20,
    0 16px 54px #000c,
    inset 0 0 26px #006dcc22!important;
}
#infoModal.character-mode .modal-head{
  height:38px!important;
  min-height:38px!important;
  padding:0 8px 0 14px!important;
  display:flex!important;
  align-items:center!important;
  border:0!important;
  border-bottom:1px solid #138fe0!important;
  background:
    linear-gradient(90deg,#07182c 0%,#0c2c50 48%,#07182c 100%)!important;
  color:#f3c951!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  text-shadow:0 1px #000,0 0 8px #d6901433!important;
}
#infoModal.character-mode .modal-head::after{
  content:'';
  position:absolute;
  left:12px;right:48px;bottom:0;
  height:2px;
  background:linear-gradient(90deg,#ffb521,#16c8ff 34%,#0c79d8 70%,transparent);
  opacity:.9;
  pointer-events:none;
}
#infoModal.character-mode .modal-head .x{
  width:28px!important;height:28px!important;min-width:28px!important;
  margin-left:auto!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:1px solid #149ee7!important;border-radius:2px!important;
  background:linear-gradient(#102f52,#07182b)!important;
  color:#ffd45a!important;font-size:17px!important;font-weight:900!important;
  box-shadow:inset 0 0 0 1px #06406f!important;
}
#infoModal.character-mode .modal-head .x:hover{
  background:linear-gradient(#17436f,#0a2440)!important;
  border-color:#ffb724!important;
}
#infoModal.character-mode .modal-body{
  height:calc(100% - 38px)!important;
  max-height:none!important;
  overflow:hidden!important;
  padding:0!important;
  background:#07111e!important;
}
#infoModal.character-mode #infoContent{height:100%!important;min-height:0!important}
#infoModal.character-mode .modal-body>.modal-actions{display:none!important}

#infoModal.character-mode .character-sheet{
  height:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  padding:7px 8px 8px!important;
  color:#b9cce2!important;
  font-size:11px!important;
  overflow:hidden!important;
}
#infoModal.character-mode .character-tabs{
  height:29px!important;
  min-height:29px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  margin:0!important;
}
#infoModal.character-mode .character-tabs button{
  height:29px!important;
  border:1px solid #1f679d!important;
  border-radius:2px!important;
  background:linear-gradient(#0c2947,#071725)!important;
  box-shadow:inset 0 0 0 1px #062d50!important;
  color:#a8bdd6!important;
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
  text-shadow:0 1px #000!important;
}
#infoModal.character-mode .character-tabs button:hover{
  border-color:#20b7ff!important;color:#e5f4ff!important;
}
#infoModal.character-mode .character-tabs button.active{
  border-color:#ffb522!important;
  background:linear-gradient(#bd5a0a,#6f2605)!important;
  color:#fff4d4!important;
  box-shadow:inset 0 0 0 1px #ffca3d,0 0 9px #ff8b182e!important;
}

#infoModal.character-mode .character-summary{
  min-height:123px!important;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr) 198px!important;
  gap:9px!important;
  padding:8px!important;
  border:1px solid #155d91!important;
  border-radius:2px!important;
  background:linear-gradient(135deg,#0a192c,#081421 68%,#07111d)!important;
  box-shadow:inset 0 0 0 1px #062d4d, inset 0 0 22px #007fd516!important;
}
#infoModal.character-mode .character-portrait{
  width:88px!important;height:96px!important;
  min-height:0!important;
  border:1px solid #a97d28!important;
  border-radius:2px!important;
  background:radial-gradient(circle,#103258 0%,#07111e 70%)!important;
  box-shadow:inset 0 0 0 1px #123c61!important;
  overflow:hidden!important;
}
#infoModal.character-mode .character-portrait img{
  width:auto!important;height:82px!important;max-width:82px!important;
  object-fit:contain!important;image-rendering:pixelated!important;
}
#infoModal.character-mode .character-main{min-width:0!important}
#infoModal.character-mode .character-main h2{
  margin:0 0 1px!important;
  color:#f2d16a!important;
  font-size:17px!important;
  line-height:1.05!important;
  letter-spacing:.01em!important;
}
#infoModal.character-mode .character-main>span{
  display:block!important;
  margin:0 0 5px!important;
  color:#78b6f3!important;
  font-size:10.5px!important;
}
#infoModal.character-mode .char-bar-row{
  display:grid!important;
  grid-template-columns:106px minmax(80px,1fr) 94px!important;
  gap:6px!important;
  align-items:center!important;
  margin:3px 0!important;
  font-size:10px!important;
}
#infoModal.character-mode .char-bar-row label{gap:5px!important;color:#dbe6f6!important;white-space:nowrap!important}
#infoModal.character-mode .char-bar-row label span{color:#aabbd1!important}
#infoModal.character-mode .char-bar-row>b{
  color:#dce9fb!important;font-size:10px!important;text-align:right!important;white-space:nowrap!important
}
#infoModal.character-mode .char-bar{
  height:8px!important;
  border:1px solid #233d5d!important;
  border-radius:2px!important;
  background:repeating-linear-gradient(90deg,#0a1420 0 11px,#12243a 11px 13px)!important;
  overflow:hidden!important;
}
#infoModal.character-mode .char-bar i{height:100%!important;border-radius:1px!important}
#infoModal.character-mode .char-bar.hp i{background:linear-gradient(90deg,#c74e5b,#eb6a78)!important}
#infoModal.character-mode .char-bar.ki i{background:linear-gradient(90deg,#2d70ba,#55a4f0)!important}
#infoModal.character-mode .char-bar.exp i{background:linear-gradient(90deg,#7f4fb7,#b477e6)!important}

#infoModal.character-mode .character-passive{
  margin:5px 0 0!important;
  padding:5px 7px!important;
  border:1px solid #547d31!important;
  border-radius:1px!important;
  background:#0b1a10!important;
  overflow:hidden!important;
}
#infoModal.character-mode .character-passive b{font-size:10.5px!important;color:#cdea8e!important}
#infoModal.character-mode .character-passive p{
  display:block!important;
  margin:2px 0 0!important;
  max-height:25px!important;
  overflow:hidden!important;
  color:#a8baa0!important;
  font-size:9px!important;
  line-height:1.35!important;
}
#infoModal.character-mode .character-passive-identity{display:block!important;margin:0 0 2px!important;color:#79a8cf!important;font-size:7.75px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important}
#infoModal.character-mode .character-passive p.character-passive-identity-copy{display:block!important;margin:1px 0 4px!important;max-height:24px!important;color:#91aec2!important;font-size:8.6px!important;line-height:1.28!important}
#infoModal.character-mode .character-passive-name{display:flex!important;align-items:baseline!important;gap:5px!important;margin-top:1px!important}
#infoModal.character-mode .character-passive-name span{color:#76906d!important;font-size:7.4px!important;font-weight:800!important;letter-spacing:.08em!important}
#infoModal.character-mode .character-passive-name b{font-size:10.5px!important;color:#cdea8e!important}
#infoModal.character-mode .character-passive p.character-passive-copy{margin:2px 0 0!important;max-height:25px!important}
#infoModal.character-mode .character-passive small{display:block!important;margin-top:3px!important;padding-top:3px!important;border-top:1px solid rgba(110,145,84,.35)!important;color:#d7c86f!important;font-size:8.25px!important;line-height:1.25!important;font-weight:700!important}

#infoModal.character-mode .character-side-stats{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:4px!important;
  padding:2px 3px!important;
  font-size:10px!important;
}
#infoModal.character-mode .character-side-stats div{
  min-height:15px!important;
  display:flex!important;justify-content:space-between!important;gap:8px!important;
  border-bottom:1px solid #102a43!important;
}
#infoModal.character-mode .character-side-stats div:last-child{border-bottom:0!important}
#infoModal.character-mode .character-side-stats span{color:#9eb1c9!important}
#infoModal.character-mode .character-side-stats b{color:#e3edf9!important;font-size:10px!important}

#infoModal.character-mode .character-columns{
  flex:1 1 auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  margin:0!important;
}
#infoModal.character-mode .character-box{
  min-height:0!important;
  padding:7px!important;
  border:1px solid #174f7d!important;
  border-radius:2px!important;
  background:linear-gradient(#091727,#07121f)!important;
  box-shadow:inset 0 0 0 1px #082a47!important;
  overflow:hidden!important;
}
#infoModal.character-mode .character-box h3{
  margin:0 0 5px!important;padding:0 0 4px!important;
  border-bottom:1px solid #284b6b!important;
  color:#f0c95f!important;
  font-size:11px!important;font-weight:900!important;letter-spacing:.07em!important;
}
#infoModal.character-mode .character-box h4{
  margin:5px 0 4px!important;
  color:#71adf2!important;
  font-size:9px!important;letter-spacing:.05em!important;
}
#infoModal.character-mode .character-box p{margin:3px 0!important;font-size:9.5px!important;color:#afbdd1!important}

#infoModal.character-mode .character-training-compact{display:grid!important;gap:2px!important}
#infoModal.character-mode .character-training-compact .training-stat-row{
  height:22px!important;
  min-height:22px!important;
  margin:0!important;
  padding:2px 4px!important;
  display:grid!important;
  grid-template-columns:16px minmax(92px,1.15fr) 40px minmax(58px,.8fr) 27px!important;
  gap:4px!important;
  border:0!important;
  border-bottom:1px solid #16314c!important;
  background:transparent!important;
}
#infoModal.character-mode .character-training-compact .training-stat-row:last-child{border-bottom:0!important}
#infoModal.character-mode .training-stat-icon{font-size:12px!important}
#infoModal.character-mode .training-stat-copy b{font-size:9px!important;color:#d9e6f6!important;white-space:nowrap!important}
#infoModal.character-mode .training-stat-copy small{display:none!important}
#infoModal.character-mode .training-stat-row strong,#infoModal.character-mode .training-stat-row em{font-size:9px!important;color:#a9c8ed!important}
#infoModal.character-mode .training-stat-progress{
  height:7px!important;
  border:0!important;
  background:repeating-linear-gradient(90deg,#15243a 0 11px,#091523 11px 13px)!important;
}
#infoModal.character-mode .training-stat-progress i{background:linear-gradient(90deg,#77b94b,#b0da72)!important}
#infoModal.character-mode .training-footer{
  margin-top:4px!important;padding-top:4px!important;gap:6px!important;
  border-top:1px solid #203e5b!important;font-size:8px!important;line-height:1.25!important
}
#infoModal.character-mode .training-footer b{color:#e0bc59!important}.training-footer span{color:#7f94ad!important}

#infoModal.character-mode .char-big-progress{
  height:8px!important;margin:4px 35px 0 0!important;border:1px solid #213b57!important;border-radius:2px!important;background:#08121d!important
}
#infoModal.character-mode .char-big-progress i{background:linear-gradient(90deg,#8a50b8,#b970e1)!important}
#infoModal.character-mode .progress-pct{right:8px!important;top:58px!important;font-size:9px!important;color:#bfcde0!important}
#infoModal.character-mode .xp-bonus-breakdown{margin-top:5px!important;padding-top:3px!important;border-top:1px solid #203b57!important}
#infoModal.character-mode .char-bonus-row,#infoModal.character-mode .char-bonus-total{
  padding:2px 0!important;font-size:8.75px!important;color:#9eb0c7!important
}
#infoModal.character-mode .char-bonus-row b,#infoModal.character-mode .char-bonus-total b{color:#e8bf58!important}

#infoModal.character-mode .combat-details{
  flex:0 0 auto!important;
  min-height:66px!important;
  margin:0!important;padding:6px!important;
}
#infoModal.character-mode .combat-details h3{margin-bottom:4px!important}
#infoModal.character-mode .combat-detail-grid{
  display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:4px!important
}
#infoModal.character-mode .combat-detail-grid>div{
  min-height:39px!important;padding:4px 5px!important;
  border:1px solid #244a6d!important;border-radius:2px!important;
  background:#081522!important;
}
#infoModal.character-mode .combat-detail-grid span{font-size:8px!important;color:#879bb5!important}
#infoModal.character-mode .combat-detail-grid b{margin:1px 0!important;font-size:11px!important;color:#dce8f7!important}
#infoModal.character-mode .combat-detail-grid small{font-size:7.5px!important;color:#657d9a!important}

/* =========================
   TROCAR PERSONAGEM / ROSTER
   ========================= */
.character-select-backdrop{
  background:rgba(2,7,13,.80)!important;
  backdrop-filter:blur(2px)!important;
  padding:12px!important;
}
.character-select-window.roster-window{
  width:min(900px,calc(100vw - 48px))!important;
  height:min(610px,calc(100dvh - 76px))!important;
  grid-template-rows:46px minmax(0,1fr) 48px!important;
  border:1px solid #10a7f4!important;
  border-radius:3px!important;
  background:#06111e!important;
  box-shadow:0 0 0 2px #062f55,0 0 0 3px #b77f19,0 18px 65px #000d,inset 0 0 28px #0078ca16!important;
}
.character-select-head{
  min-height:46px!important;
  padding:6px 11px!important;
  gap:9px!important;
  border-bottom:1px solid #1777b7!important;
  background:linear-gradient(90deg,#081a2e,#0e3155 50%,#081a2e)!important;
}
.character-select-head b{
  color:#f0c856!important;font-size:14px!important;font-weight:900!important;letter-spacing:.07em!important;text-shadow:0 1px #000!important
}
.character-select-head span{margin-top:2px!important;color:#85a5c6!important;font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.character-step{
  border:1px solid #217ab3!important;background:#071929!important;color:#a5d6ff!important;
  padding:4px 7px!important;font-size:8.5px!important;box-shadow:inset 0 0 0 1px #0c3859!important
}
.character-select-body{
  grid-template-columns:192px minmax(0,1fr)!important;
  grid-template-rows:58px minmax(0,1fr)!important;
  min-height:0!important;
  background:#07111d!important;
}
.account-roster-summary{
  grid-column:1/-1!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:5px!important;
  padding:6px 8px!important;
  border-bottom:1px solid #163c5d!important;
  background:#07131f!important;
}
.account-summary-cell{
  min-height:44px!important;
  padding:5px 7px!important;
  gap:1px!important;
  border:1px solid #1d527c!important;
  border-radius:2px!important;
  background:linear-gradient(#0a1a2b,#07131f)!important;
  box-shadow:inset 0 0 0 1px #082d4a!important;
}
.account-summary-cell span{font-size:8px!important;color:#72a3d4!important;letter-spacing:.07em!important}
.account-summary-cell b{font-size:11px!important;color:#e6eef8!important}
.account-summary-cell small{margin-top:1px!important;font-size:7.5px!important;color:#7290ad!important}
.account-summary-cell.active b{color:#f0c854!important}.account-summary-cell.account b{color:#9ccaff!important}

.character-roster{
  grid-column:1!important;grid-row:2!important;
  padding:6px!important;gap:4px!important;
  border-right:1px solid #164a73!important;
  background:#06101b!important;
  scrollbar-width:thin!important;scrollbar-color:#117fc0 #06101b!important;
}
.character-roster-section{padding:3px 4px!important;font-size:8px!important;color:#6e9bc4!important;letter-spacing:.1em!important}
.character-roster-card{
  min-height:52px!important;
  grid-template-columns:39px minmax(0,1fr) auto!important;
  gap:6px!important;
  padding:4px!important;
  border:1px solid #193f61!important;
  border-radius:2px!important;
  background:#081624!important;
  color:#d9e5f4!important;
}
.character-roster-card:hover{background:#0b2034!important;border-color:#1784c5!important}
.character-roster-card.current{
  border-color:#f0aa24!important;
  background:linear-gradient(90deg,#3d2207,#0b1b2b 28%)!important;
  box-shadow:inset 3px 0 #ffbc27!important;
}
.character-roster-card img{width:37px!important;height:42px!important;background:#050c14!important;border:0!important}
.character-roster-card .roster-copy b{font-size:11px!important;line-height:1.05!important;color:#f2f5fa!important}
.character-roster-card .roster-copy span{margin-top:1px!important;font-size:9px!important;color:#9fb2c8!important}
.character-roster-card .roster-copy small{margin-top:1px!important;font-size:7.5px!important;color:#70a5d2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.character-roster-card .roster-state{
  padding:3px 4px!important;font-size:7px!important;border-radius:1px!important;
  border-color:#2e6446!important;background:#0b2117!important;color:#a6e6b8!important
}
.character-roster-card.current .roster-state{border-color:#927124!important;background:#2b2108!important;color:#ffd65d!important}

.character-detail{
  grid-column:2!important;grid-row:2!important;
  min-height:0!important;
  padding:8px 10px!important;
  overflow:auto!important;
  background:#07131f!important;
  scrollbar-width:thin!important;scrollbar-color:#167eb9 #07131f!important;
}
.roster-character-detail{gap:7px!important}
.roster-character-top{
  grid-template-columns:88px minmax(0,1fr) 162px!important;
  gap:9px!important;
  padding-bottom:7px!important;
  border-bottom:1px solid #18466d!important;
}
.roster-character-top .character-hero-portrait{
  width:84px!important;height:84px!important;
  border:1px solid #a57c2b!important;border-radius:2px!important;
  background:radial-gradient(circle,#12355c,#07111d 72%)!important;
}
.roster-character-top .character-hero-portrait img{max-width:76px!important;max-height:78px!important}
.roster-character-meta h1{font-size:20px!important;color:#eef4fc!important;line-height:1!important}
.roster-character-meta .char-player-name{font-size:10.5px!important;color:#f0c653!important}
.roster-character-meta .char-role{font-size:9.5px!important;color:#79b6ec!important}
.roster-character-meta p{margin:5px 0!important;font-size:9px!important;line-height:1.35!important;color:#95a9c0!important}
.roster-level-box{padding:5px 7px!important;border-color:#1c567f!important;background:#081725!important}
.roster-level-box div{padding:2px 0!important;font-size:8.5px!important;border-bottom-color:#14334f!important}
.roster-level-box b{font-size:8.5px!important}.roster-level-box .active-value{color:#f0c85d!important}

.roster-catchup,.roster-progress-note,.roster-skill-preview{
  padding:7px 8px!important;
  border:1px solid #194d75!important;
  border-radius:2px!important;
  background:#081624!important;
  font-size:9px!important;
}
.roster-catchup h3,.roster-skill-preview h3{margin:0 0 4px!important;font-size:9.5px!important;color:#f0c65b!important}
.roster-catchup>div:not(.catchup-none){padding:2px 0!important;font-size:8.5px!important;border-bottom-color:#14314a!important}
.individual-progress-grid{margin-top:4px!important;gap:3px 10px!important;font-size:8.5px!important}
.character-info-grid{gap:6px!important;margin:6px 0!important}
.character-select-window .character-box{min-height:70px!important;padding:6px!important;border-color:#194e77!important;background:#081624!important}
.character-select-window .character-box h3{margin:0 0 4px!important;font-size:9.5px!important;color:#efc75c!important}
.character-select-window .character-box ul{font-size:8.5px!important;line-height:1.4!important;padding-left:13px!important}

.character-confirm{
  min-height:48px!important;
  padding:6px 9px!important;
  gap:7px!important;
  border-top:1px solid #176294!important;
  background:#06101a!important;
}
.character-confirm-copy b{font-size:10px!important}.character-confirm-copy span{font-size:8.5px!important;margin-top:1px!important}
.character-confirm button{
  min-width:116px!important;height:31px!important;
  border-radius:2px!important;font-size:9px!important;font-weight:900!important;letter-spacing:.04em!important
}
.character-confirm button.primary{
  border:1px solid #d8981c!important;
  background:linear-gradient(#b94e07,#652303)!important;
  color:#fff0c8!important;
  box-shadow:inset 0 0 0 1px #f7b424!important;
}
.character-confirm button.secondary{
  border:1px solid #1c669a!important;background:linear-gradient(#0e2b48,#071723)!important;color:#bdd5ed!important
}
.character-confirm .active-character-badge{
  padding:6px 9px!important;font-size:8.5px!important;border-color:#987422!important;background:#2a2008!important;color:#f4cd58!important
}

/* Scrollbars do sistema de personagens. */
.character-select-window ::-webkit-scrollbar,#infoModal.character-mode ::-webkit-scrollbar{width:7px;height:7px}
.character-select-window ::-webkit-scrollbar-track,#infoModal.character-mode ::-webkit-scrollbar-track{background:#06101a}
.character-select-window ::-webkit-scrollbar-thumb,#infoModal.character-mode ::-webkit-scrollbar-thumb{background:#0d73aa;border:1px solid #16a8ed}

/* Notebook / viewport mais baixo: mantém texto legível; comprime estrutura, não fonte a 7px. */
@media (max-width:1440px) and (max-height:850px){
  #infoModal.character-mode .modal.compact{
    width:min(780px,calc(100vw - 56px))!important;
    height:min(520px,calc(100dvh - 104px))!important;
    transform:none!important;
  }
  #infoModal.character-mode .character-summary{grid-template-columns:86px minmax(0,1fr) 180px!important;min-height:116px!important}
  #infoModal.character-mode .character-portrait{width:82px!important;height:90px!important}
  #infoModal.character-mode .character-portrait img{height:77px!important}
  #infoModal.character-mode .char-bar-row{grid-template-columns:100px minmax(70px,1fr) 88px!important}
  #infoModal.character-mode .character-passive p.character-passive-identity-copy,#infoModal.character-mode .character-passive p.character-passive-copy{max-height:13px!important;white-space:nowrap!important;text-overflow:ellipsis!important}
  #infoModal.character-mode .character-training-compact .training-stat-row{height:20px!important;min-height:20px!important}
  #infoModal.character-mode .combat-details{min-height:61px!important}

  .character-select-window.roster-window{
    width:min(840px,calc(100vw - 60px))!important;
    height:min(570px,calc(100dvh - 96px))!important;
  }
  .character-select-body{grid-template-columns:180px minmax(0,1fr)!important}
  .character-roster-card{min-height:49px!important}
}

@media (max-width:920px){
  #infoModal.character-mode .modal.compact{width:calc(100vw - 24px)!important;height:calc(100dvh - 74px)!important}
  #infoModal.character-mode .character-summary{grid-template-columns:82px minmax(0,1fr)!important}
  #infoModal.character-mode .character-side-stats{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  #infoModal.character-mode .character-columns{grid-template-columns:1fr!important;overflow:auto!important}
  #infoModal.character-mode .combat-detail-grid{grid-template-columns:repeat(3,1fr)!important}

  .character-select-window.roster-window{width:calc(100vw - 20px)!important;height:calc(100dvh - 46px)!important}
  .character-select-body{grid-template-columns:165px minmax(0,1fr)!important}
  .account-roster-summary{grid-template-columns:1fr 1fr!important}
  .roster-character-top{grid-template-columns:76px minmax(0,1fr)!important}
  .roster-level-box{grid-column:1/-1!important}
}