/* ==========================================================================
   Traîtres à bord ! — interface web
   Palette tirée de la boîte : cobalt (Pirates) / sang (Mutins), parchemin,
   corail, noir chaud. Polices auto-hébergées : Anton (titres), Cabin (texte).
   ========================================================================== */

@font-face { font-family: 'Anton'; src: url('/fonts/anton-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabin'; src: url('/fonts/cabin-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabin'; src: url('/fonts/cabin-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabin'; src: url('/fonts/cabin-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ink: #1c1311;
  --night: #0d0807;
  --paper: #f3e3bd;
  --paper-2: #fff6e0;
  --parch: #d8b87d;
  --dune: #a8742f;
  --dune-d: #7a4f1e;
  --blood: #6b1a17;
  --blood-d: #3d0e0c;
  --cobalt: #4a7bc2;
  --cobalt-d: #243a6e;
  --coral: #c64e4d;
  --gold: #cfae62;

  --plus: #2d6cb6;
  --minus: #b3282d;
  --zero: #5d4f94;
  --act: #8f7f1f;
  --plank: #26252a;

  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Cabin', 'Trebuchet MS', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--parch);
  color: var(--ink);
  font: 400 1rem/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body::before { /* dunes du bas de page, comme dans le livret */
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34vh;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 150C200 70 380 230 620 150S1020 60 1200 140V300H0Z' fill='%23a8742f'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--cobalt-d); outline-offset: 2px; }
.topbar :focus-visible, .table :focus-visible, .rolebar :focus-visible { outline-color: var(--gold); }

.ico { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----- Ruban de titre (comme « MATÉRIEL » dans le livret) ----- */
.ribbon { display: inline-block; margin: 0; transform: rotate(-1.2deg); filter: drop-shadow(4px 4px 0 var(--ink)); }
.ribbon > span {
  display: block;
  padding: .28em 1.3em .2em;
  font: 400 clamp(1.35rem, 4.5vw, 1.9rem)/1.1 var(--font-display);
  letter-spacing: .05em;
  color: #fff;
  background: var(--blood);
  clip-path: polygon(0 6%, 100% 0, 98% 94%, 2% 100%);
}
.ribbon.blue > span { background: var(--cobalt-d); }

/* ----- Boutons ----- */
.btn {
  --bg: var(--blood); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 2.75rem; padding: .55em 1.2em;
  border: 3px solid var(--ink); border-radius: 12px;
  background: var(--bg); color: var(--fg);
  font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .45; box-shadow: 0 4px 0 rgba(28, 19, 17, .45); }
.btn-coral { --bg: var(--coral); }
.btn-blue { --bg: var(--cobalt-d); }
.btn-ghost { --bg: var(--paper-2); --fg: var(--ink); }
.btn-gold { --bg: var(--gold); --fg: var(--ink); }
.btn-small { min-height: 2.2rem; padding: .3em .8em; font-size: .88rem; border-width: 2px; border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
.btn-block { width: 100%; }
.link-btn { padding: .2em .1em; border: 0; background: none; font-weight: 700; color: var(--blood); text-decoration: underline; text-underline-offset: .2em; }

.input {
  width: 100%; min-height: 2.9rem; padding: .5em .85em;
  border: 3px solid var(--ink); border-radius: 12px;
  background: var(--paper-2); font-weight: 600;
}
.input::placeholder { color: #8a7a62; font-weight: 400; }
.code-input { font: 400 1.5rem/1 var(--font-display); letter-spacing: .3em; text-align: center; text-transform: uppercase; padding-left: .9em; }
.field { display: grid; gap: .3rem; font-weight: 700; }

.panel {
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--paper);
  border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
}

/* ==========================================================================
   Accueil
   ========================================================================== */

.home { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(1.2rem, 4vh, 2.5rem) 1rem 0;
  text-align: center;
  background: linear-gradient(90deg, var(--cobalt) 0 50%, var(--blood) 50% 100%);
}
.hero::after {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(90deg, var(--cobalt-d) 0 50%, var(--blood-d) 50% 100%);
}
.hero-halo {
  position: absolute; z-index: -1; left: 50%; top: 4%;
  width: min(86vw, 560px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(90deg, var(--gold) 0 50%, #8e763f 50% 100%);
}
.hero-hat { display: block; width: min(68vw, 400px); height: auto; margin: clamp(.5rem, 3vh, 1.5rem) auto 0; color: var(--night); --cut: #3a3a3a; }
.logo-plate {
  display: inline-block; margin-top: -.6rem; padding: 1.1rem clamp(2rem, 9vw, 4.5rem) 1rem;
  background: var(--night);
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}
.logo {
  margin: 0; color: #fff; text-align: center;
  font: 400 clamp(3rem, 13vw, 6.2rem)/.92 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase;
}
.logo span { display: block; }
.logo .skull-o { display: inline-block; width: .82em; height: .82em; margin: 0 .02em; vertical-align: -.06em; color: var(--coral); }
.hero-sub { margin: 0; padding: .3rem 0 1.2rem; color: #fff; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .12em; }

.home-body { position: relative; flex: 1; padding: 2.4rem 1rem 3rem; background: var(--coral); color: #fff; }
.home-body::before {
  content: ''; position: absolute; left: 0; right: 0; top: -30px; height: 31px;
  background: var(--coral); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.tagline { max-width: 34rem; margin: 0 auto 1.6rem; text-align: center; font-size: clamp(1.25rem, 4.2vw, 1.7rem); line-height: 1.25; }
.tagline b { font-weight: 700; }
.join-card { max-width: 34rem; margin: 0 auto; color: var(--ink); display: grid; gap: 1rem; }
.join-grid { display: grid; gap: .7rem; }
.join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.divider { display: flex; align-items: center; gap: .8rem; margin: .1rem 0; font-weight: 600; color: #6b5a45; }
.divider::before, .divider::after { content: ''; flex: 1; height: 2px; background: rgba(28, 19, 17, .25); }
.resume { padding: .8rem 1rem; background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; display: grid; gap: .5rem; justify-items: start; }
.resume p { margin: 0; font-weight: 600; }
.home-foot { margin-top: 1.4rem; text-align: center; }
.home-foot .link-btn { color: #fff; }

/* ==========================================================================
   Salon d'attente
   ========================================================================== */

.shell { max-width: 1040px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.shell-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.logo-sm { font: 400 1.55rem/1 var(--font-display); letter-spacing: .04em; color: var(--blood); text-transform: uppercase; }
.top-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; margin-top: 1.4rem; align-items: stretch; } /* salon à gauche, discussion à droite */
.code-box { display: flex; align-items: center; gap: .9rem 1.2rem; flex-wrap: wrap; margin: .9rem 0 .3rem; }
.code { margin: 0; padding-left: .18em; font: 400 clamp(2.8rem, 10vw, 4.2rem)/1 var(--font-display); letter-spacing: .18em; color: var(--blood); }
.hint { margin: .2rem 0 0; color: #5a4833; font-size: .95rem; }
.roster { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
.roster li { display: flex; align-items: center; gap: .7rem; padding: .45rem .7rem; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 12px; }
.roster .who { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.roster .nm { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster .sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; }
.roster .kind { color: #6b5a45; font-size: .78rem; font-weight: 600; }
.roster .avatar { width: 2.9rem; height: 2.9rem; }
.avatar {
  --c: var(--cobalt);
  width: 2.4rem; height: 2.4rem; flex: none; display: block; overflow: hidden;
  border-radius: 50%; border: 2px solid var(--ink); background: var(--c);
}
.avatar svg { display: block; width: 100%; height: 100%; }
.badge { padding: .08em .6em; border-radius: 99px; background: var(--ink); color: #fff; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.badge-host { background: var(--gold); color: var(--ink); }
.badge-off { background: #8a7e6b; }
.setup-note { padding: .7rem .9rem; border-left: 5px solid var(--cobalt-d); background: var(--paper-2); border-radius: 0 12px 12px 0; }
.setup-note p { margin: 0; }
.lobby-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; align-items: center; }
.feed-panel { display: flex; flex-direction: column; min-height: 24rem; padding: 0; overflow: hidden; }
.feed-panel .side-head { border-radius: 15px 15px 0 0; }

/* Avatars animés : les yeux clignent, la tête se balance (décalage propre à chaque joueur via --blink-d / --sway-d). */
.portrait .eyes { transform-origin: 120px 119px; animation: blink var(--blink-t, 4.6s) infinite; animation-delay: var(--blink-d, 0s); }
.portrait .hd { transform-origin: 120px 205px; animation: headSway 5.4s ease-in-out infinite; animation-delay: var(--sway-d, 0s); }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.07); } 96% { transform: scaleY(1); } }
@keyframes headSway { 0%, 100% { transform: rotate(-1.8deg) translateY(0); } 25%, 75% { transform: rotate(0deg) translateY(-1.6px); } 50% { transform: rotate(1.8deg) translateY(0); } }
.portrait .pony { transform-origin: 76px 84px; animation: ponySwing 3.4s ease-in-out infinite; animation-delay: var(--sway-d, 0s); }
@keyframes ponySwing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
.no-anim .portrait .eyes, .no-anim .portrait .hd, .no-anim .portrait .pony { animation: none; }

/* Fenêtre de choix du personnage (à l'arrivée dans le salon, puis bouton « Modifier ») */
#avatar-root { position: fixed; inset: 0; z-index: 58; pointer-events: none; }
#avatar-root .scrim { z-index: 58; pointer-events: auto; }
.dialog.wide { width: min(100%, 60rem); }
.avatar-intro { margin: .2rem 0 .4rem; max-width: 46rem; font-weight: 600; color: #5a4833; }
.dialog-actions.sticky { position: sticky; bottom: -1.2rem; margin: 1rem -1.3rem -1.2rem; padding: .8rem 1.3rem 1.2rem; background: linear-gradient(rgba(243, 227, 189, 0), var(--paper) 40%); }
.avatar-validate { min-width: 14rem; min-height: 3rem; font-size: 1.1rem; }
.avatar-later { min-height: 3rem; }

/* Personnalisation du personnage */
.editor-body { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1rem 1.3rem; margin-top: 1rem; align-items: start; }
.preview-col { display: grid; gap: .55rem; justify-items: center; }
.preview-card {
  --c: var(--cobalt); --c-light: #b8cbe6;
  position: relative; width: 100%; aspect-ratio: 240 / 280; overflow: hidden;
  border: 4px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink);
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 246, 224, .85) 0 16%, rgba(255, 246, 224, 0) 52%),
    repeating-conic-gradient(from 6deg at 50% 40%, var(--c) 0 6deg, var(--c-light) 6deg 14deg);
}
.preview-card svg { display: block; width: 100%; height: 100%; }
.preview-name { font: 400 1.3rem/1 var(--font-display); letter-spacing: .04em; color: var(--blood); text-align: center; }
.ed-title { margin: 0 0 .35rem; font: 400 1.1rem/1 var(--font-display); letter-spacing: .05em; color: var(--blood); }
.ed-section + .ed-section { margin-top: .9rem; }
.kind-group + .kind-group { margin-top: .6rem; }
.ed-sub { display: block; margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; color: #5a4833; }
.kind-grid { --c: var(--cobalt); display: grid; grid-template-columns: repeat(auto-fill, minmax(4.3rem, 1fr)); gap: .4rem; }
.kind-btn {
  display: grid; justify-items: center; gap: .2rem; padding: .3rem .15rem .35rem; text-align: center;
  background: var(--paper-2); border: 3px solid var(--ink); border-radius: 12px; font-size: .68rem; font-weight: 700; line-height: 1.1;
}
.kind-btn[aria-pressed="true"] { background: var(--gold); box-shadow: 0 0 0 3px var(--cobalt-d); }
.kind-btn:not(:hover):not(:focus-visible):not([aria-pressed="true"]) .portrait * { animation-play-state: paused; }
.kind-thumb { width: 3rem; height: 3rem; overflow: hidden; border-radius: 50%; border: 2px solid var(--ink); background: var(--c); }
.kind-thumb svg { display: block; width: 100%; height: 100%; }
.swatches, .extras { display: flex; flex-wrap: wrap; gap: .4rem; }
.swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid var(--ink); background: var(--sw); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.extras .choice[aria-pressed="true"] { background: var(--cobalt-d); color: #fff; }

/* ==========================================================================
   Partie
   ========================================================================== */

.game {
  --card-h: min(clamp(6.6rem, 21dvh, 12rem), 37vw);
  display: grid; height: 100vh; height: 100dvh;
  grid-template-columns: minmax(0, 1fr) 22rem;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem .9rem; flex-wrap: wrap;
  padding: .45rem 1rem; background: var(--ink); color: #fff; border-bottom: 4px solid var(--night);
}
.topbar .logo-sm { color: #fff; }
.room-tag { font-weight: 700; font-size: .9rem; color: var(--gold); }
.stats { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.stat { display: inline-flex; align-items: center; gap: .4rem; padding: .18em .75em; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: .88rem; font-weight: 600; }
.stat b { font: 400 1.1rem/1.2 var(--font-display); letter-spacing: .04em; color: var(--gold); }
.top-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.top-btns .btn { gap: .4em; }
.journal-btn { display: none; position: relative; }
.journal-btn .dot { position: absolute; top: -.45rem; right: -.4rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 99px; background: var(--coral); color: #fff; font-size: .74rem; line-height: 1.25rem; text-align: center; }
.top-btns .btn { --bg: rgba(255, 255, 255, .14); --fg: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.top-btns .btn:active:not(:disabled) { transform: translateY(1px); }

.rolebar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .2rem .7rem;
  padding: .35rem 1rem; color: #fff; background: var(--cobalt-d); border-bottom: 4px solid var(--ink);
}
.rolebar.mutin { background: var(--blood); }
.rolebar.hidden-role { background: #4f4538; }
.rolebar.out { background: #6d6252; }
.rolebar .who { font: 400 1.2rem/1 var(--font-display); letter-spacing: .05em; white-space: nowrap; }
.rolebar .goal { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rolebar .btn { --bg: rgba(0, 0, 0, .25); --fg: #fff; border-color: rgba(255, 255, 255, .6); box-shadow: none; }

/* La zone de jeu tient dans la hauteur de l'écran : équipage, table (qui s'adapte), puis
   barre d'action et main toujours visibles en bas. Aucun défilement dans le cas normal. */
.stage {
  grid-column: 1; grid-row: 3; min-height: 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .6rem .8rem calc(.5rem + env(safe-area-inset-bottom));
}

/* Équipage */
.crew { flex: none; display: flex; gap: .5rem; overflow-x: auto; padding: .1rem .15rem .4rem; scrollbar-width: thin; }
.crew > :first-child { margin-left: auto; }
.crew > :last-child { margin-right: auto; }
.tile {
  position: relative; flex: none; display: grid; justify-items: center; gap: .15rem; width: 5.9rem;
  padding: .4rem .3rem; text-align: center;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink);
}
.tile .avatar { width: 2.7rem; height: 2.7rem; }
.tile .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .88rem; line-height: 1.15; }
.tile-tags { display: flex; gap: .2rem; justify-content: center; min-height: 1.15rem; }
.tile.turn { background: var(--gold); animation: bob 1.8s ease-in-out infinite; }
.tile.turn::before { content: ''; position: absolute; top: -.62rem; left: 50%; transform: translateX(-50%); border: .42rem solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.tile.out { opacity: .72; background: #cbbd9f; }
.tile.out .avatar { filter: grayscale(1); }
.tile.out .nm { text-decoration: line-through; text-decoration-thickness: 2px; }
.slots { display: flex; gap: .25rem; }
.slot { width: 1.05rem; height: .45rem; border: 2px solid var(--ink); border-radius: 2px; background: transparent; }
.slot.on { background: var(--dune-d); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }
.tag { padding: 0 .5em; border-radius: 99px; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.tag-pirate { background: var(--cobalt-d); }
.tag-mutin { background: var(--blood); }
.tag-you { background: var(--ink); }
.tag-off { background: #8a7e6b; }
@keyframes bob { 50% { transform: translateY(-3px); } }

/* Table : prend toute la hauteur restante ; les piles s'adaptent à l'espace. */
.table {
  flex: 1 1 0; min-height: 5rem; display: flex; flex-direction: column; gap: .2rem; overflow: hidden;
  padding: .5rem .8rem .6rem; color: #fff;
  border: 4px solid var(--ink); border-radius: 20px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 76px),
    linear-gradient(180deg, #4d2d1f, #2f1a12);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .45), 0 5px 0 var(--ink);
}
.last-event { flex: none; max-width: 38rem; margin: 0 auto; min-height: 1.3em; text-align: center; font-size: .9rem; line-height: 1.3; color: #f1deb4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-event b { color: #fff; }
.piles { flex: 1 1 0; min-height: 0; display: flex; justify-content: center; align-items: center; gap: clamp(.8rem, 5vw, 3rem); }
.pile { display: grid; justify-items: center; gap: .2rem; font-weight: 600; font-size: .82rem; color: #f1deb4; }
.pile-art { position: relative; width: clamp(2.2rem, 7.5dvh, 4.6rem); aspect-ratio: 5 / 7; }
.pile-art .card-back { position: absolute; inset: 0; }
.pile-art .card-back:nth-child(1) { transform: translate(-4px, 4px); opacity: .85; }
.pile-art .card-back:nth-child(2) { transform: translate(-2px, 2px); }
.pile.empty .pile-art { opacity: .3; }
.pile.discard .card-back { background: #5a4a40; }
.pile.discard .card-back .ico { color: #b8a690; }
.pile-chest .pile-art { width: clamp(3rem, 10.5dvh, 6.8rem); aspect-ratio: 1; color: #d9b36a; --cut: #2f1a12; --gold: #f0d58a; }
.pile-chest .pile-art .ico { width: 100%; height: 100%; }
.pile-name { font-weight: 700; color: #fff; line-height: 1.1; }
.pile .count { font: 400 1.25rem/1 var(--font-display); letter-spacing: .05em; color: #fff; }
.pile .count small { font: 600 .75rem var(--font-body); letter-spacing: 0; color: #f1deb4; margin-left: .25rem; }

.card-back {
  display: grid; place-items: center; border: 3px solid #fff; border-radius: 10px;
  background: var(--blood); box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}
.card-back .ico { width: 46%; height: 46%; color: var(--gold); }

/* Bas d'écran : barre d'action (une ou deux lignes) puis la main. */
.dock { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; justify-items: center; min-width: 0; }
.action-panel {
  width: min(100%, 58rem); min-width: 0; min-height: 3.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  padding: .4rem .75rem; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
}
.action-panel.idle { background: rgba(255, 246, 224, .5); border-style: dashed; box-shadow: none; color: #5a4833; }
.action-panel.you { background: var(--gold); animation: glowPulse 2.2s ease-in-out infinite; }
.bar-text { flex: 1 1 11rem; min-width: 0; font-size: .93rem; line-height: 1.25; }
.bar-text b { font-weight: 700; }
.bar-label { font: 400 1.15rem/1 var(--font-display); letter-spacing: .04em; color: var(--blood); white-space: nowrap; }
.action-panel .choices { display: flex; flex-wrap: wrap; gap: .35rem; }
.action-panel .btn { min-height: 2.4rem; padding: .3em .95em; }
.choice {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.4rem; padding: .2em .85em;
  background: var(--paper-2); border: 3px solid var(--ink); border-radius: 12px; font-weight: 700;
}
.choice[aria-pressed="true"] { background: var(--cobalt-d); color: #fff; }
.choice small { font-weight: 600; opacity: .8; font-size: .72rem; }
.choice .claim { font: 400 1.25rem/1 var(--font-display); letter-spacing: .03em; }
.panel-end { margin-left: auto; }
.lbl-short { display: none; }
.voice-diag { margin-top: .9rem; padding: .5rem .8rem; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-2); }
.voice-diag summary { cursor: pointer; font-weight: 700; }
.diag-body { display: grid; gap: .4rem; margin-top: .5rem; }
.diag-line { margin: 0; font-size: .92rem; }
.diag-warn { margin: 0; padding: .4rem .6rem; border-radius: 8px; background: #f6d9a0; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.diag-log { list-style: none; margin: .3rem 0 0; padding: 0; max-height: 11rem; overflow: auto; font-size: .82rem; }
.diag-log li { padding: .2rem 0; border-top: 1px dashed rgba(28, 19, 17, .25); overflow-wrap: anywhere; }
.menu-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
@keyframes glowPulse { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 5px rgba(207, 174, 98, .55); } }

/* Main : la taille des cartes suit la hauteur de l'écran (--card-h). */
.hand { --card-w: calc(var(--card-h) * 5 / 7); flex: none; display: flex; justify-content: center; gap: clamp(.35rem, 1.6vw, .9rem); padding: 1rem 0 .2rem; }
.hand.dim .card { filter: saturate(.7) brightness(.92); }
.hand .card.incoming { visibility: hidden; }
.hand.lift .card { animation: lift .55s cubic-bezier(.2, 1.2, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes lift { from { transform: translateY(70%) rotate(5deg); opacity: 0; } }
.card.landed { animation: landed .22s ease-out; }
@keyframes landed { 0% { transform: scaleX(.05); } 100% { transform: none; } }
.no-anim .hand.lift .card, .no-anim .action-panel.you, .no-anim .tile.turn { animation: none; }

/* Cartes */
.card {
  --c: var(--plus); --cut: var(--c);
  position: relative; container-type: inline-size; display: block; padding: 0;
  width: var(--card-w, clamp(5.3rem, 27vw, 8.6rem)); aspect-ratio: 5 / 7;
  border: .26rem solid #fff; border-radius: 12px; background: var(--c); color: #fff; text-align: center;
  box-shadow: 0 0 0 2px var(--ink), 0 5px 0 2px var(--ink);
  transition: transform .14s ease, box-shadow .14s ease;
}
.card:disabled { color: #fff; cursor: default; }
.card:not(:disabled):hover { transform: translateY(-.35rem); }
.card.sel { transform: translateY(-.8rem); box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--ink), 0 14px 16px rgba(0, 0, 0, .4); }
.card.c-plus { --c: var(--plus); }
.card.c-minus { --c: var(--minus); }
.card.c-zero { --c: var(--zero); }
.card.c-plank { --c: var(--plank); }
.card.c-act { --c: var(--act); }
.card .corner { position: absolute; top: 5cqw; font: 400 15cqw/1 var(--font-display); }
.card .corner.l { left: 8cqw; }
.card .corner.r { right: 8cqw; }
.card .art { position: absolute; left: 50%; top: 45%; width: 46%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); color: rgba(255, 255, 255, .94); }
.card.act .art { top: 33%; width: 40%; }
.card .name {
  position: absolute; left: 7%; right: 7%; top: 54%; padding: .2em .1em .1em;
  background: var(--blood); border-radius: 3px; color: #fff;
  font: 400 10.5cqw/1.15 var(--font-display); letter-spacing: .04em; text-transform: uppercase;
}
.card .desc { position: absolute; left: 9%; right: 9%; bottom: 5%; font-size: 7.4cqw; line-height: 1.22; font-weight: 600; }
.card.butin .desc { bottom: 7%; }
@container (max-width: 112px) {
  .card .desc { display: none; }
  .card .name { font-size: 12.5cqw; top: 60%; }
  .card.butin .art { top: 52%; }
}
.card .pick {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%); width: 2rem; height: 2rem;
  display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%;
  background: var(--gold); color: var(--ink); font: 400 1.1rem/1 var(--font-display);
}
.card.mini { width: 2.7rem; border-width: .14rem; border-radius: 6px; box-shadow: 0 0 0 2px var(--ink); display: grid; place-items: center; }
.card.mini .v { font: 400 1.25rem/1 var(--font-display); }

/* Journal / discussion */
.side { grid-column: 2; grid-row: 3; min-height: 0; display: flex; flex-direction: column; background: #e8d3a4; border-left: 4px solid var(--ink); }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .9rem; border-bottom: 3px solid var(--ink); background: var(--paper); font: 400 1.25rem/1.1 var(--font-display); letter-spacing: .05em; color: var(--blood); }
.feed { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.feed-list { flex: 1; min-height: 0; overflow-y: auto; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .45rem; }
.msg { font-size: .93rem; line-height: 1.35; overflow-wrap: anywhere; }
.msg.chat .who { font-weight: 700; color: var(--cobalt-d); }
.msg.chat.mine .who { color: var(--blood); }
.msg.event { padding-left: .55rem; border-left: 4px solid var(--dune); color: #4a3626; font-size: .88rem; }
.msg.event.danger { border-left-color: var(--blood); color: var(--blood-d); font-weight: 600; }
.msg.event.win { border-left-color: var(--cobalt-d); font-weight: 700; }
.msg.sys { font-size: .8rem; color: #6b5a45; font-style: italic; }
.chat-form { display: flex; gap: .45rem; padding: .6rem; border-top: 3px solid var(--ink); background: var(--parch); }
.chat-input { flex: 1; min-width: 0; min-height: 2.4rem; padding: .3em .7em; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper-2); }

.side-close { display: none; }

/* Réglages du son */
.sound-btn { gap: .4em; }
.hero .sound-btn { position: absolute; z-index: 3; top: .8rem; right: .8rem; }
.sound-rows { display: grid; gap: 1.1rem; margin: .6rem 0 .2rem; }
.sound-row { display: grid; gap: .5rem; padding: .7rem .9rem .8rem; background: var(--paper-2); border: 3px solid var(--ink); border-radius: 14px; }
.sound-row .head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; font-weight: 700; }
.sound-row .vol { display: flex; align-items: center; gap: .8rem; }
.sound-row output { min-width: 3.2em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sound-row input[type="range"] { flex: 1; min-width: 0; height: 2rem; accent-color: var(--blood); }

/* Modales */
.scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; overflow: auto; background: rgba(20, 10, 8, .74); }
.dialog {
  width: min(100%, 40rem); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.2rem 1.3rem 1.2rem;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--ink);
  animation: pop .18s ease-out;
}
.dialog > .ribbon { margin-bottom: .9rem; }
.dialog p { margin: .5rem 0; }
.dialog h3 { margin: 1.1rem 0 .3rem; font: 400 1.3rem/1.1 var(--font-display); letter-spacing: .04em; color: var(--blood); }
.dialog-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1.1rem; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }

.spy-row { display: flex; gap: clamp(.5rem, 3vw, 1.1rem); justify-content: center; flex-wrap: wrap; margin: 1.2rem 0 .6rem; }
.spy-slot { display: grid; justify-items: center; gap: .6rem; }
.spy-slot .lbl { font-size: .82rem; font-weight: 700; color: var(--blood); min-height: 1.2em; }
.spy-slot .moves { display: flex; gap: .35rem; }
.spy-slot .card { width: clamp(5.6rem, 22vw, 7.4rem); }
.chev { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chev.flip { transform: scaleX(-1); }

.result-head { margin: 0 0 .4rem; font: 400 clamp(2rem, 7vw, 3rem)/1 var(--font-display); letter-spacing: .03em; }
.result-head.pirates { color: var(--cobalt-d); }
.result-head.mutins { color: var(--blood); }
.verdict { display: inline-block; padding: .1em .7em; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem; }
.verdict.won { background: var(--gold); color: var(--ink); }
.reveal-cards { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.reveal-total { font-weight: 700; }
.roles { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.roles li { display: flex; align-items: center; gap: .55rem; padding: .35rem .55rem; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 10px; }
.roles .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }

.rules-table { width: 100%; border-collapse: collapse; margin: .4rem 0; font-size: .95rem; }
.rules-table th, .rules-table td { padding: .25rem .5rem; border-bottom: 2px solid rgba(28, 19, 17, .2); text-align: center; }
.rules-table th { font-weight: 700; }
.rules ul { margin: .3rem 0; padding-left: 1.2rem; }
.rules li { margin: .25rem 0; }

#toasts { position: fixed; top: .8rem; left: 50%; z-index: 80; display: grid; gap: .5rem; width: min(92vw, 26rem); transform: translateX(-50%); pointer-events: none; }
.toast { padding: .6rem .9rem; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: pop .18s ease-out; }
.toast.err { background: var(--blood); }
.conn { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .4rem; background: var(--coral); color: #fff; text-align: center; font-weight: 700; }
.splash { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; text-align: center; background: var(--cobalt-d); color: #fff; font: 400 1.6rem/1.2 var(--font-display); letter-spacing: .06em; }

/* ==========================================================================
   Animations : scène BD, bandeau de tour, cartes volantes
   ========================================================================== */

#fx-root, #scene-root { position: fixed; inset: 0; pointer-events: none; }
#fx-root { z-index: 64; }
#scene-root { z-index: 70; }

.flyer { position: fixed; margin: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; }

/* Bandeau « À toi de jouer ! » : ton personnage dans un hublot, un galion sur des vagues. */
.turn-splash { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.turn-banner {
  position: relative; container-type: size; overflow: hidden;
  width: 112%; height: clamp(9.5rem, 30dvh, 15rem);
  border-block: .45rem solid var(--ink); background: #cfe6f0; box-shadow: 0 .8rem 0 rgba(0, 0, 0, .35);
  transform: rotate(-2deg); animation: bannerRun 2.4s cubic-bezier(.2, .9, .2, 1) both;
}
@keyframes bannerRun {
  0% { transform: translateX(-112%) rotate(-2deg); }
  14% { transform: translateX(2%) rotate(-2deg); }
  19% { transform: translateX(0) rotate(-2deg); }
  80% { transform: translateX(0) rotate(-2deg); }
  100% { transform: translateX(112%) rotate(-2deg); }
}
.tb-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 66% 36%, rgba(255, 246, 224, .95) 0 9%, rgba(255, 246, 224, 0) 38%),
    repeating-conic-gradient(from 6deg at 66% 36%, #a9d3e6 0 5deg, #cfe6f0 5deg 12deg);
}
.tb-sky::after { content: ''; position: absolute; inset: 0; opacity: .5; background: radial-gradient(rgba(28, 19, 17, .2) 1.2px, transparent 1.8px) 0 0 / 8px 8px; }

.tb-waves { position: absolute; left: 0; width: 200%; animation: waveScroll linear infinite; }
.tb-waves svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tb-waves.back { bottom: 0; height: 46cqh; animation-duration: 3.6s; }
.tb-waves.front { bottom: 0; height: 30cqh; animation-duration: 2.2s; animation-direction: reverse; }
@keyframes waveScroll { to { transform: translateX(-50%); } }

.tb-ship { position: absolute; left: 58%; bottom: 16cqh; height: 74cqh; aspect-ratio: 300 / 262; animation: shipSail 1.9s cubic-bezier(.2, .8, .3, 1) both; }
.tb-ship .ship { display: block; width: 100%; height: 100%; transform-origin: 50% 88%; animation: shipBob 1.1s ease-in-out infinite; filter: drop-shadow(0 1cqh 0 rgba(28, 19, 17, .35)); }
@keyframes shipSail { from { transform: translateX(-92cqw); } }
@keyframes shipBob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-2cqh); } }

.tb-head {
  position: absolute; left: 8.6%; top: 50%; height: 80cqh; aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%; overflow: hidden; background: var(--coat, #4a7bc2);
  border: 1.4cqh solid var(--ink); box-shadow: 0 0 0 1.4cqh var(--gold), 0 0 0 2.9cqh var(--ink);
  animation: headPop .42s cubic-bezier(.2, 1.7, .4, 1) .22s both;
}
.tb-head svg { display: block; width: 100%; height: 100%; animation: headBob .55s ease-in-out .7s 3; }
@keyframes headPop { from { transform: translateY(-50%) scale(0) rotate(-20deg); } }
@keyframes headBob { 50% { transform: translateY(-4%) scale(1.04); } }

.tb-title {
  position: absolute; left: 25%; top: 9%; padding: .1em .5em .14em; white-space: nowrap;
  background: var(--blood); color: #fff; border: 1.3cqh solid var(--ink); box-shadow: 1.6cqh 1.6cqh 0 var(--ink);
  font: 400 min(27cqh, 5.4cqw)/1 var(--font-display); letter-spacing: .05em; text-shadow: .6cqh .6cqh 0 var(--ink);
  transform: rotate(-2.5deg); animation: titleSlam .36s cubic-bezier(.2, 1.7, .4, 1) .5s both;
}
@keyframes titleSlam { from { transform: rotate(-2.5deg) scale(2.2); opacity: 0; } }

@container (max-width: 720px) {
  .tb-head { height: 66cqh; left: 10%; }
  .tb-ship { left: 55%; height: 60cqh; bottom: 17cqh; }
  .tb-title { left: 37%; top: 7%; font-size: min(19cqh, 6.2cqw); }
}

/* Scène BD : le personnage annonce son coup au porte-voix. */
.scene {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; cursor: pointer;
  background: rgba(18, 8, 6, .66); pointer-events: auto; animation: sceneIn .16s ease-out both;
}
.scene.out { pointer-events: none; animation: sceneOut .22s ease-in both; }
@keyframes sceneIn { from { opacity: 0; } }
@keyframes sceneOut { to { opacity: 0; } }

.scene-panel {
  --coat: #4a7bc2; --coat-light: #b8cbe6; --coat-dark: #2e4a79;
  position: relative; container-type: inline-size; overflow: hidden;
  width: min(94vw, 46rem, calc(66dvh * 4 / 3)); aspect-ratio: 4 / 3;
  border: 6px solid var(--ink); border-radius: 18px; background: var(--coat-light);
  box-shadow: 9px 9px 0 var(--ink); transform: rotate(-1.4deg);
  animation: panelSlam .42s cubic-bezier(.2, 1.35, .4, 1) both;
}
.scene.out .scene-panel { animation: panelOut .22s ease-in both; }
@keyframes panelSlam { 0% { transform: scale(.55) rotate(-8deg); opacity: 0; } 100% { transform: rotate(-1.4deg); } }
@keyframes panelOut { to { transform: scale(.94) rotate(-1.4deg); opacity: 0; } }

.scene-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 62% 40%, rgba(255, 246, 224, .9) 0 13%, rgba(255, 246, 224, 0) 46%),
    repeating-conic-gradient(from 8deg at 62% 40%, var(--coat) 0 5deg, var(--coat-light) 5deg 12deg);
}
.scene-bg::after { content: ''; position: absolute; inset: 0; opacity: .55; background: radial-gradient(rgba(28, 19, 17, .22) 1.3px, transparent 1.9px) 0 0 / 9px 9px; }

.scene-actor { position: absolute; left: -5%; bottom: -8%; width: 56%; aspect-ratio: 240 / 280; animation: actorIn .5s cubic-bezier(.2, 1.2, .3, 1) .12s both; }
.scene-portrait { width: 100%; height: 100%; transform-origin: 50% 85%; animation: shout .36s ease-in-out .55s 3; }
.scene-portrait svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .7cqw 0 rgba(28, 19, 17, .45)); }
@keyframes actorIn { from { transform: translateY(28%) scale(.9); opacity: 0; } }
@keyframes shout { 50% { transform: scale(1.035) rotate(-1deg); } }

.scene-mega { --mega-rot: -12deg; position: absolute; left: 56%; top: 64%; width: 62%; transform-origin: 3% 50%; transform: translateY(-50%) rotate(var(--mega-rot)); animation: megaIn .36s cubic-bezier(.2, 1.4, .4, 1) .3s both; }
.scene-mega svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 .6cqw 0 rgba(28, 19, 17, .4)); }
.megaphone .wave { opacity: 0; transform-box: fill-box; transform-origin: left center; animation: wave .6s ease-out infinite; }
.megaphone .w1 { animation-delay: .55s; }
.megaphone .w2 { animation-delay: .67s; }
.megaphone .w3 { animation-delay: .79s; }
@keyframes megaIn { from { transform: translateY(-50%) rotate(-60deg) scale(.3); opacity: 0; } to { transform: translateY(-50%) rotate(var(--mega-rot)) scale(1); opacity: 1; } }
@keyframes wave { 0% { opacity: 0; transform: translateX(-10px) scaleY(.8); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(10px) scaleY(1.05); } }

.scene-bubble {
  position: absolute; left: 52%; top: 24%; width: 46%; aspect-ratio: 200 / 160; container-type: inline-size; transform-origin: 0 60%;
  animation: bubblePop .4s cubic-bezier(.2, 1.6, .4, 1) var(--t-bubble, .5s) both, wobble 1.3s ease-in-out calc(var(--t-bubble, .5s) + .45s) infinite;
}
.scene-bubble .burst { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--paper-2); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(1.6cqw 1.8cqw 0 rgba(28, 19, 17, .9)); }
.scene-bubble .burst path { vector-effect: non-scaling-stroke; }
.bubble-text { position: absolute; inset: 15% 13%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; text-align: center; color: var(--ink); line-height: 1; }
.b-big { display: block; max-width: 100%; overflow-wrap: anywhere; font: 400 21cqw/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--blood); text-shadow: .8cqw .8cqw 0 rgba(28, 19, 17, .18); animation: bigBump .45s cubic-bezier(.2, 1.6, .4, 1) calc(var(--t-bubble, .5s) + .2s) both; }
.b-big.lg { font-size: 13.5cqw; }
.b-big.md { font-size: 10.5cqw; line-height: 1.02; }
.b-sub { font: 600 5.8cqw/1.15 var(--font-body); }
.tone-plus .b-big { color: var(--plus); }
.tone-minus .b-big { color: var(--minus); }
.tone-zero .b-big { color: var(--zero); }
@keyframes bubblePop { 0% { transform: scale(0) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes wobble { 50% { transform: rotate(-1.3deg) scale(1.02); } }
@keyframes bigBump { from { transform: scale(.35); opacity: 0; } }

.scene-corner { position: absolute; right: 3.5%; top: 4%; width: 15cqw; animation: cornerIn .4s cubic-bezier(.2, 1.5, .4, 1) var(--t-corner, .9s) both; }
.scene-corner.chest { aspect-ratio: 1; padding: 0; border: .9cqw solid var(--ink); border-radius: 2cqw; background: rgba(28, 19, 17, .82); color: #d9b36a; --cut: #2f1a12; --gold: #f0d58a; }
.scene-corner.chest > .ico { position: absolute; inset: 9%; width: 82%; height: 82%; }
.scene-corner .drop-card { position: absolute; left: 24%; top: -92%; width: 52%; aspect-ratio: 5 / 7; border-width: .5cqw; animation: dropIn .5s cubic-bezier(.55, 0, .85, .6) calc(var(--t-corner, .9s) + .15s) both; }
.scene-corner .card { --card-w: 100%; box-shadow: 0 0 0 2px var(--ink), 0 .8cqw 0 2px var(--ink); }
@keyframes cornerIn { from { transform: scale(.2) rotate(18deg); opacity: 0; } 70% { transform: scale(1.1) rotate(-4deg); } }
@keyframes dropIn { 0% { transform: rotate(-8deg); opacity: 1; } 80% { transform: translateY(95%) scale(.9); opacity: 1; } 100% { transform: translateY(120%) scale(.7); opacity: 0; } }

.scene-stamp {
  position: absolute; right: 4%; bottom: 5%; padding: .05em .55em; border: 1.1cqw solid currentColor; border-radius: 1cqw;
  font: 400 7.5cqw/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 246, 224, .94);
  transform: rotate(-9deg); animation: stampIn .35s cubic-bezier(.2, 1.7, .4, 1) calc(var(--t-bubble, .5s) + .5s) both;
}
.scene-stamp.pirate { color: var(--cobalt-d); }
.scene-stamp.mutin { color: var(--blood); }
@keyframes stampIn { from { transform: rotate(-9deg) scale(2.3); opacity: 0; } }
.scene-caption {
  position: absolute; left: 3%; top: 4%; max-width: 46%; padding: .28em .7em .32em; background: var(--gold); color: var(--ink);
  border: .8cqw solid var(--ink); font: 700 3.7cqw/1.15 var(--font-body); box-shadow: .9cqw .9cqw 0 var(--ink);
  transform: rotate(-1.5deg); animation: capIn .3s cubic-bezier(.2, 1.4, .4, 1) .2s both;
}
@keyframes capIn { from { transform: translateY(-40%) rotate(-1.5deg); opacity: 0; } }
.scene-skip { position: absolute; left: 0; right: 0; bottom: 1.2cqw; text-align: center; font: 600 2.5cqw var(--font-body); color: rgba(255, 246, 224, .95); text-shadow: 0 .3cqw 0 var(--ink), .3cqw 0 0 var(--ink), -.3cqw 0 0 var(--ink); animation: fadeIn .3s ease-out 1.1s both; }
@keyframes fadeIn { from { opacity: 0; } }

/* ==========================================================================
   Carte de rôle (début de partie)
   ========================================================================== */

#reveal-root { position: fixed; inset: 0; z-index: 72; pointer-events: none; }
.reveal {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; pointer-events: auto;
  background: radial-gradient(circle at 50% 45%, rgba(40, 10, 8, .86), rgba(6, 2, 2, .97));
  animation: sceneIn .3s ease-out both;
}
.reveal[data-stage="closing"] { pointer-events: none; animation: revealOut .45s ease-in both; }
@keyframes revealOut { to { opacity: 0; } }

.rv-panel {
  --team: #4a7bc2; --team-light: #cfe0f6; --team-dark: #1f3a73;
  position: relative; container-type: inline-size; overflow: hidden; background: #120a08;
  width: min(94vw, 46rem, calc(70dvh * 4 / 3)); aspect-ratio: 4 / 3;
  border: .6rem solid var(--ink); border-radius: 18px; box-shadow: 0 0 0 .25rem rgba(255, 246, 224, .14), 9px 9px 0 rgba(0, 0, 0, .6);
  animation: panelSlam .5s cubic-bezier(.2, 1.35, .4, 1) both;
}
.reveal[data-role="mutin"] .rv-panel { --team: #b83a33; --team-light: #f2c4bd; --team-dark: #5b1512; }
.rv-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: .4; background: radial-gradient(rgba(0, 0, 0, .3) 1.3px, transparent 1.9px) 0 0 / 9px 9px; }

/* Fond : rayons sombres tant que le rôle est caché, aux couleurs de l'équipe ensuite. */
.rv-bg { position: absolute; inset: -60%; animation: rvSpin 40s linear infinite; }
.rv-bg.dark { background: repeating-conic-gradient(from 0deg at 50% 50%, #2a1812 0 6deg, #160c09 6deg 14deg); }
.rv-bg.team { opacity: 0; transition: opacity .6s ease; background: repeating-conic-gradient(from 8deg at 50% 50%, var(--team) 0 6deg, var(--team-light) 6deg 14deg); animation-duration: 60s; }
.reveal[data-stage="revealed"] .rv-bg.team { opacity: 1; }
@keyframes rvSpin { to { transform: rotate(360deg); } }

/* Le personnage : une silhouette noire, qui prend la lumière à la révélation. */
.rv-actor { position: absolute; left: -6%; bottom: -10%; width: 44%; aspect-ratio: 240 / 280; z-index: 2; animation: actorIn .6s cubic-bezier(.2, 1.2, .3, 1) .2s both; }
.rv-actor svg { display: block; width: 100%; height: 100%; filter: brightness(0) drop-shadow(0 0 1.2cqw rgba(255, 246, 224, .2)); transition: filter .9s ease; }
.reveal[data-stage="revealed"] .rv-actor svg, .reveal[data-stage="closing"] .rv-actor svg { filter: drop-shadow(0 .8cqw 0 rgba(28, 19, 17, .5)); }

.rv-caption { position: absolute; left: 3%; top: 4%; z-index: 5; max-width: 46%; }
.rv-caption span {
  display: block; padding: .28em .7em .32em; background: var(--gold); color: var(--ink); border: .8cqw solid var(--ink);
  box-shadow: .9cqw .9cqw 0 var(--ink); font: 700 3.7cqw/1.15 var(--font-body); transform: rotate(-1.5deg);
}
.rv-cap-a { animation: capHold 2.4s ease-in both; }
.rv-cap-b { position: absolute; left: 0; top: 0; animation: capLate .5s ease-out 2.5s backwards; }
.reveal:not([data-stage="intro"]) .rv-caption { visibility: hidden; }
@keyframes capHold { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes capLate { from { opacity: 0; transform: translateY(-40%) rotate(-1.5deg); } }

/* La carte : face cachée au début, au centre ; elle bat comme un cœur, tremble, se retourne, puis file dans un coin. */
.rv-card-wrap {
  position: absolute; left: 50%; top: 9%; width: 27cqw; aspect-ratio: 5 / 7; z-index: 4; container-type: inline-size; perspective: 150cqw;
  transform: translateX(-50%); transition: left .8s cubic-bezier(.3, 1.2, .4, 1), top .8s cubic-bezier(.3, 1.2, .4, 1), width .8s cubic-bezier(.3, 1.2, .4, 1);
}
.rv-beat { position: absolute; inset: 0; animation: rvBeat 1.1s ease-in-out infinite; }
.rv-card { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .4, 1); }
.reveal[data-stage="shake"] .rv-beat { animation: rvShake .5s linear; }
.reveal[data-stage="flipped"] .rv-beat, .reveal[data-stage="revealed"] .rv-beat, .reveal[data-stage="closing"] .rv-beat { animation: none; }
.reveal[data-stage="flipped"] .rv-card, .reveal[data-stage="revealed"] .rv-card, .reveal[data-stage="closing"] .rv-card { transform: rotateY(180deg); }
.reveal[data-stage="revealed"] .rv-card-wrap, .reveal[data-stage="closing"] .rv-card-wrap { left: 84%; top: 5%; width: 15cqw; }
@keyframes rvBeat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.06); } 20% { transform: scale(1); } 32% { transform: scale(1.035); } 44% { transform: scale(1); } }
@keyframes rvShake { 0%, 100% { transform: translate(0, 0) rotate(0); } 10% { transform: translate(-1.6cqw, .4cqw) rotate(-3deg); } 30% { transform: translate(1.6cqw, -.4cqw) rotate(3deg); } 50% { transform: translate(-1.8cqw, .6cqw) rotate(-4deg); } 70% { transform: translate(1.8cqw, -.6cqw) rotate(4deg); } 90% { transform: translate(-1cqw, 0) rotate(-2deg); } }

.rv-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 5cqw solid #fff; border-radius: 12cqw; box-shadow: 0 0 0 2.4cqw var(--ink), 0 6cqw 0 2.4cqw var(--ink);
}
.rv-face.back { background: radial-gradient(circle at 50% 40%, #8a2a26, #4d0f0d 75%); color: var(--gold); }
.rv-face.back .ico { width: 42%; height: auto; aspect-ratio: 1; }
.rv-q { font: 400 34cqw/.8 var(--font-display); color: #fff6e0; text-shadow: 2cqw 2cqw 0 var(--ink); }
.rv-back-text { font: 700 8cqw/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #e9c9a0; }
.rv-face.front { transform: rotateY(180deg); color: #fff; }
.rv-face.front.pirate { background: linear-gradient(160deg, #5b8fd6, #243a6e); }
.rv-face.front.mutin { background: linear-gradient(160deg, #d9554f, #5b1512); }
.rv-front-top { padding: 0 6cqw; text-align: center; font: 700 8cqw/1.15 var(--font-body); letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.rv-front-icon { fill: currentColor; }
.rv-face.front.pirate .rv-front-icon { width: 78%; height: auto; aspect-ratio: 300 / 130; }
.rv-face.front.mutin .rv-front-icon { width: 46%; height: auto; aspect-ratio: 1; }
.rv-front-name { padding: .08em .5em; border-radius: 3cqw; background: var(--ink); font: 400 21cqw/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }

.rv-hint {
  position: absolute; left: 50%; bottom: 5%; z-index: 5; transform: translateX(-50%); display: grid; justify-items: center; gap: .3cqw; pointer-events: none; user-select: none;
  color: #f1deb4; font: italic 600 3.3cqw/1.2 var(--font-body); white-space: nowrap; text-shadow: 0 .3cqw 0 var(--ink), 0 0 1.4cqw rgba(0, 0, 0, .9);
  animation: hintFade 1.8s ease-in-out 1s infinite backwards;
}
.rv-hint .chev { width: 3.6cqw; height: 3.6cqw; transform: rotate(90deg); stroke-width: 3.2; filter: drop-shadow(0 .3cqw 0 var(--ink)); animation: hintUp 1.2s ease-in-out infinite; }
/* Dès que la carte est touchée, l'indication s'efface (elle n'a plus lieu d'être) et ne revient pas. */
.reveal:not([data-stage="intro"]) .rv-hint { opacity: 0; visibility: hidden; animation: none; transition: opacity .18s ease, visibility 0s .18s; }
.reveal:not([data-stage="intro"]) .rv-hint .chev { animation: none; }
@keyframes hintFade { 50% { opacity: .5; } }
@keyframes hintUp { 50% { transform: rotate(90deg) translateX(-.8cqw); } }

/* La révélation : le titre arrive lettre par lettre, puis les informations une à une. */
.rv-title {
  position: absolute; left: 36%; top: 6%; z-index: 5; display: flex; margin: 0; pointer-events: none; transform: rotate(-3deg);
  font: 400 15cqw/1 var(--font-display); letter-spacing: .02em; color: #fff;
  -webkit-text-stroke: 1.2cqw var(--ink); paint-order: stroke fill; text-shadow: 1.5cqw 1.7cqw 0 var(--team-dark);
}
.rv-letter { display: inline-block; }
.rv-letter.bang { margin-left: .06em; color: var(--gold); }
.reveal:not([data-stage="revealed"]):not([data-stage="closing"]) .rv-title { visibility: hidden; }
.reveal[data-stage="revealed"] .rv-letter { animation: letterIn .45s cubic-bezier(.2, 1.8, .4, 1) calc(.15s + var(--i) * .09s) backwards; }
.reveal[data-stage="revealed"] .rv-letter.bang { animation: letterIn .45s cubic-bezier(.2, 1.8, .4, 1) calc(.15s + var(--i) * .09s) backwards, bangShake .5s linear calc(.9s + var(--i) * .09s) 2; }
@keyframes letterIn { from { transform: translateY(-130%) scale(2.3) rotate(-16deg); opacity: 0; } }
@keyframes bangShake { 25% { transform: rotate(-9deg) scale(1.15); } 75% { transform: rotate(9deg) scale(1.15); } }

.rv-lines { position: absolute; left: 36%; top: 34%; width: 44%; z-index: 5; display: grid; gap: 1.6cqw; }
.rv-lines p {
  margin: 0; padding: 1.2cqw 1.8cqw; background: rgba(18, 10, 8, .78); color: #fff6e0; border-left: 1cqw solid var(--team); border-radius: 0 1.2cqw 1.2cqw 0;
  font: 700 3.4cqw/1.25 var(--font-body); text-shadow: .3cqw .3cqw 0 var(--ink);
}
.reveal:not([data-stage="revealed"]):not([data-stage="closing"]) .rv-lines { visibility: hidden; }
.reveal[data-stage="revealed"] .rv-lines p { animation: lineIn .45s ease-out calc(1.1s + var(--n) * .9s) backwards; }
@keyframes lineIn { from { opacity: 0; transform: translateX(-4cqw); } }

.rv-secret {
  position: absolute; left: 36%; bottom: 17%; z-index: 5; display: flex; align-items: center; gap: 1.2cqw; padding: .28em .8em .32em;
  background: var(--gold); color: var(--ink); border: .8cqw solid var(--ink); box-shadow: .9cqw .9cqw 0 var(--ink); font: 700 3.6cqw/1.1 var(--font-body); transform: rotate(-1.5deg);
}
.rv-secret .ico { width: 1.2em; height: 1.2em; }
.reveal:not([data-stage="revealed"]):not([data-stage="closing"]) .rv-secret { visibility: hidden; }
.reveal[data-stage="revealed"] .rv-secret { animation: capLate .45s cubic-bezier(.2, 1.5, .4, 1) 2.7s backwards; }

.rv-ok { position: absolute; right: 3%; bottom: 4%; z-index: 7; animation: okIn .45s ease-out 3.2s backwards; }
@keyframes okIn { from { opacity: 0; transform: translateY(1.2rem); visibility: hidden; } }

.rv-flash { position: absolute; inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; }
.reveal[data-stage="revealed"] .rv-flash { animation: rvFlash .55s ease-out; }
@keyframes rvFlash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* Un toucher pendant la révélation accélère la fin ; sans animations, tout est immédiat. */
.reveal.skip .rv-letter, .reveal.skip .rv-lines p, .reveal.skip .rv-secret, .reveal.skip .rv-ok { animation-delay: 0s !important; animation-duration: .01s !important; }
.no-anim .reveal, .no-anim .reveal *, .no-anim .reveal *::before, .no-anim .reveal *::after { animation: none !important; transition: none !important; }

@media (max-width: 640px) {
  .rv-panel { width: min(94vw, calc(70dvh * 3 / 4)); aspect-ratio: 3 / 4; }
  .rv-actor { left: -12%; bottom: -6%; width: 58%; }
  .rv-card-wrap { top: 8%; width: 42cqw; }
  .reveal[data-stage="revealed"] .rv-card-wrap, .reveal[data-stage="closing"] .rv-card-wrap { left: 83%; top: 3%; width: 26cqw; }
  .rv-caption { max-width: 60%; }
  .rv-caption span { font-size: 4.6cqw; }
  .rv-title { left: 4%; top: 7%; font-size: 17cqw; }
  .rv-lines { left: 4%; top: 28%; width: 92%; }
  .rv-lines p { font-size: 4.6cqw; }
  .rv-secret { left: auto; right: 4%; bottom: 14%; font-size: 4.4cqw; }
  .rv-hint { font-size: 4.2cqw; }
}

/* ==========================================================================
   Choix d'une carte : la carte au milieu de l'écran, fond assombri
   ========================================================================== */

#pick-root { position: fixed; inset: 0; z-index: 56; pointer-events: none; }
.pick {
  position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .8rem;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); background: rgba(10, 5, 4, .88); pointer-events: auto; animation: pickIn .25s ease-out both;
}
.pick.leaving { pointer-events: none; animation: pickOut .3s ease-in both; }
@keyframes pickIn { from { opacity: 0; } }
@keyframes pickOut { to { opacity: 0; } }
.hand .card.lifted { visibility: hidden; }

.pick-stage { min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem, 5vw, 3.5rem); }
.pick-card-slot { flex: none; width: min(40vw, calc(58dvh * 5 / 7), 21rem); aspect-ratio: 5 / 7; }
.pick-card { width: 100%; height: 100%; }
.pick-card .card { --card-w: 100%; width: 100%; height: 100%; box-shadow: 0 0 0 3px var(--ink), 0 .9rem 0 3px var(--ink), 0 1.6rem 2.6rem rgba(0, 0, 0, .65); }

.pick-zone { flex: 0 1 30rem; min-width: 0; display: grid; gap: .7rem; align-content: center; color: #fff6e0; }
.pick-title { margin: 0; font: 400 clamp(1.7rem, 4vw, 2.6rem)/1 var(--font-display); letter-spacing: .04em; text-shadow: 3px 3px 0 var(--ink); }
.pick-sub { margin: 0; max-width: 26rem; font-weight: 600; line-height: 1.35; color: #f1deb4; }
.pick-zone > * { animation: zoneIn .38s ease-out .22s backwards; }
@keyframes zoneIn { from { opacity: 0; transform: translateY(.8rem); } }

/* Le porte-voix, et les bulles de BD qui en sortent : toucher une bulle pour choisir son annonce. */
.pick-mega-row { display: flex; align-items: center; margin-top: .3rem; }
.pick-mega { flex: none; width: clamp(7rem, 15vw, 11rem); }
.pick-mega svg { display: block; width: 100%; height: auto; transform-origin: 8% 50%; filter: drop-shadow(0 .4rem 0 rgba(0, 0, 0, .5)); }
.pick-mega.shout svg { animation: megaShout .4s ease-out; }
@keyframes megaShout { 25% { transform: rotate(-7deg) scale(1.08); } 55% { transform: rotate(3deg) scale(1.03); } }
.claims { display: grid; gap: .6rem; margin-left: .1rem; }
.claim {
  --tone: var(--plus); position: relative; min-width: 5.8rem; height: 3.9rem; padding: 0 1.1rem; cursor: pointer;
  border: .28rem solid var(--ink); border-radius: 50% 46% 52% 48% / 58% 48% 56% 46%; background: var(--tone); color: #fff;
  font: 400 2.5rem/1 var(--font-display); letter-spacing: .03em; text-shadow: .1em .1em 0 var(--ink);
  box-shadow: .22rem .28rem 0 var(--ink); opacity: .74; transform: scale(.94);
  transition: transform .16s cubic-bezier(.2, 1.7, .4, 1), opacity .15s, box-shadow .15s;
}
.claim::after { content: ''; position: absolute; left: -.62rem; top: 50%; width: 1rem; height: 1rem; border-left: .28rem solid var(--ink); border-bottom: .28rem solid var(--ink); border-radius: 0 0 0 .2rem; background: var(--tone); transform: translateY(-50%) rotate(45deg); }
.claim:hover { opacity: 1; }
.claim.tone-plus { --tone: var(--plus); }
.claim.tone-zero { --tone: var(--zero); }
.claim.tone-minus { --tone: var(--minus); }
.claim.on { opacity: 1; transform: scale(1.14); box-shadow: 0 0 0 .3rem var(--gold), 0 0 0 .55rem var(--ink), .3rem .55rem 0 .55rem rgba(0, 0, 0, .4); animation: claimPop .32s cubic-bezier(.2, 1.9, .4, 1); }
@keyframes claimPop { from { transform: scale(.8); } }

.targets { display: flex; flex-wrap: wrap; gap: .5rem; }
.target { display: flex; align-items: center; gap: .5rem; padding: .3rem .9rem .3rem .3rem; border: 3px solid var(--ink); border-radius: 99px; background: var(--paper-2); color: var(--ink); font-weight: 700; }
.target .avatar { width: 2.4rem; height: 2.4rem; }
.target small { font-weight: 600; opacity: .75; }
.target[aria-checked="true"] { background: var(--gold); box-shadow: 0 0 0 3px var(--cobalt-d); }

.pick-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.pick-confirm { min-width: 13rem; min-height: 3rem; font-size: 1.15rem; }
.pick-cancel { min-height: 3rem; }
.no-anim .pick, .no-anim .pick * { animation: none !important; transition: none !important; }

/* Grand écran : porte-voix et bulles plus généreux, à l'échelle de la carte. */
@media (min-width: 761px) and (min-height: 561px) {
  .pick-mega { width: clamp(9.5rem, 18vw, 14rem); }
  .claims { gap: .8rem; }
  .claim { min-width: 6.8rem; height: 4.5rem; padding: 0 1.3rem; font-size: 3rem; }
  .pick-sub { font-size: 1.1rem; }
}
@media (max-width: 760px) {
  .pick-stage { flex-direction: column; gap: 1rem; }
  .pick-card-slot { width: min(44vw, calc(32dvh * 5 / 7), 14rem); }
  .pick-zone { flex: none; width: 100%; justify-items: center; text-align: center; gap: .5rem; }
  .pick-title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .pick-mega-row { justify-content: center; }
  .pick-mega { width: 6.4rem; }
  .claims { grid-auto-flow: column; gap: .55rem; margin-left: .55rem; }
  .claim { min-width: 3.9rem; height: 3.3rem; padding: 0 .6rem; font-size: 2rem; }
  .targets { justify-content: center; }
  .pick-confirm { min-width: 11rem; }
}
@media (max-height: 560px) {
  .pick { padding: .6rem 1rem; gap: .4rem; }
  .pick-card-slot { width: min(30vw, calc(62dvh * 5 / 7)); }
  .pick-sub, .pick-title { display: none; }
  .claims { grid-auto-flow: column; }
  .claim { min-width: 4.4rem; height: 3.4rem; font-size: 2.1rem; }
  .pick-stage { flex-direction: row; }
  .pick-zone { text-align: left; justify-items: start; }
  .pick-mega { width: 6rem; }
}

/* ==========================================================================
   Décompte du Coffre : les cartes retournées une à une, le total, le verdict
   ========================================================================== */

#count-root { position: fixed; inset: 0; z-index: 71; pointer-events: none; }
.tally { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; pointer-events: auto; cursor: pointer; background: rgba(12, 6, 4, .86); animation: sceneIn .2s ease-out both; }
.tally.out { pointer-events: none; animation: sceneOut .3s ease-in both; }
.count-panel {
  position: relative; container-type: inline-size; overflow: hidden; cursor: default;
  width: min(94vw, 52rem, calc(74dvh * 4 / 3)); aspect-ratio: 4 / 3; background: #f3e2b4;
  border: 6px solid var(--ink); border-radius: 18px; box-shadow: 9px 9px 0 var(--ink); animation: panelSlam .45s cubic-bezier(.2, 1.35, .4, 1) both;
}
.count-bg { position: absolute; inset: -40%; background: repeating-conic-gradient(from 8deg at 50% 50%, #d6aa5c 0 6deg, #f3e2b4 6deg 14deg); animation: rvSpin 60s linear infinite; }
.count-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45; background: radial-gradient(rgba(28, 19, 17, .22) 1.3px, transparent 1.9px) 0 0 / 9px 9px; }
.count-title {
  position: absolute; left: 3%; top: 3%; z-index: 3; padding: .2em .7em .25em; background: var(--blood); color: #fff; border: .8cqw solid var(--ink);
  box-shadow: .9cqw .9cqw 0 var(--ink); font: 400 5.5cqw/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-2deg);
}

.count-gauge { position: absolute; left: 6%; right: 6%; top: 19%; z-index: 3; }
.gauge-track { position: relative; height: 4.4cqw; overflow: hidden; border: .8cqw solid var(--ink); border-radius: 99px; background: #4a2c1a; }
/* Jauge : sombre quand elle est vide, bleue qui se remplit, dorée une fois l'objectif atteint. */
.gauge-fill { height: 100%; width: 0; background: repeating-linear-gradient(45deg, var(--plus) 0 1cqw, #4d93e0 1cqw 2cqw); transition: width .5s cubic-bezier(.3, 1.4, .4, 1); }
.gauge-fill.done { background: repeating-linear-gradient(45deg, #e0b84a 0 1cqw, #f7de8c 1cqw 2cqw); }
.gauge-goal { position: absolute; right: 0; top: 0; bottom: 0; width: 1cqw; background: #fff6e0; }
.gauge-labels { display: flex; justify-content: space-between; margin-top: .7cqw; font: 700 2.9cqw/1 var(--font-body); color: var(--ink); text-shadow: 0 .3cqw 0 rgba(255, 246, 224, .8); }

.count-stage { position: absolute; left: 0; right: 0; top: 33%; height: 40%; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 9cqw; }
.count-slot { position: relative; flex: none; width: 17cqw; aspect-ratio: 5 / 7; perspective: 120cqw; }
.count-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, 1.3, .4, 1); animation: cardDrop .35s cubic-bezier(.2, 1.5, .4, 1) backwards; }
.count-flip.shown { transform: rotateY(180deg); }
.count-flip.leaving { opacity: 0; transition: opacity .2s; }
.count-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.count-face.front { transform: rotateY(180deg); }
.count-face .card { --card-w: 100%; width: 100%; height: 100%; }
.count-face.back { border: 1cqw solid #fff; border-radius: 2.2cqw; box-shadow: 0 0 0 .5cqw var(--ink); }
@keyframes cardDrop { from { transform: translateY(-40%) scale(.7); opacity: 0; } }

.count-total-box { text-align: center; }
.count-total { min-width: 24cqw; font: 400 24cqw/.95 var(--font-display); color: var(--ink); text-shadow: 1.2cqw 1.2cqw 0 rgba(255, 246, 224, .95); transition: color .2s; }
.count-total.pos { color: var(--plus); }
.count-total.neg { color: var(--minus); }
.count-total.bump { animation: totalBump .4s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes totalBump { from { transform: scale(1.5) rotate(-4deg); } }
.count-total-label { font: 700 2.8cqw/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }

.count-history { position: absolute; left: 4%; right: 22%; bottom: 8%; z-index: 3; display: flex; flex-wrap: wrap; gap: .8cqw; align-content: flex-end; }
.count-history .card.mini { width: 5.4cqw; border-radius: 1cqw; border-width: .45cqw; box-shadow: 0 0 0 .35cqw var(--ink); }
.count-history .card.mini .v { font-size: 3cqw; }
.count-history .card.mini.pop { animation: miniPop .3s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes miniPop { from { transform: scale(.2) translateY(-60%); opacity: 0; } }
.count-progress { position: absolute; left: 4%; bottom: 2.6%; z-index: 3; font: 700 2.7cqw/1 var(--font-body); color: var(--ink); text-shadow: 0 .3cqw 0 rgba(255, 246, 224, .8); }
.count-skip { position: absolute; right: 3%; bottom: 3%; z-index: 5; }

/* Résultat : le total grossit, le verdict claque comme un tampon. */
.tally.final .count-slot { display: none; }
.tally.final .count-stage { top: 27%; }
.tally.final .count-total { font-size: 27cqw; animation: totalSlam .55s cubic-bezier(.2, 1.9, .4, 1); }
@keyframes totalSlam { from { transform: scale(2.4) rotate(-8deg); opacity: 0; } }
.count-verdict { position: absolute; left: 50%; top: 61%; z-index: 4; display: none; padding: .1em .6em .15em; text-align: center; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 246, 224, .96); border: 1cqw solid currentColor; border-radius: 1.4cqw; box-shadow: 1cqw 1cqw 0 var(--ink); }
.count-verdict.show { display: grid; animation: verdictIn .45s cubic-bezier(.2, 1.7, .4, 1); }
.count-verdict.win { color: var(--cobalt-d); }
.count-verdict.lose { color: var(--blood); }
.count-verdict .v-main { font: 400 8.5cqw/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.count-verdict small { font: 700 2.8cqw/1.2 var(--font-body); color: var(--ink); }
@keyframes verdictIn { from { transform: translateX(-50%) rotate(-3deg) scale(2.4); opacity: 0; } }
.no-anim .tally, .no-anim .tally * { animation: none !important; transition: none !important; }

@media (max-width: 640px) {
  .count-panel { width: min(94vw, calc(76dvh * 3 / 4)); aspect-ratio: 3 / 4; }
  .count-title { font-size: 7.5cqw; }
  .count-gauge { top: 16%; }
  .gauge-track { height: 5.4cqw; }
  .gauge-labels { font-size: 4cqw; }
  .count-stage { top: 28%; height: 34%; gap: 7cqw; }
  .count-slot { width: 28cqw; }
  .count-total { font-size: 28cqw; min-width: 30cqw; }
  .count-total-label { font-size: 3.6cqw; }
  .count-history { right: 4%; bottom: 14%; gap: 1.2cqw; }
  .count-history .card.mini { width: 8cqw; }
  .count-history .card.mini .v { font-size: 4.4cqw; }
  .count-progress { font-size: 3.6cqw; bottom: 3%; }
  .tally.final .count-stage { top: 27%; }
  .tally.final .count-total { font-size: 36cqw; }
  .count-verdict { top: 55%; }
  .count-history { bottom: 5%; }
  .count-verdict .v-main { font-size: 10cqw; }
  .count-verdict small { font-size: 3.8cqw; }
}

/* ==========================================================================
   Adaptation mobile / tablette
   ========================================================================== */

@media (max-width: 899px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .feed-panel { height: min(44dvh, 20rem); min-height: 0; }
  .game { grid-template-columns: minmax(0, 1fr); }
  .stats { margin-left: 0; }
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; grid-column: auto;
    height: min(74dvh, 34rem); border-left: 0; border-top: 4px solid var(--ink); border-radius: 18px 18px 0 0;
    transform: translateY(106%); transition: transform .2s ease; box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
  }
  .side.open { transform: none; }
  .journal-btn { display: inline-flex; }
  .side-close { display: inline-flex; }
}
@media (max-width: 640px) {
  .dialog-actions.sticky { flex-wrap: nowrap; }
  .avatar-validate { min-width: 0; flex: 1 1 auto; font-size: 1rem; }
  .avatar-later { flex: none; }
  .editor-body { grid-template-columns: 1fr; }
  .preview-col { grid-template-columns: 8.5rem 1fr; justify-items: start; align-items: center; column-gap: 1rem; }
  .preview-col .preview-name { text-align: left; align-self: end; }
  .preview-col .btn { align-self: start; grid-column: 2; }
  .preview-col .preview-card { grid-row: 1 / span 2; }
  /* Scène BD sur téléphone : cadre quasi carré, bulle plus large pour rester lisible. */
  .scene { padding: .6rem; }
  .scene-panel { width: min(94vw, 62dvh); aspect-ratio: 1 / 1.04; }
  .scene-actor { left: -10%; bottom: -9%; width: 62%; }
  .scene-mega { --mega-rot: -32deg; left: 49%; top: 61%; width: 74%; }
  .scene-bubble { left: 33%; top: 12%; width: 65%; }
  .scene-caption { font-size: 4.6cqw; max-width: 60%; }
  .scene-corner { top: auto; right: 3%; bottom: 3%; width: 21cqw; }
  .scene-stamp { right: auto; bottom: auto; left: 4%; top: 17%; font-size: 9cqw; }
  .scene-skip { font-size: 3.2cqw; }
  .topbar { flex-wrap: nowrap; gap: .35rem; padding: .3rem .6rem; }
  .topbar .logo-sm, .topbar .room-tag, .hide-sm { display: none; }
  .stats { flex: 1; min-width: 0; margin-left: 0; width: auto; flex-wrap: nowrap; gap: .25rem; }
  .top-btns { margin-left: auto; flex-wrap: nowrap; }
  .top-btns .lbl { display: none; }
  .top-btns .btn { min-width: 2.2rem; padding: .3em .5em; }
  .stat { padding: .1em .5em; font-size: .72rem; gap: .25rem; white-space: nowrap; }
  .stat b { font-size: .95rem; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .action-panel { padding: .35rem .55rem; gap: .3rem .45rem; min-height: 3rem; }
  .action-panel .choices { order: 5; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; }
  .action-panel .choice { flex: none; }
  .action-panel.has-sel .panel-end { display: none; }
  .rolebar { padding: .3rem .7rem; }
  .rolebar .goal { font-size: .78rem; }
  .stage { padding-inline: .5rem; }
  .tile { width: 5.3rem; }
  .tile .avatar { width: 2.4rem; height: 2.4rem; }
  .hero .sound-btn .lbl { display: none; }
}
/* Écrans larges mais très bas (téléphone en paysage) : jeu à gauche, barre d'action + main à droite. */
@media (max-height: 560px) and (orientation: landscape) {
  .game { --card-h: min(34dvh, 7.6rem); }
  .topbar { padding: .2rem .6rem; }
  .rolebar { padding: .15rem .7rem; }
  .rolebar .goal, .last-event, .pile-name, .topbar .logo-sm { display: none; }
  .stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 40%); grid-template-rows: auto minmax(0, 1fr);
    gap: .35rem .6rem; padding: .35rem .6rem;
  }
  .crew { grid-column: 1; grid-row: 1; }
  .table { grid-column: 1; grid-row: 2; min-height: 0; }
  .dock { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 100%; }
  .action-panel { width: 100%; padding: .35rem .55rem; gap: .3rem .45rem; }
  .action-panel .choices { order: 5; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; }
  .action-panel .choice { flex: none; }
  .tile { width: 4.9rem; padding: .25rem; }
  .tile .avatar { width: 2rem; height: 2rem; }
  .hand { padding-top: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Comptes, pièces, mises, boutique
   ========================================================================== */

.coin-ico { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-right: .25em; color: var(--gold); fill: currentColor; }
.coins { display: inline-flex; align-items: center; font-weight: 700; white-space: nowrap; }
.coins .coin-ico { margin-right: .2em; }
.badge-grade { background: #efe0b4; color: #5a3d12; border: 2px solid var(--ink); }
.badge-grade.g-legendaire { background: linear-gradient(135deg, #f3d37a, #cfae62 55%, #f7e7a8); color: #3b2706; }
.badge-grade.g-amiral, .badge-grade.g-capitaine { background: #e9d08a; }
.form-error { margin: 0; padding: .5rem .8rem; border-radius: 10px; background: #f6d9a0; border: 2px solid var(--ink); font-weight: 700; }
.confirm-create { display: grid; gap: .5rem; padding: .8rem 1rem; border: 3px solid var(--ink); border-radius: 12px; background: #fff3d6; }
.confirm-title { margin: 0; font-weight: 800; font-size: 1.05rem; }
.confirm-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

/* Accueil : profil */
.join-card, .confirm-create, .form-error { color: var(--ink); }
.stat { white-space: nowrap; }

/* Salon : l'état du paiement saute aux yeux */
.pay-banner { display: grid; gap: .45rem; margin: .8rem 0 .4rem; }
.pay-bar { height: 1.1rem; overflow: hidden; border: 3px solid var(--ink); border-radius: 99px; background: #4a2c1a; }
.pay-fill { display: block; height: 100%; width: 0; background: repeating-linear-gradient(45deg, #e0b84a 0 .6rem, #f7de8c .6rem 1.2rem); transition: width .5s cubic-bezier(.3, 1.4, .4, 1); }
.pay-text { display: flex; align-items: center; margin: 0; font-size: 1.05rem; }
.pay-text.wait { color: #8a4a00; }
.pay-text.ok { color: #2f6b2a; font-weight: 700; }
.coin-ico.pulse { animation: coinPulse 1.1s ease-in-out infinite; }
@keyframes coinPulse { 50% { transform: scale(1.35) rotate(12deg); } }
.requests { display: grid; gap: .5rem; margin: .4rem 0 .6rem; }
.request { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .7rem; border: 3px solid var(--ink); border-radius: 12px; background: #fff3d6; animation: reqIn .35s cubic-bezier(.2, 1.5, .4, 1); }
.request .avatar { width: 2.6rem; height: 2.6rem; }
.request-text { flex: 1 1 10rem; font-weight: 600; }
@keyframes reqIn { from { transform: translateY(-.6rem) scale(.96); opacity: 0; } }

/* Accueil : le profil est la tête du bloc de connexion */
.profile-strip { display: grid; grid-template-columns: auto 1fr; gap: .6rem .9rem; align-items: center; padding-bottom: .9rem; border-bottom: 2px dashed rgba(28, 19, 17, .28); }
.profile-strip .avatar { width: 3.6rem; height: 3.6rem; }
.ps-name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: 1.3rem; line-height: 1.1; }
.ps-stats { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .3rem; font-size: .95rem; color: #5a4833; }
.ps-stats b { color: var(--ink); font-size: 1.1rem; }
.ps-stats .coin-ico { margin-right: .3em; }
.ps-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }

/* Salon : lignes de joueurs compactes ; « Profil » au survol (toute la partie gauche est cliquable) */
.roster { gap: .35rem; }
.roster li.player-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem .8rem; padding: 15px; }
.player-row .row-avatar { display: block; padding: 0; border: 0; border-radius: 50%; background: none; line-height: 0; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.player-row .row-avatar:hover { transform: scale(1.08); box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--ink); }
.player-row .row-avatar:focus-visible { outline: 3px solid var(--cobalt-d); outline-offset: 3px; }
.roster li.player-row .avatar { width: 2.6rem; height: 2.6rem; }
.player-row .who { min-width: 0; line-height: 1.15; }
.player-row .nm { font-size: 1rem; }
.player-row .sub { gap: .2rem .35rem; }
.player-row .badge { font-size: .68rem; padding: .02em .5em; }
.player-row .meta { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; font-size: .8rem; line-height: 1.25; white-space: nowrap; }
.player-row .mini-stats { display: flex; align-items: center; gap: .6rem; }
.player-row .pay-chip { padding: 0 .6em; font-size: .7rem; line-height: 1.6; }
.player-row .rep { color: #5a4833; }
.player-row .rep b { color: var(--ink); }
.player-row .row-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.player-row .btn-small { padding: .25rem .8rem; font-size: .8rem; }
.request .avatar { width: 2.2rem; height: 2.2rem; }
.player-row.unpaid { border-color: #b9741a; background: #fff3d6; animation: payPulse 1.8s ease-in-out infinite; }
.player-row.paid { border-color: #4f8a4a; background: #e8f3dc; }
@keyframes payPulse { 50% { box-shadow: 0 0 0 .25rem rgba(217, 130, 43, .5); } }
.pay-chip { padding: .1em .65em; border-radius: 99px; border: 2px solid var(--ink); font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.pay-chip.ok { background: #4f8a4a; color: #fff; }
.pay-chip.wait { background: #e7a33e; color: var(--ink); }

.my-pay { display: grid; gap: .6rem; margin: .8rem 0; }
.btn-pay { width: 100%; min-height: 3.2rem; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; }
.btn-pay .coin-ico { color: #fff6e0; }
.pay-alt { display: flex; flex-wrap: wrap; gap: .5rem; }
.pay-done { display: flex; align-items: center; margin: 0; padding: .6rem .9rem; border: 3px solid #4f8a4a; border-radius: 12px; background: #e8f3dc; font-weight: 700; color: #2f6b2a; }
.bell-btn { align-self: flex-start; }
.wanted { margin-top: 1rem; }
.wanted-title { margin: 0 0 .4rem; font: 400 1.2rem/1 var(--font-display); letter-spacing: .04em; color: var(--blood); }
.wanted-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; border-top: 1px dashed rgba(28, 19, 17, .25); }
.wanted-row .avatar { width: 2rem; height: 2rem; }
.wanted-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.wanted-row .rank { width: 1.4rem; text-align: center; font: 400 1.2rem var(--font-display); color: var(--blood); }
.msg.event.pay { border-left: 4px solid #4f8a4a; }
.msg.event.ask { border-left: 4px solid #d9822b; }

/* Fiche de profil */
.profile-head { display: flex; align-items: center; gap: .9rem; }
.profile-head .avatar { width: 4rem; height: 4rem; }
.profile-title { display: block; font-size: 1.3rem; }
.profile-line { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; }
.camps { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .6rem 0; }
.camp { padding: .6rem .8rem; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-2); }
.camp h4 { margin: 0 0 .3rem; font: 400 1.2rem/1 var(--font-display); letter-spacing: .04em; }
.camp-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .9rem; }

/* Boutique */
.shop-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 .5rem; }
.shop-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.chip-btn { padding: .3em .9em; border: 3px solid var(--ink); border-radius: 99px; background: var(--paper-2); color: var(--ink); font-weight: 700; cursor: pointer; }
.chip-btn.on { background: var(--gold); box-shadow: 0 0 0 3px var(--cobalt-d); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .7rem; }
.shop-card { display: grid; gap: .35rem; align-content: start; padding: .5rem; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-2); }
.shop-card.equipped { box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--ink); }
.shop-art { width: 100%; aspect-ratio: 212 / 205; overflow: hidden; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #fff6e0, #ead9a8); }
.shop-art svg { display: block; width: 100%; height: 100%; }
.shop-name { font-size: .95rem; line-height: 1.15; }
.shop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .85rem; }
.rarity { padding: .05em .6em; border-radius: 99px; border: 2px solid var(--ink); font-size: .72rem; font-weight: 800; background: #ddd6c4; }
.rarity.r-rare { background: #9fd0c8; }
.rarity.r-epique { background: #c9b4e6; }
.rarity.r-legendaire { background: #f0cf6e; }

/* Fin de partie : la cagnotte */
.payout { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .35rem; }
.payout li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.payout .avatar { width: 2.2rem; height: 2.2rem; }
.payout .nm { flex: 1 1 6rem; font-weight: 700; }
.tag-win { background: #4f8a4a; color: #fff; }
.sponsor-returns { margin-top: .5rem; padding: .5rem .8rem; border: 3px solid var(--ink); border-radius: 12px; background: #fff3d6; }
.sponsor-returns p { margin: .15rem 0; }

@media (max-width: 640px) {
  .roster li.player-row { grid-template-columns: auto minmax(0, 1fr); }
  .player-row .meta { grid-column: 1 / -1; padding-left: 3.4rem; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .2rem .6rem; white-space: normal; }
  .camps { grid-template-columns: 1fr; }
}

/* Les chiffres des statistiques restent sombres sur fond clair (les <b> sont dorés sur l'accueil). */
.stat b, .profile-line b, .camp b { color: var(--ink); }

/* ==========================================================================
   Décor du plateau
   ========================================================================== */

.stage { position: relative; }
.stage > :not(.board-decor) { position: relative; z-index: 1; }
.board-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #2a1a12; }
.board-decor svg { display: block; width: 100%; height: 100%; }
.stage[data-bg="classique"] .board-decor { display: none; }
/* La table de jeu reste entière et opaque (son aspect d'origine) : le décor est tout autour, vu du dessus.
   On lui laisse une marge de chaque côté et une ombre portée sur le sol. */
.stage[data-bg="cale"], .stage[data-bg="pont"] { padding-left: clamp(.8rem, 7vw, 5.5rem); padding-right: clamp(.8rem, 7vw, 5.5rem); }
.stage[data-bg="cale"] .table, .stage[data-bg="pont"] .table { box-shadow: inset 0 0 40px rgba(0, 0, 0, .45), 0 5px 0 var(--ink), 0 24px 38px rgba(0, 0, 0, .6); }
/* La barre d'action reste lisible sur n'importe quel décor. */
.stage[data-bg="cale"] .action-panel.idle, .stage[data-bg="pont"] .action-panel.idle { background: rgba(246, 233, 200, .96); border-style: solid; color: #4a3a28; box-shadow: 0 3px 0 var(--ink); }

/* Lanternes : la flamme danse, la lumière vacille sur le sol (arrêté avec « Animations ») */
.board-decor .lamp-glow { transform-box: fill-box; transform-origin: center; animation: lampFlicker 3.4s ease-in-out infinite; }
.board-decor .lamp-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flameDance 1.5s ease-in-out infinite; }
.board-decor .lamp-sway { transform-box: fill-box; transform-origin: 50% 0; animation: lampSway 6.5s ease-in-out infinite; }
@keyframes lampFlicker { 0%, 100% { opacity: .82; transform: scale(1); } 25% { opacity: 1; transform: scale(1.05); } 52% { opacity: .74; transform: scale(.97); } 78% { opacity: .95; transform: scale(1.03); } }
@keyframes flameDance { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.92, 1.1) skewX(4deg); } 65% { transform: scale(1.05, .94) skewX(-4deg); } }
@keyframes lampSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.no-anim .board-decor *, .no-anim .board-decor { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .board-decor * { animation: none !important; } }

/* Réglages : le choix du fond */
.bg-picker { margin-top: .9rem; padding: .6rem .8rem .7rem; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-2); }
.bg-title { margin: 0 0 .5rem; font: 400 1.3rem/1 var(--font-display); letter-spacing: .04em; color: var(--blood); }
.bg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.bg-option { display: grid; gap: .3rem; padding: .3rem; border: 3px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; text-align: center; }
.bg-option[aria-pressed="true"] { background: var(--gold); box-shadow: 0 0 0 3px var(--cobalt-d); }
.bg-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; border: 2px solid var(--ink); background: #2a1a12 center / cover no-repeat; }

.bg-name { font-size: .82rem; line-height: 1.15; }
@media (max-width: 420px) { .bg-grid { grid-template-columns: 1fr; } .bg-option { grid-template-columns: 6rem 1fr; align-items: center; text-align: left; } }

/* Écran de fin : la réputation gagnée (jamais négative) */
.tag-bonus { background: #5a4833; }
.tag-rep { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.rep-line { margin: .6rem 0 0; padding: .5rem .7rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper-2); font-size: .9rem; line-height: 1.35; }

/* ---- Son bloqué par le navigateur : invitation à cliquer (disparaît dès que le son est actif) ---- */
.audio-hint { position: fixed; z-index: 90; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: .6rem; max-width: 92vw; padding: .55rem 1.15rem .55rem .7rem; font: 700 .95rem/1.2 var(--font-body, 'Cabin', sans-serif); color: #ffe8b8; background: #0b0b12; border: 3px solid #000; border-radius: 999px; box-shadow: 4px 4px 0 #000, inset 0 0 0 2px #ffb347; cursor: pointer; animation: hint-float 2.6s ease-in-out infinite; }
.audio-hint-note { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #ffb347; color: #1a0f08; font-size: 1.15rem; border: 2px solid #000; animation: hint-beat 1.3s ease-in-out infinite; }
@keyframes hint-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
@keyframes hint-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
html.no-anim .audio-hint, html.no-anim .audio-hint-note { animation: none; }
@media (prefers-reduced-motion: reduce) { .audio-hint, .audio-hint-note { animation: none; } }

.build-tag { margin: .7rem 0 0; text-align: center; font-size: .7rem; letter-spacing: .06em; opacity: .5; }

/* petits écrans en portrait : invitation plus compacte, qui ne recouvre pas le bas des formulaires */
@media (max-aspect-ratio: 4/5) {
  .audio-hint { bottom: max(.45rem, env(safe-area-inset-bottom)); gap: .45rem; padding: .35rem .85rem .35rem .45rem; font-size: .78rem; }
  .audio-hint-note { width: 1.45rem; height: 1.45rem; font-size: .95rem; }
}

/* Scène maintenue (« X est en train de… ») : elle fait patienter sans bloquer le chat ni le reste de l'écran. */
.scene.hold { pointer-events: none; cursor: default; background: rgba(18, 8, 6, .42); }
.scene-panel.is-hold { animation: panelSlam .42s cubic-bezier(.2, 1.35, .4, 1) both, holdFloat 3.6s ease-in-out .5s infinite alternate; }
@keyframes holdFloat { from { transform: rotate(-1.4deg) translateY(0); } to { transform: rotate(-.6deg) translateY(-.6rem); } }
.scene.noskip { cursor: default; }
.scene-wait { position: absolute; left: 0; right: 0; bottom: 1.2cqw; text-align: center; font: 600 2.6cqw var(--font-body); color: rgba(255, 246, 224, .96); text-shadow: 0 .3cqw 0 var(--ink), .3cqw 0 0 var(--ink), -.3cqw 0 0 var(--ink); animation: waitPulse 1.6s ease-in-out infinite; }
@keyframes waitPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene-panel.is-hold, .scene-wait { animation: none; } }
html.no-anim .scene-panel.is-hold, html.no-anim .scene-wait { animation: none; }