/* Arte aprovada para a Arena Ranqueada. */
.ranked-card {
  background-image: linear-gradient(180deg, #0709146b, #070911e8), url('assets/locations/ranked-mage-witch-pixel.png');
  background-position: center;
  background-size: cover;
}

.combat-scene.arena-scene {
  background-image: linear-gradient(#05080b99, #05080bd9), url('assets/locations/ranked-mage-witch-pixel.png');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.alpha-tester-title,
[data-title-id="alpha-tester"] {
  color: #69baff !important;
  text-shadow: 0 0 10px #2788ff88, 0 1px 3px #000;
}

/* Cartões completos, empilhados de baixo para cima atrás do herói. */
html[data-layout="horizontal"] #game-view.combat-scene > .page-pad { max-width: none; }

html[data-layout="horizontal"] .combat-stage {
  --hero-size: clamp(115px, 17dvh, 178px);
  grid-template-columns: minmax(72px, 160px) minmax(max-content, 1fr) minmax(220px, 1.2fr);
  grid-template-rows: [top] auto [clock] auto [field] minmax(200px, 1fr) [adds] auto [notice] auto;
  column-gap: clamp(12px, 2vw, 32px);
  row-gap: 12px;
}

html[data-layout="horizontal"] .combat-stage > .combat-top { grid-area: top / 2 / clock / -1; }
html[data-layout="horizontal"] .combat-stage > .combat-clock { grid-area: clock / 2 / field / -1; }
html[data-layout="horizontal"] .combat-team-label { display: none; }

html[data-layout="horizontal"] .combat-stage > .combat-allies {
  /* Keep the full card proportions. Short windows may scroll, never clip a target. */
  --ally-space: max(400px, calc(100dvh - var(--desktop-header) - 104px));
  --ally-size: clamp(58px, calc((var(--ally-space) + 8px) / var(--units) - 64px), 160px);
  grid-area: top / 1 / -1 / 2;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: end;
  justify-self: start;
  gap: 8px;
  width: var(--ally-size);
  max-width: none;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

html[data-layout="horizontal"] .combat-stage .ally-mini {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}

html[data-layout="horizontal"] .combat-stage .ally-mini .unit-heading {
  height: 28px;
  margin: 0 0 4px;
  text-align: center;
}

html[data-layout="horizontal"] .combat-stage .ally-mini .unit-heading strong {
  font-size: 12px;
  line-height: 15px;
  min-height: 15px;
}

html[data-layout="horizontal"] .combat-stage .ally-mini .unit-heading small {
  font-size: 10px;
  line-height: 13px;
}

html[data-layout="horizontal"] .combat-stage .ally-mini .unit-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

html[data-layout="horizontal"] .combat-stage .ally-mini .unit-hp-track {
  height: 6px;
  margin-top: 4px;
}

html[data-layout="horizontal"] .combat-stage .ally-mini .unit-hp {
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
}

html[data-layout="horizontal"] .combat-stage .ally-mini .combat-statuses {
  top: 34px;
  right: -4px;
  max-height: none;
  flex-wrap: wrap;
}

html[data-layout="horizontal"] .combat-stage .ally-mini .status-icon {
  min-width: 20px;
  height: 20px;
  font-size: 14px;
}

html[data-layout="horizontal"] .combat-stage .ally-mini > small {
  display: block;
  font-size: 10px;
  line-height: 14px;
}

/* A single grid groups controls and portrait; empty space cannot separate them. */
html[data-layout="horizontal"] .combat-stage > .combat-player-line {
  display: grid;
  grid-area: field / 2 / notice / 3;
  grid-template-columns: 112px var(--hero-size) 44px;
  gap: 12px;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-self: center;
  min-height: 200px;
  max-height: none;
  margin: 0;
  padding: 0;
}

html[data-layout="horizontal"] .combat-player-line > .combat-command-orbit { grid-area: 1 / 1; }
html[data-layout="horizontal"] .combat-player-line > .own-character { grid-area: 1 / 2; }
html[data-layout="horizontal"] .combat-player-line > .combat-chat-button { grid-area: 1 / 3; margin: 0; }

/* Keep combat controls visually consistent and remove their rounded corners. */
.combat-command-orbit .diamond-command,
.combat-command-orbit .combat-turn-order > button,
.spectator-commands .combat-turn-order > button,
.spectator-commands [data-combat-log],
.combat-chat-button {
  border-radius: 0 !important;
  border-color: #747c93 !important;
}

html[data-layout="horizontal"] .combat-stage > .combat-enemies {
  grid-area: field / 3 / notice / 4;
}
html[data-layout="horizontal"] .combat-stage > .combat-bosses {
  grid-area: field / 3 / adds / 4;
}
html[data-layout="horizontal"] .combat-stage:has(.combat-bosses) > .combat-enemies {
  grid-row: adds / notice;
}
html[data-layout="horizontal"] .combat-stage:has(.combat-enemies:empty) > .combat-bosses {
  grid-row: field / notice;
}
html[data-layout="horizontal"] .combat-stage > .combat-announcement {
  grid-area: notice / 2 / auto / -1;
}

html[data-layout="horizontal"] .combat-stage:has(.world-combat-status) {
  grid-template-rows: [top] auto [clock] auto [world] auto [field] minmax(200px, 1fr) [adds] auto [notice] auto;
}
html[data-layout="horizontal"] .combat-stage:has(.world-combat-status) > .combat-clock {
  grid-row: clock / world;
}
html[data-layout="horizontal"] .combat-stage > .world-combat-status {
  grid-area: world / 2 / field / -1;
}

html[data-layout="horizontal"] .combat-stage:not(:has(.combat-allies)) {
  grid-template-columns: minmax(max-content, 1fr) minmax(220px, 1fr);
}
html[data-layout="horizontal"] .combat-stage:not(:has(.combat-allies)) > :is(.combat-top, .combat-clock, .world-combat-status, .combat-announcement) {
  grid-column: 1 / -1;
}

@media (max-height: 850px) {
  html[data-layout="horizontal"] .combat-stage > .combat-allies:is(.count-4, .count-5) { gap: 6px; }
  html[data-layout="horizontal"] .combat-stage .combat-allies:is(.count-4, .count-5) .unit-heading { height: 24px; margin-bottom: 3px; }
  html[data-layout="horizontal"] .combat-stage .combat-allies:is(.count-4, .count-5) .unit-heading strong { font-size: 11px; line-height: 13px; min-height: 13px; }
  html[data-layout="horizontal"] .combat-stage .combat-allies:is(.count-4, .count-5) .unit-heading small { font-size: 9px; line-height: 11px; }
  html[data-layout="horizontal"] .combat-stage .combat-allies:is(.count-4, .count-5) .unit-hp-track { height: 5px; margin-top: 3px; }
  html[data-layout="horizontal"] .combat-stage .combat-allies:is(.count-4, .count-5) .unit-hp { line-height: 12px; font-size: 9px; }
  html[data-layout="horizontal"] .combat-stage .combat-allies:is(.count-4, .count-5) .combat-statuses { top: 29px; }
}
html[data-layout="horizontal"] .combat-stage:not(:has(.combat-allies)) > .combat-player-line {
  grid-column: 1;
}
html[data-layout="horizontal"] .combat-stage:not(:has(.combat-allies)) > :is(.combat-enemies, .combat-bosses) {
  grid-column: 2;
}

@media (max-width: 1279px) {
  html[data-layout="horizontal"] .combat-stage {
    grid-template-columns: minmax(72px, 128px) minmax(max-content, 1fr) minmax(190px, 1fr);
    column-gap: 12px;
  }
  html[data-layout="horizontal"] .combat-stage > .combat-allies { max-width: 128px; }
  html[data-layout="horizontal"] .combat-stage > .combat-player-line {
    grid-template-columns: 100px var(--hero-size) 40px;
    gap: 8px;
  }
  html[data-layout="horizontal"] .combat-stage:not(:has(.combat-allies)) {
    grid-template-columns: minmax(max-content, 1fr) minmax(190px, 1fr);
  }
}

@media (min-width: 800px) {
  .battle-result.pvp-result.victory {
    background-size: cover, auto 100dvh;
    background-position: center, center;
  }
  html[data-layout="horizontal"] .mercenary-button {
    background-position: center 7%;
  }
}