:root {
  --ink: #f6f7fb;
  --ink-dim: rgba(246, 247, 251, 0.62);
  --bg: #070a16;
  --panel: rgba(10, 14, 30, 0.74);
  --panel-solid: #0d1226;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #ffb648;
  --accent-2: #4ea8ff;
  --italie: #0d8a4a;
  --france: #123a9c;
  --radius: 16px;
  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.layer { position: fixed; inset: 0; z-index: 2; }
.hidden { display: none !important; }

/* ---------------- Écrans ---------------- */

.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(78, 168, 255, 0.18), transparent 60%),
    linear-gradient(180deg, #070a16 0%, #0b1024 55%, #060812 100%);
  padding: 24px;
}

.screen.dim {
  background: rgba(4, 6, 14, 0.82);
  backdrop-filter: blur(10px);
}

.screen-inner {
  width: min(980px, 100%);
  margin: auto;
  padding: 8px 0 28px;
}

.screen-inner.narrow { width: min(460px, 100%); text-align: center; }

/* Photo souvenir de fin de match : un cadre blanc autour de l'image, la
   legende dessous, et l'eclair du flash. Le panneau de fin se range en
   bas a droite pour ne pas masquer le vainqueur. */
.photo-souvenir {
  pointer-events: none;
  box-shadow: inset 0 0 0 18px #fbf8f1, inset 0 0 0 20px rgba(0, 0, 0, 0.22);
}
.photo-souvenir .photo-legende {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: #fbf8f1;
  color: #1d1b16;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 26px);
  letter-spacing: 0.04em;
}
.photo-souvenir .photo-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
}
/* « declenche » et non « flash » : .flash est deja l'eclair de l'hyper
   shot, a opacite nulle — le cadre entier en devenait invisible. */
.photo-souvenir.declenche .photo-flash { animation: photo-flash 0.7s ease-out; }
@keyframes photo-flash { from { opacity: 1; } to { opacity: 0; } }

/* Lettrage du logo PING PONG FAMILLY : lettres rondes et grasses, contour
   marine, degrade blanc-bleu comme « PING PONG », jaune-orange comme
   « FAMILLY ». Les noms de la fin de match le reprennent. */
.lettrage-ping,
.lettrage-familly {
  display: block;
  font-family: 'Lilita One', 'Arial Rounded MT Bold', 'Segoe UI Black', var(--font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 3px #0a1c4e;
  paint-order: stroke fill;
}
.lettrage-ping {
  background-image: linear-gradient(180deg, #ffffff 10%, #bfe6ff 55%, #5aa8f0 100%);
  filter: drop-shadow(0 5px 0 #061441);
}
.lettrage-familly {
  background-image: linear-gradient(180deg, #fff6a0 5%, #ffd23a 45%, #f08a14 100%);
  filter: drop-shadow(0 6px 0 #6a2a00) drop-shadow(0 0 18px rgba(255, 190, 60, 0.45));
}
#result-title { transform: rotate(-3deg); margin: 6px 0 8px; }
#result-title .lettrage-ping { font-size: 0.62em; }
#result .final-score {
  font-family: 'Lilita One', 'Arial Rounded MT Bold', 'Segoe UI Black', var(--font);
  font-weight: 400;
}
.photo-souvenir .photo-legende {
  font-family: 'Lilita One', 'Arial Rounded MT Bold', 'Segoe UI Black', var(--font);
  font-weight: 400;
  gap: 0.35em;
}
.photo-legende .lettrage-familly {
  display: inline;
  font-size: 1.3em;
  -webkit-text-stroke: 2px #0a1c4e;
}

#result.avec-photo {
  background: transparent;
  backdrop-filter: none;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 4vw 104px;
}
#result.avec-photo .screen-inner {
  margin: 0;
  padding: 18px 24px;
  border-radius: 18px;
  background: rgba(4, 6, 14, 0.86);
}

/* Menu principal : le joueur choisi est montre en 3D a gauche, comme
   sur un ecran de selection de jeu de combat. Le panneau se range a
   droite et le fond ne couvre que sa moitie. Sur un ecran etroit on
   revient au panneau centre et opaque. */


/* Calque VS : badge entre les deux personnages, noms en dessous. Sur le
   menu il occupe la partie gauche (mode `menu`), avant la partie tout
   l'ecran (mode `intro`). */
.vs-layer { display: none; pointer-events: none; }
.vs-layer.menu, .vs-layer.intro { display: block; }
.vs-layer .vs-badge { left: 27%; top: 44%; }
.vs-layer .vs-name { display: none; }
.vs-layer.intro .vs-badge { left: 50%; top: 44%; }
.vs-layer.intro .vs-name { display: block; }
.vs-name {
  position: absolute;
  top: 78%;
  width: 34%;
  text-align: center;
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 34px);
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
  /* fond clair du studio : les noms gardent un cartouche sombre */
  padding: 8px 0;
  background: rgba(7, 10, 22, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
.vs-name small { display: block; font-weight: 500; font-size: 0.6em; color: var(--ink-dim); margin-top: 4px; }
.vs-left { left: 16%; }
.vs-right { left: 50%; }
@media (max-width: 899px) { .vs-layer.menu { display: none; } }

.vs-badge {
  position: absolute;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(48px, 7vw, 110px);
  letter-spacing: 0.04em;
  color: #ffb347;
  text-shadow: 0 0 18px rgba(255, 179, 71, 0.55), 0 6px 24px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.title-block { text-align: center; margin-bottom: 26px; }
.title-block.compact { margin-bottom: 18px; }

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 10px;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(34px, 7vw, 62px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.title-accent {
  display: block;
  background: linear-gradient(92deg, var(--accent) 0%, #ff6b6b 45%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  margin: 0 0 10px;
  font-weight: 700;
}

.subtitle { color: var(--ink-dim); margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
.footnote { color: var(--ink-dim); font-size: 13px; text-align: center; margin-top: 18px; }

.choice-block { margin-bottom: 22px; }

/* ---------------- Cartes de choix ---------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
  overflow: hidden;
}

.card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3); }

.card[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(255, 182, 72, 0.12);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.card-name { font-weight: 700; font-size: 16px; margin-bottom: 3px; }
.card-sub { font-size: 12.5px; color: var(--ink-dim); }

.flag { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-bottom: 12px; width: 46px; }
.flag span { flex: 1; }

.swatch { height: 46px; border-radius: 10px; margin-bottom: 12px; border: 1px solid var(--line); }

/* Vignette photo d'une scene : elle remplace le degrade. */
.swatch--photo {
  height: 74px;
  background-size: cover;
  background-position: center;
}

/* ---------------- Pilules ---------------- */

.pills { display: flex; gap: 10px; flex-wrap: wrap; }

.pill {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 20px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.pill:hover { border-color: rgba(255, 255, 255, 0.32); }
.pill[aria-pressed="true"] { background: var(--accent); color: #171203; border-color: var(--accent); font-weight: 700; }

/* ---------------- Boutons ---------------- */

.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.actions.column { flex-direction: column; align-items: stretch; }

.btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  border-radius: 12px;
  padding: 13px 26px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.btn:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }

.btn.primary {
  background: linear-gradient(92deg, var(--accent), #ff8a3d);
  color: #1a1204;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(255, 138, 61, 0.28);
}

.btn.ghost { background: transparent; color: var(--ink-dim); }
.btn.ghost:hover { color: var(--ink); }

/* ---------------- Galerie photo ---------------- */

.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

.photo-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.photo-preview {
  aspect-ratio: 16 / 10;
  background: #0a0f22 center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}

.photo-body { padding: 12px 14px 14px; }
.photo-title { font-weight: 700; margin-bottom: 10px; font-size: 15px; }
.photo-actions { display: flex; gap: 8px; }

.mini-btn {
  flex: 1;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.mini-btn:hover { background: rgba(255, 255, 255, 0.13); }
.mini-btn.danger { color: #ff9a9a; }

.photo-error { color: #ff9a9a; font-size: 12.5px; margin-top: 8px; min-height: 1em; }

.warning {
  border: 1px solid rgba(255, 182, 72, 0.4);
  background: rgba(255, 182, 72, 0.1);
  color: var(--accent);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 20px;
}

/* ---------------- ATH ---------------- */

#hud { pointer-events: none; }

.hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 4vw, 46px);
  padding: 18px clamp(14px, 4vw, 34px);
}

.side-panel { width: min(230px, 26vw); padding-top: 8px; }
.side-panel.right { text-align: right; }

.side-name {
  font-weight: 700;
  font-size: clamp(12px, 1.6vw, 15px);
  margin-bottom: 7px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gauge {
  position: relative;
  height: 13px;
  border-radius: 999px;
  background: rgba(6, 10, 22, 0.7);
  border: 1px solid var(--line);
  overflow: hidden;
}

.gauge-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  transition: width 0.14s linear;
}

.gauge-fill.left { background: linear-gradient(90deg, #0d8a4a, #f4f5f0 55%, #cd212a); }
.gauge-fill.right { background: linear-gradient(90deg, #002395, #ffffff 50%, #ed2939); }

.gauge.full { animation: gaugePulse 0.9s ease-in-out infinite; }

@keyframes gaugePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
  50% { box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.55); }
}

.gauge-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.scoreboard {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 20px 10px;
  backdrop-filter: blur(8px);
  position: relative;
}

.score {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 1.1em;
  text-align: center;
}

.score.bump { animation: scoreBump 0.45s ease; }

@keyframes scoreBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.42); color: var(--accent); }
  100% { transform: scale(1); }
}

.score-sep { width: 12px; height: 3px; background: var(--ink-dim); border-radius: 2px; }

.scene-tag {
  position: absolute;
  bottom: -9px; left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 12px;
  white-space: nowrap;
}

.icon-btn {
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.icon-btn:hover { background: rgba(255, 255, 255, 0.16); }

.announce {
  position: absolute;
  top: 34%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(26px, 6.5vw, 62px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.75);
  opacity: 0;
  white-space: nowrap;
}

.announce.show { animation: announceIn 1.25s ease forwards; }
/* LUCKY RAT reste plus longtemps : c'est le coup du sort, on veut le lire. */
.announce.show.longue { animation-duration: 2.8s; }

@keyframes announceIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  30% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

.hyper-ready {
  position: absolute;
  bottom: 92px; left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(255, 182, 72, 0.16);
  border: 1px solid var(--accent);
  color: var(--accent);
  animation: gaugePulse 1.2s ease-in-out infinite;
  white-space: nowrap;
}

.charge-ring {
  position: absolute;
  bottom: 130px; left: 50%;
  transform: translateX(-50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--accent);
  animation: spin 0.55s linear infinite;
}

@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }

.flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.95), rgba(255,255,255,0) 68%);
  opacity: 0;
  pointer-events: none;
}

.flash.fire { animation: flashOut 0.3s ease-out; }

@keyframes flashOut {
  0% { opacity: 0.62; }
  100% { opacity: 0; }
}

.hint {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--ink-dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  transition: opacity 0.6s ease;
  white-space: nowrap;
}

.hint.fade { opacity: 0; }

.final-score {
  font-size: 54px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 14px 0 6px;
}

.spinner {
  width: 34px; height: 34px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent);
  animation: spinPlain 0.7s linear infinite;
}

@keyframes spinPlain { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .side-panel { width: 30vw; }
  .side-name { font-size: 11px; }
  .hud-top { padding: 12px; gap: 10px; }
  .scoreboard { padding: 6px 14px 9px; gap: 10px; }
  .hint { font-size: 11.5px; bottom: 14px; }
  .hyper-ready { bottom: 62px; font-size: 11px; }
  .charge-ring { bottom: 96px; width: 58px; height: 58px; }
}

/* Compteur d'images. Touche P pour l'afficher. */
.perf {
  position: absolute;
  top: 70px; right: 18px;
  font-family: 'Consolas', 'SF Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #7ef0a8;
  background: rgba(6, 10, 22, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 11px;
  white-space: pre;
  pointer-events: none;
}
.perf.lent { color: #ffb648; }
.perf.tresLent { color: #ff8080; }

/* ============ Presentation d'avant-match ============ */
/* La carte est posee du cote de l'ecran ou se trouve le joueur montre :
   elle ne doit jamais couvrir son visage. */
.intro {
  pointer-events: none;
  background: linear-gradient(
    to bottom, rgba(6, 10, 20, 0.55) 0%, rgba(6, 10, 20, 0) 32%,
    rgba(6, 10, 20, 0) 64%, rgba(6, 10, 20, 0.62) 100%);
}

.intro-card {
  position: absolute;
  bottom: 13%;
  left: 7%;
  min-width: min(340px, 62vw);
  padding: 16px 22px 18px;
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 4px solid var(--accent);
  backdrop-filter: blur(7px);
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.intro-card.show { opacity: 1; transform: translateX(0); }
.intro-card.right { left: auto; right: 7%; transform: translateX(28px); }
.intro-card.right.show { transform: translateX(0); }

.intro-flag {
  width: 46px; height: 30px;
  border-radius: 4px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.intro-role {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.intro-name {
  font-size: clamp(21px, 3.4vw, 34px);
  font-weight: 800;
  line-height: 1.1;
}

.intro-sub {
  margin-top: 5px;
  font-size: 13px;
  opacity: 0.72;
}

.intro-hyper {
  margin-top: 9px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 182, 72, 0.15);
  border: 1px solid rgba(255, 182, 72, 0.45);
}

.intro-skip {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.42;
}


/* ================================================================
   Page d'accueil.

   L'illustration EST l'interface : les boutons y sont dessines. On
   superpose des zones cliquables invisibles, placees en pourcentage de
   l'image, qui s'allument au survol. L'image garde son cadrage quelle que
   soit la fenetre (elle ne doit ni s'etirer ni se rogner sur un bouton).
   ================================================================ */

#home.screen {
  display: grid;
  place-items: center;
  padding: 0;
  background: #041027;
}

.home-stage {
  position: relative;
  width: min(100vw, calc(100vh * 1.7768));
  aspect-ratio: 1672 / 941;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.7);
}

.home-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  outline: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.hotspot:hover {
  background: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 0 25px rgba(255, 255, 255, 0.45),
    0 0 22px rgba(106, 190, 255, 0.45);
}

.hotspot:active { transform: scale(0.97); }
.hotspot:focus-visible { outline: 4px solid #ffffff; outline-offset: 2px; }

.hotspot.play { left: 34.7%; top: 38.2%; width: 30.4%; height: 13.8%; }
/* L'accueil a gagne le bouton PAWN TROPHY sous JOUER : les trois boutons
   suivants ont descendu d'autant. Positions relevees sur l'illustration
   livree — celles du zip etaient restees sur l'ancienne mise en page et
   tombaient sur le nouveau bouton. */
.hotspot.trophy { left: 34.65%; top: 51.45%; width: 30.55%; height: 13.3%; }
.hotspot.characters { left: 37%; top: 65.4%; width: 25.7%; height: 7.6%; }
.hotspot.arena { left: 37%; top: 73.4%; width: 25.7%; height: 7.6%; }
.hotspot.options { left: 37%; top: 81.4%; width: 25.7%; height: 7.6%; }
.hotspot.profile { left: 86.5%; top: 1.8%; width: 11.4%; height: 5.8%; }
.hotspot.help { left: 81.4%; bottom: 1.5%; width: 7%; height: 6%; }
.hotspot.ranking { right: 1.5%; bottom: 1.4%; width: 10.5%; height: 6.2%; }

/* Message court (aide, classement) : une bulle, pas un ecran de plus. */
.home-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  z-index: 20;
  max-width: min(560px, 88vw);
  padding: 14px 22px;
  border-radius: 22px;
  background: #ffffff;
  color: #09235f;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, 30px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.home-toast.show { opacity: 1; transform: translate(-50%, 0); }

.mini-links { display: flex; gap: 14px; }


/* ================================================================
   Ecran de selection — reproduction de la maquette PING PONG FAMILLY
   (assets/styles.css du dossier fourni, section « Selection 3D facon
   versus »). Les valeurs sont celles de la maquette.

   Une difference imposee par le jeu : la maquette place un
   <model-viewer> dans chaque camp, alors qu'ici les deux personnages
   sont rendus ensemble par la scene 3D, derriere cette couche. Le decor
   (degrade, rayons, faisceau) est donc peint dans la scene, sinon il
   passerait devant eux.
   ================================================================ */

#menu.screen {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: none;
  pointer-events: none;
}

#menu .dialog,
#menu .settings-drawer { pointer-events: auto; }

#menu .dialog {
  position: relative;
  width: min(1500px, 97vw);
  height: min(900px, 96vh);
  max-height: 96vh;
  border: 2px solid rgba(126, 211, 255, 0.55);
  border-radius: 26px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.7), 0 0 50px rgba(20, 127, 255, 0.33);
}

#menu .dialog-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 8;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  background: linear-gradient(rgba(3, 19, 62, 0.91), transparent);
  border: 0;
  pointer-events: none;
}

#menu .dialog-head button { pointer-events: auto; }
#menu .dialog-head > div { text-align: center; }

#menu .dialog h1 {
  margin: 2px 0 0;
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  text-transform: uppercase;
  font-style: italic;
  text-shadow: 0 3px 0 #002261;
}

#menu .eyebrow {
  margin: 0;
  color: #71caff;
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}

#menu .back,
#menu .close {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.09);
  color: inherit;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

#menu .back:hover,
#menu .close:hover { background: #ffffff; color: #103384; }

/* Cale exactement sur le cadre. En `height: 100%` il partait 104 px plus
   bas que le dialogue — sous l'en-tete — tout en faisant sa hauteur
   entiere : il debordait donc d'autant, et la barre des combattants, qui
   s'ancre sur lui, tombait hors du cadre et se faisait rogner. */
#menu .dialog-body { position: absolute; inset: 0; padding: 0; }

/* Le fond est transparent : la scene 3D, derriere, porte le degrade, les
   rayons et le faisceau (voir buildStudio dans js/main.js). */
.fighter-select {
  position: relative;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
}

.versus-stage {
  position: absolute;
  inset: 76px 0 214px;
  display: grid;
  grid-template-columns: 1fr 170px 1fr;
  z-index: 2;
}

.fighter-side {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.player-badge {
  position: absolute;
  top: 18px;
  z-index: 3;
  padding: 9px 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.09em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.53);
}

.p1 .player-badge { left: 22px; background: #087be9; }
.p2 .player-badge { right: 22px; background: #e91f48; }

.fighter-name {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 1%;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 0.85;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  text-shadow: 0 5px 0 #061441, 0 0 22px #5ac6ff;
}

.p2 .fighter-name { text-shadow: 0 5px 0 #380312, 0 0 22px #ff5271; }

.fighter-tag {
  position: absolute;
  bottom: 62px;
  z-index: 4;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(2, 10, 43, 0.8);
  font-weight: 800;
  color: #d8edff;
}

.p1 .fighter-tag { left: 24px; }
.p2 .fighter-tag { right: 24px; }

.vs-core {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 5;
  pointer-events: none;
}

.vs-burst {
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.12em;
  color: #fff2a5;
  transform: skew(-8deg) rotate(-5deg);
  text-shadow: 4px 4px 0 #ff5c00, -4px -4px 0 #096bff, 0 0 35px #ffffff;
}

.vs-core small {
  position: absolute;
  top: 62%;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffe775;
  font-weight: 900;
  white-space: nowrap;
}

.roster-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  z-index: 6;
  display: grid;
  /* Dans l'ORDRE des elements : fleche, rangee, fleche, actions. La
     rangee est la seule qui doit prendre la place restante. Le 1fr avait
     d'abord ete pose sur la mauvaise colonne, et c'est la fleche droite
     qui recevait toute la largeur. */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: linear-gradient(90deg,
    rgba(7, 23, 76, 0.96), rgba(16, 47, 124, 0.96), rgba(7, 23, 76, 0.96));
  border-top: 2px solid #6dc5ff;
  box-shadow: 0 -15px 35px rgba(2, 7, 31, 0.6);
}

/* Une seule rangee qui DEFILE.
   Les grilles a rangees fixes obligeaient a recompter les colonnes a
   chaque joueur ajoute, et le dix-septieme a fini hors du bandeau, sans
   que rien ne le signale. Une rangee qui defile n'a pas de plafond : le
   prochain venu se range au bout, et les fleches vont le chercher. */
.roster {
  display: flex;
  gap: 10px;
  padding: 6px 2px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.roster::-webkit-scrollbar { display: none; }

.roster-fleche {
  width: 46px;
  height: 46px;
  padding: 0 0 4px;
  color: #dceaff;
  font: 900 28px/1 'Baloo 2', system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(150, 195, 255, 0.45);
  border-radius: 50%;
  cursor: pointer;
}
.roster-fleche:hover { background: rgba(255, 255, 255, 0.18); border-color: #ffffff; }

.roster-card {
  position: relative;
  flex: 0 0 108px;
  scroll-snap-align: center;
  height: 132px;
  border: 3px solid #5574ad;
  border-radius: 13px;
  background: linear-gradient(145deg, #254c9d, #091636);
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.45);
}

.roster-card:hover { transform: translateY(-4px); border-color: #ffffff; }

.roster-card.selected-p1 {
  border-color: #55c8ff;
  box-shadow: 0 0 0 3px #057fff, 0 8px 18px #000000;
}

.roster-card.selected-p2 {
  border-color: #ff7890;
  box-shadow: 0 0 0 3px #ef1747, 0 8px 18px #000000;
}

.roster-card strong {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 3px;
  background: rgba(2, 7, 24, 0.85);
  text-align: center;
  font-size: 0.76rem;
  text-transform: uppercase;
}

/* Le visage du joueur, rendu depuis son modele (tools/portraits.html) ;
   l'initiale sur les couleurs du maillot tient lieu de repli. */
.portrait-mark {
  display: grid;
  place-items: center;
  height: 64px;
  font-size: 2.5rem;
  font-weight: 900;
  /* La carte est plus large que haute : « cover » rogne en hauteur. On
     garde la bande centrale, celle des yeux — plus haut on ne voyait que
     le front et les cheveux. */
  background-size: cover;
  background-position: center;
}

.portrait-mark.has-face { background-color: #0a1330; }

.roster-card .roster-flag {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  width: 22px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.roster-card .roster-flag span { flex: 1; }

.slot-switch {
  position: absolute;
  left: 50%;
  bottom: 228px;
  z-index: 7;
  transform: translateX(-50%);
  display: flex;
  padding: 5px;
  border-radius: 999px;
  background: rgba(2, 8, 34, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.33);
}

.slot-switch button {
  min-width: 112px;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.slot-switch button[aria-pressed="true"]:first-child { background: #087be9; }
.slot-switch button[aria-pressed="true"]:last-child { background: #e91f48; }

.duel-confirm {
  min-width: 220px;
  min-height: 62px;
  margin: 0;
  border: 3px solid #fff6a6;
  border-radius: 999px;
  background: linear-gradient(#ffdd35, #ff8500);
  color: #3d1800;
  font: inherit;
  box-shadow: inset 0 3px rgba(255, 255, 255, 0.6), 0 6px 0 #b94600;
  font-size: 1.1rem;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  cursor: pointer;
}

.duel-confirm:active {
  transform: translateY(4px);
  box-shadow: inset 0 3px rgba(255, 255, 255, 0.6), 0 2px 0 #b94600;
}

.dialogue-card {
  position: absolute;
  top: 96px;
  z-index: 6;
  width: min(220px, 32%);
  padding: 10px 12px 9px;
  border: 2px solid #081947;
  border-radius: 14px;
  background: linear-gradient(145deg, #ffffff, #dcecff);
  color: #07143d;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.47));
  animation: bubble-in 0.4s cubic-bezier(0.2, 1.5, 0.5, 1);
}

.p1 .dialogue-card { left: 22px; right: auto; transform: rotate(-1deg); }
.p2 .dialogue-card { right: 22px; left: auto; transform: rotate(1deg); }

.dialogue-card::after {
  content: "";
  position: absolute;
  top: 30px;
  width: 20px;
  height: 26px;
  background: #e1efff;
}

.p1 .dialogue-card::after { right: -19px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.p2 .dialogue-card::after { left: -19px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }

.dialogue-speaker {
  display: block;
  margin-bottom: 4px;
  color: #0b6bdb;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.p2 .dialogue-speaker { color: #d51c46; }

.dialogue-text {
  display: block;
  font-size: clamp(0.78rem, 1vw, 0.96rem);
  line-height: 1.15;
  font-weight: 900;
  font-style: italic;
}

.dialogue-card small { display: none; }

.dialogue-card:hover {
  background: #ffffff;
  filter: drop-shadow(0 9px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
}

.dialogue-card.pop { animation: bubble-pop 0.28s ease-out; }

@keyframes bubble-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes bubble-pop { 50% { scale: 1.09; } }

@media (max-width: 820px) {
  #menu .dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .versus-stage { inset: 70px 0 190px; grid-template-columns: 1fr 72px 1fr; }
  .fighter-name { font-size: clamp(1.6rem, 8vw, 3.1rem); }
  .fighter-tag { display: none; }
  .vs-burst { font-size: 3.1rem; }
  .vs-core small { font-size: 0.65rem; }
  /* Ecran etroit : la rangee prend toute la largeur sur sa propre ligne,
     les fleches l'encadrent, et le reste passe dessous. Laisser la barre
     en une seule colonne avec cinq elements la reduisait a rien. */
  .roster-bar {
    height: auto;
    grid-template-columns: auto 1fr auto;
    padding: 10px 12px;
    gap: 8px;
  }
  .roster { gap: 6px; }
  .duel-actions { grid-column: 1 / 4; }
  .duel-confirm { width: 100%; min-height: 46px; }
  .roster-card { height: 74px; }
  .portrait-mark { height: 50px; font-size: 1.4rem; }
  .roster-card strong { padding: 5px; font-size: 0.65rem; }
  .slot-switch { bottom: 200px; }
  .player-badge { top: 10px; padding: 6px 10px; font-size: 0.7rem; }
  .p1 .player-badge { left: 8px; }
  .p2 .player-badge { right: 8px; }
  .dialogue-card { top: 54px; width: 112px; padding: 7px 8px; border-radius: 10px; }
  .p1 .dialogue-card { left: 2px; right: auto; }
  .p2 .dialogue-card { right: 2px; left: auto; }
  .dialogue-text { font-size: 0.61rem; line-height: 1.12; }
  .dialogue-speaker { font-size: 0.5rem; }
  .dialogue-card::after { top: 22px; width: 13px; height: 18px; }
  .p1 .dialogue-card::after { right: -12px; }
  .p2 .dialogue-card::after { left: -12px; }
}

/* Le tiroir des reglages, par-dessus le duel. */
.settings-drawer {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  overflow-y: auto;
  padding: 24px;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(78, 168, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(7, 10, 22, 0.97) 0%, rgba(11, 16, 36, 0.98) 55%, rgba(6, 8, 18, 0.99) 100%);
}

/* Drapeau en trois bandes, devant les noms (voir flagHTML). */
.mini-flag {
  display: inline-flex;
  width: 18px;
  height: 12px;
  margin-right: 7px;
  border-radius: 2px;
  overflow: hidden;
  vertical-align: -1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.mini-flag span { flex: 1; }

/* Drapeaux qui ne sont pas a trois bandes. Le Bresil : fond vert, losange
   jaune, disque bleu — trois bandes verte, jaune et bleue n'y ressemblent
   pas du tout. */
.flag--brazil {
  position: relative;
  background: #009b3a;
}

.flag--brazil::before,
.flag--brazil::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}

.flag--brazil::before {
  width: 76%;
  height: 76%;
  background: #ffdf00;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.flag--brazil::after {
  width: 34%;
  height: 48%;
  border-radius: 50%;
  background: #002776;
}

/* Vietnam : etoile jaune a cinq branches, centree sur fond rouge. */
.flag--vietnam {
  position: relative;
  background: #da251d;
}

.flag--vietnam::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62%;
  height: 62%;
  background: #ffff00;
  clip-path: polygon(50% 0, 61.8% 34.5%, 98% 34.5%, 69% 56%, 80% 90.5%,
    50% 69%, 20% 90.5%, 31% 56%, 2% 34.5%, 38.2% 34.5%);
}

/* ============ Choix de l'arene et de la table ============
   La maquette EST l'ecran : son image porte le decor, le logo, les
   banderoles, les fleches, les boutons et les trois cartes. On ne
   redessine rien — on pose par-dessus des zones cliquables aux memes
   coordonnees, reprises telles quelles du zip, et le lisere de selection
   qu'il definit.

   Seul contenu ajoute : le visuel de chaque carte, parce que les cartes
   peintes ne connaissent ni les quinze arenes ni les vraies tables. */

.mock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #020716;
}

.mock-scene {
  position: relative;
  aspect-ratio: 1676 / 941;
  width: min(100%, calc(100vh * 1.7811));
  height: min(100%, calc(100vw / 1.7811));
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  isolation: isolate;
  overflow: hidden;
}

#arenes .mock-scene { background-image: url('../assets/ui/fond-arenes.jpg'); }
#tables .mock-scene { background-image: url('../assets/ui/fond-tables.jpg'); }

.mock-scene button {
  position: absolute;
  border: 0;
  padding: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Les trois emplacements de cartes, aux coordonnees exactes du zip.
   Les cartes livrees portent deja leur cadre dore, leur titre et leurs
   trois pastilles : on ne dessine rien par-dessus, on les pose.

   L'emplacement du milieu a le format d'une carte (713 x 490, soit 1,455
   contre 1,448) : elle le remplit. Ceux des cotes sont en portrait, bien
   plus hauts : la carte y est posee entiere sur un fond opaque, qui a
   pour role de masquer la carte PEINTE dessous — sans lui, on lisait
   encore « PARIS » et « OMAN » derriere. */
.mock-carte {
  border-radius: 4.2% / 5.5%;
  background-repeat: no-repeat;
  background-position: center;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.mock-carte.gauche { left: 6.3%; top: 28.9%; width: 22.2%; height: 47.9%; }
.mock-carte.centre { left: 29.15%; top: 25.7%; width: 42.55%; height: 52.1%; }
.mock-carte.droite { left: 71.15%; top: 28.8%; width: 20.9%; height: 48.2%; }

/* `contain` et non `100% 100%` : les cartes livrees n'ont pas toutes le
   meme format — celles de Prison et Teheran sont en portrait, celles des
   tables en 16/9. Les etirer au gabarit de l'emplacement les
   deformerait. Le fond sombre bouche ce que la carte ne couvre pas. */
.mock-carte.centre {
  background-size: contain;
  background-color: #071433;
  box-shadow: 0 0 2.5vw #ff9d21;
}

.mock-carte.gauche, .mock-carte.droite {
  background-size: contain;
  background-color: #0a1a44;
  /* Pas de halo exterieur : les cartes livrees portent deja leur cadre
     dore, et ce halo debordait sur les fleches peintes a cote — c'est lui
     qu'on prenait pour un halo mal centre sur les boutons. */
  filter: brightness(0.78) saturate(0.9);
}

/* Les cartes de cote sont vues de biais, comme dans la maquette : elles
   pivotent vers le centre. Sans cette inclinaison, trois rectangles a
   plat cote a cote ne lisaient pas comme un carrousel. La perspective
   est posee sur la scene pour que les trois partagent le meme point de
   fuite. */
.mock-scene { perspective: 1400px; perspective-origin: 50% 45%; }

.mock-carte.gauche {
  transform: rotateY(-24deg) scale(0.96);
  transform-origin: right center;
}

.mock-carte.droite {
  transform: rotateY(24deg) scale(0.96);
  transform-origin: left center;
}

.mock-carte.centre { transform: translateZ(40px); }

.mock-carte.gauche:hover { filter: none; transform: rotateY(-18deg) scale(1); }
.mock-carte.droite:hover { filter: none; transform: rotateY(18deg) scale(1); }
.mock-carte.centre:hover { transform: translateZ(60px); }

/* Fleches, retour et validation : les boutons sont peints dans l'image,
   ces zones ne font que les rendre cliquables. */
.mock-fleche { top: 45.1%; width: 7.1%; height: 10.2%; border-radius: 50%; transition: 0.18s ease; }
.mock-fleche.prev { left: 0.6%; }
.mock-fleche.next { right: 0.5%; }
.mock-fleche:hover { filter: brightness(1.25); transform: scale(1.06); }

.mock-retour { left: 2.2%; bottom: 4.3%; width: 16%; height: 10%; border-radius: 50px; }
.mock-valider { left: 34.4%; bottom: 3.7%; width: 30.8%; height: 11.8%; border-radius: 60px; }
.mock-retour:hover, .mock-valider:hover { filter: brightness(1.15); }

/* Les points : l'image en peint cinq, il en faut autant que de scenes.
   Une pastille arrondie les porte — elle masque les cinq peints sans
   barrer l'ecran, ce que faisait un bandeau pleine largeur. */
.mock-points {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 79.2%;
  height: 3.8%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45em;
  padding: 0 0.9em;
  font-size: clamp(10px, 1.3vh, 18px);
  border-radius: 999px;
  background: rgba(6, 18, 52, 0.78);
}

.mock-points button {
  position: static;
  flex: 0 0 auto;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: #2f5db0;
}

.mock-points button.actif { background: #ffd45a; }

/* Compteur de performance. Cache par defaut : il s'allume avec ?perf=1
   dans l'adresse, ou par la touche P. Sans chiffre mesure chez le joueur,
   on ne peut que deviner d'ou vient une lenteur. */
.perf {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(4, 10, 28, 0.78);
  color: #9fe8b0;
  font: 700 12px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.04em;
  white-space: pre;
  pointer-events: none;
}

/* Nom d'une scene sans carte livree. */
.mock-nom {
  position: absolute;
  inset: auto 6% 8%;
  font-size: clamp(0.7rem, 1.8vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #ffd45a;
  text-shadow: 0 0.12em 0 #0a2050, 0 0.24em 0.5em rgba(0, 0, 0, 0.75);
}

/* Les cartes de table sont en 16/9, les cartes d'arene en 1,45. Les
   etirer au gabarit de l'emplacement les deformerait : on les pose
   entieres sur un fond sombre. */
#tables .mock-carte {
  background-size: contain;
  background-color: #071433;
}

/* Une table dont le modele 3D n'est pas encore la : on la montre, on
   annonce qu'elle arrive, et le bouton de validation s'eteint. */
.mock-carte.a-venir::after {
  content: "Bientôt";
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  padding: 0.5em 1.6em;
  border: 2px solid #ffd45a;
  border-radius: 999px;
  background: rgba(6, 14, 40, 0.88);
  font-size: clamp(0.7rem, 1.5vw, 1.4rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd45a;
}

/* Le bouton est une zone transparente posee sur celui qui est peint : un
   filtre n'y ferait rien, il faut le VOILER. */
.mock-valider.eteint {
  background: rgba(6, 14, 40, 0.6);
  cursor: not-allowed;
}

/* La carte du milieu passe DEVANT ses voisines. Sans cet ordre, celle de
   droite, plus tard dans le document, la recouvrait par son coin. */
.mock-carte.gauche, .mock-carte.droite { z-index: 1; }
.mock-carte.centre { z-index: 2; }

/* Repere de version, en bas de l'accueil : assez lisible pour etre lu a
   voix haute, assez discret pour ne pas entrer dans l'image. */
.home-build {
  position: absolute;
  right: 10px;
  bottom: 6px;
  margin: 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  pointer-events: none;
}

/* Compteur de manches, au-dessus du score et centre comme le nom de la
   scene l'est en dessous. Pose dans le flux, il devenait un element de
   plus dans la rangee et se rangeait A COTE du score, ce qui n'avait l'air
   de rien de voulu. Discret : c'est le score des points qu'on lit pendant
   l'echange, les manches ne servent qu'a se situer. */
.manches-tag {
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .62);
}

/* Format du match, pose a cote du bouton qui lance le duel. Discret : on
   vient ici pour choisir ses joueurs, le format n'est qu'un rappel. */
.duel-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.duel-manches {
  display: flex;
  align-items: center;
  gap: 8px;
}

.duel-manches > span {
  font-size: 9.5px;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .5);
}

.pills.serrees {
  gap: 4px;
}

.pills.serrees .pill {
  min-width: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

/* ================= Pawn Trophy =================================
   Deux ecrans livres en maquette. Comme pour les arenes et les tables,
   l'image EST l'ecran : les zones ci-dessous se posent dessus, aux
   coordonnees du zip, et ne dessinent rien.
   ============================================================== */

/* La maquette du Pawn Trophy a ete capturee AVEC la fenetre du
   navigateur : elle est decoupee a l'image, aux valeurs de recadrage
   du zip, d'ou son rapport propre. */
#pawn .mock-scene {
  background-image: url('../assets/ui/fond-pawn.jpg');
  aspect-ratio: 1621 / 800;
  width: min(100%, calc(100vh * 2.02625));
  height: min(100%, calc(100vw / 2.02625));
}
#pawn-amerique .mock-scene { background-image: url('../assets/ui/fond-pawn-amerique.jpg'); }

.pawn-zone {
  position: absolute;
  z-index: 3;
  border: 0;
  background: transparent;
  border-radius: 24px;
  cursor: pointer;
  color: transparent;
  transition: filter .18s, box-shadow .18s, transform .18s;
}

.pawn-zone:hover { box-shadow: inset 0 0 0 5px #fff, 0 0 26px 10px #35ddff; filter: brightness(1.12); }
.pawn-zone:active { transform: scale(.975); }
.pawn-zone:focus-visible { outline: 5px solid #fff62f; outline-offset: -5px; }

.pawn-europe { left: 2.47%; top: 22.88%; width: 23.57%; height: 28%; }
.pawn-asia { left: 2.47%; top: 52.38%; width: 23.57%; height: 27.38%; }
.pawn-oceania { left: 70.94%; top: 22.88%; width: 26.1%; height: 28%; }
.pawn-africa { left: 70.94%; top: 52.38%; width: 26.1%; height: 27.38%; }
.pawn-america { left: 29.73%; top: 79.88%; width: 37.51%; height: 17.13%; }
.pawn-close { left: 92.6%; top: 5.1%; width: 4.2%; height: 8%; border-radius: 50%; }

/* Lumieres discretes autour du Pawn Trophy de la selection. */
.selection-pawn-lights {
  position: absolute;
  z-index: 2;
  left: 43.4%; top: 29%; width: 13.4%; height: 39%;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 28% 48% at 50% 50%, transparent 0 70%, #000 87%);
  mask-image: radial-gradient(ellipse 28% 48% at 50% 50%, transparent 0 70%, #000 87%);
}

.selection-pawn-lights::before {
  content: "";
  position: absolute;
  left: 50%; top: 45%; width: 95%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8b966 0, #ffd43f42 28%, #38cfff1f 52%, transparent 72%);
  filter: blur(5px);
  animation: selection-halo 2.4s ease-in-out infinite alternate;
}

.selection-pawn-lights i {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fffbd2;
  box-shadow: 0 0 8px 3px #ffd84d;
  animation: selection-spark 1.8s ease-in-out infinite;
}

.selection-pawn-lights i:nth-child(1) { left: 12%; top: 18%; animation-delay: -.3s; }
.selection-pawn-lights i:nth-child(2) { right: 10%; top: 26%; animation-delay: -1.1s; }
.selection-pawn-lights i:nth-child(3) { left: 5%; top: 48%; animation-delay: -1.5s; }
.selection-pawn-lights i:nth-child(4) { right: 7%; top: 56%; animation-delay: -.7s; }
.selection-pawn-lights i:nth-child(5) { left: 20%; bottom: 13%; animation-delay: -1.3s; }
.selection-pawn-lights i:nth-child(6) { right: 18%; bottom: 9%; animation-delay: -.2s; }

@keyframes selection-halo { from { opacity: .55; } to { opacity: 1; } }
@keyframes selection-spark {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* ---- Le tableau d'Amerique ---- */

.reference-zone {
  position: absolute;
  z-index: 6;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: transparent;
}

.reference-zone:hover { box-shadow: 0 0 0 3px #fff8, 0 0 24px #55ddff; }

.reference-back { left: 2.6%; top: 6.5%; width: 6.2%; height: 9.2%; }
.reference-change { left: 61%; top: 21.6%; width: 14%; height: 7.8%; }
.reference-start { left: 76%; top: 21.4%; width: 21%; height: 8.5%; }

/* Halo doux autour du trophee du tableau, contenu dans sa carte. */
.reference-fiesta {
  position: absolute;
  z-index: 4;
  left: 61%; top: 48%; width: 15.5%; height: 34%;
  pointer-events: none;
  overflow: hidden;
  opacity: .82;
}

.reference-fiesta::before {
  content: "";
  position: absolute;
  left: 50%; top: 45%; width: 88%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbdc55 0, #ffe25b42 22%, #39cfff1f 48%, transparent 72%);
  filter: blur(5px);
  animation: reference-halo 2.2s ease-in-out infinite alternate;
}

.reference-fiesta i {
  position: absolute;
  left: var(--x); top: -10%;
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 5px var(--c);
  opacity: .72;
  animation: reference-confetti calc(var(--d) * 1.35) linear infinite;
  animation-delay: var(--delay);
}

.reference-fiesta i:nth-child(1) { --x: 8%; --c: #ffe34d; --d: 2.6s; --delay: -1s; }
.reference-fiesta i:nth-child(2) { --x: 21%; --c: #48ddff; --d: 3.1s; --delay: -2.2s; }
.reference-fiesta i:nth-child(3) { --x: 35%; --c: #ff568b; --d: 2.8s; --delay: -.4s; }
.reference-fiesta i:nth-child(4) { --x: 48%; --c: #fff; --d: 3.5s; --delay: -2.8s; }
.reference-fiesta i:nth-child(5) { --x: 61%; --c: #66ff78; --d: 2.5s; --delay: -1.7s; }
.reference-fiesta i:nth-child(6) { --x: 74%; --c: #ffd83d; --d: 3.2s; --delay: -2.4s; }
.reference-fiesta i:nth-child(7) { --x: 86%; --c: #55dfff; --d: 2.7s; --delay: -1.3s; }
.reference-fiesta i:nth-child(8) { --x: 95%; --c: #ff735c; --d: 3.4s; --delay: -3s; }

@keyframes reference-halo { from { opacity: .5; } to { opacity: .95; } }
@keyframes reference-confetti {
  from { transform: translateY(0) rotate(0); }
  to { transform: translateY(360%) rotate(220deg); }
}

@media (prefers-reduced-motion: reduce) {
  .selection-pawn-lights::before,
  .selection-pawn-lights i,
  .reference-fiesta::before,
  .reference-fiesta i { animation: none; }
}


/* ---- Mode entrainement ---- */

/* Le bouton d'accueil : les autres sont des zones invisibles posees sur
   l'illustration, celui-ci n'y figure pas et doit donc se dessiner. */
.hotspot.entrainement {
  left: 37%; top: 89.6%; width: 25.7%; height: 7.2%;
}
.hotspot.visible {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 clamp(11px, 1.7vh, 19px)/1 'Baloo 2', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f7fbff;
  background: linear-gradient(180deg, #2f6df0, #1a3f9e);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(8, 20, 54, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
}

#entrainement {
  display: grid;
  place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, #123a7a 0%, #071634 70%);
}

.ent-panneau {
  width: min(560px, 88vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(16px, 3vh, 30px);
  background: rgba(6, 17, 40, 0.86);
  border: 2px solid rgba(120, 170, 255, 0.35);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  color: #eaf2ff;
}

.ent-titre {
  margin: 0 0 6px;
  font: 800 clamp(22px, 3.4vh, 34px)/1.1 'Baloo 2', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ent-sous { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: #a9c2e8; }

.ent-label {
  margin: 16px 0 8px;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fa6dd;
}

.ent-choix { display: flex; flex-wrap: wrap; gap: 8px; }

.ent-pastille {
  padding: 9px 15px;
  font: 600 14px/1 system-ui, sans-serif;
  color: #cfe0fa;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(140, 180, 240, 0.3);
  border-radius: 999px;
  cursor: pointer;
}
.ent-pastille[aria-pressed="true"] {
  color: #06162f;
  background: #ffd257;
  border-color: #ffe9a8;
}

.ent-glissiere { width: 100%; margin-top: 4px; }

.ent-boutons { display: flex; gap: 10px; margin-top: 24px; }

.ent-bouton {
  flex: 1;
  padding: 13px 18px;
  font: 800 15px/1 'Baloo 2', system-ui, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #06162f;
  background: linear-gradient(180deg, #ffd257, #f0a92c);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.ent-bouton.fantome {
  color: #cfe0fa;
  background: transparent;
  border: 1.5px solid rgba(140, 180, 240, 0.4);
}
.ent-bouton.petit { flex: none; width: 100%; padding: 9px 14px; font-size: 13px; }

/* Le panneau de seance, pendant le jeu. */
#coach {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  width: min(300px, 42vw);
  padding: 12px;
  font: 13px/1.35 system-ui, sans-serif;
  color: #eaf2ff;
  background: rgba(6, 17, 40, 0.78);
  border: 1.5px solid rgba(120, 170, 255, 0.3);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

.coach-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coach-x {
  padding: 4px 10px;
  font: 700 11px/1 system-ui, sans-serif;
  color: #ffd257;
  background: transparent;
  border: 1px solid rgba(255, 210, 87, 0.5);
  border-radius: 999px;
  cursor: pointer;
}

.coach-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.coach-table td { padding: 3px 0; }
.coach-table td:last-child { text-align: right; color: #ffd257; font-weight: 700; }

.coach-avis {
  width: 100%;
  margin-top: 10px;
  padding: 7px 9px;
  font: 13px/1.35 system-ui, sans-serif;
  color: #eaf2ff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(140, 180, 240, 0.3);
  border-radius: 9px;
  resize: vertical;
}

.coach-echo { min-height: 15px; margin: 6px 0 0; font-size: 12px; color: #8fe3a8; }

/* ---- Ecran de duel : le lettrage et le fond ---- */

/* Les noms etaient des lettres fantomes derriere les personnages : on
   les lisait a peine. Ils passent devant, aux couleurs du camp, avec
   leur couronne — c'est le nom du combattant qui doit accrocher l'oeil,
   pas le decor. */
.fighter-name {
  bottom: 3%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  letter-spacing: -0.03em;
  transform: rotate(-3deg);
}
.fighter-side.p2 .fighter-name { transform: rotate(3deg); }

.fighter-name b {
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 8%, #8fd0ff 52%, #2f7fe0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #0a1c4e;
  paint-order: stroke fill;
  filter: drop-shadow(0 6px 0 #061441) drop-shadow(0 0 24px #4fb4ff);
}
.fighter-side.p2 .fighter-name b {
  background: linear-gradient(180deg, #ffffff 8%, #ffa8d8 52%, #e0357f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 6px 0 #4a0b28) drop-shadow(0 0 24px #ff5ca8);
}

/* La couronne, dessinee plutot qu'ecrite : un emoji change de tete d'un
   systeme a l'autre, et le jeu n'en veut pas. */
.couronne {
  display: block;
  width: clamp(26px, 3.2vw, 52px);
  height: clamp(18px, 2.2vw, 36px);
  background: linear-gradient(180deg, #fff3a8, #f2a51e);
  filter: drop-shadow(0 3px 0 #7a4600);
  clip-path: polygon(0% 100%, 12% 22%, 32% 60%, 50% 0%, 68% 60%, 88% 22%, 100% 100%);
}
.couronne.vs {
  width: clamp(30px, 3.6vw, 58px);
  margin-bottom: -6px;
}

.vs-core small {
  padding: 3px 12px;
  font: 900 clamp(9px, 1vw, 13px)/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #cfe4ff;
  background: rgba(7, 20, 61, 0.72);
  border: 1.5px solid rgba(140, 190, 255, 0.4);
  border-radius: 999px;
}

/* Le fond : une arene, pas un aplat.
   Mais le dialogue doit rester TRANSPARENT — c'est par lui qu'on voit
   les personnages en 3D, rendus dans le canvas derriere. Le decor est
   donc un voile pose par-dessus, qui n'ajoute que de la lumiere : halo
   de projecteurs en haut, faisceau qui tombe entre les deux combattants,
   et la trame verticale des gradins. */
#menu .dialog::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(120% 62% at 50% -6%, rgba(120, 200, 255, 0.34) 0%, transparent 62%),
    radial-gradient(42% 60% at 50% 34%, rgba(190, 230, 255, 0.20) 0%, transparent 72%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.030) 0 3px, transparent 3px 26px);
}

/* Les projecteurs du haut. */
#menu .dialog-head { position: relative; }
#menu .dialog-head::after {
  content: '';
  position: absolute;
  inset: -30% -10% auto;
  height: 240px;
  pointer-events: none;
  background:
    radial-gradient(38% 100% at 14% 0%, rgba(255, 255, 255, 0.20), transparent 70%),
    radial-gradient(38% 100% at 86% 0%, rgba(255, 255, 255, 0.20), transparent 70%);
}