/* ─────────────────────────────────────────────────────────────────────
Disable iOS double-tap-to-zoom on interactive content.
`touch-action: manipulation` preserves single tap, pan (scroll), and
pinch-to-zoom (accessibility), but turns off the legacy double-tap
zoom gesture. As a side benefit, this also removes the 300 ms tap
latency that older iOS versions added to detect double-taps.
Applies globally because every clickable surface in the app should
feel snappy and stable (avatar picker, reaction buttons, action
buttons during a hand, etc.).
───────────────────────────────────────────────────────────────────── */
/* ── Police officielle Inter (parité QML, point 7 du chantier clone) ──
Fichier EXACT du client officiel (Inter-VariableFont de l'APK, axes
opsz 14-32 + wght 100-900), converti en woff2 (877 Ko → 350 Ko),
self-hosted (public/fonts/, licence OFL jointe). Les tokens --ff-* des
thèmes PokerTH référencent déjà 'Inter' : ce @font-face les résout enfin
(ils retombaient silencieusement sur system-ui). */
@font-face {
font-family: 'Inter';
src: url('fonts/InterVariable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Texte courant en Inter dans les thèmes PokerTH uniquement (le QML utilise
Inter partout) ; les autres thèmes gardent leur pile système. Les contrôles
de formulaire n'héritent pas par défaut -> inherit explicite. */
:root[data-theme^="pokerth"] body { font-family: 'Inter', system-ui, sans-serif; }
:root[data-theme^="pokerth"] :is(button, input, select, textarea) { font-family: inherit; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root {
--ff-display: 'Cinzel', serif;
--ff-mono: 'Inconsolata', monospace;
--timer-glow: 0 0 3px rgba(var(--gold-rgb), 0.5), 0 1px 2px rgba(0,0,0,0.9);
--felt: #182e1a;
--felt-mid: #1e3820;
--felt-hi: #254526;
/* Surface de la table (axe "Tapis") — feutre de l'oval + lisere. Voir theme.mjs. */
--felt-base-hi: #1e6b1e;
--felt-base-mid: #0f3d0f;
--felt-base-lo: #091f09;
--modal-bg: linear-gradient(160deg, #0a1f0a 0%, #142a18 50%, #08160a 100%);
--body-glow: rgba(50,100,50,0.18);
--rail: #6b3e18;
--rail-dark: #3a2208;
--rail-glow: rgba(107,62,24,0.3);
--panel: rgba(8,18,10,0.88);
--panel-hi: rgba(14,28,16,0.9);
--gold: #E3C800;
--gold-rgb: 227,200,0;
--chrome-tint: rgba(0,0,0,0.35);
--pos: #4cff88;
--neg: #ff6b6b;
--info: #7ec8e3;
--green-rgb: 39,174,96;
--red-rgb: 192,57,43;
--blue-rgb: 52,152,219;
--green2-rgb: 88,201,122;
--orange-rgb: 230,126,34;
--on-green: #d7ffe0;
--ld-quit-fg: #fad6d0;
--ld-create-fg: #d6f5dc;
--wp-need-fg: #e0a040;
--gold-hi: #f2dc4d;
--gold-dim: #b09a00;
--cream: #ede8dc;
--field-bg: #0c1e0e;
--inset: rgba(255,255,255,0.05);
--inset-hi: rgba(255,255,255,0.08);
--on-gold: #110900;
--text: #9aaa92;
--text-hi: #c8d8c0;
--red: #c0392b;
--green: #27ae60;
--orange: #e67e22;
--border: rgba(var(--gold-rgb), 0.25);
--border-hi: rgba(var(--gold-rgb), 0.65);
--card-back: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20140%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27h%27%20cx%3D%2750%25%27%20cy%3D%2744%25%27%20r%3D%2780%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23234023%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%230c1c0e%27%2F%3E%3C%2FradialGradient%3E%3Cpattern%20id%3D%27l%27%20width%3D%2714%27%20height%3D%2714%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20d%3D%27M7%200L14%207L7%2014L0%207Z%27%20fill%3D%27none%27%20stroke%3D%27%23c8a84a%27%20stroke-width%3D%270.6%27%20opacity%3D%270.4%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%270.8%27%20fill%3D%27%23c8a84a%27%20opacity%3D%270.45%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%27%20height%3D%27140%27%20fill%3D%27url%28%23h%29%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%2788%27%20height%3D%27128%27%20rx%3D%275%27%20fill%3D%27url%28%23l%29%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%2790%27%20height%3D%27130%27%20rx%3D%277%27%20fill%3D%27none%27%20stroke%3D%27%23c8a84a%27%20stroke-width%3D%271.4%27%2F%3E%3Crect%20x%3D%278.5%27%20y%3D%278.5%27%20width%3D%2783%27%20height%3D%27123%27%20rx%3D%275%27%20fill%3D%27none%27%20stroke%3D%27%237a6428%27%20stroke-width%3D%270.6%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2770%27%20rx%3D%2725%27%20ry%3D%2737%27%20fill%3D%27%2313280f%27%20stroke%3D%27%23c8a84a%27%20stroke-width%3D%270.9%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2770%27%20rx%3D%2721%27%20ry%3D%2732.5%27%20fill%3D%27none%27%20stroke%3D%27%237a6428%27%20stroke-width%3D%270.5%27%2F%3E%3Ctext%20x%3D%2750%27%20y%3D%2784%27%20font-size%3D%2738%27%20text-anchor%3D%27middle%27%20fill%3D%27%23e0c070%27%20font-family%3D%27Georgia%2Cserif%27%3E%E2%99%A0%3C%2Ftext%3E%3C%2Fsvg%3E");
}
/* ── Palette : Sombre neutre (axe "Palette", choisie via le menu 🎨) ──
"Casino vert" reste le défaut dans :root ci-dessus ; ce bloc ne fait
qu'écraser les variables de couleur quand .
Voir public/modules/theme.mjs. */
:root[data-theme="dark"] {
--felt: #1b1e24;
--felt-mid: #232730;
--felt-hi: #2c313c;
--modal-bg: linear-gradient(160deg, #0e1014 0%, #161a20 50%, #0c0e12 100%);
--panel: rgba(12,14,18,0.90);
--panel-hi: rgba(20,23,29,0.92);
--gold: #E3C800;
--gold-hi: #f2dc4d;
--gold-dim: #b09a00;
--cream: #ece9e2;
--field-bg: #12151b;
--inset: rgba(255,255,255,0.05);
--inset-hi: rgba(255,255,255,0.08);
--on-gold: #110900;
--text: #97a0ad;
--text-hi: #d4dae3;
--red: #c0392b;
--green: #27ae60;
--orange: #e67e22;
--border: rgba(var(--gold-rgb), 0.22);
--border-hi: rgba(var(--gold-rgb), 0.60);
--card-back: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20140%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27h%27%20cx%3D%2750%25%27%20cy%3D%2744%25%27%20r%3D%2780%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%232c313c%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%230c0e12%27%2F%3E%3C%2FradialGradient%3E%3Cpattern%20id%3D%27l%27%20width%3D%2714%27%20height%3D%2714%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20d%3D%27M7%200L14%207L7%2014L0%207Z%27%20fill%3D%27none%27%20stroke%3D%27%23c8a84a%27%20stroke-width%3D%270.6%27%20opacity%3D%270.4%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%270.8%27%20fill%3D%27%23c8a84a%27%20opacity%3D%270.45%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%27%20height%3D%27140%27%20fill%3D%27url%28%23h%29%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%2788%27%20height%3D%27128%27%20rx%3D%275%27%20fill%3D%27url%28%23l%29%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%2790%27%20height%3D%27130%27%20rx%3D%277%27%20fill%3D%27none%27%20stroke%3D%27%23c8a84a%27%20stroke-width%3D%271.4%27%2F%3E%3Crect%20x%3D%278.5%27%20y%3D%278.5%27%20width%3D%2783%27%20height%3D%27123%27%20rx%3D%275%27%20fill%3D%27none%27%20stroke%3D%27%237a6428%27%20stroke-width%3D%270.6%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2770%27%20rx%3D%2725%27%20ry%3D%2737%27%20fill%3D%27%231b1e24%27%20stroke%3D%27%23c8a84a%27%20stroke-width%3D%270.9%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2770%27%20rx%3D%2721%27%20ry%3D%2732.5%27%20fill%3D%27none%27%20stroke%3D%27%237a6428%27%20stroke-width%3D%270.5%27%2F%3E%3Ctext%20x%3D%2750%27%20y%3D%2784%27%20font-size%3D%2738%27%20text-anchor%3D%27middle%27%20fill%3D%27%23e0c070%27%20font-family%3D%27Georgia%2Cserif%27%3E%E2%99%A0%3C%2Ftext%3E%3C%2Fsvg%3E");
}
/* ── Palette : PokerTH officiel (axe "Palette") ── slate neutre + accent ambré,
couleurs reprises du client QML 2.x. Comme :root/dark, ne fait qu'ecraser les
variables. Voir theme.mjs. */
:root[data-theme="pokerth"] {
--ff-display: 'Inter', system-ui, sans-serif;
--ff-mono: 'Inter', system-ui, sans-serif;
--felt: #161b23;
--felt-mid: #1d222b;
--felt-hi: #252c38;
--modal-bg: linear-gradient(160deg, #12161d 0%, #1d222b 50%, #0e1218 100%);
--panel: rgba(20,25,33,0.92);
--panel-hi: rgba(29,34,43,0.94);
--gold: #eff1f5;
--gold-rgb: 239,241,245;
--gold-hi: #ffffff;
--gold-dim: #a0acc4;
--sel: #E3C800;
--sel-rgb: 227,200,0;
--sel-hi: #ffd700;
--timer-normal: #cdd3e0;
--cream: #eff1f5;
--field-bg: #161c25;
--inset: rgba(255,255,255,0.05);
--inset-hi: rgba(255,255,255,0.08);
--on-gold: #110900;
--text: #a0acc4;
--text-hi: #eff1f5;
--red: #c0392b;
--green: #27ae60;
--orange: #e67e22;
--border: rgba(160,172,196,0.16);
--border-hi: rgba(var(--gold-rgb), 0.55);
--card-back: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20140%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27h%27%20cx%3D%2750%25%27%20cy%3D%2744%25%27%20r%3D%2780%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%232c313c%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%230c0e12%27%2F%3E%3C%2FradialGradient%3E%3Cpattern%20id%3D%27l%27%20width%3D%2714%27%20height%3D%2714%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20d%3D%27M7%200L14%207L7%2014L0%207Z%27%20fill%3D%27none%27%20stroke%3D%27%236b7689%27%20stroke-width%3D%270.6%27%20opacity%3D%270.4%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%270.8%27%20fill%3D%27%236b7689%27%20opacity%3D%270.45%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%27%20height%3D%27140%27%20fill%3D%27url%28%23h%29%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%2788%27%20height%3D%27128%27%20rx%3D%275%27%20fill%3D%27url%28%23l%29%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%2790%27%20height%3D%27130%27%20rx%3D%277%27%20fill%3D%27none%27%20stroke%3D%27%236b7689%27%20stroke-width%3D%271.4%27%2F%3E%3Crect%20x%3D%278.5%27%20y%3D%278.5%27%20width%3D%2783%27%20height%3D%27123%27%20rx%3D%275%27%20fill%3D%27none%27%20stroke%3D%27%233a4254%27%20stroke-width%3D%270.6%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2770%27%20rx%3D%2725%27%20ry%3D%2737%27%20fill%3D%27%231b1e24%27%20stroke%3D%27%236b7689%27%20stroke-width%3D%270.9%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2770%27%20rx%3D%2721%27%20ry%3D%2732.5%27%20fill%3D%27none%27%20stroke%3D%27%233a4254%27%20stroke-width%3D%270.5%27%2F%3E%3Ctext%20x%3D%2750%27%20y%3D%2784%27%20font-size%3D%2738%27%20text-anchor%3D%27middle%27%20fill%3D%27%23a0acc4%27%20font-family%3D%27Georgia%2Cserif%27%3E%E2%99%A0%3C%2Ftext%3E%3C%2Fsvg%3E");
}
/* ── Palette : PokerTH officiel (clair) (axe "Palette") ── variante claire de
la palette PokerTH officielle (valeurs _light du client QML). Ne fait qu'ecraser
les variables. Voir theme.mjs. */
:root[data-theme="pokerth-light"] {
--ff-display: 'Inter', system-ui, sans-serif;
--ff-mono: 'Inter', system-ui, sans-serif;
--felt: #eef1f6;
--felt-mid: #e4e9f1;
--felt-hi: #d9e0ea;
--modal-bg: linear-gradient(160deg, #f6f8fb 0%, #e9edf4 50%, #f2f5f9 100%);
--panel: rgba(248,250,253,0.94);
--panel-hi: rgba(255,255,255,0.96);
--gold: #9a7d0a;
--gold-rgb: 154,125,10;
--gold-hi: #c2a02e;
--gold-dim: #576378;
--sel: #9a7d0a;
--sel-rgb: 154,125,10;
--sel-hi: #c2a02e;
--timer-normal: #394150;
--timer-glow: 0 1px 1px rgba(0,0,0,0.22);
--timer-bg: rgba(255,255,255,0.92);
--chrome-tint: rgba(0,0,0,0.06);
--pos: #1e7e43;
--neg: #c0392b;
--info: #2a6fb0;
--green-rgb: 30,126,67;
--red-rgb: 166,47,34;
--blue-rgb: 42,111,176;
--green2-rgb: 30,126,67;
--orange-rgb: 179,94,16;
--on-green: #11532b;
--ld-quit-fg: #a62f22;
--ld-create-fg: #1e7e43;
--wp-need-fg: #b35e10;
--cream: #1d222b;
--field-bg: #ffffff;
--inset: rgba(0,0,0,0.06);
--inset-hi: rgba(0,0,0,0.08);
--on-gold: #fdf6e6;
--text: #576378;
--text-hi: #1d222b;
--red: #a62f22;
--green: #1e7e43;
--orange: #b35e10;
--border: rgba(60,72,90,0.16);
--border-hi: rgba(var(--gold-rgb), 0.45);
--card-back: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20140%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27h%27%20cx%3D%2750%25%27%20cy%3D%2744%25%27%20r%3D%2780%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%232c313c%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%230c0e12%27%2F%3E%3C%2FradialGradient%3E%3Cpattern%20id%3D%27l%27%20width%3D%2714%27%20height%3D%2714%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20d%3D%27M7%200L14%207L7%2014L0%207Z%27%20fill%3D%27none%27%20stroke%3D%27%236b7689%27%20stroke-width%3D%270.6%27%20opacity%3D%270.4%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%270.8%27%20fill%3D%27%236b7689%27%20opacity%3D%270.45%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%27%20height%3D%27140%27%20fill%3D%27url%28%23h%29%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%2788%27%20height%3D%27128%27%20rx%3D%275%27%20fill%3D%27url%28%23l%29%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%2790%27%20height%3D%27130%27%20rx%3D%277%27%20fill%3D%27none%27%20stroke%3D%27%236b7689%27%20stroke-width%3D%271.4%27%2F%3E%3Crect%20x%3D%278.5%27%20y%3D%278.5%27%20width%3D%2783%27%20height%3D%27123%27%20rx%3D%275%27%20fill%3D%27none%27%20stroke%3D%27%233a4254%27%20stroke-width%3D%270.6%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2770%27%20rx%3D%2725%27%20ry%3D%2737%27%20fill%3D%27%231b1e24%27%20stroke%3D%27%236b7689%27%20stroke-width%3D%270.9%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2770%27%20rx%3D%2721%27%20ry%3D%2732.5%27%20fill%3D%27none%27%20stroke%3D%27%233a4254%27%20stroke-width%3D%270.5%27%2F%3E%3Ctext%20x%3D%2750%27%20y%3D%2784%27%20font-size%3D%2738%27%20text-anchor%3D%27middle%27%20fill%3D%27%23a0acc4%27%20font-family%3D%27Georgia%2Cserif%27%3E%E2%99%A0%3C%2Ftext%3E%3C%2Fsvg%3E");
}
/* Inter : chiffres tabulaires pour aligner stacks/mises sur les thèmes officiels. */
:root[data-theme="pokerth"], :root[data-theme="pokerth-light"] { font-variant-numeric: tabular-nums; }
/* ── Palette : Feutre rouge (axe "Palette") ── feutre + UI + popups en rouge.
Comme :root/dark, ne fait qu'ecraser les variables. Voir theme.mjs. */
:root[data-theme="redfelt"] {
--felt: #2c1012;
--felt-mid: #3a1418;
--felt-hi: #4c1c20;
--felt-base-hi: #8e1e1e;
--felt-base-mid: #4a0e0e;
--felt-base-lo: #280606;
--rail: #5a2410;
--rail-dark: #2e1206;
--rail-glow: rgba(150,40,40,0.30);
--panel: rgba(26,8,10,0.93);
--panel-hi: rgba(38,12,14,0.94);
--gold: #c8a84a;
--gold-hi: #e0c070;
--gold-dim: #7a6428;
--cream: #f2e6e2;
--field-bg: #1e0a0c;
--inset: rgba(255,255,255,0.05);
--inset-hi: rgba(255,255,255,0.08);
--on-gold: #110900;
--text: #bd9d9a;
--text-hi: #ecd6d2;
--red: #c0392b;
--green: #27ae60;
--orange: #e67e22;
--border: rgba(var(--gold-rgb), 0.25);
--border-hi: rgba(var(--gold-rgb), 0.65);
--modal-bg: linear-gradient(160deg, #2c0e10 0%, #3c1519 50%, #1f0709 100%);
--body-glow: rgba(140,40,40,0.16);
}
/* ── Tapis (axe "Tapis", choisi via le menu dedie) ─ surcharge la SURFACE
de la table (feutre + lisere) independamment de la Palette.
Defaut (vert) = :root ci-dessus. Voir public/modules/theme.mjs. */
:root[data-table="pokerth"] {
--felt-base-hi: #008c58;
--felt-base-mid: #006a44;
--felt-base-lo: #073120;
--rail: #1d222b;
--rail-dark: #12161d;
--rail-glow: rgba(0,140,88,0.20);
}
:root[data-table="blue"] {
--felt-base-hi: #1f6aa8;
--felt-base-mid: #124b78;
--felt-base-lo: #08233a;
}
:root[data-table="bordeaux"] {
--felt-base-hi: #8a1e2e;
--felt-base-mid: #5e0f1d;
--felt-base-lo: #330810;
}
:root[data-table="slate"] {
--felt-base-hi: #3a4150;
--felt-base-mid: #232730;
--felt-base-lo: #14171d;
--rail: #2b2f38;
--rail-dark: #15171c;
--rail-glow: rgba(120,130,150,0.18);
}
/* Feutre texture (photo) — garde l'oval + le lisere CSS, remplace seulement
le remplissage par un vrai feutre extrait de l'image PokerTH (sans lisere,
donc pas de double lisere ni de distorsion). Asset : /table/felt-green.jpg
(PokerTH, AGPL-3.0). */
:root[data-table="photo"] .felt-oval {
background:
radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.40) 100%),
url("/table/felt-green.jpg") center / cover no-repeat;
}
/* Table « image complète » — une table importée marquée full:true (tables.json /
themes.json) remplace TOUT le rendu CSS du tapis (bordure, liserés box-shadow,
liseré ::before, dégradés texture/halo, forme ovale) pour n'afficher QUE l'image,
centrée et entière (contain). Les feutres-texture (photo, gallery sans full) ne
sont pas affectés : eux gardent l'ovale + le liseré. L'image vit dans --table-img
(URL nue, sans cover) ; data-table-full="1" est posé par theme.mjs et l'applier . */
:root[data-table-full="1"] .felt-oval {
background: var(--table-img, none) center / contain no-repeat;
border: 0;
border-radius: 0;
box-shadow: none;
filter: drop-shadow(0 12px 18px rgba(0,0,0,0.40));
}
:root[data-table-full="1"] .felt-oval::before { display: none; }
/* Full image (data-table-full): the table PNG carries its own felt + rail with
transparent corners, so the frame/zone behind it must stay transparent —
otherwise a light panel shows through the corners. Scoped to full mode only. */
:root[data-table-full="1"] .table-scaler,
:root[data-table-full="1"] .table-zone { background: transparent !important; }
/* Table « Fullscreen » : l'image du pack part en fond plein ecran (--wallpaper,
active par data-bg-img -> regle body.in-game ci-dessous) et l'ovale devient
invisible. data-table-fs est pose par theme.mjs (pack table en mode fullscreen). */
:root[data-table-fs="1"] .felt-oval {
background: transparent;
border: 0;
box-shadow: none;
}
:root[data-table-fs="1"] .felt-oval::before { display: none; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
height: 100dvh;
overflow: hidden;
overscroll-behavior: none;
font-family: var(--ff-mono);
background: var(--felt);
color: var(--text);
}
body {
background-image:
radial-gradient(ellipse 140% 70% at 50% 0%, var(--body-glow) 0%, transparent 65%),
repeating-linear-gradient(45deg, transparent, transparent 3px,
rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 6px);
}
/* Fond « Fullscreen » : l'image (--wallpaper) est posee sur la ZONE DE TABLE
(au-dessus de la barre d'action) et non sur tout le body -> le bas de l'image
(lisere) reste visible juste au-dessus de la barre. Ancrage bas + cover.
.table-zone (flex:1) occupe la zone de jeu au-dessus de la barre d'action ;
l'ovale (.felt-oval) est transparent et laisse voir ce fond. data-table-fs est
pose par theme.mjs. S'applique a TOUS les tapis en mode fullscreen. */
/* Fullscreen : le feutre couvre TOUT l'ecran de jeu (#s-game, 100dvh) -> il
descend jusqu'en bas, derriere la barre d'action, et l'entoure. La zone de
table devient transparente (le fond vient de #s-game), et la barre d'action
+ player-bar sont transparentes ; seul le panneau des boutons (.action-grid)
flotte sur le feutre. Scoping data-table-fs -> n'affecte que le mode fullscreen. */
:root[data-table-fs="1"] #s-game {
background-image:
linear-gradient(rgba(0,0,0,0.14), rgba(0,0,0,0.14)),
var(--wallpaper, none);
background-size: var(--wallpaper-size, cover); /* 2.1.3: TableBackgroundZoom (import) surcharge cover */
background-position: var(--wallpaper-pos, center bottom);
background-repeat: no-repeat;
}
:root[data-table-fs="1"] .table-zone { background-image: none; }
:root[data-table-fs="1"] .my-zone,
:root[data-table-fs="1"] .player-bar { background: transparent !important; border-top: 0 !important; }
:root[data-table-fs="1"] .my-zone .action-grid {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px 10px;
box-shadow: 0 6px 20px rgba(0,0,0,0.38);
}
/* Panneau d'attente (« EN ATTENTE / + BOTS ») : hors partie il occupe la barre
d'action -> lui aussi doit flotter sur le feutre avec le fond de palette,
sinon il devient transparent en fullscreen. */
:root[data-table-fs="1"] .my-zone .waiting-panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.38);
}
/* ─── SCREENS ─── */
.screen { display: none; height: 100vh; height: 100dvh; }
:fullscreen { background: var(--felt); }
:-webkit-full-screen { background: var(--felt); }
:-moz-full-screen { background: var(--felt); }
.screen.active { display: flex; }
/* ── Écran dédié « Créer une partie » (page pleine, garde le formulaire existant) ── */
#s-create { flex-direction: column; background: var(--field-bg); }
.cp-header {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
border-bottom: 1px solid var(--border);
background: var(--chrome-tint);
flex-shrink: 0;
}
.cp-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: var(--field-bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-family: var(--ff-display);
font-size: 0.9rem;
cursor: pointer;
}
.cp-back:hover { border-color: var(--gold-dim); }
.cp-back-ico { font-size: 1.05rem; line-height: 1; }
.cp-title {
font-family: var(--ff-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.cp-scroll { flex: 1; overflow-y: auto; padding: 20px 18px 40px; }
.cp-body { max-width: 720px; margin: 0 auto; }
.cp-body #create-form { display: block; }
/* ── Champs « Créer une partie » façon officiel (steppers / toggles / sections) ── */
.cf-block { margin-bottom: 14px; }
.cf-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; }
.cf-row-col { flex-direction: column; align-items: stretch; gap: 6px; }
.cf-lbl { font-size: 0.9rem; color: var(--text); font-weight: 500; }
.cf-input, .cf-select {
width: 100%; box-sizing: border-box;
background: var(--field-bg); border: 1px solid var(--border); border-radius: 8px;
color: var(--text); padding: 9px 12px; font-size: 0.92rem; outline: none;
}
.cf-input:focus, .cf-select:focus { border-color: var(--gold-dim); }
.cf-sec {
margin: 16px 0 2px; padding-top: 14px;
font-size: 0.82rem; font-weight: 700; color: var(--text);
letter-spacing: 0.02em; text-transform: none;
border-top: 1px solid var(--border);
}
/* Stepper − valeur + */
.cf-step { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--field-bg); }
.cf-step-btn {
width: 34px; height: 34px; background: transparent; border: none;
color: var(--text); font-size: 1.15rem; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.cf-step-btn:hover { background: rgba(127,127,127,0.14); }
.cf-step-num {
width: 72px; border: none; background: transparent; color: var(--text);
text-align: center; font-size: 0.92rem; font-family: var(--ff-display);
outline: none; -moz-appearance: textfield;
}
.cf-step-num::-webkit-inner-spin-button, .cf-step-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cf-step-sm .cf-step-num { width: 48px; }
/* Toggle switch */
.cf-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; flex: none; }
.cf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-switch-tr { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background 0.16s; }
.cf-switch-tr::before {
content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
background: #fff; border-radius: 50%; transition: transform 0.16s; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.cf-switch input:checked + .cf-switch-tr { background: #2f81f7; }
.cf-switch input:checked + .cf-switch-tr::before { transform: translateX(20px); }
/* Intervalle blindes : radios + stepper */
.cf-interval { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.cf-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--text); cursor: pointer; }
.cf-radio input { accent-color: #2f81f7; }
.cf-create-btn { flex: 1; padding: 12px; }
/* ══════════════════════════════════════════
CONNECT SCREEN
══════════════════════════════════════════ */
#s-connect {
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
padding: 20px 16px;
/* PokerTH official login backdrop (flames) — login screen only, theme-agnostic.
Dark veil keeps the centered .card readable over the bright artwork. */
background:
linear-gradient(rgba(8,10,14,0.55), rgba(8,10,14,0.68)),
url("/img/pokerth-login-bg.webp") center / cover no-repeat;
}
.form-card, .card {
background: var(--modal-bg);
border: 1px solid var(--border-hi);
border-radius: 4px;
padding: 20px 22px;
width: min(380px, calc(100vw - 32px));
display: flex;
flex-direction: column;
gap: 11px;
box-shadow: 0 12px 40px rgba(0,0,0,0.8);
}
.card-title {
font-family: var(--ff-display);
font-size: 0.7rem;
letter-spacing: 0.3em;
color: var(--gold-dim);
text-transform: uppercase;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.card-logo {
text-align: center;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.card-suits-row { font-size: 1.1rem; letter-spacing: 0.2em; opacity: 0.7; margin-bottom: 4px; }
.card-suits-row .r { color: var(--red); }
.card-title-big {
font-family: var(--ff-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--text-hi);
letter-spacing: 0.12em;
line-height: 1;
}
.card-subtitle { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text); }
.card-chip {
display: block;
margin: 0 auto;
width: 86px; height: 86px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}
/* Small / short screens (e.g. iPhone SE, landscape): compact the login
card so it fits without scrolling. The header block (chip, title, suits,
subtitle) is the biggest space user, so it shrinks the most. !important
overrides the inline sizing set in the markup. */
@media (max-height: 760px) {
#s-connect { padding: 8px 14px; }
.card { gap: 8px; padding: 14px 18px; }
.card-logo { padding: 8px 0 10px !important; }
.card-chip { width: 54px; height: 54px; }
.card-title-big { font-size: 1.5rem !important; margin-top: 6px !important; }
.card-suits-row { font-size: 0.9rem !important; margin-top: 5px !important; }
.card-subtitle { font-size: 0.55rem !important; margin-top: 4px !important; }
.f { gap: 4px; }
.f input { padding: 7px 10px; font-size: 0.85rem; }
.sel-wrap select { padding: 7px 30px 7px 10px; }
#av-trigger { width: 38px !important; height: 38px !important; font-size: 1.2rem !important; }
.btn-primary { padding: 10px; }
.tls-row { font-size: 0.66rem; }
}
@media (max-height: 640px) {
.card-chip { width: 44px; height: 44px; }
.card-title-big { font-size: 1.3rem !important; }
.card-suits-row { display: none !important; }
.card { gap: 6px; }
}
.sel-wrap { position: relative; }
.sel-wrap select {
-webkit-appearance: none; appearance: none;
width: 100%;
background: var(--field-bg);
border: 1px solid var(--border);
border-radius: 2px;
color: var(--cream);
padding: 9px 32px 9px 11px;
font-family: var(--ff-mono);
font-size: 0.88rem;
outline: none; cursor: pointer;
}
.sel-wrap select:focus { border-color: var(--gold); }
.sel-wrap select option { background: var(--field-bg); color: var(--cream); }
.sel-arr { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none; font-size: 0.8rem; }
.avatar-picker {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
.av-btn {
background: var(--inset);
border: 2px solid var(--border);
border-radius: 6px;
font-size: 1.25rem;
cursor: pointer;
padding: 4px 2px;
transition: border-color 0.15s, transform 0.1s, background 0.15s;
line-height: 1.2;
text-align: center;
color: var(--text-hi);
}
.av-btn:hover { border-color: var(--gold-dim); transform: scale(1.1); background: rgba(var(--gold-rgb), 0.08); }
.av-btn.selected { border-color: var(--sel,var(--gold)); background: rgba(var(--sel-rgb,var(--gold-rgb)), 0.18); box-shadow: 0 0 6px rgba(var(--sel-rgb,var(--gold-rgb)), 0.3); }
.av-btn.av-none { font-size: 0.72rem; font-family: var(--ff-display); color: var(--text); letter-spacing: 0.05em; }
/* Emoji avatar dans le siège */
.seat-avatar.emoji-av .seat-initial { font-size: 1.05em; line-height: 1; }
/* ── Clickable pseudo pill in the lobby header ──
The #h-nick pill in the lobby now contains a tiny avatar (emoji or
PokerTH image) + the name. .pill-clickable adds the cursor + hover
feedback without disturbing the existing .pill positioning. */
.pill.pill-clickable {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: background 0.15s, border-color 0.15s;
}
.pill.pill-clickable:hover {
background: rgba(var(--gold-rgb), 0.22);
border-color: var(--gold-dim);
}
.pill .h-nick-av {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
font-size: 0.9em;
line-height: 1;
}
.pill .h-nick-av img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
pointer-events: none;
display: block;
}
/* ── Clickable "TABLE" label in the game header ──
Subtle underline on hover so the user notices it's interactive,
without changing the visual weight of the header. */
#g-name.g-name-clickable {
cursor: pointer;
border-bottom: 1px dashed transparent;
transition: border-color 0.15s, color 0.15s;
}
#g-name.g-name-clickable:hover {
border-bottom-color: var(--gold);
color: var(--gold);
}
/* ── Game-info modal (opened by clicking the "TABLE" label) ──
Centered card with backdrop. The card holds a title (table name)
+ a subtitle (admin/private badges), and a body filled by JS with
a 2-column grid of label/value rows grouped by section. */
#game-info-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.gim-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.gim-card {
position: relative;
background: var(--modal-bg);
border: 1px solid var(--gold-dim);
border-radius: 8px;
padding: 18px 18px 16px;
width: min(360px, 100%);
max-height: min(80vh, 600px);
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
gap: 12px;
animation: slideDown 0.18s ease;
-webkit-overflow-scrolling: touch;
}
.gim-close {
position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
color: var(--text);
cursor: pointer;
font-size: 1rem;
padding: 2px 6px;
line-height: 1;
z-index: 2;
}
.gim-close:hover { color: var(--gold); }
.gim-header {
text-align: center;
border-bottom: 1px solid var(--border);
padding-bottom: 10px;
padding-right: 24px; /* keep title from going under the ✕ */
}
.gim-title {
font-size: 1.15rem;
color: var(--cream);
font-family: var(--ff-display);
font-weight: 600;
letter-spacing: 0.04em;
word-break: break-word;
}
.gim-subtitle {
font-size: 0.68rem;
color: var(--gold-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.gim-badge {
background: rgba(var(--gold-rgb), 0.12);
border: 1px solid var(--gold-dim);
border-radius: 3px;
padding: 1px 6px;
color: var(--gold);
letter-spacing: 0.1em;
font-size: 0.62rem;
}
.gim-section {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Breathing room above each section heading except the first, so
'CONFIGURATION' / 'GAME STATE' don't sit tight against the row above. */
.gim-section + .gim-section { margin-top: 12px; }
.gim-section-title {
font-size: 0.6rem;
color: var(--gold-dim);
letter-spacing: 0.14em;
text-transform: uppercase;
border-bottom: 1px solid rgba(var(--gold-rgb), 0.15);
padding-bottom: 4px;
margin-bottom: 2px;
}
.gim-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 3px 0;
font-size: 0.78rem;
}
.gim-row-label {
color: var(--text);
font-family: var(--ff-mono);
}
.gim-row-value {
color: var(--cream);
font-family: var(--ff-mono);
font-weight: 500;
text-align: right;
}
/* ── Player-info modal (opened by clicking #h-nick) ──
Centered card with backdrop. The pim-card is sized so it fits
comfortably on phones; the avatar is big (~96px) so the user
can clearly see what they have. */
#player-info-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.pim-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.pim-card {
position: relative;
background: var(--modal-bg);
border: 1px solid var(--gold-dim);
border-radius: 8px;
padding: 24px 20px 18px;
min-width: 260px;
max-width: 320px;
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
animation: slideDown 0.18s ease;
}
/* Children keep their intrinsic height; the card scrolls instead of squashing
them (notably the avatar) when the cups make it taller than the viewport. */
.pim-card > * { flex-shrink: 0; }
.pim-close {
position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
color: var(--text);
cursor: pointer;
font-size: 1rem;
padding: 2px 6px;
line-height: 1;
}
.pim-close:hover { color: var(--gold); }
.pim-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
background: rgba(0,0,0,0.5);
border: 2px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
line-height: 1;
overflow: hidden;
box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.35);
}
.pim-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
pointer-events: none;
display: block;
}
.pim-avatar.is-letter {
font-size: 2.4rem;
font-family: var(--ff-display);
font-weight: 700;
color: var(--gold);
}
/* Avatar cliquable : ouvre le sélecteur d'avatar, comme le bouton. */
.pim-avatar-clickable { cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; }
.pim-avatar-clickable:hover,
.pim-avatar-clickable:focus-visible {
box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.75);
transform: scale(1.03);
outline: none;
}
.pim-name {
font-size: 1.05rem;
color: var(--cream);
font-weight: 600;
text-align: center;
word-break: break-word;
}
/* Drapeau pays sous l'avatar (popup de profil) */
.pim-flag {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.8rem;
letter-spacing: 0.06em;
color: var(--gold-dim);
margin-top: -2px;
}
.pim-flag-code { font-family: var(--ff-mono); }
/* Image drapeau auto-hébergée (rendu identique sur tous les OS). */
.cc-flag {
display: inline-block;
vertical-align: middle;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 0.5px rgba(0,0,0,0.35);
}
.cc-flag-lg { width: 26px; height: 19px; border-radius: 3px; }
/* ── Bloc stats du popup de profil : onglets SESSION/TOTAL/CLASSEMENT,
identiques au panneau en jeu (réutilise .stats-tabs/.stats-body/.stats-reset). ── */
.pim-stats {
width: 100%;
margin: 4px 0 2px;
}
.pim-stats .stats-tabs { margin-bottom: 4px; }
.pim-stats .stats-body { padding: 8px 2px 2px; }
/* ── Popup d'info joueur : bloc « adversaire » (rôle, infos en jeu, lien
profil). Entièrement piloté par les variables de thème → suit la palette
active. Seules les pastilles SB/BB gardent le bleu/rouge des jetons de
blinds posés sur le tapis (jetons de jeu, identiques sur tous les thèmes). ── */
.pim-info {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.pim-role {
font-size: 0.82rem;
letter-spacing: 0.04em;
color: var(--gold-dim);
text-transform: uppercase;
font-family: var(--ff-mono);
}
.pim-ig {
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
background: var(--field-bg);
border: 1px solid var(--border);
border-radius: 6px;
}
.pim-ig-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-size: 0.85rem;
}
.pim-ig-k { color: var(--gold-dim); }
.pim-ig-v { color: var(--cream); font-family: var(--ff-mono); font-weight: 700; }
.pim-ig-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 2px;
}
.pim-status {
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--gold-dim);
border-radius: 999px;
padding: 2px 9px;
}
.pim-pos-wrap { display: inline-flex; gap: 4px; }
.pim-pos {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 5px;
font-size: 0.62rem;
font-weight: 700;
font-family: var(--ff-mono);
border-radius: 999px;
color: #fff;
}
.pim-pos-d { background: var(--gold); color: #1a1a1a; }
.pim-pos-sb { background: #1565c0; }
.pim-pos-bb { background: #b71c1c; }
.pim-profile-link {
font-size: 0.8rem;
color: var(--gold);
text-decoration: none;
border-bottom: 1px dotted var(--gold-dim);
padding-bottom: 1px;
}
.pim-profile-link:hover { color: var(--cream); border-bottom-color: var(--gold); }
/* ── Avatar picker shown as a floating modal (from the lobby) ──
The existing #avatar-popup lives statically inside the connect
form and is positioned via the surrounding flow. When opened from
the lobby we add .avatar-popup-as-modal to make it float centered.
The JS detaches and re-attaches it to body so this rule applies
regardless of where it lives in the DOM. */
#avatar-popup.avatar-popup-as-modal {
/* Fixed full-viewport "backdrop" surface; the popup's own
header+grid form the visible card, centered via flex. */
position: fixed;
inset: 0;
z-index: 10000;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.65);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
padding: 16px;
border: none;
border-radius: 0;
/* Reset the small overflow:hidden / fixed border of the static
popup -- we re-apply card styling below on the children. */
overflow: visible;
}
#avatar-popup.avatar-popup-as-modal .avp-header,
#avatar-popup.avatar-popup-as-modal .avp-cats,
#avatar-popup.avatar-popup-as-modal .avp-grid {
/* These children become the visible "card". All stretched to the
same fixed width so they look like one panel (header on top, the
category tabs in the middle, the emoji grid below). */
background: var(--modal-bg);
width: min(360px, 100%);
max-width: 360px;
border-left: 1px solid var(--gold-dim);
border-right: 1px solid var(--gold-dim);
}
#avatar-popup.avatar-popup-as-modal .avp-header {
border-top: 1px solid var(--gold-dim);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
#avatar-popup.avatar-popup-as-modal .avp-grid {
max-height: 60vh;
overflow-y: auto;
border-bottom: 1px solid var(--gold-dim);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
/* Smooth scroll on iOS */
-webkit-overflow-scrolling: touch;
}
/* ══ POPUP AVATAR ══ */
#avatar-popup {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0;
overflow: hidden;
animation: slideDown 0.2s ease;
}
.avp-header {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px;
font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gold-dim);
border-bottom: 1px solid var(--border);
background: var(--chrome-tint);
}
.avp-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 4px;
padding: 10px;
/* Cap the height + scroll so a big filtered category can't push the
grid past the SE CONNECTER button / footer on the connect screen.
The lobby modal overrides this with its own 60vh cap below. */
max-height: 42vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ── Category tab row above the emoji grid ── */
.avp-cats {
display: flex;
gap: 3px;
padding: 7px 8px;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.25);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox: hide the scrollbar, swipe instead */
}
.avp-cats::-webkit-scrollbar { display: none; } /* WebKit: hide too */
.avp-cat {
flex: 0 0 auto;
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
background: var(--inset);
border: 1px solid transparent;
border-radius: 6px;
font-size: 1.15rem;
cursor: pointer;
transition: border-color 0.12s, background 0.12s, transform 0.1s;
padding: 0;
}
.avp-cat:hover { background: rgba(var(--gold-rgb), 0.1); transform: scale(1.1); }
.avp-cat.selected {
border-color: var(--gold);
background: rgba(var(--gold-rgb), 0.2);
}
.avp-btn {
aspect-ratio: 1;
background: var(--inset);
border: 2px solid transparent;
border-radius: 6px;
font-size: 1.3rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.12s, transform 0.1s, background 0.12s;
padding: 0;
}
.avp-btn:hover { border-color: var(--gold-dim); transform: scale(1.15); background: rgba(var(--gold-rgb), 0.1); }
.avp-btn.selected { border-color: var(--sel,var(--gold)); background: rgba(var(--sel-rgb,var(--gold-rgb)), 0.2); }
/* Example-avatar gallery thumbnails: photo fills the grid cell instead
of an emoji glyph (the gallery is now a category tab, not a modal). */
.avp-gal-item { padding: 0; overflow: hidden; }
.avp-gal-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; pointer-events: none; }
.avp-none { font-size: 0.7rem !important; font-family: var(--ff-display); color: var(--text); }
/* PokerTH official avatar entry -- accent color to distinguish it
from the emoji costumes (this is a real identity, not a mask).
Hosts an ![]()
of the PokerTH chip logo; tighten padding so the
image fills the button nicely and centers properly. */
.avp-pth {
background: rgba(var(--green-rgb), 0.12) !important;
border-color: rgba(var(--green-rgb), 0.4) !important;
padding: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.avp-pth:hover { background: rgba(var(--green-rgb), 0.22) !important; border-color: var(--green) !important; }
.avp-pth.selected { background: rgba(var(--green-rgb), 0.3) !important; border-color: var(--green) !important; }
#av-trigger.has-avatar { border-color: var(--gold-dim); background: rgba(var(--gold-rgb), 0.1); }
/* Emoji avatar dans le siège */
.seat-avatar.emoji-av .seat-initial { font-size: 1.1em; line-height: 1; }
.tls-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 0.76rem; color: var(--text); line-height: 1.4; }
.row2 { display: flex; gap: 12px; }
.row2 .f:first-child { flex: 1; }
.row2 .f-sm { width: 110px; }
/* Roue crantée « Plus d'options » à droite du sélecteur de mode : même langage
visuel que le bouton avatar et la roue du lobby. Passe en or et l'icône pivote
quand les options sont ouvertes. Le bloc avancé reprend le rythme vertical
(gap 11px) de la carte et s'ouvre avec un léger fondu. */
.conn-adv-gear {
flex-shrink: 0;
width: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--inset);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--gold-dim);
cursor: pointer;
font-size: 1.15rem;
line-height: 1;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.conn-adv-gear:hover {
color: var(--gold);
border-color: var(--gold-dim);
background: rgba(255,255,255,0.1);
}
.conn-adv-gear.open {
color: var(--gold);
border-color: var(--gold);
background: rgba(var(--gold-rgb), 0.12);
}
.conn-adv-gear-ico {
display: inline-block;
transition: transform 0.3s ease;
}
.conn-adv-gear.open .conn-adv-gear-ico { transform: rotate(90deg); }
#conn-advanced { display: flex; flex-direction: column; gap: 11px; }
#conn-advanced.anim { animation: connAdvIn 0.28s ease; }
@keyframes connAdvIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.f {
display: flex;
flex-direction: column;
gap: 5px;
}
.f label {
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-dim);
}
.f input {
background: var(--field-bg);
border: 1px solid var(--border);
border-radius: 2px;
padding: 9px 11px;
color: var(--cream);
font-family: var(--ff-mono);
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.f input:focus {
border-color: var(--gold);
background: rgba(var(--gold-rgb), 0.05);
}
.btn-primary {
background: #2b3444;
color: #ffffff;
border: none;
padding: 12px;
font-family: var(--ff-display);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.15em;
cursor: pointer;
border-radius: 2px;
transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}
.btn-primary:hover { background: #384252; box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
.btn-primary:active { transform: scale(0.98); }
.status {
min-height: 18px;
font-size: 0.78rem;
text-align: center;
color: var(--text);
transition: color 0.2s;
}
.status.ok { color: var(--green); }
.status.err { color: var(--red); }
/* ══════════════════════════════════════════
LOBBY SCREEN
══════════════════════════════════════════ */
#s-lobby { flex-direction: column; overflow-y: auto; }
#create-form.open { display: block !important; }
/* Header */
.header {
display: flex;
align-items: center;
padding: clamp(4px,1.2vh,10px) clamp(8px,2vw,20px);
background: var(--panel);
border-bottom: 1px solid var(--border);
/* Wider gap so the action buttons are more spaced out horizontally
(requested by narmod). Was clamp(4px,1.2vw,14px). */
gap: clamp(6px,2.2vw,18px);
flex-shrink: 0;
min-height: 36px;
overflow: hidden;
}
.header-brand {
font-family: var(--ff-display);
font-size: clamp(0.7rem, 2vw, 1.05rem);
color: var(--text-hi);
letter-spacing: 0.08em;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
flex-shrink: 0;
}
.header-brand span { opacity: 0.6; font-size: 1.1em; }
.header-chip {
height: 1.6em;
width: auto;
vertical-align: middle;
display: inline-block;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
/* The lobby ♠ is a tap target to reveal/hide the POKERTH word on phones. */
#lobby-brand .brand-suit {
cursor: pointer;
opacity: 0.9;
transition: opacity 0.15s, transform 0.15s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
#lobby-brand .brand-suit:hover { opacity: 0.95; }
#lobby-brand .brand-suit:active { transform: scale(0.85); }
#lobby-brand.brand-open .brand-suit { opacity: 1; }
.header-pills {
flex: 1;
display: flex;
gap: clamp(3px, 1vw, 10px);
min-width: 0;
overflow: hidden;
}
.pill {
background: rgba(var(--gold-rgb), 0.1);
border: 1px solid var(--border);
border-radius: 2px;
padding: clamp(1px,0.4vh,3px) clamp(4px,1vw,10px);
font-size: clamp(0.58rem, 1.4vw, 0.75rem);
color: var(--gold);
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
align-items: center;
}
.lang-btn.active { background: rgba(var(--sel-rgb,var(--gold-rgb)), 0.2) !important; border-color: var(--gold-dim) !important; color: var(--sel,var(--gold)) !important; }
.btn-watch {
background: rgba(var(--blue-rgb), 0.12);
border: 1px solid rgba(var(--blue-rgb), 0.35);
color: var(--info);
padding: 4px 10px;
font-family: var(--ff-display);
font-size: 0.68rem;
font-weight: 700;
border-radius: 2px;
cursor: pointer;
letter-spacing: 0.08em;
transition: background 0.15s;
flex-shrink: 0;
}
.btn-watch:hover { background: rgba(var(--blue-rgb), 0.25); }
.btn-sm {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: clamp(3px,0.6vh,5px) clamp(6px,1.2vw,14px);
font-family: var(--ff-mono);
font-size: clamp(0.62rem, 1.4vw, 0.78rem);
cursor: pointer;
border-radius: 2px;
transition: border-color 0.2s, color 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.btn-sm:hover { border-color: var(--border-hi); color: var(--text-hi); }
/* Uniformisation hauteur des boutons dans tous les headers */
.header .btn-sm {
height: 30px;
min-width: 30px;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 0.75rem;
line-height: 1;
color: var(--text-hi);
}
/* Bouton carré (icône seule) — un peu plus large pour respirer */
.header .btn-icon {
width: 34px;
padding: 0;
background: var(--inset);
}
/* ── Unread-chat badge ── */
/* Red counter pinned to the top-right of a 💬 button (game/lobby header
and the floating FAB) so a closed chat panel never hides new messages. */
#chat-toggle-btn, #lobby-chat-btn, #gchat-fab { position: relative; }
.chat-badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--red);
color: #fff;
font-family: var(--ff-mono);
font-size: 0.62rem;
font-weight: 700;
line-height: 16px;
text-align: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
pointer-events: none;
z-index: 6;
animation: chatBadgePop 0.25s ease;
}
@keyframes chatBadgePop {
0% { transform: scale(0); }
70% { transform: scale(1.25); }
100% { transform: scale(1); }
}
#gchat-fab .chat-badge { top: -3px; right: -3px; }
/* Body */
.lobby-body {
flex: 1;
min-height: 0; /* allow shrinking */
display: flex;
overflow: hidden;
}
/* ── Games panel ── */
.pane-games {
flex: 1;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
overflow: hidden;
}
.create-bar {
display: flex; gap: 8px; padding: 10px 12px;
background: rgba(var(--green-rgb), 0.06);
border-bottom: 1px solid var(--border);
}
.btn-create {
flex: 1; background: rgba(var(--green-rgb), 0.15);
border: 1px solid var(--green); color: var(--green);
padding: 9px 14px; font-family: var(--ff-display);
font-size: 0.8rem; font-weight: 700; cursor: pointer; border-radius: 4px;
}
.btn-create:hover { background: rgba(var(--green-rgb), 0.28); }
.btn-create:disabled { opacity: 0.5; cursor: default; }
.btn-create-manual {
background: var(--inset); border: 1px solid var(--border);
color: var(--text); padding: 9px 12px; font-size: 0.78rem;
cursor: pointer; border-radius: 4px; white-space: nowrap;
}
.btn-create-manual:hover { background: rgba(255,255,255,0.1); }
.create-form { padding: 12px 14px; background: var(--modal-bg); border-bottom: 1px solid var(--border); }
.create-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 12px; margin-bottom: 0; }
/* Le nom de la table occupe toute la largeur du cadre : on sort ce champ de la
grille auto-fill (sinon il reste cantonné à une colonne de ~130px) et on force
l'input à 100% de la largeur du cadre. */
.cf-name-wrap { display: block; }
.cf-name-wrap .cf { width: 100%; }
.cf-name-wrap .cf input { width: 100%; box-sizing: border-box; }
.cf { display: flex; flex-direction: column; gap: 3px; }
.cf-sm { min-width: 80px; }
.cf label { font-size: 0.55rem; color: var(--gold-dim); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf input, .cf select { background: var(--field-bg); border: 1px solid var(--border); border-radius: 2px; color: var(--cream); padding: 5px 7px; font-family: var(--ff-mono); font-size: 0.82rem; outline: none; width: 100%; }
.cf input:focus, .cf select:focus { border-color: var(--gold); }
.pane-header {
padding: 10px 16px;
border-bottom: 1px solid var(--border);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-dim);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.games-scroll {
flex: 1;
overflow-y: auto;
}
.game-row {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 16px;
border-bottom: 1px solid rgba(var(--gold-rgb), 0.07);
cursor: pointer;
transition: background 0.12s;
}
.game-row:hover { background: var(--inset-hi); }
.dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.dot-open { background: var(--green); box-shadow: 0 0 6px rgba(var(--green-rgb), 0.5); }
.dot-run { background: var(--orange); }
.dot-closed { background: #555; }
.game-info { flex: 1; min-width: 0; }
.game-name {
color: var(--text-hi);
font-size: 0.88rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.game-meta {
font-size: 0.72rem;
color: var(--text);
margin-top: 2px;
display: flex;
gap: 10px;
}
.game-type { color: var(--gold-dim); }
.game-count { color: var(--gold); font-weight: 500; }
.empty {
padding: 48px;
text-align: center;
color: rgba(154,170,146,0.35);
font-size: 0.82rem;
line-height: 2;
}
/* ── Chat panel ── */
.chat-msgs {
flex: 1;
overflow-y: auto;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 5px;
}
.msg {
font-size: 0.8rem;
line-height: 1.45;
word-break: break-word;
}
.msg .who { color: var(--gold); font-weight: 700; }
.msg .txt { color: var(--text-hi); }
.msg.sys { color: var(--text); font-size: 0.75rem; font-style: italic; }
.msg.reaction { font-size: 1.1rem; opacity: 0.85; font-style: italic; }
.msg.bc { color: var(--gold-dim); border-left: 2px solid var(--gold-dim); padding-left: 6px; }
.msg.mine .who { color: var(--green); }
.chat-input {
padding: 8px 10px;
border-top: 1px solid var(--border);
display: flex;
gap: 8px;
flex-shrink: 0;
}
.chat-input input {
flex: 1;
background: var(--field-bg);
border: 1px solid var(--border);
color: var(--cream);
padding: 7px 10px;
font-family: var(--ff-mono);
font-size: 0.82rem;
outline: none;
border-radius: 2px;
}
.chat-input input:focus { border-color: var(--gold); }
.chat-send {
background: var(--gold);
color: var(--on-gold);
border: none;
padding: 0 14px;
font-family: var(--ff-display);
font-size: 0.78rem;
cursor: pointer;
border-radius: 2px;
transition: background 0.15s;
}
.chat-send:hover { background: var(--gold-hi); }
/* Lobby chat panel — fond unifié + bordure basse nette + ombre, pour que le
bas de la zone message soit clairement délimité du reste du lobby. */
#lobby-chat-panel {
background: var(--panel);
border-bottom: 2px solid var(--border-hi);
box-shadow: 0 8px 16px rgba(0,0,0,0.5);
position: fixed; /* overlay : ne pousse plus les tables, les recouvre */
top: var(--ovl-top, 48px); /* juste sous le header (comme #players-panel) */
left: 0; right: 0;
z-index: 100;
display: flex;
flex-direction: column;
}
/* Scrollbars */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* Mobile responsive */
/* ══════════════════════════════════
/* ══ POT INFO BAR ══ */
#pot-strip {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 14px;
background: rgba(0,0,0,0.78); /* bandeau QML officiel (bible §7) — noir translucide, lisible sur feutre comme sur chrome clair */
border-bottom: 1px solid rgba(255,255,255,0.08);
flex-shrink: 0;
min-height: 24px;
font-family: var(--ff-display);
letter-spacing: 0.08em;
}
.pot-side {
font-size: clamp(0.6rem, 1.4vw, 0.72rem);
color: #cdd3e0; /* libelle gris clair (QML col200) — lisible sur le bandeau sombre quelle que soit la palette */
min-width: 60px;
}
.pot-right { text-align: right; }
.pot-center {
font-size: clamp(0.68rem, 1.6vw, 0.82rem);
color: var(--sel, #E3C800);
font-weight: 700;
letter-spacing: 0.12em;
text-align: center;
flex: 1;
}
/* Compteur "blinds" cliquable à côté du n° de main dans le bandeau du pot. */
.blinds-next {
display: inline-block;
margin-left: 6px;
padding: 0 6px;
border-radius: 8px;
background: rgba(227,200,0,0.14); /* teinte accent or QML, stable clair/sombre */
border: 1px solid rgba(227,200,0,0.55);
color: var(--sel, #E3C800);
font-family: var(--ff-mono);
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 0.04em;
vertical-align: middle;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.blinds-next:hover, .blinds-next:focus { background: rgba(227,200,0,0.26); border-color: var(--sel, #E3C800); outline: none; }
/* Bandeau d'info/alerte blinds. Centré en haut, masqué par défaut, révélé
via .show (transition). Affiche : ↑ Blinds cur → next · quand. */
.blinds-up-toast {
position: fixed;
top: 64px;
left: 50%;
transform: translate(-50%, -14px) scale(0.9);
z-index: 900;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 4px 8px;
max-width: min(90vw, 360px);
padding: 9px 18px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.96), rgba(var(--gold-rgb), 0.72));
color: var(--on-gold);
font-family: var(--ff-display);
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.25) inset;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2,0.9,0.3,1.3);
}
.blinds-up-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.blinds-up-toast .bu-icon { font-size: 1.05rem; line-height: 1; }
.blinds-up-toast .bu-text { font-size: 0.8rem; text-transform: uppercase; }
.blinds-up-toast .bu-val {
font-family: var(--ff-mono);
font-size: 0.9rem;
font-weight: 700;
background: rgba(0,0,0,0.16);
padding: 1px 8px;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.blinds-up-toast .bu-arrow { opacity: 0.7; }
.blinds-up-toast .bu-when {
font-family: var(--ff-mono);
font-size: 0.72rem;
font-weight: 500;
opacity: 0.85;
}
/* ══ RESPONSIVE OVAL SIZE via CSS custom props ══ */
:root { --oval-w: 440px; --oval-h: 180px; }
@media (min-width: 1100px) { :root { --oval-w: 520px; --oval-h: 210px; } }
@media (max-width: 900px) { :root { --oval-w: 320px; --oval-h: 132px; } }
@media (max-width: 700px) { :root { --oval-w: 240px; --oval-h: 100px; } }
@media (max-width: 740px) and (orientation: portrait) { :root { --oval-w: min(58vw,240px); --oval-h: min(24vw,100px); } }
@media (max-height: 500px) and (orientation: landscape){ :root { --oval-w: min(40vw,240px); --oval-h: min(18vh,88px); } }
RESPONSIVE — orientation-aware
══════════════════════════════════ */
/* ── Confetti rain ── */
@keyframes confettiFall {
0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
85% { opacity: 1; }
100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}
.confetti-piece {
position: fixed;
width: 10px; height: 10px;
top: -20px;
pointer-events: none;
z-index: 700;
border-radius: 2px;
animation: confettiFall linear forwards;
}
/* ── Urgence (≤5s) — pulsation rouge ── */
/* Halo d'urgence (ton tour, <=8s) : ombre FIXE portee par un pseudo-element
promu en couche GPU ; seule l'opacity est animee (composite-only) -> fin du
repaint plein ecran a chaque frame (batterie/chaleur). Rendu visuel identique.
position:fixed -> se cale sur le viewport (= l'ecran de jeu plein ecran),
sans toucher au positionnement de #s-game ni de ses enfants. */
@keyframes urgencyPulse {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#s-game.urgent::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 90;
box-shadow: inset 0 0 60px 10px rgba(var(--red-rgb), 0.22);
will-change: opacity;
animation: urgencyPulse 0.6s ease-in-out infinite;
}
/* ── Transition lobby → table ── */
@keyframes tableEnter {
0% { opacity: 0; transform: scale(0.94); }
100% { opacity: 1; transform: scale(1); }
}
#s-game.entering { animation: tableEnter 0.45s cubic-bezier(.2,.8,.3,1) both; }
/* ── Hover fan mes cartes ── */
.pb-cards:hover .pk:first-child {
transform: rotate(-8deg) translateY(-6px) translateX(-4px);
transition: transform 0.2s ease;
z-index: 2;
}
.pb-cards:hover .pk:last-child {
transform: rotate(8deg) translateY(-6px) translateX(4px);
transition: transform 0.2s ease;
z-index: 2;
}
.pb-cards .pk { transition: transform 0.2s ease; z-index: 1; }
/* ── Joueur qui réfléchit — points animés ── */
@keyframes thinkDot {
0%,80%,100% { opacity: 0.2; transform: translateY(0); }
40% { opacity: 1; transform: translateY(-3px); }
}
.thinking-dots { display: inline-flex; gap: 2px; margin-left: 4px; }
.thinking-dots span {
width: 4px; height: 4px; border-radius: 50%;
background: var(--gold); display: inline-block;
animation: thinkDot 1.1s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.18s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.36s; }
/* ── Élimination joueur ── */
@keyframes eliminatePlayer {
0% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
40% { opacity: 0.7; transform: translate(-50%,-50%) scale(1.1) rotate(-5deg); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(15deg); }
}
.seat.eliminated { animation: eliminatePlayer 0.8s ease-in forwards; pointer-events: none; }
/* ── Pot énorme — glow rouge/orange ── */
@keyframes bigPotGlow {
0%,100% { color: var(--gold); text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4); }
50% { color: #ff8c42; text-shadow: 0 0 20px rgba(255,100,30,0.7); }
}
.pot-huge { animation: bigPotGlow 1.2s ease-in-out infinite !important; }
/* ── River — révélation dramatique ── */
.pk-river {
/* Parité QML : river immédiate, même fondu 260 ms que le turn. */
animation: cardFlip 0.26s cubic-bezier(.3,0,.2,1) both !important;
animation-delay: 0s !important;
}
/* ── Showdown — flip cartes adversaires ── */
.pk-showdown {
animation: cardFlip 0.32s cubic-bezier(.3,0,.2,1) both;
}
/* ── Reset action fade entre mains ── */
@keyframes actionFadeOut {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(4px); }
}
.seat-action-label.fading {
animation: actionFadeOut 0.4s ease-out forwards;
}
/* ── Dealer badge volant ── */
.dealer-badge-fly {
position: fixed;
background: var(--gold); color: var(--on-gold);
border-radius: 50%; width: 18px; height: 18px;
font-size: 0.55rem; font-weight: 900;
display: flex; align-items: center; justify-content: center;
pointer-events: none; z-index: 600;
transition: left 0.6s cubic-bezier(.4,0,.2,1),
top 0.6s cubic-bezier(.4,0,.2,1),
opacity 0.2s ease 0.55s;
}
/* ── All-in chips multi ── */
@keyframes allInChip {
0% { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; }
60% { transform: translate(var(--ax),var(--ay)) scale(1.3) rotate(var(--ar)); opacity: 1; }
100% { transform: translate(var(--bx),var(--by)) scale(0.6) rotate(var(--ar)); opacity: 0; }
}
.allin-chip {
position: fixed;
width: 14px; height: 14px;
border-radius: 50%;
pointer-events: none; z-index: 550;
animation: allInChip 0.7s cubic-bezier(.3,0,.7,1) forwards;
}
/* ═══════════════════════════════════════════════════════════
DESKTOP LARGE (≥ 900px) — Agrandissement table + cartes
═══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
/* ── Ovale de la table ── */
.felt-oval {
width: min(580px, 64vw) !important;
height: min(256px, min(32vw, calc(100dvh - 300px))) !important;
}
/* ── Cartes communes (flop/turn/river) ── */
.comm-row .pk {
width: 62px !important;
height: 88px !important;
font-size: 1.3rem !important;
border-radius: 7px !important;
}
.comm-row { gap: 7px !important; }
/* ── Mes cartes dans la player-bar ── */
.pb-cards .pk {
width: 62px !important;
height: 90px !important;
font-size: 1.35rem !important;
}
.pb-cards { gap: 8px !important; }
/* ── Joueurs (rendu standard : tablette paysage + base desktop) ── */
.seat-avatar {
width: 38px !important;
height: 38px !important;
font-size: 0.95rem !important;
}
.seat-avatar.is-bot .seat-initial { font-size: 1.1em !important; }
.seat-name { font-size: 0.72rem !important; max-width: 84px !important; }
.seat-money { font-size: 0.7rem !important; }
.seat-bet { font-size: 0.58rem !important; }
.seat-action-label { font-size: 0.56rem !important; }
.seat { min-width: 54px !important; max-width: 86px !important; }
.seat.dealer .seat-avatar::after {
width: 16px !important; height: 16px !important;
font-size: 0.56rem !important;
top: -5px !important; right: -5px !important;
}
.blind-badge {
width: 16px !important; height: 16px !important;
font-size: 0.5rem !important;
top: -5px !important; left: -5px !important;
}
.seat .pk.xsm {
width: 24px !important;
height: 34px !important;
font-size: 0.6rem !important;
}
/* ── Scaler : marge pour les sièges qui débordent ── */
.table-scaler { padding: 80px 110px !important; }
/* ── Player bar ── */
.pb-avatar {
width: 46px !important; height: 46px !important;
font-size: 1.15rem !important;
}
.pb-name { font-size: 0.9rem !important; }
.pb-money { font-size: 0.8rem !important; }
.pb-info { min-width: 110px !important; }
/* ── Timer SVG autour de l'avatar ── */
.seat-timer {
width: 170% !important; height: 170% !important;
top: -35% !important; left: -35% !important;
}
.seat-timer-badge {
font-size: 0.88rem !important;
margin-top: 16px !important;
padding: 2px 7px !important;
min-width: 32px !important;
}
}
/* ══════════════════════════════════════════════════════════════
MODE DESKTOP (souris) — agrandissements appliqués UNIQUEMENT aux
écrans pointés à la souris. Une tablette tactile (même en paysage
≥ 900px) garde le rendu standard ci-dessus.
══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
/* ── Joueurs ── */
.seat-avatar {
width: 52px !important;
height: 52px !important;
font-size: 1.3rem !important;
}
.seat-name { font-size: 0.98rem !important; max-width: 112px !important; }
.seat-money { font-size: 0.96rem !important; }
.seat-bet { font-size: 0.8rem !important; }
.seat-action-label { font-size: 0.78rem !important; }
.seat { min-width: 72px !important; max-width: 116px !important; }
.seat.dealer .seat-avatar::after {
width: 22px !important; height: 22px !important;
font-size: 0.78rem !important;
top: -7px !important; right: -7px !important;
}
.blind-badge {
width: 22px !important; height: 22px !important;
font-size: 0.72rem !important;
top: -7px !important; left: -7px !important;
}
.seat .pk.xsm {
width: 32px !important;
height: 46px !important;
font-size: 0.8rem !important;
}
/* ── Player bar ── */
.pb-avatar {
width: 52px !important; height: 52px !important;
font-size: 1.3rem !important;
}
.pb-name { font-size: 1.05rem !important; }
.pb-money { font-size: 0.92rem !important; }
.pb-info { min-width: 120px !important; }
.pb-action { font-size: 0.9rem !important; min-width: 60px !important; }
#pb-timer { font-size: 0.9rem !important; }
/* Nos cartes (player-bar du bas) agrandies — desktop souris seulement ;
la tablette paysage garde 62x90 du bloc min-width:900px ci-dessus. */
.pb-cards .pk { width: 76px !important; height: 108px !important; font-size: 1.6rem !important; }
.pb-cards { gap: 10px !important; }
/* ── Contrôles d'action ── */
/* Desktop souris uniquement : barre d'action plus compacte pour libérer
de la hauteur et mieux voir la table / les cartes. */
.btn-action { font-size: 0.8rem !important; padding: 8px 18px !important; }
.btn-pct { padding: 7px 6px !important; }
/* Pas d'agrandissement des spans quick-bet : meme taille qu'en base/mobile
pour garder les boutons 1/3 - 1/2 - Pot a la meme hauteur (compacte). */
.raise-row .raise-input { font-size: 0.85rem !important; }
/* ── Vignette d'assistance ── */
.hs-txt { font-size: 0.7rem !important; }
/* ── Header ── */
.header { min-height: 44px !important; }
.header-brand { font-size: 1.25rem !important; }
.header .btn-sm { height: 36px !important; font-size: 0.92rem !important; padding: 0 16px !important; }
.header .btn-icon { width: 40px !important; padding: 0 !important; }
/* ── Barre du pot ── */
#pot-strip { min-height: 32px !important; }
.pot-side { font-size: 0.9rem !important; }
.pot-center { font-size: 1.05rem !important; }
/* ── Menu ••• ── */
#g-overflow-menu, #l-overflow-menu { width: 264px !important; }
#g-overflow-menu .btn-sm, #l-overflow-menu .btn-sm { font-size: 0.94rem !important; padding: 9px 32px 9px 14px !important; }
/* ══ Fenetres d'informations ══ */
.winner-card { max-width: min(640px, 86vw) !important; padding: 24px 28px !important; }
.wc-trophy { font-size: 2.5rem !important; }
.wc-label { font-size: 0.72rem !important; }
.wc-name { font-size: 1.7rem !important; }
.wc-gain { font-size: 1.4rem !important; }
.wc-stat-label { font-size: 0.66rem !important; }
.wc-stat-value { font-size: 1.05rem !important; }
.wc-section { font-size: 0.7rem !important; }
.wc-player-row { grid-template-columns: 30px minmax(0,1fr) auto 120px !important; }
.wc-player-av { width: 30px !important; height: 30px !important; font-size: 0.8rem !important; }
.wc-player-name { font-size: 1rem !important; }
.wc-player-stack { font-size: 0.8rem !important; }
.wc-player-delta { font-size: 1.05rem !important; }
.winner-dismiss { font-size: 0.95rem !important; padding: 12px 24px !important; }
/* Resume de manche : cartes agrandies (desktop souris seulement) */
.wc-cards-row .pk { width: 48px !important; height: 68px !important; font-size: 1rem !important; }
.wc-player-cards .pk { width: 38px !important; height: 54px !important; font-size: 0.82rem !important; }
.endgame-card { max-width: 600px !important; padding: 26px 34px !important; }
.eg-trophy { font-size: 3.6rem !important; }
.eg-title { font-size: 1.55rem !important; }
.eg-winner-av { width: 46px !important; height: 46px !important; font-size: 1.9rem !important; }
.eg-winner-av.letter { font-size: 1.35rem !important; }
.eg-winner-label { font-size: 0.78rem !important; }
.eg-winner-name { font-size: 1.28rem !important; }
.eg-stats-title { font-size: 0.74rem !important; }
.eg-stat-row { font-size: 0.95rem !important; }
.eg-btn { font-size: 0.92rem !important; padding: 12px 14px !important; }
.gim-card { width: min(460px, 100%) !important; max-height: min(82vh, 680px) !important; }
.gim-title { font-size: 1.4rem !important; }
.gim-subtitle { font-size: 0.82rem !important; }
.gim-badge { font-size: 0.74rem !important; }
.gim-section-title { font-size: 0.72rem !important; }
.gim-row { font-size: 0.95rem !important; }
.pim-card { max-width: 400px !important; }
.pim-avatar { width: 112px !important; height: 112px !important; }
.pim-avatar.is-letter { font-size: 2.9rem !important; }
.pim-name { font-size: 1.28rem !important; }
.pim-flag { font-size: 0.95rem !important; }
.hands-card { max-width: min(580px, 90vw) !important; }
.hands-title { font-size: 0.95rem !important; }
.hand-rank { font-size: 0.8rem !important; }
.hand-name { font-size: 0.95rem !important; }
.hand-desc { font-size: 0.8rem !important; }
.hand-ico { font-size: 1.15rem !important; }
.hands-legend { font-size: 0.74rem !important; }
.km-card:not(.adv-card) { width: min(460px, 100%) !important; max-height: min(82vh, 680px) !important; }
.km-title { font-size: 1.35rem !important; }
.km-subtitle { font-size: 0.88rem !important; }
.km-row .km-av { width: 40px !important; height: 40px !important; font-size: 1.7rem !important; }
.km-row .km-av.letter { font-size: 1.1rem !important; }
.km-row .km-name { font-size: 1rem !important; }
.km-row .km-meta { font-size: 0.78rem !important; }
.ld-card { max-width: 500px !important; padding: 26px 28px !important; }
.ld-title { font-size: 1.22rem !important; }
.ld-body { font-size: 1rem !important; }
.ld-btn { font-size: 0.95rem !important; }
}
/* Tablet */
@media (max-width: 768px) {
.blind-chip { width: 19px !important; height: 19px !important; top: -11px !important; left: -11px !important; }
.dealer-chip { width: 19px !important; height: 19px !important; top: -11px !important; right: -11px !important; }
.seat-flag { bottom: -6px !important; right: -6px !important; }
.seat-flag .cc-flag { width: 16px !important; height: 12px !important; }
/* Drapeaux agrandis UNIQUEMENT en mode pokerth.net (body.pth-net) */
body.pth-net .seat-flag { bottom: -3px !important; right: -12px !important; }
body.pth-net .seat-flag .cc-flag { width: 20px !important; height: 15px !important; }
.seat-avatar { width: 28px; height: 28px; font-size: 0.7rem; }
.seat-name,.seat-money,.seat-action-label,.seat-bet { font-size: 0.48rem; }
.pill { font-size: 0.6rem; padding: 2px 5px; }
.pk { width: 36px; height: 52px; font-size: 0.86rem; }
.pk.sm { width: 28px; height: 40px; font-size: 0.66rem; }
/* table-zone padding handled by table-scaler */
/* Oval moins large : libère de l'espace pour les joueurs sur les côtés */
.felt-oval { width: min(400px, 72vw) !important; }
}
@media (max-width: 740px) and (orientation: portrait) {
/* Oval: compact to fit 10 seats */
.felt-oval::before {
content: '';
position: absolute;
inset: 10px;
border-radius: 50% / 42%;
border: 2px solid rgba(255,255,255,0.07);
pointer-events: none;
}
.felt-oval { overflow: visible; width: 68vw; height: 42vw; min-height: 130px; }
/* Cards */
.pk { width: 28px; height: 40px; font-size: 0.68rem; }
.pk.sm { width: 22px; height: 32px; font-size: 0.54rem; }
/* Cartes communes (flop/turn/river) agrandies pour mieux remplir le feutre.
Les .pk de SIEGE restent petits (regle ci-dessus) ; seul .comm-row .pk
grandit. Largeur en vw -> proportionnelle au feutre (68vw) ; 5 cartes +
gaps restent sous la largeur interieure ; capee en px. Zero impact
feutre/sieges (cartes en position absolue dans l'ovale). */
.comm-row .pk { width: min(52px, 12vw) !important; height: min(73px, 16.8vw) !important; font-size: min(1.12rem, 3.4vw) !important; border-radius: 6px !important; }
/* Chips : très excentrés pour éviter le chevauchement avec le timer */
.blind-chip { width: 17px !important; height: 17px !important; top: -13px !important; left: -13px !important; }
.dealer-chip { width: 17px !important; height: 17px !important; top: -13px !important; right: -13px !important; }
.seat-flag { bottom: -5px !important; right: -5px !important; }
.seat-flag .cc-flag { width: 12px !important; height: 9px !important; }
/* Drapeaux agrandis UNIQUEMENT en mode pokerth.net (body.pth-net) */
body.pth-net .seat-flag { bottom: -2px !important; right: -11px !important; }
body.pth-net .seat-flag .cc-flag { width: 16px !important; height: 12px !important; }
/* Seats: tiny for 10-player tables */
.seat-avatar { width: 18px; height: 18px; font-size: 0.46rem; }
.seat-name { font-size: 0.36rem; }
.seat-money,.seat-action-label,.seat-bet { font-size: 0.3rem; }
.seat { min-width: 26px; max-width: 40px; gap: 0px; }
.comm-row { gap: 2px; }
/* Player bar */
.player-bar-left { padding: 4px 10px; gap: 7px; }
.pb-avatar { width: 28px; height: 28px; font-size: 0.72rem; }
.pb-name { font-size: 0.68rem; }
.pb-money { font-size: 0.58rem; }
.pb-info { min-width: 60px; }
/* table padding via scaler */
/* Actions */
.btn-action { padding: 8px 10px; font-size: 0.76rem; }
.pct-row .btn-pct { flex: 1; padding: 7px 4px; font-size: 0.76rem; }
.raise-row .raise-input { flex: 1; padding: 10px 6px; font-size: 0.84rem; }
.my-zone { padding: 5px 8px; }
.pot-bar { font-size: 0.7rem; }
.header-brand { font-size: 0.85rem; }
#g-blind { display: none; }
}
/* Global action-bar layout (applies at all sizes). These flex containers
are required for the FOLD / CALL / RAISE / ALL-IN buttons to lay out
correctly. Previously orphaned after a stray closing brace. */
.btn-action { padding: 12px 14px; font-size: 0.84rem; flex: 1; min-width: 80px; text-align: center; }
.pct-row { display: flex; gap: 5px; width: 100%; }
.pct-row .btn-pct { flex: 1; padding: 7px 4px; font-size: 0.76rem; }
.raise-row { display: flex; gap: 5px; flex: 2; min-width: 160px; }
.raise-row .raise-input { flex: 1; padding: 10px 6px; font-size: 0.84rem; }
.btn-allin { flex: 1.5; }
#g-blind { display: none; }
/* ── Phone LANDSCAPE (wide, short) ── */
@media (max-height: 500px) and (orientation: landscape) {
.blind-chip { width: 18px !important; height: 18px !important; top: -12px !important; left: -12px !important; }
.dealer-chip { width: 18px !important; height: 18px !important; top: -12px !important; right: -12px !important; }
.seat-flag { bottom: -5px !important; right: -5px !important; }
.seat-flag .cc-flag { width: 14px !important; height: 10px !important; }
/* Drapeaux agrandis UNIQUEMENT en mode pokerth.net (body.pth-net) */
body.pth-net .seat-flag { bottom: -2px !important; right: -11px !important; }
body.pth-net .seat-flag .cc-flag { width: 17px !important; height: 13px !important; }
/* Oval: small, left side */
.felt-oval::before {
content: '';
position: absolute;
inset: 10px;
border-radius: 50% / 42%;
border: 2px solid rgba(255,255,255,0.07);
pointer-events: none;
}
.felt-oval { overflow: visible; width: 52vw; height: 22vh; min-height: 100px; }
.pk { width: 28px; height: 40px; font-size: 0.68rem; }
.pk.sm { width: 22px; height: 32px; font-size: 0.56rem; }
.comm-row { gap: 2px; }
.seat-avatar { width: 24px; height: 24px; font-size: 0.62rem; }
.seat-name,.seat-money,.seat-action-label { font-size: 0.42rem; }
/* Fixed bars: very compact */
.pot-bar { font-size: 0.65rem; padding: 1px 0; }
/* NB cascade : les regles de base (.btn-action, .action-grid, .pb-cards .pk,
.pb-avatar, .player-bar-left...) sont definies PLUS BAS dans le fichier.
Une @media n'augmente PAS la specificite -> a specificite egale, ces
regles de base l'emportaient sur ce bloc et la compaction paysage etait
ignoree (boutons + dock affiches en taille bureau). On porte donc ces
overrides par .my-zone / .player-bar pour gagner en specificite. */
/* Dock joueur (.player-bar) — compact */
.my-zone { padding: 3px 6px !important; }
.player-bar { padding: 2px 6px !important; }
/* Largeur du dock DISSOCIEE de la barre d'action : au lieu de s'etirer a
--bottom-w (560px) / pleine largeur, il s'ajuste a son contenu et reste
centre (justify-content du parent) -> pastille compacte, plus de grand
vide en paysage. */
.player-bar .player-bar-left { padding: 2px 8px; gap: 5px; flex: 0 1 auto; width: -webkit-fit-content; width: fit-content; max-width: 100%; }
.player-bar .pb-avatar { width: 22px; height: 22px; font-size: 0.58rem; }
.player-bar .pb-name { font-size: 0.58rem; }
.player-bar .pb-money { font-size: 0.5rem; }
.player-bar .pb-info { min-width: 45px; }
.player-bar .pb-cards .pk { width: 50px; height: 70px; font-size: 1.05rem; }
.player-bar .pb-action { font-size: 0.56rem; min-width: 0; }
/* Barre d'action — 2 rangees compactes et previsibles.
Rangee 1 (pleine largeur) : Fold | Call | mode.
Rangee 2 (pleine largeur) : 1/3 1/2 Pot | relance | All-In.
La hauteur reelle (dock + barre) est mesuree en JS (updateBottomLayout)
-> .my-zone se place AU-DESSUS du dock (plus de touches cachees) et la
table reserve juste l'espace necessaire (riviere jamais masquee). */
/* Barre d'action paysage : 3 zones compactes (montant+slider / pastilles+All-In+mode /
Fold-Call-Raise), meme structure que l'officiel mais plus dense. Hauteur mesuree en JS. */
.my-zone .action-grid { gap: 4px; width: 100%; max-width: 100%; }
.my-zone .action-grid > * { min-width: 0; }
.my-zone .bet-row { gap: 6px; }
.my-zone .bet-row .raise-amt-field { width: 58px; padding: 4px; font-size: 0.66rem; }
.my-zone .bet-row .raise-slider { flex: 1 1 auto; min-width: 60px; }
.my-zone .mid-row { gap: 4px; }
.my-zone .mid-row .pct-row { flex: 1 1 auto; gap: 3px; }
.my-zone .mid-row .mode-sel-wrap { flex: 0 0 88px; }
.my-zone .mid-row .btn-allin { flex: 0 0 auto; white-space: nowrap; padding: 4px 8px; font-size: 0.6rem; min-width: 0; }
.my-zone .act-buttons-row { gap: 4px; }
.my-zone .act-buttons-row .btn-action { padding: 4px 8px; font-size: 0.62rem; min-width: 0; }
.my-zone .mid-row .btn-pct { padding: 4px 4px; font-size: 0.58rem; font-weight: 700; border-width: 1px; }
.my-zone .mid-row .btn-pct .pct-p { font-size: 0.62rem; }
.my-zone .mid-row .btn-pct .pct-amt { display: none; }
.header { padding: 2px 6px; }
.pill { font-size: 0.56rem; padding: 1px 4px; }
#g-blind, #g-players { display: none; }
/* ── Bas d'ecran en FLUX (deterministe) ──────────────────────────────
Plutot que 2 barres position:fixed empilees via une hauteur mesuree en
JS (fragile : la barre d'action flottait au milieu de l'ecran), on remet
.my-zone et .player-bar dans le flux de .game-area (colonne flex) : la
table (flex:1) occupe le haut, la barre d'action puis le dock s'empilent
dessous, colles en bas. position:relative (et non static) -> .player-bar
reste le contexte de #hand-strength (absolu) et .action-wrap celui de
l'epingle. */
.game-area { padding-bottom: 0 !important; }
.my-zone, .player-bar {
position: relative !important;
left: auto !important; right: auto !important; bottom: auto !important;
z-index: auto;
}
.my-zone { order: 2; }
.player-bar { order: 3; background: transparent !important; border-top: 0 !important; }
}
/* ══ HEADERS WITH OVERFLOW MENU (game + lobby) ══ */
/* Both screens host a ••• dropdown (#g-overflow-menu / #l-overflow-menu)
that uses position:absolute relative to its containing .header. The
lobby was missing position:relative here, so its menu was escaping
to the viewport and rendering off-screen. Same chrome for both now. */
#s-game .header,
#s-lobby .header {
position: relative;
flex-wrap: nowrap;
align-items: center;
overflow: visible;
}
/* ••• overflow menu is used at EVERY screen size for a consistent header
across phone / tablet / desktop (requested by narmod). The ••• button is
always visible, and the secondary actions live exclusively in its menu. */
#g-overflow-btn,
#l-overflow-btn,
#connect-overflow-btn { display: inline-flex; align-items: center; }
/* Direct header twins of the menu actions: hidden at all sizes (they are
provided by the ••• menu now). Was previously a mobile-only rule. */
#fs-btn-game,
#lang-toggle-game,
#admin-start-btn,
#admin-startnobots-btn,
#admin-close-btn,
#admin-kick-btn,
#haptic-toggle-btn,
#voice-toggle-btn,
#fs-btn-lobby,
#lang-toggle-lobby { display: none !important; }
/* Menu déroulant */
#g-overflow-menu,
#l-overflow-menu,
#connect-overflow-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 200;
background: var(--modal-bg);
border: 1px solid var(--border-hi);
border-top: none;
border-radius: 0 0 6px 6px;
padding: 6px 5px;
/* Largeur FIXE : le menu ne doit plus s'élargir/rétrécir selon la
longueur du libellé (✓ présent ou non, FR/EN). */
width: 232px;
box-sizing: border-box;
flex-direction: column;
gap: 4px;
box-shadow: 0 12px 32px rgba(0,0,0,0.7);
}
#g-overflow-menu.open,
#l-overflow-menu.open,
#connect-overflow-menu.open { display: flex; }
#g-overflow-menu .btn-sm,
#l-overflow-menu .btn-sm,
#connect-overflow-menu .btn-sm {
width: 100%;
box-sizing: border-box;
text-align: left;
/* padding-right généreux : on réserve la place du ✓ (positionné en
absolu à droite) pour que le texte ne passe jamais dessous. */
padding: 7px 30px 7px 12px;
border-radius: 3px;
font-size: 0.8rem;
position: relative;
overflow: hidden;
text-overflow: ellipsis; /* libellé trop long (autre langue) => "…" au lieu d'élargir */
white-space: nowrap;
}
/* Coche d'état : ancrée à droite, donc toujours au même endroit quelle
que soit la longueur du libellé ou la langue. */
#g-overflow-menu .menu-tick,
#l-overflow-menu .menu-tick {
position: absolute;
right: 11px;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
color: var(--green);
pointer-events: none;
}
#g-overflow-menu .btn-sm:hover,
#l-overflow-menu .btn-sm:hover,
#connect-overflow-menu .btn-sm:hover {
background: var(--border);
}
/* Group separators inside the ••• menu. Plain hairline between groups,
and a centred labelled divider for the (admin-only) action block. */
#g-overflow-menu .menu-sep,
#l-overflow-menu .menu-sep {
height: 1px;
background: var(--border);
margin: 5px 8px;
border: 0;
flex-shrink: 0;
}
#g-overflow-menu .menu-sep-admin {
height: auto;
background: none;
margin: 8px 4px 3px;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.56rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-dim);
}
#g-overflow-menu .menu-sep-admin::before,
#g-overflow-menu .menu-sep-admin::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
/* Mobile-only sizing tweaks (the ••• show / secondary-hide rules are now
global, applied above for all screen sizes). */
@media (max-width: 740px) {
/* Hauteur uniforme pour tous les btn-sm du header jeu */
#s-game .header .btn-sm {
height: 30px;
padding: 0 9px;
font-size: 0.82rem;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
/* Le menu ••• du jeu reprend le style "liste" (aligné à gauche, plus
compact) au lieu d'hériter du centrage/hauteur fixe des boutons du
header ci-dessus => menu nettement moins large. Sélecteur 2 ids pour
l'emporter sur "#s-game .header .btn-sm". */
#s-game .header #g-overflow-menu { width: 214px; }
#s-game .header #g-overflow-menu .btn-sm {
justify-content: flex-start;
text-align: left;
height: auto;
padding: 8px 24px 8px 11px;
font-size: 0.74rem;
}
#g-overflow-menu .menu-tick,
#l-overflow-menu .menu-tick { right: 9px; }
#s-game .header-brand {
font-size: 0.78rem;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Keep header-pills as a flex:1 spacer (still empty in #s-game) so that
the action buttons get pushed to the RIGHT edge of the header on
mobile. Previously this was display:none, which collapsed the spacer
and left the buttons clustered near the centre-left -- the brand on
the far left and a large gap on the right. */
#s-game .header-pills {
flex: 1;
min-width: 0;
}
#s-game .header { gap: 4px; padding: 3px 8px; }
/* Bandeaux du haut un peu plus épais sur mobile (demande narmod) :
header de table + barre du pot. Surcharge top/bottom uniquement,
en gardant le padding horizontal des règles précédentes. */
#s-game .header { padding-top: 8px; padding-bottom: 8px; min-height: 48px; }
#pot-strip { padding-top: 5px; padding-bottom: 5px; min-height: 30px; }
/* Toutes les écritures de la barre du pot, plus grandes sur mobile
(demande narmod) : n° de main + tour (.pot-side), montant (.pot-center),
compteur de blinds (.blinds-next). #pot-strip en prefixe pour battre
les clamp de base sans !important. */
#pot-strip .pot-side { font-size: 0.72rem; }
#pot-strip .pot-center { font-size: 0.84rem; }
#pot-strip .blinds-next { font-size: 0.68rem; }
/* ── Lobby header on narrow phones ──
On small/large-font devices the "POKERTH" word + redundant buttons
squeezed the name + player-count pills (they got clipped). Free the
space: collapse the brand to just the ♠ glyph, drop the standalone
Fullscreen + language buttons (both still reachable via the ••• menu),
and tighten the gap. The pills (flex:1) then get the room they need. */
/* The ♠ acts as a toggle: tap it to slide POKERTH in/out. Collapsed by
default on narrow screens (max-width:0 + fade), expanded when JS adds
.brand-open to #lobby-brand. The width transition gives the small
reveal effect. */
#s-lobby .header-brand .brand-text {
display: inline-block;
max-width: 0;
opacity: 0;
overflow: hidden;
white-space: nowrap;
transition: max-width 0.28s ease, opacity 0.22s ease, margin 0.28s ease;
margin-left: 0;
}
#s-lobby #lobby-brand.brand-open .brand-text {
max-width: 8em;
opacity: 1;
margin-left: 0;
}
#s-lobby #fs-btn-lobby,
#s-lobby #lang-toggle-lobby { display: none; }
#s-lobby .header { gap: 6px; padding: 3px 8px; }
/* Header du lobby aligné sur le header du jeu (48px) sur mobile, pour
une hauteur uniforme entre les écrans (demande narmod). Même valeur
que #s-game .header plus haut. */
#s-lobby .header { padding-top: 8px; padding-bottom: 8px; min-height: 48px; }
#s-lobby .header-pills { flex: 1; min-width: 0; }
}
/* ═══════════════════════════════════════════════════════
ANIMATIONS DE JEU
═══════════════════════════════════════════════════════ */
/* ── Distribution des cartes (hole cards) ── */
@keyframes dealCard {
0% { transform: translateY(60px) rotate(-8deg) scale(0.6); opacity: 0; }
60% { transform: translateY(-4px) rotate(1deg) scale(1.04); opacity: 1; }
100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}
.pk-deal {
animation: dealCard 0.38s cubic-bezier(.2,.8,.3,1) both;
}
.pk-deal:nth-child(2) { animation-delay: 0.15s; }
/* ── Flip cartes communes (amélioré) ── */
@keyframes cardFlip {
0% { transform: rotateY(90deg) scale(0.85); opacity: 0; }
55% { transform: rotateY(-6deg) scale(1.06); opacity: 1; }
80% { transform: rotateY(3deg) scale(0.99); }
100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
/* Timings officiels (bible §9) : flop échelonné 0 / 120 / 240 ms, turn et
river IMMÉDIATS — durée 260 ms partout (fondu QML ; on garde le flip web,
héritage ShowFlipCardsAnimation du client Qt-Widgets, aux timings QML). */
.pk-flip { animation: cardFlip 0.26s cubic-bezier(.3,0,.2,1) both; }
.pk-flip:nth-child(1) { animation-delay: 0s; }
.pk-flip:nth-child(2) { animation-delay: 0.12s; }
.pk-flip:nth-child(3) { animation-delay: 0.24s; }
.pk-flip:nth-child(4) { animation-delay: 0s; }
.pk-flip:nth-child(5) { animation-delay: 0s; }
/* ── Joueur actif — anneau pulsant ── */
@keyframes activeRing {
0% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.7), 0 0 12px rgba(var(--gold-rgb), 0.4); }
50% { box-shadow: 0 0 0 5px rgba(var(--gold-rgb), 0), 0 0 20px rgba(var(--gold-rgb), 0.6); }
100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.7), 0 0 12px rgba(var(--gold-rgb), 0.4); }
}
.seat.active .seat-avatar {
animation: activeRing 1.2s ease-in-out infinite !important;
}
/* ── Mon tour — barre actions pulse ── */
@keyframes myTurnBorder {
0%,100% { border-top-color: var(--gold); box-shadow: 0 -3px 18px rgba(var(--gold-rgb), 0.25); }
50% { border-top-color: #ffe066; box-shadow: 0 -3px 32px rgba(var(--gold-rgb), 0.55); }
}
.my-zone.my-turn-active {
animation: myTurnBorder 1.5s ease-in-out infinite;
}
/* ── Gagnant — explosion d'étoiles ── */
@keyframes starPop {
0% { transform: translate(-50%,-50%) scale(0) rotate(0deg); opacity: 1; }
60% { transform: translate(var(--tx),var(--ty)) scale(1) rotate(var(--rot)); opacity: 1; }
100% { transform: translate(var(--tx),var(--ty)) scale(0.3) rotate(var(--rot)); opacity: 0; }
}
.win-star {
position: fixed;
font-size: 1.4rem;
pointer-events: none;
z-index: 600;
animation: starPop 1.1s cubic-bezier(.2,.8,.3,1) forwards;
left: 50%; top: 40%;
}
/* ── Action joueur — badge flash ── */
@keyframes actionFlash {
0% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.seat-action-label.flash {
animation: actionFlash 0.3s ease-out both;
}
/* ── Pot — comptage animé ── */
@keyframes potBump {
0% { transform: scale(1); }
40% { transform: scale(1.18); color: #ffe066; }
100% { transform: scale(1); }
}
.pot-bump { animation: potBump 0.35s ease-out; }
/* ── Pli (fold) — carte qui tombe ── */
@keyframes foldCard {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(30px) rotate(15deg); opacity: 0; }
}
.pk-fold { animation: foldCard 0.28s ease-in forwards; }
/* ── Jeton volant ── */
.flying-chip {
position: fixed;
width: 20px; height: 20px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #ffe066, #c8a820);
border: 2px solid rgba(255,255,255,0.5);
box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.3);
font-size: 0.4rem; color: #3a2000; font-weight: 900;
display: flex; align-items: center; justify-content: center;
pointer-events: none; z-index: 500;
transition: left 0.5s cubic-bezier(.4,0,.2,1),
top 0.5s cubic-bezier(.25,0.46,0.45,0.94),
opacity 0.18s ease 0.42s,
transform 0.5s ease;
}
/* ══ CARD FLIP ANIMATION — (replaced above) ══ */
@keyframes _cardFlip_unused {
0% { transform: rotateY(90deg) scale(0.85); opacity: 0; }
60% { transform: rotateY(-8deg) scale(1.04); opacity: 1; }
100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.pk-flip { animation: cardFlip 0.32s cubic-bezier(.4,0,.2,1) both; }
.pk-flip:nth-child(2) { animation-delay: 0.07s; }
.pk-flip:nth-child(3) { animation-delay: 0.14s; }
.pk-flip:nth-child(4) { animation-delay: 0.21s; }
.pk-flip:nth-child(5) { animation-delay: 0.28s; }
/* ══ CHIP ANIMATION ══ */
.flying-chip {
position: fixed;
width: 18px; height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #f0c040, #c8a820);
border: 2px solid rgba(255,255,255,0.4);
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
font-size: 0.45rem; color: #3a2000; font-weight: 900;
display: flex; align-items: center; justify-content: center;
pointer-events: none; z-index: 500;
transition: left 0.55s cubic-bezier(.4,0,.2,1),
top 0.55s cubic-bezier(.4,0,.2,1),
opacity 0.2s ease 0.45s,
transform 0.55s ease;
}
/* ══ HAND STRENGTH DISPLAY ══ */
#hand-strength {
/* Couche pleine largeur posee sur le bord haut de .player-bar.
height:0 -> n'ajoute aucune hauteur : la barre garde sa taille. */
position: absolute;
left: 0; right: 0; top: 0;
height: 0;
pointer-events: none;
z-index: 3;
--hs-col: var(--gold);
}
#hand-strength .hs-track {
position: absolute;
left: 10px; right: 10px; top: 0;
height: 3px;
border-radius: 0 0 3px 3px;
background: rgba(255,255,255,0.12);
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
#hand-strength .hs-fill {
display: block;
height: 100%;
width: 0;
background: var(--hs-col);
border-radius: 0 0 3px 3px;
transition: width 0.35s cubic-bezier(.4,0,.2,1), background 0.3s ease;
}
.pb-right-zone {
flex: 1 1 auto;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.pb-act-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
}
.hs-lbl {
flex: 0 0 auto;
align-self: center;
max-width: 100%;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
background: rgba(0,0,0,0.80);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 5px;
pointer-events: none;
}
:root:not([data-theme="pokerth-light"]) .hs-lbl {
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.18);
}
:root[data-theme="pokerth"] .hs-lbl,
:root[data-theme="dark"] .hs-lbl,
:root[data-theme="redfelt"] .hs-lbl {
background: rgba(96,110,135,0.40);
border: 1px solid rgba(255,255,255,0.13);
}
.hs-txt {
font-family: var(--ff-display);
font-size: 0.72rem;
line-height: 1.15;
letter-spacing: 0.01em;
font-weight: 700;
color: var(--gold);
text-align: center;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 0 3px rgba(0,0,0,0.85), 0 1px 1px rgba(0,0,0,0.9);
}
/* ══ PANNEAU RÉACTIONS FLOTTANT (header) ══ */
#g-reaction-panel {
flex-direction: column;
background: var(--panel);
border-bottom: 1px solid var(--border);
padding: 10px 14px 12px;
flex-shrink: 0;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.react-panel-title {
font-size: 0.52rem;
color: var(--gold-dim);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}
.react-panel-close {
background: none; border: none; color: var(--text);
cursor: pointer; font-size: 0.9rem; padding: 0 2px; line-height: 1;
}
/* Bouton "couper les reactions" : emoji barre d'une interdiction quand actif */
.react-title-actions { display: flex; align-items: center; gap: 8px; }
.react-mute-btn {
position: relative;
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--inset);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 0.95rem; line-height: 1;
padding: 0; cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.react-mute-btn:hover { background: rgba(var(--gold-rgb), 0.15); border-color: var(--gold-dim); }
.react-mute-btn:active { transform: scale(0.92); }
.react-mute-btn .rm-emo { transition: filter 0.15s, opacity 0.15s; pointer-events: none; }
.react-mute-btn.muted { border-color: rgba(var(--red-rgb), 0.55); }
.react-mute-btn.muted .rm-emo { filter: grayscale(1); opacity: 0.5; }
.react-mute-btn::after {
content: ""; position: absolute;
width: 19px; height: 19px;
border: 2px solid var(--red); border-radius: 50%;
pointer-events: none;
}
.react-mute-btn::before {
content: ""; position: absolute;
width: 19px; height: 2px;
background: var(--red); border-radius: 2px;
transform: rotate(-45deg);
pointer-events: none;
}
/* Grille grisee + inerte quand les reactions sont coupees */
.react-grid.react-muted { filter: grayscale(1); opacity: 0.4; }
.react-grid.react-muted .react-btn { pointer-events: none; cursor: default; }
.react-grid.react-muted .react-btn:hover { background: var(--inset); border-color: var(--border); transform: none; }
.react-grid {
display: grid;
/* Desktop: all 30 reactions on a single line. 1fr tracks fill the
available width so they never overflow; max-width keeps the cells
from ballooning on ultra-wide screens, margin auto re-centres. */
grid-template-columns: repeat(30, 1fr);
gap: 3px;
max-width: 1120px;
margin: 0 auto;
}
@media (max-width: 900px) {
/* Tablet: 2 lines (15 + 15). */
.react-grid { grid-template-columns: repeat(15, 1fr); max-width: none; }
}
@media (max-width: 600px) {
/* Phone : grille montrant 2 lignes ; si tout ne rentre pas -> scroll vertical.
Tablette (601-900px) et desktop gardent leur propre grille. */
.react-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 40px);
justify-content: center;
/* largeur definie + marge nulle : annule le `margin:0 auto` de base qui,
sur un item flex, empechait l'etirement (=> 1 seule colonne). */
width: 100%;
max-width: none;
margin: 0;
gap: 6px;
max-height: 88px; /* ~2 lignes (cellule 40px + interligne) */
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* Use nearly the full panel width on phones (was 14px each side). */
#g-reaction-panel { padding: 8px 5px 9px; }
}
.react-btn {
aspect-ratio: 1; /* square, height follows the column width */
width: 100%; /* fill the grid track (size set by .react-grid) */
background: var(--inset);
border: 1px solid var(--border);
border-radius: 5px;
font-size: 1.3rem; /* desktop emoji size (cells ~34px) */
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: transform 0.12s ease, background 0.12s, border-color 0.12s;
position: relative;
padding: 0; /* no padding → compact cell */
}
@media (max-width: 900px) {
/* Tablet: bigger cells → bigger glyphs. */
.react-btn { font-size: 1.7rem; }
}
@media (max-width: 600px) {
/* Phone : pastilles carrees, taille de cellule pilotee par la grille. */
.react-btn { font-size: 1.5rem; }
}
.react-btn:hover {
background: rgba(var(--gold-rgb), 0.15);
border-color: var(--gold-dim);
transform: scale(1.2);
}
.react-btn:active { transform: scale(0.92); }
.react-btn .rc {
position: absolute;
bottom: 1px; right: 3px;
font-size: 0.45rem;
font-family: monospace;
color: var(--gold);
line-height: 1;
pointer-events: none;
}
/* Ancien .reaction-bar (dans chat) — masqué */
/* ══ RÉACTIONS RAPIDES ══ */
.reaction-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--panel);
border-top: 1px solid var(--border);
flex-shrink: 0;
justify-content: center;
flex-wrap: wrap;
}
.reaction-bar-label {
font-size: 0.55rem;
color: var(--text);
letter-spacing: 0.1em;
text-transform: uppercase;
flex-basis: 100%;
text-align: center;
margin-bottom: 1px;
opacity: 0.6;
}
.reaction-btn {
background: var(--inset);
border: 1px solid var(--border);
border-radius: 20px;
padding: 4px 10px;
font-size: 1.1rem;
cursor: pointer;
transition: transform 0.12s ease, background 0.15s, border-color 0.15s;
display: flex; align-items: center; gap: 4px;
line-height: 1;
position: relative;
overflow: visible;
}
.reaction-btn:hover {
background: rgba(var(--gold-rgb), 0.15);
border-color: var(--gold-dim);
transform: scale(1.15);
}
.reaction-btn:active { transform: scale(0.92); }
.reaction-btn .react-count {
font-size: 0.6rem;
font-family: monospace;
color: var(--gold);
min-width: 10px;
}
/* Emoji flottant animé au-dessus de la table */
@keyframes floatReaction {
0% { transform: translateY(0) scale(0.5) rotate(-8deg); opacity: 0; }
15% { transform: translateY(-20px) scale(1.3) rotate(5deg); opacity: 1; }
70% { transform: translateY(-120px) scale(1) rotate(-3deg); opacity: 1; }
100% { transform: translateY(-180px) scale(0.8) rotate(8deg); opacity: 0; }
}
.floating-reaction {
position: fixed;
font-size: 2.2rem;
pointer-events: none;
z-index: 650;
animation: floatReaction 2.2s cubic-bezier(.2,.8,.3,1) forwards;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
/* Badge réaction sur avatar joueur */
@keyframes reactionBadge {
0% { transform: scale(0) rotate(-20deg); opacity: 0; }
30% { transform: scale(1.3) rotate(5deg); opacity: 1; }
70% { transform: scale(1) rotate(0deg); opacity: 1; }
100% { transform: scale(0.9) rotate(0deg); opacity: 0; }
}
.seat-reaction {
position: absolute;
top: -18px; left: 50%;
transform: translateX(-50%);
font-size: 1.4rem;
pointer-events: none;
animation: reactionBadge 2.5s ease forwards;
z-index: 10;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
/* ══ RÉACTIONS ANIMÉES (chorégraphies CSS/JS) ══ */
.rfx { position: fixed; z-index: 700; pointer-events: none; width: 0; height: 0; }
.rfx .rfx-big { position: absolute; left: 0; top: 0; font-size: 2.6rem; display: inline-block;
filter: drop-shadow(0 3px 10px rgba(0,0,0,0.55)); }
.rfx .rfx-pt { position: absolute; left: 0; top: 0; will-change: transform, opacity; line-height: 1; }
.rfx .rfx-ring { position: absolute; left: 0; top: 0; width: 30px; height: 30px;
border: 3px solid var(--gold-hi); border-radius: 50%;
transform: translate(-50%,-50%) scale(0.3); opacity: 0.9; animation: rfxRing 0.8s ease-out forwards; }
@keyframes rfxRing { to { transform: translate(-50%,-50%) scale(4); opacity: 0; } }
@keyframes rfxPop {0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{transform:translate(-50%,-50%) scale(1.45);opacity:1}55%{transform:translate(-50%,-60%) scale(1.05)}100%{transform:translate(-50%,-150%) scale(.9);opacity:0}}
@keyframes rfxFire {0%{transform:translate(-50%,-50%) scale(.3);opacity:0}20%{transform:translate(-50%,-55%) scale(1.4);opacity:1}40%{transform:translate(-50%,-70%) scale(1.2) rotate(-4deg)}60%{transform:translate(-50%,-90%) scale(1.35) rotate(4deg)}100%{transform:translate(-50%,-150%) scale(1);opacity:0}}
@keyframes rfxShake{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}15%{transform:translate(-50%,-55%) scale(1.35) rotate(0);opacity:1}25%{transform:translate(-50%,-60%) rotate(-14deg)}35%{transform:translate(-50%,-65%) rotate(14deg)}45%{transform:translate(-50%,-72%) rotate(-12deg)}55%{transform:translate(-50%,-80%) rotate(12deg)}70%{transform:translate(-50%,-95%) rotate(-6deg)}85%{transform:translate(-50%,-115%) rotate(4deg)}100%{transform:translate(-50%,-150%) rotate(0);opacity:0}}
@keyframes rfxBeat {0%{transform:translate(-50%,-50%) scale(.2);opacity:0}20%{transform:translate(-50%,-55%) scale(1.5);opacity:1}33%{transform:translate(-50%,-60%) scale(1.05)}48%{transform:translate(-50%,-70%) scale(1.4)}63%{transform:translate(-50%,-82%) scale(1.1)}100%{transform:translate(-50%,-150%) scale(1);opacity:0}}
@keyframes rfxSpin {0%{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:0}25%{transform:translate(-50%,-60%) scale(1.45) rotate(200deg);opacity:1}100%{transform:translate(-50%,-150%) scale(1) rotate(720deg);opacity:0}}
@keyframes rfxShine{0%{transform:translate(-50%,-50%) scale(.3);opacity:0;filter:brightness(1)}25%{transform:translate(-50%,-58%) scale(1.45);opacity:1}50%{filter:brightness(2.2) drop-shadow(0 0 10px var(--gold-hi))}100%{transform:translate(-50%,-150%) scale(1.05);opacity:0;filter:brightness(1)}}
@keyframes rfxFlex {0%{transform:translate(-50%,-50%) scale(.3);opacity:0}20%{transform:translate(-50%,-55%) scale(1.5)}35%{transform:translate(-50%,-60%) scale(1.1)}50%{transform:translate(-50%,-70%) scale(1.45)}70%{transform:translate(-50%,-90%) scale(1.15)}100%{transform:translate(-50%,-150%) scale(1);opacity:0}}
.rfx-anim-pop { animation: rfxPop 1.6s cubic-bezier(.2,.8,.3,1) forwards; }
.rfx-anim-fire { animation: rfxFire 1.7s ease-out forwards; }
.rfx-anim-shake{ animation: rfxShake 1.7s ease-out forwards; }
.rfx-anim-beat { animation: rfxBeat 1.7s ease-out forwards; }
.rfx-anim-spin { animation: rfxSpin 1.6s cubic-bezier(.2,.7,.3,1) forwards; }
.rfx-anim-shine{ animation: rfxShine 1.6s ease-out forwards; }
.rfx-anim-flex { animation: rfxFlex 1.6s ease-out forwards; }
/* ══ RECONNECT BANNER ══ */
/* In-app "new version available" banner (bottom, gold accent). Created on
the fly by the inline SW-update checker when /__ver changes after a deploy. */
#update-banner {
position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
z-index: 1000;
display: flex; align-items: center; gap: 12px;
background: var(--modal-bg);
border: 1px solid var(--gold);
border-radius: 8px;
padding: 9px 12px 9px 16px;
box-shadow: 0 6px 22px rgba(0,0,0,0.55);
font-family: var(--ff-display); font-size: 0.82rem;
color: var(--cream); letter-spacing: 0.04em;
max-width: calc(100% - 24px);
animation: fadeIn 0.3s ease;
}
#update-banner button {
background: var(--gold); color: var(--on-gold); border: none;
border-radius: 5px; padding: 6px 14px; cursor: pointer;
font-family: var(--ff-display); font-weight: 700; font-size: 0.78rem;
letter-spacing: 0.06em; white-space: nowrap;
transition: filter 0.12s;
}
#update-banner button:hover { filter: brightness(1.12); }
#reconnect-banner {
position: fixed; top: 0; left: 0; right: 0; z-index: 999;
background: rgba(var(--red-rgb), 0.95);
color: #fff; text-align: center;
padding: 6px 12px; font-size: 0.8rem;
font-family: var(--ff-display); letter-spacing: 0.08em;
display: none; align-items: center; justify-content: center; gap: 10px;
animation: fadeIn 0.3s ease;
}
#reconnect-banner.visible { display: flex; }
#reconnect-banner .rc-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #fff; animation: pulse 1s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
/* ══ HANDS HELP OVERLAY ══ */
#hands-overlay {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: transparent; pointer-events: none; /* fenêtre flottante, pas de backdrop */
padding: 12px;
}
#hands-card-inner { pointer-events: auto; }
.hands-card {
background: var(--modal-bg);
border: 1px solid var(--gold-dim); border-top: 3px solid var(--gold);
border-radius: 10px; padding: 16px 18px;
max-width: min(460px, 96vw); max-height: 90dvh;
overflow-y: auto; width: 100%;
box-shadow: 0 0 60px rgba(var(--gold-rgb), 0.18), 0 20px 50px rgba(0,0,0,0.8);
}
.hands-title {
font-family: var(--ff-display); font-size: 0.75rem;
letter-spacing: 0.25em; text-transform: uppercase;
color: var(--text-hi); text-align: center;
padding-bottom: 12px; border-bottom: 1px solid var(--border);
margin-bottom: 10px;
}
.hand-row {
display: flex; align-items: center; gap: 10px;
padding: 7px 6px; border-bottom: 1px solid rgba(var(--gold-rgb), 0.07);
border-radius: 4px; transition: background 0.12s;
}
.hand-row:hover { background: var(--inset-hi); }
.hand-rank {
width: 20px; text-align: center; flex-shrink: 0;
font-size: 0.65rem; color: var(--gold-dim); font-family: var(--ff-display);
}
.hand-cards { display: flex; gap: 2px; flex-shrink: 0; }
.hc {
width: 22px; height: 32px; border-radius: 3px;
background: #f8f5ee; border: 1px solid #ccc;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-size: 0.55rem; font-weight: 700; line-height: 1.1;
color: #111; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.hc.r { color: #c0392b; }
.hc.hi { background: linear-gradient(135deg,#fff9e6,#f5e6b0); border-color: var(--gold); box-shadow: 0 0 5px rgba(var(--gold-rgb), 0.5); }
.hand-info { flex: 1; min-width: 0; }
.hand-name {
font-size: 0.78rem; color: var(--text-hi); font-weight: 600;
font-family: var(--ff-display); letter-spacing: 0.04em;
display: flex; align-items: center; gap: 6px;
}
.hand-ico { font-size: 0.95rem; line-height: 1; flex-shrink: 0; }
.hand-desc { font-size: 0.64rem; color: var(--text); margin-top: 1px; }
.hand-desc .hand-ex { color: var(--gold-hi); }
/* Rail de force (vert fort → gris faible) à gauche de chaque ligne */
.hand-rail { width: 4px; border-radius: 3px; flex-shrink: 0; align-self: stretch; }
/* Carte qui COMPTE = éclairée ; carte inutile = estompée */
.hc.key { box-shadow: 0 0 0 1.5px var(--gold-hi), 0 0 7px rgba(224,192,112,0.55); }
.hc.kick { opacity: 0.34; filter: grayscale(0.55); }
/* Légende pédagogique */
.hands-legend {
display: flex; align-items: center; justify-content: center;
gap: 12px; flex-wrap: wrap; font-size: 0.6rem; color: var(--text);
padding: 8px 0 7px; margin-bottom: 4px;
border-bottom: 1px solid rgba(var(--gold-rgb), 0.07);
}
.hands-legend .hl { display: flex; align-items: center; gap: 5px; }
.hl-mini { width: 13px; height: 18px; border-radius: 2px; background: #f8f5ee; border: 1px solid #ccc; display: inline-block; }
.hl-mini.bright { box-shadow: 0 0 0 1.5px var(--gold-hi), 0 0 5px rgba(224,192,112,0.6); }
.hl-mini.dim { opacity: 0.34; filter: grayscale(0.5); }
.hl-grad { width: 46px; height: 7px; border-radius: 4px; display: inline-block;
background: linear-gradient(90deg,#2ecc71,#c9b144,#6f6353); }
.hands-close {
display: block; width: 100%; margin-top: 14px;
background: rgba(var(--gold-rgb), 0.12); border: 1px solid var(--gold-dim);
color: var(--gold); padding: 9px; border-radius: 4px;
font-family: var(--ff-display); font-size: 0.75rem;
letter-spacing: 0.1em; cursor: pointer; text-align: center;
transition: background 0.15s;
}
.hands-close:hover { background: rgba(var(--gold-rgb), 0.22); }
/* ══ ANIMATIONS — Distribution, jetons, flip, stats ══ */
/* Carte volante lors de la distribution */
.fly-card {
position: fixed; pointer-events: none; z-index: 400;
width: 26px; height: 37px;
background: var(--card-back) center / 100% 100% no-repeat, #16301a;
border-radius: 3px; border: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 3px 10px rgba(0,0,0,0.5);
transition: left 0.42s cubic-bezier(.2,.8,.3,1),
top 0.42s cubic-bezier(.2,.8,.3,1),
transform 0.42s ease, opacity 0.15s ease;
}
/* Jeton volant vers le pot */
.fly-chip {
position: fixed; pointer-events: none; z-index: 400;
width: 20px; height: 20px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f5e67a, #c8a850 60%, #8b6914);
border: 2px solid #5a3800;
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
display: flex; align-items: center; justify-content: center;
font-size: 0.38rem; font-weight: 900; color: #3d2b00;
transition: left 0.5s cubic-bezier(.3,.9,.4,1),
top 0.5s cubic-bezier(.3,.9,.4,1),
opacity 0.2s ease 0.35s, transform 0.5s ease;
}
/* Flip 3D des cartes communes */
@keyframes flipCard3D {
0% { transform: perspective(400px) rotateY(-90deg) scale(0.85); opacity: 0; }
55% { transform: perspective(400px) rotateY(8deg) scale(1.04); opacity: 1; }
80% { transform: perspective(400px) rotateY(-3deg) scale(1); }
100% { transform: perspective(400px) rotateY(0deg) scale(1); opacity: 1; }
}
.pk.flip-reveal {
animation: flipCard3D 0.45s cubic-bezier(.25,.8,.25,1) both;
}
/* Panneau statistiques de session */
#stats-overlay {
position: fixed; top: 36px; right: 0;
width: 240px; max-height: calc(100vh - 36px);
background: var(--panel);
border-left: 1px solid var(--border);
border-bottom: 1px solid var(--border);
z-index: 200; overflow-y: auto;
animation: slideDown 0.2s ease;
}
.stats-header {
padding: 8px 12px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gold-dim);
}
.stats-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; }
.stat-label { font-size: 0.62rem; color: var(--text); }
.stat-val { font-size: 0.72rem; font-weight: 700; font-family: var(--ff-mono); }
.stat-val.pos { color: var(--pos); }
.stat-val.neg { color: var(--neg); }
.stat-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
/* Stats panel tabs (Session / Total / Ranking) */
.stats-tabs { display: flex; border-bottom: 1px solid var(--border); }
.stats-tab {
flex: 1; background: none; border: none; cursor: pointer;
padding: 7px 4px; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text); font-family: var(--ff-display);
border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s;
}
.stats-tab.active { color: var(--sel,var(--gold)); border-bottom-color: var(--sel,var(--gold)); }
.stat-note { font-size: 0.58rem; color: var(--gold-dim); line-height: 1.3; margin-bottom: 2px; }
.stat-empty { font-size: 0.62rem; color: var(--text); text-align: center; padding: 14px 0; }
.stats-reset {
margin-top: 2px; background: rgba(var(--red-rgb), 0.12); color: var(--red);
border: 1px solid rgba(var(--red-rgb), 0.4); border-radius: 5px; cursor: pointer;
padding: 7px; font-size: 0.62rem; font-family: var(--ff-display); letter-spacing: 0.06em;
transition: background 0.12s;
}
.stats-reset:hover { background: rgba(var(--red-rgb), 0.22); }
/* Leaderboard rows: rank · avatar · name · net on top, sub-line below */
.board-list { display: flex; flex-direction: column; }
.board-row {
display: grid; align-items: center;
grid-template-columns: 1.6rem 1.4rem 1fr auto;
grid-template-areas: "rank av name net" "sub sub sub sub";
column-gap: 6px; row-gap: 1px;
padding: 6px 0; border-bottom: 1px solid var(--border);
}
.board-row.me { background: rgba(var(--gold-rgb), 0.10); border-radius: 4px; padding-left: 4px; padding-right: 4px; }
.board-rank { grid-area: rank; font-size: 0.8rem; text-align: center; }
.board-av { grid-area: av; font-size: 1rem; text-align: center; line-height: 1; }
.board-name { grid-area: name; font-size: 0.66rem; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-net { grid-area: net; font-size: 0.72rem; font-weight: 700; font-family: var(--ff-mono); }
.board-net.pos { color: var(--pos); }
.board-net.neg { color: var(--neg); }
.board-sub { grid-area: sub; font-size: 0.55rem; color: var(--gold-dim); font-family: var(--ff-mono); }
.board-sort { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.board-sort > span { color: var(--gold-dim); font-size: 0.7rem; }
.board-sort select {
flex: 1; background: var(--field-bg); border: 1px solid var(--border);
border-radius: 3px; color: var(--cream); padding: 3px 6px;
font-family: var(--ff-mono); font-size: 0.66rem; outline: none; cursor: pointer;
}
.board-myrank {
font-size: 0.62rem; color: var(--gold); font-family: var(--ff-mono);
text-align: center; padding: 2px 0 6px; letter-spacing: 0.04em;
}
.hand-hist-item {
background: var(--inset); border: 1px solid var(--border);
border-radius: 4px; padding: 6px 8px; font-size: 0.58rem;
}
.hand-hist-cards { display: flex; gap: 3px; margin-top: 3px; }
.hand-hist-result { margin-top: 3px; font-weight: 700; }
/* Loading dots */
@keyframes blink {
0%,80%,100% { opacity: 0.2; }
40% { opacity: 1; }
}
.ld span { animation: blink 1.3s infinite; }
.ld span:nth-child(2) { animation-delay: 0.22s; }
.ld span:nth-child(3) { animation-delay: 0.44s; }
.btn-join {
background: #2b3444;
color: #ffffff;
border: none;
padding: 4px 12px;
font-family: var(--ff-display);
font-size: 0.72rem;
font-weight: 700;
border-radius: 2px;
cursor: pointer;
letter-spacing: 0.1em;
transition: background 0.15s;
flex-shrink: 0;
}
.btn-join:hover { background: #384252; }
.game-row { cursor: pointer; }
/* ═══ MOBILE: compact buttons in the available-tables list ═══
On screens up to 540px, the Rejoindre + Regarder buttons were
eating the entire row width, truncating the table name to
"WebGame-o..." (see screenshot IMG_8007). The cluster on the
right used to be: '2/2 ▶ REJOINDRE 👁 REGARDER'. We shrink the
buttons and the count badge, drop the letter-spacing so the
labels are tighter, and use shorter padding. The .game-info
container already has flex:1 + min-width:0 (line 438), so any
space freed here is automatically given to the name. */
@media (max-width: 740px) {
.game-row { gap: 8px; padding: 10px 12px; }
.game-name { font-size: 0.82rem; }
.game-meta { font-size: 0.66rem; gap: 6px; }
.game-count { font-size: 0.78rem; }
.btn-join {
padding: 4px 8px;
font-size: 0.62rem;
letter-spacing: 0.04em;
}
.btn-watch {
padding: 4px 7px;
font-size: 0.6rem;
letter-spacing: 0.04em;
}
/* Shrink the gap inside the right-hand button cluster */
.game-row > div:last-child { gap: 6px !important; }
}
/* Even tighter on very narrow phones (e.g. iPhone SE, ~320-400px wide).
The Rejoindre label has been "REJOINDRE / Partie rapide" stuff and
risks dominating the row again. Just trim further. */
@media (max-width: 400px) {
.game-row { padding: 9px 10px; gap: 6px; }
.btn-join { padding: 3px 6px; font-size: 0.58rem; }
.btn-watch { padding: 3px 5px; font-size: 0.56rem; }
.game-count { font-size: 0.7rem; }
.game-row > div:last-child { gap: 4px !important; }
}
/* ═══ GAME SCREEN ═══ */
#s-game { overflow: visible; flex-direction: column; }
.game-area {
position: relative; /* ancre des boutons de zoom de la table */
flex: 1;
display: flex;
flex-direction: column;
min-height: 300px; /* fallback si flex échoue */
overflow: visible;
/* Space for fixed bottom bars */
padding-bottom: clamp(110px, 17dvh, 140px);
}
.table-zone { display:flex; align-items:center; justify-content:center; overflow:visible; position:relative;
flex: 1;
min-height: 160px; /* garde-fou : ne jamais s'effondrer */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.table-scaler { overflow: visible;
padding: 30px 45px;
display: flex;
align-items: center;
justify-content: center;
transform-origin: center center;
flex-shrink: 0;
min-width: 300px; /* garantit scrollWidth > 0 */
min-height: 150px;
}
.felt-oval::before {
content: '';
position: absolute;
inset: 10px;
border-radius: 50% / 42%;
border: 2px solid rgba(255,255,255,0.07);
pointer-events: none;
}
.felt-oval { overflow: visible;
width: min(520px, 90vw);
height: min(240px, min(46vw, calc(100dvh - 250px)));
min-height: 110px;
background:
/* Halo éclairage central (lampe au-dessus) */
radial-gradient(ellipse 55% 45% at 50% 45%, rgba(255,255,220,0.07) 0%, transparent 70%),
/* Ombres de bord (profondeur) */
radial-gradient(ellipse 90% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.35) 100%),
/* Texture tissu — lignes diagonales très fines */
repeating-linear-gradient(
45deg,
transparent,
transparent 3px,
rgba(0,0,0,0.06) 3px,
rgba(0,0,0,0.06) 4px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 3px,
rgba(0,0,0,0.04) 3px,
rgba(0,0,0,0.04) 4px
),
/* Couleur de base dégradée */
var(--felt-img, radial-gradient(ellipse 80% 60% at 50% 50%, var(--felt-base-hi) 0%, var(--felt-base-mid) 55%, var(--felt-base-lo) 100%));
border-radius: 50% / 45%;
border: 8px solid var(--rail);
box-shadow:
0 0 0 3px var(--rail-dark),
0 0 0 5px var(--rail-glow),
inset 0 2px 16px rgba(0,0,0,0.5),
inset 0 -4px 20px rgba(0,0,0,0.3),
0 20px 60px rgba(0,0,0,0.8),
0 0 40px rgba(0,0,0,0.4);
position: relative;
overflow: visible;
flex-shrink: 0;
}
/* Community cards — centred inside oval.
The previous value top:56% pushed the row 6% below center, which on
mobile/tablet visibly drifted the cards toward the bottom rim of the
felt. Pure 50% centers them on the vertical axis of the oval (the
gradient halo and shadow ring are already designed around 50%/45%). */
.comm-row {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
display: flex;
gap: 5px;
align-items: center;
justify-content: center; /* #g-comm est en flux pleine largeur (ID position:relative) -> centrer les cartes dedans */
}
/* Pot display */
.pot-display { display: none; }
/* Badge pot au-dessus des cartes (parité pot badge QML §9). Positionné dans le
feutre, juste au-dessus de la rangée de cartes communes. Affiché seulement sur
tablette/desktop (≥900px) ET quand le pot est non nul (classe .has-pot posée
par setPot). Sur mobile le pot reste dans la barre d'état sous le header. */
.pot-badge {
display: none;
position: absolute;
left: 50%;
top: 50%;
--pot-badge-lift: 68px; /* écart au-dessus des cartes (réglable ici) */
transform: translate(-50%, calc(-100% - var(--pot-badge-lift)));
z-index: 6;
align-items: center;
gap: 6px;
padding: 4px 13px;
background: rgba(0, 0, 0, 0.5);
border: 1.5px solid var(--sel, #E3C800); /* accent or QML (colorAccent), stable clair/sombre */
border-radius: 999px;
color: var(--sel, #E3C800);
font-family: var(--ff-display);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.05em;
white-space: nowrap;
box-shadow: 0 2px 9px rgba(0, 0, 0, 0.42);
pointer-events: none;
}
.pot-badge::before {
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
background: radial-gradient(circle at 50% 38%, #ffe89a 0%, #f2c94c 55%, #c99a1e 100%);
border: 2px dashed rgba(0, 0, 0, 0.28);
box-sizing: border-box;
flex: 0 0 auto;
}
@media (min-width: 900px) {
.pot-badge.has-pot { display: inline-flex; }
}
/* Le badge se positionne via transform:translate ; l'animation générique
.pot-pop (transform:scale) écraserait ce translate → le badge sautait sur
les cartes au flop. Pop dédié qui conserve le translate, et pas de
display:inline-block forcé (respecte la visibilité tablette/desktop). */
.pot-badge.pot-pop { display: none; animation: potBadgePop 0.3s ease-out; }
@media (min-width: 900px) {
.pot-badge.has-pot.pot-pop { display: inline-flex; }
}
@keyframes potBadgePop {
0%, 100% { transform: translate(-50%, calc(-100% - var(--pot-badge-lift))) scale(1); }
40% { transform: translate(-50%, calc(-100% - var(--pot-badge-lift))) scale(1.16); }
}
.pot-bar {
text-align: center;
padding: 3px 0;
font-family: var(--ff-display);
font-size: 0.85rem;
font-weight: 600;
color: var(--gold);
letter-spacing: 0.12em;
background: rgba(0,0,0,0.25);
flex-shrink: 0;
}
.my-seat-row {
display: flex;
justify-content: center;
padding: 4px 0;
flex-shrink: 0;
}
/* Seats */
.seat {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 44px;
max-width: 68px;
}
/* Sièges cliquables : tap/clic → popup d'info joueur. #g-seats reste en
pointer-events:none ; on réactive l'interaction au niveau du siège. Les
sièges « fantômes » (joueur parti) restent non cliquables. Le halo de survol
(drop-shadow, suit la forme ronde + la palette) est limité aux pointeurs
précis pour éviter un survol « collé » au tap. */
.seat { pointer-events: auto; cursor: pointer; }
.seat-ghost { pointer-events: none; cursor: default; }
@media (hover: hover) {
.seat:hover .seat-avatar { filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.85)); }
}
.seat-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(0,0,0,0.5);
border: 2px solid rgba(var(--gold-rgb), 0.3);
display: flex; align-items: center; justify-content: center;
font-size: 0.68rem; color: var(--text-hi);
font-family: var(--ff-display);
position: relative;
transition: border-color 0.3s, box-shadow 0.3s;
}
/* ── PokerTH official avatar (downloaded from pokerth.net) ──
When a player has uploaded an avatar on their pokerth.net account, we
slot it in as an ![]()
inside the circular avatar
wrapper. The wrapper gets .has-pth-avatar so we know to:
- hide the text fallback (.seat-initial)
- drop the background tint (the image fills the whole area)
The image clips itself to a circle via border-radius:50% (no need to
clip the parent). This is CRITICAL: setting overflow:hidden on the
.seat-avatar would also clip the SB/BB chip (positioned top:-8px,
left:-8px) and the dealer chip (top:-8px, right:-8px), which sit
intentionally outside the circle for visibility. By keeping the
parent overflow:visible and clipping only the ![]()
itself, we get
the round avatar AND the chips remain visible on top. */
.seat-avatar.has-pth-avatar { background: rgba(0,0,0,0.2); }
.seat-avatar.has-pth-avatar > .seat-initial { display: none; }
.seat-avatar > .seat-pth-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* border-radius on a replaced element (![]()
) clips the image content
itself -- no overflow:hidden on the parent needed. */
border-radius: 50%;
/* Image must not block pointer events on overlapping chips/badges. */
pointer-events: none;
/* Stay BELOW the overlays. Badges/timer have explicit z-index >= 3. */
z-index: 0;
}
/* Same treatment for the player-bar avatar (your own seat at the bottom).
No overflow:hidden here either -- the green ring and shadow stay
intact, the image clips itself via border-radius. */
.pb-avatar.has-pth-avatar { padding: 0; }
.pb-avatar > .pb-pth-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
pointer-events: none;
}
.me-oval-seat .seat-avatar {
border: 2px solid var(--green) !important;
box-shadow: 0 0 8px rgba(var(--green-rgb), 0.4);
}
.seat.active .seat-avatar {
border-color: var(--gold);
box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.6);
}
/* Countdown arc around active seat avatar */
.seat-timer {
position: absolute;
width: 160%; height: 160%;
top: -30%; left: -30%;
pointer-events: none;
overflow: visible;
z-index: 2;
}
.seat-timer circle.bg { fill:none; stroke:rgba(0,0,0,0.45); stroke-width:4.5; }
.seat-timer circle.arc { fill:none; stroke-width:4; stroke-linecap:round; }
/* Fond opaque derrière le chiffre */
.seat-timer circle.center-bg {
fill: transparent;
stroke: none;
}
.seat-timer text {
font-size: 10px;
font-family: monospace;
font-weight: 900;
text-anchor: middle;
dominant-baseline: middle;
}
/* Quand le timer tourne : initiale ET emoji toujours visibles (au-dessus du SVG arc) */
.seat-avatar.timing > .seat-initial {
display: flex !important;
align-items: center;
justify-content: center;
position: relative;
z-index: 6;
}
.seat-avatar.emoji-av.timing > .seat-initial { display: flex; position: relative; z-index: 6; }
/* Avatar image (photo perso / PokerTH) : ne JAMAIS afficher l'initiale par-dessus,
même pendant le timer. Plus specifique + !important pour battre la regle .timing. */
.seat-avatar.timing.has-pth-avatar > .seat-initial { display: none !important; }
.seat.active .seat-name,
.seat.active .seat-money { opacity: 0.35; transition: opacity 0.3s; }
/* Dealer chip : rendu via SVG chipSvg() dans renderSeats */
.dealer-chip {
position: absolute; top:-8px; right:-8px;
z-index: 3; pointer-events: none;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
animation: chipPop 0.4s cubic-bezier(.17,.67,.35,1.45) both;
}
/* Badges SB / BB */
.blind-chip {
position: absolute; top:-8px; left:-8px;
z-index: 4; pointer-events: none;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
animation: chipPop 0.4s cubic-bezier(.17,.67,.35,1.45) both;
}
/* Drapeau pays sur l'avatar (coin bas-droite, n'empiète pas sur SB/BB/Dealer
qui sont en haut). Masqué si absent (non rendu). */
.seat-flag {
position: absolute; bottom: -6px; right: -6px;
z-index: 4; pointer-events: none;
line-height: 0;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
animation: chipPop 0.4s cubic-bezier(.17,.67,.35,1.45) both;
}
.seat-flag .cc-flag { width: 18px; height: 13px; display: block; }
@keyframes chipPop {
0% { transform: scale(0) rotate(-40deg); opacity: 0; }
65% { transform: scale(1.25) rotate(8deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.seat.folded .seat-avatar::before {
content: '✕';
position: absolute;
font-size: 0.7rem;
color: var(--neg);
font-weight: 900;
z-index: 3;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.seat.me .seat-avatar { border-color: var(--green); }
/* Eliminated / sitting-out seat: stays in place around the felt so the
other players don't visually rotate between hands, but appears faded
with a dim border and a small "OUT" badge. The slight grayscale also
defuses any colour cue (turn highlight, dealer chip) that may linger
from a previous hand. */
/* .seat-out reste cliquable : pointer-events:auto + cursor:pointer herites
de .seat -> un tap ouvre la popup d'info du joueur elimine/absent, comme
en jeu (le handler de clic ne saute que .seat-ghost).
Estomper le contenu, pas la pastille : l'opacite d'un parent plafonne
celle de ses enfants (::after compris) -> le badge resterait invisible.
On grise avatar/nom/tapis/mise separement et on garde la pastille a
pleine opacite, par-dessus, dans une couleur qui suit le theme. */
.seat.seat-out .seat-plate,
.seat.seat-out .seat-foot {
opacity: 0.4;
filter: grayscale(0.6);
}
.seat.seat-out::after {
content: 'OUT';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-10deg);
font-family: var(--ff-display);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
color: #fff;
background: var(--red);
padding: 2px 7px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 4px;
box-shadow: 0 1px 5px rgba(0,0,0,0.45);
z-index: 4;
pointer-events: none;
}
.seat-name {
font-size: 0.68rem; color: var(--text-hi);
white-space: nowrap; text-overflow: ellipsis;
max-width: 68px; overflow: hidden; text-align: center;
}
.seat-money {
font-size: 0.7rem; color: var(--gold);
font-family: var(--ff-mono);
}
.seat-bet {
font-size: 0.52rem;
background: rgba(0,0,0,0.6); border: 1px solid var(--border);
border-radius: 20px; padding: 1px 5px;
color: var(--cream); white-space: nowrap;
}
.seat-action-label {
font-size: 0.5rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text);
}
/* ── Vignette d'action ovale posée sur la box (fidélité client officiel) ──
Texte traduit (i18n), couleur par action : Fold rouge · Check/Call bleu ·
Bet/Raise vert · All-in rouge sombre (palette Theme.qml, bible §7). */
.seat-action-badge {
position: absolute;
/* Posée sur les cartes (moitié droite de la rangée avatar+cartes), comme le
client officiel — la rangée du haut est centrée dans .seat, on décale donc
la vignette vers la droite pour la caler au-dessus des cartes. */
top: -5px; left: calc(50% + 17px); transform: translateX(-50%);
z-index: 7;
white-space: nowrap;
font-family: var(--ff-display);
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em;
padding: 2px 10px; border-radius: 999px;
color: #fff;
border: 1px solid rgba(0,0,0,0.35);
box-shadow: 0 2px 6px rgba(0,0,0,0.45);
pointer-events: none;
}
.seat-action-badge.act-c1 { background: #8b1a1a; border-color: #e87070; } /* Fold */
.seat-action-badge.act-c2,
.seat-action-badge.act-c3 { background: #1a3d8b; border-color: #6aa0e8; } /* Check / Call */
.seat-action-badge.act-c4,
.seat-action-badge.act-c5 { background: #1e6614; border-color: #7ad06a; } /* Bet / Raise */
.seat-action-badge.act-c6 { background: #5c1111; border-color: #ef5350; } /* All-in */
@keyframes pulse-gold {
0%,100% { box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5); }
50% { box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.9); }
}
/* ═══ POKER CARDS ═══ */
.pk {
width: 42px; height: 60px;
border-radius: 4px;
position: relative;
background: #fff; color: #111;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-size: 1rem; font-weight: 800;
/* Ombre portée multi-couche pour effet 3D */
box-shadow:
0 1px 0 rgba(255,255,255,0.8) inset,
0 -1px 0 rgba(0,0,0,0.1) inset,
2px 4px 8px rgba(0,0,0,0.45),
4px 8px 20px rgba(0,0,0,0.25),
0 0 0 1px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.15);
line-height: 1.1; user-select: none; flex-shrink: 0;
}
/* ♥ cœur : rouge profond classique */
.pk.red { color: #c0392b; }
/* ♦ carreau : rouge plus orangé/vermillon pour le distinguer du ♥ (narmod)
— les deux étant identiquement rouges, les confondre était facile. */
.pk.diamond { color: #e85a2c; }
/* Deck 4 couleurs (parite 2.1.2 nobus_4c_classic) : ♦ bleu, ♣ vert ;
♥ rouge et ♠ noir inchanges. Glyphes seulement (un deck d'images prime). */
body.adv-4color .pk.diamond { color: #1a6fd4; }
body.adv-4color .pk:not(.red):not(.spade):not(.back) { color: #1e8c3a; }
/* Dos de carte « Medaillon + Treillis » (theme feutre/or) : SVG vectoriel
net et scalable a toutes les tailles, rasterise une fois, zero cout runtime.
Defini une seule fois dans --card-back, partage avec .fly-card. */
.pk.back {
background: var(--card-back) center / 100% 100% no-repeat, #16301a;
color: transparent; font-size: 0;
}
.pk.back::after { content: none; }
/* ── Jeu de cartes : deck SVG (axe "Cartes", data-deck="svg") ──
Defaut = glyphes (.c-rank/.c-suit). Avec data-deck="svg", chaque face .pk
affiche son SVG (chemin pose en variable inline --cf par cardToHtml/cardHtml)
et les glyphes sont masques ; le dos (et les fly-cards de distribution)
passent par --card-back surcharge ci-dessous. Switch 100% CSS, instantane,
sans re-render. Assets : /cards/svg/*.svg (PokerTH, AGPL-3.0). */
:root[data-deck] .pk:not(.back) {
background-image: var(--cf, none);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
}
:root[data-deck] .pk:not(.back) .c-rank,
:root[data-deck] .pk:not(.back) .c-suit { display: none; }
/* Dos : --card-back est pose en inline sur par le boot + _refreshDeck
(deck-aware), pour .pk.back ET .fly-card, quel que soit le deck. */
.pk.sm { width: 32px; height: 46px; font-size: 0.76rem; font-weight: 700; }
.pk.md { width: 46px; height: 66px; font-size: 1.05rem; font-weight: 800; }
.pk.xsm { width: 20px; height: 29px; font-size: 0.5rem; font-weight: 700; border-radius: 3px; }
.pk.lg { width: 58px; height: 84px; font-size: 1.35rem; font-weight: 900; }
/* Plus grosses lettres + plus gros symboles de couleur pour lisibilité (narmod).
La 'couleur' (suit) prend ~1.3em au lieu de 0.9em, le rang ~1.35em au lieu de 1em.
Avec `line-height:1` et flex-column, deux lignes de ~2.6em tiennent
dans toutes les tailles de carte (xsm/sm/md/lg) sans débordement. */
/* Carte Classique : agencement standard facon PokerTH — index (rang+symbole)
en haut-gauche et bas-droite (pivote), grand symbole au centre. */
.pk .c-rank { font-size: 1.35em; line-height: 1; }
.pk .c-suit { font-size: 1.3em; line-height: 1; margin-top: 1px; }
/* Petites cartes : on garde un seul index (coin haut-gauche) + le centre, pour rester lisible. */
/* ♠ pique : fond légèrement bleuté pour distinguer de ♣ trèfle (tous deux noirs) */
.pk.spade { background: linear-gradient(160deg, #f4f7ff 0%, #edf1fc 100%); }
/* ── Bottom zone: my cards + actions ── */
.my-zone {
position: fixed;
bottom: calc(56px + env(safe-area-inset-bottom)); /* above player-bar, clears gesture nav */
left: 0; right: 0;
z-index: 29;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
background: var(--panel);
border-top: 1px solid var(--border);
gap: 8px;
/* Nécessaire pour que #hand-strength se positionne par rapport à this */
overflow: visible;
}
.my-cards {
display: flex;
gap: 6px;
align-items: center;
}
.my-label {
font-size: 0.75rem;
color: var(--green);
letter-spacing: 0.05em;
font-weight: 600;
}
.my-stack {
font-size: 0.7rem;
color: var(--gold);
margin-top: 2px;
}
.me-info {
display: flex;
flex-direction: column;
margin-right: 8px;
}
/* Conteneur centre a la largeur de la barre (--bottom-w) : ancre le pin et
l'oeil sur la barre, pas sur le bord de l'ecran (tablette/desktop). */
.action-wrap {
position: relative;
flex: 1;
min-width: 0;
max-width: var(--bottom-w);
display: flex;
align-items: center;
justify-content: center;
}
.action-bar {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
flex: 1;
}
.btn-action {
padding: 8px 14px;
border-radius: 8px;
font-family: var(--ff-display);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
cursor: pointer;
border: none;
transition: filter 0.12s, transform 0.08s;
white-space: nowrap;
}
.btn-action:active { transform: scale(0.96); }
.btn-action:hover { filter: brightness(1.15); }
.btn-fold { background: var(--btn-fold-bg, #6b2020); color: var(--btn-fold-fg, #ffd0d0); }
.btn-check { background: var(--btn-check-bg, #1a5c1a); color: var(--btn-check-fg, #c0ffc0); }
.btn-call { background: var(--btn-call-bg, #1a4a8a); color: var(--btn-call-fg, #c0d8ff); }
.btn-raise { background: var(--btn-raise-bg, var(--gold)); color: var(--btn-raise-fg, var(--on-gold)); }
/* Compact auto check/fold toggle, sits next to Call/Check. Discreet at
rest; turns green when armed for the next turn. Icon-only on narrow. */
.btn-auto {
flex: 0 0 auto;
min-width: 46px;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
background: rgba(var(--gold-rgb), 0.08);
color: var(--gold);
border: 1px solid var(--border);
}
.btn-auto .auto-tx { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; }
.btn-auto .auto-ic { width: 16px; height: 16px; display: block; flex: none; }
.btn-auto .auto-ic.ic-check { color: #5fd089; } /* will auto-check */
.btn-auto .auto-ic.ic-fold { color: #e08a6f; } /* will auto-fold */
.btn-auto:hover { background: rgba(var(--gold-rgb), 0.15); border-color: var(--gold-dim); }
.btn-auto.armed {
background: rgba(var(--green-rgb), 0.22);
border-color: var(--green);
color: var(--on-green);
box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.35), 0 0 12px rgba(var(--green-rgb), 0.25);
}
.btn-auto.armed .auto-ic { color: var(--on-green); } /* light glyph for contrast on green */
.action-top-row .btn-auto { flex: 0 0 auto; min-width: 46px; }
@media (max-width: 480px) { .btn-auto { min-width: 48px; } }
/* ── Panneau "aperçu des actions" (ouvert en tapant ses cartes) ── */
.pb-cards { cursor: pointer; }
/* Aperçu hors-tour : le MÊME panneau d'action que pendant notre tour, mais
rendu non interactif — tout est neutralisé au clic SAUF le bouton AUTO,
le seul réglage qu'on peut armer à l'avance. */
.actions-preview {
position: relative;
width: 100%;
box-sizing: border-box;
pointer-events: none; /* coupe Fold / Call / % / relance / All-In */
opacity: 0.96;
}
.actions-preview .btn-auto { pointer-events: auto; opacity: 1; } /* AUTO reste activable */
/* Hors-tour (apercu) : touches d'action grisees (desaturees + attenuees) pour
signaler qu'elles ne sont pas jouables. Le dropdown de mode reste intact.
grayscale() porte sur les couleurs du theme en cours -> conforme a toutes
les palettes (y compris boutons-images). */
/* Pré-sélection : les 4 boutons d'action restent CLIQUABLES et colorés en
aperçu — on peut armer/désarmer une action avant son tour (client officiel).
Un bouton désactivé (relance indisponible) reste grisé et inactif. */
.actions-preview .btn-action { pointer-events: auto; filter: none; opacity: 1; }
.actions-preview .btn-action:disabled { pointer-events: none; filter: grayscale(0.9); opacity: 0.5; }
/* Contrôles de montant : encore inactifs en aperçu (la pré-relance part au min). */
.actions-preview .btn-pct,
.actions-preview .raise-slider,
.actions-preview .raise-display {
filter: grayscale(0.9);
opacity: 0.5;
}
.actions-preview .mode-sel-wrap { pointer-events: auto; opacity: 1; } /* mode dropdown reste activable en aperçu */
/* Action pré-armée : bord or + point or en haut à droite (bible §5.3). */
.btn-action.prearmed {
position: relative;
outline: 2px solid #FFD700;
outline-offset: -2px;
box-shadow: 0 0 0 1px #FFD700, 0 0 12px rgba(255,215,0,0.55);
}
.btn-action.prearmed::after {
content: '';
position: absolute;
top: -4px; right: -4px;
width: 9px; height: 9px;
border-radius: 50%;
background: #FFD700;
box-shadow: 0 0 4px rgba(255,215,0,0.9);
}
/* Hidden by default; shown only when the user enables it from the ••• menu. */
body.hide-auto-btn .btn-auto,
body.hide-auto-btn .mode-sel-wrap { display: none; }
body.hide-pct-btns .pct-row { display: none; }
/* All-In : bouton orange compact dans la ligne 1/3-1/2-Pot (layout officiel).
Les themes a images de boutons (data-btn-img) repeignent via border-image. */
.btn-allin {
background: var(--btn-allin-bg, linear-gradient(180deg, #e08a2e, #b5651d));
color: var(--btn-allin-fg, #fff);
border: 1px solid var(--btn-allin-bd, #f0a350); outline: none;
padding: 8px 12px; font-size: 0.7rem; letter-spacing: 0.06em;
}
.btn-allin:hover { filter: brightness(1.08); }
.btn-allin b { color: var(--btn-allin-fg-b, #fff); }
/* Image-backed action buttons (9-slice SVG/PNG via the Buttons axis). */
:root[data-btn-img] .btn-action { border: 9px solid transparent; background: transparent; padding: 1px 9px !important; }
:root[data-btn-img] .btn-fold { border-image: var(--btn-fold-img) 9 fill / 9px / 0 stretch; color: var(--btn-fold-fg, #fff); }
:root[data-btn-img] .btn-check { border-image: var(--btn-check-img) 9 fill / 9px / 0 stretch; color: var(--btn-check-fg, #fff); }
:root[data-btn-img] .btn-call { border-image: var(--btn-call-img) 9 fill / 9px / 0 stretch; color: var(--btn-call-fg, #fff); }
:root[data-btn-img] .btn-raise { border-image: var(--btn-raise-img) 9 fill / 9px / 0 stretch; color: var(--btn-raise-fg, #fff); }
:root[data-btn-img] .btn-allin { border-image: var(--btn-allin-img) 9 fill / 9px / 0 stretch; color: var(--btn-allin-fg, #fff); }
:root[data-btn-img] .btn-allin b { color: var(--btn-allin-fg-b, #fff); }
.raise-input {
background: var(--field-bg);
border: 1px solid var(--border-hi);
border-radius: 2px;
color: var(--cream);
padding: 7px 8px;
font-family: var(--ff-mono);
font-size: 0.85rem;
width: 72px;
outline: none;
}
.raise-input:focus { border-color: var(--gold); }
/* ══ PANNEAUX FLOTTANTS (chat + réactions) — hors du flux flex ══
position:fixed → la zone de table garde toujours toute sa hauteur */
#g-chat-panel {
position: fixed !important;
top: var(--ovl-top, 48px); /* juste sous le header */
left: 0; right: 0;
z-index: 100;
max-height: min(280px, 38dvh) !important;
background: var(--panel);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
#g-reaction-panel {
position: fixed !important;
top: var(--ovl-top, 48px);
left: 0; right: 0;
z-index: 101;
background: var(--panel);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
/* Log panel — same visual treatment as #g-chat-panel so the two
feel like siblings (the user opens them with adjacent header
buttons). Only difference is z-index 99 vs 100, keeping the chat
one tick above when both are open. */
#g-log-panel {
position: fixed !important;
top: var(--ovl-top, 48px);
left: 0; right: 0;
z-index: 99;
max-height: min(140px, 22dvh) !important;
background: var(--panel);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
display: flex; /* makes flex-direction:column from inline style effective */
flex-direction: column;
}
/* Log body — scrollable like .chat-msgs (this is the class on #g-log-body).
min-height:0 is required so the flex child can shrink and scroll instead
of overflowing the clamped panel — that absence was why the journal never
scrolled before. */
.log-panel-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 6px 12px;
font-family: var(--ff-mono);
font-size: 0.74rem;
line-height: 1.45;
color: var(--cream);
}
.log-panel-body::-webkit-scrollbar { width: 6px; }
.log-panel-body::-webkit-scrollbar-track { background: transparent; }
.log-panel-body::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), 0.18); border-radius: 3px; }
.log-panel-body::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), 0.32); }
/* Log message rows — mirror the .chat-msgs basic look without the
bubble-style backgrounds (log lines are denser, more like a
monospace journal). */
.log-msgs {
font-family: var(--ff-mono);
font-size: 0.74rem;
line-height: 1.45;
color: var(--chatlog-text, var(--cream));
}
.log-msgs > div {
padding: 1px 0;
border-bottom: 1px solid var(--inset);
}
.log-msgs > div:last-child { border-bottom: none; }
/* Custom scrollbar matching the chat panel */
.log-msgs::-webkit-scrollbar { width: 6px; }
.log-msgs::-webkit-scrollbar-track { background: transparent; }
.log-msgs::-webkit-scrollbar-thumb {
background: rgba(var(--gold-rgb), 0.18);
border-radius: 3px;
}
.log-msgs::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), 0.32); }
.g-chat-panel-header { display:flex; align-items:center; justify-content:space-between; padding:4px 10px; background:var(--chrome-tint); border-bottom:1px solid var(--border); flex-shrink:0; }
/* Poignée de redimensionnement du chat (bord bas) — glissable au doigt */
.chat-resize-handle {
flex-shrink: 0; height: 18px;
display: flex; align-items: center; justify-content: center;
cursor: ns-resize; touch-action: none;
-webkit-user-select: none; user-select: none;
background: var(--chrome-tint); border-top: 1px solid var(--border);
}
.chat-resize-handle .crh-grip {
width: 42px; height: 4px; border-radius: 3px;
background: var(--gold-dim); transition: background .15s, width .15s;
}
.chat-resize-handle:hover .crh-grip,
.chat-resize-handle.dragging .crh-grip { background: var(--gold-hi); width: 54px; }
.gchat-input { display:flex; gap:5px; padding:5px 10px; background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0; }
.gchat-input input { flex:1; background:var(--field-bg); border:1px solid var(--border); border-radius:2px; color:var(--cream); padding:5px 8px; font-family: var(--ff-mono); font-size:0.76rem; outline:none; }
.gchat-input input:focus { border-color:var(--gold); }
.gchat-input button { background:rgba(var(--gold-rgb), 0.12); border:1px solid var(--gold-dim); color:var(--gold); padding:5px 10px; border-radius:2px; cursor:pointer; font-size:0.8rem; }
.waiting-msg {
color: var(--text); font-size: 0.8rem;
font-style: italic; padding: 4px 0;
}
/* Narrateur de tour ("X ●●●") ré-affiché au-dessus des boutons en mode masqué. */
.act-narrator {
display: flex; align-items: center; justify-content: center;
font-style: italic; font-size: 0.8rem; color: var(--text-dim, var(--gold-dim));
padding: 0 0 5px; line-height: 1;
}
/* ══ PASSWORD PROMPT ══ */
#password-prompt {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.75);
}
.pp-card {
background: var(--modal-bg); border: 1px solid var(--gold-dim);
border-top: 3px solid var(--gold); border-radius: 8px;
padding: 20px 24px; width: min(340px, 92vw);
display: flex; flex-direction: column; gap: 12px;
box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
.pp-title { font-family: var(--ff-display); font-size: 0.9rem; color: var(--text-hi); letter-spacing: 0.1em; }
.pp-label { font-size: 0.65rem; color: var(--gold-dim); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 4px; }
.pp-input { background: var(--field-bg); border: 1px solid var(--border); border-radius: 2px; color: var(--cream); padding: 9px 11px; font-family: var(--ff-mono); font-size: 0.9rem; outline: none; width: 100%; }
.pp-input:focus { border-color: var(--gold); }
.pp-btns { display: flex; gap: 8px; }
.pp-btns .btn-primary { flex: 1; padding: 9px; font-size: 0.76rem; }
.pp-cancel { flex: 0 0 auto; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 9px 16px; border-radius: 2px; cursor: pointer; font-family: var(--ff-mono); font-size: 0.76rem; }
.pp-cancel:hover { border-color: var(--border-hi); color: var(--text-hi); }
/* ══ INSTALL POPUP (PWA add-to-home-screen instructions) ══ */
#install-popup {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.75);
padding: 12px;
}
.ip-card {
background: var(--modal-bg); border: 1px solid var(--gold-dim);
border-top: 3px solid var(--gold); border-radius: 8px;
padding: 20px 24px; width: min(360px, 92vw);
display: flex; flex-direction: column; gap: 14px;
box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
.ip-title { font-family: var(--ff-display); font-size: 0.95rem; color: var(--text-hi); letter-spacing: 0.08em; text-align: center; }
.ip-body { font-size: 0.84rem; color: var(--cream); line-height: 1.55; }
.ip-step { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.ip-step:last-child { margin-bottom: 0; }
.ip-step .ip-ico { flex: 0 0 auto; min-width: 18px; color: var(--gold-dim); font-weight: 700; }
.ip-step b { color: var(--gold); font-weight: 600; }
.ip-btns { display: flex; justify-content: center; }
.ip-btns .pp-cancel { padding: 9px 30px; }
/* ══ WINNER OVERLAY ══ */
.winner-overlay {
position: fixed; inset: 0; z-index: 100;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.78);
padding: 12px;
animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.winner-card {
background: var(--modal-bg);
border: 1px solid var(--gold-dim); border-top: 3px solid var(--gold);
border-radius: 10px; padding: 18px 22px;
max-width: min(440px, 94vw); width: 100%;
/* Flex column so the players list can be the ONLY scrollable part,
keeping the header / common cards / Continue button always visible
even with a full 10-player results list. Previously the whole card
was a single overflow:auto block, so with 10 players the Continue
button fell below the fold and was unreachable on small phones. */
display: flex; flex-direction: column;
max-height: 88dvh; overflow: hidden;
box-shadow: 0 0 80px rgba(var(--gold-rgb), 0.2), 0 24px 60px rgba(0,0,0,0.8);
animation: popIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes popIn { from { transform:scale(0.75); opacity:0 } to { transform:scale(1); opacity:1 } }
.wc-header { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.wc-trophy { font-size:2rem; line-height:1; }
.wc-titles { flex:1; }
.wc-label { font-family: var(--ff-display); font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-dim); }
.wc-name { font-family: var(--ff-display); font-size:clamp(1rem,4vw,1.4rem); font-weight:700; color:var(--gold); }
.wc-gain { font-size:clamp(0.9rem,3.5vw,1.15rem); color:var(--pos); font-weight:700; text-align:right; }
.wc-stats { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.wc-stat { flex:1; min-width:65px; background:var(--inset); border:1px solid var(--border); border-radius:4px; padding:6px 8px; text-align:center; }
.wc-stat-label { font-size:0.56rem; color:var(--gold-dim); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:2px; }
.wc-stat-value { font-size:0.85rem; color:var(--cream); font-weight:700; }
.wc-section { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:5px; }
.wc-cards-row { display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap; }
.wc-players {
margin-bottom:14px;
/* Only this region scrolls; flex:1 lets it take the remaining space,
min-height:0 allows it to shrink below its content height so the
overflow actually kicks in inside the flex column. */
flex: 1 1 auto; min-height: 0; overflow-y: auto;
/* a touch of right padding so the scrollbar doesn't overlap deltas */
padding-right: 2px;
}
/* Grid (et non flex) : colonnes figées => les cartes de chaque joueur
restent alignées verticalement quel que soit le montant du delta.
Col1 avatar | Col2 info (élastique) | Col3 cartes (largeur constante)
| Col4 delta (largeur FIXE, ne pousse plus les cartes). */
.wc-player-row { display:grid; grid-template-columns:24px minmax(0,1fr) auto 90px; align-items:center; gap:7px; padding:5px 7px; border-radius:4px; margin-bottom:3px; background:var(--inset); }
.wc-player-row.wc-winner { background:rgba(var(--gold-rgb), 0.08); border:1px solid rgba(var(--gold-rgb), 0.2); }
.wc-player-row.wc-me-row { border-left:3px solid var(--green); }
.wc-player-av { width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,0.5); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:var(--text-hi); flex-shrink:0; }
.wc-player-info { min-width:0; }
.wc-player-name { font-size:0.7rem; color:var(--text-hi); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-player-stack { font-size:0.58rem; color:var(--text); }
.wc-player-cards { display:flex; gap:2px; justify-content:flex-end; }
.wc-player-cards .pk.placeholder { opacity:0.22; }
.wc-player-delta { font-size:0.76rem; font-weight:700; text-align:right; white-space:nowrap; }
.wc-player-delta.pos { color:var(--pos); }
.wc-player-delta.neg { color:var(--neg); }
.winner-dismiss { background:var(--gold); color:var(--on-gold); border:none; padding:9px 24px; font-family: var(--ff-display); font-size:0.76rem; font-weight:700; border-radius:4px; cursor:pointer; letter-spacing:0.08em; transition:background 0.15s; display:block; width:100%; margin-top:4px; flex:0 0 auto; }
.winner-dismiss:hover { background:var(--gold-hi); }
/* ── Player bar + my-zone : cachées hors jeu (contrôlées par body.in-game) ── */
body:not(.in-game) .player-bar,
body:not(.in-game) .my-zone {
display: none !important;
}
/* ── Player bar (me) ── */
.player-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 30;
display: flex;
justify-content: center;
padding: 3px 6px;
padding-bottom: max(3px, env(safe-area-inset-bottom));
background: var(--panel);
border-top: 1px solid rgba(var(--green-rgb), 0.3);
}
.player-bar-left {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
width: 100%;
max-width: var(--bottom-w);
background: rgba(0,0,0,0.35);
border: 1px solid rgba(var(--green-rgb), 0.4);
border-radius: 8px;
padding: 5px 14px;
}
.pb-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(0,0,0,0.5);
border: 2px solid var(--green);
box-shadow: 0 0 8px rgba(var(--green-rgb), 0.5);
display: flex; align-items: center; justify-content: center;
font-family: var(--ff-display);
font-size: 1rem; color: var(--text-hi);
flex-shrink: 0;
}
.pb-info { display: flex; flex-direction: column; gap: 2px; min-width: 80px; }
.pb-name { font-size: 0.8rem; color: var(--green); font-weight: 700; }
.pb-money { font-size: 0.7rem; color: var(--gold); }
.pb-cards {
display: flex;
flex-direction: row;
gap: 5px;
align-items: center;
}
/* Override pk size specifically in player bar */
.pb-cards .pk { width: 42px; height: 60px; font-size: 1rem; font-weight: 800; }
.pb-action {
font-size: 0.72rem; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--text);
min-width: 50px;
}
.player-bar.pb-active .player-bar-left {
border-color: var(--gold);
box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.4);
animation: pulse-gold 1.5s infinite;
}
/* Action grid */
/* Largeur partagee du bas d'ecran : le dock (.player-bar-left) et les
boutons d'action (.action-grid) gardent exactement la meme largeur.
Un seul chiffre a changer pour bouger les deux. */
:root { --bottom-w: 560px; }
.action-grid {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
max-width: var(--bottom-w);
margin: 0 auto;
}
/* ── Barre d'action : panneau centré borné (fidélité client officiel) ──
Sur desktop/tablette, le fond épouse la largeur des boutons (radius,
comme le QML officiel, bible §5) au lieu de s'étirer sur toute la largeur
de l'écran. Sur téléphone (largeur < 900 OU paysage court), on garde la
bande pleine largeur collée au bas. */
@media (min-width: 900px) and (min-height: 600px) {
.my-zone { background: transparent; border-top: none; }
.my-zone .action-grid {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px 10px;
box-shadow: 0 6px 20px rgba(0,0,0,0.38);
}
/* Tour actif : le halo doré est porté par le panneau BORNÉ, pas par une
bande dorée pleine largeur sur .my-zone. */
.my-zone.my-turn-active { animation: none; border-top: none; }
.my-zone.my-turn-active .action-grid {
border-color: var(--gold);
animation: myTurnPanelGlow 1.5s ease-in-out infinite;
}
}
@keyframes myTurnPanelGlow {
0%,100% { box-shadow: 0 6px 20px rgba(0,0,0,0.38), 0 0 0 1px var(--gold), 0 0 18px rgba(var(--gold-rgb), 0.35); }
50% { box-shadow: 0 6px 20px rgba(0,0,0,0.38), 0 0 0 1px #ffe066, 0 0 30px rgba(var(--gold-rgb), 0.6); }
}
/* Narrateur de tour ("X ●●●") retiré (fidélité : l'officiel n'a pas ce texte,
le tour est signalé par la surbrillance du siège). */
.act-narrator { display: none !important; }
/* Layout officiel : 3 zones (montant+slider / pastilles+All-In+mode / Fold-Call-Raise) */
/* Bas : Fold | Call/Check | Raise — trois boutons egaux */
.act-buttons-row { display: flex; gap: 6px; }
.act-buttons-row .btn-action { flex: 1; min-width: 0; padding: 13px 12px; font-size: 0.9rem; }
/* Haut : champ montant editable + slider */
.bet-row { display: flex; gap: 8px; align-items: center; }
.bet-row .raise-slider { flex: 1; }
.raise-amt-field {
flex: 0 0 auto; width: 78px;
background: var(--field-bg);
border: 1px solid var(--btn-raise-bg, #4CAF50);
border-radius: 7px;
color: var(--btn-raise-bg, #4CAF50);
padding: 8px 6px; font-family: var(--ff-mono); font-size: 0.9rem;
font-weight: 700; text-align: center; outline: none;
}
.raise-amt-field:focus { border-color: var(--gold); }
.raise-amt-field:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(0.6); }
/* Milieu : 1/3 1/2 Pot | All-In | mode */
.mid-row { display: flex; gap: 6px; align-items: stretch; }
.mid-row .pct-row { flex: 1 1 auto; width: auto; }
.mid-row .btn-allin { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
.mode-sel-wrap { flex: 0 0 auto; }
.mid-row .mode-sel-wrap { flex: 0 1 112px; }
/* First two buttons side by side */
.action-top-row {
display: flex; gap: 6px;
}
.action-top-row .btn-action:not(.btn-auto) { flex: 1; }
.pct-row {
display: flex; gap: 5px;
}
.btn-pct {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 1px;
background: rgba(var(--gold-rgb), 0.1); border: 1px solid var(--gold-dim);
color: var(--gold); padding: 7px 4px; border-radius: 7px; cursor: pointer;
font-family: var(--ff-mono); text-align: center;
}
.btn-pct .pct-p { font-size: 0.74rem; font-weight: 700; color: var(--gold); }
.btn-pct .pct-amt { font-size: 0.6rem; font-weight: 400; color: var(--text); }
.btn-pct:hover { background: rgba(var(--gold-rgb), 0.22); }
.btn-pct:disabled,
.btn-action:disabled {
opacity: 0.28;
cursor: not-allowed;
filter: grayscale(0.7);
pointer-events: none;
}
.raise-input:disabled {
opacity: 0.3;
cursor: not-allowed;
background: var(--field-bg) !important;
}
.raise-row { display: flex; gap: 5px; align-items: stretch; }
.raise-row .raise-input { flex: 1; }
.raise-row .btn-raise { flex: 2; }
/* Sélecteur de mode (remplace l'ancien bouton AUTO dans la rangée d'action) */
.mode-sel-wrap select { font-size: 0.76rem; padding: 6px 22px 6px 8px; height: 100%; }
.mode-sel-wrap .sel-arr { right: 7px; font-size: 0.7rem; }
/* Action log */
.game-log {
position: fixed;
bottom: 160px; left: 8px;
width: 190px; max-height: 130px;
overflow-y: auto;
background: rgba(0,0,0,0.6);
border-radius: 4px; padding: 5px 7px;
font-size: 0.62rem; color: var(--text);
pointer-events: none;
z-index: 5;
border: 1px solid var(--inset);
}
.log-line { padding: 1px 0; border-bottom: 1px solid var(--inset); }
.g-chat-input { display:flex; gap:6px; padding:5px 10px; background:var(--panel); border-bottom:1px solid var(--border); }
.g-chat-input input { flex:1; background:var(--field-bg); border:1px solid var(--border); border-radius:2px; color:var(--cream); padding:4px 7px; font-family: var(--ff-mono); font-size:0.76rem; outline:none; }
.g-chat-input input:focus { border-color:var(--gold); }
/* Badge timer sous le cercle avatar */
.seat-timer-badge {
font-size: 0.72rem;
font-family: var(--ff-mono);
font-weight: 900;
color: var(--timer-normal, #ffe234);
letter-spacing: 0.05em;
line-height: 1;
min-width: 26px;
text-align: center;
/* Compteur de timeout AU-DESSUS de l'avatar (order:-1 dans la colonne flex
.seat) plutôt que dessous. Petite marge basse = écart vers l'avatar. */
order: -1;
margin-top: 0;
margin-bottom: 4px;
padding: 1px 5px;
background: var(--timer-bg, rgba(0,0,0,0.62));
border-radius: 3px;
border: 1px solid rgba(var(--gold-rgb), 0.35);
text-shadow: var(--timer-glow, 0 1px 2px rgba(0,0,0,0.9));
box-shadow: 0 1px 5px rgba(0,0,0,0.55);
}
/* ══ Slider de mise mobile (design A : conteneur + bulle de valeur) ══ */
.raise-row-mobile {
display: flex;
align-items: center;
gap: 8px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: 9px;
padding: 6px 8px;
}
.raise-slider {
flex: 1;
accent-color: var(--gold, rgb(var(--gold-rgb)));
height: 4px;
cursor: pointer;
min-width: 0;
}
.raise-display {
font-family: var(--ff-mono);
font-size: 0.8rem;
color: var(--on-gold);
font-weight: 700;
min-width: 52px;
text-align: center;
flex-shrink: 0;
background: var(--gold, rgb(var(--gold-rgb)));
border-radius: 14px;
padding: 3px 11px;
}
.raise-row-mobile .btn-raise { flex: 0 0 auto; padding: 10px 20px; }
/* ══ Combinaison gagnante dans l'overlay winner ═════════════ */
.wc-best-hand {
text-align: center;
font-size: 1.05rem;
font-weight: 700;
color: var(--gold, rgb(var(--gold-rgb)));
background: rgba(var(--gold-rgb), 0.1);
border: 1px solid rgba(var(--gold-rgb), 0.3);
border-radius: 6px;
padding: 8px 14px;
margin: 8px 0 4px;
letter-spacing: 0.04em;
}
/* ══ WAITING PANEL ══
Rich waiting-room display shown between JoinGameAck and
GameStartInitial. Lives inside the same #g-actions container that
normally hosts the action buttons; replaces the previous plain
.waiting-msg italic string. */
.waiting-panel {
display: flex; flex-direction: column; align-items: center;
gap: 7px; padding: 10px 14px; max-width: 480px; margin: 0 auto;
}
.wp-title {
font-family: var(--ff-display); font-size: 0.9rem; letter-spacing: 0.1em;
color: var(--text-hi); text-transform: uppercase;
}
.wp-count {
font-size: 0.88rem; color: var(--cream);
}
.wp-count b { color: var(--gold); font-weight: 700; }
.wp-bar {
display: flex; gap: 6px; margin: 2px 0;
}
.wp-dot {
width: 10px; height: 10px; border-radius: 50%;
border: 1px solid var(--gold-dim);
}
.wp-dot-on { background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.7); }
.wp-dot-off { background: transparent; }
.wp-ok, .wp-need {
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
padding: 2px 0;
}
.wp-ok { color: rgb(var(--green2-rgb)); }
.wp-need { color: var(--wp-need-fg); }
.wp-list {
list-style: none; margin: 4px 0 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
width: 100%;
}
.wp-player {
display: inline-flex; align-items: center; gap: 6px;
background: var(--inset);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 10px 3px 4px;
font-size: 0.78rem;
}
.wp-av {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--inset);
}
.wp-av.emoji-av { font-size: 1.05rem; line-height: 1; }
.wp-av-letter { font-size: 0.7rem; font-weight: 700; color: var(--gold); }
/* ── Unified avatar-chip rules for compact UI lists ──
The _avatarChipHtml helper produces 
when a
PokerTH image is available. We need a single CSS rule that handles
the image regardless of which chipClass (wp-av, eg-winner-av,
wc-player-av) wraps it. Trick: target the image directly via its
own class, and rely on the fact that ![]()
is a replaced element
so border-radius alone clips its content -- no overflow:hidden on
the parent needed (which would clip any sibling badge). */
.chip-pth-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
pointer-events: none;
}
/* Drop the background tint when the chip hosts an image; the image
already fills the circle, the tint would only show through if the
image were transparent (the PokerTH logo placeholder has a tiny
transparent margin -- a darker tint reads better than white). */
.wp-av.has-pth-avatar,
.eg-winner-av.has-pth-avatar,
.wc-player-av.has-pth-avatar {
background: rgba(0,0,0,0.2);
padding: 0;
overflow: visible; /* badges (none currently here, but future-proof) */
}
.wp-name { color: var(--cream); }
.wp-me {
font-size: 0.6rem; color: var(--gold);
text-transform: uppercase; letter-spacing: 0.1em;
background: rgba(var(--gold-rgb), 0.12); padding: 1px 5px; border-radius: 3px;
}
.wp-hint {
font-size: 0.74rem; color: var(--gold-dim);
font-style: italic; margin-top: 4px; text-align: center;
}
.wp-hint-admin { color: rgb(var(--green2-rgb)); font-style: normal; font-weight: 600; }
/* ── Wait-page (parité GameWaitPage QML) : recouvre le feutre avant le début.
Remplie par renderWaitingPanel() dans #g-wait-page, masquée à
GameStartInitial. Options différenciées admin (case bots + Démarrer +
Quitter) / joueur simple (Quitter seul). ── */
.wait-page {
position: absolute; inset: 0; z-index: 40;
display: flex; flex-direction: column; align-items: center;
gap: 12px; overflow-y: auto;
padding: 20px 14px calc(20px + env(safe-area-inset-bottom, 0px));
background: var(--field-bg);
}
.wait-page .wp-card {
width: 100%; max-width: 440px;
display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.wait-page .wp-title {
text-align: center; font-size: 1rem; font-weight: 700;
color: var(--text-hi); letter-spacing: 0.02em; margin: 0;
}
.wp-info {
background: var(--panel); border: 1px solid var(--border);
border-radius: 12px; padding: 12px 14px;
display: flex; flex-direction: column; gap: 3px;
}
.wp-info-name { font-weight: 700; color: var(--cream); font-size: 0.95rem; margin-bottom: 3px; }
.wp-info-row { font-size: 0.78rem; color: var(--gold-dim); }
.wp-info-row b { color: var(--gold); font-weight: 700; }
.wp-players-hdr {
font-size: 0.7rem; color: var(--gold-dim); text-transform: uppercase;
letter-spacing: 0.12em; text-align: center; margin-top: 2px;
}
.wp-fillbots {
display: flex; align-items: center; gap: 9px; cursor: pointer;
font-size: 0.82rem; color: var(--text); padding: 6px 2px; user-select: none;
}
.wp-fillbots input { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; flex: 0 0 auto; }
.wp-actions { display: flex; gap: 8px; margin-top: 4px; }
.wp-actions .wp-btn {
flex: 1; padding: 12px 10px; border-radius: 9px;
font-weight: 700; letter-spacing: 0.4px; font-size: 0.88rem;
cursor: pointer; border: 1px solid var(--border);
background: var(--panel-hi, var(--panel)); color: var(--text);
transition: transform .09s, filter .12s;
}
.wp-btn-leave { color: var(--red); border-color: rgba(var(--red-rgb), 0.4); }
.wp-btn-start {
color: #fff; border-color: #7ad06a;
background: linear-gradient(180deg, #50b840, #1e6614);
}
.wp-btn-start:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.45); }
.wp-btn:not(:disabled):active { transform: scale(0.97); }
/* When the action-bar hosts the waiting panel (no real action buttons
yet), override its default right-alignment so the panel sits in the
middle of the bottom strip. Once the game starts, .waiting-panel is
replaced by buttons and the default flex-end alignment kicks back in. */
.action-bar:has(.waiting-panel) {
justify-content: center;
}
/* Fallback for browsers that don't support :has() — we also widen the
panel itself so it occupies the full bar width and centres its inner
contents via its own align-items:center. Modern browsers (Chrome 105+,
Safari 15.4+, Firefox 121+) all support :has(), but this belt-and-
braces approach makes the centring work even on older mobile Safari. */
.waiting-panel { width: 100%; }
/* Start-now banner — shown when the admin can launch with bots.
Pulsing animation draws attention without being too noisy. */
.wp-ready-row {
display: flex; flex-direction: column; align-items: center; gap: 6px;
margin-top: 8px; padding: 10px 14px;
background: linear-gradient(180deg, rgba(var(--green2-rgb), 0.10), rgba(var(--green2-rgb), 0.04));
border: 1px solid rgba(var(--green2-rgb), 0.4);
border-radius: 6px;
animation: wpReadyAppear 0.4s ease-out;
}
@keyframes wpReadyAppear {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.wp-ready-label {
font-size: 0.78rem; color: #88e4a3; font-weight: 600;
letter-spacing: 0.04em;
}
.wp-ready-btn {
padding: 9px 18px;
background: linear-gradient(180deg, rgba(var(--green2-rgb), 0.35), rgba(var(--green2-rgb), 0.18));
border: 1px solid rgb(var(--green2-rgb));
border-radius: 4px;
color: #d0ffd8;
font-family: var(--ff-display);
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
animation: wpReadyPulse 1.6s ease-in-out infinite;
transition: transform 0.12s;
}
.wp-ready-btn:hover {
background: linear-gradient(180deg, rgba(var(--green2-rgb), 0.55), rgba(var(--green2-rgb), 0.3));
transform: scale(1.04);
}
.wp-ready-btn:active { transform: scale(0.97); }
@keyframes wpReadyPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(var(--green2-rgb), 0.5),
0 1px 4px rgba(0,0,0,0.4) inset;
}
50% {
box-shadow: 0 0 0 8px rgba(var(--green2-rgb), 0),
0 1px 4px rgba(0,0,0,0.4) inset;
}
}
/* On mobile, keep things compact */
@media (max-width: 640px) {
.waiting-panel { padding: 8px 10px; gap: 5px; }
.wp-ready-row { padding: 8px 10px; gap: 5px; }
.wp-ready-label { font-size: 0.72rem; }
.wp-ready-btn { padding: 7px 14px; font-size: 0.74rem; }
.wp-title { font-size: 0.82rem; }
.wp-player { font-size: 0.72rem; padding: 2px 8px 2px 3px; }
.wp-av { width: 20px; height: 20px; }
}
/* ══ END-OF-GAME OVERLAY ══
Full-screen panel shown when the tournament finishes (EndOfGame
message). Style is heavier than the per-hand winner-overlay:
bigger trophy, dramatic gold gradient, dedicated stats section. */
.endgame-overlay {
position: fixed; inset: 0; z-index: 110;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: endgameFadeIn 0.4s ease-out;
}
@keyframes endgameFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.endgame-card {
background: var(--modal-bg);
border: 1px solid var(--gold);
border-top: 4px solid var(--gold);
border-radius: 12px;
padding: 22px 28px;
max-width: 480px; width: calc(100% - 32px);
box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 60px rgba(var(--gold-rgb), 0.15);
display: flex; flex-direction: column; gap: 14px;
animation: endgamePop 0.55s cubic-bezier(0.2,0.9,0.3,1.1);
}
@keyframes endgamePop {
0% { transform: scale(0.85) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}
.eg-trophy {
text-align: center; font-size: 3rem; line-height: 1;
filter: drop-shadow(0 4px 12px rgba(var(--gold-rgb), 0.4));
animation: trophyBob 2.2s ease-in-out infinite;
}
@keyframes trophyBob {
0%,100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-4px) rotate(2deg); }
}
.eg-title {
text-align: center;
font-family: var(--ff-display);
font-size: 1.25rem; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-hi);
text-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.3);
}
.eg-winner {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 10px 14px;
background: rgba(var(--gold-rgb), 0.08);
border: 1px solid var(--gold-dim);
border-radius: 6px;
}
.eg-winner-av {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: var(--inset);
font-size: 1.6rem; line-height: 1;
border: 2px solid var(--gold);
}
.eg-winner-av.letter { font-size: 1.1rem; font-weight: 700; color: var(--gold); }
.eg-winner-label { font-size: 0.65rem; color: var(--gold-dim);
text-transform: uppercase; letter-spacing: 0.12em; }
.eg-winner-name { font-size: 1.05rem; color: var(--cream); font-weight: 600; }
.eg-winner.me {
background: rgba(var(--green2-rgb), 0.12);
border-color: rgba(var(--green2-rgb), 0.5);
}
.eg-winner.me .eg-winner-av { border-color: rgb(var(--green2-rgb)); }
.eg-stats-section {
background: rgba(0,0,0,0.35);
border: 1px solid var(--border);
border-radius: 6px; padding: 12px 14px;
}
.eg-stats-title {
font-size: 0.62rem; color: var(--gold-dim);
text-transform: uppercase; letter-spacing: 0.15em;
margin-bottom: 8px;
}
.eg-stat-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 0.78rem; padding: 3px 0;
}
.eg-stat-label { color: var(--text); }
.eg-stat-val { color: var(--cream); font-weight: 600; font-family: var(--ff-mono); }
.eg-stat-val.pos { color: var(--pos); }
.eg-stat-val.neg { color: var(--neg); }
.eg-stat-divider {
border: none; border-top: 1px solid var(--border);
margin: 6px 0;
}
.eg-actions {
display: flex; gap: 10px; margin-top: 4px;
}
.eg-btn {
flex: 1; padding: 10px 14px;
background: var(--inset);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--cream);
font-family: var(--ff-display);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.eg-btn:hover { background: var(--inset-hi); border-color: var(--gold-dim); }
.eg-btn.primary {
background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.25), rgba(var(--gold-rgb), 0.12));
border-color: var(--gold);
color: var(--gold-hi);
}
.eg-btn.primary:hover {
background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.4), rgba(var(--gold-rgb), 0.2));
}
@media (max-width: 640px) {
.endgame-card { padding: 16px 18px; gap: 10px; }
.eg-trophy { font-size: 2.4rem; }
.eg-title { font-size: 1rem; letter-spacing: 0.14em; }
.eg-winner-av { width: 32px; height: 32px; font-size: 1.4rem; }
.eg-winner-name { font-size: 0.95rem; }
.eg-stat-row { font-size: 0.74rem; }
}
/* ══ AUTO CHECK/FOLD CHECKBOX ══
Rendered above the action grid by renderMyTurnActions() so the user
can arm the auto-action for their NEXT turn within the same hand.
Deliberately discreet — small, low-contrast — because it represents
a fully optional courtesy feature, not a primary action button. */
.auto-cf-row {
display: flex; align-items: center; gap: 9px;
background: rgba(var(--gold-rgb), 0.06);
border: 1px solid var(--border);
border-radius: 8px;
padding: 7px 11px; margin: 0 0 7px;
cursor: pointer; user-select: none;
flex-basis: 100%;
transition: background 0.15s, border-color 0.15s;
}
.auto-cf-row:hover { background: rgba(var(--gold-rgb), 0.1); border-color: var(--gold-dim); }
.auto-cf-label { font-size: 0.72rem; color: var(--gold-dim); font-weight: 500; font-family: var(--ff-mono); }
.auto-cf-row:has(input:checked) .auto-cf-label { color: var(--cream); font-weight: 700; }
.auto-cf-hint { margin-left: auto; font-size: 0.58rem; color: var(--gold-dim); font-style: italic; }
/* iOS-style toggle switch */
.auto-switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.auto-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.auto-switch-track { position: absolute; inset: 0; background: rgba(255,255,255,0.12);
border: 1px solid var(--gold-dim); border-radius: 21px; transition: 0.2s; }
.auto-switch-track::before { content: ""; position: absolute; height: 15px; width: 15px; left: 2px; top: 2px;
background: var(--cream); border-radius: 50%; transition: 0.2s; }
.auto-switch input:checked + .auto-switch-track { background: rgba(var(--green-rgb), 0.5); border-color: var(--green); }
.auto-switch input:checked + .auto-switch-track::before { transform: translateX(17px); background: var(--on-green); }
@media (max-width: 640px) {
.auto-cf-row { padding: 6px 9px; margin-bottom: 5px; gap: 8px; }
.auto-cf-label { font-size: 0.68rem; }
.auto-cf-hint { font-size: 0.54rem; }
}
/* ══ SPECTATOR BANNER ══
Shown at the top of the game screen (just below the header,
above the pot strip) when the user is watching as a spectator.
Subtle blue tint to differentiate from regular player view, with
a small animated pulse on the eye emoji to draw attention without
being noisy. */
/* Statut spectateur intégré au bandeau du pot #pot-strip (parité GameStatusBar
QML §7) : pastille or « Spectating » (visible si je suis spectateur) + œil
avec compteur (visible dès qu'au moins un spectateur regarde). g-pot (flex:1)
pousse ces éléments à droite, juste avant la phase (#g-round). */
#g-spec-badge {
display: none; /* activé par JS via .on quand _amSpectator */
align-items: center;
padding: 1px 9px;
margin-right: 8px;
border-radius: 999px;
border: 1px solid var(--sel, #E3C800);
background: rgba(var(--sel-rgb, 227,200,0), 0.22);
color: var(--sel, #E3C800);
font-size: clamp(0.54rem, 1.3vw, 0.66rem);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
#g-spec-badge.on { display: inline-flex; }
#g-spec-count {
display: none; /* activé par JS via .on quand count > 0 */
align-items: center;
gap: 3px;
margin-right: 8px;
color: #eff1f5;
font-size: clamp(0.58rem, 1.4vw, 0.72rem);
font-weight: 700;
flex-shrink: 0;
cursor: default;
}
#g-spec-count.on { display: inline-flex; }
#g-spec-count .sc-eye {
font-size: 0.92em;
opacity: 0.9;
animation: sbEyePulse 2.4s ease-in-out infinite;
}
@keyframes sbEyePulse {
0%,100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.12); }
}
@media (max-width: 640px) {
#g-spec-badge { padding: 1px 7px; }
#g-spec-count, #g-spec-badge { margin-right: 6px; }
}
/* Replacement message that occupies the action area when the user
is a spectator. Same vertical footprint as the action buttons so
the layout doesn't jump around between hands. */
/* ══ QUIT-GAME CONFIRMATION DIALOG ══
Centred modal with 2 buttons: Quit / Cancel. Shown when the user
clicks the ✕ from inside a game. Gold-bordered card matching the
rest of the UI, with backdrop blur and a soft pop animation. */
/* Shared modal container for the three confirmation dialogs:
#leave-dialog (quit a game in progress)
#disconnect-dialog (disconnect from the lobby)
#quick-create-dialog (set player count on a quick-create) — this one
already has its own rule because it was added in a separate commit
with the same body; consolidating could be a future cleanup. */
#leave-dialog,
#disconnect-dialog {
position: fixed; inset: 0; z-index: 120;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
animation: ldFade 0.25s ease-out;
}
@keyframes ldFade { from { opacity: 0; } to { opacity: 1; } }
.ld-card {
background: var(--modal-bg);
border: 1px solid var(--gold-dim);
border-top: 3px solid var(--gold);
border-radius: 8px;
padding: 22px 24px;
max-width: 400px; width: calc(100% - 32px);
box-shadow: 0 8px 32px rgba(0,0,0,0.7);
animation: ldPop 0.35s cubic-bezier(0.2,0.9,0.3,1.1);
}
@keyframes ldPop {
from { transform: scale(0.9) translateY(8px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
.ld-title {
font-family: var(--ff-display);
font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-hi); text-align: center; margin-bottom: 12px;
}
.ld-body {
font-size: 0.85rem; color: var(--cream);
text-align: center; margin-bottom: 18px; line-height: 1.4;
}
.ld-buttons {
display: flex; flex-direction: column; gap: 8px;
}
.ld-btn {
padding: 10px 16px;
background: var(--inset);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--cream);
font-family: var(--ff-display);
font-size: 0.78rem;
letter-spacing: 0.1em; text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ld-btn:hover { background: var(--inset-hi); }
.ld-btn:active { transform: scale(0.98); }
.ld-btn.ld-quit {
background: linear-gradient(180deg, rgba(var(--red-rgb), 0.22), rgba(var(--red-rgb), 0.1));
border-color: rgba(var(--red-rgb), 0.5);
color: var(--ld-quit-fg);
}
.ld-btn.ld-quit:hover { background: linear-gradient(180deg, rgba(var(--red-rgb), 0.35), rgba(var(--red-rgb), 0.18)); }
.ld-btn.ld-cancel { color: var(--gold-dim); }
@media (max-width: 640px) {
.ld-card { padding: 16px 18px; }
.ld-title { font-size: 0.9rem; }
.ld-body { font-size: 0.78rem; }
.ld-btn { padding: 9px 12px; font-size: 0.72rem; }
}
/* ══ QUICK-CREATE DIALOG ══
Reuses the .ld-* styles from the leave-dialog (gold card, backdrop,
buttons). Adds a centred input row and a green 'Create' button to
match the semantic 'positive action' colour used elsewhere. */
#quick-create-dialog {
position: fixed; inset: 0; z-index: 120;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
animation: ldFade 0.25s ease-out;
}
.qc-control {
display: flex; align-items: center; justify-content: center;
gap: 12px; margin: 0 0 18px;
}
.qc-control label {
font-family: var(--ff-display);
font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gold-dim);
}
.qc-control input[type="number"] {
width: 70px;
padding: 8px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--gold-dim);
border-radius: 4px;
color: var(--cream);
font-family: var(--ff-mono);
font-size: 1.1rem;
text-align: center;
outline: none;
transition: border-color 0.15s;
}
.qc-control input[type="number"]:focus { border-color: var(--gold); }
.ld-btn.ld-create {
background: linear-gradient(180deg, rgba(var(--green2-rgb), 0.22), rgba(var(--green2-rgb), 0.1));
border-color: rgba(var(--green2-rgb), 0.5);
color: var(--ld-create-fg);
}
.ld-btn.ld-create:hover { background: linear-gradient(180deg, rgba(var(--green2-rgb), 0.35), rgba(var(--green2-rgb), 0.18)); }
@media (max-width: 640px) {
.qc-control { gap: 8px; }
.qc-control input[type="number"] { font-size: 1rem; width: 60px; padding: 6px 8px; }
}
/* ══ PLAYERS ONLINE DROPDOWN PANEL ══
Triggered by clicking the #h-players pill in the lobby header.
Same visual chrome as #g-chat-panel / #g-log-panel so the three
dropdowns feel like siblings. Adds a search input row above the
scrollable list for quick filtering when many players are online. */
#players-panel {
position: fixed !important;
top: var(--ovl-top, 48px);
left: 0; right: 0;
z-index: 99;
max-height: min(360px, 50dvh) !important;
background: var(--panel);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
}
.players-search {
padding: 6px 10px;
background: var(--chrome-tint);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.players-search input {
width: 100%;
background: var(--field-bg);
border: 1px solid var(--border);
border-radius: 3px;
color: var(--cream);
padding: 5px 10px;
font-family: var(--ff-mono);
font-size: 0.78rem;
outline: none;
box-sizing: border-box;
}
.players-search input:focus { border-color: var(--gold); }
/* Body container — the inline style on the element sets flex/min-height/
overflow/padding/background to match the chat panel pattern exactly.
This rule keeps only the bits inline styles don't cover. */
.players-list {
font-family: var(--ff-mono);
font-size: 0.78rem;
}
.players-list .pl-row {
display: grid;
grid-template-columns: 22px minmax(0,1fr) 22px 48px 16px auto;
align-items: center;
gap: 8px;
padding: 4px 0; /* container provides the 12px lateral padding now */
font-family: var(--ff-mono);
font-size: 0.78rem;
color: var(--cream);
border-bottom: 1px solid var(--inset);
}
.players-list .pl-row:last-child { border-bottom: none; }
.players-list .pl-row:hover { background: rgba(var(--gold-rgb), 0.08); }
.players-list .pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players-list .pl-name-link { color: inherit; text-decoration: underline; text-decoration-color: var(--gold-dim); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.players-list .pl-name-link:hover, .players-list .pl-name-link:active { color: var(--gold-hi); text-decoration-color: var(--gold-hi); }
.players-list .pl-flag { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 0.95rem; line-height: 1; }
.players-list .pl-cc { font-size: 0.6rem; color: var(--gold-dim); font-family: var(--ff-mono); letter-spacing: 0.04em; white-space: nowrap; }
.players-list .pl-flag .cc-flag { width: 20px; height: 15px; }
.players-list .pl-star { flex: none; width: 1.4em; text-align: center; font-size: 0.9rem; line-height: 1; color: var(--gold); }
.players-list .pl-id { flex: none; min-width: 4.2em; text-align: right; color: var(--gold-dim); font-size: 0.66rem; }
.players-list .pl-row.pl-me { color: var(--gold); }
/* ── Avatar chip in the players-online list ──
Same priority order as everywhere else (real PokerTH image >
placeholder logo > emoji > 🤖 > initial letter). The chip-pth-img
rule (defined globally for compact lists) handles image clipping. */
.pl-av {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--inset);
font-size: 1.05rem;
line-height: 1;
}
.pl-av.letter { font-size: 0.7rem; font-weight: 700; color: var(--gold); }
.pl-av.has-pth-avatar {
background: rgba(0,0,0,0.2);
padding: 0;
overflow: visible;
}
.players-list .pl-empty {
padding: 12px;
text-align: center;
font-style: italic;
color: var(--gold-dim);
font-size: 0.74rem;
}
/* Custom scrollbar matching chat/log */
.players-list::-webkit-scrollbar { width: 6px; }
.players-list::-webkit-scrollbar-track { background: transparent; }
.players-list::-webkit-scrollbar-thumb {
background: rgba(var(--gold-rgb), 0.18);
border-radius: 3px;
}
.players-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), 0.32); }
/* ═══════════════════════════════════════════════════════════════════
Inline SVG flag (used by the language-toggle button).
We size against the inherited font-size so the flag scales with
the button text — same look on mobile and desktop. The aspect
ratio (2:1) matches the viewBox in i18n.mjs.
═══════════════════════════════════════════════════════════════════ */
.lang-flag {
width: 1.5em;
height: 0.75em;
vertical-align: middle;
display: inline-block;
border-radius: 1.5px;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
/* Overflow-menu language entries (lobby + game headers): the flag SVG is
followed directly by the language label, separated only by a literal
space that collapses against the inline-block flag. Give the flag a
right margin so flag and label don't touch. Scoped to these two
buttons only — the icon-only header buttons and the dropdown picker
(which already uses flex `gap`) are untouched. */
#lang-toggle-game-mob .lang-flag,
#lang-toggle-lobby-mob .lang-flag {
margin-right: 8px;
}
/* ═══════════════════════════════════════════════════════════════════
Connect-screen top-right button bar.
The lang/refresh/fullscreen trio sits outside any `.header` block,
so the global `.header .btn-sm` uniformization rule doesn't reach
them. Apply the same dimensions here so the three (or four) buttons
line up neatly.
═══════════════════════════════════════════════════════════════════ */
#s-connect > div:first-child .btn-sm,
#s-connect .corner-links .btn-sm {
height: 30px;
min-width: 30px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 0.75rem;
line-height: 1;
color: var(--text-hi);
/* Theme-adaptive opaque chip so the cluster reads over the flames bg
(--inset alone is ~5% and vanished on the busy backdrop). */
background: var(--panel);
border: 1px solid var(--border);
box-shadow: 0 2px 8px rgba(0,0,0,0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
#s-connect > div:first-child .btn-sm:hover,
#s-connect .corner-links .btn-sm:hover {
background: var(--panel-hi);
border-color: var(--border-hi);
}
#s-connect > div:first-child .btn-icon,
#s-connect .corner-links .btn-icon {
width: 30px;
padding: 0;
background: var(--panel);
}
#s-connect .corner-links .btn-icon{ text-decoration:none; }
#s-connect .corner-links .btn-icon img{ display:block; width:18px; height:18px; }
/* ═══════════════════════════════════════════════════════════════════
Credits footer (connect screen only).
Sits at the bottom of #s-connect without disturbing the centered
login card. Hidden on lobby/game screens to avoid eating playable
space. Mentions only the repo for this fork — no upstream PokerTH
link (to stay respectfully unaffiliated).
═══════════════════════════════════════════════════════════════════ */
.connect-footer {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
color: var(--text-hi);
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.04em;
line-height: 1.5;
opacity: 0.95;
text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.8);
pointer-events: auto;
z-index: 1;
}
.connect-footer-line {
margin: 1px 0;
}
.connect-footer a {
color: var(--gold-hi);
text-decoration: none;
text-shadow: 0 1px 4px rgba(0,0,0,0.95);
border-bottom: 1px dotted rgba(var(--gold-rgb), 0.5);
transition: color 0.2s, border-color 0.2s;
}
.connect-footer a:hover {
color: var(--gold);
border-bottom-color: var(--gold);
}
/* pokerth-light: footer overlays the dark flames, so the theme's dark
tokens would vanish -> warm-light values that harmonise with the fire. */
:root[data-theme="pokerth-light"] .connect-footer { color: #ece8dc; }
:root[data-theme="pokerth-light"] .connect-footer a {
color: #f0d68a;
border-bottom-color: rgba(240,214,138,0.5);
}
:root[data-theme="pokerth-light"] .connect-footer a:hover {
color: #ffe9ad;
border-bottom-color: #ffe9ad;
}
/* On very short screens (e.g. landscape mobile) hide the footer so
the login card has more room. */
@media (max-height: 540px) {
.connect-footer { display: none; }
}
/* ── Kick player modal (opened by admin from header) ──
Lists table players with an inline trash button to kick. Same
visual language as #player-info-modal and #game-info-modal. */
#kick-modal,
#kick-confirm-modal,
#report-confirm-modal,
#invite-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.km-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.km-card {
position: relative;
background: var(--modal-bg);
border: 1px solid var(--gold-dim);
border-radius: 8px;
padding: 18px 18px 16px;
width: min(360px, 100%);
max-height: min(80vh, 600px);
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
gap: 10px;
-webkit-overflow-scrolling: touch;
animation: slideDown 0.18s ease;
}
.km-close {
position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
color: var(--text);
cursor: pointer;
font-size: 1rem;
padding: 2px 6px;
line-height: 1;
}
.km-close:hover { color: var(--gold); }
.km-title {
font-size: 1.1rem;
color: var(--cream);
font-family: var(--ff-display);
font-weight: 600;
text-align: center;
padding-right: 24px;
letter-spacing: 0.04em;
}
.km-subtitle {
font-size: 0.72rem;
color: var(--gold-dim);
text-align: center;
letter-spacing: 0.05em;
border-bottom: 1px solid rgba(var(--gold-rgb), 0.15);
padding-bottom: 8px;
margin-bottom: 2px;
}
.km-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.km-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--inset);
border: 1px solid var(--inset);
border-radius: 4px;
}
.km-row .km-av {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--inset);
font-size: 1.4rem;
line-height: 1;
}
.km-row .km-av.letter { font-size: 0.9rem; font-weight: 700; color: var(--gold); }
.km-row .km-av.has-pth-avatar { background: rgba(0,0,0,0.2); padding: 0; overflow: visible; }
.km-row .km-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.km-row .km-name {
color: var(--cream);
font-family: var(--ff-mono);
font-size: 0.85rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.km-row .km-meta {
color: var(--gold-dim);
font-family: var(--ff-mono);
font-size: 0.66rem;
letter-spacing: 0.05em;
}
.km-row .km-kick {
flex-shrink: 0;
background: rgba(var(--red-rgb), 0.18);
border: 1px solid rgba(var(--red-rgb), 0.4);
color: var(--red);
border-radius: 4px;
padding: 6px 10px;
font-size: 1rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.km-row .km-kick:hover {
background: rgba(var(--red-rgb), 0.35);
border-color: var(--red);
}
.km-row .km-kick:active { transform: scale(0.95); }
.km-row.km-self {
/* Yourself: shown for context but no kick button */
opacity: 0.7;
}
.km-row.km-self .km-name::after {
content: ' (vous, admin)';
color: var(--gold-dim);
font-size: 0.7rem;
}
.km-empty {
text-align: center;
color: var(--gold-dim);
font-style: italic;
padding: 18px;
}
/* ── Kick-confirm modal ── small nested alert dialog */
.kcm-card {
position: relative;
background: var(--modal-bg);
border: 1px solid var(--red);
border-radius: 8px;
padding: 24px 20px 18px;
width: min(320px, 100%);
box-shadow: 0 8px 32px rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
animation: slideDown 0.18s ease;
}
.kcm-icon { font-size: 2.2rem; line-height: 1; }
.kcm-title {
font-size: 1.05rem;
color: var(--cream);
font-family: var(--ff-display);
font-weight: 600;
text-align: center;
}
.kcm-msg {
font-size: 0.85rem;
color: var(--text);
text-align: center;
font-family: var(--ff-mono);
word-break: break-word;
}
.kcm-btns {
display: flex;
gap: 10px;
width: 100%;
margin-top: 4px;
}
.kcm-cancel,
.kcm-confirm {
flex: 1;
padding: 9px 12px;
border-radius: 4px;
font-family: var(--ff-display);
font-size: 0.82rem;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.kcm-cancel {
background: var(--inset);
border: 1px solid var(--border);
color: var(--text);
}
.kcm-cancel:hover { background: rgba(255,255,255,0.1); }
.kcm-confirm {
background: rgba(var(--red-rgb), 0.25);
border: 1px solid var(--red);
color: var(--red);
font-weight: 600;
}
.kcm-confirm:hover { background: rgba(var(--red-rgb), 0.4); }
/* ── Waiting-panel start buttons (2-button variant) ──
The .wp-ready-row used to host a single LANCER MAINTENANT button.
With the introduction of startNoBots() the row now offers two:
"▶ Démarrer" (humans only) + "▶ + Bots" (fill with bots).
They sit side by side and wrap to two lines on very narrow widths. */
.wp-ready-btn-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
width: 100%;
}
.wp-ready-btn-row .wp-ready-btn {
flex: 1 1 auto;
min-width: 110px;
max-width: 220px;
}
/* "+ Bots" variant: same green family but slightly darker tint so
the user can tell the two apart without having to read the labels. */
.wp-ready-btn.wp-ready-btn-bots {
background: linear-gradient(180deg, rgba(var(--green2-rgb), 0.22), rgba(var(--green2-rgb), 0.10));
border-color: rgba(var(--green2-rgb), 0.65);
/* Slightly faded — "start" is the primary action, "+ bots" the secondary. */
opacity: 0.94;
}
.wp-ready-btn.wp-ready-btn-bots:hover {
background: linear-gradient(180deg, rgba(var(--green2-rgb), 0.4), rgba(var(--green2-rgb), 0.2));
opacity: 1;
}
/* On very small phones, give the buttons a touch more vertical room
so the labels don't wrap awkwardly inside a single button. */
@media (max-width: 380px) {
.wp-ready-btn-row .wp-ready-btn {
flex: 1 1 100%;
max-width: 280px;
}
}
/* ── Spectators section in #game-info-modal ──
Shown only when there's at least one spectator watching the table.
The list reuses the same row pattern as the kick modal (.km-row)
but with smaller avatars (28px) since this is informational, not
actionable. */
.gim-section-count {
color: var(--gold-dim);
font-size: 0.7rem;
font-weight: normal;
letter-spacing: 0.05em;
}
.gim-spec-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 6px;
}
.gim-spec-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
background: var(--inset);
border: 1px solid var(--inset);
border-radius: 3px;
}
.gim-spec-row .gim-spec-av {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--inset);
font-size: 1.2rem;
line-height: 1;
}
.gim-spec-row .gim-spec-av.letter {
font-size: 0.78rem;
font-weight: 700;
color: var(--gold);
}
.gim-spec-row .gim-spec-av.has-pth-avatar {
background: rgba(0,0,0,0.2);
padding: 0;
overflow: visible;
}
.gim-spec-row .gim-spec-name {
flex: 1;
color: var(--cream);
font-family: var(--ff-mono);
font-size: 0.82rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gim-spec-me {
color: var(--gold-dim);
font-size: 0.7rem;
font-style: italic;
margin-left: 4px;
}
.gim-badge.gim-badge-spec {
background: rgba(var(--blue-rgb), 0.15);
border-color: rgba(var(--blue-rgb), 0.4);
color: var(--info);
}
/* ── Ghost seat — player has LEFT the table (not just eliminated) ──
A player who left during a game stays in seats[] to preserve the
pixel positions of every other seat around the felt (re-shuffling
them is disorienting; see the seat-out commentary). But unlike a
merely-eliminated player they should look essentially gone:
no name, no money, no actions, no OUT badge. The avatar fades to
~15% opacity so the position is still discoverable on close
inspection but doesn't compete for the player's attention.
Difference at a glance:
.seat-out = eliminated, still at the table → opacity 0.35 + OUT badge
.seat-ghost = left the table → opacity 0.15, no text, no badge */
.seat.seat-ghost {
opacity: 0.15;
filter: grayscale(1);
pointer-events: none;
}
.seat.seat-ghost .seat-name,
.seat.seat-ghost .seat-money,
.seat.seat-ghost .seat-bet,
.seat.seat-ghost .seat-action,
.seat.seat-ghost .blind-chip,
.seat.seat-ghost .dealer-chip,
.seat.seat-ghost .seat-flag {
display: none !important;
}
/* Suppress the OUT pseudo-element specifically: .seat-ghost wins over
.seat-out (we made them mutually exclusive in the class string, but
this is defence-in-depth in case something else adds .seat-out). */
.seat.seat-ghost::after {
content: none !important;
}
/* ── Copy invite-link button in #game-info-modal ── */
.gim-share-section {
text-align: center;
}
.gim-copy-link-btn {
width: 100%;
padding: 10px 14px;
background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.2), rgba(var(--gold-rgb), 0.1));
border: 1px solid var(--border-hi);
border-radius: 5px;
color: var(--gold-hi);
font-family: var(--ff-display);
font-size: 0.85rem;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.gim-copy-link-btn:hover {
background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.35), rgba(var(--gold-rgb), 0.18));
border-color: var(--gold);
}
.gim-copy-link-btn:active { transform: scale(0.98); }
.gim-share-hint {
margin-top: 6px;
font-size: 0.66rem;
color: var(--gold-dim);
font-style: italic;
letter-spacing: 0.03em;
}
/* ── Poker-hands help button (inline SVG, replaces the 🂡 glyph) ── */
.btn-hands { color: var(--gold); }
.btn-hands:hover { color: var(--gold-hi); border-color: var(--border-hi); }
.btn-hands svg { display: block; }
/* ── 4-aces SVG inside the end-game overlay (replaces 🎲) ──
.eg-trophy already provides the bob animation + gold drop-shadow;
we just need the inline SVG to center and sit inline-block so the
text-align:center on the parent applies. */
.eg-trophy .eg-aces {
display: inline-block;
vertical-align: middle;
}
/* ── Player bar when locally eliminated (.pb-out) ──
Mirror the .seat-out look on the seats: grey out the avatar/name/stack,
show clearly that the player has busted out of the tournament. The
"OUT" prefix is added inline by JS in the money line. */
.player-bar.pb-out .pb-avatar,
.player-bar.pb-out .pb-name,
.player-bar.pb-out .pb-action {
opacity: 0.45;
filter: grayscale(0.55);
}
.player-bar.pb-out .pb-cards .pk { opacity: 0.5; }
/* Tag OUT net + suit le theme (meme logique que .seat-out::after). */
.pb-out-tag {
display: inline-block;
font-weight: 800;
letter-spacing: 0.1em;
color: #fff;
background: var(--red);
padding: 0 6px;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.22);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* ═══════════════════════════════════════════════════════════════════
LOBBY REDESIGN — création (repliable) au-dessus des tables,
cartes de tables détaillées, et mise en page responsive
(téléphone : 1 colonne · tablette : tables en grille 2 col ·
ordinateur : création en colonne latérale + tables en grille).
═══════════════════════════════════════════════════════════════════ */
.lobby-body { display: block; overflow-y: auto; padding: 16px 14px 32px; }
.lobby-grid { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: none; align-items: start; }
/* Bouton repliable "Créer une table" */
.create-toggle {
width: 100%; display: flex; align-items: center; gap: 12px;
background: rgba(var(--gold-rgb), 0.07); border: 1px solid var(--border); border-radius: 10px;
color: var(--gold); cursor: pointer; padding: 13px 16px;
font-family: var(--ff-display); font-size: 1.05rem; font-weight: 600; transition: background 0.2s;
}
.create-toggle:hover { background: rgba(var(--gold-rgb), 0.13); }
.create-toggle .ct-ico { font-size: 1.25rem; }
.create-toggle .ct-arrow { margin-left: auto; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--gold-dim); transition: transform 0.25s; }
.create-toggle.open { border-radius: 10px 10px 0 0; }
.create-toggle.open .ct-arrow { transform: rotate(90deg); }
#create-form { padding: 14px; background: rgba(8,18,10,0.6); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; }
/* PokerTH clair : le fond du formulaire est code en dur (vert sombre translucide)
et ne suit pas la palette -> en clair il vire au gris et masque le texte
var(--text) (noms de presets non actifs, libelle mot de passe). Fond clair force. */
:root[data-theme="pokerth-light"] #create-form { background: rgba(255,255,255,0.62); }
/* ── PokerTH clair : corrections de contraste (clair uniquement) ──
Plusieurs elements gardent des couleurs CLAIRES codees en dur (pensees pour le
fond sombre) -> illisibles sur fond clair. On corrige ici, sans toucher au JS. */
/* Assistance (force de la main) : le texte est colore inline par le JS selon la force
(teintes claires). On garde un fond SOMBRE pour cette pastille en clair -> le code
couleur (gris faible -> vert/rouge fort) reste lisible tel quel. */
/* Ecran d'attente : wp-ready-label/btn (pas de couleur de base) corriges ici ;
ld-quit/ld-create/wp-ok/wp-hint-admin/wp-need pilotes par variables de theme. */
:root[data-theme="pokerth-light"] .wp-ready-label,
:root[data-theme="pokerth-light"] .wp-ready-btn { color: var(--green); }
/* Siege actif (a parler) : nom/stack attenues a 0.35 (concu pour texte clair sur fond
sombre). En clair le texte est SOMBRE -> 0.35 = invisible. On remonte l'opacite en
clair uniquement : leger estompage conserve, mais lisible. */
:root[data-theme="pokerth-light"] .seat.active .seat-name,
:root[data-theme="pokerth-light"] .seat.active .seat-money { opacity: 0.7; }
/* Préréglages */
.cf-presets-label { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); font-weight: 600; margin: 0 2px 8px; }
.cf-presets { display: flex; gap: 8px; margin-bottom: 16px; }
.cf-preset {
flex: 1; border: 1.5px solid var(--border); border-radius: 9px; background: var(--inset);
color: var(--text); cursor: pointer; padding: 11px 6px; text-align: center;
transition: border-color 0.2s, background 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
}
.cf-preset:hover { border-color: var(--gold-dim); }
.cf-preset.active { border-color: var(--sel,var(--gold)); background: rgba(var(--sel-rgb,var(--gold-rgb)), 0.14); color: var(--cream); box-shadow: 0 0 12px rgba(var(--sel-rgb,var(--gold-rgb)), 0.18); }
.cf-preset .cfp-ico { font-size: 1.5rem; line-height: 1.1; }
.cf-preset .cfp-n { font-family: var(--ff-display); font-size: 0.86rem; font-weight: 600; }
.cf-preset .cfp-d { font-size: 0.56rem; color: var(--gold-dim); }
/* Curseurs (sliders) Joueurs max / Stack */
.cf-sliders { display: grid; gap: 14px; margin-top: 14px; }
.cf-slider label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.6rem; color: var(--gold-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.cf-range-val { font-family: var(--ff-mono); font-size: 1rem; font-weight: 700; color: var(--cream); letter-spacing: 0; }
.cf-num-wrap { display: inline-flex; align-items: center; gap: 5px; }
.cf-range-num {
width: 6.5em; background: var(--field-bg); border: 1px solid var(--border); border-radius: 4px;
color: var(--cream); font-family: var(--ff-mono); font-size: 1rem; font-weight: 700;
padding: 3px 7px; text-align: right; outline: none; letter-spacing: 0; text-transform: none;
-moz-appearance: textfield;
}
.cf-range-num::-webkit-outer-spin-button, .cf-range-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cf-range-num:focus { border-color: var(--gold); }
.cf-slider label .cf-range-num { width: 4em; }
.cf-slider label .cf-num-wrap .cf-range-num { width: 6.5em; }
.cf-money { color: var(--gold); font-size: 0.95rem; font-weight: 700; }
.cf-unit { color: var(--gold-dim); font-size: 0.9rem; font-weight: 600; }
.cf-unit-ico { font-size: 1.05rem; }
#cf-players.cf-range-num { width: 4.2em; }
.cf-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--inset); outline: none; cursor: pointer; }
.cf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 2px solid #1a1408; cursor: pointer; box-shadow: 0 0 7px rgba(var(--gold-rgb), 0.5); transition: transform 0.1s; }
.cf-range::-webkit-slider-thumb:active { transform: scale(1.12); }
.cf-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 2px solid #1a1408; cursor: pointer; box-shadow: 0 0 7px rgba(var(--gold-rgb), 0.5); }
.cf-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--inset); }
.cf-range:hover::-webkit-slider-thumb { background: var(--gold-hi); }
.cf-range:hover::-moz-range-thumb { background: var(--gold-hi); }
/* Liste des tables : grille + cartes détaillées */
/* Entête « Tables disponibles » : mêmes attributs que les autres entêtes de
panneau (.g-chat-panel-header) — fond chrome, bordure basse, padding et
typo identiques. */
.games-col .pane-header {
padding: 4px 10px;
background: var(--chrome-tint);
border-bottom: 1px solid var(--border);
font-size: 0.65rem;
letter-spacing: 0.15em;
}
.games-scroll { display: grid; gap: 12px; grid-template-columns: 1fr; overflow: visible; }
/* Barre de filtre des tables (design A : puces arrondies) */
.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 2px 12px; }
.filter-chip {
font-family: var(--ff-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em;
background: var(--inset); border: 1px solid var(--border); border-radius: 20px;
color: var(--text); padding: 6px 13px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
display: inline-flex; align-items: center; gap: 5px;
}
.filter-chip:hover { border-color: var(--gold-dim); color: var(--cream); }
.filter-chip.active { background: rgba(var(--sel-rgb,var(--gold-rgb)), 0.14); border-color: var(--sel,var(--gold)); color: var(--sel,var(--gold)); font-weight: 700; }
.filter-chip .cnt { font-size: 0.62rem; opacity: 0.65; }
/* Compact icon, hidden on desktop (the i18n label already carries the emoji). */
.filter-chip .fc-ic { display: none; }
/* ── Mobile only: V4 compact — one row, equal chips, icons replace labels ── */
@media (max-width: 600px) {
.filter-bar { flex-wrap: nowrap; gap: 6px; }
.filter-chip { flex: 1; min-width: 0; justify-content: center; padding: 7px 6px; gap: 4px; border-radius: 16px; }
.filter-chip .fc-ic { display: inline; } /* show the icon… */
.filter-chip .fc-ic + .fc-label { display: none; } /* …and hide the word (but not on 'All', which has no icon) */
}
.games-scroll .empty { grid-column: 1 / -1; padding: 32px 10px; }
.game-row.gcard {
border: 1px solid var(--border); border-radius: 11px; background: var(--inset);
align-items: stretch; flex-direction: column; gap: 9px; padding: 13px 14px;
}
.game-row.gcard:hover { border-color: var(--gold-dim); background: var(--inset-hi); }
.gcard-main { min-width: 0; }
.game-row.gcard .game-name { white-space: normal; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.95rem; }
.game-row.gcard .game-meta { flex-wrap: wrap; gap: 4px 10px; font-size: 0.74rem; }
.game-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; white-space: nowrap; }
.game-badge.live { color: var(--red,#e05050); background: rgba(var(--red-rgb), 0.14); border: 1px solid rgba(var(--red-rgb), 0.4); }
.game-badge.wait { color: var(--green); background: rgba(var(--green-rgb), 0.15); border: 1px solid rgba(var(--green-rgb), 0.4); }
.game-badge.closed { color: #999; background: var(--inset); border: 1px solid var(--border); }
.game-seats { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; }
.seat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--inset); border: 1px solid var(--border); }
.seat-dot.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 5px rgba(var(--gold-rgb), 0.5); }
.gcard-btns { display: flex; gap: 8px; align-items: center; }
.gcard-caret { flex:0 0 auto; background:none; border:none; cursor:pointer; color:var(--gold-dim);
font-size:0.95rem; line-height:1; padding:4px 6px; border-radius:6px; transition:color .12s, background .12s; }
.gcard-caret:hover { color:var(--gold); background:var(--inset-hi); }
/* Flèche « voir les joueurs » sur les lignes de partie : redondante avec le
panneau INFOS DE PARTIE dans le lobby normal → masquée. Réaffichée uniquement
quand je suis connecté à une table en attente du démarrage (#s-lobby.lobby-waiting),
où le panneau Infos n'est plus au premier plan et où j'ai besoin de voir qui a rejoint. */
#s-lobby:not(.lobby-waiting) .gcard-caret { display: none; }
#s-lobby:not(.lobby-waiting) .game-players { display: none; }
/* Boutons façon maquette v3 : Rejoindre en vert (extensible) + œil compact */
.game-row.gcard .btn-join {
flex: 1;
border: 1.5px solid var(--green);
background: rgba(var(--green-rgb), 0.12);
color: var(--green);
border-radius: 8px;
padding: 10px;
font-family: var(--ff-display);
font-weight: 600;
font-size: 0.88rem;
}
.game-row.gcard .btn-join:hover { background: rgba(var(--green-rgb), 0.28); }
/* Liste dépliable des joueurs d'une table (clic sur la carte) */
.game-players {
margin: -7px 0 10px;
padding: 9px 12px 11px;
background: var(--inset);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 12px 12px;
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
animation: gpReveal 0.18s ease;
}
.game-players[hidden] { display: none; }
.gp-player {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 4px 9px;
background: var(--inset-hi);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.8rem;
line-height: 1.2;
}
.gp-player .gp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-player.gp-pending { opacity: 0.55; }
.cc-flag.gp-flag { width: 18px; height: auto; border-radius: 2px; flex: 0 0 auto; }
.gp-av {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--inset);
font-size: 1.05rem;
line-height: 1;
}
.gp-av.letter { font-size: 0.7rem; font-weight: 700; color: var(--gold); }
.gp-av.has-pth-avatar { background: rgba(0,0,0,0.2); padding: 0; overflow: visible; }
.gp-empty { opacity: 0.6; font-size: 0.8rem; padding: 2px 0; }
@keyframes gpReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.game-row.gcard .btn-watch {
flex: 0 0 auto;
border: 1px solid var(--border);
background: var(--inset);
color: var(--text);
border-radius: 8px;
padding: 10px 14px;
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
}
.game-row.gcard .btn-watch:hover { border-color: var(--gold-dim); color: var(--gold); background: var(--inset-hi); }
/* Mobile (cards stacked): make the Rejoindre / Regarder buttons shorter. */
@media (max-width: 639px) {
.game-row.gcard .btn-join { padding: 5px 10px; font-size: 0.8rem; }
.game-row.gcard .btn-watch { padding: 5px 12px; font-size: 0.95rem; }
}
/* ── Téléphone (base) : boutons SOUS la carte, texte lisible ──
── Tablette (≥640) : boutons sur le FLANC DROIT, texte un cran plus grand ──
── Ordinateur (≥1024) : texte plus grand encore ── */
@media (min-width: 640px) {
.game-row.gcard { flex-direction: row; align-items: center; gap: 14px; }
.gcard-main { flex: 1 1 auto; }
.gcard-btns { flex: 0 0 auto; align-self: center; }
.game-row.gcard .btn-join { flex: 0 0 auto; font-size: 0.92rem; }
.game-row.gcard .game-name { font-size: 1.02rem; }
.game-row.gcard .game-meta { font-size: 0.78rem; }
.create-toggle { font-size: 1.15rem; }
}
@media (min-width: 1024px) {
.game-row.gcard .game-name { font-size: 1.16rem; }
.game-row.gcard .game-meta { font-size: 0.88rem; }
.game-badge { font-size: 0.66rem; }
.game-row.gcard .btn-join { font-size: 1rem; padding: 11px 20px; }
.game-row.gcard .btn-watch { font-size: 1.2rem; padding: 11px 16px; }
.create-toggle { font-size: 1.32rem; padding: 16px 18px; }
.seat-dot { width: 10px; height: 10px; }
#create-form .cf label { font-size: 0.62rem; }
#create-form .cf input, #create-form .cf select { font-size: 0.9rem; padding: 7px 9px; }
.cf-preset .cfp-ico { font-size: 1.75rem; }
.cf-preset .cfp-n { font-size: 0.95rem; }
.cf-preset .cfp-d { font-size: 0.62rem; }
}
/* ── PWA edge-to-edge: respect notch / status-bar in fullscreen mode ──
display_override lists "fullscreen" first, so an installed PWA on Android
may draw under the system status bar. These insets keep the game & lobby
headers clear of the notch and landscape camera cut-outs. Appended last so
the longhand padding-* wins over the mobile shorthand `padding:` rules. */
@media (display-mode: fullscreen) {
#s-game .header,
#s-lobby .header {
padding-top: max(4px, env(safe-area-inset-top));
padding-left: max(8px, env(safe-area-inset-left));
padding-right: max(8px, env(safe-area-inset-right));
}
}
/* ── Reset button in the create-table form (secondary, paired with Create) ── */
.btn-cf-reset {
background: transparent;
color: var(--text-hi);
border: 1px solid var(--gold-dim);
border-radius: 2px;
font-family: var(--ff-display);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.1em;
padding: 10px 14px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn-cf-reset:hover { border-color: var(--border-hi); color: var(--gold); }
.btn-cf-reset:active { transform: scale(0.98); }
/* ── Barre d'actions du formulaire « Créer une table » ──
Même forme que les boutons de la barre du bas du lobby (.lobby-footbar .lfb-*) :
coins arrondis 8 px, ff-display 600. Trois actions alignées :
Réinitialiser (neutre) · Annuler (retour lobby, rouge doux) · Créer (or, primaire). */
.cf-actions {
display: flex;
align-items: stretch;
gap: 10px;
margin-top: 4px;
}
.cf-actions > button {
flex: 1 1 0; min-width: 0; text-align: center;
border: 1px solid transparent; border-radius: 8px; padding: 9px 14px;
cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-family: var(--ff-display); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.cf-actions > button:active { transform: scale(0.98); }
/* Réinitialiser — neutre (bordure or atténuée) ; ne s'étire pas (icône seule sur mobile) */
.cf-actions .btn-cf-reset { flex: 0 0 auto; background: transparent; color: var(--text-hi); border-color: var(--gold-dim); }
.cf-actions .btn-cf-reset:hover { border-color: var(--border-hi); color: var(--gold); }
/* Annuler — retour au lobby sans créer (rouge doux, comme une annulation QML) */
.cf-actions .btn-cf-cancel { background: rgba(var(--red-rgb), 0.10); color: var(--red); border-color: rgba(var(--red-rgb), 0.5); }
.cf-actions .btn-cf-cancel:hover { background: rgba(var(--red-rgb), 0.20); }
/* Créer — couleur identique au bouton Créer du lobby (.lfb-create : or/neutre teinté), un peu plus large */
.cf-actions .cf-create-btn { flex-grow: 1.6; background: #2b3444; color: #ffffff; border-color: transparent; }
.cf-actions .cf-create-btn:hover { background: #384252; }
/* Mobile (<640px) : la barre passe sur deux lignes. Reset (icône) + Annuler
restent en haut ; « Créer » — l'action primaire — descend pleine largeur sur
sa propre ligne, donc jamais tronquée quelle que soit la langue (fr « ＋ Créer
cette table », de…), et devient une plus grande cible tactile. */
@media (max-width: 639px) {
.cf-actions { flex-wrap: wrap; }
.cf-actions .cf-create-btn { flex: 1 0 100%; }
}
/* ── Reusable toast (showToast in pokerth.js) ──
Styled to match the header ••• overflow menu: dark panel, gold-hi hairline
border, soft drop shadow, Inconsolata. */
.app-toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translate(-50%, 20px);
z-index: 950;
display: flex;
align-items: center;
gap: 8px;
max-width: min(90vw, 360px);
padding: 8px 16px;
background: var(--modal-bg);
border: 1px solid var(--border-hi);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(0,0,0,0.7);
color: var(--text-hi);
font-family: var(--ff-mono);
font-size: 0.8rem;
letter-spacing: 0.02em;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.app-toast.show { opacity: 1; transform: translate(-50%, 0); }
.app-toast-tick { color: #3fb950; font-weight: 700; }
/* Reset button: full "↺ Réinitialiser" label on tablet/desktop, icon-only on
phones (<640px, the app's phone/tablet boundary) to leave room for Create.
The label stays in the DOM (visually hidden) so it remains translated and
reachable by screen readers; the standalone ↺ is aria-hidden. */
.btn-cf-reset .cf-reset-ico { display: none; }
@media (max-width: 639px) {
.btn-cf-reset { padding: 10px 13px; }
.btn-cf-reset .cf-reset-ico { display: inline; font-size: 1.05rem; line-height: 1; }
.btn-cf-reset .cf-reset-lbl {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
}
/* Error variant of the reusable toast (showToast(msg,{tone:'error'})) —
orange hairline + icon, e.g. the "game name too long" guard. */
.app-toast--error { border-color: var(--orange); }
.app-toast--error .app-toast-tick { color: var(--orange); }
/* ─── Mobile : confort tactile (v0.2.329) ─── */
/* iOS : pas de menu long-press (save image / loupe / sélection) sur les cartes
de jeu et les boutons. Le chat et les champs restent sélectionnables. */
.pk-flip, .pk-fold, button, .cf-preset {
-webkit-touch-callout: none;
}
/* Respecte « réduire les animations » du système (accessibilité + téléphones
faibles). Les anims en forwards/both atteignent leur état final instantanément
(cartes distribuées/retournées, jetons posés) ; le timer SVG, piloté en JS,
n'est pas affecté. Durée ~0 (pas 0) pour que animationend/transitionend
continuent de se déclencher. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ─── theme-color du navigateur, suivant le thème actif (lue par JS) ─── */
:root { --theme-color: #1d222b; color-scheme: dark; } /* thèmes sombres */
:root[data-theme="pokerth-light"] { --theme-color: #eef1f6; color-scheme: light; } /* thème clair */
/* ─── Téléphones faibles / Linux + accessibilité : couper le backdrop-filter ───
Le flou de fond (backdrop-filter) est coûteux en GPU. Ici ses seuls usages
sont des voiles sombres de modale (rgba noir 0.65–0.85), purement décoratifs :
aucun texte n'en dépend, donc les retirer ne nuit pas à la lisibilité. On les
coupe quand l'utilisateur demande moins de transparence OU moins d'animations
(signaux fiables, supportés y compris Firefox/WebKit des téléphones Linux). */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
*, *::before, *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
/* ===== Sieges : pack Plaque (axe data-seat="plate") ======================
DOM neutre + display:contents -> ce pack n'est QUE du CSS. data-seat absent
= Classique (rendu historique inchange). >=600px : plaque ; <600px : repli
siege classique. Futur pack = un bloc html[data-seat=""] comme celui-ci. */
.seat-plate, .seat-info, .seat-foot { display: contents; }
html[data-seat="plate"] .seat { max-width: none; }
html[data-seat="plate"] .seat-plate {
display: flex; align-items: center; gap: 8px; position: relative;
background: var(--panel, rgba(0,0,0,0.55));
border: 1px solid var(--border);
border-radius: 11px; padding: 5px 10px 6px 5px;
box-shadow: 0 3px 12px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
html[data-seat="plate"] .seat-info {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0;
}
html[data-seat="plate"] .seat-name { text-align: left; max-width: 88px; }
html[data-seat="plate"] .seat-foot {
display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 3px;
}
html[data-seat="plate"] .seat.active .seat-plate {
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(var(--gold-rgb), 0.45);
}
html[data-seat="plate"] .seat-timer-badge { display: none; }
/* Portrait : la plaque RESTE une plaque (meme design horizontal), juste plus
compacte pour tenir autour de la table sans chevauchement. Avatar + anneau
de temps inchanges (28px) ; on reduit surtout la largeur du nom -- .seat-info
reste en COLONNE (nom au-dessus du tapis), ce qui garde la plaque etroite. */
@media (max-width: 600px) {
html[data-seat="plate"] .seat-plate { gap: 5px; padding: 3px 7px 4px 3px; border-radius: 10px; }
html[data-seat="plate"] .seat-name { max-width: 46px; font-size: 0.6rem; }
html[data-seat="plate"] .seat-money { font-size: 0.62rem; }
html[data-seat="plate"] .seat-foot { gap: 4px; margin-top: 2px; }
}
/* Pack « Jeton » (data-seat="chip") : avatar stylise en jeton de poker
(double lisere creme + anneau dore). Layout classique vertical -> tient en
portrait. Contenu / anneau de temps / drapeau / jetons inchanges. */
/* Bord de jeton (encoches creme) en SURCOUCHE par-dessus la couleur d'avatar
du joueur (posee en inline) -> visible pour tous, en dark comme en light.
Le corps garde la couleur du joueur (comme le classique). Les encoches sont
a l'extreme bord (au-dela du rayon de l'anneau de temps) pour ne pas le gener. */
html[data-seat="chip"] .seat-avatar { font-weight: 800; }
html[data-seat="chip"] .seat-avatar::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
background: repeating-conic-gradient(from 9deg, #f7f3ea 0 11deg, transparent 11deg 45deg);
-webkit-mask: radial-gradient(circle, transparent calc(50% - 3.5px), #000 calc(50% - 3.5px));
mask: radial-gradient(circle, transparent calc(50% - 3.5px), #000 calc(50% - 3.5px));
pointer-events: none;
z-index: 1;
}
/* Pack « Carte » (data-seat="card") : siege vertical en boite (avatar au-dessus
du nom/tapis). Vertical -> tient en portrait. */
html[data-seat="card"] .seat, html[data-seat="bar"] .seat { max-width: none; }
html[data-seat="card"] .seat-plate {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 6px 8px 7px; border-radius: 12px;
background: var(--panel, rgba(0,0,0,0.55));
border: 1px solid var(--border);
box-shadow: 0 3px 12px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
html[data-seat="card"] .seat-info { display: flex; flex-direction: column; align-items: center; gap: 1px; }
html[data-seat="card"] .seat-name { max-width: 72px; }
html[data-seat="card"] .seat.active .seat-plate {
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(var(--gold-rgb), 0.45);
}
html[data-seat="card"] .seat-timer-badge { display: none; }
/* Pack « Compact » (data-seat="compact") : avatar + tapis seulement. */
html[data-seat="compact"] .seat-name { display: none; }
html[data-seat="compact"] .seat-money { font-size: 0.62rem; }
/* Pack « Barre » (data-seat="bar") : avatar rond au-dessus d'une barre nom+tapis. */
html[data-seat="bar"] .seat-plate { display: flex; flex-direction: column; align-items: center; gap: 3px; }
html[data-seat="bar"] .seat-info {
display: flex; flex-direction: row; align-items: baseline; gap: 5px;
padding: 2px 8px; border-radius: 999px;
background: var(--panel, rgba(0,0,0,0.55));
border: 1px solid var(--border);
}
html[data-seat="bar"] .seat-name { max-width: 56px; }
html[data-seat="bar"] .seat.active .seat-info {
border-color: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.45);
}
html[data-seat="bar"] .seat-timer-badge { display: none; }
/* ===== Sieges : pack PokerTH (axe data-seat="pokerth") ===================
Replique du client officiel : boite par joueur, GRILLE 2 colonnes :
[avatar | 2 cartes] en LIGNE 1, nom + tapis (span 2 col) en LIGNE 2.
max-width:none !important bat les caps .seat {max-width !important} des
media-queries (sinon les cartes retombent sous l'avatar -> vertical).
COULEURS : tokens de palette. Boite = var(--panel) et NON var(--field-bg) :
--panel est dans PALETTE_TOKENS donc defini par TOUTES les palettes (y
compris les paquets importes) ; --field-bg n'y est pas et retombait sur le
vert de :root ("style green casino"). Bordure var(--border), nom var(--text-hi),
tapis var(--gold)
herites de la BASE (plus aucune surcharge en dur). La boite suit donc le
theme PokerTH (claire en PokerTH Light, sombre ailleurs). Cartes injectees
dans .seat-plate par renderSeats si pack actif : dos adversaires, faces moi. */
html[data-seat="pokerth"] .seat { max-width: none !important; }
/* GamePlayerBox.qml : dégradé lighter(panel,~18%)→panel (QML : #434c5e→#1d222b),
radius 6, bordure blanche 6 %, ombre 0 3px (opacité .42), opacity .9.
color-mix garde la fidélité QML en PokerTH Dark ET suit les autres thèmes. */
html[data-seat="pokerth"] .seat-plate {
display: grid; grid-template-columns: auto auto;
align-items: center; justify-content: center;
column-gap: 4px; row-gap: 3px; position: relative;
padding: 4px 4px 5px; border-radius: 6px;
background: linear-gradient(to bottom, color-mix(in srgb, var(--panel, #1d222b), #ffffff 13%), var(--panel, #1d222b));
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.42);
opacity: 0.9;
transition: transform 0.18s ease-out;
}
html[data-seat="pokerth"] .seat-avatar { grid-column: 1; grid-row: 1; border-radius: 8px; }
html[data-seat="pokerth"] .seat-holecards { grid-column: 2; grid-row: 1; display: flex; gap: 4px; flex: none; }
/* Wide (par défaut) : nom à GAUCHE ligne 1, tapis accent à DROITE ligne 2
(infoBar 2 lignes du QML : nom 15px DemiBold #eff1f5 ls .3 / $stack bold). */
html[data-seat="pokerth"] .seat-info {
grid-column: 1 / -1; grid-row: 2;
display: flex; flex-direction: column; gap: 0;
align-items: stretch; min-width: 0;
}
html[data-seat="pokerth"] .seat-name {
max-width: 120px; text-align: left;
font-weight: 600; letter-spacing: 0.3px;
}
html[data-seat="pokerth"] .seat-money { text-align: right; font-weight: 700; }
/* Non-wide (hauteur scalée < 76 ou portrait) : « nom · tapis » sur UNE ligne. */
html[data-seat="pokerth"] .seat-narrow .seat-info { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 6px; }
html[data-seat="pokerth"] .seat-narrow .seat-name { max-width: 76px; font-size: 0.62rem; }
html[data-seat="pokerth"] .seat-narrow .seat-money { font-size: 0.64rem; }
/* Desktop : texte des sieges un peu plus discret (les boites sont deja scalees par boxScale). */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
html[data-seat="pokerth"] .seat-name { font-size: 0.76rem !important; }
html[data-seat="pokerth"] .seat-money { font-size: 0.74rem !important; }
html[data-seat="pokerth"] .seat-bet { font-size: 0.66rem !important; }
html[data-seat="pokerth"] .seat-action-label { font-size: 0.64rem !important; }
}
/* Joueur au tour : boîte « soulevée » scale 1.04 (playerBox.scale QML) + glow or. */
html[data-seat="pokerth"] .seat.active .seat-plate {
transform: scale(1.04);
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(var(--gold-rgb), 0.45);
opacity: 1;
}
/* Couché : 0.72 ; éliminé : la base gère déjà l'estompe (transition QML 250ms). */
html[data-seat="pokerth"] .seat { transition: opacity 0.25s ease-out; }
html[data-seat="pokerth"] .seat.folded { opacity: 0.72; }
html[data-seat="pokerth"] .seat-timer-badge { display: none; }
/* Countdown RECTANGULAIRE (style pokerth) : cadre depletif autour de la boite,
remplace l'anneau rond .seat-timer. Couleurs officielles 2.1.1. */
html[data-seat="pokerth"] .seat-avatar .seat-timer { display: none; }
html[data-seat="pokerth"] .seat-timer-rect {
position: absolute; inset: -3px;
width: calc(100% + 6px); height: calc(100% + 6px);
pointer-events: none; overflow: visible; z-index: 3;
}
html[data-seat="pokerth"] .seat-timer-rect .rt-bg { fill: none; stroke: #0e1a30; stroke-width: 3; vector-effect: non-scaling-stroke; }
html[data-seat="pokerth"] .seat-timer-rect .rt-arc { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 0.9s linear; }
/* Portrait : boite plus compacte. */
@media (max-width: 600px) {
html[data-seat="pokerth"] .seat-plate { column-gap: 4px; row-gap: 2px; padding: 3px 6px 4px; border-radius: 8px; }
html[data-seat="pokerth"] .seat-name { max-width: 80px; font-size: 0.6rem; }
html[data-seat="pokerth"] .seat-money { font-size: 0.62rem; }
}
/* ===== Sieges : packs IMAGE importes (galerie, html[data-seat-img]) =======
Un pack image = une plaque 9-slice (border-image ; le mot-cle `fill` fait que
l'image peint AUSSI le fond de la boite) posee sur .seat-plate. Variables
injectees par theme.mjs (_injectSeatPkg) ; restituees zero-flash par le
snippet . Meme boite que le pack « Plaque » integre, mais cadre
graphique au lieu de background/bordure CSS. id non liste = repli Classique.
Variante « moi » optionnelle (self.*) -> cadre aussi la barre du heros. */
html[data-seat-img] .seat { max-width: none; }
html[data-seat-img] .seat-plate {
display: flex; align-items: center; gap: 8px; position: relative;
padding: var(--seat-pkg-pad, 6px 12px);
border-style: solid; border-color: transparent;
border-width: var(--seat-pkg-width, 15px);
border-image-source: var(--seat-pkg-img);
border-image-slice: var(--seat-pkg-slice, 34%) fill;
border-image-width: var(--seat-pkg-width, 15px);
border-image-repeat: stretch;
}
html[data-seat-img] .seat-info {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0;
}
html[data-seat-img] .seat-name { text-align: left; max-width: 88px; }
html[data-seat-img] .seat-foot {
display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 3px;
}
html[data-seat-img] .seat.active .seat-plate {
box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(var(--gold-rgb), 0.45);
}
html[data-seat-img] .seat-timer-badge { display: none; }
/* Variante « moi » : la barre du heros recoit le meme cadre (self.* fourni). */
html[data-seat-img-self] .player-bar {
border-style: solid; border-color: transparent;
border-width: var(--seat-pkg-self-width, 15px);
border-image-source: var(--seat-pkg-self-img);
border-image-slice: var(--seat-pkg-self-slice, 34%) fill;
border-image-width: var(--seat-pkg-self-width, 15px);
border-image-repeat: stretch;
}
@media (max-width: 600px) {
html[data-seat-img] .seat-plate { gap: 5px; }
html[data-seat-img] .seat-name { max-width: 46px; font-size: 0.6rem; }
html[data-seat-img] .seat-money { font-size: 0.62rem; }
html[data-seat-img] .seat-foot { gap: 4px; margin-top: 2px; }
}
/* ════════════════════════════════════════════════════════════════════════
FENETRES FLOTTANTES — chat / journal / reactions deplacables & redimension-
nables. La classe .floating-win est posee par le JS UNIQUEMENT au-dessus du
seuil (>= 900 px ; chat = souris/pointer:fine en plus). En dessous, aucun de
ces styles ne s'applique : les panneaux restent en bandeau pleine largeur.
Position/taille pilotees en inline par le JS (left/top/width/height).
════════════════════════════════════════════════════════════════════════ */
#g-chat-panel.floating-win,
#lobby-chat-panel.floating-win,
#g-log-panel.floating-win,
#g-reaction-panel.floating-win,
#hands-card-inner.floating-win {
border: 1px solid var(--gold-dim);
border-radius: 10px;
box-shadow: 0 14px 36px rgba(0,0,0,0.62);
overflow: hidden; /* coins arrondis nets + borne les poignees */
}
/* Fenêtre Combinaisons alignée sur les autres fenêtres flottantes */
#hands-card-inner.floating-win {
position: fixed !important; /* indispensable pour _placeWin/drag (l'overlay ne le centre plus) */
padding: 0; border-top-width: 1px; max-width: none; max-height: none;
display: flex; flex-direction: column; background: var(--modal-bg);
z-index: 201;
}
/* Mode compact quand la fenêtre Combinaisons est réduite (classe posée par un
ResizeObserver JS — plus fiable qu'une container-query sur un élément fixed
redimensionné). Surcharge les !important du media desktop via une spécificité
plus élevée + !important. */
#hands-card-inner.hands-cmp .hand-row { gap: 6px; padding: 6px 4px; }
#hands-card-inner.hands-cmp .hand-cards { gap: 1px; }
#hands-card-inner.hands-cmp .hc { width: 17px !important; height: 25px !important; font-size: 0.46rem !important; border-radius: 2px; }
#hands-card-inner.hands-cmp .hand-rank { width: 14px; font-size: 0.68rem !important; }
#hands-card-inner.hands-cmp .hand-rail { width: 3px; }
#hands-card-inner.hands-cmp .hand-name { font-size: 0.66rem !important; letter-spacing: 0.01em; gap: 4px; }
#hands-card-inner.hands-cmp .hand-ico { font-size: 0.82rem !important; }
#hands-card-inner.hands-cmp .hand-desc { font-size: 0.56rem !important; }
#hands-card-inner.hands-cmp .hands-legend { font-size: 0.54rem !important; gap: 6px; }
#hands-card-inner.hands-cmp-xs .hc { width: 14px !important; height: 21px !important; font-size: 0.4rem !important; }
#hands-card-inner.hands-cmp-xs .hand-name { font-size: 0.6rem !important; }
#hands-card-inner.hands-cmp-xs .hand-desc { font-size: 0.52rem !important; }
#hands-card-inner.floating-win .hands-scroll {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch; padding: 12px 14px;
}
/* Chat du lobby flottant : la zone messages remplit la fenetre (annule le
max-height:120px inline du mode accroche). */
#lobby-chat-panel.floating-win .chat-msgs { max-height: none !important; flex: 1 1 auto; min-height: 0; }
/* La barre de titre devient la poignee de deplacement. */
.floating-win .g-chat-panel-header,
.floating-win .react-panel-title { cursor: move; touch-action: none; -webkit-user-select: none; user-select: none; }
.floating-win .g-chat-panel-header.win-dragging,
.floating-win .react-panel-title.win-dragging { cursor: grabbing; }
/* Le resize vertical historique (bandeau) ne sert plus en mode flottant. */
.floating-win .chat-resize-handle { display: none !important; }
/* Reactions : la grille remplit la fenetre, defile, et s'adapte a SA largeur
(et non plus a celle de l'ecran) via auto-fit. */
#g-reaction-panel.floating-win { display: flex; flex-direction: column; }
#g-reaction-panel.floating-win .react-grid {
grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
max-width: none; margin: 0;
flex: 1 1 auto; min-height: 0; overflow: auto;
/* Téléphone (<600px) : le média impose max-height:88px (~2 lignes) à .react-grid.
En fenêtre flottante on l'annule pour que la grille remplisse la fenêtre et
défile normalement (comme desktop/tablette où ce plafond n'existe pas). */
max-height: none;
}
/* 8 poignees de redimensionnement (bords + coins), injectees en JS.
Transparentes : seul le curseur signale la zone. Placees sur les bords
interieurs car le panneau est en overflow:hidden. */
.win-rsz { position: absolute; z-index: 6; touch-action: none; }
.win-rsz-n { top: 0; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
.win-rsz-s { bottom: 0; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
.win-rsz-e { right: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.win-rsz-w { left: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.win-rsz-ne { top: 0; right: 0; width: 13px; height: 13px; cursor: nesw-resize; }
.win-rsz-nw { top: 0; left: 0; width: 13px; height: 13px; cursor: nwse-resize; }
.win-rsz-se { bottom: 0; right: 0; width: 13px; height: 13px; cursor: nwse-resize; }
.win-rsz-sw { bottom: 0; left: 0; width: 13px; height: 13px; cursor: nwse-resize; }
.win-resizing, .win-resizing * { -webkit-user-select: none; user-select: none; }
/* ════════════════════════════════════════════════════════════════════════
Ouverture EN BANDEAU + detachement au 1er drag/resize : geree cote JS
(_attachFloatControls / _ensureFloating). Les styles .floating-win et
.win-rsz sont definis plus haut (v0.2.385) et s'appliquent au detachement.
Carte des COMBINAISONS (memo des mains) : deplacable + redimensionnable sur
tablette/desktop (>=900px). En dessous : modale centree classique (inchange).
════════════════════════════════════════════════════════════════════════ */
.hands-floatable {
position: fixed;
width: min(460px, 96vw);
overflow: hidden; /* les poignees de resize ne defilent pas */
}
.hands-floatable .hands-title { cursor: move; touch-action: none; -webkit-user-select: none; user-select: none; }
/* Bouton "reset des fenetres" du header : visible seulement tablette + desktop.
Selecteur sur-specifie (#s-game .header .btn-sm.win-reset-only) pour battre
`.header .btn-sm` (base) et `#s-game .header .btn-sm` (@media max-740) qui
forcaient sinon display:inline-flex partout, mobile compris. */
#s-game .header .btn-sm.win-reset-only { display: none; }
@media (min-width: 900px) and (min-height: 600px) { #s-game .header .btn-sm.win-reset-only { display: inline-flex; } }
/* Bouton reset des fenetres dans le LOBBY : desktop SOURIS uniquement
(exclu tablette/mobile via hover + pointer:fine), comme le gate du chat lobby. */
#s-lobby .header .btn-sm.win-reset-lobby { display: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { #s-lobby .header .btn-sm.win-reset-lobby { display: inline-flex; } }
/* ════════════════════════════════════════════════════════════════════════
Combinaisons (memo des mains) : sur tablette/desktop l'overlay ne fait plus
ecran. Pas d'assombrissement ni de capture de clic -> la carte (qui y flotte
deja, deplacable/redimensionnable) reste ouverte et la barre d'action reste
visible + cliquable meme quand une action joueur est requise. Fermeture via
le bouton X de la carte ou le 🃏. Mobile (<900px de large ou <600px de haut) :
modale assombrie + clic-exterieur ferme (inchange).
════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (min-height: 600px) {
#hands-overlay { background: transparent; pointer-events: none; }
#hands-overlay .hands-card { pointer-events: auto; }
}
/* Combinaisons en mode flottant (tablette/desktop) : titre epingle en haut, et
le reste (legende + lignes + bouton fermer) dans une zone scrollable interne,
pour que TOUT le contenu defile quand la carte est plus petite que son contenu.
Les poignees de resize restent enfants directs de la carte (hors .hands-scroll),
donc fixees aux bords sans defiler. Mobile : la carte scrolle nativement (la
classe .hands-floatable est absente, ces regles ne s'appliquent pas). */
.hands-floatable { display: flex; flex-direction: column; }
.hands-floatable .hands-title { flex: 0 0 auto; }
.hands-floatable .hands-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
/* ════════════════════════════════════════════════════════════════════════
Raccourcis clavier discrets dans les boutons d'action — DESKTOP UNIQUEMENT
(souris : hover + pointeur fin) ; masques sur tablette/telephone tactiles.
Les touches F / C / R / A (+ Espace pour Call/Check) sont DEJA actives ;
ceci ne fait que les afficher. Pave encadre en haut a droite, dessine en
currentColor (s'adapte a la couleur de chaque bouton) et attenue.
════════════════════════════════════════════════════════════════════════ */
.act-key {
display: none;
position: absolute; top: 3px; right: 4px;
font-family: var(--ff-mono); font-size: 0.6rem; line-height: 1;
font-weight: 600; letter-spacing: 0;
padding: 1px 4px; border: 1px solid currentColor; border-radius: 3px;
opacity: 0.4; pointer-events: none;
}
/* Revele : (a) desktop a la souris (hover + pointeur fin), tout de suite */
@media (hover: hover) and (pointer: fine) {
.btn-action, .btn-pct { position: relative; }
.act-key { display: inline-block; }
}
/* (b) ou des qu'un clavier physique est detecte (classe posee par le JS) */
body.has-keyboard .btn-action, body.has-keyboard .btn-pct { position: relative; }
body.has-keyboard .act-key { display: inline-block; }
/* iOS Safari : empeche le zoom auto au focus d'un champ (declenche quand
font-size < 16px). Force a 16px sur tactile uniquement ; le pinch-zoom
reste actif (viewport intact). .raise-input exclu pour preserver la
table compacte (slider + boutons 1/3.1/2.Pot disponibles). */
@media (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not(.raise-input),
textarea,
select { font-size: 16px !important; }
}
/* ── Zoom de la table (boutons +/- en haut a droite) ──────────────────────
Visible uniquement tablette/desktop. Reduit/re-agrandit #g-table-zone
(feutre + cartes communes + adversaires) ; max = taille actuelle (1.0). */
.zoom-ctrl {
position: absolute; top: 8px; right: 8px; z-index: 30;
display: flex; flex-direction: column; gap: 6px; /* visible sur tous les appareils */
}
@media (min-width: 900px) and (min-height: 600px) {
.zoom-ctrl { display: flex; }
}
.zoom-btn {
width: 30px; height: 30px; padding: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 8px; cursor: pointer;
background: rgba(20, 28, 24, 0.72); color: #e8e8e8;
border: 1px solid rgba(255, 255, 255, 0.18);
font-size: 1.2rem; font-weight: 600; line-height: 1;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
transition: background 0.15s, opacity 0.15s;
}
.zoom-btn:hover { background: rgba(40, 52, 46, 0.9); }
.zoom-btn:active { transform: scale(0.94); }
.zoom-btn:disabled { opacity: 0.35; cursor: default; }
/* Boutons ronds posés sur le tapis (chat+emoji haut-gauche, journal haut-droite) */
.g-felt-corner { position:absolute; z-index:30; display:flex; gap:6px; }
.g-felt-tl { top:8px; left:8px; }
.g-felt-tr { top:8px; right:8px; }
.g-felt-btn { position:relative; width:34px; height:34px; padding:0; border-radius:50%;
display:flex; align-items:center; justify-content:center; cursor:pointer;
background:rgba(20,28,24,0.72); color:#e8e8e8; border:1px solid rgba(255,255,255,0.18);
font-size:1.05rem; line-height:1; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
transition:background .15s, transform .1s; }
.g-felt-btn:hover { background:rgba(40,52,46,0.9); }
.g-felt-btn:active { transform:scale(0.94); }
.g-felt-btn.active { background:var(--accent,#E3C800); color:#1a1205; border-color:var(--accent,#E3C800); }
/* Bouton emoji grisé quand les réactions sont désactivées (mute) */
.g-felt-btn.muted { opacity:0.4; filter:grayscale(1); }
/* Le zoom passe SOUS le journal (haut-droite) pour ne pas le chevaucher */
.zoom-ctrl { top:50px; }
/* Toggle du zoom : masqué en desktop, visible en mobile */
/* Zoom repliable à TOUS les écrans : la touche 🔍 déploie les boutons. */
.zoom-toggle { display:flex; }
.zoom-ctrl .zoom-btn:not(.zoom-toggle) { display:none; }
.zoom-ctrl.open .zoom-btn { display:flex; }
.zoom-btn.active { background: var(--accent, #E3C800); color: #1a1205; border-color: var(--accent, #E3C800); }
/* -- Bouton "editer le placement" (mode custom) + edition glisser-deposer -- */
#g-seat-edit { display: none; }
html[data-seat-layout="custom"] #g-seat-edit { display: flex; }
#g-seat-edit.active { background: #E3C800; color: #1d222b; border-color: #E3C800; }
html[data-seat-edit="1"] { -webkit-user-select: none; user-select: none; }
html[data-seat-edit="1"] #g-seats .seat[data-pid] { cursor: grab; touch-action: none; outline: 2px dashed rgba(227, 200, 0, 0.75); outline-offset: 2px; border-radius: 10px; }
html[data-seat-edit="1"] #g-seats .seat.seat-ghost { outline: none; cursor: default; }
#g-seats .seat.seat-dragging { cursor: grabbing; z-index: 50; }
.seat-edit-banner {
position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
z-index: 60; display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: 12px; max-width: calc(100vw - 24px);
background: rgba(20, 28, 24, 0.92); color: #eff1f5;
border: 1px solid rgba(227, 200, 0, 0.55);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
font-size: 0.9rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.seat-edit-banner .seb-hint { opacity: 0.92; }
.seat-edit-banner button {
border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px;
padding: 5px 10px; cursor: pointer; font-weight: 600; font-size: 0.85rem;
background: rgba(255, 255, 255, 0.08); color: #eff1f5;
}
.seat-edit-banner .seb-done { background: #E3C800; color: #1d222b; border-color: #E3C800; }
/* ── Selecteur d'emoji du chat (desktop / souris) ───────────────────
Bouton dans la barre de saisie + grille repliable au-dessus. Un clic insere
l'emoji dans #g-chat-in (envoye tel quel : texte unicode). Mobile -> masque
(le clavier natif propose deja les emojis). */
.chat-emoji-toggle {
display: none; /* desktop (souris) uniquement -- voir media query */
align-items: center; justify-content: center;
background: var(--inset); color: var(--cream);
border: 1px solid var(--border); border-radius: 2px;
padding: 0 9px; font-size: 1rem; line-height: 1; cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
@media (hover: hover) and (pointer: fine) {
.chat-emoji-toggle { display: flex; }
}
.chat-emoji-toggle:hover { background: rgba(var(--gold-rgb), 0.15); border-color: var(--gold-dim); }
.chat-emoji-toggle.active { background: rgba(var(--sel-rgb,var(--gold-rgb)), 0.22); border-color: var(--gold-dim); }
.chat-emoji-panel {
grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
gap: 2px;
max-height: 80px;
overflow-y: auto;
padding: 6px 8px;
border-top: 1px solid var(--border);
background: var(--panel);
flex-shrink: 0;
}
.chat-emoji-btn {
aspect-ratio: 1; width: 100%;
background: none; border: none; border-radius: 5px;
font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
transition: transform 0.1s ease, background 0.1s;
}
.chat-emoji-btn:hover { background: rgba(var(--gold-rgb), 0.15); transform: scale(1.18); }
.chat-emoji-btn:active { transform: scale(0.9); }
/* ════════════════════════════════════════════════════════════════════════
PANNEAU MUSIQUE — fenetre flottante globale (accueil + lobby + jeu).
Deplacable + redimensionnable >= 900px via le systeme de fenetres existant
(_attachFloatControls + .floating-win). Sous le seuil : feuille fixe en bas
d'ecran, non deplacable. z-index 900 : au-dessus du jeu, sous les modales
(9999). Bloc purement additif — aucune regle partagee n'est modifiee.
════════════════════════════════════════════════════════════════════════ */
#music-panel {
position: fixed;
z-index: 900;
top: 58px;
right: 14px;
width: min(340px, 92vw);
max-height: min(72dvh, 560px);
display: none; /* bascule en flex par le JS */
flex-direction: column;
background: var(--panel);
border: 1px solid var(--gold-dim);
border-radius: 12px;
box-shadow: 0 14px 36px rgba(0,0,0,0.62);
overflow: hidden; /* coins nets + borne les poignees de resize */
}
.music-panel-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 12px;
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-dim);
background: var(--chrome-tint);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
-webkit-user-select: none;
user-select: none;
}
.music-panel-title > span { display: inline-flex; align-items: center; gap: 6px; }
.music-panel-close {
background: none; border: none; color: var(--text);
cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 2px;
}
.music-body {
padding: 12px 14px 14px;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.music-foot { flex: 0 0 auto; border-top: 1px solid var(--gold-dim); padding: 11px 14px; }
.music-foot-row { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); font-size: 0.9rem; user-select: none; }
.music-foot-lbl { display: inline-flex; align-items: center; }
.music-foot-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; flex: 0 0 auto; }
.music-empty { color: var(--gold-dim); font-size: 0.85rem; text-align: center; padding: 18px 4px; }
.music-now { display: flex; flex-direction: column; gap: 2px; }
.music-now-label { font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); }
.music-now-title { font-size: 0.95rem; color: var(--text); font-weight: 600; }
.music-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.music-tbtn {
flex: 0 0 auto;
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem; line-height: 1;
background: var(--field-bg); color: var(--text);
border: 1px solid var(--border); border-radius: 9px;
cursor: pointer;
}
.music-tbtn:hover:not([disabled]) { border-color: var(--gold-dim); color: var(--gold); }
.music-tbtn[disabled] { opacity: 0.4; cursor: default; }
.music-tbtn-main { width: 46px; height: 46px; font-size: 1.2rem; color: var(--gold); border-color: var(--gold-dim); }
.music-tbtn.is-active { color: var(--sel,var(--gold)); border-color: var(--sel,var(--gold)); background: rgba(var(--sel-rgb,var(--gold-rgb)),0.16); }
.music-div { width: 1px; align-self: stretch; background: var(--border); margin: 4px 2px; }
.music-vol { display: flex; align-items: center; gap: 8px; }
.music-vol-ic { flex: 0 0 auto; font-size: 0.95rem; }
.music-vol-range { flex: 1 1 auto; min-width: 0; accent-color: var(--gold); }
.music-vol-val { flex: 0 0 auto; font-size: 0.72rem; color: var(--gold-dim); min-width: 34px; text-align: right; }
.music-seek-row { display: flex; align-items: center; gap: 8px; }
.music-seek { flex: 1 1 auto; min-width: 0; accent-color: var(--gold); cursor: pointer; }
.music-seek[disabled] { opacity: 0.45; cursor: default; }
.music-time { flex: 0 0 auto; font-size: 0.7rem; color: var(--gold-dim); min-width: 36px; font-variant-numeric: tabular-nums; }
.music-cur { text-align: right; }
.music-dur { text-align: left; }
/* ── Section « Sons du jeu » en haut du lecteur (visuellement distincte) ── */
.music-gamesnd { border: 1px solid var(--border-hi); background: rgba(var(--gold-rgb),0.06); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.music-gamesnd-hd { display: flex; align-items: center; gap: 6px; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
.music-gamesnd-ic { font-size: 0.85rem; }
.music-gamesnd-row { display: flex; align-items: center; gap: 8px; }
.music-gs-mute { flex: 0 0 auto; width: 32px; height: 32px; font-size: 0.95rem; }
.music-gs-range { flex: 1 1 auto; min-width: 0; accent-color: var(--gold); cursor: pointer; }
.music-gs-val { flex: 0 0 auto; font-size: 0.72rem; color: var(--gold-dim); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.music-gamesnd-row.is-off .music-gs-range { opacity: 0.4; }
.music-gamesnd-row.is-off .music-gs-val { opacity: 0.5; }
/* ── Box jumelle « Lecteur » qui regroupe les commandes musique ── */
.music-player-box { border: 1px solid var(--border-hi); background: rgba(var(--gold-rgb),0.06); border-radius: 10px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 10px; }
.music-player-hd { display: flex; align-items: center; gap: 6px; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
.music-player-ic { font-size: 0.85rem; }
/* ── Popover de réglage du son (bouton son du header) ── */
.sound-pop {
position: fixed; z-index: 1200;
display: flex; flex-direction: column; align-items: stretch; gap: 8px;
width: 210px; box-sizing: border-box;
padding: 8px 10px;
background: var(--panel); color: var(--text);
border: 1px solid var(--border-hi); border-radius: 10px;
box-shadow: 0 8px 26px rgba(0,0,0,0.45);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sound-pop-mute {
flex: 0 0 auto; width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.95rem; line-height: 1;
background: var(--field-bg); color: var(--text);
border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.sound-pop-mute:hover { border-color: var(--gold-dim); }
.sound-pop-range { flex: 1 1 auto; min-width: 0; accent-color: var(--gold); cursor: pointer; }
.sound-pop-val { flex: 0 0 auto; font-size: 0.72rem; color: var(--gold-dim); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.sp-row { display: flex; align-items: center; gap: 8px; }
.sound-pop-ico { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; opacity: 0.9; }
.sound-pop.is-off .sound-pop-range:not(.sp-music-range) { opacity: 0.4; }
.sound-pop.is-off .sound-pop-val:not(.sp-music-val) { opacity: 0.5; }
.sp-haptic-lbl { flex: 1 1 auto; min-width: 0; font-size: 0.8rem; color: var(--text); }
.sp-haptic-cb { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.music-list { display: flex; flex-direction: column; gap: 4px; }
.music-row {
display: flex; align-items: center; gap: 10px;
width: 100%; text-align: left;
padding: 8px 10px;
background: var(--field-bg); color: var(--text);
border: 1px solid var(--border); border-radius: 9px;
cursor: pointer;
}
.music-row:hover { border-color: var(--gold-dim); }
.music-row.is-current { border-color: var(--gold-dim); background: rgba(var(--gold-rgb),0.08); }
.music-row-ic { flex: 0 0 auto; width: 20px; text-align: center; color: var(--gold); font-size: 0.9rem; }
.music-row-meta { display: flex; flex-direction: column; min-width: 0; }
.music-row-title { font-size: 0.9rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-row-artist { font-size: 0.68rem; color: var(--gold-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-credit { font-size: 0.62rem; line-height: 1.4; color: var(--gold-dim); opacity: 0.85; }
.music-credit a { color: var(--gold-dim); text-decoration: underline; }
.music-sel-label { display: block; font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: -4px; }
.music-sel-wrap { width: 100%; }
.music-sel-wrap select { width: 100%; }
/* Barre de titre = poignee de deplacement en mode flottant (makeWinDraggable
pose deja cursor/touch-action inline ; on garde le curseur de prehension). */
.floating-win .music-panel-title { cursor: move; touch-action: none; }
.floating-win .music-panel-title.win-dragging { cursor: grabbing; }
/* En mode flottant, la fenetre pilote sa hauteur (resize) : on libere le plafond. */
#music-panel.floating-win { max-height: none; }
/* Telephone / petit ecran : feuille fixe en bas, non deplacable. Le JS
(_winGate=false) n'ajoute jamais .floating-win ici et nettoie les inline. */
@media (max-width: 899px), (max-height: 599px) {
#music-panel {
top: auto; bottom: 8px; left: 8px; right: 8px;
width: auto;
max-height: min(70dvh, 460px);
border-radius: 14px;
}
}
/* ═══════════════════════════════════════════════════════════════════
Ranking modal (connect screen) — PokerTH / BBC / WEC.
Entry: the 🏆 button in #s-connect .corner-links. Content via the
same-origin /api/ranking relay (see proxy.js). Self-contained so it
is easy to restyle or move later. All colours via palette tokens.
═══════════════════════════════════════════════════════════════════ */
#ranking-modal { position: fixed; inset: 0; z-index: 1200; align-items: center; justify-content: center; }
.rk-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); }
.rk-card {
position: relative;
width: min(440px, calc(100vw - 32px));
max-height: min(80vh, 620px);
display: flex;
flex-direction: column;
background: var(--modal-bg);
border: 1px solid var(--border-hi);
border-radius: 6px;
box-shadow: 0 16px 50px rgba(0,0,0,0.8);
padding: 16px 18px 14px;
}
.rk-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: color 0.15s; }
.rk-close:hover { color: var(--gold); }
.rk-title { font-family: var(--ff-mono); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-hi); margin-bottom: 12px; }
.rk-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.rk-tab {
flex: 1; padding: 7px 6px; cursor: pointer;
background: var(--inset); color: var(--text);
border: 1px solid var(--border); border-radius: 3px;
font-family: var(--ff-mono); font-size: 0.8rem; letter-spacing: 0.03em;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rk-tab:hover { border-color: var(--border-hi); color: var(--text-hi); }
.rk-tab.active { background: rgba(var(--sel-rgb,var(--gold-rgb)), 0.18); border-color: var(--sel,var(--gold)); color: var(--sel-hi,var(--gold-hi)); }
.rk-body { flex: 1; min-height: 120px; overflow-y: auto; }
.rk-msg { text-align: center; color: var(--text); opacity: 0.85; padding: 30px 8px; font-size: 0.82rem; }
.rk-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: var(--ff-mono); }
.rk-table th { position: sticky; top: 0; background: var(--field-bg); text-align: left; color: var(--gold-dim); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rk-table th.rk-th-sort { cursor: pointer; user-select: none; }
.rk-table th.rk-th-sort:hover { color: var(--gold); }
.rk-table td { padding: 4px 8px; border-bottom: 1px solid rgba(var(--gold-rgb), 0.08); color: var(--text-hi); }
.rk-table tbody tr:hover td { background: rgba(var(--gold-rgb), 0.06); }
/* Ranking search box (name filter) — see #rk-search in the ranking modal.
16px font-size avoids the iOS focus-zoom on the connect screen. */
.rk-search-wrap { margin-bottom: 10px; }
.rk-search {
width: 100%; box-sizing: border-box; padding: 8px 10px;
background: var(--field-bg); color: var(--text-hi);
border: 1px solid var(--border); border-radius: 3px;
font-family: var(--ff-mono); font-size: 16px; outline: none;
transition: border-color 0.15s;
}
.rk-search::placeholder { color: var(--text); opacity: 0.6; }
.rk-search:focus { border-color: var(--gold); }
/* Ranking season + All-Time controls — see #rk-controls in the ranking modal.
16px