/* Keep the portrait and the active page of the book inside one desktop view. */
.realm-dialog:not([open]) { display: none !important; }

@media (min-width: 980px) {
  body:has(#characterScreen.active) .shell {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 28px);
    min-height: 0;
    overflow: hidden;
  }

  body:has(#characterScreen.active) .topbar {
    flex: none;
    min-height: 76px;
    padding-block: 8px;
  }

  #characterScreen.active {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 7px clamp(14px, 1.5vw, 28px) 10px;
  }

  #characterScreen .character-pagebar {
    flex: none;
    min-height: 37px;
    margin-bottom: 5px;
  }

  #characterScreen .character-back { min-height: 37px; }

  #characterScreen .character-frame {
    flex: 1;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  }

  #characterScreen .character-visual {
    height: 100%;
    min-height: 0;
  }

  #characterScreen .character-sheet {
    height: calc(100% - 18px);
    min-height: 0;
    margin: 9px 9px 9px 0;
    padding: 11px clamp(13px, 1.25vw, 24px) 9px;
    overflow: hidden;
  }

  #characterScreen .character-sheet-heading {
    flex: none;
    align-items: center;
    min-height: 76px;
    padding: 0 0 4px;
  }

  #characterScreen #characterPageTitle {
    width: 170px;
    height: 54px;
    margin-top: 1px;
  }

  #characterScreen .character-heading-caption { margin: 0; font-size: 11px; }
  #characterScreen .character-owner { transform: scale(.88); transform-origin: right center; }

  #characterScreen .character-tabs {
    flex: none;
    gap: 3px;
    margin-bottom: 5px;
    padding: 3px;
  }

  #characterScreen .character-tabs button {
    min-height: 34px;
    padding: 3px 2px;
    font-size: 12px;
  }

  #characterScreen .character-tabpanel {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b99d6b66 transparent;
  }

  #characterScreen .character-tabpanel[hidden] { display: none; }

  #characterScreen .character-section-title { margin: 6px 0 6px; }
  #characterScreen .character-section-title h3 { font-size: 17px; }
  #characterScreen .character-element-row { min-height: 27px; }
  #characterScreen .character-element-hint { min-height: 0; margin: 4px 0 5px; font-size: 11px; }
  #characterScreen .character-stat-group { margin-top: 5px; padding-top: 5px; }
  #characterScreen .character-stat-group .character-section-title { margin: 5px 0 7px; }
  #characterScreen .character-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  #characterScreen .character-stats > div { min-height: 76px; padding: 6px 8px; }
  #characterScreen .character-stats dd { font-size: clamp(18px, 1.4vw, 25px); margin: 2px 0 0; }
  #characterScreen .character-stat-group .growth-entry { min-height: 30px; margin-top: 7px; padding: 4px 10px; }

  #characterScreen .character-skill-group { border-top: 0; padding-top: 0; }
  #characterScreen .character-skill-premise { margin: 4px 0 8px; }
  #characterScreen .character-skill-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #characterScreen .character-skill { min-height: 116px; padding: 5px 5px 7px; }
  #characterScreen .character-skill-head { min-height: 17px; }
  #characterScreen .character-skill-icon { width: 58px; height: 58px; margin-bottom: 0; }
  #characterScreen .character-skill b { font-size: 12px; }
  #characterScreen .character-skill-detail { min-height: 66px; margin-top: 8px; padding: 8px 12px; }
  #characterScreen .character-skill-detail-head strong { font-size: 17px; }

  #characterScreen .character-beast-entry { min-height: 0; margin: 5px 0; }
  #characterScreen .character-beast-showcase { min-height: 220px; }
  #characterScreen .character-beast-art { height: 220px; }
  #characterScreen .character-beast-copy { padding: 12px 14px; }
  #characterScreen .character-beast-copy h3 { margin: 4px 0; font-size: 24px; }
  #characterScreen .character-beast-copy p { margin: 4px 0; }
  #characterScreen .beast-progress { margin-top: 7px; }

  #characterScreen #characterFate:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 4px 8px;
  }
  #characterScreen #characterFate > .character-section-title,
  #characterScreen #characterFate > .character-pillars,
  #characterScreen #characterFate > .character-mapping-note,
  #characterScreen #characterFate > .character-rule-note,
  #characterScreen #characterFate > .character-growth-path,
  #characterScreen #characterFate > .character-tab-note { grid-column: 1 / -1; }
  #characterScreen #characterFate .character-pillar-title { margin: 0 0 4px; }
  #characterScreen #characterFate .character-pillars { margin-bottom: 4px; padding: 12px 12px 8px; }
  #characterScreen #characterFate .pillar-list .pillar-card { min-height: 86px; padding: 5px; }
  #characterScreen #characterFate .pillar-pair { margin-top: 4px; }
  #characterScreen #characterFate .pillar-list .pillar-pair b { font-size: 29px; }
  #characterScreen #characterFate .character-profile-note { margin-top: 7px; padding-top: 6px; }
  #characterScreen .character-mapping-note { margin: 0; padding: 6px 9px; font-size: 11px; }
  #characterScreen #characterFate .character-fate-card {
    min-height: 112px;
    height: auto;
    margin: 0;
    padding: 10px 12px 12px;
  }
  #characterScreen #characterFate .character-fate-card > div {
    flex: 1;
    min-width: 0;
  }
  #characterScreen #characterFate .character-fate-card.origin { padding-right: 73px; }
  #characterScreen #characterFate .character-fate-card.origin::after { right: 10px; width: 48px; height: 48px; font-size: 11px; }
  #characterScreen #characterFate .character-fate-card h3 { margin: 1px 0 3px; font-size: 19px; }
  #characterScreen #characterFate .character-fate-card p {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  #characterScreen #characterFate .character-rule-note { margin: 4px 0; padding: 6px 9px; }
  #characterScreen #characterFate .character-growth-path { padding-top: 1px; }
  #characterScreen #characterFate .character-growth-path span { padding: 5px 3px; }
  #characterScreen #characterFate .character-tab-note { margin: 2px 0 0; }

  #characterScreen .character-artifact-lore { margin: 5px 0 9px; padding: 10px 15px; }
  #characterScreen .character-artifact-sigil { width: 55px; height: 55px; margin-bottom: 5px; }
  #characterScreen .character-artifact-lore h3 { margin-bottom: 4px; font-size: 21px; }
  #characterScreen .character-artifact-lore p { margin-bottom: 4px; line-height: 1.5; }
  #characterScreen #characterArtifact .character-rule-note { margin: 9px 0; }

  #characterScreen .character-sheet-footer {
    flex: none;
    min-height: 39px;
    margin-top: 5px;
    padding-top: 5px;
  }
  #characterScreen .character-primary { min-height: 34px; padding: 5px 10px; font-size: 12px; }
}

@media (min-width: 980px) and (max-height: 800px) {
  #characterScreen .character-sheet-heading { min-height: 63px; }
  #characterScreen #characterPageTitle { width: 146px; height: 47px; }
  #characterScreen .character-heading-caption { display: none; }
  #characterScreen .character-owner { transform: scale(.79); }
  #characterScreen .character-tabs button { min-height: 30px; }
  #characterScreen .character-element-row { min-height: 24px; }
  #characterScreen .character-stats > div { min-height: 62px; }
  #characterScreen .character-stats small { display: none; }
  #characterScreen .character-stats dd { font-size: 19px; }
  #characterScreen .character-visual-footer { top: 19%; bottom: 7%; }
  #characterScreen .character-visual-footer h2 { font-size: 26px; }
  #characterScreen .character-story p,
  #characterScreen .character-visual-footer .character-live-intro { font-size: 12px; line-height: 1.5; }
}

@media (min-width: 1100px) and (max-width: 1360px) {
  body:has(#characterScreen.active) .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
  }
  body:has(#characterScreen.active) .topbar .home-fortune-line { grid-column: 2; grid-row: 1; }
  body:has(#characterScreen.active) .topbar .resources { grid-column: 3; grid-row: 1; width: max-content; }
  body:has(#characterScreen.active) .topbar .header-actions { grid-column: 4; grid-row: 1; }
}