/* A single shared strip opposite the two Might readouts. The symmetric gutters
   preserve the exact horizontal center and keep both scrollable card rows clear. */
.arena { --history-gutter: clamp(62px,18cqw,78px); --history-count: 1; --history-row-size: calc((var(--history-gutter) - 26px) / 2); --history-height: max(44px,calc(14px + var(--history-count) * var(--history-row-size) + (var(--history-count) - 1) * 7px)); --history-status-gap: 8px; }
.arena:has(.history-recent>.history-item:nth-child(2)) { --history-count: 2; }
.arena:has(.history-recent>.history-item:nth-child(3)) { --history-count: 3; }
/* Only the status leaves the row's containing block. Card slots retain their
   own positioning, so cards, Might and horizontal scrolling never move. */
.arena .active-row { position: static; grid-template-columns: var(--history-gutter) minmax(0,1fr) var(--history-gutter); }
.arena .power-readout { justify-self: start; min-width: 32px; }
.battle-history-control { position: absolute; right: -5px; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: var(--history-gutter); height: var(--history-height); padding: 7px 3px; display: flex; flex-direction: column; justify-content: center; z-index: 8; border: 0; border-radius: 7px; background: linear-gradient(90deg,#17161422,#17161488); box-shadow: 0 0 13px 5px #17141055; color: var(--gold); }
.arena .active-status { top: auto; right: -5px; width: var(--history-gutter); display: flex; justify-content: center; text-align: center; }
.arena .active-status:empty { display: none; }
.arena .active-row[data-player="1"] .active-status { bottom: calc(50% + var(--history-height) / 2 + var(--history-status-gap)); }
.arena .active-row[data-player="0"] .active-status { top: calc(50% + var(--history-height) / 2 + var(--history-status-gap)); }
.arena .active-status .next-bonus { box-sizing: border-box; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.battle-history-control:active:not(:disabled) { transform: translateY(-50%) scale(.97); }
.history-recent { display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
.history-item { display: grid; grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr); align-items: center; gap: 3px; position: relative; }
.history-portrait,.history-value { width: 100%; aspect-ratio: 1; min-width: 0; position: relative; display: grid; place-items: center; border-radius: 4px; }
.history-portrait { background: #171614; border: 1px solid #aa854555; box-shadow: 0 2px 4px #17141066; }
.history-portrait[data-player="1"] { border-color: #d3a08b80; }
.history-portrait img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 28%; border-radius: 3px; }
.history-action { display: grid; place-items: center; width: 100%; color: #c9c0ae; }
.history-action svg { display: block; width: 100%; max-width: 22px; height: auto; }
.history-amount { font: 800 12px/1 var(--font-ui); text-shadow: 0 1px 3px #171410,0 0 3px #171410; z-index: 1; }
.history-portrait .history-amount { position: absolute; bottom: -2px; right: -2px; padding: 1px; background: #171614d9; border-radius: 3px; }
.history-amount[data-change="up"] { color: #97e4ae; }.history-amount[data-change="down"] { color: #ef9999; }
.history-target-count { position: absolute; top: -5px; right: -3px; font: 700 8px/1 var(--font-ui); background: #171614; padding: 2px; border-radius: 3px; color: #f4efe3; }
.history-recent .history-item:nth-child(2) { opacity: .75; }.history-recent .history-item:nth-child(3) { opacity: .5; }
.battle-history-control.is-empty { background: transparent; box-shadow: none; opacity: .48; min-height: 44px; }
.battle-history-control.is-empty .history-action svg { width: 19px; }
.preparing-opening .battle-history-control { visibility: hidden; }
#log-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: calc(100dvh - 34px); }
#log-body>.sheet-title { position: relative; flex: none; margin: 0; background: transparent; }
#log-body>.sheet-title::before { display: none; }
.history-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; margin: 0 20px 28px; padding: 4px 2px 8px; scrollbar-width: thin; }
.history-scroll { cursor: grab; user-select: none; }
.history-scroll.is-dragging { cursor: grabbing; }
.history-scroll .history-item { grid-template-columns: minmax(0,1fr) 54px minmax(0,1fr); justify-content: center; gap: 8px; padding: 16px 7px; border-bottom: 1px solid #aa854526; }
.history-subject { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.history-subject .history-portrait,.history-subject .history-value { width: 42px; flex: none; }
.history-subject>.history-action { height: 42px; }
.history-name { font-size: 10px; line-height: 1.4; min-height: 28px; text-align: center; color: var(--kit-ink,#292724); word-break: keep-all; overflow-wrap: anywhere; }
.history-scroll .history-amount { font-size: 16px; }.history-scroll .history-target-count { font-size: 11px; }
.history-empty { text-align: center; padding: 32px 0; color: var(--kit-quiet-ink,#706b63); }
.history-empty-target { visibility: hidden; }
.history-targets { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; max-width: 90px; gap: 8px 4px; }
.history-targets .history-target { gap: 4px; }
.history-targets .history-portrait { width: 100%; max-width: 42px; }
.history-targets .history-name { width: 100%; }
@media(prefers-reduced-motion: no-preference) { .history-recent .history-item:first-child { animation: history-arrive 140ms ease-out; } }
@keyframes history-arrive { from { opacity: 0; translate: 5px 0; } to { opacity: 1; translate: 0 0; } }

.arena .hidden-opponent-deck { cursor: default; }

.history-scroll .history-action{color:var(--kit-brass,#aa8545)}