.compact-arena {
  --leader-row: clamp(116px, 20dvh, 194px);
  grid-template-rows: 34px var(--leader-row) minmax(45px,1fr) 22px minmax(45px,1fr) var(--leader-row) clamp(125px,25dvh,200px);
}
.compact-arena .enemy-row,
.compact-arena .self-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) max-content minmax(0,1fr);
}
.compact-arena .enemy-target,
.compact-arena .leader-inspect {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-height: 32px;
  justify-self: center;
}
.compact-arena .leader {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  width: min(350px,46vw);
  align-items: center;
}
.compact-arena .leader-name {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-arena .leader-stats { display: none; }
.compact-arena .hp { justify-self: start; }
.compact-arena .battle-portrait.avatar, .skill-speaking-portrait .battle-portrait.avatar {
  width: auto;
  height: calc(var(--leader-row) - 8px);
  min-width: 0;
  aspect-ratio: 475 / 440;
  display: block;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
  transform-origin: center bottom;
}
.portrait-layers {
  position: absolute;
  top: 0;
  width: 100%;
  aspect-ratio: 475 / 510;
}
.compact-arena .portrait-layers {
  transform-origin: center 86%;
  animation: table-breathe 3.4s ease-in-out infinite;
}
.compact-arena .self-row .portrait-layers { animation-delay: -1.3s; }
@keyframes table-breathe {
  0%, 100% { transform: scale(1,1); }
  45% { transform: translateY(-2%) scale(1.025,1.045); }
}
.portrait-layers img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait-layers .eyes-open { animation: table-blink 4.9s steps(1,end) infinite; }
.portrait-layers .eyes-closed { animation: table-blink-closed 4.9s steps(1,end) infinite; opacity: 0; }
.zone-1 ~ .self-row .portrait-layers img { animation-delay: -1.5s; }
@keyframes table-blink {
  0%, 51%, 100% { opacity: 1; }
  48% { opacity: 0; }
}
@keyframes table-blink-closed {
  0%, 51%, 100% { opacity: 0; }
  48% { opacity: 1; }
}
.mouth-speaking .mouth-rest, .battle-portrait:not(.mouth-speaking) .mouth-open { visibility: hidden; }
.motion-off .compact-arena .portrait-layers,
.motion-off .portrait-layers img { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .compact-arena .portrait-layers, .portrait-layers img { animation: none; }
}
.enemy-hand-count { grid-column: 3; grid-row: 1; justify-self: end; }
.enemy-hand-count small { display: block; }
.battle-controls {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: clamp(4px,1vw,12px);
}
.skill-speaking-portrait {
  position: absolute;
  left: max(14px,env(safe-area-inset-left));
  bottom: max(14px,env(safe-area-inset-bottom));
  z-index: 4;
  display: none;
  pointer-events: none;
}
.skill-speaking-portrait.speaking { display: block; }
.skill-speaking-portrait .battle-portrait {
  --leader-row: clamp(64px,13dvh,116px);
  filter: drop-shadow(0 3px 10px var(--skill-accent));
}
@media (max-width: 1000px) {
  .compact-arena { grid-template-rows: 34px var(--leader-row) minmax(40px,1fr) 22px minmax(40px,1fr) calc(var(--leader-row) + 34px) clamp(125px,25dvh,200px); }
  .compact-arena .self-row { grid-template-rows: minmax(0,1fr) 31px; }
  .battle-controls { grid-row: 2; grid-column: 1 / -1; justify-content: center; }
  .self-row .end-turn { padding-block: 4px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .compact-arena {
    --leader-row: clamp(84px,15.5dvh,124px);
    grid-template-rows: 30px var(--leader-row) minmax(38px,1fr) 18px minmax(38px,1fr) calc(var(--leader-row) + 36px) clamp(142px,27dvh,210px);
  }
  .compact-arena .leader { width: min(270px,68vw); }
  .compact-arena .enemy-hand-count { font-size: 9px; padding: 2px 4px; white-space: normal; }
  .enemy-hand-count small { display: none; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .compact-arena {
    --leader-row: clamp(58px,19dvh,98px);
    grid-template-rows: 24px var(--leader-row) minmax(26px,1fr) 22px minmax(26px,1fr) var(--leader-row) clamp(70px,27dvh,130px);
  }
  .compact-arena .self-row { grid-template-rows: minmax(0,1fr); }
  .compact-arena .leader { width: min(220px,37vw); }
  .battle-controls { grid-row: 1; grid-column: 3; gap: 4px; }
  .self-row .end-turn { min-width: 0; padding: 4px 6px; }
  .self-row button.skill-button { min-width: 0; padding: 3px 4px; }
}