/* Phone landscape only. Desktop and portrait keep characters-art-v1.css.
   Targets 844x390, 812x375, 932x430 and 740x360, including safe-area and browser bars.
   Illustrated split stays: hero and abilities on the left, four-across roster on the right. */

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
  /* Safe-area comes out of the dialog box. Outset stays inside the leftover margin
     so the timber frame is not clipped by a notch or home indicator. */
  #character-dialog.characters-art-page {
    width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px);
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    border-width: 5px;
    border-image-width: 22px;
    border-image-outset: 3px;
  }

  /* Compact wooden sign. Right padding clears a 44px close from the coin balance. */
  #character-dialog.characters-art-page .progression-character-heading {
    flex: none;
    min-height: 48px;
    padding: 2px 56px 2px 10px;
    align-items: center;
  }
  #character-dialog.characters-art-page .progression-character-heading > div {
    width: min(300px, calc(100% - 168px));
    height: 56px;
    top: -6px;
    left: 34%;
    padding: 14px 36px 8px;
  }
  #character-dialog.characters-art-page .progression-character-heading h2 {
    font-size: 24px !important;
  }
  #character-dialog.characters-art-page > .dialog-close {
    top: 2px;
    right: 4px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 28px;
  }
  /* Shares the 48px header with the sign and close: 40px tall, at least 44px wide. */
  #character-dialog.characters-art-page .progression-balance {
    min-height: 40px;
    min-width: 44px;
    padding: 2px 8px;
    gap: 4px;
    margin-left: auto;
  }
  #character-dialog.characters-art-page .progression-balance b {
    font-size: 15px;
  }
  #character-dialog.characters-art-page .progression-balance > span:last-child {
    font-size: 11px;
  }
  #character-dialog.characters-art-page .progression-balance .coin-icon {
    width: 18px;
    height: 18px;
  }

  #character-dialog.characters-art-page .progression-character-layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    padding: 4px;
    overflow: hidden;
  }

  /* "More…" cue moves into a 16px strip under each pane. The old gradient sat on top of
     ability copy and the second hero row. The strip stays when the cue is hidden so
     scroll-height does not flicker. */
  #character-dialog .characters-showcase,
  #character-dialog.characters-art-page .progression-character-roster {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: stretch;
    overflow: hidden;
  }
  #character-dialog .characters-showcase::after,
  #character-dialog.characters-art-page .progression-character-roster::after {
    content: '';
    flex: none;
    height: 16px;
  }
  #character-dialog .characters-showcase-scroll,
  #character-dialog .characters-roster-scroll {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding-bottom: 2px;
  }
  #character-dialog .characters-scroll-cue {
    left: 0;
    right: 0;
    bottom: 0;
    height: 16px;
    padding: 1px 6px 0;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff6df;
    box-shadow: 0 -1px 0 #e6d3a4;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
  }

  /* Stage keeps a real portrait. --hero-floor matches the nameplate so the face
     scales above the plaque. Inline portrait framing from script still wins after load. */
  #character-dialog .characters-stage {
    height: clamp(92px, 26dvh, 118px);
    --hero-floor: 32px;
    --hero-top: 4px;
  }
  #character-dialog .characters-platform {
    height: 34px;
    bottom: 12px;
  }
  #character-dialog .characters-portrait {
    width: 78%;
    height: calc(100% - var(--hero-floor) - var(--hero-top));
    max-height: calc(100% - var(--hero-floor) - var(--hero-top));
    left: 11%;
    bottom: var(--hero-floor);
    object-fit: contain;
  }
  #character-dialog .characters-nameplate {
    min-height: 32px;
    bottom: 2px;
    padding: 1px 10px 2px;
  }
  #character-dialog .characters-selected-name {
    font-size: 15px;
    line-height: 1;
  }
  #character-dialog .characters-selected-look {
    font-size: 11px;
    line-height: 1.1;
  }

  #character-dialog.characters-art-page #character-detail {
    margin-top: 6px;
    gap: 6px;
    align-items: start;
  }
  #character-dialog.characters-art-page #character-detail > div {
    padding: 6px 8px 7px;
  }
  #character-dialog.characters-art-page #character-detail > div:before {
    width: 28px;
    height: 30px;
    margin: 0 0 0 4px;
  }
  #character-dialog.characters-art-page #character-detail small {
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.2px;
  }
  #character-dialog.characters-art-page #character-detail strong {
    font-size: 15px;
    line-height: 1.1;
    margin: 1px 0 3px;
  }
  #character-dialog.characters-art-page #character-detail p {
    font-size: 12px;
    line-height: 1.35;
  }

  /* Mastery stays under the abilities in the same scroll well. */
  #character-dialog.characters-art-page #hero-mastery {
    padding: 6px 2px 0;
  }
  #character-dialog.characters-art-page #hero-mastery > .progression-kicker,
  #character-dialog.characters-art-page .mastery-goal > .progression-kicker,
  #character-dialog.characters-art-page .mastery-step strong,
  #character-dialog.characters-art-page .mastery-step small,
  #character-dialog.characters-art-page .progression-values,
  #character-dialog.characters-art-page .progression-values > span {
    font-size: 11px;
  }
  #character-dialog.characters-art-page .mastery-step small {
    white-space: normal;
  }
  #character-dialog.characters-art-page .mastery-step img {
    width: 32px;
    height: 32px;
  }
  #character-dialog.characters-art-page .mastery-journey {
    margin: 4px 0 6px;
  }
  #character-dialog.characters-art-page .mastery-journey:before {
    top: 16px;
  }
  #character-dialog.characters-art-page .mastery-goal {
    padding: 6px 8px;
  }
  #character-dialog.characters-art-page .mastery-goal h4 {
    font-size: 13px;
    line-height: 1.2;
    margin: 2px 0 4px;
  }
  #character-dialog.characters-art-page .mastery-reward {
    font-size: 11px !important;
    margin: 4px 0 0 !important;
  }
  #character-dialog.characters-art-page .mastery-reward > span:last-child,
  #character-dialog.characters-art-page .mastery-rule {
    font-size: 11px;
    line-height: 1.35;
  }

  #character-dialog .characters-roster-heading {
    padding: 0 4px 3px;
    font-size: 11px;
    letter-spacing: 0.4px;
    line-height: 1.15;
  }
  #character-dialog .characters-roster-count {
    font-size: 11px;
  }
  /* Ratio 1/0.74 fits two name-complete rows in the roster well at 740x360.
     Taller phones can show the top of row three above the cue. Face crop stays
     on the existing 50% 25% anchor. Art stays in flow so the card cannot collapse. */
  #character-dialog.characters-art-page #home-character-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    align-content: start;
  }
  #character-dialog.characters-art-page #home-character-grid .home-character-card {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 0.74;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 2px;
  }
  #character-dialog.characters-art-page #home-character-grid .home-character-card[aria-pressed='true'] {
    padding: 1px;
  }
  #character-dialog.characters-art-page #home-character-grid .character-card-art {
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
  }
  #character-dialog.characters-art-page #home-character-grid .character-card-image {
    width: 100%;
    height: 100%;
  }
  #character-dialog.characters-art-page #home-character-grid [data-art='portrait'] .character-card-image {
    padding-bottom: 18px;
  }
  #character-dialog.characters-art-page #home-character-grid .character-card-copy {
    min-height: 18px;
    padding: 0 3px;
  }
  #character-dialog.characters-art-page #home-character-grid .character-card-name {
    font-size: 13px;
    line-height: 16px;
  }
  #character-dialog.characters-art-page #home-character-grid .home-character-card[aria-pressed='true']:after {
    width: 20px;
    height: 20px;
    line-height: 18px;
    font-size: 14px;
    top: 4px;
    right: 4px;
  }
  #character-dialog.characters-art-page #home-character-grid .hero-lock-badge {
    top: 3px;
    right: 3px;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px 2px 2px;
  }
  #character-dialog.characters-art-page #home-character-grid .hero-lock-badge .shop-icon {
    width: 12px;
    height: 12px;
  }
  #character-dialog.characters-art-page #home-character-grid .hero-mastery-stamp {
    left: 4px;
    bottom: 20px;
    width: 18px;
    height: 18px;
  }
  #character-dialog.characters-art-page #home-character-grid .hero-mastery-stamp img {
    width: 18px;
    height: 18px;
  }

  #character-dialog.characters-art-page .progression-character-footer {
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 52px;
    padding: 4px 10px;
    gap: 8px;
  }
  #character-dialog.characters-art-page .progression-character-footer > span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #character-dialog.characters-art-page #confirm-character {
    flex: none;
    width: min(42%, 280px);
    min-width: 44px;
    min-height: 44px;
    padding: 4px 12px;
    font-size: 18px;
  }
}