/* File: match.css - Page matchmaking
   Desc: Dans l'architecture, je suis la mise en page IPs / pair / tables SQL / arène.
   Version 1.9.3
   Copyright 2026 DNAvatar.org - Arnaud Maignan
   Date: August 27, 2026 03:30 UTC+1
   Logs:
   - 1.9.3: #dock-zoom — voisines n-1/n+1 (paysage) ; conteneur sans clip
   - 1.9.2: course de scroll paysage (languette) ; zoom = f(DY carte)
   - 1.9.0: #dock-zoom — overlay du zoom de main (fixed, au-dessus de tout)
   - 1.8.64: plateau collé sous la nav quand la languette est repliée (up)
   - 1.8.63: portrait — .arena-hand-head (cmd + barre) en flex, plus de
             display:contents (cassait la hauteur du dock)
   - 1.8.62: onglets nav en display:none dès DICE (plus de trou) ; réserve
             au-dessus du plateau paysage 1.5rem→0.6rem
   - 1.8.61: portrait — commandant en haut-gauche, barre (boutons + Main) à
             sa droite, couleurs dessous ; cartes pleine largeur
   - 1.8.60: onglets nav invisibles dès DICE ; #orient-toggle ARENA seulement
   - 1.8.59: #net-load sur la ligne de titre ; Identifiant + reseau cote a cote
   - 1.8.58: #panel-ident (Identifiant en tête) ; #net-load hors « Cette machine »
   - 1.8.57: #offer-name en lecture seule (nom de joueur, pas de partie)
   - 1.8.56: #net-load (parties en cours, seuils, invitation Docker)
   - 1.8.55: .net-local masquée en salon partagé (WAN / loopback / partage)
   - 1.8.54: .offer-addr masquée en salon partagé (plus d'adresses en ligne)
   - 1.8.53: combat = colonne d'actions (hors board) ; paysage : bloqueurs à
             droite, largeur = boutons + 1 carte (attaquants) ou 2 (bloqueurs)
   - 1.8.52: main zoomée = 10030 (la règle recopiait 10000 : le board, à
             10020 par .arena-felt-wrap, la recouvrait en portrait)
   - 1.8.51: #arena-eq-arrow (flèche lien équipement→créature)
   - 1.8.50: .arena-die = dé vu de dessus SVG (d12/d20), faces + chiffres
   - 1.8.49: d6 charge bas-centre ; .arena-die grossit (d8/d12/d20) > 6
   - 1.8.48: .arena-lib-peek dessus biblio (portrait haut / landscape gauche)
   - 1.8.47: dock portrait zoomé = overflow visible
   - 1.8.46: felt/combat/dock : img = boîte carte (plus bande noire)
   - 1.8.45: dock portrait = flex restant + scroll (--dock-span)
   - 1.8.44: portrait : Tour+actions hors split (ligne unique)
   - 1.8.43: .arena-card largeur 63/88 (plus w0=0 au render)
   - 1.8.42: --card-rx/ry 5.6%/4% (même ratio petit/grand)
   - 1.8.41: overflow visible (cache.png hors clip)
   - 1.8.40: cartes fond --card-ink (plus de calque)
   - 1.8.39: --card-r +1px ; --card-rx/ry alignés
   - 1.8.38: filet coins = base.css ::before
   - 1.8.37: --card-r 4/88 (clip seul, plus --card-r-art)
   - 1.8.36: cadre 3/88 ; art 3.6/88 (croissant noir)
   - 1.8.35: --card-r 6/88 (coins Alpha) ; badges au-dessus de l'encre
   - 1.8.34: #arena-hand-split 3px
   - 1.8.33: .arena-kill = 2.1rem (voisins nav)
   - 1.8.32: .arena-d20 icosaèdre CSS (loyauté PW)
   - 1.8.31: --hand-w 25.125rem (3 col.) ; .color-filter piles
   - 1.8.30: --hand-w fallback 16.75rem (2 col., plus 7.6rem)
   - 1.8.29: .nav-end une ligne ; #voice-toggle logos casque
   - 1.8.28: --board-h = (écran − Tour − pal − gaps) / 2
   - 1.8.27: étapes à droite de Tour n ; main portrait sous le titre
   - 1.8.26: #arena-hand-split + --hand-w (main 1..3 col. portrait)
   - 1.8.25: dock portrait = colonne (aimants haut-bas, plus serpent)
   - 1.8.24: #arena-drag overflow + --card-r (plus de coins JPEG)
   - 1.8.23: triangles ± +2px ; d6 charge ; portrait (serpent / miroir / pal)
   - 1.8.22: #arena-win rubans tourbillons
   - 1.8.21: combatants alignés en haut (plus flex-end)
   - 1.8.20: .arena-mana-tree (bi/tri → tronc)
   - 1.8.19: pile équipement sous créature (.arena-eq-under)
   - 1.8.18: .arena-card-sick (contour ambre)
   - 1.8.17: .arena-steps li img (étape Suivant)
   - 1.8.16: .arena-combat-mark filigrane ; plus de h4 Combat
   - 1.8.15: combat gauche 2 cartes + pal hors combat ; languette clignote
   - 1.8.14: triangles plus gros + contour forme ; blink + mana ambigu
   - 1.8.13: felt zoom/front au-dessus du dock (10020)
   - 1.8.12: triangles 90% de 0.7×0.4 ; journal déplié / dock replié = z max
   - 1.8.11: contour tour plus net (vert vif)
   - 1.8.10: drag felt devant ; triangles plus petits ; plus de cadre jetons/deck adverse ; GY/exil = logo+n
   - 1.8.9: +/- = triangles cul à cul sans contour ; #play-tab masqué en ▲
   - 1.8.8: --card-r cadre art M15 ; bouton jetons ; adversaires hors board
   - 1.8.7: zoom cartes origin centre (plus bottom)
   - 1.8.6: #play-tab triangle sous le trait nav ; moins d'air au-dessus de Tour
   - 1.8.5: .arena-card overflow+radius (plus de coins panneau en 1:1)
   - 1.8.4: #arena-log sous les cartes zoomées (z-index 2)
   - 1.8.3: cartes sans bord or, coins arrondis ; pips mana ronds
   - 1.8.2: origin bas (montée) ; data-zoom z-max ; plus de scale CSS hover
   - 1.8.1: --card-h-small = commandant ; zoom 1:1 sur place ; plus #card-zoom
   - 1.8.0: .arena-dock étalé + loupe macOS (zoom sur place)
   - 1.7.0: .arena-marks logos ; #modal-marks liste
   - 1.6.20: .ip-note WAN / box
   - 1.6.19: howto serveur retiré du lobby
   - 1.6.18: titre + statut même corps ; howto serveur de match
   - 1.6.17: .sidecar-help ; lobby verrouillé sans serveur de table
   - 1.6.16: 6e pastille or ; nom de deck adverse en --seat-color
   - 1.6.15: Matchmaking + phase (IDLE — sidecar OK) sur une ligne
   - 1.6.14: slot 👑 aligné main ; onglets adversaires en tête du board vu
   - 1.6.13: titre Tour | nom.phase ; Abandonner dans la nav
   - 1.6.12: journal scroll visible ; tours séparés ; hauteur jusqu'en bas d'écran
   - 1.6.11: .arena-combat colonnes attaquant / bloqueur
   - 1.6.10: portrait deck hors commandement (.arena-cmd-slot > img)
   - 1.6.9: #arena-drag suit le pointeur (offset d'appui)
   - 1.6.8: journal icônes / vignette / fin-début de phase
   - 1.6.7: tour = contour --ok sur .arena-seat[data-turn] / .arena-opp-cmd ; plus d'inset siège
   - 1.6.6: #arena-title flex ; .arena-step-now ; #card-zoom[data-on=0] masqué
   - 1.6.5: #modal-pile ligne superposée ; .arena-opp-cmd ; piles board adverse
   - 1.6.4: .arena-zone-btns sous commandant (icônes pile)
   - 1.6.3: +/- data-edit ; .arena-opp-col data-view (un board)
   - 1.6.2: .arena-stat source + +/- à droite ; glyphes mana
   - 1.6.1: .arena-opp-col nom-main + carte ; journal déplie vers le bas + scroll
   - 1.6.0: journal dans la nav ; board pleine largeur ; mains en tête ; plus sticky
   - 1.5.0: scènes 1fr 1fr pleine largeur ; main en bas
   - 1.4.0: chrome arène ; journal/voix ; pastilles couleur
   - 1.3.0: .dice-stage / canvas d20
   - 1.2.2: .arena-act icônes 2.4rem
   - 1.2.1: palette actions + cartes tap/pick
   - 1.2.0: WAIT sièges ; ARENA mains / dos / commandant (plus de listes decks)
   - 1.1.0: table PLAY 2 sièges + listes decks
   - Initial: blocs IP ; formulaire pair ; tables offres */

#match-arena {
  --card-h-small: 11rem;
  --card-h-full: 55rem;
  --card-scale-full: 5;
  --card-r: calc(var(--card-h-small) * 4 / 88 + 1px);
  --card-rx: 5.6%;
  --card-ry: 4%;
  overflow: visible;
}

/* #play-tab (sticky, top:0) peut se retrouver colle contre "Tour n" / le
   choix d'adversaire : en phase ARENA, #match-title et #match-phase sont
   masques (arena-render.js), .match-head s'effondre, et il ne reste plus
   que le padding de <main> (1.25rem) entre le nav et .arena-top — a peine
   plus que la hauteur du triangle (0.95rem). Cette marge redonne une
   reserve confortable, pour que le triangle ne passe jamais sous le
   contenu. Paysage seulement : en portrait, #match-arena a une hauteur
   calculee au pixel pres (applyPortraitFit) — y ajouter du padding
   grignoterait --board-h pour rien, la meme languette n'y posant pas ce
   probleme (mise en page en grille fixe, pas de scroll de page). */
body[data-phase="ARENA"]:not([data-orient="portrait"]) #match-arena {
  padding-top: 0.6rem;
}

/* Languette cliquee et nav scrollee hors ecran (data-dir="up") : on a
   « joue », plus besoin de reserve — le plateau colle sous le trait dore.
   #play-tab precede <main> dans le DOM, d'ou le combinateur ~. */
body[data-phase="ARENA"] #play-tab[data-dir="up"] ~ main {
  padding-top: 0;
}

body[data-phase="ARENA"] #play-tab[data-dir="up"] ~ main #match-arena {
  padding-top: 0.15rem;
}

.match-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  margin-bottom: 0.5rem;
}

.match-head h1 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.3;
}

.match-head .phase {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 500;
}

.match-head .phase-down {
  color: var(--down);
}

.match-head .phase-idle {
  color: var(--ok);
}

#match-lobby[data-locked="1"] button[data-action="offer-open"],
#match-lobby[data-locked="1"] button[data-action="refresh-offers"],
#match-lobby[data-locked="1"] button[data-action="share-ip"] {
  opacity: 0.4;
  pointer-events: none;
}

.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.match-panel {
  background: var(--panel);
  border: 1px solid var(--gold);
  padding: 0.9rem;
}

.ip-line {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.35rem;
  margin: 0.25rem 0;
  font-family: ui-monospace, monospace;
}

/* Colonne supplémentaire pour le bouton « Retenir » : sans elle, ce 3e
   enfant retombe sur une ligne à lui dans la grille 2 colonnes. */
.ip-line-name {
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
}

.ip-note {
  color: var(--mute);
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0.5rem 0 0.7rem;
}

.peer-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.6rem 0;
}

.peer-row input[type="text"] { flex: 1; min-width: 10rem; }
.peer-row input[type="number"] { width: 6rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

th, td {
  border-bottom: 1px solid #6a5a38;
  text-align: left;
  padding: 0.3rem 0.25rem;
}

.phase-play {
  color: #e8d5a3;
}

.table-seats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.table-seat {
  background: var(--panel);
  border: 1px solid var(--gold);
  padding: 0.9rem;
}

.table-seat[data-you="1"] {
  box-shadow: inset 0 0 0 2px #e8d5a3;
}

.table-life {
  font-size: 1.6rem;
  margin: 0.2rem 0 0.6rem;
}

.table-cmd {
  width: 10rem;
  height: auto;
  display: block;
  border: 1px solid var(--gold);
}

.table-list {
  max-height: 18rem;
  overflow: auto;
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
}

.phase-wait {
  color: #c9a227;
}

.wait-seats {
  padding-left: 1.2rem;
}

.wait-seats li[data-you="1"] {
  font-weight: 700;
}

.wait-seats li {
  color: var(--seat-color, var(--cream));
}

.wait-empty {
  opacity: 0.55;
}

.dice-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin: 0.8rem 0;
}

.dice-col {
  background: #1a1510;
  border: 1px solid var(--gold);
  padding: 0.6rem;
  text-align: center;
}

.dice-col[data-you="1"] {
  box-shadow: inset 0 0 0 2px #e8d5a3;
}

.d20-canvas {
  width: 240px;
  height: 240px;
  display: block;
  margin: 0 auto;
}

.dice-caption {
  margin: 0.45rem 0 0;
  font-family: Georgia, serif;
  color: #e8dcc4;
}

.arena-start {
  font-size: 1.2rem;
  color: #e8d5a3;
}

.arena-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.arena-scenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.arena-scenes-side .arena-seat + .arena-seat {
  margin-top: 0.6rem;
}

.arena-scenes .arena-seat {
  min-height: 100%;
}

.arena-my-hand {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--panel);
  border: 1px solid var(--gold);
  padding: 0.6rem 0.8rem;
  overflow: visible;
  position: relative;
  z-index: 10000;
}

/* 10030 et pas 10000 : cette regle recopiait la valeur de base juste
   au-dessus, elle ne montait donc rien. Il faut passer au-dessus du 10020
   que .arena-felt-wrap et .arena-combat-stack se donnent quand ILS zooment,
   sinon le board recouvre la carte agrandie de la main. Invisible en
   landscape (la main est sous le board, .arena-scenes reste a 1 tant que le
   zoom ne vient pas de lui) ; en portrait main et board sont deux colonnes
   voisines, et .arena-scenes est display:contents — donc sans boite, sans
   z-index : c'est .arena-felt-wrap seul qui gagnait. Sous les 10050+ du
   chrome flottant (marquee, fleches, drag, modales), qui restent devant. */
.arena-my-hand:has(#arena-dock[data-hot="1"]),
.arena-my-hand:has([data-zoom="1"]) {
  z-index: 10030;
}

.arena-scenes:has([data-zoom="1"]),
.arena-scenes:has([data-front="1"]) {
  z-index: 10020;
}

.arena-hands {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.8rem;
  width: 100%;
  margin-bottom: 0.8rem;
  overflow: visible;
}

.arena-hand-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.45rem 0.7rem;
}

.arena-hand-bar .arena-zone-btns {
  margin-top: 0;
}

.arena-hand-stack {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  gap: 0.45rem;
  width: 100%;
}

body[data-orient="portrait"] .arena-hand-stack {
  flex-direction: column;
}

body:not([data-orient="portrait"]) .arena-hand-stack {
  flex-direction: row;
  align-items: flex-start;
}

.arena-lib-peeks {
  display: flex;
  gap: 0.45rem;
  flex-shrink: 0;
}

body[data-orient="portrait"] .arena-lib-peeks {
  flex-direction: row;
  flex-wrap: wrap;
}

body:not([data-orient="portrait"]) .arena-lib-peeks {
  flex-direction: column;
}

.arena-lib-peek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.arena-lib-peek-lab {
  font-size: 0.65rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.1;
}

body:not([data-orient="portrait"]) .arena-lib-peek .arena-card {
  width: calc(var(--card-h-small) * 63 / 88);
  height: var(--card-h-small);
  display: flex;
  align-items: center;
  justify-content: center;
}

body:not([data-orient="portrait"]) .arena-lib-peek .arena-card img {
  height: var(--card-h-small);
  width: auto;
  transform: rotate(90deg);
}

.arena-hand-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.5rem;
  overflow: visible;
  flex: 1 1 auto;
  min-width: 0;
}

.arena-hand-row .arena-hand {
  flex: 1 1 auto;
  min-width: 0;
}

.arena-dock {
  position: relative;
  height: var(--card-h-small);
  overflow: visible;
}

.arena-dock .arena-card {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  transform-origin: 50% 50%;
  will-change: transform, left;
}

.arena-dock[data-ready="1"] .arena-card {
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arena-dock .arena-card img {
  height: var(--card-h-small);
  width: 100%;
  display: block;
  pointer-events: none;
}

.arena-steps-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  min-width: 0;
}

.arena-opp-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin: 0 0 0 auto;
  white-space: nowrap;
}

.arena-opp-lab {
  color: var(--mute);
  font-size: 0.75rem;
}

.arena-opp-tab {
  margin: 0;
  padding: 0.28rem 0.75rem;
  font-size: 0.8rem;
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.25;
}

.arena-opp-tab[data-view="1"] {
  box-shadow: 0 0 0 2px var(--seat-color, var(--gold));
}

.arena-opp-deck {
  color: var(--seat-color, var(--gold));
}

.arena-opp-piles {
  display: inline-flex;
  gap: 0.25rem;
  align-items: stretch;
}

span.arena-pile-btn {
  cursor: default;
  border: none;
  background: none;
}

.arena-my-hand h4 {
  margin: 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.arena-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.arena-chrome strong {
  font-size: 1rem;
}

.arena-stat {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.arena-stat[data-edit="1"] {
  padding-right: 1.55rem;
}

.arena-stat-src {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.arena-stat-btns {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arena-stat-btns button {
  width: 1.05rem;
  height: 0.64rem;
  padding: 0;
  border: none;
  background: var(--gold);
  opacity: 0.45;
  filter: drop-shadow(0 0 0.6px #120e0a) drop-shadow(0 0 0.7px var(--cream));
}

.arena-stat-btns button:hover {
  opacity: 1;
}

.arena-tri-plus {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.arena-tri-minus {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.arena-chrome .arena-stat-btns button {
  width: 1.05rem;
  height: 0.64rem;
  font-size: 0;
}

@keyframes arena-tri-blink {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

.arena-tri-plus[data-blink="1"] {
  opacity: 1;
  animation: arena-tri-blink 0.65s ease-in-out infinite;
}

.arena-stat[data-k="life"] .arena-stat-n {
  font-size: 1.15rem;
  font-weight: 700;
}

.arena-mana {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.arena-pip img {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  border-radius: 50%;
}

.arena-pip[data-c="W"] { color: #F4F0D4; }
.arena-pip[data-c="U"] { color: #6db3e8; }
.arena-pip[data-c="B"] { color: #c4c4c4; }
.arena-pip[data-c="R"] { color: #e07070; }
.arena-pip[data-c="G"] { color: #5dba7a; }
.arena-pip[data-c="C"] { color: #c9a227; }

.arena-mana-forest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  align-items: flex-end;
  margin-top: 0.35rem;
}

.arena-mana-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.2rem;
}

.arena-mana-leaves {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}

.arena-mana-leaf {
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.arena-mana-leaf img {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: block;
}

.arena-mana-fork {
  display: block;
  width: 70%;
  height: 0.55rem;
  border-left: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  margin: 0.05rem 0 0;
}

.arena-mana-trunk {
  margin-top: 0.1rem;
  max-width: 7.5rem;
  font-size: 0.68rem;
  line-height: 1.15;
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arena-marks {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.arena-mark img {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}

.arena-marks-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  border: none;
}

.arena-marks-add img {
  width: 1.55rem;
  height: 1.55rem;
  display: block;
}

.arena-cmd-thumb {
  height: 2.4rem;
  width: auto;
  border: 1px solid var(--gold);
}

.arena-pile-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  min-width: 1.7rem;
  height: auto;
  padding: 0.12rem 0.15rem;
  font-size: 0.7rem;
  line-height: 1;
  background: #120e0a;
  border: 1px solid var(--gold);
  color: var(--cream);
  cursor: pointer;
}

.arena-pile-btn[data-zone="graveyard"],
.arena-pile-btn[data-zone="exile"] {
  align-self: stretch;
  height: 100%;
  min-height: calc(1.25rem + 0.7em + 0.29rem);
}

.arena-pile-btn img {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.arena-pile-btn[data-on="1"] {
  box-shadow: 0 0 0 2px #e8d5a3;
}

.arena-zone-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.2rem;
  margin-top: 0.35rem;
}

.arena-felt {
  position: relative;
  min-height: 28rem;
  width: 100%;
  background: #1a140e;
  border: 1px solid var(--gold);
  overflow: visible;
}

.arena-combat {
  position: relative;
  border: 1px dashed var(--gold);
  background: #20160f;
  padding: 0.35rem 0.45rem;
  min-height: 7rem;
  overflow: visible;
}

.arena-combat-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: 0;
  text-align: center;
}

.arena-combat[data-fight="1"] {
  min-height: 20rem;
}

.arena-combat[data-fight="0"] {
  min-height: 0;
}

.arena-combat[data-empty="1"] {
  min-height: 5.5rem;
}

.arena-combat[data-fight="0"][data-empty="1"] {
  min-height: 0;
}

.arena-combat-drop {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 7.2rem;
  min-height: 10rem;
  border: 2px dashed var(--gold);
  opacity: 0.55;
}

.arena-combat[data-fight="0"] .arena-combat-drop {
  min-height: 4.5rem;
}

.arena-combat h4 {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  opacity: 0.85;
}

.arena-combat-cols {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: flex-start;
}

.arena-combat-atk {
  min-height: 8.2rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.arena-combat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid transparent;
}

.arena-combat-col[data-vs="1"] {
  border-color: var(--ok);
}

.arena-combat-atk .arena-card {
  position: relative;
  transform-origin: 50% 50%;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arena-combat-atk .arena-card {
  width: calc(8.2rem * 63 / 88);
}

.arena-combat-atk .arena-card img {
  height: 8.2rem;
  width: 100%;
}

.arena-combat-blk {
  display: flex;
  gap: 0.15rem;
  min-height: 6.4rem;
  align-items: flex-end;
}

.arena-combat-blk .arena-card {
  position: relative;
  transform-origin: 50% 50%;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arena-combat-blk .arena-card {
  width: calc(7.2rem * 63 / 88);
}

.arena-combat-blk .arena-card img {
  height: 7.2rem;
  width: 100%;
}

.arena-combat-slot {
  display: block;
  width: 5.2rem;
  height: 6.4rem;
  border: 1px dashed #6a5a38;
  opacity: 0.55;
}

.arena-felt-wrap {
  position: absolute;
  width: calc(var(--card-h-small) * 63 / 88);
  transform-origin: 50% 50%;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
}

.arena-eq-under {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  line-height: 0;
}

.arena-felt-wrap[data-stack="1"] > .arena-card,
.arena-combat-stack > .arena-card {
  position: relative;
  z-index: 1;
}

.arena-combat-stack {
  position: relative;
  transform-origin: 50% 50%;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arena-combat-stack[data-zoom="1"],
.arena-combat-stack[data-front="1"] {
  z-index: 10020;
}

.arena-felt-wrap[data-zoom="1"],
.arena-felt-wrap[data-front="1"],
.arena-felt-wrap[data-dragging="1"] {
  z-index: 10020;
}

.arena-felt-wrap .arena-card img {
  height: var(--card-h-small);
  width: 100%;
}

.arena-my-hand .arena-card,
.arena-cmd-slot .arena-card {
  cursor: grab;
}

.arena-cmd-slot {
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: none;
  position: relative;
  z-index: 3;
  overflow: visible;
}

.arena-cmd-slot[data-zoom="1"] {
  z-index: 9999;
}

.arena-cmd-slot .arena-card,
.arena-cmd-slot > img {
  position: relative;
  transform-origin: 50% 50%;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arena-cmd-slot .arena-card[data-zoom="1"],
.arena-cmd-slot > img[data-zoom="1"] {
  z-index: 9999;
}

.arena-cmd-empty {
  width: 7.2rem;
  height: var(--card-h-small);
  border: 1px dashed var(--gold);
  opacity: 0.45;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.arena-cmd-slot .arena-card img,
.arena-cmd-slot > img {
  height: var(--card-h-small);
  width: 100%;
  display: block;
  border-radius: var(--card-rx) / var(--card-ry);
}

.arena-seat {
  background: var(--panel);
  border: 1px solid var(--seat-color, var(--gold));
  padding: 0.55rem 0.7rem 0.7rem;
  overflow: visible;
}

/* Cadre INTERIEUR distinct de la bordure du siege (couleur du joueur,
   inchangee) : box-shadow inset a spread 1px collait pile contre le bord
   de la bordure, les deux couleurs se touchaient sans espace visible.
   outline-offset negatif permet un DECALAGE reel : -2px = 1px de bordure
   + 1px d'espace (fond visible) + 1px de trait vert, les deux couleurs
   nettement separees. */
.arena-seat[data-turn="1"] {
  outline: 1px solid var(--ok);
  outline-offset: -2px;
}

.arena-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0;
}

.arena-back {
  width: 5.7rem;
  height: 8.5rem;
  background: #1a140e;
  border: 1px solid var(--gold);
  border-radius: 0.3rem;
  display: inline-block;
}

.arena-pal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.6rem 0 1rem;
}

#arena-pal:empty {
  display: none;
  margin: 0;
}

.arena-pal button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.arena-pal button img {
  width: 1.7rem;
  height: 1.7rem;
  display: block;
  pointer-events: none;
}

/* Paysage : colonne d'actions entre les deux boards. La grille des scenes
   accueille un 3e enfant, largeur au contenu — les boards gardent la place
   restante a parts egales. */
body:not([data-orient="portrait"]) .arena-scenes {
  grid-template-columns: 1fr auto 1fr;
}

#arena-pal-mid {
  align-self: start;
}

/* --scenes-h (applyLandscapeFit, match-events.js) = hauteur ecran restante
   sous le haut des boards. Sans elle (JS pas encore passe), repli sur
   70vh — un ordre de grandeur correct, pas un calcul exact. */
#arena-pal-mid .arena-pal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  max-height: var(--scenes-h, 70vh);
  margin: 0;
  gap: 0.3rem;
}

/* Chaque colonne (mon board / celui d'en face) plafonnee au meme budget
   que la palette : sans ce plafond commun, l'un des deux pourrait deborder
   seul. overflow-y:auto est le filet — un board avec beaucoup de cartes
   scrolle DANS sa colonne plutot que de pousser la page (et donc les
   boutons) sous le bas d'ecran. */
body:not([data-orient="portrait"]) .arena-scenes-side {
  height: var(--scenes-h, auto);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Le siege se partage la hauteur de sa colonne (utile a plusieurs sieges
   empiles) ; en 2 joueurs, seul siege de la colonne, il la remplit en
   entier — c'est lui qui donne au felt la hauteur dont il a besoin. */
body:not([data-orient="portrait"]) .arena-scenes-side .arena-seat {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

/* Le felt n'a pas de hauteur naturelle (ses cartes sont position:absolute) :
   sans budget, seul le min-height statique (28rem plus bas dans ce fichier)
   s'applique — beaucoup trop grand pour peu de cartes, d'ou l'espace vide
   en bas de board. flex:1 le fait remplir exactement ce qui reste dans son
   siege une fois le chrome (nom/PV/mana) et la zone de combat comptes ;
   min-height reduit est juste un plancher pour un board presque vide. */
body:not([data-orient="portrait"]) .arena-felt {
  flex: 1 1 auto;
  min-height: 8rem;
}

#arena-pal-mid .arena-pal button {
  width: 2.1rem;
  height: 2.1rem;
}

#arena-pal-mid .arena-pal button img {
  width: 1.4rem;
  height: 1.4rem;
}

/* ------------------------------------------------ combat = colonne d'actions
   La zone de combat a quitte le board : elle vit desormais avec les boutons,
   sous la main qui clique. La colonne du milieu (auto dans le 1fr auto 1fr
   de .arena-scenes) se dimensionne donc a son contenu, et sa largeur raconte
   l'etape en cours :
     hors combat  -> les boutons seuls
     attaquants   -> boutons + 1 largeur de carte
     bloqueurs    -> boutons + 2 largeurs de carte
   Les boutons restent a GAUCHE : ils ne bougent pas quand le combat apparait
   puis s'elargit, au lieu de glisser sous le curseur a chaque etape. */
body:not([data-orient="portrait"]) #arena-pal-mid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.4rem;
}

/* Une ligne par attaquant, empilees : c'est la colonne qui grandit vers le
   bas, jamais vers la droite — sans quoi la largeur ne voudrait plus rien
   dire des l'instant ou deux creatures attaquent. */
body:not([data-orient="portrait"]) #arena-pal-mid .arena-combat-cols {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Attaquant a gauche, ses bloqueurs a droite. */
body:not([data-orient="portrait"]) #arena-pal-mid .arena-combat-col {
  flex-direction: row;
  align-items: flex-start;
}

/* Plusieurs bloqueurs sur un meme attaquant s'empilent verticalement : la
   2e colonne garde une largeur de carte, quel qu'en soit le nombre. */
body:not([data-orient="portrait"]) #arena-pal-mid .arena-combat-blk {
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
}

/* Etape des attaquants : on les declare, personne ne bloque encore. La 2e
   colonne n'a rien a montrer — la zone reste large d'une seule carte. */
body:not([data-orient="portrait"]) #arena-pal-mid .arena-combat[data-cols="1"] .arena-combat-blk {
  display: none;
}

/* Le filigrane est dimensionne pour un board pleine largeur ; dans une
   colonne de deux cartes il deborderait. */
body:not([data-orient="portrait"]) #arena-pal-mid .arena-combat-mark {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  align-items: flex-start;
  padding-top: 0.2rem;
}

/* min-height 20rem valait pour une zone posee en travers d'un board ; ici
   c'est le contenu qui commande, la colonne ne doit pas se reserver du vide. */
body:not([data-orient="portrait"]) #arena-pal-mid .arena-combat,
body:not([data-orient="portrait"]) #arena-pal-mid .arena-combat[data-fight="1"] {
  min-height: 0;
}

/* Action en vol. Pas une modale : elle demanderait un geste pour partir et
   clignoterait a chaque action, alors qu'en LAN la plupart durent quelques
   dizaines de ms. Un voile non bloquant suffit a expliquer pourquoi le
   second clic ne fait rien — le refus reel est fait en JS (POST_BUSY). */
body[data-acting="1"] .arena-pal,
body[data-acting="1"] #arena-pal-mid {
  opacity: 0.45;
  pointer-events: none;
}

body[data-acting="1"] #arena-board {
  cursor: progress;
}

body[data-acting="1"] #arena-board::after {
  content: "action en cours…";
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 10070;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: var(--cream);
  background: #1a1410;
  border: 1px solid var(--gold);
  border-radius: 3px;
  pointer-events: none;
  /* N'apparait que si l'attente se voit : en LAN l'action est finie avant,
     et un badge qui clignote a chaque clic serait pire que rien. */
  animation: acting-in 0s linear 0.35s forwards;
  opacity: 0;
}

@keyframes acting-in {
  to { opacity: 1; }
}

/* Demande en attente : montrer sa main se decide vite, il faut que ça se
   voie sans chercher — d'ou le rouge du cadre. */
.hand-ask {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  margin-right: 0.5rem;
  border: 1px solid #ff2d1a;
  border-radius: 3px;
  background: #2a1410;
}

/* Main revelee par un adversaire. Le fond rouge tres sombre rappelle en
   permanence que ces cartes sont montrees par faveur, pas publiques. */
.arena-shown-hand {
  margin: 0.3rem 0;
  padding: 0.3rem 0.4rem;
  border: 1px dashed #ff2d1a;
  border-radius: 3px;
  background: #1c1310;
}

.arena-shown-lab {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: #ff8a7a;
}

.arena-shown-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Cadre de selection multiple. pointer-events:none : il suit le curseur,
   il ne doit jamais intercepter le relachement qui le termine. */
#arena-marquee {
  position: fixed;
  z-index: 10050;
  pointer-events: none;
  border: 1px dashed #e8d5a3;
  background: rgba(232, 213, 163, 0.12);
}

#arena-marquee[data-on="0"] {
  display: none;
}

.arena-act-go {
  box-shadow: 0 0 0 2px #e8d5a3;
}

/* « J'ai fini » aux Bloqueurs : l'attaquant est bloque tant que le
   defenseur n'a pas repondu. Un simple contour se noie dans une palette
   ou d'autres actions sont deja allumees — la pulsation dit « c'est TOI
   qu'on attend ». Le bip (arena-turn.js) accompagne l'entree dans
   l'etape ; l'animation, elle, dure tant que la reponse manque. */
.arena-act-go[data-verb="done-step"] {
  animation: act-wait 1.1s ease-in-out infinite;
}

@keyframes act-wait {
  0%, 100% { box-shadow: 0 0 0 2px #e8d5a3; }
  50% { box-shadow: 0 0 0 4px #ff2d1a; }
}

/* Respecte le reglage systeme : une pulsation permanente est penible, et
   pour certaines personnes bien pire que penible. Le contour reste. */
@media (prefers-reduced-motion: reduce) {
  .arena-act-go[data-verb="done-step"] {
    animation: none;
    box-shadow: 0 0 0 3px #ff2d1a;
  }
}

.arena-roll {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.arena-roll img {
  width: 1.7rem;
  height: 1.7rem;
  pointer-events: none;
}

.arena-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
}

.arena-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid #6a5a38;
  color: var(--mute);
  cursor: pointer;
}

.arena-steps li img {
  width: 0.85rem;
  height: 0.85rem;
}

.arena-steps li[data-on="1"] {
  border-color: var(--gold);
  color: var(--cream);
  background: #3a2e1c;
}

.arena-prompt {
  display: none;
}

#arena-drag {
  position: fixed;
  z-index: 10060;
  pointer-events: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  left: 0;
  top: 0;
  overflow: visible;
  background: var(--card-ink);
  border-radius: var(--card-rx) / var(--card-ry);
}

#arena-eq-arrow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10055;
  pointer-events: none;
  overflow: visible;
}

#arena-eq-arrow[data-on="0"] {
  display: none;
}

#arena-eq-line {
  stroke: #c4a35a;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px #000);
}

#eq-arrow-head path {
  fill: #c4a35a;
}

/* Chaine de selection. z-index sous #arena-eq-arrow (10055) : la fleche
   d'equipement est une action en cours, elle prime sur un simple pointage.
   pointer-events:none — ces traits ne doivent jamais voler un clic. */
#arena-pick-arrows {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10054;
  pointer-events: none;
  overflow: visible;
}

#arena-pick-arrows[data-on="0"] {
  display: none;
}

#arena-pick-lines line {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 5;
  filter: drop-shadow(0 1px 2px #000);
}

#arena-pick-lines line[data-them="1"] {
  stroke: #ff2d1a;
}

#pick-arrow-head path {
  fill: #fff;
}

#pick-arrow-head-them path {
  fill: #ff2d1a;
}

#arena-drag[data-on="0"] {
  display: none;
}

#arena-drag[data-on="1"] {
  display: block;
}

#arena-drag img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: var(--card-rx) / var(--card-ry);
}

#arena-drag[data-tap="1"] img {
  transform: rotate(12deg);
}

.arena-card[data-dragging="1"],
.arena-felt-wrap[data-dragging="1"] {
  opacity: 0;
}

.arena-zone h4 {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.85rem;
}

.arena-zone .arena-hand {
  gap: 0.5rem;
}

.arena-zone[data-zone="battlefield"] .arena-hand {
  min-height: 13rem;
}

.arena-card {
  position: relative;
  padding: 0;
  border: none;
  background: var(--card-ink);
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
  width: calc(var(--card-h-small) * 63 / 88);
  border-radius: var(--card-rx) / var(--card-ry);
  overflow: visible;
  cursor: pointer;
}

.arena-card:has(.arena-d20) {
  overflow: visible;
}

.arena-card img {
  height: var(--card-h-small);
  width: calc(var(--card-h-small) * 63 / 88);
  display: block;
  border-radius: var(--card-rx) / var(--card-ry);
  -webkit-user-drag: none;
  user-select: none;
}

.arena-card-pick {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* Selection d'un AUTRE joueur : rouge, pour ne jamais confondre avec la
   sienne (blanche). --dirty vit dans deck.css, que match.html ne charge
   pas : la valeur est donc ecrite ici. */
.arena-card-pick-them {
  outline: 2px solid #ff2d1a;
  outline-offset: 1px;
}

/* Designee des deux cotes : le contour reste blanc (le mien) et le rouge
   passe en halo, sinon l'un ecraserait l'autre. */
.arena-card-pick.arena-card-pick-them {
  outline-color: #fff;
  box-shadow: 0 0 0 4px #ff2d1a;
}

.arena-card-tap {
  transform: rotate(12deg);
}

.arena-card-sick {
  box-shadow: 0 0 0 2px #c4a35a;
}

.arena-badge {
  position: absolute;
  z-index: 2;
  bottom: 0.2rem;
  left: 0.2rem;
  background: #241c14;
  color: #e8d5a3;
  font-size: 0.7rem;
  padding: 0 0.25rem;
}

.arena-d6 {
  position: absolute;
  z-index: 2;
  bottom: 0.22rem;
  left: 50%;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0.22rem;
  background-color: #1a140e;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 1px 4px #000;
  transform: translateX(-50%) rotateX(14deg) rotateZ(-10deg);
}

.arena-d6[data-n="0"] {
  box-shadow: inset 0 0 0 1px #6a5a38;
}

.arena-d6[data-n="1"] {
  background-image: url('../icons/arena/d6-16.svg');
  background-position: 0 0;
}

.arena-d6[data-n="6"] {
  background-image: url('../icons/arena/d6-16.svg');
  background-position: 100% 0;
}

.arena-d6[data-n="2"] {
  background-image: url('../icons/arena/d6-25.svg');
  background-position: 0 0;
}

.arena-d6[data-n="5"] {
  background-image: url('../icons/arena/d6-25.svg');
  background-position: 100% 0;
}

.arena-d6[data-n="3"] {
  background-image: url('../icons/arena/d6-34.svg');
  background-position: 0 0;
}

.arena-d6[data-n="4"] {
  background-image: url('../icons/arena/d6-34.svg');
  background-position: 100% 0;
}

/* Compteur > 6 : dé vu de dessus (d12 puis d20). Valeur sur la face du
   dessus, vraies valeurs voisines autour (faces opposées = N+1). Même
   ancrage bas-centre que le d6. */
.arena-die {
  position: absolute;
  z-index: 2;
  bottom: 0.18rem;
  left: 50%;
  width: 2rem;
  height: 2rem;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 3px #000);
}

.arena-die-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.arena-die-face {
  fill: #1a140e;
  stroke: #6a5a38;
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.arena-die-face.is-top {
  fill: #3a2c18;
  stroke: #c4a35a;
  stroke-width: 1.3;
}

.arena-die-top-n,
.arena-die-side-n {
  fill: #e8d5a3;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: inherit;
  font-weight: 700;
  paint-order: stroke;
  stroke: #16100a;
  stroke-width: 0.6;
}

.arena-die-top-n {
  font-size: 22px;
}

.arena-die-side-n {
  font-size: 11px;
  fill: #9a8b70;
  stroke-width: 0.4;
}

.arena-d20 {
  --d20-r: 0.48rem;
  --d20-s: 0.36rem;
  position: absolute;
  bottom: 0.18rem;
  right: 0.18rem;
  width: 1.7rem;
  height: 1.7rem;
  perspective: 5rem;
  pointer-events: none;
}

.arena-d20-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(28deg);
}

.arena-d20-body i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: calc(var(--d20-s) * -1);
  margin-top: calc(var(--d20-s) * -0.58);
  border-left: var(--d20-s) solid transparent;
  border-right: var(--d20-s) solid transparent;
  border-bottom: calc(var(--d20-s) * 1.732) solid rgba(196, 163, 90, 0.55);
  transform-origin: 50% 66%;
  backface-visibility: hidden;
}

.arena-d20-body i:nth-child(odd) {
  border-bottom-color: rgba(232, 213, 163, 0.42);
}

.arena-d20[data-n="0"] .arena-d20-body i {
  border-bottom-color: rgba(80, 48, 40, 0.7);
}

.arena-d20-body i:nth-child(1) { transform: rotateY(0deg) rotateX(79.2deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(2) { transform: rotateY(72deg) rotateX(79.2deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(3) { transform: rotateY(144deg) rotateX(79.2deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(4) { transform: rotateY(216deg) rotateX(79.2deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(5) { transform: rotateY(288deg) rotateX(79.2deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(6) { transform: rotateY(36deg) rotateX(37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(7) { transform: rotateY(108deg) rotateX(37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(8) { transform: rotateY(180deg) rotateX(37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(9) { transform: rotateY(252deg) rotateX(37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(10) { transform: rotateY(324deg) rotateX(37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(11) { transform: rotateY(0deg) rotateX(-37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(12) { transform: rotateY(72deg) rotateX(-37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(13) { transform: rotateY(144deg) rotateX(-37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(14) { transform: rotateY(216deg) rotateX(-37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(15) { transform: rotateY(288deg) rotateX(-37.4deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(16) { transform: rotateY(36deg) rotateX(-79.2deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(17) { transform: rotateY(108deg) rotateX(-79.2deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(18) { transform: rotateY(180deg) rotateX(-79.2deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(19) { transform: rotateY(252deg) rotateX(-79.2deg) translateZ(var(--d20-r)); }
.arena-d20-body i:nth-child(20) { transform: rotateY(324deg) rotateX(-79.2deg) translateZ(var(--d20-r)); }

.arena-d20-n {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f4ead4;
  text-shadow: 0 0 3px #120e0a, 0 1px 2px #000;
  z-index: 1;
}

.arena-d20[data-n="0"] .arena-d20-n {
  color: #8a6a60;
}

/* Le bouton n'a de sens qu'une fois le plateau affiche : avant la partie,
   changer d'orientation ne montre rien. Cache hors ARENA. */
#orient-toggle {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.2rem;
  display: none;
  align-items: center;
  justify-content: center;
}

body[data-phase="ARENA"] #orient-toggle {
  display: inline-flex;
}

#orient-toggle img,
#voice-toggle img {
  width: 1.55rem;
  height: 1.55rem;
  pointer-events: none;
}

#voice-toggle {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#voice-toggle[hidden] {
  display: none;
}

#arena-hand-split {
  display: none;
}

body[data-orient="portrait"][data-phase="ARENA"] #match-arena {
  display: grid;
  grid-template-columns: var(--hand-w, 25.125rem) 3px 1fr;
  grid-template-rows: auto var(--board-h, 10rem) auto var(--board-h, 10rem);
  grid-template-areas:
    "top   top   top"
    "hand  split opp"
    "hand  split pal"
    "hand  split me";
  gap: 0.35rem 0.45rem;
  overflow: hidden;
}

/* La carte zoomee (.arena-dock, .arena-my-hand plus haut) se donnait deja
   overflow:visible, mais #match-arena — l'ancetre qui fixe la grille a la
   hauteur d'ecran (applyPortraitFit) — coupait quand meme tout ce qui
   depassait SA propre boite : un enfant qui se dit visible n'echappe pas
   au clip d'un ancetre. D'ou les cartes zoomees enfermees dans leur div.
   Relache seulement pendant le zoom (etat temporaire) ; le reste du temps
   le clip continue de garantir l'ajustement exact a l'ecran. */
body[data-orient="portrait"][data-phase="ARENA"] #match-arena:has([data-zoom="1"]),
body[data-orient="portrait"][data-phase="ARENA"] #match-arena:has(#arena-dock[data-hot="1"]) {
  overflow: visible;
}

body[data-orient="portrait"][data-phase="ARENA"] .arena-top {
  grid-area: top;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "title steps";
  align-items: center;
  margin: 0;
  padding: 0;
}

body[data-orient="portrait"][data-phase="ARENA"] #arena-board {
  display: contents;
}

body[data-orient="portrait"][data-phase="ARENA"] #arena-title {
  grid-area: title;
}

body[data-orient="portrait"][data-phase="ARENA"] .arena-steps-row {
  grid-area: steps;
}

body[data-orient="portrait"][data-phase="ARENA"] .arena-steps {
  flex-wrap: nowrap;
}

body[data-orient="portrait"][data-phase="ARENA"] #arena-pal,
body[data-orient="portrait"][data-phase="ARENA"] #arena-prompt {
  display: none;
}

body[data-orient="portrait"] #arena-board {
  display: grid;
  grid-template-columns: var(--hand-w, 25.125rem) 3px 1fr;
  grid-template-rows: minmax(10rem, 1fr) auto auto;
  grid-template-areas:
    "hand split opp"
    "hand split pal"
    "hand split me";
  gap: 0.35rem 0.45rem;
  min-height: calc(100vh - 7.5rem);
}

body[data-orient="portrait"] #arena-hand-split {
  display: block;
  grid-area: split;
  cursor: col-resize;
  /* #5a4a20 (repli de #deck-split) se noyait contre le fond sombre et la
     bordure or de .arena-my-hand juste a cote — d'ou l'impression de
     barre invisible. Plus clair au repos, la barre reste identifiable
     sans attendre le survol. */
  background: #a8894a;
  border-radius: 2px;
  align-self: stretch;
  min-height: 0;
}

body[data-orient="portrait"] #arena-hand-split:hover,
body[data-orient="portrait"] #arena-hand-split[data-drag="1"] {
  background: var(--gold);
}

body[data-orient="portrait"] .arena-hands {
  grid-area: hand;
  margin: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* Portrait : le commandant (ou l'image du deck) monte en tete, a cote de la
   barre (.arena-hand-head, emis par myHandHtml en portrait seulement). Les
   cartes prennent alors toute la largeur et la hauteur des lignes de barre
   gagnees. Le dock reste dans .arena-hand-row : aucune mesure JS cassee. */
body[data-orient="portrait"] .arena-my-hand {
  height: 100%;
  min-height: 0;
  padding: 0.3rem 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* commandant | barre */
body[data-orient="portrait"] .arena-hand-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.5rem;
  align-items: start;
}

body[data-orient="portrait"] .arena-hand-head .arena-cmd-slot {
  align-self: start;
}

/* barre : « Main (n) » + 4 boutons sur une ligne, pastilles couleur dessous */
body[data-orient="portrait"] .arena-hand-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "title btns"
    "cols  cols";
  gap: 0.2rem 0.5rem;
  align-items: center;
  align-content: start;
}

body[data-orient="portrait"] .arena-hand-bar > h4 {
  grid-area: title;
  margin: 0;
  white-space: nowrap;
}

body[data-orient="portrait"] .arena-hand-bar > .arena-zone-btns {
  grid-area: btns;
  margin: 0;
}

body[data-orient="portrait"] .arena-hand-bar > .color-filters {
  grid-area: cols;
}

/* la pile de cartes prend tout le reste, pleine largeur */
body[data-orient="portrait"] .arena-hand-stack {
  flex: 1 1 auto;
  min-height: 0;
}

/* .arena-hand-row en COLONNE : le dock (seul enfant depuis que le cmd est
   passe en tete) grandit alors sur l'axe vertical — height:0 + flex-grow
   lui donne toute la hauteur restante. En row (base) avec align-items:
   flex-end, le dock gardait height:0 : cartes invisibles hors survol. */
body[data-orient="portrait"] .arena-hand-row {
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

body[data-orient="portrait"] .arena-dock {
  flex: 1 1 auto;
  height: 0;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-orient="portrait"] .arena-dock::after {
  content: "";
  display: block;
  height: var(--dock-span, 0);
}

body[data-orient="portrait"] .arena-dock:has(.arena-card[data-zoom="1"]) {
  overflow: visible;
}

body[data-orient="portrait"] .arena-dock .arena-card {
  bottom: auto;
  top: 0;
  left: 0;
  will-change: transform, top;
}

body[data-orient="portrait"] .arena-dock[data-ready="1"] .arena-card {
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-orient="portrait"] .arena-scenes {
  display: contents;
}

body[data-orient="portrait"] .arena-scenes-side:first-child {
  grid-area: me;
}

body[data-orient="portrait"] .arena-scenes-side:last-child {
  grid-area: opp;
}

body[data-orient="portrait"] #arena-pal-slot {
  grid-area: pal;
}

body[data-orient="portrait"] #arena-pal-slot .arena-pal {
  margin: 0;
}

body[data-orient="portrait"] .arena-scenes-side {
  min-height: 0;
  height: 100%;
}

body[data-orient="portrait"] .arena-seat {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

body[data-orient="portrait"] .arena-felt {
  min-height: 0;
  flex: 1 1 auto;
}

body[data-orient="portrait"] .arena-combat,
body[data-orient="portrait"] .arena-combat[data-fight="1"],
body[data-orient="portrait"] .arena-combat-drop {
  min-height: 0;
}

@media (max-width: 800px) {
  .match-grid { grid-template-columns: 1fr; }
  .table-seats { grid-template-columns: 1fr; }
  .arena-scenes { grid-template-columns: 1fr; }
}

.color-picks {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}

.color-pick {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.color-pick[data-on="1"] {
  border-color: #fff;
}

.color-pick[data-taken="1"] {
  opacity: 0.35;
}

.color-pick[data-id="white"] {
  box-shadow: inset 0 0 0 1px #6a5a38;
}

.color-pick[data-id="black"] {
  box-shadow: inset 0 0 0 1px #9a8b70;
}

.arena-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "title steps"
    "pal pal";
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.35rem;
  padding: 0.35rem 0 0.55rem;
  margin-bottom: 0.7rem;
}

#arena-title {
  grid-area: title;
  margin: 0;
  font-size: 1.12rem;
  white-space: nowrap;
}

.arena-steps-row {
  grid-area: steps;
}

#arena-pal {
  grid-area: pal;
}

.arena-title-turn {
  flex: 0 0 auto;
}

#arena-title-now {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
}

.arena-step-now {
  color: #6db3e8;
}

.nav-end {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

#match-close {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#match-close[hidden] {
  display: none;
}

#match-close .arena-kill {
  height: 2.1rem;
  padding: 0 0.55rem;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  box-sizing: border-box;
}

/* Salon partage (dnavatar.org) : le serveur ne diffuse plus lan/wan/port —
   ils ne servent qu'au mode Docker, ou la table vit chez l'hote a
   http://lan:port. Les colonnes n'auraient que du vide a montrer, et leur
   presence laisserait croire qu'on publie encore une adresse. */
body[data-shared="1"] .offer-addr {
  display: none;
}

/* Zoom du dock : la carte pointee, dupliquee dans un calque fixe au-dessus
   de TOUT (sous le seul compteur FPS). Aucune dependance au contexte
   d'empilement de l'arene — fini les cartes tranchees par le board. Pas de
   transition sur left/top : le suivi du curseur doit etre net. */
#dock-zoom {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
}

#dock-zoom .dz-main {
  border-radius: 4.75% / 3.4%;
  box-shadow: 0 12px 38px -8px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(0, 0, 0, 0.55);
}

#dock-zoom[hidden] {
  display: none;
}

#dock-zoom .dz-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* Voisines n-1 / n+1 (paysage, dock) : deux fois plus petites, ancrees de
   chaque cote, debordant de ~12 % sous la grande. */
#dock-zoom .dz-side {
  position: absolute;
  top: 25%;
  height: 50%;
  width: auto;
  display: block;
  border-radius: 4.75% / 3.4%;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.6);
  opacity: 0.92;
}

#dock-zoom .dz-prev {
  right: 88%;
}

#dock-zoom .dz-next {
  left: 88%;
}

/* Meme raison pour le panneau « Cette machine ». En Docker le serveur EST la
   machine du joueur : WAN et loopback le concernent, et « Copier pour un
   tiers » sert a transmettre son adresse hors site. Sur le salon partage ces
   valeurs sont celles d'OVH — le WAN n'est meme plus calcule (api_ip.php) —
   et l'adresse a partager est simplement l'URL du site. */
body[data-shared="1"] .net-local {
  display: none;
}



/* Champ en lecture seule : il montre une valeur, il ne la recueille pas.
   Sans marque visuelle on croit pouvoir y taper et on s'interroge. */
#offer-name[readonly] {
  opacity: 0.75;
  cursor: default;
}

/* Charge du serveur. Vert tant qu'il respire, ambre quand ca se remplit,
   rouge au-dela — le seuil porte sur les parties VIVANTES, seule chose qui
   consomme en continu (une requete par seconde et par partie a deux
   joueurs). L'invitation Docker n'apparait qu'a partir de l'ambre : la
   montrer en permanence la rendrait invisible. */
/* Sur la ligne de titre, poussee a droite du statut « serveur de match OK ».
   .match-head est en flex-wrap ; margin-left:auto la colle a droite tant
   qu'il y a la place, sinon elle passe a la ligne. */
/* Cache tant que health n'a pas repondu : sinon « 0 partie · 0 offre »
   clignote avant la vraie valeur. */
#net-load:not([data-ready="1"]) {
  visibility: hidden;
}

#net-load {
  margin-left: auto;
  align-self: baseline;
  padding: 0.2rem 0.5rem;
  border-left: 3px solid var(--ok, #3c8);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.85rem;
  color: var(--muted, #9a8c72);
}

#net-load[data-level="mid"] {
  border-left-color: #d8a13a;
}

#net-load[data-level="high"] {
  border-left-color: #d3543a;
}

.net-load-hint {
  display: none;
}

#net-load[data-level="mid"],
#net-load[data-level="high"] {
  position: relative;
}

/* Au-dela du vert : l'invitation Docker en infobulle sous la charge, sans
   repousser le titre. */
#net-load[data-level="mid"] .net-load-hint,
#net-load[data-level="high"] .net-load-hint {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  width: 22rem;
  max-width: 70vw;
  margin-top: 0.3rem;
  padding: 0.4rem 0.55rem;
  background: var(--panel, #241c14);
  border: 1px solid var(--gold, #c9a227);
  font-size: 0.72rem;
  line-height: 1.35;
  z-index: 5;
}

.arena-pal-cap {
  width: 100%;
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  color: var(--mute);
}

#arena-log {
  position: relative;
  z-index: 2;
  margin-left: 0;
  width: auto;
  min-width: 6.5rem;
  max-width: 22rem;
  background: #120e0a;
  border: 1px solid var(--gold);
  box-shadow: none;
  pointer-events: auto;
  overflow: visible;
}

#arena-log[hidden] {
  display: none;
}

#arena-log[data-moved="1"] {
  position: fixed;
  z-index: 2;
  right: auto;
  bottom: auto;
  left: 0;
  top: 0;
  box-shadow: 0 0.5rem 1.4rem #000;
}

#arena-log[data-fold="0"],
#arena-log[data-moved="1"][data-fold="0"] {
  z-index: 10050;
}

#arena-log[data-fold="1"] #arena-log-list {
  display: none;
}

#arena-log[data-fold="1"] #arena-log-bar {
  height: 2.1rem;
  padding: 0 0.45rem;
  box-sizing: border-box;
}

#arena-log-bar {
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.45rem;
  background: #241c14;
  color: var(--gold);
  font-size: 0.85rem;
}

.arena-log-tools {
  display: flex;
  gap: 0.2rem;
}

#arena-log-fold,
#arena-log-tail {
  width: 1.6rem;
  height: 1.4rem;
  padding: 0;
  font-size: 0.75rem;
  cursor: pointer;
}

#arena-log-list {
  position: absolute;
  top: 100%;
  left: -1px;
  min-width: calc(100% + 2px);
  width: 22rem;
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: auto;
  scrollbar-color: #c9a227 #241c14;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.55rem;
  font-size: 0.8rem;
  background: #120e0a;
  border: 1px solid var(--gold);
  border-top: none;
}

#arena-log-list::-webkit-scrollbar {
  width: 12px;
}

#arena-log-list::-webkit-scrollbar-track {
  background: #241c14;
}

#arena-log-list::-webkit-scrollbar-thumb {
  background: #c9a227;
  border: 2px solid #241c14;
}

#arena-log-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  border-left: 3px solid var(--mute);
  padding: 0.15rem 0.4rem;
  margin: 0.2rem 0;
}

#arena-log-list li.log-turn {
  display: block;
  margin: 0.65rem 0 0.3rem;
  padding: 0.4rem 0.45rem 0.25rem;
  border-left: none;
  border-top: 1px solid var(--gold);
  background: #1a140e;
  color: var(--gold);
  font-weight: 700;
}

.log-ico {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}

.log-pip {
  height: 1rem;
  width: auto;
  vertical-align: middle;
  border-radius: 50%;
}

.log-phase-end {
  color: var(--mute);
}

.log-phase-start {
  color: var(--ok);
}

.log-utf {
  color: var(--gold);
}

.nav {
  flex-wrap: wrap;
}

body[data-phase="ARENA"] #match-title,
body[data-phase="ARENA"] #match-phase,
body[data-phase="ARENA"] .match-head,
body[data-phase="ARENA"] #match-notice {
  display: none;
}

/* Partie lancee (des le D20) : on ne quitte plus par un lien de nav — il y
   a #match-close pour abandonner proprement. Les onglets deviennent
   invisibles (place conservee : la barre ne se recompose pas). Un F5
   recharge la page sans passer par la, la partie reprend. */
body[data-phase="DICE"] .nav-top > a,
body[data-phase="ARENA"] .nav-top > a {
  display: none;
}

body[data-phase="ARENA"] main,
body[data-phase="DICE"] main {
  max-width: none;
  width: 100%;
}

body[data-phase="ARENA"] main {
  padding-top: 0.35rem;
}

/* Course de scroll en paysage : #match-arena est dimensionne a la hauteur
   d'ecran exacte, le document ne depasse jamais -> impossible de scroller la
   nav hors champ, la languette restait collee et clignotait. Ce padding
   donne juste assez de course pour sortir la nav au clic. */
body[data-phase="ARENA"]:not([data-orient="portrait"]) main {
  padding-bottom: 5rem;
}

body[data-phase="ARENA"] .arena-top {
  padding: 0 0 0.25rem;
  margin-bottom: 0.25rem;
}

#play-tab {
  display: none;
  position: sticky;
  top: 0;
  z-index: 18;
  width: 2.4rem;
  height: 0.95rem;
  margin: -1px auto 0;
  padding: 0;
  border: none;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  cursor: pointer;
}

body[data-phase="ARENA"] #play-tab {
  display: block;
}

body[data-phase="ARENA"] #play-tab[data-dir="up"] {
  display: none;
}

#play-tab:hover {
  background: #e0c04a;
}

@keyframes play-tab-blink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

body[data-phase="ARENA"] #play-tab[data-used="0"] {
  animation: play-tab-blink 0.75s ease-in-out infinite;
}

#modal-alert,
#modal-place,
#modal-pile,
#modal-marks {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10100;
}

#modal-alert[hidden],
#modal-place[hidden],
#modal-pile[hidden],
#modal-marks[hidden] {
  display: none;
}

#modal-alert .modal-panel,
#modal-place .modal-panel {
  width: min(26rem, 92vw);
  background: #241c14;
  border: 1px solid #c9a227;
  padding: 1rem;
}

#modal-pile .modal-panel {
  width: min(96vw, 72rem);
  background: #241c14;
  border: 1px solid #c9a227;
  padding: 0.8rem 1rem 1.1rem;
}

#modal-pile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}

.color-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: center;
}

.color-filter {
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
  box-shadow: none;
}

.color-filter:hover,
.color-filter:focus {
  background: transparent;
  border: none;
}

.color-filter img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50%);
  pointer-events: none;
}

.color-filter[data-on="1"] {
  box-shadow: 0 0 0 2px #f4ead4;
}

#modal-pile-title {
  margin: 0;
  font-size: 1.05rem;
}

#modal-pile-strip {
  position: relative;
  width: 100%;
  min-height: 10rem;
}

#modal-pile-strip .pile-card {
  position: absolute;
  top: 0;
  left: 0;
}

#modal-pile-strip .pile-card .arena-card {
  width: calc(10rem * 63 / 88);
}

#modal-pile-strip .pile-card .arena-card img {
  height: 10rem;
  width: 100%;
  display: block;
}

#modal-pile-strip .pile-card:hover {
  z-index: 400;
}

#modal-alert-text,
#modal-place-text {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
}

.place-pip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.5rem;
}

.place-pip img {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
}

.place-pip input {
  width: 2.4rem;
}

#modal-marks .modal-panel {
  width: min(32rem, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #241c14;
  border: 1px solid #c9a227;
  padding: 0.8rem 1rem 1rem;
}

#modal-marks-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

#modal-marks-bar h2 {
  margin: 0;
  font-size: 1.1rem;
}

#modal-marks-find {
  width: 100%;
  margin-bottom: 0.6rem;
}

#modal-marks-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#modal-marks-list h3 {
  margin: 0.7rem 0 0.25rem;
  font-size: 0.8rem;
  color: var(--gold);
}

.marks-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
  padding: 0.25rem 0.4rem;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  width: 100%;
}

.marks-row img {
  width: 1.6rem;
  height: 1.6rem;
}

.marks-row[data-on="1"] {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.15);
}

#arena-win {
  position: fixed;
  inset: 0;
  z-index: 10070;
  pointer-events: none;
  overflow: hidden;
  perspective: 700px;
  perspective-origin: 50% 0%;
}

#arena-win[hidden] {
  display: none;
}

#arena-win-name {
  position: absolute;
  left: 50%;
  top: 16%;
  margin: 0;
  transform: translateX(-50%);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--win-c, var(--gold));
  text-shadow: 0 2px 0 #111, 0 8px 28px #000;
  white-space: nowrap;
}

#arena-win[data-wave="0"] #arena-win-name {
  opacity: 0.92;
}

#arena-win-ribbons {
  position: absolute;
  inset: 0;
}

.win-fall {
  position: absolute;
  top: -18%;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  transform-origin: 50% 0%;
  animation: win-fall var(--fall) var(--d) linear forwards;
}

.win-twist {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      var(--c3) 0%,
      var(--c1) 28%,
      var(--c2) 50%,
      var(--c1) 72%,
      var(--c3) 100%
    );
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: win-twist var(--spin) var(--d) linear infinite;
}

@keyframes win-fall {
  0% {
    transform: translate3d(0, -8vh, 0) rotate(var(--tilt));
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift), 118vh, 0) rotate(calc(var(--tilt) + 48deg));
    opacity: 0.75;
  }
}

@keyframes win-twist {
  0% {
    transform: rotateY(0deg) rotateZ(6deg) scaleX(1);
  }
  25% {
    transform: rotateY(90deg) rotateZ(4deg) scaleX(0.12);
  }
  50% {
    transform: rotateY(180deg) rotateZ(-6deg) scaleX(1);
  }
  75% {
    transform: rotateY(270deg) rotateZ(-4deg) scaleX(0.12);
  }
  100% {
    transform: rotateY(360deg) rotateZ(6deg) scaleX(1);
  }
}