/* =========================================================================
   POTOS — PETITS VAISSEAUX (Jeu 3) : la station. Écran #screen-vaisseaux
   (js/vaisseaux-ui.js + js/vaisseaux-game.js). REFONTE v2 (docs/vaisseaux-v2.md §6).
   DA Cyber-Néon (jetons de css/styles.css) + ambiance du plateau JOUÉ (variables --vb-* posées par
   VaisseauxUI.applySkin d'après VaisseauxMaps.theme(map).skin).
   Marque blanche : croix holographique ou anneau hexagonal, hangars, Base = station dorée, escadrons Cryo ◆
   Acide ⬢ Plasma ▲ Nébula ● Solaire ■ Polaire ★ (glyphe TOUJOURS visible : daltonisme).
   Mobile d'abord (375 × 812 sans défilement) : barre fine · la course · plateau · ligne d'aide · MOI · gros
   bouton + ⚡ Auto. Grand écran (1280 × 720 → 1920 × 1080) : plateau carré à gauche (hauteur pleine), colonne
   de droite MOI · course · aide · journal ; le gros bouton reste sous le plateau.
   Tailles du plateau : container queries (1 case = var(--c) = 100cqw / var(--cells), posé par le rendu).
   Fluidité (docs/fluidite.md) : seuls transform / opacity s'animent ; comptes à rebours = barres scaleX (API
   Web Animations) ; voile de tempête tourné par transform ; perf-lite coupe le décor, pas le jeu.
   ========================================================================= */

/* ---------- Écran ---------- */
#screen-vaisseaux {
  position: fixed; inset: 0; z-index: 20; overflow: hidden; color: var(--text, #EAF4FF);
  --vx-ease: cubic-bezier(.16, 1, .3, 1);
  --vx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --vx-gold: #FFC53D;
  --vb-bg: #070A1F; --vb-cell: #121A3A; --vb-line: #2A3A7A; --vb-glow: #22F2FF;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#screen-vaisseaux[hidden] { display: none !important; }

.vx-root {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "top" "race" "stage" "tip" "me" "act";
  background:
    radial-gradient(90% 60% at 50% 42%, color-mix(in srgb, var(--vb-glow) 9%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--vb-bg) 70%, #1A1240) 0%, var(--vb-bg) 72%);
}
.vx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fond : ambiance du plateau joué ---------- */
.vx-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.vx-bg > i { position: absolute; inset: 0; display: block; }
.vx-bg-amb {
  inset: -200px 0 0; opacity: .75;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.6px), radial-gradient(circle, color-mix(in srgb, var(--vb-glow) 80%, #fff) 0 .9px, transparent 1.5px), radial-gradient(circle, rgba(255, 255, 255, .7) 0 1.2px, transparent 2px);
  background-size: 90px 110px, 140px 130px, 260px 240px; background-position: 0 0, 40px 60px, 120px 30px;
  animation: vx-drift 70s linear infinite;
}
.vx-bg-amb2 { background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.3px, transparent 2px); background-size: 320px 280px; background-position: 160px 90px; animation: vx-twinkle 3.6s ease-in-out infinite; }
.vx-bg-vig { background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 0, .6) 100%); }
/* Chrono brûlant : lueur rouge dessinée UNE fois, seule son opacité pulse */
.vx-bg-vig::after { content: ""; position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 90px rgba(255, 59, 107, .55); transition: opacity .2s; }
.vx-root.is-hot .vx-bg-vig::after { opacity: 1; animation: vx-hot .5s ease-in-out infinite alternate; }
/* Fond dessiné par la Boutique (VaisseauxSkins.boardBackgroundSVG) posé en <img> : peint une seule fois */
.vx-bg-art > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.vx-bg-art[data-anim="twinkle"] > .vx-bg-art-amb { animation: vx-art-twinkle 4.8s ease-in-out infinite alternate; }
.vx-bg-art[data-anim="fall"] > .vx-bg-art-amb { animation: vx-art-fall 6s linear infinite alternate; }
.vx-bg-art[data-anim="rise"] > .vx-bg-art-amb { animation: vx-art-fall 7s linear infinite alternate-reverse; }
.vx-bg-art[data-anim="drift"] > .vx-bg-art-amb { animation: vx-art-drift 12s ease-in-out infinite alternate; }
.vx-bg-art[data-anim="scroll"] > .vx-bg-art-amb { animation: vx-art-scroll 2.4s linear infinite; }
.vx-bg-art[data-anim="spin"] > .vx-bg-art-amb { animation: vx-spin 40s linear infinite; }
.vx-root.has-bgart .vx-bg-amb { display: none; }
.vx-root.has-bgart .vx-bg-amb2 { opacity: .5; }
/* Ambiances de repli (sans VaisseauxSkins) : motifs déplacés par transform */
.vx-root[data-amb="snow"] .vx-bg-amb { inset: -260px 0 0; background-image: radial-gradient(circle, #fff 0 1.6px, transparent 2.2px), radial-gradient(circle, #CFF6FF 0 1.1px, transparent 1.8px); background-size: 120px 130px, 70px 65px; animation: vx-snow 14s linear infinite; }
.vx-root[data-amb="grid"] .vx-bg-amb {
  inset: auto -60% -2%; height: 50%; opacity: .55; transform-origin: 50% 100%; transform: perspective(320px) rotateX(64deg); overflow: hidden;
  -webkit-mask: linear-gradient(to top, #000 15%, transparent 90%); mask: linear-gradient(to top, #000 15%, transparent 90%);
}
.vx-root[data-amb="grid"] .vx-bg-amb::before {
  content: ""; position: absolute; inset: -56px 0 0;
  background: linear-gradient(color-mix(in srgb, var(--vb-glow) 55%, transparent) 1.5px, transparent 1.5px) 0 0 / 56px 56px, linear-gradient(90deg, color-mix(in srgb, var(--vb-line) 80%, transparent) 1.5px, transparent 1.5px) 0 0 / 56px 56px;
  animation: vx-floor 1.6s linear infinite;
}
.vx-root[data-amb="grid"] .vx-bg-amb2 { background: radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--vb-glow) 35%, transparent), transparent 70%); animation: none; }
.vx-root[data-amb="asteroids"] .vx-bg-amb { background-image: radial-gradient(ellipse 7px 5px, #4A4458 0 70%, transparent 75%), radial-gradient(ellipse 4px 3px, #6E6680 0 70%, transparent 75%), radial-gradient(circle, #fff 0 .8px, transparent 1.4px); background-size: 210px 170px, 130px 150px, 90px 100px; animation: vx-drift 50s linear infinite; }
.vx-root[data-amb="dust"] .vx-bg-amb { inset: -140px 0 0 -160px; background-image: radial-gradient(circle, rgba(255, 140, 80, .55) 0 1.4px, transparent 2.4px), radial-gradient(circle, rgba(255, 200, 150, .35) 0 2px, transparent 3px); background-size: 80px 70px, 160px 140px; animation: vx-dust 22s linear infinite; }
.vx-root[data-amb="bubbles"] .vx-bg-amb { inset: 0 0 -160px; background-image: radial-gradient(circle, transparent 0 3px, rgba(140, 255, 230, .45) 3.4px, transparent 4.4px), radial-gradient(circle, transparent 0 1.6px, rgba(140, 255, 230, .4) 2px, transparent 2.8px); background-size: 140px 160px, 80px 80px; animation: vx-bubbles 16s linear infinite; }
.vx-root[data-amb="nebula"] .vx-bg-amb { inset: -20%; opacity: .7; background: radial-gradient(45% 40% at 30% 40%, color-mix(in srgb, var(--vb-glow) 34%, transparent), transparent 75%), radial-gradient(40% 35% at 72% 62%, color-mix(in srgb, var(--vb-line) 48%, transparent), transparent 75%); animation: vx-nebula 18s ease-in-out infinite alternate; }
.vx-root[data-amb="accretion"] .vx-bg-amb { inset: -30%; opacity: .55; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--vb-glow) 50%, transparent), transparent 30%, color-mix(in srgb, var(--vb-line) 60%, transparent), transparent 70%); -webkit-mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 62%); mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 62%); animation: vx-spin 40s linear infinite; }

/* ---------- Barre du haut : plateau, tour de table, indicateur (marée / tempête / trou noir) ---------- */
.vx-top {
  grid-area: top; position: relative; z-index: 6; display: flex; align-items: center; gap: 6px;
  padding: calc(6px + env(safe-area-inset-top)) 8px 2px;
  background: linear-gradient(180deg, rgba(3, 5, 14, .7), transparent);
}
.vx-ib { width: 38px; height: 38px; font-size: 17px; flex: none; }
.vx-info { flex: 1; min-width: 0; display: flex; align-items: center; }
.vx-info-txt { min-width: 0; display: flex; align-items: center; gap: 7px; font: 600 12px/1.2 var(--font-display, system-ui); color: var(--muted, #A3B2D6); white-space: nowrap; overflow: hidden; }
.vx-info-txt b { color: var(--text); font-family: var(--font-hud, system-ui); }
.vx-map { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.vx-map i { font-style: normal; font-size: 16px; flex: none; }
.vx-map b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 800 13px/1.1 var(--font-display, system-ui); letter-spacing: .01em; color: #F2F8FF; text-shadow: 0 0 10px color-mix(in srgb, var(--vb-glow) 40%, transparent); }
.vx-round { flex: none; padding: 2px 7px; border-radius: 999px; background: rgba(130, 180, 255, .1); border: 1px solid var(--line, rgba(130, 180, 255, .16)); }
.vx-vars { display: inline-flex; gap: 1px; flex: none; }
.vx-vars i { font-style: normal; font-size: 13px; }
.vx-wide-only { display: none; }
.vx-status {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px; border-radius: 999px; cursor: pointer;
  font: 700 11.5px/1 var(--font-display, system-ui); color: var(--text); white-space: nowrap;
  background: rgba(8, 14, 36, .82); border: 1px solid color-mix(in srgb, var(--vb-glow) 45%, transparent);
}
.vx-status[hidden] { display: none; }
.vx-status[data-k="tide"] { border-color: rgba(44, 246, 201, .6); }
.vx-status[data-k="storm"] { border-color: rgba(255, 90, 46, .7); }
.vx-status[data-k="dive"] { border-color: rgba(181, 123, 255, .7); }
.vx-tide-a { display: inline-block; font-style: normal; color: #2CF6C9; transition: transform .5s var(--vx-spring); }
.vx-tide-a.is-down { transform: rotate(180deg); color: #5AA9FF; }
.vx-st-sq { display: inline-grid; place-items: center; width: 14px; height: 14px; }
.vx-st-g { width: 12px; height: 12px; fill: var(--sc); }
.vx-status.is-flip { animation: vx-bump .5s var(--vx-spring); }
@media (max-width: 420px) {
  .vx-top { gap: 5px; padding-inline: 6px; }
  .vx-ib { width: 34px; height: 34px; font-size: 15px; }
  .vx-status { height: 28px; padding: 0 7px; }
  .vx-status b { display: none; }
  .vx-round { padding: 2px 5px; }
}
@media (max-width: 359px) { .vx-vars { display: none; } }

/* ---------- La course : pilotes triés par progression (glissement par transform) ---------- */
.vx-race {
  --rg: 5px;
  grid-area: race; position: relative; z-index: 5; display: flex; gap: var(--rg); margin: 0; padding: 4px 8px 5px; list-style: none;
}
.vx-pl {
  --sc: #22F2FF; position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; padding: 5px 6px 8px; contain: layout style;
  border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--sd, #04313A) 70%, transparent), rgba(6, 10, 28, .86));
  border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent);
  transform: translateX(calc((var(--r, 0) - var(--i, 0)) * (100% + var(--rg))));
  transition: transform .5s var(--vx-ease), opacity .3s;
}
.vx-pl.is-me { background: linear-gradient(160deg, color-mix(in srgb, var(--sd, #04313A) 95%, transparent), rgba(6, 10, 28, .9)); }
.vx-pl.is-turn { border-color: var(--sc); translate: 0 -1px; }
/* Lueur du pilote qui a la main : dessinée une fois sur un pseudo-élément, seule son opacité change */
.vx-pl::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1px var(--sc), 0 0 14px color-mix(in srgb, var(--sc) 55%, transparent); transition: opacity .25s; }
.vx-pl.is-turn::before { opacity: 1; }
.vx-pl.is-out { filter: grayscale(1); opacity: .45; }
.vx-pl-av { position: relative; flex: none; width: 26px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #31438F, #151E4A 75%); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sc) 70%, transparent); }
.vx-pl-av > svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.vx-pl-g { position: absolute; right: -4px; bottom: -3px; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: #070A1F; box-shadow: 0 0 0 1px var(--sc); }
.vx-pl-gs { width: 9px; height: 9px; fill: var(--sc); }
.vx-pl-id { min-width: 0; flex: 1; display: grid; gap: 2px; }
.vx-pl-name { display: flex; align-items: center; gap: 3px; min-width: 0; font: 700 11px/1.15 var(--font-display, system-ui); }
.vx-pl-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.vx-pl.is-me .vx-pl-name b { color: color-mix(in srgb, var(--sc) 55%, #fff); }
.vx-pl-crown { flex: none; font-style: normal; font-size: 11px; line-height: 1; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--vx-spring); }
.vx-pl.is-lead .vx-pl-crown { opacity: 1; transform: none; }
.vx-pl-meta { display: flex; align-items: center; gap: 4px; min-width: 0; font: 800 10.5px/1 var(--font-hud, system-ui); color: var(--text); white-space: nowrap; }
.vx-pl-pct { color: color-mix(in srgb, var(--sc) 45%, #fff); }
.vx-pl-dock { margin-left: auto; color: var(--muted); font-weight: 700; }
.vx-pl-dock.is-bump { animation: vx-bump .45s var(--vx-spring); }
.vx-pl-bar { position: absolute; left: 7px; right: 7px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.vx-pl-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 55%, transparent), var(--sc)); transition: transform .6s var(--vx-ease); }
/* Compte à rebours du pilote qui a la main : barre scaleX (Web Animations) en haut de sa puce */
.vx-pl-cd { position: absolute; left: 10px; right: 10px; top: -1px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .2s; }
.vx-pl.has-clock .vx-pl-cd { opacity: 1; }
.vx-pl-cd i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: #fff; }
.vx-pl-badge { position: absolute; right: -3px; top: -8px; min-width: 16px; padding: 1px 4px; border-radius: 6px; font: 800 9px/1.2 var(--font-display, system-ui); text-align: center; white-space: nowrap; pointer-events: none; }
.vx-pl-badge:empty { display: none; }
.vx-pl-badge[data-k="out"] { color: var(--muted); background: rgba(40, 46, 70, .95); }
.vx-pl-badge[data-k="off"] { color: var(--text); background: rgba(80, 50, 150, .95); border: 1px solid rgba(157, 107, 255, .7); }
.vx-pl-badge[data-k="streak"] { color: #1B0A00; background: var(--vx-gold); }
.vx-pl-badge[data-k="auto"] { color: #03101C; background: var(--ok, #A6FF2E); }
.vx-pl-badge[data-k="armed"] { color: #03101C; background: var(--accent, #22F2FF); }
/* Petit saut d'une puce (réaction) : sur l'avatar seulement — la puce elle-même porte le transform de son rang */
.vx-pl.is-bump .vx-pl-av { animation: vx-bump .4s var(--vx-spring); }
/* 5 ou 6 pilotes sur téléphone : avatar, glyphe et % (le nom reste dans l'étiquette d'accessibilité) */
@media (max-width: 520px) {
  .vx-root[data-n="5"] .vx-pl-name, .vx-root[data-n="6"] .vx-pl-name, .vx-root[data-n="5"] .vx-pl-dock, .vx-root[data-n="6"] .vx-pl-dock { display: none; }
  .vx-root[data-n="5"] .vx-pl, .vx-root[data-n="6"] .vx-pl { gap: 4px; padding: 5px 4px 8px; justify-content: center; }
  .vx-root[data-n="5"] .vx-pl-id, .vx-root[data-n="6"] .vx-pl-id { flex: none; }
  .vx-root[data-n="4"] .vx-pl-dock { display: none; }
}
@media (max-width: 380px) { .vx-race { --rg: 4px; padding-inline: 6px; } .vx-pl-av { width: 22px; } }
.vx-stamp {
  position: absolute; left: 20px; top: 50%; z-index: 6; translate: -50% -50%; pointer-events: none; font-style: normal;
  font: 900 22px/1 var(--font-hud, system-ui); color: var(--warn, #FFC53D); text-shadow: 0 0 10px var(--warn, #FFC53D); animation: vx-stamp 1.2s var(--vx-spring) both;
}

/* ---------- Scène : plateau + journal (téléphone en hauteur) ---------- */
.vx-stage { grid-area: stage; position: relative; z-index: 2; min-height: 0; min-width: 0; container: vxstage / size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 2px 6px; }
.vx-board {
  --c: calc(100cqw / var(--cells, 15));
  position: relative; flex: none; width: min(100cqw, 100cqh); aspect-ratio: 1; container-type: inline-size;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  contain: layout style;
}
.vx-feed { margin: 0; padding: 0; list-style: none; }
.vx-feed--stage { display: none; }
/* Téléphone en hauteur : le plateau en haut, le journal de bord occupe la place qui reste dessous */
@container vxstage (max-aspect-ratio: 5/6) {
  .vx-board { width: min(100cqw, calc(100cqh - 62px)); }
  .vx-feed--stage {
    /* contain: strict — sa taille vient de la scène (flex), jamais de son contenu : une ligne ajoutée ne remet pas
       en page le reste de l'écran */
    flex: 1 1 0; min-height: 0; contain: strict; display: grid; align-content: end; gap: 3px; width: 100%; max-width: 620px; overflow: hidden; padding: 0 4px;
    font: 500 11.5px/1.3 var(--font-ui, system-ui); color: var(--muted);
    -webkit-mask: linear-gradient(to top, #000 55%, transparent); mask: linear-gradient(to top, #000 55%, transparent);
  }
  .vx-feed--stage li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 2px 8px; border-radius: 7px; background: rgba(3, 6, 18, .45); }
  .vx-feed--stage li:not(:nth-last-child(-n+6)) { display: none; }
  .vx-feed--stage li:last-child { color: var(--text); background: rgba(3, 6, 18, .7); }
}
/* Balayage holographique : bande déplacée par transform dans un cadre masqué (la forme du plateau, posée par le rendu) */
.vx-sweep { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; pointer-events: none; opacity: .45; }
.vx-sweep > i {
  position: absolute; left: -100%; top: -100%; width: 300%; height: 300%; display: block;
  background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--vb-glow) 22%, transparent) 50%, transparent 62%);
  animation: vx-sweep 7s ease-in-out infinite;
}
.vx-svg, .vx-trails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
/* Plateau statique : sa propre couche, peinte UNE fois ; rien ne s'y anime */
.vx-svg { z-index: 1; will-change: transform; }
.vx-trails { z-index: 3; pointer-events: none; will-change: transform; }
.vx-layer { position: absolute; inset: 0; pointer-events: none; }
.vx-rocks { z-index: 2; }
.vx-ships { z-index: 4; }
.vx-marks { z-index: 5; }
.vx-badges { z-index: 6; }
.vx-bfx { z-index: 8; }
.vx-board.is-quake .vx-svg { animation: vx-quake .55s ease-out; }

/* Cadre (unités du SVG = 1 case sur tous les plateaux) */
.vx-cross { fill: color-mix(in srgb, var(--vb-bg) 55%, rgba(8, 12, 32, .85)); stroke: color-mix(in srgb, var(--vb-glow) 60%, transparent); stroke-width: .05; stroke-linejoin: round; filter: drop-shadow(0 0 .12px var(--vb-glow)); }
/* Hangars */
.vx-zone-bg { fill: color-mix(in srgb, var(--sd) 75%, rgba(5, 8, 22, .6)); stroke: color-mix(in srgb, var(--sc) 70%, transparent); stroke-width: .06; filter: drop-shadow(0 0 .14px var(--sc)); }
.vx-zone-in { fill: none; stroke: color-mix(in srgb, var(--sc) 28%, transparent); stroke-width: .03; stroke-dasharray: .3 .16; }
.vx-zone-g { fill: color-mix(in srgb, var(--sc) 22%, transparent); }
.vx-pad-c { fill: rgba(3, 6, 18, .75); stroke: color-mix(in srgb, var(--sc) 55%, transparent); stroke-width: .045; }
.vx-pad-r { fill: none; stroke: color-mix(in srgb, var(--sc) 30%, transparent); stroke-width: .03; stroke-dasharray: .12 .1; }
.vx-pad-g { fill: color-mix(in srgb, var(--sc) 32%, transparent); }
.vx-pad.is-off { opacity: .3; }
.vx-zname { font: 800 .42px/1 var(--font-display, system-ui); fill: color-mix(in srgb, var(--sc) 60%, #fff); text-anchor: middle; letter-spacing: .02px; paint-order: stroke; stroke: rgba(3, 6, 18, .9); stroke-width: .08; }
.vx-zone.is-free .vx-zone-bg { fill: rgba(20, 26, 50, .45); stroke: rgba(130, 160, 220, .22); filter: none; }
.vx-zone.is-free .vx-zone-in, .vx-zone.is-free .vx-pad, .vx-zone.is-free .vx-zone-g { opacity: .25; }
.vx-zone.is-free .vx-zname { fill: rgba(160, 180, 220, .45); font-weight: 600; }
/* Cases de l'Anneau */
.vx-cell { fill: var(--vb-cell); stroke: color-mix(in srgb, var(--vb-line) 90%, var(--vb-glow)); stroke-width: .045; }
.vx-cell.is-alt { fill: var(--vb-cell-alt, var(--vb-cell)); }
.vx-sas .vx-cell { fill: color-mix(in srgb, var(--sc) 42%, var(--vb-cell)); stroke: var(--sc); stroke-width: .07; filter: drop-shadow(0 0 .14px var(--sc)); }
.vx-foot .vx-cell { fill: color-mix(in srgb, var(--sc) 14%, var(--vb-cell)); stroke: color-mix(in srgb, var(--sc) 80%, transparent); stroke-width: .06; stroke-dasharray: .16 .08; }
.vx-chev { fill: none; stroke: #fff; stroke-width: .07; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.vx-chev2 { opacity: .5; }
.vx-foot .vx-chev { stroke: var(--sc); opacity: .9; }
.vx-cellg.is-free.vx-sas .vx-cell, .vx-cellg.is-free.vx-foot .vx-cell { fill: color-mix(in srgb, var(--sc) 10%, var(--vb-cell)); stroke: color-mix(in srgb, var(--sc) 30%, var(--vb-line)); filter: none; stroke-dasharray: none; }
.vx-cellg.is-free .vx-chev { opacity: .3; }
/* Cases spéciales (règles propres des plateaux) */
.vx-sp--ice .vx-cell { fill: color-mix(in srgb, #BFEFFF 58%, var(--vb-cell)); stroke: #E6FAFF; stroke-width: .05; }
.vx-ice { fill: none; stroke: #fff; stroke-width: .075; stroke-linecap: round; opacity: .9; }
.vx-sp--bonus .vx-cell { fill: #3A2E05; stroke: #FFE45C; stroke-width: .07; filter: drop-shadow(0 0 .1px #FFE45C); }
.vx-bolt { fill: #FFE45C; }
.vx-sp--current .vx-cell { fill: #0E5A63; stroke: #2CF6C9; stroke-width: .07; }
.vx-swirl { fill: none; stroke: #9FFFE6; stroke-width: .05; stroke-linecap: round; opacity: .85; }
.vx-sp--rock .vx-cell { fill: #2A2533; stroke: #8A8296; stroke-width: .06; }
.vx-rk-spot { fill: rgba(0, 0, 0, .35); }
.vx-sp--horizon .vx-cell { fill: #05030C; stroke: #B57BFF; stroke-width: .08; filter: drop-shadow(0 0 .12px #B57BFF); }
.vx-hz { fill: #B57BFF; }
.vx-hz-r { fill: none; stroke: #B57BFF; stroke-width: .04; stroke-dasharray: .08 .06; }
.vx-arc { fill: none; stroke: #B57BFF; stroke-width: .07; stroke-dasharray: .22 .16; stroke-linecap: round; opacity: .75; }
.vx-bh { fill: #000; stroke: #B57BFF; stroke-width: .08; stroke-opacity: .9; }
/* Courants : flèches des deux marées, en fondu selon data-tide (posé par le rendu) */
.vx-cur { transition: opacity .5s; }
.vx-cur-l { fill: none; stroke-width: .09; stroke-linecap: round; }
.vx-cur--up .vx-cur-l { stroke: #2CF6C9; }
.vx-cur--up .vx-cur-h { fill: #2CF6C9; }
.vx-cur--down .vx-cur-l { stroke: #5AA9FF; stroke-dasharray: .18 .14; }
.vx-cur--down .vx-cur-h { fill: #5AA9FF; }
.vx-board[data-tide="1"] .vx-cur--down, .vx-board[data-tide="-1"] .vx-cur--up { opacity: .12; }
/* Rampes */
.vx-ramp { fill: color-mix(in srgb, var(--sc) calc(16% + var(--k) * 46%), var(--vb-cell)); stroke: var(--sc); stroke-width: .05; }
.vx-rampn { font: 900 .5px/1 var(--font-hud, system-ui); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(3, 6, 18, .78); stroke-width: .1; }
.vx-rampp { font-size: .3px; }
.vx-rampg.is-free .vx-ramp { fill: color-mix(in srgb, var(--sc) 8%, var(--vb-cell)); stroke: color-mix(in srgb, var(--sc) 25%, var(--vb-line)); }
.vx-rampg.is-free .vx-rampn { opacity: .35; }
/* Base (station dorée) : halo qui respire + arcs qui tournent en HTML (transform / opacity) */
.vx-basefx { position: absolute; z-index: 1; width: calc(var(--c) * var(--bz, 1.24)); aspect-ratio: 1; translate: -50% -50%; display: block; pointer-events: none; }
.vx-basefx-halo { position: absolute; inset: 0; display: block; border-radius: 50%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--vx-gold) 22%, transparent) 0 88%, transparent 100%); animation: vx-breathe 3s ease-in-out infinite; }
.vx-basefx-spin { position: absolute; left: 9.68%; top: 9.68%; width: 80.65%; height: 80.65%; display: block; overflow: visible; fill: none; stroke: var(--vx-gold); stroke-width: .045; stroke-linecap: round; animation: vx-spin 6s linear infinite; }
.vx-base-hex { fill: color-mix(in srgb, var(--vx-gold) 30%, #1A1204); stroke: var(--vx-gold); stroke-width: .05; filter: drop-shadow(0 0 .16px var(--vx-gold)); }
.vx-base-ring { fill: none; stroke: color-mix(in srgb, var(--vx-gold) 70%, #fff); stroke-width: .035; stroke-dasharray: .1 .07; }
.vx-base-core { fill: #FFF2CC; filter: drop-shadow(0 0 .12px var(--vx-gold)); }
/* Centre des petits chevaux (plateau classique) : 4 triangles aux couleurs des escaliers (dessin fixe, aucune animation) */
.vx-center-t { fill: color-mix(in srgb, var(--sc) 78%, var(--vb-cell)); stroke: var(--vb-bg, #070A1F); stroke-width: .03; stroke-linejoin: round; }
.vx-center-t.is-free { fill: color-mix(in srgb, var(--sc) 22%, var(--vb-cell)); }
.vx-center-fr { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .04; }
.vx-root[data-base="sun"] .vx-base-hex { fill: color-mix(in srgb, #FF7A1A 50%, #3A0632); }
.vx-root[data-base="dome"] .vx-base-hex { fill: color-mix(in srgb, #9AF9FF 30%, #06233A); }
.vx-root[data-base="crystal"] .vx-base-hex { fill: color-mix(in srgb, #FF2BD1 30%, #1E0F40); }
.vx-root[data-base="singularity"] .vx-base-core { fill: #050208; stroke: var(--vx-gold); stroke-width: .03; }
/* Trou noir (Horizon du trou noir) : disque d'accrétion qui tourne (transform), coupé en perf-lite */
.vx-hole { position: absolute; z-index: 1; width: calc(var(--c) * 1.34); aspect-ratio: 1; translate: -50% -50%; display: block; pointer-events: none; }
.vx-hole[hidden] { display: none; }
.vx-hole > i { position: absolute; inset: 0; display: block; border-radius: 50%; }
.vx-hole-ring {
  background: conic-gradient(from 0deg, transparent, rgba(181, 123, 255, .55), transparent 28%, rgba(255, 197, 61, .45), transparent 58%, rgba(181, 123, 255, .5), transparent 85%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 60%, #000 68%, transparent 96%); mask: radial-gradient(circle closest-side, transparent 60%, #000 68%, transparent 96%);
  animation: vx-spin 9s linear infinite;
}
/* Éclair de plongée (traversée / aspiré) : anneau violet peint une fois, seuls opacity et transform s'animent */
.vx-hole-disk { background: radial-gradient(circle closest-side, transparent 45%, rgba(181, 123, 255, .75) 62%, transparent 80%); opacity: 0; }
.vx-hole.is-ok .vx-hole-disk { animation: vx-hole-ok .7s ease-out; }
.vx-hole.is-ko .vx-hole-disk { animation: vx-hole-ko .7s ease-out; }

/* ---------- Tempête : UN voile par quart, tourné par transform au début de chaque tour de table ---------- */
.vx-storm { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; transform-origin: 50% 50%; }
.vx-storm[hidden] { display: none; }
.vx-storm > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.vx-veil { fill: #FF3B2F; opacity: .36; }
.vx-veil-ico { font-size: .9px; text-anchor: middle; opacity: .9; }
.vx-veil-line { fill: none; stroke: #FF6A3D; stroke-width: .09; stroke-dasharray: .22 .16; opacity: .9; }

/* ---------- Astéroïdes (pulvérisés : la case reste à 0,15 ; reformés au tour de table) ---------- */
.vx-rock { position: absolute; display: block; width: calc(var(--c) * .84); aspect-ratio: 1; translate: -50% -50%; transition: opacity .35s, scale .35s var(--vx-ease); }
.vx-rock > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vx-rock-b { fill: #C9C0D6; stroke: #4A4458; stroke-width: .09; stroke-linejoin: round; }
.vx-rock-h { fill: none; stroke: #6E6680; stroke-width: .11; stroke-linecap: round; }
.vx-rock.is-gone { opacity: .15; scale: .55; }
.vx-rock.is-break { animation: vx-rock-break .45s ease-out; }
.vx-rock.is-back { animation: vx-rock-back .4s var(--vx-spring); }

/* ---------- Compteurs d'arrimage (Base) ---------- */
.vx-badge {
  --sc: #22F2FF; position: absolute; translate: -50% -50%; display: inline-flex; align-items: center; gap: 1px;
  height: max(14px, calc(var(--c) * .44)); min-width: max(19px, calc(var(--c) * .6)); padding: 0 max(2px, calc(var(--c) * .07)); border-radius: 999px;
  background: #060A1C; border: 1.5px solid var(--sc); box-shadow: 0 0 calc(var(--c) * .2) var(--sc);
  font: 900 max(9px, calc(var(--c) * .3))/1 var(--font-hud, system-ui); color: #fff; justify-content: center; transition: opacity .3s;
}
.vx-badge.is-zero { opacity: .5; box-shadow: none; }
.vx-badge.is-full { background: var(--sc); color: var(--on-neon, #03101C); }
.vx-badge-g { width: max(7px, calc(var(--c) * .24)); height: max(7px, calc(var(--c) * .24)); fill: var(--sc); flex: none; }
.vx-badge.is-full .vx-badge-g { fill: var(--on-neon, #03101C); }
.vx-badge.is-bump { animation: vx-bump-c .55s var(--vx-spring); }
.vx-badges { contain: layout style; }
.vx-root[data-layout="free"] .vx-badge { box-shadow: none; }

/* ---------- Vaisseaux ---------- */
.vx-ship {
  --sc: #22F2FF; --sg: #9AF9FF; --st: #E8F1FF;
  position: absolute; left: 0; top: 0; width: var(--ship, calc(100% / 15)); height: var(--ship, calc(100% / 15)); padding: 0; margin: 0;
  appearance: none; background: none; border: 0; border-radius: 50%; color: inherit; font: inherit;
  pointer-events: auto; cursor: default; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: opacity .3s;
}
/* Enveloppe intérieure : tous les effets d'échelle du vaisseau (jamais sur .vx-ship, qui porte la translation) */
.vx-sk { position: absolute; inset: 0; display: block; pointer-events: none; transition: scale .3s var(--vx-spring); }
/* Coque : cap (rotate) et flottement (translate) animés sur l'élément HTML = composités ; SVG intérieur FIXE */
.vx-hull {
  position: absolute; inset: 4%; rotate: var(--rot, 0deg); transition: rotate .14s ease-out;
  animation: vx-hover 2.4s ease-in-out infinite;
}
.vx-hull.no-tr, .vx-cube.no-tr { transition: none !important; }
.vx-hull svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.vx-hull > svg { filter: drop-shadow(0 0 calc(var(--c) * .1) var(--sc)) drop-shadow(0 calc(var(--c) * .06) calc(var(--c) * .08) rgba(0, 0, 0, .7)); }
.vx-fire {
  position: absolute; left: 30%; top: 66%; width: 40%; height: 40%; display: block; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sg) 85%, #fff), color-mix(in srgb, var(--sg) 45%, transparent) 55%, transparent);
  transform-origin: 50% 0; animation: vx-fire 0.16s steps(2) infinite alternate;
}
.vx-hull--saucer .vx-fire, .vx-hull--quad .vx-fire { top: 30%; left: 10%; width: 80%; height: 60%; opacity: .55; animation-name: vx-fire-soft; }
/* Vaisseaux au hangar (garés) : immobiles, réacteur au repos — seuls ceux qui volent flottent et vacillent
   (jusqu'à 24 vaisseaux à 6 × 4 : autant de calques animés en moins à chaque image) */
.vx-ship.in-hangar:not(.is-playable):not(.is-moving):not(.is-flying) .vx-hull { animation: none; }
.vx-ship.in-hangar:not(.is-moving):not(.is-flying) .vx-fire { animation: none; opacity: .45; }
.vx-hull .h-body { fill: color-mix(in srgb, var(--sc) 60%, #0A1030); stroke: var(--sc); stroke-width: 1.8; stroke-linejoin: round; }
.vx-hull .h-trim { fill: none; stroke: var(--st); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.vx-hull .h-ring { fill: none; stroke: var(--st); stroke-width: 1.6; stroke-dasharray: 3 2.4; }
.vx-hull .h-dome { fill: color-mix(in srgb, var(--st) 45%, transparent); stroke: var(--st); stroke-width: 1.1; }
.vx-hull .h-arm { fill: none; stroke: var(--st); stroke-width: 3; stroke-linecap: round; }
.vx-hull .h-rot { fill: color-mix(in srgb, var(--sc) 22%, transparent); stroke: var(--sc); stroke-width: 1.6; stroke-dasharray: 4 3; }
.vx-hull .h-light { fill: var(--vx-gold); }
.vx-hull .h-fire { fill: var(--sg); opacity: .95; }
.vx-hull .h-fire-ring { fill: none; stroke: var(--sg); stroke-width: 1.2; opacity: .55; }
.vx-hull .h-fire2 { fill: #fff; }
.vx-anim--rotor { animation-duration: .9s; }
.vx-anim--wobble { animation-name: vx-wobble; animation-duration: 2.8s; }
.vx-anim--flare .vx-fire, .vx-anim--lights .vx-fire { animation: vx-flare 1.6s ease-in-out infinite; }
/* Insigne d'escadron (pastille claire + glyphe sombre) : toujours droit, toujours visible */
.vx-gly {
  position: absolute; left: 50%; top: 52%; width: 42%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff, var(--sg) 70%); box-shadow: 0 0 0 1.2px #070A1F, 0 0 calc(var(--c) * .14) var(--sg);
  pointer-events: none;
}
.vx-gly-s { width: 70%; height: 70%; fill: #070A1F; }
.vx-hull--vs { inset: -2%; }
#screen-vaisseaux .vx-hull .vxs-body, #screen-vaisseaux .vx-hull .vxs-part, #screen-vaisseaux .vx-hull .vxs-flame, #screen-vaisseaux .vx-hull .vxs-aura { animation: none; }
.vx-kn { display: none; }
/* Hexagone : hangars serrés, vaisseaux un peu plus petits au hangar */
.vx-root[data-layout="free"] .vx-ship.in-hangar .vx-hull, .vx-root[data-layout="free"] .vx-ship.in-hangar .vx-gly { scale: .78; }
/* Jouable : pulsation, grande zone tactile, n° (clavier) */
.vx-ship.is-playable { cursor: pointer; z-index: 3; }
.vx-ship.is-playable::before {
  content: ""; position: absolute; inset: -10%; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--sc); box-shadow: 0 0 calc(var(--c) * .3) var(--sc), inset 0 0 calc(var(--c) * .2) var(--sc);
  animation: vx-pulse 1s ease-in-out infinite;
}
.vx-ship.is-playable::after { content: ""; position: absolute; inset: -34%; border-radius: 50%; }
.vx-ship.is-playable .vx-hull { animation: vx-ready 1s ease-in-out infinite; }
.vx-ship.is-sel::before, .vx-ship.is-playable:focus-visible::before { inset: -18%; border-width: 3px; animation-duration: .6s; }
.vx-ship.is-playable:focus-visible .vx-gly { box-shadow: 0 0 0 2px #fff, 0 0 calc(var(--c) * .25) #fff; }
.vx-ship.is-option::before { content: ""; position: absolute; inset: -8%; border-radius: 50%; pointer-events: none; border: 1.5px dashed color-mix(in srgb, var(--sc) 75%, transparent); animation: vx-spin 5s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .vx-ship.is-playable .vx-kn {
    display: grid; place-items: center; position: absolute; right: -14%; top: -14%; width: 40%; aspect-ratio: 1; border-radius: 50%;
    font: 900 max(8px, calc(var(--c) * .26))/1 var(--font-hud, system-ui); color: var(--on-neon, #03101C); background: var(--sc); box-shadow: 0 0 6px var(--sc); pointer-events: none;
  }
}
/* Marqueurs (classes posées à chaque rendu, aucun calcul par image) : ◎ coup conseillé · ⚠ menacé · 🎯 à portée */
.vx-mk { position: absolute; inset: 0; display: none; pointer-events: none; font-style: normal; }
.vx-ship.is-hint .vx-mk, .vx-ship.is-threat .vx-mk, .vx-ship.is-target .vx-mk { display: block; }
.vx-ship.is-hint .vx-mk::before {
  content: ""; position: absolute; inset: -30%; border-radius: 50%;
  border: max(2px, calc(var(--c) * .07)) double #FFFFFF; opacity: .95; animation: vx-hint 1.2s ease-in-out infinite;
}
.vx-ship.is-hint .vx-mk::after {
  content: "◎"; position: absolute; left: 50%; top: -42%; translate: -50% 0; padding: 0 3px; border-radius: 6px;
  font: 900 max(9px, calc(var(--c) * .3))/1.15 var(--font-hud, system-ui); color: #03101C; background: #fff;
}
.vx-ship.is-threat:not(.is-hint) .vx-mk::after {
  content: "!"; position: absolute; left: -14%; top: -14%; width: max(11px, 38%); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  font: 900 max(8px, calc(var(--c) * .28))/1 var(--font-hud, system-ui); color: #fff; background: var(--danger, #FF3B6B); box-shadow: 0 0 0 1.5px #070A1F;
}
.vx-ship.is-threat:not(.is-hint) .vx-mk::before {
  content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 1.5px solid var(--danger, #FF3B6B); opacity: .7; animation: vx-blink 1.2s ease-in-out infinite;
}
.vx-ship.is-target .vx-mk::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%; opacity: .9;
  background: radial-gradient(circle, transparent 54%, var(--danger, #FF3B6B) 56% 62%, transparent 64%), linear-gradient(var(--danger, #FF3B6B), var(--danger, #FF3B6B)) 50% 0 / 2px 22% no-repeat, linear-gradient(var(--danger, #FF3B6B), var(--danger, #FF3B6B)) 50% 100% / 2px 22% no-repeat, linear-gradient(var(--danger, #FF3B6B), var(--danger, #FF3B6B)) 0 50% / 22% 2px no-repeat, linear-gradient(var(--danger, #FF3B6B), var(--danger, #FF3B6B)) 100% 50% / 22% 2px no-repeat;
  animation: vx-spin 6s linear infinite;
}
.vx-ship.is-moving, .vx-ship.is-flying { z-index: 6; }
.vx-ship.is-moving .vx-mk, .vx-ship.is-flying .vx-mk { display: none; }
.vx-ship.is-flying .vx-hull > svg { filter: drop-shadow(0 0 calc(var(--c) * .25) var(--sc)) drop-shadow(0 calc(var(--c) * .3) calc(var(--c) * .3) rgba(0, 0, 0, .7)); }
.vx-ship.is-sending .vx-sk { scale: 1.18; }
.vx-ship.is-playable.is-press .vx-sk { scale: 1.22; transition: none; }
.vx-ghost.is-press .vx-ghost-ring { scale: 1.2; }
.vx-dice.is-mine.is-press .vx-tilt { scale: .88; }
.vx-btn.is-press, .vx-ib.is-press, .vx-react.is-press, .vx-chip.is-press, .vx-auto.is-press, .vx-auto-more.is-press { scale: .95; transition: none; }
.vx-ship.is-sending::before { animation: none; opacity: 1; }
.vx-ship.is-nope { animation: vx-nope .4s; }
.vx-ship.is-hit .vx-hull::after {
  content: ""; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, .18) 75%, transparent);
  animation: vx-hit .5s ease-out;
}
.vx-ship.is-ping .vx-sk { animation: vx-ping .7s var(--vx-spring); }
.vx-ship.is-docking .vx-sk { animation: vx-dock-in .52s cubic-bezier(.6, 0, .8, .4) forwards; }
.vx-ship.is-warping .vx-sk { animation: vx-warp-out .46s ease-in forwards; }
.vx-ship.is-docked, .vx-ship.is-gone { visibility: hidden; opacity: 0; pointer-events: none; }
.vx-ships.is-intro .vx-sk { animation: vx-ship-in .55s var(--vx-spring) both; }
.vx-ships.is-intro .vx-ship:nth-child(4n+2) .vx-sk { animation-delay: .08s; }
.vx-ships.is-intro .vx-ship:nth-child(4n+3) .vx-sk { animation-delay: .16s; }
.vx-ships.is-intro .vx-ship:nth-child(4n+4) .vx-sk { animation-delay: .24s; }
.vx-root.is-anim .vx-ship, .vx-root.is-busy .vx-ship { cursor: default; }
.vx-ship--pv { position: relative; display: inline-block; width: 44px; height: 44px; --c: 44px; }

/* ---------- Repères : destinations, chemin, météores ---------- */
.vx-ghost { --sc: #22F2FF; position: absolute; width: var(--ship, calc(100% / 15)); height: var(--ship, calc(100% / 15)); display: grid; place-items: center; pointer-events: none; }
.vx-ghost.is-mine { pointer-events: auto; cursor: pointer; }
.vx-ghost-ring { position: absolute; inset: 10%; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--sc) 70%, transparent); background: color-mix(in srgb, var(--sc) 10%, transparent); animation: vx-spin 6s linear infinite; }
.vx-ghost:not(.is-mine) .vx-ghost-ring { opacity: .55; border-width: 1.5px; }
.vx-ghost.is-capture .vx-ghost-ring { border-color: var(--danger, #FF3B6B); background: color-mix(in srgb, var(--danger, #FF3B6B) 18%, transparent); box-shadow: 0 0 calc(var(--c) * .25) var(--danger, #FF3B6B); }
.vx-ghost.is-hint .vx-ghost-ring { border-style: solid; border-color: #fff; }
.vx-ghost.is-hot .vx-ghost-ring { border-style: solid; border-width: 2.5px; background: color-mix(in srgb, var(--sc) 30%, transparent); box-shadow: 0 0 calc(var(--c) * .35) var(--sc); }
.vx-ghost-ico { position: relative; font: 400 max(9px, calc(var(--c) * .46))/1 system-ui, sans-serif; filter: drop-shadow(0 0 3px #000); }
.vx-ghost--dock .vx-ghost-ring { border-color: var(--vx-gold); }
.vx-pathdot { position: absolute; width: var(--ship, calc(100% / 15)); height: var(--ship, calc(100% / 15)); display: grid; place-items: center; pointer-events: none; }
.vx-pathdot::before { content: ""; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--sc); box-shadow: 0 0 8px var(--sc); animation: vx-dot .9s ease-in-out calc(var(--i) * 70ms) infinite alternate; }
.vx-mzone { position: absolute; width: var(--ship, calc(100% / 15)); height: var(--ship, calc(100% / 15)); display: grid; place-items: center; pointer-events: auto; z-index: 1; }
.vx-mzone-r { position: absolute; inset: -14%; border-radius: 50%; border: 2px solid var(--orange, #FF7A1A); box-shadow: 0 0 calc(var(--c) * .3) var(--orange, #FF7A1A), inset 0 0 calc(var(--c) * .3) var(--orange, #FF7A1A); animation: vx-mz 1.4s ease-in-out infinite; }
.vx-mzone-r2 { inset: 8%; border-style: dashed; border-color: var(--warn, #FFC53D); animation: vx-spin 3s linear infinite; box-shadow: none; }
.vx-mzone.is-now .vx-mzone-r { border-color: var(--danger, #FF3B6B); box-shadow: 0 0 calc(var(--c) * .45) var(--danger, #FF3B6B), inset 0 0 calc(var(--c) * .35) var(--danger, #FF3B6B); animation-duration: .6s; }
.vx-mzone b { position: absolute; bottom: 92%; left: 50%; translate: -50% 0; padding: 1px 4px; border-radius: 6px; white-space: nowrap; font: 900 max(9px, calc(var(--c) * .3))/1.1 var(--font-hud, system-ui); color: #fff; background: rgba(60, 10, 20, .9); border: 1px solid var(--orange, #FF7A1A); }

/* ---------- Dé holographique (dans le hangar du lanceur) ---------- */
.vx-dice {
  --sc: #22F2FF; --vd-body: #0B2A33; --vd-edge: #22F2FF;
  --dsz: calc(100cqw * var(--dz, .12)); --h: calc(var(--dsz) / 2);
  position: absolute; left: 20%; top: 80%; z-index: 7; width: var(--dsz); aspect-ratio: 1; translate: -50% -50%;
  perspective: calc(var(--dsz) * 5.5); outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.vx-tilt { transition: scale .12s ease-out; }
.vx-dice.is-press .vx-tilt { transition: none; }
.vx-dice[hidden] { display: none; }
.vx-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-12deg) rotateY(14deg); }
.vx-cube { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .3s var(--vx-ease); }
.vx-face {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; padding: 13%;
  border-radius: 20%; background: color-mix(in srgb, var(--vd-body) 88%, transparent); border: max(1.5px, calc(var(--dsz) * .028)) solid var(--vd-edge);
  box-shadow: inset 0 0 calc(var(--dsz) * .2) color-mix(in srgb, var(--vd-edge) 45%, transparent), 0 0 calc(var(--dsz) * .1) color-mix(in srgb, var(--vd-edge) 70%, transparent);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; font-style: normal;
}
.vx-f1 { transform: translateZ(var(--h)); }
.vx-f6 { transform: rotateY(180deg) translateZ(var(--h)); }
.vx-f3 { transform: rotateY(90deg) translateZ(var(--h)); }
.vx-f4 { transform: rotateY(-90deg) translateZ(var(--h)); }
.vx-f2 { transform: rotateX(90deg) translateZ(var(--h)); }
.vx-f5 { transform: rotateX(-90deg) translateZ(var(--h)); }
.vx-pip { display: block; width: 74%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 calc(var(--dsz) * .07) var(--vd-edge), 0 0 2px #fff; }
.vx-face--vs { padding: 0; background: none; border: 0; border-radius: 16%; box-shadow: 0 0 calc(var(--dsz) * .08) color-mix(in srgb, var(--vd-edge) 60%, transparent); }
.vx-face--vs > svg, .vx-face--vs > img { position: absolute; left: -6.82%; top: -6.82%; width: 113.64%; height: 113.64%; display: block; pointer-events: none; }
.vx-dice.is-rolling.vx-da--pulse .vx-tilt { animation: vx-die-pulse .2s ease-in-out infinite alternate; }
.vx-dice.is-rolling.vx-da--superposition .vx-face { animation: vx-qroll .12s steps(2) infinite; }
.vx-dice.is-rolling.vx-da--smoke .vx-tilt { animation: vx-nope .3s 2; }
.vx-fnum { display: none; }
.vx-dice-glow { position: absolute; inset: -40%; border-radius: 50%; pointer-events: none; opacity: .35; background: radial-gradient(circle, color-mix(in srgb, var(--sc) 55%, transparent), transparent 62%); transition: opacity .3s; }
.vx-dice-tag {
  position: absolute; left: 50%; top: calc(100% + 4px); translate: -50% 0; padding: 2px 6px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 900 max(8px, calc(var(--dsz) * .16))/1.1 var(--font-hud, system-ui); letter-spacing: .06em; color: var(--on-neon, #03101C); background: var(--sc); box-shadow: 0 0 10px var(--sc);
}
.vx-dice-tag:empty { display: none; }
/* Opacité sur l'élément de dé (2D), JAMAIS sur le cube 3D : une opacité < 1 sur un élément preserve-3d l'aplatit */
.vx-dice { transition: opacity .25s; }
.vx-dice.is-idle:not(.is-mine) { opacity: .62; }
.vx-dice.is-idle .vx-cube { animation: vx-dice-idle 3s ease-in-out infinite; }
.vx-dice.is-idle .vx-dice-glow { opacity: .15; }
.vx-dice.is-mine { cursor: pointer; }
.vx-dice.is-mine .vx-dice-glow { opacity: .9; animation: vx-dice-call 1s ease-in-out infinite; }
.vx-dice.is-mine.is-bonus .vx-dice-glow { background: radial-gradient(circle, color-mix(in srgb, var(--vx-gold) 70%, transparent), transparent 62%); }
.vx-dice.is-mine:focus-visible .vx-face { outline: 2px solid #fff; outline-offset: 2px; }
.vx-dice.is-spin { opacity: 1; }
.vx-dice.is-spin .vx-cube { animation: vx-dice-spin .5s linear infinite; }
.vx-dice.is-landed .vx-dice-glow { animation: vx-land .5s ease-out; }
.vx-dice.is-six .vx-dice-glow { opacity: .9; background: radial-gradient(circle, color-mix(in srgb, var(--vx-gold) 75%, transparent), transparent 62%); }
.vx-dice.is-pass .vx-tilt { animation: vx-nope .45s; }
.vx-dice.is-pass { opacity: .7; }
.vx-dice.is-boost .vx-dice-glow { animation: vx-boost .6s ease-out; }
.vx-dice.is-boost .vx-dice-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2) 40%, transparent 62%);
  animation: vx-boost-flash .6s ease-out;
}
.vx-dice.is-heat .vx-face::after {
  content: ""; position: absolute; inset: calc(max(1.5px, var(--dsz) * .028) * -1); border-radius: inherit; pointer-events: none; opacity: 0;
  border: max(1.5px, calc(var(--dsz) * .028)) solid #FF3B6B; box-shadow: 0 0 18px #FF7A1A;
  animation: vx-heat .6s steps(2) 2;
}
.vx-dice.is-heat .vx-face--vs::after { inset: 0; border: 0; }
/* Matières (skin du dé) */
.vx-dm--holo .vx-face { background: linear-gradient(160deg, color-mix(in srgb, var(--vd-body) 70%, transparent), color-mix(in srgb, var(--vd-body) 92%, #000)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); }
.vx-dm--pixel .vx-face { border-radius: 4%; border-style: solid; box-shadow: 0 0 0 1px #000 inset, 0 0 calc(var(--dsz) * .08) var(--vd-edge); image-rendering: pixelated; }
.vx-dm--chrome .vx-face { background: linear-gradient(135deg, #F4F8FF 0%, #9DAABD 35%, #E9EEF7 55%, #7C889C 80%, #D8DFEA 100%); border-color: #fff; }
.vx-dm--chrome .vx-pip { background: #18202E; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
.vx-dm--crystal .vx-face { background: linear-gradient(135deg, rgba(232, 247, 255, .85), rgba(190, 170, 255, .55) 45%, rgba(160, 255, 240, .6)); }
.vx-dm--crystal .vx-pip { background: var(--vd-edge); box-shadow: 0 0 4px #fff; }
.vx-dm--rock .vx-face { background: radial-gradient(circle at 30% 25%, #4A3328, var(--vd-body) 70%), repeating-linear-gradient(35deg, transparent 0 9px, rgba(255, 122, 26, .5) 9px 10px, transparent 10px 23px); }
.vx-dm--plasma .vx-face { background: radial-gradient(circle, color-mix(in srgb, var(--vd-edge) 45%, var(--vd-body)) 0%, var(--vd-body) 70%); }
.vx-dm--quantum .vx-face { background: radial-gradient(circle, #0B0420, #05010F 70%); }
.vx-dp--pixel .vx-pip { border-radius: 0; width: 70%; box-shadow: none; }
.vx-dp--facet .vx-pip { border-radius: 2px; width: 62%; rotate: 45deg; }
.vx-dp--ember .vx-pip { background: radial-gradient(circle, #FFE3B0, #FF7A1A 60%, #A02A00); box-shadow: 0 0 calc(var(--dsz) * .11) #FF7A1A; animation: vx-ember 1.3s ease-in-out infinite alternate; }
.vx-dp--spark .vx-pip { background: #fff; box-shadow: 0 0 calc(var(--dsz) * .09) var(--vd-edge), 0 0 calc(var(--dsz) * .17) var(--vd-edge); animation: vx-spark .5s steps(2) infinite; }
.vx-dp--glyph .vx-pip { display: none; }
.vx-dp--glyph .vx-fnum { display: block; grid-area: 1 / 1 / 4 / 4; font: 900 calc(var(--dsz) * .44)/1 var(--font-hud, system-ui); font-style: normal; color: var(--vd-edge); text-shadow: 0 0 6px var(--vd-edge), 0 0 14px var(--vd-edge); }
.vx-da--superposition.is-idle .vx-face { animation: vx-qflick 2.6s steps(1) infinite; }
.vx-da--smoke.is-landed .vx-dice-glow { background: radial-gradient(circle, rgba(255, 122, 26, .5), transparent 62%); }

/* ---------- Effets du plateau ---------- */
.vx-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.vx-tr-glow { stroke: var(--c1); stroke-width: calc(var(--tw, .22) * 1.5); opacity: .35; }
.vx-tr-core { stroke: color-mix(in srgb, var(--c2) 50%, #fff); stroke-width: calc(var(--tw, .22) * .4); }
.vx-tr-alt { stroke: var(--c3); stroke-width: calc(var(--tw, .22) * .3); opacity: .8; }
.vx-trail--comet .vx-tr-glow { stroke-width: calc(var(--tw, .4) * 1.4); opacity: .45; }
.vx-trail--comet .vx-tr-core { stroke-width: calc(var(--tw, .4) * .45); }
.vx-trail--pixels .vx-tr-glow { stroke-linecap: butt; stroke-width: calc(var(--tw, .22) * 1.2); opacity: .7; }
.vx-trail--pixels .vx-tr-core { stroke-linecap: butt; stroke-width: calc(var(--tw, .22) * .5); }
.vx-trail--lightning .vx-tr-glow { stroke-width: calc(var(--tw, .22) * 1.1); opacity: .6; }
.vx-trail--lightning .vx-tr-core { stroke: #fff; stroke-width: calc(var(--tw, .22) * .3); }
.vx-trail--warp .vx-tr-glow { stroke-width: calc(var(--tw, .22) * 1.8); opacity: .3; }
.vx-trail--warp .vx-tr-alt { stroke-width: calc(var(--tw, .22) * 1.1); opacity: .35; }
.vx-trail--plasma .vx-tr-glow { stroke-width: calc(var(--tw, .4) * 1.4); opacity: .5; }
.vx-trail--plasma .vx-tr-core { stroke: #fff; stroke-width: calc(var(--tw, .4) * .35); }
.vx-trail--plasma .vx-tr-alt { stroke-width: calc(var(--tw, .4) * .8); opacity: .5; }

.vx-bfx-i { position: absolute; display: block; transform: translate(-50%, -50%); pointer-events: none; }
.vx-shock { width: calc(var(--c) * 1); aspect-ratio: 1; border-radius: 50%; border: max(2px, calc(var(--c) * .09)) solid var(--c1); box-shadow: 0 0 calc(var(--c) * .4) var(--c1), inset 0 0 calc(var(--c) * .3) var(--c1); animation: vx-shock .8s ease-out both; }
.vx-shock2 { border-color: var(--c2); animation-delay: .12s; animation-duration: .9s; }
.vx-shock3 { border-color: #fff; animation-delay: .22s; animation-duration: 1s; }
.vx-impact { width: calc(var(--c) * 1.4); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, var(--c1) 40%, transparent 70%); animation: vx-impact .5s ease-out both; }
.vx-beam {
  width: calc(var(--c) * .8); height: calc(var(--c) * 2.2); transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(var(--a));
  background: linear-gradient(to top, #FFF2CC, var(--vx-gold) 25%, color-mix(in srgb, var(--c1) 80%, transparent) 70%, transparent);
  clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
  animation: vx-beam 1.05s ease-out both;
}
.vx-pillar {
  width: calc(var(--c) * .9); height: calc(var(--c) * 7.5); transform: translate(-50%, -100%); transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 242, 204, .95), color-mix(in srgb, var(--vx-gold) 60%, transparent) 18%, color-mix(in srgb, var(--c1) 40%, transparent) 55%, transparent);
  animation: vx-pillar 1.15s ease-out both;
}
.vx-ringfx { width: calc(var(--c) * .9); aspect-ratio: 1; border-radius: 50%; border: max(2px, calc(var(--c) * .08)) solid var(--c1); box-shadow: 0 0 calc(var(--c) * .3) var(--c1); animation: vx-ringfx .75s ease-out both; }
.vx-ringfx--late { animation-delay: .15s; border-color: var(--c2); }
.vx-ringfx--gold { border-color: var(--vx-gold); box-shadow: 0 0 calc(var(--c) * .4) var(--vx-gold); width: calc(var(--c) * 1.1); }
.vx-ringfx--wide { animation-delay: .3s; animation-duration: 1s; border-color: #fff; }
.vx-ringfx--ping { width: var(--ship, calc(var(--c) * 1.1)); border-width: 3px; animation-duration: .8s; }
.vx-beam--pixel { background-size: 100% calc(var(--c) * .2); image-rendering: pixelated; -webkit-mask: repeating-linear-gradient(to top, #000 0 calc(var(--c) * .14), transparent calc(var(--c) * .14) calc(var(--c) * .2)); mask: repeating-linear-gradient(to top, #000 0 calc(var(--c) * .14), transparent calc(var(--c) * .14) calc(var(--c) * .2)); }
.vx-flashcell { width: calc(var(--c) * 1.1); aspect-ratio: 1; border-radius: 22%; background: radial-gradient(circle, #fff, var(--c1) 55%, transparent 75%); animation: vx-impact .45s ease-out both; }
.vx-portal {
  width: calc(var(--c) * 1.9); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--c1), transparent 30%, var(--c2), transparent 62%, var(--c1), transparent);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%);
  animation: vx-portal .85s ease-in-out both;
}
.vx-portal--in { animation-name: vx-portal-in; }
.vx-zapfx {
  width: calc(var(--c) * 1.7); aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 10deg, var(--c1) 0 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 22%, transparent 66%); mask: radial-gradient(circle, transparent 18%, #000 22%, transparent 66%);
  animation: vx-zap .45s steps(3) both;
}
.vx-nova { width: calc(var(--c) * .5); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 calc(var(--c) * .8) calc(var(--c) * .35) var(--c1), 0 0 calc(var(--c) * 1.6) calc(var(--c) * .7) var(--c2); animation: vx-nova .85s ease-out both; }
.vx-blink { width: calc(var(--c) * 1.2); aspect-ratio: 1; border: calc(var(--c) * .12) solid var(--c1); box-shadow: 0 0 0 calc(var(--c) * .08) var(--c2); animation: vx-blinkfx .55s steps(4) both; }
.vx-meteor { width: calc(var(--c) * 1); aspect-ratio: 1; }
.vx-meteor::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--c) * .5); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle at 35% 35%, #FFF5D6, #FFC53D 40%, #FF7A1A 70%, #6A1A00);
  box-shadow: 0 0 calc(var(--c) * .4) #FF7A1A, calc(var(--c) * .5) calc(var(--c) * -.5) calc(var(--c) * .6) rgba(255, 122, 26, .6), calc(var(--c) * 1.2) calc(var(--c) * -1.2) calc(var(--c) * .8) rgba(255, 197, 61, .35);
  animation: vx-meteor .56s cubic-bezier(.55, 0, .9, .5) both;
}
.vx-root[data-layout="free"] .vx-portal { width: calc(var(--c) * 3.4); }

/* ---------- Bandeaux (au-dessus du plateau) ---------- */
.vx-banner-host { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; pointer-events: none; }
.vx-banner {
  max-width: 94%; padding: .2em .5em; text-align: center; color: #F2FFFF; letter-spacing: .04em;
  font: 900 clamp(26px, 9vw, 60px)/1.02 var(--font-hud, system-ui);
  text-shadow: 0 0 6px #fff, 0 0 18px var(--accent, #22F2FF), 0 0 44px var(--accent, #22F2FF), 0 2px 0 rgba(0, 0, 0, .5);
  animation: vx-banner var(--ms, 1.4s) var(--vx-spring) both;
}
.vx-banner small { display: block; margin-top: 8px; font: 700 clamp(12px, 3.6vw, 18px)/1.25 var(--font-display, system-ui); letter-spacing: .02em; color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .85); }
.vx-banner.is-small { font-size: clamp(22px, 7vw, 44px); }
.vx-banner.is-me { color: #F0FFFF; text-shadow: 0 0 6px #fff, 0 0 20px var(--accent, #22F2FF), 0 0 50px var(--accent, #22F2FF); }
.vx-banner.is-bad { color: #FFF0F4; text-shadow: 0 0 6px #fff, 0 0 20px var(--danger, #FF3B6B), 0 0 50px var(--accent-2, #FF2BD1); }
.vx-banner.is-heat { color: #FFF4EC; text-shadow: 0 0 6px #fff, 0 0 20px var(--orange, #FF7A1A), 0 0 50px var(--danger, #FF3B6B); }
.vx-banner.is-crash { color: #FFF4FB; text-shadow: 0 0 6px #fff, 0 0 20px var(--accent-2, #FF2BD1), 0 0 48px var(--orange, #FF7A1A); }
.vx-banner.is-boost { color: #FFFBEA; text-shadow: 0 0 6px #fff, 0 0 20px var(--vx-gold), 0 0 50px var(--accent-2, #FF2BD1); }
.vx-banner.is-dock { color: #FFFBEA; text-shadow: 0 0 6px #fff, 0 0 20px var(--vx-gold), 0 0 50px var(--vx-gold); }
.vx-banner.is-warn { font-size: clamp(22px, 7vw, 42px); color: #FFF4EC; text-shadow: 0 0 6px #fff, 0 0 20px var(--orange, #FF7A1A), 0 0 44px var(--orange, #FF7A1A); }
.vx-banner.is-tide { color: #EAFFFA; text-shadow: 0 0 6px #fff, 0 0 20px #2CF6C9, 0 0 44px #5AA9FF; }
.vx-banner.is-storm { color: #FFF1E8; text-shadow: 0 0 6px #fff, 0 0 20px #FF5A2E, 0 0 44px #FF7A1A; }
.vx-banner.is-dive { color: #F6EEFF; text-shadow: 0 0 6px #fff, 0 0 20px #B57BFF, 0 0 50px var(--vx-gold); }
.vx-banner.is-win, .vx-banner.is-start { background: linear-gradient(90deg, var(--accent, #22F2FF), var(--ok, #A6FF2E), var(--vx-gold), var(--accent-2, #FF2BD1)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .45)) drop-shadow(0 0 22px var(--accent, #22F2FF)); }
.vx-banner.is-win small, .vx-banner.is-start small { color: #fff; -webkit-text-fill-color: #fff; }
.vx-bn-logo { display: block; font-size: clamp(40px, 13vw, 92px); letter-spacing: .1em; line-height: .95; }

/* ---------- Textes flottants ---------- */
.vx-fxl { position: fixed; inset: 0; z-index: 46; pointer-events: none; overflow: hidden; }
.vx-canvas { position: fixed; inset: 0; z-index: 44; width: 100vw; height: 100vh; pointer-events: none; }
.vx-canvas[hidden] { display: none; }
.vx-flash { position: fixed; inset: 0; z-index: 47; display: block; opacity: 0; pointer-events: none; }
.vx-float {
  position: absolute; translate: -50% -50%; white-space: nowrap; font: 900 18px/1 var(--font-hud, system-ui); color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 14px var(--accent, #22F2FF); animation: vx-float 1.4s ease-out both;
}
.vx-float.is-bad { color: #FFE6F0; text-shadow: 0 0 6px #fff, 0 0 16px var(--danger, #FF3B6B), 0 0 30px var(--accent-2, #FF2BD1); }
.vx-float.is-auto { padding: 3px 7px; border-radius: 999px; font: 800 10px/1 var(--font-display, system-ui); letter-spacing: .08em; color: var(--on-neon, #03101C); background: var(--accent, #22F2FF); text-shadow: none; box-shadow: 0 0 12px var(--accent, #22F2FF); }
.vx-float.is-pass { font: 900 13px/1 var(--font-hud, system-ui); color: #FFF4E0; text-shadow: 0 0 8px var(--orange, #FF7A1A), 0 0 18px var(--orange, #FF7A1A); }
.vx-float.is-boost { font-size: 16px; color: #FFFBEA; text-shadow: 0 0 8px var(--vx-gold), 0 0 20px var(--vx-gold); }
.vx-float.is-warn { font-size: 26px; text-shadow: 0 0 12px var(--orange, #FF7A1A); }
.vx-float.is-rock { font-size: 14px; color: #F4EFE6; text-shadow: 0 0 8px #8A8296, 0 0 16px var(--vx-gold); }
.vx-float.is-hole { font-size: 22px; color: #F6EEFF; text-shadow: 0 0 8px #B57BFF, 0 0 20px var(--vx-gold); }

/* ---------- Ligne d'aide (au-dessus de MOI) : aide contextuelle, invite ou récit ---------- */
.vx-tip {
  grid-area: tip; position: relative; z-index: 5; height: 38px; contain: layout paint style; margin: 0; padding: 3px 12px 2px; display: grid; place-items: center; text-align: center;
  font: 600 12.5px/1.25 var(--font-ui, system-ui); color: var(--text); overflow: hidden; text-wrap: balance;
}
.vx-tip[data-k="me"] { color: #F2FEFF; font-weight: 700; }
.vx-tip[data-k="tip"] { color: #FFF3C4; }
.vx-tip.is-new { animation: vx-tip-in .45s var(--vx-spring); }

/* ---------- Barre MOI : ma flotte (une puce par vaisseau) ---------- */
.vx-me {
  --sc: #22F2FF;
  grid-area: me; position: relative; z-index: 5; display: flex; align-items: center; gap: 8px; margin: 0 8px; padding: 5px 7px; border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sd, #04313A) 80%, transparent), rgba(6, 10, 28, .9));
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); contain: layout paint;
}
.vx-me[hidden] { display: none; }
.vx-me-head { flex: none; display: grid; justify-items: center; gap: 1px; min-width: 44px; }
.vx-me-g { width: 18px; height: 18px; display: grid; place-items: center; }
.vx-me-gs { width: 16px; height: 16px; fill: var(--sc); filter: drop-shadow(0 0 3px var(--sc)); }
.vx-me-t { font: 900 11px/1 var(--font-hud, system-ui); letter-spacing: .1em; color: color-mix(in srgb, var(--sc) 50%, #fff); }
.vx-me-sum { font: 700 9.5px/1.1 var(--font-display, system-ui); color: var(--muted); white-space: nowrap; }
.vx-me-ships { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
.vx-chip {
  position: relative; min-width: 0; min-height: 40px; contain: layout style; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 2px 4px; padding: 3px 4px; cursor: pointer;
  border-radius: 10px; color: var(--text); background: rgba(3, 6, 18, .55); border: 1px solid color-mix(in srgb, var(--sc) 28%, transparent);
  font: 800 12px/1 var(--font-hud, system-ui); white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.vx-chip-g { flex: none; display: inline-flex; align-items: center; gap: 1px; }
.vx-chip-gs { width: 13px; height: 13px; fill: var(--sc); }
.vx-chip-g i { font: 900 10px/1 var(--font-hud, system-ui); font-style: normal; color: color-mix(in srgb, var(--sc) 60%, #fff); }
.vx-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vx-chip-m { font-style: normal; font: 800 11px/1 var(--font-display, system-ui); color: #03101C; padding: 2px 4px; border-radius: 6px; background: var(--sc); }
.vx-chip-m:empty { display: none; }
.vx-chip-w { position: absolute; right: -3px; top: -7px; display: none; padding: 0 4px; border-radius: 6px; font: 800 8.5px/1.35 var(--font-display, system-ui); font-style: normal; color: #fff; background: var(--danger, #FF3B6B); white-space: nowrap; }
.vx-chip.is-threat { border-color: color-mix(in srgb, var(--danger, #FF3B6B) 75%, transparent); }
.vx-chip.is-threat .vx-chip-w { display: block; }
.vx-chip[data-k="hangar"] .vx-chip-t { opacity: .8; }
.vx-chip[data-k="base"] { border-color: color-mix(in srgb, var(--vx-gold) 60%, transparent); color: var(--vx-gold); }
.vx-chip[data-k="gone"] { opacity: .4; }
.vx-chip.is-play { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 16%, rgba(3, 6, 18, .7)); }
.vx-chip.is-play::after { content: ""; position: absolute; inset: -2px; border-radius: 11px; border: 2px solid var(--sc); opacity: 0; animation: vx-chip-call 1s ease-in-out infinite; pointer-events: none; }
.vx-chip.is-hint { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 380px) { .vx-me { gap: 6px; margin: 0 6px; } .vx-me-head { min-width: 38px; } .vx-chip { font-size: 11px; gap: 3px; } .vx-me-sum { font-size: 9px; } }

/* ---------- Gros bouton d'action + ⚡ Auto ---------- */
.vx-act {
  grid-area: act; position: relative; z-index: 6; display: flex; align-items: stretch; gap: 8px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
}
.vx-act::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 1px; height: 2px; border-radius: 2px; opacity: 0; transition: opacity .3s;
  background: linear-gradient(90deg, transparent, var(--accent, #22F2FF), transparent);
}
.vx-root.is-my-turn .vx-act::before { opacity: 1; }
.vx-main { position: relative; flex: 1; min-width: 0; display: grid; }
/* Hauteur CONSTANTE (le plateau ne change jamais de taille d'une phase à l'autre) : un bouton secondaire (« armer
   la relance ») se place à droite du gros bouton, jamais dessous */
.vx-main-btns { display: grid; min-width: 0; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; gap: 7px; }
.vx-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 7px; }
.vx-btn { position: relative; min-width: 0; min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; padding: .45em .8em; overflow: hidden; white-space: nowrap; }
.vx-btn > span { font-size: inherit; }
/* Textes du gros bouton : jamais rognés des deux côtés (points de suspension dans la largeur du bouton) */
.vx-btn > span, .vx-btn > small { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vx-btn small { font: 700 .72em/1 var(--font-hud, system-ui); opacity: .8; }
.vx-btn small:empty { display: none; }
.vx-big { font-size: clamp(1.02rem, 4.6vw, 1.22rem); text-transform: uppercase; letter-spacing: .04em; }
.vx-big > small { flex-basis: auto; }
.vx-btn[aria-disabled="true"] { opacity: .55; }
.vx-sub { width: 78px; flex-direction: column; flex-wrap: nowrap; gap: 3px; padding: .35em .3em; white-space: normal; text-align: center; }
.vx-sub > span { font-size: 1.15rem; line-height: 1; }
.vx-sub > small { font: 700 .66rem/1.12 var(--font-display, system-ui); white-space: normal; text-overflow: clip; opacity: .9; }
/* Libellé du coup conseillé : court sur téléphone quand le bouton secondaire est à côté */
.vx-btn i.vx-l-long, .vx-btn i.vx-l-short { font-style: normal; }
.vx-l-short { display: none; }
@media (max-width: 460px) {
  .vx-main-btns:has(.vx-sub) .vx-l-long { display: none; }
  .vx-main-btns:has(.vx-sub) .vx-l-short { display: inline; }
  /* Deux boutons côte à côte (plongée « 🕳️ Plonger » / « ✋ Rester », fin « 🏆 Résultats » / « 🏠 Salon ») : sur
     téléphone, ils étaient rognés (« PLON… », « REST… ») → police, espacement et marges réduits, libellés entiers */
  .vx-row .vx-btn { padding-inline: .4em; gap: 2px 5px; font-size: .92rem; }
  .vx-row .vx-big { letter-spacing: .01em; }
}
.vx-arm.is-armed, .vx-sub.is-armed { color: #03101C; background: var(--accent, #22F2FF); border-color: var(--accent, #22F2FF); }
.vx-arm small { text-transform: none; letter-spacing: 0; font-family: var(--font-display, system-ui); }
.vx-autotag { font-style: normal; font: 800 .62em/1 var(--font-display, system-ui); padding: 2px 6px; border-radius: 99px; background: rgba(3, 16, 28, .35); text-transform: none; }
.vx-hint-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 8px; font: 800 .8em/1 var(--font-hud, system-ui); color: #03101C; background: rgba(255, 255, 255, .7); text-transform: none; }
.vx-hc-g { width: 12px; height: 12px; fill: currentColor; }
.vx-adv { font-style: normal; font: 800 .6em/1 var(--font-display, system-ui); text-transform: none; letter-spacing: 0; opacity: .9; }
.vx-dive .is-advised { box-shadow: 0 0 0 2px #fff; }
.vx-wait { display: grid; place-items: center; min-height: 56px; padding: 6px 10px; text-align: center; font: 600 .95rem/1.25 var(--font-display, system-ui); color: var(--muted); background: rgba(130, 180, 255, .05); border: 1px dashed var(--line-2, rgba(130, 180, 255, .28)); border-radius: 14px; }
/* Compte à rebours de MA décision : barre scaleX sous le gros bouton (Web Animations : aucune écriture par image) */
.vx-main-cd { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 4px; border-radius: 4px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; background: rgba(3, 16, 28, .45); }
.vx-main.has-cd .vx-main-cd { opacity: 1; }
.vx-main-cd > i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: rgba(3, 16, 28, .85); }
.vx-main.is-hot .vx-main-cd { background: rgba(255, 59, 107, .35); }
.vx-main.is-hot .vx-main-cd > i { background: var(--danger, #FF3B6B); }
.vx-main.is-hot .vx-big { animation: vx-nudge .5s ease-in-out infinite alternate; }
.vx-root.is-hot .vx-act::before { opacity: 1; background: linear-gradient(90deg, transparent, var(--orange, #FF7A1A), var(--danger, #FF3B6B), transparent); animation: vx-blink .5s steps(2) infinite; }
/* ⚡ Auto : un toucher (lancer + coup), ▾ ou appui long : choix fin */
.vx-auto-w { position: relative; flex: none; display: flex; align-items: stretch; }
.vx-auto {
  position: relative; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; justify-items: center; gap: 1px 4px; min-width: 66px; padding: 6px 8px; cursor: pointer;
  font: 800 .82rem/1 var(--font-display, system-ui); color: var(--text); background: rgba(130, 180, 255, .08); border: 1px solid var(--line-2, rgba(130, 180, 255, .28)); border-radius: 14px 0 0 14px;
}
.vx-auto > span { grid-row: span 2; font-size: 1.15rem; }
.vx-auto .vx-dot { justify-self: start; }
.vx-auto-more { width: 26px; cursor: pointer; font: 800 .8rem/1 var(--font-display, system-ui); color: var(--muted); background: rgba(130, 180, 255, .08); border: 1px solid var(--line-2, rgba(130, 180, 255, .28)); border-left: 0; border-radius: 0 14px 14px 0; }
.vx-dot { width: 22px; height: 12px; border-radius: 99px; background: rgba(130, 180, 255, .2); border: 1px solid var(--line-2, rgba(130, 180, 255, .28)); position: relative; display: block; }
.vx-dot::after { content: ""; position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%; background: #B9C8E8; transition: transform .2s var(--vx-spring); }
.vx-auto.is-on { color: var(--on-neon, #03101C); background: var(--ok, #A6FF2E); border-color: var(--ok, #A6FF2E); }
.vx-auto.is-on .vx-dot, .vx-am.is-on .vx-dot { background: rgba(3, 16, 28, .35); border-color: rgba(3, 16, 28, .5); }
.vx-auto.is-on .vx-dot::after, .vx-am.is-on .vx-dot::after { transform: translateX(10px); background: #fff; }
.vx-auto.is-half { background: color-mix(in srgb, var(--ok, #A6FF2E) 55%, rgba(130, 180, 255, .1)); }
.vx-auto-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; width: min(84vw, 300px); display: grid; gap: 6px; padding: 10px;
  background: rgba(9, 14, 36, .97); border: 1px solid var(--line-2, rgba(130, 180, 255, .28)); border-radius: 14px; box-shadow: 0 14px 34px -10px #000;
  animation: vx-pop .25s var(--vx-spring) both;
}
.vx-auto-menu[hidden] { display: none; }
.vx-am { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 6px 10px; cursor: pointer; font: 700 .9rem/1.2 var(--font-display, system-ui); color: var(--text); background: rgba(130, 180, 255, .07); border: 1px solid var(--line, rgba(130, 180, 255, .16)); border-radius: 10px; text-align: left; }
.vx-am.is-on { color: var(--on-neon, #03101C); background: var(--ok, #A6FF2E); border-color: var(--ok, #A6FF2E); }
.vx-am-note { margin: 2px 2px 0; font: 500 .74rem/1.35 var(--font-ui, system-ui); color: var(--muted); }
@media (max-width: 380px) { .vx-auto { min-width: 58px; padding-inline: 6px; } .vx-act { gap: 6px; } }

/* Réactions : menu flottant sous la barre du haut (😀) */
.vx-emotes {
  position: absolute; right: 8px; top: calc(48px + env(safe-area-inset-top)); z-index: 30; width: min(calc(100% - 16px), 330px);
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 16px;
  background: rgba(9, 14, 36, .96); border: 1px solid var(--line-2, rgba(130, 180, 255, .28)); box-shadow: 0 14px 34px -10px #000;
  animation: vx-pop .22s var(--vx-spring) both;
}
.vx-emotes[hidden] { display: none; }
.vx-react { width: 42px; height: 42px; font-size: 22px; }

/* ---------- Modales (aide, quitter, fin de secours) ---------- */
.vx-modal {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: rgba(2, 4, 12, .88); animation: vx-fade .2s both;
}
.vx-modal[hidden] { display: none; }
.vx-mcard { --fill: var(--glass-strong, rgba(9, 14, 36, .93)); width: min(94vw, 500px); max-height: 88dvh; overflow: auto; padding: 20px; text-align: center; animation: vx-pop .4s var(--vx-spring) both; }
.vx-mtitle { margin: 4px 0 0; font: 800 24px/1.15 var(--font-display, system-ui); }
.vx-mtext { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.vx-mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.vx-mrow:has(> :only-child) { grid-template-columns: 1fr; }
.vx-end-ico { font-size: 44px; line-height: 1; }
.vx-end-list { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; text-align: left; }
.vx-end-list li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: rgba(130, 180, 255, .07); font-size: 14px; }
.vx-end-n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-help { text-align: left; font-size: 14px; line-height: 1.45; color: var(--text); }
.vx-help ol, .vx-help ul { margin: 10px 0 0; padding-left: 1.3em; display: grid; gap: 6px; list-style: decimal; }
.vx-help .vx-help-intro { margin: 0; font-size: 15px; color: var(--text); }
.vx-help .vx-help-list { gap: 8px; font-size: 15px; color: var(--text); }
.vx-help-more { margin-top: 14px; padding: 8px 10px; border-radius: 10px; background: rgba(130, 180, 255, .06); }
.vx-help-more > summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.vx-help-more[open] > summary { margin-bottom: 4px; }
.vx-help ul { list-style: disc; }
.vx-help li::marker { color: var(--ok, #A6FF2E); font-weight: 700; }
.vx-help h3 { margin: 16px 0 0; font: 800 13px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ok, #A6FF2E); }
.vx-help p { margin: 8px 0 0; color: var(--muted); }
.vx-help .vx-help-map { margin-top: 12px; padding: 10px 12px; border-radius: 12px; color: var(--text); background: rgba(130, 180, 255, .08); border: 1px solid var(--line, rgba(130, 180, 255, .16)); }
.vx-help .vx-help-legend { list-style: none; padding: 0; }
.vx-help-fmt { padding: 8px 10px; border-radius: 10px; background: rgba(130, 180, 255, .07); }
.vx-help-sq { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-hc-sq { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; color: var(--text); border: 1px solid var(--sc); font: 600 12px/1 var(--font-display); }
.vx-hc-sq b { color: var(--sc); }
.vx-hc-sq .vx-hc-g { fill: var(--sc); }
.vx-keys kbd { display: inline-block; min-width: 1.6em; padding: 1px 5px; margin: 0 1px; border-radius: 5px; border: 1px solid var(--line-2); font: 700 11px/1.4 var(--font-ui); color: var(--text); text-align: center; }

/* ---------- Journal (grand écran) ---------- */
.vx-side { display: none; }

/* ---------- Grand écran : plateau carré à gauche, colonne de droite (MOI · course · aide · journal) ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 5/4), (max-height: 520px) and (min-aspect-ratio: 3/2) {
  .vx-root {
    --bs: min(calc(100dvh - 146px), calc(100vw - 470px));
    grid-template-columns: minmax(0, 1fr) var(--bs) minmax(300px, 420px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top top top top"
      ". stage me ."
      ". stage race ."
      ". stage tip ."
      ". stage side ."
      ". act side .";
    column-gap: 18px;
  }
  .vx-top { padding-inline: 14px; }
  .vx-wide-only { display: inline; }
  .vx-stage { padding: 4px 0 0; justify-content: flex-start; }
  .vx-board { width: min(100cqw, 100cqh); }
  .vx-feed--stage { display: none !important; }
  .vx-banner-host { inset: 0; }
  .vx-race { flex-direction: column; --rg: 7px; padding: 10px 0 0; }
  .vx-pl {
    flex: none; height: 52px; padding: 7px 10px 9px; gap: 9px;
    transform: translateY(calc((var(--r, 0) - var(--i, 0)) * (100% + var(--rg))));
  }
  .vx-pl.is-turn { translate: 4px 0; }
  .vx-pl-av { width: 34px; }
  .vx-pl-name { font-size: 13.5px; }
  .vx-pl-meta { font-size: 12px; gap: 8px; }
  .vx-pl-dock { display: inline !important; }
  .vx-pl-cd { left: 12px; right: 12px; }
  .vx-me { margin: 0; padding: 10px 12px; gap: 12px; }
  .vx-me-head { min-width: 64px; gap: 3px; }
  .vx-me-g, .vx-me-gs { width: 22px; height: 22px; }
  .vx-me-t { font-size: 13px; }
  .vx-me-sum { font-size: 11px; }
  .vx-chip { min-height: 48px; font-size: 14px; }
  .vx-tip { min-height: 40px; padding: 6px 4px; justify-content: flex-start; text-align: left; font-size: 13px; }
  .vx-side { grid-area: side; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; padding: 4px 0 10px; overflow: hidden; contain: strict; }
  .vx-feed--side {
    display: grid; gap: 4px; font: 500 12.5px/1.32 var(--font-ui, system-ui); color: var(--muted);
    -webkit-mask: linear-gradient(to top, #000 70%, transparent); mask: linear-gradient(to top, #000 70%, transparent);
  }
  .vx-feed--side li { padding: 4px 9px; border-radius: 8px; background: rgba(3, 6, 18, .5); border: 1px solid rgba(130, 180, 255, .08); }
  .vx-feed--side li:last-child { color: var(--text); background: rgba(3, 6, 18, .75); border-color: rgba(130, 180, 255, .2); }
  .vx-act { padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
  .vx-btn { min-height: 60px; }
  .vx-big { font-size: 1.15rem; }
  .vx-wait { min-height: 60px; }
  .vx-emotes { right: 14px; top: calc(54px + env(safe-area-inset-top)); }
}
@media (min-width: 1500px) and (min-aspect-ratio: 5/4) {
  .vx-root { grid-template-columns: minmax(0, 1fr) var(--bs) minmax(340px, 460px) minmax(0, 1fr); column-gap: 28px; }
  .vx-pl { height: 58px; }
  .vx-pl-av { width: 38px; }
}
@media (max-height: 520px) and (min-aspect-ratio: 3/2) {
  .vx-root {
    --bs: min(calc(100dvh - 46px), calc(100vw - 340px));
    grid-template-columns: minmax(0, 1fr) var(--bs) minmax(280px, 420px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top top top top"
      ". stage race ."
      ". stage me ."
      ". stage tip ."
      ". stage side ."
      ". stage act .";
    column-gap: 10px;
  }
  .vx-top { padding-top: calc(2px + env(safe-area-inset-top)); }
  .vx-ib { width: 32px; height: 32px; font-size: 15px; }
  .vx-stage { padding: 0 0 4px; }
  /* la course en rangée compacte (avatar, %), comme sur téléphone en hauteur */
  .vx-race { flex-direction: row; --rg: 5px; padding: 2px 0 4px; }
  .vx-pl { flex: 1 1 0; height: auto; padding: 4px 5px 7px; gap: 4px; transform: translateX(calc((var(--r, 0) - var(--i, 0)) * (100% + var(--rg)))); }
  .vx-pl.is-turn { translate: 0 -1px; }
  .vx-pl-av { width: 24px; }
  .vx-pl-name { font-size: 11px; }
  .vx-pl-meta { font-size: 10.5px; }
  .vx-pl-dock { display: none !important; }
  .vx-root[data-n="5"] .vx-pl-name, .vx-root[data-n="6"] .vx-pl-name { display: none; }
  .vx-me { padding: 4px 8px; gap: 8px; }
  .vx-me-head { min-width: 44px; }
  .vx-chip { min-height: 36px; font-size: 12px; }
  .vx-tip { height: auto; min-height: 26px; padding: 2px 2px; font-size: 11.5px; }
  .vx-feed--side { font-size: 11px; }
  .vx-side { padding: 2px 0; }
  .vx-btn, .vx-wait { min-height: 46px; }
  .vx-big { font-size: 1rem; }
  .vx-act { padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); }
  .vx-emotes { top: calc(40px + env(safe-area-inset-top)); }
}

/* ---------- Salon : limite de joueurs du jeu choisi (js/lobby.js) ---------- */
.lobby-cap {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; text-align: left;
  font: 600 13px/1.35 var(--font-ui, system-ui); color: #FFF6E5;
  background: linear-gradient(135deg, rgba(255, 122, 26, .16), rgba(255, 59, 107, .12)); border: 1px solid rgba(255, 197, 61, .55);
  box-shadow: 0 0 18px -6px rgba(255, 122, 26, .6);
}
.lobby-cap[hidden] { display: none; }
.lobby-cap b { color: var(--warn, #FFC53D); }
.lobby-cap .lc-ico { font-size: 18px; line-height: 1.1; }

/* ---------- Images clés ---------- */
@keyframes vx-drift { to { transform: translateY(200px); } }
@keyframes vx-twinkle { 50% { opacity: .25; } }
@keyframes vx-snow { to { transform: translateY(260px); } }
@keyframes vx-floor { to { transform: translateY(56px); } }
@keyframes vx-dust { to { transform: translate(160px, 140px); } }
@keyframes vx-bubbles { to { transform: translateY(-160px); } }
@keyframes vx-nebula { to { transform: translate(4%, -3%) scale(1.08) rotate(6deg); } }
@keyframes vx-hot { from { opacity: .45; } to { opacity: 1; } }
@keyframes vx-art-twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes vx-art-fall { from { transform: translateY(-3.1vmax); } to { transform: translateY(3.1vmax); } }
@keyframes vx-art-drift { from { transform: translate(-1.9vmax, -1.25vmax); } to { transform: translate(1.9vmax, 1.25vmax); } }
@keyframes vx-art-scroll { from { transform: translateY(0); } to { transform: translateY(3.1vmax); } }
@keyframes vx-sweep { 0%, 100% { transform: translate(-33.333%, -33.333%); } 50% { transform: translate(33.333%, 33.333%); } }
@keyframes vx-spin { to { rotate: 360deg; } }
@keyframes vx-breathe { 50% { opacity: .55; transform: scale(.88); } }
@keyframes vx-blink { 50% { opacity: .45; } }
@keyframes vx-bump { 40% { scale: 1.35; } }
@keyframes vx-bump-c { 0% { scale: 1; } 35% { scale: 1.6; } 100% { scale: 1; } }
@keyframes vx-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-14deg); } 22% { opacity: 1; transform: scale(1) rotate(-8deg); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vx-fire { from { transform: scaleY(.82); opacity: .75; } to { transform: scaleY(1.12); opacity: 1; } }
@keyframes vx-fire-soft { from { opacity: .35; } to { opacity: .6; } }
@keyframes vx-hover { 50% { transform: translateY(calc(var(--c) * -.035)); } }
@keyframes vx-wobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes vx-flare { 50% { transform: scale(1.35); opacity: 1; } 0%, 100% { opacity: .7; } }
@keyframes vx-pulse { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes vx-ready { 50% { transform: translateY(calc(var(--c) * -.06)) scale(1.06); } }
@keyframes vx-hint { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes vx-chip-call { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
@keyframes vx-nope { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@keyframes vx-nudge { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes vx-hit { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vx-ping { 0% { scale: 1; } 35% { scale: 1.45; } 100% { scale: 1; } }
@keyframes vx-dock-in { 0% { scale: 1; opacity: 1; } 60% { scale: 1.25; opacity: 1; } 100% { scale: 0; opacity: 0; } }
@keyframes vx-warp-out { 0% { scale: 1; opacity: 1; } 100% { scale: .2; opacity: 0; } }
@keyframes vx-ship-in { from { opacity: 0; scale: .2; } }
@keyframes vx-dot { from { scale: .6; opacity: .5; } to { scale: 1.1; opacity: 1; } }
@keyframes vx-mz { 50% { scale: 1.12; opacity: .7; } }
@keyframes vx-dice-idle { 50% { translate: 0 calc(var(--dsz) * -.045); } }
@keyframes vx-dice-call { 0%, 100% { opacity: .55; scale: .9; } 50% { opacity: 1; scale: 1.12; } }
@keyframes vx-dice-spin { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(720deg); } }
@keyframes vx-land { 0% { opacity: 1; scale: 1.5; } 100% { opacity: .35; scale: 1; } }
@keyframes vx-boost { 0% { opacity: 1; scale: 2; } 100% { opacity: .35; scale: 1; } }
@keyframes vx-boost-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vx-heat { 50% { opacity: 1; } }
@keyframes vx-ember { from { opacity: .75; } to { opacity: 1; } }
@keyframes vx-spark { 50% { opacity: .5; } }
@keyframes vx-die-pulse { from { scale: .92; } to { scale: 1.12; } }
@keyframes vx-qroll { 50% { opacity: .35; } }
@keyframes vx-qflick { 0%, 100% { opacity: 1; } 30% { opacity: .55; } 31% { opacity: 1; } 62% { opacity: .7; } 63% { opacity: 1; } }
@keyframes vx-rock-break { 0% { scale: 1.25; opacity: 1; } 100% { scale: .55; opacity: .15; } }
@keyframes vx-rock-back { 0% { scale: .3; opacity: .15; } 100% { scale: 1; opacity: 1; } }
@keyframes vx-hole-ok { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; transform: scale(1.7); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes vx-hole-ko { 0% { opacity: 0; transform: scale(2.4); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.3); } }
@keyframes vx-tip-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes vx-shock { from { opacity: 1; transform: translate(-50%, -50%) scale(.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(4.2); } }
@keyframes vx-impact { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
@keyframes vx-beam { 0% { opacity: 0; transform: translate(-50%, -100%) rotate(var(--a)) scaleY(.1); } 25% { opacity: 1; transform: translate(-50%, -100%) rotate(var(--a)) scaleY(1); } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -100%) rotate(var(--a)) scaleY(.6); } }
@keyframes vx-pillar { 0% { opacity: 0; transform: translate(-50%, -100%) scaleY(.1); } 30% { opacity: 1; transform: translate(-50%, -100%) scaleY(1); } 100% { opacity: 0; transform: translate(-50%, -100%) scaleY(1.1) scaleX(.3); } }
@keyframes vx-ringfx { from { opacity: 1; transform: translate(-50%, -50%) scale(.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(3.2); } }
@keyframes vx-portal { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(540deg) scale(1.2); } }
@keyframes vx-portal-in { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(1.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-540deg) scale(.1); } }
@keyframes vx-zap { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(40deg) scale(1.4); } }
@keyframes vx-nova { 0% { opacity: .9; transform: translate(-50%, -50%) scale(1.4); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(.3); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(5); } }
@keyframes vx-blinkfx { 0%, 50% { opacity: 1; transform: translate(-50%, -50%) scale(.6); } 25%, 75% { opacity: 0; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes vx-meteor { from { opacity: 0; transform: translate(calc(var(--c) * 5), calc(var(--c) * -7)) scale(1.6); } 15% { opacity: 1; } to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes vx-quake { 20% { transform: translate(-.6%, .3%); } 40% { transform: translate(.5%, -.4%); } 60% { transform: translate(-.3%, .2%); } 80% { transform: translate(.2%, 0); } }
@keyframes vx-banner { 0% { opacity: 0; transform: scale(.5); } 16% { opacity: 1; transform: scale(1.08); } 28% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes vx-float { 0% { opacity: 0; transform: translateY(8px) scale(.5); } 16% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-44px) scale(1); } }
@keyframes vx-fade { from { opacity: 0; } }
@keyframes vx-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } }

/* ---------- Appareil modeste (html.perf-lite, docs/fluidite.md) : on coupe le décor, pas le jeu ---------- */
/* Restent : dé qui roule, vaisseaux qui avancent / glissent / volent / plongent, voile de tempête qui tourne,
   astéroïdes pulvérisés, vaisseaux jouables qui pulsent, coup conseillé, destinations, comptes à rebours. */
.perf-lite #screen-vaisseaux .vx-bg-amb, .perf-lite #screen-vaisseaux .vx-bg-amb2, .perf-lite #screen-vaisseaux .vx-bg-art-amb,
.perf-lite #screen-vaisseaux .vx-basefx-halo, .perf-lite #screen-vaisseaux .vx-basefx-spin, .perf-lite #screen-vaisseaux .vx-hole-ring,
.perf-lite #screen-vaisseaux .vx-hull, .perf-lite #screen-vaisseaux .vx-fire,
.perf-lite #screen-vaisseaux .vx-ghost-ring, .perf-lite #screen-vaisseaux .vx-mzone-r2, .perf-lite #screen-vaisseaux .vx-pathdot::before,
.perf-lite #screen-vaisseaux .vx-ship.is-option::before, .perf-lite #screen-vaisseaux .vx-ship.is-target .vx-mk::before,
.perf-lite #screen-vaisseaux .vx-ship.is-threat .vx-mk::before, .perf-lite #screen-vaisseaux .vx-chip.is-play::after,
.perf-lite #screen-vaisseaux .vx-dice.is-idle .vx-cube, .perf-lite #screen-vaisseaux .vx-dp--ember .vx-pip, .perf-lite #screen-vaisseaux .vx-dp--spark .vx-pip,
.perf-lite #screen-vaisseaux .vx-da--superposition.is-idle .vx-face { animation: none; }
.perf-lite #screen-vaisseaux .vx-chip.is-play::after { opacity: .7; }
.perf-lite #screen-vaisseaux .vx-sweep { display: none; }
.perf-lite #screen-vaisseaux .vx-hull > svg, .perf-lite #screen-vaisseaux .vx-ship.is-flying .vx-hull > svg { filter: none; }
.perf-lite #screen-vaisseaux .vx-tr-glow, .perf-lite #screen-vaisseaux .vx-shock2, .perf-lite #screen-vaisseaux .vx-shock3, .perf-lite #screen-vaisseaux .vx-ringfx--late, .perf-lite #screen-vaisseaux .vx-ringfx--wide { display: none; }
.perf-lite #screen-vaisseaux .vx-shock, .perf-lite #screen-vaisseaux .vx-ringfx, .perf-lite #screen-vaisseaux .vx-nova { box-shadow: none; }
.perf-lite #screen-vaisseaux .vx-banner { text-shadow: 0 0 6px #fff, 0 0 16px var(--accent, #22F2FF), 0 2px 0 rgba(0, 0, 0, .5); }
.perf-lite #screen-vaisseaux .vx-banner.is-win, .perf-lite #screen-vaisseaux .vx-banner.is-start { filter: none; text-shadow: none; }
.perf-lite #screen-vaisseaux .vx-float { text-shadow: 0 0 6px #000; }
.perf-lite #screen-vaisseaux .vx-main.is-hot .vx-big { animation: none; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  #screen-vaisseaux *, #screen-vaisseaux *::before, #screen-vaisseaux *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .vx-sweep, .vx-bg-amb, .vx-bg-amb2, .vx-bg-art-amb, .vx-basefx-halo, .vx-basefx-spin, .vx-hole-ring, .vx-hull, .vx-fire, .vx-ghost-ring, .vx-mzone-r2 { animation: none !important; }
  .vx-sweep { display: none; }
  .vx-fxl, .vx-canvas, .vx-bfx, .vx-trails { display: none; }
  .vx-banner { animation: vx-fade .01ms both !important; }
  .vx-ship.is-playable::before { animation: none !important; opacity: 1; }
}

/* =========================================================================
   THÈME « SOIRÉE JEUX » (docs/theme-soiree-jeux.md §5) — plateau classique = vrais objets
   Actif quand #screen-vaisseaux porte data-theme-clair (posé par VaisseauxUI.applySkin sur le plateau classique) :
   la croix des petits chevaux sur papier, posée sur le feutre d'une table, 4 écuries et 4 escaliers aux couleurs
   franches, de vrais pions. Lisible en sombre ET en clair. Les plateaux payants gardent le décor spatial (thème
   « Espace », rien n'est perdu). Jetons de css/theme.css uniquement ; rien d'animé ajouté.
   ========================================================================= */
#screen-vaisseaux[data-theme-clair] { color: var(--text); --vx-gold: var(--accent); }
#screen-vaisseaux[data-theme-clair] .vx-root { background: radial-gradient(120% 80% at 50% 40%, var(--bg-2), var(--bg) 75%); }
#screen-vaisseaux[data-theme-clair] .vx-bg { display: none; }
#screen-vaisseaux[data-theme-clair] .vx-top { background: var(--bg); border-bottom: 1px solid var(--line); }
#screen-vaisseaux[data-theme-clair] .vx-ib { color: var(--text); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ombre-1); }
#screen-vaisseaux[data-theme-clair] .vx-info-txt { color: var(--muted); }
/* Joueurs : panneaux de la charte, pastille de couleur, filet jaune sur celui qui joue */
#screen-vaisseaux[data-theme-clair] .vx-pl, #screen-vaisseaux[data-theme-clair] .vx-pl.is-me { background: var(--surface); border-color: var(--line); box-shadow: var(--ombre-1); }
#screen-vaisseaux[data-theme-clair] .vx-pl.is-me { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
#screen-vaisseaux[data-theme-clair] .vx-pl.is-turn { border-color: var(--accent); }
#screen-vaisseaux[data-theme-clair] .vx-pl::before { box-shadow: 0 0 0 1px var(--accent); }
#screen-vaisseaux[data-theme-clair] .vx-pl-av { background: var(--surface-3); box-shadow: 0 0 0 2px var(--sc); }
#screen-vaisseaux[data-theme-clair] .vx-pl-g { background: var(--surface); }
#screen-vaisseaux[data-theme-clair] .vx-pl-meta, #screen-vaisseaux[data-theme-clair] .vx-pl-pct { color: var(--text); }
#screen-vaisseaux[data-theme-clair] .vx-pl-bar { background: var(--line); }
/* Le plateau : une croix de papier sur un tapis de feutre (comme la boîte), cases à filet d'encre */
#screen-vaisseaux[data-theme-clair] .vx-board { border-radius: var(--r-xl); background: radial-gradient(120% 120% at 50% 35%, var(--tapis-clair), var(--tapis) 60%, var(--tapis-2)); box-shadow: 0 0 0 6px var(--bois), 0 0 0 7px var(--bois-2), var(--ombre-3); }
#screen-vaisseaux[data-theme-clair] .vx-sweep, #screen-vaisseaux[data-theme-clair] .vx-basefx { display: none; }
#screen-vaisseaux[data-theme-clair] .vx-cross { fill: var(--papier); stroke: var(--encre); stroke-width: .05; filter: none; }
#screen-vaisseaux[data-theme-clair] .vx-cell, #screen-vaisseaux[data-theme-clair] .vx-cell.is-alt { fill: var(--papier); stroke: var(--encre); stroke-width: .035; }
#screen-vaisseaux[data-theme-clair] .vx-sas .vx-cell { fill: var(--sc); stroke: var(--encre); stroke-width: .05; filter: none; }
#screen-vaisseaux[data-theme-clair] .vx-foot .vx-cell { fill: color-mix(in srgb, var(--sc) 25%, var(--papier)); stroke: var(--encre); stroke-width: .035; stroke-dasharray: none; }
#screen-vaisseaux[data-theme-clair] .vx-chev { stroke: var(--encre); }
#screen-vaisseaux[data-theme-clair] .vx-foot .vx-chev { stroke: var(--encre); opacity: .7; }
#screen-vaisseaux[data-theme-clair] .vx-cellg.is-free.vx-sas .vx-cell, #screen-vaisseaux[data-theme-clair] .vx-cellg.is-free.vx-foot .vx-cell { fill: color-mix(in srgb, var(--sc) 30%, var(--papier)); stroke: var(--encre); }
/* Écuries : un grand carré de la couleur du joueur, 4 emplacements ronds */
#screen-vaisseaux[data-theme-clair] .vx-zone-bg { fill: var(--sc); stroke: var(--encre); stroke-width: .06; filter: none; }
#screen-vaisseaux[data-theme-clair] .vx-zone-in { stroke: var(--papier); stroke-width: .04; stroke-dasharray: none; opacity: .7; }
#screen-vaisseaux[data-theme-clair] .vx-zone-g { fill: color-mix(in srgb, var(--papier) 35%, transparent); }
#screen-vaisseaux[data-theme-clair] .vx-pad { fill: var(--papier); stroke: var(--encre); stroke-width: .04; opacity: .9; }
#screen-vaisseaux[data-theme-clair] .vx-zname { fill: var(--encre); paint-order: stroke; stroke: var(--papier); stroke-width: .08; }
#screen-vaisseaux[data-theme-clair] .vx-zone.is-free .vx-zone-bg { fill: color-mix(in srgb, var(--sc) 35%, var(--papier)); stroke: var(--encre); }
#screen-vaisseaux[data-theme-clair] .vx-zone.is-free .vx-zname { fill: var(--encre); }
/* Escaliers : marches numérotées à la couleur du joueur ; centre en 4 triangles */
#screen-vaisseaux[data-theme-clair] .vx-ramp { fill: color-mix(in srgb, var(--sc) calc(35% + var(--k) * 55%), var(--papier)); stroke: var(--encre); stroke-width: .035; }
#screen-vaisseaux[data-theme-clair] .vx-rampn { fill: var(--encre); stroke: var(--papier); stroke-width: .07; }
#screen-vaisseaux[data-theme-clair] .vx-rampg.is-free .vx-ramp { fill: color-mix(in srgb, var(--sc) 25%, var(--papier)); stroke: var(--encre); }
#screen-vaisseaux[data-theme-clair] .vx-rampg.is-free .vx-rampn { opacity: .55; }
#screen-vaisseaux[data-theme-clair] .vx-center-t { fill: var(--sc); stroke: var(--encre); }
#screen-vaisseaux[data-theme-clair] .vx-center-t.is-free { fill: color-mix(in srgb, var(--sc) 40%, var(--papier)); }
#screen-vaisseaux[data-theme-clair] .vx-center-fr { stroke: var(--encre); }
/* Les pions : de vrais pions en bois vus de dessus (js/vaisseaux-ui.js, pionInner), ombre posée, pas de lueur */
.vx-pion { rotate: none !important; }
.vx-pion > svg { filter: none !important; } /* pas de filtre sur un objet qui bouge (fluidite.md) : le socle sombre fait l'ombre */
.vx-pion .p-socle { fill: var(--sc); stroke: rgba(0, 0, 0, .55); stroke-width: 1.6; }
.vx-pion .p-col { fill: color-mix(in srgb, var(--sc) 82%, #000); }
.vx-pion .p-tete { fill: var(--sc); stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.vx-pion .p-reflet { fill: rgba(255, 255, 255, .55); }
.vx-pion ~ .vx-gly { opacity: .9; }
/* Ligne d'aide, ma barre, gros bouton, Auto */
#screen-vaisseaux[data-theme-clair] .vx-tip, #screen-vaisseaux[data-theme-clair] .vx-tip[data-k="me"] { color: var(--text); }
#screen-vaisseaux[data-theme-clair] .vx-tip[data-k="tip"] { color: var(--accent-text); }
#screen-vaisseaux[data-theme-clair] .vx-me { background: var(--surface); border-color: var(--line-2); box-shadow: var(--ombre-2); }
#screen-vaisseaux[data-theme-clair] .vx-me-gs { filter: none; }
#screen-vaisseaux[data-theme-clair] .vx-me-t { color: var(--text); }
#screen-vaisseaux[data-theme-clair] .vx-chip { color: var(--text); background: var(--surface-2); border-color: var(--line-2); }
#screen-vaisseaux[data-theme-clair] .vx-chip-g i { color: var(--text); }
#screen-vaisseaux[data-theme-clair] .vx-chip-m { color: var(--on-accent); }
#screen-vaisseaux[data-theme-clair] .vx-chip[data-k="base"] { color: var(--ok-text); border-color: var(--ok); }
#screen-vaisseaux[data-theme-clair] .vx-chip.is-play { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border-color: var(--accent); }
#screen-vaisseaux[data-theme-clair] .vx-chip.is-play::after { border-color: var(--accent); }
#screen-vaisseaux[data-theme-clair] .vx-chip.is-hint { box-shadow: 0 0 0 2px var(--accent); }
#screen-vaisseaux[data-theme-clair] .vx-act::before { background: var(--accent); }
#screen-vaisseaux[data-theme-clair] .vx-arm.is-armed, #screen-vaisseaux[data-theme-clair] .vx-sub.is-armed { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
#screen-vaisseaux[data-theme-clair] .vx-hint-chip { color: var(--encre); background: var(--papier); }
#screen-vaisseaux[data-theme-clair] .vx-autotag { background: rgb(0 0 0 / .14); }
.vx-regles { flex: none; }
@media (max-width: 400px) { .vx-30 { display: none; } }
@media (max-width: 340px) { .vx-regles-l { display: none; } }
.vx-pion .p-socle { fill: color-mix(in srgb, var(--sc) 70%, #000); stroke: rgba(0, 0, 0, .5); stroke-width: 1.2; }
.vx-pion .p-corps { fill: var(--sc); stroke: rgba(0, 0, 0, .5); stroke-width: 1.2; stroke-linejoin: round; }
.vx-pion .p-col { fill: color-mix(in srgb, var(--sc) 80%, #000); stroke: rgba(0, 0, 0, .45); stroke-width: 1; }
.vx-pion .p-tete { fill: var(--sc); stroke: rgba(0, 0, 0, .5); stroke-width: 1.2; }
/* Insigne de forme (daltonisme) : petite pastille en bas à droite du pion, jamais au milieu */
.vx-pion ~ .vx-gly { left: 76%; top: 78%; width: 34%; background: var(--papier); box-shadow: 0 0 0 1px var(--encre); }
.vx-pion ~ .vx-gly .vx-gly-s { fill: var(--encre); }
/* Le dé : un vrai dé ivoire à points noirs (faces maison, sans lueur) */
#screen-vaisseaux[data-theme-clair] .vx-dice { --vd-body: var(--ivoire); --vd-edge: var(--encre); }
#screen-vaisseaux[data-theme-clair] .vx-face:not(.vx-face--vs) { background: var(--ivoire); border: max(1px, calc(var(--dsz) * .02)) solid color-mix(in srgb, var(--encre) 35%, var(--ivoire)); box-shadow: inset 0 calc(var(--dsz) * -.05) calc(var(--dsz) * .08) rgba(0, 0, 0, .18); }
#screen-vaisseaux[data-theme-clair] .vx-pip { background: var(--encre); box-shadow: none; }
#screen-vaisseaux[data-theme-clair] .vx-fnum { display: none; }
#screen-vaisseaux[data-theme-clair] .vx-dice-glow { display: none; }
#screen-vaisseaux[data-theme-clair] .vx-dice-tag { color: var(--encre); background: var(--papier); box-shadow: var(--ombre-1); text-shadow: none; }
#screen-vaisseaux[data-theme-clair] .vx-info-txt b { color: var(--text); }
#screen-vaisseaux[data-theme-clair] .vx-feed li { color: var(--text); background: var(--surface); border-color: var(--line); box-shadow: var(--ombre-1); }
#screen-vaisseaux[data-theme-clair] .vx-wait { color: var(--muted); background: var(--surface-2); border-color: var(--line-2); }