.scroll-reader{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.scroll-window{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;touch-action:pan-y;scrollbar-gutter:stable}
.scroll-flow{height:auto!important;min-height:0;max-height:none!important;overflow:visible!important;transform:none!important;column-count:auto!important;column-width:auto!important}
.modal.scroll-reader{display:flex;flex-direction:column;padding:0;max-height:calc(var(--dialog-visible-height,100dvh) - 24px);min-width:0;overflow:hidden}
.modal.scroll-reader>.dialog-heading{display:grid;flex:none;position:relative;grid-template-columns:minmax(0,1fr) 44px;gap:0 8px;align-items:center;padding:10px 12px;border-bottom:1px solid #566758;background:#18251f}
.modal.scroll-reader>.dialog-heading :is(h2,.eyebrow){grid-column:1;margin:0;padding:0}
.modal.scroll-reader>.dialog-heading .modal-close{position:static;float:none;grid-column:2;grid-row:1 / span 2;justify-self:end;width:44px;height:44px;margin:0}
.modal.scroll-reader>.scroll-window{width:100%;flex:1 1 auto;min-height:0}
.dialog-reading.scroll-flow{display:block;padding:12px 16px 18px;overflow-wrap:break-word}
.right-sidebar[data-view="match"] .rail-match.scroll-reader,.right-sidebar[data-view="profile"] .rail-profile.scroll-reader,.right-sidebar[data-view="stats"] .rail-stats.scroll-reader{flex:1 1 0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.right-sidebar .scroll-window{max-height:100%}
.dialog-heading{flex-shrink:0}
.combat-overview{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:44px;margin-bottom:4px;padding:4px 6px;background:#14201c;border:1px solid #50604c}
.overview-traits,.overview-inventory{display:flex;align-items:center;gap:5px;min-width:0;overflow:auto;scrollbar-width:thin;touch-action:pan-x}
.combat-overview button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:36px;padding:3px 7px;background:#20291f;border:1px solid #65765e;color:#e2e7d5;font:600 12px/1.2 var(--body);white-space:nowrap}
.combat-overview .overview-pact.active{border-color:#99c3a6;background:#293c31}
.overview-label{color:#cdb985;font:600 11px/1.2 var(--body);flex:none;max-width:65px}
.overview-empty{font-size:11px;color:#bfc8b8;white-space:nowrap}
.combat-overview .overview-inventory button:not(.overview-label){width:36px;padding:2px}
.live-vitals{padding:7px;background:#203228;color:#d9eddd;font-size:12px;font-variant-numeric:tabular-nums}
.unit-orders .unit-order-name{flex:1 1 auto;justify-content:flex-start;min-width:0;overflow:hidden;text-overflow:ellipsis}
.unit-orders .unit-order-name>span{color:#e6c77b;flex:none}
.unit-orders .unit-order-relic{width:36px;height:36px;padding:3px}
.unit-orders .unit-order-gear{order:-1;flex:none;min-height:36px}
.unit-orders .unit-order-relic img{width:26px;height:26px;max-width:26px}
.live-unit-sheet .unit-items{display:none}
.opponent-gear-list .unit-order-relic{width:auto;height:auto;min-height:36px}
.opponent-gear-label strong{min-width:0;overflow-wrap:normal}
.opponent-gear-label small{flex-basis:100%}
.opponent-gear-list .relic-name{overflow-wrap:normal;word-break:normal}
.dialog-heading>.unit-orders{grid-column:1/-1;width:100%;min-width:0}
portrait-loop{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
portrait-loop canvas{position:absolute;display:block;pointer-events:none}
portrait-loop:not([data-animated="true"]) canvas{visibility:hidden}
html.reduce-motion portrait-loop,.unit-piece.dead portrait-loop{display:none}
@media(prefers-reduced-motion:reduce){portrait-loop{display:none}}
.quality-row{display:flex;flex-wrap:wrap;gap:6px}
.quality-row button{min-height:44px;padding:6px 12px}
.quality-row [aria-pressed="true"]{border-color:#c7bd82;background:#344034}
html[data-quality="low"] .modal-backdrop{backdrop-filter:none}
html[data-quality="low"] .unit-piece{box-shadow:none}
/* Use the desktop board's 1.42 geometry on both axes, including narrow screens. */
.arena-column .field-slot{display:grid;place-items:center}
.arena-column .field-slot>.battlefield{width:min(100cqw,142cqh);height:min(100cqh,70.422535cqw)!important;aspect-ratio:71 / 50;margin:0}
@media(pointer:coarse){
  button,.action-button,.icon-btn{touch-action:manipulation}
  .modal button,.unit-orders button,.combat-overview button{min-height:40px}
  .modal-close{min-width:44px!important;min-height:44px!important}
  .unit-orders .unit-order-relic{width:40px;height:40px}
  .shop-info-btn{min-width:40px;min-height:40px}
}
@media(pointer:coarse) and (orientation:landscape) and (max-width:1100px){
  .battlefield .unit-piece{--card-height:calc(100cqh / 6 - 2px);width:min(calc(100cqw / 7.5 - 2px),calc(var(--card-height)*1.2))!important;border-width:1px!important}
  /* On the phone board, recognition comes from the portrait, rank and corner mark. */
  :is(.battlefield,.preview-board) .unit-piece{--team:#59dcff}
  :is(.battlefield,.preview-board) .unit-piece.enemy{--team:#ff656d}
  :is(.battlefield,.preview-board) .unit-piece .piece-art{inset:0 0 6px;width:auto;--portrait-fit:cover}
  :is(.battlefield,.preview-board) .unit-piece .piece-art::before{background-size:cover}
  :is(.battlefield,.preview-board) .unit-piece .piece-name{inset:0;padding:0;overflow:visible;background:none;pointer-events:none}
  :is(.battlefield,.preview-board) .unit-piece .piece-label{display:none}
  :is(.battlefield,.preview-board) .unit-piece .piece-stars{top:1px;bottom:auto;left:2px;right:auto;transform:none;max-width:calc(100% - 18px);padding:1px 2px;border-radius:2px;background:#09151cdd;font:700 10px/1 Arial,sans-serif;letter-spacing:0}
  :is(.battlefield,.preview-board) .unit-piece :is(.piece-origins,.class-badge,.card-badge,.monster-seal,.piece-items){display:none}
  :is(.battlefield,.preview-board) .unit-piece .piece-allegiance{display:flex;inset:1px 1px auto auto;transform:none;box-sizing:border-box;width:13px;height:13px;min-width:13px;min-height:13px;margin:0;padding:1px;gap:0;font-size:0;line-height:0;letter-spacing:0;border:1px solid #e5f6ff;border-radius:3px;background:var(--team);color:#07131c;box-shadow:0 1px 2px #000b;pointer-events:none}
  :is(.battlefield,.preview-board) .unit-piece .piece-allegiance svg{display:block;width:9px;height:9px}
  @container unit-card (max-width:45px){
    :is(.battlefield,.preview-board) .unit-piece .piece-stars{top:1px;left:0;padding:0 1px;max-width:calc(100% - 11px);font-size:0;line-height:0}
    :is(.battlefield,.preview-board) .unit-piece .piece-stars::before{content:attr(data-rank) "★";font:700 8px/1 Arial,sans-serif}
    :is(.battlefield,.preview-board) .unit-piece .piece-allegiance{right:0;width:9px;min-width:9px;height:9px;min-height:9px;padding:0;border-radius:2px}
    :is(.battlefield,.preview-board) .unit-piece .piece-allegiance svg{width:7px;height:7px}
  }
  .shop-grid{min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .dock-offers .shop-card{min-height:42px}
  .dock-offers .shop-info-btn{width:40px;height:40px}
}
@media(max-height:650px) and (orientation:landscape){
  .modal.scroll-reader{max-height:calc(var(--dialog-visible-height,100dvh) - 8px)}
  .modal.scroll-reader>.dialog-heading{padding:3px 6px 3px 10px}
  .combat-overview{min-height:42px;gap:5px;padding:2px 4px;margin-bottom:2px}
  .overview-traits,.overview-inventory{gap:3px}
  .combat-overview .overview-pact span{max-width:74px;overflow:hidden;text-overflow:ellipsis}
  .combat-overview .overview-label{max-width:48px;font-size:10px}
  .dialog-reading.scroll-flow{padding:6px 9px 14px}
  .modal .inspector-art{height:120px;max-height:120px}
  .modal .inspector-body{padding:8px}
  .unit-orders .unit-order-name{display:inline-flex!important;font-size:11px}
  .bench-heading:has(#unit-orders:not([hidden])) .section-title{display:none}
  .unit-orders .unit-order-remove,.unit-orders .unit-order-sell{font-size:11px;padding:0 5px}
}

/* Shield shares the HP track and max-HP scale; consumption reveals HP from left to right. */
.unit-piece .hp-track>.piece-shield{position:absolute;inset:0 0 0 auto;width:var(--shield,0%);height:100%;box-sizing:border-box;border:0;border-radius:0;background:var(--stat-shield,#d7b4ff);box-shadow:none;outline:0;opacity:1;z-index:2;pointer-events:none;transition:none}
.unit-piece.dead .hp-track>.piece-shield{display:none}

/* 0.11.4: critical multipliers and typed equipment lifesteal. */
.stat-grid .stat .stat-secondary{display:block;font:500 12px/1.35 var(--font-body, sans-serif);text-transform:none;margin-top:5px;overflow-wrap:anywhere}
.combat-properties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:10px 0;font-size:13px;line-height:1.45}
.combat-properties .spell-critical-state{grid-column:1/-1}
.combat-properties b{white-space:nowrap}

/* 0.11.10: explicit capacity choice, no synthetic artwork. */
.modal.capacity-modal{width:min(860px,94vw);max-height:92dvh;overflow:auto;padding:24px;box-sizing:border-box}
.capacity-modal h2{padding-right:42px}.capacity-content{font-size:14px;line-height:1.45}
.capacity-summary{display:flex;gap:8px;flex-wrap:wrap}.capacity-offers{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.capacity-offer,.capacity-slot{display:flex;gap:9px;align-items:center;text-align:left;background:var(--panel,#152321);color:inherit;border:1px solid var(--line,#53605b);padding:9px;min-width:0;cursor:pointer;border-radius:2px}
.capacity-offer span,.capacity-slot span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}.capacity-offer small,.capacity-slot small{font-size:11px;opacity:.8}
.capacity-offer.is-selected,.capacity-slot.is-selected{border:2px solid var(--gold,#e5c17c);padding:8px;box-shadow:inset 0 0 0 1px var(--gold,#e5c17c)}
.capacity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.capacity-incoming{padding:10px 12px;border-left:3px solid var(--gold,#e5c17c);background:rgba(180,160,105,.07)}
.capacity-incoming p{margin:5px 0;font-size:12px}.capacity-confirmation{min-height:2.8em}
.capacity-actions{display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:-24px;background:var(--panel,#152321);padding:12px 0;z-index:2}
.capacity-actions button{white-space:normal}.capacity-owned-note{font-size:12px;opacity:.85}
.capacity-slot img,.capacity-offer img{flex-shrink:0;object-fit:cover;max-width:42px}
@media(max-width:540px){.modal.capacity-modal{padding:16px;max-height:92dvh}.capacity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.capacity-actions{bottom:-16px}.capacity-slot{font-size:12px}}

.capacity-actions .primary-button,.capacity-actions .action-button{font-size:12px;min-height:40px;line-height:1.4;white-space:normal}
@media(max-height:500px){
 .modal.capacity-modal{padding:12px 18px}
 .capacity-modal>.eyebrow{display:none}
 .capacity-modal>#modal-title{font-size:22px;margin:0 0 6px}
 .capacity-content>p{font-size:12px;margin:5px 0}
 .capacity-incoming{padding:6px 10px;margin:6px 0}
 .capacity-incoming p{display:none}
 .capacity-content h3{font-size:14px;margin:8px 0}
 .capacity-offers{gap:5px;margin:6px 0}
 .capacity-offer{padding:5px}.capacity-offer img{width:32px;height:32px}
 .capacity-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .capacity-slot{padding:5px;min-height:42px;font-size:12px}
 .capacity-slot img{width:30px;height:30px}
 .capacity-actions{padding:8px 0 0;margin-top:8px}
}

/* 0.11.11: independent perfected rewards, one artwork per item. */
.perfected-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin:18px 0}
.perfected-choice{min-width:0;display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid rgba(224,181,95,.45);border-radius:8px;background:rgba(20,24,27,.96);text-align:left}
.perfected-choice header{display:flex;align-items:center;gap:12px;min-height:68px}
.perfected-choice header img{flex:none;object-fit:contain}
.perfected-choice h3{margin:0;font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.perfected-choice p{margin:0;line-height:1.55;font-size:14px}
.perfected-choice-stats{font-weight:600}
.perfected-choice details{font-size:13px;line-height:1.5}
.perfected-choice details p{margin:8px 0;font-size:13px}
.perfected-choice>.primary-button{margin-top:auto;width:100%;min-height:44px;white-space:normal}
.perfected-choice details+button{margin-top:12px}
.vault-schedule{font-size:13px;line-height:1.6}
.relic-source{display:block;margin-top:8px}
@media(max-width:620px){.perfected-choice-grid{grid-template-columns:1fr}.perfected-choice{padding:14px}.perfected-choice h3{font-size:18px}}
@media(min-width:621px) and (max-width:950px){.perfected-choice{padding:11px;gap:8px}.perfected-choice header{display:block}.perfected-choice h3{margin-top:7px;font-size:17px}.perfected-choice p{font-size:13px}}