/* ─────────────────────────────────────────────────────────────────────
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 {
/* ═══════════════════════════════════════════════════════════════════════
COUCHE DE TOKENS GÉNÉRIQUE — échelles unifiées (typo · espacement · rayon ·
hauteurs de contrôle). Barème DISCRET, surchargeable par breakpoint en un
seul endroit (voir docs/DESIGN_TOKENS.md → §Responsive). ADDITIF : tant
qu'un élément ne référence pas ces variables, le rendu est INCHANGÉ.
Les valeurs QML (barre d'action 54/40 px, All-In 52 px, radius 9/10) sont
encodées ici → la fidélité est préservée par construction.
Réf. complète : docs/DESIGN_TOKENS.md */
/* Typographie (rem) — dérivée des 77 valeurs existantes ramenées à 10 pas */
--fs-3xs: .55rem; --fs-2xs: .62rem; --fs-xs: .70rem; --fs-sm: .78rem;
--fs-base: .85rem; --fs-md: .95rem; --fs-lg: 1.05rem; --fs-xl: 1.35rem;
--fs-2xl: 1.6rem; --fs-hero: 2.6rem;
--lh-tight: 1.1; --lh-base: 1.35;
/* Espacement (px, base 2 — 6/8 = chevaux de trait) */
--sp-0: 2px; --sp-1: 4px; --sp-2: 6px; --sp-3: 8px;
--sp-4: 10px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px;
/* Rayons (QML : bouton 9, barre 10) */
--r-xs: 3px; --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-bar: 10px; --r-pill: 999px;
/* Accent des pastilles du bandeau de jeu. #pot-strip est un bandeau NOIR
rgba(0,0,0,0.78) dans TOUS les modes (parite QML §7), donc son accent doit
rester lisible sur du sombre : il suit le theme par defaut, mais la palette
claire le ramene a l'or QML (Theme.colorAccent #E3C800 n'a qu'UNE valeur
dans la bible §13.2, pas de variante claire). */
--sel-bar: var(--sel, #E3C800);
--sel-bar-rgb: var(--sel-rgb, 227,200,0);
/* Hauteurs de contrôle (QML : barre 54, landscapeCompact 40, All-In 52) */
--ctrl-sm: 26px; --ctrl-md: 34px; --ctrl-lg: 40px; --ctrl-xl: 54px; --ctrl-allin: 52px;
--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;
/* Confirm-dialog buttons — couleurs QML constantes sur tous les themes.
Dialogues quit/disconnect : les deux boutons sont neutres (contour),
fideles au dialogue officiel. Seul Create (quick-create) = Raise vert. */
--qml-pos-grad: linear-gradient(180deg, #50b840, #1e6614);
--qml-pos-grad-hi: linear-gradient(180deg, #5ec84c, #248019);
--qml-pos-edge: #7ad06a;
--qml-pos-fg: #eafbe6;
--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: #f0f3f8;
--felt-mid: #e6ebf3;
--felt-hi: #dce2ec;
--modal-bg: linear-gradient(160deg, #f0f3f8 0%, #e2e8f1 50%, #eef1f7 100%);
--panel: #c8cacf;
--panel-hi: #d3d5da;
--gold: #1d222b;
--gold-rgb: 29,34,43;
--gold-hi: #000000;
--gold-dim: #576378;
--sel: #9a7d0a;
--sel-rgb: 154,125,10;
/* Bandeau noir meme en clair -> on garde l'or QML (sinon 3,7:1 sur le texte,
sous le seuil AA, et bordure a 2,1:1 quasi invisible). */
--sel-bar: #E3C800;
--sel-bar-rgb: 227,200,0;
--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; }
/* Taille minimale supportée (déclarative, pas de plancher CSS — html/body sont en
overflow:hidden, un min-width clipperait) : 390×600 sur desktop (parité fenêtre
min du client Qt/QML) et largeur ≥ 360 sur mobile. En dessous, rendu dégradé. */
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);
}
/* Palette PokerTH claire : fond plat #f0f3f8 (QML col700 light), sans rayures. */
:root[data-theme="pokerth-light"] body { background-image: none; }
/* 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);
/* --wallpaper-dyn-* : cadrage QML « center » calculé par renderSeats
(parité tableBackgroundImage : couvre la bande zone+action bar, centré
sur communityCenterY, × TableBackgroundZoom). Prioritaire ; repli sur
le comportement historique (--wallpaper-size / cover, pos / bas). */
background-size: var(--wallpaper-dyn-size, var(--wallpaper-size, cover)); /* 2.1.3: TableBackgroundZoom (import) surcharge cover */
background-position: var(--wallpaper-dyn-pos, var(--wallpaper-pos, center bottom));
background-repeat: no-repeat;
}
/* Portrait (iPhone) : garantir un fond PLEIN ÉCRAN même quand le cadrage
dynamique (--wallpaper-dyn-*) n'est pas encore posé (image en cours de
chargement) ou indisponible. Sinon le repli --wallpaper-size (ex. 130%,
TableBackgroundZoom) = 130% de la LARGEUR, hauteur proportionnelle → une
bande courte sur écran étroit. Ici le repli devient 'cover' = plein écran.
Le dynamique, quand présent, reste prioritaire (crop centré × zoom). */
@media (orientation: portrait) {
:root[data-table-fs="1"] #s-game {
background-size: var(--wallpaper-dyn-size, cover);
background-position: var(--wallpaper-dyn-pos, center);
}
}
: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: var(--r-lg);
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: var(--r-lg);
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;
/* Hauteur UNIFORME avec tous les autres headers (--header-h, base QML
2.1.3 : 38 px / 30 en landscapeCompact) : padding vertical 4 px et
bouton Retour a 30 px comme les boutons des autres headers. */
padding: 4px clamp(8px,2vw,20px);
min-height: var(--header-h, 38px);
box-sizing: border-box;
border-bottom: 1px solid var(--border);
/* Meme fond que les .header globaux (etait --chrome-tint, trop discret). */
background: var(--panel);
flex-shrink: 0;
}
/* Pousse le globe + roue crantée à droite (parité header lobby). */
.cp-head-spacer { flex: 1; }
.cp-title {
font-family: var(--ff-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--text-hi);
letter-spacing: 0.02em;
}
/* Titre centré dans le header (entre la porte à gauche et globe/roue à
droite) : positionnement absolu au centre du .cp-header — insensible aux
largeurs inégales des deux groupes d'icônes. max-width borné pour ne
jamais chevaucher les icônes ; pointer-events off (label non cliquable). */
#s-create .cp-title,
#privacy-page .cp-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 60%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.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: var(--sp-2); }
.cf-lbl { font-size: var(--cf-fs-body); 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: var(--cf-fs-body); outline: none;
}
.cf-input:focus, .cf-select:focus { border-color: var(--gold-dim); }
.cf-sec {
margin: 16px 0 2px; padding-top: 14px;
font-size: var(--cf-fs-body); 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: var(--cf-fs-value); 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: var(--r-pill); 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: var(--sp-6); }
.cf-radio { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--cf-fs-body); color: var(--text); cursor: pointer; }
.cf-radio input { accent-color: #2f81f7; }
.cf-create-btn { flex: 1; padding: var(--sp-5); }
/* ══════════════════════════════════════════
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.10), rgba(8,10,14,0.15)),
url("/img/pokerth-login-bg.webp") center / cover no-repeat;
}
/* Chrome Android : les items flex de la carte login (select de mode, input
pseudo/host) ont min-width:auto = leur largeur intrinsèque et ne peuvent
pas rétrécir → la rangée déborde de la carte et le bouton avatar sort de
l'écran. min-width:0 rend les rangées compressibles ; les boutons 🐼/⚙
gardent leur taille (flex-shrink:0). Même leçon que la barre d'action. */
.card .sel-wrap { min-width: 0; }
.card .f input { min-width: 0; }
.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: var(--fs-xs);
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: var(--fs-lg); 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: var(--fs-2xs); letter-spacing: 0.4em; text-transform: uppercase; color: var(--text); }
.card-chip {
display: block;
margin: 0 auto;
/* Parité client QML (Theme.brandLogoSize) : plafond 126 px desktop /
100 px phone, plancher 56 px, mise à l'échelle fluide (narmod 19/07).
Les media-queries max-height ci-dessous prennent le relais sur écrans
très courts, comme le compact QML. */
width: clamp(56px, 13vw, 126px);
height: clamp(56px, 13vw, 126px);
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}
@media (max-width: 600px) {
.card-chip { width: clamp(56px, 22vw, 100px); height: clamp(56px, 22vw, 100px); } /* compact QML : plafond 100 */
}
/* 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. */
/* Paliers progressifs de réduction de la carte de connexion (760/640) :
raffinements fluides pour écrans peu hauts, pas des frontières de classe. */
@media (max-height: 760px) {
#s-connect { padding: 8px 14px; }
.card { gap: var(--sp-3); 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: var(--fs-md) !important; margin-top: 5px !important; }
.card-subtitle { font-size: var(--fs-3xs) !important; margin-top: 4px !important; }
.f { gap: var(--sp-1); }
.f input { padding: 7px 10px; font-size: var(--fs-base); }
.sel-wrap select { padding: 7px 30px 7px 10px; }
.login-avatar-top #av-trigger { width: 72px; height: 72px; font-size: 2.1rem; }
#login-step2 { gap: var(--sp-3); }
.btn-primary { padding: var(--sp-4); }
.tls-row { font-size: var(--fs-xs); }
}
@media (max-height: 640px) {
.card-chip { width: 44px; height: 44px; }
.card-title-big { font-size: var(--fs-xl) !important; }
.card-suits-row { display: none !important; }
.card { gap: var(--sp-2); }
#login-step2 { gap: var(--sp-2); }
}
.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: var(--fs-base);
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: var(--fs-sm); }
/* ── Dropdown « Type de partie » (parité QML StyledCombo : icônes champ + liste) ── */
.gt-dd { position: relative; }
.gt-dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gt-dd-btn {
width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 9px;
background: var(--field-bg); border: 1px solid var(--border); border-radius: 8px;
color: var(--text); padding: 9px 32px 9px 12px; font-size: var(--fs-md); font-family: inherit;
cursor: pointer; text-align: left; position: relative;
}
.gt-dd-btn:focus { outline: none; border-color: var(--gold-dim); }
.gt-dd-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-dd-ico {
width: 16px; height: 16px; flex: 0 0 16px; background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.gt-ico-1 { -webkit-mask-image: url('img/gametype/user.svg'); mask-image: url('img/gametype/user.svg'); }
.gt-ico-2 { -webkit-mask-image: url('img/gametype/userSquare.svg'); mask-image: url('img/gametype/userSquare.svg'); }
.gt-ico-3 { -webkit-mask-image: url('img/gametype/users.svg'); mask-image: url('img/gametype/users.svg'); }
.gt-ico-4 { -webkit-mask-image: url('img/gametype/chipStack.svg'); mask-image: url('img/gametype/chipStack.svg'); }
.gt-dd-list {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
background: var(--field-bg); border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.35); overflow: hidden;
}
.gt-dd-item {
display: flex; align-items: center; gap: 9px; padding: 9px 12px;
color: var(--text); font-size: var(--fs-md); cursor: pointer;
}
.gt-dd-item:hover, .gt-dd-item.sel { background: rgba(255,255,255,0.07); }
:root[data-theme="pokerth-light"] .gt-dd-item:hover,
:root[data-theme="pokerth-light"] .gt-dd-item.sel { background: rgba(0,0,0,0.07); }
/* Quick-bets 1/3·1/2·Pot masquables (parité QML ShowPotPercentButtons) */
body.adv-no-potbtns .pct-row { display: none !important; }
/* Contenus communauté masquables (parité QML showCommunityContent) */
body.adv-no-communitycontent #ranking-modal .rk-tab[data-src="bbc"],
body.adv-no-communitycontent #ranking-modal .rk-tab[data-src="wec"] { display: none !important; }
body.adv-no-communitycontent .adv-row:has(#adv-defcommunity) { display: none !important; }
/* Verrous du formulaire de création (parité QML : classé / invité) */
.cf-locked { opacity: 0.55; pointer-events: none; }
.gt-dd-btn:disabled { opacity: 0.55; cursor: default; pointer-events: none; }
#cf-name:disabled { opacity: 0.7; }
.cf-name-err { color: #ef4444; font-size: var(--cf-fs-xs); margin-top: 4px; }
.avatar-picker {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
.av-btn {
background: var(--inset);
border: 2px solid var(--border);
border-radius: var(--r-sm);
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: var(--fs-xs); 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.5em; 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);
}
/* ── En-tête de jeu : nom de table centré + badges de statut (palette QML) ──
Le libellé statique « TABLE » devient le nom réel de la partie, centré sur
la barre (position absolue → indépendant de la largeur des boutons), suivi
de badges Admin (or #E3C800) et Public/Privé (vert #27ae60). Reste cliquable
→ openGameInfoPopup(). Le nom tronque en « … » ; les badges ne rétrécissent
pas (le nom cède en premier). */
.header-brand--game {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: min(72vw, 560px);
justify-content: center;
pointer-events: none; /* les zones vides laissent passer les clics aux boutons */
z-index: 1;
}
.header-brand--game .g-brand-click {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
min-width: 0;
max-width: 100%;
cursor: pointer;
}
/* Annule l'atténuation globale `.header-brand span { opacity:.6 }` (definie
plus bas → on double la classe pour gagner en specificite). */
.header-brand.header-brand--game span { opacity: 1; font-size: inherit; }
.header-brand--game #g-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-hi);
transition: color 0.15s;
}
.header-brand--game .g-brand-click:hover #g-name { color: var(--gold); }
.g-brand-sep { color: var(--text); opacity: 0.45; flex-shrink: 0; }
.g-status-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
font-family: var(--ff-mono);
font-size: 0.42em;
letter-spacing: 0.04em;
padding: 1px 5px;
border-radius: 4px;
gap: 3px;
white-space: nowrap;
line-height: 1;
}
.gsb-label { margin-left: 0; }
.g-status-badge svg { flex: none; width: 1.4em; height: 1.4em; }
/* Spécificité (0,3,0) pour battre `.header-brand.header-brand--game span
{ font-size: inherit }` (0,2,1) qui, sinon, force le texte du badge à la
taille pleine du nom de table. Ici : texte = 0.45em du nom de table. */
.header-brand--game .g-brand-click .g-status-badge { font-size: 0.45em; }
.g-status-admin {
color: var(--sel, var(--gold));
background: rgba(var(--sel-rgb, var(--gold-rgb)), 0.12);
border: 1px solid rgba(var(--sel-rgb, var(--gold-rgb)), 0.35);
}
.g-status-public {
color: rgb(var(--blue-rgb));
background: rgba(var(--blue-rgb), 0.12);
border: 1px solid rgba(var(--blue-rgb), 0.35);
}
.g-status-private {
color: var(--text);
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
}
/* Petits écrans : on resserre pour ne pas mordre sur les boutons du header. */
@media (max-width: 599.98px) {
.header-brand--game { max-width: 82vw; }
/* Emoji seul (le libelle deborde sur petit ecran). */
.header-brand--game .gsb-label { display: none; }
.g-status-badge { padding: 1px 5px; }
.header-brand--game .g-brand-click { gap: var(--sp-1); }
}
/* ── Statut d'attente centre dans le header du lobby ──
Affiche « En attente de joueurs » + points animes tant que la partie
creee/rejointe n'a pas demarre. Centre en absolu (independant des
boutons), non cliquable (laisse passer les clics). Palette QML (or). */
.lobby-wait-status {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: 7px;
max-width: min(70vw, 460px);
font-family: var(--ff-display);
font-size: clamp(0.72rem, 1.8vw, 0.95rem);
letter-spacing: 0.05em;
color: var(--gold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
z-index: 1;
}
.lws-hourglass {
font-size: 0.95em;
display: inline-block;
animation: lwsHourglass 2.6s ease-in-out infinite;
}
@keyframes lwsHourglass {
0%, 78%, 100% { transform: rotate(0deg); }
90% { transform: rotate(180deg); }
}
.wait-dots { display: inline-flex; }
.wait-dots span {
opacity: 0.25;
animation: waitDot 1.4s ease-in-out infinite;
}
.wait-dots span:nth-child(2) { animation-delay: 0.2s; }
.wait-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes waitDot {
0%, 100% { opacity: 0.25; }
30% { opacity: 1; }
}
@media (max-width: 599.98px) {
.lobby-wait-status { max-width: 62vw; font-size: var(--fs-xs); gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
.lws-hourglass { animation: none; }
.wait-dots span { animation: none; opacity: 0.85; }
}
/* ── 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: var(--sp-6);
}
.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: var(--sp-5);
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: var(--fs-md);
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: var(--fs-xs);
color: var(--gold-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
.gim-badge {
background: rgba(var(--gold-rgb), 0.12);
border: 1px solid var(--gold-dim);
border-radius: var(--r-xs);
padding: 1px 6px;
color: var(--gold);
letter-spacing: 0.1em;
font-size: var(--fs-2xs);
}
.gim-section {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
/* 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: var(--fs-2xs);
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: var(--sp-5);
padding: 3px 0;
font-size: var(--fs-sm);
}
.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: var(--sp-5);
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: var(--fs-md);
padding: 2px 6px;
line-height: 1;
}
.pim-close:hover { color: var(--gold); }
.pim-avatar {
width: 96px;
height: 96px;
border-radius: var(--r-lg);
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: var(--r-bar);
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: var(--fs-lg);
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: var(--sp-2);
font-size: var(--fs-sm);
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: var(--r-xs); }
/* ── 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: var(--sp-4);
}
.pim-role {
font-size: var(--fs-base);
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: var(--sp-2);
padding: 10px 12px;
background: var(--field-bg);
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.pim-ig-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-5);
font-size: var(--fs-base);
}
.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: var(--sp-2);
margin-top: 2px;
}
.pim-status {
font-size: var(--fs-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--gold-dim);
border-radius: var(--r-pill);
padding: 2px 9px;
}
.pim-pos-wrap { display: inline-flex; gap: var(--sp-1); }
.pim-pos {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 5px;
font-size: var(--fs-2xs);
font-weight: 700;
font-family: var(--ff-mono);
border-radius: var(--r-pill);
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: var(--fs-sm);
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: var(--sp-6);
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: var(--r-sm);
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: var(--fs-2xs); 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: var(--sp-1);
padding: var(--sp-4);
/* 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: var(--r-sm);
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: var(--r-sm);
font-size: var(--fs-xl);
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: var(--fs-xs) !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.5em; line-height: 1; }
.tls-row { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.row2 { display: flex; gap: var(--sp-5); }
.row2 .f:first-child { flex: 1; }
.row2 .f-sm { width: 110px; }
.row2 .f { min-width: 0; } /* items flex compressibles (fix debordement Port en portrait iOS) */
.row2 .f input { width: 100%; } /* borne la largeur de l'input a son conteneur */
/* 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. */
/* Contrôle segmenté du mode de connexion (remplace le