/* =========================================================================
   POTOS — NÉON (Jeu 2) : la Grille — refonte v2 (docs/neon-v2.md §6).
   Écran #screen-neon (js/neon-ui.js + js/neon-game.js). DA Cyber-Néon (jetons de css/styles.css)
   + habillage équipé (variables --nx-* et --t-* posées par NeonUI.applySkin d'après shared/neon-skins.js).
   « Classique d'abord » (retour de Florian, nov. 2026) : de vraies cartes de jeu rouge / jaune / vert / bleu,
   grand chiffre blanc cerné, mots du jeu classique ; le néon (--nx-n1…n4) reste dans le décor. Marque
   blanche : dessin propre (cadre intérieur, carreaux des jokers), jamais d'ovale ni de logo déposé.
   Repères de forme daltoniens (● ▲ ■ ★, formes SVG dans les coins et sur la rosace) : préférence du joueur (.nx-cb).
   Mise en page : téléphone d'abord (375 × 812 sans défilement : barre fine, adversaires, Noyau,
   ligne du paquet, consigne, HUD « MOI » avec la main et UN gros bouton) ; grand écran (≥ 900 × 540) :
   sièges en ellipse ; ≥ 1180 × 600 : colonne de droite (scores, journal, règles du paquet).
   Fluidité (docs/fluidite.md) : seuls transform / opacity bougent ; lueurs peintes une fois ;
   comptes à rebours en scaleX ; contain sur la table et la main ; perf-lite coupe le décor.
   ========================================================================= */

/* ---------- Écran et tailles ---------- */
#screen-neon {
  position: fixed; inset: 0; z-index: 20; overflow: hidden; color: var(--text, #EAF4FF);
  --cw-hand: clamp(56px, 18.4vw, 80px); --cw-core: clamp(80px, 26.5vw, 116px); --cw-flux: calc(var(--cw-core) * .7);
  --cw-mini: 13px; --av: 40px;
  /* Couleurs des CARTES : familles de la charte (css/theme.css) ; le thème de faces équipé les ajuste (NeonUI.applySkin) */
  --nx-cryo: var(--bleu, #2C74DB); --nx-plasma: var(--rouge, #E5383B); --nx-acide: var(--vert, #22A565); --nx-fusion: var(--jaune, #FFC233);
  --nx-cryo-g: #8DB6F0; --nx-plasma-g: #F49A9B; --nx-acide-g: #86D9AE; --nx-fusion-g: #FFE299;
  --nx-cryo-d: #1A4C99; --nx-plasma-d: #9E1F22; --nx-acide-d: #136B40; --nx-fusion-d: #B07C00;
  /* Accents du DÉCOR (boutons, bannières, alertes) : jetons de la charte « Soirée jeux » */
  --nx-n1: var(--accent, #FFC233); --nx-n2: var(--accent-2, #FF6B6B); --nx-n3: var(--ok, #3FD18A); --nx-n4: var(--warn, #FFA83D);
  --nx-ease: cubic-bezier(.16, 1, .3, 1);
  /* Encre posée SUR le tapis (vert dans les deux modes) : claire, comme une étiquette sur le feutre */
  --nx-sur-tapis: var(--papier); --nx-sur-tapis-2: color-mix(in srgb, var(--papier) 82%, transparent);
  --nx-spring: cubic-bezier(.34, 1.56, .64, 1);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#screen-neon[hidden] { display: none !important; }
@media (max-height: 700px) { #screen-neon { --cw-hand: clamp(52px, 16.5vw, 68px); --cw-core: clamp(72px, 23vw, 96px); --av: 36px; } }
@media (max-height: 600px) { #screen-neon { --cw-hand: 52px; --cw-core: 70px; --av: 32px; } }
@media (min-width: 900px) and (min-height: 540px) {
  /* Ordinateur : cartes de la main 96 px à 720 de haut, 128 px à 1 080 (docs/neon-v2.md §6.4) */
  #screen-neon { --cw-hand: clamp(80px, calc(96px + (100vh - 720px) * .0889), 132px); --cw-core: calc(var(--cw-hand) * 1.18); --cw-mini: 18px; --av: 50px; }
}

.nx-root {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top" "table" "me";
  background: var(--t-bg, radial-gradient(120% 80% at 50% 30%, #1A0F3D 0%, #07061A 70%));
  --hc: var(--accent-3); --hc2: var(--accent-3);
}
.nx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1180px) and (min-height: 600px) {
  .nx-root { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "top top" "table side" "me side"; }
}

/* Couleur(s) active(s) : variables posées sur les SEULS éléments qui les utilisent (halo, anneau, pastille). Sur .nx-root ou
   sur .nx-core, chaque changement de couleur recalculait le style de toute la Grille ou de toute la pile (variable héritée). */
.nx-core[data-color="cryo"] :is(.nx-halo, .nx-colring, .nx-core-chip) { --hc: var(--nx-cryo); }
.nx-core[data-color="plasma"] :is(.nx-halo, .nx-colring, .nx-core-chip) { --hc: var(--nx-plasma); }
.nx-core[data-color="acide"] :is(.nx-halo, .nx-colring, .nx-core-chip) { --hc: var(--nx-acide); }
.nx-core[data-color="fusion"] :is(.nx-halo, .nx-colring, .nx-core-chip) { --hc: var(--nx-fusion); }
.nx-core[data-color2="cryo"] :is(.nx-colring, .nx-core-chip) { --hc2: var(--nx-cryo); }
.nx-core[data-color2="plasma"] :is(.nx-colring, .nx-core-chip) { --hc2: var(--nx-plasma); }
.nx-core[data-color2="acide"] :is(.nx-colring, .nx-core-chip) { --hc2: var(--nx-acide); }
.nx-core[data-color2="fusion"] :is(.nx-colring, .nx-core-chip) { --hc2: var(--nx-fusion); }

/* ---------- Fond de table (thème équipé) ---------- */
.nx-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--t-bg); }
.nx-bg > i { position: absolute; display: block; }
.nx-bg-floor {
  left: -60%; right: -60%; bottom: -2%; height: 56%; opacity: 0; transform-origin: 50% 100%;
  transform: perspective(320px) rotateX(var(--t-persp, 62deg));
  -webkit-mask: linear-gradient(to top, #000 12%, transparent 90%); mask: linear-gradient(to top, #000 12%, transparent 90%);
}
/* Sol quadrillé : dessiné une fois sur ::before (56 px plus haut) et déplacé par transform (jamais background-position) */
.nx-floor--grid .nx-bg-floor { opacity: 1; overflow: hidden; }
.nx-floor--grid .nx-bg-floor::before {
  content: ""; position: absolute; inset: -56px 0 0;
  background: linear-gradient(var(--t-fl) 1.5px, transparent 1.5px) 0 0 / 56px 56px, linear-gradient(90deg, var(--t-fl) 1.5px, transparent 1.5px) 0 0 / 56px 56px;
}
.nx-floor--grid.is-moving .nx-bg-floor::before { animation: nx-floor 1.4s linear infinite; }
.nx-floor--hex .nx-bg-floor {
  opacity: 1; background: var(--t-fl);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.86 24' fill='none' stroke='%23000' stroke-width='.9'%3E%3Cpath d='M0 4l6.93-4 6.93 4M0 4v8l6.93 4 6.93-4M6.93 16v8'/%3E%3C/svg%3E") 0 0 / 42px 72px, linear-gradient(to top, #000 12%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.86 24' fill='none' stroke='%23000' stroke-width='.9'%3E%3Cpath d='M0 4l6.93-4 6.93 4M0 4v8l6.93 4 6.93-4M6.93 16v8'/%3E%3C/svg%3E") 0 0 / 42px 72px, linear-gradient(to top, #000 12%, transparent 90%);
  mask-composite: intersect;
}
.nx-bg-amb, .nx-bg-amb2 { inset: 0; }
.nx-amb--particles .nx-bg-amb {
  inset: -220px 0 0; opacity: calc(.35 + var(--t-dens, .2));
  background-image: radial-gradient(circle, var(--t-a1) 0 1.6px, color-mix(in srgb, var(--t-a1) 30%, transparent) 2.8px, transparent 5.5px), radial-gradient(circle, var(--t-a2) 0 1.3px, color-mix(in srgb, var(--t-a2) 26%, transparent) 2.4px, transparent 4.5px);
  background-size: 150px 170px, 230px 210px; background-position: 0 0, 70px 90px;
  animation: nx-drift 26s linear infinite;
}
.nx-amb--stars .nx-bg-amb {
  inset: -200px 0 0; opacity: calc(.4 + var(--t-dens, .3));
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.6px), radial-gradient(circle, var(--t-a2) 0 .9px, transparent 1.5px), radial-gradient(circle, var(--t-a1) 0 1.2px, transparent 2px);
  background-size: 90px 110px, 140px 130px, 260px 240px; background-position: 0 0, 40px 60px, 120px 30px;
  animation: nx-drift 60s linear infinite;
}
.nx-amb--stars .nx-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: nx-twinkle 3.4s ease-in-out infinite;
}
.nx-amb--skyline .nx-bg-amb {
  top: auto; height: 34%; opacity: .9;
  background: radial-gradient(circle, var(--t-a1) 0 1px, transparent 1.6px) 0 0 / 13px 11px, radial-gradient(circle, var(--t-a2) 0 1px, transparent 1.6px) 6px 5px / 17px 15px, linear-gradient(180deg, #120A26, #07040F);
  clip-path: polygon(0 100%, 0 58%, 6% 58%, 6% 34%, 12% 34%, 12% 52%, 18% 52%, 18% 20%, 24% 20%, 24% 46%, 31% 46%, 31% 30%, 37% 30%, 37% 60%, 44% 60%, 44% 12%, 50% 12%, 50% 44%, 57% 44%, 57% 26%, 63% 26%, 63% 56%, 70% 56%, 70% 18%, 76% 18%, 76% 40%, 83% 40%, 83% 28%, 90% 28%, 90% 56%, 100% 56%, 100% 100%);
  animation: nx-signs 4s steps(1) infinite;
}
.nx-amb--skyline .nx-bg-amb2 {
  inset: -60px 0 0; opacity: .5;
  background: repeating-linear-gradient(104deg, transparent 0 11px, rgba(200, 230, 255, .14) 11px 12px, transparent 12px 27px);
  animation: nx-rain .7s linear infinite;
}
.nx-amb--rings .nx-bg-amb {
  inset: auto; left: 50%; top: 45%; width: 150vmin; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-radial-gradient(circle, transparent 0 28px, color-mix(in srgb, var(--t-a1) 42%, transparent) 28px 30px, transparent 30px 58px);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: nx-beat 1.1s ease-in-out infinite;
}
.nx-amb--rings .nx-bg-amb2 { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--t-a2) 22%, transparent), transparent 45%); }
.nx-amb--nebula .nx-bg-amb {
  inset: -20%; opacity: calc(.55 + var(--t-dens, .5) * .4);
  background: radial-gradient(40% 35% at 30% 40%, color-mix(in srgb, var(--t-a1) 42%, transparent), transparent 70%), radial-gradient(35% 30% at 72% 62%, color-mix(in srgb, var(--t-a2) 40%, transparent), transparent 70%), radial-gradient(30% 30% at 55% 22%, color-mix(in srgb, var(--t-a3) 32%, transparent), transparent 70%);
  animation: nx-nebula 18s ease-in-out infinite alternate;
}
.nx-amb--nebula .nx-bg-amb2 { background-image: radial-gradient(circle, #fff 0 .8px, transparent 1.4px); background-size: 120px 140px; opacity: .6; animation: nx-twinkle 5s ease-in-out infinite; }
/* Tapis gratuit (Lot 8) : feutre — grain fin tuilé (image partagée de 3 Ko) et lumière de lampe au-dessus de la table */
.nx-feutre .nx-bg-floor { opacity: 1; inset: 0; height: auto; transform: none; -webkit-mask: none; mask: none; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAJOUlEQVR42jWY6XIb2xGDv9k3Dme4byJFUtRiSbasuG6S938xpNB0/tglajinDxpAo4Uyjeo4a65CmRK2ujJVSaE3UqVUFJopo1Tp3ws/R0YDJIKMRJ1y1axJlZHQa81RuZbMtYBBowp+UpAzZ01Gq7me5Bd0alVpVKJEJRNyCmY6K1VJwg2UkZJqoYJWNW/MyNUwZ0ajVj0JgmnU4AdT/VKmkp5OkHJho71azRhVCj1yZKFd1PmgnJkWSnWMn31kox5YgpAPTJSjmn9rR6o5mU6kSjQlI9MU+KVRr1rqqESVKk3xE1PQVIM2AdEHtVK/KuAylAkpjypIWRqijpVxJgUlMoqFrsxIqIFUqNSOgpFKHXUUMuhLqSoqLsAZlCvXhIZatQatVBhW0ALtyWQsJ0ARQBC1+Pyamispo2olKvy5cgYdNOHELgpacWCtQegrqq7UKKWP7mR6NBNGMCd0ZUWi/wql6rUh1UEDpdbKqHQUeiBhow+WMgEy5sEZNGejq0yTPAo5xo0aDJYKFUo18f+gixq96KBMU8HcsHFmFZAZyPv9euVkPiLIMeObig8aoYp19GAbELXKfECrbXzNXYCEJYWmSjlTclF55wW5Wk2U0IFmTNQzMlCxUBaKuKkm1aOWQVVUR5cSeOYYQkpxLWlIJqHhnR1oS6I3/aNGy3t3AvdcmyBhqdcg6BMX7XmO3/k9cGEez01hr5ImSFZpwo6NXoCZKoVCQQ3nv9etNFejipzGnVPDh3yXmVYqOZGZsGzo+CZlResetH65cuYCs6dWpT8BgE3ElzRvTMRTAJi5/SR6cRd8tEpVelJOqYI5lWaqWPKgazxPSsmWvZ7iDqeoOWUdDU2YKeXz/+TVQBW66PVEq4QhDAW9BjRTnYOiCS+YmVdlOsNLMCPjmxnoXXXoMY/KcyZhb2+s/RU9KFdHqjclmnDQVTflwbEJ9qtcGVuXhv0gVakOrvhjUyxhpYJEmZauTBbgRC2JLhqxzHYaZJcatVahtVoLLzjYM6HS2RyjoSfTQjtGtb5gp1RXvWt6Z4HcqiW9dlYGRZihTaynV6I6QCIsexd+21Kxta3Q0arCFP3FyI6UabSBi5uplg3PvhjXoGMSYstDOCl7wdqf6IVSW7ndE95UUGopdyTRsw7RuyeOzPRNvP1CzjGQbiiVWi4k1gDL0PZzSPAnCw8ZLTWyUKeFKr2bvHayUMSencH1XaKwSr79kxu8C+bMMLapbvwThE1C7Hb6gUGTkOKM0ldXFk476osijK3Ui1K9hWm7c5VuLDRQKzEUcDT+5FTaaKIJKa1sxKWe2eiZBSNXKt3cUH7dyWqsbfNqgsI7dmHxJ1U2a0ptrCo/dNAmxLThSMUDr0p4o+CkwoxQrgOPeialUKdtAFkFNR6ZKucuqzoYGG4WWuiZq7dteJC3ggU5nT4MDc8UvMRvFm6qtmy1UaEmNLKlCbeax1E27oQ9FTMKnZWzpWXUo+Y2RbfSHRg06BVCWKWHu8yaOibtt+z9ifYmQ0zuG+ZMw02lljEFPh0R2FuCvAaRU64688Mq6NVwYU3PNZRQaII9teNuBGkAaGGtPYx4CBNJmAaZnTn+WI7UfGKdnKMMh4ULU7SMhhBz68kVa3vPFPGyF1L9h1vYl30qCUdN9B7gLEB7zWSbW9DzQIZxsCPZp04qsVtETZmaMLAVk5Ddwm1zzLp7ivZ616BlfFYr56e68NFeCScX6btGNFvTeEZHJEvDgNmHZfd65lnnSG6m3VvYYCd0DIN4oyNnjWdwEdlvhYu48aUJdrJXTTnqT9zOwp3pN66YNLh/zwEfUTP6wprO2XHgooNdXksWga9Hqsf7RgnrsMk2RFmwJw8nGKm4d0wtT8ZaBT/0Ks+yloNe9R6dSai10r+Ux6VHwU297fBeBjcd1LF161VH0JlGvvUkyLXUJKYsbnXGTLWWnslKONBSqXRSZaats2j4JwxxcKbqPt+4u5g9t+SRx1C53csBsrTtN0w0stRJpWb2dL04FYTwYoyzx9Y2cDewq2p2f1k2UxcHN+G4kyjWabWMHjiAdjYmp+CcXg64h6jrngx6fUZo2cW8teCOJPqhkkXQ8p2f3KLuz8i0Q4TQU/TOCqlCQ2T6JA+Gr1SRRiCso4UdT5E305gKTlBLnTyldcOmN6i2muk144EXehIVbMMCTfUVC37clwhH9xUlFQ2/4+dKrZnNAFpHME95UktNp7UOSsPI9/5eMDAcVJ9KeZdDTe4esteZQMsRpfV5risMImWtD+8K+uH8LC8UqdrYBNaqIlSWTBnUq9aP6MQm3lXERIjBw6BfMJeHdBq38L87JwrVrlIrQ0WpNjaAIcBzCN7wFVGt1geE9a2AAzXOGLUc9RNtdXZ8X2qnA/NQ732UO12OysIZndMstIew6lPYgd1zrYegqp94o43s6rCwleeb/SyP+yREDrvyYt8Q+g7EnTs9iEzSOtaOZxW2QCVaRYwxOYy7t5vWe4waTbQN7S9oYp08hHnS8KBNVPYSgXBuLcfCcXB4wc312nSL6Wxks5DSwBCAfv2tvQ/7fhG80escM/0PPWFMWfi/ubCPJcnq7NgyDWY3vDu4x1BCU0bvoRR4/5mw5SPK88p4DkdrmbicCDLWfliS83VLTqtXNXKz0rBhh8jJ3dBNRX6bBGHSN+XeooMKCwcs7oFs0DGCdKZGU+eiTFc9e/XzDA7+vMnXHe02sh8NKoNNbSxIMz35aLJYdi/qZEizCMzW0olHv5z133SlecTdlJpvTt5TNOoWG4Ab14QfHSL7b2N6Qx7Jr4yaY6liwkyNOj24TFq8V1Taxn4QUHisOKp7X85iF3AEnDOojZnbRYWJ5lrq30HUmp4TJybyrDADvR2N9xCtExd/X5l1kMS4NJNNyC7Gd8mX/iHX6m+Gy3gSWmhFGnpdhnM6Giax6i50z0IG0jdc6CHeaM7Fir2MBcl+4434vrgSi0QRdnGM16dsOUUguDvlTOsgroHYsA93KpQ7jIVZlvH3Dy34rZFHVxPD20B8htTM9V38ASSJa48agnxdbMBbajno3qvPyeQlpdBIp0re06a0fqLQJfbKFbNIOZ7SVeSKkyEjj2m28AISAcAwTGVPdWj7wJPwvj37jyYJo8mggX2s8+3/AGDb+pXMilJ8AAAAAElFTkSuQmCC") 0 0 / 36px 36px, radial-gradient(70% 55% at 50% 42%, rgb(255 255 255 / .07), transparent 70%); }
.nx-bg-vig { inset: 0; background: radial-gradient(ellipse at 50% 48%, transparent 42%, rgba(0, 0, 0, var(--t-vig, .55)) 100%); }
/* Stress : lueur plasma des bords peinte une fois, seule son opacité pulse */
.nx-bg-vig::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at 50% 48%, transparent 50%, color-mix(in srgb, var(--nx-n2) 34%, transparent) 100%);
}
.nx-root.is-hot .nx-bg-vig::after { animation: nx-hot .5s ease-in-out infinite alternate; }

/* ---------- Barre fine du haut ---------- */
.nx-top {
  grid-area: top; position: relative; z-index: 6; display: flex; align-items: center; gap: 6px; height: calc(44px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 6px 0;
  background: var(--bg); border-bottom: 1px solid var(--line); color: var(--text);
}
.nx-ib { width: 38px; height: 38px; font-size: 17px; flex: none; }
.nx-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.nx-logo {
  flex: none; font: 900 16px/1 var(--font-hud, system-ui); letter-spacing: .1em; color: var(--text);
  text-shadow: 0 0 3px #fff, 0 0 10px var(--nx-n1), 0 0 24px var(--nx-n2);
}
.nx-info-txt { min-width: 0; display: flex; align-items: center; gap: 6px; font: 600 12.5px/1.2 var(--font-display, system-ui); color: var(--muted, #A3B2D6); white-space: nowrap; overflow: hidden; }
.nx-info-txt b { color: var(--text); font-weight: 700; }
.nx-info-deck { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.nx-info-sep { opacity: .5; }
.nx-vars { display: inline-flex; gap: 1px; }
.nx-vars i { font-style: normal; font-size: 13px; }
@media (max-width: 420px) { .nx-logo, .nx-vars, .nx-wide-only { display: none; } }

/* ---------- Grille : adversaires, Noyau, ligne du paquet, consigne ---------- */
.nx-table {
  grid-area: table; position: relative; z-index: 2; min-height: 0; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto; contain: layout style;
}
.nx-stage { position: relative; min-height: 0; container-type: size; }
/* Le dessus du Noyau = la plus grande carte de l'écran : il grandit avec la place libre (unités de conteneur) */
.nx-center { --cw-core: clamp(72px, min(29cqw, 31cqh), 150px); --cw-flux: calc(var(--cw-core) * .7); }

/* Sièges — téléphone : une rangée (≤ 4 adversaires) ou deux rangées compactes (5 à 7), en flex (aucun calcul JS).
   Hauteur FIXE (et contain: size) : un badge, une puce ou un nombre qui change ne redimensionne jamais la zone du Noyau
   (sa carte est en unités de conteneur : une hauteur qui bouge = un Noyau qui saute et toute la table recalculée). */
.nx-seats {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-content: flex-start; align-items: flex-start;
  gap: 2px 0; padding: 4px 4px 0; pointer-events: none; height: var(--seats-h, 112px); contain: size layout style;
}
.nx-root[data-n="5"] .nx-seats, .nx-root[data-n="6"] .nx-seats, .nx-root[data-n="7"] .nx-seats { --seats-h: 122px; }
.nx-seat { --pc: var(--accent); position: relative; width: 24%; max-width: 116px; pointer-events: auto; }
.nx-root[data-n="1"] .nx-seat { width: 40%; }
.nx-root[data-n="2"] .nx-seat { width: 36%; }
.nx-root[data-n="3"] .nx-seat { width: 31%; }
.nx-seat-btn {
  appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 2px 2px 3px;
  color: var(--text); background: none; border: 0; border-radius: 14px; cursor: default; font: inherit;
}
.nx-seat.is-catchable .nx-seat-btn, .nx-root.is-targeting .nx-seat-btn { cursor: pointer; }
.nx-av {
  position: relative; display: block; width: var(--av); aspect-ratio: 1; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 38%, var(--surface-3), var(--surface) 75%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 60%, transparent), 0 4px 12px rgba(0, 0, 0, .5);
  transition: transform .3s var(--nx-spring);
}
.nx-av svg { width: 100%; height: 100%; display: block; }
.nx-turn-dot {
  position: absolute; left: 50%; top: -9px; translate: -50% 0; width: 0; height: 0; opacity: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--pc);
  transition: opacity .2s;
}
.nx-seat.is-turn .nx-turn-dot { opacity: 1; animation: nx-bob 1s ease-in-out infinite; }
.nx-seat.is-turn .nx-av { transform: scale(1.08); box-shadow: 0 0 0 2.5px var(--pc), 0 0 16px var(--pc), 0 4px 12px rgba(0, 0, 0, .5); }
.nx-sinfo { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; max-width: 100%; }
.nx-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 11px/1.15 var(--font-display, system-ui); color: var(--nx-sur-tapis); text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.nx-bot { font-style: normal; font-size: .85em; margin-left: 2px; opacity: .8; }
.nx-seat.is-turn .nx-name { color: var(--pc); }
.nx-cards { display: flex; align-items: center; gap: 4px; height: 24px; }
.nx-mini { position: relative; width: calc(var(--cw-mini) * 1.9); height: calc(var(--cw-mini) * 1.4 + 2px); }
.nx-mb { position: absolute; left: calc(var(--i) * var(--cw-mini) * .3); bottom: 0; rotate: calc((var(--i) - (var(--n) - 1) / 2) * 10deg); transform-origin: 50% 100%; }
.nx-mback { --cw: var(--cw-mini); }
/* NOMBRE DE CARTES en gros (§6.1) */
.nx-count { min-width: 1.2em; text-align: center; font: 700 22px/1 var(--font-hud, system-ui); color: var(--nx-sur-tapis); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.nx-seat.is-one .nx-count { color: var(--nx-n2); text-shadow: 0 0 10px color-mix(in srgb, var(--nx-n2) 70%, transparent), 0 0 2px #000; }
.nx-seat.is-safe .nx-count { color: var(--nx-n1); text-shadow: 0 0 10px color-mix(in srgb, var(--nx-n1) 70%, transparent), 0 0 2px #000; }
.nx-count.is-bump, .nx-seat.is-bump { animation: nx-bump .3s var(--nx-spring); }
/* Chrono de l'adversaire : barre scaleX sous l'avatar (une transition CSS, aucun JS par image) */
.nx-tbar { display: block; width: calc(var(--av) + 14px); height: 4px; margin-top: 1px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; opacity: 0; transition: opacity .2s; }
.nx-tbar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--pc); transition: transform var(--cd-ms, 0ms) linear var(--cd-del, 0ms); }
.nx-seat.has-clock .nx-tbar { opacity: 1; }
.nx-stoks { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 15px; } /* rangée réservée : une puce qui apparaît ne déplace rien */
.nx-stoks > i { font: 800 10.5px/1 var(--font-display, system-ui); font-style: normal; padding: 2px 5px; border-radius: 999px; white-space: nowrap; }
.nx-stoks > i[hidden] { display: none; }
.nx-chip-shield { color: var(--on-neon, #03101C); background: var(--nx-n1); }
.nx-chip-bounty { background: color-mix(in srgb, var(--nx-n4) 30%, color-mix(in srgb, var(--surface) 85%, transparent)); border: 1px solid var(--nx-n4); }
.nx-chip-memo { color: var(--muted); background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px dashed var(--line-2); }
.nx-chip-ready { color: var(--on-neon, #03101C); background: var(--nx-n3); }
.nx-chip-score { color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line-2, rgba(130, 200, 255, .3)); font-family: var(--font-hud, system-ui) !important; }
.nx-badge {
  position: absolute; left: 50%; top: calc(var(--av) - 9px); translate: -50% 0; z-index: 2; /* posé sur le bas de l'avatar : n'occupe aucune place */
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  font: 800 9.5px/1.1 var(--font-display, system-ui); letter-spacing: .05em; text-transform: uppercase;
}
.nx-badge:empty { display: none; }
.nx-badge[data-k="safe"] { color: var(--on-neon, #03101C); background: var(--nx-n1); }
.nx-badge[data-k="exposed"] { color: var(--papier); background: linear-gradient(90deg, var(--nx-n4), var(--nx-n2)); }
.nx-badge[data-k="out"] { color: var(--muted); background: rgba(255, 255, 255, .08); }
.nx-badge[data-k="off"] { color: var(--text); background: rgb(var(--accent-3-rgb) / .22); border: 1px solid rgb(var(--accent-3-rgb) / .55); text-transform: none; }
.nx-seat.is-out { opacity: .45; }
.nx-seat.is-out .nx-av { filter: grayscale(1); }
.nx-seat.is-off .nx-av { filter: saturate(.35) brightness(.8); }
.nx-seat.is-exposed .nx-av { box-shadow: 0 0 0 2.5px var(--nx-n4), 0 0 18px var(--nx-n2); }
.nx-seat.is-target .nx-av { box-shadow: 0 0 0 2.5px var(--nx-n2), 0 0 16px var(--nx-n2); }
/* Lueurs qui pulsent : dessinées une fois sur un pseudo-élément, seule l'opacité est animée */
.nx-seat.is-catchable .nx-seat-btn::after, .nx-root.is-targeting .nx-seat-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--nx-n4), 0 0 20px var(--nx-n2);
  animation: nx-glow .7s ease-in-out infinite alternate;
}
.nx-root.is-targeting .nx-seat-btn::after { box-shadow: 0 0 0 2px var(--nx-n2), 0 0 16px var(--nx-n2); }
.nx-seat.is-alarm .nx-seat-btn::before, .nx-me-av.is-alarm::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px var(--nx-n4), 0 0 30px var(--nx-n4); background: color-mix(in srgb, var(--nx-n4) 22%, transparent);
  animation: nx-alarm-frame .3s steps(2) 3;
}
.nx-me-av.is-alarm::before { z-index: 1; }

/* 5 à 7 adversaires sur téléphone : deux rangées de sièges compacts (avatar à gauche, nombre à droite) */
.nx-root[data-n="5"] .nx-seat, .nx-root[data-n="6"] .nx-seat { width: 33%; }
.nx-root[data-n="7"] .nx-seat { width: 25%; }
.nx-root[data-n="5"] .nx-seat-btn, .nx-root[data-n="6"] .nx-seat-btn, .nx-root[data-n="7"] .nx-seat-btn {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av info" "bar bar" "chips chips"; align-items: center; justify-items: start; column-gap: 5px; row-gap: 1px; padding: 2px 3px;
}
.nx-root[data-n="5"] .nx-av, .nx-root[data-n="6"] .nx-av, .nx-root[data-n="7"] .nx-av { grid-area: av; --av: 30px; }
.nx-root[data-n="5"] .nx-sinfo, .nx-root[data-n="6"] .nx-sinfo, .nx-root[data-n="7"] .nx-sinfo { grid-area: info; align-items: flex-start; }
.nx-root[data-n="5"] .nx-tbar, .nx-root[data-n="6"] .nx-tbar, .nx-root[data-n="7"] .nx-tbar { grid-area: bar; width: 100%; }
.nx-root[data-n="5"] .nx-stoks, .nx-root[data-n="6"] .nx-stoks, .nx-root[data-n="7"] .nx-stoks { grid-area: chips; justify-content: flex-start; }
.nx-root[data-n="5"] .nx-badge, .nx-root[data-n="6"] .nx-badge, .nx-root[data-n="7"] .nx-badge { left: 0; top: 24px; translate: none; padding: 1px 4px; font-size: 8px; }
.nx-root[data-n="5"] .nx-name, .nx-root[data-n="6"] .nx-name, .nx-root[data-n="7"] .nx-name { font-size: 10px; }
.nx-root[data-n="5"] .nx-count, .nx-root[data-n="6"] .nx-count, .nx-root[data-n="7"] .nx-count { font-size: 18px; }
.nx-root[data-n="5"] .nx-cards, .nx-root[data-n="6"] .nx-cards, .nx-root[data-n="7"] .nx-cards { height: 20px; }
.nx-root[data-n="5"] .nx-mini, .nx-root[data-n="6"] .nx-mini, .nx-root[data-n="7"] .nx-mini { display: none; }
.nx-root[data-n="5"] .nx-turn-dot, .nx-root[data-n="6"] .nx-turn-dot, .nx-root[data-n="7"] .nx-turn-dot { top: -7px; border-width: 5px 5px 0; }

/* ---------- Centre : Flux, Noyau, anneaux ---------- */
.nx-center { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }
/* Sens du jeu : anneau fléché FIXE (une Boucle le fait tourner une fois : .is-flip) */
.nx-ring { position: absolute; left: 0; top: 0; width: calc(var(--cw-core) * 2.3); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: .8; }
.nx-ring svg { width: 100%; height: 100%; overflow: visible; display: block; }
.nx-ring[data-dir="-1"] svg { scale: -1 1; }
.nx-ring-c { fill: none; stroke: var(--t-ring, #22F2FF); stroke-width: 1.2; stroke-dasharray: 2 7; opacity: .7; }
.nx-ring-a path { fill: none; stroke: var(--t-ring, #22F2FF); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.nx-ring.is-flip { animation: nx-ring-flip .6s var(--nx-ease); }

.nx-core { position: absolute; left: calc(var(--cw-core) * -.5); top: calc(var(--cw-core) * -.7); width: var(--cw-core); height: calc(var(--cw-core) * 1.4); }
.nx-halo {
  position: absolute; left: 50%; top: 50%; width: calc(var(--cw-core) * 2.5); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--hc) 46%, transparent) 0, color-mix(in srgb, var(--hc) 14%, transparent) 38%, transparent 66%);
  animation: nx-breathe 3.2s ease-in-out infinite;
}
.nx-core[data-color="none"] .nx-halo { background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 40%), conic-gradient(from 0deg, color-mix(in srgb, var(--nx-cryo) 35%, transparent), color-mix(in srgb, var(--nx-plasma) 35%, transparent), color-mix(in srgb, var(--nx-fusion) 35%, transparent), color-mix(in srgb, var(--nx-acide) 35%, transparent), color-mix(in srgb, var(--nx-cryo) 35%, transparent)); -webkit-mask: radial-gradient(circle, #000 20%, transparent 66%); mask: radial-gradient(circle, #000 20%, transparent 66%); }
/* Anneau de la couleur active (Prisme : deux demi-anneaux, couleur 1 à gauche, couleur 2 à droite) */
.nx-colring {
  position: absolute; left: 50%; top: 50%; width: calc(var(--cw-core) * 1.86); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 180deg, var(--hc) 0 180deg, var(--hc2) 180deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  opacity: .95;
}
.nx-core[data-color="none"] .nx-colring { opacity: 0; }
.nx-core.is-two .nx-colring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, transparent calc(50% - 1px), #000 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.nx-pile { position: absolute; inset: 0; }
/* Position de chaque carte de la pile : transform EN LIGNE (pas de variables héritées : le visage de la carte n'est pas recalculé) */
.nx-pc { position: absolute; left: 0; top: 0; --cw: var(--cw-core); }
/* Cartes sous le dessus assombries par un voile (pas de filter : moins cher à peindre) */
.nx-pc:not(.is-top)::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: calc(var(--cw) * .09); background: rgba(0, 0, 0, .18); pointer-events: none; }
.nx-pc.is-top .nx-card { box-shadow: var(--ombre-levee, 0 16px 26px -10px rgba(0, 0, 0, .6)); }
.nx-slot {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: calc(var(--cw-core) * .14);
  border: 1.5px dashed var(--line-2); font: 700 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--faint, #7D8DB3);
}
.nx-core.is-hit .nx-pc.is-top { animation: nx-hit .3s var(--nx-ease); }
.nx-core.is-recolor .nx-colring { animation: nx-recolor .5s var(--nx-ease); }
.nx-root.is-drop-ok .nx-core::after {
  content: "Lâche pour poser"; position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0; white-space: nowrap; z-index: 6;
  font: 800 12px/1 var(--font-display); color: var(--on-neon); background: var(--accent, #22F2FF); padding: 5px 10px; border-radius: 999px;
}
.nx-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  font: 700 11.5px/1 var(--font-display, system-ui); color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line-2, rgba(130, 200, 255, .3));
}
.nx-core-chip {
  position: absolute; left: 50%; top: calc(100% + 12px); translate: -50% 0; z-index: 3; font-size: 12.5px;
  color: var(--text); border-color: color-mix(in srgb, var(--hc) 65%, transparent); /* la pastille porte la couleur, le texte reste lisible */
}
.nx-core-chip i { font-style: normal; font-family: system-ui, sans-serif; font-size: 14px; }
.nx-core-chip .nx-cdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--hc); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.nx-core-chip .nx-cdot.c2 { background: var(--hc2); }
.nx-core-chip i.c2 { color: var(--hc2); }
.nx-core-chip em { font-style: normal; color: var(--muted); margin: 0 1px; }
.nx-core.is-two .nx-core-chip { border-color: color-mix(in srgb, var(--hc2) 60%, transparent); }

.nx-flux {
  appearance: none; position: absolute; top: calc(var(--cw-flux) * -.7); right: calc(var(--cw-core) * .5 + 22px);
  width: var(--cw-flux); height: calc(var(--cw-flux) * 1.4); padding: 0; background: none; border: 0; cursor: default; font: inherit; color: inherit;
}
.nx-flux-stack { position: absolute; inset: 0; }
.nx-fs { position: absolute; left: 0; top: 0; --cw: var(--cw-flux); translate: calc(var(--i) * -2.5px) calc(var(--i) * -2.5px); }
/* Tranche du paquet (Lot 8) : ombres nettes empilées posées par NeonUI (box-shadow statique, jamais animée) */
.nx-fedge { position: absolute; left: 0; top: 0; width: var(--cw-flux); height: calc(var(--cw-flux) * 1.4); border-radius: calc(var(--cw-flux) * .12); background: #ECE6D8; }
.nx-flux .nx-empty { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; border: 1.5px dashed var(--line-2); font: 700 10px/1 var(--font-display); color: var(--faint); text-transform: uppercase; }
.nx-flux-n { position: absolute; left: 50%; top: calc(100% + 9px); translate: -50% 0; }
.nx-flux-n b { font-family: var(--nx-num-font); font-weight: 900; }
.nx-flux-n small { font-size: 10px; color: var(--muted); }
.nx-flux.can-draw { cursor: pointer; }
.nx-flux::before {
  content: ""; position: absolute; inset: -4px -4px -4px -6px; border-radius: 12px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--accent, #22F2FF), 0 0 16px var(--accent, #22F2FF);
}
.nx-flux.can-draw::before { animation: nx-glow 1.3s ease-in-out infinite alternate; }
.nx-flux.can-draw:active .nx-flux-stack { scale: .94; }
.nx-flux.can-draw .nx-flux-n { border-color: var(--accent); color: var(--accent-text); }
@media (hover: hover) { .nx-flux.can-draw:hover .nx-flux-stack { translate: 0 -4px; } }
.nx-flux:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 10px; }

/* Pénalité en attente (+4 → Max) : à droite du Noyau */
.nx-pend {
  position: absolute; left: calc(var(--cw-core) * .5 + 16px); top: calc(var(--cw-core) * -.62); z-index: 4;
  display: flex; flex-direction: column; gap: 3px; width: max-content; max-width: min(calc(50vw - var(--cw-core) * .5 - 24px), 170px);
  padding: 7px 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--nx-n2);
}
.nx-pend::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 22px color-mix(in srgb, var(--nx-n2) 70%, transparent);
  animation: nx-glow .9s ease-in-out infinite alternate;
}
.nx-pend[hidden] { display: none; }
.nx-pend b { font: 900 22px/1 var(--font-hud, system-ui); color: var(--accent-2-text); }
.nx-pend span { font: 600 11px/1.25 var(--font-display, system-ui); color: var(--text); }

/* Ligne du paquet : réacteur, suite, Masque annoncé, prime, Surtension */
/* Hauteur fixée pour TOUTE la partie (has-line : le paquet ou la Surtension ont une ligne) : jamais de saut du Noyau */
.nx-deckline {
  position: relative; z-index: 3; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 6px;
  height: 8px; padding: 0 8px; contain: size layout style;
}
.nx-deckline.has-line { height: 34px; padding-top: 3px; }
.nx-dl {
  display: inline-flex; flex: 0 1 auto; min-width: 0; align-items: center; gap: 7px; max-width: 100%; padding: 5px 11px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 12.5px/1.1 var(--font-display, system-ui); color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line-2, rgba(130, 200, 255, .3));
}
.nx-dl[hidden] { display: none; }
.nx-dl-reactor { padding-right: 8px; border-color: color-mix(in srgb, var(--nx-n3) 55%, transparent); }
.nx-dl-reactor b { font: 800 13px/1 var(--font-hud, system-ui); }
.nx-gauge { position: relative; display: block; width: 92px; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.nx-gauge i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); transition: transform .45s var(--nx-ease); background: linear-gradient(90deg, var(--nx-n3), var(--ok)); }
.nx-dl-reactor[data-lvl="warm"] { border-color: color-mix(in srgb, var(--nx-n4) 70%, transparent); }
.nx-dl-reactor[data-lvl="warm"] .nx-gauge i { background: linear-gradient(90deg, var(--nx-n3), var(--nx-n4)); }
.nx-dl-reactor[data-lvl="hot"] { border-color: var(--nx-n2); color: var(--danger-text); }
.nx-dl-reactor[data-lvl="hot"] .nx-gauge i { background: linear-gradient(90deg, var(--nx-n4), var(--nx-n2)); }
.nx-dl-reactor.is-melt { animation: nx-melt-pill .7s steps(2) 2; }
.nx-dl-run { border-color: color-mix(in srgb, var(--nx-n2) 55%, transparent); }
.nx-dl-run.is-drop { color: var(--text); border-color: var(--nx-n2); background: color-mix(in srgb, var(--nx-n2) 20%, color-mix(in srgb, var(--surface) 85%, transparent)); }
.nx-dl-mask { border-color: color-mix(in srgb, var(--accent-3) 70%, transparent); }
.nx-dl-ann { font-weight: 800; }
.nx-dl-ann.nx-c-cryo { color: var(--nx-cryo); } .nx-dl-ann.nx-c-plasma { color: var(--nx-plasma); } .nx-dl-ann.nx-c-acide { color: var(--nx-acide); } .nx-dl-ann.nx-c-fusion { color: var(--nx-fusion); }
.nx-dl-bounty { border-color: color-mix(in srgb, var(--nx-n4) 60%, transparent); }
.nx-dl-surge { color: var(--muted); font-size: 11px; }
.nx-surge-c { display: flex; gap: 3px; }
.nx-surge-c i { width: 12px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
.nx-surge-c i.on { background: linear-gradient(90deg, var(--nx-n1), var(--nx-n2)); border-color: transparent; }
.nx-dl-surge.is-armed { color: var(--text); border-color: var(--nx-n4); }
.nx-dl-surge b { color: var(--warn-text); letter-spacing: .08em; }
.nx-dl-note { color: var(--muted); font-weight: 600; }

/* Consigne contextuelle : deux lignes au plus sur téléphone, une sur grand écran ; hauteur FIXE (le texte change à
   chaque événement : il ne doit jamais redimensionner la zone du Noyau) */
.nx-hint {
  position: relative; z-index: 3; margin: 0; padding: 0 12px; height: 41px; display: flex; align-items: center; justify-content: center;
  text-align: center; font: 600 13.5px/1.25 var(--font-ui, system-ui); color: var(--nx-sur-tapis-2); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); contain: size layout style;
}
.nx-hint-t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nx-hint[data-tone="me"], .nx-hint[data-tone="hot"], .nx-hint[data-tone="warn"], .nx-hint[data-tone="narr"] { color: var(--nx-sur-tapis); }

/* ---------- Grand écran : sièges en ellipse autour du Noyau ---------- */
@media (min-width: 900px) and (min-height: 540px) {
  .nx-table { grid-template-rows: minmax(0, 1fr) auto auto; }
  .nx-seats, .nx-root[data-n] .nx-seats { position: absolute; inset: 0; display: block; padding: 0; height: auto; contain: layout style; }
  .nx-seat, .nx-root[data-n] .nx-seat { position: absolute; left: 50%; top: 22%; width: 124px; max-width: none; translate: -50% -50%; }
  .nx-root[data-n] .nx-seat-btn { display: flex; flex-direction: column; align-items: center; padding: 3px; }
  .nx-root[data-n] .nx-av { --av: 50px; }
  .nx-root[data-n] .nx-sinfo { align-items: center; }
  .nx-root[data-n] .nx-badge { left: 50%; top: calc(var(--av) - 8px); translate: -50% 0; font-size: 9.5px; padding: 2px 6px; }
  .nx-root[data-n] .nx-name { font-size: 13px; }
  .nx-root[data-n] .nx-count { font-size: 24px; }
  .nx-root[data-n] .nx-cards { height: 28px; }
  .nx-root[data-n] .nx-mini { display: block; }
  .nx-root[data-n] .nx-tbar { width: calc(var(--av) + 24px); }
  /* Puces (bouclier, prime, aide-mémoire, prêt, score) à droite de l'avatar : le siège reste court et ne descend pas sur le Noyau */
  .nx-root[data-n] .nx-stoks { position: absolute; left: calc(50% + var(--av) / 2 + 4px); top: 2px; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 0; }
  /* Noyau un peu plus bas que le milieu : le siège du haut garde sa place au-dessus de l'anneau (1280 × 720) */
  .nx-center { top: 56%; }
  .nx-root[data-n="6"] .nx-seat, .nx-root[data-n="7"] .nx-seat { width: 108px; }
  .nx-root[data-n="6"] .nx-av, .nx-root[data-n="7"] .nx-av { --av: 44px; }
  .nx-hint { height: 28px; font-size: 14.5px; }
  .nx-hint-t { -webkit-line-clamp: 1; }
  /* Le Noyau reste la plus grande carte (main : 96 px à 720 de haut) mais laisse la place aux sièges du haut */
  .nx-center { --cw-core: clamp(100px, min(26cqw, 27cqh), 172px); }
  .nx-ring { width: calc(var(--cw-core) * 2.05); }
  .nx-colring { width: calc(var(--cw-core) * 1.7); }
  .nx-bar, .nx-meline { max-width: 860px; }
}

/* ---------- Colonne de droite (≥ 1180 × 600) : scores, journal, règles du paquet ---------- */
.nx-side { display: none; }
@media (min-width: 1180px) and (min-height: 600px) {
  .nx-side {
    grid-area: side; position: relative; z-index: 3; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-left: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    background: linear-gradient(180deg, var(--surface), var(--surface)); contain: layout paint;
  }
  .nx-side-deck { display: flex; align-items: center; gap: 10px; }
  .nx-side-deck .nx-sd-ico { font-size: 26px; line-height: 1; }
  .nx-side-deck b { display: block; font: 800 15px/1.1 var(--font-display); }
  .nx-side-deck small { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--font-ui); color: var(--muted); }
  .nx-side-scores { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .nx-srow { --pc: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 5px 9px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); border-left: 3px solid var(--pc); }
  .nx-srow.is-me { background: rgb(var(--accent-rgb) / .1); }
  .nx-srow.is-turn { box-shadow: inset 0 0 0 1px var(--pc); }
  .nx-srow.is-out { opacity: .45; }
  .nx-srow-n { font: 700 12.5px/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nx-srow-c { font: 800 13px/1 var(--font-hud); white-space: nowrap; }
  .nx-srow-c small { font: 600 10.5px/1 var(--font-ui); color: var(--muted); }
  .nx-srow.is-one .nx-srow-c { color: var(--accent-2-text); }
  .nx-srow-s { grid-column: 1 / -1; position: relative; display: flex; align-items: center; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
  .nx-srow-s i { position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 45%, transparent), var(--pc)); transition: transform .8s var(--nx-ease); }
  .nx-srow-s b { position: relative; margin-left: 6px; font: 800 9.5px/1 var(--font-hud); text-shadow: 0 0 3px #000; }
  .nx-side-h { margin: 4px 0 0; font: 800 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
  .nx-feed { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font: 500 12px/1.3 var(--font-ui, system-ui); color: var(--muted); }
  .nx-feed li { padding: 3px 7px; border-radius: 7px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
  .nx-feed li:last-child { color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent); }
  .nx-side-rules { margin-top: auto; min-height: 0; overflow: hidden; font: 500 12px/1.4 var(--font-ui); color: var(--muted); }
  .nx-side-rules h3 { margin: 0 0 4px; font: 800 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
  .nx-side-rules ul { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; }
}

/* ---------- Cartes : faces (charte « Soirée jeux », docs/theme-soiree-jeux.md §5.5 ; refonte Lot 8, 15/11/2026) ----------
   Par défaut (thème « Classique », .nx-ctr--glyph) : une carte à jouer haut de gamme — liseré blanc (le papier de la
   carte), panneau de couleur franche (--rouge / --jaune / --vert / --bleu via --nx-*) avec une lumière douce et un
   grain discret (UNE image partagée et mise en cache : 3 Ko, tuilée), rosace blanche festonnée au centre (dessin
   original, pas d'ovale), grand chiffre de la couleur cerné de sombre avec ombre portée, rappels blancs cernés
   dans les coins, ombre douce sous la carte. Jokers : panneau noir, roue des 4 couleurs / éventail de 4 cartes.
   Les autres thèmes de faces gardent leur corps (règle injectée par NeonUI.applySkin) : chiffres blancs cernés.
   L'ancien look néon est le thème « Espace » (.nx-ctr--neon, plus bas). Rien n'est animé ici. */
.nx-card {
  position: relative; display: block; flex: none; overflow: hidden; isolation: isolate; container-type: inline-size;
  width: var(--cw, 64px); height: calc(var(--cw, 64px) * 1.4); border-radius: calc(var(--cw, 64px) * .09);
  background: var(--papier, #FBF8F1); color: var(--m, var(--encre));
  border: 0;
  box-shadow: 0 .5px 0 rgb(0 0 0 / .22), 0 3px 9px -2px rgb(0 0 0 / .42);
  font-family: var(--nx-num-font);
  --ink: #FFFFFF; /* encre du centre (chiffre, symbole) : blanche sur les corps de couleur des thèmes */
}
#screen-neon { --nx-num-font: var(--font-display, "Fredoka", system-ui, sans-serif); }
.nx-c-cryo { --m: var(--nx-cryo); --g: var(--nx-cryo-g); --d: var(--nx-cryo-d); }
.nx-c-plasma { --m: var(--nx-plasma); --g: var(--nx-plasma-g); --d: var(--nx-plasma-d); }
.nx-c-acide { --m: var(--nx-acide); --g: var(--nx-acide-g); --d: var(--nx-acide-d); }
.nx-c-fusion { --m: var(--nx-fusion); --g: var(--nx-fusion-g); --d: var(--nx-fusion-d); }
/* Cartes à deux couleurs (paquet Prisme) : corps et chiffre partagés en diagonale */
.nx-c2-cryo { --m2: var(--nx-cryo); --d2: var(--nx-cryo-d); }
.nx-c2-plasma { --m2: var(--nx-plasma); --d2: var(--nx-plasma-d); }
.nx-c2-acide { --m2: var(--nx-acide); --d2: var(--nx-acide-d); }
.nx-c2-fusion { --m2: var(--nx-fusion); --d2: var(--nx-fusion-d); }
.nx-card.is-bi { background: linear-gradient(124deg, var(--m) 0 50%, var(--m2) 50% 100%); }
.nx-card.is-bi .nx-in { border-color: var(--m) var(--m2) var(--m2) var(--m); }
.nx-ctr--glyph .nx-card.is-bi .nx-val { color: transparent; background: linear-gradient(124deg, var(--m) 0 50%, var(--m2) 50% 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; text-shadow: none; }
.nx-card.is-bi .nx-br { --m: var(--m2); --d: var(--d2); }
.nx-gl .g2 { font-style: normal; margin-left: .5cqw; color: var(--m2); }
/* Joker : carte noire (le thème ne la recolore pas) */
.nx-card.is-wild { --m: var(--papier, #FBF8F1); --g: var(--papier, #FBF8F1); --d: #0B0C10; --ink: var(--papier, #FBF8F1); color: var(--papier, #FBF8F1); background: var(--encre, #1E1F26); }
.nx-card.is-chosen.nx-ch-cryo { --ch: var(--nx-cryo); }
.nx-card.is-chosen.nx-ch-plasma { --ch: var(--nx-plasma); }
.nx-card.is-chosen.nx-ch-acide { --ch: var(--nx-acide); }
.nx-card.is-chosen.nx-ch-fusion { --ch: var(--nx-fusion); }
.nx-card.is-chosen { box-shadow: 0 0 0 3px var(--ch), var(--ombre-objet) !important; }
/* Joker posé : pastille pleine de la couleur choisie, en haut à droite */
.nx-chosen { position: absolute; right: 6cqw; top: 6cqw; z-index: 4; display: flex; gap: 1.5cqw; padding: 1.5cqw; border-radius: 99px; background: var(--papier, #FBF8F1); box-shadow: var(--ombre-1); }
.nx-chosen > i { display: grid; place-items: center; width: 17cqw; height: 17cqw; border-radius: 50%; font-style: normal; background: var(--m); }
.nx-chosen .nx-gl { font: 400 10cqw/1 system-ui, sans-serif; color: var(--papier, #fff); }
/* Filet intérieur imprimé (thèmes de la boutique) */
.nx-in { position: absolute; inset: 6%; z-index: 1; border: 1.4cqw solid rgb(255 255 255 / .45); border-radius: 6cqw; pointer-events: none; }
.nx-card.is-wild .nx-in { border-color: rgba(255, 255, 255, .28); }
/* Rappels dans les coins : blancs, cernés de la couleur foncée, petite ombre portée (lisibles sur le jaune) */
.nx-crn { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: .9; color: #FFFFFF; }
.nx-tl { left: 9.5cqw; top: 8.5cqw; }
.nx-br { right: 9.5cqw; bottom: 8.5cqw; rotate: 180deg; }
.nx-crn b { font: 700 21cqw/1 var(--nx-num-font); -webkit-text-stroke: 1.2cqw var(--d); paint-order: stroke fill; text-shadow: 0 .8cqw 0 var(--d); }
.nx-crn b.is-s { font-size: 15cqw; letter-spacing: -.5cqw; }
.nx-crn .nx-gl { font: 400 12cqw/1 system-ui, sans-serif; font-style: normal; margin-top: 1.5cqw; color: #FFFFFF; }
.nx-crn-ico { width: 18cqw; height: 18cqw; fill: none; stroke: #FFFFFF; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-crn-ico .o { stroke: var(--d); stroke-width: 5.6; }
.nx-ico .o { stroke: var(--d); stroke-width: 4.6; }
.nx-mini4 { display: block; width: 15cqw; height: 15cqw; border-radius: 50%; background: var(--nx-wild); box-shadow: 0 0 0 1.2cqw var(--papier, #fff); rotate: -18deg; }
.is-u { text-decoration: underline; text-decoration-thickness: 1.6cqw; text-underline-offset: 1.8cqw; }
/* Repères de forme (daltonisme, ● ▲ ■ ★) : seulement avec la préférence. Formes SVG (js/neon-ui.js shapeSVG) :
   blanches cernées de la couleur foncée dans les coins (comme le chiffre du coin), de la couleur sur la rosace. */
.nx-root:not(.nx-cb) .nx-card .nx-gl, .nx-root:not(.nx-cb) .nx-color-g { display: none; }
.nx-gl { display: flex; align-items: center; justify-content: center; }
.nx-shp { display: block; width: 15cqw; height: 15cqw; overflow: visible; fill: #FFFFFF; stroke: var(--d, #1E1F26); stroke-width: 2.6; stroke-linejoin: round; paint-order: stroke fill; }
.nx-crn .nx-gl { margin-top: 2cqw; gap: .8cqw; }
.nx-gl .g2 { --d: var(--d2); display: block; }
.nx-chosen .nx-shp { width: 10cqw; height: 10cqw; fill: var(--papier, #FBF8F1); stroke: rgb(0 0 0 / .35); stroke-width: 2; }
.nx-tiles .nx-shp { width: 13cqw; height: 13cqw; stroke: rgb(0 0 0 / .35); stroke-width: 2; }
/* Sur la rosace (thème Classique) : la forme de la couleur, posée sous le chiffre, comme un cachet */
.nx-gl-ros { display: none; position: absolute; left: 50%; top: 50%; translate: -50% 0; margin-top: 27.5cqw; z-index: 1; }
.nx-gl-ros .nx-shp { width: 10cqw; height: 10cqw; fill: var(--m); stroke: var(--d); stroke-width: 2.2; }
.nx-ctr--glyph .nx-gl-ros { display: flex; }
/* Centre : grand chiffre (Fredoka) ou symbole dessiné, cerné de sombre avec ombre portée */
.nx-mid { position: absolute; left: 50%; top: 50%; z-index: 1; width: 80cqw; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; }
.nx-mid > .nx-val, .nx-mid > .nx-ico, .nx-mid > .nx-tiles, .nx-mid > .nx-q { grid-area: 1 / 1; position: relative; }
.nx-val {
  font: 700 58cqw/1 var(--nx-num-font); color: var(--ink); letter-spacing: -1.5cqw;
  -webkit-text-stroke: 1.8cqw var(--d); paint-order: stroke fill; text-shadow: 0 1.8cqw 0 var(--d);
}
.nx-val.is-txt { font-size: 44cqw; letter-spacing: -2cqw; }
.nx-val.is-3 { font-size: 34cqw; }
.is-wild .nx-val { color: var(--papier, #fff); -webkit-text-stroke: 2cqw #0B0C10; text-shadow: 0 1.8cqw 0 #0B0C10; }
.nx-mid .nx-ico { width: 60cqw; height: 60cqw; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Illustrations dessinées (Passe ton tour, Inverse) : ombre portée, contour foncé, trait, reflet */
.nx-mid .nx-art { width: 70cqw; height: 70cqw; overflow: visible; stroke-width: 10; }
.nx-art .a-sh { stroke: rgb(0 0 0 / .2); stroke-width: 15; transform: translate(0, 3px); }
.nx-art .a-o { stroke: var(--d); stroke-width: 15.5; }
.nx-art .a-f { stroke: var(--ink); }
.nx-art .h { fill: currentColor; stroke-width: 4; }
.nx-art .a-sh .h { color: rgb(0 0 0 / .2); stroke-width: 9; }
.nx-art .a-o .h { color: var(--d); stroke-width: 9.5; }
.nx-art .a-f .h { color: var(--ink); stroke: var(--ink); }
.nx-art .a-hl { stroke: rgb(255 255 255 / .55); stroke-width: 3; }
/* Rosace (thème Classique seulement) et deux petites cartes du +2 */
.nx-ros { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.nx-ros .r-sh { fill: rgb(0 0 0 / .2); transform: translate(0, 2.2px); }
.nx-ros .r-f { fill: var(--papier, #FBF8F1); }
.nx-ros .r-l { fill: none; stroke: var(--m); stroke-opacity: .5; stroke-width: 1.5; }
.nx-duo { display: none; }
/* Jokers : quatre carreaux de couleur (2 × 2) */
.nx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; width: 58cqw; aspect-ratio: 1; rotate: -8deg; }
.nx-tiles > i { display: grid; place-items: center; border-radius: 5cqw; box-shadow: inset 0 -1.2cqw 0 rgba(0, 0, 0, .2); }
.nx-tiles .nx-gl { font: 400 13cqw/1 system-ui, sans-serif; font-style: normal; color: #fff; }
.nx-t-plasma { background: var(--nx-plasma); } .nx-t-cryo { background: var(--nx-cryo); }
.nx-t-fusion { background: var(--nx-fusion); } .nx-t-acide { background: var(--nx-acide); }
.nx-mid > .nx-tiles.is-sm { width: 30cqw; gap: 2cqw; align-self: end; margin-bottom: 0; rotate: 0deg; }
.nx-mid > .nx-tiles.is-sm > i { border-radius: 3cqw; }
.is-wild .nx-mid > .nx-val { align-self: start; margin-top: 0; font-size: 36cqw; letter-spacing: -1cqw; }
.is-wild .nx-mid > .nx-ico.is-up { align-self: start; width: 40cqw; height: 40cqw; margin-top: 6cqw; }
.nx-ctag { position: absolute; left: 50%; bottom: 3cqw; translate: -50% 0; z-index: 4; font: 700 9cqw/1 var(--font-display); font-style: normal; color: var(--on-accent); background: var(--accent); padding: 1cqw 3cqw; border-radius: 3cqw; }

/* ===== Thème « Classique » (gratuit, par défaut) : la carte haut de gamme ===== */
.nx-ctr--glyph .nx-card { --ink: var(--m); }
.nx-ctr--glyph .nx-card.is-wild { --ink: var(--encre, #1E1F26); }
.nx-ctr--glyph .nx-card:not(.nx-masked) { background: var(--papier, #FBF8F1); }
.nx-ctr--glyph .nx-card:not(.nx-masked) .nx-in {
  inset: 4.5cqw; border: 0; border-radius: 6.5cqw;
  background: url("data:image/png;base64,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") 0 0 / 24px 24px,
    linear-gradient(152deg, rgb(255 255 255 / .26), rgb(255 255 255 / 0) 40%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / .22)), var(--m);
}
.nx-ctr--glyph .nx-card.is-bi .nx-in {
  background: url("data:image/png;base64,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") 0 0 / 24px 24px,
    linear-gradient(152deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 40%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / .2)),
    linear-gradient(124deg, var(--m) 0 50%, var(--m2) 50% 100%);
}
.nx-ctr--glyph .nx-card.is-wild .nx-in {
  background: url("data:image/png;base64,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") 0 0 / 24px 24px,
    linear-gradient(152deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 40%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / .4)), #24252D;
}
.nx-ctr--glyph .nx-ros { display: block; }
.nx-ctr--glyph .is-wild .nx-ros .r-l { stroke: var(--encre, #1E1F26); stroke-opacity: .22; }
.nx-ctr--glyph .nx-val { font-size: 54cqw; }
.nx-ctr--glyph .nx-val.is-txt { font-size: 40cqw; }
.nx-ctr--glyph .nx-val.is-3 { font-size: 31cqw; }
.nx-ctr--glyph .nx-mid .nx-ico:not(.nx-art) { width: 52cqw; height: 52cqw; }
.nx-ctr--glyph .nx-mid .nx-art { width: 60cqw; height: 60cqw; }
/* +2 : deux petites cartes de la couleur, bordées de blanc, posées de travers derrière le « +2 » */
.nx-ctr--glyph .nx-duo { display: block; position: absolute; inset: 0; pointer-events: none; }
.nx-ctr--glyph .nx-duo > i { position: absolute; left: 50%; top: 50%; width: 15cqw; height: 21cqw; margin: -10.5cqw 0 0 -7.5cqw; border-radius: 3cqw; background: var(--m); border: 1.4cqw solid var(--papier, #fff); box-shadow: 0 0 0 .7cqw var(--d), 0 1.4cqw 0 rgb(0 0 0 / .18); }
.nx-ctr--glyph .nx-duo > i:first-child { transform: translate(-6cqw, -17cqw) rotate(-16deg); }
.nx-ctr--glyph .nx-duo > i:last-child { transform: translate(6cqw, -19cqw) rotate(12deg); }
.nx-ctr--glyph .nx-duo + .nx-val { margin-top: 13cqw; z-index: 1; }
/* Joker : roue des 4 couleurs (les 4 carreaux deviennent 4 quartiers), moyeu blanc */
.nx-ctr--glyph .nx-mid > .nx-tiles:not(.is-sm) { width: 54cqw; gap: 2.2cqw; border-radius: 50%; overflow: hidden; rotate: -22deg; box-shadow: 0 0 0 1.2cqw var(--encre, #1E1F26); }
.nx-ctr--glyph .nx-mid > .nx-tiles:not(.is-sm) > i { border-radius: 0; box-shadow: none; }
.nx-ctr--glyph .nx-mid > .nx-tiles:not(.is-sm)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15cqw; height: 15cqw; margin: -7.5cqw 0 0 -7.5cqw; border-radius: 50%; background: var(--papier, #fff); box-shadow: 0 0 0 1.2cqw var(--encre, #1E1F26); }
/* Joker +4 : éventail de quatre cartes des 4 couleurs sous le « +4 » */
.nx-ctr--glyph .nx-mid > .nx-tiles.is-sm { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; align-self: stretch; }
.nx-ctr--glyph .nx-mid > .nx-tiles.is-sm > i { position: absolute; left: 50%; top: 50%; width: 14cqw; height: 20cqw; margin: -27cqw 0 0 -7cqw; border-radius: 2.2cqw; border: 1.1cqw solid var(--papier, #fff); box-shadow: 0 0 0 .6cqw #0B0C10; transform-origin: 50% 150%; }
.nx-ctr--glyph .nx-mid > .nx-tiles.is-sm > i:nth-child(1) { transform: rotate(-33deg); }
.nx-ctr--glyph .nx-mid > .nx-tiles.is-sm > i:nth-child(2) { transform: rotate(-11deg); }
.nx-ctr--glyph .nx-mid > .nx-tiles.is-sm > i:nth-child(3) { transform: rotate(11deg); }
.nx-ctr--glyph .nx-mid > .nx-tiles.is-sm > i:nth-child(4) { transform: rotate(33deg); }
.nx-ctr--glyph .is-wild .nx-mid > .nx-val { align-self: center; margin: 16cqw 0 0; font-size: 34cqw; z-index: 1; color: var(--papier, #fff); -webkit-text-stroke: 2.4cqw #0B0C10; text-shadow: 0 1.6cqw 0 #0B0C10; }
.nx-ctr--glyph .is-wild .nx-mid > .nx-ico.is-up { align-self: center; margin-top: 16cqw; width: 32cqw; height: 32cqw; z-index: 1; }
/* Très petites cartes (résultats, journal) : rosace sans filet ni reflet */
@container (max-width: 40px) { .nx-ros .r-l, .nx-art .a-hl { display: none; } }

/* Carte masquée (paquet Contrebande) : face cachée, annonce en coins, « ? » au centre. Rayures en px de la carte : les
   unités cqw d'un conteneur visent son PARENT, pas lui-même. */
#screen-neon .nx-card.nx-masked { background: repeating-linear-gradient(135deg, rgb(var(--accent-3-rgb, 169 139 255) / .2) 0 calc(var(--cw, 64px) * .06), var(--encre) 0 calc(var(--cw, 64px) * .12)); color: var(--papier); box-shadow: 0 0 0 1.5px var(--m), var(--ombre-objet); }
.nx-masked .nx-mpat { position: absolute; inset: 9cqw; z-index: 1; border-radius: 6cqw; border: 1.5cqw dashed color-mix(in srgb, var(--m) 70%, transparent); }
.nx-masked .nx-dotc { display: block; width: 11cqw; height: 11cqw; margin-top: 2cqw; border-radius: 50%; background: var(--m); }
.nx-q { font: 700 46cqw/1 var(--nx-num-font); color: var(--papier); }
.nx-mtag { position: absolute; left: 50%; bottom: 20cqw; translate: -50% 0; z-index: 4; display: flex; align-items: center; gap: 1.5cqw; white-space: nowrap; font: 700 8.5cqw/1 var(--font-display); font-style: normal; color: var(--papier); background: rgb(var(--accent-3-rgb, 169 139 255) / .55); padding: 1.5cqw 3.5cqw; border-radius: 3cqw; }
.nx-mtag-ico { width: 10cqw; height: 10cqw; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* Thèmes de faces (classes posées sur .nx-root) : ils changent le rendu, jamais la lisibilité */
.nx-ctr--outline .nx-val { color: transparent; -webkit-text-stroke: 2.4cqw #FFFFFF; paint-order: normal; text-shadow: none; }
.nx-ctr--outline .nx-in { border-width: 1cqw; border-style: dashed; }
.nx-ctr--pixel .nx-val { letter-spacing: -1cqw; text-shadow: 2cqw 2cqw 0 var(--d); }
.nx-ctr--pixel .nx-in, .nx-ctr--pixel .nx-tiles > i { border-radius: 0; }
.nx-ctr--prism .nx-val { text-shadow: -1.4cqw 0 0 rgb(255 60 200 / .45), 1.4cqw 0 0 rgb(60 200 255 / .45); }
.nx-ctr--chrome .nx-val { text-shadow: 0 1.6cqw 0 rgb(0 0 0 / .35); }
.nx-crn--tag .nx-tl { left: 0; top: 0; padding: 5cqw 5cqw 4cqw 6cqw; background: var(--papier); border-radius: 0 0 9cqw 0; }
.nx-crn--tag .nx-tl b { color: var(--m); -webkit-text-stroke: 0; text-shadow: none; }
.nx-crn--tag .nx-tl .nx-crn-ico { stroke: var(--m); }
.nx-crn--tag .nx-tl .nx-crn-ico .o { stroke: transparent; }
.nx-crn--tag .is-wild .nx-tl { background: var(--papier); }
.nx-crn--tag .is-wild .nx-tl b { color: var(--encre, #1E1F26); }
.nx-crn--tag .is-wild .nx-tl .nx-crn-ico { stroke: var(--encre, #1E1F26); }
.nx-crn--tag .is-wild .nx-tl .nx-mini4 { box-shadow: none; }
.nx-font--mono .nx-crn b, .nx-font--mono .nx-val { font-family: ui-monospace, Consolas, "Courier New", monospace; font-weight: 800; }
.nx-font--pixel .nx-crn b, .nx-font--pixel .nx-val { font-family: ui-monospace, Consolas, "Courier New", monospace; font-weight: 900; }
.nx-ov--scanlines .nx-face::after, .nx-ov--foil .nx-face::after, .nx-ov--reflection .nx-face::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: var(--nx-ov, .3); }
.nx-ov--scanlines .nx-face::after { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .3) 0 1px, transparent 1px 3px); }
/* Irisé / reflet : calque plus grand déplacé par transform (jamais background-position) */
.nx-ov--foil .nx-face::after { inset: 0 auto auto 0; width: 230%; height: 230%; border-radius: 0; background: var(--nx-wild); mix-blend-mode: soft-light; animation: nx-foil 4s ease-in-out infinite alternate; }
.nx-ov--reflection .nx-face::after { inset: 0 auto 0 0; width: 260%; border-radius: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .5) 48%, transparent 60%); animation: nx-reflect 3.4s ease-in-out infinite; }

/* ---------- Thème « Espace » (boutique) : l'ancien look NÉON, conservé ----------
   Verre sombre, liseré néon de la couleur, chiffre lumineux dans un losange, jokers au liseré arc-en-ciel. */
.nx-ctr--neon .nx-card { color: var(--m); border: calc(var(--nx-bw, 2) * 1px) solid var(--m, #fff); box-shadow: 0 0 calc(var(--nx-gl, .6) * 12px) color-mix(in srgb, var(--m, #fff) 55%, transparent), inset 0 0 calc(var(--nx-gl, .6) * 14px) color-mix(in srgb, var(--m, #fff) 22%, transparent), 0 6px 14px rgba(0, 0, 0, .45); border-radius: calc(var(--cw, 64px) * .14); }
.nx-ctr--neon .nx-card.is-wild { --m: #FFFFFF; border-color: transparent; background: linear-gradient(165deg, rgba(14, 18, 44, .96), rgba(8, 6, 24, .98)) padding-box, var(--nx-wild) border-box; }
.nx-ctr--neon .nx-card.is-bi { border-color: var(--m) var(--m2) var(--m2) var(--m); background: linear-gradient(165deg, rgba(14, 18, 44, .96), rgba(8, 6, 24, .98)); }
.nx-ctr--neon .nx-in { inset: 5%; border: 1px solid color-mix(in srgb, var(--m) 48%, transparent); border-radius: 3cqw; }
.nx-ctr--neon .nx-crn { color: var(--m); text-shadow: 0 0 2cqw color-mix(in srgb, var(--m) 80%, transparent); }
.nx-ctr--neon .nx-crn .nx-gl { color: var(--m); }
.nx-ctr--neon .nx-crn-ico { stroke: var(--m); }
.nx-ctr--neon .nx-crn b { -webkit-text-stroke: 0; text-shadow: none; }
.nx-ctr--neon .nx-mid { width: 62cqw; }
.nx-ctr--neon .nx-mid::before {
  content: ""; position: absolute; inset: 11%; rotate: 45deg; border-radius: 6cqw;
  border: 2.2cqw solid color-mix(in srgb, var(--m) 78%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--m) 28%, transparent), color-mix(in srgb, var(--d) 75%, transparent) 72%);
  box-shadow: 0 0 5cqw color-mix(in srgb, var(--m) 55%, transparent), inset 0 0 6cqw color-mix(in srgb, var(--m) 32%, transparent);
}
.nx-ctr--neon .nx-val { font-size: 38cqw; color: #fff; -webkit-text-stroke: 0; letter-spacing: 0; text-shadow: 0 0 1.5cqw var(--m), 0 0 5cqw var(--m), 0 .6cqw 0 var(--d); }
.nx-ctr--neon .nx-val.is-txt { font-size: 26cqw; }
.nx-ctr--neon .is-bi .nx-val { color: #fff; background: none; }
.nx-ctr--neon .nx-mid .nx-ico { width: 40cqw; height: 40cqw; stroke: #fff; filter: drop-shadow(0 0 2.4cqw var(--m)); }
.nx-ctr--neon :is(.nx-crn-ico, .nx-ico) .o { stroke: transparent; }
.nx-ctr--neon .nx-tiles { width: 40cqw; }
.nx-ctr--neon .nx-tiles > i { box-shadow: 0 0 2.5cqw currentColor; }

/* Aperçus de la boutique et du salon (Lot 8) : la VRAIE carte du jeu dans l'enveloppe .cx-card de js/cosmetics.js
   (cardFaceHTML) — elle remplit l'enveloppe (54 px, vignettes à 76 % de haut…) ; repères daltoniens masqués. */
.cx-card.cx-card-nx { border: 0; background: none; overflow: visible; border-radius: 9% / 6.43%; box-shadow: 0 4px 12px rgb(0 0 0 / .42); --nx-num-font: var(--font-display, "Fredoka", system-ui, sans-serif); }
.cx-card-nx > .nx-card { width: 100%; height: 100%; border-radius: inherit; box-shadow: none; }
.cx-card-nx .nx-gl { display: none; }

/* Petites cartes (résultats, contestation, choix) */
.nx-mini-face { --cw: 28px; }
.nx-pick-card { --cw: 54px; }
@media (min-width: 640px) { .nx-mini-face { --cw: 32px; } .nx-pick-card { --cw: 64px; } }

/* ---------- Dos de cartes (Potos.Cosmetics.cardBackHTML + repli) ---------- */
#screen-neon .cx-card.nx-back { width: var(--cw, 54px); border-radius: calc(var(--cw, 54px) * .14); border-width: max(1px, calc(var(--cw, 54px) * .025)); }
#screen-neon .nx-mback.cx-card, #screen-neon .nx-mback { box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
/* Dos animés de la boutique : figés en partie (jusqu'à 30 dos visibles : sièges, Flux, vols) */
#screen-neon .cx-card.nx-back, #screen-neon .nx-back .cx-pat, #screen-neon .nx-back .cx-em, #screen-neon .cx-card.nx-back::after { animation: none !important; }
/* Dos « Classique » (gratuit, par défaut ; Lot 8) : rouge profond éclairé au centre, croisillons fins (petite image
   tuilée, partagée), liseré blanc intérieur, rosace blanche à la roue des 4 couleurs (le même dessin que le Joker).
   Deux images SVG statiques mises en cache par le navigateur : aucun dégradé recalculé par carte. Partout : partie,
   boutique, salon (cardBackHTML ajoute .cx-cb--standard). */
.cx-cb--standard::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 6L6 0L12 6L6 12Z' fill='none' stroke='%23FFF' stroke-opacity='.13' stroke-width='1'/%3E%3Ccircle cx='6' cy='6' r='1' fill='%23FFF' fill-opacity='.14'/%3E%3C/svg%3E") 50% 50% / 12px 12px; }
.cx-card.cx-cb--standard::before { inset: 7%; z-index: 1; border: max(1px, 1.4cqw) solid rgb(251 248 241 / .9); border-radius: 7cqw; }
.cx-cb--standard .cx-em { width: 70cqw; aspect-ratio: 1; color: transparent; text-shadow: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 7.2A9 9 0 0 1 66.4 10.5A9 9 0 0 1 80.3 19.7A9 9 0 0 1 89.5 33.6A9 9 0 0 1 92.8 50A9 9 0 0 1 89.5 66.4A9 9 0 0 1 80.3 80.3A9 9 0 0 1 66.4 89.5A9 9 0 0 1 50 92.8A9 9 0 0 1 33.6 89.5A9 9 0 0 1 19.7 80.3A9 9 0 0 1 10.5 66.4A9 9 0 0 1 7.2 50A9 9 0 0 1 10.5 33.6A9 9 0 0 1 19.7 19.7A9 9 0 0 1 33.6 10.5A9 9 0 0 1 50 7.2Z' fill='%23000' fill-opacity='.22' transform='translate(0 2.5)'/%3E%3Cpath d='M50 7.2A9 9 0 0 1 66.4 10.5A9 9 0 0 1 80.3 19.7A9 9 0 0 1 89.5 33.6A9 9 0 0 1 92.8 50A9 9 0 0 1 89.5 66.4A9 9 0 0 1 80.3 80.3A9 9 0 0 1 66.4 89.5A9 9 0 0 1 50 92.8A9 9 0 0 1 33.6 89.5A9 9 0 0 1 19.7 80.3A9 9 0 0 1 10.5 66.4A9 9 0 0 1 7.2 50A9 9 0 0 1 10.5 33.6A9 9 0 0 1 19.7 19.7A9 9 0 0 1 33.6 10.5A9 9 0 0 1 50 7.2Z' fill='%23FBF8F1'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%23C9272B' stroke-opacity='.55' stroke-width='1.6'/%3E%3Cg transform='rotate(-22 50 50)' stroke='%23FBF8F1' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M50 50L50.00 23.00A27 27 0 0 1 77.00 50.00Z' fill='%23E5383B'/%3E%3Cpath d='M50 50L77.00 50.00A27 27 0 0 1 50.00 77.00Z' fill='%232C74DB'/%3E%3Cpath d='M50 50L50.00 77.00A27 27 0 0 1 23.00 50.00Z' fill='%2322A565'/%3E%3Cpath d='M50 50L23.00 50.00A27 27 0 0 1 50.00 23.00Z' fill='%23FFC233'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='28' fill='none' stroke='%231E1F26' stroke-width='2.2'/%3E%3Ccircle cx='50' cy='50' r='7.5' fill='%23FBF8F1' stroke='%231E1F26' stroke-width='2.2'/%3E%3C/svg%3E") 50% 50% / contain no-repeat; }
.cx-cb--standard .cx-pat { display: none; }
.nx-back-fb {
  display: grid; place-items: center; width: var(--cw, 54px); aspect-ratio: 5 / 7; border: 2px solid; container-type: inline-size;
  border-radius: calc(var(--cw, 54px) * .14);
}
.nx-back-fb i { font: 900 40cqw/1 var(--font-hud, system-ui); font-style: normal; color: var(--em); }

/* ---------- HUD « MOI » : état en clair, main, barre d'action ---------- */
.nx-me { grid-area: me; position: relative; z-index: 4; padding: 0 8px calc(6px + env(safe-area-inset-bottom)); color: var(--text); background: var(--bg); border-top: 1px solid var(--line); }
.nx-me::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 2px; border-radius: 2px; opacity: 0; transition: opacity .3s;
  background: linear-gradient(90deg, transparent, var(--accent, #22F2FF), transparent);
}
.nx-root.is-my-turn .nx-me::before { opacity: 1; }
.nx-meline { display: flex; align-items: center; gap: 8px; height: 30px; max-width: 980px; margin: 0 auto; padding-top: 2px; contain: size layout style; }
.nx-me-av {
  --pc: var(--accent); position: relative; flex: none; width: 26px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--surface-3), var(--surface) 75%); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--pc) 55%, transparent);
}
.nx-me-av:empty { display: none; }
.nx-me-av svg { width: 100%; height: 100%; display: block; }
.nx-me-av.is-turn { box-shadow: 0 0 0 2.5px var(--pc), 0 0 12px var(--pc); }
.nx-me-av.is-exposed { box-shadow: 0 0 0 2.5px var(--nx-n4), 0 0 14px var(--nx-n2); }
.nx-me-txt { flex: 1; min-width: 0; margin: 0; font: 600 13px/1.2 var(--font-ui, system-ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-me-txt b { color: var(--text); font: 800 15px/1 var(--font-hud, system-ui); }
.nx-me-txt .is-good { color: var(--accent-text); }
.nx-me-txt .is-bad { color: var(--danger-text); }
.nx-me-txt .is-warn { color: var(--nx-fusion-g); }
.nx-meline.is-turn .nx-me-txt { color: var(--text); }
.nx-sort {
  flex: none; height: 26px; padding: 0 9px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 700 11.5px/1 var(--font-display, system-ui); color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--line-2, rgba(130, 200, 255, .3));
}
.nx-sort:active { transform: scale(.95); transition-duration: 0s; }

.nx-hand { position: relative; height: calc(var(--cw-hand) * 1.4 + 28px); max-width: 1100px; margin: 0 auto; touch-action: pan-x; contain: size layout style; }
/* Main trop large : défilement horizontal (sans arc), avec de la place pour les cartes soulevées */
.nx-hand.is-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
/* Même hauteur dans les deux modes (aucun redimensionnement de la table) : les cartes soulevées y sont plafonnées à 20 px */
.nx-hand.is-scroll .nx-hc.is-drawn, .nx-hand.is-scroll .nx-hc.is-picked, .nx-hand.is-scroll .nx-hc.is-sending, .nx-hand.is-scroll .nx-hc:focus-visible { translate: 0 -20px; }
.nx-hand::-webkit-scrollbar { display: none; }
.nx-hand-in { position: relative; height: 100%; min-width: 100%; }
.nx-hc {
  position: absolute; left: 0; bottom: 6px; width: var(--cw-hand); height: calc(var(--cw-hand) * 1.4); padding: 0; margin: 0;
  appearance: none; background: none; border: 0; border-radius: calc(var(--cw-hand) * .14); color: inherit; font: inherit; cursor: default;
  /* Place dans l'éventail = transform EN LIGNE (layoutHand) ; soulèvement = propriété translate (classes). Plus de variables
     héritées (--x, --lift) : les réécrire recalculait le style des ~20 éléments du visage de CHAQUE carte. */
  transform-origin: 50% 100%;
  transition: transform .18s var(--nx-ease), translate .18s var(--nx-ease); touch-action: pan-x; -webkit-tap-highlight-color: transparent;
}
.nx-hc .nx-card { --cw: var(--cw-hand); }
/* Cartes jouables : surélevées de 12 px, liseré net ; les autres voilées (seulement à mon tour) */
.nx-hc.is-playable { translate: 0 -12px; cursor: pointer; }
/* Carte jouable (charte §5.5 .is-jouable) : levée, filet jaune, ombre d'objet saisi — pas de halo */
.nx-hc.is-playable .nx-card { box-shadow: 0 0 0 2.5px var(--accent, #FFC233), var(--ombre-levee, 0 16px 26px -10px rgba(0, 0, 0, .6)); }
.nx-hc.is-playable .nx-card.is-bi { box-shadow: 0 0 0 2.5px var(--accent, #FFC233), var(--ombre-levee, 0 16px 26px -10px rgba(0, 0, 0, .6)); }
.nx-hc:active .nx-card { scale: .95; }
.nx-hc::before {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--bg, #15171E) 46%, transparent); opacity: 0; transition: opacity .18s; /* voile de la pièce : en clair les couleurs pâlissent (le jaune reste jaune), en sombre elles s'assombrissent */
}
.nx-hc.is-dim::before { opacity: 1; }
/* Pulsation (carte piochée, interceptable, à cacher) : liseré peint une fois, seule l'opacité bouge */
.nx-hc.is-drawn.is-playable .nx-card::before, .nx-hc.is-jump .nx-card::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2px var(--m), inset 0 0 16px var(--m);
  animation: nx-glow .8s ease-in-out infinite alternate;
}
.nx-hc.is-jump .nx-card::before { --m: var(--nx-n3); }
.nx-hc.is-drawn { translate: 0 -22px; }
.nx-hc.is-drawn::after {
  content: "PIOCHÉE"; position: absolute; left: 50%; top: -10px; translate: -50% 0; z-index: 5; white-space: nowrap;
  font: 800 9px/1 var(--font-display, system-ui); letter-spacing: .08em; padding: 3px 6px; border-radius: 6px; color: var(--on-neon, #03101C); background: var(--accent, #22F2FF);
}
.nx-hc.is-jump .nx-card { box-shadow: 0 0 0 2px var(--nx-n3), 0 0 18px var(--nx-n3), 0 8px 18px rgba(0, 0, 0, .5); }
.nx-hc.is-jump::after { content: "⚔️"; position: absolute; right: -4px; top: -10px; z-index: 5; font-size: 16px; }
.nx-hc.is-pick { translate: 0 -10px; cursor: pointer; }
.nx-hc.is-pick .nx-card { box-shadow: 0 0 0 2px var(--accent-3), 0 0 14px var(--accent-3), 0 8px 18px rgba(0, 0, 0, .5); }
.nx-hc.is-picked { translate: 0 -30px; }
.nx-hc.is-picked .nx-card { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--accent-3), 0 8px 18px rgba(0, 0, 0, .5); }
.nx-hc.is-hidden { opacity: 0; transition: none; }
.nx-hc.is-new { animation: nx-card-in .4s var(--nx-spring) both; }
/* Envoyée : soulevée TOUT DE SUITE (retour < 100 ms, sans transition) — la carte en vol part exactement de là */
.nx-hc.is-sending { translate: 0 -40px; opacity: .8; transition: none; }
.nx-hc.is-dragging { opacity: .22; }
.nx-hc.is-nope { animation: nx-nope .4s; }
.nx-hc:focus-visible { outline: none; translate: 0 -24px; z-index: 200 !important; }
.nx-hc:focus-visible .nx-card { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .nx-hc:hover { translate: 0 -8px; z-index: 200 !important; }
  .nx-hc.is-playable:hover, .nx-hc.is-pick:hover { translate: 0 -26px; }
  .nx-hc.is-drawn:hover { translate: 0 -28px; }
  .nx-hand.is-scroll .nx-hc:hover, .nx-hand.is-scroll .nx-hc.is-playable:hover, .nx-hand.is-scroll .nx-hc.is-pick:hover, .nx-hand.is-scroll .nx-hc.is-drawn:hover { translate: 0 -20px; }
  .nx-hc.is-sending:hover { translate: 0 -40px; } /* la carte envoyée reste soulevée sous la souris */
  .nx-hc:hover .nx-peek:not(:empty) { opacity: 1; }
}
/* Carte neuve : point « fraîche » pendant 2 s */
.nx-fdot { position: absolute; left: 50%; top: -7px; z-index: 6; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--nx-n1); box-shadow: 0 0 0 2px #07061A; opacity: 0; transition: opacity .3s; pointer-events: none; }
.nx-hc.is-fresh .nx-fdot { opacity: 1; }
/* Masse critique : 🔥 = la carte ferait fondre le réacteur ; bulle « +7 → 34 / 35 » (survol / appui long) */
.nx-hot { position: absolute; right: -5px; top: -9px; z-index: 6; font-size: 15px; font-style: normal; line-height: 1; opacity: 0; pointer-events: none; }
.nx-hc.is-fire .nx-hot { opacity: 1; }
.nx-peek {
  position: absolute; left: 50%; bottom: calc(100% + 18px); translate: -50% 0; z-index: 8; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s;
  font: 800 12px/1 var(--font-hud, system-ui); color: var(--text); background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--nx-n3); padding: 5px 8px; border-radius: 8px;
}
.nx-hc.is-fire .nx-peek { border-color: var(--nx-n2); }
.nx-hc.is-peek .nx-peek:not(:empty) { opacity: 1; }
.nx-root.is-spectator .nx-hand { height: 12px; }

/* Barre : [📣 NÉON] [ gros bouton contextuel ] [⏩ Auto] */
/* Hauteur fixe + contain: size layout → barrière de mise en page (les secondes du compte à rebours, un libellé qui change ne relancent jamais la mise en page de la table) */
.nx-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: 8px; max-width: 980px; height: 56px; margin: 0 auto; contain: size layout style; }
.nx-neon-btn {
  position: relative; display: grid; place-items: center; align-content: center; gap: 3px; width: 74px; min-height: 56px; padding: 0 4px;
  color: var(--text); cursor: pointer; border-radius: 16px; font: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 14%, transparent), color-mix(in srgb, var(--text) 4%, transparent)); border: 1px solid var(--line-2, rgba(130, 200, 255, .3));
  transition: transform .15s var(--nx-spring), opacity .2s;
}
.nx-neon-btn[hidden] { display: none; }
.nx-neon-t { font: 600 13px/1.05 var(--font-display, system-ui); text-align: center; }
@media (max-width: 420px) { .nx-neon-t { font-size: 12px; } }
.nx-neon-s { font: 600 11px/1.1 var(--font-ui, system-ui); color: var(--muted); white-space: nowrap; }
.nx-neon-s:empty { display: none; }
.nx-neon-btn[data-state="off"] { opacity: .82; }
.nx-neon-btn[data-state="disabled"] { opacity: .4; cursor: default; }
/* Halo peint une fois : seule son opacité pulse (rappel du cri) */
.nx-neon-btn::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--nx-n2), 0 0 22px var(--nx-n2);
}
.nx-neon-btn[data-state="ready"] { border-color: var(--nx-n2); }
.nx-neon-btn[data-state="ready"]::after { animation: nx-glow .55s ease-in-out infinite alternate; }
.nx-neon-btn[data-state="ready"] .nx-neon-s { color: var(--nx-plasma-g); }
.nx-neon-btn[data-state="armed"] { color: var(--on-neon, #03101C); background: linear-gradient(135deg, var(--nx-n1), var(--nx-n2)); border-color: #fff; }
.nx-neon-btn[data-state="armed"] .nx-neon-s { color: var(--on-neon, #03101C); font-weight: 800; }
.nx-neon-btn[data-state="late"] { color: #fff; background: linear-gradient(135deg, var(--nx-n4), var(--nx-n2)); border-color: #fff; }
.nx-neon-btn[data-state="late"]::after { animation: nx-glow .35s ease-in-out infinite alternate; }
.nx-neon-btn[data-state="late"] .nx-neon-s { color: var(--papier); font-weight: 800; }
.nx-neon-btn.is-arming { animation: nx-arm .45s var(--nx-spring); }
.nx-neon-btn:active { transform: scale(.94); transition-duration: 0s; }
.nx-mainbox { display: flex; gap: 6px; min-width: 0; }
.nx-main, .nx-alt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: 6px 12px 10px;
  cursor: pointer; border-radius: 16px; font: inherit; color: var(--text); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 14%, transparent), color-mix(in srgb, var(--text) 5%, transparent)); border: 1px solid var(--line-2, rgba(130, 200, 255, .3));
  transition: transform .15s var(--nx-spring), opacity .2s;
}
.nx-main { flex: 1 1 0; }
.nx-alt { flex: 0 0 auto; min-width: 96px; }
.nx-alt[hidden] { display: none; }
.nx-main-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px/1.1 var(--font-display, system-ui); letter-spacing: .01em; }
.nx-main-s { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11px/1.1 var(--font-ui, system-ui); opacity: .82; }
.nx-main-s:empty { display: none; }
.nx-sec { position: absolute; right: 9px; top: 7px; font: 800 12px/1 var(--font-hud, system-ui); opacity: .9; }
.nx-sec:empty { display: none; }
.nx-main[data-tone="primary"], .nx-alt[data-tone="primary"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--bord-3d, rgba(0, 0, 0, .3)); }
.nx-main[data-tone="primary"] .nx-main-s { opacity: .75; }
.nx-main[data-tone="secondary"], .nx-alt[data-tone="secondary"] { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: linear-gradient(180deg, rgb(var(--accent-rgb) / .16), rgb(var(--accent-rgb) / .05)); }
.nx-main[data-tone="danger"], .nx-alt[data-tone="danger"] { color: var(--on-accent); background: var(--danger); border-color: var(--danger); box-shadow: inset 0 -3px 0 var(--bord-3d, rgba(0, 0, 0, .3)); }
.nx-main[data-tone="idle"] { cursor: default; color: var(--muted); background: color-mix(in srgb, var(--text) 5%, transparent); border-color: color-mix(in srgb, var(--text) 14%, transparent); }
.nx-main[data-tone="idle"] .nx-main-t { font-size: 14.5px; font-weight: 700; }
.nx-main[aria-disabled="true"]:not([data-tone="idle"]), .nx-alt[aria-disabled="true"] { opacity: .5; cursor: default; }
.nx-main[aria-busy="true"], .nx-alt[aria-busy="true"] { opacity: .65; }
.nx-main:not([aria-disabled="true"]):active, .nx-alt:not([aria-disabled="true"]):active { transform: scale(.96); transition-duration: 0s; }
/* Compte à rebours du bouton : barre scaleX (une transition CSS) */
.nx-cd { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; opacity: 0; }
.nx-cd i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: currentColor; transition: transform var(--cd-ms, 0ms) linear var(--cd-del, 0ms); }
.has-timer .nx-cd { opacity: 1; }
.nx-main[data-tone="primary"] .nx-cd { background: rgba(3, 16, 28, .18); }
.nx-root.is-hot .nx-main.has-timer .nx-cd i, .nx-root.is-hot .nx-alt.has-timer .nx-cd i { background: var(--nx-n2); }
.nx-auto {
  position: relative; display: grid; place-items: center; align-content: center; gap: 2px; width: 62px; min-height: 56px; padding: 0 4px; cursor: pointer;
  border-radius: 16px; font: inherit; color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); border: 1px solid var(--line-2, rgba(130, 200, 255, .3));
}
.nx-auto > span { font-size: 17px; line-height: 1; }
.nx-auto b { font: 800 11px/1 var(--font-display, system-ui); letter-spacing: .04em; }
.nx-dot { position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.nx-auto.is-on { color: var(--on-accent); background: var(--ok); border-color: var(--ok); }
.nx-auto.is-on .nx-dot { background: var(--on-accent); }
.nx-auto:active { transform: scale(.94); transition-duration: 0s; }
.nx-kbd {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; margin-left: .45em; border-radius: 5px;
  font: 700 .62em/1 var(--font-ui, system-ui); color: inherit; opacity: .75; border: 1px solid currentColor; text-transform: none;
}
@media (hover: none) { .nx-kbd { display: none !important; } }
@media (max-width: 380px) {
  .nx-neon-btn { width: 64px; }
  .nx-auto { width: 54px; }
  .nx-main-t { font-size: 14.5px; }
  .nx-alt { min-width: 84px; padding-left: 8px; padding-right: 8px; }
  .nx-me-txt { font-size: 12px; }
}
/* QA : deux boutons côte à côte sur téléphone (« Encaisser +4 » + « Contester », « Poser » + « Garder ») : le montant
   reste lisible (il était coupé en « Encaisser… » à 375 px) et les secondes passent en bas à droite, hors du libellé. */
@media (max-width: 420px) {
  .nx-bar.has-alt .nx-main, .nx-bar.has-alt .nx-alt { padding-left: 6px; padding-right: 6px; }
  .nx-bar.has-alt .nx-alt { min-width: 0; }
  .nx-bar.has-alt .nx-main-t { font-size: 13.5px; letter-spacing: 0; }
  .nx-bar.has-alt .nx-sec { top: auto; bottom: 11px; right: 6px; font-size: 11px; }
}

/* Réactions */
/* Téléphone : tiroir en surimpression au-dessus du HUD (il ne redimensionne jamais la table) */
.nx-emotes {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); z-index: 6; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  padding: 6px; border-radius: 16px; background: var(--glass-strong, rgba(9, 14, 36, .93)); border: 1px solid var(--line-2, rgba(130, 200, 255, .3));
}
.nx-emotes[hidden] { display: none; }
.nx-react { width: 42px; height: 42px; font-size: 22px; }
.nx-root.is-wide .nx-emo-btn { display: none; }
.nx-root.is-wide .nx-emotes { position: absolute; left: 10px; right: auto; bottom: calc(100% + 10px); flex-direction: column; padding: 0; border: 0; background: none; }
.nx-root.is-wide .nx-emotes .nx-react { width: 40px; height: 40px; font-size: 20px; }

/* Alerte hors tour (contre-signal, cri en retard, démasquer, interception) : AU-DESSUS de la main */
.nx-alert { position: absolute; left: 50%; bottom: 4px; z-index: 14; translate: -50% 0; width: max-content; max-width: 94%; }
.nx-alert[hidden] { display: none; }
.nx-alert-btn {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 20px 9px; cursor: pointer; border-radius: 18px;
  font: inherit; color: var(--papier); border: 1.5px solid var(--papier); background: linear-gradient(135deg, var(--nx-n4), var(--nx-n2));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55); animation: nx-alert-in .3s var(--nx-spring);
}
.nx-alert-btn::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 26px var(--nx-n2), 0 0 48px color-mix(in srgb, var(--nx-n4) 50%, transparent);
  animation: nx-glow .5s ease-in-out .3s infinite alternate;
}
.nx-alert-btn:active { scale: .95; }
.nx-alert-t { font: 900 clamp(15px, 4.4vw, 19px)/1 var(--font-hud, system-ui); letter-spacing: .04em; }
.nx-alert-btn small { font: 600 12px/1.2 var(--font-ui, system-ui); opacity: .95; }
.nx-alert-btn .nx-kbd { position: absolute; right: 8px; top: 8px; margin: 0; }
.nx-alert--late { background: linear-gradient(135deg, var(--nx-n2), var(--accent-3)); }
.nx-alert--jump { color: var(--on-neon, #03101C); background: linear-gradient(135deg, var(--nx-n3), var(--nx-n1)); }
.nx-alert--doubt { background: linear-gradient(135deg, var(--accent-3), var(--accent-3) 55%, var(--nx-n2)); }
.nx-alert--doubt::after { box-shadow: 0 0 26px var(--accent-3); }

/* ---------- Panneaux (choix au-dessus de la Grille ; la main et le gros bouton restent visibles) ---------- */
.nx-panel {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 10px;
  background: radial-gradient(circle at 50% 45%, rgba(3, 5, 14, .4), rgba(3, 5, 14, .76));
  animation: nx-fade .18s both;
}
.nx-panel[hidden] { display: none; }
.nx-panel--reveal { background: rgba(3, 5, 14, .45); }
.nx-pcard {
  --fill: var(--glass-strong, rgba(9, 14, 36, .93)); width: min(100%, 420px); max-height: 100%; overflow: auto; padding: 14px 14px 12px; text-align: center;
  animation: nx-pop .3s var(--nx-spring) both; scrollbar-width: thin;
}
.nx-panel.is-wide .nx-pcard { width: min(100%, 700px); }
.nx-phead { display: flex; align-items: center; gap: 12px; text-align: left; }
.nx-phead > .nx-card { rotate: -6deg; flex: none; }
.nx-ptitle { margin: 0; font: 800 clamp(17px, 4.8vw, 21px)/1.15 var(--font-display, system-ui); }
.nx-ptitle small { display: block; margin-top: 4px; font: 600 12px/1.2 var(--font-ui); color: var(--muted); }
.nx-psub { margin: 4px 0 0; font: 500 13px/1.35 var(--font-ui, system-ui); color: var(--muted); }
.nx-pnote { margin: 10px 0 0; font: 600 12px/1.3 var(--font-ui); color: var(--ok-text); }
.nx-pwarn { margin: 10px 0 0; padding: 7px 10px; border-radius: 10px; font: 700 12.5px/1.3 var(--font-ui); color: var(--danger-text); background: color-mix(in srgb, var(--nx-n2) 18%, transparent); border: 1px solid color-mix(in srgb, var(--nx-n2) 60%, transparent); text-align: left; }
.nx-pacts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.nx-cancel { margin-top: 10px; }
/* Téléphone : le gros bouton devient « ✕ Annuler » pendant un choix ; pas de second bouton dans le panneau */
@media (max-width: 899px) { .nx-pcard .nx-cancel { display: none; } }
.nx-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.nx-color {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 13px 8px 10px; cursor: pointer;
  color: var(--papier); font: inherit; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .85);
  background: linear-gradient(160deg, var(--m) 40%, var(--d) 140%);
  transition: transform .15s var(--nx-spring);
}
.nx-color b { font: 900 17px/1 var(--nx-num-font); letter-spacing: .02em; -webkit-text-stroke: 3px rgba(12, 12, 20, .8); paint-order: stroke fill; }
.nx-color-g { font: 400 26px/1 system-ui, sans-serif; color: var(--papier); text-shadow: 0 0 3px #000; }
.nx-color .nx-kbd { position: absolute; right: 7px; top: 7px; margin: 0; }
.nx-color .nx-cnum { position: absolute; left: 8px; top: 7px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 900 11px/1 var(--font-hud); color: var(--on-neon); background: #fff; }
.nx-color.is-sel { box-shadow: 0 0 0 3px #fff, 0 0 20px var(--m); }
.nx-color.is-sel .nx-cnum { display: grid; }
.nx-color:hover, .nx-color:focus-visible { transform: translateY(-2px) scale(1.03); outline: none; }
.nx-color:active { transform: scale(.96); }
.nx-color[aria-disabled="true"] { opacity: .35; }
.nx-targets { display: grid; gap: 8px; margin-top: 12px; }
.nx-target {
  --pc: var(--accent); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
  color: var(--text); font: inherit; text-align: left; border-radius: 14px; background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--line-2);
  transition: transform .15s var(--nx-spring);
}
.nx-target b { font: 700 15px/1.1 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-target small { display: block; margin-top: 2px; font: 600 11px/1.2 var(--font-ui); color: var(--muted); }
.nx-target small.is-warn { color: var(--danger-text); }
.nx-target-av { width: 38px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--surface-3), var(--surface) 75%); box-shadow: 0 0 0 1.5px var(--pc); }
.nx-target-av svg { width: 100%; height: 100%; display: block; }
.nx-target-n { font: 900 18px/1 var(--font-hud); }
.nx-target .nx-kbd { margin: 0; }
.nx-target.is-shield { border-color: color-mix(in srgb, var(--nx-n1) 60%, transparent); }
.nx-target.is-bounty { border-color: var(--nx-n4); background: color-mix(in srgb, var(--nx-n4) 12%, transparent); }
.nx-target:hover, .nx-target:focus-visible { border-color: var(--pc); transform: translateX(3px); outline: none; }
.nx-neon-mini {
  display: grid; justify-items: center; gap: 2px; width: 100%; margin-top: 12px; padding: 9px 12px; cursor: pointer; font: inherit; color: var(--text);
  border-radius: 14px; border: 1.5px dashed var(--nx-n2); background: color-mix(in srgb, var(--nx-n2) 10%, transparent);
}
.nx-neon-mini b { font: 900 16px/1 var(--font-hud); color: var(--accent-2-text); }
.nx-neon-mini small { font: 600 11px/1.2 var(--font-ui); color: var(--muted); }
.nx-neon-mini.is-armed { border-style: solid; color: var(--on-neon); background: linear-gradient(135deg, var(--nx-n1), var(--nx-n2)); }
.nx-neon-mini.is-armed b, .nx-neon-mini.is-armed small { color: var(--on-neon); }
/* Masque (Contrebande) : 1. carte à cacher → 2. annonce */
.nx-steps { display: flex; justify-content: center; gap: 6px; margin-top: 8px; font: 700 11px/1 var(--font-display); color: var(--muted); }
.nx-steps span { padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.nx-steps span.is-on { color: var(--on-neon); background: #B79BFF; }
.nx-hidepick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.nx-hidepick button { padding: 0; background: none; border: 0; cursor: pointer; border-radius: 6px; transition: transform .15s var(--nx-spring); }
.nx-hidepick button:hover, .nx-hidepick button:focus-visible { transform: translateY(-3px); outline: none; }
.nx-hidepick .nx-card { --cw: 40px; }
.nx-decl { display: grid; gap: 5px; margin-top: 10px; }
.nx-decl-row { display: grid; grid-template-columns: 30px repeat(10, minmax(0, 1fr)); gap: 3px; align-items: center; }
.nx-decl-row > i { font: 400 18px/1 system-ui, sans-serif; font-style: normal; color: var(--m); }
.nx-dcell {
  height: 32px; padding: 0; cursor: pointer; border-radius: 8px; font: 800 14px/1 var(--font-hud); color: var(--papier);
  background: color-mix(in srgb, var(--m) 18%, color-mix(in srgb, var(--surface) 90%, transparent)); border: 1px solid color-mix(in srgb, var(--m) 55%, transparent);
}
.nx-dcell[aria-disabled="true"] { opacity: .16; cursor: default; }
.nx-dcell.is-sel { color: var(--on-neon); background: var(--m); border-color: #fff; box-shadow: 0 0 12px var(--m); }
.nx-dcell.is-truth::after { content: "✓"; position: absolute; }
.nx-truth { margin-top: 8px; font: 700 12px/1.3 var(--font-ui); color: var(--ok-text); }
.nx-truth.is-lie { color: var(--danger-text); }
.nx-reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 12px 0; }
/* Fin de manche */
.nx-rlist { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; text-align: left; }
.nx-rrow {
  --pc: var(--accent); display: grid; grid-template-columns: 30px minmax(0, 6.5em) minmax(0, 1fr) auto; grid-template-areas: "av name hand pts" "av score score score";
  align-items: center; gap: 4px 8px; padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.nx-rav { grid-area: av; width: 30px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--surface-3), var(--surface) 75%); box-shadow: 0 0 0 1.5px var(--pc); }
.nx-rav svg { width: 100%; height: 100%; display: block; }
.nx-rname { grid-area: name; font: 700 13px/1.1 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-rname i { font-style: normal; color: var(--ok-text); margin-left: 3px; }
.nx-rhand { grid-area: hand; display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.nx-rhand em { font: 500 12px/1.2 var(--font-ui); color: var(--muted); }
.nx-rpts { grid-area: pts; justify-self: end; font: 800 12px/1 var(--font-hud); color: var(--muted); white-space: nowrap; }
.nx-rpts b { font-size: 16px; color: var(--accent-text); }
.nx-rscore { grid-area: score; position: relative; display: flex; align-items: center; height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.nx-rscore i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 55%, transparent), var(--pc)); transition: transform .8s var(--nx-ease); }
.nx-rscore b { position: relative; margin-left: 6px; font: 800 10px/1 var(--font-hud); text-shadow: 0 0 3px #000, 0 0 6px #000; }
.nx-rrow.is-win { background: color-mix(in srgb, var(--nx-n1) 10%, transparent); border-color: color-mix(in srgb, var(--nx-n1) 55%, transparent); }
.nx-rrow.is-out { opacity: .5; }
.nx-rnext { margin: 10px 0 0; font: 600 12px/1.3 var(--font-ui); color: var(--muted); }
.nx-rnext span { color: var(--accent-text); }
.nx-contra { margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; text-align: left; background: rgb(var(--accent-3-rgb) / .14); border: 1px solid rgb(var(--accent-3-rgb) / .45); }
.nx-contra h3 { margin: 0 0 6px; font: 800 12px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-3); }
.nx-contra li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0; font: 600 12.5px/1.3 var(--font-ui); list-style: none; }
.nx-contra ul { margin: 0; padding: 0; }
.nx-contra .is-lie { color: var(--danger-text); }
.nx-contra b { font-weight: 800; }
.nx-contra b.nx-c-cryo { color: var(--nx-cryo); } .nx-contra b.nx-c-plasma { color: var(--nx-plasma); } .nx-contra b.nx-c-acide { color: var(--nx-acide); } .nx-contra b.nx-c-fusion { color: var(--nx-fusion); }
@media (max-width: 480px) {
  .nx-rrow { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "av name pts" "hand hand hand" "score score score"; }
  .nx-rav { width: 26px; }
  .nx-decl-row { grid-template-columns: 22px repeat(10, minmax(0, 1fr)); gap: 2px; }
  .nx-dcell { height: 30px; font-size: 13px; }
}

/* ---------- Modales (aide + préférences, quitter, fin de secours) ---------- */
.nx-modal {
  position: absolute; inset: 0; z-index: 48; display: grid; place-items: center; padding: 16px;
  background: rgba(2, 4, 12, .88); animation: nx-fade .2s both;
}
.nx-modal[hidden] { display: none; }
.nx-mcard { --fill: var(--glass-strong, rgba(9, 14, 36, .93)); width: min(94vw, 500px); max-height: 88dvh; overflow: auto; padding: 18px; text-align: center; animation: nx-pop .35s var(--nx-spring) both; }
.nx-mtitle { margin: 4px 0 0; font: 800 23px/1.15 var(--font-display, system-ui); }
.nx-mtext { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.nx-mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.nx-mrow:has(> :only-child) { grid-template-columns: 1fr; }
.nx-end-ico { font-size: 44px; line-height: 1; }
.nx-end-list { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; text-align: left; }
.nx-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: color-mix(in srgb, var(--text) 7%, transparent); font-size: 14px; }
.nx-end-n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-help { text-align: left; font-size: 14px; line-height: 1.45; color: var(--text); }
.nx-help ol, .nx-help ul { margin: 8px 0 0; padding-left: 1.3em; display: grid; gap: 5px; list-style: decimal; }
.nx-help ul { list-style: disc; }
.nx-help li::marker { color: var(--accent-text); font-weight: 700; }
.nx-help h3 { margin: 16px 0 0; font: 800 13px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.nx-help p { margin: 6px 0 0; color: var(--muted); }
.nx-help-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-hc-col { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; color: var(--m); border: 1px solid var(--m); font: 700 12px/1 var(--font-display); }
.nx-hc-col b { font: 400 14px/1 system-ui, sans-serif; }
.nx-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; }
.nx-score-tbl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.nx-score-tbl span { display: grid; justify-items: center; gap: 2px; padding: 7px 4px; border-radius: 10px; background: color-mix(in srgb, var(--text) 7%, transparent); font: 600 12px/1.2 var(--font-ui); color: var(--muted); }
.nx-score-tbl b { font: 900 17px/1 var(--font-hud); color: var(--text); }
/* Aide « Les règles en 30 secondes » : de vraies cartes dessinées */
.nx-help-goal { margin: 2px 0 0 !important; padding: 8px 10px; border-radius: 12px; color: var(--text) !important; background: color-mix(in srgb, var(--text) 8%, transparent); }
.nx-help-goal b, .nx-help p b { color: var(--text); }
.nx-hcard { position: relative; display: inline-block; flex: none; }
.nx-help-card { --cw: 44px; }
@media (max-width: 420px) { .nx-help-card { --cw: 36px; } .nx-hex-row { gap: 8px; } .nx-help-ex { gap: 8px; padding: 8px; } }
.nx-hcard > i { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 900 12px/1 system-ui, sans-serif; font-style: normal; color: #fff; box-shadow: 0 0 0 2px #0B0F24; }
.nx-hcard.is-ok > i { background: #1FB24A; }
.nx-hcard.is-no > i { background: #E5303C; }
.nx-hcard.is-no .nx-card { opacity: .55; }
.nx-help-ex { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line-2, rgba(130, 200, 255, .25)); }
.nx-hex-top { display: grid; justify-items: center; gap: 4px; }
.nx-hex-top small { font: 700 10px/1 var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.nx-hex-arrow { font: 900 20px/1 system-ui, sans-serif; color: var(--muted); }
.nx-hex-row { display: flex; flex-wrap: wrap; gap: 10px; }
.nx-help ul.nx-help-sp { list-style: none; padding: 0; gap: 8px; }
.nx-help-sp li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.nx-help-sp li .nx-help-card { --cw: 38px; }
.nx-help-var { margin-bottom: 4px; padding: 6px 10px 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.nx-help-var h3 { margin-top: 4px !important; }
.nx-help-more { margin-top: 14px; border-top: 1px solid var(--line-2, rgba(130, 200, 255, .2)); padding-top: 8px; }
.nx-help-more > summary { cursor: pointer; font: 800 13px/1.4 var(--font-display); color: var(--accent-text); }
.nx-help-more .nx-score-tbl { margin-top: 10px; }
/* Chiffres de l'interface (cartes en main, pioche, comptes) : police lisible, comme sur les cartes */
#screen-neon :is(.nx-count, .nx-float, .nx-me-txt b, .nx-srow-c, .nx-pend b, .nx-sec, .nx-score-tbl b, .nx-rpts b, .nx-stamp) { font-family: var(--nx-num-font); }
.nx-float.is-rev { font-size: 18px; color: var(--nx-sur-tapis); text-shadow: 0 0 8px #fff, 0 0 18px var(--nx-n1); }
.nx-prefs { display: grid; gap: 6px; margin-top: 8px; }
.nx-pref {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; cursor: pointer; text-align: left;
  font: inherit; color: var(--text); border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
}
.nx-pref b { display: block; font: 700 13.5px/1.2 var(--font-display); }
.nx-pref small { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--font-ui); color: var(--muted); }
.nx-pref .nx-sw { position: relative; width: 40px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.nx-pref .nx-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s var(--nx-ease); }
.nx-pref[aria-checked="true"] .nx-sw { background: var(--nx-n3); }
.nx-pref[aria-checked="true"] .nx-sw::after { transform: translateX(18px); }
.nx-pref .nx-sw-txt { font: 800 12px/1 var(--font-display); color: var(--accent-text); white-space: nowrap; }

/* ---------- Bandeaux ---------- */
.nx-banner-host { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; pointer-events: none; }
.nx-banner {
  max-width: 92%; text-align: center; color: var(--nx-sur-tapis); 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(--nx-n1), 0 0 40px var(--nx-n1);
  animation: nx-banner 1.5s var(--nx-spring) both;
}
.nx-banner small { display: block; margin-top: 8px; font: 700 clamp(12px, 3.6vw, 18px)/1.25 var(--font-display, system-ui); letter-spacing: .02em; text-shadow: 0 0 6px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .8); }
.nx-banner.is-me { color: var(--nx-sur-tapis); }
.nx-banner.is-bad { color: var(--nx-sur-tapis); text-shadow: 0 0 6px #fff, 0 0 20px var(--nx-n2), 0 0 44px var(--nx-n2); }
.nx-banner.is-catch { color: var(--nx-sur-tapis); text-shadow: 0 0 6px #fff, 0 0 20px var(--nx-n4), 0 0 44px var(--nx-n2); }
.nx-banner.is-jump { color: var(--nx-sur-tapis); text-shadow: 0 0 6px #fff, 0 0 20px var(--nx-n3), 0 0 44px var(--nx-n3); }
.nx-banner.is-hot { color: var(--nx-sur-tapis); text-shadow: 0 0 6px #fff, 0 0 20px var(--nx-n4), 0 0 44px var(--nx-n3); }
.nx-banner.is-mask { color: var(--nx-sur-tapis); text-shadow: 0 0 6px #fff, 0 0 20px var(--accent-3), 0 0 44px var(--accent-3); }
.nx-banner.is-small { font-size: clamp(22px, 7vw, 40px); }
/* Texte en dégradé : la lueur est une nappe peinte derrière (::before), pas deux drop-shadow sur le calque animé */
.nx-banner.is-surge, .nx-banner.is-win { position: relative; isolation: isolate; background: linear-gradient(90deg, var(--nx-cryo), var(--nx-plasma), var(--nx-fusion), var(--nx-acide)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.nx-banner.is-surge::before, .nx-banner.is-win::before {
  content: ""; position: absolute; inset: -14% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--nx-n2) 42%, transparent), color-mix(in srgb, var(--nx-n1) 12%, transparent) 70%, transparent);
}
.nx-banner.is-surge small, .nx-banner.is-win small { color: var(--nx-sur-tapis); -webkit-text-fill-color: var(--nx-sur-tapis); }
.nx-banner.is-round { font-size: clamp(24px, 7vw, 48px); }
.nx-banner.is-start .nx-bn-logo { display: block; font-size: clamp(54px, 18vw, 120px); letter-spacing: .12em; text-shadow: 0 0 4px #fff, 0 0 18px var(--nx-n1), 0 0 44px var(--nx-n2); animation: nx-glitch-text 1.4s steps(1) both; }

/* ---------- Vols, effets, particules (calques fixes) ---------- */
/* Calques plein écran : contain: strict → ajouter ou retirer une carte en vol ne relance pas la mise en page de la Grille */
.nx-fly, .nx-fxl { position: fixed; inset: 0; pointer-events: none; overflow: hidden; contain: strict; }
.nx-fly { z-index: 45; }
.nx-fxl { z-index: 46; }
.nx-canvas { position: fixed; inset: 0; z-index: 44; width: 100vw; height: 100vh; pointer-events: none; }
.nx-flash { position: fixed; inset: 0; z-index: 47; display: block; opacity: 0; pointer-events: none; }
/* Cartes en vol : aucune filter ; position fixe par transform (le vol anime l'enfant .nx-fly-in) */
.nx-flyer { position: fixed; left: 0; top: 0; z-index: 1; perspective: 700px; contain: layout style; }
.nx-fly-in { width: 100%; height: 100%; }
.nx-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.nx-flip-f, .nx-flip-b { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.nx-flip-b { transform: rotateY(180deg); }
.nx-flipper .nx-card { --cw: inherit; }
.nx-ghost { z-index: 3; will-change: transform; }
.nx-ghost .nx-card { box-shadow: 0 0 0 2px var(--accent, #22F2FF), 0 0 14px var(--accent, #22F2FF), 0 16px 22px rgba(0, 0, 0, .65); }

.nx-fx { position: absolute; left: 0; top: 0; display: block; translate: -50% -50%; pointer-events: none; }
.nx-fx-ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--c1); box-shadow: 0 0 16px var(--c1), inset 0 0 12px var(--c1); animation: nx-ring var(--d, .7s) ease-out var(--delay, 0s) both; }
.nx-fx-swirl {
  width: 240px; height: 240px; 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, transparent 32%, #000 34%, #000 58%, transparent 62%); mask: radial-gradient(circle, transparent 32%, #000 34%, #000 58%, transparent 62%);
  animation: nx-swirl var(--d, .7s) ease-out both;
}
.nx-fx-swirl.is-ccw { animation-name: nx-swirl-ccw; }
.nx-fx-prism {
  width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(var(--nx-cryo), var(--nx-plasma), var(--nx-fusion), var(--nx-acide), var(--nx-cryo));
  -webkit-mask: radial-gradient(circle, #000 38%, transparent 70%); mask: radial-gradient(circle, #000 38%, transparent 70%);
  animation: nx-prism var(--d, .8s) ease-out both;
}
.nx-fx-shock { width: 100px; height: 100px; background: var(--c1); clip-path: path(evenodd, "M50 0 L100 25 L100 75 L50 100 L0 75 L0 25 Z M50 7 L94 28.5 L94 71.5 L50 93 L6 71.5 L6 28.5 Z"); animation: nx-shock var(--d, .8s) ease-out both; }
.nx-fx-vortex {
  width: 200px; height: 200px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--c1) 0 10deg, transparent 10deg 24deg, var(--c2) 24deg 30deg, transparent 30deg 45deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: nx-vortex var(--d, .9s) ease-in-out both;
}
.nx-fx-vortex.is-ccw { animation-name: nx-vortex-ccw; }
.nx-fx-nova {
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff 0 11%, var(--c1) 16%, color-mix(in srgb, var(--c1) 55%, var(--c2)) 30%, color-mix(in srgb, var(--c2) 45%, transparent) 52%, transparent 100%);
  animation: nx-nova var(--d, 1s) ease-out both;
}
.nx-fx-alarm {
  width: 140px; height: 140px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--c1) 0 22%, transparent 22% 50%, var(--c2) 50% 72%, transparent 72%);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 32%, #000 52%, transparent 70%); mask: radial-gradient(circle, transparent 30%, #000 32%, #000 52%, transparent 70%);
  animation: nx-alarm var(--d, .9s) linear both;
}
/* Fonte du cœur : disque déjà peint, seules l'échelle et l'opacité bougent */
.nx-fx-melt {
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff 0 8%, var(--ok) 14%, color-mix(in srgb, var(--nx-n3) 70%, transparent) 32%, color-mix(in srgb, var(--nx-n4) 45%, transparent) 55%, transparent 100%);
  animation: nx-nova 1.1s ease-out both;
}
/* Bouclier : anneau hexagonal qui se referme sur le siège */
.nx-fx-shield { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--nx-n1); box-shadow: 0 0 18px var(--nx-n1), inset 0 0 14px var(--nx-n1); animation: nx-shield-in .6s var(--nx-spring) both; }
.nx-bolt { position: absolute; overflow: visible; pointer-events: none; }
.nx-bolt path {
  fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: nx-bolt .75s ease-out both;
}
.nx-bolt path.g1 { stroke-width: 9; stroke-opacity: .3; }
.nx-bolt path.g2 { stroke-width: 18; stroke-opacity: .12; }
.nx-cry { position: absolute; display: flex; translate: -50% -110%; white-space: nowrap; font: 900 clamp(22px, 7vw, 34px)/1 var(--font-hud, system-ui); letter-spacing: .02em; }
.nx-cry span { color: var(--c); opacity: 0; text-shadow: 0 0 4px #fff, 0 0 12px var(--c), 0 0 24px var(--c); animation: nx-cry-l 1.35s ease-out calc(var(--i) * 70ms) both; }
.nx-float { position: absolute; translate: -50% -50%; white-space: nowrap; font: 900 22px/1 var(--font-hud, system-ui); color: var(--nx-sur-tapis); text-shadow: 0 0 6px #fff, 0 0 14px var(--accent); animation: nx-float 1.3s ease-out both; }
.nx-float.is-bad { color: var(--nx-sur-tapis); text-shadow: 0 0 6px #fff, 0 0 16px var(--nx-n2), 0 0 28px var(--nx-n2); }
.nx-float.is-good { color: var(--nx-sur-tapis); text-shadow: 0 0 6px #fff, 0 0 16px var(--nx-n1); }
.nx-float.is-skip { font: 800 13px/1 var(--font-display); color: var(--nx-sur-tapis); text-shadow: 0 0 10px var(--nx-n2); }
.nx-float.is-stack { font-size: 34px; color: var(--nx-sur-tapis); text-shadow: 0 0 8px #fff, 0 0 18px var(--nx-n4), 0 0 32px var(--nx-n2); }
.nx-float.is-drop { font-size: 28px; color: var(--nx-sur-tapis); text-shadow: 0 0 8px #fff, 0 0 18px var(--nx-n2); }
.nx-stamp {
  position: absolute; left: 50%; top: 22%; z-index: 6; translate: -50% -50%; pointer-events: none; font-style: normal;
  font: 900 30px/1 var(--font-hud, system-ui); color: var(--nx-n2); text-shadow: 0 0 10px var(--nx-n2), 0 0 22px var(--nx-n2); animation: nx-stamp 1.2s var(--nx-spring) both;
}
.nx-stamp.is-time { color: var(--nx-n4); text-shadow: 0 0 10px var(--nx-n4); }
.nx-stamp.is-good { color: var(--nx-n1); text-shadow: 0 0 10px var(--nx-n1); }
.nx-stamp.is-mask { color: var(--accent-3); text-shadow: 0 0 10px var(--accent-3); }
.nx-table.nx-glitching { animation: nx-glitch .1s steps(2) 6; }

/* Stress positif : dernières secondes de MA décision (lueur peinte derrière la main) */
.nx-me::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--cw-hand) * 1.4 + 90px); z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 70% at 50% 100%, color-mix(in srgb, var(--nx-n2) 26%, transparent), transparent 75%);
  transition: opacity .3s;
}
.nx-root.is-hot .nx-me::after { opacity: 1; }

/* ---------- Téléphone en paysage / très petits écrans : tout plus compact ---------- */
@media (max-height: 520px) and (max-width: 899px) {
  .nx-top { height: 36px; }
  .nx-ib { width: 32px; height: 32px; font-size: 15px; }
  .nx-seat { width: 15%; }
  .nx-root[data-n] .nx-seat-btn { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av info"; align-items: center; justify-items: start; column-gap: 4px; }
  .nx-root[data-n] .nx-av { grid-area: av; --av: 26px; }
  .nx-root[data-n] .nx-sinfo { grid-area: info; align-items: flex-start; }
  .nx-root[data-n] .nx-mini, .nx-root[data-n] .nx-stoks, .nx-root[data-n] .nx-tbar { display: none; }
  .nx-root[data-n] .nx-count { font-size: 16px; }
  .nx-root[data-n] .nx-badge { left: 0; top: 18px; translate: none; font-size: 7px; padding: 1px 3px; }
  .nx-root[data-n] .nx-seats { --seats-h: 40px; }
  .nx-meline { height: 24px; }
  .nx-hand { height: calc(var(--cw-hand) * 1.4 + 18px); }
  .nx-bar { height: 44px; }
  .nx-neon-btn, .nx-main, .nx-alt, .nx-auto { min-height: 44px; }
  .nx-deckline.has-line { height: 26px; }
  .nx-hint { height: 22px; font-size: 12px; }
  .nx-hint-t { -webkit-line-clamp: 1; }

  /* QA (812 × 375) : rien ne chevauche le Noyau, les panneaux tiennent sans défilement.
     7 adversaires sur UNE rangée (sinon le 7e tombait sur le Noyau) ; siège court (la rangée fait 40 px) ;
     Bouclier et prime restent visibles (puces en haut à droite du siège). */
  .nx-root[data-n] .nx-seat { max-width: min(116px, 13.6%); }
  .nx-root[data-n] .nx-cards { height: 18px; }
  .nx-root[data-n] .nx-stoks { display: flex; position: absolute; right: 1px; top: 0; gap: 2px; min-height: 0; }
  .nx-root[data-n] .nx-stoks > i { padding: 1px 3px; font-size: 9px; }
  .nx-root[data-n] .nx-stoks > :is(.nx-chip-memo, .nx-chip-ready, .nx-chip-score) { display: none; }
  /* Ligne du paquet et consigne côte à côte : la zone du Noyau gagne une ligne */
  .nx-table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .nx-seats, .nx-stage { grid-column: 1 / -1; }
  .nx-deckline { grid-column: 1; grid-row: 3; justify-content: flex-start; padding-left: 10px; } /* à gauche : jamais sous le compteur du Flux */
  .nx-hint { grid-column: 2; grid-row: 3; justify-content: center; }
  .nx-deckline:not(.has-line) { display: none; }
  .nx-deckline:not(.has-line) + .nx-hint { grid-column: 1 / -1; }
  /* Le dessus du Noyau tient dans sa zone (hauteur de la carte = 1,4 × largeur) ; pastille de couleur à sa droite */
  .nx-center { --cw-core: clamp(56px, min(29cqw, 70cqh), 150px); }
  .nx-ring { width: calc(var(--cw-core) * 1.8); }
  .nx-colring { width: calc(var(--cw-core) * 1.62); }
  .nx-core-chip { left: calc(100% + 12px); top: auto; bottom: 0; translate: none; }
  /* Compteur du Flux posé sur le bas de la pile (dessous, il passait sous la consigne) */
  .nx-flux-n { top: auto; bottom: 3px; z-index: 2; }
  /* Alertes hors tour (contre-signal, démasquer…) : à gauche de la Grille, jamais sur le Noyau ni sur le Flux */
  .nx-alert { left: 8px; bottom: 30px; translate: none; max-width: min(300px, calc(50% - var(--cw-core) * 1.3 - 46px)); }
  .nx-alert-btn { padding: 7px 12px 6px; }
  /* Panneaux (couleur, cible, Masque, fin de manche) : au-dessus de la main, le gros bouton « Annuler » reste visible ;
     contenus compacts pour tenir dans la hauteur */
  .nx-root.has-panel .nx-table { z-index: 5; }
  .nx-panel { bottom: calc(-1 * (var(--cw-hand) * 1.4 + 18px + 24px)); padding: 6px 8px; }
  .nx-pcard { width: min(100%, 780px); padding: 9px 12px 10px; }
  .nx-panel.is-wide .nx-pcard { width: min(100%, 780px); }
  .nx-phead { gap: 10px; }
  .nx-pick-card { --cw: 32px; }
  .nx-ptitle { font-size: 17px; }
  .nx-ptitle small { margin-top: 2px; }
  .nx-psub { margin-top: 2px; font-size: 12px; line-height: 1.25; }
  .nx-colors { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .nx-color { padding: 7px 6px 6px; gap: 2px; }
  .nx-color-g { font-size: 24px; }
  .nx-targets { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; margin-top: 8px; }
  .nx-target { grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 8px; padding: 5px 8px; }
  .nx-target-av { width: 30px; }
  .nx-neon-mini { margin-top: 6px; padding: 5px 10px; }
  .nx-steps { margin-top: 3px; }
  .nx-hidepick { margin-top: 6px; }
  .nx-hidepick .nx-card { --cw: 36px; }
  .nx-decl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 6px; }
  .nx-decl-row { grid-template-columns: 18px repeat(10, minmax(0, 1fr)); gap: 2px; }
  .nx-dcell { height: 26px; font-size: 12.5px; }
  .nx-truth { margin-top: 4px; }
  .nx-pacts { margin-top: 6px; }
  .nx-pacts .btn { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
  .nx-rlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; margin-top: 6px; }
  .nx-rrow { padding: 4px 6px; }
  .nx-mini-face { --cw: 20px; }
  .nx-contra, .nx-rnext { margin-top: 6px; }
}

/* ---------- Images clés ---------- */
@keyframes nx-floor { to { transform: translateY(56px); } }
@keyframes nx-drift { to { transform: translateY(220px); } }
@keyframes nx-twinkle { 50% { opacity: .2; } }
@keyframes nx-signs { 0%, 100% { opacity: .9; } 40% { opacity: 1; } 41% { opacity: .55; } 43% { opacity: 1; } }
@keyframes nx-rain { to { transform: translate(-14px, 60px); } }
@keyframes nx-beat { 50% { transform: scale(1.04); opacity: .8; } }
@keyframes nx-nebula { to { transform: translate(4%, -3%) scale(1.08) rotate(6deg); } }
@keyframes nx-hot { from { opacity: .45; } to { opacity: 1; } }
@keyframes nx-ring-flip { 0% { rotate: 0deg; opacity: .8; } 50% { scale: 1.12; opacity: 1; } 100% { rotate: 180deg; } }
@keyframes nx-breathe { 50% { opacity: .72; transform: scale(.94); } }
@keyframes nx-recolor { 0% { transform: scale(.7); opacity: .2; } 100% { transform: scale(1); } }
/* Pose (Lot 8) : le vol a déjà couché la carte à sa place ; elle se tasse à peine sur le feutre (plus de « saut » à 116 %) */
@keyframes nx-hit { 0% { scale: 1.025; } 45% { scale: .985; } 100% { scale: 1; } }
@keyframes nx-glow { to { opacity: 1; } }
@keyframes nx-blink { 50% { opacity: .45; } }
@keyframes nx-bob { 50% { translate: -50% -3px; } }
@keyframes nx-bump { 40% { transform: scale(1.35); } }
@keyframes nx-alarm-frame { 50% { opacity: 1; } }
@keyframes nx-arm { 40% { transform: scale(1.16); } }
@keyframes nx-card-in { from { opacity: 0; translate: 0 30px; scale: .75; } }
@keyframes nx-nope { 20% { rotate: -5deg; } 40% { rotate: 4deg; } 60% { rotate: -2.5deg; } 80% { rotate: 1deg; } }
@keyframes nx-alert-in { from { opacity: 0; scale: .6; } }
@keyframes nx-fade { from { opacity: 0; } }
@keyframes nx-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes nx-banner { 0% { opacity: 0; transform: scale(.5); } 18% { opacity: 1; transform: scale(1.08); } 30% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes nx-glitch-text { 0% { opacity: 0; } 8% { opacity: 1; transform: translateX(-6px); } 12% { transform: translateX(5px) skewX(-6deg); opacity: .8; } 16% { transform: none; opacity: 1; } 60% { transform: none; } 62% { transform: translateX(3px) skewX(8deg); } 64% { transform: none; } }
@keyframes nx-foil { to { transform: translate(-56.5%, -56.5%); } }
@keyframes nx-reflect { 0%, 30% { transform: translateX(-80%); } 70%, 100% { transform: translateX(18.5%); } }
@keyframes nx-ring { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(7); } }
@keyframes nx-swirl { from { opacity: .95; transform: rotate(0) scale(.45); } to { opacity: 0; transform: rotate(540deg) scale(1.25); } }
@keyframes nx-swirl-ccw { from { opacity: .95; transform: rotate(0) scale(.45); } to { opacity: 0; transform: rotate(-540deg) scale(1.25); } }
@keyframes nx-prism { from { opacity: .95; transform: scale(.2) rotate(0); } to { opacity: 0; transform: scale(1.7) rotate(200deg); } }
@keyframes nx-shock { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(6); } }
@keyframes nx-vortex { 0% { opacity: 0; transform: rotate(0) scale(1.5); } 30% { opacity: 1; } 60% { transform: rotate(540deg) scale(.15); opacity: 1; } 100% { opacity: 0; transform: rotate(720deg) scale(1.3); } }
@keyframes nx-vortex-ccw { 0% { opacity: 0; transform: rotate(0) scale(1.5); } 30% { opacity: 1; } 60% { transform: rotate(-540deg) scale(.15); opacity: 1; } 100% { opacity: 0; transform: rotate(-720deg) scale(1.3); } }
@keyframes nx-nova { 0% { opacity: .9; transform: scale(1.4); } 30% { opacity: 1; transform: scale(.2); } 45% { opacity: 1; transform: scale(1.6); } 100% { opacity: 0; transform: scale(6); } }
@keyframes nx-alarm { 0% { opacity: 0; transform: rotate(0) scale(.6); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(900deg) scale(1.1); } }
@keyframes nx-shield-in { 0% { opacity: 0; transform: scale(2.2); } 60% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1); } }
@keyframes nx-melt-pill { 50% { opacity: .4; } }
@keyframes nx-bolt { 0% { stroke-dashoffset: 1600; opacity: 1; } 40% { stroke-dashoffset: 0; opacity: 1; } 55% { opacity: .4; } 65% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes nx-cry-l { 0% { opacity: 0; transform: translateY(12px) scale(.5); } 14% { opacity: 1; transform: translateY(0) scale(1.25); } 26% { transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes nx-float { 0% { opacity: 0; transform: translateY(8px) scale(.5); } 18% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }
@keyframes nx-stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-14deg); } 22% { opacity: 1; transform: scale(1) rotate(-8deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1) rotate(-8deg); } }
@keyframes nx-glitch { 0% { transform: translate(-4px, 1px) skewX(1.5deg); } 100% { transform: translate(4px, -1px) skewX(-1.5deg); } }

/* ---------- Appareil modeste : html.perf-lite (voir docs/fluidite.md, docs/neon-v2.md §6.5) ----------
   On coupe le décor qui boucle, les lueurs pulsées, la secousse et les particules ; tout ce qui porte une
   information reste (vols de cartes, retournements, compteurs, comptes à rebours, bandeaux). */
.perf-lite #screen-neon .nx-bg-amb, .perf-lite #screen-neon .nx-bg-amb2, .perf-lite #screen-neon .nx-bg-floor::before,
.perf-lite #screen-neon .nx-halo, .perf-lite #screen-neon .nx-face::after, .perf-lite #screen-neon .nx-turn-dot { animation: none; }
.perf-lite #screen-neon .nx-flux.can-draw::before, .perf-lite #screen-neon .nx-pend::after, .perf-lite #screen-neon .nx-seat.is-catchable .nx-seat-btn::after,
.perf-lite #screen-neon .nx-root.is-targeting .nx-seat-btn::after, .perf-lite #screen-neon .nx-neon-btn::after, .perf-lite #screen-neon .nx-alert-btn::after,
.perf-lite #screen-neon .nx-hc.is-drawn.is-playable .nx-card::before, .perf-lite #screen-neon .nx-hc.is-jump .nx-card::before, .perf-lite #screen-neon .nx-root.is-hot .nx-bg-vig::after { animation: none; }
.perf-lite #screen-neon .nx-flux.can-draw::before, .perf-lite #screen-neon .nx-pend::after, .perf-lite #screen-neon .nx-seat.is-catchable .nx-seat-btn::after,
.perf-lite #screen-neon .nx-root.is-targeting .nx-seat-btn::after, .perf-lite #screen-neon .nx-neon-btn[data-state="ready"]::after, .perf-lite #screen-neon .nx-neon-btn[data-state="late"]::after,
.perf-lite #screen-neon .nx-alert-btn::after, .perf-lite #screen-neon .nx-hc.is-drawn.is-playable .nx-card::before, .perf-lite #screen-neon .nx-hc.is-jump .nx-card::before { opacity: .8; }
.perf-lite #screen-neon .nx-ov--foil .nx-face::after { mix-blend-mode: normal; opacity: calc(var(--nx-ov, .3) * .45); }
.perf-lite #screen-neon .nx-card { box-shadow: 0 0 0 1px rgba(8, 8, 16, .55), 0 4px 10px rgba(0, 0, 0, .45); }
.perf-lite #screen-neon .nx-hc.is-playable .nx-card { box-shadow: 0 0 0 2.5px var(--accent, #FFC233), 0 8px 14px -6px rgba(0, 0, 0, .6); }
.perf-lite #screen-neon .nx-hc.is-jump .nx-card { box-shadow: 0 0 0 2px var(--nx-n3), 0 0 10px var(--nx-n3), 0 6px 12px rgba(0, 0, 0, .5); }
.perf-lite #screen-neon .nx-pc.is-top .nx-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--m) 50%, transparent), 0 0 14px color-mix(in srgb, var(--m) 55%, transparent), 0 8px 16px rgba(0, 0, 0, .5); }
.perf-lite #screen-neon .nx-val { text-shadow: none; }
.perf-lite #screen-neon .nx-banner { text-shadow: 0 0 6px #fff, 0 0 16px var(--nx-n1); }
.perf-lite #screen-neon .nx-banner.is-bad { text-shadow: 0 0 6px #fff, 0 0 16px var(--nx-n2); }
.perf-lite #screen-neon .nx-banner.is-catch, .perf-lite #screen-neon .nx-banner.is-jump, .perf-lite #screen-neon .nx-banner.is-hot { text-shadow: 0 0 6px #fff, 0 0 16px var(--nx-n4); }
.perf-lite #screen-neon .nx-banner.is-mask { text-shadow: 0 0 6px #fff, 0 0 16px var(--accent-3); }
.perf-lite #screen-neon .nx-banner.is-surge, .perf-lite #screen-neon .nx-banner.is-win { text-shadow: none; }
.perf-lite #screen-neon .nx-banner.is-start .nx-bn-logo { text-shadow: 0 0 4px #fff, 0 0 18px var(--nx-n1), 0 0 30px var(--nx-n2); }
.perf-lite #screen-neon .nx-cry span { text-shadow: 0 0 4px #fff, 0 0 12px var(--c); }

/* Mises à jour internes (compteurs, badges, pile, puces) sans recalcul de toute la page */
.nx-seat, .nx-pend, .nx-core-chip { contain: layout style; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  #screen-neon *, #screen-neon *::before, #screen-neon *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .nx-halo, .nx-bg-amb, .nx-bg-amb2, .nx-bg-floor, .nx-bg-floor::before { animation: none !important; }
  .nx-fly, .nx-fxl, .nx-canvas { display: none; }
  .nx-banner { animation: nx-fade .01ms both !important; }
  /* Lueurs qui pulsent : affichées fixes */
  .nx-flux.can-draw::before, .nx-pend::after, .nx-seat.is-catchable .nx-seat-btn::after, .nx-neon-btn[data-state="ready"]::after,
  .nx-alert-btn::after, .nx-hc.is-drawn.is-playable .nx-card::before, .nx-hc.is-jump .nx-card::before, .nx-root.is-hot .nx-bg-vig::after { animation: none !important; opacity: .75; }
  /* Comptes à rebours : une information, pas un décor → ils continuent de s'écouler */
  #screen-neon .nx-cd i, #screen-neon .nx-tbar i { transition: transform var(--cd-ms, 0ms) linear var(--cd-del, 0ms) !important; }
}

/* ---------- Charte « Soirée jeux » (docs/theme-soiree-jeux.md §5) : vrais objets sur un tapis ----------
   Plus de halos néon : ombres simples, aucun décor animé sur le tapis par défaut (le thème « Espace » garde le sien). */
#screen-neon .nx-halo { display: none; }
#screen-neon .nx-ctr--neon .nx-halo, #screen-neon .nx-root.nx-espace .nx-halo { display: block; }
#screen-neon .nx-colring { opacity: 1; }
#screen-neon .nx-root:not(.nx-espace) :is(.nx-banner, .nx-float, .nx-stamp, .nx-bn-logo) { text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .45) !important; }
#screen-neon .nx-logo { font: 600 17px/1 var(--font-display); letter-spacing: 0; color: var(--text); text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Barre du haut = cadre commun (.cj-haut) : nom du jeu, « ? Règles en 30 s », emplacement vocal, son */
.nx-info { overflow: hidden; }
#screen-neon .nx-logo { display: block; flex: 0 1 auto; min-width: 0; }
.nx-top .cj-regles { flex: none; }
.nx-top .voice-slot { display: contents; }
@media (max-width: 420px) {
  .nx-info-txt { display: none; }
  .nx-top .cj-regles .nx-30 { display: none; }
  .nx-top .cj-regles { padding-right: 10px; }
}
.nx-hc.is-drawn .nx-fdot { display: none; } /* l'étiquette « Piochée » suffit */
/* Effets « vrais objets » (neon.fx.standard, charte §5.9) : la défausse se tasse puis rebondit ; bulle de papier */
.nx-core.nx-fx-pose { animation: nx-pose var(--d-lent, .45s) var(--ease-out, ease-out); }
@keyframes nx-pose { 0% { scale: 1; } 35% { scale: .95; } 70% { scale: 1.03; } 100% { scale: 1; } }
.nx-fx-bulle {
  margin-top: -46px; padding: 7px 12px 8px; white-space: nowrap; border-radius: 14px 14px 14px 4px;
  font: 600 15px/1 var(--font-display); color: var(--encre); background: var(--papier); box-shadow: var(--ombre-2);
  animation: nx-bulle var(--d, 1.2s) var(--ease-out, ease-out) both;
}
@keyframes nx-bulle { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }