#arena-text-scale { position: absolute; visibility: hidden; inline-size: 1rem; block-size: 0; pointer-events: none; }
.arena-shortcuts { position: absolute; }
.arena-skip.skip { transform: none; clip-path: inset(50%); max-inline-size: calc(100vw - 1rem); min-block-size: 48px; padding: .42rem .64rem; border: 1px solid currentColor; font-weight: 750; }
.arena-skip.skip:focus-visible { clip-path: none; }

/* The fixed table switches to document flow when its text needs more room. */
#main .arena.table[data-reflow="true"] {
  grid-template: none / minmax(0,1fr);
  align-content: start;
  gap: .56rem;
  block-size: auto;
  min-block-size: 100dvh;
  padding: max(.35rem,env(safe-area-inset-top)) max(.48rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.48rem,env(safe-area-inset-left));
  overflow: visible;
  background-position: center top;
  background-size: auto max(100dvh,32rem);
}
#main [data-reflow="true"] > :is(.arena-hud,.arena-seats,.arena-objective,.arena-board,.arena-dock) {
  grid-area: auto;
  justify-self: center;
  inline-size: min(100%,34rem);
  min-inline-size: 0;
  margin: 0;
}
#main [data-reflow="true"] .arena-hud {
  display: flex;
  flex-wrap: wrap;
  min-block-size: 0;
  padding: 0;
  gap: .24rem .4rem;
}
#main [data-reflow="true"] .arena-mark > span,
#main [data-reflow="true"] .arena-phase-title-short,
#main [data-reflow="true"] .arena-event-line { display: none; }
#main [data-reflow="true"] .arena-turn { flex: 1 1 min(100% - 2.3rem,9rem); text-align: start; white-space: normal; overflow-wrap: anywhere; }
#main [data-reflow="true"] .arena-turn p { justify-content: start; flex-wrap: wrap; overflow: visible; }
#main [data-reflow="true"] .arena-turn h1 { overflow: visible; }
#main [data-reflow="true"] .arena-phase-title { display: inline; }
#main [data-reflow="true"] .arena-tools { display: flex; flex-wrap: wrap; margin-inline-start: auto; }
#main [data-reflow="true"] .arena-tools .icon-btn { min-inline-size: 48px; min-block-size: 48px; padding: .24rem; }
#main [data-reflow="true"] .arena-tools .icon { width: min(1.15rem,28px); height: min(1.15rem,28px); }

#main [data-reflow="true"] .arena-seats { padding: 0; }
#main [data-reflow="true"] .arena-seats summary {
  align-content: center;
  min-block-size: 48px;
  padding: .22rem .5rem;
  border-block: 1px solid var(--arena-trim);
  background: oklch(20% .025 231 / .96);
  font-size: .82rem;
  font-weight: 730;
}
#main [data-reflow="true"] .arena-seats summary span { margin-inline-start: .26rem; color: var(--arena-ice); }
#main [data-reflow="true"] .arena-seats .player-list {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr));
  gap: .2rem;
  max-inline-size: none;
  padding: .24rem 0;
  overflow: visible;
}
#main [data-reflow="true"] .arena-seats .player-list > li { position: static; }
#main [data-reflow="true"] .arena-seat { flex-direction: row; inline-size: 100%; min-inline-size: 48px; min-block-size: 48px; padding: .2rem; text-align: start; }
#main [data-reflow="true"] .arena-seat-text strong { max-inline-size: none; white-space: normal; overflow-wrap: anywhere; }
#main [data-reflow="true"] .arena-seat-status { justify-content: start; }
#main [data-reflow="true"] .arena-seat-status[data-secondary="true"] { visibility: visible; }
#main [data-reflow="true"] .arena-emblem { inline-size: 1.75rem; block-size: 1.75rem; }

#main [data-reflow="true"] .arena-objective { grid-template-columns: minmax(0,1fr) auto; min-block-size: 0; }
#main [data-reflow="true"] .arena-objective-mark { display: none; }
#main [data-reflow="true"] :is(.arena-objective-copy,.arena-return-message) { display: block; overflow: visible; }
#main [data-reflow="true"] .arena-board { display: flex; flex-direction: column; gap: .3rem; min-block-size: 0; padding: 0; }
#main [data-reflow="true"] .arena-board::after { display: none; }
#main [data-reflow="true"] :is(.arena-return,.arena-connection) { position: static; inline-size: 100%; margin: 0; }
#main [data-reflow="true"] .arena-fight {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  gap: .38rem;
  padding: .48rem;
  border: 1px solid var(--arena-trim);
  border-radius: .35rem;
  background: oklch(19% .027 231 / .96);
}
#main [data-reflow="true"] .arena-fight::before { display: none; }
#main [data-reflow="true"] .arena-fight-caption { display: flex; }
#main [data-reflow="true"] .score.arena-clash {
  position: static;
  display: grid;
  grid-template: auto / repeat(2,minmax(0,1fr));
  padding: 0;
  gap: .28rem;
  pointer-events: auto;
}
#main [data-reflow="true"] .score .arena-score { grid-area: auto; grid-template: none / minmax(0,1fr); justify-items: start; gap: .14rem; padding: .25rem; }
#main [data-reflow="true"] .arena-score > span { grid-area: auto; white-space: normal; overflow-wrap: anywhere; }
#main [data-reflow="true"] .arena-score-label { font-size: max(14px,.62rem); letter-spacing: 0; text-transform: none; }
#main [data-reflow="true"] .arena-score-caption { font-size: .68rem; }
#main [data-reflow="true"] .arena-score strong { font-size: 1.8rem; line-height: 1; }
#main [data-reflow="true"] .arena-score[data-wide="true"] strong { font-size: 1.25rem; }
#main [data-reflow="true"] .arena-versus { display: none; }

#main [data-reflow="true"] .arena-fight .arena-foes {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr));
  align-items: stretch;
  container-type: normal;
  block-size: auto;
  max-block-size: none;
  gap: .26rem;
  padding: 0;
  overflow: visible;
}
#main [data-reflow="true"] .arena-foes .arena-monster {
  display: grid;
  grid-template: auto auto / min(2.9rem,30%) minmax(0,1fr);
  align-content: center;
  align-items: center;
  gap: .12rem .28rem;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 48px;
  aspect-ratio: auto;
  padding: .25rem;
  text-align: start;
  transform: none;
}
#main [data-reflow="true"] .arena-monster-art { grid-area: 1 / 1 / 3 / 2; inline-size: 100%; block-size: auto; aspect-ratio: 1; }
#main [data-reflow="true"] .arena-foes .arena-monster-top { position: static; grid-area: 1 / 2; min-block-size: 0; padding: 0; border: 0; background: none; }
#main [data-reflow="true"] .arena-foes .arena-monster-top > span { display: flex; flex-wrap: wrap; font-size: .58rem; }
#main [data-reflow="true"] .arena-foes .arena-monster-top strong { font-size: 1rem; }
#main [data-reflow="true"] .arena-foes .arena-monster-name { grid-area: 2 / 2; display: block; min-block-size: 0; padding: 0; font: 760 .79rem/1.18 var(--arena-ui); overflow: visible; overflow-wrap: anywhere; }
#main [data-reflow="true"] .arena-stakes-button { flex-wrap: wrap; overflow-wrap: anywhere; white-space: normal; }
#main [data-reflow="true"] :is(.arena-contract,.arena-impact-copy) { overflow-wrap: anywhere; }

#main [data-reflow="true"] .arena-dock { display: grid; grid-template: none / minmax(0,1fr); gap: .42rem; padding: 0; background: none; }
#main [data-reflow="true"] :is(.arena-phase,.arena-loot-stage,.match-result) { min-inline-size: 0; inline-size: 100%; max-inline-size: none; }
#main [data-reflow="true"] .arena-command { grid-template-columns: minmax(0,1fr); inline-size: 100%; max-inline-size: none; padding: 0; }
#main [data-reflow="true"] .arena-command > * { grid-area: auto; }
#main [data-reflow="true"] .arena-window { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem; }
#main [data-reflow="true"] .arena-window-copy { min-inline-size: 0; overflow-wrap: anywhere; }
#main [data-reflow="true"] .arena-window :is(p,small,#arena-guidance-note) { font-size: .77rem; white-space: normal; overflow: visible; }
#main [data-reflow="true"] .arena-commands { display: flex; flex-wrap: wrap; gap: .28rem; }
#main [data-reflow="true"] .arena-commands .btn { flex: 1 1 auto; min-inline-size: 48px; min-block-size: 48px; padding: .28rem .4rem; font-size: .85rem; white-space: normal; overflow-wrap: anywhere; }
#main [data-reflow="true"] .arena-flee-targets { display: flex; flex-wrap: wrap; overflow: visible; }
#main [data-reflow="true"] .arena-consequences { inline-size: 100%; grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
#main [data-reflow="true"] .arena-loot { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); max-block-size: none; overflow: visible; }
#main [data-reflow="true"] .arena-supply, #main [data-reflow="true"] .arena-guide { position: static; align-self: start; }

#main [data-reflow="true"] .arena-dock .arena-hand { display: flex; flex-direction: column; inline-size: 100%; max-inline-size: none; min-block-size: 0; margin: 0; }
#main [data-reflow="true"] .hand-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .24rem; }
#main [data-reflow="true"] .hand-heading h2, #main [data-reflow="true"] .hand-kit { font-size: .86rem; }
#main [data-reflow="true"] .hand-kit span { display: inline; }
#main [data-reflow="true"] .arena-hand .arena-hand-strip {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  min-block-size: 0;
  max-block-size: none;
  overflow: visible;
  padding: .25rem 0;
}
#main [data-reflow="true"] .arena-hand .hand-card { min-block-size: 48px; padding: .3rem .46rem; }
#main [data-reflow="true"] .arena-hand .card-name { font-size: .92rem; }
#main [data-reflow="true"] .arena-hand .card-kind { font-size: .77rem; }