.g-plinko .pk-wrap { display: grid; grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); gap: 16px; height: 100%; padding: 16px; box-sizing: border-box; }
.g-plinko .pk-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.g-plinko .pk-lbl { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; }
.g-plinko .pk-rowsval { color: var(--neon-pink); font-size: 13px; margin-left: 4px; }
.g-plinko .pk-seg { display: flex; }
.g-plinko .pk-seg > button { flex: 1; }
.g-plinko .pk-seg.is-locked { opacity: .55; pointer-events: none; }
.g-plinko .pk-range { width: 100%; accent-color: var(--neon-pink); background: transparent; }
.g-plinko .pk-range:disabled { opacity: .5; }
/* Firefox dessine la réglette en thème clair (piste blanche, curseur gris cerclé de blanc) : même allure que Chrome/Edge,
   piste sombre, partie remplie et curseur rose. Règles propres à Firefox, ignorées ailleurs. */
.g-plinko .pk-range::-moz-range-track { height: 8px; border-radius: 999px; background: #3a3a3f; border: 1.5px solid rgba(255,255,255,.4); box-sizing: border-box; }
.g-plinko .pk-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--neon-pink); }
.g-plinko .pk-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--neon-pink); border: 0; box-shadow: 0 0 8px rgba(255,79,216,.45); }
.g-plinko .pk-main { width: 100%; font-family: var(--font-num); box-shadow: 0 0 22px rgba(255,79,216,.25); }
.g-plinko .pk-autorow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-plinko .pk-msg { font-size: 13px; color: var(--text-dim); min-height: 18px; }
.g-plinko .pk-msg.win { color: var(--win); } .g-plinko .pk-msg.lose { color: var(--lose); }
.g-plinko .pk-keys { font-size: 12px; margin: 0; }
.g-plinko .pk-keysrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-plinko .pk-bvue { padding: 4px 9px; }
.g-plinko .pk-board { position: relative; min-height: 0; border-radius: var(--radius); border: 1px solid var(--line-strong); background: radial-gradient(ellipse at 50% 0%, rgba(255,79,216,.14), rgba(0,0,0,0) 55%), radial-gradient(ellipse at 50% 100%, rgba(59,232,255,.10), rgba(0,0,0,0) 60%), var(--bg-1); box-shadow: var(--shadow-2); overflow: hidden; }
/* la planche (vue 3D ou 2D) : la place de l'ancienne toile, sous les bandeaux de la table */
.g-plinko .pk-vue { position: absolute; inset: 0 70px 0 0; z-index: 0; }
.g-plinko .pk-vue .trois-couche.trois-3d, .g-plinko .pk-vue .trois-3d .trois-canvas { border-radius: var(--radius) 0 0 var(--radius); }
.g-plinko .pk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 3D : les multiplicateurs des potes au-dessus des godets (position et opacité posées à chaque image, fonctions du temps) */
.g-plinko .pk-t3d-boite { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.g-plinko .pk-t3d { position: absolute; left: 0; top: 0; font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 0; text-shadow: 0 0 10px currentColor, 0 1px 3px rgba(0,0,0,.8); will-change: transform, opacity; }
.g-plinko .pk-histwrap { position: absolute; top: 12px; right: 10px; bottom: 12px; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.g-plinko .pk-hist { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.g-plinko .pk-h { display: block; text-align: center; font-size: 12px; padding: 3px 0; border: 1px solid; border-radius: 8px; background: rgba(5,6,11,.6); }
.g-plinko .pk-h.is-new { animation: pk-in .35s ease-out; }
@keyframes pk-in { 0% { transform: translateY(-8px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 1100px) { .g-plinko .pk-wrap { grid-template-columns: 240px minmax(0, 1fr); } }

/* ---- en ligne : qui est à la table, gros coups des potes ---- */
.g-plinko .pk-who { position: absolute; top: 12px; left: 14px; right: 80px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); pointer-events: none; z-index: 2; }
.g-plinko .pk-who-l { letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.g-plinko .pk-who-p { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); background: rgba(5,6,11,.6); color: var(--text); }
.g-plinko .pk-who-p b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 30%, #05060b); font-weight: 400; box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 60%, transparent); }
.g-plinko .pk-feed { position: absolute; top: 46px; left: calc(50% - 35px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 3; }
.g-plinko .pk-feed-i { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--pc); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 22%, rgba(5,6,11,.92)), rgba(5,6,11,.92)); box-shadow: 0 0 26px color-mix(in srgb, var(--pc) 40%, transparent); font-size: 13px; color: var(--text); white-space: nowrap; animation: pk-feed-in .45s cubic-bezier(.2,.9,.3,1.3); transition: opacity .5s, transform .5s; }
.g-plinko .pk-feed-i b { color: var(--pc); }
.g-plinko .pk-feed-i .pk-feed-m { color: var(--gold-hi); font-weight: 700; }
.g-plinko .pk-feed-i .pk-feed-pay { color: var(--win); }
.g-plinko .pk-feed-i.is-out { opacity: 0; transform: translateY(-8px); }
@keyframes pk-feed-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: none; } }
.g-plinko .pk-wrap.is-offline .pk-board { filter: saturate(.4) brightness(.8); }
.g-plinko .pk-who-p small { margin-left: 2px; font-size: 10px; color: var(--text-dim); font-family: var(--font-num); }
.g-plinko .pk-who-p.is-other { opacity: .6; border-style: dashed; }
/* TÉLÉPHONE — N1c (revue au téléphone du 13/10, n° 22) : la réglette des potes flottante couvrait « Derniers » et le haut de la colonne
   de l'historique (en haut à droite du plateau) ; la colonne commence sous sa voie. Bornée au téléphone : le PC ne change pas. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  body:has(.so-dock.is-float) .g-plinko .pk-histwrap { top: calc(var(--so-float-h, 58px) - 4px); }
}
/* TÉLÉPHONE — N3 (vu par l'orchestrateur le 13/10 à 12:1x) : en portrait, les deux colonnes restaient (240 px de commandes) et la planche
   tombait dans une bande de 72 à 102 px : ni les clous ni la bille ; couché, « Lâcher » s'écrasait à 18 px sous le bas de l'écran.
   Dans le panneau, au téléphone : « Lâcher » suit le nom et le solde, avant la mise et les réglages (jouer d'un même pouce, sans défiler) ;
   les touches du clavier ne s'affichent pas au doigt. En PORTRAIT : une colonne — la planche à toute la largeur EN HAUT, qui ne défile
   jamais (les derniers coups en rangée au-dessus d'elle), le panneau dessous, qui défile seul ; le nom et le solde sur une rangée. En
   PAYSAGE : les deux colonnes restent ; le panneau défile au lieu d'écraser ses boutons. Règles bornées au téléphone (portrait ≤ 480 px
   de large, paysage ≤ 560 px de haut) : le PC ne change pas (s5-tel-colonnes.mjs, D et D2). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-plinko .pk-side { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; }
  .g-plinko .pk-side > * { grid-column: 1 / -1; min-width: 0; order: 2; }
  .g-plinko .pk-side > .panel-title, .g-plinko .pk-side > .pk-tag { order: 0; }
  .g-plinko .pk-side > .panel-title { margin: 0; }
  .g-plinko .pk-side > .pk-main { order: 1; }
  .g-plinko .pk-keys { display: none; }
}
@media (orientation: portrait) and (max-width: 480px) {
  .g-plinko .pk-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 8px 10px 10px; }
  /* la réglette flottante garde sa voie au-dessus du jeu (rien ne passe dessous) */
  body:has(.so-dock.is-float) .g-plinko .pk-wrap { margin-top: calc(var(--so-float-h, 58px) - 6px); height: calc(100% - var(--so-float-h, 58px) + 6px); }
  .g-plinko .pk-board { order: -1; height: clamp(300px, 50vh, 430px); }
  .g-plinko .pk-vue { inset: 34px 0 0 0; }
  .g-plinko .pk-vue .trois-couche.trois-3d, .g-plinko .pk-vue .trois-3d .trois-canvas { border-radius: 0 0 var(--radius) var(--radius); }
  body:has(.so-dock.is-float) .g-plinko .pk-histwrap, .g-plinko .pk-histwrap { top: 6px; right: 10px; bottom: auto; left: 10px; width: auto; height: 24px; flex-direction: row; gap: 8px; }
  .g-plinko .pk-hist { flex: 1; flex-direction: row; gap: 5px; min-width: 0; overflow: hidden; }
  .g-plinko .pk-h { flex: none; padding: 3px 8px; }
  .g-plinko .pk-who { top: 40px; left: 10px; right: 120px; }
  .g-plinko .pk-feed { top: 40px; left: 50%; }
  /* le nom et le solde au bout du titre, sur sa rangée (le filet du titre passe dessous) */
  .g-plinko .pk-side { overflow-y: auto; overscroll-behavior: contain; }
  .g-plinko .pk-side > .panel-title { grid-row: 1; min-height: 32px; }
  .g-plinko .pk-side > .pk-tag { grid-row: 1; justify-self: end; align-self: center; max-width: 64%; overflow: hidden; }
  /* N4 (c) : un nom long (18 caractères) se coupe avec « … » ; l'avatar et le solde (7 chiffres) restent entiers */
  .g-plinko .pk-side > .pk-tag > .ptag { max-width: 100%; }
  .g-plinko .pk-side > .pk-tag .ptag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .g-plinko .pk-side > .pk-tag :is(.ptag-emoji, .ptag-bal) { flex: none; }
}
/* TÉLÉPHONE — N10a (restes « après N4 » de N5 : les petites cibles du Plinko ; règle de l'orchestrateur, 13/10 15:5x : au doigt, toute
   cible a 32 px au moins sur son petit côté). La règle commune de N5 (css/base.css) exclut ce jeu : il se règle ici. On agrandit la zone
   de toucher, on ne redessine pas :
   - ½ ×2 MAX de la mise (.btn-sm, 30 px de haut) : 32 px ;
   - le curseur des rangées (16 px de haut) : sa boîte passe à 32 px ; la piste fine et le curseur rose restent au milieu, tels quels
     (le navigateur les centre dans la boîte).
   Bornées au téléphone comme le reste du fichier : le PC ne change pas (dev/tests-client/s5-tel-cibles-jeux.mjs, D et D2). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-plinko .btn-sm { min-height: 32px; }
  .g-plinko .pk-range { height: 32px; margin: 0; }
}
/* TÉLÉPHONE — N11 (annexe A de la revue au téléphone, REMESURÉE sur 1bedc6a) : « Mise », « Risque », « Rangées », « Derniers » (11 px) : 12 px. Mêmes polices, même interlettrage,
   même couleur ; on agrandit le texte, on ne redessine pas. Bornée au téléphone : le PC ne change pas (dev/tests-client/s5-tel-textes.mjs, D et D2). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-plinko .pk-lbl { font-size: 12px; }
}
/* TÉLÉPHONE — N19 (vérification finale de 08cd52a, s5-tel-colonnes.mjs, J) : à 360 × 640 et 375 × 667, dans la vue 2D (le repli d'un téléphone
   lent, ou le choix du joueur), les cases des 12 rangées étaient à 16 et 17 px l'une de l'autre, sous les 18 px de l'épreuve (la 3D : 18,6 et
   19,5). La 2D (games/plinko-2d.js, layout) tient son pas dans la hauteur de sa toile, (hauteur - 70) / 13,4 à 12 rangées, et la planche à 50vh
   ne lui laissait que 284 px à 640 de haut. Aux petits téléphones, la planche prend 352 px (un pas de 18,4 px en 2D), sans jamais pousser
   « Lâcher » hors de l'écran : au plus 100vh - 288 px (la planche commence à 124 px du haut, le bas de « Lâcher » est 121 px sous elle : 43 px
   de marge). Dès 704 px de haut, 50vh l'emporte : rien ne change ; sous 588 px, le plancher de 300 px reste. Bornée au téléphone en portrait :
   le PC ne change pas (s5-tel-colonnes.mjs, D et D2). */
@media (orientation: portrait) and (max-width: 480px) {
  .g-plinko .pk-board { height: clamp(300px, max(50vh, min(352px, 100vh - 288px)), 430px); }
}
/* TÉLÉPHONE — N27 (revue finale R2 rejouée sur 66bd6a8, N5 : « la plus ancienne valeur de l'historique rognée de 11 px à gauche ») : la
   mesure de la revue (mesures/plinko-fin-390x844.json) dit dx = −11 (11 px de MARGE à gauche, pas un rognage) et dy = 2, sur la valeur qui
   ARRIVE, prise pendant son entrée (pk-in : translateY(−8 px), échelle 0,8, d'où ses 9,7 px) : la rangée « Derniers » (overflow: hidden)
   en rognait le haut. Mesuré aussi (s5-r2-finitions.mjs) : debout, chaque pastille (25,4 px) dépassait la rangée (24 px) de 0,7 px en haut
   et en bas, et la dernière visible se coupait au bord droit dès que l'historique dépassait la largeur ; couché, la colonne passait sous
   le bas du plateau. Au téléphone : la pastille tient dans la rangée (interligne de 16 px) ; les pastilles qui ne tiennent pas EN ENTIER
   passent à une rangée (debout) ou à une colonne (couché) que la boîte cache tout entière ; la valeur qui arrive grandit sur place, sans
   glisser (échelle et opacité). CSS seulement (games/plinko-3d.js est à N26). Bornée au téléphone : le PC ne lit rien de ceci. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-plinko .pk-h { line-height: 16px; }
  .g-plinko .pk-h.is-new { animation-name: pk-in-tel; }
  @keyframes pk-in-tel { 0% { transform: scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
}
@media (orientation: portrait) and (max-width: 480px) {
  .g-plinko .pk-hist { flex-wrap: wrap; align-content: flex-start; height: 24px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .g-plinko .pk-hist { flex: 1 1 auto; min-height: 0; flex-wrap: wrap; align-content: flex-start; overflow: hidden; }
  .g-plinko .pk-h { width: 100%; box-sizing: border-box; }
}