/* Semantic data owns these rows. No text guessing, API, observer or frame loop. */
.visual-character-meta-v20,.visual-stat-grid-v20 { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px 12px; max-width:100%; vertical-align:middle; }
.visual-character-traits-v21,.visual-character-identity-v21,.visual-character-combat-v21 { display:inline-flex; align-items:center; flex-wrap:wrap; min-width:0; gap:6px; }
.visual-character-traits-v21 { gap:8px 12px; max-width:100%; }
.visual-character-identity-v21,.visual-character-combat-v21 { display:flex; align-items:stretch; flex-wrap:wrap; width:100%; max-width:100%; gap:6px 10px; }
/* Each complete emblem/copy pair moves to the next row together. A column uses
   its actual available width, including narrow caption cells on wide screens. */
.visual-character-identity-v21>.visual-category-chip-v21,.visual-character-combat-v21>.visual-category-chip-v21 { flex:1 1 140px; }
.visual-info-chip-v20 { display:inline-flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:6px; min-height:36px; min-width:0; max-width:100%; flex:0 1 auto; padding:2px 0; border-radius:0; background:none; color:#f5e9cc; box-shadow:none; font-style:normal; line-height:1.2; }
.visual-info-chip-v20 .visual-info-icon-v20,.visual-breakthrough-v20>.visual-info-icon-v20,.visual-info-legend-v20 .visual-info-icon-v20 { display:block; flex:0 0 auto; width:32px!important; height:32px!important; max-width:none; object-fit:contain; }
.visual-info-value-v20 { font:750 16px/1.2 var(--oa-font-body,system-ui); color:#f6e4ba; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.visual-info-copy-v23 { display:inline-flex; flex:1 1 auto; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; min-width:0; max-width:100%; text-align:start; }
.visual-info-copy-v23 .visual-info-value-v20 { white-space:nowrap; }
.visual-info-caption-v21 { font:600 13px/1.25 var(--oa-font-body,system-ui); color:#c9c9b7; overflow-wrap:break-word; }
.visual-category-chip-v21 { padding:0; background:none; box-shadow:none; border-radius:0; gap:5px; }
.visual-category-chip-v21 .visual-info-copy-v23 { min-width:0; }
.visual-category-chip-v21 .visual-info-caption-v21 { overflow-wrap:normal; word-break:normal; }
.visual-category-chip-v21[data-category='role'] .visual-info-caption-v21 { color:#e9dfc7; }
/* Painted emblems carry their own brass/iron relief and elemental colour.
   No extra capsule, colour disk, glow or image-wide filter duplicates the art. */
.visual-category-chip-v21[data-category='element'] { padding:0; background:none; }
.visual-breakthrough-v20 { display:inline-flex; flex-direction:row; flex-wrap:nowrap; display:inline-grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto; align-items:center; gap:7px; max-width:100%; padding:2px 0; color:#f7eacb; font-style:normal; line-height:1.2; }
.visual-breakthrough-heading-v21 { grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:2px; }
.visual-breakthrough-heading-v21>.visual-info-caption-v21,.visual-breakthrough-heading-v21>.visual-info-value-v20 { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.visual-tier-unit-v23 { font-size:12px; font-weight:600; margin-inline-start:2px; }
.visual-tier-next-v21 { color:#e5c98f; font-size:14px; }
.visual-breakthrough-pips-v20 { grid-column:1; grid-row:1; order:-1; display:flex; flex-wrap:wrap; flex:0 0 46px; width:46px; display:grid; grid-template-columns:repeat(3,14px); align-items:center; gap:2px; padding:0; }
.visual-breakthrough-pips-v20 i { display:block; width:14px; height:14px; box-sizing:border-box; font-style:normal; }
.visual-breakthrough-pips-v20 i .visual-info-icon-v20 { display:block; width:14px!important; height:14px!important; max-width:none; object-fit:contain; }
.visual-breakthrough-pips-v20 i.preview { outline:1px solid #bba276; outline-offset:1px; border-radius:2px; }
.visual-info-fallback-v20 { font-size:13px; }
.visual-character-meta-v20.compact { gap:6px 10px; }
.visual-character-meta-v20.compact .visual-character-traits-v21 { gap:5px 8px; }
.visual-character-meta-v20.compact :is(.visual-character-identity-v21,.visual-character-combat-v21) { gap:4px; }
.visual-character-meta-v20.compact .visual-category-chip-v21 { min-height:32px; }
.visual-character-meta-v20.compact .visual-info-icon-v20 { width:28px!important; height:28px!important; }
.visual-character-meta-v20.compact .visual-breakthrough-pips-v20 i .visual-info-icon-v20 { width:14px!important; height:14px!important; }
.visual-info-legend-v20 { margin:10px 0 14px; padding:7px 0; border-radius:0; background:none; color:#ded6c1; font-size:13px; }
.visual-info-legend-v20 summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:9px; width:max-content; max-width:100%; font-weight:650; color:#ebdfbc; }
.visual-legend-chevron-v21 { display:block; order:-1; margin-left:0; transform:rotate(90deg); }
.visual-legend-chevron-v21 .visual-info-icon-v20 { width:18px!important; height:18px!important; }
.visual-info-legend-v20[open] .visual-legend-chevron-v21 { transform:rotate(-90deg); }
.visual-info-legend-v20 summary:focus-visible { outline:2px solid #fff0b8; outline-offset:4px; }
.visual-info-legend-v20 p { margin:7px 0; line-height:1.5; }
.visual-legend-groups-v21 { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px 20px; margin-top:14px; }
.visual-info-legend-v20 h4 { margin:0 0 9px; font-size:13px; font-weight:650; color:#b8b7a2; }
.visual-info-legend-v20 ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:7px 10px; }
.visual-info-legend-v20 li { display:flex; align-items:center; gap:8px; min-width:0; }
.visual-legend-growth-v21 { margin-top:18px; padding-top:12px; border-top:1px solid rgba(182,159,110,.16); }
.visual-legend-growth-v21 .visual-breakthrough-v20 { margin-bottom:2px; }
.visual-stat-grid-v20 { gap:6px 18px; margin:8px 0; }
.visual-stat-grid-v20 .visual-info-chip-v20 { justify-content:flex-start; padding:2px 0; }
/* Numeric readings use the space of the existing card, not a second frame per
   value. Growth cost precedes the two resulting bonuses in the same two rows. */
#detail-dialog .growth-effects-v20>.visual-stat-grid-v20,
#detail-dialog .growth-confirm .visual-stat-grid-v20 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); gap:5px 12px; width:100%; }
#detail-dialog .growth-confirm .visual-stat-grid-v20>[data-semantic='fragment'] { grid-column:1/-1; }
#detail-dialog .growth-effects-v20 .visual-info-chip-v20,
#detail-dialog .growth-confirm .visual-stat-grid-v20>.visual-info-chip-v20 { min-width:0; }
body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .character-caption-text .character-meta { display:block; -webkit-line-clamp:unset; overflow:visible; line-height:1; margin-top:7px; }
#game-viewport .character-caption .visual-character-meta-v20 { gap:7px; justify-content:inherit; }
/* Important labels stay visible beside the painted art. A predictable identity
   row and combat row fit the existing nameplate without covering the face. */
#game-viewport .character-caption .visual-character-traits-v21 { display:grid; grid-template-columns:minmax(0,1fr); width:100%; gap:2px; }
#game-viewport .character-caption .visual-character-meta-v20 { width:100%; }
#game-viewport .character-caption :is(.visual-character-identity-v21,.visual-character-combat-v21) { display:flex; align-items:stretch; flex-wrap:wrap; gap:4px; }
#game-viewport .character-caption .visual-category-chip-v21 { flex:1 1 140px; min-width:0; gap:4px; }
#game-viewport .character-caption .visual-info-caption-v21 { font-size:12px; }
/* Long translated names use the copy area to the right of their emblem.
   Never move the caption below its icon to preserve a forced two-column row. */
#game-viewport .character-caption .visual-character-combat-v21 .visual-category-chip-v21 { flex-direction:row; flex-wrap:nowrap; align-items:center; gap:4px; }
#game-viewport .character-caption .visual-character-combat-v21 .visual-info-caption-v21 { overflow-wrap:normal; word-break:normal; }
/* Keep the existing detail control aligned with the name rather than an emblem
   row; the whole original native button remains the touch/keyboard target. */
body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .character-caption-text h2 { padding-inline-end:22px; }
body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .character-caption .hero-detail .icon { top:7px; right:5px; }
#detail-dialog .character-choice>span { min-width:0; }
#detail-dialog .character-choice .visual-character-meta-v20 { margin-top:6px; }
#detail-dialog .mini-character .visual-character-meta-v20 { margin:7px 0; }
#detail-dialog .recruit-heading-v20 { display:flex; align-items:center; gap:12px; }
#detail-dialog .recruit-heading-v20>img,#detail-dialog .recruit-heading-v20>picture { flex:0 0 62px; width:62px; height:72px; object-fit:contain; }
#detail-dialog .recruit-heading-v20 picture img { width:100%; height:100%; object-fit:contain; }
#detail-dialog .party-meta .visual-character-meta-v20 { display:flex; margin-top:5px; }
#detail-dialog .friend-representative-v20 { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:9px 0; }
#detail-dialog .friend-representative-v20 .visual-character-meta-v20 { margin:0; }
@media (max-width:480px), (max-height:500px) {
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .character-caption { width:48%; max-width:48%; }
  #game-viewport .character-caption .visual-category-chip-v21 { min-height:32px; }
  #game-viewport .character-caption .visual-info-icon-v20 { width:28px!important; height:28px!important; }
  #game-viewport .character-caption .visual-breakthrough-pips-v20 i .visual-info-icon-v20 { width:14px!important; height:14px!important; }
  #game-viewport .character-caption .visual-info-value-v20 { font-size:14px; }
  #detail-dialog .character-choice .visual-character-meta-v20 { gap:5px; }
}
@media (prefers-reduced-motion:reduce) { .visual-info-chip-v20,.visual-breakthrough-v20 { transition:none; } }
#detail-dialog .growth-confirm>span { min-width:0; }
#detail-dialog .growth-confirm>.dialog-button { min-width:64px; flex:0 0 auto; white-space:nowrap; }
/* A low landscape stage already has a126px caption limit. Its wider columns
   fit complete names beside28px emblems; trim gaps, not labels or artwork. */
@media (max-height:500px) {
  body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .character-caption-text .character-meta { margin-top:3px; }
  #game-viewport .character-caption .visual-character-meta-v20 { gap:3px; }
  #game-viewport .character-caption .visual-character-traits-v21 { row-gap:0; }
  #game-viewport .character-caption .visual-category-chip-v21 { min-height:28px; }
  #game-viewport .character-caption .visual-character-combat-v21 .visual-category-chip-v21 { flex-direction:row; align-items:center; gap:4px; }
  #game-viewport .character-caption .visual-breakthrough-v20 { padding:0; row-gap:1px; }
}