:root {
  --ink: #f5f1e8;
  --muted: #aaa69c;
  --surface: rgba(23, 19, 14, 0.88);
  --line: rgba(216, 168, 78, 0.16);
  --gold: #d8a84e;
  --button-ink: #f8ecd4;
  --button-fill: linear-gradient(165deg, #a3814c, #5c4325);
  --button-border: #e2c48f5c;
  --camp-1: #46a6ff;
  --camp-2: #ff5a67;
  --card-ratio: 0.7159;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: radial-gradient(circle at 14% 8%, #2b3a52 0, transparent 38%),
              radial-gradient(circle at 92% 92%, #4a3820 0, transparent 42%),
              #080a10;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
button, input, select { font: inherit; }
button {
  border: 1px solid var(--button-border);
  border-radius: 8px;
  padding: .72rem 1rem;
  color: var(--button-ink);
  background: var(--button-fill);
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 24px #00000055;
  transition: filter .18s ease, box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
button:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 12px 30px #0007, 0 0 0 1px #d8a84e44; }
button:active:not(:disabled) { transform: translateY(1px); filter: brightness(.96); }
button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .55; }
button.secondary { color: var(--ink); background: transparent; border-color: var(--line); box-shadow: none; }
button.secondary:hover:not(:disabled) { border-color: #d8a84e77; background: #d8a84e12; box-shadow: none; }
.hidden { display: none !important; }
.shell { width: min(1180px, 94vw); margin: 0 auto; padding: 2rem 0 4rem; }
.eyebrow { color: var(--gold) !important; text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px #0007; backdrop-filter: blur(12px); }
.message { min-height: 1.5rem; text-align: center; color: #ffd282; }
.lobby-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; padding: 1.5rem; }
.form-card { display: grid; gap: 1rem; }
.form-card h2 {
  margin: 0 0 .5rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid #d8a84e3a;
  color: #cfae72;
  font: 700 .76rem "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
}
label { display: grid; gap: .4rem; color: var(--muted); }
label > span { text-transform: uppercase; font-size: .68rem; letter-spacing: .1em; color: #9a9384; }
input, select { width: 100%; padding: .72rem; color: var(--ink); background: #100d0a; border: 1px solid #d8a84e17; border-radius: 7px; transition: border-color .15s ease, box-shadow .15s ease; }
input:hover, select:hover { border-color: #d8a84e33; }
input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px #d8a84e26; }
select option:disabled { color: #777; background: #2b241a; }
.form-help { color: var(--muted); line-height: 1.4; }
.code-input { text-transform: uppercase; letter-spacing: .28em; font-weight: 800; }
.divider { position: relative; display: grid; place-items: center; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; }
.divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(#d8a84e00, #d8a84e33 20%, #d8a84e33 80%, #d8a84e00); }
.divider span { position: relative; z-index: 1; padding: .4rem; background: var(--surface); }
#join-form button[type="submit"] { color: var(--ink); background: transparent; border-color: var(--line); box-shadow: none; }
#join-form button[type="submit"]:hover:not(:disabled) { border-color: var(--gold); color: #ffe9b8; box-shadow: none; }
.welcome-panel { position: relative; width: min(460px, 94vw); margin: 2rem auto 0; padding: 2.6rem 1.6rem 1.6rem; animation: screen-fade-in .45s ease both; }
.welcome-panel h2 { margin: 0; font: 800 clamp(1.7rem, 5vw, 2.5rem) Georgia, serif; }
.welcome-panel p:not(.eyebrow) { margin-top: 0; color: var(--muted); line-height: 1.5; }
.settings-action { display: grid; gap: .5rem; }
.settings-action small { color: var(--muted); font-size: .74rem; line-height: 1.45; }
.settings-slider { display: grid; gap: .4rem; }
.settings-slider-row { display: flex; align-items: center; gap: .7rem; }
.settings-slider-row input[type="range"] { flex: 1; }
.settings-slider-row output { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  margin-left: .35em;
  border-radius: 50%;
  color: var(--gold);
  font-size: .85em;
  font-weight: 700;
  cursor: help;
}
.info-tooltip {
  position: absolute;
  z-index: 60;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  padding: .55rem .7rem;
  border-radius: 8px;
  border: 1px solid #d8a84e3d;
  background: #0d0b08f2;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.info-icon:hover .info-tooltip,
.info-icon:focus .info-tooltip,
.info-icon:focus-visible .info-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.game-list { position: relative; isolation: isolate; display: grid; gap: 1.25rem; }
/* Entrée de l'écran : le contenu glisse, le décor s'estompe seulement. Pas
   de transform sur .game-list elle-même : il ferait d'elle le bloc conteneur
   du décor fixe ci-dessous (saut visible en fin d'animation). */
.game-list > :not(.decor-layer-stack) { animation: screen-fade-in .45s ease both; }
/* Décor fixé à la taille de l'écran (et non de toute la liste) : sur
   téléphone la liste fait 2 à 3 écrans de haut, ce qui donnait un calque GPU
   géant et une image agrandie ×2 et floue. Le contenu défile par-dessus. */
#lobby-decor { position: fixed; z-index: -1; opacity: .55; animation: decor-fade-in .45s ease both; }
@keyframes decor-fade-in { from { opacity: 0; } }
.profile-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.profile-summary h2, .profile-summary p { margin: 0; }
.profile-avatar { display: grid; place-items: center; width: 58px; aspect-ratio: 1; border: 2px solid var(--gold); border-radius: 50%; background: #111722; font: 800 1.6rem Georgia, serif; }
.active-session { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-color: #d8a84e66; }
.active-session p { margin: 0 0 .25rem; }
.tutorial-entry { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 1.4rem; border-color: #d8a84e4a; background: linear-gradient(120deg, #241b10dd, #171410dd); }
.tutorial-entry h2, .tutorial-entry p { margin: .2rem 0; }
.tutorial-entry p:not(.eyebrow) { color: var(--muted); }
.history-panel { padding: 1.25rem; }
.public-games-panel { padding: 1.25rem; }
.public-games-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.public-games-heading p, .public-games-heading h2 { margin: 0; }
.public-games { display: grid; gap: .65rem; }
.public-game { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 9px; background: #100d0aaa; }
.public-game span, .public-games-empty { color: var(--muted); }
.history-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.history-heading p, .history-heading h2 { margin: 0; }
.history-heading span, .history-empty { color: var(--muted); }
.game-history { display: grid; gap: .65rem; }
.history-item { display: grid; grid-template-columns: minmax(90px, .7fr) 1.4fr .8fr 1fr auto; gap: .8rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 9px; background: #100d0aaa; }
.history-item.result-win { border-left-color: #5ed28a; }
.history-item.result-lose { border-left-color: #ff6974; }
.history-item.result-draw { border-left-color: var(--gold); }
.history-item.result-ongoing { border-left-color: #69a7ff; }
.history-item.result-abandoned { border-left-color: #9b8fa5; }
.history-item.result-unavailable { border-left-color: #6b6f7a; }
.history-item time { color: var(--muted); font-size: .85rem; text-align: right; }
.history-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.history-actions button { padding: .5rem .7rem; }
.game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.turn-status { color: var(--gold); font-weight: 700; text-align: center; }
.players { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.player { display: flex; justify-content: space-between; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: #11141c; }
.player.camp_1 { border-left: 5px solid var(--camp-1); }
.player.camp_2 { border-left: 5px solid var(--camp-2); }
.play-area { display: grid; grid-template-columns: minmax(300px, 1fr) 270px; gap: 1.5rem; align-items: start; }
.board { --columns: 4; display: grid; grid-template-columns: repeat(var(--columns), minmax(60px, 1fr)); gap: clamp(5px, 1vw, 10px); max-width: 650px; }
.cell, .card { position: relative; aspect-ratio: var(--card-ratio); border-radius: 8px; overflow: hidden; }
.cell { padding: 0; min-width: 0; background: #171a22; border: 1px dashed #ffffff35; color: var(--muted); }
.cell.playable:hover { border-color: var(--gold); box-shadow: 0 0 20px #d8a84e55; }
.cell.pending { border-color: var(--gold); animation: waiting-pulse .55s ease-in-out infinite alternate; }
.busy .cell, .busy .hand .card { pointer-events: none; }
.travel-source-hidden { visibility: hidden; }
.card-traveler {
  will-change: transform;
  box-shadow: 0 18px 44px #000c !important;
  transform-origin: center;
}
.card-travel--arc { filter: drop-shadow(0 12px 12px #0009); }
.card-travel--rocket { filter: drop-shadow(0 0 16px #f3ca75aa); }
.travel-landed-card { animation: card-impact-settle .12s ease-out; }
.cell.rocket-smoke-active { overflow: visible; z-index: 4; }
.rocket-smoke {
  position: absolute;
  z-index: 45;
  top: 50%;
  left: 50%;
  width: var(--rocket-smoke-container-size, 66%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.rocket-smoke__particle {
  position: absolute;
  width: var(--rocket-smoke-particle-size, 92%);
  height: var(--rocket-smoke-particle-size, 92%);
  object-fit: contain;
  will-change: opacity, transform;
  filter: drop-shadow(0 0 7px #dce2e2aa);
}
.rocket-smoke__placeholder {
  border-radius: 48%;
  background:
    radial-gradient(circle at 33% 38%, #f2f4f2dd 0 18%, transparent 20%),
    radial-gradient(circle at 62% 34%, #c9ceccdd 0 24%, transparent 26%),
    radial-gradient(circle at 52% 66%, #858d8bcc 0 30%, transparent 32%);
  filter: blur(1px) drop-shadow(0 0 7px #dce2e2aa);
}
.virus-shine {
  position: absolute;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.virus-shine__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.cell.card-flip--white-flash-active { overflow: visible; z-index: 3; }
.card-flip-white-flash {
  position: absolute;
  z-index: 50;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  will-change: opacity;
}
.card-flip-white-flash__cover {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
}
.card-flip-white-flash__glow {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: #fff;
  box-shadow:
    0 0 var(--card-flip-glow-size, 30px)
    var(--card-flip-glow-spread, 10px) rgba(255, 255, 255, .95);
  filter: brightness(1.8);
  will-change: opacity;
}
.card { width: clamp(64px, 9vw, 108px); flex: 0 0 auto; display: grid; place-items: center; border: 3px solid transparent; background: linear-gradient(150deg, #303846, #111722); color: white; font: 800 2rem Georgia, serif; box-shadow: 0 8px 22px #0008; transition: transform .15s, border-color .15s; }
button.card { padding: 0; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .card-visual-layer { z-index: 1; }
.card .value { position: relative; z-index: 8; padding: .16em .28em; border-radius: 6px; background: #000c; text-shadow: 0 2px 4px #000; }
.hard-lock-indicator {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle, #111b 0 22%, transparent 55%);
}
.card .hard-lock-custom-visual { position: relative; inset: auto; width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(0 4px 8px #000c); }
.hard-lock-symbol {
  position: relative;
  width: 38%;
  aspect-ratio: .82;
  margin-top: 12%;
  border: 2px solid #e1e4e8;
  border-radius: 18% 18% 22% 22%;
  background: linear-gradient(145deg, #c9cdd2, #626970 68%, #34393e);
  box-shadow: 0 4px 12px #000c, inset 0 1px 2px #fff8;
}
.hard-lock-symbol::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 72%;
  height: 72%;
  border: clamp(2px, .45vw, 5px) solid #b9bec4;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  box-shadow: 0 -2px 5px #0008, inset 0 2px 3px #fff4;
}
.hard-lock-symbol::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: 14%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50% 50% 30% 30%;
  background: #292d31;
  box-shadow: 0 8px 0 -1px #292d31;
}
.card.camp_1 { box-shadow: inset 0 0 0 4px var(--camp-1), 0 8px 22px #0008; }
.card.camp_2 { box-shadow: inset 0 0 0 4px var(--camp-2), 0 8px 22px #0008; }
.card.selected { transform: translateY(-10px); border-color: var(--gold); }
.cell .card { width: 100%; height: 100%; border-radius: inherit; }
/* Les cartes du plateau n'ont jamais d'effet de survol : sans transition, rien
   ne peut rejouer la fin d'un retournement sur WebKit (Safari / Chrome iPad). */
.cell > .card { transition: none; }
.hand { display: flex; gap: .7rem; overflow-x: auto; padding: 1rem .3rem 1.3rem; }
.rules { padding: 1rem 1.2rem; color: var(--muted); line-height: 1.5; }
.rules h2 { color: var(--ink); }
.hand-section { margin-top: 1.5rem; }
.hand-picker { padding: 1.2rem; margin-bottom: 1.5rem; }
.hand-picker h2 { margin-top: 0; }

/* Décors animables (title / lobby / game) : calques posés par Src/web/decor.js. */
.decor-layer-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  --pointer-x: 0;
  --pointer-y: 0;
}
/* Performance : la dérive lente ("respiration") anime la propriété
   `translate`, la parallaxe au pointeur la propriété `transform`. Les deux
   sont composées par le GPU sans jamais repeindre l'image. Ne JAMAIS animer
   `background-position` ici : cela repeignait le fond plein écran, et tout
   ce qui est dessiné par-dessus (panneaux, ombres, boutons), à chaque frame,
   même au repos — cause du lag de la Game List et de l'écran-titre. */
.decor-layer {
  position: absolute;
  inset: -8%;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(calc(var(--pointer-x, 0) * var(--decor-depth, 1) * -12px), calc(var(--pointer-y, 0) * var(--decor-depth, 1) * -8px), 0);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
  /* La dérive ne parcourt qu'environ 2 px par seconde : la recalculer 60 fois
     par seconde (0,03 px par image, invisible) obligeait le navigateur à
     recomposer tout l'écran en permanence — très coûteux dans Firefox, et
     partout en rendu logiciel. steps(66) par demi-cycle ≈ 5 à 6 paliers de
     0,3 px par seconde : même mouvement à l'œil, images inchangées sautées. */
  animation: decor-breathe calc(18s + var(--decor-depth, 1) * 4s) steps(66) infinite;
  will-change: transform, translate;
  backface-visibility: hidden;
}
@keyframes decor-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: -1% .5%; }
}
/* Firefox : fond fixe, sans dérive ni parallaxe (voir prefersStaticDecor
   dans decor.js — sans accélération matérielle, chaque déplacement du fond
   y redessine tout l'écran par le processeur). */
.decor-layer-stack.decor-static > .decor-layer {
  animation: none;
  transform: none;
  transition: none;
  will-change: auto;
}
/* Calque "FishEye" : étiré pour toucher exactement les quatre bords de
   l'écran (pas de rognage), donc ni parallaxe ni dérive qui révélerait un
   bord vide. */
.decor-layer--stretch {
  inset: 0;
  background-size: 100% 100%;
  transform: none;
  translate: none;
  transition: none;
  animation: none;
  will-change: auto;
}

@keyframes screen-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.icon-back {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color .2s ease, transform .2s ease;
}
.icon-back:hover, .icon-back:focus-visible { border-color: var(--gold); transform: translateX(-2px); }
.welcome-panel .icon-back { position: absolute; top: 1.1rem; left: 1.1rem; }
.screen-topbar { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; margin-bottom: .25rem; }
.screen-topbar-title { margin: 0; color: #cfae72; font: 700 .78rem "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .22em; }

/* Écran-titre : entrée principale, inspirée des références jour/nuit du projet. */
.title-screen {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 32%, #cbb692 0%, transparent 30%),
    radial-gradient(circle at 76% 28%, #1c2c46 0%, transparent 40%),
    linear-gradient(90deg, #b9a488 0%, #465065 46%, #101828 62%, #070a10 100%);
}
.title-screen::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: auto 0 0 0;
  height: 48%;
  background:
    radial-gradient(130% 100% at 18% 122%, #47402f 0 40%, transparent 41%),
    radial-gradient(150% 100% at 82% 132%, #0d1420 0 42%, transparent 43%);
  opacity: .92;
}
.title-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* Pas de mix-blend-mode: screen : pour un tracé blanc pur, "screen" donne
     exactement le même résultat que le mélange normal, sans le coût d'un
     calque de fusion plein écran (sensible sur iPad/iPhone). */
  background: repeating-radial-gradient(circle at 50% 40%, transparent 0 6.2%, #ffffff0c 6.3% 6.4%);
  opacity: .5;
  animation: rings-breathe 9s ease-in-out infinite;
}
/* Fonds de secours entièrement recouverts par un décor personnalisé opaque :
   inutile de continuer à les animer / flouter sous l'image. */
.title-screen:has(> .decor-layer-stack.decor-active)::after,
.game-stage:has(> .decor-layer-stack.decor-active) > .scene-glow {
  display: none;
}
@keyframes rings-breathe {
  0%, 100% { opacity: .38; }
  50% { opacity: .6; }
}
.title-frame {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: clamp(1.4rem, 4vw, 3rem);
}
.title-wordmark {
  margin: 0;
  font: 800 clamp(1.5rem, 2.6vw, 2rem)/1 Georgia, serif;
  letter-spacing: .5em;
  text-indent: .5em;
  text-shadow: 0 3px 10px #000a;
}
.title-nav { display: grid; align-content: center; justify-items: start; gap: .9rem; margin-top: -6dvh; }
.title-nav-item {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .55rem;
  position: relative;
  padding: .15rem 0 .15rem 1.4rem;
  color: #d8d3c4cc;
  font: 600 clamp(.85rem, 1.4vw, 1.05rem) "Segoe UI", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px #000a;
  transition: color .2s ease, transform .2s ease;
}
.title-nav-item::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: .3em;
  font-size: .5em;
  color: var(--gold);
  opacity: 0;
  transition: opacity .2s ease;
}
.title-nav-item:not(:disabled):hover,
.title-nav-item:not(:disabled):focus-visible { color: var(--ink); transform: translateX(4px); }
.title-nav-item:not(:disabled):hover::before,
.title-nav-item:not(:disabled):focus-visible::before { opacity: 1; }
.title-nav-item--primary { color: var(--ink); }
.title-nav-item--primary::before { opacity: 1; }
/* "Jouer" garde son losange visible par défaut (item principal), mais pas
   en même temps que celui d'un autre item survolé/focus — sinon les deux
   restent visibles simultanément. */
.title-nav:has(.title-nav-item:not(.title-nav-item--primary):hover) .title-nav-item--primary::before,
.title-nav:has(.title-nav-item:not(.title-nav-item--primary):focus-visible) .title-nav-item--primary::before {
  opacity: 0;
}
.title-nav-item:disabled { cursor: default; color: #ffffff3d; }
.title-soon {
  padding: .12rem .42rem;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  color: #ffffff70;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.title-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 6.4rem;
  transform: translateX(-50%);
  margin: 0;
  padding: .45rem .95rem;
  border-radius: 999px;
  background: #080b10cc;
  color: var(--gold);
  font-size: .78rem;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.title-hint.visible { opacity: 1; }
.title-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.title-profile { display: flex; align-items: center; gap: .7rem; padding: .5rem .9rem .5rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: #00000030; backdrop-filter: blur(6px); }
.title-profile-avatar { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border: 1px solid var(--gold); border-radius: 50%; background: #111722; font: 700 1.05rem Georgia, serif; }
.title-profile strong { display: block; font-size: .85rem; }
.title-profile span { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .72rem; }
.title-profile span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6adf9b; box-shadow: 0 0 6px #6adf9baa; }
.title-tagline { max-width: 38ch; margin: 0 0 .3rem; color: #d9d3c2b3; font-size: .82rem; text-align: right; line-height: 1.5; text-shadow: 0 2px 6px #000a; }

@media (max-width: 760px) {
  .title-frame { padding: 1.15rem; }
  .title-nav { margin-top: 0; gap: .7rem; }
  .title-footer { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .title-tagline { max-width: none; text-align: left; }
  .title-hint { bottom: auto; top: .8rem; }
}

@keyframes waiting-pulse {
  to { box-shadow: 0 0 28px #d8a84e99; transform: scale(.98); }
}

@keyframes card-impact-settle {
  from { filter: brightness(1.4); }
  to { filter: brightness(1); }
}

@media (max-width: 760px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .divider { display: block; text-align: center; }
  .play-area { grid-template-columns: 1fr; }
  .rules { order: 2; }
  .game-toolbar { align-items: stretch; flex-direction: column; text-align: center; }
  .players { grid-template-columns: 1fr; }
  .shell { width: min(96vw, 650px); padding-top: 1rem; }
  .profile-summary { grid-template-columns: auto 1fr; }
  .profile-summary button { grid-column: 1 / -1; }
  .active-session { align-items: stretch; flex-direction: column; }
  .history-item { grid-template-columns: 1fr 1fr; }
  .history-item time { text-align: left; }
  .history-actions { justify-content: flex-start; }
  .public-game { grid-template-columns: 1fr; }
}

/* Écran de partie immersif, inspiré des références 16:9 du projet. */
body.playing { overflow: hidden; background: #080b10; }
body.playing .shell { width: 100%; margin: 0; padding: 0; }
/* Le tutoriel réutilise le verrouillage de scroll de body.playing, mais son
   contenu (barre de leçons + plateau + carte) peut dépasser 100dvh sur les
   écrans bas : sans ce réactivation du scroll vertical, le bouton "Suivant"
   et les autres actions de fin de leçon deviennent inaccessibles. */
body.tutorial-mode { overflow-y: auto; }
body.on-title { overflow: hidden; }
body.on-title .shell { width: 100%; max-width: none; margin: 0; padding: 0; }
body.playing #message {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  margin: 0;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: #0d0b08d9;
  pointer-events: none;
}
body.playing #message:empty { display: none; }

.game-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 460px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(8, 12, 18, .08) 0 42%, rgba(8, 12, 18, .5) 72%, rgba(8, 12, 18, .8)),
    radial-gradient(circle at 28% 38%, #7898a455 0 14%, transparent 43%),
    linear-gradient(145deg, #334956 0%, #18272f 45%, #0a1118 100%);
}
.game-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .48;
  background:
    repeating-linear-gradient(90deg, transparent 0 12vw, #ffffff08 12.1vw 12.25vw),
    linear-gradient(175deg, transparent 0 59%, #0d1920 59.3% 100%);
}
/* Au-dessus du dégradé/rayures de secours (::before, z-index -2) et du
   halo de secours (.scene-glow, z-index -1) : un décor personnalisé doit
   les recouvrir entièrement, pas rester caché derrière eux. Reste sous
   #camera-layer (plateau, main, sièges) qui n'a pas de z-index propre. */
.game-stage #game-decor { z-index: -1; }
.scene-glow {
  position: absolute;
  z-index: -1;
  left: -10vw;
  bottom: -24vh;
  width: 72vw;
  height: 68vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, #f4f1eacc 0, #dce5e576 28%, transparent 67%);
  filter: blur(18px);
}

.camera-layer {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: auto;
}

.menu-trigger {
  position: absolute;
  z-index: 40;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  width: 46px;
  height: 42px;
  padding: 0 0 7px;
  border-color: #d8a84e3d;
  border-radius: 50%;
  color: var(--ink);
  background: #0d0b08a8;
  letter-spacing: .12em;
}
.review-rules-trigger {
  position: absolute;
  z-index: 40;
  top: max(1rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: .62rem .9rem;
  border-color: #d8a84e3d;
  border-radius: 999px;
  color: #f3e6c8;
  background: #0d0b08b8;
  backdrop-filter: blur(8px);
  animation: review-rules-glow 3.4s ease-in-out infinite;
  transition: border-color .1s ease, background .1s ease;
}
/* Ce bouton est centré via `transform: translateX(-50%)` : le survol ne doit
   jamais remplacer ce transform (la règle générique des <button> le fait
   via translateY), sinon le bouton perd son centrage et "saute" hors du
   curseur dès qu'on le survole. */
.review-rules-trigger:hover:not(:disabled),
.review-rules-trigger:focus-visible {
  border-color: #d8a84e88;
  background: #16130db8;
}
.fullscreen-trigger {
  position: absolute;
  z-index: 40;
  top: max(1rem, env(safe-area-inset-top));
  right: calc(max(1rem, env(safe-area-inset-right)) + 54px);
  width: 46px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-color: #d8a84e3d;
  border-radius: 50%;
  color: var(--ink);
  background: #0d0b08a8;
  font-size: 1.15rem;
  letter-spacing: normal;
  transition: border-color .1s ease, background .1s ease;
}
.fullscreen-trigger:hover:not(:disabled),
.fullscreen-trigger:focus-visible {
  border-color: #d8a84e88;
  background: #16130db8;
}
@keyframes review-rules-glow {
  0%, 100% { border-color: #d8a84e3d; box-shadow: 0 0 0 0 #d8a84e00; }
  50% { border-color: #d8a84e88; box-shadow: 0 0 16px 1px #d8a84e4a; }
}
.game-menu {
  position: absolute;
  z-index: 45;
  top: calc(max(1rem, env(safe-area-inset-top)) + 50px);
  right: max(1rem, env(safe-area-inset-right));
  display: grid;
  min-width: 190px;
  padding: .45rem;
  border: 1px solid #d8a84e2e;
  border-radius: 12px;
  background: #0d0b08f2;
  box-shadow: 0 18px 50px #000b;
}
.game-menu button { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); background: transparent; border: 0; box-shadow: none; text-align: left; }
.game-menu button:hover:not(:disabled) { background: #d8a84e14; }
.game-menu button:disabled { color: #777; }
.game-menu small { color: var(--gold); }
.game-menu .danger { color: #ff8c93; }

.replay-controls {
  position: absolute;
  z-index: 95;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(680px, 86vw);
  padding: .65rem .85rem .8rem;
  border: 1px solid #d8a84e66;
  border-radius: 14px;
  background: #0d0b08eb;
  box-shadow: 0 18px 55px #000c;
  backdrop-filter: blur(12px);
}
.replay-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; color: #fff3cf; font-size: .82rem; }
.replay-close { padding: .28rem .55rem; color: var(--muted); border-color: #d8a84e2e; background: transparent; box-shadow: none; font-size: .74rem; }
.replay-controls input[type="range"] { width: 100%; padding: 0; accent-color: var(--gold); }
.replay-buttons { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-top: .45rem; }
.replay-buttons button { min-width: 0; padding: .48rem .3rem; color: var(--ink); border-color: #d8a84e2b; background: #171410; font-family: Consolas, monospace; box-shadow: none; }
.replay-buttons button:hover:not(:disabled), .replay-buttons button.active { color: var(--button-ink); background: var(--button-fill); border-color: #e2c48f5c; }
body.replay-mode .hand-section { opacity: .58; }
body.replay-mode .game-over { display: none !important; }

.turn-status {
  position: absolute;
  z-index: 20;
  top: calc(max(1rem, env(safe-area-inset-top)) + 46px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 52vw;
  padding: .55rem 1.1rem;
  border: 1px solid #d8a84e2e;
  border-radius: 999px;
  color: #f3e6c8;
  background: #0d0b08b8;
  font-size: clamp(.72rem, 1.4vw, 1rem);
  white-space: nowrap;
}
.join-badge {
  position: absolute;
  z-index: 21;
  top: calc(max(1rem, env(safe-area-inset-top)) + 90px);
  left: 50%;
  transform: translateX(-50%);
  padding: .45rem .8rem;
  border: 1px solid #d8a84e55;
  border-radius: 999px;
  background: #0d0b08c4;
  color: var(--gold);
  font-size: .8rem;
}
.join-badge strong { letter-spacing: .2em; }

.asset-preloader {
  position: absolute;
  z-index: 110;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  color: var(--ink);
  background: #0d0b08ed;
  text-align: center;
}
.asset-preloader progress { width: min(420px, 72vw); height: 14px; accent-color: var(--gold); }
.asset-preloader span { color: var(--muted); }

.player-seat { position: absolute; z-index: 5; pointer-events: none; }
.opponent-seat { top: 5%; left: 7%; width: min(24vw, 300px); }
.local-seat { left: 2%; bottom: -4%; width: min(32vw, 420px); }
.avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 48% 48% 42% 42%;
  border: 1px solid #ffffff1f;
  color: #fff;
  background:
    radial-gradient(circle at 50% 29%, #d6a377 0 14%, transparent 14.5%),
    radial-gradient(ellipse at 50% 72%, #372d43 0 36%, transparent 36.5%),
    linear-gradient(145deg, #526a73, #16232b);
  box-shadow: inset 0 -50px 90px #0009, 0 25px 60px #0008;
}
.avatar::after { content: ""; position: absolute; inset: auto 10% 0; height: 42%; border-radius: 50% 50% 0 0; background: #3d3148; }
.avatar span { position: relative; z-index: 2; margin-top: -22%; font: 800 clamp(1.3rem, 4vw, 3.3rem) Georgia, serif; text-shadow: 0 3px 8px #000; }
.avatar.has-image { background-size: cover; background-position: center; }
.avatar.has-image::after { display: none; }
.avatar.has-image span { display: none; }
.avatar-opponent { filter: saturate(.8) brightness(.76); }
.player-identity {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  display: grid;
  min-width: max-content;
  padding: .35rem .75rem;
  border-radius: 8px;
  background: #0d0b08d9;
  text-align: center;
  font-size: clamp(.65rem, 1.2vw, .9rem);
}
.player-identity span { color: var(--muted); }

.board-zone {
  position: absolute;
  z-index: 10;
  /* Une hauteur disponible garantie (plutôt qu'un pourcentage de l'écran)
     évite tout chevauchement avec le bandeau centré au-dessus, quelle que
     soit la taille de l'écran, tout en laissant un peu d'air en bas. */
  top: 8.6rem;
  bottom: 1.4rem;
  right: clamp(1rem, 5vw, 5rem);
  display: flex;
  align-items: center;
}
.game-stage .board {
  height: 100%;
  width: auto;
  aspect-ratio: var(--card-ratio);
  max-width: min(46vw, 720px);
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: clamp(4px, .7vw, 9px);
  padding: clamp(6px, 1vw, 12px);
  border: 1px solid #d7bb8055;
  border-radius: 10px;
  background: linear-gradient(145deg, #aa754fbb, #5b3b2fdd), repeating-linear-gradient(25deg, #ffffff0a 0 2px, transparent 2px 8px);
  box-shadow: 0 22px 60px #000a, inset 0 0 40px #0006;
}
.game-stage .cell { background: #120e0d91; border-color: #f5d9a342; }

.board-coord {
  position: absolute;
  z-index: 9;
  display: grid;
  pointer-events: none;
  color: var(--ink);
  opacity: var(--board-coord-opacity, .32);
  font: 700 .72rem Georgia, serif;
  letter-spacing: .04em;
  text-shadow: 0 1px 3px #000a;
}
.board-coord span { display: grid; place-items: center; }
.board-coord--cols {
  grid-template-columns: repeat(var(--coord-count, 4), 1fr);
  top: -1.5rem;
  left: 0;
  right: 0;
  height: 1.2rem;
}
.board-coord--rows {
  grid-template-rows: repeat(var(--coord-count, 4), 1fr);
  top: 0;
  bottom: 0;
  left: -1.4rem;
  width: 1.2rem;
}

.hand-section {
  position: absolute;
  z-index: 30;
  left: 9%;
  bottom: -2%;
  width: 52vw;
  height: 30vh;
  margin: 0;
  pointer-events: none;
}
.game-stage .hand { position: relative; width: 100%; height: 100%; overflow: visible; padding: 0; }
.game-stage #hand .card {
  position: absolute;
  left: 50%;
  bottom: -9%;
  width: clamp(62px, 8vw, 112px);
  z-index: calc(20 + var(--fan-order, 0));
  pointer-events: auto;
  transform-origin: 50% 115%;
  transform: translateX(calc(-50% + var(--fan-x, 0px))) rotate(var(--fan-angle, 0deg));
  transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}
.game-stage #hand .card:hover:not(.suppress-hover),
.game-stage #hand .card:focus-visible,
.game-stage #hand .card.selected {
  z-index: 90;
  transform: translateX(calc(-50% + var(--fan-x, 0px))) translateY(-34%) rotate(0deg) scale(1.08);
  filter: brightness(1.08);
  border-color: var(--gold);
}

.hand-picker {
  position: absolute;
  z-index: 32;
  inset: 0;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #0d0b084d, #0d0b08b8 58%, #0d0b08f2);
}
.setup-heading { position: absolute; z-index: 2; top: 12%; left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 3px 8px #000; }
.setup-heading h2 { margin: 0; font: 800 clamp(1.5rem, 4vw, 3rem) Georgia, serif; }
.hand-picker .selection-pool {
  position: absolute;
  left: 8%;
  bottom: 4%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  align-content: end;
  gap: clamp(7px, 1vw, 13px);
  width: 84%;
  height: 53%;
  overflow-y: auto;
  padding: .8rem;
}
.hand-picker .selection-pool .card {
  position: relative;
  inset: auto;
  top: 0;
  width: min(100%, 92px);
  justify-self: center;
  transform: none;
  transform-origin: center;
  transition: top .14s ease, border-color .14s ease, filter .14s ease;
}
.hand-picker .selection-pool .card:hover,
.hand-picker .selection-pool .card:focus-visible { top: -7px; transform: none; }
.hand-picker .selection-pool .card.selected { top: -7px; transform: none; border-color: var(--gold); filter: brightness(1.1); }
.setup-actions { position: absolute; z-index: 100; top: 24%; left: 50%; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: center; gap: .7rem; width: min(760px, 92vw); transform: translateX(-50%); }
.setup-actions button { white-space: nowrap; }
/* Compteur sous les boutons, bien lisible : il occupe l'espace libre. */
.setup-actions .selection-count {
  grid-column: 1 / -1;
  /* Ne jamais élargir la grille : les boutons gardent leur largeur. */
  width: 0;
  min-width: 100%;
  margin: .9rem 0 0;
  color: #f3e6c8;
  font: 700 clamp(1.05rem, 1.9vw, 1.55rem) Georgia, serif;
  text-align: center;
  text-shadow: 0 3px 8px #000;
}
.setup-actions .selection-count.ready { color: #8fd0ff; }
.setup-actions .selection-ready { display: block; margin-top: .3rem; }
/* Écrans peu hauts (téléphone en paysage) : pas de place sous les boutons,
   le compteur passe à leur droite au lieu de chevaucher les cartes. */
@media (max-height: 520px) {
  .setup-actions { grid-template-columns: repeat(2, minmax(0, auto)) minmax(0, 13rem); }
  .setup-actions .selection-count {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    width: auto;
    min-width: 0;
    margin: 0;
    font-size: .95rem;
    text-align: left;
  }
}
/* "Valider ma main" en bleu (camp du joueur) : l'action principale se
   distingue des boutons de sélection dorés. L'ID passe devant la longue
   règle :not() de l'habillage Parallaxe. */
.setup-actions #validate-hand:not(:disabled) {
  color: #f2f8ff;
  background: linear-gradient(165deg, #4fa3f0, #1f5596);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(10, 40, 80, .5);
  filter: drop-shadow(6px 6px 0 rgba(70, 166, 255, .25));
}
.setup-actions #validate-hand:hover:not(:disabled) {
  color: #fff;
  filter: drop-shadow(6px 6px 0 rgba(70, 166, 255, .34)) drop-shadow(0 0 15px rgba(70, 166, 255, .22)) brightness(1.08);
}

.game-over {
  position: absolute;
  z-index: 38;
  top: 50%;
  left: 50%;
  width: min(640px, 88vw);
  max-height: 90dvh;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: clamp(1.2rem, 3vw, 2rem);
  border-color: #d8a84e88;
  background: #0d0b08f2;
  text-align: center;
}
.game-over h2 { margin: .2rem 0; font: 800 clamp(2rem, 6vw, 3.5rem) Georgia, serif; }
.game-over p { color: #fff3cf; }
.game-over-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.3rem 0 .8rem; }
.game-over-actions button { min-width: 0; }
.game-over small { color: var(--muted); line-height: 1.4; }

.rotate-device { display: none; }

/* Tutoriel : écran et état indépendants des parties multijoueur. */
.tutorial { min-height: 100dvh; color: var(--ink); background: radial-gradient(circle at 72% 22%, #3a2c16 0, transparent 38%), radial-gradient(circle at 12% 85%, #232c40 0, transparent 40%), #080a10; }
.tutorial-stage { min-height: 100dvh; padding: clamp(.8rem, 2vw, 1.5rem); }
.tutorial-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1280px; margin: 0 auto 1rem; }
.tutorial-toolbar h1 { margin: 0; font: 800 clamp(1.8rem, 4vw, 3rem) Georgia, serif; }
.tutorial-toolbar p { margin: 0 0 .15rem; }
.tutorial-layout { display: grid; grid-template-columns: minmax(190px, 250px) 1fr; gap: 1rem; max-width: 1280px; margin: 0 auto; }
.tutorial-lessons { display: grid; align-content: start; gap: .55rem; }
.tutorial-lesson-button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; padding: .8rem; color: var(--ink); border-color: #d8a84e26; background: #14110dcc; box-shadow: none; text-align: left; }
.tutorial-lesson-button span { color: var(--gold); font: 700 .75rem Consolas, monospace; }
.tutorial-lesson-button.active { border-color: var(--gold); background: #2b2418; }
.tutorial-game { position: relative; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(250px, .7fr); grid-template-areas: "board guide" "board hand" "board actions"; gap: 1rem 1.4rem; min-height: 74dvh; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid #d8a84e20; border-radius: 18px; background: #14110ddd; box-shadow: 0 24px 70px #0008; }
.tutorial-guide { grid-area: guide; align-self: start; padding: 1.1rem 1.2rem; }
.tutorial-guide h2 { margin: .15rem 0 .45rem; font: 800 clamp(1.5rem, 3vw, 2.3rem) Georgia, serif; }
.tutorial-guide p:not(.eyebrow) { color: var(--muted); line-height: 1.45; }
.tutorial-guide strong { display: block; color: #fff2cc; line-height: 1.45; }
.tutorial-guide strong p { margin: 0 0 .8em; }
.tutorial-guide strong p:last-child { margin-bottom: 0; }
.tutorial-highlight { color: #ffce6b; font-weight: 800; text-shadow: 0 0 10px rgba(255, 206, 107, .35); }
/* Sélecteur à deux classes : doit rester plus spécifique que les overrides
   de largeur de .tutorial-game dans les media queries mobiles ci-dessous,
   quel que soit leur ordre dans la cascade. */
.tutorial-game.tutorial-game--text-only { grid-template-columns: 1fr; grid-template-areas: "guide" "actions"; }
.tutorial-game.tutorial-game--text-only .tutorial-guide { max-width: 720px; margin: 0 auto; align-self: center; }
.tutorial-feedback { min-height: 1.4rem; margin-bottom: 0 !important; color: #7fe1a7 !important; font-weight: 700; }
.tutorial-feedback.error { color: #ff8992 !important; }
.tutorial-board { grid-area: board; align-self: center; display: grid; grid-template-columns: repeat(4, minmax(48px, 1fr)); gap: clamp(5px, .8vw, 9px); width: min(48vw, 580px); padding: clamp(7px, 1vw, 12px); border: 1px solid #d7bb8055; border-radius: 12px; background: linear-gradient(145deg, #9a6848, #52352b); box-shadow: 0 22px 60px #000b, inset 0 0 40px #0007; }
.tutorial-cell { position: relative; min-width: 0; padding: 0; aspect-ratio: var(--card-ratio); overflow: hidden; border: 1px dashed #f5d9a342; border-radius: 8px; background: #120e0d91; }
.tutorial-cell.available:hover { border-color: var(--gold); box-shadow: 0 0 20px #d8a84e77; }
.tutorial-cell.tutorial-playable-hint { border-color: #c9fff2aa; }
.tutorial-hint-anchor { position: absolute; z-index: 24; inset: 0; display: block; overflow: hidden; border-radius: inherit; pointer-events: none; }
.tutorial-hint-anchor .virus-shine { z-index: 25; }
.tutorial-hint-anchor .virus-shine__frame { width: 100%; height: 100%; object-fit: fill; }
.tutorial-cell.tutorial-direct-target { box-shadow: 0 0 20px #f1c45d; }
.tutorial-cell.tutorial-chain-target { box-shadow: 0 0 24px #7de4d6; }
.tutorial-card { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 3px solid transparent; border-radius: inherit; color: white; background: linear-gradient(150deg, #303846, #111722); box-shadow: 0 8px 22px #0008; }
button.tutorial-card { width: clamp(74px, 8vw, 105px); aspect-ratio: var(--card-ratio); height: auto; padding: 0; }
.tutorial-card-visual-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.tutorial-card span { position: relative; z-index: 8; padding: .12em .27em; border-radius: 6px; background: #000b; font: 800 clamp(1.5rem, 4vw, 2.4rem) Georgia, serif; }
.tutorial-card.camp_1 { box-shadow: inset 0 0 0 4px var(--camp-1), 0 8px 22px #0008; }
.tutorial-card.camp_2 { box-shadow: inset 0 0 0 4px var(--camp-2), 0 8px 22px #0008; }
.tutorial-card.selected { transform: translateY(-10px); border-color: var(--gold); }
.tutorial-card-impact { animation: tutorial-impact .26s ease-out; }
/* z-index 6, sous le numéro de carte (.tutorial-card span, z-index 8) : même
   ordre que .hard-lock-indicator dans le vrai jeu, pour que le numéro reste
   visible au-dessus du verrou et qu'on comprenne quelle carte est bloquée. */
.tutorial-lock { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; pointer-events: none; background: #1117; font-size: clamp(1.4rem, 3vw, 2.5rem); }
.tutorial-hand-zone { grid-area: hand; align-self: center; display: grid; justify-items: center; gap: .65rem; color: var(--muted); }
.tutorial-hand { min-height: 130px; display: flex; align-items: center; justify-content: center; }
.tutorial-actions { grid-area: actions; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.tutorial-actions #tutorial-quick-play,
.tutorial-actions #tutorial-quick-play-second,
.tutorial-actions #tutorial-beginner-trial { grid-column: 1 / -1; }
.tutorial.busy button { pointer-events: none; }
.tutorial .virus-shine { z-index: 30; }
@keyframes tutorial-impact { 0% { transform: translateY(-22px) scale(1.08); filter: brightness(1.8); } 70% { transform: translateY(3px) scale(.98); } 100% { transform: none; filter: none; } }

/* Responsive du tutoriel. Le plateau se dimensionne d'après SA colonne et la
   hauteur d'écran disponible (jamais d'après la largeur de la fenêtre) :
   il ne peut plus déborder sous le panneau de la leçon. Rapport hauteur /
   largeur du plateau ≈ 1 / 0.70 (4 × 4 cartes au ratio 0.7159). */
.tutorial-game {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  --tutorial-chrome: 10rem; /* titre + marges, hors plateau */
}
.tutorial-board {
  justify-self: center;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  max-width: max(260px, min(580px, calc((100dvh - var(--tutorial-chrome)) * .7)));
}
.tutorial-guide { min-width: 0; }

/* Écrans moyens et tablettes en portrait (iPad 1024 px compris) : la colonne
   des leçons passe en bandeau au-dessus pour laisser au plateau et au
   panneau la place d'être côte à côte, sans grand vide sous le plateau. */
@media (max-width: 1000px), (orientation: portrait) and (max-width: 1400px) {
  .tutorial-layout { grid-template-columns: 1fr; }
  .tutorial-lessons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tutorial-lesson-button { grid-template-columns: auto 1fr; padding: .6rem .7rem; }
  .tutorial-game { min-height: auto; gap: 1rem; --tutorial-chrome: 17rem; }
}

/* Téléphones : tout s'empile — consigne, plateau, carte, boutons — et les
   leçons défilent horizontalement sur une seule ligne. */
@media (max-width: 720px) {
  .tutorial-lessons {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto;
    padding-bottom: .3rem;
    scroll-snap-type: x proximity;
  }
  .tutorial-lesson-button { scroll-snap-align: start; }
  .tutorial-game {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "guide" "board" "hand" "actions";
    padding: .8rem;
  }
  .tutorial-board { max-width: min(100%, 460px); }
  .tutorial-hand { min-height: 0; }
}

/* Téléphone en paysage (peu de hauteur) : titre compact et leçons sur une
   seule ligne défilante, pour que le plateau reste visible sans défiler. */
@media (max-height: 540px) and (orientation: landscape) {
  .tutorial-stage { padding: .5rem .8rem; }
  .tutorial-toolbar { margin-bottom: .5rem; }
  .tutorial-toolbar h1 { font-size: 1.4rem; }
  .tutorial-toolbar .eyebrow { display: none; }
  .tutorial-lessons {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding-bottom: .2rem;
  }
  .tutorial-lesson-button { padding: .4rem .6rem; font-size: .8rem; }
  .tutorial-game { padding: .7rem; --tutorial-chrome: 9.5rem; }
  .tutorial-board { align-self: start; max-width: max(170px, min(580px, calc((100dvh - var(--tutorial-chrome)) * .7))); }
  .tutorial-guide { max-height: calc(100dvh - var(--tutorial-chrome)); overflow-y: auto; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .game-stage { min-height: 0; }
  .opponent-seat { top: 3%; width: min(20vw, 190px); }
  .local-seat { width: min(27vw, 250px); }
  .hand-section { height: 28vh; bottom: -1%; }
  .game-stage #hand .card { width: clamp(52px, 7.4vw, 82px); }
  .turn-status { top: .5rem; }
  .join-badge { top: 3.1rem; }
  .board-zone { top: 3rem; bottom: .6rem; }
  .menu-trigger { top: .5rem; right: .6rem; }
  .review-rules-trigger { top: .5rem; left: .6rem; transform: none; padding: .48rem .7rem; font-size: .75rem; }
  .fullscreen-trigger { top: .5rem; right: calc(.6rem + 54px); }
  .game-menu { top: 3.5rem; right: .6rem; }
}

/* Plateau en portrait (téléphone et tablette) : le plateau reste la priorité
   visuelle — aussi grand que possible —, les sièges se réduisent en badges et
   la main devient une bande basse. Le déclencheur est l'orientation seule
   (pas une largeur maximale) pour couvrir aussi les iPad en portrait. */
@media (orientation: portrait) {
  .opponent-seat {
    top: max(.5rem, env(safe-area-inset-top));
    left: max(.5rem, env(safe-area-inset-left));
    width: min(22vw, 92px);
  }
  .local-seat {
    left: auto;
    right: max(.5rem, env(safe-area-inset-right));
    bottom: auto;
    top: max(.5rem, env(safe-area-inset-top));
    width: min(22vw, 92px);
  }
  .opponent-seat .player-identity,
  .local-seat .player-identity {
    position: static;
    transform: none;
    margin: .3rem auto 0;
    padding: .2rem .5rem;
    font-size: .62rem;
    white-space: nowrap;
  }
  .board-zone {
    top: auto;
    right: auto;
    bottom: calc(19dvh + .4rem);
    left: 50%;
    transform: translateX(-50%);
  }
  .game-stage .board {
    width: min(93vw, calc(73dvh * var(--card-ratio)));
    height: auto;
    max-width: none;
  }
  .board-coord { font-size: .6rem; }
  .board-coord--cols { top: -1.15rem; height: .95rem; }
  .board-coord--rows { left: -1.05rem; width: .95rem; }
  .hand-section {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 19dvh;
    display: flex;
    justify-content: center;
  }
  .game-stage #hand .card { width: clamp(56px, 16vw, 112px); bottom: 8%; }
  .turn-status {
    top: calc(max(.5rem, env(safe-area-inset-top)) + 44px);
    max-width: 68vw;
    padding: .35rem .75rem;
    font-size: .68rem;
    white-space: normal;
    text-align: center;
  }
  .join-badge { top: calc(max(.5rem, env(safe-area-inset-top)) + 80px); }
  .menu-trigger { top: max(.5rem, env(safe-area-inset-top)); }
  .review-rules-trigger { top: max(.5rem, env(safe-area-inset-top)); padding: .5rem .75rem; font-size: .72rem; }
  .fullscreen-trigger { top: max(.5rem, env(safe-area-inset-top)); }
  .game-menu { top: calc(max(.5rem, env(safe-area-inset-top)) + 44px); }
}

/* Écrans vraiment trop courts pour tenir le plateau et la main : dernier recours. */
@media (orientation: portrait) and (max-height: 380px) {
  body.playing .rotate-device {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 2rem;
    color: white;
    background: #080b10f5;
    text-align: center;
  }
  .rotate-device span { color: var(--muted); }
  .phone-icon { display: grid; place-items: center; width: 74px; height: 118px; border: 3px solid var(--gold); border-radius: 13px; font-size: 2rem; animation: rotate-phone 1.8s ease-in-out infinite; }
}

@keyframes rotate-phone {
  55%, 100% { transform: rotate(90deg); }
}

/* ========================================================================
   SHINDRA — DA FINALE
   Champagne solaire #f0dab4 + fond bleu "Équilibre" + boutons Parallaxe
   ------------------------------------------------------------------------
   IMPORTANT :
   - aucun layout n'est modifié ici ;
   - aucune logique de décor / parallaxe de background n'est touchée ;
   - aucune taille / position du plateau, de la main ou des joueurs n'est modifiée ;
   - les cartes conservent leurs couleurs et leurs visuels de gameplay.
   ======================================================================== */

:root {
  --ink: #f4eee6;
  --muted: #aaa69f;
  --surface: rgba(9, 13, 19, .84);
  --line: rgba(240, 218, 180, .20);
  --gold: #f0dab4;
  --button-ink: #fff3df;
  --button-fill:
    linear-gradient(110deg,
      rgba(200, 163, 107, .96) 0%,
      rgba(22, 22, 23, .98) 35%,
      rgba(10, 15, 22, .98) 67%,
      rgba(240, 218, 180, .94) 100%);
  --button-border: rgba(240, 218, 180, .42);

  --shindra-bg: #090d13;
  --shindra-bg-2: #0d131c;
  --shindra-panel: rgba(10, 15, 23, .86);
  --shindra-panel-strong: rgba(7, 11, 17, .95);
  --shindra-champagne: #f0dab4;
  --shindra-champagne-rgb: 240, 218, 180;
  --shindra-champagne-soft: rgba(240, 218, 180, .12);
  --shindra-champagne-line: rgba(240, 218, 180, .24);
}

/* Base color language. The specific screen backgrounds below remain fallback
   backgrounds: custom decor layers continue to work exactly as before. */
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(74, 96, 124, .18) 0, transparent 38%),
    radial-gradient(circle at 88% 92%, rgba(240, 218, 180, .055) 0, transparent 42%),
    linear-gradient(155deg, #0d131c, #090d13 62%, #06090e);
}

.eyebrow,
.turn-status,
.game-menu small {
  color: var(--shindra-champagne) !important;
}

.panel {
  background:
    linear-gradient(145deg, rgba(13, 19, 28, .92), rgba(7, 11, 17, .84));
  border-color: var(--shindra-champagne-line);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .018);
  backdrop-filter: blur(14px);
}

.message {
  color: #fff0d4;
}

/* ------------------------------------------------------------------------
   Buttons — Parallaxe
   The shape/hover is deliberately excluded from cards and utility controls.
   Dynamic buttons generated by the existing JS inherit this automatically.
   ------------------------------------------------------------------------ */
button:not(.card):not(.cell):not(.tutorial-cell):not(.tutorial-card):not(.title-nav-item):not(.menu-trigger):not(.icon-back):not(.tutorial-lesson-button):not(.review-rules-trigger):not(.fullscreen-trigger) {
  position: relative;
  border: 0;
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  color: var(--button-ink);
  background: var(--button-fill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(var(--shindra-champagne-rgb), .12);
  filter: drop-shadow(6px 6px 0 rgba(var(--shindra-champagne-rgb), .18));
  transition:
    transform .085s cubic-bezier(.16,.84,.26,1),
    filter .10s ease,
    background .10s ease,
    color .10s ease,
    box-shadow .10s ease;
}

button.secondary:not(.card):not(.tutorial-card) {
  color: #e8dfd2;
  background:
    linear-gradient(110deg,
      rgba(var(--shindra-champagne-rgb), .12),
      rgba(8, 13, 20, .92) 35% 72%,
      rgba(var(--shindra-champagne-rgb), .055));
  box-shadow:
    inset 0 0 0 1px rgba(var(--shindra-champagne-rgb), .21),
    inset 0 1px 0 rgba(255,255,255,.025);
}

button:not(.card):not(.cell):not(.tutorial-cell):not(.tutorial-card):not(.title-nav-item):not(.menu-trigger):not(.icon-back):not(.tutorial-lesson-button):not(.review-rules-trigger):not(.fullscreen-trigger):hover:not(:disabled) {
  transform: translateY(-3px);
  color: #fff5e5;
  filter:
    drop-shadow(6px 6px 0 rgba(var(--shindra-champagne-rgb), .25))
    drop-shadow(0 0 15px rgba(var(--shindra-champagne-rgb), .10))
    brightness(1.07)
    saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(var(--shindra-champagne-rgb), .20);
}

button.secondary:not(.card):not(.tutorial-card):hover:not(:disabled) {
  background:
    linear-gradient(110deg,
      rgba(var(--shindra-champagne-rgb), .19),
      rgba(9, 14, 21, .94) 35% 70%,
      rgba(var(--shindra-champagne-rgb), .09));
}

button:not(.card):not(.cell):not(.tutorial-cell):not(.tutorial-card):not(.title-nav-item):not(.menu-trigger):not(.icon-back):not(.tutorial-lesson-button):not(.review-rules-trigger):not(.fullscreen-trigger):active:not(:disabled) {
  transform: translate(3px, 3px) scale(.982);
  filter: drop-shadow(3px 3px 0 rgba(var(--shindra-champagne-rgb), .10));
  /* Darkens only the face of the button by ~50%; text stays crisp. */
  box-shadow:
    inset 0 0 0 999px rgba(0,0,0,.50),
    inset 0 4px 11px rgba(0,0,0,.34) !important;
  transition-duration: .035s;
}

button:disabled {
  opacity: .43;
}

/* Utility buttons keep their existing geometry, but use the new palette. */
.icon-back {
  border-color: rgba(var(--shindra-champagne-rgb), .25);
  color: #f6ead8;
  background: rgba(7, 11, 17, .38);
}
.icon-back:hover,
.icon-back:focus-visible {
  border-color: var(--shindra-champagne);
  color: #fff6e8;
  box-shadow: 0 0 16px rgba(var(--shindra-champagne-rgb), .10);
}

.menu-trigger {
  border-color: rgba(var(--shindra-champagne-rgb), .30);
  color: #f6ead8;
  background: rgba(7, 11, 17, .76);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.menu-trigger:hover:not(:disabled) {
  border-color: rgba(var(--shindra-champagne-rgb), .62);
  background: rgba(12, 18, 27, .92);
  box-shadow: 0 0 20px rgba(var(--shindra-champagne-rgb), .10);
}

/* ------------------------------------------------------------------------
   Forms / lobby
   ------------------------------------------------------------------------ */
.form-card h2,
.screen-topbar-title {
  color: var(--shindra-champagne);
  border-bottom-color: rgba(var(--shindra-champagne-rgb), .24);
}

label > span {
  color: #aaa69f;
}

input,
select {
  color: #f3ece3;
  background:
    linear-gradient(180deg, rgba(8, 13, 20, .96), rgba(11, 17, 26, .96));
  border-color: rgba(var(--shindra-champagne-rgb), .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

input:hover,
select:hover {
  border-color: rgba(var(--shindra-champagne-rgb), .28);
}

input:focus,
select:focus {
  border-color: var(--shindra-champagne);
  box-shadow:
    0 0 0 3px rgba(var(--shindra-champagne-rgb), .10),
    0 0 18px rgba(var(--shindra-champagne-rgb), .05);
}

select option {
  background: #0d131c;
  color: #eee7dd;
}

select option:disabled {
  color: #6f7378;
  background: #0a0f16;
}

.divider::before {
  background:
    linear-gradient(
      rgba(var(--shindra-champagne-rgb), 0),
      rgba(var(--shindra-champagne-rgb), .28) 20%,
      rgba(var(--shindra-champagne-rgb), .28) 80%,
      rgba(var(--shindra-champagne-rgb), 0)
    );
}

.divider span {
  background: rgba(9, 13, 19, .92);
  color: #8f8c86;
}

#join-form button[type="submit"] {
  color: #f4eadb;
  background:
    linear-gradient(110deg,
      rgba(var(--shindra-champagne-rgb), .10),
      rgba(8, 13, 20, .94) 35% 70%,
      rgba(var(--shindra-champagne-rgb), .05));
  box-shadow: inset 0 0 0 1px rgba(var(--shindra-champagne-rgb), .20);
}

#join-form button[type="submit"]:hover:not(:disabled) {
  color: #fff4e1;
  background:
    linear-gradient(110deg,
      rgba(var(--shindra-champagne-rgb), .18),
      rgba(9, 14, 21, .95) 35% 70%,
      rgba(var(--shindra-champagne-rgb), .09));
}

.profile-avatar {
  border-color: var(--shindra-champagne);
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--shindra-champagne-rgb), .08), transparent 55%),
    #0c121b;
  color: #fff0db;
  box-shadow: 0 0 20px rgba(var(--shindra-champagne-rgb), .06);
}

.active-session {
  border-color: rgba(var(--shindra-champagne-rgb), .38);
}

.tutorial-entry {
  border-color: rgba(var(--shindra-champagne-rgb), .26);
  background:
    linear-gradient(120deg, rgba(20, 28, 40, .94), rgba(8, 13, 20, .91));
}

.public-game,
.history-item {
  background:
    linear-gradient(100deg, rgba(12, 18, 27, .90), rgba(7, 11, 17, .82));
  border-color: rgba(var(--shindra-champagne-rgb), .16);
}

.public-game {
  border-left-color: var(--shindra-champagne);
}

/* ------------------------------------------------------------------------
   Title screen
   This only changes the fallback artwork/overlay. #title-decor remains
   untouched and continues to take priority when the existing logic loads it.
   ------------------------------------------------------------------------ */
.title-screen {
  background:
    radial-gradient(circle at 23% 24%, rgba(var(--shindra-champagne-rgb), .11) 0%, transparent 29%),
    radial-gradient(circle at 75% 25%, rgba(68, 92, 124, .26) 0%, transparent 39%),
    linear-gradient(120deg, #101924 0%, #0d141e 47%, #090d13 75%, #06090e 100%);
}

.title-screen::before {
  background:
    radial-gradient(130% 100% at 18% 122%, #18222d 0 40%, transparent 41%),
    radial-gradient(150% 100% at 82% 132%, #0a1018 0 42%, transparent 43%);
  opacity: .94;
}

.title-screen::after {
  background:
    repeating-radial-gradient(
      circle at 50% 40%,
      transparent 0 6.2%,
      rgba(var(--shindra-champagne-rgb), .055) 6.3% 6.4%
    );
  opacity: .46;
}

.title-wordmark {
  color: #fff0da;
  text-shadow:
    0 3px 12px rgba(0,0,0,.55),
    0 0 28px rgba(var(--shindra-champagne-rgb), .09);
}

.title-nav-item {
  color: rgba(237, 230, 219, .72);
}
.title-nav-item::before {
  color: var(--shindra-champagne);
}
.title-nav-item:not(:disabled):hover,
.title-nav-item:not(:disabled):focus-visible,
.title-nav-item--primary {
  color: #fff0db;
}
.title-nav-item:disabled {
  color: rgba(237, 230, 219, .25);
}
.title-soon {
  border-color: rgba(var(--shindra-champagne-rgb), .16);
  color: rgba(240, 218, 180, .44);
}
.title-hint {
  background: rgba(7, 11, 17, .88);
  color: var(--shindra-champagne);
  border: 1px solid rgba(var(--shindra-champagne-rgb), .16);
}
.title-profile {
  border-color: rgba(var(--shindra-champagne-rgb), .20);
  background: rgba(7, 11, 17, .44);
}
.title-profile-avatar {
  border-color: var(--shindra-champagne);
  background: #0d141e;
  color: #fff0db;
}
.title-tagline {
  color: rgba(230, 224, 214, .68);
}

/* ------------------------------------------------------------------------
   Game screen
   Layout and custom decor mechanism are intentionally untouched.
   ------------------------------------------------------------------------ */
body.playing {
  background: var(--shindra-bg);
}

body.playing #message {
  color: #f5eadb;
  background: rgba(7, 11, 17, .90);
  border: 1px solid rgba(var(--shindra-champagne-rgb), .18);
}

.game-stage {
  background:
    linear-gradient(90deg, rgba(9, 13, 19, .04) 0 42%, rgba(9, 13, 19, .42) 72%, rgba(6, 9, 14, .74)),
    radial-gradient(circle at 27% 36%, rgba(88, 112, 144, .19) 0 14%, transparent 43%),
    linear-gradient(145deg, #182533 0%, #101923 46%, #090d13 100%);
}

.game-stage::before {
  opacity: .42;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 12vw,
      rgba(var(--shindra-champagne-rgb), .025) 12.1vw 12.25vw
    ),
    linear-gradient(175deg, transparent 0 59%, #0a111a 59.3% 100%);
}

.scene-glow {
  background:
    radial-gradient(
      ellipse,
      rgba(var(--shindra-champagne-rgb), .36) 0,
      rgba(151, 174, 202, .13) 28%,
      transparent 67%
    );
  filter: blur(22px);
}

.review-rules-trigger {
  border-color: rgba(var(--shindra-champagne-rgb), .28);
  color: #f5eadb;
  background: rgba(7, 11, 17, .78);
}
.fullscreen-trigger {
  border-color: rgba(var(--shindra-champagne-rgb), .28);
  color: #f5eadb;
  background: rgba(7, 11, 17, .78);
}

@keyframes review-rules-glow {
  0%, 100% {
    border-color: rgba(var(--shindra-champagne-rgb), .26);
    box-shadow: 0 0 0 0 rgba(var(--shindra-champagne-rgb), 0);
  }
  50% {
    border-color: rgba(var(--shindra-champagne-rgb), .58);
    box-shadow: 0 0 16px 1px rgba(var(--shindra-champagne-rgb), .15);
  }
}

.turn-status,
.join-badge {
  color: #f4eadb;
  background: rgba(7, 11, 17, .80);
  border-color: rgba(var(--shindra-champagne-rgb), .24);
  backdrop-filter: blur(10px);
}

.join-badge {
  color: var(--shindra-champagne);
}

.asset-preloader {
  color: #f5eee5;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--shindra-champagne-rgb), .055), transparent 34%),
    rgba(6, 9, 14, .96);
}

.asset-preloader progress {
  accent-color: var(--shindra-champagne);
}

/* Fallback avatars only: inline/custom images continue to override this. */
.avatar {
  border-color: rgba(var(--shindra-champagne-rgb), .16);
  background:
    radial-gradient(circle at 50% 29%, #c6a17e 0 14%, transparent 14.5%),
    radial-gradient(ellipse at 50% 72%, #252c38 0 36%, transparent 36.5%),
    linear-gradient(145deg, #33495a, #111a24);
  box-shadow:
    inset 0 -50px 90px rgba(0,0,0,.58),
    0 25px 60px rgba(0,0,0,.46),
    0 0 0 1px rgba(var(--shindra-champagne-rgb), .04);
}

.avatar::after {
  background: #262d39;
}

.player-identity {
  color: #f3ebe1;
  background: rgba(7, 11, 17, .88);
  border: 1px solid rgba(var(--shindra-champagne-rgb), .12);
}

/* Board — skin original conservé, avec transparence réduite.
   IMPORTANT :
   - même design que l'ancien plateau ;
   - même dégradé marron ;
   - même micro-texture ;
   - mêmes pointillés ;
   - mêmes ombres / radius / dimensions / emplacement ;
   - seules les opacités du fond et des emplacements changent. */
.game-stage .board {
  border-color: #d7bb8055;
  background:
    linear-gradient(
      145deg,
      rgba(170, 117, 79, .40),
      rgba(91, 59, 47, .40)
    ),
    repeating-linear-gradient(
      25deg,
      #ffffff0a 0 2px,
      transparent 2px 8px
    );
  box-shadow:
    0 22px 60px #000a,
    inset 0 0 40px #0006;
}

.game-stage .cell {
  /* Couleur originale #120e0d91, opacité divisée par deux. */
  background: rgba(18, 14, 13, .284);
  border-color: #f5d9a342;
}

.game-stage .cell.playable:hover {
  border-color: var(--shindra-champagne);
  box-shadow: 0 0 20px rgba(var(--shindra-champagne-rgb), .16);
}

.game-stage .cell.pending {
  border-color: var(--shindra-champagne);
}

.board-coord {
  color: var(--ink);
  text-shadow: 0 1px 3px #000a;
}

/* Keep the cards colorful: only selection feedback joins the Champagne DA. */
.game-stage #hand .card:hover:not(.suppress-hover),
.game-stage #hand .card:focus-visible,
.game-stage #hand .card.selected,
.hand-picker .selection-pool .card.selected {
  border-color: var(--shindra-champagne);
}

.hand-picker {
  background:
    linear-gradient(
      180deg,
      rgba(7, 11, 17, .22),
      rgba(7, 11, 17, .73) 58%,
      rgba(6, 9, 14, .95)
    );
}

.game-over {
  border-color: rgba(var(--shindra-champagne-rgb), .48);
  background:
    linear-gradient(145deg, rgba(13, 19, 28, .97), rgba(6, 9, 14, .97));
}

.game-over p {
  color: #fff0d8;
}

/* Game menu stays a compact menu rather than becoming a large Parallaxe
   control, but its materials/colors use the same DA. */
.game-menu {
  border-color: rgba(var(--shindra-champagne-rgb), .20);
  background: rgba(7, 11, 17, .96);
  box-shadow: 0 18px 50px rgba(0,0,0,.58);
}

.game-menu button {
  clip-path: none;
  filter: none;
  transform: none;
  color: #eee7de;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.game-menu button:hover:not(:disabled) {
  transform: none;
  filter: none;
  color: #fff2df;
  background: rgba(var(--shindra-champagne-rgb), .075);
  box-shadow: none;
}

.game-menu .danger {
  color: #e99a9f;
}

.replay-controls {
  border-color: rgba(var(--shindra-champagne-rgb), .34);
  background: rgba(7, 11, 17, .93);
  box-shadow: 0 18px 55px rgba(0,0,0,.58);
}

.replay-heading {
  color: #fff1db;
}

.replay-controls input[type="range"] {
  accent-color: var(--shindra-champagne);
}

/* ------------------------------------------------------------------------
   Tutorial — same visual system, same tutorial layout/logic.
   ------------------------------------------------------------------------ */
.tutorial {
  background:
    radial-gradient(circle at 72% 22%, rgba(var(--shindra-champagne-rgb), .055) 0, transparent 38%),
    radial-gradient(circle at 12% 85%, rgba(73, 98, 132, .16) 0, transparent 40%),
    #090d13;
}

.tutorial-lesson-button {
  color: #ece4d9;
  border-color: rgba(var(--shindra-champagne-rgb), .14);
  background: rgba(10, 15, 23, .88);
  box-shadow: none;
}

.tutorial-lesson-button:hover:not(:disabled) {
  border-color: rgba(var(--shindra-champagne-rgb), .34);
  background: rgba(15, 22, 32, .94);
  transform: none;
  filter: none;
  box-shadow: none;
}

.tutorial-lesson-button span {
  color: var(--shindra-champagne);
}

.tutorial-lesson-button.active {
  border-color: var(--shindra-champagne);
  background:
    linear-gradient(110deg, rgba(var(--shindra-champagne-rgb), .10), rgba(11, 17, 25, .96));
}

.tutorial-game {
  border-color: rgba(var(--shindra-champagne-rgb), .14);
  background:
    linear-gradient(145deg, rgba(13, 19, 28, .90), rgba(7, 11, 17, .88));
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
}

/* Tutorial board: same shape/size, new Champagne + navy material. */
.tutorial-board {
  border-color: rgba(var(--shindra-champagne-rgb), .34);
  background:
    linear-gradient(145deg, rgba(15, 23, 34, .94), rgba(5, 9, 15, .97)),
    repeating-linear-gradient(
      25deg,
      rgba(var(--shindra-champagne-rgb), .022) 0 2px,
      transparent 2px 8px
    );
  box-shadow:
    0 22px 60px rgba(0,0,0,.58),
    inset 0 0 46px rgba(0,0,0,.36);
}

.tutorial-cell {
  border-color: rgba(var(--shindra-champagne-rgb), .20);
  background:
    linear-gradient(145deg, rgba(17, 25, 36, .72), rgba(7, 11, 17, .74));
}

.tutorial-cell.available:hover {
  border-color: var(--shindra-champagne);
  box-shadow: 0 0 20px rgba(var(--shindra-champagne-rgb), .22);
}

.tutorial-cell.tutorial-direct-target {
  box-shadow: 0 0 20px rgba(var(--shindra-champagne-rgb), .46);
}

/* Existing green/cyan gameplay hints are intentionally kept distinct when
   they encode tutorial/game state rather than decoration. */

/* Waiting pulse recolored without changing the animation behavior. */
@keyframes waiting-pulse {
  to {
    box-shadow: 0 0 28px rgba(var(--shindra-champagne-rgb), .54);
    transform: scale(.98);
  }
}

/* =========================================================
   CORRECTION : les cases du plateau sont des <button>.
   Elles sont exclues du skin Parallaxe et gardent exactement
   leur géométrie / rendu de plateau d'origine.
   ========================================================= */
.game-stage .board > .cell {
  clip-path: none;
  filter: none;
}

/* Les cartes posées restent elles-mêmes des cartes, pas des boutons UI. */
.game-stage .board > .cell > .card {
  clip-path: none;
}



/* ========================================================================
   Compatibilité / performance iPad + téléphone
   Les animations de gameplay restent actives : on retire seulement des
   filtres de composition très coûteux pour WebKit mobile.
   ===================================================================== */

/* Confirmé par test sur le projet : ce blur faisait ramer fortement la Game List,
   y compris sur PC. Le fond du panneau est déjà suffisamment opaque. */
#game-list .panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Stabilise les cartes 3D sur WebKit pendant les flips/translations. */
.card,
.card-traveler {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@media (hover: none), (pointer: coarse) {
  /* Les grands backdrop-filter coûtent très cher sur les GPU mobiles. */
  .panel,
  .title-profile,
  .review-rules-trigger,
  .turn-status,
  .join-badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Les mouvements restent intacts ; seuls les filtres raster coûteux sont
     retirés pendant les effets rapides. */
  .card-travel--arc,
  .card-travel--rocket,
  .rocket-smoke__particle,
  .rocket-smoke__placeholder,
  .card .hard-lock-custom-visual,
  .card-flip-white-flash__glow {
    filter: none !important;
  }

  .scene-glow {
    filter: none !important;
  }

  button,
  .card,
  .cell {
    touch-action: manipulation;
  }
}

/* ========================================================================
   Chargement progressif : feedback uniquement pour les étapes réellement
   bloquantes. Le gros préchargement de gameplay reste invisible en arrière-plan.
   ===================================================================== */
.startup-loading {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--shindra-champagne-rgb), .08), transparent 30%),
    rgba(5, 8, 13, .985);
  color: #f5eee5;
  text-align: center;
}

.startup-loading-card {
  display: grid;
  justify-items: center;
  gap: .8rem;
  min-width: min(280px, 78vw);
}

.startup-loading-card strong {
  color: var(--shindra-champagne);
  font: 700 clamp(1rem, 4vw, 1.35rem) Georgia, serif;
  letter-spacing: .28em;
  text-indent: .28em;
}

.startup-loading-label {
  color: var(--muted);
  font-size: .9rem;
  letter-spacing: .04em;
}

.startup-loading-mark {
  width: 34px;
  aspect-ratio: 1;
  border: 2px solid rgba(var(--shindra-champagne-rgb), .18);
  border-top-color: var(--shindra-champagne);
  border-radius: 50%;
  animation: shindra-loading-spin .8s linear infinite;
}

@keyframes shindra-loading-spin {
  to { transform: rotate(360deg); }
}

/* ========================================================================
   LAYOUT COMBAT — VERSION VERTICALE / PLATEAU CENTRAL
   ------------------------------------------------------------------------
   Cette section ne change pas la DA : elle repositionne uniquement les
   éléments de l'écran de combat.

   Intentions :
   - plateau vertical prioritaire, utilisant presque toute la hauteur ;
   - avatars à gauche et DERRIÈRE le plateau ;
   - informations de tour entre les deux avatars ;
   - actions principales visibles en colonne à droite ;
   - ancien menu compact conservé derrière le bouton OPTIONS ;
   - main au premier plan, en éventail, au bas de l'écran.
   ======================================================================== */

/* Le plateau devient l'axe visuel de l'écran. */
.board-zone {
  z-index: 20;
  top: max(.9rem, env(safe-area-inset-top));
  bottom: max(.9rem, env(safe-area-inset-bottom));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  align-items: stretch;
}

.game-stage .board {
  height: 100%;
  width: auto;
  max-width: min(52vw, 760px);
}

/* Les portraits restent volontairement sous le plateau : le plateau peut
   donc les recouvrir lorsqu'ils empiètent visuellement sur sa zone. */
.player-seat {
  z-index: 8;
}

.opponent-seat {
  top: 5%;
  left: auto;
  right: calc(50% + 8vw);
  width: min(27vw, 330px);
}

.local-seat {
  left: auto;
  right: calc(50% + 7vw);
  bottom: -5%;
  width: min(34vw, 430px);
}

/* Les informations de partie (ex. « Joué en D4 ») vivent désormais entre
   les deux personnages, sur le côté gauche, au lieu d'occuper le haut du
   plateau. */
.turn-status {
  z-index: 24;
  top: 50%;
  left: clamp(1rem, 10vw, 10rem);
  transform: translateY(-50%);
  width: min(24vw, 300px);
  max-width: none;
  white-space: normal;
  text-align: center;
}

.join-badge {
  z-index: 24;
  top: calc(50% + 3.4rem);
  left: clamp(1rem, 10vw, 10rem);
  transform: none;
  width: min(24vw, 300px);
  box-sizing: border-box;
  text-align: center;
}

/* Menu rapide, visible en permanence sur le bord droit. */
.game-quick-menu {
  position: absolute;
  z-index: 46;
  top: max(6%, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  display: grid;
  gap: .42rem;
  width: clamp(148px, 14vw, 205px);
}

.game-quick-menu .quick-menu-button {
  position: static;
  inset: auto;
  transform: none;
  width: 100%;
  min-height: 42px;
  height: auto;
  padding: .62rem .8rem;
  box-sizing: border-box;
  border-radius: 9px;
  text-align: left;
  justify-content: flex-start;
  letter-spacing: .02em;
  line-height: 1.15;
  white-space: normal;
  animation: none;
}

.game-quick-menu .quick-menu-button:hover:not(:disabled),
.game-quick-menu .quick-menu-button:focus-visible {
  transform: none;
}

.game-quick-menu .quick-menu-button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.game-quick-menu .danger {
  color: #ff8c93;
}

/* OPTIONS ouvre l'ancien menu compact, juste à gauche de la colonne. */
.game-menu {
  top: 50%;
  right: calc(max(1rem, env(safe-area-inset-right)) + clamp(164px, 15vw, 220px));
  transform: translateY(-28%);
  min-width: 205px;
}

/* La main reste devant le plateau et les avatars. */
.hand-section {
  z-index: 34;
  left: 50%;
  bottom: -3%;
  transform: translateX(-50%);
  width: min(70vw, 1050px);
  height: 28vh;
}

/* Les règles spécifiques aux petits écrans existantes restent valables,
   mais on neutralise les anciennes positions absolues des boutons qui sont
   maintenant enfants de .game-quick-menu. */
@media (max-height: 540px) and (orientation: landscape) {
  .board-zone {
    top: .55rem;
    bottom: .55rem;
  }

  .opponent-seat {
    top: 2%;
    right: calc(50% + 8vw);
    width: min(20vw, 190px);
  }

  .local-seat {
    right: calc(50% + 7vw);
    width: min(27vw, 250px);
  }

  .turn-status {
    top: 48%;
    left: .7rem;
    width: min(24vw, 220px);
  }

  .join-badge {
    top: calc(48% + 3rem);
    left: .7rem;
    width: min(24vw, 220px);
  }

  .game-quick-menu {
    top: .55rem;
    right: .6rem;
    width: clamp(130px, 15vw, 175px);
  }

  .game-quick-menu .quick-menu-button {
    top: auto;
    left: auto;
    right: auto;
    padding: .45rem .58rem;
    min-height: 34px;
    font-size: .7rem;
  }

  .game-menu {
    top: 50%;
    right: calc(.6rem + clamp(142px, 16vw, 188px));
  }
}

/* En portrait on conserve la logique compacte déjà existante : plateau au
   centre, avatars en haut. Le menu rapide devient une petite colonne à droite
   au-dessus de la main afin de ne pas réduire la largeur du plateau. */
@media (orientation: portrait) {
  .board-zone {
    top: auto;
    right: auto;
    bottom: calc(19dvh + .4rem);
    left: 50%;
    transform: translateX(-50%);
  }

  .player-seat {
    z-index: 8;
  }

  .turn-status {
    top: calc(max(.5rem, env(safe-area-inset-top)) + 44px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 58vw;
  }

  .join-badge {
    top: calc(max(.5rem, env(safe-area-inset-top)) + 80px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }

  .game-quick-menu {
    top: auto;
    right: max(.45rem, env(safe-area-inset-right));
    bottom: calc(19dvh + .65rem);
    width: clamp(105px, 28vw, 145px);
    gap: .28rem;
  }

  .game-quick-menu .quick-menu-button {
    padding: .38rem .48rem;
    min-height: 32px;
    font-size: .62rem;
  }

  .game-menu {
    top: auto;
    right: calc(max(.45rem, env(safe-area-inset-right)) + clamp(112px, 29vw, 152px));
    bottom: calc(19dvh + .65rem);
    transform: none;
    min-width: 175px;
  }

  .hand-section {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    height: 19dvh;
  }
}

/* ========================================================================
   AJUSTEMENT LAYOUT v2 — PERSONNAGES ÉLOIGNÉS EN PAYSAGE + STATUT EN HAUT
   ------------------------------------------------------------------------
   - En paysage, les deux portraits sont repoussés vers le bord gauche afin
     de laisser une vraie respiration entre eux et le plateau.
   - En portrait, ils reviennent volontairement au contact de la composition
     compacte (coin haut gauche / coin haut droit).
   - Le message de partie ("Joué en D4", "Choisissez votre main...", etc.)
     est regroupé dans la zone d'information haute et ne recouvre plus la main.
   ======================================================================== */

/* PAYSAGE : personnages nettement séparés du plateau central. */
@media (orientation: landscape) {
  .opponent-seat {
    left: clamp(.8rem, 3.2vw, 3.5rem);
    right: auto;
  }

  .local-seat {
    left: clamp(-2.5rem, -1.5vw, -.4rem);
    right: auto;
  }

  /* Zone commune des informations de partie, au-dessus du plateau/main. */
  .turn-status {
    top: max(.85rem, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: min(42vw, 520px);
    max-width: min(42vw, 520px);
    text-align: center;
    white-space: normal;
  }

  .join-badge {
    top: calc(max(.85rem, env(safe-area-inset-top)) + 2.85rem);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 0;
    text-align: center;
  }

  /* Pendant le choix initial, on laisse de la place au titre
     "Choisissez votre main..." : le statut se range juste en dessous. */
  .game-stage:has(#hand-selection:not(.hidden)) .turn-status {
    top: 19%;
  }

  .game-stage:has(#hand-selection:not(.hidden)) .join-badge {
    top: calc(19% + 2.85rem);
  }
}

/* Petit paysage : conserver l'éloignement mais réduire l'encombrement. */
@media (max-height: 540px) and (orientation: landscape) {
  .opponent-seat {
    left: .55rem;
    right: auto;
  }

  .local-seat {
    left: -1.2rem;
    right: auto;
  }

  .turn-status {
    top: .45rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(38vw, 390px);
  }

  .join-badge {
    top: 2.65rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }

  .game-stage:has(#hand-selection:not(.hidden)) .turn-status {
    top: 14%;
  }

  .game-stage:has(#hand-selection:not(.hidden)) .join-badge {
    top: calc(14% + 2.35rem);
  }
}

/* PORTRAIT : ici les portraits doivent au contraire rester collés à la
   composition compacte autour du plateau, comme demandé. */
@media (orientation: portrait) {
  .opponent-seat {
    top: max(.5rem, env(safe-area-inset-top));
    left: max(.5rem, env(safe-area-inset-left));
    right: auto;
    width: min(22vw, 92px);
  }

  .local-seat {
    top: max(.5rem, env(safe-area-inset-top));
    right: max(.5rem, env(safe-area-inset-right));
    left: auto;
    bottom: auto;
    width: min(22vw, 92px);
  }

  /* Les infos restent regroupées en haut, entre les deux portraits. */
  .turn-status {
    top: calc(max(.5rem, env(safe-area-inset-top)) + 44px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 56vw;
  }

  .join-badge {
    top: calc(max(.5rem, env(safe-area-inset-top)) + 80px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }
}


/* ========================================================================
   AJUSTEMENT LAYOUT v3 — INFORMATIONS ENTRE LES DEUX AVATARS
   ------------------------------------------------------------------------
   Demande :
   - en paysage, "À votre tour — choisissez une carte puis une case" revient
     sur le côté gauche, entre l'adversaire et le joueur ;
   - les messages ponctuels du jeu (#message), par ex. "Carte jouée en B2",
     apparaissent juste en dessous du statut de tour, et non sur la main ;
   - le portrait local est légèrement remonté pour que son nom reste visible ;
   - le portrait responsive reste inchangé : avatars compacts autour du plateau.
   ======================================================================== */

@media (orientation: landscape) {
  /* Le joueur local remonte légèrement : son identité ne doit plus être
     mangée par le bas de l'écran / la main. */
  .local-seat {
    bottom: 1.5%;
  }

  /* Zone principale d'instruction entre les deux avatars. */
  .turn-status {
    top: 47%;
    left: clamp(1rem, 7vw, 7rem);
    transform: translateY(-50%);
    width: min(24vw, 310px);
    max-width: min(24vw, 310px);
    text-align: center;
    white-space: normal;
  }

  /* Les messages momentanés générés par app.js ("Carte jouée en B2", etc.)
     utilisent déjà #message. Pendant une partie, on les place sous le statut
     de tour au lieu de les laisser dans le flux au-dessus / sur la main. */
  body:has(#game:not(.hidden)) #message {
    position: fixed;
    z-index: 25;
    top: calc(47% + 2.25rem);
    left: clamp(1rem, 7vw, 7rem);
    width: min(24vw, 310px);
    min-height: 1.4rem;
    margin: 0;
    padding: 0;
    transform: none;
    text-align: center;
    pointer-events: none;
  }

  /* Le code de partie reste sous les informations de jeu, mais plus bas
     pour ne pas se mélanger au message ponctuel. */
  .join-badge {
    top: calc(47% + 4.5rem);
    left: clamp(1rem, 7vw, 7rem);
    transform: none;
    width: min(24vw, 310px);
    text-align: center;
  }

  /* Pendant le choix initial de la main, conserver l'information de tour
     dans la même colonne latérale plutôt que la replacer au centre. */
  .game-stage:has(#hand-selection:not(.hidden)) .turn-status {
    top: 47%;
  }

  .game-stage:has(#hand-selection:not(.hidden)) .join-badge {
    top: calc(47% + 4.5rem);
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .local-seat {
    bottom: 1%;
  }

  .turn-status {
    top: 46%;
    left: .7rem;
    width: min(24vw, 230px);
    max-width: min(24vw, 230px);
  }

  body:has(#game:not(.hidden)) #message {
    top: calc(46% + 1.85rem);
    left: .7rem;
    width: min(24vw, 230px);
    font-size: .78rem;
  }

  .join-badge {
    top: calc(46% + 3.7rem);
    left: .7rem;
    width: min(24vw, 230px);
  }

  .game-stage:has(#hand-selection:not(.hidden)) .turn-status {
    top: 46%;
  }

  .game-stage:has(#hand-selection:not(.hidden)) .join-badge {
    top: calc(46% + 3.7rem);
  }
}

/* En portrait, #message ne doit pas rester en position fixed héritée du
   paysage ; il reprend le comportement normal du layout responsive. */
@media (orientation: portrait) {
  body:has(#game:not(.hidden)) #message {
    position: static;
    width: auto;
    min-height: 1.5rem;
    margin: 0;
    padding: 0;
    transform: none;
  }
}


/* ========================================================================
   AJUSTEMENT LAYOUT v4 — MESSAGE D'ACTION SANS CARTOUCHE
   ------------------------------------------------------------------------
   #message hérite historiquement du gros badge noir arrondi utilisé lorsque
   le message était affiché en bas de l'écran. Maintenant qu'il vit entre les
   deux avatars ("Carte 6 sélectionnée.", "Carte jouée en B2", etc.), ce fond
   produit un contour noir déformé inutile.

   On conserve uniquement le texte ; le statut principal au-dessus garde,
   lui, son véritable cartouche.
   ======================================================================== */

body.playing:has(#game:not(.hidden)) #message {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--shindra-champagne, var(--gold));
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}

/* Évite également qu'une largeur/min-height héritée dessine une zone
   invisible trop importante autour du texte en paysage. */
@media (orientation: landscape) {
  body.playing:has(#game:not(.hidden)) #message {
    min-height: 0;
    line-height: 1.25;
  }
}


/* ========================================================================
   AJUSTEMENT LAYOUT v5 — PORTRAIT TÉLÉPHONE : PLATEAU PLUS GRAND
   ------------------------------------------------------------------------
   Sur les écrans très verticaux, le plateau était visuellement trop petit.
   On lui donne la priorité :
   - largeur légèrement supérieure au viewport (overscan discret) ;
   - davantage de hauteur disponible ;
   - main un peu moins haute ;
   - aucun changement de DA, uniquement dimensions / placement.
   ======================================================================== */

@media (orientation: portrait) and (max-width: 600px) {
  .board-zone {
    bottom: calc(16dvh + .25rem);
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
  }

  .game-stage .board {
    width: min(104vw, calc(79dvh * var(--card-ratio)));
    height: auto;
    max-width: none;
  }

  .hand-section {
    height: 16dvh;
  }

  .game-stage #hand .card {
    width: clamp(52px, 15vw, 96px);
    bottom: 5%;
  }

  .game-quick-menu {
    bottom: calc(16dvh + .45rem);
  }

  .game-menu {
    bottom: calc(16dvh + .45rem);
  }
}

/* Téléphones particulièrement hauts/étroits :
   on autorise un léger dépassement latéral supplémentaire afin que le
   plateau reste imposant au lieu de devenir une petite colonne au centre. */
@media (orientation: portrait) and (max-width: 480px) and (max-aspect-ratio: 3/5) {
  .game-stage .board {
    width: min(108vw, calc(80dvh * var(--card-ratio)));
  }

  .board-zone {
    bottom: calc(15dvh + .2rem);
  }

  .hand-section {
    height: 15dvh;
  }

  .game-quick-menu,
  .game-menu {
    bottom: calc(15dvh + .4rem);
  }
}


/* ========================================================================
   AJUSTEMENT LAYOUT v6 — CORRECTION RÉELLE DU PLATEAU EN PORTRAIT
   ------------------------------------------------------------------------
   Le plateau pouvait devenir minuscule sur téléphone car les règles
   précédentes utilisaient une multiplication dans calc(), par exemple :
       calc(80dvh * var(--card-ratio))
   Cette expression n'est pas suffisamment fiable comme base responsive.

   En portrait, on pilote désormais la TAILLE PAR LA HAUTEUR :
   - le plateau reçoit une hauteur explicite importante ;
   - sa largeur est calculée automatiquement grâce à aspect-ratio ;
   - une seconde limite basée sur vw empêche le débordement sur téléphone
     étroit.
   Aucun changement de style visuel.
   ======================================================================== */

@media (orientation: portrait) {
  .board-zone {
    top: 16dvh;
    bottom: auto;
    left: 50%;
    right: auto;
    height: min(64dvh, 131vw);
    width: auto;
    transform: translateX(-50%);
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: visible;
  }

  .game-stage .board {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    aspect-ratio: var(--card-ratio);
  }

  /* La main garde sa bande basse et reste devant le plateau. */
  .hand-section {
    height: 16dvh;
  }

  .game-stage #hand .card {
    width: clamp(50px, 15vw, 96px);
    bottom: 4%;
  }

  .game-quick-menu,
  .game-menu {
    bottom: calc(16dvh + .4rem);
  }
}

/* Téléphones très étroits : on utilise quasiment toute la largeur possible,
   sans laisser le plateau se réduire à une vignette. */
@media (orientation: portrait) and (max-width: 480px) {
  .board-zone {
    top: 15dvh;
    height: min(66dvh, 134vw);
  }

  .hand-section {
    height: 15dvh;
  }

  .game-quick-menu,
  .game-menu {
    bottom: calc(15dvh + .35rem);
  }
}

/* Écrans extrêmement étroits / longs : priorité maximale au plateau. */
@media (orientation: portrait) and (max-width: 390px) and (max-aspect-ratio: 1/2) {
  .board-zone {
    top: 14dvh;
    height: min(68dvh, 136vw);
  }
}


/* ========================================================================
   AJUSTEMENT LAYOUT v7 — PORTRAIT TYPE MOBILE
   ------------------------------------------------------------------------
   Paysage : aucun changement volontaire par rapport à v6.

   Portrait :
   - plateau reste grand et central ;
   - joueur local en bas à gauche ;
   - adversaire en bas à droite ;
   - la main reste au centre du bas ;
   - statut de tour centré en haut ;
   - message ponctuel ("Carte jouée en B2", etc.) juste sous le statut ;
   - menu rapide remplacé par un simple bouton "…" en haut à droite ;
   - ce bouton ouvre le menu Options existant.
   ======================================================================== */

/* Ces copies n'existent que pour rendre les fonctions accessibles depuis
   le menu « … » mobile. Elles restent invisibles en paysage. */
.portrait-menu-only {
  display: none !important;
}

@media (orientation: portrait) {
  /* ---------------------------------------------------------------
     Statut + message ponctuel en haut
     --------------------------------------------------------------- */
  .turn-status {
    position: fixed;
    z-index: 52;
    top: max(.35rem, env(safe-area-inset-top));
    left: 50%;
    width: min(72vw, 430px);
    max-width: min(72vw, 430px);
    transform: translateX(-50%);
    text-align: center;
    white-space: normal;
  }

  body.playing:has(#game:not(.hidden)) #message {
    position: fixed;
    z-index: 52;
    top: calc(max(.35rem, env(safe-area-inset-top)) + 2.35rem);
    left: 50%;
    width: min(72vw, 430px);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  /* Le code de partie n'occupe pas la zone visuelle principale sur mobile. */
  .join-badge {
    display: none;
  }

  /* ---------------------------------------------------------------
     Avatars en bas : joueur gauche / adversaire droite
     Les portraits restent derrière le plateau et derrière la main.
     --------------------------------------------------------------- */
  .player-seat {
    top: auto;
    z-index: 9;
    width: clamp(82px, 21vw, 128px);
  }

  .local-seat {
    left: max(.25rem, env(safe-area-inset-left));
    right: auto;
    bottom: max(.25rem, env(safe-area-inset-bottom));
    width: clamp(82px, 21vw, 128px);
  }

  .opponent-seat {
    left: auto;
    right: max(.25rem, env(safe-area-inset-right));
    bottom: max(.25rem, env(safe-area-inset-bottom));
    width: clamp(82px, 21vw, 128px);
  }

  .local-seat .avatar,
  .opponent-seat .avatar {
    width: 100%;
    max-width: none;
  }

  .local-seat .player-identity,
  .opponent-seat .player-identity {
    position: absolute;
    left: 50%;
    bottom: .05rem;
    transform: translateX(-50%);
    width: max-content;
    max-width: 118%;
    z-index: 2;
  }

  /* ---------------------------------------------------------------
     Plateau : laisse juste assez de place en haut pour le statut et
     en bas pour la main/avatars, tout en restant très grand.
     --------------------------------------------------------------- */
  .board-zone {
    top: max(4.2rem, 7dvh);
    bottom: auto;
    left: 50%;
    right: auto;
    height: min(76dvh, 136vw);
    width: auto;
    transform: translateX(-50%);
  }

  .game-stage .board {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ---------------------------------------------------------------
     Main : au centre, au-dessus des avatars comme dans le croquis.
     --------------------------------------------------------------- */
  .hand-section {
    z-index: 36;
    left: 50%;
    bottom: max(-.35rem, env(safe-area-inset-bottom));
    width: min(78vw, 610px);
    height: 18dvh;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .hand-section #hand,
  .hand-section .hand {
    pointer-events: auto;
  }

  .game-stage #hand .card {
    width: clamp(48px, 14vw, 88px);
    bottom: 1%;
  }

  /* ---------------------------------------------------------------
     Menu mobile : seul OPTIONS devient « … ».
     Les autres gros boutons latéraux disparaissent en portrait.
     --------------------------------------------------------------- */
  .game-quick-menu {
    position: fixed;
    z-index: 60;
    top: max(.35rem, env(safe-area-inset-top));
    right: max(.35rem, env(safe-area-inset-right));
    width: 44px;
    display: block;
  }

  .game-quick-menu .quick-menu-button {
    display: none;
  }

  .game-quick-menu #menu-trigger {
    display: flex;
    position: static;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0;
    line-height: 1;
    border-radius: 7px;
  }

  .game-quick-menu #menu-trigger::after {
    content: "⋮";
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
  }

  /* Menu ouvert depuis « … » : panneau en haut à droite, sous le bouton. */
  .game-menu {
    position: fixed;
    z-index: 61;
    top: calc(max(.35rem, env(safe-area-inset-top)) + 50px);
    right: max(.35rem, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    transform: none;
    width: min(78vw, 280px);
    min-width: 0;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }

  .game-menu .portrait-menu-only {
    display: flex !important;
  }
}

/* Téléphones très étroits : conserver le même principe mais réduire
   légèrement les portraits afin de ne pas étouffer la main. */
@media (orientation: portrait) and (max-width: 390px) {
  .player-seat,
  .local-seat,
  .opponent-seat {
    width: clamp(72px, 20vw, 100px);
  }

  .hand-section {
    width: 82vw;
    height: 17dvh;
  }

  .board-zone {
    top: max(4rem, 6.5dvh);
    height: min(77dvh, 138vw);
  }

  .turn-status,
  body.playing:has(#game:not(.hidden)) #message {
    width: 70vw;
    max-width: 70vw;
  }
}


/* ========================================================================
   AJUSTEMENT LAYOUT v8
   1) Pendant la sélection de main : seul OPTIONS reste visible à droite.
   2) Le sous-menu OPTIONS est désormais physiquement enfant de la colonne
      .game-quick-menu : il peut donc s'ouvrir collé au bouton au lieu de
      flotter loin de lui suivant la taille d'écran.
   ======================================================================== */

/* La colonne sert maintenant de repère de position au sous-menu. */
.game-quick-menu {
  position: absolute;
}

/* Sous-menu : directement à gauche de la colonne, aligné sur son haut.
   Ancré sur le haut de .game-quick-menu plutôt que son bas : ce haut est
   fixe (voir .game-quick-menu, `top: max(6%, ...)`), alors que le bas
   dépend des boutons actuellement visibles (ex: "Revoir les règles" et
   "Abandonner" sont masqués en fin de partie ou pendant la sélection de
   main). Ancrer sur le bas faisait remonter tout le panneau hors de
   l'écran par le haut dès que la colonne raccourcissait. */
.game-quick-menu > .game-menu {
  position: absolute;
  top: 0;
  right: calc(100% + .45rem);
  bottom: auto;
  left: auto;
  transform: none;
  width: clamp(205px, 18vw, 270px);
  min-width: 205px;
  max-height: min(72vh, 520px);
  overflow-y: auto;
}

/* SÉLECTION DE MAIN :
   on masque Plein écran / Règles / 5 coups / Abandonner.
   Seul OPTIONS reste présent à droite. */
.game-stage:has(#hand-selection:not(.hidden))
  .game-quick-menu > .quick-menu-button:not(#menu-trigger) {
  display: none;
}

/* Le sous-menu lui-même reste utilisable lorsqu'on clique OPTIONS. */
.game-stage:has(#hand-selection:not(.hidden))
  .game-quick-menu > .game-menu {
  display: block;
}

.game-stage:has(#hand-selection:not(.hidden))
  .game-quick-menu > .game-menu.hidden {
  display: none;
}

/* Portrait : conserver le bouton ⋮ et coller le panneau juste sous lui.
   Le menu est enfant de .game-quick-menu, mais position: fixed permet de
   l'ancrer proprement au coin écran. */
@media (orientation: portrait) {
  .game-quick-menu {
    position: fixed;
  }

  .game-quick-menu > .game-menu {
    position: fixed;
    top: calc(max(.35rem, env(safe-area-inset-top)) + 48px);
    right: max(.35rem, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    transform: none;
    width: min(78vw, 280px);
    min-width: 0;
    max-height: calc(100dvh - 58px);
  }
}


/* ========================================================================
   AJUSTEMENT LAYOUT v9 — TAILLE DU PLATEAU EN PAYSAGE
   ------------------------------------------------------------------------
   Variable volontairement simple à modifier :

      100% = ancienne taille (v8)
       94% = taille choisie actuellement, légèrement réduite
       90% = plateau réduit de 10%

   La réduction se fait depuis le HAUT :
   - le bord supérieur ne bouge pas ;
   - hauteur et largeur diminuent ensemble grâce à aspect-ratio ;
   - seul le bas du plateau remonte ;
   - le mode portrait ignore totalement cette variable et conserve son
     comportement mobile actuel.
   ======================================================================== */

.game-stage {
  --landscape-board-size: 94%;
}

@media (orientation: landscape) {
  .board-zone {
    /* Le conteneur conserve exactement la même position haute/basse.
       Le plateau, lui, est accroché en haut du conteneur. */
    align-items: flex-start;
  }

  .game-stage .board {
    height: var(--landscape-board-size, 100%);
    width: auto;
  }
}

/* La démo possède son document : les écrans et formulaires du joueur restent intacts. */
#idle-demo-overlay { position: fixed; inset: 0; z-index: 100000; background: #10131c; }
#idle-demo-overlay iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.idle-demo-hint { position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; padding: 8px 12px;
  text-align: center; color: #fff; background: #10131ce8; font-size: 12px; pointer-events: none; }
#idle-demo-learn { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: min(90vw, 680px); padding: 18px 30px; border: 2px solid #f5df9a; border-radius: 10px;
  color: #fff4c9; background: #111827e6; box-shadow: 0 0 22px #f5df9a88, inset 0 0 14px #f5df9a33;
  font-size: clamp(18px, 3vw, 34px); font-weight: 800; letter-spacing: .04em; text-align: center;
  text-transform: uppercase; cursor: pointer; animation: idle-demo-callout 14s linear infinite; }
#idle-demo-learn:hover, #idle-demo-learn:focus-visible { color: #fff; border-color: #fff;
  box-shadow: 0 0 32px #fff2b8cc, inset 0 0 18px #fff2b855; }
@keyframes idle-demo-callout {
  0%, 42%, 76%, 100% { opacity: 0; visibility: hidden; }
  45%, 51%, 57%, 63%, 69%, 73% { opacity: 1; visibility: visible; }
  48%, 54%, 60%, 66%, 72% { opacity: .28; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  #idle-demo-learn { animation: idle-demo-callout-reduced 14s linear infinite; }
  @keyframes idle-demo-callout-reduced {
    0%, 42%, 76%, 100% { opacity: 0; visibility: hidden; }
    45%, 73% { opacity: 1; visibility: visible; }
  }
}
.idle-demo-toggle { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.idle-demo-toggle input { width: auto; }
#demo-caption { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 20000;
  max-width: 90%; margin: 0; padding: 8px 16px; border-radius: 8px; background: #10131ce8;
  color: #f6e7bd; text-align: center; font-size: 13px; pointer-events: none; }
.demo-mode .game-quick-menu, .demo-mode #replay-controls { display: none !important; }

/* Portrait : taille gérée par les règles mobiles existantes.
   --landscape-board-size n'a volontairement aucun effet ici. */
@media (orientation: portrait) {
  .game-stage .board {
    height: 100% !important;
  }
}

/* ========================================================================
   Profil Demo — borne de découverte (voir demo-profile.js).
   ===================================================================== */
/* Le défilement reste autorisé : la borne est verrouillée au niveau de
   l'appareil (Accès guidé sur iPad), plus par la page. */
/* Commandes réservées à l'organisateur, absentes de la borne. */
body.demo-profile #fullscreen-toggle,
body.demo-profile #fullscreen-button,
body.demo-profile #clear-cache-menu,
body.demo-profile #export-game {
  display: none !important;
}

/* Menu Demo : reprend l'écran-titre (.title-screen / .title-frame /
   .title-nav), avec des entrées plus grandes et un sous-titre sous chacune. */
/* ▼ RÉGLAGE — hauteur du menu Demo. 0dvh = centré verticalement ; une valeur
   positive le descend, une valeur négative le remonte. "dvh" = pourcentage de
   la hauteur de l'écran (15dvh = 15 % plus bas), donc identique sur PC, iPad
   et téléphone. */
.demo-home { --demo-menu-offset: 45dvh; }
/* ▼ RÉGLAGE — taille des caractères du menu Demo : entrées (TUTORIEL…) et
   sous-titres ("Apprendre les règles…"). clamp(minimum, idéal, maximum) :
   la taille suit la largeur d'écran (vw) sans sortir de ces bornes. */
.demo-home {
  --demo-menu-font-size: clamp(.11rem, 1.7vw, 1.2rem);
  --demo-menu-hint-size: clamp(.7rem, 1vw, .85rem);
}
.demo-nav { gap: clamp(1.1rem, 3dvh, 2rem); margin-top: var(--demo-menu-offset); }
.demo-nav .demo-nav-item {
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding-left: 1.5rem;
  font-size: var(--demo-menu-font-size);
  letter-spacing: .14em;
}
.demo-nav .demo-nav-item::before { top: .45em; }
.demo-nav .demo-nav-item small {
  color: rgba(237, 230, 219, .62);
  font: 500 var(--demo-menu-hint-size) Inter, "Segoe UI", sans-serif;
  letter-spacing: .04em;
  text-transform: none;
}
.demo-nav .demo-nav-item small:empty { display: none; }
@media (max-height: 520px) and (orientation: landscape) {
  .demo-nav { gap: .6rem; }
  .demo-nav .demo-nav-item { font-size: 1.05rem; }
}

/* Défis chargés dans un cadre plein écran. */
.demo-trials-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #080b10;
}
.demo-trials-overlay iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Fenêtre du mot de passe de sortie. */
.demo-exit-dialog {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(4, 6, 10, .72);
}
.demo-exit-panel {
  display: grid;
  gap: .8rem;
  width: min(380px, 92vw);
  padding: 1.5rem;
}
.demo-exit-panel h2 { margin: 0; font: 800 1.4rem Georgia, serif; }
.demo-exit-panel p { margin: 0; color: var(--muted); }
.demo-exit-code {
  display: block;
  min-height: 2.6rem;
  padding: .4rem;
  border: 1px solid var(--shindra-champagne-line);
  border-radius: 8px;
  background: #070b11;
  color: #f3e6c8;
  font-size: 1.5rem;
  letter-spacing: .45em;
  text-align: center;
}
.demo-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
button.demo-key {
  min-height: 3.4rem;
  font: 800 1.45rem Georgia, serif;
  touch-action: manipulation;
}
.demo-exit-error { min-height: 1.2em; color: #ff8992 !important; }
.demo-exit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

/* Compte à rebours avant la démo IDLE (10 dernières secondes). Ne capte
   aucun clic : toucher l'écran l'annule simplement. */
#idle-countdown {
  position: fixed;
  z-index: 99999;
  left: 50%;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: .2rem;
  min-width: 5.5rem;
  padding: .7rem 1.4rem;
  border: 1px solid rgba(240, 218, 180, .4);
  border-radius: 14px;
  color: #f5eadb;
  background: rgba(7, 11, 17, .88);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
}
.idle-countdown-label { font: 600 .9rem Inter, "Segoe UI", sans-serif; letter-spacing: .02em; }
.idle-countdown-value { font: 800 2.2rem/1 Georgia, serif; font-variant-numeric: tabular-nums; }

/* Pied du menu Demo : délai de veille réglable et Exit, à droite. */
.demo-footer-controls { display: flex; align-items: center; gap: 1rem; opacity: .8; }
/* Pas d'accroche en Demo : Veille et Exit seuls, alignés à droite. */
.demo-footer { justify-content: flex-end; }
.demo-idle { display: flex; align-items: center; gap: .45rem; color: #e8dfd2; font-size: .82rem; }
.demo-idle output { min-width: 3.6rem; text-align: center; font-weight: 700; }
button.demo-idle-step { min-width: 2.2rem; padding: .3rem .6rem; font-size: 1rem; touch-action: manipulation; }
button.demo-exit { padding: .45rem 1.1rem; font-size: .8rem; }

/* Confirmation dans le jeu (abandon…) : même fenêtre que le code Exit. */
#confirm-dialog { z-index: 9600; }
.confirm-panel { width: min(420px, 92vw); }
.confirm-message { color: #f3e6c8 !important; font-size: 1.05rem; line-height: 1.5; }

/* ========================================================================
   Bulles d'explication (coach.js) — Tutorial Fast.
   Quatre panneaux assombris et floutés laissent un "trou" net autour de
   l'élément mis en avant ; lui seul reste touchable.
   ===================================================================== */
.coach { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.coach-shade {
  position: fixed;
  pointer-events: auto;
  background: rgba(4, 6, 10, .64);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.coach-ring {
  position: fixed;
  border: 2px solid var(--shindra-champagne);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(var(--shindra-champagne-rgb), .16), 0 0 26px rgba(var(--shindra-champagne-rgb), .45);
  pointer-events: none;
  animation: coach-pulse 1.4s ease-in-out infinite;
}
@keyframes coach-pulse { 50% { box-shadow: 0 0 0 7px rgba(var(--shindra-champagne-rgb), .08), 0 0 34px rgba(var(--shindra-champagne-rgb), .6); } }
.coach-bubble {
  position: fixed;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 18px 20px;
  pointer-events: auto;
}
.coach-bubble h2 { margin: 0 0 .6rem; color: #fff0db; font: 800 clamp(1.35rem, 1.2rem + .5vw, 1.6rem) Georgia, serif; }
/* Texte du tutoriel bien lisible : plus grand que le reste de l'interface. */
.coach-text { color: #f1e9dd; font-size: clamp(1.06rem, .98rem + .35vw, 1.2rem); line-height: 1.55; }
.coach-text p { margin: 0 0 .7em; }
.coach-text strong { color: var(--shindra-champagne); }
.coach-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1rem; }
.coach-arrow {
  position: fixed;
  display: block;
  transform: translate(-50%, -50%) rotate(var(--arrow-rotation, 0deg));
  pointer-events: none;
  animation: coach-arrow-pulse .8s ease-in-out infinite alternate;
}
.coach-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.coach-arrow path {
  fill: #fffdf6;
  stroke: rgba(var(--shindra-champagne-rgb), .9);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255, 244, 214, .95));
}
/* Pleine lumière puis nettement atténuée : l'œil est attiré vers les côtés. */
@keyframes coach-arrow-pulse { from { opacity: 1; } to { opacity: .28; } }
/* Plateau d'exemple (fin de partie) affiché dans la bulle. */
.coach-board { width: min(300px, 72vw); max-width: none; margin: 14px auto 4px; gap: 5px; padding: 6px; }
.coach-board .cell { padding: 0; }
.coach-board .card { position: relative; }
/* Cartes gagnantes de l'exemple : flash blanc bref, puis une seconde de
   pause, en boucle (même esprit que le flash blanc des cartes fortes). */
.coach-flash {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 0 14px 5px rgba(255, 252, 240, .85);
  opacity: 0;
  pointer-events: none;
  animation: coach-white-flash 1.5s ease-out infinite;
}
@keyframes coach-white-flash {
  0% { opacity: 0; }
  10% { opacity: .95; }
  33%, 100% { opacity: 0; }
}