/* MINUIT — la salle qui vit : réglette d'emotes (barre du haut), réactions qui traversent l'écran, bulles et comptoir,
   annonces des gros coups (fil discret dans un coin, grand bandeau des légendaires), tiroir « Potes », pluie de jetons des cadeaux.
   Tokens du contrat (§4, css/base.css).
   Couches : réglette, bulles, fil discret (945), bandeau, tiroir et comptoir (940-952) sous le voile réseau (960), l'écran d'entrée
   (1000), les modales (1100) et les toasts (1200) ; seules les réactions volantes (1160, jamais cliquables) passent au-dessus des
   modales et du podium. */
.so-root.is-off > * { display: none !important; }

/* ---------- la réglette (posée dans le vide central de la barre du haut) ---------- */
.so-dock { position: fixed; left: 50%; top: 11px; z-index: 940; display: flex; align-items: center; gap: 3px; height: 42px; padding: 0 7px;
  border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(10,13,24,.82), rgba(5,6,11,.9));
  box-shadow: inset 0 0 0 3px rgba(5,6,11,.9), inset 0 0 0 4px rgba(222,184,92,.13), 0 6px 18px rgba(0,0,0,.35);
  opacity: .86; transition: opacity .25s, border-color .25s, box-shadow .25s; }
.so-dock:hover, .so-dock:focus-within, .so-dock.show-pal { opacity: 1; border-color: var(--line-strong); box-shadow: inset 0 0 0 3px rgba(5,6,11,.9), inset 0 0 0 4px rgba(222,184,92,.22), 0 8px 26px rgba(0,0,0,.45), 0 0 22px rgba(222,184,92,.10); }
.so-root.is-wait .so-dock { opacity: .4; filter: grayscale(.6); }
.so-orn { width: 9px; height: 9px; flex: none; transform: rotate(45deg); border: 1px solid var(--gold-lo); background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo)); opacity: .7; margin: 0 3px; }
.so-emos { display: flex; align-items: center; gap: 2px; padding: 0 4px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.so-emo { position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.4), background .2s, box-shadow .2s; }
.so-emo-g { font-size: 19px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); transition: transform .16s; }
.so-emo-k { position: absolute; right: 1px; bottom: 0; font-size: 8.5px; font-weight: 700; line-height: 1; color: var(--gold); opacity: 0; transition: opacity .2s; }
.so-dock:hover .so-emo-k, .so-dock:focus-within .so-emo-k { opacity: .75; }
.so-emo:hover { background: radial-gradient(circle, rgba(247,221,143,.2), rgba(222,184,92,.04) 70%); box-shadow: 0 0 0 1px var(--line-strong); transform: translateY(-2px); }
.so-emo:hover .so-emo-g { transform: scale(1.18); }
.so-emo:active .so-emo-g { transform: scale(.9); }
.so-emo.is-press .so-emo-g { animation: soPress .42s cubic-bezier(.2,.9,.3,1.5); }
@keyframes soPress { 0% { transform: scale(.7); } 55% { transform: scale(1.45) rotate(-8deg); } 100% { transform: none; } }
.so-dbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; min-width: 38px; padding: 0 9px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--text-dim); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.so-dbtn:hover, .so-dbtn.is-on { background: rgba(222,184,92,.10); border-color: var(--line-strong); color: var(--text); }
.so-dbtn.is-on { box-shadow: 0 0 14px rgba(222,184,92,.25) inset; }
.so-ico { font-size: 16px; line-height: 1; }
.so-count { font-size: 12px; font-weight: 700; color: var(--gold-hi); }
.so-badge { position: absolute; top: -4px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--neon-pink); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg-0), 0 0 12px rgba(255,79,216,.7); animation: soBadge 1.6s ease-in-out infinite; }
.so-badge[hidden] { display: none; }
@keyframes soBadge { 50% { box-shadow: 0 0 0 2px var(--bg-0), 0 0 20px rgba(255,79,216,.95); } }
.so-dock.is-tight { gap: 1px; padding: 0 4px; }
.so-dock.is-tight .so-orn { display: none; }
.so-dock.is-tight .so-emo { width: 30px; }
.so-dock.is-tight .so-dbtn { min-width: 34px; padding: 0 6px; }
.so-dock.is-tighter .so-emos { padding: 0 2px; gap: 0; }
.so-dock.is-tighter .so-emo { width: 26px; }
.so-dock.is-tighter .so-emo-g { font-size: 16.5px; }
.so-dock.is-tighter .so-dbtn { min-width: 30px; padding: 0 4px; gap: 3px; }
.so-dock.is-tighter .so-emo-k { display: none; }
.so-palbtn { display: none; }
.so-dock.is-compact .so-palbtn { display: inline-flex; }
.so-dock.is-compact .so-emos { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 5px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(8,10,20,.96); box-shadow: var(--shadow-2); }
.so-dock.is-compact.show-pal .so-emos { display: flex; }
.so-dock.is-compact .so-emo-k { opacity: .75; }
.so-dock.is-shake { animation: shake .4s ease; }
/* réglette FLOTTANTE (barre du haut trop pleine : hôte, écran étroit) : sous la barre, en haut à droite (js/social.js, place : 10 px sous
   la barre, 42 px de haut). Un écran de jeu qui a des commandes ou un titre dans ce coin lui laisse cette hauteur :
   body:has(.so-dock.is-float) … { padding-top: var(--so-float-h) } (games/derby.css, wheel.css, douze.css, slots.css) */
:root { --so-float-h: 58px; }

/* ---------- réactions qui traversent l'écran ---------- */
/* au-dessus des modales (1100) et de la cérémonie du podium (1150) : on réagit aussi pendant le podium ; jamais cliquable */
.so-flies { position: fixed; inset: 0; z-index: 1160; pointer-events: none; overflow: hidden; }
.so-fly { --pc: var(--gold); --dur: 4s; --amp: 16px; position: absolute; left: 0; display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 5px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(5,6,11,.15), rgba(10,13,24,.86) 30%); border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--pc) 35%, transparent), 0 10px 26px rgba(0,0,0,.45);
  white-space: nowrap; will-change: transform; animation: soFly var(--dur) cubic-bezier(.2,.62,.8,.38) forwards; }
/* entre vite, flâne au milieu de l'écran (là où tout le monde regarde), ressort vite */
@keyframes soFly { from { transform: translateX(-15vw); } to { transform: translateX(102vw); } }
.so-fly-trail { position: absolute; right: 100%; top: 50%; width: 22vw; height: 3px; margin-top: -1.5px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc) 70%, transparent)); filter: blur(1px); opacity: .8; }
.so-fly-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 21px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(5,6,11,.9)); box-shadow: 0 0 0 2px var(--pc), 0 0 14px color-mix(in srgb, var(--pc) 60%, transparent); }
.so-fly-e { font-size: 44px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)); animation: soWob .55s ease-in-out infinite alternate; }
@keyframes soWob { from { transform: translateY(calc(var(--amp) * -.5)) rotate(-10deg) scale(1); } to { transform: translateY(calc(var(--amp) * .5)) rotate(10deg) scale(1.12); } }
.so-fly-who { font: 600 13px/1.1 var(--font-ui); color: var(--text); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.so-fly-who b { color: color-mix(in srgb, var(--pc) 70%, #fff); font-weight: 700; }
.so-fly-to { color: var(--text-dim); font-weight: 500; }
.so-fly.is-forme { padding: 7px 20px 7px 7px; border-color: var(--gold-hi); box-shadow: 0 0 0 1px rgba(247,221,143,.4), 0 0 34px rgba(247,221,143,.45), 0 12px 30px rgba(0,0,0,.5); }
.so-fly.is-forme .so-fly-e { font-size: 60px; }
.so-fly-who { font-size: 14px; }
.so-fly.is-forme .so-fly-to { color: var(--gold-hi); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.so-combo { position: absolute; left: 50%; top: 40%; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%);
  animation: soCombo 2.2s cubic-bezier(.2,.9,.3,1.2) forwards; }
.so-combo-e { font-size: 150px; line-height: 1; filter: drop-shadow(0 0 34px rgba(247,221,143,.55)) drop-shadow(0 12px 20px rgba(0,0,0,.6)); }
.so-combo-n { font-size: 56px; font-weight: 700; line-height: 1; color: var(--gold-hi); text-shadow: 0 0 24px rgba(247,221,143,.6), 0 3px 6px rgba(0,0,0,.8); }
.so-combo-k { font: 700 13px/1 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: var(--text); text-shadow: 0 2px 6px rgba(0,0,0,.9); }
@keyframes soCombo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-12deg); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(4deg); }
  24% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -54%) scale(1.06); } }
html.reduce-motion .so-combo { animation: none !important; }
html.reduce-motion .so-fly { left: 50%; transform: translateX(-50%); animation: none !important; }
html.reduce-motion .so-fly-e, html.reduce-motion .so-fly-trail { animation: none !important; }
html.reduce-motion .so-fly-trail { display: none; }

/* ---------- bulles de chat ---------- */
.so-bubbles { position: fixed; z-index: 944; display: flex; flex-direction: column; gap: 7px; width: 360px; pointer-events: none; }
.so-bub { --pc: var(--gold); display: flex; align-items: flex-start; gap: 9px; max-width: 360px; padding: 8px 13px 8px 8px; border-radius: 4px 16px 16px 16px;
  background: linear-gradient(180deg, rgba(20,25,50,.95), rgba(8,10,20,.95)); border: 1px solid var(--line); border-left: 3px solid var(--pc);
  box-shadow: 0 10px 26px rgba(0,0,0,.5); animation: soBubIn .34s cubic-bezier(.2,.9,.3,1.3) both; transition: opacity .35s, transform .35s; }
.so-bub.is-out { opacity: 0; transform: translateY(-6px); }
@keyframes soBubIn { from { opacity: 0; transform: translateY(-10px) scale(.94); } }
.so-bub-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; box-shadow: 0 0 0 2px var(--pc); background: rgba(5,6,11,.8); }
.so-bub-in { min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.so-bub-n { display: block; font-size: 11.5px; letter-spacing: .04em; color: color-mix(in srgb, var(--pc) 70%, #fff); }
.so-bub-t { white-space: pre-wrap; }
/* INTÉGRATION 30/09 : l'astuce ne capte plus les clics (elle tombait sur le « Prêt » du Derby et les boutons du haut des tables) ;
   seul son × reste cliquable */
.so-hint { --pc: var(--gold); pointer-events: none; align-items: center; border-left-color: var(--gold); background: linear-gradient(180deg, rgba(40,32,12,.96), rgba(10,9,6,.96)); }
.so-hint-av { color: var(--gold-hi); font-size: 13px; }
.so-hint-keys { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-dim); }
.so-hint-keys .kbd { margin: 0 1px; }
.so-hint-x { pointer-events: auto; flex: none; align-self: flex-start; margin-left: 4px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; line-height: 1; }
.so-hint-x:hover { color: var(--text); border-color: var(--gold); }
/* MESSAGES 04/10 (revue n° 3, défaut 14) — dans un jeu à l'échelle, l'astuce seule s'accroche SOUS la réglette (js : placeBulles,
   .is-accroche) : une étiquette basse d'une ligne, centrée sur la réglette, à 4 px d'elle, au palier du jeu ; elle tient au-dessus des
   libellés de la tête du jeu, où elle se calait entre le titre et un onglet. Aucun texte sous 12 px de feuille. */
.coque-a-l-echelle .so-bubbles.is-accroche { width: max-content; max-width: calc(100 * var(--vw, 1vw) - 16px); }
.coque-a-l-echelle .so-bubbles.is-accroche .so-hint { max-width: none; gap: 8px; padding: 2px 4px 2px 8px; border: 1px solid rgba(222,184,92,.5); border-radius: 9px; box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.coque-a-l-echelle .so-bubbles.is-accroche .so-hint-av { width: 16px; height: 16px; font-size: 12px; background: none; box-shadow: none; }
.coque-a-l-echelle .so-bubbles.is-accroche .so-bub-in { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.2; white-space: nowrap; }
.coque-a-l-echelle .so-bubbles.is-accroche .so-bub-n { display: inline; letter-spacing: .06em; }
.coque-a-l-echelle .so-bubbles.is-accroche .so-hint-keys { display: inline; margin: 0; }
.coque-a-l-echelle .so-bubbles.is-accroche .kbd { min-width: 1.5em; padding: 0 5px; font-size: 12px; line-height: 1.4; }
.coque-a-l-echelle .so-bubbles.is-accroche .so-hint-x { align-self: center; margin-left: 2px; width: 20px; height: 20px; font-size: 13px; }

/* ---------- le comptoir (chat) ---------- */
.so-chat { position: fixed; z-index: 952; width: 360px; max-height: min(calc(62 * var(--vh, 1vh)), 520px); display: flex; flex-direction: column; border-radius: 14px;
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(20,25,52,.97), rgba(7,9,18,.98));
  box-shadow: var(--shadow-2), inset 0 0 0 4px rgba(5,6,11,.6), inset 0 0 0 5px rgba(222,184,92,.10); animation: popIn .22s ease; }
.so-chat[hidden] { display: none; }
.so-chat.is-shake { animation: shake .4s ease; }
.so-chat-h { display: flex; align-items: baseline; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.so-chat-title { font: 400 18px/1 var(--font-display); letter-spacing: .08em; color: var(--gold-hi); }
.so-chat-sub { font: 600 10.5px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.so-x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; }
.so-x:hover { color: var(--text); border-color: var(--gold); }
.so-chat-list { flex: 1; min-height: 120px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.so-msg { --pc: var(--gold); display: flex; gap: 9px; align-items: flex-start; padding: 5px 6px; border-radius: 10px; animation: msgIn .25s ease; }
.so-msg.is-mine { background: rgba(222,184,92,.06); }
.so-msg-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; box-shadow: 0 0 0 2px var(--pc); background: rgba(5,6,11,.8); }
.so-msg-b { min-width: 0; flex: 1; }
.so-msg-h { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.so-msg-h b { color: color-mix(in srgb, var(--pc) 70%, #fff); }
.so-msg-t { margin-left: auto; font-size: 10.5px; color: var(--text-faint); }
.so-msg-x { font-size: 13.5px; line-height: 1.38; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.so-empty { padding: 14px 8px; font-size: 13px; color: var(--text-faint); font-style: italic; text-align: center; }
.so-chat-f { display: flex; align-items: center; gap: 8px; padding: 10px 10px 12px; border-top: 1px solid var(--line); }
.so-chat-in { flex: 1; height: 38px; }
.so-chat-cnt { font-size: 10.5px; color: var(--text-faint); min-width: 34px; text-align: right; }
.so-chat-cnt.is-full { color: var(--warn); }

/* ---------- grand bandeau des coups légendaires (plaque qui descend de la barre du haut) ---------- */
.so-ticker { position: fixed; left: 0; right: 0; top: 64px; z-index: 946; width: fit-content; max-width: min(1180px, calc(96 * var(--vw, 1vw))); margin: 0 auto; pointer-events: none; overflow: hidden; padding: 0 30px 30px; }
.so-plaque { --pc: var(--gold); --acc: var(--gold); position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 26px 13px; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
  background: linear-gradient(180deg, #151a36 0%, #0b0e1d 100%); color: var(--text);
  box-shadow: inset 0 -2px 0 var(--acc), inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent), inset 0 -8px 0 -6px rgba(5,6,11,.9), inset 0 -9px 0 -6px color-mix(in srgb, var(--acc) 40%, transparent);
  transform: translateY(-110%); transition: transform .48s cubic-bezier(.2,.9,.3,1.1); filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); }
.so-plaque.is-in { transform: none; }
.so-plaque.is-out { transform: translateY(-110%); transition-duration: .42s; transition-timing-function: cubic-bezier(.6,0,.8,.4); }
.so-plaque::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 70%, transparent), transparent); }
.so-pl-orn { flex: none; width: 10px; height: 10px; transform: rotate(45deg); background: var(--acc); box-shadow: 0 0 10px var(--acc), 14px -14px 0 -3px color-mix(in srgb, var(--acc) 50%, transparent), -14px 14px 0 -3px color-mix(in srgb, var(--acc) 50%, transparent); }
.so-pl-k { flex: none; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent); border-radius: 3px; font: 700 10.5px/1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.so-pl-t { font: 600 17.5px/1.3 var(--font-ui); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.so-pl-shine { position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,240,200,.18), transparent); animation: sweep 2.4s ease-in-out .3s infinite; }
.so-plaque.is-gain { --acc: var(--gold-hi); }
.so-plaque.is-perte { --acc: var(--lose); background: linear-gradient(180deg, #2a1220 0%, #12070d 100%); }
.so-plaque.is-perte .so-pl-shine { display: none; }
.so-plaque.is-don { --acc: var(--win); background: linear-gradient(180deg, #10291f 0%, #06120d 100%); }
.so-plaque.is-refait { --acc: var(--neon-cyan); background: linear-gradient(180deg, #0f2432 0%, #060f16 100%); }
.so-plaque.is-refait .so-pl-shine { display: none; }
.so-plaque.is-t2 { padding: 15px 32px 16px; background: linear-gradient(180deg, #3a2a08 0%, #171003 60%, #0b0e1d 100%); }
.so-plaque.is-t2 .so-pl-t { font: 400 21px/1.2 var(--font-display); letter-spacing: .03em; color: var(--gold-hi); text-shadow: 0 0 18px rgba(247,221,143,.55), 0 2px 3px rgba(0,0,0,.8); }
.so-plaque.is-t2 .so-pl-k { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #241904; border-color: transparent; }
.so-plaque.is-t2 .so-pl-shine { width: 55%; background: linear-gradient(100deg, transparent, rgba(255,240,200,.32), transparent); animation-duration: 1.5s; }
/* « Animations réduites » : la plaque apparaît et s'efface sur place, sans reflet qui court ; PC lent : pas de reflet non plus */
html.reduce-motion .so-plaque { transform: none !important; transition: opacity .3s ease !important; }
html.reduce-motion .so-plaque.is-out { opacity: 0; }
html.reduce-motion .so-pl-shine, html.perf-low .so-pl-shine { display: none; }

/* ---------- fil discret des gros coups (phase 3) : une ligne par pote et par jeu, dans un coin libre, muette, 4 s ----------
   Posé par js/social.js (placeCoin, Casino.ux) : ancré au bord de son coin, il grandit vers l'intérieur ; seule la ligne d'une
   bataille de l'Armurerie se clique. */
.so-discret { position: fixed; left: 12px; bottom: 12px; z-index: 945; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  width: max-content; max-width: min(400px, calc(100vw - 24px)); pointer-events: none; transition: opacity .25s; }
.so-discret.is-droite { align-items: flex-end; }
.so-ligne { --pc: var(--gold); display: flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 4px 13px 4px 4px;
  border-radius: 999px; border: 1px solid var(--line); border-left: 3px solid var(--pc);
  background: linear-gradient(90deg, rgba(12,15,30,.94), rgba(8,10,20,.86)); box-shadow: 0 6px 16px rgba(0,0,0,.42);
  font: 500 12.5px/1.3 var(--font-ui); color: var(--text); white-space: nowrap;
  opacity: 0; transform: translateX(-10px); transition: opacity .28s ease, transform .3s cubic-bezier(.2,.9,.3,1); }
.so-discret.is-droite .so-ligne { transform: translateX(10px); }
/* posée : à sa place exacte, aussi dans un coin droit (sinon elle dépassait de 10 px sur ce qui la borde : les jetons de la Roue) */
.so-ligne.is-in, .so-discret.is-droite .so-ligne.is-in { opacity: 1; transform: none; }
.so-discret .so-ligne.is-out { opacity: 0; transform: none; transition-duration: .35s; }
.so-li-av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13.5px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(5,6,11,.9)); box-shadow: 0 0 0 1.5px var(--pc); }
.so-li-t { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.so-li-n { font-weight: 700; color: color-mix(in srgb, var(--pc) 62%, #fff); }
.so-li-v { font-weight: 700; color: var(--gold-hi); }
.so-li-k { display: inline-block; margin-right: 7px; padding: 1px 6px; border-radius: 3px; vertical-align: 1px; font: 700 9.5px/1.35 var(--font-ui);
  letter-spacing: .14em; text-transform: uppercase; color: #241904; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.so-ligne.is-t2 { border-color: rgba(247,221,143,.42); border-left-color: var(--gold-hi); background: linear-gradient(90deg, rgba(58,42,8,.95), rgba(12,12,22,.88)); }
.so-ligne.is-don { border-left-color: var(--win); }
.so-ligne.is-don .so-li-av { box-shadow: 0 0 0 1.5px var(--win); }
.so-ligne.is-refait { border-left-color: var(--neon-cyan); }
/* une bataille de caisses ouverte par un pote, ou ses paris ouverts : les seules lignes qui se cliquent (elles mènent à l'onglet
   Batailles de l'Armurerie) */
.so-ligne.is-bataille, .so-ligne.is-paris { pointer-events: auto; cursor: pointer; margin: 0; text-align: left; border-left-color: var(--neon-cyan);
  background: linear-gradient(90deg, rgba(10,30,40,.95), rgba(8,10,20,.88)); }
.so-ligne.is-bataille .so-li-av, .so-ligne.is-paris .so-li-av { font-size: 12.5px; color: var(--neon-cyan); }
.so-li-go { flex: none; margin-left: 2px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(59,232,255,.38);
  font: 700 10px/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--neon-cyan); transition: background .2s, color .2s; }
.so-ligne.is-bataille:hover, .so-ligne.is-bataille:focus-visible, .so-ligne.is-paris:hover, .so-ligne.is-paris:focus-visible { border-color: rgba(59,232,255,.5); border-left-color: var(--neon-cyan); }
.so-ligne.is-bataille:hover .so-li-go, .so-ligne.is-bataille:focus-visible .so-li-go, .so-ligne.is-paris:hover .so-li-go, .so-ligne.is-paris:focus-visible .so-li-go { background: var(--neon-cyan); color: #04141a; }
.so-ligne.is-bataille:focus-visible, .so-ligne.is-paris:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.so-ligne.is-plus .so-li-v { animation: soPlus .55s ease; }
@keyframes soPlus { 35% { color: #fff; text-shadow: 0 0 10px rgba(247,221,143,.85); } }
html.reduce-motion .so-ligne { transform: none !important; transition: opacity .2s ease; }
html.reduce-motion .so-ligne.is-plus .so-li-v { animation: none; }
html.perf-low .so-ligne { box-shadow: none; background: rgba(10,12,24,.95); }

/* ---------- tiroir « Potes » ---------- */
.so-drawer { position: fixed; right: 0; top: 64px; bottom: 0; z-index: 950; width: 390px; max-width: calc(100 * var(--vw, 1vw)); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(18,22,46,.98), rgba(6,8,16,.99)); border-left: 1px solid var(--line-strong);
  box-shadow: -24px 0 60px rgba(0,0,0,.55), inset 5px 0 0 -4px rgba(222,184,92,.25); transform: translateX(104%); visibility: hidden;
  transition: transform .38s cubic-bezier(.2,.9,.3,1), visibility 0s linear .38s; }
.so-drawer.is-open { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.2,.9,.3,1), visibility 0s; }
.so-dr-h { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.so-dr-tt { display: flex; align-items: baseline; gap: 10px; }
.so-dr-title { margin: 0; font: 400 24px/1 var(--font-display); letter-spacing: .08em; color: var(--gold-hi); }
.so-dr-sub { font: 600 11px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.so-dr-body { flex: 1; overflow: auto; padding: 12px 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.so-dr-list { display: flex; flex-direction: column; gap: 9px; }
.so-pc { --pc: var(--gold); padding: 10px 11px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5,6,11,.45); transition: border-color .2s, background .2s; }
.so-pc:hover { border-color: color-mix(in srgb, var(--pc) 55%, transparent); background: rgba(5,6,11,.62); }
.so-pc.is-me { border-color: color-mix(in srgb, var(--pc) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 10%, transparent), rgba(5,6,11,.4)); }
.so-pc.is-off { opacity: .5; }
.so-pc-top { display: flex; align-items: center; gap: 11px; }
.so-pc-av { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 21px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(5,6,11,.9)); box-shadow: 0 0 0 2px var(--pc), 0 0 14px color-mix(in srgb, var(--pc) 45%, transparent); }
.so-pc-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 2px var(--bg-1); }
.so-pc.is-off .so-pc-dot { background: var(--text-faint); }
.so-pc-main { min-width: 0; flex: 1; }
.so-pc-name { font-weight: 700; font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-pc-me { margin-left: 6px; vertical-align: 1px; }
.so-pc-where { font-size: 12px; color: var(--text-dim); }
.so-pc-where.is-table { color: var(--neon-cyan); }
.so-pc-bal { font-size: 15px; font-weight: 700; color: var(--gold-hi); }
.so-pc-acts { display: flex; gap: 6px; margin-top: 9px; padding-left: 51px; }
.so-act { flex: 1; padding: 0 8px; height: 32px; font-size: 12.5px; }
.so-act-gift:hover { border-color: var(--win); background: rgba(62,224,143,.12); }
.so-act-duel:hover { border-color: var(--neon-pink); background: rgba(255,79,216,.12); }
.so-act.is-on { border-color: var(--gold); background: rgba(222,184,92,.16); color: var(--gold-hi); }
/* dons : la part donnable sous sa propre carte, ou pourquoi il n'y en a pas (« 🎁 Donner » est alors grisé) */
.so-pc-don { margin-top: 8px; padding-left: 51px; font-size: 12.5px; line-height: 1.35; color: var(--text-dim); }
.so-pc-don b { color: var(--gold-hi); }
.so-pc-don.is-off { color: var(--text-dim); font-style: italic; }
.so-pc-pick { display: flex; justify-content: space-between; margin: 8px 0 0 51px; padding: 4px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(5,6,11,.6); animation: fadeDown .2s ease; }
.so-pc-pick .so-emo { width: 32px; height: 32px; }
.so-dr-h3 { display: flex; align-items: center; gap: 10px; margin: 2px 0 9px; font: 400 15px/1.2 var(--font-display); letter-spacing: .06em; color: var(--gold-hi); }
.so-dr-h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.so-dr-host { padding: 11px 12px; border-radius: 12px; border: 1px dashed var(--line-strong); background: rgba(222,184,92,.04); }
.so-dr-host[hidden] { display: none; }
.so-host-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.so-host-l { font-size: 13px; color: var(--text-dim); }
.so-seuil > button { height: 28px; padding: 0 11px; font-size: 12px; }
.so-host-hint { margin: 7px 0 9px; font-size: 11.5px; color: var(--text-faint); }
/* réglage des annonces de CE joueur (tiroir) : quatre choix sur toute la largeur */
.so-niveau { display: flex; width: 100%; box-sizing: border-box; }
.so-niveau > button { flex: 1 1 auto; height: 28px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
.so-niveau-aide { margin: 7px 2px 0; font-size: 11.5px; line-height: 1.4; color: var(--text-faint); }
.so-fil { display: flex; flex-direction: column; gap: 5px; }
.so-fil-row { display: flex; gap: 9px; align-items: baseline; padding: 6px 9px; border-radius: 8px; border-left: 2px solid var(--gold); background: rgba(222,184,92,.05); font-size: 12.8px; line-height: 1.35; }
.so-fil-row.is-perte { border-left-color: var(--lose); background: rgba(255,90,103,.06); }
.so-fil-row.is-don { border-left-color: var(--win); background: rgba(62,224,143,.06); }
.so-fil-row.is-refait { border-left-color: var(--neon-cyan); background: rgba(59,232,255,.06); }
.so-fil-row.is-bataille, .so-fil-row.is-paris { border-left-color: var(--neon-cyan); background: rgba(59,232,255,.04); }
.so-fil-row.is-t2 { border-left-width: 3px; background: linear-gradient(90deg, rgba(247,221,143,.14), rgba(222,184,92,.03)); }
.so-fil-t { flex: none; font-size: 10.5px; color: var(--text-faint); }
.so-fil-x { color: var(--text); overflow-wrap: anywhere; }
.so-dr-foot { padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-faint); }
.so-dr-foot .kbd { margin: 0 2px; }

/* ---------- cadeau : fenêtre, bannière, pluie ---------- */
.so-gift { display: flex; flex-direction: column; gap: 12px; min-width: min(380px, 80vw); }
.so-gift-who { --pc: var(--gold); display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); background: rgba(5,6,11,.5); }
.so-gift-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; box-shadow: 0 0 0 2px var(--pc), 0 0 16px color-mix(in srgb, var(--pc) 45%, transparent); }
.so-gift-name { font-weight: 700; font-size: 16px; }
.so-gift-sub { font-size: 12.5px; color: var(--text-dim); }
.so-gift-in { font-size: 20px; height: 46px; font-weight: 700; color: var(--gold-hi); }
.so-gift-q { display: flex; flex-wrap: wrap; gap: 6px; }
.so-gift-mine { font-size: 13px; color: var(--text-dim); }
.so-gift-mine b { color: var(--gold-hi); }
.so-gift-err { min-height: 18px; font-size: 13px; color: var(--lose); }
.so-rain { position: fixed; inset: 0; z-index: 947; pointer-events: none; }
.so-giftbanner { --pc: var(--gold); position: fixed; left: 50%; top: 40%; z-index: 948; pointer-events: none; text-align: center; transform: translate(-50%, -50%);
  padding: 18px 42px 20px; border-radius: 18px; background: radial-gradient(ellipse at 50% 0%, rgba(62,224,143,.2), transparent 70%), linear-gradient(180deg, rgba(16,30,28,.94), rgba(6,10,12,.95));
  border: 1px solid rgba(62,224,143,.5); box-shadow: 0 0 0 5px rgba(5,6,11,.7), 0 0 0 6px rgba(62,224,143,.25), 0 24px 60px rgba(0,0,0,.6);
  animation: soGiftIn .55s cubic-bezier(.2,.9,.3,1.3) both; transition: opacity .45s, transform .45s; }
.so-giftbanner.is-envoi { top: calc(var(--topbar-h) + 90px); padding: 10px 26px 12px; }
.so-giftbanner.is-out { opacity: 0; transform: translate(-50%, -62%); }
@keyframes soGiftIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.so-gb-k { font: 700 12px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--win); }
.so-gb-v { margin: 8px 0 6px; font-size: 54px; font-weight: 700; line-height: 1; color: var(--gold-hi); text-shadow: 0 0 26px rgba(247,221,143,.55); }
.so-giftbanner.is-envoi .so-gb-v { font-size: 30px; color: var(--text); text-shadow: none; }
.so-gb-s { font-size: 14px; color: var(--text-dim); }
html.reduce-motion .so-giftbanner, html.reduce-motion .so-plaque, html.reduce-motion .so-bub { animation: none !important; }

/* UX-OVERLAYS 30/09 — changement de salle : bulles, astuce et bandeau s'effacent le temps que le jeu se monte (0,9 s), puis sont
   reposés là où ils ne cachent rien (js/social.js, Casino.ux.libre). */
.so-root.is-routing .so-bubbles, .so-root.is-routing .so-ticker, .so-root.is-routing .so-discret { opacity: 0; transition: none; }   /* d'un coup : pas même 0,1 s sur le nouvel écran */
.so-bubbles, .so-ticker { transition: opacity .25s; }
/* UX-OVERLAYS 30/09 (playtest) — plaque du fil ÉTROITE, sur deux lignes, quand la longue ne trouve pas de place libre */
.so-ticker.is-etroit { max-width: min(470px, calc(94 * var(--vw, 1vw))); }
.so-ticker.is-etroit .so-plaque { flex-wrap: wrap; row-gap: 4px; padding: 10px 20px 11px; }
.so-ticker.is-etroit .so-pl-t { white-space: normal; font-size: 15.5px; flex: 1 1 260px; }
/* Phase 3 — écran plein (onglet Échanges, bataille de l'Armurerie) : bulles et fil discret se resserrent (300 px) pour tenir sans
   couvrir une commande ni un plateau ; sans place du tout, ils attendent cachés qu'elle se libère (js/social.js, Casino.ux.propre). */
.so-bubbles.is-etroit { width: 300px; }
.so-bubbles.is-etroit .so-bub { max-width: 300px; }
.so-discret.is-etroit { max-width: min(300px, calc(100vw - 24px)); }
.so-bubbles.is-attente, .so-discret.is-attente { visibility: hidden; }
/* S1 — cris sonores : 📣 dans la réglette ouvre une rangée de 5 cris + le réglage « Sons des potes » (ce PC seulement) */
.so-cris { display: none; position: absolute; top: calc(100% + 8px); right: 0; align-items: center; gap: 2px; padding: 5px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(8,10,20,.96); box-shadow: var(--shadow-2); white-space: nowrap; }
.so-dock.show-cris .so-cris { display: flex; }
.so-cri { position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.so-cri:hover { background: radial-gradient(circle, rgba(247,221,143,.2), rgba(222,184,92,.04) 70%); box-shadow: 0 0 0 1px var(--line-strong); }
.so-cri:focus-visible, .so-cri-sons:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.so-cri-g { font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); transition: transform .16s; }
.so-cri:hover .so-cri-g { transform: scale(1.15); }
.so-cri.is-press .so-cri-g { animation: soPress .42s cubic-bezier(.2,.9,.3,1.5); }
.so-cris.is-cool .so-cri { opacity: .45; }
.so-cri-sep { width: 1px; height: 22px; margin: 0 5px; background: var(--line); }
.so-cri-sons { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(222,184,92,.08); color: var(--text);
  font: 600 12px/1 var(--font-ui); cursor: pointer; }
.so-cri-sons.is-off { color: var(--muted, #9a9ab0); background: transparent; }
.so-fly.is-cri .so-fly-e { font-size: 34px; }
.so-fly.is-cri .so-fly-av { width: 30px; height: 30px; font-size: 17px; }
.so-fly.is-cri .so-fly-who { font-size: 11px; }
/* le 📣 reste étroit : la réglette doit tenir, complète, à 1366 (hôte compris) */
.so-crisbtn { min-width: 30px; padding: 0 5px; }
.so-dock.is-tight .so-crisbtn { min-width: 26px; padding: 0 3px; }
.so-dock.is-tighter .so-crisbtn { min-width: 22px; padding: 0 1px; }
.so-dock.is-tighter .so-crisbtn .so-ico { font-size: 14px; }
.so-dock.is-tighter .so-emo { width: 22px; }
.so-dock.is-tighter .so-emos { padding: 0 1px; }
/* TÉLÉPHONE — N5 (annexe B remesurée sur d1cc705) : le « Compris » d'une astuce (un rond de 24 px) : 33 × 34 px de zone de toucher par
   un cadre transparent hors de son bord, 5 px en haut et en bas, 9 px à gauche (sur le texte de sa propre bulle), RIEN à droite : la
   bulle peut se poser sur une ligne du hall, et un cadre de ce côté rognait « Défier » (préexistant : le rond seul en recouvre déjà
   9 px quand la bulle y tombe, noté au journal de N5). Le rond dessiné ne change pas. Bornée au téléphone. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .so-bubbles .so-hint-x { position: relative; }
  .so-bubbles .so-hint-x::after { content: ""; position: absolute; inset: -6px -1px -6px -10px; border-radius: 17px; }
}
/* TÉLÉPHONE — N11 (annexe A de la revue au téléphone, REMESURÉE sur 1bedc6a) : le nom du bandeau de l'astuce « La salle vit » (11,5 px ; ses touches 1 … 8, T, P sont dans css/base.css) : 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) {
  .so-bub-n { font-size: 12px; }
}
/* TÉLÉPHONE COUCHÉ — N28 (dev/tests-client/s5-tel-holdem-hote.mjs) : avant de flotter sous la barre du haut (et de prendre sa voie à chaque
   jeu : au Hold'em, 46 px de salle), la réglette compacte se serre (js/social.js, place() : .is-serre, seulement quand cette règle pose
   --so-reglette-serree) : sans ses deux losanges, des boutons de 32 px de large (le 💬, le 😂 des réactions, le 📣, les potes et leur
   compte), 1 px entre eux ; environ 150 px au lieu de 234. Elle tient ainsi dans la barre de l'hôte (« ♛ Soirée », « 👑 Hôte ») et dans
   celle d'un joueur au solde de sept chiffres à 640 px. Ses menus (réactions, cris) s'ouvrent dessous comme ceux de la compacte. Mêmes
   pastilles, même or ; on serre, on ne redessine pas. Bornée au téléphone couché : le PC et le portrait ne changent pas. */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --so-reglette-serree: 1; }
  .so-dock.is-compact.is-serre { gap: 1px; padding: 0 4px; }
  .so-dock.is-compact.is-serre .so-orn { display: none; }
  .so-dock.is-compact.is-serre .so-dbtn { min-width: 32px; padding: 0 5px; }
}