.avatar { position: relative; overflow: hidden; }
.avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body[data-screen="arena"] { background: var(--canvas, #100e16); }
body[data-screen="arena"] .site-head,
body[data-screen="arena"] .site-footer { display: none; }
body[data-screen="arena"] #main { width: 100%; max-width: none; padding: 0; margin: 0; }
body[data-screen="arena"] #event-status { inset-block-start: 0; }
body[data-screen="arena"] .notice { bottom: auto; top: max(4.75rem, calc(env(safe-area-inset-top) + 3.8rem)); }

.arena.table {
  --arena-night: #100e17;
  --arena-ice: var(--ice, #97c7c5);
  --arena-ember: var(--ember, #f29a73);
  --arena-paper: #f4ebdb;
  --arena-muted: #c3bfce;
  --arena-stroke: #9b89ad48;
  --arena-trim: #c59b7a68;
  --arena-display: var(--font-display, Georgia, serif);
  --arena-ui: var(--font-ui, system-ui, sans-serif);
  --arena-numeric: var(--font-score, Impact, sans-serif);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  min-height: 550px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  color: var(--arena-paper);
  font-family: var(--arena-ui);
  background: oklch(16% .021 244) url('/assets/arena-v2.webp') center / 100% 100% no-repeat;
}
.arena::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,#0a1019c9,transparent 23% 69%,#0b1119e8),
    radial-gradient(ellipse at 50% 45%,#315f5c17 18%,transparent 61%);
}
.arena-hud.table-head {
  min-height: 3.75rem;
  margin: 0;
  padding: max(.4rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) .4rem max(1.25rem,env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
  align-items: center;
  border-bottom: 0;
  background: transparent;
}
.arena-mark { display: inline-flex; gap: .55rem; align-items: center; justify-self: start; min-height: 2.75rem; color: var(--arena-paper); font: 800 1.14rem/.95 var(--arena-display); text-decoration: none; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 5px #0d1018; }
.arena-mark img { width: 1.7rem; height: 1.7rem; }
.arena-turn { min-width: 0; align-self: center; text-align: center; white-space: nowrap; }
.arena .arena-turn h1 { margin-top: .16rem; color: var(--arena-paper); font: 720 .94rem/1.16 var(--arena-ui); overflow: hidden; text-overflow: ellipsis; }
.arena-phase-title-short { display: none; }
.arena .arena-turn p { display: flex; justify-content: center; align-items: center; gap: .4rem; color: var(--arena-muted); font-size: .67rem; font-weight: 750; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.arena-turn p span + span::before { content: '◆'; margin-right: .48rem; font-size: .51rem; color: var(--arena-trim); }
.arena-turn[data-active="true"] p span:last-child { color: var(--arena-ember); }
.arena-tools.table-tools { gap: .2rem; justify-self: end; align-items: center; min-width: 0; }
.arena .arena-tools .icon-btn, .arena .arena-extra, .arena .arena-kit {
  min-width: 2.8rem;
  min-height: 2.8rem;
  border-radius: .45rem;
  color: var(--arena-paper);
  background: #171321c9;
  border-color: var(--arena-stroke);
}
.arena .arena-tools .icon-btn { border-color: transparent; background: #101923c4; }
.arena .arena-tools .icon-btn:hover, .arena .arena-extra:hover, .arena .arena-kit:hover { color: var(--arena-ice); border-color: var(--arena-ice); background: #252230; }
.arena .arena-tools .arena-history { display: flex; gap: .45rem; }
.arena-event-line { display: block; max-width: min(16vw,15rem); color: var(--arena-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.arena .arena-pause { color: var(--arena-ember); }
.arena-seats { position: relative; z-index: 2; min-width: 0; padding: .24rem 1.35rem .35rem; }
.arena .arena-seats .player-list { display: flex; justify-content: safe center; gap: clamp(.65rem,3vw,2.8rem); margin: 0 auto; padding: .24rem .48rem .24rem; overflow: auto; max-width: 63rem; list-style: none; scrollbar-width: thin; }
.arena .arena-seats .player-list li { flex: 0 0 auto; min-width: 0; }
.arena-seat { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 4rem; min-height: 3.15rem; padding: .18rem .24rem; color: var(--arena-paper); background: transparent; border: 1px solid transparent; border-radius: .55rem; text-align: center; }
.arena-seat:hover { border-color: var(--arena-stroke); background: #111c23d6; }
.arena-seat-medal { display: grid; justify-items: center; flex: none; min-width: 0; }
.arena-emblem { --seat-tint: #b4aacf; position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 3.05rem; height: 3.05rem; border-radius: 50%; border: 2px solid #ab9a84; color: var(--seat-tint); background: radial-gradient(circle at 50% 35%,#483652,#181322); box-shadow: 0 .27rem .55rem #080d13, 0 0 0 2px #101b23; }
.arena-seat.tone-1 .arena-emblem { --seat-tint:#b4d7d5; background: radial-gradient(circle at 50% 35%,#2b484f,#141e2b); }
.arena-seat.tone-2 .arena-emblem { --seat-tint:#d9a29a; background: radial-gradient(circle at 50% 35%,#663b47,#221624); }
.arena-seat.tone-3 .arena-emblem { --seat-tint:#d4c1a2; background: radial-gradient(circle at 50% 35%,#5b4a38,#251924); }
.arena-seat.tone-4 .arena-emblem { --seat-tint:#a0c6ab; background: radial-gradient(circle at 50% 35%,#374a48,#152121); }
.arena-seat.tone-5 .arena-emblem { --seat-tint:#ddbdcb; background: radial-gradient(circle at 50% 35%,#593a53,#271b32); }
.arena-emblem > .icon { width: 1.47rem; height: 1.47rem; }
.arena-emblem img { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; border-radius: inherit; }
.arena-seat-metrics { position: relative; display: flex; align-items: stretch; justify-content: center; gap: .12rem; margin-block-start: -.26rem; }
.arena-seat-stat { --seat-stat-ink: var(--arena-ember); display: inline-flex; align-items: baseline; gap: .18rem; min-width: 0; min-height: 1rem; padding: .09rem .17rem .07rem; border: 1px solid color-mix(in oklch,var(--seat-stat-ink) 56%,#303439); border-radius: .18rem; background: #18232b; color: var(--seat-stat-ink); line-height: 1; white-space: nowrap; }
.arena-seat-stat[data-stat="force"] { --seat-stat-ink: var(--arena-ice); border-radius: .45rem; }
.arena-seat-stat small { font-size: .58rem; font-weight: 750; }
.arena-seat-stat small abbr { display: none; text-decoration: none; }
.arena-seat-stat b { font: 800 .99rem/1 var(--arena-numeric); font-variant-numeric: tabular-nums; }
.arena-seat-stat[data-wide="true"] b { font-size: .84rem; }
.arena-seat-condition { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: .05rem; right: -.32rem; top: -.23rem; min-height: .91rem; padding: 0 .13rem; border: 1px solid #bc9dc5; border-radius: .24rem; background: #34283e; color: #f2d9f5; font: 800 .78rem/1 var(--arena-numeric); }
.arena-seat-condition abbr { font: 760 .51rem/1 var(--arena-ui); text-decoration: none; }
.arena-seat[data-turn="true"] .arena-emblem { border-color: var(--arena-ember); box-shadow: 0 0 0 1px #5d362b,0 0 .8rem #da723b55; }
.arena-seat[data-help="true"] .arena-emblem { border-color: var(--arena-ice); box-shadow: 0 0 0 1px #426968,0 0 .8rem #70bcb455; }
.arena-seat[data-dead="true"] .arena-emblem img { filter: grayscale(1) brightness(.65); }
.arena-seat-text { display: grid; min-width: 0; gap: .12rem; text-shadow: 0 1px 4px #090f14; }
.arena-seat-text strong { display: block; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .77rem; }
.arena-seat-status { display: flex; justify-content: center; align-items: center; gap: .15rem; color: var(--arena-muted); font-size: .66rem; line-height: 1.15; }
.arena-seat-status .icon { width: .85rem; height: .85rem; }
.arena-seat-status > span + span { display: none; }
.arena-seat[data-turn="true"] .arena-seat-status { color: var(--arena-ember); }
.arena-seat[data-help="true"] .arena-seat-status { color: var(--arena-ice); }
.arena .arena-board { position: relative; display: grid; grid-area: auto; min-width: 0; min-height: 0; align-items: stretch; }
.arena-board:has(.arena-return) { grid-template-rows: auto minmax(0,1fr); }
.arena-board::after { content: ''; position: absolute; z-index: -1; inset: 4% 10%; background: radial-gradient(ellipse at center,#090d124a 0%,transparent 71%); pointer-events: none; }
.arena-return { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; justify-self: center; width: min(calc(100% - 1.3rem),40rem); min-width: 0; margin-block: .18rem .24rem; padding: .32rem .38rem .32rem .62rem; gap: .22rem; border: 1px solid var(--arena-stroke); background: #1c1827ed; }
.arena-return-copy { min-width: 0; line-height: 1.23; }
.arena-return h2 { color: var(--arena-ice); font: 770 .73rem/1.2 var(--arena-ui); margin: 0 0 .17rem; }
.arena-return-message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--arena-paper); font-size: .72rem; }
.arena-return-scores { display: flex; flex-wrap: wrap; gap: .1rem .65rem; margin: .16rem 0 0; padding: 0; list-style: none; color: var(--arena-muted); font-size: .7rem; }
.arena-return-scores b { color: var(--arena-ice); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arena .arena-return .icon-btn { min-inline-size: 48px; min-block-size: 48px; color: var(--arena-paper); background: #171321; border-color: var(--arena-stroke); }
.arena .arena-return .icon-btn:hover { border-color: var(--arena-ice); color: var(--arena-ice); }
/* The encounter and its decision share one playing field. */
.arena-fight {
  --field-light: #9b52342b;
  --field-rule: #d7a77b5e;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1.27fr) minmax(19.5rem,.94fr);
  grid-template-rows: minmax(.4rem,1fr) auto auto auto auto auto minmax(.4rem,1fr);
  grid-template-areas:
    "art ."
    "art caption"
    "art forces"
    "art stakes"
    "art impact"
    "art command"
    "art .";
  column-gap: clamp(1.5rem,4.5vw,5.75rem);
  align-items: center;
  min-height: 0;
  min-width: 0;
  width: min(calc(100% - 5rem),73rem);
  margin-inline: auto;
  padding: .25rem 1rem .45rem;
}
.arena-fight[data-threat="leading"], .arena-fight[data-threat="refused"] { --field-light: #77bab027; --field-rule: #a7d0bd61; }
.arena-fight::before {
  content: '';
  grid-area: art;
  place-self: center;
  z-index: -1;
  pointer-events: none;
  width: min(95%,31rem);
  height: min(86%,31rem);
  border-radius: 50%;
  border: 1px dashed var(--field-rule);
  outline: 1px solid #c59b6945;
  outline-offset: .5rem;
  box-shadow: inset 0 0 2.4rem #a4752f19;
  background: radial-gradient(ellipse at center,var(--field-light),transparent 70%);
}
.arena-fight-caption { grid-area: caption; display: flex; align-items: center; gap: .6rem; color: #e7c29a; }
.arena-fight-caption::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg,#c998665e,transparent); }
.arena-fight-caption span { display: flex; gap: .36rem; align-items: center; font-weight: 750; font-size: .69rem; letter-spacing: .15em; text-transform: uppercase; }
.arena-fight-caption .icon { width: 1.05rem; height: 1.05rem; }
.arena .score.arena-clash {
  grid-area: forces;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  padding: .48rem 0 .32rem;
  gap: clamp(.3rem,1vw,.95rem);
  min-width: 0;
  min-height: 0;
}
.arena-party { grid-area: 1 / 1; }
.arena-enemy { grid-area: 1 / 3; }
.arena-versus { grid-area: 1 / 2; display: grid; place-items: center; width: 1.65rem; color: #d7af81; }
.arena-versus .icon { width: 1.35rem; height: 1.35rem; }
.arena .score .arena-score {
  --token-ink: var(--arena-ice);
  display: grid;
  justify-items: start;
  align-content: center;
  min-width: 0;
  min-height: 48px;
  gap: .14rem;
  padding: .46rem .7rem;
  border-block: 1px solid color-mix(in oklch,var(--token-ink) 27%,transparent);
  border-radius: 0;
  background: linear-gradient(90deg,color-mix(in oklch,var(--token-ink) 10%,transparent),transparent);
  color: var(--token-ink);
  text-shadow: 0 2px 8px #090f14;
}
.arena .score .arena-enemy {
  --token-ink: var(--arena-ember);
  justify-items: end;
  background: linear-gradient(-90deg,color-mix(in oklch,var(--token-ink) 10%,transparent),transparent);
}
.arena .score .arena-score:is(:hover,:focus-visible,[data-leading="true"]) { border-block-color: var(--token-ink); }
.arena-score-label { color: var(--token-ink); font-size: .79rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.arena-score strong { display: block; color: var(--token-ink); font: 800 clamp(3.2rem,5.6vw,5.8rem)/.84 var(--arena-numeric); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.arena-score[data-wide="true"] strong { font-size: clamp(2rem,3.8vw,3.8rem); }
.arena-score-caption { font-size: .76rem; font-weight: 680; line-height: 1.23; color: var(--arena-paper); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%; }
.arena-foes { grid-area: art; }
.arena-foes {
  --monster-width: clamp(5.2rem, calc((100cqh - 1.2rem) * .73), 22rem);
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: .72rem;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  padding: .65rem .75rem;
  container-type: size;
  overflow: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: .44rem;
  scrollbar-width: thin;
  scrollbar-color: #a68eb1 #21192c;
}
.arena-foes:not([data-count="1"]) { --monster-width: clamp(5rem, calc((100cqh - 1.1rem) * .72), 13.6rem); }
.arena .arena-foes .arena-monster {
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--monster-width);
  align-items: stretch;
  gap: .22rem;
  min-width: 0;
  width: var(--monster-width);
  aspect-ratio: 3/4;
  max-block-size: 100%;
  padding: .36rem;
  overflow: hidden;
  background: linear-gradient(160deg,#60374a,#2c1d2b 45%,#3e2733);
  border: 1px solid #dcaa86;
  border-radius: .56rem;
  box-shadow: inset 0 0 0 2px #201420,0 .47rem 1.04rem #080610d6,0 0 1.4rem #9a61454d;
  color: var(--arena-paper);
  text-align: left;
  transition: border-color .18s, box-shadow .18s;
}
.arena-foes[data-formation="spread"] .arena-monster { flex-shrink: 1; min-inline-size: min(var(--monster-width),5rem); }
.arena .arena-foes .arena-monster:hover { background: linear-gradient(145deg,#532c45,#2b1b2d); border-color: #ffe6cb; box-shadow: inset 0 0 0 2px #171320,0 .5rem .85rem #080610c9,0 0 1.65rem #db886d76; }
.arena-monster-top { display: flex; align-items: center; justify-content: space-between; gap: .24rem; min-height: 1.16rem; padding: 0 .22rem; }
.arena-monster-top > span { display: flex; align-items: center; gap: .18rem; color: #f0b8a1; font-size: .64rem; font-weight: 740; text-transform: uppercase; letter-spacing: .09em; }
.arena-monster-top .icon { width: .83rem; height: .83rem; }
.arena-foes[data-formation] .arena-monster-top .icon { display: block; width: .92rem; height: .92rem; }
.arena-monster-top strong { flex: none; color: #ffe0cc; font: 800 1.42rem/.92 var(--arena-numeric); }
.arena .arena-foes .arena-monster[data-refused="true"] { border-color: var(--arena-ice); }
.arena-monster[data-refused="true"] .arena-monster-top :is(span,strong) { color: var(--arena-ice); }
.arena-monster-art { display: block; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border: 1px solid #efb29559; border-radius: .14rem; background: radial-gradient(circle,#573a56,#201828); }
.arena-monster-art > .icon { width: min(3.2rem,65%); height: min(3.2rem,65%); color: #edc2a8; }
.arena-monster-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; }
.arena-monster-name { min-height: 2.2em; display: grid; align-content: center; padding: .16rem .25rem; overflow-wrap: anywhere; hyphens: auto; color: #f8e8d8; font: 760 clamp(.65rem,1.35vw,.93rem)/1.09 var(--arena-display); text-align: center; }
.arena-stakes { grid-area: stakes; display: grid; min-height: 2.9rem; align-content: center; justify-items: start; text-align: left; }
.arena-stakes-button { display: inline-flex; align-items: center; justify-content: center; gap: .62rem; max-width: calc(100% - 1rem); min-height: 2.78rem; padding: .3rem .74rem; border: 1px solid #9ba8a45e; border-radius: 1.5rem; background: #101a21e8; color: var(--arena-paper); font-size: .76rem; font-weight: 750; }
.arena-stakes-button:hover { border-color: var(--arena-ice); }
.arena-impact {
  --impact-ink: var(--arena-ember);
  grid-area: impact;
  display: grid;
  grid-template-columns: 1.75rem minmax(0,1fr) auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: .3rem .5rem;
  border: 1px solid #b58f674d;
  border-radius: .33rem;
  background: #17201de8;
  color: var(--arena-paper);
  text-align: start;
}
.arena-impact[data-side="party"] { --impact-ink: var(--arena-ice); }
.arena-impact:hover { border-color: var(--impact-ink); }
.arena-impact img { width: 1.75rem; height: 1.75rem; object-fit: cover; border: 1px solid #b58f6775; border-radius: 50%; }
.arena-impact-copy { display: grid; min-width: 0; gap: .14rem; font-size: .72rem; line-height: 1.2; }
.arena-impact-source { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.arena-impact-source b { font-weight: 800; }
.arena-impact-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--arena-muted); }
.arena-impact-force { display: grid; justify-items: end; gap: .12rem; color: var(--impact-ink); white-space: nowrap; }
.arena-impact-force b { font: 800 1.36rem/.88 var(--arena-numeric); }
.arena-impact-force small { font-size: .58rem; font-weight: 700; }
.arena-return-target, .arena-history-target { color: var(--ice); font-weight: 660; }
.arena-edge { color: var(--arena-ember); }
.arena-edge.is-winning { color: var(--arena-ice); }
.arena-prize { display: inline-flex; align-items: center; gap: .29rem; border-left: 1px solid var(--arena-stroke); padding-left: .54rem; }
.arena-stakes-button .icon { width: .95rem; height: .95rem; color: var(--arena-muted); }
.arena-contract { margin: .28rem .5rem 0; max-width: min(calc(100% - 1rem),48ch); color: var(--arena-paper); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 4px #100a17; }
.arena-supply { position: absolute; display: flex; bottom: clamp(.5rem,10%,3.1rem); right: clamp(1.25rem,4vw,5rem); gap: 1.2rem; align-items: end; }
.arena-deck { display: flex; flex-direction: column; align-items: center; gap: .36rem; min-width: 2.85rem; min-height: 3.4rem; padding: .14rem; border: 0; border-radius: .21rem; color: var(--arena-paper); background: transparent; font-size: .63rem; font-weight: 660; text-shadow: 0 1px 4px #080610; }
.arena-deck-back { display: grid; place-items: center; width: 2.26rem; aspect-ratio: .75; color: var(--arena-ice); border: 1px solid #a192bd8a; border-radius: .19rem; background: repeating-linear-gradient(128deg,#2b263b,#2b263b 3px,#251e35 3px,#251e35 7px); transform: rotate(-7deg); box-shadow: 2px 2px #130e20,3px 3px #a192bd6e,5px 5px #110d19,6px 6px #a192bd53; }
.arena-deck:nth-child(2) .arena-deck-back { color: var(--arena-ember); transform: rotate(7deg); background: repeating-linear-gradient(128deg,#422c3b,#422c3b 3px,#312237 3px,#312237 7px); }
.arena-deck:hover .arena-deck-back { border-color: var(--arena-paper); }
.arena-deck b { margin-left: .17rem; color: var(--arena-paper); }
.arena-guide.btn { position: absolute; bottom: 1rem; left: 1.25rem; min-height: 2.8rem; background: #181220d9; color: var(--arena-paper); border-color: var(--arena-stroke); }
.arena-guide.btn:hover { border-color: var(--arena-ice); }
.arena .arena-connection { position: absolute; z-index: 3; top: .35rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 1.4rem); padding: .48rem .66rem; margin: 0; color: var(--arena-ember); border-color: var(--arena-ember); background: #241628; font-size: .74rem; }
.arena-phase { display: grid; align-content: center; justify-items: center; text-align: center; gap: .46rem; min-width: 0; min-height: 0; padding: .62rem .75rem; }
.arena-phase-mark { position: relative; display: grid; place-items: center; width: 4.9rem; aspect-ratio: 1; margin: .48rem 0 .6rem; color: var(--arena-ember); background: radial-gradient(ellipse,#3a443b,#172025 75%); border: 1px solid #c3a278; border-radius: 50%; box-shadow: inset 0 0 0 4px #111b22,0 .25rem #0a0e13,0 .5rem 1rem #080e14; }
.arena-phase-mark .icon { width: 2.45rem; height: 2.45rem; }
/* The door is a physical prop and the primary action in the same button. */
.arena-phase-mark[data-symbol="door"] {
  width: clamp(7rem,18dvh,13.25rem);
  aspect-ratio: 3/4;
  border: 0;
  border-radius: 0;
  background: transparent url('/assets/arena-door-v3.webp') center / contain no-repeat;
  filter: drop-shadow(0 .5rem .8rem #080b0b) drop-shadow(0 0 1.35rem #cf77394d);
  box-shadow: none;
  transition: filter .18s ease-out;
}
.arena-phase-mark[data-symbol="door"] .icon { opacity: 0; }
.arena-door-action:is(:hover,:focus-visible) .arena-phase-mark[data-symbol="door"] {
  filter: drop-shadow(0 .45rem .68rem #080b0b) drop-shadow(0 0 1.55rem #f4a25d83);
}
.arena-phase h2 { margin-top: .19rem; font: 740 clamp(1.35rem,3.3vw,2.62rem)/1.1 var(--arena-display); letter-spacing: .024em; color: var(--arena-paper); text-shadow: 0 2px 12px #090612; }
.arena-phase p { max-width: 36ch; font-size: .82rem; font-weight: 550; color: var(--arena-paper); text-shadow: 0 2px 7px #090612; }
.arena-loot-stage {
  --loot-gold: oklch(81% .096 76);
  --loot-width: clamp(7.65rem,12.2vw,9.4rem);
  --loot-art: clamp(5.9rem,14dvh,8.15rem);
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(.46rem,2.3dvh,1.1rem);
  width: min(calc(100% - 1.15rem),48rem);
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  padding-block: .25rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.arena-loot-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; align-self: center; gap: .72rem; width: min(100%,36rem); padding: .15rem .26rem .5rem; border-block-end: 1px solid oklch(71% .075 70 / .52); }
.arena-loot-seal { display: grid; place-items: center; width: 44px; aspect-ratio: 1; color: var(--loot-gold); border: 1px solid oklch(71% .075 70 / .68); border-radius: 50%; background: oklch(23% .027 53); box-shadow: inset 0 0 0 3px oklch(18% .016 63); }
.arena-loot-seal .icon { width: 1.36rem; height: 1.36rem; }
.arena-loot-copy { display: grid; min-width: 0; gap: .16rem; }
.arena-loot-head h2 { color: var(--arena-paper); font: 750 clamp(1.16rem,3.05vw,2.35rem)/1.08 var(--arena-display); overflow-wrap: anywhere; text-shadow: 0 2px 5px oklch(13% .019 232); }
.arena-loot-source { color: var(--loot-gold); font: 710 .66rem/1.18 var(--arena-ui); text-transform: uppercase; letter-spacing: .055em; }
.arena-loot-copy small { display: block; color: var(--arena-paper); font: 650 .77rem/1.22 var(--arena-ui); }
.arena-loot-head .arena-countdown { align-self: center; white-space: nowrap; }
.arena-loot {
  display: flex;
  flex: none;
  justify-content: safe center;
  align-items: stretch;
  gap: .55rem;
  min-width: 0;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: .32rem .32rem .6rem;
  overflow: auto hidden;
  list-style: none;
  scroll-padding-inline: .32rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.arena-loot-tile { --loot-edge: oklch(73% .095 72); --loot-frame: oklch(29% .039 42); display: flex; flex-direction: column; flex: 0 0 var(--loot-width); min-width: 0; scroll-snap-align: start; }
.arena-loot-tile[data-deck="door"] { --loot-edge: oklch(70% .072 329); --loot-frame: oklch(29% .044 329); }
.arena-loot-card { display: grid; flex: 1; grid-template-rows: auto var(--loot-art) minmax(min-content,1fr); gap: .14rem; min-width: 0; padding: .32rem; color: var(--arena-paper); border: 1px solid var(--loot-edge); border-radius: .38rem; background: var(--loot-frame); box-shadow: inset 0 0 0 2px oklch(19% .021 37 / .68),0 .24rem .62rem oklch(12% .016 227 / .75); text-align: start; }
.arena-loot-tile:has(.arena-loot-pick) .arena-loot-card { border-end-start-radius: 0; border-end-end-radius: 0; }
.arena-loot-card-type { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: .24rem; color: var(--arena-paper); font: 730 .59rem/1.12 var(--arena-ui); overflow-wrap: anywhere; }
.arena-loot-card-type .icon { width: .69rem; height: .69rem; color: var(--loot-edge); }
.arena-loot-card .card-art { height: 100%; min-width: 0; aspect-ratio: auto; border: 1px solid oklch(80% .025 64 / .35); }
.arena-loot-card .card-art img { object-fit: cover; }
.arena-loot-card .badge-number { color: oklch(24% .035 44); background: var(--loot-gold); font-family: var(--arena-numeric); }
.arena-loot-card-name { display: grid; align-content: center; min-block-size: 2.6rem; padding: .25rem .28rem; color: oklch(25% .036 45); background: oklch(87% .058 79); font: 750 .81rem/1.16 var(--arena-ui); overflow-wrap: anywhere; hyphens: auto; }
.arena-loot-card:hover:not(:disabled), .arena-loot-card:focus-visible { border-color: var(--arena-ice); }
.arena .arena-loot-pick { min-height: 48px; justify-content: center; gap: .27rem; padding: .3rem; border-color: var(--loot-edge); border-block-start: 0; border-radius: 0 0 .38rem .38rem; background: oklch(28% .043 59); color: var(--loot-gold); font: 800 .76rem/1.15 var(--arena-ui); }
.arena .arena-loot-pick:hover:not(:disabled), .arena .arena-loot-pick:focus-visible { background: var(--loot-gold); color: oklch(24% .036 47); }
.arena-loot-pick .icon { width: .78rem; height: .78rem; }
.arena-loot-continuation { display: flex; justify-content: center; align-items: center; gap: .32rem; color: var(--arena-muted); font: 640 .72rem/1.2 var(--arena-ui); text-align: center; }
.arena-loot-continuation .icon { color: var(--loot-gold); width: .83rem; height: .83rem; flex: none; }
.arena-loot-resume-short { display: none; }
.arena-repair-stage { --loot-width: clamp(8.3rem,15vw,10.3rem); }
#arena-repair-consequence { color: var(--arena-muted); font: 630 .71rem/1.18 var(--arena-ui); }
.arena[data-gear-docked] .arena-board > .arena-loot-stage { grid-area: 2 / 1; }
.arena[data-loot-stage] .arena-dock:not(:has(.arena-command)) { grid-template-rows: minmax(0,1fr); }
@media (max-width: 780px) and (orientation: portrait) {
  .arena-loot-stage { --loot-width: clamp(5.55rem,28.4vw,8.1rem); --loot-art: clamp(3.3rem,13dvh,6.9rem); }
  .arena-loot-head { gap: .42rem; }
  .arena-loot-head h2 { font-size: clamp(1.1rem,4.45vw,1.82rem); }
  .arena-loot { gap: .34rem; }
  .arena-loot-card { padding: .24rem; }
  .arena-loot-card-name { font-size: .74rem; padding-inline: .22rem; }
}
@media (max-width: 365px) and (orientation: portrait) {
  .arena-loot-stage { --loot-width: max(5.55rem,29vw); --loot-art: clamp(3.35rem,12dvh,5.9rem); }
  .arena-loot-head { grid-template-columns: minmax(0,1fr) auto; }
  .arena-loot-seal { display: none; }
  .arena-loot-card { padding-inline: .16rem; }
  .arena-loot-card-name { padding-inline: .18rem; }
  .arena-loot-card-type { grid-template-columns: minmax(0,1fr) auto; }
  .arena-loot-card-type .icon:first-child { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .arena-loot-stage { --loot-width: clamp(6.45rem,14.2vw,7.7rem); --loot-art: clamp(2.45rem,12.8dvh,5.3rem); gap: .34rem; }
  .arena-loot-head h2 { font-size: 1.25rem; }
  .arena-loot-seal { width: 36px; }
  .arena-loot-card-name { font-size: .74rem; }
  .arena-loot-resume-short { display: inline; }
  .arena-loot-continuation { display: none; }
}
@media (max-width: 780px) and (orientation: portrait) {
  .arena-repair-stage { --loot-width: min(39vw,9.1rem); }
}
@media (max-width: 365px) and (orientation: portrait) {
  .arena-repair-stage { gap: .48rem; }
  .arena-repair-stage .arena-loot-head { gap: .18rem .4rem; }
  .arena-repair-stage .arena-loot-copy { display: contents; }
  .arena-repair-stage .arena-loot-source { grid-area: 1 / 1; }
  .arena-repair-stage .arena-countdown { grid-area: 1 / 2; }
  .arena-repair-stage :is(h2,#arena-repair-summary,#arena-repair-consequence) { grid-column: 1 / -1; }
}
@media (max-width: 380px) and (max-height: 660px) and (orientation: portrait) {
  .arena-repair-stage { --loot-art: max(2.25rem,7dvh); gap: .22rem; }
  .arena-repair-stage .arena-loot { padding-block-end: .3rem; }
  .arena-repair-stage .arena-loot-card-name { min-block-size: 2.15rem; padding-block: .16rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .arena-repair-stage { --loot-width: clamp(7.25rem,17vw,8.5rem); }
  .arena-repair-stage .arena-loot { padding-block-end: .22rem; }
}
body[data-text="large"] .arena-loot-copy small, body[data-text="large"] .arena-loot-card-name { font-size: .9rem; }
.arena-victim-loot .arena-loot-blind { --loot-edge: oklch(74% .048 303); --loot-frame: oklch(26% .043 303); }
.arena-victim-loot .arena-loot-blind .arena-loot-card-type { display: block; }
.arena-victim-loot .arena-loot-card-back {
  display: grid;
  place-items: center;
  color: oklch(88% .035 300);
  border: 1px solid var(--loot-edge);
  outline: 1px solid oklch(66% .061 303 / .58);
  outline-offset: -5px;
  background: repeating-linear-gradient(135deg, transparent 0 7px, oklch(76% .06 300 / .11) 7px 8px), radial-gradient(ellipse at 50% 40%, oklch(43% .055 306), oklch(21% .033 304) 76%);
}
.arena-victim-loot .arena-loot-card-back .icon { width: clamp(1.25rem,4vw,2.15rem); height: auto; }
.arena-victim-loot .arena-loot-blind .arena-loot-card-name { background: oklch(85% .032 301); }
.arena-victim-loot .arena-loot-blind .arena-loot-pick { background: oklch(29% .045 303); color: oklch(91% .034 301); }
.arena-victim-loot .arena-loot-blind .arena-loot-pick:is(:hover:not(:disabled),:focus-visible) { background: var(--loot-edge); color: oklch(20% .038 301); }
@media (max-width: 780px) and (orientation: portrait) {
  .arena-victim-loot { --loot-width: clamp(5.25rem,22vw,8.1rem); }
}
@media (max-width: 380px) and (max-height: 660px) and (orientation: portrait) {
  .arena-victim-loot { --loot-art: max(2.25rem,8.5dvh); gap: .24rem; }
  .arena-victim-loot .arena-loot-card-name { min-block-size: 2.2rem; padding-block: .16rem; }
  .arena-victim-loot .arena-loot { padding-block-end: .3rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .arena-victim-loot .arena-loot { padding-block-end: .22rem; }
}
.arena .result { align-self: center; justify-self: center; min-width: 0; max-width: min(100%,42rem); }
.arena .result h2 { font-family: var(--arena-display); overflow-wrap: anywhere; }

.arena.table[data-match-finished="true"] { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); }
.arena[data-match-finished="true"] .arena-board { grid-column: 1; min-height: 0; }
.match-result { display: grid; grid-template-rows: minmax(0,1fr) auto; min-width: 0; min-height: 0; }
.match-result-scroll { min-height: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ab8cb8 #181322; }
.match-result-scroll:focus-visible { outline-offset: -3px; }
.match-result-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: center; gap: clamp(1.5rem,6vw,6rem); width: min(100%,77rem); min-height: 100%; margin-inline: auto; padding: clamp(1.1rem,4.5dvh,3.35rem) clamp(1rem,4vw,3rem); }
.match-victory { display: grid; justify-items: center; align-content: center; gap: .85rem; min-width: 0; text-align: center; padding-block: .5rem 1rem; }
.match-result-kicker { display: flex; gap: .56rem; align-items: center; font: 760 .7rem/1.2 var(--arena-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--arena-ember); }
.match-result-kicker span { width: .37rem; height: .37rem; background: currentColor; transform: rotate(45deg); }
.match-victory-mark { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; max-width: 100%; padding: .35rem .2rem; color: var(--arena-ember); }
.match-champion { display: grid; place-items: center; width: 7rem; aspect-ratio: .92; padding: .28rem; border: 1px solid var(--arena-ember); border-radius: .6rem .6rem 34% 34%; background: oklch(23% .034 303); box-shadow: 0 .55rem 1.35rem #0f0c19b9, 0 0 1.5rem #f2936038; overflow: hidden; }
.match-champion .avatar { width: 100%; height: 100%; border: 1px solid var(--arena-trim); border-radius: .38rem .38rem 33% 33%; }
.match-champion > .icon { width: 45%; height: 45%; }
.match-victory h2 { position: relative; max-width: 15ch; color: var(--arena-paper); font: 800 clamp(2.05rem,4.9vw,4.6rem)/1.02 var(--arena-display); letter-spacing: -.026em; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 18px #0d0912; }
.match-victory h2:focus-visible { outline: 2px solid transparent; outline-offset: .25rem; }
.match-victory h2:focus-visible::after { content: ''; position: absolute; inset: auto 40% -.3rem; height: 2px; background: var(--arena-ice); }
.match-verdict { display: flex; align-items: center; gap: .32rem; color: var(--arena-ice); font-size: .82rem; font-weight: 730; }
.match-verdict .icon { width: .92rem; height: .92rem; }
.match-decision { display: grid; grid-template-columns: 3.6rem minmax(0,1fr); align-items: start; gap: .67rem; width: min(100%,24.5rem); min-width: 0; padding: .58rem .24rem .14rem; border-block-start: 1px solid var(--arena-trim); text-align: start; }
.match-decision-mark { display: grid; place-items: center; width: 100%; min-height: 48px; aspect-ratio: 1; padding: 0; border: 1px solid var(--arena-trim); border-radius: .3rem; background: oklch(22% .045 313); box-shadow: 0 .3rem .7rem #100d1bc9; }
.match-decision-mark:is(:hover,:focus-visible) { border-color: var(--arena-ice); }
.match-decision-mark:focus-visible { outline-offset: 1px; }
.match-decision-mark img { width: 100%; height: 100%; object-fit: cover; }
.match-decision-copy { min-width: 0; overflow-wrap: anywhere; }
.match-decision h3 { color: var(--arena-ember); font: 800 .7rem/1.2 var(--arena-ui); letter-spacing: .07em; text-transform: uppercase; }
.match-decision p { margin-top: .2rem; color: var(--arena-paper); font-size: .82rem; line-height: 1.22; }
.match-decision dl { display: flex; flex-wrap: wrap; gap: .24rem .7rem; margin: .25rem 0 0; }
.match-decision dl > div { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .12rem .28rem; min-width: 0; }
.match-decision dt { color: var(--arena-muted); font-size: .71rem; }
.match-decision dd { display: inline-flex; align-items: baseline; gap: .16rem; margin: 0; color: var(--arena-ice); font: 800 1.12rem/1 var(--arena-numeric); white-space: nowrap; }
.match-decision dd > span { font: 730 .66em/1 var(--arena-ui); }
.match-report { display: grid; align-content: center; min-width: 0; gap: 1.35rem; }
.match-report h3 { color: var(--arena-paper); font: 740 1.02rem/1.2 var(--arena-display); letter-spacing: .025em; }
.match-report ol, .match-report ul { list-style: none; margin: .45rem 0 0; padding: 0; }
.match-moments li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .65rem; padding: .52rem .27rem; border-bottom: 1px solid var(--arena-stroke); }
.match-moments li > .icon { color: var(--arena-ember); width: 1.22rem; height: 1.22rem; margin-top: .18rem; }
.match-moments li strong { color: var(--arena-paper); font-size: .8rem; }
.match-moments p { color: var(--arena-muted); font-size: .76rem; line-height: 1.42; overflow-wrap: anywhere; }
.match-moments .match-history { min-height: 48px; margin-top: .2rem; padding-inline: .25rem; }
.match-standing li + li { border-top: 1px solid var(--arena-stroke); }
.match-seat { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .5rem; width: 100%; min-height: 48px; align-items: center; border: 1px solid transparent; border-radius: .16rem; background: transparent; color: var(--arena-paper); padding: .17rem .31rem; text-align: left; font-weight: 700; }
.match-seat:hover { border-color: var(--arena-ice); background: #231a2c; }
.match-seat > span:nth-child(2) { overflow-wrap: anywhere; font-size: .79rem; line-height: 1.15; }
.match-seat .avatar { width: 2.2rem; height: 2.2rem; border-radius: .25rem; }
.match-seat small { display: block; margin-top: .14rem; color: var(--arena-muted); font-size: .65rem; }
.match-seat[data-winner="true"] small, .match-seat[data-winner="true"] .match-seat-level { color: var(--arena-ice); }
.match-seat-level { padding-inline: .25rem; font: 800 1.45rem/.95 var(--arena-numeric); }
.match-result-dock { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; padding: .58rem clamp(1rem,5vw,4.65rem) max(.58rem,env(safe-area-inset-bottom)); border-top: 1px solid var(--arena-trim); background: #14101cef; }
.match-result-dock > p { color: var(--arena-muted); font-size: .76rem; }
.match-result-actions { display: flex; gap: .38rem; flex-wrap: wrap; }
.match-result-actions .btn { min-height: 48px; }
.match-result-actions .primary { background: var(--arena-ember); border-color: var(--arena-ember); }
body[data-text="large"] :is(.match-moments p,.match-decision p,.match-decision dt,.match-result-dock > p,.match-seat > span:nth-child(2)) { font-size: .92rem; }
@media (max-width: 660px) {
  .match-result-layout { grid-template-columns: minmax(0,1fr); align-content: start; gap: .8rem; padding: .75rem clamp(1rem,5.2vw,1.5rem) 1.1rem; }
  .match-victory { gap: .5rem; padding-block: 0 .6rem; }
  .match-victory h2 { max-width: 20ch; font-size: clamp(1.75rem,7.4vw,2.75rem); }
  .match-champion { width: 3.8rem; padding: .18rem; }
  .match-decision { grid-template-columns: 3rem minmax(0,1fr); padding-top: .43rem; }
  .match-report { border-block-start: 1px solid var(--arena-trim); padding-block-start: .85rem; gap: 1.1rem; }
  .match-standing ul { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,max(8.2rem,46%)),1fr)); gap: 0 .52rem; }
  .match-standing li, .match-standing li + li { border-top: 0; border-bottom: 1px solid var(--arena-stroke); }
  .match-moments li { padding-block: .43rem; }
  .match-result-dock { align-items: stretch; flex-direction: column; gap: .28rem; padding-inline: .65rem; }
  .match-result-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .match-result-actions .btn { padding-inline: .6rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .match-result-layout { display: grid; grid-template-columns: minmax(0,.74fr) minmax(0,1.26fr); gap: 1.2rem; padding-block: .7rem; }
  .match-victory { gap: .34rem; padding-block: 0; }
  .match-champion { width: 3rem; padding: .18rem; }
  .match-victory h2 { font-size: clamp(1.4rem,3.3vw,2.35rem); }
  .match-decision { grid-template-columns: 3rem minmax(0,1fr); gap: .38rem; padding-top: .35rem; }
  .match-report { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); border: 0; padding-block-start: 0; gap: .8rem; }
  .match-moments li { padding-block: .4rem; }
  .match-result-dock { padding-inline: 1rem; }
}

.arena.table[data-tutorial-state]:not([data-tutorial-state="complete"]) { grid-template-rows: auto auto auto minmax(0,1fr) auto; }
.arena-objective { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .75rem; width: min(calc(100% - 2rem),45rem); min-height: 4.65rem; margin: .18rem auto 0; padding: .45rem .65rem .48rem; border: 1px solid #af87977b; border-radius: .27rem; background: #181222e8; color: var(--arena-paper); box-shadow: 0 .35rem .7rem #09061262; }
.arena-objective[data-passed="true"] { border-color: var(--arena-ice); }
.arena-objective-mark { display: grid; place-items: center; width: 2.48rem; aspect-ratio: 1; border-radius: .18rem; border: 1px solid var(--arena-trim); color: var(--arena-ember); background: #281b29; }
.arena-objective[data-passed="true"] .arena-objective-mark { color: var(--arena-ice); border-color: var(--arena-ice); background: #1b2830; }
.arena-objective-body { display: grid; min-width: 0; gap: .14rem; }
.arena-objective-eyebrow { color: var(--arena-ember); font-size: .65rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.arena-objective[data-passed="true"] .arena-objective-eyebrow { color: var(--arena-ice); }
.arena-objective h2 { font: 740 1.05rem/1.15 var(--arena-display); }
.arena-objective-copy { color: var(--arena-muted); font-size: .77rem; line-height: 1.35; }
.arena-objective .arena-objective-more { min-width: 2.75rem; min-height: 2.75rem; color: var(--arena-paper); background: #1c1728; border: 1px solid var(--arena-stroke); }
.arena-objective .arena-objective-more:hover { border-color: var(--arena-ice); }
.arena-tutorial-finish .action-row { margin-top: .7rem; justify-content: center; }
.arena-tutorial-finish .action-row .btn { min-width: min(100%,10rem); }
.arena-tutorial-finish[data-party-seat="true"] .action-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: min(100%,28rem); gap: .35rem; }
.arena-tutorial-finish[data-party-seat="true"] .action-row .btn { min-width: 0; min-height: 48px; white-space: normal; overflow-wrap: anywhere; }
.tutorial-loadout { display: grid; place-content: center; justify-items: center; gap: .65rem; width: min(100%,35rem); height: 100%; margin-inline: auto; padding: .4rem .65rem; text-align: center; }
.tutorial-loadout h2 { display: flex; align-items: center; gap: .45rem; color: var(--arena-paper); font: 760 .9rem/1.2 var(--arena-ui); }
.tutorial-loadout h2 .icon { color: var(--arena-ember); }
.tutorial-equation { display: grid; grid-template-columns: minmax(3.15rem,6rem) auto minmax(6.35rem,10rem) auto minmax(3.15rem,6rem); align-items: center; gap: clamp(.3rem,1.3vw,.85rem); width: min(100%,27rem); }
.tutorial-token { display: grid; place-items: center; gap: .18rem; aspect-ratio: 1; align-content: center; border: 1px solid var(--arena-trim); border-radius: 50%; color: var(--arena-ember); background: var(--arena-night); box-shadow: inset 0 0 0 .18rem var(--arena-stroke), 0 .35rem .7rem oklch(11% .02 285 / .75); }
.tutorial-token[data-total="true"] { color: var(--arena-ice); border-color: var(--arena-ice); }
.tutorial-token strong { font: 800 clamp(2.1rem,5.5vw,4rem)/.9 var(--arena-numeric); }
.tutorial-token span { color: var(--arena-paper); font-size: .74rem; font-weight: 760; }
.tutorial-operator { color: var(--arena-paper); font: 760 1.3rem/1 var(--arena-numeric); }
.tutorial-equipment { display: grid; min-width: 0; }
.tutorial-equipment .card { min-height: 0; padding: .3rem; border-color: var(--arena-trim); box-shadow: 0 .35rem .8rem oklch(11% .02 285 / .8); }
.tutorial-equipment .card .card-name { padding-block: .3rem .1rem; }
.tutorial-equipment .card .card-kind { margin-block: 0; }
.tutorial-rack { display: grid; gap: .3rem; }
.tutorial-rack p { color: var(--arena-paper); font-size: .74rem; font-weight: 720; }
.tutorial-rack p strong { color: var(--arena-ice); font: 800 1.25rem/1 var(--arena-numeric); }
.tutorial-rack-cards { display: grid; grid-template-columns: repeat(2,minmax(48px,1fr)); gap: .25rem; }
.tutorial-rack-card { padding: .18rem; min-height: 48px; border: 1px solid var(--arena-trim); border-radius: .25rem; background: var(--paper); }
.tutorial-rack-card .card-art { aspect-ratio: 1; }
.tutorial-rack-card .badge-number { font-size: .8rem; }
.tutorial-open-slot { display: grid; place-items: center; align-content: center; gap: .2rem; aspect-ratio: 4/5; padding: .25rem; border: 1px dashed var(--arena-trim); border-radius: .33rem; color: var(--arena-muted); background: var(--arena-night); }
.tutorial-open-slot strong { color: var(--arena-paper); font: 800 1.65rem/1 var(--arena-numeric); }
.tutorial-open-slot span { font-size: .72rem; }
.arena .tutorial-loadout-link { min-height: 48px; }
.arena[data-tutorial-step="door"][data-door-on-board] .arena-phase > :is(h2,p),
.arena[data-tutorial-step="door"] .arena-threshold-command .arena-window { display: none; }
@media (max-height: 700px) {
  .tutorial-equation { width: min(100%,21rem); grid-template-columns: minmax(3.15rem,4.8rem) auto minmax(6.35rem,7.5rem) auto minmax(3.15rem,4.8rem); }
  .tutorial-loadout { gap: .28rem; }
}
@media (max-height: 460px) and (orientation: landscape) {
  .tutorial-equation { grid-template-columns: 3.75rem auto 6.8rem auto 3.75rem; width: auto; }
  .tutorial-token strong { font-size: 2.3rem; }
  .tutorial-equipment .card-art { aspect-ratio: 2/1; }
  .tutorial-open-slot { min-height: 5rem; aspect-ratio: auto; }
}
.arena[data-tutorial-state] .arena-foes { --monster-width: clamp(5rem,calc((100cqh - .75rem) * .73),14.3rem); }
.arena[data-tutorial-state] .arena-foes:not([data-count="1"]) { --monster-width: clamp(5rem,calc((100cqh - .75rem) * .73),10.8rem); }

.arena-dock { position: relative; z-index: 2; min-width: 0; padding: 0 max(1.1rem,env(safe-area-inset-right)) max(.54rem,env(safe-area-inset-bottom)) max(1.1rem,env(safe-area-inset-left)); background: linear-gradient(180deg,transparent,#10171fce 68%,#0c131b); }
.arena-command { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .3rem .55rem; width: fit-content; max-width: 100%; margin: 0 auto .33rem; padding: .32rem .45rem .46rem; }
.arena-window { display: flex; justify-content: center; align-items: center; gap: .57rem; min-width: 0; grid-column: 1 / -1; }
.arena-command:has(.arena-pending) .arena-window { grid-column: 1; }
.arena-window-copy { display: grid; gap: .09rem; min-width: 0; }
.arena-window p { color: var(--arena-paper); font-size: .78rem; line-height: 1.17; font-weight: 780; }
.arena-window small { display: block; max-width: 32ch; color: var(--arena-muted); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-window #arena-guidance-note { max-width: 36ch; color: var(--arena-paper); font-size: .73rem; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
body[data-text="large"] .arena-window #arena-guidance-note { font-size: .8rem; }
.arena-window-note { position: relative; min-inline-size: 9ch; }
.arena-window-note :is(.arena-feedback-caption,.arena-send-status) { position: absolute; inset: 0; visibility: hidden; font-weight: 780; }
.arena-window-note .arena-feedback-caption { color: var(--arena-ice); }
.arena-window-note .arena-send-status { color: var(--arena-ember); }
.arena-window-note[data-sending="true"] .arena-window-default,
.arena-window-note[data-feedback="true"]:not([data-critical="true"]) .arena-window-default { opacity: 0; }
.arena-window-note[data-feedback="true"]:not([data-sending="true"],[data-critical="true"]) .arena-feedback-caption,
.arena-window-note[data-sending="true"] .arena-send-status { visibility: visible; }
.arena-countdown { display: inline-flex; gap: .3rem; align-items: center; flex: none; padding: .2rem .48rem; border: 1px solid #a8c6bd61; border-radius: 1rem; background: #111e26; color: var(--arena-ice); }
.arena-countdown .icon { width: .83rem; height: .83rem; }
.arena-countdown .clock { color: inherit; font: 800 1.18rem/1.05 var(--arena-numeric); }
.arena-countdown .clock.urgent { color: var(--arena-ember); }
.arena .arena-window .arena-trade-review { flex: none; min-width: 48px; min-height: 48px; padding: .36rem .46rem; border-color: var(--arena-ice); background: #1b2028; color: var(--arena-paper); font-size: .73rem; font-weight: 780; }
.arena-commands { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .4rem; min-width: 0; }
.arena-commands:empty { display: none; }
.arena-commands .btn, .arena-command .arena-pending { min-height: 2.78rem; color: var(--arena-paper); border: 1px solid #a6aea164; border-radius: .47rem; background: #16232b; font-size: .82rem; }
.arena-commands .btn:not(.primary):hover, .arena-command .arena-pending:hover { background: #263941; border-color: var(--arena-paper); }
.arena-commands .btn.primary { min-width: 10.6rem; padding-inline: .9rem; gap: .46rem; background: linear-gradient(180deg,#ffc68f,#f19a63); border-color: #ffd1a4; color: #301c21; box-shadow: inset 0 0 0 1px #edb47d,0 .19rem #734b3d,0 .34rem .8rem #0e1019; font-weight: 820; }
.arena-commands .btn.primary:hover { background: #ffd0a4; border-color: #ffd0a4; }
.arena-commands .btn.primary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1px #edb47d,0 1px #734b3d; }
.arena-commands .btn .icon { width: 1rem; height: 1rem; }
.arena-threshold-command { width: min(100%,30rem); }
.arena-threshold-command .arena-window { grid-row: 2; justify-content: center; }
.arena-threshold-command .arena-commands { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; }
.arena-threshold-command .arena-commands > :first-child { grid-column: 2; }
.arena-threshold-command .arena-commands > :nth-child(2) { justify-self: start; }
.arena-commands .btn.arena-door-action,
.arena-commands .btn.arena-door-action:is(:hover,:active) {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: .14rem .28rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.arena-door-action .arena-phase-mark { margin-block: 0 .33rem; }
.arena-door-action .arena-phase-mark .icon { width: 1.8rem; height: 1.8rem; }
.arena-door-label {
  display: flex;
  gap: .4rem;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: .36rem .76rem;
  border: 1px solid #ffd1a4;
  border-radius: .48rem;
  color: #301c21;
  background: linear-gradient(180deg,#ffc68f,#f19a63);
  box-shadow: 0 .17rem #734b3d;
}
.arena-door-action:is(:hover,:focus-visible) .arena-phase-mark { border-color: #ffe2ae; }
.arena-door-action:is(:hover,:focus-visible) .arena-door-label { background: #ffd0a4; }
.arena-pending span { max-width: 17ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena .arena-hand { max-width: 74rem; margin: 0 auto; padding: 0; min-width: 0; }
.arena-hand-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2.5fr) minmax(0,1fr); align-items: center; gap: .35rem; border-top: 1px solid #94809b44; min-height: 2.65rem; }
.arena-hand-label { display: flex; align-items: center; gap: .38rem; white-space: nowrap; }
.arena-hand-label h2 { color: var(--arena-paper); font-weight: 750; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.arena-hand-label h2 span { display: inline-grid; place-items: center; min-width: 1.15rem; min-height: 1.11rem; padding: .08rem .14rem; margin-left: .17rem; border: 1px solid var(--arena-trim); color: var(--arena-ice); font-size: .63rem; }
.arena-hand-label small { color: var(--arena-muted); font-size: .65rem; }
.arena .arena-kit { grid-column: 3; justify-self: end; min-height: 2.4rem; padding: .27rem .56rem; border-color: transparent; background: transparent; font-size: .72rem; }
.arena .arena-kit .icon { color: var(--arena-ice); }
.arena .hand-strip.arena-hand-strip {
  display: flex;
  justify-content: safe center;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  gap: .05rem;
  margin: 0 -.1rem;
  padding: .54rem .72rem .36rem;
  overflow: auto hidden;
  scroll-padding-inline: .72rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #9b86a8 #191324;
  list-style: none;
}
.arena-hand-slot { --fan-angle: 0deg; --fan-lift: 0px; position: relative; display: grid; flex: 0 0 clamp(5rem,9.6vw,7.7rem); margin-inline: -.13rem; scroll-snap-align: start; }
.arena-hand-slot.fan-0 { --fan-angle:-4deg; --fan-lift:4px; }
.arena-hand-slot.fan-1 { --fan-angle:-3deg; --fan-lift:2px; }
.arena-hand-slot.fan-2 { --fan-angle:-1.7deg; --fan-lift:1px; }
.arena-hand-slot.fan-3 { --fan-angle:-.6deg; }
.arena-hand-slot.fan-5 { --fan-angle:.7deg; }
.arena-hand-slot.fan-6 { --fan-angle:1.7deg; --fan-lift:1px; }
.arena-hand-slot.fan-7 { --fan-angle:3deg; --fan-lift:2px; }
.arena-hand-slot.fan-8 { --fan-angle:4deg; --fan-lift:4px; }
.arena .arena-hand-slot .card {
  position: relative;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: clamp(6.75rem,14.2dvh,8.4rem);
  padding: .27rem;
  border: 1px solid #b69a92;
  border-radius: .3rem;
  color: #281724;
  background: linear-gradient(146deg,#f0e6d5,#d6c1a5);
  box-shadow: 0 2px 7px #090611;
  transform: translateY(var(--fan-lift)) rotate(var(--fan-angle));
  transform-origin: 50% 100%;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.arena .arena-hand-slot:hover, .arena .arena-hand-slot:focus-within { z-index: 2; }
.arena .arena-hand-slot .card:hover, .arena .arena-hand-slot .card:focus-visible { transform: translateY(-5px); border-color: #ffd7b4; box-shadow: 0 0 0 1px #f3a881,0 3px 11px #090611; }
.arena-hand-slot[data-ready="true"] .card { border-color: #e49b76; box-shadow: 0 0 0 1px #8d584b,0 0 .47rem #d9885d58; }
.arena-hand-slot .card-art { width: 100%; height: 49%; aspect-ratio: auto; flex: 0 0 auto; border: 1px solid #59384c8c; }
.arena-hand-slot .card-art img { object-position: 50% 42%; }
.arena-hand-slot .badge-number { font: 800 .91rem/1.1 var(--arena-numeric); color: #291621; background: #f8e3cf; }
.arena .arena-hand-slot .card-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: .2rem .06rem .03rem; font: 800 clamp(.62rem,.87vw,.76rem)/1.12 var(--arena-display); hyphens: auto; overflow-wrap: anywhere; }
.arena .arena-hand-slot .card-kind { display: block; color: #4c3343; max-width: 100%; margin: auto 0 0; padding: 0 .08rem; font-size: .57rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena .arena-hand-slot .usable { color: #612a26; font-size: .56rem; }
.arena-empty-hand { min-height: 3.75rem; display: grid; place-items: center; color: var(--arena-muted); font-size: .8rem; }
.arena .arena-hand[data-list="true"] .arena-hand-strip { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); align-items: stretch; gap: .35rem; max-block-size: min(18dvh,11.75rem); min-block-size: 3.75rem; overflow: hidden auto; scroll-snap-type: none; scroll-padding-block: .35rem; }
.arena .arena-hand[data-list="true"] .arena-hand-slot { margin: 0; }
.arena .arena-hand[data-list="true"] .card { height: auto; min-block-size: 48px; justify-content: center; gap: .18rem; transform: none; padding: .43rem .62rem; }
.arena .arena-hand[data-list="true"] .card-art { display: none; }
.arena .arena-hand[data-list="true"] :is(.card-name,.card-kind) { display: block; padding: 0; overflow: visible; overflow-wrap: anywhere; white-space: normal; }
.arena .arena-hand[data-list="true"] .card-name { font: 760 .82rem/1.2 var(--arena-ui); }
.arena .arena-hand[data-list="true"] .card-kind { font-size: .69rem; }
.arena .arena-hand[data-list="true"] .card-list-stat { display: inline; }
.arena .arena-hand[data-list="true"] .usable { font-size: inherit; }
body[data-contrast="true"] .arena { --arena-stroke:#c0a6d3; --arena-trim:#dec4a1; --arena-muted:#e6dced; }
body[data-contrast="true"] .arena::before { background: #100e18cc; }
body[data-text="large"] .arena { --arena-muted:#e2d9e9; }
body[data-text="large"] .arena-hand-slot .card-name, body[data-text="large"] .arena-window p, body[data-text="large"] .arena-commands .btn { font-size: .82rem; }
body[data-text="large"] .arena-hand-slot .card-kind, body[data-text="large"] .arena-window small { font-size: .7rem; }
body[data-text="large"] .arena-objective h2 { font-size: 1.12rem; }
body[data-text="large"] .arena-objective-copy { font-size: .92rem; }

@media (max-width: 780px) {
  .arena.table { background-image: url('/assets/arena-mobile-v2.webp'); }
  .arena-supply { display: none; }
  .arena-event-line { display: none; }
  .arena-objective { gap: .43rem; width: calc(100% - 1.28rem); min-height: 0; padding: .38rem .43rem .41rem; }
  .arena-objective-mark { display: none; }
  .arena-objective { grid-template-columns: minmax(0,1fr) auto; }
  .arena-objective-eyebrow { font-size: .57rem; }
  .arena-objective h2 { font-size: .89rem; }
  .arena-objective-copy { font-size: .72rem; line-height: 1.3; }
  .arena[data-tutorial-state] .arena-foes { --monster-width: min(49vw, max(5rem, calc((100cqh - .75rem) * .73)), 12.5rem); }
  .arena[data-tutorial-state] .arena-foes:not([data-count="1"]) { --monster-width: min(31vw, max(4.55rem, calc((100cqh - .75rem) * .73)), 8.8rem); }
  .arena[data-tutorial-state] .arena-foes[data-count="2"] { --monster-width: min(27vw, max(4.55rem, calc((100cqh - .75rem) * .73)), 8.8rem); }
  .arena-hud.table-head { min-height: 3.55rem; padding-inline: max(.65rem,env(safe-area-inset-left)) max(.65rem,env(safe-area-inset-right)); }
  .arena-mark { font-size: 1.18rem; }
  .arena-mark img { width: 1.43rem; height: 1.43rem; }
  .arena-tools.table-tools { gap: .15rem; }
  .arena .arena-tools .icon-btn { min-width: 2.73rem; min-height: 2.73rem; }
  .arena-seats { padding: .28rem .3rem .24rem; }
  .arena .arena-seats .player-list { gap: clamp(.22rem,1.6vw,.66rem); }
  .arena-seat { flex-direction: column; gap: .26rem; min-width: 2.92rem; padding: .1rem .14rem; text-align: center; }
  .arena-emblem { width: 2.2rem; height: 2.2rem; }
  .arena-emblem > .icon { width: 1.2rem; height: 1.2rem; }
  .arena-seat-text { gap: .035rem; }
  .arena-seat-text strong { max-width: 7.6ch; font-size: .64rem; }
  .arena-seat-status { justify-content: center; font-size: .58rem; line-height: .95; }
  .arena-seat-status .icon { width: .74rem; height: .74rem; }
  .arena .arena-foes .arena-monster { padding: .28rem; }
  .arena-monster-name { font-size: .75rem; }
  .arena-foes:not([data-count="1"]) .arena-monster-name { font-size: .69rem; }
  .arena-stakes-button { min-height: 2.67rem; font-size: .69rem; }
  .arena-guide.btn { bottom: auto; top: .13rem; left: .63rem; min-width: 2.75rem; min-height: 2.75rem; padding-inline: .4rem; }
  .arena-guide span { display: none; }
  .arena-dock { padding-inline: max(.68rem,env(safe-area-inset-left)) max(.68rem,env(safe-area-inset-right)); padding-bottom: max(.4rem,env(safe-area-inset-bottom)); }
  .arena-command { width: min(100%,31rem); gap: .3rem; padding: .25rem 0 .42rem; }
  .arena-window { gap: .4rem; justify-content: space-between; grid-column: 1 / -1; padding: 0 .1rem .1rem; }
  .arena-threshold-command .arena-window { justify-content: center; }
  .arena-window p { font-size: .73rem; line-height: 1.15; }
  .arena-window small { font-size: .67rem; line-height: 1.2; }
  .arena-countdown .clock { font-size: 1.12rem; }
  .arena-command .arena-pending { grid-column: 2; grid-row: 1; padding-inline: .37rem; min-height: 1.8rem; font-size: .62rem; }
  .arena-command:has(.arena-pending) .arena-window { grid-column: 1; }
  .arena-command .arena-pending span { max-width: 13ch; }
  .arena-commands { grid-column: 1 / -1; gap: .3rem; }
  .arena-commands:empty { display: none; }
  .arena-commands .btn, .arena-commands .btn.primary { min-width: 0; flex: 1 1 auto; font-size: .78rem; padding: .38rem .45rem; }
  .arena-commands .btn.primary { flex-grow: 1.7; }
  .arena-commands .icon-btn { min-width: 2.75rem; }
  .arena-hand-heading { min-height: 2.42rem; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) auto; gap: .21rem; }
  .arena-hand-label h2 { font-size: .66rem; }
  .arena .arena-kit { min-width: 2.55rem; min-height: 2.5rem; }
  .arena-kit span { display: none; }
  .arena .hand-strip.arena-hand-strip { padding: .42rem .31rem .25rem; gap: .3rem; scroll-padding-inline: .31rem; }
  .arena-hand-slot { flex-basis: 5.7rem; margin-inline: 0; --fan-angle:0deg !important; --fan-lift:0px !important; }
  .arena .arena-hand-slot .card { height: 6.65rem; }
  .arena .arena-hand-slot .card-name { font-size: .63rem; }
}
@media (max-width: 515px) {
  .arena-mark span, .arena-tools .arena-emote, .arena-turn .arena-round { display: none; }
  .arena-extra-long { display: none; }
  .arena-phase-title { display: none; }
  .arena-phase-title-short { display: inline; }
  .arena-turn p span + span::before { content: none; }
  .arena .arena-turn h1 { font-size: .76rem; letter-spacing: .025em; }
  .arena .arena-turn p { font-size: .58rem; }
  .arena-hud.table-head { grid-template-columns: minmax(2.3rem,1fr) minmax(0,1.5fr) auto; }
}
@media (max-width: 365px) {
  .arena .arena-tools .icon-btn { min-width: 2.55rem; }
  .arena .arena-turn h1 { font-size: .69rem; }
  .arena-seat { min-width: 2.72rem; }
  .arena .arena-seat { gap: .17rem; }
  .arena-seat .arena-emblem { width: 1.86rem; height: 1.86rem; }
  .arena-monster-top > span { font-size: .55rem; }
  .arena-monster-top .icon { width: .68rem; height: .68rem; }
  .arena .arena-hud.table-head { padding-inline: max(.36rem,env(safe-area-inset-left)) max(.36rem,env(safe-area-inset-right)); }
  .arena .arena-seats .player-list { padding-inline: .25rem; }
  .arena-commands .btn, .arena-commands .btn.primary { font-size: .72rem; }
}
@media (max-width: 780px), (max-height: 520px) and (orientation: landscape) {
  .arena .arena-seats .player-list[data-seats="6"] { display: grid; grid-template-columns: repeat(6,minmax(48px,1fr)); gap: .14rem; max-width: 25rem; padding-inline: .13rem; }
  .arena .player-list[data-seats="6"] .arena-seat { min-inline-size: 48px; width: 100%; padding-inline: .04rem; }
  .arena .player-list[data-seats="6"] .arena-seat-text, .arena .player-list[data-seats="6"] .arena-seat-text strong { max-width: 100%; }
  .arena .player-list[data-seats="6"] .arena-seat-status > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .arena .player-list[data-seats="6"] .arena-seat-status[data-secondary="true"] { visibility: hidden; }
  .arena-seat-metrics { margin-block-start: -.24rem; gap: .09rem; }
  .arena-seat-stat { padding: .055rem .09rem; gap: .07rem; }
  .arena-seat-stat b { font-size: .93rem; }
  .arena-seat-stat[data-wide="true"] b { font-size: .76rem; }
  .arena-seat-stat small > span, .arena-seat-status > span:first-child { display: none; }
  .arena-seat-stat small abbr, .arena-seat-status > span + span { display: inline; }
}
@media (max-height: 700px) {
  .arena .arena-hand-slot .card { height: 6.2rem; }
  .arena-phase-mark { width: 3.55rem; }
  .arena-phase-mark .icon { width: 1.82rem; height: 1.82rem; }
  .arena-phase-mark[data-symbol="door"] { width: clamp(4.55rem,13.5dvh,6.6rem); }
}
@media (max-width: 380px) and (max-height: 640px) and (orientation: portrait) {
  .arena .arena-foes .arena-monster { aspect-ratio: .92; gap: .14rem; }
  .arena-monster-top > span .icon { display: none; }
  .arena-monster-name { display: -webkit-box; flex: 0 0 auto; min-height: 0; padding: 0 .11rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font: 740 .66rem/1.12 var(--arena-ui); }
  .arena-foes:not([data-count="1"]) .arena-monster:not([data-refused="true"]) .arena-monster-top > span { font-size: 0; }
  .arena-foes:not([data-count="1"]) .arena-monster:not([data-refused="true"]) .arena-monster-top > span .icon { display: block; width: .9rem; height: .9rem; }
  .arena-foes:not([data-count="1"]) .arena-monster-name { font-size: .61rem; overflow-wrap: normal; -webkit-line-clamp: 2; }
}

.arena :is(.arena-mark,.arena-seat,.arena-tools .icon-btn,.arena-kit,.arena-commands .btn,.arena-extra,.arena-pending,.arena-stakes-button,.arena-guide,.arena-objective-more) { min-inline-size: 48px; min-block-size: 48px; }
.arena :is(.arena-seat,.arena-monster,.arena-score):focus-visible { outline-offset: -3px; }
.arena .arena-hand-strip .card:focus-visible { outline-color: #382440; outline-offset: -3px; }
body[data-text="large"] .arena .arena-hand[data-list="true"] .card-name { font-size: 1rem; }
body[data-text="large"] .arena .arena-hand[data-list="true"] .card-kind { font-size: .86rem; }
@media (max-width: 600px) {
  .arena .arena-hand[data-list="true"] .arena-hand-strip { grid-template-columns: minmax(0,1fr); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .arena.table { min-height: 320px; grid-template-columns: minmax(0,1fr) minmax(14rem,35%); grid-template-rows: auto auto minmax(0,1fr); background-image: url('/assets/arena-v2.webp'); }
  .arena.table[data-tutorial-state]:not([data-tutorial-state="complete"]) { grid-template-rows: auto auto auto minmax(0,1fr); }
  .arena .arena-hud { grid-column: 1 / -1; min-height: 0; padding-block: .17rem; }
  .arena-seats { grid-column: 1 / -1; padding-block: .17rem; }
  .arena .arena-seats .player-list[data-seats="6"] { max-width: 51rem; gap: .35rem; }
  .arena-seat { flex-direction: row; text-align: start; }
  .arena-seat-status { justify-content: start; }
  .arena-emblem { width: 1.95rem; height: 1.95rem; }
  .arena-objective { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0,1fr) auto; min-height: 0; width: min(calc(100% - 1.25rem),48rem); }
  .arena-objective-mark { display: none; }
  .arena-objective-copy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .arena .arena-board { grid-column: 1; }
  .arena-dock { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); min-height: 0; padding-inline: .55rem; background: linear-gradient(90deg,transparent,#10171fc9 28%); }
  .arena[data-tutorial-state]:not([data-tutorial-state="complete"]) .arena-dock { grid-row: 3 / 5; }
  .arena[data-phase="finished"] .arena-dock, .arena[data-tutorial-state="complete"] .arena-dock { grid-template-rows: minmax(0,1fr); }
  .arena[data-door-on-board="true"] .arena-dock { grid-template-rows: minmax(0,1fr); }
  .arena-threshold-command { max-width: 25rem; }
  .arena-threshold-command .arena-window { justify-content: center; }
  .arena .arena-threshold-command .arena-commands .btn { flex: none; }
  .arena-door-action .arena-phase-mark[data-symbol="door"] { width: 3.9rem; }
  .arena-command { width: 100%; gap: .27rem; padding: .3rem .15rem; }
  .arena-window { grid-column: 1 / -1; justify-content: space-between; }
  .arena-command:has(.arena-pending) .arena-window { grid-column: 1; }
  .arena-command .arena-pending { grid-column: 2; grid-row: 1; }
  .arena-commands { grid-column: 1 / -1; flex-wrap: wrap; gap: .25rem; }
  .arena-commands .btn, .arena-commands .btn.primary { min-width: 48px; flex: 1 1 auto; padding-inline: .38rem; }
  .arena .arena-hand { grid-area: auto; display: flex; flex-direction: column; width: 100%; min-height: 0; }
  .arena-hand-heading { grid-template-columns: minmax(0,1fr) auto; }
  .arena .arena-kit { grid-column: 2; }
  .arena .arena-hand .arena-hand-strip { flex: 1 1 auto; padding-block: .27rem; }
  .arena .arena-hand:not([data-list="true"]) .arena-hand-strip { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0,1fr); align-content: start; justify-content: stretch; gap: .3rem; overflow: hidden auto; scroll-snap-type: none; }
  .arena .arena-hand[data-list="true"] .arena-hand-strip { grid-template-columns: minmax(0,1fr); max-block-size: none; min-block-size: 0; }
  .arena-hand-slot { --fan-angle: 0deg !important; --fan-lift: 0px !important; }
  .arena .arena-hand:not([data-list="true"]) .arena-hand-slot { margin: 0; }
  .arena .arena-hand:not([data-list="true"]) .arena-hand-slot .card { display: grid; grid-template-columns: 2.25rem minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: .43rem; height: auto; min-height: 48px; padding: .32rem; }
  .arena .arena-hand:not([data-list="true"]) .arena-hand-slot .card-art { grid-row: 1 / 3; height: auto; aspect-ratio: 1; }
  .arena .arena-hand:not([data-list="true"]) .arena-hand-slot .card-name { display: block; overflow: visible; padding: 0; font: 760 .73rem/1.17 var(--arena-ui); }
  .arena .arena-hand:not([data-list="true"]) .arena-hand-slot .card-kind { overflow: visible; padding: 0; white-space: normal; }
  .arena-supply { display: none; }
  .arena-fight-caption span { font-size: .6rem; }
  .arena-score strong { font-size: clamp(1.95rem,8.4dvh,3rem); }
  .arena-score-label, .arena-score-caption { font-size: .68rem; }
  .arena .arena-foes, .arena .arena-foes:not([data-count="1"]),
  .arena[data-tutorial-state] .arena-foes, .arena[data-tutorial-state] .arena-foes:not([data-count="1"]) { --monster-width: clamp(4.15rem,calc(100cqh - .7rem),8.75rem); padding-block: .19rem; }
  .arena .arena-foes .arena-monster { aspect-ratio: .96; padding: .28rem; }
  .arena-monster-top > span { font-size: .57rem; }
  .arena-monster-top > span .icon { display: none; }
  .arena-monster-name { font-size: .66rem; }
  .arena-stakes { min-height: 0; }
  .arena-stakes-button { padding-block: .2rem; }
  .arena-contract { margin-block-start: .1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .arena .arena-hand-slot .card, .arena .arena-hand-slot .card:hover, .arena .arena-hand-slot .card:focus-visible { transform: none; }
}
body[data-motion="true"] .arena .arena-hand-slot :is(.card, .card:hover, .card:focus-visible) { transform: none; }
@media (forced-colors: active) {
  .arena .arena-hand-strip .card:focus-visible { outline-color: Highlight; }
  .arena-seat[data-turn="true"] .arena-emblem, .arena-seat[data-help="true"] .arena-emblem { border-width: 2px; }
}

.arena-die { display: flex; align-items: center; gap: .58rem; min-width: 0; max-width: 100%; padding: .35rem .65rem .35rem .42rem; border: 1px solid var(--arena-trim); border-radius: .25rem; color: var(--arena-paper); background: #181222ee; text-align: left; }
.arena-die-face { display: grid; grid-template: repeat(3,1fr) / repeat(3,1fr); place-items: center; flex: none; width: 2.35rem; aspect-ratio: 1; padding: .23rem; color: #42273b; background: linear-gradient(155deg,#fff0dd,#dba180); border: 1px solid #f4d4b7; border-radius: .34rem; box-shadow: inset -2px -2px #7d514b73, 0 2px 5px #090612; }
.arena-die-face > .pip { display: block; width: 52%; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.arena-die-copy { min-width: 0; }
.arena-die-copy p { color: var(--arena-ember); font-size: .7rem; font-weight: 750; overflow-wrap: anywhere; }
.arena-die-copy dl { display: flex; gap: .3rem .64rem; flex-wrap: wrap; margin: 0; font-size: .67rem; line-height: 1.35; }
.arena-die-copy dl > div { display: flex; gap: .18rem; align-items: baseline; }
.arena-die-copy dt { color: var(--arena-muted); }
.arena-die-copy dd { margin: 0; font-weight: 800; }
.arena-die-copy dl > div:last-child dd { color: var(--arena-ice); }
.arena-stakes .arena-die { margin-top: .3rem; }
.arena-die-stage .arena-die { margin-block: .35rem; padding: .5rem .78rem .5rem .55rem; }
.arena-die-stage .arena-die-face { width: 4rem; padding: .4rem; }
.arena-die-stage .arena-die-copy p { font-size: .82rem; }
.arena-die-stage .arena-die-copy dl { margin-top: .17rem; font-size: .73rem; }

.arena .arena-flee-commands { display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; }
.arena-flee-targets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(45%,8rem),1fr); gap: .25rem; max-width: 100%; min-width: 0; overflow: auto hidden; scrollbar-width: thin; scroll-snap-type: x proximity; }
.arena-flee-targets[data-scroll="true"] { grid-auto-columns: minmax(min(43%,8rem),max-content); }
.arena .arena-flee-target { display: flex; flex-direction: column; align-items: start; gap: .12rem; min-height: 48px; padding: .25rem .52rem; border-color: #b7906c; background: linear-gradient(168deg,#383039,#201c27); text-align: left; scroll-snap-align: start; }
.arena-flee-target-name { color: var(--arena-paper); font-weight: 800; line-height: 1.08; overflow-wrap: anywhere; }
.arena-flee-target small { color: #f5c28b; font: 750 .66rem/1.07 var(--arena-ui); }
.arena .arena-flee-extra { flex: 0 0 48px; min-inline-size: 48px; padding: .2rem; }
.arena-flee-status { gap: .56rem; border-radius: .48rem; padding: .26rem .56rem; }
.arena-flee-status #flee-board-status { display: grid; gap: .14rem; text-align: start; }
.arena-flee-status .arena-die-face { width: 1.65rem; padding: .14rem; }
.arena-flee-status strong { color: var(--arena-ice); }
.arena-flee-status[data-outcome="failure"] strong { color: var(--arena-ember); }
.arena-flee-status small { color: var(--arena-paper); font-weight: 620; line-height: 1.15; }
.arena .arena-foes .arena-monster[data-flee-card="active"] { border-color: #ffd6a0; box-shadow: 0 0 0 1px #b48053,0 .25rem .8rem #080610c9; }
.arena .arena-foes .arena-monster[data-flee-card="resolved"] { border-color: #8fb5b5; }
.arena-monster[data-flee-card="resolved"] .arena-monster-top span { color: var(--arena-ice); }
.arena-monster[data-flee-card="resolved"] .arena-monster-art img { filter: saturate(.45); }
.arena[data-phase="flee"] .arena-foes[data-count="2"] .arena-monster { flex-shrink: 1; min-inline-size: 48px; }
@media (max-width: 680px), (orientation: landscape) and (max-height: 520px) {
  .arena-flee-targets { flex: 1 1 auto; }
  .arena .arena-flee-target { padding-inline: .38rem; }
}
@media (max-width: 375px) and (orientation: portrait) {
  .arena[data-phase="flee"] .arena-foes[data-count="2"] { gap: .24rem; padding-inline: .16rem; }
}

@media (max-width: 780px) {
  .arena[data-roll="true"] .arena-foes { --monster-width: min(40vw,calc((100dvh - 423px) * .55),9.9rem); }
  .arena[data-roll="true"] .arena-foes[data-count="2"] { --monster-width: min(28vw,calc((100dvh - 423px) * .53),8rem); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .arena[data-roll="true"] .arena-stakes { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
  .arena[data-roll="true"] .arena-stakes .arena-die { margin: 0; }
  .arena[data-roll="true"] .arena-foes { --monster-width: clamp(4.4rem,calc((100dvh - 195px) * .48),7.8rem); }
}

/* The player sits at the near edge. Everyone else stays on the far rail. */
.arena.table {
  background-size: cover;
  background-position: center 48%;
}
.arena::before {
  background: linear-gradient(180deg,#0c1216d4,transparent 21% 72%,#0c111be8),
    radial-gradient(ellipse at 47% 46%,#50826b1e 8%,transparent 61%);
}
.arena-hud.table-head { min-height: 3.3rem; }
.arena .arena-tools .icon-btn { background: #11171bd9; border-color: #c19b632b; }
.arena .arena-turn p { font-size: .74rem; letter-spacing: .045em; }
.arena .arena-turn h1 { margin-top: .11rem; font-size: .82rem; }
.arena .arena-seat-text strong { font-size: .84rem; }
.arena-dock { background: linear-gradient(180deg,transparent,#141414df 64%,#101316); }
.arena[data-combat-stage] .arena-dock { padding-top: .08rem; }
.arena-fight > .arena-command {
  grid-area: command;
  width: 100%;
  margin: 0;
  padding: .68rem 0 .2rem;
}
.arena-fight .arena-window { justify-content: space-between; }
.arena-fight .arena-window-copy { gap: .2rem; }
.arena-fight .arena-window p { font-size: .85rem; }
.arena-fight .arena-window small, .arena-fight .arena-window #arena-guidance-note { font-size: .76rem; }
.arena-fight .arena-commands { justify-content: start; }
.arena-fight .arena-commands .btn { min-width: 0; white-space: normal; }
.arena-fight .arena-commands .btn.primary { flex: 1 1 auto; font-size: .89rem; }
.arena-fight .arena-stakes-button {
  max-width: 100%;
  padding-inline: .12rem .28rem;
  gap: .55rem;
  border: 1px solid transparent;
  border-radius: .28rem;
  background: transparent;
  font-size: .85rem;
}
.arena-fight .arena-stakes-button:hover { border-color: var(--field-rule); }
.arena-fight .arena-prize { border-color: var(--field-rule); }
.arena-fight .arena-contract { text-align: left; }
.arena-fight .arena-monster-name { font-size: clamp(.83rem,1.28vw,1.14rem); }
.arena-fight .arena-foes[data-count="1"] .arena-monster { transform: rotate(-1.75deg); }
.arena-fight .arena-foes[data-count="1"] .arena-monster:is(:hover,:focus-visible),
body[data-motion="true"] .arena-fight .arena-foes[data-count="1"] .arena-monster { transform: none; }
.arena-fight .arena-foes[data-count="1"] .arena-monster-art img { object-position: 50% 43%; }
.arena-threshold-command .arena-commands .arena-extra { align-self: end; }
.arena .arena-board:has(.arena-fight):has(.arena-return) { grid-template-rows: auto minmax(0,1fr); }
.arena .arena-board:has(.arena-fight):has(.arena-connection) { grid-template-rows: auto minmax(0,1fr); }
.arena .arena-board > .arena-connection { position: relative; align-self: start; }

@media (min-width: 1080px) and (min-height: 641px) {
  .arena.table:not([data-match-finished]) .arena-seats { position: static; z-index: 3; }
  .arena.table:not([data-match-finished]) .arena-seats .player-list { overflow: visible; }
  .arena.table:not([data-match-finished]) .arena-own-seat {
    position: absolute;
    z-index: 1;
    bottom: max(1.5rem,env(safe-area-inset-bottom));
    left: max(1.5rem,env(safe-area-inset-left));
  }
  .arena .arena-own-seat .arena-seat {
    min-inline-size: 7rem;
    gap: .44rem;
    padding: .38rem;
    border-color: #c19b634d;
    background: radial-gradient(ellipse at 50% 18%,#29403c,#131a1d 70%);
  }
  .arena-own-seat .arena-emblem { width: 3.7rem; height: 3.7rem; }
  .arena .arena-seats .player-list { gap: clamp(2.8rem,7.2vw,7.5rem); }
  .arena:not([data-match-finished]) .arena-dock .arena-hand { max-width: min(76%,67rem); }
  .arena[data-combat-stage] .arena-supply {
    bottom: .22rem;
    right: 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: .26rem;
  }
  .arena[data-combat-stage] .arena-supply .arena-deck-back { width: 1.85rem; }
}
@media (min-width: 1180px) and (min-height: 680px) {
  .arena[data-combat-stage] .player-list:is([data-seats="4"],[data-seats="5"],[data-seats="6"]) > :is(:nth-child(1 of :not(.arena-own-seat)),:nth-last-child(1 of :not(.arena-own-seat))) {
    position: absolute;
    top: 27%;
  }
  .arena[data-combat-stage] .player-list > :nth-child(1 of :not(.arena-own-seat)) { left: 1.85rem; }
  .arena[data-combat-stage] .player-list > :nth-last-child(1 of :not(.arena-own-seat)) { right: 1.85rem; }
}
@media (min-width: 781px) and (min-height: 521px) and (max-height: 710px) {
  .arena-fight { column-gap: clamp(1rem,2.8vw,3rem); }
  .arena-fight .arena-score strong { font-size: 3.15rem; }
  .arena-fight .arena-score[data-wide="true"] strong { font-size: 2rem; }
}
@media (max-width: 780px) and (orientation: portrait) {
  .arena.table { background-position: center; }
  .arena .arena-turn p { font-size: .67rem; }
  .arena .arena-turn h1 { font-size: .73rem; }
  .arena .arena-seat-text strong { font-size: .67rem; }
  .arena-fight {
    width: min(100%,33rem);
    padding: 0 .62rem .42rem;
    grid-template: auto minmax(0,1fr) auto auto auto / minmax(0,1fr);
    grid-template-areas: "forces" "art" "stakes" "impact" "command";
    column-gap: 0;
  }
  .arena-fight-caption { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .arena .score.arena-clash { padding: 0; gap: .45rem; }
  .arena .score .arena-score {
    padding: .23rem .36rem;
    gap: 0 .35rem;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas: "token label" "token owner";
    align-items: center;
    justify-items: start;
  }
  .arena .score .arena-enemy {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "label token" "owner token";
    justify-items: end;
  }
  .arena-score-label { grid-area: label; align-self: end; font-size: .68rem; }
  .arena-score-token { grid-area: token; }
  .arena-score-caption { grid-area: owner; align-self: start; font-size: .65rem; }
  .arena .score .arena-score strong { font-size: 2.65rem; }
  .arena .score .arena-score[data-wide="true"] strong { font-size: 1.6rem; }
  .arena-versus .icon { width: 1.02rem; height: 1.02rem; }
  .arena-fight::before { width: min(82%,19rem); height: 77%; }
  .arena .arena-fight .arena-foes { --monster-width: min(53vw,calc((100cqh - .65rem) * .76),14.6rem); padding: .36rem; }
  .arena .arena-fight .arena-foes[data-count="2"] { --monster-width: min(42vw,calc((100cqh - .65rem) * .76),11rem); }
  .arena .arena-fight .arena-foes:is([data-count="3"],[data-formation="crowd"]) { --monster-width: min(28vw,calc((100cqh - .65rem) * .76),8.8rem); }
  .arena-fight .arena-foes { gap: .35rem; }
  .arena-fight .arena-foes[data-formation="spread"] .arena-monster { min-inline-size: min(var(--monster-width),4.2rem); }
  .arena-fight .arena-monster-name { font-size: .8rem; }
  .arena-fight .arena-foes:not([data-count="1"]) .arena-monster-name { font-size: .71rem; }
  .arena-fight .arena-stakes { justify-items: center; }
  .arena-fight .arena-contract { text-align: center; }
  .arena-fight .arena-stakes-button { font-size: .74rem; }
  .arena-fight > .arena-command { padding: .17rem 0 0; }
  .arena-fight .arena-commands .btn.primary { font-size: .79rem; }
  .arena-fight .arena-window p { font-size: .77rem; }
  .arena-fight .arena-window small, .arena-fight .arena-window #arena-guidance-note { font-size: .7rem; }
}
@media (max-width: 780px) and (max-height: 650px) and (orientation: portrait) {
  .arena-fight {
    grid-template-columns: 3.25rem minmax(0,1fr) 3.25rem;
    grid-template-rows: minmax(0,1fr) auto auto auto;
    grid-template-areas: ". art ." "stakes stakes stakes" "impact impact impact" "command command command";
    padding-inline: .38rem;
  }
  .arena-fight::before { width: 86%; height: 73%; }
  .arena .score.arena-clash {
    grid-area: 1 / 1 / 2 / -1;
    grid-template-columns: 3.25rem minmax(0,1fr) 3.25rem;
    gap: 0;
    pointer-events: none;
  }
  .arena .score .arena-score {
    grid-template: auto auto auto / minmax(0,1fr);
    grid-template-areas: "label" "token" "owner";
    justify-items: center;
    gap: .1rem;
    padding: .19rem 0;
    pointer-events: auto;
  }
  .arena .score .arena-enemy { justify-items: center; }
  .arena-score-label { font-size: .52rem; letter-spacing: 0; }
  .arena-score-caption { font-size: .56rem; }
  .arena .score .arena-score strong { font-size: 2.15rem; }
  .arena .score .arena-score[data-wide="true"] strong { font-size: 1.33rem; }
  .arena-versus { display: none; }
  .arena .arena-fight .arena-foes { --monster-width: min(51vw,calc((100cqh - .48rem) * .91),10rem); padding: .24rem; }
  .arena .arena-fight .arena-foes[data-count="1"] { --monster-width: clamp(min(38vw,7.65rem),calc((100cqh - .48rem) * .91),min(51vw,10rem)); }
  .arena .arena-fight .arena-foes[data-count="1"] .arena-monster { aspect-ratio: 1.05; }
  .arena-fight .arena-foes[data-count="1"] .arena-monster-top {
    position: absolute;
    z-index: 3;
    inset: .36rem .36rem auto auto;
    min-height: 0;
    padding: .15rem .21rem;
    border: 1px solid #dbac83aa;
    border-radius: .2rem;
    background: #2c1c2ded;
  }
  .arena-fight .arena-foes[data-count="1"] .arena-monster:not([data-refused="true"],[data-flee-card="resolved"]) .arena-monster-top > span { display: none; }
  .arena-fight .arena-foes[data-count="1"] .arena-monster-top strong { font-size: 1.08rem; }
  .arena .arena-fight .arena-foes[data-count="2"] { --monster-width: min(29vw,calc((100cqh - .48rem) * .91)); }
  .arena .arena-fight .arena-foes:is([data-count="3"],[data-formation="crowd"]) { --monster-width: min(20vw,calc((100cqh - .48rem) * .91)); }
  .arena .arena-fight .arena-foes:not([data-count="1"]) .arena-monster { aspect-ratio: .78; }
  .arena-fight .arena-foes:not([data-count="1"]) .arena-monster-top { min-height: .9rem; }
  .arena-fight .arena-foes:not([data-count="1"]) .arena-monster-top strong { font-size: 1.12rem; }
  .arena-fight .arena-monster-name { font-size: .68rem; }
  .arena-fight .arena-foes:not([data-count="1"]) .arena-monster-name { font-size: .61rem; }
  .arena-fight .arena-foes[data-count="1"] .arena-monster { transform: none; }
  .arena-impact { padding-inline: .35rem; gap: .35rem; }
  .arena-impact-copy { font-size: .67rem; }
  .arena[data-combat-stage]:has(.arena-return) .arena-seats { padding-block: .12rem; }
  .arena[data-combat-stage]:has(.arena-return) .arena-emblem { width: 1.85rem; height: 1.85rem; }
  .arena[data-combat-stage]:has(.arena-return) .hand-shelf .hand-empty { min-height: 2.05rem; }
  .arena-return { margin-block: .05rem .1rem; padding-block: .23rem; }
  .arena-return :is(h2,.arena-return-message,.arena-return-scores) { font-size: .64rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .arena.table[data-combat-stage]:not([data-match-finished]) { grid-template-columns: minmax(0,2.2fr) minmax(9.6rem,.8fr); }
  .arena[data-combat-stage] .arena-dock { grid-template-rows: minmax(0,1fr); }
  .arena-fight {
    width: 100%;
    grid-template-columns: minmax(0,1.17fr) minmax(10.85rem,1fr);
    column-gap: .55rem;
    padding: 0 .44rem .22rem;
  }
  .arena-fight-caption span { font-size: .58rem; }
  .arena .score.arena-clash { gap: .18rem; padding: .23rem 0 .15rem; }
  .arena .score .arena-score { padding: .2rem .25rem; }
  .arena .score .arena-score strong { font-size: 2.7rem; }
  .arena .score .arena-score[data-wide="true"] strong { font-size: 1.48rem; }
  .arena-score-label { font-size: .6rem; letter-spacing: 0; }
  .arena-score-caption { font-size: .62rem; }
  .arena-versus { width: 1rem; }
  .arena-versus .icon { width: .88rem; height: .88rem; }
  .arena-fight .arena-stakes-button { padding-inline: 0; gap: .28rem; font-size: .67rem; }
  .arena-fight .arena-prize { padding-left: .3rem; }
  .arena-fight > .arena-command { padding: .19rem 0 0; }
  .arena-fight .arena-window p { font-size: .73rem; }
  .arena-fight .arena-window small, .arena-fight .arena-window #arena-guidance-note { font-size: .66rem; }
  .arena-fight .arena-commands .btn.primary { font-size: .74rem; }
  .arena .arena-fight .arena-foes { padding: .32rem; }
  .arena .arena-fight .arena-foes[data-count="2"] { --monster-width: min(43cqw,calc((100cqh - .65rem) * .74),9rem); }
  .arena .arena-fight .arena-foes:is([data-count="3"],[data-formation="crowd"]) { --monster-width: min(29cqw,calc((100cqh - .65rem) * .74),7rem); gap: .27rem; }
  .arena .arena-fight .arena-foes .arena-monster { min-inline-size: min(var(--monster-width),3.4rem); }
  .arena-fight .arena-monster-name { font-size: .73rem; }
  .arena-fight .arena-foes:not([data-count="1"]) .arena-monster-name { font-size: .66rem; }
  .arena-fight .arena-foes[data-count="1"] .arena-monster { transform: none; }
  .arena-impact-copy { font-size: .66rem; }
  .arena-board:has(.arena-return) .arena-fight-caption { display: none; }
  .arena-board:has(.arena-return) .arena-fight { grid-template-rows: minmax(0,1fr) 0 auto minmax(3rem,auto) auto auto minmax(0,1fr); }
  .arena-board:has(.arena-return) .score.arena-clash { padding-block: 0; min-height: 48px; }
  .arena-board:has(.arena-return) .score .arena-score {
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas: "token label" "token owner";
    align-items: center;
    gap: .06rem .28rem;
  }
  .arena-board:has(.arena-return) .score .arena-enemy {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "label token" "owner token";
  }
  .arena-board:has(.arena-return) .arena-score-label { grid-area: label; align-self: end; }
  .arena-board:has(.arena-return) .arena-score-token { grid-area: token; }
  .arena-board:has(.arena-return) .arena-score-caption { grid-area: owner; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .arena-fight .arena-foes[data-count="1"] .arena-monster { transform: none; }
}

/* A fixed kit takes its own space on wide tables and leaves the encounter playable. */
.arena[data-gear-docked] {
  --gear-dock-width: clamp(17rem,23vw,20rem);
}
.arena[data-gear-docked] .arena-board {
  grid-template-columns: minmax(0,1fr) var(--gear-dock-width);
  grid-template-rows: auto minmax(0,1fr);
  column-gap: .85rem;
  padding-inline-end: max(1.1rem,env(safe-area-inset-right));
}
.arena[data-gear-docked] .arena-board > :is(.arena-return,.arena-connection) { grid-area: 1 / 1; }
.arena[data-gear-docked] .arena-board > :is(.arena-fight,.arena-phase) { grid-area: 2 / 1; }
.arena[data-gear-docked] .arena-fight { width: calc(100% - 2rem); column-gap: clamp(.7rem,2.4vw,2.4rem); }
.arena[data-gear-docked] .arena-supply { left: 1rem; right: auto; bottom: 4.85rem; flex-direction: column; align-items: center; gap: .28rem; }
.arena[data-gear-docked] .arena-supply .arena-deck { min-width: 48px; }
.arena[data-gear-docked] .arena-supply .arena-deck-back { width: 1.9rem; }
.arena[data-gear-docked] .arena-guide { inset: .7rem auto auto 1rem; }
.arena[data-gear-docked][data-combat-stage] .arena-seats .player-list > li:not(.arena-own-seat) { position: static; }
.arena[data-gear-docked] .arena-seats .player-list { gap: clamp(1.55rem,5vw,4.5rem); }
.arena-gear-dock {
  grid-area: 1 / 2 / -1;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  border: 1px solid #b093687d;
  border-radius: .52rem;
  background: #151c21ee;
  box-shadow: 0 .36rem 1.2rem #080d15af;
}
.arena-gear-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding-inline: .64rem .22rem; border-block-end: 1px solid #b0936859; }
.arena-gear-head h2 { display: inline-flex; align-items: center; gap: .42rem; font: 750 1rem/1.18 var(--arena-display); }
.arena-gear-head h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.arena-gear-head h2 .icon { color: #dbb781; }
.arena-gear-head .icon-btn { min-width: 48px; min-height: 48px; background: transparent; border-color: transparent; }
.arena-gear-head .icon-btn:hover { border-color: var(--arena-ice); }
.arena-gear-scroll { min-height: 0; padding: .5rem; overflow: auto; overscroll-behavior: contain; }
.arena-gear-scroll:focus-visible { outline-offset: -3px; }
.arena-gear-dock .gear-profile { justify-content: center; gap: .33rem; }
.arena-gear-dock .gear-profile-stats { justify-content: center; }
.arena-gear-dock .gear-pocket .gear-item { grid-template-rows: 2.85rem minmax(0,1fr); }
.arena-gear-dock .gear-profile-stats dd { min-width: 2.05rem; min-height: 2.05rem; }

.arena-consequences { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; }
.arena .arena-consequence {
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: .26rem;
  min-width: 0;
  min-height: 48px;
  padding: .36rem .45rem;
  border-color: oklch(69% .082 66 / .8);
  background: oklch(24% .033 42);
  color: var(--arena-paper);
  text-align: start;
  white-space: normal;
}
.arena .arena-consequence:hover:not(:disabled), .arena .arena-consequence:focus-visible { border-color: var(--arena-ice); background: oklch(30% .034 48); }
.arena-consequence-label { display: flex; align-items: start; gap: .27rem; font: 760 .75rem/1.17 var(--arena-ui); }
.arena-consequence-label .icon { flex: none; width: .85rem; height: .85rem; color: var(--arena-ember); }
.arena-consequence-impact { display: grid; gap: .13rem; color: var(--ember); font: 740 .78rem/1.16 var(--font-ui); }
.arena-consequence-impact small { color: var(--ice); font: 650 .68rem/1.15 var(--font-ui); }
.arena-consequence-impact b { font-weight: 830; }
@media (max-width: 380px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  .arena .arena-consequence { padding: .3rem .32rem; gap: .18rem; }
  .arena-consequence-label { font-size: .68rem; }
  .arena-consequence-impact { font-size: .73rem; }
}