/* Card Lab + Arena layout prototype (reference: Owner's Arena mock-up). */

/* Arena Thai fonts (Owner 2026-10-31, SIL OFL 1.1, files + licences in /fonts/).
 * Arena-only tokens: overlays live on <body>, so they sit on :root under new names and the
 * Designer's own --sans / --serif stay untouched. Latin headings keep Bodoni Moda / Cinzel;
 * Thai glyphs fall through to Taviraj. */
@font-face {
  font-family: 'Anuphan';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anuphan-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Anuphan';
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/anuphan-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Anuphan';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/anuphan-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Anuphan';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/anuphan-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Anuphan';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anuphan-thai-400-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Anuphan';
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/anuphan-thai-500-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Anuphan';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/anuphan-thai-600-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Anuphan';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/anuphan-thai-700-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Chonburi';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/chonburi-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Chonburi';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/chonburi-thai-400-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/kanit-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Kanit';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/kanit-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Kanit';
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/kanit-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Kanit';
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/kanit-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Kanit';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/kanit-thai-400-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/kanit-thai-600-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/kanit-thai-800-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/kanit-thai-900-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Taviraj';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/taviraj-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Taviraj';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/taviraj-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Taviraj';
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/taviraj-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: 'Taviraj';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/taviraj-thai-400-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Taviraj';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/taviraj-thai-700-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Taviraj';
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/taviraj-thai-900-normal.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
:root {
  --a-sans: 'Anuphan', 'Noto Sans Thai', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
  --a-serif: 'Bodoni Moda', 'Cinzel', 'Taviraj', Georgia, serif;
  --a-display: 'Chonburi', 'Taviraj', Georgia, serif;
  --a-num: 'Kanit', 'Anuphan', sans-serif;
}
#arena-board {
  font-family: var(--a-sans);
}
.lab-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.lab-grid fieldset {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  min-width: 0;
}
.lab-grid legend {
  font-weight: 700;
  color: var(--gold);
}
.lab-grid label {
  display: grid;
  gap: 3px;
  font-size: 12px;
  color: var(--text-2);
}
.lab-master {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.lab-champ-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 64px 72px;
  gap: 6px;
  align-items: end;
}
.lab-slot-tag {
  font-family: var(--mono);
  color: var(--gold);
  padding-bottom: 8px;
}
.lab-grid input,
.lab-grid select {
  padding: 6px;
  min-width: 0;
}
.lab-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.lab-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
}
#clab-card-preview .cf-card {
  max-width: 220px;
  margin: 0 auto 8px;
}
#clab-run {
  background: var(--gold);
  border-color: var(--gold);
  color: #1b1405;
  font-weight: 700;
  padding: 10px;
}
.lab-ok {
  color: #7be0b0;
  font-weight: 700;
}
.lab-result-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.lab-result-side {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}
.lab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lab-table th,
.lab-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.lab-table th {
  color: var(--text-2);
  font-weight: 500;
}
.lab-down {
  color: #ff8a8a;
  font-weight: 700;
}
.lab-up {
  color: #7be0b0;
  font-weight: 700;
}
.lab-log {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.6;
}
.lab-log .lab-ev-HP,
.lab-log .lab-ev-ATTACK {
  color: #ffb4ab;
}
.lab-log .lab-ev-PREVENT,
.lab-log .lab-ev-RESPONSE {
  color: #9cc7ff;
}
.lab-log .lab-ev-CHAMPION_STATUS {
  color: #d9b3ff;
}

/* ---------- Arena (M4): fixed 1920×1080 stage, top-down card table ---------- */
.arena-controls {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.arena-controls label {
  display: grid;
  gap: 3px;
  font-size: 12px;
}
#arena-board {
  position: relative;
}
#arena-board.busy {
  cursor: progress;
}
.arena-empty {
  text-align: center;
  padding: 80px 0;
}
.arena-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #05080f;
}
.arena-viewport:fullscreen {
  height: 100vh;
  border-radius: 0;
}
.arena-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  overflow: hidden;
  font-size: 15px;
  color: var(--text);
  /* Placeholder table until the Arena background (Art A3) arrives. */
  background:
    radial-gradient(ellipse at 50% 50%, rgba(204, 166, 99, 0.16), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(90, 140, 220, 0.22), transparent 50%),
    linear-gradient(180deg, #13243a, #0a1220);
}
.arena-viewport:fullscreen .arena-stage {
  left: calc((100vw - 1920px * var(--s, 1)) / 2);
  top: calc((100vh - 1080px * var(--s, 1)) / 2);
}

/* Field: two rows per side (back: HP / DEF / piles · front: Champions) and the play zone. */
.arena-field {
  position: absolute;
  left: 410px;
  top: 0;
  width: 1140px;
  height: 1080px;
  border-left: 1px solid rgba(204, 166, 99, 0.18);
  border-right: 1px solid rgba(204, 166, 99, 0.18);
  background: repeating-linear-gradient(90deg, transparent 0 139px, rgba(204, 166, 99, 0.05) 139px 140px);
}
.arena-row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 46px;
}
.arena-back.opp {
  top: 14px;
}
.arena-front.opp {
  top: 196px;
}
.arena-front.own {
  top: 558px;
}
.arena-back.own {
  top: 740px;
}
.arena-front {
  gap: 40px;
}
.arena-group {
  display: flex;
  gap: 12px;
}
.arena-card {
  position: relative;
  flex: none;
  width: 112px;
  height: 168px;
  border-radius: 8px;
}
.arena-card > .cf-card {
  width: 100%;
}
.arena-slot {
  display: grid;
  place-items: center;
  border: 2px dashed rgba(204, 166, 99, 0.4);
  background: rgba(255, 255, 255, 0.03);
}
.arena-slot:has(> .cf-card),
.arena-slot:has(> .arena-card-back),
.arena-slot:has(> .hpdeck-stack span),
.arena-slot:has(> .arena-pile-stack > *) {
  border-color: transparent;
  background: none;
}
.arena-slot-label {
  color: rgba(204, 166, 99, 0.7);
  font-size: 13px;
}
.arena-card-back {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 2px solid var(--gold);
  background: repeating-linear-gradient(45deg, #2a2340 0 8px, #1d1830 8px 16px);
  color: var(--gold);
  font-family: var(--a-serif);
}
/* The default back from the Card Back Designer, when one is set. */
.has-card-back .arena-card-back {
  background: var(--art-card-back) center / cover no-repeat, #1d1830;
  text-shadow: 0 0 6px #000, 0 0 2px #000;
}
.arena-count {
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 6;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 17px;
  border: 2px solid var(--gold);
  background: #0b1220;
  font-size: 17px;
}
.arena-pile-label {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 6;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(11, 18, 32, 0.8);
  font-size: 11px;
  color: var(--text-2);
}
.arena-pile-stack,
.hpdeck-stack {
  position: absolute;
  inset: 0;
}
.arena-pile-stack > *,
.hpdeck-stack span {
  position: absolute;
  inset: 0;
  transform: translate(calc(var(--k, 0) * -1.5px), calc(var(--k, 0) * -2px));
  box-shadow: 0 1px 3px #000a;
}
.arena-pile-stack > .cf-card {
  width: 100%;
}
.arena-def-slot.ready {
  cursor: pointer;
  box-shadow: 0 0 0 3px #5fc9ff;
}
.arena-def-slot.selected {
  box-shadow: 0 0 0 4px #ffcf7a;
}

/* HP Deck: real HP cards (Owner art when present, gradients otherwise). */
.hp-layer-vital {
  --hp-edge: #e7899a;
  --hp-back: var(--hp-art-vital, repeating-linear-gradient(135deg, #8e1b2a 0 5px, #6d1220 5px 10px));
}
.hp-layer-grace {
  --hp-edge: #d9b06a;
  --hp-back: var(--hp-art-grace, repeating-linear-gradient(135deg, #a8822b 0 5px, #7d5f1c 5px 10px));
}
.hp-layer-ethereal {
  --hp-edge: #b9b2e6;
  --hp-back: var(--hp-art-ethereal, repeating-linear-gradient(135deg, #2b6fc7 0 5px, #6a4bd1 5px 10px));
}
.hpdeck-stack span,
.hp-fx-card,
.hp-fx-shard {
  border-radius: 7px;
  border: 1px solid var(--hp-edge);
  background: var(--hp-back);
  background-size: cover;
  background-position: center;
}
.hpdeck-stack span:last-child {
  box-shadow:
    0 0 0 1px var(--hp-edge),
    0 0 12px var(--hp-edge);
}
.hpdeck-pile .arena-count {
  border-color: var(--hp-edge);
}
.hpdeck-pile.hp-hit .hpdeck-stack {
  animation: hp-shake 0.35s ease-in-out 3;
}
.hpdeck-pile.hp-heal .hpdeck-stack {
  filter: drop-shadow(0 0 10px var(--hp-edge));
}
@keyframes hp-shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.hp-fx {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}
.hp-fx-count {
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  font: 800 26px var(--a-serif);
  text-shadow: 0 2px 6px #000;
  animation: hp-count 1.3s ease-out forwards;
}
.hp-fx-count.down {
  color: #ff8a8a;
}
.hp-fx-count.up {
  color: #9ff0c8;
}
@keyframes hp-count {
  to {
    transform: translate(-50%, -22px);
    opacity: 0;
  }
}
.hp-fx-card,
.hp-fx-shard {
  position: absolute;
}
.hp-fx-card {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* Damage: each card is counted off the top of the deck, then shatters. */
.hp-fx-card.lift {
  animation: hp-lift 0.3s ease-out forwards;
}
@keyframes hp-lift {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translate(calc((var(--i) - 4.5) * 9px), calc(-36% - var(--i) * 4px)) rotate(calc((var(--i) - 4.5) * 5deg));
  }
}
.hp-fx-shard {
  animation: hp-shatter 0.75s ease-out forwards;
}
@keyframes hp-shatter {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6);
  }
}

/* Champions: the designed 2:3 card with LV, MP and Status overlays. */
.arena-champ {
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.arena-composed {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 8px;
}
.arena-detail-card .arena-composed {
  width: 150px;
  height: 225px;
}
.arena-composed .visual-icon-slot {
  font-size: 9px;
}
.arena-composed-missing {
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 6px;
  text-align: center;
  border: 2px solid var(--gold);
  background: linear-gradient(#24324a, #141d2c);
  color: #fff0c2;
}
.arena-champ .arena-level {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #2c63d6;
  font-weight: 800;
}
.arena-mp {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -10px;
  z-index: 8;
  height: 18px;
  overflow: hidden;
  border-radius: 9px;
  border: 1px solid #0b1220;
  background: rgba(11, 18, 32, 0.9);
}
.arena-mp span {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #2c63d6, #5fc9ff);
}
.arena-mp b {
  position: relative;
  padding-left: 6px;
  font-size: 11px;
}
.arena-chips {
  position: absolute;
  top: 4px;
  left: 26px;
  right: 4px;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
}
.arena-chip {
  padding: 0 5px;
  border-radius: 7px;
  font-size: 10px;
  background: rgba(60, 20, 90, 0.85);
  color: #ecd6ff;
}
.arena-chip.pending {
  opacity: 0.7;
  border: 1px dashed #d9b3ff;
}
.arena-chip.immune {
  background: rgba(20, 80, 60, 0.9);
  color: #9ff0c8;
}
.arena-champ.picked-actor {
  box-shadow: 0 0 0 3px #5fc9ff;
}
.arena-champ.picked-target {
  box-shadow: 0 0 0 3px #ff6b6b;
}
.arena-champ.attacking {
  transform: translateY(-6px);
  box-shadow: 0 0 18px 4px rgba(255, 207, 122, 0.8);
}
.arena-champ.targeted {
  animation: arena-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes arena-pulse {
  to {
    box-shadow: 0 0 22px 6px rgba(255, 80, 80, 0.8);
  }
}

/* Play zone and attack arrow. */
.arena-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 377px;
  height: 172px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-top: 1px solid rgba(204, 166, 99, 0.25);
  border-bottom: 1px solid rgba(204, 166, 99, 0.25);
  background: rgba(204, 166, 99, 0.04);
}
.arena-zone-hint {
  grid-column: 2;
  color: rgba(204, 166, 99, 0.35);
  font-family: var(--a-serif);
  letter-spacing: 6px;
}
.arena-zone-head {
  justify-self: end;
  margin: 0;
  max-width: 300px;
  text-align: right;
  color: #ffcf7a;
  font-weight: 700;
}
.arena-zone-cards {
  display: flex;
  gap: 14px;
}
.arena-zone-cards .arena-card {
  cursor: pointer;
}
.arena-zone-main.own {
  box-shadow: 0 0 16px 3px rgba(95, 201, 255, 0.7);
}
.arena-zone-main.opp {
  box-shadow: 0 0 16px 3px rgba(255, 107, 107, 0.7);
}
.arena-zone-answer {
  box-shadow: 0 0 12px 2px rgba(156, 199, 255, 0.6);
}
.arena-zone-result {
  margin: 0;
  max-width: 300px;
  font-weight: 700;
}
.arena-zone-result.pending {
  color: var(--text-2);
  font-weight: 400;
}
.arena-arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 15;
  pointer-events: none;
}
/* Attack arrow v2 (Owner 2026-10-31): parts drawn by attackArrow() in arena.js. */
.arena-arrow .arena-arrow-body,
.arena-arrow .arena-arrow-head {
  stroke: #3a1206;
  stroke-width: 3;
  stroke-linejoin: round;
}
.arena-arrow.foe .arena-arrow-body,
.arena-arrow.foe .arena-arrow-head {
  stroke: #2a0838;
}
.arena-arrow .arena-arrow-glow {
  opacity: 0.85;
  animation: arena-arrow-pulse 1.1s ease-in-out infinite alternate;
}
.arena-arrow .arena-arrow-sparks {
  stroke: #fffbe8;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 0.002 0.055;
  animation: arena-arrow-run 0.55s linear infinite;
}
.arena-arrow .arena-arrow-shine {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.arena-arrow.grow .arena-arrow-reveal {
  stroke-dasharray: 1 1;
  animation: arena-arrow-reveal 0.42s cubic-bezier(0.3, 0.7, 0.3, 1) both;
}
.arena-arrow.grow .arena-arrow-head,
.arena-arrow.grow .arena-arrow-shine {
  transform-box: fill-box;
  transform-origin: center;
  animation: arena-arrow-head 0.3s 0.32s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.arena-arrow.aim {
  opacity: 0.85;
}
.arena-arrow.aim .arena-arrow-sparks {
  stroke-width: 4;
}
.arena-arrow.aim.grow .arena-arrow-reveal {
  animation-duration: 0.22s;
}
.arena-arrow.aim.grow .arena-arrow-head,
.arena-arrow.aim.grow .arena-arrow-shine {
  animation-delay: 0.16s;
}
@keyframes arena-arrow-reveal {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes arena-arrow-head {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes arena-arrow-run {
  to {
    stroke-dashoffset: -0.057;
  }
}
@keyframes arena-arrow-pulse {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 0.95;
  }
}
.arena-bignum {
  position: fixed;
  z-index: 1001;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--a-serif);
  font-weight: 900;
  color: #ff4d4d;
  -webkit-text-stroke: 2px #fff;
  text-shadow: 0 0 24px rgba(255, 0, 0, 0.6);
  animation: arena-bignum 1.4s ease-out forwards;
}
.arena-bignum.blocked {
  color: #9cc7ff;
  text-shadow: 0 0 24px rgba(80, 150, 255, 0.6);
}
@keyframes arena-bignum {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1);
  }
}

/* Left: card / Champion detail and the action panel. */
.arena-detail {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 378px;
  height: 798px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(11, 18, 32, 0.9);
}
.arena-detail h3 {
  margin: 0;
  font-family: var(--a-serif);
  font-size: 20px;
}
.arena-detail p {
  margin: 0;
}
.arena-detail-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.arena-detail-card > .cf-card {
  width: 150px;
}
.arena-detail .card-block-text p {
  font-size: 13px;
  line-height: 1.5;
}
.arena-compose {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(204, 166, 99, 0.45);
  background: rgba(204, 166, 99, 0.08);
}
.arena-compose h4 {
  margin: 0;
  color: var(--gold);
}
.arena-compose label {
  display: grid;
  gap: 3px;
  font-size: 13px;
}
.arena-extras {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.arena-check {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.arena-primary {
  padding: 8px 12px;
  border-color: var(--gold);
  background: var(--gold);
  color: #1b1405;
  font-weight: 700;
}
.arena-secondary {
  padding: 8px 12px;
  font-weight: 700;
}
.arena-alert {
  color: #ffcf7a;
  font-weight: 700;
}

/* Masters: you bottom-left, the bot top-right. */
.arena-master {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(90deg, rgba(11, 18, 32, 0.95), rgba(20, 34, 52, 0.95));
}
.arena-master.own {
  position: absolute;
  left: 16px;
  top: 830px;
  width: 378px;
  box-sizing: border-box;
}
.arena-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--panel-3);
  font: 700 22px var(--a-serif);
}
.arena-master-name {
  display: grid;
  min-width: 0;
}
.arena-master-name small {
  color: var(--text-2);
  font-size: 12px;
}
.arena-master-total {
  display: grid;
  justify-items: end;
}
.arena-master-total strong {
  font: 800 44px/1 var(--a-serif);
}
.arena-fullscreen {
  position: absolute;
  left: 16px;
  top: 966px;
  width: 48px;
  height: 48px;
  font-size: 22px;
}

/* Right: bot Master, turn state, phase medallion and log. */
.arena-side {
  position: absolute;
  left: 1566px;
  top: 16px;
  width: 338px;
  height: 1048px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.arena-chain {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(11, 18, 32, 0.9);
}
.arena-chain h3 {
  margin: 0;
  color: var(--gold);
}
.arena-chain p {
  margin: 0;
}
.arena-timer {
  position: relative;
  height: 18px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
}
.arena-timer span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--left, 1) * 100%);
  background: linear-gradient(90deg, #2c63d6, #5fc9ff);
  transition: width 0.25s linear;
}
.arena-timer.urgent span {
  background: linear-gradient(90deg, #c0392b, #ffb36b);
}
.arena-timer b {
  position: relative;
  padding-left: 8px;
  font-size: 12px;
}
.arena-choice {
  display: grid;
  gap: 4px;
}
.arena-medal {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.arena-medal > small {
  color: var(--text-2);
}
.arena-phases {
  display: flex;
}
.arena-phases span {
  margin-left: -6px;
  padding: 6px 16px;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
  border: 1px solid var(--line-strong);
  background: rgba(11, 18, 32, 0.9);
  color: var(--text-2);
  font-size: 13px;
}
.arena-phases span.current {
  background: #2c63d6;
  color: #fff;
  font-weight: 700;
}
.arena-end {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 4px solid #f3d18a;
  background: radial-gradient(circle at 40% 35%, #e6b866, #a5732b);
  color: #fff;
  font: 700 20px var(--a-serif);
  box-shadow: 0 6px 24px #000a;
}
.arena-end:disabled {
  filter: grayscale(0.7) brightness(0.7);
}
.arena-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 10px 10px 10px 30px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(11, 18, 32, 0.85);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Hand: a fan along the bottom edge; hover or select lifts a card fully into view. */
.arena-hand {
  position: absolute;
  left: 410px;
  top: 924px;
  width: 1140px;
  height: 156px;
  z-index: 20;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.arena-hand > * {
  flex: none;
  width: 140px;
  margin: 0 var(--gap, -14px);
  pointer-events: auto;
  cursor: pointer;
  transform: rotate(calc(var(--i, 0) * 2deg)) translateY(calc(var(--i, 0) * var(--i, 0) * 1.2px));
  transition: transform 0.15s;
  box-shadow: 0 8px 20px #000a;
}
.arena-hand > *:hover,
.arena-hand > *:focus,
.arena-hand > .selected {
  z-index: 3;
  transform: translateY(-118px) scale(1.12);
}
.arena-hand > .selected {
  box-shadow:
    0 0 0 3px #5fc9ff,
    0 8px 20px #000a;
}
.arena-hand > .discarding {
  filter: grayscale(1) brightness(0.6);
  box-shadow: 0 0 0 3px #ff6b6b;
}
.arena-cost {
  position: absolute;
  top: 1%;
  left: 2%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 16cqw;
  height: 16cqw;
  border-radius: 50%;
  border: 0.8cqw solid #fff;
  background: #2c63d6;
  color: #fff;
  font: 800 9cqw var(--a-sans);
}
.arena-banner {
  position: absolute;
  left: 560px;
  top: 440px;
  width: 840px;
  z-index: 30;
  padding: 24px;
  border-radius: 18px;
  border: 2px solid var(--gold);
  background: rgba(11, 18, 32, 0.9);
  color: var(--gold);
  text-align: center;
  font: 700 64px var(--a-serif);
  letter-spacing: 6px;
  pointer-events: none;
}
.arena-banner.lose {
  border-color: #ff8a8a;
  color: #ff8a8a;
}
@media (prefers-reduced-motion: reduce) {
  .arena-champ.targeted,
  .hpdeck-pile.hp-hit .hpdeck-stack,
  .arena-arrow * {
    animation: none !important;
  }
}
@media (max-width: 1280px) {
  .lab-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #clab-result-col {
    grid-column: 1 / -1;
  }
}
.arena-detail {
  font-size: 16px;
}
.arena-detail .card-block-text p {
  font-size: 14px;
}
.arena-detail-card {
  grid-template-columns: 170px minmax(0, 1fr);
}
.arena-detail-card > .cf-card,
.arena-detail-card .arena-composed {
  width: 170px;
  height: auto;
  aspect-ratio: 2 / 3;
}


/* HP Deck: one pile, three layers stacked; small per-layer counts under it. */
.hpdeck-stack span {
  transform: translate(calc(var(--k, 0) * -0.8px), calc(var(--k, 0) * -1.3px));
}
.hpdeck-layers {
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -13px;
  z-index: 7;
  display: flex;
  justify-content: center;
  gap: 3px;
}
.arena-row.opp .hpdeck-layers {
  bottom: auto;
  top: -11px;
}
.hpdeck-layers span {
  padding: 0 5px;
  border-radius: 7px;
  border: 1px solid var(--hp-edge);
  background: #0b1220;
  font-size: 11px;
  line-height: 16px;
}
.hpdeck-layers span.zero {
  opacity: 0.45;
}
.hpdeck-pile .arena-count {
  border-color: var(--gold);
}
.arena-row.opp .arena-count {
  bottom: auto;
  top: -8px;
}

/* Turn medallion: one button at the right edge of the table. */
.arena-end {
  position: absolute;
  left: 1478px;
  top: 393px;
  z-index: 25;
  width: 140px;
  height: 140px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 0;
  border-radius: 50%;
  border: 5px solid #f3d18a;
  background: radial-gradient(circle at 40% 32%, #3d76e6, #16357a 70%);
  color: #fff;
  box-shadow:
    0 0 0 3px #0b1220,
    0 8px 28px #000c;
  text-align: center;
  cursor: pointer;
}
.arena-end.theirs {
  background: radial-gradient(circle at 40% 32%, #b0455a, #5a1626 70%);
}
.arena-end small {
  font-size: 13px;
  opacity: 0.85;
}
.arena-end strong {
  font: 700 24px/1.1 var(--a-serif);
}
.arena-end:not(:disabled):hover {
  filter: brightness(1.15);
}
.arena-end:disabled {
  filter: none;
  cursor: default;
}

/* Chain: numbered, tilted links joined by a chain. */
.arena-zone-cards {
  position: relative;
  z-index: 12;
  gap: 54px;
}
.arena-chain-card {
  width: 150px;
  height: 225px;
  transform: rotate(-5deg);
  transition: transform 0.2s;
}
.arena-chain-card:nth-child(even) {
  transform: rotate(6deg) translateY(10px);
}
.arena-chain-card:hover {
  transform: scale(1.05);
  z-index: 2;
}
.arena-chain-no {
  position: absolute;
  right: -18px;
  bottom: -14px;
  z-index: 3;
  font: 900 54px/1 var(--a-serif);
  color: #7ff3ff;
  -webkit-text-stroke: 2px #0b4a66;
  text-shadow: 0 0 14px #2fd6ff;
}
.arena-chain-links {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 11;
  pointer-events: none;
}
.arena-chain-links line {
  stroke-linecap: round;
}
.arena-chain-links line.outer {
  stroke: #8f99a8;
  stroke-width: 16;
  stroke-dasharray: 22 8;
}
.arena-chain-links line.inner {
  stroke: #1d2633;
  stroke-width: 6;
  stroke-dasharray: 14 16;
  stroke-dashoffset: -4;
}
.arena-end {
  left: 1402px;
}
.arena-zone {
  padding-right: 160px;
}
/* Once the chain has resolved (or for a Support), the cards settle to table size. */
.arena-zone.settled .arena-chain-card {
  width: 112px;
  height: 168px;
  transform: none;
}
.arena-zone.settled .arena-chain-no {
  font-size: 34px;
}
.arena-zone.settled .arena-zone-cards {
  gap: 30px;
}

/* Arena UI art set 1 (data/art/arena-ui/v1); CSS stand-ins when a file is missing. */
.arena-avatar {
  background-size: cover;
  background-position: center 20%;
}
.arena-end.mine {
  background: var(--art-turn-medallion-mine, radial-gradient(circle at 40% 32%, #3d76e6, #16357a 70%)) center / contain no-repeat;
}
.arena-end.theirs {
  background: var(--art-turn-medallion-theirs, radial-gradient(circle at 40% 32%, #b0455a, #5a1626 70%)) center / contain no-repeat;
}
.arena-end {
  border-color: transparent;
  text-shadow:
    0 2px 4px #000,
    0 0 8px #000;
}
.arena-banner.has-art {
  height: 280px;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  background: center / contain no-repeat;
  text-shadow:
    0 3px 8px #000,
    0 0 18px #000;
}
.arena-chain-img {
  position: absolute;
  z-index: 11;
  height: 44px;
  pointer-events: none;
  background: var(--art-chain-link) center / auto 100% repeat-x;
  filter: drop-shadow(0 3px 4px #000a);
}
.arena-art-fx {
  position: fixed;
  z-index: 1002;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
  background: center / contain no-repeat;
  mix-blend-mode: screen;
  animation: arena-art-burst 1.1s ease-out forwards;
}
.arena-art-fx.fx-level-up {
  animation-name: arena-art-rise;
}
@keyframes arena-art-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(-8deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25) rotate(6deg);
  }
}
@keyframes arena-art-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.8, 0.3);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(1, 1.1);
  }
}

/* ---------- Battle Sky Arena table (Owner art) ---------- */
.arena-stage.has-table {
  background: var(--art-table-bg) center / cover no-repeat;
}
.arena-stage.has-table .arena-field {
  border: none;
  background: none;
}
/* The field art (arena3 + pedestals, 2026-10-30) carries the look: no frames on the floor
   (Owner). Empty DEF slots show a warm frame only while a DEF card in the hand is pointed at
   (.def-aim, arena.js wireHover); a selected DEF card lights them with .ready. */
.arena-stage.has-table .arena-slot {
  border-color: transparent;
  background: none;
  box-shadow: none;
}
.arena-stage.has-table.def-aim .arena-def-slot.own:not(:has(> .cf-card)) {
  border: 2px solid rgba(255, 236, 190, 0.85);
  background: rgba(255, 250, 235, 0.12);
  box-shadow: 0 0 16px rgba(255, 214, 140, 0.55);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.arena-stage.has-table .arena-slot-label {
  color: #fff6e0;
  text-shadow: 0 1px 4px #2a1e40;
}
.arena-stage.has-table .arena-card {
  filter: drop-shadow(0 10px 14px rgba(40, 28, 70, 0.45));
}
.arena-stage.has-table .arena-zone {
  border-color: rgba(243, 209, 138, 0.55);
  background: rgba(255, 255, 255, 0.07);
}
.arena-stage.has-table .arena-zone-hint {
  color: rgba(120, 90, 50, 0.55);
}
.arena-stage.has-table .arena-zone-head,
.arena-stage.has-table .arena-zone-result {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(11, 18, 32, 0.78);
}

/* ---------- Chain: dim the field, CHAIN word, new link pop, LIFO resolve glow ---------- */
.arena-stage.chain-live .arena-field::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: rgba(8, 10, 24, 0.38);
  animation: arena-dim 0.3s ease-out;
}
@keyframes arena-dim {
  from {
    opacity: 0;
  }
}
.arena-chain-word {
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: 14;
  display: flex;
  gap: 4px;
  transform: translateX(-50%);
  pointer-events: none;
  font: 900 64px/1 var(--a-serif);
  font-style: italic;
  color: #fff;
  -webkit-text-stroke: 2px #2d5fae;
  text-shadow: 0 0 18px #6fd0ff;
}
.arena-chain-word span {
  opacity: 0;
  animation: arena-letter 1.2s ease-out forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes arena-letter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(1.6);
  }
  25% {
    opacity: 1;
    transform: none;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.arena-chain-card.pop {
  animation: arena-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes arena-pop {
  from {
    opacity: 0;
    transform: scale(1.5) rotate(-12deg);
  }
}
.arena-zone.resolving .arena-chain-card {
  animation: arena-resolve 0.5s ease-out both;
  animation-delay: calc(var(--order) * 180ms);
}
@keyframes arena-resolve {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(2.2) drop-shadow(0 0 16px #ffe7a6);
  }
  100% {
    filter: brightness(1);
  }
}

/* ---------- Phase / turn banner ---------- */
.arena-phase-banner {
  position: fixed;
  z-index: 1003;
  height: calc(110px * var(--k, 1));
  margin-top: calc(-55px * var(--k, 1));
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20, 40, 90, 0.85) 20%, rgba(20, 40, 90, 0.85) 80%, transparent);
  animation: arena-strip 1.05s ease-in-out forwards;
}
.arena-phase-banner.theirs {
  background: linear-gradient(90deg, transparent, rgba(110, 20, 40, 0.85) 20%, rgba(110, 20, 40, 0.85) 80%, transparent);
}
.arena-phase-banner.attack {
  background: linear-gradient(90deg, transparent, rgba(150, 90, 20, 0.85) 20%, rgba(150, 90, 20, 0.85) 80%, transparent);
}
.arena-phase-banner span {
  font: 900 calc(64px * var(--k, 1)) / 1 var(--a-serif);
  font-style: italic;
  letter-spacing: calc(4px * var(--k, 1));
  color: #fff;
  text-shadow:
    0 0 14px rgba(120, 200, 255, 0.9),
    0 3px 6px #000;
  animation: arena-strip-text 1.05s ease-in-out forwards;
}
@keyframes arena-strip {
  0% {
    opacity: 0;
    transform: scaleY(0.2);
  }
  15%,
  80% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes arena-strip-text {
  0% {
    transform: translateX(-60%);
    opacity: 0;
  }
  25%,
  75% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateX(60%);
    opacity: 0;
  }
}

/* ---------- Attack lunge (ghost copy of the attacking Champion card) ---------- */
.arena-lunge {
  position: fixed;
  z-index: 1001;
  margin: 0;
  pointer-events: none;
  animation: arena-lunge 0.65s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
@keyframes arena-lunge {
  0% {
    transform: none;
  }
  30% {
    transform: translateY(-14px) scale(1.12) rotate(-6deg);
  }
  55% {
    transform: translate(var(--dx), var(--dy)) scale(1.08);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 0;
  }
}

/* ---------- Damage number: burst on the target, then fly to the HP Deck ---------- */
.arena-dmg {
  position: fixed;
  z-index: 1004;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--a-serif);
  font-weight: 900;
  color: #ff3b3b;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 0 28px rgba(255, 30, 30, 0.7);
  animation: arena-dmg-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
  transition:
    left 0.45s ease-in,
    top 0.45s ease-in,
    font-size 0.45s ease-in,
    opacity 0.45s ease-in;
}
.arena-dmg.blocked {
  color: #8fc4ff;
  -webkit-text-stroke: 2px #fff;
  text-shadow: 0 0 22px rgba(80, 150, 255, 0.7);
}
.arena-dmg.fly {
  opacity: 0.2;
}
@keyframes arena-dmg-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.4);
  }
}

/* ---------- Final Blow ---------- */
.arena-final {
  position: fixed;
  z-index: 1005;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0, rgba(255, 90, 90, 0.75) 22%, rgba(120, 0, 30, 0.55) 48%, transparent 75%);
  animation: arena-final 1.45s ease-out forwards;
}
.arena-final.win {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0, rgba(255, 210, 120, 0.8) 22%, rgba(200, 120, 20, 0.5) 48%, transparent 75%);
}
.arena-final span {
  font: 900 calc(120px * var(--k, 1)) / 1 var(--a-serif);
  font-style: italic;
  color: #fff;
  -webkit-text-stroke: calc(3px * var(--k, 1)) #8a1020;
  text-shadow: 0 0 30px rgba(255, 80, 80, 0.9);
  animation: arena-final-text 1.45s ease-out forwards;
}
@keyframes arena-final {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  20% {
    opacity: 1;
    transform: scale(1.05);
  }
  75% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}
@keyframes arena-final-text {
  0% {
    transform: scale(2.4) rotate(-6deg);
    opacity: 0;
  }
  25% {
    transform: scale(1) rotate(-3deg);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* The result banner arrives after the Final Blow. */
.arena-banner {
  animation: arena-banner-in 0.5s ease-out 1.2s both;
}
@keyframes arena-banner-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .arena-banner,
  .arena-chain-card.pop,
  .arena-zone.resolving .arena-chain-card,
  .arena-chain-word span {
    animation: none;
    opacity: 1;
  }
}
.arena-stage.chain-live .arena-champ.attacking,
.arena-stage.chain-live .arena-champ.targeted {
  z-index: 11;
}
/* Let the sky arena show through the side panels. */
.arena-stage.has-table .arena-detail,
.arena-stage.has-table .arena-chain,
.arena-stage.has-table .arena-log,
.arena-stage.has-table .arena-master {
  background: rgba(11, 18, 32, 0.66);
  backdrop-filter: blur(6px);
}
/* Performance: no full-panel blur, no per-card filter (box-shadow is cheap). */
.arena-stage.has-table .arena-detail,
.arena-stage.has-table .arena-chain,
.arena-stage.has-table .arena-log,
.arena-stage.has-table .arena-master {
  backdrop-filter: none;
  background: rgba(11, 18, 32, 0.78);
}
/* Sunlight comes from the upper left in the field art: warm shadows fall to the lower right,
   with a tight contact shadow so the card lies on the stone. Empty slots cast nothing. */
.arena-stage.has-table .arena-card {
  filter: none;
  box-shadow:
    2px 3px 3px rgba(60, 38, 18, 0.35),
    9px 12px 18px rgba(80, 50, 20, 0.32);
}
.arena-stage.has-table .arena-slot:not(:has(> .cf-card, > .arena-card-back, > .hpdeck-stack span, > .arena-pile-stack > *)) {
  box-shadow: none;
}

/* ---------- Game window (/arena-play) ---------- */
body.arena-play {
  margin: 0;
  overflow: hidden;
  background: #05080f;
}
.arena-play .arena-viewport {
  border-radius: 0;
}
.arena-play .arena-stage {
  left: var(--x, 0);
}
.arena-play-settings {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 2000;
  transform: translateX(-50%);
  max-width: 96vw;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(11, 18, 32, 0.95);
  box-shadow: 0 12px 40px #000c;
}
.arena-play-settings[hidden] {
  display: none;
}
#arena-flash {
  position: fixed;
  bottom: 16px;
  left: 50%;
  z-index: 2001;
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(11, 18, 32, 0.95);
  color: #fff;
}
#arena-flash.error {
  color: #ffb4ab;
}
.arena-settings {
  position: absolute;
  left: 72px;
  top: 966px;
  width: 48px;
  height: 48px;
  font-size: 22px;
}

/* ---------- Loading indicator ---------- */
.arena-loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: rgba(5, 8, 15, 0.72);
  pointer-events: none;
}
.arena-loader.corner {
  inset: auto auto 20px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 30px;
  background: rgba(11, 18, 32, 0.85);
}
.arena-loader-text {
  margin: 0;
  color: #fff6e0;
  font-weight: 700;
  text-shadow: 0 2px 6px #000;
}
.arena-loader.corner .arena-loader-text {
  font-size: 13px;
  font-weight: 400;
}

/* ---------- Hand: whole 2:3 cards visible at the bottom edge ---------- */
.arena-hand {
  top: 902px;
  height: 176px;
}
.arena-hand > * {
  width: 116px;
}
.arena-hand > *:hover,
.arena-hand > *:focus,
.arena-hand > .selected {
  transform: translateY(-96px) scale(1.4);
}
/* The game window is only the stage: no Designer shell layout. */
body.arena-play {
  display: block;
  padding: 0;
}
.arena-play #arena-board {
  position: fixed;
  inset: 0;
}

/* ======================= Layout v3 (2026-10-29 Owner feedback) =======================
   Bigger cards, one row per side, HP Deck and Deck/Discard at the table edges,
   BP / hand / deck counts in the Master panels, captions and floating labels. */
.arena-detail {
  width: 330px;
  height: 636px;
}
.arena-master.own {
  top: 668px;
  width: 330px;
}
.arena-field {
  left: 360px;
  width: 1200px;
}
.arena-row {
  left: 8px;
  right: 8px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
}
.arena-row.opp {
  top: 34px;
}
.arena-row.own {
  top: 598px;
}
.arena-centre {
  gap: 14px;
}
.arena-edge {
  gap: 12px;
}
.arena-field .arena-card {
  width: 136px;
  height: 204px;
}
.arena-zone {
  top: 262px;
  height: 312px;
  padding-right: 170px;
}
.arena-end {
  left: 1418px;
  top: 348px;
}
.arena-chain-card {
  width: 156px;
  height: 234px;
}
.arena-zone.settled .arena-chain-card {
  width: 136px;
  height: 204px;
}
/* Hand: bigger, fully on screen, with a card-type chip. */
.arena-hand {
  left: 360px;
  width: 1200px;
  top: 826px;
  height: 230px;
}
.arena-hand > * {
  width: 150px;
}
.arena-hand > *:hover,
.arena-hand > *:focus,
.arena-hand > .selected {
  transform: translateY(-46px) scale(1.25);
}
.arena-type-chip {
  position: absolute;
  top: 3%;
  right: 4%;
  z-index: 6;
  padding: 1px 7px;
  border-radius: 6px;
  font: 800 11px/1.4 var(--a-sans);
  letter-spacing: 0.5px;
  color: #fff;
  box-shadow: 0 1px 4px #0008;
}
.arena-type-chip.t-ATK {
  background: #c62f3c;
}
.arena-type-chip.t-DEF {
  background: #2f6fd6;
}
.arena-type-chip.t-BLESSING {
  background: #c79a22;
}
.arena-type-chip.t-CURSE {
  background: #2a1838;
  border: 1px solid #9d4edd;
}
/* Master panels: avatar, HP, then BP / hand / deck. */
.arena-master {
  grid-template-columns: 60px minmax(0, 1fr) auto;
  grid-template-areas:
    'avatar name hp'
    'stats stats stats';
  row-gap: 8px;
}
.arena-master > .arena-avatar {
  grid-area: avatar;
}
.arena-master > .arena-master-name {
  grid-area: name;
}
.arena-master > .arena-master-total {
  grid-area: hp;
}
.arena-stats {
  grid-area: stats;
  display: flex;
  gap: 8px;
}
.arena-stat {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
}
.arena-stat small {
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: 0.5px;
}
.arena-stat b {
  font: 800 22px/1 var(--a-serif);
}
.arena-stat i {
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}
.arena-stat.bp b {
  color: #f3d18a;
}
.arena-opp-hand {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 3px;
  height: 30px;
}
.arena-opp-hand span {
  width: 20px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid var(--gold);
  background: repeating-linear-gradient(45deg, #2a2340 0 4px, #1d1830 4px 8px);
}
/* Medallion: the next action under the phase name. */
.arena-end em {
  font-size: 12px;
  font-style: normal;
  opacity: 0.85;
}
/* Action caption: who did what to whom. */
.arena-caption {
  position: absolute;
  left: 960px;
  top: 252px;
  z-index: 16;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 980px;
  padding: 8px 18px;
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.9);
  border-left: 6px solid #3b82f6;
  box-shadow: 0 6px 20px #0008;
  font-size: 20px;
  white-space: nowrap;
  animation: arena-caption-in 0.3s ease-out;
}
.arena-caption.theirs {
  border-left-color: #e63946;
}
.arena-caption b {
  padding: 2px 8px;
  border-radius: 6px;
  background: #3b82f6;
  font-size: 14px;
  letter-spacing: 1px;
}
.arena-caption.theirs b {
  background: #e63946;
}
@keyframes arena-caption-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
}
.arena-zone-head {
  display: none;
}
/* Floating labels on what an effect touched. */
.arena-float {
  position: fixed;
  z-index: 1006;
  transform: translate(-50%, 0);
  pointer-events: none;
  padding: 2px 10px;
  border-radius: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 2px 4px #000;
  background: rgba(11, 18, 32, 0.75);
  animation: arena-float 1.5s ease-out forwards;
}
.arena-float.status {
  color: #ffb4d0;
  border: 1px solid #c03a7a;
}
.arena-float.heal {
  color: #9ff0c8;
  border: 1px solid #2a9d8f;
}
.arena-float.mp {
  color: #9cc7ff;
  border: 1px solid #2f6fd6;
}
.arena-float.gold {
  color: #ffe08a;
  border: 1px solid #c79a22;
}
.arena-float.def {
  color: #cfe3ff;
  border: 1px solid #6fa8ff;
}
@keyframes arena-float {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.8);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -46px);
  }
}
/* Hand v3 — id-level selectors so older .arena-hand .cf-card rules cannot win. */
#arena-board .arena-hand > .cf-card,
#arena-board .arena-hand > .arena-card-back {
  width: 132px;
  margin: 0 var(--gap, -10px);
  transform: rotate(calc(var(--i, 0) * 1.6deg)) translateY(calc(var(--i, 0) * var(--i, 0) * 1px));
}
#arena-board .arena-hand > .cf-card:hover,
#arena-board .arena-hand > .cf-card:focus,
#arena-board .arena-hand > .cf-card.selected {
  z-index: 3;
  transform: translateY(-40px) scale(1.22);
}
#arena-board .arena-hand {
  top: 836px;
  overflow: visible;
}

/* ======================= Layout v4 (Owner sketch, 2026-10-29) =======================
   The field covers the whole stage; every card is placed in stage px by arena.js. */
.arena-field {
  left: 0;
  width: 1920px;
  pointer-events: none;
}
.arena-field > * {
  pointer-events: auto;
}
.arena-field .arena-card {
  width: auto;
  height: auto;
}
.arena-field .arena-card.opp {
  z-index: 1;
}
/* Small piles (HP Deck, Deck, Discard). */
.arena-field .hpdeck-pile,
.arena-field .arena-pile {
  z-index: 2;
}
/* Detail panel shorter; Master panel and HP Deck under it (bottom-left). */
.arena-detail {
  height: 544px;
}
.arena-master.own {
  top: 576px;
}
.arena-fullscreen {
  left: 150px;
  top: 1016px;
}
.arena-settings {
  left: 206px;
  top: 1016px;
}
/* Chain zone: an overlay between the two sides, only drawn while a Chain is shown. */
.arena-zone {
  left: 560px;
  right: auto;
  width: 800px;
  top: 330px;
  height: 270px;
  padding: 0;
  grid-template-columns: 1fr;
  justify-items: center;
  border: none;
  background: none;
  z-index: 12;
}
.arena-zone:not(:has(.arena-zone-cards)) {
  display: none;
}
.arena-zone-result {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.arena-caption {
  top: 290px;
}
.arena-end {
  left: 1410px;
  top: 468px;
}
/* Hand: peeks from the bottom edge; hover lifts a card; the picked card stands up at full size. */
#arena-board .arena-hand {
  left: 380px;
  width: 1100px;
  top: 968px;
  height: 112px;
}
#arena-board .arena-hand > .cf-card,
#arena-board .arena-hand > .arena-card-back {
  width: 150px;
  transform: rotate(calc(var(--i, 0) * 2deg)) translateY(calc(var(--i, 0) * var(--i, 0) * 1.2px));
  transition: transform 0.18s ease-out;
}
#arena-board .arena-hand > .cf-card:hover,
#arena-board .arena-hand > .cf-card:focus {
  z-index: 3;
  transform: translateY(-70px);
}
#arena-board .arena-hand > .cf-card.selected {
  z-index: 4;
  /* Stands up in the hand line, as the raised card did before the dock (Owner 2026-10-29). */
  transform: translateY(-115px) scale(1.25);
  transform-origin: 50% 100%;
  box-shadow:
    0 0 0 3px #ffe7a6,
    0 0 26px 8px rgba(255, 220, 130, 0.85),
    0 14px 30px #000c;
}
/* Champion glow for the picked card. */
.arena-champ.fit-gold {
  box-shadow:
    0 0 0 4px #f3c94e,
    0 0 30px 10px rgba(243, 201, 78, 0.85);
  animation: arena-glow-gold 1s ease-in-out infinite alternate;
}
.arena-champ.fit-silver {
  box-shadow:
    0 0 0 4px #dfe6ef,
    0 0 24px 8px rgba(214, 226, 240, 0.8);
  animation: arena-glow-silver 1s ease-in-out infinite alternate;
}
.arena-champ.fit-basic {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}
.arena-champ.unusable {
  filter: grayscale(0.8) brightness(0.6);
}
@keyframes arena-glow-gold {
  to {
    box-shadow:
      0 0 0 4px #ffe08a,
      0 0 44px 16px rgba(243, 201, 78, 0.95);
  }
}
@keyframes arena-glow-silver {
  to {
    box-shadow:
      0 0 0 4px #ffffff,
      0 0 36px 12px rgba(230, 238, 250, 0.9);
  }
}
.arena-champ.picked-actor {
  box-shadow:
    0 0 0 4px #5fc9ff,
    0 0 28px 8px rgba(95, 201, 255, 0.8);
  transform: translateY(-8px);
}
.arena-champ.target-ready {
  animation: arena-pulse 0.8s ease-in-out infinite alternate;
  cursor: crosshair;
}
.arena-champ.picked-target {
  box-shadow:
    0 0 0 4px #ff6b6b,
    0 0 28px 8px rgba(255, 80, 80, 0.85);
}
.arena-def-slot.ready {
  box-shadow:
    0 0 0 3px #5fc9ff,
    0 0 20px 6px rgba(95, 201, 255, 0.6);
  cursor: pointer;
}
/* LV UP button on the Champion card. */
.arena-champ .arena-levelup {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 9;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid #f3d18a;
  background: linear-gradient(#e6b866, #a5732b);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}
/* Step hint and confirm popover (middle of the table). */
.arena-hint {
  position: absolute;
  left: 960px;
  top: 560px;
  z-index: 20;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.9);
  border: 1px solid rgba(243, 209, 138, 0.6);
  color: #fff6e0;
  font-size: 17px;
  white-space: nowrap;
  pointer-events: none;
}
.arena-pop {
  position: absolute;
  left: 960px;
  top: 340px;
  z-index: 30;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  width: 420px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(11, 18, 32, 0.96);
  border: 2px solid #f3d18a;
  box-shadow: 0 16px 40px #000c;
  font-size: 15px;
}
.arena-pop h4 {
  margin: 0;
  color: #f3d18a;
  font-family: var(--a-serif);
  font-size: 20px;
}
.arena-pop-who {
  margin: 0;
  font-weight: 700;
}
.arena-pop .arena-extras {
  font-size: 15px;
}
.arena-pop-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.arena-pop-buttons button {
  min-width: 110px;
  font-size: 16px;
}
.arena-field .arena-zone .arena-chain-card {
  width: 156px;
  height: 234px;
}
.arena-field .arena-zone.settled .arena-chain-card {
  width: 136px;
  height: 204px;
}
/* Glows must beat the table card shadow (.arena-stage.has-table .arena-card). */
#arena-board .arena-champ.fit-gold {
  box-shadow:
    0 0 0 5px #f3c94e,
    0 0 34px 12px rgba(243, 201, 78, 0.9);
}
#arena-board .arena-champ.fit-silver {
  box-shadow:
    0 0 0 5px #e9eef5,
    0 0 28px 10px rgba(225, 233, 245, 0.9);
}
#arena-board .arena-champ.fit-basic {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
#arena-board .arena-champ.picked-actor {
  box-shadow:
    0 0 0 5px #5fc9ff,
    0 0 30px 10px rgba(95, 201, 255, 0.85);
}
#arena-board .arena-champ.picked-target {
  box-shadow:
    0 0 0 5px #ff6b6b,
    0 0 30px 10px rgba(255, 80, 80, 0.9);
}
#arena-board .arena-def-slot.ready {
  box-shadow:
    0 0 0 4px #5fc9ff,
    0 0 22px 8px rgba(95, 201, 255, 0.7);
}
/* Compact confirm bar in the gap between the two sides. */
.arena-pop {
  top: 462px;
  width: 560px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 14px;
  padding: 10px 16px;
}
.arena-pop h4 {
  font-size: 17px;
}
.arena-pop-who {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.arena-pop .arena-extras {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  font-size: 14px;
}
.arena-pop .arena-extras p {
  width: 100%;
}
.arena-pop-buttons {
  grid-column: 1 / -1;
}
/* Readable on the light marble table: a dark ring under each glow, plus a badge. */
#arena-board .arena-champ.fit-gold {
  box-shadow:
    0 0 0 3px #2a1c05,
    0 0 0 8px #f3c94e,
    0 0 40px 14px rgba(243, 190, 50, 0.95);
}
#arena-board .arena-champ.fit-silver {
  box-shadow:
    0 0 0 3px #1b2638,
    0 0 0 8px #dfe8f4,
    0 0 36px 12px rgba(150, 190, 255, 0.95);
}
#arena-board .arena-champ.fit-gold,
#arena-board .arena-champ.fit-silver {
  animation: none;
}
#arena-board .arena-champ.fit-gold::after,
#arena-board .arena-champ.fit-silver::after {
  position: absolute;
  left: 50%;
  top: -16px;
  z-index: 9;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 10px;
  font: 900 13px/1.4 var(--a-sans);
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: 0 2px 6px #0009;
}
#arena-board .arena-champ.fit-gold::after {
  content: '★ FULL MATCH';
  background: linear-gradient(#ffe08a, #c99a22);
  color: #2a1c05;
}
#arena-board .arena-champ.fit-silver::after {
  content: '◐ PARTIAL';
  background: linear-gradient(#ffffff, #b9c6d8);
  color: #1b2638;
}

/* ======================= Layout v5 (Owner sketch 2) ======================= */
/* Slower motion. */
.arena-lunge {
  animation-duration: 1s;
}
.arena-dmg {
  animation-duration: 0.5s;
  transition-duration: 0.7s;
}
.arena-phase-banner,
.arena-phase-banner span {
  animation-duration: 1.5s;
}
/* Left column: big card, Effect text, compact Master panel, HP Deck beside it. */
.arena-bigcard {
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(11, 18, 32, 0.55);
  border: 1px solid var(--line-strong);
}
.arena-bigcard > .cf-card {
  width: 100%;
  box-shadow: 0 12px 30px #000b;
}
.arena-bigcard-empty {
  color: var(--text-3);
}
.arena-detail.arena-effect {
  z-index: 5;
  height: auto;
  box-sizing: border-box;
}
.arena-master.own {
  top: 790px;
  width: 200px;
  height: 274px;
  box-sizing: border-box;
  grid-template-columns: 52px 1fr;
  grid-template-areas:
    'avatar name'
    'hp hp'
    'stats stats';
  align-content: start;
}
.arena-master.own .arena-master-total {
  justify-items: start;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 8px;
}
.arena-master.own .arena-stats {
  flex-direction: column;
  gap: 4px;
}
.arena-master.own .arena-stat {
  justify-content: space-between;
}
/* Right column: bot, status, Champion stack, Passive text. */
.arena-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.arena-log-toggle {
  padding: 3px 10px;
  font-size: 12px;
}
.arena-log[hidden] {
  display: none;
}
.arena-viewer {
  position: relative;
  flex: none;
  height: 470px;
}
.arena-viewer-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.arena-viewer-tabs button {
  flex: 1;
  padding: 4px;
  font-size: 12px;
  opacity: 0.7;
}
.arena-viewer-tabs button.on {
  opacity: 1;
  border-color: var(--gold);
  color: var(--gold);
}
.arena-viewer-stack {
  position: relative;
  height: 432px;
}
.arena-viewer-card {
  position: absolute;
  right: calc(var(--depth) * 22px);
  top: calc(var(--depth) * 6px);
  width: 288px;
  height: 432px;
  cursor: pointer;
  filter: brightness(calc(1 - var(--depth) * 0.25));
  transition: transform 0.2s;
}
.arena-viewer-card:not(.front):hover {
  transform: translateX(-10px);
}
.arena-viewer-card .arena-composed {
  width: 100%;
  height: 100%;
  box-shadow: 0 10px 26px #000b;
}
.arena-passive-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(11, 18, 32, 0.85);
  font-size: 14px;
}
.arena-passive-panel h3 {
  margin: 0;
  font-family: var(--a-serif);
}
.arena-passive-panel p {
  margin: 6px 0 0;
}
/* Level badge reads "LV n"; MP bar stays inside the card. */
#arena-board .arena-level {
  width: auto;
  height: auto;
  padding: 2px 8px;
  border-radius: 10px;
  top: 4px;
  left: 4px;
  font-size: 13px;
  letter-spacing: 0.5px;
  border: 2px solid #fff;
  background: #2c63d6;
  color: #fff;
}
#arena-board .arena-champ .arena-mp {
  left: 6px;
  right: 6px;
  bottom: 6px;
}
#arena-board .arena-champ .arena-levelup {
  bottom: 30px;
}
/* ⓘ on LV UP: the Passive the next level unlocks (tooltip). */
.arena-champ .arena-levelup .arena-levelup-info {
  display: inline-block;
  margin-left: 6px;
  padding: 0 2px;
  font-style: normal;
  font-weight: 700;
  cursor: help;
}
/* Next-level Passive in the Champion viewer: a quieter block under the current one. */
.arena-passive-panel .arena-next-passive {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(122, 76, 14, 0.45);
  opacity: 0.85;
}
.arena-passive-panel .arena-next-passive b {
  color: #9a6a1c;
  font-family: var(--a-serif);
}
/* Hand: real 2:3 cards (no stretch to the container height). */
#arena-board .arena-hand {
  align-items: flex-start;
}
#arena-board .arena-hand > .cf-card {
  height: auto;
  aspect-ratio: 2 / 3;
  flex: none;
}
/* The bot's hand: card backs peeking from the top edge. */
.arena-opp-fan {
  position: absolute;
  left: 660px;
  top: -64px;
  width: 600px;
  height: 120px;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.arena-opp-fan .arena-card-back {
  flex: none;
  width: 80px;
  height: 120px;
  margin: 0 -14px;
  transform: rotate(calc(var(--i, 0) * -3deg)) translateY(calc(var(--i, 0) * var(--i, 0) * -1.5px));
  box-shadow: 0 4px 10px #0009;
}
/* The picked card, standing up at the bottom centre, with floating buttons. */
.arena-raised {
  z-index: 25;
  pointer-events: none;
  animation: arena-raise 0.35s ease-out;
}
.arena-raised > .cf-card {
  width: 100%;
  box-shadow:
    0 0 0 3px #ffe7a6,
    0 0 30px 10px rgba(255, 220, 130, 0.8),
    0 18px 40px #000c;
}
@keyframes arena-raise {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.85);
  }
}
.arena-raised button {
  pointer-events: auto;
}
.arena-extra-btn {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border-radius: 14px;
  border: 2px solid #6fa8ff;
  background: rgba(20, 40, 90, 0.92);
  color: #cfe3ff;
  font: 800 13px/1.2 var(--a-sans);
  white-space: nowrap;
  box-shadow: 0 4px 12px #000a;
  animation: arena-float-btn 1.6s ease-in-out infinite alternate;
}
.arena-extra-btn.on {
  border-color: #ffe08a;
  background: linear-gradient(#ffe08a, #c99a22);
  color: #2a1c05;
  box-shadow: 0 0 16px 4px rgba(255, 210, 100, 0.8);
}
.arena-extra-btn:disabled {
  border-color: #555;
  background: rgba(40, 40, 50, 0.85);
  color: #888;
  animation: none;
  cursor: not-allowed;
}
@keyframes arena-float-btn {
  to {
    transform: translate(-50%, calc(-50% - 5px));
  }
}
.arena-raised-go {
  position: absolute;
  left: 50%;
  top: -62px;
  transform: translateX(-50%);
  padding: 10px 26px;
  border-radius: 24px;
  border: 2px solid #ffe08a;
  background: linear-gradient(#e6b866, #a5732b);
  color: #fff;
  font: 900 18px/1 var(--a-serif);
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: 0 6px 18px #000b;
}
.arena-raised-go:disabled {
  filter: grayscale(0.8) brightness(0.7);
  cursor: not-allowed;
}
.arena-raised-cancel {
  position: absolute;
  right: -14px;
  top: -14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  font-size: 16px;
}
/* Hint above the raised card. */
.arena-hint {
  top: 556px;
}
#arena-board .arena-viewer-card .arena-level {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
}
.arena-viewer-card:not(.front) .arena-level {
  display: none;
}

/* ======================= v6: Extra rings on the card icons, MP preview ======================= */
/* A turning ring of light around an Element / Class icon the chosen Champion can activate. */
.arena-extra-ring {
  position: absolute;
  z-index: 6;
  width: 25%;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: none;
  cursor: pointer;
}
.arena-extra-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  /* Bright green (Owner 2026-10-29): stands out from the gold card frame. */
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(80, 255, 140, 0.25) 65%, #3dff7a 85%, #e6ffe9 92%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 61%);
  mask: radial-gradient(circle, transparent 58%, #000 61%);
  animation: arena-ring-spin 1.6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(70, 255, 130, 0.95));
}
.arena-extra-ring:hover::before {
  animation-duration: 0.8s;
}
/* The Studio's generic button hover paints a dark fill, which covered the icon. */
.arena-raised .arena-extra-ring,
.arena-raised .arena-extra-ring:hover:not(:disabled) {
  background: none;
  border: none;
}
/* Switched on: a full bright ring and a soft glow on the icon. */
.arena-extra-ring.on::before {
  background: conic-gradient(#3dff7a, #d9ffe2, #1fd660, #3dff7a);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 60%);
  mask: radial-gradient(circle, transparent 56%, #000 60%);
  animation-duration: 3s;
}
.arena-extra-ring.on {
  box-shadow: 0 0 22px 8px rgba(60, 255, 120, 0.7);
}
/* Off: a dimmer, slower green ring that invites a click; the label says which state it is. */
.arena-extra-ring:not(.on)::before {
  opacity: 0.6;
  animation-duration: 2.6s;
}
.arena-extra-ring:not(.on):hover::before {
  opacity: 1;
}
.arena-extra-ring::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: -34%;
  translate: -50% 0;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  font: 800 12px/1.4 var(--a-sans);
  color: #c9cfdb;
  background: rgba(20, 28, 44, 0.88);
  border: 1px solid #5d6b85;
  pointer-events: none;
}
.arena-extra-ring.on::after {
  color: #032b10;
  background: linear-gradient(#b9ffcb, #34e46e);
  border-color: #e6ffe9;
  box-shadow: 0 0 10px rgba(60, 255, 120, 0.8);
}
@keyframes arena-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
/* MP preview on the chosen Champion. */
#arena-board .arena-champ .arena-mp.spend span {
  background: linear-gradient(90deg, #2c63d6, #5fc9ff);
}
.arena-mp-lost {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 200, 80, 0.9) 0 4px, rgba(200, 120, 20, 0.9) 4px 8px);
  animation: arena-mp-blink 0.8s ease-in-out infinite alternate;
}
.arena-mp.over .arena-mp-lost {
  background: repeating-linear-gradient(45deg, rgba(255, 90, 90, 0.95) 0 4px, rgba(150, 20, 30, 0.95) 4px 8px);
}
@keyframes arena-mp-blink {
  to {
    opacity: 0.45;
  }
}
.arena-mp-cost {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 9;
  transform: translateX(-50%);
  padding: 2px 12px;
  border-radius: 12px;
  background: linear-gradient(#ffe08a, #c99a22);
  color: #2a1c05;
  font: 900 18px/1.3 var(--a-serif);
  box-shadow: 0 3px 10px #000a;
  white-space: nowrap;
}
.arena-mp-cost.over {
  background: linear-gradient(#ff8a8a, #b02a3a);
  color: #fff;
}

/* ======================= v7: Owner feedback 2026-10-29 (turn flow, hand, choices) ======================= */
/* End Turn button with the 60 s ring; the field sits higher, the medallion in the gap. */
.arena-end {
  left: 1410px;
  top: 400px;
  overflow: visible;
}
.arena-end strong {
  font-size: 22px;
  letter-spacing: 0.5px;
}
.arena-end-time {
  font-weight: 800;
}
.arena-end-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(#7fe0ff calc(var(--left, 1) * 360deg), rgba(255, 255, 255, 0.12) 0);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%);
  mask: radial-gradient(circle, transparent 64%, #000 66%);
  filter: drop-shadow(0 0 6px rgba(127, 224, 255, 0.8));
}
.arena-end.low .arena-end-ring,
.arena-end.answer .arena-end-ring {
  background: conic-gradient(#ff6b6b calc(var(--left, 1) * 360deg), rgba(255, 255, 255, 0.12) 0);
  filter: drop-shadow(0 0 8px rgba(255, 80, 80, 0.9));
}
.arena-end.low:not(:disabled) {
  animation: arena-end-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes arena-end-pulse {
  to {
    transform: scale(1.06);
  }
}
/* While answering an attack the button is not pressable but its timer must stay readable. */
#arena-board .arena-end.answer:disabled {
  filter: none;
}
.arena-end.theirs:not(.answer) .arena-end-ring {
  display: none;
}
/* Hand: a gap opens where the picked card stood; cards that cannot be used now are grey. */
.arena-hand-gap {
  flex: none;
  width: 200px;
}
#arena-board .arena-hand > .locked {
  filter: grayscale(0.9) brightness(0.55);
}
#arena-board .arena-hand > .choose-me {
  animation: arena-choose 0.7s ease-in-out infinite alternate;
  z-index: 2;
}
@keyframes arena-choose {
  from {
    box-shadow:
      0 0 0 3px #ff9a3c,
      0 0 12px 4px rgba(255, 150, 60, 0.6);
  }
  to {
    box-shadow:
      0 0 0 4px #ffe08a,
      0 0 30px 10px rgba(255, 200, 80, 0.95);
    translate: 0 -24px;
  }
}
#arena-board .arena-hand > .discarding {
  animation: none;
  translate: 0 -60px;
  box-shadow:
    0 0 0 4px #ff4d4d,
    0 0 26px 8px rgba(255, 60, 60, 0.9);
}
.arena-hand.dealing > * {
  visibility: hidden;
}
/* The picked card stands over the gap; the action button sits beside it. */
.arena-raised-go {
  left: calc(100% + 14px);
  top: 42%;
  transform: none;
}
.arena-raised:has(.arena-raised-go) {
  z-index: 26;
}
/* DEF re-set: a set card can be swapped for the one in hand. */
.arena-def-slot.swap {
  cursor: pointer;
}
.arena-swap-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.9);
  border: 2px solid #5fc9ff;
  color: #cfefff;
  font: 900 15px/1.2 var(--a-sans);
  pointer-events: none;
}
/* Gold / silver hint while setting a DEF: information only. */
#arena-board .arena-champ.hint-only {
  cursor: default;
}
.arena-hint {
  top: 438px;
}
.arena-caption {
  top: 222px;
}
.arena-zone {
  top: 300px;
}
/* 3 · 2 · 1 before the first turn. */
.arena-countdown {
  position: fixed;
  z-index: 9000;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(10, 16, 30, 0.35), rgba(10, 16, 30, 0.6));
}
.arena-countdown span {
  font: 900 calc(300px * var(--k, 1)) / 1 var(--a-serif);
  color: #fff6e0;
  text-shadow:
    0 0 30px rgba(255, 210, 110, 0.9),
    0 8px 30px #000;
  animation: arena-count 0.9s ease-out forwards;
}
.arena-countdown.go span {
  font-size: calc(200px * var(--k, 1));
  color: #ffe08a;
}
/* One click before the countdown, so Chrome lets the game play sound. */
.arena-sound-gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: radial-gradient(circle, rgba(10, 16, 30, 0.35), rgba(10, 16, 30, 0.7));
}
.arena-sound-gate-go {
  padding: 18px 56px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: linear-gradient(#3a2c12, #1d160a);
  color: #ffe08a;
  font: 800 34px / 1 var(--a-serif);
  cursor: pointer;
  box-shadow: 0 0 30px rgba(255, 210, 110, 0.45);
  animation: arena-gate-pulse 1.4s ease-in-out infinite;
}
.arena-sound-gate-go:hover,
.arena-sound-gate-go:focus-visible {
  background: linear-gradient(#5a4419, #2a1f0c);
  outline: none;
}
.arena-sound-gate-note {
  color: #f2e6c9;
  text-shadow: 0 2px 6px #000;
}
@keyframes arena-gate-pulse {
  50% {
    box-shadow: 0 0 50px rgba(255, 210, 110, 0.8);
  }
}
@keyframes arena-count {
  from {
    opacity: 0;
    transform: scale(2.2);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
/* A card flying from the Deck into the hand. */
.arena-deal {
  position: fixed;
  z-index: 8000;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 10px 24px #000b;
}
/* A pending choice in the middle of the table. */
.arena-choice-panel {
  position: absolute;
  left: 960px;
  top: 300px;
  z-index: 40;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 520px;
  max-width: 1000px;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(11, 18, 32, 0.95);
  border: 2px solid #ffb35c;
  box-shadow:
    0 0 0 6px rgba(255, 179, 92, 0.25),
    0 18px 44px #000d;
  animation: arena-raise 0.3s ease-out;
}
.arena-choice-panel small {
  color: #f3d18a;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.arena-choice-panel h4 {
  margin: 0;
  color: #fff6e0;
  font: 800 24px/1.2 var(--a-serif);
  text-align: center;
}
.arena-choice-hand {
  margin: 0;
  color: #ffd27a;
  font-weight: 800;
  font-size: 17px;
  animation: arena-mp-blink 0.7s ease-in-out infinite alternate;
}
.arena-choice-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.arena-choice-options button {
  font-size: 17px;
  padding: 8px 18px;
}
.arena-choice-card {
  width: 130px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.15s;
}
.arena-choice-card:hover {
  transform: translateY(-8px) scale(1.05);
}
.arena-choice-card > .cf-card {
  width: 100%;
  box-shadow:
    0 0 0 3px #ffb35c,
    0 8px 20px #000b;
}
/* Long step hints wrap instead of running under the End Turn button. */
.arena-hint {
  max-width: 820px;
  white-space: normal;
  text-align: center;
}

/* ======================= v8: the ATK card strikes, slower motion, clear response ======================= */
/* A card flying into the Chain, or the ATK card striking its target. */
.arena-fly {
  position: fixed;
  z-index: 1003;
  pointer-events: none;
  will-change: transform;
}
.arena-fly > .cf-card {
  width: 100%;
  box-shadow:
    0 0 0 3px #ffe7a6,
    0 0 28px 8px rgba(255, 220, 130, 0.75),
    0 18px 36px #000c;
}
.arena-shake {
  animation: arena-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes arena-shake {
  10%,
  90% {
    translate: -3px 0;
  }
  20%,
  80% {
    translate: 6px 2px;
  }
  30%,
  50%,
  70% {
    translate: -10px -2px;
  }
  40%,
  60% {
    translate: 10px 2px;
  }
}
/* Slower effects (Owner 2026-10-29). */
.arena-dmg {
  animation-duration: 0.7s;
  transition-duration: 1s;
}
.arena-float {
  animation-duration: 2.2s;
}
.arena-art-fx {
  animation-duration: 1.6s;
}
.arena-phase-banner,
.arena-phase-banner span {
  animation-duration: 2s;
}
/* Under attack: your usable DEF cards rise above the Chain dimming and call for a click. */
.arena-stage.chain-live .arena-def-slot.defend,
.arena-stage.chain-live .arena-champ.fit-gold,
.arena-stage.chain-live .arena-champ.fit-silver,
.arena-stage.chain-live .arena-champ.fit-basic,
.arena-stage.chain-live .arena-champ.picked-actor,
.arena-stage.chain-live .arena-champ.unusable {
  z-index: 11;
}
#arena-board .arena-def-slot.defend {
  animation: arena-defend 0.8s ease-in-out infinite alternate;
}
@keyframes arena-defend {
  from {
    box-shadow:
      0 0 0 4px #5fc9ff,
      0 0 18px 6px rgba(95, 201, 255, 0.6);
  }
  to {
    box-shadow:
      0 0 0 6px #b8ecff,
      0 0 44px 16px rgba(95, 201, 255, 0.95);
    translate: 0 -10px;
  }
}
.arena-swap-tag.defend {
  top: auto;
  bottom: -18px;
  border-color: #ffe08a;
  background: linear-gradient(#2c63d6, #16357a);
  color: #fff;
  font-size: 16px;
}
.arena-respond-bar {
  position: absolute;
  left: 50%;
  bottom: -40px;
  z-index: 30;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  white-space: nowrap;
  border-radius: 14px;
  background: rgba(60, 10, 20, 0.94);
  border: 2px solid #ff6b6b;
  box-shadow:
    0 0 0 6px rgba(255, 107, 107, 0.2),
    0 12px 30px #000c;
  color: #fff;
  pointer-events: auto;
  animation: arena-raise 0.3s ease-out;
}
.arena-respond-bar b {
  font-size: 18px;
}
.arena-respond-bar span {
  color: #ffd27a;
  font-size: 14px;
}
.arena-respond-bar button {
  font-size: 15px;
  padding: 6px 14px;
}
/* The response bar lives on the stage, between your DEF cards and your hand. */
.arena-respond-bar {
  left: 960px;
  top: 846px;
  bottom: auto;
}
.arena-raised.docked {
  animation: none;
}

/* v9 — DEF set slam (Owner 2026-10-29): wind up over the slot, slam down, dust ring. */
.arena-slam {
  transform-origin: 50% 80%;
  perspective: 900px;
}
.arena-slam > .arena-card-back {
  height: 100%;
  box-shadow: 0 0 0 3px #9cc8ff, 0 0 26px 6px rgba(120, 180, 255, 0.6), 0 18px 36px #000c;
}
.arena-slam > .cf-card {
  box-shadow:
    0 0 0 3px #9cc8ff,
    0 0 28px 8px rgba(120, 180, 255, 0.7),
    0 18px 36px #000c;
}
/* The real card waits in its slot until the slam lands. */
.arena-def-slot.landing > * {
  visibility: hidden;
}
/* Gold DEF shield over the card just set (Owner reference 2026-10-29): pops in,
   a shine sweeps across, it holds, then fades. No blend modes: reads on any table. */
.arena-def-shield {
  position: fixed;
  z-index: 1002;
  pointer-events: none;
  translate: -50% -50%;
  filter: drop-shadow(0 0 10px rgba(255, 205, 70, 0.85)) drop-shadow(0 0 26px rgba(255, 190, 40, 0.45));
  animation: arena-def-shield 1.4s ease-out forwards;
}
.arena-def-shield svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.arena-def-shield-shine {
  animation: arena-def-shield-shine 0.7s 0.2s ease-in-out both;
}
@keyframes arena-def-shield {
  from {
    scale: 0.35;
    opacity: 0;
  }
  18% {
    scale: 1.12;
    opacity: 1;
  }
  30% {
    scale: 1;
  }
  72% {
    scale: 1;
    opacity: 1;
  }
  to {
    scale: 1.06;
    opacity: 0;
  }
}
@keyframes arena-def-shield-shine {
  from {
    translate: 0 0;
  }
  to {
    translate: 190px 0;
  }
}

/* ===== v10 — Owner batch 2026-10-29 (14 items) ===== */

/* 1 · A clicked card on the table glows until another one is clicked. */
#arena-board .arena-card.field-focus {
  outline: 3px solid #ffe7a6;
  outline-offset: 3px;
  box-shadow: 0 0 30px 9px rgba(255, 214, 110, 0.8);
  animation: arena-focus-pulse 1.6s ease-in-out infinite;
  z-index: 4;
}
@keyframes arena-focus-pulse {
  50% {
    box-shadow: 0 0 44px 14px rgba(255, 214, 110, 0.55);
  }
}

/* 2 · Status Icons on the Champion card, side by side, turns left in a badge. */
#arena-board .arena-champ .arena-chips {
  top: 34px;
  left: auto;
  right: 4px;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
#arena-board .arena-chip.arena-status-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c2140, #0d0a16);
  border: 1.5px solid #e8c56a;
  box-shadow: 0 2px 6px #000b;
}
#arena-board .arena-chip.arena-status-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
#arena-board .arena-chip.arena-status-icon b {
  position: absolute;
  right: -5px;
  bottom: -4px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #e8c56a;
  color: #241600;
  font: 800 10px/14px var(--a-sans);
  text-align: center;
}
#arena-board .arena-chip.arena-status-icon.pending {
  opacity: 0.55;
  border-style: dashed;
}

/* 3 · The turn line fits inside the round button. */
#arena-board .arena-end small {
  max-width: 74%;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 6px;
}

/* 4 · Target choice: gold = the most value from the card, silver = next. */
#arena-board .arena-champ.target-ready.tgt-gold {
  box-shadow:
    0 0 0 4px #f5c84b,
    0 0 32px 12px rgba(245, 200, 75, 0.85);
}
#arena-board .arena-champ.target-ready.tgt-silver {
  box-shadow:
    0 0 0 4px #dfe6f1,
    0 0 28px 9px rgba(210, 222, 240, 0.75);
}

/* 7 · MP number centred in its bar. */
#arena-board .arena-champ .arena-mp {
  display: grid;
  place-items: center;
}
#arena-board .arena-champ .arena-mp b {
  position: relative;
  z-index: 1;
  padding: 0;
  width: 100%;
  text-align: center;
  line-height: 16px;
  text-shadow: 0 1px 2px #000;
}

/* 8 · A finer LV tag: dark enamel, double gold rim, engraved serif. */
#arena-board .arena-level {
  padding: 3px 10px 3px 9px;
  border-radius: 3px 12px 3px 12px;
  border: 1.5px solid #f0d27a;
  outline: 1px solid #7a5618;
  outline-offset: 1px;
  background: linear-gradient(160deg, #2b2210 0%, #120d05 55%, #2a1f0b 100%);
  box-shadow:
    inset 0 0 6px rgba(255, 215, 120, 0.35),
    0 3px 8px #000b;
  color: #ffe9b0;
  font: 700 13px/1 var(--a-serif);
  letter-spacing: 1.5px;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(255, 210, 110, 0.5);
}

/* 9 · HP by type as one bar under the avatar; 10 · Deck / Discard counts there too. */
.arena-master.own {
  grid-template-areas:
    'avatar name'
    'hp hp'
    'hpbar hpbar'
    'stats stats';
}
.arena-master.opp {
  grid-template-areas:
    'avatar name hp'
    'hpbar hpbar hpbar'
    'stats stats stats';
}
.arena-hpwrap {
  grid-area: hpbar;
  display: grid;
  gap: 3px;
}
.arena-hpbar {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: #0b1220;
  border: 1px solid #3a4a66;
}
.arena-hpbar > span {
  height: 100%;
  transition: width 0.5s ease-out;
}
.arena-hpbar .hp-seg-vital {
  background: linear-gradient(#f2a2b1, #c9566e);
}
.arena-hpbar .hp-seg-grace {
  background: linear-gradient(#f5d28c, #c4913c);
}
.arena-hpbar .hp-seg-ethereal {
  background: linear-gradient(#d9d4ff, #9087d6);
}
.arena-hplegend {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font: 700 11px/1.2 var(--a-sans);
}
.arena-hplegend span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 2px;
}
.arena-hplegend .hp-key-vital {
  color: #f2a2b1;
}
.arena-hplegend .hp-key-vital::before {
  background: #e7899a;
}
.arena-hplegend .hp-key-grace {
  color: #f5d28c;
}
.arena-hplegend .hp-key-grace::before {
  background: #d9b06a;
}
.arena-hplegend .hp-key-ethereal {
  color: #d9d4ff;
}
.arena-hplegend .hp-key-ethereal::before {
  background: #b9b2e6;
}
.arena-hplegend .zero {
  opacity: 0.45;
}
.arena-master.own .arena-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.arena-master.own .arena-stat {
  padding: 3px 6px;
}
.arena-master.own .arena-stat b {
  font-size: 18px;
}
.arena-master.opp .arena-stat {
  padding: 3px 4px;
}
.arena-master.opp .arena-stat small {
  font-size: 10px;
}
.arena-master.opp .arena-stat b {
  font-size: 18px;
}

/* 13 · A finished Chain (and its caption) fades out. */
.arena-zone.fading,
.arena-caption.fading,
.arena-chain-links.fading,
.arena-chain-img.fading {
  animation: arena-fade-out 0.6s ease-in forwards;
}
@keyframes arena-fade-out {
  to {
    opacity: 0;
    filter: blur(2px);
  }
}

/* ===== v11 — Owner batch 2026-10-29 (damage preview, Allegiance, 4 DEF slots) ===== */
/* Expected damage while under attack, inside the red respond bar. */
.arena-dmg-preview {
  display: grid;
  gap: 2px;
  margin-left: 6px;
}
.arena-dmg-line {
  font: 700 14px/1.25 var(--a-sans);
  font-style: normal;
  white-space: nowrap;
  color: #ffd9d9;
}
.arena-dmg-line.safe {
  color: #9ff0c8;
}
.arena-dmg-line.hurt {
  color: #ffb3b3;
}
/* Allegiance pick before the match. */
.arena-allegiance-gate {
  z-index: 9001;
}
.arena-allegiance-title {
  margin: 0;
  color: #ffe08a;
  font: 800 34px/1.2 var(--a-serif);
  text-shadow: 0 2px 10px #000;
}
.arena-allegiance-row {
  display: flex;
  gap: 24px;
}
.arena-allegiance-pick {
  display: grid;
  gap: 8px;
  width: 280px;
  padding: 26px 20px;
  border-radius: 18px;
  cursor: pointer;
  text-align: center;
  color: #fff6e0;
  box-shadow: 0 10px 30px #000b;
}
.arena-allegiance-pick strong {
  font: 800 30px/1 var(--a-serif);
}
.arena-allegiance-pick small {
  font-size: 14px;
  opacity: 0.9;
}
.arena-allegiance-pick.divine {
  border: 2px solid #ffe08a;
  background: radial-gradient(circle at 50% 20%, #6b5a24, #2a2210 75%);
}
.arena-allegiance-pick.demonic {
  border: 2px solid #c58cff;
  background: radial-gradient(circle at 50% 20%, #4b2468, #1c0c28 75%);
}
.arena-allegiance-pick:hover {
  filter: brightness(1.2);
  transform: translateY(-3px);
}
.arena-round-note {
  color: var(--text-2);
  font-size: 12px;
}
/* Allegiance gate: opaque, so loading art behind it does not show through. */
.arena-allegiance-gate {
  background: radial-gradient(circle, #141d33, #070b14 75%);
}
/* Reward offer: bigger faces with the Rarity under each. */
.arena-choice-panel.reward .arena-choice-card {
  width: 200px;
  display: grid;
  gap: 6px;
  justify-items: center;
}
.arena-reward-rarity {
  padding: 2px 12px;
  border-radius: 999px;
  font: 800 13px/1.4 var(--a-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #3a4a66;
  color: #e6edf7;
}
.arena-reward-rarity.r-rare {
  background: #2c63d6;
}
.arena-reward-rarity.r-epic {
  background: #8a3fd1;
}
.arena-reward-rarity.r-legendary {
  background: linear-gradient(#f5d28c, #c4913c);
  color: #2a1a00;
}

/* ===== v12 — End Turn in the status panel; DEF line (Owner 2026-10-29) ===== */
#arena-board .arena-endbar {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  margin-top: 8px;
  padding: 12px 10px 10px;
  border-radius: 14px;
  border: 2px solid #ffe7a6;
  background: linear-gradient(#f6d27a, #c58f2c 60%, #9a6a17);
  color: #2a1a00;
  box-shadow:
    0 0 0 3px rgba(255, 214, 110, 0.25),
    0 0 22px 4px rgba(255, 206, 90, 0.55),
    0 8px 18px #000a;
  cursor: pointer;
  animation: arena-endbar-pulse 1.8s ease-in-out infinite;
}
#arena-board .arena-endbar strong {
  font: 800 26px/1.05 var(--a-serif);
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.6);
}
#arena-board .arena-endbar small {
  font: 700 11px/1.2 var(--a-sans);
  letter-spacing: 2px;
  opacity: 0.75;
}
#arena-board .arena-endbar:not(:disabled):hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
@keyframes arena-endbar-pulse {
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 214, 110, 0.35),
      0 0 34px 8px rgba(255, 206, 90, 0.75),
      0 8px 18px #000a;
  }
}
/* Ten seconds left: the button turns urgent red. */
#arena-board .arena-endbar.low:not(:disabled) {
  border-color: #ffc2b8;
  background: linear-gradient(#ff8a7a, #d6453a 60%, #9c2018);
  color: #fff;
}
/* Not your turn / waiting: flat and quiet. */
#arena-board .arena-endbar:disabled {
  animation: none;
  border-color: #3a4a66;
  background: linear-gradient(#24324a, #141d2c);
  color: #c9d3e3;
  box-shadow: none;
  cursor: default;
}
#arena-board .arena-endbar.answer:disabled {
  border-color: #ff8a7a;
  color: #ffd1c9;
}
/* Status head: the Round / Reward line on its own row. */
#arena-board .arena-status-head {
  flex-wrap: wrap;
  row-gap: 2px;
}
#arena-board .arena-status-head .arena-round-note {
  flex-basis: 100%;
}
#arena-board .arena-endbar small {
  opacity: 0.9;
  color: #3d2800;
}
/* Timer seconds centred in the bar (Owner 2026-10-29). */
#arena-board .arena-timer {
  display: grid;
  place-items: center;
  height: 20px;
}
#arena-board .arena-timer b {
  position: relative;
  z-index: 1;
  padding: 0;
  width: 100%;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  text-shadow: 0 1px 2px #000;
}
/* END TURN: English label only, one line. */
#arena-board .arena-endbar strong {
  font: 800 26px/1.1 var(--a-serif);
  letter-spacing: 2px;
}

/* ===== v13 — Owner batch 2026-10-30 (Immune icon, Passive spotlight, Champion entrance) ===== */

/* Immune chip with its uploaded icon: same look as the Status icons. */
#arena-board .arena-chip.immune.arena-status-icon {
  background: rgba(20, 80, 60, 0.55);
  box-shadow: 0 0 0 1px #9ff0c8;
}

/* Champion entrance: the tile waits invisible until its flying copy lands. */
#arena-board .arena-champ.arena-champ-waiting {
  visibility: hidden;
}
.arena-champ-fly {
  position: fixed;
  z-index: 1001;
  margin: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 205, 70, 0.55));
}
/* Passive spotlight: dark table, the Champion card lifted with a gold glow, a name banner. */
.arena-passive-dim {
  position: fixed;
  z-index: 1003;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.72));
  animation: arena-fade-in 0.25s ease-out both;
}
.arena-passive-lift {
  position: fixed;
  z-index: 1004;
  margin: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  border-radius: 10px;
  animation: arena-passive-lift 0.45s cubic-bezier(.3, .7, .3, 1.2) forwards, arena-passive-glow 1.1s 0.3s ease-in-out infinite alternate;
}
@keyframes arena-passive-lift {
  from { transform: none; }
  to { transform: translateY(-14px) scale(1.12); }
}
@keyframes arena-passive-glow {
  from { box-shadow: 0 0 0 2px #ffe7a6, 0 0 18px 4px rgba(255, 205, 70, 0.75), 0 0 46px 10px rgba(255, 180, 40, 0.35); }
  to { box-shadow: 0 0 0 3px #fff3c4, 0 0 28px 8px rgba(255, 215, 90, 0.95), 0 0 70px 18px rgba(255, 180, 40, 0.5); }
}
.arena-passive-banner {
  position: fixed;
  z-index: 1005;
  pointer-events: none;
  translate: -50% -100%;
  display: grid;
  justify-items: center;
  gap: calc(2px * var(--k, 1));
  min-width: calc(320px * var(--k, 1));
  padding: calc(10px * var(--k, 1)) calc(28px * var(--k, 1));
  border: 2px solid #ffd54a;
  border-radius: calc(10px * var(--k, 1));
  background: linear-gradient(180deg, rgba(60, 38, 6, 0.96), rgba(24, 14, 2, 0.96));
  box-shadow: 0 0 24px rgba(255, 200, 60, 0.6), inset 0 1px 0 rgba(255, 246, 200, 0.4);
  color: #fff3c4;
  text-align: center;
  animation: arena-passive-banner 0.4s cubic-bezier(.3, .7, .3, 1.3) both;
}
.arena-passive-banner.below {
  translate: -50% 0;
}
.arena-passive-banner small {
  font: 800 calc(13px * var(--k, 1)) / 1 var(--a-serif);
  letter-spacing: 3px;
  color: #ffd54a;
}
.arena-passive-banner strong {
  font: 800 calc(28px * var(--k, 1)) / 1.15 var(--a-serif);
  text-shadow: 0 2px 4px #000;
}
.arena-passive-banner span {
  font-size: calc(14px * var(--k, 1));
  opacity: 0.85;
}
@keyframes arena-passive-banner {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}
.arena-passive-dim.out,
.arena-passive-lift.out,
.arena-passive-banner.out {
  opacity: 0;
  transition: opacity 0.28s ease-in;
}
@keyframes arena-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Effect copies of board tiles live here: inside #arena-board, kept across renders. */
#arena-board .arena-fx-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
#arena-board .arena-tile-copy {
  position: fixed;
  pointer-events: none;
}
/* Champion Landing v3 (Owner 2026-10-31): dimmed table under faint sun rays, the card back
   each Champion arrives as, and the white mist it dissolves in. */
#arena-board .arena-landing-dim {
  position: fixed;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 220, 140, 0.16), rgba(255, 220, 140, 0) 55%),
    repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 226, 160, 0.07) 0 4deg, rgba(255, 226, 160, 0) 4deg 15deg),
    rgba(8, 6, 16, 0.42);
  -webkit-mask: radial-gradient(ellipse at 50% 45%, #000 30%, rgba(0, 0, 0, 0.75) 75%);
  mask: radial-gradient(ellipse at 50% 45%, #000 30%, rgba(0, 0, 0, 0.75) 75%);
  animation: arena-fade-in 0.35s ease-out both;
  transition: opacity 0.35s ease-out;
}
#arena-board .arena-landing-dim.out {
  opacity: 0;
}
#arena-board .arena-landing-back {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 7%/4.7%;
}
#arena-board .arena-landing-mist {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 246, 225, 0.6) 45%, rgba(255, 240, 210, 0) 100%);
  filter: blur(6px);
}
/* Champion voice subtitle (Owner 2026-10-30): who speaks, the line, its Thai meaning. */
.arena-voice-sub {
  position: fixed;
  z-index: 1004;
  pointer-events: none;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: calc(2px * var(--k, 1));
  max-width: calc(900px * var(--k, 1));
  padding: calc(6px * var(--k, 1)) calc(20px * var(--k, 1));
  border-radius: calc(10px * var(--k, 1));
  border-bottom: calc(3px * var(--k, 1)) solid #3b82f6;
  background: rgba(8, 12, 22, 0.82);
  box-shadow: 0 6px 20px #0008;
  color: #f4f1e8;
  text-align: center;
  animation: arena-fade-in 0.2s ease-out both;
}
.arena-voice-sub.theirs {
  border-bottom-color: #e63946;
}
.arena-voice-sub b {
  font: 800 calc(13px * var(--k, 1)) / 1 var(--a-serif);
  letter-spacing: 2px;
  color: #ffd54a;
  text-transform: uppercase;
}
.arena-voice-sub span {
  font-size: calc(22px * var(--k, 1));
  font-style: italic;
  text-shadow: 0 2px 4px #000;
}
.arena-voice-sub small {
  font-size: calc(15px * var(--k, 1));
  opacity: 0.8;
}
.arena-voice-sub.shown {
  animation: none;
}
.arena-voice-sub.out {
  opacity: 0;
  transition: opacity 0.28s ease-in;
}

/* Impact effects canvas (arena-vfx.js): over everything, never catches the mouse. */
.arena-vfx-canvas {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1001;
  pointer-events: none;
}

/* DEF emblem: Blender-rendered shield plate with two crossed swords (arena.js defEmblem). */
.arena-def-emblem {
  position: fixed;
  z-index: 1002;
  pointer-events: none;
  translate: -50% -50%;
  opacity: 0.7; /* Owner 2026-10-30: 70% opaque */
  filter: drop-shadow(0 10px 12px rgba(20, 24, 44, 0.5));
}
.arena-def-plate,
.arena-def-sword {
  position: absolute;
  left: 50%;
  top: 50%;
  background: center / contain no-repeat;
  opacity: 0;
}
.arena-def-plate {
  width: 100%;
  height: 100%;
  background-image: var(--art-def-plate);
}
.arena-def-sword {
  background-image: var(--art-def-sword);
  filter: drop-shadow(0 4px 6px rgba(10, 14, 30, 0.6));
}

/* Chain link snap (arena.js chainSnap): the link number slams down big, then settles. */
.arena-chain-no.slam {
  animation: arena-chain-no-slam 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes arena-chain-no-slam {
  0% {
    opacity: 0;
    transform: scale(3.2) rotate(-10deg);
    text-shadow: 0 0 40px #fff, 0 0 60px #2fd6ff;
  }
  35% {
    opacity: 1;
    transform: scale(0.9);
  }
  100% {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .arena-chain-no.slam {
    animation: none;
  }
}

/* Living field (arena-ambient.js): under every card, never catches the mouse. */
.arena-ambient {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 0;
  pointer-events: none;
}

/* Description text sits on the scene itself (Owner 2026-10-30: no dark glass panel behind it);
   a warm dark outline keeps it readable over bright art. */
.arena-stage.has-table .arena-detail.arena-effect,
.arena-stage.has-table .arena-passive-panel {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: #fffaf0;
  font-weight: 600;
  text-shadow:
    0 0 2px rgba(22, 13, 6, 1),
    0 0 4px rgba(22, 13, 6, 0.95),
    0 1px 6px rgba(22, 13, 6, 0.9),
    0 0 14px rgba(22, 13, 6, 0.8);
}
.arena-stage.has-table .arena-detail.arena-effect h3,
.arena-stage.has-table .arena-passive-panel h3 {
  color: #ffe2a0;
}
/* No inner boxes either: the Effect text block and the small lines read on the scene too. */
.arena-stage.has-table .arena-detail.arena-effect .card-block-text {
  background: none;
  border-color: transparent;
}
.arena-stage.has-table .arena-detail.arena-effect small,
.arena-stage.has-table .arena-passive-panel small {
  color: #fff1d0;
  font-size: 13px;
}
.arena-stage.has-table .arena-detail.arena-effect *,
.arena-stage.has-table .arena-passive-panel * {
  text-shadow: inherit;
}
.arena-stage.has-table .arena-bigcard:has(.arena-bigcard-empty) {
  background: none;
  border-color: transparent;
}
.arena-stage.has-table .arena-bigcard-empty {
  display: none;
}

/* A card on the field grows a little under the mouse (Owner 2026-10-30). `scale`, not
   `transform`, so it composes with the landing and shake animations. */
.arena-stage .arena-field [data-champ],
.arena-stage .arena-field .arena-def-slot {
  transition: scale 0.15s ease-out;
}
.arena-stage .arena-field [data-champ]:hover,
.arena-stage .arena-field .arena-def-slot:has(> .cf-card, > .arena-card-back):hover {
  scale: 1.06;
  z-index: 6;
}

/* ===== Game-style HUD on the scene (Owner 2026-10-30) =====
   No panels behind the Master / status / Champion-tab blocks: each piece is its own chunky,
   outlined game widget (thick plum outline, glossy fill, a hard drop under it) so it stands
   out from the field art. Palette: plum outline, cream, gold, violet. */
#arena-board .arena-stage.has-table {
  --hud-ink: #3a2412;
  --hud-outline:
    -1.5px -1.5px 0 var(--hud-ink),
    1.5px -1.5px 0 var(--hud-ink),
    -1.5px 1.5px 0 var(--hud-ink),
    1.5px 1.5px 0 var(--hud-ink),
    0 3px 0 var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-master,
#arena-board .arena-stage.has-table .arena-side .arena-chain {
  background: none;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
/* Outlined game lettering. */
#arena-board .arena-stage.has-table .arena-master-name strong,
#arena-board .arena-stage.has-table .arena-master-total strong,
#arena-board .arena-stage.has-table .arena-status-head h3 {
  color: #fff;
  text-shadow: var(--hud-outline);
}
#arena-board .arena-stage.has-table .arena-master-name small,
#arena-board .arena-stage.has-table .arena-master-total small,
#arena-board .arena-stage.has-table .arena-status-head small,
#arena-board .arena-stage.has-table .arena-side .arena-chain p {
  color: #ffe6a8;
  font-weight: 700;
  text-shadow:
    -1px -1px 0 var(--hud-ink),
    1px -1px 0 var(--hud-ink),
    -1px 1px 0 var(--hud-ink),
    1px 1px 0 var(--hud-ink),
    0 2px 0 var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-status-head h3 {
  color: #ffd76a;
  font-size: 19px;
}
/* Avatar: a round badge with a gold ring. */
#arena-board .arena-stage.has-table .arena-master .arena-avatar {
  border: 3px solid #ffd76a;
  box-shadow:
    0 0 0 2.5px var(--hud-ink),
    0 4px 0 2.5px var(--hud-ink);
}
/* HP bar: a chunky pill. */
#arena-board .arena-stage.has-table .arena-hpbar {
  height: 16px;
  border: 2.5px solid var(--hud-ink);
  border-radius: 999px;
  background: #3a2758;
  box-shadow:
    inset 0 2px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-hpbar > span {
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45);
}
#arena-board .arena-stage.has-table .arena-hplegend span {
  text-shadow:
    -1px -1px 0 var(--hud-ink),
    1px -1px 0 var(--hud-ink),
    -1px 1px 0 var(--hud-ink),
    1px 1px 0 var(--hud-ink);
}
/* BP / HAND / DECK / DISCARD: pill counters. */
#arena-board .arena-stage.has-table .arena-stat {
  border: 2px solid var(--hud-ink);
  border-radius: 999px;
  background: linear-gradient(#5a3f8c, #33215a);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 3px 0 var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-stat small {
  color: #ffd76a;
  font-weight: 800;
}
#arena-board .arena-stage.has-table .arena-stat b {
  color: #fff;
}
#arena-board .arena-stage.has-table .arena-stat i {
  color: #cdbbf0;
}
/* Turn timer: a chunky pill like the HP bar. */
#arena-board .arena-stage.has-table .arena-timer {
  height: 20px;
  border: 2.5px solid var(--hud-ink);
  border-radius: 999px;
  background: #3a2758;
  box-shadow:
    inset 0 2px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-timer span {
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4);
}
#arena-board .arena-stage.has-table .arena-timer b {
  color: #fff;
  text-shadow:
    -1px -1px 0 var(--hud-ink),
    1px -1px 0 var(--hud-ink),
    -1px 1px 0 var(--hud-ink),
    1px 1px 0 var(--hud-ink);
}
/* END TURN: a big glossy 3D button; it sinks when pressed. */
#arena-board .arena-stage.has-table .arena-endbar {
  border: 3px solid var(--hud-ink);
  border-radius: 18px;
  background: linear-gradient(#ffe98a, #f7bd34 52%, #e8911d);
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.6),
    inset 0 -6px 0 rgba(160, 70, 0, 0.35),
    0 6px 0 var(--hud-ink);
  animation: hud-end-glow 1.8s ease-in-out infinite;
}
#arena-board .arena-stage.has-table .arena-endbar strong {
  color: #fff;
  font-size: 28px;
  text-shadow: var(--hud-outline);
}
#arena-board .arena-stage.has-table .arena-endbar:not(:disabled):active {
  transform: translateY(4px);
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.6),
    inset 0 -6px 0 rgba(160, 70, 0, 0.35),
    0 2px 0 var(--hud-ink);
}
@keyframes hud-end-glow {
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 210, 90, 0.85));
  }
}
#arena-board .arena-stage.has-table .arena-endbar.low:not(:disabled) {
  background: linear-gradient(#ff9a8a, #e9473c 52%, #b82a22);
}
/* Waiting (not your turn): the grey "inactive" button. */
#arena-board .arena-stage.has-table .arena-endbar:disabled {
  animation: none;
  border-color: var(--hud-ink);
  background: linear-gradient(#b9b2c8, #8c84a0);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.4),
    0 5px 0 var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-endbar:disabled strong {
  color: #f4f0fa;
}
#arena-board .arena-stage.has-table .arena-endbar.answer:disabled {
  background: linear-gradient(#ff9a8a, #d9473c);
}
/* Champion tabs: pill toggles, violet when on. */
#arena-board .arena-stage.has-table .arena-viewer-tabs button {
  opacity: 1;
  border: 2px solid var(--hud-ink);
  border-radius: 999px;
  background: linear-gradient(#fff6e2, #e9d6b0);
  color: #3a2758;
  font-weight: 800;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-viewer-tabs button.on {
  background: linear-gradient(#b88cff, #6f3fd6);
  color: #fff;
  text-shadow:
    -1px -1px 0 var(--hud-ink),
    1px -1px 0 var(--hud-ink),
    -1px 1px 0 var(--hud-ink),
    1px 1px 0 var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-hplegend {
  font-size: 12px;
  font-weight: 800;
}
/* Fullscreen / settings: small round cream buttons in the same style. */
#arena-board .arena-stage.has-table .arena-fullscreen,
#arena-board .arena-stage.has-table .arena-settings {
  border: 2px solid var(--hud-ink);
  border-radius: 50%;
  background: linear-gradient(#fff6e2, #e9d6b0);
  color: #3a2758;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 var(--hud-ink);
}

/* ===== Theme pass (Owner 2026-10-30): ivory, gold and warm brown like the card frames ===== */
#arena-board .arena-stage.has-table .arena-stat {
  background: linear-gradient(#fffaf0, #efdcb4);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    0 3px 0 var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-stat small {
  color: #a8741c;
}
#arena-board .arena-stage.has-table .arena-stat b {
  color: var(--hud-ink);
}
#arena-board .arena-stage.has-table .arena-stat i {
  color: #8a6a44;
}
#arena-board .arena-stage.has-table .arena-hpbar,
#arena-board .arena-stage.has-table .arena-timer {
  background: #5a3c22;
}
#arena-board .arena-stage.has-table .arena-timer span {
  background: linear-gradient(90deg, #f0b53a, #ffe590);
}
#arena-board .arena-stage.has-table .arena-timer.urgent span,
#arena-board .arena-stage.has-table .arena-timer.low span {
  background: linear-gradient(90deg, #c0392b, #ff9a6b);
}
#arena-board .arena-stage.has-table .arena-viewer-tabs button.on {
  background: linear-gradient(#ffe590, #e3a635);
  color: var(--hud-ink);
  text-shadow: none;
}

/* Description text on parchment again (Owner: readable first), in the card-frame palette. */
#arena-board .arena-stage.has-table .arena-detail.arena-effect,
#arena-board .arena-stage.has-table .arena-passive-panel {
  border: 2px solid #c9a253;
  border-radius: 14px;
  background: linear-gradient(rgba(255, 250, 238, 0.95), rgba(244, 231, 204, 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 4px 0 rgba(58, 36, 18, 0.55);
  color: var(--hud-ink);
  font-weight: 500;
}
#arena-board .arena-stage.has-table .arena-detail.arena-effect *,
#arena-board .arena-stage.has-table .arena-passive-panel *,
#arena-board .arena-stage.has-table .arena-detail.arena-effect,
#arena-board .arena-stage.has-table .arena-passive-panel {
  text-shadow: none;
}
#arena-board .arena-stage.has-table .arena-detail.arena-effect h3,
#arena-board .arena-stage.has-table .arena-passive-panel h3 {
  color: #7a4c0e;
}
#arena-board .arena-stage.has-table .arena-detail.arena-effect small,
#arena-board .arena-stage.has-table .arena-passive-panel small {
  color: #7a5a36;
}
#arena-board .arena-stage.has-table .arena-detail.arena-effect .arena-alert,
#arena-board .arena-stage.has-table .arena-passive-panel .arena-alert {
  color: #a0521a;
}

/* The Champion card on the right is smaller so its Passive text fits without scrolling. */
#arena-board .arena-viewer {
  height: 362px;
}
#arena-board .arena-viewer-stack {
  height: 324px;
}
#arena-board .arena-viewer-card {
  width: 216px;
  height: 324px;
}
#arena-board .arena-passive-panel {
  overflow: visible;
  font-size: 13.5px;
  line-height: 1.45;
}

/* Settings button: clear of the HP pile (it was hidden under the card). */
#arena-board .arena-settings {
  left: 92px;
  top: 1016px;
}

/* Right column: a big Champion card that shows its art; the Passive slides up over it from a
   tab on the card's lower edge (Owner 2026-10-30), in larger text. */
#arena-board .arena-viewer {
  flex: 1;
  height: auto;
  min-height: 0;
}
#arena-board .arena-viewer-stack {
  height: 465px;
}
#arena-board .arena-viewer-card {
  width: 310px;
  height: 465px;
}
.arena-passive-dock {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
  width: 310px;
  height: 465px;
  pointer-events: none;
}
.arena-passive-tab {
  position: absolute;
  left: 50%;
  bottom: -18px;
  z-index: 2;
  translate: -50% 0;
  padding: 5px 22px;
  border: 2px solid #3a2412;
  border-radius: 999px;
  background: linear-gradient(#ffe590, #e3a635);
  color: #3a2412;
  font: 800 16px/1.2 var(--a-serif);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 #3a2412;
  pointer-events: auto;
  cursor: help;
}
#arena-board .arena-passive-dock .arena-passive-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 18px 16px;
  font-size: 17px;
  line-height: 1.55;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 0.2s,
    visibility 0.28s;
}
#arena-board .arena-passive-dock .arena-passive-panel h3 {
  font-size: 22px;
}
#arena-board .arena-passive-dock .arena-passive-panel small {
  font-size: 14px;
}
/* The tab sits across the card's lower edge (Owner's sketch); the text stays up while read. */
#arena-board .arena-passive-dock.open .arena-passive-panel {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}
#arena-board .arena-passive-dock.instant .arena-passive-panel {
  transition: none;
}

/* Master panels: larger, easier text (Owner 2026-10-30). */
#arena-board .arena-stage.has-table .arena-master-name strong {
  font-size: 21px;
}
#arena-board .arena-stage.has-table .arena-master-name small {
  font-size: 14px;
}
#arena-board .arena-stage.has-table .arena-master-total small {
  font-size: 15px;
}
#arena-board .arena-stage.has-table .arena-master-total strong {
  font-size: 46px;
}
#arena-board .arena-stage.has-table .arena-hplegend {
  font-size: 14px;
}
#arena-board .arena-stage.has-table .arena-hplegend span {
  color: #fff;
}
#arena-board .arena-stage.has-table .arena-hplegend .zero {
  color: #ffe6a8;
  opacity: 0.85;
}
#arena-board .arena-stage.has-table .arena-stat small {
  font-size: 13px;
}
#arena-board .arena-stage.has-table .arena-stat b {
  font-size: 24px;
}
#arena-board .arena-stage.has-table .arena-stat i {
  font-size: 13px;
}
/* The counters need the room: tighter pills, and the round buttons move to the free corner
   under the Champion card (they covered DISCARD). */
#arena-board .arena-stage.has-table .arena-stat {
  gap: 3px;
  padding: 4px 5px;
}
#arena-board .arena-stage.has-table .arena-stat small {
  font-size: 12px;
  letter-spacing: 0;
}
#arena-board .arena-stage.has-table .arena-stat b {
  font-size: 22px;
}
#arena-board .arena-stage.has-table .arena-stats {
  gap: 5px;
}
#arena-board .arena-stage.has-table .arena-fullscreen {
  left: 1856px;
  top: 1016px;
}
#arena-board .arena-stage.has-table .arena-settings {
  left: 1798px;
  top: 1016px;
}

/* ===== Chain (Owner 2026-10-30, padlock-chain ref) =====
   Each Chain number is an inked iron ring; a slack copper chain (arena-chain.js) hangs from ring
   to ring over the cards. */
.arena-chain-seg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 11; /* under the Chain zone (12): the chain goes behind the number rings */
  overflow: visible;
  pointer-events: none;
}
.arena-chain-seg.fading {
  animation: arena-fade-out 0.6s ease-in forwards;
}
#arena-board .arena-chain-card .arena-chain-no {
  right: auto;
  left: 50%;
  bottom: -30px;
  z-index: 13;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  box-sizing: border-box;
  border: 7px solid #8a4a22;
  border-radius: 50%;
  outline: 2.5px solid #2a1608;
  outline-offset: 0;
  background: radial-gradient(circle at 40% 35%, #fff4dc, #f0d9a8 70%);
  box-shadow:
    inset 0 0 0 2.5px #2a1608,
    0 4px 0 rgba(42, 22, 8, 0.6);
  color: #2a1608;
  font: 900 26px/1 var(--a-serif);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
#arena-board .arena-zone.settled .arena-chain-card .arena-chain-no {
  width: 44px;
  height: 44px;
  bottom: -24px;
  font-size: 21px;
}

/* Status line readable over the bright table art: a dark plate behind the turn text. */
#arena-board .arena-stage.has-table .arena-status-head {
  padding: 6px 12px 7px;
  border: 2px solid var(--hud-ink);
  border-radius: 12px;
  background: linear-gradient(rgba(24, 14, 40, 0.86), rgba(24, 14, 40, 0.72));
  box-shadow: 0 3px 0 var(--hud-ink);
}
/* Timer seconds: fill the bar's inside and centre there, whatever the bar border. */
#arena-board .arena-timer b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ===== In-game settings (Owner 2026-10-31): an ivory card with gold trim and brown ink, like the HUD ===== */
.arena-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#arena-board .arena-fullscreen,
#arena-board .arena-settings {
  /* Above the Champion viewer, whose box reaches over the gear and took its clicks. */
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition:
    transform 0.15s,
    filter 0.15s;
}
#arena-board .arena-fullscreen .arena-icon,
#arena-board .arena-settings .arena-icon {
  width: 24px;
  height: 24px;
  transition: rotate 0.4s ease;
}
#arena-board .arena-fullscreen:hover,
#arena-board .arena-settings:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
#arena-board .arena-settings:hover .arena-icon {
  rotate: 60deg;
}
.arena-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(20, 12, 30, 0.4), rgba(10, 6, 16, 0.75));
  backdrop-filter: blur(3px);
  animation: arena-fade-in 0.2s ease-out both;
}
.arena-settings-card {
  --set-ink: #3a2412;
  --set-gold: #a8741c;
  box-sizing: border-box;
  width: min(480px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 18px 20px 20px;
  border: 3px solid var(--set-ink);
  border-radius: 22px;
  background: linear-gradient(#fffaf0, #f1e2c2);
  color: var(--set-ink);
  box-shadow:
    inset 0 0 0 2px #e8c97a,
    inset 0 4px 0 rgba(255, 255, 255, 0.85),
    0 6px 0 var(--set-ink),
    0 24px 60px rgba(0, 0, 0, 0.55);
  animation: arena-set-pop 0.28s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes arena-set-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}
.arena-set-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(58, 36, 18, 0.14);
}
.arena-set-head > .arena-icon {
  width: 28px;
  height: 28px;
  color: var(--set-gold);
}
.arena-set-head h2 {
  flex: 1;
  margin: 0;
  color: var(--set-ink);
  text-shadow: none;
  font: 800 25px/1.1 var(--a-serif);
  letter-spacing: 1px;
}
.arena-set-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid #3a2412;
  border-radius: 50%;
  background: linear-gradient(#fff6e2, #e9d6b0);
  color: #3a2412;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 #3a2412;
}
.arena-set-close .arena-icon {
  width: 18px;
  height: 18px;
}
.arena-set-close:active,
.arena-set-primary:active,
.arena-set-secondary:active {
  transform: translateY(2px);
}
.arena-set-group {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.arena-set-group h3 {
  margin: 0 0 2px 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--set-gold);
}
.arena-set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 10px 6px 12px;
  border: 1px solid rgba(168, 116, 28, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}
.arena-set-row > .arena-icon {
  width: 20px;
  height: 20px;
  color: var(--set-gold);
}
.arena-set-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
}
.arena-set-row.off .arena-set-slider,
.arena-set-row.off .arena-set-pct,
.arena-set-row.off > .arena-icon {
  opacity: 0.4;
}
.arena-set-slider {
  width: 140px;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #e3a635 var(--p, 50%), rgba(58, 36, 18, 0.18) var(--p, 50%));
  appearance: none;
  cursor: pointer;
}
.arena-set-slider::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #3a2412;
  border-radius: 50%;
  background: linear-gradient(#fffaf0, #ecd9b0);
  box-shadow: 0 2px 0 #3a2412;
  appearance: none;
}
.arena-set-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #3a2412;
  border-radius: 50%;
  background: linear-gradient(#fffaf0, #ecd9b0);
}
.arena-set-slider:focus-visible {
  outline: 2px solid #e3a635;
  outline-offset: 4px;
}
.arena-set-pct {
  width: 42px;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.arena-switch {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 2px solid #3a2412;
  border-radius: 999px;
  background: #cdbb97;
  cursor: pointer;
  box-shadow: inset 0 2px 3px rgba(58, 36, 18, 0.35);
  transition: background 0.2s;
}
.arena-switch > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border: 1.5px solid #3a2412;
  border-radius: 50%;
  background: linear-gradient(#fffaf0, #ecd9b0);
  transition: translate 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.arena-switch[aria-checked='true'] {
  background: linear-gradient(#ffd76a, #e8a32a);
}
.arena-switch[aria-checked='true'] > span {
  translate: 20px 0;
}
.arena-segmented {
  display: flex;
  overflow: hidden;
  border: 2px solid #3a2412;
  border-radius: 999px;
  background: rgba(58, 36, 18, 0.08);
}
.arena-segmented button {
  padding: 5px 13px;
  border: 0;
  background: transparent;
  color: #3a2412;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.arena-segmented button + button {
  border-left: 1.5px solid rgba(58, 36, 18, 0.35);
}
.arena-segmented button.on {
  background: linear-gradient(#ffe590, #e3a635);
}
.arena-set-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.arena-set-primary,
.arena-set-secondary {
  padding: 10px 20px;
  border: 3px solid #3a2412;
  border-radius: 14px;
  color: #3a2412;
  font: 800 16px/1.1 var(--a-serif);
  letter-spacing: 0.5px;
  cursor: pointer;
}
.arena-set-primary {
  background: linear-gradient(#ffe98a, #f7bd34 52%, #e8911d);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    0 4px 0 #3a2412;
}
.arena-set-secondary {
  background: linear-gradient(#fff6e2, #e9d6b0);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 #3a2412;
}
@media (max-width: 520px) {
  .arena-set-slider {
    width: 96px;
  }
}
/* The match setup panel (Champion / Seed / Allegiance) gets a close button in the game window. */
.arena-play-settings {
  padding-right: 56px;
}
.arena-setup-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Chain result (Owner 2026-10-31): bigger and clearer, an ivory plate with one chip per number. */
#arena-board .arena-stage .arena-zone-result {
  z-index: 30;
  display: flex;
  align-items: stretch;
  gap: 6px;
  max-width: none;
  padding: 6px 8px;
  border: 3px solid #3a2412;
  border-radius: 16px;
  background: linear-gradient(#fffaf0, #efdcb4);
  color: #3a2412;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    0 4px 0 #3a2412,
    0 10px 24px rgba(0, 0, 0, 0.45);
  /* scale, not transform: the plate is centred with transform: translateX(-50%). */
  animation: arena-result-pop 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes arena-result-pop {
  from {
    opacity: 0;
    scale: 0.8;
  }
}
#arena-board .arena-stage .arena-zone-result.pending {
  padding: 8px 18px;
  font-size: 20px;
  font-weight: 800;
  color: #3a2412;
}
#arena-board .arena-result-chip {
  display: grid;
  justify-items: center;
  min-width: 86px;
  padding: 3px 12px 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}
#arena-board .arena-result-chip small {
  font-size: 15px;
  font-weight: 800;
  color: #a8741c;
}
#arena-board .arena-result-chip b {
  font: 900 34px/1 var(--a-serif);
  font-variant-numeric: tabular-nums;
}
#arena-board .arena-result-chip.actual {
  min-width: 104px;
  border: 2px solid currentColor;
}
#arena-board .arena-result-chip.actual.hurt {
  color: #b3261e;
  background: linear-gradient(#ffe3dc, #ffc6b8);
}
#arena-board .arena-result-chip.actual.safe {
  color: #2f7d32;
  background: linear-gradient(#e8f7e2, #c9ebbd);
}
#arena-board .arena-result-chip.actual small {
  color: inherit;
}
#arena-board .arena-result-chip.actual b {
  font-size: 40px;
}
#arena-board .arena-result-chip.reflected {
  color: #5b3fa0;
}

/* HP card break (Owner 2026-10-31): glowing cracks spread while the card trembles, then
   arena-vfx.js crumbles it into dust. `translate`, not transform: hp-lift holds the fan pose. */
.hp-fx-crack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The web never reaches past the card (Owner 2026-10-31). */
  overflow: hidden;
  border-radius: 7px;
  pointer-events: none;
}
/* Cracked glass: a bright hairline with a dark edge (the same look as the shard edges on the canvas). */
.hp-fx-crack path {
  fill: none;
  stroke: #fff;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.6px rgba(60, 36, 24, 0.9)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
}
.hp-fx-crack path.ring {
  stroke-width: 0.7;
}
.hp-fx-card.cracking {
  animation-name: hp-lift, hp-tremble;
  animation-duration: 0.3s, 0.48s;
  animation-timing-function: ease-out, linear;
  animation-fill-mode: forwards, none;
  animation-delay: 0s, 0s;
}
@keyframes hp-tremble {
  0%,
  100% {
    translate: 0 0;
    filter: brightness(1);
  }
  20% {
    translate: -1.5px 1px;
  }
  40% {
    translate: 1.5px -1px;
    filter: brightness(1.15);
  }
  60% {
    translate: -1px -1px;
  }
  80% {
    translate: 1px 1px;
    filter: brightness(1.3);
  }
}

/* Status Icon tooltip (Owner 2026-10-31): sits in the unscaled viewport, beside the icon. */
.arena-tip {
  position: absolute;
  z-index: 9600;
  max-width: 240px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(16, 12, 26, 0.94);
  border: 1px solid #e8c56a;
  box-shadow: 0 4px 14px #000a;
  color: #f3ead2;
  font: 500 12.5px/1.45 var(--a-sans);
  pointer-events: none;
}
.arena-tip[hidden] {
  display: none;
}
.arena-tip b {
  display: block;
  margin-bottom: 2px;
  color: #e8c56a;
  font-size: 13.5px;
}
.arena-tip p {
  margin: 0;
}
.arena-tip p + p {
  margin-top: 3px;
  color: #b9ad94;
  font-size: 11.5px;
}

/* Arena fonts by role (Owner 2026-10-31): Kanit for numbers / HUD, Chonburi for the big
 * one-word moments. Chonburi has one weight, so no faux bold. */
.hp-fx-count,
.arena-master-total strong,
.arena-stat b,
.arena-mp-cost,
.arena-dmg,
#arena-board .arena-mp b,
#arena-board .arena-chip.arena-status-icon b {
  font-family: var(--a-num);
}
.arena-banner,
.arena-final span,
.arena-phase-banner span,
.arena-chain-word,
.arena-countdown span {
  font-family: var(--a-display);
  font-weight: 400;
  font-synthesis: none;
}

/* Reward offer, bigger (Owner 2026-10-31): card faces large enough to read their Effect
 * text, panel centred on the stage, time to choose as a wide bar on top. */
.arena-choice-panel.reward {
  top: 540px;
  translate: 0 -50%;
  /* Anchored at the stage centre it would shrink to the right half and wrap the cards. */
  width: max-content;
  max-width: 1300px;
  gap: 12px;
  padding: 20px 32px 24px;
}
.arena-choice-panel.reward h4 {
  font-size: 32px;
}
.arena-choice-panel.reward .arena-choice-options {
  gap: 28px;
}
.arena-choice-panel.reward .arena-choice-card {
  width: 330px;
}
.arena-choice-panel.reward .arena-choice-card:hover {
  transform: translateY(-10px) scale(1.03);
}
.arena-choice-panel.reward .arena-reward-rarity {
  padding: 3px 18px;
  font-size: 16px;
}
.arena-choice-panel.reward .cf-slot[data-slot='text'] {
  max-height: 26cqw;
  font: 600 calc(5.2cqw * var(--fit, 1)) / 1.3 var(--a-sans);
  color: #2e241a;
}
#arena-board .arena-stage .arena-choice-panel .arena-choice-timer {
  justify-self: stretch;
  height: 26px;
}
#arena-board .arena-stage .arena-choice-panel .arena-choice-timer b {
  font: 800 17px/1 var(--a-num);
}

/* Attack-target guide (Owner 2026-10-31): the Blender cartoon sword over the recommended
 * enemy Champion, tip up-right, making a small thrust; gold = best value, silver = next.
 * The silver sword is the same sprite with its gold parts drained to steel. */
#arena-board .arena-target-sword {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}
#arena-board .arena-target-sword i {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 66%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: var(--art-target-sword) center / contain no-repeat;
  animation: arena-sword-thrust 1.1s ease-in-out infinite;
}
#arena-board .arena-target-sword.gold i {
  filter: drop-shadow(0 0 3px #2a1c05) drop-shadow(0 0 14px rgba(255, 205, 70, 0.95));
}
#arena-board .arena-target-sword.silver i {
  opacity: 0.9;
  filter: saturate(0.15) brightness(1.12) drop-shadow(0 0 3px #1b2638) drop-shadow(0 0 12px rgba(190, 210, 245, 0.9));
}
#arena-board .arena-target-sword b {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 10px;
  font: 800 13px/1.4 var(--a-sans);
  white-space: nowrap;
  box-shadow: 0 2px 6px #0009;
}
#arena-board .arena-target-sword.gold b {
  background: linear-gradient(#ffe08a, #c99a22);
  color: #2a1c05;
}
#arena-board .arena-target-sword.silver b {
  background: linear-gradient(#ffffff, #b9c6d8);
  color: #1b2638;
}
@keyframes arena-sword-thrust {
  0%,
  100% {
    transform: translate(-4%, 4%);
  }
  45% {
    transform: translate(5%, -5%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #arena-board .arena-target-sword i {
    animation: none;
  }
}
/* Bot thinking (Owner 2026-10-31): a small speech bubble with three soft dots on its avatar. */
#arena-board .arena-master.opp > .arena-avatar {
  position: relative;
}
#arena-board .arena-master.opp.thinking > .arena-avatar::after {
  content: '';
  position: absolute;
  left: -58px;
  top: 4px;
  width: 52px;
  height: 30px;
  border-radius: 15px 15px 4px 15px;
  background:
    radial-gradient(circle, #7a4c0e 4px, transparent 4.6px) 6px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #7a4c0e 4px, transparent 4.6px) 19px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #7a4c0e 4px, transparent 4.6px) 32px 50% / 12px 12px no-repeat,
    #fffaf0;
  border: 2px solid #c9a253;
  z-index: 5;
  box-shadow: 0 2px 0 rgba(58, 36, 18, 0.45);
  animation: arena-bot-think 1.1s ease-in-out infinite;
}
@keyframes arena-bot-think {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  #arena-board .arena-master.opp.thinking > .arena-avatar::after {
    animation: none;
  }
}
/* Now playing (Owner 2026-10-31): a small, quiet tag above the ⚙ button, bottom right. */
.arena-now-playing {
  position: fixed;
  translate: 0 -50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: calc(7px * var(--k, 1));
  max-width: calc(360px * var(--k, 1));
  padding: calc(5px * var(--k, 1)) calc(12px * var(--k, 1));
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 83, 0.7);
  background: rgba(255, 250, 238, 0.82);
  color: #5a3a10;
  font: 600 calc(14px * var(--k, 1)) / 1.2 var(--a-sans);
  box-shadow: 0 2px 0 rgba(58, 36, 18, 0.35);
  pointer-events: none;
  opacity: 0.78;
}
.arena-now-playing i {
  font-style: normal;
  color: #b07a1e;
}
.arena-now-playing span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* A new track: the tag lights up for a moment, then settles. */
.arena-now-playing.fresh {
  animation: arena-now-playing-in 2.4s ease-out;
}
@keyframes arena-now-playing-in {
  0% { opacity: 0; transform: translateY(6px); }
  12% { opacity: 1; transform: none; background: #fff3d1; }
  70% { opacity: 1; }
  100% { opacity: 0.78; }
}
@media (prefers-reduced-motion: reduce) {
  .arena-now-playing.fresh { animation: none; }
}

/* ---------- Heal: the shatter in reverse (Owner 2026-10-31) ---------- */
/* Waiting in the lift fan while its motes and shards gather (canvas, arena-vfx.js reform). */
.hp-fx-card.heal-wait {
  opacity: 0;
  transform: translate(calc((var(--i) - 4.5) * 9px), calc(-36% - var(--i) * 4px)) rotate(calc((var(--i) - 4.5) * 5deg));
}
/* Whole again: a moment in the air with its cracks, a soft glow, then down onto the deck. */
.hp-fx-card.healed-in {
  animation: hp-healed-in 1.8s cubic-bezier(.3, .7, .3, 1) forwards;
}
@keyframes hp-healed-in {
  0% {
    opacity: 1;
    transform: translate(calc((var(--i) - 4.5) * 9px), calc(-36% - var(--i) * 4px)) rotate(calc((var(--i) - 4.5) * 5deg));
    filter: brightness(1.35) drop-shadow(0 0 10px var(--hp-edge));
  }
  55% {
    opacity: 1;
    transform: translate(calc((var(--i) - 4.5) * 9px), calc(-40% - var(--i) * 4px)) rotate(calc((var(--i) - 4.5) * 5deg));
    filter: brightness(1.1) drop-shadow(0 0 6px var(--hp-edge));
  }
  85% {
    opacity: 1;
    transform: translate(0, -3px);
    filter: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
/* Its cracks glow white, then fade to a faint scar. */
.hp-fx-crack.healed {
  animation: hp-scar-fade 1.4s ease-out forwards;
}
@keyframes hp-scar-fade {
  0% { opacity: 1; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff); }
  100% { opacity: 0.4; filter: none; }
}
.hp-fx-count.bump {
  animation: hp-count-bump 0.3s ease-out;
}
@keyframes hp-count-bump {
  0% { scale: 1; }
  40% { scale: 1.3; }
  100% { scale: 1; }
}
/* Healed cards on the deck: a faint crack over their back (inline SVG — CSP blocks data: images). */
.hpdeck-stack span.healed .hp-scar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0.6;
}
.hp-scar .dark {
  stroke: rgba(110, 60, 50, 0.35);
  stroke-width: 1.6;
}
.hp-scar .light {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 0.7;
}
/* ---------- Sudden Death (Owner 2026-10-31) ---------- */
.arena-phase-banner.sudden {
  height: calc(150px * var(--k, 1));
  margin-top: calc(-75px * var(--k, 1));
  align-content: center;
  gap: calc(6px * var(--k, 1));
  background: linear-gradient(90deg, transparent, rgba(40, 6, 10, 0.92) 18%, rgba(90, 10, 20, 0.92) 50%, rgba(40, 6, 10, 0.92) 82%, transparent);
  animation-duration: 2s;
}
.arena-phase-banner.sudden span {
  font-family: var(--a-display);
  font-style: normal;
  font-weight: 400;
  color: #ffd9c2;
  text-shadow: 0 0 18px rgba(255, 70, 40, 0.95), 0 0 6px rgba(255, 140, 90, 0.9), 0 3px 6px #000;
  animation-duration: 2s;
}
.arena-phase-banner small {
  font: 700 calc(26px * var(--k, 1)) / 1 var(--a-sans);
  color: #ffe6d6;
  letter-spacing: calc(2px * var(--k, 1));
  text-shadow: 0 2px 4px #000;
}
.arena-sd-note {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid #b4492f;
  color: #8a2a17;
  background: rgba(255, 228, 214, 0.9);
  font-weight: 700;
}
.arena-sd-note.on {
  color: #fff;
  background: linear-gradient(90deg, #6e0f1a, #b0261f);
  border-color: #ff9a6a;
  box-shadow: 0 0 10px rgba(255, 90, 50, 0.6);
  animation: arena-sd-pulse 1.6s ease-in-out infinite;
}
@keyframes arena-sd-pulse {
  50% { box-shadow: 0 0 18px rgba(255, 90, 50, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .arena-sd-note.on { animation: none; }
}
/* Sudden Death curse: dark, slightly crimson-violet edges that breathe slowly; stronger per level. */
.arena-curse {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  --a: calc(0.48 + var(--sd, 1) * 0.04);
  background:
    radial-gradient(ellipse 72% 68% at 50% 48%, transparent 46%, rgba(40, 4, 28, calc(var(--a) * 0.6)) 70%, rgba(18, 2, 14, var(--a)) 100%),
    radial-gradient(circle at 0 0, rgba(90, 10, 40, calc(var(--a) * 0.5)), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(90, 10, 40, calc(var(--a) * 0.5)), transparent 28%),
    radial-gradient(circle at 100% 0, rgba(60, 10, 70, calc(var(--a) * 0.45)), transparent 26%),
    radial-gradient(circle at 0 100%, rgba(60, 10, 70, calc(var(--a) * 0.45)), transparent 26%);
  animation: arena-curse-breathe 7s ease-in-out infinite;
}
@keyframes arena-curse-breathe {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .arena-curse { animation: none; }
}

/* Allegiance split screen (Owner 2026-10-31): two full-height key arts; the pointed side stays in
   colour, the other goes black and white. */
.arena-allegiance-gate.split {
  display: block;
  padding: 0;
  background: #05040a;
}
.arena-allegiance-split {
  position: absolute;
  inset: 0;
  display: flex;
}
.arena-allegiance-half {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 24px 9vh;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: #fff6e0;
  overflow: hidden;
  transition: flex-grow 0.7s cubic-bezier(0.3, 0.1, 0.2, 1), filter 0.6s ease;
}
/* Stronger than the page-wide button:hover backgrounds (style.css / studio.css), so the art stays
   on the side the mouse is over. */
.arena-allegiance-gate.split .arena-allegiance-half {
  background: #05040a center 18% / cover no-repeat;
}
.arena-allegiance-gate.split .arena-allegiance-half.divine {
  background-image: var(--art-allegiance-divine);
}
.arena-allegiance-gate.split .arena-allegiance-half.demonic {
  background-image: var(--art-allegiance-demonic);
}
.arena-allegiance-half::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 4, 10, 0.92) 0%, rgba(5, 4, 10, 0.2) 38%, transparent 60%);
  pointer-events: none;
}
.arena-allegiance-half > * {
  position: relative;
}
.arena-allegiance-half strong {
  font: 800 clamp(40px, 5vw, 76px)/1 var(--a-serif);
  letter-spacing: 0.04em;
}
.arena-allegiance-half.divine strong {
  color: #ffe08a;
  text-shadow: 0 0 24px rgba(255, 224, 138, 0.65), 0 2px 0 #5a3a0a;
}
.arena-allegiance-half.demonic strong {
  color: #e2b8ff;
  text-shadow: 0 0 24px rgba(176, 122, 255, 0.7), 0 2px 0 #2a0a3a;
}
.arena-allegiance-half small {
  font: 500 clamp(14px, 1.3vw, 18px)/1.5 var(--a-sans);
  opacity: 0.92;
}
.arena-allegiance-confirm {
  display: none;
  font: 600 13px/1 var(--a-sans);
  font-style: normal;
  color: #ffe08a;
}
.arena-allegiance-gate.focus-divine .arena-allegiance-half.divine,
.arena-allegiance-gate.focus-demonic .arena-allegiance-half.demonic {
  flex-grow: 1.35;
}
.arena-allegiance-gate.focus-divine .arena-allegiance-half.demonic,
.arena-allegiance-gate.focus-demonic .arena-allegiance-half.divine {
  filter: grayscale(1) brightness(0.5);
}
@media (hover: none) {
  .arena-allegiance-gate.focus-divine .arena-allegiance-half.divine .arena-allegiance-confirm,
  .arena-allegiance-gate.focus-demonic .arena-allegiance-half.demonic .arena-allegiance-confirm {
    display: block;
  }
}
.arena-allegiance-half:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 4px #5fc9ff;
}
.arena-allegiance-head {
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 90vw);
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;
}
.arena-allegiance-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(180deg, transparent, rgba(255, 240, 205, 0.9) 30%, rgba(197, 140, 255, 0.9) 70%, transparent);
  box-shadow: 0 0 18px rgba(255, 240, 205, 0.6);
  pointer-events: none;
  transition: left 0.7s cubic-bezier(0.3, 0.1, 0.2, 1);
}
.arena-allegiance-gate.focus-divine .arena-allegiance-seam {
  left: 57.4%;
}
.arena-allegiance-gate.focus-demonic .arena-allegiance-seam {
  left: 42.6%;
}
@media (prefers-reduced-motion: reduce) {
  .arena-allegiance-half,
  .arena-allegiance-seam {
    transition: none;
  }
}
.arena-allegiance-gate.split .arena-allegiance-head {
  padding: 14px 26px 16px;
  border-radius: 18px;
  background: rgba(5, 4, 10, 0.62);
  box-shadow: 0 0 0 1px rgba(255, 224, 138, 0.25);
  backdrop-filter: blur(6px);
}

/* Deck Loadout picker in the launcher (2026-11-01). */
.arena-deck-link { margin-left: 8px; color: #ffe08a; font-size: 13px; text-decoration: none; white-space: nowrap; }
.arena-deck-link:hover { text-decoration: underline; }

/* ---------- Tutorial guide (CLAUDE 2026-11-01, arena-tutorial.js) ----------
   Inside the 1920×1080 stage: the board dims around what to press, a gold ring pulses on it, an
   arrow bounces over it, and Fianna speaks from a bubble. Only the bubble takes clicks itself. */
.arena-tut {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 1500;
  pointer-events: none;
}
.arena-tut-dim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: arena-tut-in 0.3s ease-out;
}
.arena-tut-ring {
  position: absolute;
  border-radius: 18px;
  border: 3px solid #ffe7a6;
  box-shadow: 0 0 0 2px #000a, 0 0 28px 6px rgba(255, 210, 110, 0.75);
  animation: arena-tut-pulse 1.3s ease-in-out infinite;
}
.arena-tut-arrow {
  position: absolute;
  width: 60px;
  margin-left: -30px;
  text-align: center;
  font: 900 52px/1 var(--a-sans);
  color: #ffe08a;
  text-shadow: 0 0 6px #000, 0 0 18px rgba(255, 210, 110, 0.9);
  animation: arena-tut-bob 0.8s ease-in-out infinite alternate;
}
.arena-tut-arrow.up {
  animation-name: arena-tut-bob-up;
}
.arena-tut-bubble {
  position: absolute;
  left: 50%;
  top: 150px;
  display: flex;
  gap: 18px;
  align-items: center;
  width: 760px;
  padding: 18px 22px 18px 18px;
  transform: translateX(-50%);
  border-radius: 22px;
  border: 3px solid #e8c36a;
  background: linear-gradient(180deg, rgba(40, 30, 74, 0.97), rgba(18, 13, 38, 0.97));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 18px 46px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 210, 110, 0.25);
  pointer-events: auto;
  animation: arena-tut-in 0.35s ease-out;
}
.arena-tut-bubble.low {
  top: auto;
  bottom: 330px;
}
.arena-tut-bubble.end {
  top: 50%;
  transform: translate(-50%, -50%);
}
.arena-tut-face {
  position: relative;
  flex: none;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #ffe7a6;
  background: #2a2150;
  box-shadow: 0 0 0 2px #000, 0 0 16px rgba(255, 210, 110, 0.6);
}
.arena-tut-face img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 230%;
  transform: translate(-50%, 2%);
}
.arena-tut-body {
  flex: 1;
  min-width: 0;
}
.arena-tut-name {
  display: block;
  font: 900 26px/1.1 var(--a-serif);
  color: #ffe08a;
  text-shadow: 0 2px 0 #000;
}
.arena-tut-say {
  margin: 6px 0 12px;
  font: 600 22px/1.5 var(--a-sans);
  color: #fff;
}
.arena-tut-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.arena-tut-next,
.arena-tut-skip {
  border-radius: 999px;
  cursor: pointer;
  font: 800 19px var(--a-sans);
}
.arena-tut-next {
  padding: 9px 26px;
  border: 2px solid #3a2412;
  background: linear-gradient(#ffe98a, #f0a92a);
  color: #3a2412;
  box-shadow: 0 3px 0 #3a2412;
}
.arena-tut-skip {
  margin-left: auto;
  padding: 7px 16px;
  border: 1px solid rgba(255, 224, 138, 0.35);
  background: transparent;
  color: #cbbfe6;
  font-size: 15px;
}
.arena-tut-next:hover,
.arena-tut-skip:hover {
  filter: brightness(1.15);
}
@keyframes arena-tut-in {
  from { opacity: 0; }
}
@keyframes arena-tut-pulse {
  50% { box-shadow: 0 0 0 2px #000a, 0 0 44px 14px rgba(255, 210, 110, 0.9); }
}
@keyframes arena-tut-bob {
  to { transform: translateY(14px); }
}
@keyframes arena-tut-bob-up {
  to { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .arena-tut-ring, .arena-tut-arrow, .arena-tut-dim, .arena-tut-bubble { animation: none; }
}

/* Attack result beside the Chain (Owner 2026-11-01: over the cards it hid the links, the numbers
   and the chain break). A long Chain (4+) puts it above the cards instead. */
#arena-board .arena-stage .arena-zone-cards > .arena-zone-result {
  left: calc(100% + 34px);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
#arena-board .arena-stage .arena-zone-cards:is([data-links='4'], [data-links='5'], [data-links='6']) > .arena-zone-result {
  left: 50%;
  top: auto;
  bottom: calc(100% + 18px);
  transform: translateX(-50%);
}

/* VICTORY / DEFEAT on the ribbon art (Owner 2026-11-01: the word ran past the ribbon band). */
.arena-banner.has-art {
  font-size: 46px;
  letter-spacing: 2px;
  padding-bottom: 12px;
}

/* ---------- Post-match summary and history (CLAUDE 2026-11-01, arena-summary.js) ---------- */
.arena-sum-veil {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 1600;
  display: grid;
  place-items: center;
  background: rgba(6, 4, 16, 0.72);
  animation: arena-tut-in 0.35s ease-out;
}
.arena-summary {
  width: 1240px;
  max-height: 960px;
  overflow: auto;
  padding: 26px 34px 24px;
  border-radius: 26px;
  border: 3px solid #e8c36a;
  background: linear-gradient(180deg, rgba(42, 31, 78, 0.98), rgba(17, 12, 36, 0.98));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 210, 110, 0.22);
  color: #fff;
  font-family: var(--a-sans);
  animation: arena-result-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.arena-summary.lose { border-color: #e88a8a; }
.arena-sum-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; }
.arena-sum-head h2 { margin: 0; font: 400 58px/1 var(--a-display); color: #ffe08a; text-shadow: 0 3px 0 #000, 0 0 22px rgba(255, 210, 110, 0.6); }
.arena-summary.lose .arena-sum-head h2 { color: #ff9b9b; text-shadow: 0 3px 0 #000, 0 0 22px rgba(255, 110, 110, 0.5); }
.arena-sum-head p { margin: 0; font-size: 20px; color: #cbbfe6; }
.arena-sum-big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.arena-sum-tile { display: grid; justify-items: center; padding: 12px 8px; border-radius: 16px; background: rgba(0, 0, 0, 0.32); border: 2px solid rgba(255, 224, 138, 0.25); }
.arena-sum-tile small { font-size: 18px; font-weight: 700; color: #cbbfe6; }
.arena-sum-tile b { font: 800 54px/1.1 var(--a-num); }
.arena-sum-tile.dealt b { color: #ffd36a; }
.arena-sum-tile.taken b { color: #ff8f8f; }
.arena-sum-tile.guard b { color: #8fcbff; }
.arena-sum-tile.heal b { color: #8ff0b0; }
.arena-sum-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.arena-sum-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 19px; }
.arena-sum-table th { text-align: left; font-weight: 700; color: #ffe08a; }
.arena-sum-table tr:first-child th { font-size: 16px; color: #cbbfe6; }
.arena-sum-table th small { display: block; font-size: 14px; font-weight: 600; color: #cbbfe6; }
.arena-sum-cell { position: relative; width: 34%; padding: 6px 10px; }
.arena-sum-cell i { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 211, 106, 0.55), rgba(255, 211, 106, 0.15)); }
.arena-sum-cell.bot i { background: linear-gradient(90deg, rgba(255, 143, 143, 0.5), rgba(255, 143, 143, 0.12)); }
.arena-sum-cell b { position: relative; font: 800 22px var(--a-num); }
.arena-sum-side { display: grid; gap: 14px; align-content: start; }
.arena-sum-counts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 18px; }
.arena-sum-counts li { display: grid; grid-template-columns: 1fr auto 90px; gap: 10px; align-items: baseline; padding: 4px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.arena-sum-counts b { font: 800 22px var(--a-num); color: #ffe08a; }
.arena-sum-counts i { font-style: normal; font-size: 15px; color: #cbbfe6; text-align: right; }
.arena-sum-hit { display: grid; padding: 10px 14px; border-radius: 14px; background: rgba(255, 211, 106, 0.12); border: 2px solid rgba(255, 211, 106, 0.4); }
.arena-sum-hit small { font-size: 15px; color: #cbbfe6; }
.arena-sum-hit b { font: 800 30px var(--a-num); color: #ffd36a; }
.arena-sum-hit span { font-size: 17px; }
.arena-sum-champs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.arena-sum-champ { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: rgba(0, 0, 0, 0.28); border: 2px solid rgba(255, 224, 138, 0.18); text-align: center; }
.arena-sum-champ.mvp { border-color: #ffd36a; box-shadow: 0 0 18px rgba(255, 211, 106, 0.45); }
.arena-sum-champ b { font-size: 17px; }
.arena-sum-champ small { font-size: 14px; color: #cbbfe6; }
.arena-sum-champ em { position: absolute; top: -10px; right: -6px; padding: 2px 10px; border-radius: 999px; background: linear-gradient(#ffe98a, #f0a92a); color: #3a2412; font: 900 14px var(--a-sans); font-style: normal; box-shadow: 0 2px 0 #3a2412; }
.arena-sum-face { position: relative; width: 74px; height: 74px; overflow: hidden; border-radius: 50%; border: 3px solid #ffe7a6; background: #2a2150; }
.arena-sum-face img { position: absolute; left: 50%; top: 0; width: 230%; transform: translate(-50%, 2%); }
.arena-sum-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.arena-sum-foot button { border-radius: 999px; cursor: pointer; font: 800 20px var(--a-sans); padding: 10px 26px; }
.arena-sum-go { border: 2px solid #3a2412; background: linear-gradient(#ffe98a, #f0a92a); color: #3a2412; box-shadow: 0 3px 0 #3a2412; }
.arena-sum-ghost { border: 2px solid rgba(255, 224, 138, 0.45); background: rgba(0, 0, 0, 0.25); color: #ffe7a6; }
.arena-sum-foot button:hover { filter: brightness(1.15); }
.arena-hist-rows { display: grid; gap: 8px; }
.arena-hist-row { display: grid; grid-template-columns: 90px 210px 1fr 1fr; gap: 12px; align-items: center; padding: 12px 18px; border-radius: 14px; border: 2px solid rgba(255, 224, 138, 0.2); background: rgba(0, 0, 0, 0.28); color: #fff; font: 600 19px var(--a-sans); text-align: left; cursor: pointer; }
.arena-hist-row:hover { border-color: #ffe08a; }
.arena-hist-row b { font-size: 22px; color: #ffe08a; }
.arena-hist-row.lose b { color: #ff9b9b; }
/* The page's global table rules stretch rows to the grid height: keep the table its own size. */
#arena-board .arena-sum-table { align-self: start; height: auto; margin: 0; }
#arena-board .arena-sum-table tr { height: auto; }
#arena-board .arena-sum-table th, #arena-board .arena-sum-table td { height: auto; padding: 8px 10px; vertical-align: middle; border: 0; background: none; }
#arena-board .arena-sum-table tr:not(:first-child) { background: rgba(0, 0, 0, 0.25); }
#arena-board .arena-sum-table tr:not(:first-child) th { border-radius: 10px 0 0 10px; }
#arena-board .arena-sum-table tr:not(:first-child) td:last-child { border-radius: 0 10px 10px 0; }
#arena-board .arena-sum-cell i { top: 8px; bottom: 8px; left: 6px; max-width: calc(100% - 12px); }

/* Round Champion avatars (Owner 2026-11-01): the art carries its own gold ring, so no frame or crop. */
.arena-sum-face.avatar,
.arena-tut-face.avatar { border: 0; background: none; box-shadow: none; overflow: visible; }
.arena-sum-face.avatar img,
.arena-tut-face.avatar img { left: 0; width: 100%; height: 100%; transform: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }

/* Player profile (Owner 2026-11-01): name + round Champion avatar, first visit and from Settings. */
.arena-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(20, 12, 30, 0.55), rgba(8, 5, 14, 0.88));
  backdrop-filter: blur(4px);
}
.arena-profile {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(1080px, 100%);
  max-height: calc(100vh - 32px);
  padding: 22px 28px 20px;
  border-radius: 26px;
  border: 3px solid #e8c36a;
  background: linear-gradient(180deg, rgba(42, 31, 78, 0.98), rgba(17, 12, 36, 0.98));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 210, 110, 0.22);
  color: #fff;
  font-family: var(--a-sans);
  animation: arena-result-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.arena-prof-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 16px; }
.arena-prof-head h2 { margin: 0; font: 400 46px/1 var(--a-display); color: #ffe08a; text-shadow: 0 3px 0 #000, 0 0 22px rgba(255, 210, 110, 0.6); }
.arena-prof-head p { margin: 0; font-size: 18px; color: #cbbfe6; }
.arena-prof-body { display: grid; grid-template-columns: 280px 1fr; gap: 26px; min-height: 0; flex: 1; }
.arena-prof-show { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 18px 12px; border-radius: 20px; background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 224, 138, 0.25); }
.arena-prof-big { position: relative; display: grid; place-items: center; width: 220px; height: 220px; border-radius: 50%; }
.arena-prof-big img { display: none; width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(255, 210, 110, 0.35)); }
.arena-prof-big.has img { display: block; }
.arena-prof-empty { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 3px dashed rgba(255, 224, 138, 0.5); font: 400 80px var(--a-display); color: rgba(255, 224, 138, 0.5); }
.arena-prof-big.has .arena-prof-empty { display: none; }
.arena-prof-big.picked img { animation: arena-prof-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes arena-prof-pop {
  from { transform: scale(0.6) rotate(-12deg); opacity: 0.2; }
}
.arena-prof-shown { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 26px var(--a-sans); color: #ffe7a6; text-shadow: 0 2px 0 #000; }
.arena-prof-champ { font-size: 15px; color: #cbbfe6; }
.arena-prof-form { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.arena-prof-label { display: flex; align-items: center; gap: 12px; }
.arena-prof-caption { font-size: 16px; font-weight: 700; color: #ffe08a; }
.arena-prof-name { flex: 1; min-width: 0; padding: 10px 16px; border-radius: 14px; border: 2px solid rgba(255, 224, 138, 0.55); background: rgba(0, 0, 0, 0.4); color: #fff; font: 700 22px var(--a-sans); outline: none; }
.arena-prof-name:focus { border-color: #ffd36a; box-shadow: 0 0 0 3px rgba(255, 211, 106, 0.25); }
.arena-prof-count { font: 700 16px var(--a-num); color: #cbbfe6; }
.arena-prof-problem { min-height: 20px; margin: 0; font-size: 15px; color: #ff9b9b; }
.arena-prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; min-height: 0; max-height: 46vh; overflow: auto; padding: 6px 6px 6px 2px; scrollbar-width: thin; scrollbar-color: #e8c36a rgba(0, 0, 0, 0.35); }
.arena-prof-tile { position: relative; padding: 2px; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform 0.15s; }
.arena-prof-tile img { display: block; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.arena-prof-tile:hover { transform: translateY(-3px) scale(1.06); }
.arena-prof-tile.on { box-shadow: 0 0 0 3px #ffd36a, 0 0 18px rgba(255, 211, 106, 0.8); }
.arena-prof-tile.on::after { content: '✓'; position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(#ffe98a, #f0a92a); color: #3a2412; font: 900 15px var(--a-sans); box-shadow: 0 2px 0 #3a2412; }
.arena-prof-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.arena-prof-foot button { border-radius: 999px; cursor: pointer; font: 800 20px var(--a-sans); padding: 10px 30px; }
.arena-prof-go { border: 2px solid #3a2412; background: linear-gradient(#ffe98a, #f0a92a); color: #3a2412; box-shadow: 0 3px 0 #3a2412; }
.arena-prof-go:disabled { cursor: not-allowed; filter: grayscale(0.8) brightness(0.7); }
.arena-prof-ghost { border: 2px solid rgba(255, 224, 138, 0.45); background: rgba(0, 0, 0, 0.25); color: #ffe7a6; }
@media (max-width: 760px), (max-height: 560px) {
  .arena-profile { padding: 14px 16px; }
  .arena-prof-head h2 { font-size: 30px; }
  .arena-prof-body { grid-template-columns: 170px 1fr; gap: 14px; }
  .arena-prof-big { width: 130px; height: 130px; }
  .arena-prof-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); max-height: 40vh; }
}
@media (prefers-reduced-motion: reduce) {
  .arena-profile, .arena-prof-big.picked img { animation: none; }
}
/* The player's own avatar on their Master panel: the art carries its gold ring. */
#arena-board .arena-stage.has-table .arena-master .arena-avatar.has-avatar,
#arena-board .arena-master .arena-avatar.has-avatar,
.arena-avatar.has-avatar { border: 0; box-shadow: none; background-color: transparent; background-size: cover; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); }
/* The player's name: one line, or two smaller lines when long (up to 16 letters). */
#arena-board .arena-master-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#arena-board .arena-stage.has-table .arena-master-name.long strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; font-size: 16px; line-height: 1.12; }

/* LV Up cut-in (Owner 2026-11-01): the Champion's card rises over turning gold rays, shines,
   then slams back into its slot. */
#arena-board .arena-lvup-back {
  position: fixed;
  z-index: 1003;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(40, 24, 70, 0.55), rgba(4, 3, 12, 0.88) 70%);
  animation: arena-fade-in 0.25s ease-out both;
}
#arena-board .arena-lvup-back.out {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
#arena-board .arena-lvup-rays {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 260%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.16) 0deg 4deg, transparent 4deg 15deg);
  mask-image: radial-gradient(circle, #000 4%, transparent 26%);
  animation: arena-lvup-spin 9s linear infinite;
}
#arena-board .arena-lvup-glow {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, 0.75), rgba(255, 190, 90, 0.25) 40%, transparent 70%);
  animation: arena-lvup-pulse 1.1s ease-in-out infinite alternate;
}
#arena-board .arena-lvup-card {
  z-index: 1004;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 24px rgba(255, 214, 120, 0.8));
}
/* A band of light that sweeps across the card once it is up. */
#arena-board .arena-lvup-card.shine::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.85) 48%, rgba(255, 236, 170, 0.5) 52%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  mix-blend-mode: screen;
  animation: arena-lvup-sweep 0.9s ease-out both;
}
#arena-board .arena-lvup-text {
  position: fixed;
  z-index: 1005;
  display: grid;
  justify-items: center;
  translate: -50% -50%;
  pointer-events: none;
  text-align: center;
  animation: arena-lvup-text-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
#arena-board .arena-lvup-text strong {
  font: 400 calc(84px * var(--k, 1)) / 1 var(--a-display);
  letter-spacing: 0.04em;
  color: #ffe596;
  -webkit-text-stroke: calc(2px * var(--k, 1)) #4a2a06;
  paint-order: stroke fill;
  text-shadow: 0 calc(5px * var(--k, 1)) 0 #3a2008, 0 0 calc(26px * var(--k, 1)) rgba(255, 190, 80, 0.85), 0 0 calc(60px * var(--k, 1)) rgba(0, 0, 0, 0.8);
}
#arena-board .arena-lvup-text span {
  margin-top: calc(6px * var(--k, 1));
  padding: calc(4px * var(--k, 1)) calc(22px * var(--k, 1));
  border-radius: 999px;
  border: calc(2px * var(--k, 1)) solid #e8c36a;
  background: linear-gradient(180deg, rgba(42, 31, 78, 0.95), rgba(17, 12, 36, 0.95));
  font: 800 calc(26px * var(--k, 1)) var(--a-sans);
  color: #fff;
}
#arena-board .arena-lvup-text.out {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
#arena-board .arena-lvup-spark {
  position: fixed;
  z-index: 1006;
  width: calc(26px * var(--s, 1));
  height: calc(26px * var(--s, 1));
  pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, #ffe08a 30%, transparent 62%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
#arena-board .arena-lvup-ring {
  position: fixed;
  z-index: 1006;
  translate: -50% -50%;
  border-radius: 50%;
  border: 4px solid #ffe08a;
  box-shadow: 0 0 24px rgba(255, 214, 120, 0.9), inset 0 0 18px rgba(255, 214, 120, 0.6);
  pointer-events: none;
  animation: arena-lvup-ring 0.6s ease-out forwards;
}
/* The board tile hides while its copy is up in the cut-in. */
#arena-board .arena-lvup-away {
  visibility: hidden;
}
@keyframes arena-lvup-spin {
  to { rotate: 360deg; }
}
@keyframes arena-lvup-pulse {
  to { scale: 1.12; opacity: 0.8; }
}
@keyframes arena-lvup-sweep {
  from { background-position: 120% 0; }
  to { background-position: -60% 0; }
}
@keyframes arena-lvup-text-in {
  from { opacity: 0; scale: 1.6; }
}
@keyframes arena-lvup-ring {
  from { scale: 0.3; opacity: 1; }
  to { scale: 1; opacity: 0; }
}

/* The shattered floor where the card slams down (Owner 2026-11-01, Codex pictures). */
#arena-board .arena-lvup-crack {
  position: fixed;
  z-index: 999;
  pointer-events: none;
}
/* The lightning bolt of the LV Up slam (Codex art, black background). */
.arena-lvup-bolt {
  position: fixed;
  z-index: 1006;
  pointer-events: none;
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 190, 70, 0.9)) drop-shadow(0 0 2px rgba(60, 30, 0, 0.8));
}
/* The table goes dark for a blink under the strike. */
.arena-lvup-dark {
  position: fixed;
  z-index: 1005;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(10, 6, 20, 0.35), rgba(5, 3, 12, 0.6));
}

/* Bug report window (Lobby players), in the profile window's frame. */
.arena-profile.arena-bug { width: min(560px, 100%); gap: 12px; }
.arena-bug h2 { margin: 0; font: 400 30px var(--a-display); color: #ffe08a; }
.arena-bug-text { box-sizing: border-box; width: 100%; min-height: 160px; padding: 12px; border-radius: 14px; border: 2px solid rgba(255, 224, 138, 0.45); background: rgba(0, 0, 0, 0.45); color: #fff; font: 500 16px/1.5 var(--a-sans); resize: vertical; }

/* The result banner, once it has come in: no second entrance on a re-render. */
#arena-board .arena-banner.still { animation: none; }
#arena-board .arena-banner:not(.still) { animation-delay: 0.1s; }
/* Settings buttons (Owner 2026-11-01: seven no longer fit one row): a grid of equal buttons. */
.arena-set-foot {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.arena-set-foot > button {
  padding: 10px 8px;
  white-space: nowrap;
  font-size: 15px;
}
.arena-set-foot > .arena-set-primary {
  grid-column: 1 / -1;
}
/* PvP: the countdown on the Allegiance screen (both players pick at once). */
.arena-allegiance-clock { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); padding: 8px 22px; border-radius: 999px; background: rgba(5, 4, 10, 0.75); border: 2px solid #e8c36a; color: #ffe08a; font: 800 20px var(--a-sans); pointer-events: none; }
.arena-allegiance-clock.low { color: #ff9b9b; border-color: #ff9b9b; }
/* Which menu track is playing (Lobby, deck builder), so a take can be named. */
.menu-now-playing { position: fixed; right: 14px; bottom: 10px; z-index: 40; padding: 3px 12px; border-radius: 999px; background: rgba(20, 14, 40, 0.6); color: #ffe7a6; font: 600 13px var(--a-sans); pointer-events: none; }
.menu-now-playing.inline { position: static; margin-left: 4px; background: rgba(10, 8, 22, .55); font-size: 14px; white-space: nowrap; }
/* The screen before a match (arena-loading.js). The filter takes the pictures' holiday brightness
   down: this is the walk into the arena. Sizes follow the window height so 4K matches 1080p. */
.arena-load {
  position: fixed;
  inset: 0;
  z-index: 3100;
  overflow: hidden;
  background: #07060d;
  color: #fff;
  font-family: var(--a-sans);
  font-size: clamp(12px, 1.85vh, 36px);
  transition: opacity 0.45s ease;
}
.arena-load.out { opacity: 0; }
.arena-load-pictures,
.arena-load-picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.arena-load-picture {
  object-fit: cover;
  filter: saturate(0.66) brightness(0.74) contrast(1.1) sepia(0.08);
  animation: arena-load-in 0.9s ease both, arena-load-drift 9s ease-out both;
}
.arena-load::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(6, 4, 14, 0.62) 100%), linear-gradient(180deg, rgba(6, 4, 14, 0.25) 0%, transparent 22%, transparent 58%, rgba(6, 4, 14, 0.92) 100%);
}
@keyframes arena-load-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes arena-load-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.arena-load-band {
  position: absolute;
  z-index: 1;
  left: 2.4em;
  right: 2.4em;
  bottom: 2em;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2em;
}
.arena-load-brand { display: flex; align-items: center; gap: 1.2em; min-width: 0; }
.arena-load-logo { width: 8.6em; height: 8.6em; flex: none; filter: drop-shadow(0 0.15em 0.4em rgba(0, 0, 0, 0.8)); }
.arena-load-rule { width: 2px; height: 5.4em; flex: none; background: linear-gradient(180deg, transparent, #e8c36a 18%, #e8c36a 82%, transparent); }
.arena-load-who { display: grid; gap: 0.35em; min-width: 0; }
.arena-load-who.in { animation: arena-load-who 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes arena-load-who { from { opacity: 0; transform: translateX(-0.8em); } to { opacity: 1; transform: none; } }
.arena-load-name { font: 400 2.9em/1.1 var(--a-display); color: #ffe7a6; text-shadow: 0 0.06em 0.3em rgba(0, 0, 0, 0.95); }
.arena-load-tags { display: flex; flex-wrap: wrap; gap: 0.5em 1.2em; }
.arena-load-tag { display: inline-flex; align-items: center; gap: 0.4em; font-size: 1.2em; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95); }
.arena-load-tag img { width: 1.5em; height: 1.5em; object-fit: contain; }
.arena-load-status { display: flex; align-items: center; gap: 1.5em; flex: none; }
.arena-load-word { min-width: 5.6em; font: 400 1.5em var(--a-display); color: #ffe7a6; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95); }
.arena-load-word i { font-style: normal; animation: arena-load-dot 1.4s ease-in-out infinite; }
.arena-load-word i:nth-child(2) { animation-delay: 0.2s; }
.arena-load-word i:nth-child(3) { animation-delay: 0.4s; }
@keyframes arena-load-dot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .arena-load-picture, .arena-load-who.in { animation: none; }
  .arena-load-word i { animation: none; opacity: 1; }
}
/* The spinning card, wherever the game is loading (Owner 2026-11-01): the deck card back on one
   side, the Champion card back on the other, gold rim, a sheen on each face, four-point stars winking
   around it, and the glow cycling the card types as the old badge did (ATK, DEF, Support, Curse). */
.arena-spin { position: relative; display: block; width: var(--spin-w, 64px); aspect-ratio: 2 / 3; perspective: calc(var(--spin-w, 64px) * 5); }
.arena-spin-glow { position: absolute; inset: -38%; border-radius: 50%; filter: blur(calc(var(--spin-w, 64px) * 0.16)); opacity: 0.75; animation: arena-spin-hue 5.2s linear infinite, arena-spin-breath 2.6s ease-in-out infinite; }
.arena-spin-card { position: absolute; inset: 0; transform-style: preserve-3d; animation: arena-spin-turn 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.arena-spin-face { position: absolute; inset: 0; box-sizing: border-box; overflow: hidden; border: calc(var(--spin-w, 64px) * 0.045) solid #e8c36a; border-radius: 9%; backface-visibility: hidden; box-shadow: inset 0 0 0 1px rgba(90, 58, 12, 0.85), 0 0 0 1px rgba(255, 240, 190, 0.5); transform: translateZ(1px); }
.arena-spin-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 34%, rgba(255, 250, 225, 0.75) 50%, transparent 66%) no-repeat; background-size: 280% 100%; animation: arena-spin-sheen 2.6s ease-in-out infinite; }
.arena-spin-back { background: var(--art-card-back, none) center / cover no-repeat, radial-gradient(circle at 50% 42%, #3a2a6e, #120c28 75%); }
.arena-spin-champion { background: var(--art-champion-back, none) center / cover no-repeat, radial-gradient(circle at 50% 42%, #5a2a6e, #1a0c28 75%); transform: rotateY(180deg) translateZ(1px); }
.arena-spin-star { position: absolute; width: 24%; aspect-ratio: 1; background: #fff6d8; clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); filter: drop-shadow(0 0 3px #ffe08a); opacity: 0; animation: arena-spin-star 2.6s ease-in-out infinite; }
.arena-spin-star:nth-of-type(1) { left: -22%; top: 6%; }
.arena-spin-star:nth-of-type(2) { right: -24%; top: 40%; animation-delay: 0.85s; }
.arena-spin-star:nth-of-type(3) { left: -8%; bottom: -6%; width: 17%; animation-delay: 1.7s; }
@keyframes arena-spin-turn { 0% { transform: rotateY(0) rotateZ(-4deg); } 50% { transform: rotateY(180deg) rotateZ(4deg); } 100% { transform: rotateY(360deg) rotateZ(-4deg); } }
@keyframes arena-spin-sheen { 0%, 30% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } }
@keyframes arena-spin-star { 0%, 100% { opacity: 0; transform: scale(0.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes arena-spin-breath { 0%, 100% { transform: scale(0.88); } 50% { transform: scale(1.06); } }
@keyframes arena-spin-hue { 0%, 100% { background: radial-gradient(closest-side, rgba(230, 57, 70, 0.7), transparent); } 25% { background: radial-gradient(closest-side, rgba(59, 130, 246, 0.7), transparent); } 50% { background: radial-gradient(closest-side, rgba(255, 210, 90, 0.75), transparent); } 75% { background: radial-gradient(closest-side, rgba(168, 90, 255, 0.7), transparent); } }
.arena-load-status .arena-spin { --spin-w: 4.2em; }
.arena-loader .arena-spin { --spin-w: 92px; margin-bottom: 18px; }
.arena-loader.corner .arena-spin { --spin-w: 22px; margin: 0; }
.arena-loader.corner .arena-spin-star { display: none; }
@media (prefers-reduced-motion: reduce) {
  .arena-spin-card, .arena-spin-face::after, .arena-spin-star, .arena-spin-glow { animation: none; }
  .arena-spin-glow { background: radial-gradient(closest-side, rgba(255, 210, 90, 0.75), transparent); }
}
/* A fast machine never sees the first loader: it fades in only if the game takes a while to arrive. */
#arena-boot-loader { animation: arena-boot-in 0.3s ease 0.8s both; }
@keyframes arena-boot-in { from { opacity: 0; } to { opacity: 1; } }
/* Before the card back art is known, the card carries a gold star instead of an empty face. */
html:not(.has-card-back) .arena-spin-face::before { content: ''; position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); background: linear-gradient(135deg, #fff0b8, #e3a635); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }