/* ═══ REMI PE TABLĂ — COPIE 1:1 a Jocuri/remi/remi-pro.css (29-09-2026) ═══
Designul Remi Etalat, copiat ca Remi pe Tablă să arate din aceeaşi aplicaţie, FĂRĂ să depindă
de fişierele Remi. Nu se editează aici: adaptările Tablei stau în remi-tabla.css. ═══ */
/* ================================================================================================
REMI ETALAT - Premium Rummy Game Styles
Romanian Rummy with Tiles - Piese Edition
Design System:
- Bootstrap 5.3.3 Grid System (responsive foundation)
- Material Design 3 Navigation Rail
- Glassmorphism & Neumorphism
- Purple Accent Color Palette (matching rummy tiles)
- Advanced Animations
- Full Responsive (Bootstrap breakpoints: xs, sm, md, lg, xl, xxl)
MOBILE FIRST APPROACH:
- Base CSS values target smallest screens (mobile)
- Progressive enhancement via min-width media queries
- Touch targets: 44px minimum for all interactive elements
================================================================================================ */
/* ================================================================================================
1. CSS VARIABLES & DESIGN TOKENS
================================================================================================ */
:root {
/* Primary Colors - Remi Default (Dim — warm slate gray + soft blue) */
--remi-bg: #1c2333;
--remi-surface: #242d3f;
--remi-surface-2: #2e384d;
--remi-surface-3: #39445c;
--remi-accent: #5b8def;
--remi-accent-light: #7da5f2;
--remi-accent-dark: #4a7de0;
--remi-accent-glow: rgba(91, 141, 239, 0.3);
--remi-accent-rgb: 91, 141, 239;
--remi-gold: #ffd700;
--remi-gold-rgb: 255, 215, 0;
--remi-primary-rgb: 36, 45, 63;
/* Text Colors */
--remi-text: #d5dbe8;
--remi-text-dim: rgba(213, 219, 232, 0.6);
--remi-text-muted: rgba(213, 219, 232, 0.4);
/* Border & Glass */
--remi-border: rgba(91, 141, 239, 0.2);
--remi-border-strong: rgba(91, 141, 239, 0.35);
--glass-bg: rgba(255, 255, 255, 0.06);
--glass-bg-strong: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.12);
--glass-blur: 20px;
/* Semantic Colors */
--remi-success: #4ade80;
--remi-success-rgb: 74, 222, 128;
--remi-danger: #f87171;
--remi-danger-rgb: 248, 113, 113;
--remi-warning: #fbbf24;
--remi-warning-rgb: 251, 191, 36;
--remi-info: #3b82f6;
--remi-info-rgb: 59, 130, 246;
/* Radii */
--remi-radius: 12px;
--remi-radius-sm: 8px;
--remi-radius-xs: 6px;
--remi-radius-lg: 16px;
--remi-radius-xl: 20px;
--remi-radius-full: 9999px;
--remi-radius-tile: 6px;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Poppins', var(--font-sans);
/* Cifrele de pe piese — font numeric condensed, elegant */
--font-tile: 'Oswald', 'Bebas Neue', 'Arial Narrow', var(--font-display);
/* Tiles */
--tile-width: 44px;
--tile-height: 60px;
--tile-width-sm: 36px;
--tile-height-sm: 50px;
--tile-font: 22px;
--tile-font-sm: 18px;
/* Glow System */
--glow-color: var(--remi-accent-rgb);
--glow-xs: 0 0 6px rgba(var(--glow-color), 0.15);
--glow-sm: 0 0 10px rgba(var(--glow-color), 0.2), 0 0 20px rgba(var(--glow-color), 0.1);
--glow-md: 0 0 15px rgba(var(--glow-color), 0.3), 0 0 30px rgba(var(--glow-color), 0.15);
--glow-lg: 0 0 20px rgba(var(--glow-color), 0.4), 0 0 40px rgba(var(--glow-color), 0.2);
--glow-text: 0 0 8px rgba(var(--glow-color), 0.6), 0 0 16px rgba(var(--glow-color), 0.3);
--glow-border: rgba(var(--glow-color), 0.25);
--glow-border-hover: rgba(var(--glow-color), 0.4);
/* Transition & Z-index (matching Table) */
--transition-base: 0.3s ease;
--z-fixed: 200;
/* Viewport fit — dimensiuni header + footer (se override pe mobil) */
--top-bar-h: 44px;
--nav-rail-h: 93px;
/* Background Mesh */
--bg-mesh-1: rgba(91, 141, 239, 0.08);
--bg-mesh-2: rgba(125, 165, 242, 0.05);
--bg-mesh-3: rgba(74, 125, 224, 0.06);
/* Safe Area Inset */
--sat: env(safe-area-inset-top, 0px);
--sab: env(safe-area-inset-bottom, 0px);
--sal: env(safe-area-inset-left, 0px);
--sar: env(safe-area-inset-right, 0px);
/* Table-compat vars — map --color-* to --remi-* so Table-inherited UI works */
--color-primary: var(--remi-surface);
--color-primary-rgb: var(--remi-primary-rgb);
--color-primary-dark: var(--remi-surface-3);
--color-accent: var(--remi-accent);
--color-accent-rgb: var(--remi-accent-rgb);
--color-accent-dark: var(--remi-accent-dark);
--color-bg-primary: var(--remi-bg);
--color-text-primary: var(--remi-text);
--color-text-secondary: var(--remi-text-dim);
--color-text-tertiary: var(--remi-text-muted);
--color-text-disabled: var(--remi-text-muted);
--color-success: var(--remi-success);
--color-success-rgb: var(--remi-success-rgb);
--color-error: var(--remi-danger);
--color-error-rgb: var(--remi-danger-rgb);
--color-warning: var(--remi-warning);
--color-warning-rgb: var(--remi-warning-rgb);
--color-info: var(--remi-info);
--color-info-rgb: var(--remi-info-rgb);
}
/* ================================================================================================
1b. THEME DEFINITIONS
================================================================================================ */
/* Default Theme (Dim — warm slate gray + soft blue) */
[data-theme="default"] {
--remi-bg: #1c2333;
--remi-surface: #242d3f;
--remi-surface-2: #2e384d;
--remi-surface-3: #39445c;
--remi-accent: #5b8def;
--remi-accent-light: #7da5f2;
--remi-accent-dark: #4a7de0;
--remi-accent-glow: rgba(91, 141, 239, 0.3);
--remi-accent-rgb: 91, 141, 239;
--remi-primary-rgb: 36, 45, 63;
--remi-text: #d5dbe8;
--remi-text-dim: rgba(213, 219, 232, 0.6);
--remi-text-muted: rgba(213, 219, 232, 0.4);
--remi-border: rgba(91, 141, 239, 0.2);
--remi-border-strong: rgba(91, 141, 239, 0.35);
--bg-mesh-1: rgba(91, 141, 239, 0.08);
--bg-mesh-2: rgba(125, 165, 242, 0.05);
--bg-mesh-3: rgba(74, 125, 224, 0.06);
}
/* Midnight Blue Theme */
[data-theme="midnight"] {
--remi-bg: #0a0e1a;
--remi-surface: #141a2e;
--remi-surface-2: #1e2640;
--remi-surface-3: #283050;
--remi-accent: #e0e7ff;
--remi-accent-light: #f0f4ff;
--remi-accent-dark: #9ca3af;
--remi-accent-glow: rgba(224, 231, 255, 0.2);
--remi-accent-rgb: 224, 231, 255;
--remi-text: #e8eaf0;
--remi-text-dim: rgba(232, 234, 240, 0.6);
--remi-text-muted: rgba(232, 234, 240, 0.4);
--remi-border: rgba(224, 231, 255, 0.15);
--remi-border-strong: rgba(224, 231, 255, 0.25);
--bg-mesh-1: rgba(30, 58, 95, 0.3);
--bg-mesh-2: rgba(224, 231, 255, 0.04);
--bg-mesh-3: rgba(30, 58, 95, 0.2);
}
/* Ruby Passion Theme */
[data-theme="ruby"] {
--remi-bg: #0e0a0a;
--remi-surface: #1a1414;
--remi-surface-2: #261e1e;
--remi-surface-3: #322828;
--remi-accent: #ffd700;
--remi-accent-light: #ffe44d;
--remi-accent-dark: #b8960a;
--remi-accent-glow: rgba(255, 215, 0, 0.2);
--remi-accent-rgb: 255, 215, 0;
--remi-text: #f0e8e8;
--remi-text-dim: rgba(240, 232, 232, 0.6);
--remi-text-muted: rgba(240, 232, 232, 0.4);
--remi-border: rgba(255, 215, 0, 0.15);
--remi-border-strong: rgba(255, 215, 0, 0.25);
--bg-mesh-1: rgba(74, 30, 30, 0.3);
--bg-mesh-2: rgba(255, 215, 0, 0.04);
--bg-mesh-3: rgba(74, 30, 30, 0.2);
}
/* Royal Purple Theme */
[data-theme="purple"] {
--remi-bg: #0e0a1a;
--remi-surface: #1a1427;
--remi-surface-2: #261e32;
--remi-surface-3: #322842;
--remi-accent: #d4af37;
--remi-accent-light: #f4cf57;
--remi-accent-dark: #a48f27;
--remi-accent-glow: rgba(212, 175, 55, 0.2);
--remi-accent-rgb: 212, 175, 55;
--remi-text: #e8e0f0;
--remi-text-dim: rgba(232, 224, 240, 0.6);
--remi-text-muted: rgba(232, 224, 240, 0.4);
--remi-border: rgba(212, 175, 55, 0.15);
--remi-border-strong: rgba(212, 175, 55, 0.25);
--bg-mesh-1: rgba(61, 42, 95, 0.3);
--bg-mesh-2: rgba(212, 175, 55, 0.04);
--bg-mesh-3: rgba(61, 42, 95, 0.2);
}
/* Ocean Breeze Theme */
[data-theme="ocean"] {
--remi-bg: #0a1414;
--remi-surface: #141e1e;
--remi-surface-2: #1e2828;
--remi-surface-3: #283232;
--remi-accent: #ff6b6b;
--remi-accent-light: #ff8b8b;
--remi-accent-dark: #cc5555;
--remi-accent-glow: rgba(255, 107, 107, 0.2);
--remi-accent-rgb: 255, 107, 107;
--remi-text: #e8f0f0;
--remi-text-dim: rgba(232, 240, 240, 0.6);
--remi-text-muted: rgba(232, 240, 240, 0.4);
--remi-border: rgba(255, 107, 107, 0.15);
--remi-border-strong: rgba(255, 107, 107, 0.25);
--bg-mesh-1: rgba(30, 77, 77, 0.3);
--bg-mesh-2: rgba(255, 107, 107, 0.04);
--bg-mesh-3: rgba(30, 77, 77, 0.2);
}
/* === POKER THEMES === */
/* Texas Gold Theme */
[data-theme="texas"] {
--remi-bg: #0d0a00;
--remi-surface: #1a1400;
--remi-surface-2: #2a2000;
--remi-surface-3: #3a3000;
--remi-accent: #ffb700;
--remi-accent-light: #ffd700;
--remi-accent-dark: #cc9200;
--remi-accent-glow: rgba(255, 183, 0, 0.2);
--remi-accent-rgb: 255, 183, 0;
--remi-text: #f0e8d0;
--remi-text-dim: rgba(240, 232, 208, 0.6);
--remi-text-muted: rgba(240, 232, 208, 0.4);
--remi-border: rgba(255, 183, 0, 0.15);
--remi-border-strong: rgba(255, 183, 0, 0.25);
--bg-mesh-1: rgba(255, 183, 0, 0.08);
--bg-mesh-2: rgba(42, 32, 0, 0.3);
--bg-mesh-3: rgba(255, 183, 0, 0.05);
}
/* Vegas Neon Theme */
[data-theme="vegas"] {
--remi-bg: #0a0014;
--remi-surface: #1a0e2a;
--remi-surface-2: #2a1a3a;
--remi-surface-3: #3a2a4a;
--remi-accent: #ff00ff;
--remi-accent-light: #ff55ff;
--remi-accent-dark: #cc00cc;
--remi-accent-glow: rgba(255, 0, 255, 0.2);
--remi-accent-rgb: 255, 0, 255;
--remi-text: #f0e0f0;
--remi-text-dim: rgba(240, 224, 240, 0.6);
--remi-text-muted: rgba(240, 224, 240, 0.4);
--remi-border: rgba(255, 0, 255, 0.15);
--remi-border-strong: rgba(255, 0, 255, 0.25);
--bg-mesh-1: rgba(74, 14, 74, 0.3);
--bg-mesh-2: rgba(255, 0, 255, 0.04);
--bg-mesh-3: rgba(74, 14, 74, 0.2);
}
/* Monte Carlo Theme */
[data-theme="monaco"] {
--remi-bg: #0a0a0a;
--remi-surface: #1a1a1a;
--remi-surface-2: #2a2a2a;
--remi-surface-3: #333333;
--remi-accent: #e8e8e8;
--remi-accent-light: #ffffff;
--remi-accent-dark: #b0b0b0;
--remi-accent-glow: rgba(232, 232, 232, 0.15);
--remi-accent-rgb: 232, 232, 232;
--remi-text: #f0f0f0;
--remi-text-dim: rgba(240, 240, 240, 0.6);
--remi-text-muted: rgba(240, 240, 240, 0.4);
--remi-border: rgba(232, 232, 232, 0.12);
--remi-border-strong: rgba(232, 232, 232, 0.22);
--bg-mesh-1: rgba(42, 42, 42, 0.3);
--bg-mesh-2: rgba(232, 232, 232, 0.03);
--bg-mesh-3: rgba(42, 42, 42, 0.2);
}
/* Macau Fortune Theme */
[data-theme="macau"] {
--remi-bg: #0e0000;
--remi-surface: #1a0808;
--remi-surface-2: #2a1010;
--remi-surface-3: #3a1818;
--remi-accent: #ffd700;
--remi-accent-light: #ffe44d;
--remi-accent-dark: #b8960a;
--remi-accent-glow: rgba(255, 215, 0, 0.2);
--remi-accent-rgb: 255, 215, 0;
--remi-text: #f0e0e0;
--remi-text-dim: rgba(240, 224, 224, 0.6);
--remi-text-muted: rgba(240, 224, 224, 0.4);
--remi-border: rgba(255, 215, 0, 0.15);
--remi-border-strong: rgba(255, 215, 0, 0.25);
--bg-mesh-1: rgba(139, 0, 0, 0.2);
--bg-mesh-2: rgba(255, 215, 0, 0.04);
--bg-mesh-3: rgba(139, 0, 0, 0.15);
}
/* Atlantic Sunset Theme */
[data-theme="atlantic"] {
--remi-bg: #0a1014;
--remi-surface: #141e28;
--remi-surface-2: #1e2e3a;
--remi-surface-3: #283a4a;
--remi-accent: #ff8c42;
--remi-accent-light: #ffaa66;
--remi-accent-dark: #cc6e32;
--remi-accent-glow: rgba(255, 140, 66, 0.2);
--remi-accent-rgb: 255, 140, 66;
--remi-text: #e8f0f0;
--remi-text-dim: rgba(232, 240, 240, 0.6);
--remi-text-muted: rgba(232, 240, 240, 0.4);
--remi-border: rgba(255, 140, 66, 0.15);
--remi-border-strong: rgba(255, 140, 66, 0.25);
--bg-mesh-1: rgba(30, 74, 106, 0.25);
--bg-mesh-2: rgba(255, 140, 66, 0.04);
--bg-mesh-3: rgba(30, 74, 106, 0.15);
}
/* === DARK THEMES === */
/* Black Diamond Theme */
[data-theme="diamond"] {
--remi-bg: #050508;
--remi-surface: #0a0a12;
--remi-surface-2: #12121e;
--remi-surface-3: #1a1a28;
--remi-accent: #00d4ff;
--remi-accent-light: #44e0ff;
--remi-accent-dark: #00a8cc;
--remi-accent-glow: rgba(0, 212, 255, 0.2);
--remi-accent-rgb: 0, 212, 255;
--remi-text: #e0f0ff;
--remi-text-dim: rgba(224, 240, 255, 0.6);
--remi-text-muted: rgba(224, 240, 255, 0.4);
--remi-border: rgba(0, 212, 255, 0.15);
--remi-border-strong: rgba(0, 212, 255, 0.25);
--bg-mesh-1: rgba(0, 212, 255, 0.04);
--bg-mesh-2: rgba(0, 100, 130, 0.06);
--bg-mesh-3: rgba(0, 212, 255, 0.03);
}
/* Onyx Gold Theme */
[data-theme="onyx"] {
--remi-bg: #080804;
--remi-surface: #12120a;
--remi-surface-2: #1c1c12;
--remi-surface-3: #26261a;
--remi-accent: #c9a961;
--remi-accent-light: #e0c880;
--remi-accent-dark: #a08840;
--remi-accent-glow: rgba(201, 169, 97, 0.2);
--remi-accent-rgb: 201, 169, 97;
--remi-text: #f0ead0;
--remi-text-dim: rgba(240, 234, 208, 0.6);
--remi-text-muted: rgba(240, 234, 208, 0.4);
--remi-border: rgba(201, 169, 97, 0.15);
--remi-border-strong: rgba(201, 169, 97, 0.25);
--bg-mesh-1: rgba(201, 169, 97, 0.05);
--bg-mesh-2: rgba(100, 85, 50, 0.06);
--bg-mesh-3: rgba(201, 169, 97, 0.03);
}
/* Crimson Shadow Theme */
[data-theme="crimson"] {
--remi-bg: #080002;
--remi-surface: #120408;
--remi-surface-2: #1c0a10;
--remi-surface-3: #261018;
--remi-accent: #dc143c;
--remi-accent-light: #ef4444;
--remi-accent-dark: #b01030;
--remi-accent-glow: rgba(220, 20, 60, 0.2);
--remi-accent-rgb: 220, 20, 60;
--remi-text: #f0e0e0;
--remi-text-dim: rgba(240, 224, 224, 0.6);
--remi-text-muted: rgba(240, 224, 224, 0.4);
--remi-border: rgba(220, 20, 60, 0.15);
--remi-border-strong: rgba(220, 20, 60, 0.25);
--bg-mesh-1: rgba(220, 20, 60, 0.05);
--bg-mesh-2: rgba(100, 10, 30, 0.08);
--bg-mesh-3: rgba(220, 20, 60, 0.03);
}
/* Emerald Night Theme */
[data-theme="emerald"] {
--remi-bg: #001008;
--remi-surface: #041a0e;
--remi-surface-2: #0a2616;
--remi-surface-3: #10321e;
--remi-accent: #50c878;
--remi-accent-light: #70e898;
--remi-accent-dark: #38a058;
--remi-accent-glow: rgba(80, 200, 120, 0.2);
--remi-accent-rgb: 80, 200, 120;
--remi-text: #e0f0e8;
--remi-text-dim: rgba(224, 240, 232, 0.6);
--remi-text-muted: rgba(224, 240, 232, 0.4);
--remi-border: rgba(80, 200, 120, 0.15);
--remi-border-strong: rgba(80, 200, 120, 0.25);
--bg-mesh-1: rgba(80, 200, 120, 0.04);
--bg-mesh-2: rgba(0, 80, 40, 0.08);
--bg-mesh-3: rgba(80, 200, 120, 0.03);
}
/* Platinum Elite Theme */
[data-theme="platinum"] {
--remi-bg: #060606;
--remi-surface: #101010;
--remi-surface-2: #1a1a1a;
--remi-surface-3: #242424;
--remi-accent: #e5e4e2;
--remi-accent-light: #ffffff;
--remi-accent-dark: #b0b0ae;
--remi-accent-glow: rgba(229, 228, 226, 0.15);
--remi-accent-rgb: 229, 228, 226;
--remi-text: #f0f0f0;
--remi-text-dim: rgba(240, 240, 240, 0.6);
--remi-text-muted: rgba(240, 240, 240, 0.4);
--remi-border: rgba(229, 228, 226, 0.12);
--remi-border-strong: rgba(229, 228, 226, 0.22);
--bg-mesh-1: rgba(229, 228, 226, 0.03);
--bg-mesh-2: rgba(120, 120, 118, 0.05);
--bg-mesh-3: rgba(229, 228, 226, 0.02);
}
/* === SPECIAL THEMES === */
/* Purple Haze Theme */
[data-theme="haze"] {
--remi-bg: #0a0e1a;
--remi-surface: #141828;
--remi-surface-2: #1e2238;
--remi-surface-3: #282c48;
--remi-accent: #667eea;
--remi-accent-light: #8898f0;
--remi-accent-dark: #4a5ec8;
--remi-accent-glow: rgba(102, 126, 234, 0.2);
--remi-accent-rgb: 102, 126, 234;
--remi-text: #e0e4f0;
--remi-text-dim: rgba(224, 228, 240, 0.6);
--remi-text-muted: rgba(224, 228, 240, 0.4);
--remi-border: rgba(102, 126, 234, 0.15);
--remi-border-strong: rgba(102, 126, 234, 0.25);
--bg-mesh-1: rgba(102, 126, 234, 0.06);
--bg-mesh-2: rgba(60, 80, 150, 0.08);
--bg-mesh-3: rgba(102, 126, 234, 0.04);
}
/* Emerald Forest Theme */
[data-theme="forest"] {
--remi-bg: #0a1410;
--remi-surface: #121e18;
--remi-surface-2: #1a2820;
--remi-surface-3: #223228;
--remi-accent: #10b981;
--remi-accent-light: #34d399;
--remi-accent-dark: #0a9068;
--remi-accent-glow: rgba(16, 185, 129, 0.2);
--remi-accent-rgb: 16, 185, 129;
--remi-text: #e0f0e8;
--remi-text-dim: rgba(224, 240, 232, 0.6);
--remi-text-muted: rgba(224, 240, 232, 0.4);
--remi-border: rgba(16, 185, 129, 0.15);
--remi-border-strong: rgba(16, 185, 129, 0.25);
--bg-mesh-1: rgba(16, 185, 129, 0.05);
--bg-mesh-2: rgba(10, 100, 70, 0.08);
--bg-mesh-3: rgba(16, 185, 129, 0.03);
}
/* === LIGHT THEME — „porţelan cu aur" (2026-09-20) ===
Era violet (#7c3aed) pe alb, şi nu semăna cu nimic din Remi. Acum e aurul
jocului, pe suprafeţe de porţelan. Trei lucruri de ştiut aici:
1. `--remi-accent` e auriul ÎNCHIS, nu cel viu. Motivul: blocul de la
linia ~581 re-exportă `--color-accent`, `--primary-color` ş.a. DIN
`--remi-accent`, iar zeci de reguli îl folosesc drept `color:`. Auriul
viu (#d4a544) dă 2,99:1 pe alb, adică ilizibil. Închis dă 4,91:1.
2. Auriul VIU rămâne disponibil ca `--remi-accent-bright`, pentru
umpluturi, rame şi lumini — acolo unde nu e text.
3. Suprafeţele urcă în loc să coboare: pagina e gri deschis, iar cutiile
sunt ALBE, ca să se desprindă. Invers (pagină albă + cutii albe) e
exact ce făcea varianta veche să pară spălăcită. */
[data-theme="light"] {
/* ATENŢIE — aici NU se pot folosi `var(--text-primary)` & co.
Blocul de la ~linia 600 face exportul INVERS: `--text-primary:
var(--remi-text)`. Dacă şi aici s-ar trage din tokenii sitului,
cele două se cer una pe alta, CSS declară ambele invalide şi TOT
textul cade pe negru. S-a întâmplat exact aşa (20-09-2026).
Valorile de mai jos sunt aceleaşi cu cele din `themes.css`; dacă se
schimbă paleta deschisă, se schimbă în amândouă locurile. */
--remi-bg: #ebe9e5;
--remi-surface: #ffffff;
--remi-surface-2: #f7f6f3;
--remi-surface-3: #efedea;
--remi-accent: #8a6410;
--remi-accent-light: #a87c1e;
--remi-accent-dark: #6d5013;
--remi-accent-bright: #d4a544;
--remi-accent-bright-rgb: 212, 165, 68;
--remi-accent-glow: rgba(212, 165, 68, 0.22);
--remi-accent-rgb: 138, 100, 16;
--remi-primary-rgb: 235, 233, 229;
--remi-text: #26231e;
--remi-text-dim: #6b645b;
--remi-text-muted: #7d766c;
--remi-border: rgba(28, 24, 18, 0.14);
--remi-border-strong: rgba(28, 24, 18, 0.20);
--remi-gold: #d4a544;
--glass-bg: #ffffff;
--glass-bg-strong: #f7f6f3;
--glass-border: rgba(28, 24, 18, 0.10);
--bg-mesh-1: rgba(212, 165, 68, 0.04);
--bg-mesh-2: rgba(212, 165, 68, 0.03);
--bg-mesh-3: rgba(212, 165, 68, 0.02);
}
/* Remi Wood & Gold — tema specifica Remi (lemn vintage + auriu).
Al doilea selector ţine MASA pe tema remi şi când pagina e pe tema
deschisă („în masă lasă tema remi"). Aşa cei 19 tokeni de mai jos rămân
scrişi o singură dată — altfel ar fi trebuit copiaţi într-un bloc paralel.
Perechea lui e în `assets/css/themes.css`, la `:root[data-theme="remi"]`. */
[data-theme="remi"],
html[data-theme="light"] .game-play-view {
--remi-bg: #2a1b0e;
--remi-surface: #3a2310;
--remi-surface-2: #4a2e16;
--remi-surface-3: #5a3a1c;
--remi-accent: #d4a544;
--remi-accent-light: #f0c66a;
--remi-accent-dark: #a8822a;
--remi-accent-glow: rgba(212, 165, 68, 0.35);
--remi-accent-rgb: 212, 165, 68;
--remi-primary-rgb: 58, 35, 16;
--remi-text: #f4ecd8;
--remi-text-dim: rgba(244, 236, 216, 0.6);
--remi-text-muted: rgba(244, 236, 216, 0.4);
--remi-border: rgba(212, 165, 68, 0.25);
--remi-border-strong: rgba(212, 165, 68, 0.4);
--remi-gold: #d4a544;
--bg-mesh-1: rgba(212, 165, 68, 0.1);
--bg-mesh-2: rgba(139, 69, 19, 0.12);
--bg-mesh-3: rgba(212, 165, 68, 0.06);
}
/* ================================================================================================
1c. CROSS-GAME VAR OVERRIDES — force themes.css vars to resolve to Remi theme colors
themes.css (shared) defines --color-accent / --primary-color / --glow-* per theme using
Table-specific values (e.g., default uses #d4a040 gold, light uses #667eea indigo).
These aliases beat themes.css :root[data-theme=...] blocks by same-specificity + later source.
================================================================================================ */
:root[data-theme="default"],
:root[data-theme="midnight"],
:root[data-theme="ruby"],
:root[data-theme="purple"],
:root[data-theme="ocean"],
:root[data-theme="texas"],
:root[data-theme="vegas"],
:root[data-theme="monaco"],
:root[data-theme="macau"],
:root[data-theme="atlantic"],
:root[data-theme="diamond"],
:root[data-theme="onyx"],
:root[data-theme="crimson"],
:root[data-theme="emerald"],
:root[data-theme="platinum"],
:root[data-theme="haze"],
:root[data-theme="forest"],
/* `light` a fost SCOS din lista asta (20-09-2026). Blocul exportă invers —
`--text-primary: var(--remi-text)` — iar în tema deschisă `--remi-text`
trage acum din `var(--text-primary)`. Cele două se cer una pe alta, CSS
declară ambele invalide, şi tot textul cade pe negru. Pentru `light`
sursa e `themes.css`, deci nu mai e nimic de exportat înapoi. */
:root[data-theme="remi"] {
--color-accent: var(--remi-accent);
--color-accent-rgb: var(--remi-accent-rgb);
--color-accent-dark: var(--remi-accent-dark);
--color-primary: var(--remi-surface);
--color-primary-rgb: var(--remi-primary-rgb);
--color-text-primary: var(--remi-text);
--color-text-secondary: var(--remi-text-dim);
--color-bg-secondary: var(--remi-surface); /* fundalul ferestrei de profil (modal-shared.css), altfel albastrul site-ului */
--primary-color: var(--remi-accent);
--text-primary: var(--remi-text);
--text-secondary: var(--remi-text-dim);
--glow-color: var(--remi-accent-rgb);
--glow-border: rgba(var(--remi-accent-rgb), 0.25);
--glow-border-hover: rgba(var(--remi-accent-rgb), 0.4);
}
/* Fereastra de PROFIL pe Întunecat, în culorile mesei (18-10-2026, userul: „când deschizi profil este albastru").
modal-shared.css scrie pe #profileModal fundalul interior, chenarele şi textul şters FIX, în gri-albastru
(#1e293b / #334155 / #64748b), fără să le ia din temă. Pe Luminos le pune tot modal-shared.css — neatinse. */
:root[data-theme="remi"] #profileModal {
--bg-tertiary: var(--remi-surface-2);
--border-color: var(--remi-border);
--text-muted: var(--remi-text-muted);
}
/* Kill hardcoded #667eea (Tailwind indigo) bleeding from themes.css into nav-bar-btn
hover/active states on light and other themes where themes.css uses raw RGB. */
html .nav-bar-btn:hover {
border-color: rgba(var(--remi-accent-rgb), 0.3);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.15),
0 0 15px rgba(var(--remi-accent-rgb), 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html .nav-bar-btn.active {
background: linear-gradient(135deg,
rgba(var(--remi-accent-rgb), 0.18) 0%,
rgba(var(--remi-accent-rgb), 0.08) 100%);
border-color: rgba(var(--remi-accent-rgb), 0.4);
}
html .nav-bar-fab::before {
background: radial-gradient(circle, rgba(var(--remi-accent-rgb), 0.3) 0%, transparent 70%);
}
/* ================================================================================================
2. RESET & BASE STYLES
================================================================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
height: 100%;
height: 100vh;
}
body {
font-family: var(--font-sans);
font-weight: 400;
line-height: 1.5;
color: var(--remi-text);
background:
radial-gradient(ellipse at 20% 50%, var(--bg-mesh-1) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, var(--bg-mesh-3) 0%, transparent 40%),
radial-gradient(ellipse at 50% 80%, var(--bg-mesh-2) 0%, transparent 45%),
radial-gradient(ellipse at 70% 60%, rgba(var(--remi-accent-rgb), 0.02) 0%, transparent 35%),
linear-gradient(135deg, var(--remi-bg) 0%, var(--remi-bg) 100%);
overflow: hidden;
height: 100%;
height: 100vh;
min-height: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
overscroll-behavior: none;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-overflow-scrolling: auto;
scroll-behavior: auto;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
/* Material Symbols Configuration */
.material-symbols-rounded {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
font-size: 24px;
user-select: none;
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
vertical-align: middle;
overflow: visible;
}
/* ================================================================================================
3. ANIMATIONS & KEYFRAMES
================================================================================================ */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slideInUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes shimmerGold {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes glowPulse {
0%, 100% { box-shadow: var(--glow-sm); }
50% { box-shadow: var(--glow-lg); }
}
@keyframes glowTextPulse {
0%, 100% {
text-shadow: 0 0 6px rgba(var(--glow-color), 0.4), 0 0 12px rgba(var(--glow-color), 0.2);
}
50% {
text-shadow: 0 0 10px rgba(var(--glow-color), 0.7), 0 0 20px rgba(var(--glow-color), 0.35), 0 0 35px rgba(var(--glow-color), 0.15);
}
}
@keyframes tilePulse {
0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
50% { box-shadow: 0 2px 12px rgba(74, 222, 128, 0.4); }
}
@keyframes tiltPhone {
0%, 100% { transform: rotate(0); }
50% { transform: rotate(90deg); }
}
@keyframes doublePulse {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.05); }
}
@keyframes toastIn {
from { transform: translateX(100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100px); opacity: 0; }
}
@keyframes tabFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes online-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
@keyframes card-entrance {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes badge-pulse {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.6; }
}
@keyframes stat-pop {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
@keyframes avatar-ring {
0%, 100% { box-shadow: 0 0 0 2px rgba(var(--remi-accent-rgb), 0.3); }
50% { box-shadow: 0 0 8px 2px rgba(var(--remi-accent-rgb), 0.5); }
}
@keyframes btn-shimmer {
0%, 70%, 100% { left: -100%; }
85% { left: 150%; }
}
@keyframes waiting-glow {
0%, 100% { border-color: rgba(74, 222, 128, 0.15); }
50% { border-color: rgba(74, 222, 128, 0.4); }
}
@keyframes create-breathe {
0%, 100% { box-shadow: 0 2px 8px rgba(var(--remi-accent-rgb), 0.1); }
50% { box-shadow: 0 2px 16px rgba(var(--remi-accent-rgb), 0.25); }
}
@keyframes lobbyCardIn {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes play-shine {
0%, 60%, 100% { left: -120%; }
75% { left: 150%; }
}
@keyframes coin-flip {
0% { transform: scale(1) rotateY(0); }
30% { transform: scale(1.15) rotateY(180deg); }
60% { transform: scale(1.1) rotateY(360deg); }
100% { transform: scale(1) rotateY(360deg); }
}
@keyframes star-twinkle {
0%, 100% { opacity: 0.7; filter: brightness(1); }
50% { opacity: 1; filter: brightness(1.4); }
}
@keyframes particles-drift {
0% { transform: translateY(0) translateX(0); }
25% { transform: translateY(-8px) translateX(4px); }
50% { transform: translateY(-3px) translateX(-3px); }
75% { transform: translateY(-10px) translateX(2px); }
100% { transform: translateY(0) translateX(0); }
}
@keyframes timer-sweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes active-turn-glow {
0%, 100% {
box-shadow: 0 0 8px rgba(var(--remi-accent-rgb), 0.15);
}
50% {
box-shadow: 0 0 14px rgba(var(--remi-accent-rgb), 0.35),
0 0 28px rgba(var(--remi-accent-rgb), 0.12);
}
}
@keyframes seatBubble {
0% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.9); }
10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
85% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.95); }
}
/* ── Tile placement animations ── */
@keyframes tilePlaceOnTable {
0% { opacity: 0; transform: scale(0.5) translateY(20px); }
60% { opacity: 1; transform: scale(1.08) translateY(-2px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes tileSlideIn {
0% { opacity: 0; transform: translateX(-20px) scale(0.9); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes tileDealToHand {
0% { opacity: 0; transform: translateY(-30px) rotateX(60deg) scale(0.7); }
70% { opacity: 1; transform: translateY(2px) rotateX(-3deg) scale(1.03); }
100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
@keyframes tileDiscard {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.1) translateY(-10px); }
100% { opacity: 0; transform: scale(0.6) translateY(20px); }
}
@keyframes meldAppear {
0% { opacity: 0; transform: scale(0.85) translateY(8px); }
60% { opacity: 1; transform: scale(1.04) translateY(-1px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Animation classes for tiles */
.tile-animate-place {
animation: tilePlaceOnTable 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.tile-animate-deal {
animation: tileDealToHand 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.tile-animate-discard {
animation: tileDiscard 0.3s ease-out forwards;
}
.tile-animate-slide {
animation: tileSlideIn 0.25s ease-out forwards;
}
.meld-group-animate {
animation: meldAppear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* ═══ MELD PARABOLIC ARC — tile flies from hand to etalare zone ═══ */
.tile-meld-arc {
animation: tileMeldArc 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
z-index: 100;
pointer-events: none !important;
}
@keyframes tileMeldArc {
0% {
transform: translate(var(--arc-start-x, 0), var(--arc-start-y, 0)) scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform:
translate(
calc(var(--arc-start-x, 0) * 0.5),
calc(var(--arc-start-y, 0) * 0.5 - 40px)
)
scale(1.15) rotate(8deg);
opacity: 1;
}
85% {
transform: translate(0, 0) scale(1.15) rotate(-3deg);
opacity: 1;
}
100% {
transform: translate(0, 0) scale(1) rotate(0deg);
opacity: 1;
}
}
/* ═══ MELD LANDING FLASH — white burst on landing ═══ */
.meld-landing-flash {
position: absolute;
pointer-events: none;
width: var(--tile-width, 32px);
height: var(--tile-height, 44px);
border-radius: var(--remi-radius-tile, 4px);
background: radial-gradient(ellipse at center,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 235, 150, 0.6) 40%,
transparent 70%);
animation: meldLandingFlash 0.5s ease-out forwards;
z-index: 101;
}
@keyframes meldLandingFlash {
0% { opacity: 0; transform: scale(0.8); }
20% { opacity: 1; transform: scale(1.4); }
100% { opacity: 0; transform: scale(2.2); }
}
/* ═══ CONFETTI — mini celebration on first etalare ═══ */
.confetti-burst {
position: absolute;
pointer-events: none;
z-index: 102;
}
.confetti-piece {
position: absolute;
width: 6px;
height: 10px;
animation: confettiFall 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0;
}
.confetti-piece:nth-child(3n) { background: #ffd700; }
.confetti-piece:nth-child(3n+1) { background: #ef4444; }
.confetti-piece:nth-child(3n+2) { background: #3b82f6; }
@keyframes confettiFall {
0% {
opacity: 1;
transform:
translate(0, 0)
rotate(0deg)
scale(0);
}
30% { transform: translate(var(--cx, 50px), -60px) rotate(180deg) scale(1); }
100% {
opacity: 0;
transform:
translate(calc(var(--cx, 50px) * 1.5), 80px)
rotate(720deg)
scale(0.7);
}
}
@keyframes turnTimerPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes disconnectPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.05); }
}
@keyframes resultConfetti {
0% { opacity: 1; transform: translateY(0) rotate(0deg); }
100% { opacity: 0; transform: translateY(-100px) rotate(720deg); }
}
@keyframes panelLoadingBar {
0% { width: 0; }
50% { width: 70%; }
100% { width: 100%; }
}
/* ================================================================================================
4. APP CONTAINER
================================================================================================ */
.app-container {
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ================================================================================================
5. TOP BAR
================================================================================================ */
/* ═══ REMI TOP BAR — Casino felt premium with gold accents ═══ */
.top-bar {
height: 48px;
min-height: 48px;
padding: 0 14px;
background:
/* Subtle tile pattern using theme accent */
repeating-linear-gradient(45deg,
transparent 0, transparent 10px,
rgba(var(--remi-accent-rgb), 0.015) 10px, rgba(var(--remi-accent-rgb), 0.015) 11px),
repeating-linear-gradient(-45deg,
transparent 0, transparent 10px,
rgba(var(--remi-accent-rgb), 0.015) 10px, rgba(var(--remi-accent-rgb), 0.015) 11px),
/* Spotlight glow in center */
radial-gradient(ellipse 60% 100% at 50% 0%,
rgba(var(--remi-accent-rgb), 0.08) 0%,
transparent 70%),
/* Themed surface base */
linear-gradient(180deg,
rgba(var(--remi-primary-rgb), 0.96) 0%,
rgba(var(--remi-primary-rgb), 0.98) 50%,
var(--remi-bg) 100%);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg,
transparent 0%,
rgba(var(--remi-accent-rgb), 0.35) 20%,
rgba(var(--remi-accent-rgb), 0.55) 50%,
rgba(var(--remi-accent-rgb), 0.35) 80%,
transparent 100%) 1;
z-index: 100;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.45),
0 2px 0 rgba(var(--remi-accent-rgb), 0.08),
inset 0 1px 0 rgba(var(--remi-accent-rgb), 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.5);
position: relative;
transition: all 0.3s ease;
}
/* Gold pinstripe top line */
.top-bar::after {
content: '';
position: absolute;
top: 0;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(255, 235, 150, 0.6) 30%,
rgba(255, 215, 0, 0.9) 50%,
rgba(255, 235, 150, 0.6) 70%,
transparent);
opacity: 0.8;
pointer-events: none;
}
/* Shimmer sweep animation */
.top-bar::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 40%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 215, 0, 0.06) 40%,
rgba(255, 235, 150, 0.1) 50%,
rgba(255, 215, 0, 0.06) 60%,
transparent 100%);
transform: skewX(-20deg);
animation: shimmerAccent 9s ease-in-out infinite;
pointer-events: none;
}
@keyframes shimmerAccent {
0%, 30% { left: -60%; opacity: 0; }
40% { opacity: 1; }
60% { opacity: 1; }
70%, 100% { left: 160%; opacity: 0; }
}
.top-bar.hidden {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
.brand-section {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
/* Gold separator pipe before actions area */
.brand-section::after {
content: '';
position: absolute;
right: -10px;
top: 15%;
bottom: 15%;
width: 1px;
background: linear-gradient(180deg,
transparent,
rgba(255, 215, 0, 0.25) 30%,
rgba(255, 215, 0, 0.45) 50%,
rgba(255, 215, 0, 0.25) 70%,
transparent);
}
.brand-logo-img {
height: 30px;
width: auto;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
/* ═══ BRAND ICON — styled as a REAL Remi tile ═══ */
.brand-icon {
width: 30px;
height: 38px;
/* Cream/ivory tile background — matching actual remi tiles */
background:
linear-gradient(145deg,
#fffdf5 0%,
#f7efd9 50%,
#e9dbb8 100%);
border-radius: 5px;
border: 1.5px solid #b8860b;
color: #b91c1c; /* Red like a red suit tile */
font-family: var(--font-tile, 'Oswald', sans-serif);
font-size: 20px;
font-weight: 900;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
/* Outer depth shadow */
0 3px 8px rgba(0, 0, 0, 0.45),
0 1px 3px rgba(0, 0, 0, 0.3),
/* Inner highlights — tile depth effect */
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1.5px 1px rgba(184, 134, 11, 0.45),
/* Gold outer ring */
0 0 0 1px rgba(184, 134, 11, 0.35),
0 0 8px rgba(255, 215, 0, 0.12);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.7),
0 -0.5px 0 rgba(0, 0, 0, 0.2);
}
.brand-icon::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.brand-icon:hover::before {
left: 100%;
}
.brand-icon:hover {
transform: translateY(-2px) rotate(-4deg);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.55),
0 2px 4px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1.5px 1px rgba(184, 134, 11, 0.45),
0 0 0 1.5px rgba(255, 215, 0, 0.7),
0 0 18px rgba(255, 215, 0, 0.35);
}
/* Hide the casino icon — we use the "R" letter via ::after */
.brand-icon .material-symbols-rounded {
display: none;
}
/* Tile letter "R" — replaces material icon */
.brand-icon::after {
content: 'R';
font-family: var(--font-tile, 'Oswald', sans-serif);
font-size: 22px;
font-weight: 900;
color: #b91c1c;
line-height: 1;
position: relative;
z-index: 2;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.6),
0 0 2px rgba(0, 0, 0, 0.15);
}
/* Brand Text */
.brand-text {
line-height: 1.2;
position: relative;
}
.brand-text h1 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 900;
color: var(--color-accent);
letter-spacing: 0.5px;
text-shadow:
0 2px 12px rgba(var(--color-accent-rgb), 0.5),
0 0 40px rgba(var(--color-accent-rgb), 0.3),
0 4px 8px rgba(0, 0, 0, 0.3);
line-height: 1;
margin: 0;
transition: all 0.3s ease;
background: linear-gradient(135deg, var(--color-accent) 0%, #fde047 50%, var(--color-accent) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 3s ease-in-out infinite;
}
.brand-text:hover h1 {
transform: scale(1.05);
filter: drop-shadow(0 0 12px rgba(var(--glow-color), 0.6));
}
.brand-tagline {
font-size: 9px;
font-weight: 600;
color: rgba(var(--color-accent-rgb), 0.7);
letter-spacing: 1.5px;
text-transform: uppercase;
line-height: 1;
margin-top: 2px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.brand-logo {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.brand-logo-img {
max-height: 32px;
width: auto;
border-radius: 6px;
object-fit: contain;
}
/* Profile Avatar */
.action-btn-profile {
text-decoration: none;
}
.profile-avatar-img {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 215, 0, 0.55);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.5),
0 0 0 3px rgba(255, 215, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.4);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.profile-avatar-img:hover {
border-color: rgba(255, 215, 0, 0.85);
transform: scale(1.06);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.5),
0 0 0 3px rgba(255, 215, 0, 0.3),
0 0 14px rgba(255, 215, 0, 0.35),
0 4px 14px rgba(0, 0, 0, 0.35);
}
/* ═══ BRAND TITLE — Luxurious gold gradient with casino shimmer ═══ */
.brand-title {
font-family: var(--font-display, 'Poppins', sans-serif);
font-size: clamp(15px, 2.5vw, 19px);
font-weight: 800;
/* 17-09-2026 — titlul păstrează luciul metalic, dar din culoarea TEMEI, nu din aurul fix
(#b8860b/#ffd700). Aşa „REMI ETALAT" nu mai rămâne auriu pe temele verzi sau albastre.
Nuanţele se calculează din accent: închis la capete, deschis la mijloc. */
background: linear-gradient(135deg,
color-mix(in srgb, var(--remi-accent) 72%, #000) 0%,
var(--remi-accent) 20%,
color-mix(in srgb, var(--remi-accent) 72%, #fff) 38%,
var(--remi-accent) 50%,
color-mix(in srgb, var(--remi-accent) 72%, #fff) 62%,
var(--remi-accent) 80%,
color-mix(in srgb, var(--remi-accent) 72%, #000) 100%);
background-size: 300% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
position: relative;
animation: goldShimmer 5s ease-in-out infinite;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px color-mix(in srgb, var(--remi-accent) 25%, transparent));
transition: all 0.3s ease;
}
.brand-title:hover {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 215, 0, 0.5));
letter-spacing: 1.3px;
}
/* Tagline added via ::after — "Rummy Românesc" */
.brand-section .brand-title::after,
.brand-section .brand-title .brand-tag {
content: 'Rummy Romanesc';
display: block;
font-family: var(--font-display, 'Poppins', sans-serif);
font-size: 8px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 215, 0, 0.55);
-webkit-text-fill-color: rgba(255, 215, 0, 0.55);
margin-top: 2px;
line-height: 1;
background: none;
filter: none;
animation: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
@keyframes goldShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Legacy alias — keep for compatibility */
/* gradientShift — duplicat sters; definitia originala la linia 728 */
/* ═══ ACTION BUTTONS — Premium glass with gold ring on hover ═══ */
.action-btn {
width: 36px;
height: 36px;
background:
linear-gradient(145deg,
rgba(255, 235, 150, 0.06) 0%,
rgba(0, 0, 0, 0.3) 60%,
rgba(0, 0, 0, 0.45) 100%);
border: 1px solid rgba(255, 215, 0, 0.14);
color: rgba(255, 235, 180, 0.75);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(8px);
box-shadow:
inset 0 1px 0 rgba(255, 215, 0, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.4),
0 2px 6px rgba(0, 0, 0, 0.35);
}
.action-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at 50% 120%,
rgba(255, 215, 0, 0.25) 0%,
transparent 60%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.action-btn::after {
content: '';
position: absolute;
top: -2px;
left: -50%;
width: 40%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(255, 235, 150, 0.9),
transparent);
transition: left 0.6s ease;
pointer-events: none;
}
.action-btn:hover {
background:
linear-gradient(145deg,
rgba(255, 235, 150, 0.14) 0%,
rgba(184, 134, 11, 0.12) 60%,
rgba(0, 0, 0, 0.2) 100%);
color: #ffe066;
border-color: rgba(255, 215, 0, 0.55);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 215, 0, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 215, 0, 0.25),
0 6px 14px rgba(0, 0, 0, 0.4),
0 0 14px rgba(255, 215, 0, 0.25);
}
.action-btn:hover::before { opacity: 1; }
.action-btn:hover::after { left: 110%; }
.action-btn:active {
transform: translateY(0) scale(0.94);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.4),
inset 0 -1px 0 rgba(255, 215, 0, 0.1);
}
.action-btn .material-symbols-rounded {
font-size: 20px;
transition: transform 0.3s ease, filter 0.3s ease;
}
.action-btn:hover .material-symbols-rounded {
transform: scale(1.1);
filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
}
/* Top bar actions */
.top-actions {
display: flex;
align-items: center;
gap: 4px;
}
/* ================================================================================================
6. MAIN CONTENT AREA
================================================================================================ */
.main-content {
flex: 1;
overflow: hidden;
min-height: 0;
display: flex;
padding-bottom: 110px;
}
/* ================================================================================================
6a. NAVIGATION RAIL
================================================================================================ */
.nav-rail {
flex: none !important;
max-width: none !important;
flex-basis: auto !important;
position: fixed !important;
bottom: 0;
left: 0;
right: 0;
width: 100% !important;
height: auto;
min-height: 0;
background:
linear-gradient(0deg,
rgba(var(--remi-accent-rgb), 0.04) 0%,
transparent 60%),
var(--remi-surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-top: 1px solid rgba(var(--remi-accent-rgb), 0.1);
border-right: none !important;
padding-bottom: calc(var(--sab, 0px) + 8px);
padding-top: 6px;
padding-left: 0 !important;
padding-right: 0 !important;
transition: transform var(--transition-base, 0.3s ease), opacity var(--transition-base, 0.3s ease);
z-index: var(--z-fixed, 200);
display: flex !important;
flex-direction: column !important;
align-items: center;
justify-content: flex-start;
gap: 4px;
box-shadow:
0 -2px 20px rgba(0, 0, 0, 0.35),
0 -1px 0 rgba(var(--remi-accent-rgb), 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.nav-rail.collapsed {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
/* Hide header & footer when typing in chat */
body.chat-typing .top-bar { display: none !important; }
body.chat-typing .nav-rail { display: none !important; }
/* Hide header & footer while game loader is active */
body:has(.game-loader:not(.hidden):not(.fade-out)) .top-bar,
body:has(.game-loader:not(.hidden):not(.fade-out)) .nav-rail {
display: none !important;
}
/* ── Immersive Mode ── */
.top-bar,
.nav-rail {
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease;
}
.main-content {
transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.immersive-mode .top-bar { display: none !important; }
body.immersive-mode .nav-rail { display: none !important; }
body.immersive-mode .app-container { padding: 0 !important; }
body.immersive-mode .main-content {
padding: 0 !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100vh !important;
max-height: 100dvh !important;
}
body.immersive-mode .game-canvas {
padding: 0 !important;
height: 100vh !important;
height: 100dvh !important;
}
body.immersive-mode .game-area {
max-height: none !important;
height: 100% !important;
}
body.immersive-mode.game-menu .lobby-view {
max-height: none !important;
flex: 1 1 auto !important;
}
/* 16-09-2026 — userul: „dispare header, footer şi se măreşte ce rămâne". Lobby-ul
creştea pe verticală, dar reclamele rămâneau la 160px lăţime, ca în lobby-ul
normal: doar mai înalte, nu mai mari. În imersiv, pe desktop, coloanele de
reclamă trec la 230px şi conţinutul cardului creşte odată cu ele. Măsurat pe
1536px: 230 + 1052 (lobby, tot 3 coloane de mese) + 230. Sub 1200px lobby-ul
n-are de unde da, deci acolo rămân cum erau. */
@media (min-width: 1200px) {
body.immersive-mode.game-menu .lobby-ad {
flex: 0 0 230px !important;
width: 230px !important;
}
body.immersive-mode.game-menu .lobby-ad-card .ad-icon { font-size: 72px !important; }
body.immersive-mode.game-menu .lobby-ad-card .ad-name { font-size: 27px !important; }
body.immersive-mode.game-menu .lobby-ad-card .ad-slogan { font-size: 13px !important; }
body.immersive-mode.game-menu .lobby-ad-card .ad-cta { font-size: 13px !important; padding: 14px 24px !important; }
}
/* ── Focus Mode Toggle — Round Button ── */
@keyframes immersivePulse {
0%, 100% { box-shadow: 0 0 10px rgba(var(--remi-accent-rgb), 0.2), 0 2px 12px rgba(0,0,0,0.25); }
50% { box-shadow: 0 0 22px rgba(var(--remi-accent-rgb), 0.45), 0 2px 12px rgba(0,0,0,0.25); }
}
@keyframes immersiveBounce {
0% { transform: scale(1); }
30% { transform: scale(0.85); }
60% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.immersive-toggle-float {
position: fixed;
top: 50%;
left: 8px;
transform: translateY(-50%);
z-index: 300;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid rgba(var(--remi-accent-rgb), 0.3);
background: linear-gradient(135deg,
rgba(var(--remi-primary-rgb, 36, 21, 66), 0.9) 0%,
rgba(var(--remi-primary-rgb, 36, 21, 66), 0.7) 100%);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: var(--remi-accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0.9;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
animation: immersivePulse 3s ease-in-out infinite;
transition: opacity 0.3s ease,
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 0.3s ease;
}
.immersive-arrows-box {
position: relative;
width: 20px;
height: 20px;
}
.imm-arrow {
position: absolute;
width: 7px;
height: 7px;
border-color: currentColor;
border-style: solid;
border-width: 0;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.imm-tl { top: 0; left: 0; border-top-width: 2.5px; border-left-width: 2.5px; }
.imm-tr { top: 0; right: 0; border-top-width: 2.5px; border-right-width: 2.5px; }
.imm-bl { bottom: 0; left: 0; border-bottom-width: 2.5px; border-left-width: 2.5px; }
.imm-br { bottom: 0; right: 0; border-bottom-width: 2.5px; border-right-width: 2.5px; }
@keyframes immArrowExpand {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; transform: translate(-2px, -2px); }
}
@keyframes immArrowExpandTR {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; transform: translate(2px, -2px); }
}
@keyframes immArrowExpandBL {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; transform: translate(-2px, 2px); }
}
@keyframes immArrowExpandBR {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; transform: translate(2px, 2px); }
}
.imm-tl { animation: immArrowExpand 2s ease-in-out infinite; }
.imm-tr { animation: immArrowExpandTR 2s ease-in-out infinite 0.1s; }
.imm-bl { animation: immArrowExpandBL 2s ease-in-out infinite 0.2s; }
.imm-br { animation: immArrowExpandBR 2s ease-in-out infinite 0.3s; }
body.immersive-mode .imm-tl { top: 5px; left: 5px; animation-name: immArrowExpandBR; }
body.immersive-mode .imm-tr { top: 5px; right: 5px; animation-name: immArrowExpandBL; }
body.immersive-mode .imm-bl { bottom: 5px; left: 5px; animation-name: immArrowExpandTR; }
body.immersive-mode .imm-br { bottom: 5px; right: 5px; animation-name: immArrowExpand; }
.immersive-toggle-float:hover .imm-arrow { animation: none; opacity: 1; }
.immersive-toggle-float:hover {
opacity: 1;
border-color: rgba(var(--remi-accent-rgb), 0.6);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 0 24px rgba(var(--remi-accent-rgb), 0.4), 0 4px 16px rgba(0,0,0,0.3);
}
.immersive-toggle-float:active {
transform: translateY(-50%) scale(0.9);
opacity: 1;
}
.immersive-toggle-float.immersive-transitioning {
animation: immersiveBounce 0.4s ease-out !important;
}
.immersive-glow {
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--remi-accent-rgb), 0.12) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
.immersive-toggle-float:hover .immersive-glow {
background: radial-gradient(circle, rgba(var(--remi-accent-rgb), 0.25) 0%, transparent 70%);
}
body.immersive-mode .immersive-toggle-float {
opacity: 0.5;
animation: none;
background: rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.85);
}
body.immersive-mode .immersive-toggle-float:hover {
opacity: 0.95;
transform: scale(1.1);
}
.status-bar {
width: 100%;
height: 22px;
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-sm, 8px);
/* Glassmorphism */
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.02) 50%,
rgba(255, 215, 0, 0.03) 100%) !important;
backdrop-filter: blur(12px) saturate(150%) !important;
-webkit-backdrop-filter: blur(12px) saturate(150%) !important;
border-bottom: 1px solid rgba(255, 215, 0, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.03);
flex-wrap: nowrap !important;
z-index: auto !important;
overflow: visible;
scrollbar-width: none;
-ms-overflow-style: none;
font-size: 11px;
font-weight: 600;
color: rgba(255, 245, 220, 0.9);
letter-spacing: 0.2px;
}
.status-bar::-webkit-scrollbar { display: none; }
/* Score groups — with subtle separators */
.status-bar .score-group {
display: flex;
align-items: center;
gap: 4px;
padding: 0 4px;
position: relative;
transition: all 0.3s ease;
}
.status-bar .score-group.active-player {
color: #ffd700;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}
/* Animation for score updates */
.status-bar .score-group.score-flash-up {
animation: scoreFlashUp 0.8s ease-out;
}
.status-bar .score-group.score-flash-down {
animation: scoreFlashDown 0.8s ease-out;
}
@keyframes scoreFlashUp {
0% { color: rgba(255, 245, 220, 0.9); transform: scale(1); }
30% { color: #4ade80; transform: scale(1.2); text-shadow: 0 0 10px rgba(74, 222, 128, 0.7); }
100% { color: rgba(255, 245, 220, 0.9); transform: scale(1); }
}
@keyframes scoreFlashDown {
0% { color: rgba(255, 245, 220, 0.9); transform: scale(1); }
30% { color: #ef4444; transform: scale(1.15); text-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
100% { color: rgba(255, 245, 220, 0.9); transform: scale(1); }
}
/* Floating delta indicator */
.score-delta {
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-weight: 800;
pointer-events: none;
animation: scoreDeltaFloat 1.4s ease-out forwards;
z-index: 10;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.score-delta.positive { color: #4ade80; }
.score-delta.negative { color: #ef4444; }
@keyframes scoreDeltaFloat {
0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
20% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
80% { opacity: 1; transform: translate(-50%, -24px) scale(1); }
100% { opacity: 0; transform: translate(-50%, -32px) scale(0.9); }
}
.nav-bar-primary {
display: flex;
align-items: flex-end;
justify-content: space-around;
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 0 var(--space-xs, 4px);
gap: 2px;
}
/* Override themes.css which hides icons in nav buttons */
.nav-bar-btn .material-symbols-rounded {
display: inline-block !important;
font-size: 20px;
}
.nav-bar-btn {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
height: 38px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg, 12px);
color: var(--remi-text-dim);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.nav-bar-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: width 0.5s ease, height 0.5s ease;
border-radius: 50%;
}
.nav-bar-btn:hover::before { width: 120px; height: 120px; }
.nav-bar-btn:hover {
color: var(--color-text-primary, var(--remi-text));
background: rgba(255, 255, 255, 0.05);
border-color: var(--glow-border);
transform: translateY(-2px);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.15),
var(--glow-md),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav-bar-btn.active {
/* Un singur background: linear-gradient subtil. Fara pseudo-radial suprapus. */
background: linear-gradient(135deg,
rgba(var(--remi-accent-rgb), 0.16) 0%,
rgba(var(--remi-accent-rgb), 0.06) 100%
);
color: var(--remi-accent) !important;
border: 1px solid rgba(var(--remi-accent-rgb), 0.45);
transform: none;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
/* animation removed — fara pulsare permanenta pe buton activ */
}
/* Dezactivez complet radial-ul ::before pe activ — evita a 2-a textura vizibila */
.nav-bar-btn.active::before {
width: 0 !important;
height: 0 !important;
background: none !important;
}
.nav-bar-btn .material-symbols-rounded {
font-size: 22px;
position: relative;
z-index: 1;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-bar-btn:hover .material-symbols-rounded { transform: scale(1.1); }
.nav-bar-btn.active .material-symbols-rounded {
font-variation-settings: 'FILL' 1, 'wght' 600;
font-size: 24px;
text-shadow: 0 2px 12px rgba(var(--remi-accent-rgb), 0.4);
animation: glowTextPulse 3s ease-in-out infinite;
}
.nav-bar-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2px;
white-space: nowrap;
position: relative;
z-index: 1;
}
.nav-bar-btn.active .nav-bar-label {
text-shadow: 0 1px 8px rgba(var(--remi-accent-rgb), 0.3);
}
.nav-bar-btn .nav-badge {
position: absolute;
top: 4px;
right: calc(50% - 16px);
min-width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--remi-danger, #ef4444) 0%, #dc2626 100%);
border-radius: var(--remi-radius-full, 9999px);
font-size: 9px;
font-weight: 700;
color: white;
padding: 0 4px;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
z-index: 2;
}
.nav-bar-fab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: linear-gradient(135deg, var(--remi-accent) 0%, var(--remi-accent-dark) 100%);
border: 2px solid rgba(255,255,255,0.15);
border-radius: 50%;
color: white;
cursor: pointer;
font-size: 10px;
position: relative;
top: -12px;
box-shadow:
0 4px 20px rgba(var(--remi-accent-rgb), 0.4),
0 2px 8px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.2);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-bar-fab:hover {
transform: translateY(-4px) scale(1.08);
box-shadow:
0 8px 28px rgba(var(--remi-accent-rgb), 0.5),
0 4px 12px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.25);
}
.nav-bar-fab:active {
transform: translateY(-2px) scale(0.95);
}
.nav-fab-profile {
background: transparent;
border: none;
padding: 0;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.nav-fab-profile:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.nav-fab-profile::before { display: none; }
.nav-fab-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.nav-fab-initials {
font-size: 14px;
font-weight: 700;
}
.nav-bar-dot {
position: absolute;
top: 4px;
right: 4px;
width: 8px;
height: 8px;
background: var(--remi-danger);
border-radius: 50%;
box-shadow: 0 0 6px rgba(var(--remi-danger-rgb), 0.5);
}
.status-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
/* Nav Badge */
.nav-badge {
position: absolute;
top: 4px;
right: 50%;
transform: translateX(10px);
min-width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
background: linear-gradient(135deg, var(--remi-danger, #ef4444) 0%, #dc2626 100%);
color: white;
font-size: 9px;
font-weight: 700;
border-radius: var(--remi-radius-full, 9999px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
z-index: 2;
}
.nav-bar-dot {
position: absolute;
top: 4px;
right: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--remi-danger);
box-shadow: 0 0 4px rgba(248, 113, 113, 0.6);
}
/* Status Bar Items — niciunul nu se taie, fiecare isi tine latimea minima */
.status-item {
font-size: clamp(11px, 2.2vw, 13px);
font-weight: 600;
color: var(--remi-text-dim);
white-space: nowrap;
flex-shrink: 0; /* CRITIC: fiecare item isi pastreaza lungimea — nu se taie la jumatate */
}
/* Balance badge — daca e prea mare, trunchiaza CUVANTUL "pts" nu cifrele,
ca sa nu afecteze timer-ul care vine dupa */
.status-item.balance-badge {
max-width: 100%;
min-width: 0; /* permite ellipsis in interior */
overflow: hidden;
text-overflow: ellipsis;
}
.status-item.balance-badge .balance-value {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
/* Pe mobil, ascund "pts" text (lasa doar iconita + cifra) cand spatiu e limitat */
@media (max-width: 480px) {
.status-item.balance-badge {
font-size: 10px;
}
/* "pts" text devine ascuns daca balance are 4+ cifre pe mobil mic */
.status-item.balance-badge[data-big="true"]::after {
/* JS poate seta data-big="true" cand balance ≥ 10000 */
}
}
/* Scor display — TOTDEAUNA vizibil cu numere numerice fixed-width */
.status-bar .score-group .score-value {
font-variant-numeric: tabular-nums;
}
/* Game Timer din status bar — ROSU (per CERUT USER) */
.status-item-timer {
color: #fca5a5 !important;
}
.status-item-timer .material-symbols-rounded {
color: #f87171 !important;
filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.35));
}
.status-item-timer #gameTimer,
.status-item-timer #gameTimerShort {
color: #fca5a5;
font-variant-numeric: tabular-nums;
font-weight: 700;
}
/* Left status group — scroll orizontal silent daca overflow */
.status-left-group {
scrollbar-width: none;
-ms-overflow-style: none;
}
.status-left-group::-webkit-scrollbar {
display: none;
height: 0;
width: 0;
}
/* Pe mobil foarte mic (<375px), reduc font + gap ca sa incap totul */
@media (max-width: 375px) {
.status-bar { font-size: 10px; gap: 4px; padding: 0 6px; }
.status-bar .status-item { font-size: 10px; gap: 2px !important; }
.status-bar .status-item .material-symbols-rounded { font-size: 13px; }
.status-avatar { width: 18px !important; height: 18px !important; }
.status-bar .balance-badge .balance-value { font-size: 10px; }
.status-bar .score-value { font-size: 10px; }
.status-actions { gap: 3px !important; }
}
.status-item .material-symbols-rounded {
font-size: 16px;
color: var(--remi-accent);
}
.score-label {
color: var(--remi-text-muted);
font-size: 10px;
font-weight: 600;
}
.score-value {
font-size: 10px;
font-weight: 700;
color: var(--remi-accent);
letter-spacing: 0.3px;
font-variant-numeric: tabular-nums;
}
.score-separator {
color: var(--remi-text-muted);
font-size: 12px;
}
.balance-badge {
cursor: pointer;
transition: all 0.3s;
background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), 0.1) 0%, rgba(var(--remi-accent-rgb), 0.05) 100%);
border: 1px solid rgba(var(--remi-accent-rgb), 0.15);
border-radius: 8px;
padding: 2px 8px;
backdrop-filter: blur(8px);
}
.balance-badge:hover {
color: var(--remi-accent);
background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), 0.15) 0%, rgba(var(--remi-accent-rgb), 0.08) 100%);
border-color: rgba(var(--remi-accent-rgb), 0.25);
box-shadow: var(--glow-xs);
}
.balance-value {
font-weight: 700;
color: var(--remi-accent);
font-variant-numeric: tabular-nums;
text-shadow: 0 0 8px rgba(var(--remi-accent-rgb), 0.3);
}
.balance-badge.balance-positive .balance-value { color: var(--remi-success); }
.balance-badge.balance-negative .balance-value { color: var(--remi-danger); }
.balance-badge.balance-zero .balance-value { color: var(--remi-text-dim); }
.balance-badge.balance-updated {
animation: coin-flip 0.6s ease-out;
}
/* Status Button */
.status-btn {
width: 32px;
height: 32px;
background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), 0.1) 0%, rgba(var(--remi-accent-rgb), 0.05) 100%);
border: 1px solid rgba(var(--remi-accent-rgb), 0.15);
border-radius: 8px;
color: var(--remi-text-dim);
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.status-btn:hover {
color: var(--remi-accent);
background: rgba(var(--remi-accent-rgb), 0.15);
box-shadow: var(--glow-xs);
}
.status-btn .hint-count {
position: absolute;
top: -2px;
right: -2px;
min-width: 14px;
height: 14px;
background: var(--remi-accent);
color: white;
border-radius: 7px;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
}
/* XP Bar */
.xp-bar-container {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
padding: 2px 6px;
border-radius: 8px;
background: rgba(var(--remi-accent-rgb), 0.06);
border: 1px solid rgba(var(--remi-accent-rgb), 0.1);
transition: all 0.3s;
height: 20px;
}
.xp-bar-container:hover {
background: rgba(var(--remi-accent-rgb), 0.12);
border-color: rgba(var(--remi-accent-rgb), 0.2);
}
#levelBadge {
font-size: 10px;
font-weight: 700;
color: var(--remi-accent);
white-space: nowrap;
text-shadow: 0 0 6px rgba(var(--remi-accent-rgb), 0.3);
}
.xp-progress-track {
width: 40px;
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
}
.xp-progress-track > div,
#xpProgressBar {
height: 100%;
background: linear-gradient(90deg, var(--remi-accent) 0%, var(--remi-accent-light) 100%);
border-radius: 2px;
transition: width 0.5s ease;
box-shadow: 0 0 6px rgba(var(--remi-accent-rgb), 0.4);
}
#xpLabel {
font-size: 9px;
color: var(--remi-text-dim);
white-space: nowrap;
}
/* Desktop adjustments (nav-rail stays fixed bottom on all sizes, like Table) */
@media (min-width: 768px) {
.status-bar {
min-height: 30px;
font-size: 12px;
}
}
.status-actions {
display: flex;
align-items: center;
gap: 8px;
}
/* ================================================================================================
6b. MENU DRAWER (slide-up panel)
================================================================================================ */
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.drawer-backdrop.open {
opacity: 1;
visibility: visible;
}
.drawer-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 70vh;
background: linear-gradient(180deg,
rgba(var(--remi-primary-rgb, 36, 21, 66), 0.98) 0%,
var(--remi-bg, rgba(26, 10, 46, 0.95)) 100%
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(var(--remi-accent-rgb), 0.2);
border-radius: var(--remi-radius-xl) var(--remi-radius-xl) 0 0;
padding: 0 var(--space-md) calc(var(--sab, 0px) + var(--space-md));
z-index: 2000;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
}
.drawer-panel.open {
transform: translateY(0);
}
.drawer-handle {
display: flex;
justify-content: center;
padding: 12px 0 8px;
cursor: grab;
}
.drawer-handle-bar {
width: 40px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
.drawer-grid {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.drawer-category {
margin-bottom: var(--space-sm);
}
.drawer-category-label {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--remi-text-muted);
padding: var(--space-xs) 0;
}
.drawer-items {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xs);
}
.drawer-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 4px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--remi-radius-sm);
color: var(--remi-text-dim);
cursor: pointer;
transition: all 0.3s ease;
font-size: 11px;
font-weight: 500;
}
.drawer-item:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(var(--remi-accent-rgb), 0.3);
color: var(--remi-text);
}
.drawer-item:active {
transform: scale(0.96);
}
.drawer-item .material-symbols-rounded {
font-size: 22px;
transition: all 0.3s ease;
}
.drawer-item:hover .material-symbols-rounded {
color: var(--remi-accent);
transform: scale(1.1);
}
.drawer-item .nav-badge {
position: absolute;
top: 4px;
right: 4px;
}
.drawer-item-exit {
color: var(--remi-danger);
}
.drawer-item-exit:hover {
background: rgba(248, 113, 113, 0.1);
border-color: rgba(248, 113, 113, 0.3);
}
body.chat-typing .drawer-panel,
body.chat-typing .drawer-backdrop {
display: none !important;
}
/* ================================================================================================
7. GAME CANVAS
================================================================================================ */
.game-canvas {
flex: 1 !important;
max-width: none !important;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
padding: 0 var(--space-sm) var(--space-sm);
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 60px;
background:
radial-gradient(ellipse at 30% 40%, rgba(var(--remi-accent-rgb), 0.04) 0%, transparent 50%),
radial-gradient(ellipse at 70% 60%, rgba(var(--remi-accent-rgb), 0.02) 0%, transparent 40%);
}
@media (min-width: 768px) {
.game-canvas { padding-bottom: 0; }
}
.game-area {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
max-height: 100%;
position: relative;
overflow: hidden;
}
/* ================================================================================================
7a. LOBBY VIEW
================================================================================================ */
/* Visibility toggle */
.lobby-view { display: none; }
body.game-menu .lobby-view {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
min-height: 0;
max-height: calc(100vh - 155px);
overflow-y: auto;
overflow-x: clip;
padding: clamp(8px, 2vw, 16px);
padding-bottom: clamp(8px, 2vw, 16px);
gap: clamp(8px, 1.5vw, 12px);
}
body.game-menu .lobby-view > * {
width: 100%;
}
body.game-menu .game-setup-view { display: none !important; }
body.game-menu .game-table-wrapper { display: none !important; }
/* Lobby scrollbar */
.lobby-view::-webkit-scrollbar { width: 4px; }
.lobby-view::-webkit-scrollbar-track { background: transparent; }
.lobby-view::-webkit-scrollbar-thumb {
background: rgba(var(--remi-accent-rgb), 0.15);
border-radius: 4px;
}
/* ── Lobby Header ── */
.lobby-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(8px, 2vw, 12px);
flex-wrap: wrap;
padding-bottom: clamp(4px, 1vw, 8px);
}
.lobby-header-left {
display: flex;
align-items: center;
gap: clamp(10px, 2vw, 16px);
}
/* Tile Mascot */
.lobby-tile-mascot {
flex-shrink: 0;
display: flex;
align-items: center;
}
.remi-logo-tiles {
display: flex;
align-items: flex-end;
height: clamp(46px, 7.5vw, 58px);
}
.remi-logo-tiles .tile {
width: clamp(24px, 3.8vw, 30px) !important;
height: clamp(34px, 5.5vw, 44px) !important;
font-size: clamp(9px, 1.6vw, 12px) !important;
cursor: default;
pointer-events: none;
transition: transform 0.3s ease;
}
.remi-logo-tiles .tile .tile-suit-dot {
width: clamp(4px, 0.7vw, 6px) !important;
height: clamp(4px, 0.7vw, 6px) !important;
}
.remi-logo-tiles .tile .joker-svg {
width: 82% !important;
}
.remi-logo-tiles .tile .joker-label {
font-size: 5px !important;
}
.remi-logo-tiles .tile:nth-child(1) { transform: rotate(-12deg) translateY(3px); z-index: 1; margin-right: -10px; }
.remi-logo-tiles .tile:nth-child(2) { transform: rotate(-5deg) translateY(1px); z-index: 2; margin-right: -10px; }
.remi-logo-tiles .tile:nth-child(3) { transform: rotate(2deg); z-index: 3; margin-right: -10px; }
.remi-logo-tiles .tile:nth-child(4) { transform: rotate(7deg) translateY(1px); z-index: 4; margin-right: -10px; }
.remi-logo-tiles .tile:nth-child(5) { transform: rotate(13deg) translateY(3px); z-index: 5; }
.lobby-tile-mascot:hover .remi-logo-tiles .tile:nth-child(1) { transform: rotate(-14deg) translateY(-5px); }
.lobby-tile-mascot:hover .remi-logo-tiles .tile:nth-child(2) { transform: rotate(-6deg) translateY(-7px); }
.lobby-tile-mascot:hover .remi-logo-tiles .tile:nth-child(3) { transform: rotate(1deg) translateY(-8px); }
.lobby-tile-mascot:hover .remi-logo-tiles .tile:nth-child(4) { transform: rotate(7deg) translateY(-7px); }
.lobby-tile-mascot:hover .remi-logo-tiles .tile:nth-child(5) { transform: rotate(14deg) translateY(-5px); }
.lobby-online-indicator,
.lobby-rooms-count {
display: flex;
align-items: center;
gap: 5px;
font-size: clamp(11px, 2.2vw, 13px);
color: var(--remi-text-dim);
font-weight: 600;
}
.lobby-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #6b7280;
transition: background 0.3s;
animation: online-pulse 2s ease-in-out infinite;
}
.lobby-status-dot.connected {
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.lobby-header-right {
display: flex;
align-items: center;
gap: clamp(6px, 1.5vw, 10px);
flex-wrap: wrap;
justify-content: flex-end;
}
/* ── Lobby Action Buttons ── */
.lobby-btn {
min-height: clamp(34px, 6vw, 40px);
padding: clamp(6px, 1vw, 8px) clamp(12px, 2.5vw, 16px);
border: none;
border-radius: clamp(8px, 1.5vw, 10px);
font-weight: 700;
font-size: clamp(11px, 2.2vw, 13px);
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: all 0.25s ease;
white-space: nowrap;
font-family: inherit;
}
.lobby-btn .material-symbols-rounded { font-size: 18px; }
.lobby-btn-create {
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-dark));
color: white;
box-shadow: 0 2px 8px rgba(var(--remi-accent-rgb), 0.25);
animation: create-breathe 3s ease-in-out infinite;
}
.lobby-btn-create:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(var(--remi-accent-rgb), 0.35);
}
.lobby-btn-create:disabled {
opacity: 0.5;
pointer-events: none;
}
.lobby-btn-ai {
background: rgba(var(--remi-success-rgb), 0.15);
color: var(--remi-success);
border: 1px solid rgba(var(--remi-success-rgb), 0.2);
}
.lobby-btn-ai:hover {
background: rgba(var(--remi-success-rgb), 0.25);
transform: translateY(-1px);
}
.lobby-btn-quick {
background: rgba(var(--remi-accent-rgb), 0.12);
color: var(--remi-accent);
border: 1px solid rgba(var(--remi-accent-rgb), 0.2);
position: relative;
overflow: hidden;
}
.lobby-btn-quick::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
animation: btn-shimmer 3s ease-in-out infinite;
}
.lobby-btn-quick:hover {
background: rgba(var(--remi-accent-rgb), 0.22);
transform: translateY(-1px);
}
/* ── Lobby Stats Row ── */
.lobby-stats-row {
display: flex;
align-items: stretch;
gap: clamp(6px, 1.2vw, 10px);
flex-wrap: wrap;
}
.lobby-stats-bar {
display: flex;
align-items: center;
gap: clamp(10px, 2vw, 16px);
padding: clamp(8px, 1.5vw, 12px);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--remi-radius-sm);
flex-wrap: nowrap;
white-space: nowrap;
flex-shrink: 0;
}
.lobby-stat {
display: flex;
align-items: center;
gap: 4px;
font-size: clamp(11px, 2vw, 13px);
color: var(--remi-text-dim);
white-space: nowrap;
}
.lobby-stat strong {
color: var(--remi-text);
font-variant-numeric: tabular-nums;
}
.lobby-stat-icon {
font-size: 16px !important;
}
.lobby-stats-bar .stat-item {
animation: stat-pop 0.5s ease-out both;
}
.lobby-stats-bar .stat-item:nth-child(1) { animation-delay: 0.1s; }
.lobby-stats-bar .stat-item:nth-child(2) { animation-delay: 0.2s; }
.lobby-stats-bar .stat-item:nth-child(3) { animation-delay: 0.3s; }
/* ── AI Card ── */
.lobby-ai-card {
display: flex;
align-items: center;
gap: clamp(10px, 2vw, 16px);
padding: clamp(6px, 1.2vw, 10px) clamp(10px, 2vw, 16px);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--remi-radius-sm);
flex: 1;
min-width: 260px;
}
.lobby-ai-info {
display: flex;
align-items: center;
gap: 8px;
}
.lobby-ai-text {
flex: 1;
}
.lobby-ai-text h4 {
font-size: clamp(12px, 2.2vw, 14px);
font-weight: 700;
margin: 0;
color: var(--remi-text);
}
.lobby-ai-text p {
font-size: clamp(10px, 1.8vw, 12px);
color: var(--remi-text-dim);
margin: 0;
}
.lobby-ai-stats {
display: flex;
gap: clamp(8px, 1.6vw, 14px);
font-size: clamp(11px, 2vw, 12px);
color: var(--remi-text-dim);
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
}
.lobby-ai-play-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-dark));
color: white;
border: none;
border-radius: var(--remi-radius-sm);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
font-family: inherit;
}
.lobby-ai-play-btn::after {
content: '';
position: absolute;
top: 0; left: -120%;
width: 80%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: play-shine 4s ease-in-out infinite;
}
.lobby-ai-play-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(var(--remi-accent-rgb), 0.3);
}
/* ── Leaderboard ── */
.lobby-leaderboard {
padding: 0;
margin-bottom: 2px;
min-width: 0;
}
.lobby-lb-item { flex-shrink: 0; }
.lobby-lb-header {
display: flex;
align-items: center;
gap: 6px;
font-size: clamp(12px, 2.2vw, 14px);
font-weight: 700;
color: var(--remi-accent);
margin-bottom: 8px;
}
.lobby-lb-header .material-symbols-rounded {
font-size: 18px;
color: var(--remi-gold);
}
.lobby-lb-list {
display: flex;
flex-wrap: nowrap;
width: 100%;
max-width: 100%;
gap: clamp(6px, 1.2vw, 8px);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(var(--remi-accent-rgb), 0.35) transparent;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
}
.lobby-lb-list::-webkit-scrollbar { height: 6px; display: block; }
.lobby-lb-list::-webkit-scrollbar-track { background: transparent; }
.lobby-lb-list::-webkit-scrollbar-thumb { background: rgba(var(--remi-accent-rgb), 0.35); border-radius: 6px; }
.lobby-lb-item { scroll-snap-align: start; }
/* scrollbar styled above */
.lobby-lb-loading {
font-size: 12px;
color: var(--remi-text-dim);
text-align: center;
padding: 12px;
}
.lobby-lb-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--glass-bg);
border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
border-radius: 8px;
min-width: 140px;
flex-shrink: 0;
font-size: 12px;
transition: all 0.2s;
}
.lobby-lb-item:hover {
background: rgba(var(--remi-accent-rgb), 0.06);
border-color: rgba(var(--remi-accent-rgb), 0.15);
}
.lobby-lb-rank {
font-size: clamp(14px, 2.8vw, 17px);
flex-shrink: 0;
width: 22px;
text-align: center;
font-weight: 700;
color: var(--remi-text-dim);
}
.lobby-lb-rank.top-1 { color: #ffd700; }
.lobby-lb-rank.top-2 { color: #c0c0c0; }
.lobby-lb-rank.top-3 { color: #cd7f32; }
.lobby-lb-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 11px;
color: white;
animation: avatar-ring 3s ease-in-out infinite;
}
.lobby-lb-name {
flex: 1;
font-weight: 600;
color: var(--remi-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lobby-lb-score {
font-weight: 700;
color: var(--remi-accent);
font-variant-numeric: tabular-nums;
}
/* ── Filter Bar ── */
.lobby-filter-bar {
display: flex;
align-items: center;
gap: 6px;
}
.lobby-filters-scroll {
display: flex;
align-items: center;
gap: clamp(4px, 0.8vw, 6px);
overflow-x: auto;
scrollbar-width: none;
flex: 1;
min-width: 0;
padding: 2px 0;
}
.lobby-filters-scroll::-webkit-scrollbar { display: none; }
.lobby-chip {
padding: clamp(4px, 0.8vw, 5px) clamp(8px, 1.5vw, 10px);
border-radius: clamp(4px, 0.8vw, 6px);
font-size: clamp(10px, 2vw, 11px);
font-weight: 600;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
color: var(--remi-text-dim);
cursor: pointer;
white-space: nowrap;
touch-action: manipulation;
transition: all 0.2s ease;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
.lobby-chip:hover {
background: rgba(var(--remi-accent-rgb), 0.08);
}
.lobby-chip.active {
background: rgba(var(--remi-accent-rgb), 0.15);
border-color: rgba(var(--remi-accent-rgb), 0.3);
color: var(--remi-accent);
}
.lobby-chip-sep {
width: 1px;
height: 16px;
background: var(--glass-border);
flex-shrink: 0;
}
.lobby-search-toggle {
width: clamp(32px, 6vw, 36px);
height: clamp(32px, 6vw, 36px);
border: 1px solid var(--glass-border);
border-radius: clamp(6px, 1vw, 8px);
background: var(--glass-bg);
color: var(--remi-text-dim);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.lobby-search-toggle:hover {
background: rgba(var(--remi-accent-rgb), 0.1);
color: var(--remi-accent);
}
.lobby-sort-select {
height: clamp(32px, 6vw, 36px);
padding: 0 clamp(8px, 1.5vw, 10px);
border: 1px solid var(--glass-border);
border-radius: clamp(6px, 1vw, 8px);
background: var(--glass-bg);
color: var(--remi-text-dim);
font-size: clamp(10px, 2vw, 11px);
font-weight: 600;
font-family: inherit;
cursor: pointer;
flex-shrink: 0;
outline: none;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 22px;
}
.lobby-sort-select:focus {
border-color: rgba(var(--remi-accent-rgb), 0.3);
}
.lobby-sort-select option {
background: var(--remi-surface);
color: var(--remi-text);
}
/* ── Search Row ── */
.lobby-search-row { padding: 0 0 2px; }
.lobby-search-wrap {
display: flex;
align-items: center;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: clamp(8px, 1.5vw, 10px);
padding: 0 clamp(8px, 1.5vw, 12px);
gap: 8px;
}
.lobby-search-icon { font-size: 18px; color: var(--remi-text-muted); }
.lobby-search-input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--remi-text);
font-size: clamp(12px, 2.5vw, 14px);
padding: clamp(8px, 1.5vw, 10px) 0;
font-family: inherit;
resize: none;
overflow: hidden;
line-height: 1.4;
max-height: 36px;
}
.lobby-search-input::placeholder { color: var(--remi-text-muted); }
.lobby-search-clear {
background: none;
border: none;
color: var(--remi-text-muted);
cursor: pointer;
font-size: 16px;
padding: 4px;
}
/* ── Room Cards Grid ── */
.lobby-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(6px, 1vw, 10px);
width: 100%;
}
@media (max-width: 768px) {
.lobby-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.lobby-grid { grid-template-columns: 1fr; }
}
/* ── Ad Columns ── */
.lobby-ad {
display: none;
flex: 0 0 160px;
width: 160px;
min-height: 100%;
align-items: flex-start;
justify-content: center;
padding: 12px 8px;
}
/* Reclamele laterale apar şi LA MASĂ, nu doar în lobby (2026-09-03).
Erau scrise toate — şi aprinderea, şi cele 15 reguli de aspect premium — cu
`body.game-menu`, adică numai pentru lobby. La masă containerul rămânea
`display: none`; iar dacă îl aprindeai singur, cardul apărea fără glow, fără
liniile aurii de sus/jos şi fără sclipire, pentru că rafinamentele stăteau
tot în spatele lui `.game-menu`. De aceea selectorul e extins peste tot unde
apărea, nu doar aici — altfel reclama la masă arată ca o cutie goală.
`:is()` păstrează specificitatea unei clase, deci raportul de forţe cu
celelalte reguli rămâne neschimbat.
Costul, ştiut şi acceptat: masa scade de la ~1496px la ~1176px, iar zonele de
etalare se strâng corespunzător. */
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad {
display: flex;
flex-direction: column;
gap: 12px;
perspective: 1400px;
}
@media (max-width: 768px) {
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad { display: none; }
}
/* ── House Ad Card (rotative, premium) ── */
.lobby-ad-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 480px;
padding: 28px 14px 20px;
border-radius: 16px;
text-decoration: none;
color: #fff;
overflow: hidden;
border: 1px solid rgba(255, 215, 0, 0.22);
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
transition:
transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1),
box-shadow 0.4s ease,
border-color 0.3s;
transform-style: preserve-3d;
backface-visibility: hidden;
animation: adFlipIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.05);
transform-origin: center center;
}
.lobby-ad-card.ad-exit {
animation: adFlipOut 0.4s cubic-bezier(0.5, 0, 0.7, 0.1) forwards;
pointer-events: none;
}
/* Texture + light overlay */
.lobby-ad-card::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 8%, rgba(255, 215, 0, 0.22) 0%, transparent 55%),
repeating-linear-gradient(45deg,
transparent 0, transparent 14px,
rgba(255, 255, 255, 0.02) 14px, rgba(255, 255, 255, 0.02) 15px);
pointer-events: none;
z-index: 0;
}
/* Inner gold frame */
.lobby-ad-card::after {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(255, 215, 0, 0.14);
border-radius: 11px;
pointer-events: none;
transition: border-color 0.3s;
z-index: 0;
}
.lobby-ad-card:hover {
transform: translateY(-5px) scale(1.02);
border-color: rgba(255, 215, 0, 0.55);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.6),
0 0 28px rgba(255, 215, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
color: #fff;
}
.lobby-ad-card:hover::after { border-color: rgba(255, 215, 0, 0.4); }
/* PROMO badge */
.lobby-ad-card .ad-label {
position: absolute;
top: 12px;
right: 12px;
padding: 3px 9px;
background: rgba(255, 215, 0, 0.18);
color: #ffd700;
font-size: 8px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
border: 1px solid rgba(255, 215, 0, 0.35);
border-radius: 10px;
z-index: 2;
backdrop-filter: blur(6px);
}
/* Shimmer overlay (activat la hover) */
.lobby-ad-card .ad-shimmer {
position: absolute;
top: 0;
left: -80%;
width: 55%;
height: 100%;
background: linear-gradient(105deg,
transparent 0%,
rgba(255, 255, 255, 0.06) 45%,
rgba(255, 255, 255, 0.18) 50%,
rgba(255, 255, 255, 0.06) 55%,
transparent 100%);
pointer-events: none;
z-index: 1;
transition: left 0.85s ease;
}
.lobby-ad-card:hover .ad-shimmer { left: 160%; }
/* Iconiță premium cu aureolă */
.lobby-ad-card .ad-icon {
font-size: 56px !important;
color: #ffd700;
margin-top: 16px;
padding: 18px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(255, 215, 0, 0.1) 0%,
transparent 70%);
box-shadow:
0 0 0 1px rgba(255, 215, 0, 0.22),
inset 0 0 22px rgba(255, 215, 0, 0.08);
text-shadow:
0 0 20px rgba(255, 215, 0, 0.55),
0 2px 8px rgba(0, 0, 0, 0.5);
z-index: 1;
animation: adIconFloat 4.5s ease-in-out infinite;
}
.lobby-ad-card .ad-body {
text-align: center;
z-index: 1;
padding: 0 6px;
}
.lobby-ad-card .ad-name {
font-family: 'Oswald', var(--font-display), sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px;
background: linear-gradient(180deg, #ffe76b 0%, #fff6d2 48%, #c99b2c 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.lobby-ad-card .ad-slogan {
font-size: 11px;
font-weight: 500;
line-height: 1.4;
opacity: 0.82;
color: rgba(255, 255, 255, 0.92);
font-style: italic;
padding: 0 4px;
}
.lobby-ad-card .ad-body::after {
content: '';
display: block;
width: 42px;
height: 1px;
margin: 12px auto 0;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.55), transparent);
}
/* CTA premium */
.lobby-ad-card .ad-cta {
position: relative;
padding: 11px 22px;
border-radius: 22px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #ffd700;
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.14) 0%,
rgba(255, 215, 0, 0.04) 100%);
border: 1px solid rgba(255, 215, 0, 0.4);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
z-index: 1;
transition: all 0.3s;
}
.lobby-ad-card:hover .ad-cta {
background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
color: #1a0a2e;
border-color: #ffd700;
box-shadow:
0 4px 14px rgba(255, 215, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transform: scale(1.06);
}
@keyframes adFlipIn {
0% { opacity: 0; transform: rotateY(-135deg) scale(0.85); }
55% { opacity: 1; }
100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}
@keyframes adFlipOut {
0% { opacity: 1; transform: rotateY(0deg) scale(1); }
100% { opacity: 0; transform: rotateY(135deg) scale(0.85); }
}
@keyframes adIconFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(2deg); }
}
/* Per-game gradients */
.lobby-ad-card[data-game="septica"] { background: linear-gradient(135deg, #1e4d2e 0%, #0d3d20 60%, #082a16 100%); }
.lobby-ad-card[data-game="tabinet"] { background: linear-gradient(135deg, #7a1626 0%, #4f0a17 60%, #33060f 100%); }
.lobby-ad-card[data-game="table"] { background: linear-gradient(135deg, #5c3a1e 0%, #3a2310 60%, #221507 100%); }
.lobby-ad-card[data-game="video-poker"] { background: linear-gradient(135deg, #1e3a7a 0%, #0f2555 60%, #081638 100%); }
.lobby-ad-card[data-game="macao"] { background: linear-gradient(135deg, #5a1f7a 0%, #3a0f5a 60%, #220738 100%); }
/* ── Room Card ── */
.lobby-card {
display: flex;
flex-direction: column;
gap: clamp(4px, 0.8vw, 6px);
padding: clamp(7px, 1.4vw, 10px);
padding-left: clamp(11px, 2vw, 14px);
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: clamp(6px, 1.2vw, 10px);
position: relative;
overflow: hidden;
cursor: default;
transition: all 0.25s ease;
}
/* State stripe (left) */
.lobby-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
border-radius: 3px 0 0 3px;
}
.lobby-card.lc-waiting::before { background: var(--remi-success); }
.lobby-card.lc-playing::before { background: #f59e0b; }
.lobby-card.lc-full::before { background: #6b7280; }
/* Clickable hover */
.lobby-card.lc-clickable { cursor: pointer; }
.lobby-card.lc-clickable:hover {
background: rgba(var(--remi-accent-rgb), 0.06);
border-color: rgba(var(--remi-accent-rgb), 0.2);
transform: translateY(-2px) perspective(600px) rotateX(1deg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 12px rgba(var(--remi-accent-rgb), 0.1);
}
.lobby-card.lc-clickable:active {
transform: translateY(0);
}
/* Waiting rooms pulse */
.lobby-card.lc-waiting {
animation: card-entrance 0.4s ease-out both, waiting-glow 2.5s ease-in-out infinite;
}
/* Card entering/leaving with stagger */
.lobby-card.lc-entering { animation: lobbyCardIn 0.3s ease both; }
.lobby-card.lc-entering:nth-child(1) { animation-delay: 0ms; }
.lobby-card.lc-entering:nth-child(2) { animation-delay: 40ms; }
.lobby-card.lc-entering:nth-child(3) { animation-delay: 80ms; }
.lobby-card.lc-entering:nth-child(4) { animation-delay: 120ms; }
.lobby-card.lc-entering:nth-child(5) { animation-delay: 160ms; }
.lobby-card.lc-entering:nth-child(6) { animation-delay: 200ms; }
.lobby-card.lc-entering:nth-child(7) { animation-delay: 240ms; }
.lobby-card.lc-entering:nth-child(8) { animation-delay: 280ms; }
.lobby-card.lc-entering:nth-child(9) { animation-delay: 320ms; }
.lobby-card.lc-leaving { opacity: 0; transform: scale(0.95); pointer-events: none; }
/* Lobby shimmer refresh effect */
@keyframes lobbyShimmer {
0% { left: -100%; }
100% { left: 100%; }
}
.lobby-grid.lobby-refreshing .lobby-card::after {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(var(--remi-accent-rgb), 0.06), transparent);
animation: lobbyShimmer 1.5s ease infinite;
pointer-events: none;
border-radius: inherit;
}
/* Card top: host info + action */
.lobby-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.lobby-card-host {
display: flex;
align-items: center;
gap: clamp(5px, 1vw, 6px);
min-width: 0;
flex: 1;
}
.lobby-card-avatar {
width: clamp(24px, 4vw, 28px);
height: clamp(24px, 4vw, 28px);
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.15);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: clamp(11px, 2vw, 13px);
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
line-height: 1;
}
.lobby-card-info {
min-width: 0;
flex: 1;
}
.lobby-card-name {
font-size: clamp(11px, 2.2vw, 12px);
font-weight: 700;
color: var(--remi-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.lobby-card-room {
font-size: clamp(10px, 2vw, 11px);
color: var(--remi-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lobby-card-room .lc-lock { font-size: 10px; }
.lc-pts {
margin-left: 6px;
font-size: 10px;
font-weight: 700;
color: var(--remi-accent);
opacity: 0.85;
}
/* Card meta: chips + dots */
.lobby-card-meta {
display: flex;
align-items: center;
gap: clamp(4px, 0.8vw, 6px);
flex-wrap: wrap;
}
.lc-chip {
font-size: clamp(9px, 1.8vw, 10px);
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
background: var(--glass-bg-strong);
color: var(--remi-text-dim);
white-space: nowrap;
}
.lc-chip .material-symbols-rounded {
animation: star-twinkle 3s ease-in-out infinite;
}
.lc-dots {
display: flex;
align-items: center;
gap: 3px;
}
.lc-dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: 1.5px solid var(--remi-text-muted);
background: transparent;
transition: all 0.2s;
}
.lc-dot.on {
background: var(--remi-accent);
border-color: var(--remi-accent);
box-shadow: 0 0 4px rgba(var(--remi-accent-rgb), 0.3);
}
/* Action button */
.lobby-card-action { flex-shrink: 0; }
.lc-action-btn {
padding: clamp(4px, 0.8vw, 6px) clamp(8px, 1.6vw, 12px);
border-radius: clamp(5px, 0.8vw, 7px);
font-size: clamp(9px, 1.8vw, 11px);
font-weight: 700;
border: none;
cursor: pointer;
touch-action: manipulation;
transition: all 0.2s;
white-space: nowrap;
font-family: inherit;
}
.lc-action-btn.lc-join {
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-dark));
color: white;
}
.lc-action-btn.lc-join:hover {
box-shadow: 0 2px 10px rgba(var(--remi-accent-rgb), 0.3);
}
.lc-action-btn.lc-spectate {
background: rgba(255, 255, 255, 0.06);
color: var(--remi-text-dim);
border: 1px solid var(--glass-border);
}
.lc-action-btn.lc-spectate:hover {
background: rgba(255, 255, 255, 0.1);
}
.lc-status-label {
font-size: clamp(10px, 2vw, 11px);
font-weight: 600;
color: var(--remi-text-muted);
padding: clamp(5px, 1vw, 7px) clamp(8px, 1.5vw, 10px);
}
/* Status badges */
.lc-badge {
font-size: clamp(8px, 1.6vw, 9px);
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
vertical-align: middle;
white-space: nowrap;
letter-spacing: 0.02em;
}
.lc-badge-open {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.lc-badge-playing {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.lc-badge-full {
background: rgba(107, 114, 128, 0.15);
color: #9ca3af;
}
.lc-status-badge[data-status="playing"] {
animation: badge-pulse 2s ease-in-out infinite;
}
/* Pull-to-refresh indicator */
.lobby-pull-indicator {
height: 0;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.2s, opacity 0.2s;
color: var(--remi-text-muted);
flex-shrink: 0;
}
.lobby-pull-indicator .material-symbols-rounded {
font-size: 22px;
transition: transform 0.3s;
}
.lobby-pull-indicator.ready .material-symbols-rounded {
color: var(--remi-accent);
transform: rotate(180deg);
}
.lobby-pull-indicator.refreshing .material-symbols-rounded {
animation: spin 0.6s linear infinite;
}
/* Report player button */
.report-player-btn {
position: absolute;
top: 2px;
right: 2px;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 4px;
color: #ef4444;
cursor: pointer;
padding: 2px 3px;
line-height: 1;
transition: all 0.2s;
z-index: 2;
opacity: 0.6;
}
.report-player-btn:hover {
background: rgba(239, 68, 68, 0.3);
border-color: rgba(239, 68, 68, 0.6);
opacity: 1;
}
/* ── Empty State ── */
.lobby-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(40px, 8vw, 80px) clamp(20px, 4vw, 40px);
text-align: center;
flex: 1;
}
.lobby-empty-icon {
font-size: clamp(48px, 10vw, 72px);
opacity: 0.2;
}
.lobby-empty-title {
font-size: clamp(14px, 3vw, 18px);
color: var(--remi-text-dim);
margin-top: 12px;
font-weight: 600;
}
.lobby-empty-sub {
font-size: clamp(12px, 2.5vw, 14px);
color: var(--remi-text-muted);
margin-top: 4px;
}
/* ── Pagination ── */
.lobby-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 0;
}
.lobby-page-btn {
min-width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
color: var(--remi-text-dim);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.lobby-page-btn:hover {
background: rgba(var(--remi-accent-rgb), 0.1);
}
.lobby-page-btn.active {
background: rgba(var(--remi-accent-rgb), 0.15);
border-color: rgba(var(--remi-accent-rgb), 0.3);
color: var(--remi-accent);
}
/* ── Guest Overlay ── */
.lobby-guest-overlay {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(30px, 6vw, 60px);
text-align: center;
gap: 10px;
position: absolute;
inset: 0;
/* fundalul temei, nu violetul scris de mână (17-09-2026) */
background: color-mix(in srgb, var(--remi-bg) 85%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 5;
border-radius: inherit;
}
.lobby-guest-title {
font-size: clamp(14px, 3vw, 18px);
font-weight: 700;
color: var(--remi-text);
}
.lobby-guest-sub {
font-size: clamp(11px, 2.2vw, 13px);
color: var(--remi-text-dim);
}
.lobby-guest-or {
font-size: 11px;
color: var(--remi-text-muted);
}
/* Background gold particles */
.lobby-grid::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(1px 1px at 10% 20%, rgba(var(--remi-accent-rgb), 0.2), transparent),
radial-gradient(1px 1px at 30% 60%, rgba(var(--remi-accent-rgb), 0.15), transparent),
radial-gradient(1px 1px at 50% 40%, rgba(var(--remi-accent-rgb), 0.2), transparent),
radial-gradient(1px 1px at 70% 80%, rgba(var(--remi-accent-rgb), 0.1), transparent),
radial-gradient(1px 1px at 90% 30%, rgba(var(--remi-accent-rgb), 0.15), transparent);
animation: particles-drift 20s linear infinite;
}
/* ================================================================================================
7b. MULTIPLAYER GAME BAR
================================================================================================ */
.mp-game-bar {
display: none;
align-items: center;
gap: 8px;
background: var(--remi-surface);
border-bottom: 1px solid var(--remi-border);
flex-shrink: 0;
}
.mp-game-bar.active {
display: flex;
}
/* Cand mp-game-bar e mutata in top-bar (JS), apare inline intre brand si actions */
.top-bar > .mp-game-bar.active {
padding: 3px 12px;
gap: 10px;
background: rgba(10, 20, 12, 0.55);
border: 1px solid rgba(255, 215, 0, 0.4);
border-bottom: 1px solid rgba(255, 215, 0, 0.4);
border-radius: 16px;
margin: 0 8px;
flex: 0 1 auto;
min-width: 0;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Pe mobile mic, ascunde textul din mp-game-bar — doar iconita */
@media (max-width: 480px) {
.top-bar > .mp-game-bar.active {
padding: 3px 8px;
gap: 6px;
margin: 0 4px;
}
.top-bar > .mp-game-bar.active .mp-game-bar-leave span:not(.material-symbols-rounded),
.top-bar > .mp-game-bar.active .mp-game-bar-info span:not(.material-symbols-rounded) {
display: none;
}
}
/* ═══ MESE BUTTON — premium pill cu arrow + glow la hover ═══ */
.mp-game-bar-leave {
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.08) 0%,
rgba(0, 0, 0, 0.35) 100%);
border: 1px solid rgba(255, 215, 0, 0.22);
color: rgba(255, 235, 180, 0.92);
cursor: pointer;
padding: 5px 12px 5px 8px;
border-radius: 10px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 215, 0, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.3),
0 2px 5px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(6px);
}
/* Shine sweep on top edge */
.mp-game-bar-leave::before {
content: '';
position: absolute;
top: -2px;
left: -60%;
width: 40%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 235, 150, 0.9), transparent);
transition: left 0.6s ease;
pointer-events: none;
}
.mp-game-bar-leave .material-symbols-rounded {
font-size: 16px;
color: rgba(255, 215, 0, 0.85);
transition: transform 0.25s ease, color 0.25s ease;
}
.mp-game-bar-leave:hover {
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.25) 0%,
rgba(0, 0, 0, 0.2) 100%);
border-color: rgba(239, 68, 68, 0.55);
color: #fff;
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 215, 0, 0.18),
0 0 0 1px rgba(239, 68, 68, 0.3),
0 6px 14px rgba(0, 0, 0, 0.4),
0 0 16px rgba(239, 68, 68, 0.25);
}
.mp-game-bar-leave:hover::before { left: 110%; }
.mp-game-bar-leave:hover .material-symbols-rounded {
color: #fca5a5;
transform: translateX(-2px); /* arrow shifts left — inviting "go back" */
}
.mp-game-bar-leave:active {
transform: translateY(0);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.4),
inset 0 -1px 0 rgba(255, 215, 0, 0.1);
}
.mp-game-bar-info {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--remi-text-dim);
}
.mp-game-bar-info .material-symbols-rounded {
font-size: 16px;
}
body.game-active .mp-game-bar-info { color: rgba(255, 215, 0, 0.9); }
/* body.game-active .mp-game-bar-leave — stil custom deja definit mai sus, nu suprascriu */
/* ================================================================================================
8. GAME SETUP VIEW
================================================================================================ */
.game-setup-view {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.setup-card {
background: var(--remi-surface);
border: 1px solid var(--remi-border);
border-radius: var(--remi-radius);
padding: 32px;
width: 100%;
max-width: 420px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.setup-header {
text-align: center;
margin-bottom: 28px;
}
.setup-header h2 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
color: var(--remi-accent);
margin: 0 0 4px;
}
.setup-header p {
font-size: 14px;
color: var(--remi-text-dim);
margin: 0;
}
.setup-section { margin-bottom: 20px; }
.setup-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--remi-text-dim);
margin-bottom: 10px;
}
.setup-label .material-symbols-rounded {
font-size: 16px;
color: var(--remi-accent);
}
/* Player Count Selector */
.player-count-selector,
.difficulty-selector {
display: flex;
gap: 8px;
}
.count-btn,
.diff-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 8px;
background: var(--remi-surface-2);
border: 2px solid transparent;
border-radius: var(--remi-radius-sm);
color: var(--remi-text-dim);
cursor: pointer;
transition: all 0.2s;
font-size: 14px;
font-weight: 600;
font-family: inherit;
}
.count-btn .material-symbols-rounded { font-size: 24px; }
.count-btn:hover,
.diff-btn:hover {
border-color: var(--remi-accent);
color: var(--remi-text);
}
.count-btn.active,
.diff-btn.active {
border-color: var(--remi-accent);
background: var(--remi-accent-glow);
color: var(--remi-accent);
}
.diff-stars {
font-size: 16px;
color: var(--remi-gold);
}
/* Start Button */
.setup-start-btn {
width: 100%;
padding: 14px 24px;
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-light));
border: none;
border-radius: var(--remi-radius-sm);
color: white;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 24px;
transition: all 0.3s;
box-shadow: 0 4px 20px var(--remi-accent-glow);
font-family: inherit;
}
.setup-start-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px var(--remi-accent-glow);
}
.setup-start-btn .material-symbols-rounded { font-size: 24px; }
/* ================================================================================================
9. GAME PLAY VIEW
================================================================================================ */
/* Wrapper — contains everything (green table + action bar) */
.game-table-wrapper {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
gap: 4px;
}
/* ═══ Green table — 4 zone etalare ca joci.ro ═══ */
/* 2026-04-21 DESKTOP LAYOUT v3: 4 ZONE ETALARE VERTICALE sus-pana-jos — fiecare jucator
are coloana lui ingusta (zone1/zone2/zone3/zone4). Sidebar pe coloana 5 (180px).
hand-bot full-width pe ultimele 4 coloane (sub toate zonele, NU sub sidebar).
Mobile @media (max-width: 767px) override-uieste tot, mobilul ramane neatins. */
.game-play-view {
flex: 1;
display: grid;
grid-template-areas:
"zone1 zone2 zone3 zone4 hand-top"
"zone1 zone2 zone3 zone4 hand-top"
"zone1 zone2 zone3 zone4 hand-top"
"zone1 zone2 zone3 zone4 sidebar"
"hand-bot hand-bot hand-bot hand-bot sidebar";
grid-template-columns: 1fr 1fr 1fr 1fr 180px;
/* 2026-04-21 v5: seat-south min 170px garantat ca sa fie mereu COMPLET vizibil
(stativ lemn + piese + info-bar + butoane). Zone etalare primesc cat ramane
(minmax 0 1fr = shrink liber pana 0). Efect: zone putin mai mici, seat-south intreg. */
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(215px, auto);
gap: 4px;
overflow: hidden;
position: relative;
min-height: 0;
/* ═══ Premium felt surface — casino-grade texture ═══ */
background:
/* Spot light — soft center highlight */
radial-gradient(ellipse 80% 50% at 50% 20%, rgba(255,255,240,0.12) 0%, transparent 55%),
/* Deep vignette — darker corners for focus */
radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.28) 100%),
/* Cross-hatched felt fibers — microscopic texture */
repeating-linear-gradient(27deg,
transparent 0, transparent 1.5px,
rgba(0,0,0,0.025) 1.5px, rgba(0,0,0,0.025) 2px),
repeating-linear-gradient(117deg,
transparent 0, transparent 1.5px,
rgba(0,0,0,0.02) 1.5px, rgba(0,0,0,0.02) 2px),
/* Fine noise texture */
repeating-linear-gradient(45deg,
transparent 0, transparent 3px,
rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px),
/* Rich green felt gradient — deeper, more saturated */
linear-gradient(175deg,
#1e7e3a 0%,
#1f8738 18%,
#1c7a34 38%,
#19712e 58%,
#166628 78%,
#12581f 100%);
/* Cadru lemn GROS 12px, 3D realistic */
border: 12px solid #6B4423;
border-top-color: #9B7848;
border-bottom-color: #3d2510;
border-left-color: #7a5530;
border-right-color: #7a5530;
border-radius: 16px;
padding: 6px 8px;
box-shadow:
inset 0 0 40px rgba(0,0,0,0.25),
inset 0 0 8px rgba(0,0,0,0.12),
inset 0 2px 0 rgba(255,255,255,0.04),
0 0 0 1px #2a1808,
0 0 0 3px #B09060,
0 0 0 4px #3d2510,
0 6px 20px rgba(0,0,0,0.5);
}
/* ═══ Centrul mesei — vezi „EMBLEMA MESEI" la finalul fişierului ═══
Aici era o monogramă „R": litera R în Georgia, italică, aur la 2,8%. A fost
înlocuită de pecetea casei (marca JO împletită + „RUMMY ETALAT ROMÂNESC"),
care stă în HTML static în `index.php` ca `#masaEmblema`. Pseudo-elementul
rămâne liber pentru altceva. */
/* Etalare zones si sidebar trebuie sa stea deasupra emblemei */
.game-play-view > * { position: relative; z-index: 1; }
/* ── Seat positions ── */
/* 2026-04-21 DESKTOP: seat-north = coloana dreapta 180px (grid-area: hand-top).
Oponentii se STIVUIESC VERTICAL (flex-direction: column). Overflow-y pentru
safety cand sunt prea multi oponenti. Mobile override-uieste cu !important
in @media (max-width: 767px) sa revina la flex-direction: row horizontal. */
.seat-north {
grid-area: hand-top;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 6px;
flex-shrink: 0;
padding: 2px;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
min-height: 0;
min-width: 0;
}
.seat-north::-webkit-scrollbar { display: none; }
.seat-south {
grid-area: hand-bot;
flex-shrink: 0;
padding: 2px 0;
}
/* ═══ STATIV REMI AUTENTIC — 2 shelves wooden + metal brackets cu rivets (ca pe poza 2D stylized) ═══ */
.seat-south .player-area {
position: relative;
background:
/* 2026-04-21: Shelf separator + grain mutate pe .hand-scroll-wrapper
(ca sa se alinieze cu midpoint-ul tilurilor). Aici ramane DOAR
gradient-ul de baza lemn + un subtle grain pt. restul suprafetei
(info-bar de jos). */
/* GRAIN subtle global */
repeating-linear-gradient(92deg,
transparent 0, transparent 6px,
rgba(70, 35, 15, 0.06) 6px, rgba(70, 35, 15, 0.06) 7px,
transparent 7px, transparent 14px),
/* LEMN BAZA — gradient warm natural */
linear-gradient(180deg,
#d89248 0%,
#c57e30 45%,
#a86520 85%,
#8b5220 100%);
padding: 0 34px; /* loc pt. metal brackets stanga + dreapta */
border: 1px solid #3a1f10;
border-radius: 6px;
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.5),
0 2px 4px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 230, 180, 0.25),
inset 0 -2px 4px rgba(30, 12, 0, 0.3);
/* NU overflow:hidden — brackets ::before/::after sunt absolute si se auto-contin prin
width:34px + padding 34px pe parent. Daca setam hidden, blocam drag ghost-ul peste
marginea stativului cand user trage piesa spre zona de etalare (lipire) */
overflow: visible;
}
/* ═══ METAL BRACKET STÂNGA cu 6 rivets (2 coloane × 3 randuri) ═══ */
.seat-south .player-area::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 34px;
background:
/* 6 RIVETS — 2 coloane (8px + 22px) × 3 randuri (12px, 50%, calc(100%-12px)) */
radial-gradient(circle 3px at 8px 12px,
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 22px 12px,
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 8px 50%,
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 22px 50%,
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 8px calc(100% - 12px),
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 22px calc(100% - 12px),
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
/* METAL walnut gradient pentru bracket */
linear-gradient(90deg,
#1a0b03 0%,
#3a1f10 30%,
#4a2a18 60%,
#3a1f10 100%);
border-radius: 6px 0 0 6px;
border-right: 1px solid rgba(0, 0, 0, 0.45);
box-shadow:
inset 1px 1px 0 rgba(255, 220, 180, 0.15),
inset -2px 0 4px rgba(0, 0, 0, 0.4);
z-index: 2;
pointer-events: none;
}
/* Info bar — light strip on wood, dark text (placed BELOW tiles) */
.seat-south .player-info-bar {
position: relative;
z-index: 2;
background:
linear-gradient(180deg,
rgba(255, 245, 220, 0.45),
rgba(210, 170, 110, 0.35));
border-top: 1px solid rgba(100, 60, 25, 0.35);
box-shadow:
inset 0 1px 0 rgba(255, 255, 240, 0.5),
inset 0 -1px 0 rgba(100, 60, 25, 0.2);
padding: 4px 8px;
}
.seat-south .player-info-bar .player-name-label,
.seat-south .player-info-bar .player-points,
.seat-south .player-info-bar .player-tiles-count {
color: #3a2412;
text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
}
/* 2026-04-21: DUAL-SHELF RACK — 2 rafturi distincte ca in referinta Remi pe Tabla.
Separator dark intre cele 2 randuri de tiles + grain vertical pronuntat + edge highlights.
Shelf-separatorul e aici (pe wrapper = doar inaltime tiles), NU pe player-area (care ar
include si info-bar-ul jos si nu s-ar alinia la midpoint tiluri). */
.seat-south .hand-scroll-wrapper {
position: relative;
z-index: 2;
background:
/* 1. SHELF SEPARATOR — grooved shadow intre cele 2 rafturi, exact la 50% inaltime */
linear-gradient(180deg,
transparent 0%,
transparent calc(50% - 5px),
rgba(40, 18, 5, 0.35) calc(50% - 5px),
rgba(25, 10, 0, 0.75) calc(50% - 2px),
rgba(15, 6, 0, 0.9) 50%,
rgba(25, 10, 0, 0.75) calc(50% + 2px),
rgba(40, 18, 5, 0.35) calc(50% + 5px),
transparent calc(50% + 5px),
transparent 100%),
/* 2. LUCIU pe muchia de sus a fiecarui raft — shine lemn lustruit */
linear-gradient(180deg,
rgba(255, 230, 170, 0.4) 0%,
rgba(255, 230, 170, 0.1) 4%,
transparent 45%,
rgba(255, 225, 160, 0.32) 52%, /* muchia de sus raft 2 */
rgba(255, 225, 160, 0) 58%,
transparent 100%),
/* 3. GRAIN VERTICAL — linii verticale scurte ca pe raftul lui Remi pe Tabla */
repeating-linear-gradient(90deg,
transparent 0, transparent 3px,
rgba(70, 35, 15, 0.18) 3px, rgba(70, 35, 15, 0.18) 4px,
transparent 4px, transparent 9px,
rgba(40, 20, 8, 0.12) 9px, rgba(40, 20, 8, 0.12) 10px,
transparent 10px, transparent 16px,
rgba(90, 50, 25, 0.08) 16px, rgba(90, 50, 25, 0.08) 17px),
/* 4. WOOD BASE — gradient mai saturat ca in referinta */
linear-gradient(180deg,
#d89248 0%,
#c57e30 45%,
#b87228 55%,
#a86520 100%);
box-shadow:
inset 0 2px 4px rgba(80, 50, 25, 0.35),
inset 0 -1px 2px rgba(80, 50, 25, 0.25);
}
.seat-south .player-hand {
padding: 10px 30px 12px;
}
/* ═══ METAL BRACKET DREAPTA cu 6 rivets (mirror la ::before) ═══
Nota: luciul vechi "muchie sus raft" e acum integrat in backgroundul .player-area (highlight top gradient) */
.seat-south .player-area::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 34px;
background:
/* 6 RIVETS — 2 coloane (12px + 26px) × 3 randuri (12px, 50%, calc(100%-12px)) */
radial-gradient(circle 3px at 12px 12px,
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 26px 12px,
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 12px 50%,
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 26px 50%,
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 12px calc(100% - 12px),
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
radial-gradient(circle 3px at 26px calc(100% - 12px),
#0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
/* METAL walnut gradient mirror (invers vs ::before) */
linear-gradient(90deg,
#3a1f10 0%,
#4a2a18 40%,
#3a1f10 70%,
#1a0b03 100%);
border-radius: 0 6px 6px 0;
border-left: 1px solid rgba(0, 0, 0, 0.45);
box-shadow:
inset -1px 1px 0 rgba(255, 220, 180, 0.15),
inset 2px 0 4px rgba(0, 0, 0, 0.4);
z-index: 2;
pointer-events: none;
}
/* G. Colțuri metalice (feronerie) */
.seat-south .player-area > .hand-scroll-wrapper::before,
.seat-south .player-area > .hand-scroll-wrapper::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
top: 4px;
background: radial-gradient(circle at 35% 35%,
#f5d78a 0%,
#b8891f 50%,
#5c4110 100%);
border-radius: 50%;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.6),
0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 3;
pointer-events: none;
}
.seat-south .player-area > .hand-scroll-wrapper::before { left: 6px; }
.seat-south .player-area > .hand-scroll-wrapper::after { right: 6px; }
/* A. Glow pulsatoriu când e rândul jucătorului */
.seat-south .player-area.active-turn {
animation: seatSouthTurnGlow 1.8s ease-in-out infinite;
}
@keyframes seatSouthTurnGlow {
0%, 100% {
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.35),
0 1px 3px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 245, 220, 0.7),
inset 0 -2px 3px rgba(110, 70, 35, 0.25),
inset 0 0 0 1px rgba(140, 95, 50, 0.3),
0 0 0 0 rgba(255, 200, 80, 0.0);
}
50% {
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.4),
0 1px 3px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 245, 220, 0.8),
inset 0 -2px 3px rgba(110, 70, 35, 0.25),
inset 0 0 0 1px rgba(200, 150, 70, 0.5),
0 0 22px 2px rgba(255, 195, 80, 0.55);
}
}
/* B. Contact shadow sub piese pe raft */
.seat-south .player-hand .tile {
box-shadow:
inset 0 .8px 0 rgba(255, 250, 232, .85),
inset .5px 0 0 rgba(255, 250, 235, .4),
inset 0 -.8px 0 rgba(120, 90, 45, .5),
inset -.5px 0 0 rgba(130, 100, 55, .3),
0 0 0 .4px rgba(95, 65, 25, .55),
0 1px 0 rgba(60, 35, 12, .55),
0 3px 5px rgba(60, 35, 15, .42),
0 6px 10px rgba(60, 35, 15, .22);
}
/* I. Hover piesă — ridicare amplificată */
.seat-south .player-hand .tile:hover {
transform: translateY(-6px) scale(1.02);
box-shadow:
inset 0 .8px 0 rgba(255, 250, 232, .9),
inset .5px 0 0 rgba(255, 250, 235, .45),
inset 0 -.8px 0 rgba(120, 90, 45, .5),
inset -.5px 0 0 rgba(130, 100, 55, .3),
0 0 0 .4px rgba(95, 65, 25, .6),
0 4px 6px rgba(60, 35, 15, .48),
0 10px 18px rgba(60, 35, 15, .32);
z-index: 5;
}
.seat-south .player-hand .tile.selected {
/* PRO: lift mic (-6px) + scale subtil (1.04) pentru a se distinge clar
fara a incurca rearanjarea (era -16px inainte, interfera). Border gold
3px + glow pulsant + inner highlight = vizibilitate maxima. */
transform: translateY(-6px) scale(1.04) !important;
border: 3px solid #ffd700 !important;
box-shadow:
0 0 0 2px rgba(255, 215, 0, 0.55),
0 0 18px rgba(255, 215, 0, 0.85),
0 8px 18px rgba(60, 35, 15, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -2px 4px rgba(255, 180, 40, 0.35) !important;
animation: tileSelectedPulse 1.4s ease-in-out infinite;
z-index: 8;
position: relative;
}
.seat-south .player-hand .tile.selected::before {
content: '';
position: absolute;
inset: -5px;
border-radius: 12px;
background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
animation: tileSelectedHalo 1.4s ease-in-out infinite;
}
/* Badge numar selectie (1/2/3) — afisat doar pe meld-uri cu 2+ piese */
.seat-south .player-hand .tile.selected[data-sel-order]::after {
content: attr(data-sel-order);
position: absolute;
top: -10px;
left: -8px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 50%;
background: linear-gradient(180deg, #ffd700 0%, #c08010 100%);
color: #2a1810;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
text-shadow: none;
z-index: 10;
pointer-events: none;
border: 1px solid rgba(80, 50, 20, 0.5);
}
@keyframes tileSelectedPulse {
0%, 100% {
box-shadow:
0 0 0 2px rgba(255, 215, 0, 0.55),
0 0 18px rgba(255, 215, 0, 0.85),
0 8px 18px rgba(60, 35, 15, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -2px 4px rgba(255, 180, 40, 0.35);
}
50% {
box-shadow:
0 0 0 3px rgba(255, 230, 80, 0.8),
0 0 26px rgba(255, 220, 40, 1),
0 10px 22px rgba(60, 35, 15, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -2px 6px rgba(255, 200, 60, 0.55);
}
}
@keyframes tileSelectedHalo {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.12); }
}
/* F. Contor piese — badge circular stilizat */
.seat-south .player-info-bar .player-tiles-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 11px;
background: linear-gradient(180deg, #fff5dc 0%, #d4a76a 100%);
color: #3a2412;
font-weight: 700;
font-size: 12px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(90, 55, 30, 0.3),
0 1px 2px rgba(0, 0, 0, 0.3);
text-shadow: none;
}
/* D. Penalty în mână — afișaj puncte penalizare */
.seat-south .player-hand-penalty {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
border-radius: 10px;
background: rgba(255, 245, 220, 0.3);
border: 1px solid rgba(100, 60, 25, 0.3);
font-size: 11px;
font-weight: 600;
color: #3a2412;
transition: all 0.2s ease;
}
.seat-south .player-hand-penalty.penalty-low { background: rgba(120, 180, 80, 0.35); border-color: rgba(60, 110, 30, 0.5); }
.seat-south .player-hand-penalty.penalty-med { background: rgba(230, 180, 60, 0.35); border-color: rgba(140, 100, 30, 0.5); }
.seat-south .player-hand-penalty.penalty-high { background: rgba(220, 80, 50, 0.35); border-color: rgba(130, 40, 25, 0.5); color: #4a0f0a; }
/* E. Sugestie etalare (bec) — afișat doar când are combinații valide */
.seat-south .etalare-hint {
display: none;
font-size: 16px;
line-height: 1;
filter: drop-shadow(0 0 4px rgba(255, 215, 50, 0.85));
animation: hintPulse 1.2s ease-in-out infinite;
cursor: pointer;
user-select: none;
}
.seat-south .etalare-hint.visible { display: inline-block; }
@keyframes hintPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 215, 50, 0.8)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255, 220, 80, 1)); }
}
/* J. Animație piesă nou trasă (slide in din dreapta) */
.seat-south .player-hand .tile.tile-just-drawn {
animation: tileJustDrawn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes tileJustDrawn {
0% {
transform: translateX(120%) translateY(-18px) rotate(8deg);
opacity: 0;
}
60% {
transform: translateX(-4%) translateY(-4px) rotate(-2deg);
opacity: 1;
}
100% {
transform: translateX(0) translateY(0) rotate(0);
opacity: 1;
}
}
/* K. Animație sortare (FLIP-like fade + slide) */
.seat-south .player-hand.sorting .tile {
animation: tileSortReflow 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes tileSortReflow {
0% { opacity: 0.35; transform: scale(0.9); }
60% { opacity: 1; transform: scale(1.03); }
100% { opacity: 1; transform: scale(1); }
}
/* L. Piesă OBLIGATORIU de folosit (ruptă din defaussa) — glow aurio-portocaliu pulsant */
.seat-south .player-hand .tile.tile-must-use {
box-shadow:
0 0 0 2px rgba(255, 170, 40, 0.85),
0 0 14px rgba(255, 180, 60, 0.75),
0 3px 10px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
animation: tileMustUsePulse 1.6s ease-in-out infinite;
z-index: 3;
position: relative;
}
.seat-south .player-hand .tile.tile-must-use::after {
content: '!';
position: absolute;
top: -8px;
right: -6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffd866, #ff9c28);
color: #3a1a00;
font-size: 11px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(255, 150, 30, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
pointer-events: none;
animation: tileMustUseBadge 1.6s ease-in-out infinite;
z-index: 4;
}
@keyframes tileMustUsePulse {
0%, 100% {
box-shadow:
0 0 0 2px rgba(255, 170, 40, 0.85),
0 0 12px rgba(255, 180, 60, 0.65),
0 3px 10px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
50% {
box-shadow:
0 0 0 3px rgba(255, 190, 60, 1),
0 0 22px rgba(255, 200, 80, 0.95),
0 3px 14px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
}
@keyframes tileMustUseBadge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
/* ═══ 4 ZONE ETALARE — fiecare jucator la locul lui ═══ */
/* ═══ ETALARE ZONE — tray-style with gold corner accents ═══ */
.etalare-zone {
background:
/* Subtle noise */
repeating-linear-gradient(60deg,
transparent 0, transparent 3px,
rgba(0,0,0,0.02) 3px, rgba(0,0,0,0.02) 4px),
/* Darker felt inset */
linear-gradient(135deg,
rgba(8, 50, 22, 0.55) 0%,
rgba(5, 40, 18, 0.7) 100%);
border: 1.5px solid rgba(255, 215, 0, 0.12);
border-radius: 10px;
/* 2026-04-21: padding top redus — labelul e mai subtil (8px font).
Scroll e pe .etalare-scroll (copil intern); labelul ::before ramane fix. */
padding: 18px 6px 6px;
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
/* Masa fixa — scroll e pe wrapper intern .etalare-scroll, NU pe zona */
overflow: hidden;
min-height: 0;
transition: all 0.3s ease;
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.4),
inset 0 0 20px rgba(0, 0, 0, 0.15),
0 1px 0 rgba(255, 255, 255, 0.03);
}
/* 2026-04-21: Wrapper intern — GRUP DUPA GRUP (stacked vertical) + SCROLL VERTICAL.
Rationale profesional (pattern ca Rummikub mobile / joci.ro Remi):
- Fiecare meld = UN RAND (clar vizibil, usor de identificat)
- Piesele din grup stau orizontal in interiorul grupului (grupul are display:flex row by default)
- Grupurile stacked vertical (column) cu gap mic → compact
- Daca grupurile depasesc inaltimea zonei → scroll vertical subtil (scrollbar auriu fin 4px)
- Labelul ::before al .etalare-zone ramane fix in colt (wrapper-ul e non-label container) */
.etalare-scroll {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 3px;
align-items: flex-start;
width: 100%;
min-width: 0;
/* 2026-04-21 FIX DESKTOP SCROLL: min-height:0 obligatoriu pentru ca overflow-y sa
declanseze scrollbar (default flex-item min-height e 'auto' = content size → nu scroll).
flex:1 1 0 cu min-height:0 → wrapperul primeste spatiul disponibil al .etalare-zone
si orice overflow activeaza scrollbarul. */
min-height: 0;
flex: 1 1 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 2px;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 0, 0.35) transparent;
}
.etalare-scroll::-webkit-scrollbar { width: 4px; height: 0; }
.etalare-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.18); border-radius: 2px; }
.etalare-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(255, 215, 0, 0.45), rgba(184, 134, 11, 0.35));
border-radius: 2px;
}
.etalare-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(255, 215, 0, 0.65), rgba(184, 134, 11, 0.55));
}
/* Gold corner brackets — casino tray style */
.etalare-zone::before,
.etalare-zone::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
pointer-events: none;
transition: all 0.3s ease;
}
.etalare-zone::before {
top: 4px;
left: 4px;
border-top: 2px solid rgba(255, 215, 0, 0.35);
border-left: 2px solid rgba(255, 215, 0, 0.35);
border-top-left-radius: 6px;
}
.etalare-zone::after {
bottom: 4px;
right: 4px;
border-bottom: 2px solid rgba(255, 215, 0, 0.35);
border-right: 2px solid rgba(255, 215, 0, 0.35);
border-bottom-right-radius: 6px;
}
/* Player label chip — modern badge */
.etalare-zone > .etalare-label,
.etalare-zone::marker {
display: none;
}
/* Use data-label via a wrapper span (will be added by JS). Fallback: inject via pseudo ::before if no span exists */
/* 2026-04-21: Label subtil — minim vizual, maxim lizibil.
Mai mic (8px), thin (500), fara uppercase, fara letter-spacing exagerat,
ellipsis cand numele depaseste. Background si border abia vizibile. */
.etalare-zone[data-label]:not(:has(.etalare-label))::before {
content: attr(data-label);
position: absolute;
top: 3px;
left: 6px;
width: auto;
height: auto;
max-width: calc(100% - 16px);
padding: 0 5px;
border-radius: 7px;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(184, 134, 11, 0.06));
border: 1px solid rgba(255, 215, 0, 0.18) !important;
font-size: 8px;
font-weight: 500;
line-height: 12px;
color: rgba(255, 235, 180, 0.78);
letter-spacing: 0.1px;
text-transform: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 2;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
pointer-events: none;
}
/* Alternating zone shading for depth */
.etalare-zone-1 { grid-area: zone1; }
.etalare-zone-2 { grid-area: zone2; }
.etalare-zone-3 { grid-area: zone3; }
.etalare-zone-4 { grid-area: zone4; }
/* Zone nefolosite (jucatori sub playerCount) — ascunse complet */
.etalare-zone.zone-unused {
display: none !important;
}
/* ═══ LAYOUT DINAMIC dupa numarul de jucatori ═══
Atributul [data-players="N"] e setat din JS (applyPlayerLayout) la fiecare start.
Grid-ul se rearanjeaza ca sa foloseasca spatiul disponibil eficient. */
/* 2026-04-21 DESKTOP v3 — 4 ZONE ETALARE VERTICALE sus-pana-jos.
Fiecare jucator primeste o coloana ingusta proprie. Sidebar pe ultima coloana (180px).
Seat-south (hand-bot) ocupa doar coloanele zonelor, NU si sidebar-ul.
2026-04-21 FIX CRITIC: wrap in @media (min-width: 768px) — specificitatea
[data-players] (0,2,0) > .game-play-view mobil (0,1,0), deci fara wrap
layout-ul desktop se aplica si pe mobil => mobilul se rupea. Acum doar desktop. */
@media (min-width: 768px) {
/* 2026-04-21 v8: DESKTOP/LAPTOP — toata pagina se vede FARA SCROLL.
Zone 2x2 compacte, seat-south + action-bar garantat vizibile.
grid-rows: auto top rows + 1fr pentru zones (adaptiv) + auto hand-bot.
Zonele NU mai sunt tuburi verticale lungi.
FIX v8: padding-bottom .main-content redus de la 140 -> 20 cand joci activ.
nav-rail-ul are z-index ridicat si poate overlay-ui un 20px fara probleme.
Recuperez 120px spatiu pt zone etalare. */
/* CRITICAL: game-area, wrapper, play-view constraints ca sa FIT viewport */
.game-area {
max-height: 100vh !important;
height: 100%;
overflow: hidden !important;
}
.game-table-wrapper {
flex: 1 1 0 !important;
min-height: 0 !important;
max-height: 100%;
overflow: hidden !important;
}
.game-play-view {
flex: 1 1 0 !important;
min-height: 0 !important;
max-height: 100%;
}
.action-bar.action-bar-v2 {
flex-shrink: 0 !important;
max-height: 70px;
}
/* FIX v9 CRITIC: nav-rail e fixed bottom cu h=93px. Daca padding-bottom
e mai mic, nav-rail OVERLAY-uieste action-bar-ul cu butoanele
(TRAGE/ETALEAZA/LIPI/X) — user nu le vede. Fix: padding exact 93px
ca action-bar sa se termine fix unde incepe nav-rail.
Header sus 48px + content 502px + nav 93px = 643px viewport fit. */
body.game-active .main-content,
body.mp-game-active .main-content {
padding-bottom: 93px !important;
}
/* FIX v10 SIZE-UP: game-play-view avea width natural ~683px + margin auto
(centrat in game-table-wrapper 1184px). Zonele erau MICI.
Fix: width 100% pe game-play-view cand joc activ — umple TOT
containerul disponibil (stanga/dreapta pentru reclame raman la nivel
de app-container 1200px, NU afectate). */
body.game-active .game-play-view,
body.mp-game-active .game-play-view {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
/* FIX v18 DESKTOP LAYOUT — FINAL testat in browser:
- Opponentii: 180×75 cu NUME COMPLET (max-width 130, nu mai e trunchiat la "s...")
- Info 2 randuri wrap (avatar+nume sus, timer+pct+tiles jos) = 36px total
- Hand oponenti 26px (spate piese vizibile)
- Sidebar: 253px (toate sectiunile piles+discard+log vizibile)
- Hand-bot: 168px (hand-scroll 125 + info-bar 40 + margins 3)
- Info-bar: 40px cu toate 5 butoane + 5 module
Nume vizibile complet: sbot_laura14, sbot_dan11, sbot_simona16. */
/* PlayView: padding redus ca sa facem loc la grid content */
body.game-active .game-play-view,
body.mp-game-active .game-play-view {
padding: 6px !important;
}
/* seat-north devine transparent la grid — opponentii devin direct grid-children */
body.game-active .seat-north,
body.mp-game-active .seat-north {
display: contents !important;
}
/* Opponent seats mapped to stacked grid areas (opp1/opp2/opp3) */
body.game-active .opponent-area[data-seat="north"],
body.mp-game-active .opponent-area[data-seat="north"] {
grid-area: opp1 !important;
}
body.game-active .opponent-area[data-seat="east"],
body.mp-game-active .opponent-area[data-seat="east"] {
grid-area: opp2 !important;
}
body.game-active .opponent-area[data-seat="west"],
body.mp-game-active .opponent-area[data-seat="west"] {
grid-area: opp3 !important;
}
/* Opponent card: 180×75, info wrap 2 randuri, NUMELE COMPLET vizibil.
Specificitate (0,3,1) bate rule-ul @media cu min-height 86 din baza. */
body.game-active .game-play-view .opponent-area,
body.mp-game-active .game-play-view .opponent-area {
width: 100% !important;
max-width: 180px !important;
margin: 0 !important;
box-sizing: border-box !important;
min-height: 0 !important;
max-height: 75px !important;
height: 75px !important;
padding: 4px 6px !important;
gap: 3px !important;
overflow: hidden !important;
}
body.game-active .game-play-view .opponent-area .opponent-info,
body.mp-game-active .game-play-view .opponent-area .opponent-info {
font-size: 10px !important;
row-gap: 1px !important;
column-gap: 4px !important;
padding: 0 !important;
max-height: 36px !important;
flex-wrap: wrap !important;
overflow: hidden !important;
align-items: center !important;
align-content: flex-start !important;
}
body.game-active .game-play-view .opponent-area .opponent-hand,
body.mp-game-active .game-play-view .opponent-area .opponent-hand {
max-height: 26px !important;
min-height: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(255,215,0,0.3) transparent !important;
}
body.game-active .game-play-view .opponent-area .opponent-hand::-webkit-scrollbar,
body.mp-game-active .game-play-view .opponent-area .opponent-hand::-webkit-scrollbar {
height: 3px !important;
display: block !important;
}
body.game-active .game-play-view .opponent-area .opponent-hand::-webkit-scrollbar-thumb,
body.mp-game-active .game-play-view .opponent-area .opponent-hand::-webkit-scrollbar-thumb {
background: rgba(255,215,0,0.3) !important;
border-radius: 2px !important;
}
/* Nume opponent — COMPLET vizibil (max 130 > avg bot name 12 chars × 8px = 96). */
body.game-active .game-play-view .opponent-area .opponent-name,
body.mp-game-active .game-play-view .opponent-area .opponent-name {
font-size: 11px !important;
font-weight: 600 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 130px !important;
}
body.game-active .game-play-view .opponent-area .seat-avatar,
body.mp-game-active .game-play-view .opponent-area .seat-avatar {
width: 20px !important;
height: 20px !important;
}
/* v19 — ETALARE VERTICALA: 4 zone side-by-side (1fr x 4), fiecare tall column.
Dubleaza spatiul vertical per zona (de la ~150px la ~300px).
Oponentii + sidebar raman pe coloana 5 (180px fix). */
/* 2 jucatori: 4 zone etalare verticale + 1 oponent + sidebar + hand-bot. */
.game-play-view[data-players="2"] {
grid-template-areas:
"zone1 zone2 zone3 zone4 opp1"
"zone1 zone2 zone3 zone4 sidebar"
"zone1 zone2 zone3 zone4 sidebar"
"zone1 zone2 zone3 zone4 sidebar"
"hand-bot hand-bot hand-bot hand-bot sidebar" !important;
grid-template-columns: 1fr 1fr 1fr 1fr 180px !important;
grid-template-rows: 75px 1fr 1fr 1fr 168px !important;
row-gap: 5px !important;
}
/* 3 jucatori: 4 zone etalare verticale + 2 oponenti + sidebar + hand-bot. */
.game-play-view[data-players="3"] {
grid-template-areas:
"zone1 zone2 zone3 zone4 opp1"
"zone1 zone2 zone3 zone4 opp2"
"zone1 zone2 zone3 zone4 sidebar"
"zone1 zone2 zone3 zone4 sidebar"
"hand-bot hand-bot hand-bot hand-bot sidebar" !important;
grid-template-columns: 1fr 1fr 1fr 1fr 180px !important;
grid-template-rows: 75px 75px 1fr 1fr 168px !important;
row-gap: 5px !important;
}
/* 4 jucatori: 4 zone etalare verticale + 3 oponenti + sidebar + hand-bot. */
.game-play-view[data-players="4"] {
grid-template-areas:
"zone1 zone2 zone3 zone4 opp1"
"zone1 zone2 zone3 zone4 opp2"
"zone1 zone2 zone3 zone4 opp3"
"zone1 zone2 zone3 zone4 sidebar"
"hand-bot hand-bot hand-bot hand-bot sidebar" !important;
grid-template-columns: 1fr 1fr 1fr 1fr 180px !important;
grid-template-rows: 75px 75px 75px 80px 168px !important;
row-gap: 5px !important;
}
/* Seat-south: ZERO scroll — content (hand + info-bar) fit natural in 168. */
body.game-active .seat-south,
body.mp-game-active .seat-south {
overflow: visible !important;
min-height: 0 !important;
max-height: none !important;
}
/* Sidebar: overflow-y:auto → piles+discard+log accesibile prin scroll auriu 4px. */
body.game-active .remi-sidebar,
body.mp-game-active .remi-sidebar,
body.game-active .game-sidebar,
body.mp-game-active .game-sidebar {
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 6px !important;
gap: 6px !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(255,215,0,0.4) transparent !important;
}
body.game-active .remi-sidebar::-webkit-scrollbar,
body.mp-game-active .remi-sidebar::-webkit-scrollbar,
body.game-active .game-sidebar::-webkit-scrollbar,
body.mp-game-active .game-sidebar::-webkit-scrollbar {
width: 4px !important;
}
body.game-active .remi-sidebar::-webkit-scrollbar-thumb,
body.mp-game-active .remi-sidebar::-webkit-scrollbar-thumb,
body.game-active .game-sidebar::-webkit-scrollbar-thumb,
body.mp-game-active .game-sidebar::-webkit-scrollbar-thumb {
background: rgba(255,215,0,0.4) !important;
border-radius: 2px !important;
}
/* Info-bar: 1 rand, NOWRAP, NO SCROLL, 40px total — selector cu specificitate
extra (merged-actions + body prefix) ca sa bata rule-urile de la ~18953 + 19099. */
/* (banda nu mai e un flex cu nowrap şi înălţime fixă: e o grilă de trei zone,
cu mărimi fluide — vezi secţiunea de la finalul fişierului) */
/* Modules compacte — MICI ca sa incapa tot (v20.1). */
body.game-active .seat-south .player-info-bar .player-module,
body.mp-game-active .seat-south .player-info-bar .player-module {
padding: 1px 3px !important;
font-size: 9px !important;
gap: 2px !important;
max-height: 30px !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* v20.2 — Reguli UNIFICATE (migrate din Block B @19174 pentru a preveni conflictele).
Acopera: avatar/nume/tiles-count/hand-penalty/etalare-hint pe info-bar 40px. */
/* Sort buttons (palette, sort, layers in player-module-sort) — COMPACT + GRUP UNIT */
body.game-active .seat-south .player-info-bar .sort-buttons,
body.mp-game-active .seat-south .player-info-bar .sort-buttons {
gap: 0 !important;
display: flex !important;
}
body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn,
body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn {
min-width: 0 !important;
width: 26px !important;
height: 26px !important;
padding: 1px 2px !important;
font-size: 9px !important;
border-radius: 0 !important;
border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
}
/* Primul sort-btn — rounded stanga, fara border-left (NU setam box-shadow ca sa nu stricam :hover/:focus/:active) */
body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn:first-child,
body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn:first-child {
border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;
border-left: none !important;
}
/* Ultimul sort-btn — rounded dreapta (NU setam box-shadow ca sa nu stricam :hover/:focus/:active) */
body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn:last-child,
body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn:last-child {
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important;
}
body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn .material-symbols-rounded,
body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn .material-symbols-rounded {
font-size: 14px !important;
}
/* Action buttons (download=TRAGE, layers=ETALEAZĂ, add_box=LIPI, upload, star)
Specificity war: rule-ul de la ~19099 .seat-south .player-info-bar.merged-actions
.action-in-infobar (0,4,0) forteaza min-width 90 + height 44 + flex 1 1 0.
Scriu cu body prefix + .merged-actions → (0,5,1) ca sa bat (0,5,0) primary. */
/* Hide keyboard shortcut hints (E/T/R) — redundante pe desktop, face loc */
/* ═══ v20 — GRUPARE BUTOANE ACTIUNE SEAT-SOUTH ═══
User: "grupeaza toate butoanele user sud"
Structura info-bar: [identity][timer][stats][hints][sort] | [Trage][Etaleaza][Lipi][Arunca][Atu]
Efect: butoanele de actiune formeaza un TOOLBAR UNITAR — lipite intre ele (gap 0),
aliniate la dreapta (margin-left:auto pe primul), frame auriu comun (inset box-shadow)
si colturile exterioare rotunjite doar pe primul (stanga) + ultimul (dreapta).
Separare clara fata de modulele info (care raman in stanga cu gap 3px intre ele). */
/* PRIMUL buton de actiune (dupa un player-module) — push grupul la dreapta,
corners rounded stanga, margin zero dreapta catre urmatorul buton. */
/* (butoanele lipite ca un segment unic au ieşit: acţiunile sunt acum jetoane
rotunde, separate, în zona din dreapta a grilei — vezi finalul fişierului) */
/* ZERO box-shadow !important pe butoane — ca sa nu blocheze :hover/:focus/:active
care au propriile box-shadow in remi-pro.css linii 7317-7330, 19875, 19953, 20119.
Gruparea vizuala se face DOAR prin border-radius + margin negative + border-left. */
/* ═══ v20.3 (2026-04-22) — IMMERSIVE MODE OVERRIDE DESKTOP ═══
User: "focus buton nu face acelasi lucru cum face in lobby si in masa de joc —
el trebuie sa hide header si footer si sa mareasca".
Root cause: regulile Block A (body.game-active .main-content { padding-bottom: 93px })
au specificitate (0,2,0) egala cu regulile immersive de la linia 1554 dar sunt
mai jos in fisier, deci castiga source-order. Rezultat: nav-rail si top-bar
sunt ascunse dar .main-content ramane cu padding-bottom 93px si game-area
nu se expandeaza in spatiul eliberat.
Fix: overrides cu specificitate (0,3,0) via body.immersive-mode.game-active
2026-09-03: adăugat şi LOBBY-ul (`game-menu`). Acoperea doar masa, aşa că
în lobby `.main-content` rămânea cu padding-ul rezervat footerului (măsurat
78px) chiar după ce butonul plutitor ascundea footerul — iar panoul se
oprea cu 141px deasupra marginii de jos. */
body.immersive-mode.game-active .main-content,
body.immersive-mode.mp-game-active .main-content,
body.immersive-mode.game-menu .main-content {
padding: 0 !important;
padding-bottom: 0 !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100vh !important;
max-height: 100dvh !important;
}
body.immersive-mode.game-active .app-container,
body.immersive-mode.mp-game-active .app-container {
padding: 0 !important;
}
body.immersive-mode.game-active .game-play-view,
body.immersive-mode.mp-game-active .game-play-view {
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
body.immersive-mode.game-active .game-canvas,
body.immersive-mode.mp-game-active .game-canvas {
padding: 0 !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100vh !important;
max-height: 100dvh !important;
}
body.immersive-mode.game-active .game-area,
body.immersive-mode.mp-game-active .game-area {
max-height: 100dvh !important;
height: 100% !important;
}
body.immersive-mode.game-active .game-table-wrapper,
body.immersive-mode.mp-game-active .game-table-wrapper {
max-height: 100dvh !important;
height: 100% !important;
}
/* v20.3b — GRID EXPAND pe 4P (user-request: "cand joc nu mareste").
Root: la 4P grid-template-rows e 75+75+75+80+168=473px (FIX). Cand user joaca
(not spectator), action-bar-v2 ramane vizibila cu ~20-40px padding empty,
game-play-view ia ~940px, grid e 493px, rezulta ~450px zona verde goala jos.
Fix A: row 4 → 1fr (zone4 + sidebar bottom expandeaza). 2P/3P aveau deja 1fr.
Fix B: action-bar-v2 hidden in immersive (nu e nevoie — butoanele sunt in info-bar
via _remiActionMerge.apply → action-bar-merged pe orice width). */
/* Rândurile imersive (5 la număr) au fost ŞTERSE pe 2026-09-03: aşezarea
de acum are 6 rânduri, iar copia asta o învingea prin specificitate şi
rupea grila. Vezi nota lungă de lângă ariile imersive, mai jos în fişier.
Modul imersiv moşteneşte rândurile normale şi doar creşte în spaţiul
eliberat de header şi footer. */
/* Hide action-bar-v2 in immersive — butoanele TRAGE/ETALEAZA/LIPESTE/ARUNCA/ATU
sunt deja migrate in player-info-bar via _remiActionMerge. Action-bar empty
cu padding gol ocupa 20-40px extra. Ascundem ca sa nu stricam grid height. */
body.immersive-mode.game-active .action-bar.action-bar-v2.action-bar-merged,
body.mp-game-active.immersive-mode .action-bar.action-bar-v2.action-bar-merged,
body.immersive-mode.game-active .action-bar.action-bar-merged,
body.mp-game-active.immersive-mode .action-bar.action-bar-merged {
display: none !important;
}
}
.etalare-zone:hover {
border-color: rgba(255, 215, 0, 0.25);
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.4),
inset 0 0 24px rgba(255, 215, 0, 0.05),
0 1px 0 rgba(255, 255, 255, 0.05);
}
.etalare-zone:hover::before,
.etalare-zone:hover::after {
border-color: rgba(255, 215, 0, 0.55);
}
/* Active turn — glowing gold border */
.etalare-zone.zone-active {
border-color: rgba(255, 215, 0, 0.45);
box-shadow:
inset 0 0 20px rgba(255, 215, 0, 0.12),
inset 0 1px 3px rgba(0, 0, 0, 0.3),
0 0 20px rgba(255, 215, 0, 0.15);
animation: zoneActivePulse 2.2s ease-in-out infinite;
}
.etalare-zone.zone-active::before,
.etalare-zone.zone-active::after {
border-color: rgba(255, 215, 0, 0.8) !important;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
@keyframes zoneActivePulse {
0%, 100% {
box-shadow:
inset 0 0 20px rgba(255, 215, 0, 0.1),
inset 0 1px 3px rgba(0, 0, 0, 0.3),
0 0 15px rgba(255, 215, 0, 0.1);
}
50% {
box-shadow:
inset 0 0 28px rgba(255, 215, 0, 0.18),
inset 0 1px 3px rgba(0, 0, 0, 0.3),
0 0 25px rgba(255, 215, 0, 0.25);
}
}
/* ═══ ZONE-ACTIVE-MINE — flash STRONG cand e RANDUL MEU sa joc ═══
Distinct de zone-active (pulse subtil aplicat la TOT randul curent).
Aplicat doar pe zona MEA (south/myIndex), atrage atentia ca e tura mea. */
.etalare-zone.zone-active-mine {
border-color: #ffd700 !important;
border-width: 2px !important;
animation: zoneActiveMineFlash 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
z-index: 3;
}
.etalare-zone.zone-active-mine::before,
.etalare-zone.zone-active-mine::after {
border-color: #fff8e0 !important;
border-width: 3px !important;
box-shadow: 0 0 14px rgba(255, 215, 0, 0.95) !important;
animation: zoneCornersFlash 1.4s ease-in-out infinite !important;
}
@keyframes zoneActiveMineFlash {
0%, 100% {
box-shadow:
inset 0 0 24px rgba(255, 215, 0, 0.25),
inset 0 1px 3px rgba(0, 0, 0, 0.3),
0 0 18px rgba(255, 215, 0, 0.55),
0 0 0 0 rgba(255, 215, 0, 0.4);
background:
repeating-linear-gradient(60deg,
transparent 0, transparent 3px,
rgba(0,0,0,0.02) 3px, rgba(0,0,0,0.02) 4px),
linear-gradient(135deg,
rgba(20, 80, 35, 0.65) 0%,
rgba(15, 65, 28, 0.78) 100%);
}
50% {
box-shadow:
inset 0 0 36px rgba(255, 215, 0, 0.42),
inset 0 1px 3px rgba(0, 0, 0, 0.3),
0 0 36px rgba(255, 215, 0, 0.85),
0 0 0 6px rgba(255, 215, 0, 0);
background:
repeating-linear-gradient(60deg,
transparent 0, transparent 3px,
rgba(255, 215, 0, 0.04) 3px, rgba(255, 215, 0, 0.04) 4px),
linear-gradient(135deg,
rgba(40, 100, 50, 0.75) 0%,
rgba(30, 85, 40, 0.85) 100%);
}
}
@keyframes zoneCornersFlash {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
/* Label-ul zonei MELE proeminent cand e randul meu */
.etalare-zone.zone-active-mine[data-label]::before,
.etalare-zone.zone-active-mine > .etalare-label {
color: #fff8e0 !important;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.9), 0 1px 2px rgba(0,0,0,0.6) !important;
background: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,180,40,0.15)) !important;
border-color: #ffd700 !important;
}
/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
.etalare-zone.zone-active-mine,
.etalare-zone.zone-active-mine::before,
.etalare-zone.zone-active-mine::after {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
MY-TURN-FLASH — flash sincronizat pe TIMER + BUTOANE + SEAT-SOUTH
cand e randul user-ului. Aplicat pe body pentru reach global.
═══════════════════════════════════════════════════════════════════════ */
/* 1. TIMER (donut) flash auriu pulsant cand e tura mea */
body.my-turn-flash .seat-south .player-timer,
body.my-turn-flash .seat-south .timer-donut {
animation: timerMyTurn 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
border-color: #ffd700 !important;
}
@keyframes timerMyTurn {
0%, 100% {
box-shadow:
0 0 0 0 rgba(255, 215, 0, 0.7),
0 0 8px rgba(255, 215, 0, 0.4);
transform: scale(1);
}
50% {
box-shadow:
0 0 0 8px rgba(255, 215, 0, 0),
0 0 18px rgba(255, 215, 0, 0.85);
transform: scale(1.04);
}
}
/* 2. ACTION BAR — fundal flash subtil pe intregul container actiuni */
body.my-turn-flash .action-bar.action-bar-v2 {
animation: actionBarMyTurn 1.6s ease-in-out infinite;
border-radius: 8px;
}
@keyframes actionBarMyTurn {
0%, 100% { background: transparent; }
50% { background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.06), transparent 70%); }
}
/* 3. SEAT-SOUTH — accent BAR auriu fin (jos pe ramă), nu ring imens
Inlocuieste vechiul ring care acoperea toata tabla — acum doar o bara
subtila luminoasa pe muchia de sus a ramei seat-ului. Plus o "săgeată"
triunghi mic pe muchia stanga ca indicator subtle al rândului. */
body.my-turn-flash .seat-south {
position: relative;
}
body.my-turn-flash .seat-south::after {
content: '';
position: absolute;
top: -1px; left: 8%; right: 8%;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 215, 0, 0.85) 25%,
rgba(255, 235, 150, 1) 50%,
rgba(255, 215, 0, 0.85) 75%,
transparent 100%);
box-shadow:
0 0 10px rgba(255, 215, 0, 0.7),
0 0 18px rgba(255, 200, 60, 0.5);
/* 16-09-2026: apare lin (0,4s), nu brusc, apoi pulsează ca înainte */
animation: joRandulTauApare .4s ease-out both, seatSouthMyTurnBar 1.8s ease-in-out .4s infinite;
pointer-events: none;
z-index: 5;
}
@keyframes joRandulTauApare {
from { opacity: 0; transform: scaleX(.6); }
to { opacity: .65; transform: scaleX(1); }
}
@keyframes seatSouthMyTurnBar {
0%, 100% { opacity: 0.65; transform: scaleX(1); }
50% { opacity: 1; transform: scaleX(1.05); }
}
/* 4. PLAYER-INFO-BAR — SCOS 16-09-2026 (userul: „e un flash când face update masa, se vede urât").
Banda de jos trecea brusc pe auriu la începutul turei şi înapoi la aruncare (la spectator, la
fiecare tură a locului urmărit) — cu boţii, la câteva secunde. Măsurat în peisaj: fără regula asta
banda arată identic pe tura ta şi în afara ei; rândul tău îl arată ceasul şi linia aurie de sus. */
/* 5. Reduce-motion */
@media (prefers-reduced-motion: reduce) {
body.my-turn-flash .seat-south .player-timer,
body.my-turn-flash .seat-south .timer-donut,
body.my-turn-flash .action-bar.action-bar-v2,
body.my-turn-flash .seat-south::after {
animation: none !important;
}
}
/* Has melds — hide bottom-right corner bracket cand sunt melduri efective.
2026-04-21: check-ul vechi `:not(:empty)` nu mai merge pt. ca zona contine
acum wrapper .etalare-scroll permanent. Folosesc :has() pe .table-meld-group. */
.etalare-zone:has(.table-meld-group)::after {
content: none;
}
.etalare-zone .meld-owner-tag,
.etalare-zone .meld-type-label {
display: none;
}
/* Meld groups inside zones — GRUP DUPA GRUP (un rand fiecare) */
/* 2026-04-21: grupurile stacked vertical in .etalare-scroll (flex-direction:column).
Fiecare grup = un rand, piesele intr-un grup stau orizontal.
align-self:flex-start — grupul NU se stretch pe toata latimea (are latime naturala).
max-width:100% — daca grupul are multe piese, nu depaseste zona (protectie). */
.etalare-zone .table-meld-group {
padding: 2px 3px;
gap: 1px;
background: rgba(0, 0, 0, 0.15);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.05);
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-self: flex-start;
max-width: 100%;
width: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
/* 2026-04-21 FIX OVERFLOW: meld cu multe piese (runs A-K, 8-13 tiles) NU incap
in zona inguste (~230px). Activ scroll orizontal + scrollbar VIZIBIL subtle
auriu + fade mask la margine dreapta (hint vizual ca exista overflow).
Touch: swipe orizontal pan-x enabled pe touch devices. */
overflow-x: auto;
overflow-y: visible;
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 0, 0.45) rgba(0, 0, 0, 0.18);
-webkit-overflow-scrolling: touch;
/* Fade mask la margine dreapta — estompeaza piesa de pe margine ca hint
ca exista mai mult content. Mask-ul e inactiv cand nu exista overflow
(piesa finala e in zona completa). */
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 10px), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 10px), transparent 100%);
}
.etalare-zone .table-meld-group::-webkit-scrollbar { height: 3px; }
.etalare-zone .table-meld-group::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.22);
border-radius: 2px;
}
.etalare-zone .table-meld-group::-webkit-scrollbar-thumb {
background: linear-gradient(90deg,
rgba(255, 215, 0, 0.55) 0%,
rgba(184, 134, 11, 0.4) 100%);
border-radius: 2px;
box-shadow: inset 0 1px 0 rgba(255, 245, 200, 0.25);
}
.etalare-zone .table-meld-group::-webkit-scrollbar-thumb:hover {
background: linear-gradient(90deg,
rgba(255, 235, 150, 0.85) 0%,
rgba(255, 215, 0, 0.9) 100%);
}
/* 2026-04-21: Piesele din ZONELE DE ETALARE sunt mai mici (doar de vazut,
nu de jucat — mana jucatorului ramane la dimensiune full).
Pattern de la remi pro mobil: tiles 26×36 in etalare vs 44×60 in mana. */
.etalare-zone .tile {
width: 26px !important;
height: 36px !important;
min-width: 26px !important;
min-height: 36px !important;
font-size: 13px !important;
border-radius: 3px;
}
.etalare-zone .tile .joker-svg {
width: 18px !important;
height: auto !important;
}
/* Zone scrollbar — invisible (touch-friendly scroll) */
.etalare-zone::-webkit-scrollbar { width: 0; height: 0; display: none; }
.etalare-zone::-webkit-scrollbar-track { background: transparent; }
.etalare-zone::-webkit-scrollbar-thumb { background: transparent; }
/* ═══ SIDEBAR dreapta — pile + activity ═══ */
/* ═══ SIDEBAR — premium casino panel ═══ */
.remi-sidebar {
grid-area: sidebar;
display: flex;
flex-direction: column;
gap: 3px;
background:
/* Subtle noise */
repeating-linear-gradient(120deg,
transparent 0, transparent 3px,
rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px),
/* Panel gradient */
linear-gradient(135deg,
rgba(8, 30, 15, 0.75) 0%,
rgba(3, 18, 8, 0.85) 100%);
border: 1px solid rgba(255, 215, 0, 0.12);
border-radius: 10px;
padding: 6px 5px;
overflow: hidden;
min-height: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 0 20px rgba(0, 0, 0, 0.2),
0 2px 6px rgba(0, 0, 0, 0.3);
position: relative;
}
/* Gold top accent line */
.remi-sidebar::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(255, 215, 0, 0.4) 50%,
transparent);
}
.remi-sidebar .pile-area {
display: flex;
flex-direction: row;
gap: 6px;
padding: 8px 4px;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
min-height: 60px;
}
.remi-sidebar .pile-label {
font-size: 8px;
margin-top: 4px;
}
.remi-sidebar .draw-pile {
flex: 1 1 auto;
max-width: 100%;
}
.remi-sidebar .discard-pile {
transform: scale(0.65);
transform-origin: center;
margin: -10px -5px;
}
.remi-sidebar .atu-display {
transform: scale(0.7);
transform-origin: center;
margin: -8px -2px;
}
/* Nota: .activity-log e definit la sectiunea ACTIVITY LOG framed (linia ~4500) */
/* ═══ OPPONENT AREAS — premium card with avatar + glow ═══ */
/* 2026-04-21 DESKTOP: opponents STIVUITI VERTICAL in coloana 180px.
Box = 100% width (umple coloana), flex grow ca fiecare slot sa-si ia parte egala din
spatiu vertical. Tilurile scrolleaza orizontal cand depasesc latimea.
Mobile portrait/landscape override cu !important la flex:1 1 0 + width auto in @media. */
.opponent-area {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 5px;
padding: 7px 10px 8px;
width: 100%;
min-width: 0;
max-width: 100%;
flex: 1 1 0;
min-height: 0;
box-sizing: border-box;
background:
linear-gradient(135deg,
rgba(20, 45, 25, 0.55) 0%,
rgba(10, 30, 15, 0.7) 100%);
border: 1px solid rgba(255, 215, 0, 0.15);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
backdrop-filter: blur(8px) saturate(150%);
-webkit-backdrop-filter: blur(8px) saturate(150%);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Corner accent — subtle gold highlight */
.opponent-area::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 10%,
rgba(255, 215, 0, 0.3) 50%,
transparent 90%);
border-radius: 12px 12px 0 0;
opacity: 0.5;
transition: opacity 0.3s;
}
.opponent-area.active-turn {
border-color: rgba(255, 215, 0, 0.6);
box-shadow:
0 0 0 1px rgba(255, 215, 0, 0.25),
0 0 20px rgba(255, 215, 0, 0.3),
0 4px 12px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 235, 150, 0.15);
animation: active-turn-glow 2s ease-in-out infinite;
background:
linear-gradient(135deg,
rgba(30, 60, 35, 0.7) 0%,
rgba(20, 45, 25, 0.8) 100%);
transform: translateY(-1px);
}
.opponent-area.active-turn::before {
opacity: 1;
background: linear-gradient(90deg,
transparent 5%,
rgba(255, 215, 0, 0.8) 50%,
transparent 95%);
}
.opponent-info {
display: flex;
align-items: center;
gap: 4px; /* gap redus — mai compact */
font-size: 11px; /* font mai mic per CERUT USER */
width: 100%;
font-weight: 600;
flex-wrap: nowrap;
min-width: 0;
color: rgba(255, 245, 200, 0.95);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Opponent avatar — circular badge with gradient */
.opponent-info .opponent-avatar,
.opponent-area .opponent-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg,
var(--color-accent, #ffd700) 0%,
rgba(184, 134, 11, 0.8) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: #1a1a1a;
border: 2px solid rgba(255, 235, 150, 0.4);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
flex-shrink: 0;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.opponent-area.active-turn .opponent-avatar {
transform: scale(1.08);
border-color: rgba(255, 215, 0, 0.9);
box-shadow:
0 0 12px rgba(255, 215, 0, 0.6),
0 2px 4px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
animation: avatarPulse 1.8s ease-in-out infinite;
}
@keyframes avatarPulse {
0%, 100% { transform: scale(1.08); }
50% { transform: scale(1.14); }
}
/* Opponent card count pill */
.opponent-area .tile-count-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: #fff;
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 3;
}
.opponent-name {
font-weight: 600;
color: var(--remi-text);
flex: 0 1 auto; /* permite shrink pt. timer/puncte */
min-width: 0;
max-width: 56px; /* ~6-7 caractere, incape mai mult timer+puncte */
overflow: hidden;
text-overflow: ellipsis; /* ellipsis clar in loc de scroll confuz */
white-space: nowrap;
font-size: 10px; /* CERUT USER: font mai mic pt. opponent name */
letter-spacing: -0.1px;
}
.opponent-name:hover {
max-width: 160px; /* la hover expand pt. a vedea numele complet */
transition: max-width 0.3s ease;
}
.opponent-name::-webkit-scrollbar { display: none; }
/* Mini avatar langa nume (orice seat) */
.seat-avatar {
width: 18px; /* putin mai mic ca sa incap mai mult in info-bar */
height: 18px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255, 215, 0, 0.45);
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.seat-avatar[hidden] { display: none; }
.opponent-tiles-count {
background: #c0392b;
color: white;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 10px;
min-width: 22px;
text-align: center;
}
.opponent-points, .player-points {
background: rgba(255, 215, 0, 0.2);
color: #ffd700;
font-size: 10px; /* font mai mic */
font-weight: 700;
padding: 1px 5px;
border-radius: 8px;
flex-shrink: 0; /* nu se shrink ca sa nu se taie numarul */
border: 1px solid rgba(255, 215, 0, 0.25);
white-space: nowrap;
}
.opponent-status {
font-size: 10px;
color: var(--remi-success);
}
.opponent-hand {
display: flex;
gap: 2px;
justify-content: flex-start;
flex-wrap: nowrap; /* tilurile NU wrap pe mai multe randuri */
overflow-x: auto; /* scroll orizontal daca depasesc latimea */
overflow-y: hidden;
width: 100%;
max-width: 100%;
min-height: 28px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch; /* momentum scroll pe iOS */
}
.opponent-hand::-webkit-scrollbar { display: none; }
/* ═══ OPPONENT TILE BACK — ivory plain (Remi românesc real) ═══ */
/* Piesele reale de Remi sunt plastic ivory uniform, fără logo, fără emblem. */
.opponent-tile-back {
width: 22px;
height: 32px;
border-radius: 3px;
position: relative;
/* Ivory warm — integrat cu rackul, gradient 3-stop */
background: linear-gradient(172deg, #ead7a8 0%, #dcc58a 55%, #c8ad6a 100%);
/* Bevel CRISP la dimensiuni mici — full-pixel, nu sub-pixel */
border: 1px solid #5a3a14;
box-shadow:
inset 0 1px 0 rgba(255, 245, 210, .85),
inset 1px 0 0 rgba(255, 240, 200, .45),
inset 0 -1px 0 rgba(70, 45, 15, .65),
inset -1px 0 0 rgba(100, 70, 30, .45),
0 1px 0 rgba(40, 22, 8, .65),
0 2px 3px rgba(0, 0, 0, .5),
0 4px 7px rgba(0, 0, 0, .28);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}
/* Highlight convex difuz — plastic mat, mai discret */
.opponent-tile-back::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 55% at 38% 25%,
rgba(255, 240, 200, .32) 0%,
transparent 60%);
pointer-events: none;
border-radius: inherit;
z-index: 1;
}
/* Fără ::after — piesele reale nu au logo/emblem pe spate */
.opponent-tile-back::after { display: none; }
/* ================================================================================================
SEAT SPEECH BUBBLES
================================================================================================ */
.seat-bubble {
position: fixed;
pointer-events: none;
max-width: clamp(90px, 28vw, 190px);
padding: clamp(4px, 0.9vh, 7px) clamp(8px, 1.8vw, 13px);
background: linear-gradient(135deg,
rgba(var(--color-primary-rgb), 0.92) 0%,
rgba(var(--color-primary-rgb), 0.97) 100%
);
border: 1px solid rgba(var(--glow-color), 0.4);
border-top: 1px solid rgba(var(--glow-color), 0.55);
border-radius: clamp(8px, 2vw, 12px);
font-size: clamp(9px, 1.8vw, 11px);
font-weight: 500;
color: var(--color-text-primary);
line-height: 1.35;
white-space: normal;
word-break: break-word;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.45),
0 1px 0 rgba(255, 255, 255, 0.08) inset,
var(--glow-xs);
animation: seatBubbleIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
z-index: 150;
}
.seat-bubble::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.seat-bubble-south { transform-origin: bottom center; }
.seat-bubble-north { transform-origin: top center; }
.seat-bubble-east { transform-origin: right center; }
.seat-bubble-west { transform-origin: left center; }
.seat-bubble-south::after {
top: 100%; left: 50%; transform: translateX(-50%);
border-left: 7px solid transparent; border-right: 7px solid transparent;
border-top: 7px solid rgba(var(--color-primary-rgb), 0.95);
}
.seat-bubble-north::after {
bottom: 100%; left: 50%; transform: translateX(-50%);
border-left: 7px solid transparent; border-right: 7px solid transparent;
border-bottom: 7px solid rgba(var(--color-primary-rgb), 0.95);
}
.seat-bubble-east::after {
top: 50%; left: 100%; transform: translateY(-50%);
border-top: 7px solid transparent; border-bottom: 7px solid transparent;
border-left: 7px solid rgba(var(--color-primary-rgb), 0.95);
}
.seat-bubble-west::after {
top: 50%; right: 100%; transform: translateY(-50%);
border-top: 7px solid transparent; border-bottom: 7px solid transparent;
border-right: 7px solid rgba(var(--color-primary-rgb), 0.95);
}
.seat-bubble-east.seat-bubble-top-row,
.seat-bubble-west.seat-bubble-top-row { transform-origin: top center; }
.seat-bubble-east.seat-bubble-top-row::after,
.seat-bubble-west.seat-bubble-top-row::after {
top: auto; right: auto; bottom: 100%; left: 50%; transform: translateX(-50%);
border-top: 7px solid transparent; border-left: 7px solid transparent;
border-right: 7px solid transparent; border-bottom: 7px solid rgba(var(--color-primary-rgb), 0.95);
}
.seat-bubble-name {
display: block;
font-size: 0.75em;
font-weight: 700;
color: var(--color-accent);
margin-bottom: 2px;
letter-spacing: 0.02em;
opacity: 0.9;
}
.seat-bubble-text { display: block; }
.seat-bubble.seat-bubble-out {
animation: seatBubbleOut 0.35s ease-in forwards;
}
/* ── Table Center (hidden — replaced by 4 zones + sidebar) ── */
.table-center {
display: none;
}
.table-main-row {
display: none;
}
/* Zone labels */
.table-zone-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 215, 0, 0.7);
padding: 3px 8px 1px;
flex-shrink: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Pile labels */
.pile-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
margin-top: 2px;
}
/* ── Activity Log — right side ── */
/* ═══ SIDEBAR SECTIONS — unified framed card look ═══ */
.sidebar-section {
background:
linear-gradient(135deg,
rgba(0, 10, 5, 0.6) 0%,
rgba(0, 5, 2, 0.75) 100%);
border: 1px solid rgba(255, 215, 0, 0.1);
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 3px rgba(0, 0, 0, 0.25);
min-height: 0;
}
/* 2026-04-21: REDESIGN SPATIU — Discard primeste MAJORITATEA spatiului vertical
(multi-row grid), Log compresat la fix 100px la baza.
Ierarhie: piles (top fix) → discard (flex:1 mare) → log (bottom fix). */
.sidebar-section-piles {
flex: 0 0 auto; /* dimensiune naturala, fara grow/shrink */
}
.sidebar-section-discard {
flex: 1 1 0; /* ia MAJORITATEA spatiului vertical pt. multi-row grid */
min-height: 110px; /* minim 3 randuri tile + header, ca sa aiba sens */
display: flex;
flex-direction: column;
overflow: hidden; /* scroll e pe .discard-history-strip intern */
}
.sidebar-section-log {
flex: 0 0 auto; /* fix, NU grow — log-ul e secundar, discard prioritar */
max-height: 110px; /* ~5-6 pastile vizibile, scroll pt. restul */
min-height: 0;
overflow: hidden;
}
/* Section header — gold accent with icon + title + controls */
.sidebar-section-header {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 6px;
background:
linear-gradient(180deg,
rgba(255, 215, 0, 0.06) 0%,
rgba(0, 0, 0, 0.2) 100%);
border-bottom: 1px solid rgba(255, 215, 0, 0.12);
flex-shrink: 0;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 215, 0, 0.85);
}
.sidebar-section-header .material-symbols-rounded {
font-size: 13px;
color: rgba(255, 215, 0, 0.6);
}
.sidebar-section-header .section-title {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Discard count badge — mini pill */
.discard-count-badge {
min-width: 18px;
padding: 1px 5px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(184, 134, 11, 0.18));
border: 1px solid rgba(255, 215, 0, 0.4);
font-size: 9px;
font-weight: 800;
color: rgba(255, 235, 180, 0.95);
text-align: center;
letter-spacing: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
/* Expand button */
.section-expand-btn {
width: 16px;
height: 16px;
padding: 0;
background: transparent;
border: none;
border-radius: 3px;
color: rgba(255, 215, 0, 0.5);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
}
.section-expand-btn:hover {
background: rgba(255, 215, 0, 0.15);
color: rgba(255, 235, 180, 1);
}
.section-expand-btn .material-symbols-rounded {
font-size: 12px !important;
color: inherit !important;
}
/* ═══ DISCARD HISTORY STRIP — multi-row GRID cu scroll vertical (desktop) ═══
2026-04-21: Mare upgrade — de la single-row orizontal (~6 tile vizibile)
la grid auto-fill (~6 pe rand × 8+ randuri = 48+ tile vizibile simultan).
Tile-urile se rearanjeaza automat dupa latimea disponibila a sidebar-ului.
Mobile override (portrait+landscape) pastreaza single-row horizontal. */
.discard-history-strip {
flex: 1 1 0;
min-width: 0; /* CRITIC pentru scroll in grid container */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
grid-auto-rows: 30px;
gap: 3px;
padding: 6px 4px 6px 6px;
overflow-x: hidden;
overflow-y: auto;
align-content: flex-start;
justify-content: flex-start;
scroll-behavior: smooth;
min-height: 0; /* eliminat 46px, primeste flex:1 din parinte */
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 0, 0.35) rgba(0, 0, 0, 0.2);
overscroll-behavior: contain;
}
.discard-history-strip::-webkit-scrollbar { width: 4px; height: 4px; }
.discard-history-strip::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); border-radius: 2px; }
.discard-history-strip::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.28);
border-radius: 2px;
}
.discard-history-strip::-webkit-scrollbar-thumb:hover { background: rgba(255, 215, 0, 0.45); }
.discard-history-empty {
font-size: 9px;
color: rgba(255, 255, 255, 0.25);
font-style: italic;
padding: 0 6px;
width: 100%;
text-align: center;
}
/* Mini tile in strip — single-row layout, scroll orizontal */
.discard-history-tile {
flex-shrink: 0;
width: 22px;
height: 30px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.3);
background: linear-gradient(145deg, #ffffff 0%, #fefdf6 40%, #eaddc3 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--font-tile, 'Oswald', sans-serif);
font-weight: 800;
font-size: 13px;
line-height: 1;
position: relative;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
cursor: default;
transition: transform 0.18s;
}
.discard-history-tile:hover { transform: translateY(-2px) scale(1.08); }
.discard-history-tile.color-red { color: #b91c1c; }
.discard-history-tile.color-blue { color: #1e40af; }
.discard-history-tile.color-yellow{ color: #facc15; -webkit-text-stroke: 0.3px #7c5e00; }
.discard-history-tile.color-black { color: #111111; }
.discard-history-tile.color-joker {
background:
/* Damask diamond pattern — identic cu tile-ul mare */
repeating-linear-gradient(45deg,
transparent 0, transparent 2px,
rgba(184, 134, 11, 0.1) 2px, rgba(184, 134, 11, 0.1) 3px),
repeating-linear-gradient(-45deg,
transparent 0, transparent 2px,
rgba(184, 134, 11, 0.1) 2px, rgba(184, 134, 11, 0.1) 3px),
linear-gradient(135deg,
#fff8dc 0%,
#ffecb3 20%,
#ffd700 50%,
#ffb300 80%,
#cc9900 100%);
background-size: 6px 6px, 6px 6px, 100% 100%;
color: #7b4f00;
font-size: 12px;
border: 1px solid #b8860b;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.7),
0 0 4px rgba(255, 215, 0, 0.4);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.25),
0 2px 6px rgba(184, 134, 11, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 0 0 0.5px rgba(255, 215, 0, 0.5);
position: relative;
overflow: hidden;
animation: jokerShimmer 3s ease-in-out infinite;
}
/* Shimmer sweep identic cu .tile.color-joker::after (etalare/mana) */
.discard-history-tile.color-joker::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(115deg,
transparent 30%,
rgba(255, 255, 255, 0.5) 45%,
rgba(255, 235, 150, 0.7) 50%,
rgba(255, 255, 255, 0.5) 55%,
transparent 70%);
background-size: 250% 100%;
background-position: -100% 0;
animation: jokerSweep 2.8s ease-in-out infinite;
pointer-events: none;
mix-blend-mode: overlay;
z-index: 2;
}
.discard-history-tile.color-joker > * {
position: relative;
z-index: 1;
}
.discard-history-tile .mini-dot {
width: 9px;
height: 9px;
border-radius: 50%;
margin-top: 1px;
border: 0.5px solid rgba(0, 0, 0, 0.3);
box-shadow:
inset 0 0.5px 1px rgba(255, 255, 255, 0.4),
inset 0 -0.5px 1px rgba(0, 0, 0, 0.2),
0 0.5px 1px rgba(0, 0, 0, 0.2);
}
.discard-history-tile.color-red .mini-dot {
background: radial-gradient(circle at 35% 30%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%);
border-color: #7f1d1d;
}
.discard-history-tile.color-blue .mini-dot {
background: radial-gradient(circle at 35% 30%, #3b82f6 0%, #1e40af 60%, #1e3a8a 100%);
border-color: #1e3a8a;
}
.discard-history-tile.color-yellow .mini-dot {
background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #facc15 55%, #a16207 100%);
border-color: #854d0e;
}
.discard-history-tile.color-black .mini-dot {
background: radial-gradient(circle at 35% 30%, #4b5563 0%, #111111 60%, #000000 100%);
border-color: #000000;
}
/* Top tile (most recent in wall) — scale moderat, gold glow puls, punct rosu indicator */
.discard-history-tile.is-top {
border: 2px solid #ffd700;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(184, 134, 11, 0.6);
transform: scale(1.05);
animation: discardTopPulse 1.6s ease-in-out infinite;
z-index: 3;
margin: 0 3px;
position: relative;
}
/* Punct rosu indicator ACUM — in colt sus-dreapta, vizibil inauntrul tile-ului */
.discard-history-tile.is-top::before {
content: '';
position: absolute;
top: 1px;
right: 1px;
width: 5px;
height: 5px;
background: radial-gradient(circle at 35% 30%, #ff6060 0%, #dc2626 60%, #7f1d1d 100%);
border: 0.5px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
box-shadow: 0 0 4px rgba(255, 60, 60, 0.85);
animation: discardTopDot 1.2s ease-in-out infinite;
pointer-events: none;
z-index: 4;
}
@keyframes discardTopPulse {
0%, 100% {
border-color: #ffd700;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(184, 134, 11, 0.6);
}
50% {
border-color: #fff3a0;
box-shadow:
inset 0 0 0 1.5px rgba(255, 255, 255, 0.75),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(184, 134, 11, 0.6);
}
}
@keyframes discardTopDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.25); }
}
/* Taken tile (in log but not in wall anymore) — faded DAR TOT VIZIBILA */
.discard-history-tile.is-taken {
opacity: 0.72;
filter: grayscale(0.25) brightness(0.9);
border-style: dashed;
border-color: rgba(255, 160, 160, 0.55);
}
.discard-history-tile.is-taken::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 3px,
rgba(0, 0, 0, 0.18) 3px,
rgba(0, 0, 0, 0.18) 4px
);
border-radius: inherit;
pointer-events: none;
}
/* Recently discarded animation */
.discard-history-tile.just-discarded {
animation: discardSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes discardSlideIn {
0% { transform: translateX(20px) scale(0.7); opacity: 0; }
100% { transform: translateX(0) scale(1); opacity: 1; }
}
/* Breakable tile in modal — current player can take from this depth */
.discard-history-tile.is-breakable {
cursor: pointer;
border-color: rgba(120, 200, 255, 0.7);
border-width: 2px;
box-shadow:
0 0 0 1px rgba(120, 200, 255, 0.35),
0 2px 6px rgba(80, 170, 255, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
animation: breakableHint 2.2s ease-in-out infinite;
}
.discard-history-tile.is-breakable:hover {
transform: translateY(-3px) scale(1.15);
border-color: #40c0ff;
box-shadow:
0 0 0 2px rgba(64, 192, 255, 0.75),
0 4px 12px rgba(64, 192, 255, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
animation: none;
}
.discard-history-tile.is-breakable::before {
content: '↓';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: #40c0ff;
font-weight: 900;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
pointer-events: none;
opacity: 0.85;
}
@keyframes breakableHint {
0%, 100% { box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.35), 0 2px 6px rgba(80, 170, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
50% { box-shadow: 0 0 0 2px rgba(120, 200, 255, 0.6), 0 2px 10px rgba(80, 170, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
}
/* ═══ DISCARD HISTORY MODAL ═══ */
.discard-history-modal {
position: fixed;
inset: 0;
z-index: 9900;
display: flex;
align-items: center;
justify-content: center;
}
.discard-history-modal[hidden] { display: none; }
.discard-history-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.discard-history-modal-card {
position: relative;
background: linear-gradient(135deg,
rgba(20, 30, 15, 0.98) 0%,
rgba(8, 18, 10, 0.99) 100%);
border: 1px solid rgba(255, 215, 0, 0.25);
border-radius: 14px;
width: min(92vw, 560px);
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 215, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.discard-history-modal-header {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 0, 0, 0.2));
border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}
.discard-history-modal-header h3 {
margin: 0;
flex: 1;
font-size: 15px;
color: rgba(255, 235, 180, 0.95);
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.discard-history-modal-header .material-symbols-rounded { color: rgba(255, 215, 0, 0.7); }
.discard-history-modal-close {
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.discard-history-modal-close:hover {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.4);
color: #fff;
}
.discard-history-modal-close .material-symbols-rounded { font-size: 18px; }
.discard-history-modal-body {
flex: 1;
overflow-y: auto;
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Group by turn */
.discard-turn-group {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.25);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.discard-turn-header {
font-size: 11px;
font-weight: 700;
color: rgba(255, 215, 0, 0.7);
text-transform: uppercase;
letter-spacing: 0.4px;
display: flex;
align-items: center;
gap: 6px;
}
.discard-turn-header .turn-player { color: rgba(255, 245, 220, 0.95); }
.discard-turn-header .turn-badge {
padding: 1px 6px;
background: rgba(255, 215, 0, 0.15);
border-radius: 8px;
font-size: 9px;
color: rgba(255, 235, 180, 1);
}
.discard-turn-tiles {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* ═══ ACTIVITY LOG — framed premium ═══ */
.activity-log {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: transparent;
border: none;
border-radius: 0;
}
.activity-log-header {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 6px;
background:
linear-gradient(180deg,
rgba(255, 215, 0, 0.06) 0%,
rgba(0, 0, 0, 0.2) 100%);
border-bottom: 1px solid rgba(255, 215, 0, 0.12);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 215, 0, 0.85);
flex-shrink: 0;
}
.activity-log-header .material-symbols-rounded {
font-size: 13px;
color: rgba(255, 215, 0, 0.6);
}
/* 2026-04-21: Desktop activity log — pastila stil mobile (player galben, actiune cyan,
pill rotunjit cu bg + border). Stiva verticala in sidebar-ul vertical, dar CARD-uri
individuale ca pe mobil (inline-flex pill-shape, nu text simplu). */
.activity-log-body {
flex: 1 1 0;
min-height: 0; /* CRITIC: permite scroll intern fara sa creasca parintele */
overflow-y: auto;
overflow-x: hidden;
padding: 4px 4px 4px 4px;
display: flex;
flex-direction: column;
align-items: flex-start; /* pastila doar la cat are nevoie, nu stretch */
gap: 3px;
}
.activity-log-body::-webkit-scrollbar { width: 3px; }
.activity-log-body::-webkit-scrollbar-track { background: transparent; }
.activity-log-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 2px;
}
.activity-log-entry {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: 3px;
flex-shrink: 0;
padding: 3px 7px;
font-size: 10px;
line-height: 1.15;
white-space: nowrap;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 5px;
color: rgba(255, 255, 255, 0.95);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
transition: background 160ms ease, border-color 160ms ease;
}
.activity-log-entry:hover {
background: rgba(255, 215, 0, 0.10);
border-color: rgba(255, 215, 0, 0.25);
}
/* Elimin stripe-ul alternat — pastilele sunt uniforme ca pe mobil */
.activity-log-entry:nth-child(odd) {
background: rgba(255, 255, 255, 0.08);
}
.activity-log-entry .log-player-name {
font-weight: 700;
color: #FFD94A; /* galben ca pe mobil */
font-size: 10px;
}
.activity-log-entry .log-action-type {
color: #8FE0F5; /* cyan ca pe mobil */
font-weight: 600;
font-size: 10px;
}
.activity-log-entry .log-details {
color: rgba(255, 255, 255, 0.78);
font-size: 10px;
opacity: 0.92;
}
/* Highlight intrarea cea mai noua (ultimul copil adaugat) */
.activity-log-entry:last-child {
background: linear-gradient(180deg, rgba(255,215,0,0.12), rgba(255,215,0,0.06));
border-color: rgba(255, 215, 0, 0.28);
box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.08) inset;
}
.activity-log-empty {
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
padding: 8px 4px;
font-style: italic;
align-self: stretch; /* forteaza width 100% ca sa se centreze textul */
width: 100%;
}
/* ── Hand Scroll Arrows ── */
.hand-scroll-wrapper {
position: relative;
display: flex;
align-items: center;
}
.hand-scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 28px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
/* Red arrows like reference */
background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
border: 2px solid #a93226;
border-radius: 6px;
color: #fff;
cursor: pointer;
transition: all 0.2s;
font-size: 16px;
opacity: 0;
pointer-events: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.hand-scroll-arrow.visible {
opacity: 1;
pointer-events: auto;
}
.hand-scroll-arrow:hover {
background: linear-gradient(180deg, #ff5c4c, #e74c3c);
border-color: #e74c3c;
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5);
}
.hand-scroll-arrow.scroll-left {
left: 2px;
}
.hand-scroll-arrow.scroll-right {
right: 2px;
}
.hand-scroll-arrow .material-symbols-rounded {
font-size: 18px;
}
/* Table Melds Area — left side ~55-60% */
.table-melds-area {
flex: 3;
min-height: 60px;
background: rgba(34, 120, 50, 0.5);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
overflow: hidden;
position: relative;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
}
.table-melds-scroll {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
/* 2026-04-20: masa fixa → no scroll */
overflow: hidden;
max-height: 100%;
align-content: flex-start;
}
.table-melds-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.table-meld-group {
display: flex;
gap: 2px;
padding: 4px 6px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
position: relative;
transition: all 0.2s;
cursor: pointer;
}
.table-meld-group:hover {
border-color: var(--remi-accent);
}
.table-meld-group.highlight-attach {
border-color: var(--remi-success);
box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
cursor: pointer;
position: relative;
}
.meld-owner-tag {
position: absolute;
top: -8px;
left: 4px;
font-size: 9px;
font-weight: 600;
background: rgba(0, 50, 20, 0.85);
padding: 0 4px;
border-radius: 4px;
color: rgba(255, 255, 255, 0.7);
}
.meld-type-label {
position: absolute;
bottom: -8px;
right: 4px;
font-size: 8px;
font-weight: 600;
background: rgba(0, 50, 20, 0.85);
padding: 0 4px;
border-radius: 4px;
color: #ffd700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.table-melds-empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 13px;
color: rgba(255, 255, 255, 0.25);
font-style: italic;
}
/* Pile Area */
.pile-area {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 6px 8px;
flex-shrink: 0;
}
.draw-pile {
position: relative;
cursor: pointer;
transition: transform 0.2s;
}
.draw-pile:hover { transform: scale(1.05); }
.draw-pile.disabled { opacity: 0.5; pointer-events: none; }
/* Pile-stack umple spatiul disponibil, centrat vertical + orizontal */
.pile-stack {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
width: 100%;
height: 100%;
padding: 2px;
}
/* Container teancuri (populat dinamic de JS) — centrat.
2026-04-21 v13: flex-wrap pentru 15 teancuri — se aranjeaza automat pe 2-3 randuri
cand spatiul orizontal e limitat. */
.pile-depth {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
gap: 2px 2px;
pointer-events: none;
width: 100%;
max-width: 100%;
padding: 2px;
box-sizing: border-box;
}
/* Teanc = mini-stiva de 7 piese (1:1 cu realitatea).
2026-04-21 v13: 15 teancuri incap pe un rand (8-9px wide × 15 + gap = ~150px).
Piesele interioare 3px pt. vizibilitate clara. */
.pile-teanc {
--teanc-pieces: 7;
--teanc-piece-h: 3px;
--teanc-cap-h: 7px;
position: relative;
flex: 0 0 auto;
min-width: 7px;
max-width: 9px;
width: 9px;
height: calc(var(--teanc-pieces) * var(--teanc-piece-h) + var(--teanc-cap-h));
display: flex;
flex-direction: column-reverse;
gap: 0;
border-radius: 2px;
transition: transform 0.25s ease, height 0.35s ease;
}
/* Fiecare piesa in teanc = bara cu bevel 3D */
.pile-teanc-piece {
height: var(--teanc-piece-h);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.9) 0%,
#f5e8c2 22%,
#e8d9ae 60%,
#cdb683 100%);
border-left: 1px solid rgba(110, 80, 35, 0.55);
border-right: 1px solid rgba(110, 80, 35, 0.55);
border-top: 1px solid rgba(60, 40, 15, 0.6);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.7),
inset 0 -0.5px 0 rgba(80, 55, 25, 0.35);
}
.pile-teanc-piece:first-child {
border-bottom: 1px solid rgba(60, 40, 15, 0.65);
border-radius: 0 0 2.5px 2.5px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.3),
inset 0 0.5px 0 rgba(255, 255, 255, 0.7),
inset 0 -0.5px 0 rgba(80, 55, 25, 0.35);
}
.pile-teanc-piece:last-child {
height: var(--teanc-cap-h);
background:
radial-gradient(circle at 50% 50%, rgba(120, 90, 50, 0.65) 0%, rgba(100, 75, 40, 0.4) 1.8px, transparent 2px),
radial-gradient(ellipse at 40% 30%, rgba(255, 253, 240, 0.85) 0%, transparent 60%),
linear-gradient(145deg, #fffef5 0%, #faf4de 45%, #e8d9b0 100%);
border: 1px solid rgba(110, 80, 40, 0.6);
border-radius: 2.5px 2.5px 0 0;
box-shadow:
0 -1px 1px rgba(40, 25, 10, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -0.5px 0 rgba(120, 85, 40, 0.3);
}
/* Rotatie infima alternativa pe teancuri pt natural */
.pile-teanc:nth-child(odd) { transform: rotate(-0.6deg); }
.pile-teanc:nth-child(even) { transform: rotate(0.4deg) translateY(-0.5px); }
.pile-teanc:nth-child(3n) { transform: rotate(-0.3deg) translateY(-1px); }
/* 2026-04-21 v12: Enter/leave animations pentru diff in-place (reflecta diminuarea).
.pile-teanc-enter = state initial la creare (scale 0 + translateY jos)
.pile-teanc-leave = state final la stergere (fade + scale down)
Piesele din interiorul teancurilor au propriile lor tranzitii. */
.pile-teanc {
opacity: 1;
transition:
transform 0.25s ease,
height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease;
}
.pile-teanc.pile-teanc-enter {
opacity: 0;
transform: translateY(8px) scale(0.6);
}
.pile-teanc.pile-teanc-leave {
opacity: 0;
transform: translateY(-10px) scale(0.4) rotate(-3deg);
pointer-events: none;
}
.pile-teanc-piece {
transition: opacity 0.25s ease, transform 0.3s ease, height 0.3s ease;
opacity: 1;
}
.pile-teanc-piece.pile-teanc-piece-enter {
opacity: 0;
transform: translateY(4px) scaleY(0.1);
}
.pile-teanc-piece.pile-teanc-piece-leave {
opacity: 0;
transform: translateY(-6px) scaleY(0.1);
height: 0 !important;
pointer-events: none;
}
/* Hover — fluctuatie usoara per teanc */
.draw-pile:hover .pile-teanc:nth-child(odd) { transform: rotate(-1deg) translateY(-3px); }
.draw-pile:hover .pile-teanc:nth-child(even) { transform: rotate(0.8deg) translateY(-5px); }
.draw-pile:hover .pile-teanc:nth-child(3n) { transform: rotate(-0.5deg) translateY(-4px); }
/* Shadow ambient sub grupul de teancuri */
.pile-stack::after {
content: '';
position: absolute;
left: 4px;
right: 4px;
bottom: -3px;
height: 4px;
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0.45) 0%,
rgba(0, 0, 0, 0.15) 60%,
transparent 100%);
filter: blur(2px);
pointer-events: none;
z-index: -1;
}
/* Count mic sau zero — stack-ul se prabuseste vizual */
.draw-pile.pile-empty .pile-stack { --pile-depth-layers: 0; }
/* Vechile pile-tile din HTML nu mai sunt folosite — JS genereaza .pile-teanc dynamic */
.pile-tile { display: none !important; }
/* LEGACY rule — pastrata pentru referinta/compatibilitate dar fara efect */
.pile-tile-legacy-ignore {
position: relative;
flex: 1 1 0;
min-width: 0;
height: 100%;
border-radius: 3px;
border: 1px solid rgba(110, 80, 40, 0.55);
/* Fildeș/os — gradient cald autentic */
background:
radial-gradient(ellipse at 40% 30%,
rgba(255, 253, 240, 0.7) 0%,
transparent 55%),
linear-gradient(145deg,
#fffef5 0%,
#faf4e0 35%,
#efe2c4 75%,
#dbc9a3 100%);
box-shadow:
/* Umbra sub piesa */
0 1px 1px rgba(0, 0, 0, 0.2),
0 2px 3px rgba(0, 0, 0, 0.15),
/* Interior bevel */
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(140, 100, 50, 0.25),
inset 1px 0 0 rgba(255, 255, 255, 0.4),
inset -1px 0 0 rgba(150, 115, 65, 0.2);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}
/* Indent central (scobitura in spatele piesei) */
.pile-tile::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
transform: translate(-50%, -50%);
background: radial-gradient(circle at 40% 40%,
rgba(140, 105, 60, 0.5) 0%,
rgba(100, 75, 40, 0.7) 50%,
rgba(70, 50, 25, 0.5) 100%);
border-radius: 50%;
box-shadow:
inset 0 1px 1px rgba(60, 40, 20, 0.6),
inset 0 -0.5px 0 rgba(255, 240, 210, 0.4);
pointer-events: none;
z-index: 1;
}
/* Sheen diagonal subtil */
.pile-tile::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 240, 0.12) 25%,
transparent 50%);
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
/* Rotatii infime per piesa pentru look natural (rand uman, nu aliniat perfect) */
.pile-tile:nth-child(1) { transform: rotate(-0.8deg) translateY(-0.5px); }
.pile-tile:nth-child(2) { transform: rotate(0.3deg); }
.pile-tile:nth-child(3) { transform: rotate(-0.2deg); }
.pile-tile:nth-child(4) { transform: rotate(0.5deg) translateY(-0.5px); }
.pile-tile:nth-child(5) { transform: rotate(-0.4deg); }
/* Hover: randul se ridica usor si piesele fluctueaza */
.draw-pile:hover .pile-tile:nth-child(1) { transform: rotate(-1.2deg) translateY(-3px); }
.draw-pile:hover .pile-tile:nth-child(2) { transform: rotate(0.6deg) translateY(-4px); }
.draw-pile:hover .pile-tile:nth-child(3) { transform: rotate(-0.4deg) translateY(-5px); }
.draw-pile:hover .pile-tile:nth-child(4) { transform: rotate(0.8deg) translateY(-4px); }
.draw-pile:hover .pile-tile:nth-child(5) { transform: rotate(-0.8deg) translateY(-3px); }
.pile-count {
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
transition: color 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform;
}
/* Flash cand se decrementeaza count-ul */
.pile-count.pile-count-tick {
animation: pileCountTick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Warning vizual daca totalul nu bate (transparenta totala) */
.pile-count.pile-count-mismatch {
color: #ff5555 !important;
text-shadow: 0 0 8px rgba(255, 85, 85, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6);
animation: pileMismatchBlink 0.8s ease-in-out infinite !important;
}
@keyframes pileMismatchBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ═══ PILE AUDIT BUTTON (icon mic langa pile-count) ═══ */
.pile-audit-btn {
position: absolute;
top: -8px;
right: -10px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(255, 215, 0, 0.4);
background: linear-gradient(135deg, var(--remi-surface), var(--remi-surface-2, var(--remi-surface)));
color: var(--remi-gold, #ffd700);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
z-index: 5;
}
.pile-audit-btn .material-symbols-rounded {
font-size: 14px;
font-variation-settings: 'FILL' 1;
}
.pile-audit-btn:hover {
transform: scale(1.15);
border-color: var(--remi-gold, #ffd700);
box-shadow: 0 3px 10px rgba(255, 215, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.pile-audit-btn:active { transform: scale(0.96); }
/* ═══ TILE AUDIT MODAL ═══ */
.tile-audit-modal {
position: fixed;
inset: 0;
z-index: 9900;
display: flex;
align-items: center;
justify-content: center;
}
.tile-audit-modal[hidden] { display: none; }
.tile-audit-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: auditFadeIn 0.2s ease;
}
.tile-audit-modal-card {
position: relative;
width: min(520px, 92vw);
max-height: 80vh;
display: flex;
flex-direction: column;
background: linear-gradient(145deg, rgba(30, 14, 56, 0.98) 0%, rgba(18, 8, 36, 0.98) 100%);
border: 1px solid rgba(255, 215, 0, 0.25);
border-radius: 16px;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
overflow: hidden;
animation: auditSlideIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes auditFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes auditSlideIn {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.tile-audit-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255, 215, 0, 0.06) 0%, transparent 100%);
}
.tile-audit-modal-header h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
}
.tile-audit-modal-header h3 .material-symbols-rounded {
font-size: 22px;
color: var(--remi-gold, #ffd700);
font-variation-settings: 'FILL' 1;
}
.tile-audit-modal-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tile-audit-modal-close:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #fecaca;
}
.tile-audit-modal-body {
padding: 20px;
overflow-y: auto;
flex: 1 1 auto;
}
.audit-total-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
border: 1px solid rgba(34, 197, 94, 0.3);
margin-bottom: 16px;
}
.audit-total-card.is-mismatch {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.05));
border-color: rgba(239, 68, 68, 0.4);
animation: pileMismatchBlink 1s ease-in-out infinite;
}
.audit-total-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
}
.audit-total-value {
font-size: 22px;
font-weight: 800;
color: #4ade80;
font-family: 'Oswald', sans-serif;
letter-spacing: 0.5px;
}
.audit-total-card.is-mismatch .audit-total-value { color: #f87171; }
.audit-total-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
margin-top: 4px;
}
.audit-total-status.ok { color: #4ade80; }
.audit-total-status.err { color: #f87171; }
.audit-total-status .material-symbols-rounded { font-size: 16px; }
.audit-breakdown {
display: flex;
flex-direction: column;
gap: 8px;
}
.audit-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
transition: background 0.2s;
}
.audit-row:hover { background: rgba(255, 255, 255, 0.05); }
.audit-row-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 215, 0, 0.12);
color: var(--remi-gold, #ffd700);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.audit-row-icon .material-symbols-rounded { font-size: 18px; font-variation-settings: 'FILL' 1; }
.audit-row-label {
flex: 1 1 auto;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
}
.audit-row-label small {
display: block;
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
margin-top: 2px;
font-weight: 400;
}
.audit-row-count {
font-size: 18px;
font-weight: 800;
color: #fff;
font-family: 'Oswald', sans-serif;
min-width: 32px;
text-align: right;
letter-spacing: 0.5px;
}
.audit-row-sublist {
margin: 4px 0 0 44px;
padding: 6px 12px;
background: rgba(0, 0, 0, 0.15);
border-left: 2px solid rgba(255, 215, 0, 0.3);
border-radius: 0 6px 6px 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
display: flex;
flex-direction: column;
gap: 2px;
}
.audit-row-sublist div {
display: flex;
justify-content: space-between;
}
.tile-audit-modal-footer {
padding: 12px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.2);
}
.audit-note {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
}
.audit-note .material-symbols-rounded {
font-size: 16px;
color: #4ade80;
flex-shrink: 0;
margin-top: 1px;
font-variation-settings: 'FILL' 1;
}
.audit-note strong { color: var(--remi-gold, #ffd700); font-weight: 700; }
/* Light theme */
[data-theme="light"] .tile-audit-modal-card {
background: linear-gradient(145deg, #ffffff 0%, #f4efe5 100%);
border-color: rgba(180, 140, 60, 0.3);
}
[data-theme="light"] .tile-audit-modal-header h3 { color: #1a0a2e; }
[data-theme="light"] .tile-audit-modal-close {
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .audit-row {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .audit-row-label { color: rgba(0, 0, 0, 0.8); }
[data-theme="light"] .audit-row-label small { color: rgba(0, 0, 0, 0.5); }
[data-theme="light"] .audit-row-count { color: #1a0a2e; }
[data-theme="light"] .audit-note { color: rgba(0, 0, 0, 0.7); }
[data-theme="light"] .tile-audit-modal-footer { background: rgba(0, 0, 0, 0.05); }
@keyframes pileCountTick {
0% { transform: translateX(-50%) scale(1); color: rgba(255, 255, 255, 0.7); }
40% { transform: translateX(-50%) scale(1.35); color: var(--remi-gold, #ffd700); text-shadow: 0 0 8px rgba(255, 215, 0, 0.8); }
100% { transform: translateX(-50%) scale(1); color: rgba(255, 255, 255, 0.7); }
}
/* Pile state: low (< 4 piese) — warning color */
.draw-pile.pile-low .pile-count {
color: #ffb454;
text-shadow: 0 0 6px rgba(255, 180, 84, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
animation: pileLowPulse 1.5s ease-in-out infinite;
}
@keyframes pileLowPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* Pile state: empty */
.draw-pile.pile-empty {
opacity: 0.4;
filter: grayscale(0.7);
pointer-events: none;
}
.draw-pile.pile-empty .pile-count {
color: #ef4444;
animation: none;
}
/* ATU Display */
.atu-display {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
/* ATU centrat pe masa verde — VECHI, inlocuit de atu-beside-pile. Pastrat ca fallback. */
.atu-display.atu-center {
grid-row: 2 / 4;
grid-column: 1 / 3;
align-self: center;
justify-self: center;
z-index: 5;
padding: 0;
background: transparent;
gap: 1px;
pointer-events: none;
width: auto;
height: auto;
}
.atu-display.atu-center .atu-label-small {
font-size: 8px;
font-weight: 700;
letter-spacing: 1px;
color: var(--remi-gold, #ffd700);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
line-height: 1;
}
.atu-display.atu-center .atu-tile-display {
transform: scale(0.55);
transform-origin: center top;
margin: -4px 0;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
/* ═══ ATU — floating deasupra sidebar-section-piles (NU afecteaza pile-area/draw-pile) ═══ */
.remi-sidebar .sidebar-section-piles {
position: relative; /* doar asta: anchor pt. ATU absolute — nu atinge pile */
}
.atu-display.atu-beside-pile {
position: absolute;
top: 2px;
right: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 4px 6px 5px;
background: linear-gradient(135deg,
rgba(20, 45, 25, 0.85) 0%,
rgba(10, 30, 15, 0.95) 100%);
border: 1px solid rgba(255, 215, 0, 0.5);
border-radius: 8px;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 215, 0, 0.15),
0 0 10px rgba(255, 215, 0, 0.25);
z-index: 6;
pointer-events: none;
animation: atuPulseBesidePile 2.4s ease-in-out infinite;
}
@keyframes atuPulseBesidePile {
0%, 100% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 215, 0, 0.15), 0 0 10px rgba(255, 215, 0, 0.25); }
50% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 215, 0, 0.25), 0 0 16px rgba(255, 215, 0, 0.5); }
}
.atu-display.atu-beside-pile .atu-label-small {
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
color: #ffd700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
line-height: 1;
text-transform: uppercase;
}
/* Marit ca sa matcheze piesele din etalare — scale 0.85 → ~37×51 desktop,
clar vizibil fata de 0.42 (18×25) care era ilizibil. */
.atu-display.atu-beside-pile .atu-tile-display {
transform: scale(0.85);
transform-origin: center;
margin: -3px 0 -4px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.atu-label-small {
font-size: 10px;
font-weight: 700;
color: var(--remi-gold);
letter-spacing: 1px;
}
.atu-tile-display { position: relative; }
.atu-indicator {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: rgba(0, 40, 15, 0.6);
border: 1px solid var(--remi-gold);
border-radius: 6px;
}
.atu-label {
font-size: 11px;
font-weight: 700;
color: var(--remi-gold);
}
/* Discard Pile */
.discard-pile {
position: relative;
min-width: var(--tile-width);
min-height: var(--tile-height);
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: var(--remi-radius-tile);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.discard-pile:hover { border-color: rgba(255, 255, 255, 0.4); }
.discard-pile.can-take {
border-color: #4ade80;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}
.discard-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
/* ── Arrangement Zone ── */
.arrangement-zone {
background: rgba(34, 100, 44, 0.5);
border: 2px solid #ffd700;
border-radius: 8px;
padding: 6px 8px;
flex-shrink: 0;
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15);
}
.arrangement-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #ffd700;
margin-bottom: 4px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.arrangement-header .material-symbols-rounded { font-size: 18px; }
.arrangement-points {
margin-left: auto;
font-weight: 700;
font-size: 14px;
color: var(--remi-gold);
}
.arrangement-clear-btn {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
padding: 2px;
border-radius: 4px;
transition: all 0.2s;
}
.arrangement-clear-btn:hover { color: #ff6b6b; }
.arrangement-tiles {
display: flex;
gap: 2px;
flex-wrap: wrap;
min-height: 40px;
padding: 4px;
}
.arrangement-group {
display: flex;
gap: 2px;
padding: 4px 6px;
background: var(--remi-surface-2);
border: 1px solid var(--remi-border);
border-radius: var(--remi-radius-xs);
position: relative;
transition: all 0.2s;
}
.arrangement-group.valid {
border-color: var(--remi-success);
background: rgba(var(--remi-success-rgb), 0.05);
}
.arrangement-group.invalid {
border-color: var(--remi-danger);
background: rgba(var(--remi-danger-rgb), 0.05);
}
.arrangement-group-label {
position: absolute;
top: -8px;
left: 4px;
font-size: 8px;
font-weight: 600;
background: var(--remi-surface);
padding: 0 4px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.arrangement-group.valid .arrangement-group-label { color: var(--remi-success); }
.arrangement-group.invalid .arrangement-group-label { color: var(--remi-danger); }
.arrangement-group-points {
position: absolute;
bottom: -8px;
right: 4px;
font-size: 9px;
font-weight: 700;
background: var(--remi-surface);
padding: 0 4px;
border-radius: 3px;
color: var(--remi-gold);
}
.arrangement-add-group {
display: flex;
align-items: center;
justify-content: center;
min-width: 30px;
min-height: 40px;
border: 2px dashed var(--remi-border);
border-radius: var(--remi-radius-xs);
color: var(--remi-text-muted);
cursor: pointer;
transition: all 0.2s;
font-size: 20px;
}
.arrangement-add-group:hover {
border-color: var(--remi-accent);
color: var(--remi-accent);
background: var(--remi-accent-glow);
}
.arrangement-divider {
width: 3px;
height: var(--tile-height-sm);
background: var(--remi-accent);
border-radius: 2px;
margin: 0 4px;
opacity: 0.5;
align-self: center;
}
/* ── Player Area — PE masa verde ── */
.player-area {
flex-shrink: 0;
position: relative;
background: rgba(0, 20, 8, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
margin: 0;
padding: 4px 0;
}
.player-info-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
font-size: 12px;
background: rgba(0, 0, 0, 0.15);
border-radius: 6px;
margin: 2px 8px;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.player-name-label {
font-weight: 700;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.3px;
white-space: nowrap;
}
.player-tiles-count {
background: #c0392b;
color: white;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* ═══ SPECTATOR MODE — hide interactive UI (not their turn, not their hand) ═══
Pastrez: pileAudit, discardHistory, timer (informationale, nu interactive-destructive)
+ ascund "Spectator" din mp-game-bar (apare deja ca badge la south seat) */
body.spectator-mode .sort-buttons,
body.spectator-mode #actionBar,
body.spectator-mode .action-bar,
body.spectator-mode .action-bar-v2,
body.spectator-mode .etalare-hint,
body.spectator-mode .player-hand-penalty,
body.spectator-mode .hand-scroll-arrow,
body.spectator-mode #mpGameBarInfo,
body.spectator-mode .mp-game-bar-info,
/* Spectator: ascund butoanele de actiune chiar si cand sunt fuzionate in bara de south
(merged-actions) — spectator nu poate interactiona, deci nu are sens sa le afiseze.
Fix overflow bar south (Trage/Etaleaza/Lipeste/Arunca/ATU ieseau in afara cadrului). */
/* Spectatorul nu mută: acţiunile dispar din bandă, nu rămân dezactivate. */
body.spectator-mode .seat-south .player-info-bar .action-btn-game,
body.spectator-mode .seat-south .player-info-bar .btn-atu-inline,
body.spectator-mode .seat-south .player-info-bar .action-group,
body.spectator-mode .seat-south .player-info-bar .sort-buttons,
body.spectator-mode .seat-south .action-bar-v2,
body.spectator-mode .action-bar.action-bar-v2.action-bar-merged .action-btn-game {
display: none !important;
}
/* Disable pointer-events pe hand-ul de jos (tilurile nu sunt ale lui) */
body.spectator-mode .seat-south .player-hand .tile {
pointer-events: none;
cursor: default !important;
}
body.spectator-mode .seat-south .player-hand .tile.selected {
/* Deselecteaza vizual daca era selectat inainte */
box-shadow: none !important;
transform: none !important;
}
/* Badge SPECTATOR pe bara south — ROSU cu CONTRAST pe background wood/crem */
body.spectator-mode .player-info-bar::before {
content: '👁 Spectator';
font-size: 10px;
font-weight: 800;
color: #ffffff; /* alb pt. contrast maxim pe rosu */
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); /* rosu solid, nu transparent */
border: 1px solid #7f1d1d;
border-radius: 10px;
padding: 3px 10px;
letter-spacing: 0.5px;
margin-right: 8px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
animation: spectatorBadgePulse 2.4s ease-in-out infinite;
}
@keyframes spectatorBadgePulse {
0%, 100% {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
0 0 14px rgba(239, 68, 68, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
}
/* Badge responsive — pe mobile iconita doar */
@media (max-width: 480px) {
body.spectator-mode .player-info-bar::before {
content: '👁';
font-size: 14px;
padding: 2px 7px;
margin-right: 4px;
}
}
/* Sort buttons — triplet compact palette/sort/layers din info-bar */
/* 2026-04-21: Aliniat cu action-btn-game — aceeasi filosofie vizuala
(gradient subtil, border auriu la hover, micro-scale la active) */
.sort-buttons {
margin-left: auto;
display: flex;
gap: 3px;
}
.sort-btn {
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(0, 0, 0, 0.15) 100%),
rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 215, 0, 0.12);
color: rgba(255, 235, 200, 0.72);
padding: 3px 6px;
border-radius: 5px;
cursor: pointer;
transition: border-color 0.18s ease, color 0.18s ease,
box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.25);
}
.sort-btn:hover {
border-color: rgba(255, 215, 0, 0.55);
color: #ffd700;
background:
linear-gradient(180deg,
rgba(255, 215, 0, 0.08) 0%,
rgba(184, 134, 11, 0.04) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 5px rgba(255, 215, 0, 0.18);
transform: translateY(-1px);
}
.sort-btn:active {
transform: translateY(0) scale(0.96);
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(0, 0, 0, 0.15);
}
.sort-btn .material-symbols-rounded { font-size: 15px; line-height: 1; }
/* Player Hand — tiles on the green table */
.hand-scroll-wrapper .player-hand {
flex: 1;
}
.player-hand {
/* FREEFORM 2D — 2026-04-20: piesele sunt position:absolute (vezi renderHandFreeform).
Container-ul trebuie position:relative ca pozitiile (x,y) calculate sa se ancoreze
la .player-hand, nu la .player-area. Inaltime = 2 randuri tile + gap + padding.
Cu box-sizing:border-box, height include padding-ul. */
position: relative;
display: block;
gap: 3px;
padding: 6px 30px;
overflow: visible;
/* 2 randuri × tile-h + 5px gap intre randuri + 24px buffer (pad top/bot + aer).
Desktop: 2*60 + 29 = 149px. Mobile portrait: 2*46 + 29 = 121px. */
min-height: calc(2 * var(--tile-height) + 29px);
height: calc(2 * var(--tile-height) + 29px);
flex-shrink: 0;
}
/* ── BANDA CU PUNCTELE COMBINAŢIEI (13-09-2026) ───────────────────────────────
Desenată de `marcheazaGrupuri` (remi-pro.js) peste marginea de jos a pieselor
alăturate care formează o suită sau o terţă. Cerută de user după ce a văzut alt
site de remi: „peste, transparenţă, şi spui câte puncte sunt".
STĂ PESTE PIESE, nu sub ele: în peisaj stativul are 94px ficşi (2 rânduri × 45),
deci o etichetă pusă dedesubt ar fi cerut înălţime pe care n-o avem.
`.player-hand` e deja `position: relative` (vezi regula de mai sus), deci stratul
se ancorează corect fără să atingem nimic.
Culoarea urmează accentul temei, cu auriul ca rezervă. */
.player-hand .jo-grupuri {
position: absolute;
inset: 0;
pointer-events: none; /* piesele rămân apucabile pe sub strat */
z-index: 6;
}
.player-hand .jo-grup-banda {
position: absolute;
height: 14px;
/* Banda E mânerul grupului: de ea tragi ca să muţi toate piesele lui odată
(`grupPointerDown`, remi-pro.js). Doar ea primeşte atingerea; restul
stratului rămâne transparent la apăsare, ca piesele să se poată apuca una
câte una, ca până acum. `touch-action:none` — altfel telefonul crede că
vrei să derulezi şi mutarea se rupe la primul milimetru. */
pointer-events: auto;
touch-action: none;
cursor: grab;
/* 13-09: reglată pentru piesele mari din peisaj (32×45). Măsurat înainte:
banda 343–357 peste o piesă 312–357, cu bulina de culoare la 346–356 —
acoperită integral, iar auriul aproape opac (.82) o făcea să pară un capac
lipit peste o treime din piesă. Acum bulina se ascunde singură dedesubt
(`.jo-grup-membru`), auriul lasă piesa să se vadă, iar cifra punctelor
creşte de la 9 la 10px, cât să se citească pe piesa mare. */
background: rgba(var(--color-accent-rgb, 232, 201, 106), .68);
color: #150f04;
font: 800 10px/14px 'Inter', Arial, sans-serif;
letter-spacing: .2px;
text-align: center;
border-radius: 0 0 5px 5px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, .18);
text-shadow: 0 1px 0 rgba(255, 252, 235, .55);
white-space: nowrap;
overflow: hidden;
animation: joGrupApare .22s ease-out both;
}
/* Bulina piesei aflate sub bandă: `visibility`, nu `display` — piesa îşi păstrează
aşezarea, doar că nu mai desenează ceva ce oricum nu se vedea. */
.player-hand .tile.jo-grup-membru .tile-suit-dot { visibility: hidden; }
/* ── SEMNUL „AI PIERDUT TURE PE TIMP" (13-09-2026) ──────────────────────────────
„Nu pot vedea alertele de AFK, trec repede." Deci nu un mesaj trecător, ci o
bandă care STĂ pe masă cât timp contorul serverului e peste zero (vezi
`arataTureRatate` în remi-pro.js).
`fixed` + `pointer-events: none`: nu intră în aşezarea niciunui ecran şi nu fură
nicio apăsare de la ce e dedesubt. Culorile sunt fixe, nu din temă — e o alarmă,
trebuie să arate la fel în toate cele 33 de teme. */
#joTureRatate {
position: fixed;
top: 64px;
left: 50%;
transform: translateX(-50%);
z-index: 9998;
pointer-events: none;
max-width: 92vw;
padding: 4px 14px;
border-radius: 999px;
background: linear-gradient(180deg, #c2410c 0%, #7f1d1d 100%);
border: 1px solid rgba(255, 200, 160, .55);
box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
color: #fff6ef;
font: 800 11px/1.3 'Inter', Arial, sans-serif;
letter-spacing: .4px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
animation: joRatatePuls 1.6s ease-in-out infinite;
}
/* ultima tură dinaintea pierderii mesei: roşu aprins, puls mai scurt */
#joTureRatate.jo-ultima {
background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
animation-duration: .9s;
}
@keyframes joRatatePuls {
0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 0 0 rgba(239, 68, 68, 0); }
50% { box-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 14px 3px rgba(239, 68, 68, .6); }
}
@media (prefers-reduced-motion: reduce) {
#joTureRatate { animation: none; }
}
/* Pe telefon culcat antetul are ~30px, nu ~60: banda urcă odată cu el ca să stea
lipită sub el, nu peste mijlocul mesei. */
@media (orientation: landscape) and (max-height: 500px) {
#joTureRatate { top: 34px; font-size: 10px; padding: 3px 11px; }
}
/* ── Ultimele 10 secunde din tura ta (14-09-2026, `avertizeazaSfarsitTura`) ─────────
Aceeaşi pastilă ca banda turelor ratate, sub ea, roşu aprins cu puls de o secundă. */
#joTimpExpira {
position: fixed;
top: 94px;
left: 50%;
transform: translateX(-50%);
z-index: 9998;
pointer-events: none;
max-width: 92vw;
padding: 5px 16px;
border-radius: 999px;
background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
border: 1px solid rgba(255, 210, 200, .6);
box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
color: #fff;
font: 800 12px/1.3 'Inter', Arial, sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: .4px;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
animation: joTimpPuls 1s ease-in-out infinite;
}
@keyframes joTimpPuls {
0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 0 0 rgba(239, 68, 68, 0); }
50% { box-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 16px 4px rgba(239, 68, 68, .7); }
}
@media (orientation: landscape) and (max-height: 500px) {
#joTimpExpira { top: 58px; font-size: 11px; padding: 3px 12px; }
}
/* ── Ruperea făcută de mână (14-09-2026, `incepeRuperea`) ───────────────────────────
Piesa luată provizoriu din aruncate stă pe stativ cu contur auriu; în şir, locul ei
rămâne stins şi punctat, iar piesele de peste ea (care vor merge în TRASE) au un tiv auriu. */
.player-hand .tile.jo-din-aruncate {
box-shadow: 0 0 0 2px #ffd700, 0 0 12px 2px rgba(255, 215, 0, .55) !important;
animation: joDinAruncate 1.4s ease-in-out infinite;
}
@keyframes joDinAruncate {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.18); }
}
.discard-tile.jo-rupta-provizoriu {
opacity: .32;
outline: 2px dashed rgba(255, 215, 0, .85);
outline-offset: 1px;
}
.discard-tile.jo-spre-trase {
box-shadow: 0 0 0 1px rgba(255, 215, 0, .5), 0 0 6px rgba(255, 215, 0, .35);
}
/* ── „Eşti activ?" (14-09-2026, `arataIntrebareaAfk`) ───────────────────────────── */
.jo-afk-fundal {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0, 0, 0, .66);
}
.jo-afk-cutie {
width: 100%;
max-width: 340px;
box-sizing: border-box;
padding: 20px 20px 18px;
border-radius: 14px;
background: linear-gradient(180deg, #241f16 0%, #15120c 100%);
border: 1px solid rgba(212, 165, 68, .55);
box-shadow: 0 12px 40px rgba(0, 0, 0, .7);
color: #efe6d2;
text-align: center;
font-family: 'Inter', Arial, sans-serif;
}
.jo-afk-titlu { font-size: 19px; font-weight: 800; color: #ffd700; margin-bottom: 8px; }
.jo-afk-text { font-size: 13px; line-height: 1.45; margin: 0 0 12px; }
.jo-afk-ceas {
font-size: 34px;
font-weight: 800;
color: #fca5a5;
font-variant-numeric: tabular-nums;
margin-bottom: 14px;
}
.jo-afk-buton {
width: 100%;
min-height: 46px;
border: 0;
border-radius: 10px;
background: linear-gradient(180deg, #f2c94c 0%, #d4a544 100%);
color: #1a1300;
font: 800 16px/1 'Inter', Arial, sans-serif;
cursor: pointer;
}
.jo-afk-buton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.jo-afk-buton:disabled { opacity: .7; cursor: default; }
@media (prefers-reduced-motion: reduce) {
#joTimpExpira, .player-hand .tile.jo-din-aruncate { animation: none; }
}
/* ── Teanc gol, dar aruncatele se amestecă la tragere (15-09-2026) ──────────────────
Rămâne apăsabil (fără pointer-events:none din `.pile-empty`); contorul spune ce urmează. */
.draw-pile.pile-reamesteca .pile-count { color: #fbbf24; }
.draw-pile.pile-reamesteca .pile-count::after { content: " ↻"; }
/* ── Zborul pieselor pe masă: lipire şi ruperea altcuiva (15-09-2026, `zboaraPiesa`) ── */
.tile.jo-zbor-masa {
position: fixed;
z-index: 99990;
margin: 0;
pointer-events: none;
transform-origin: 0 0;
transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease-in;
box-shadow: 0 6px 14px rgba(0, 0, 0, .55), 0 0 10px rgba(255, 215, 100, .45);
}
/* ── Lupa pe combinaţia de sub deget (15-09-2026, `arataLupaMeld`) ──────────────────── */
#joLupaMeld {
position: fixed;
z-index: 99995;
pointer-events: none;
max-width: calc(100vw - 16px);
padding: 6px 10px 10px;
border-radius: 12px;
background: rgba(14, 12, 8, .94);
border: 1px solid rgba(212, 165, 68, .65);
box-shadow: 0 10px 30px rgba(0, 0, 0, .65);
}
#joLupaMeld .jo-lupa-eticheta {
font: 800 11px/1.2 'Inter', Arial, sans-serif;
letter-spacing: .4px;
color: #ffd700;
margin-bottom: 4px;
white-space: nowrap;
}
#joLupaMeld .jo-lupa-copie {
position: static !important;
zoom: 1.8;
transform: none !important;
margin: 0 !important;
animation: none !important;
}
#joLupaMeld .jo-lupa-copie .meld-owner-tag { display: none; }
/* ── Lupa pe şirul de aruncate (15-09-2026, `arataLupaSir`) ─────────────────────────── */
.jo-lupa-sir-fundal {
position: fixed;
inset: 0;
z-index: 99996;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0, 0, 0, .55);
}
.jo-lupa-sir {
max-width: 100%;
box-sizing: border-box;
padding: 10px 12px 12px;
border-radius: 14px;
background: linear-gradient(180deg, #241f16 0%, #15120c 100%);
border: 1px solid rgba(212, 165, 68, .55);
box-shadow: 0 12px 40px rgba(0, 0, 0, .7);
}
.jo-lupa-sir-cap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
font: 800 13px/1.2 'Inter', Arial, sans-serif;
color: #ffd700;
}
.jo-lupa-sir-x {
min-width: 36px;
min-height: 36px;
border: 0;
border-radius: 8px;
background: rgba(255, 255, 255, .08);
color: #efe6d2;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.jo-lupa-sir-rand {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
}
.jo-lupa-sir-loc {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 0 0 auto;
padding: 4px;
border-radius: 10px;
cursor: pointer;
}
.jo-lupa-sir-loc:focus-visible { outline: 3px solid #ffd700; outline-offset: 1px; }
.jo-lupa-sir-loc .tile.jo-lupa-sir-piesa {
width: 44px !important;
height: 60px !important;
font-size: 22px !important;
margin: 0 !important;
transform: none !important;
}
.jo-lupa-sir-loc .tile.jo-lupa-aleasa { box-shadow: 0 0 0 3px #ffd700 !important; }
.jo-lupa-sir-loc.jo-lupa-nu { opacity: .35; cursor: default; }
.jo-lupa-sir-sub {
min-height: 13px;
font: 700 10px/1.2 'Inter', Arial, sans-serif;
color: rgba(239, 230, 210, .8);
white-space: nowrap;
}
/* ── Pastila „cât mai poţi coborî" în zona ta, după etalare (15-09-2026) ───────────── */
.etalare-zone .zona-mea-chip {
position: absolute;
right: 6px;
bottom: 6px;
z-index: 3;
pointer-events: none;
padding: 3px 9px;
border-radius: 999px;
background: rgba(34, 197, 94, .16);
border: .8px solid rgba(34, 197, 94, .45);
color: #86efac;
font: 800 11px/1.3 'Inter', Arial, sans-serif;
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
@media (prefers-reduced-motion: reduce) {
.tile.jo-zbor-masa { transition: none; }
}
/* ── Jokerul întors prin înlocuire (15-09-2026, grila userului) ────────────────────────
· Jokerul întors rămâne în formaţie cu faţa în jos: piesă ALBĂ, fără nimic pe ea.
Fundalul are !important şi selectorul `:root … :not(.color-joker)` ca să treacă peste faţa
de fildeş „TILE 3D" (`.tile:not(.color-joker)` şi varianta `[data-theme="light"]`, ambele
!important, mai jos în fişier).
· Piesa cu rol de Joker se vede ca ea, cu contur auriu şi semnul „J". Conturul e `outline`:
umbrele pieselor (box-shadow) au !important în mai multe locuri şi l-ar acoperi. */
.tile.tile-joker-intors,
.tile.tile-rol-joker { position: relative; }
:root .tile.tile-joker-intors:not(.color-joker) {
background: linear-gradient(170deg, #ffffff 0%, #f8f7f3 60%, #edebe4 100%) !important;
}
.tile.tile-rol-joker {
outline: 2px solid #d4a017;
outline-offset: -2px;
}
/* colţul stâng de JOS: sus ar acoperi numerele din două cifre pe piesele mici */
.tile .jo-rol-semn {
position: absolute;
bottom: 1px;
left: 1px;
font-size: max(.36em, 5.5px);
font-weight: 800;
line-height: 1;
padding: 1px 2px;
border-radius: 2px;
color: #3d2608;
background: linear-gradient(135deg, #ffd700, #c9971c);
box-shadow: 0 0 0 .5px rgba(61, 38, 8, .6);
pointer-events: none;
}
/* prima apariţie: Jokerul se întoarce cu faţa în jos */
.tile.jo-intors-flip {
animation: joIntorsFlip .7s cubic-bezier(.3, .7, .3, 1) 1;
}
@keyframes joIntorsFlip {
0% { transform: perspective(300px) rotateY(-180deg) scale(1.08); }
60% { transform: perspective(300px) rotateY(12deg) scale(1.04); }
100% { transform: perspective(300px) rotateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.tile.jo-intors-flip { animation: none; }
}
/* ── Premierea: piesele scăzute, una câte una (15-09-2026) ───────────────────────────── */
.score-breakdown .score-scazut { opacity: .85; }
/* ── Şirul de aruncate: tragerea piesei spre stativ (15-09-2026) ────────────────────────
Pe orizontală şirul se derulează; pe verticală mişcarea ajunge la joc (tragerea). */
#discardHistoryStrip .discard-tile.is-breakable { touch-action: pan-x; }
/* Bulele de chat de la masă foloseau clasa `.jo-chat-bula`, cu două aşezări diferite:
a mea lipită de stativ, a adversarului lipită de zona lui. Din 18-09-2026 toată lumea
are acelaşi reper — avatarul — şi acelaşi desen ca în sala de aşteptare, `.jo-bula-sala`
(definită mai jos, la „BULA DE CHAT ÎN SALA DE AŞTEPTARE"). Stilul vechi a fost scos:
nu-l mai cerea nimeni din cod. */
/* ── TRASE — locul pieselor trase, pe stativ, dreapta jos (13-09-2026) ───────────
Cerut de user: „creezi un loc în tablă unde se pun piesele cu spatele trase",
„doar în rândul doi, stativ dreapta jos", „să încadrezi frumos, aşa se va numi".
Desenat de `deseneazaTrase` (remi-pro.js) pe ultimul loc din rândul de jos; mărimea
şi poziţia vin din JS, după piesa reală din stativ, deci merge în orice aşezare.
STILUL E AL BENZII ARUNCATE, măsurat pe masă: tavă închisă cu margine aurie
subţire şi umbră în interior, eticheta aurie 9px/700 cu majuscule, contorul ca
`.discard-count-badge`. Culorile urmează accentul temei, cu auriul ca rezervă. */
.player-hand .jo-trase {
position: absolute;
z-index: 4;
box-sizing: border-box;
border-radius: 7px;
background: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .18));
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .28);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .10);
}
.player-hand .jo-trase-piesa { box-shadow: 0 2px 3px rgba(0, 0, 0, .55); }
.player-hand .jo-trase-sus { cursor: grab; touch-action: none; }
.player-hand .jo-trase-sus:active { cursor: grabbing; }
/* Zborul pieselor rupte spre TRASE (14-09-2026, `zboaraInTrase`). Copia porneşte din şir,
fixă pe ecran, şi se strânge spre TRASE; cât zboară, TRASE îşi ascunde piesele şi
luminează, ca să le primească. */
.tile.jo-trase-zbor {
position: fixed;
z-index: 99990;
margin: 0;
pointer-events: none;
transform-origin: 0 0;
transition: transform .48s cubic-bezier(.2, .8, .2, 1);
box-shadow: 0 6px 14px rgba(0, 0, 0, .55);
}
.player-hand .jo-trase.jo-trase-primeste {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 0 10px 2px rgba(255, 215, 0, .55);
}
.player-hand .jo-trase.jo-trase-primeste .jo-trase-piesa { opacity: 0; }
.player-hand .jo-trase-piesa { transition: opacity .2s ease-out; }
/* eticheta stă peste partea de jos a piesei de deasupra: acoperă doar bulina, iar
culoarea se citeşte din cifră, care e colorată (piesele stau cu faţa de pe 14-09-2026) */
.player-hand .jo-trase-eticheta {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 3;
pointer-events: none;
padding: 1px 0;
border-radius: 0 0 6px 6px;
background: linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .66));
color: rgba(255, 215, 0, .88);
font: 700 8px/10px Inter, system-ui, -apple-system, sans-serif;
letter-spacing: .3px;
text-transform: uppercase;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}
/* gol: rămâne doar numele, stins, ca locul să se vadă dar să nu ceară atenţie */
.player-hand .jo-trase-gol .jo-trase-eticheta {
top: 0;
display: flex; align-items: center; justify-content: center;
background: none;
color: rgba(255, 215, 0, .42);
}
.player-hand .jo-trase-nr {
position: absolute;
top: -7px; right: -6px;
z-index: 5;
pointer-events: none;
min-width: 16px;
padding: 1px 4px;
box-sizing: border-box;
border-radius: 8px;
background: linear-gradient(135deg, rgba(255, 215, 0, .25), rgba(184, 134, 11, .18)), rgba(20, 12, 4, .92);
border: 1px solid rgba(255, 215, 0, .4);
color: rgba(255, 235, 180, .95);
font: 800 9px/12px Inter, system-ui, -apple-system, sans-serif;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
/* ── SELECŢIA DIN STATIV — doar pentru lipire, fără să calce peste vecine (14-09-2026) ──
Userul: „la selectare piesele se încalecă una peste alta; selecţia este doar lipire".
Regula de la ~4389 ridica piesa selectată 6px şi o creştea cu 4%, iar între piese sunt
doar 2px — intra peste vecina de lângă şi peste rândul de sus. Acum rămâne pe loc, la
mărimea ei; semnul e o ramă aurie în interior plus o strălucire scurtă. */
.seat-south .player-hand .tile.selected {
transform: none !important;
animation: none !important;
box-shadow: inset 0 0 0 2px #ffd700, 0 0 6px 1px rgba(255, 215, 0, .7) !important;
}
.seat-south .player-hand .tile.selected::before { content: none !important; }
@keyframes joGrupApare {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.player-hand .jo-grup-banda { animation: none; }
}
.player-hand .jo-grup-banda:active { cursor: grabbing; }
/* piesele grupului, cât timp grupul e în aer: rămân pe loc, dar stinse */
.player-hand .tile.jo-grup-plecat { opacity: .28; filter: grayscale(.5); }
/* grupul care urmăreşte degetul — o copie, ca la mutarea unei singure piese */
.jo-grup-ghost {
position: fixed;
left: 0; top: 0;
pointer-events: none;
z-index: 99999;
will-change: transform;
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}
/* Tile entrance stagger animation in hand */
.player-hand .tile {
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
@media (max-width: 767px) {
.player-hand {
-webkit-overflow-scrolling: touch;
}
/* DRAG IMEDIAT — touch-action:none pe piese ca degetul sa ia imediat piesa
si s-o poata trage in ORICE directie (sus, jos, stanga, dreapta). Scroll
peste piese NU mai functioneaza, dar user-ul are board-ul de deasupra
pentru scroll. */
.seat-south .player-hand .tile,
.etalare-zone .tile,
.table-meld-group .tile,
.arrangement-zone .tile {
touch-action: none !important;
}
/* Zona de etalare: permite scroll pan-y pentru board vertical */
.etalare-zone {
touch-action: pan-y !important;
}
/* 2026-04-21 FIX: meld-group permite ambele pan-x pan-y — pan-x ca user-ul
sa poata face swipe ORIZONTAL cand meld-ul are mai multe piese decat latimea
zonei (runs A-K = 13 tiles nu incap in 230px) + pan-y pentru scroll board. */
.table-meld-group {
touch-action: pan-x pan-y !important;
}
}
@media (max-height: 500px) and (orientation: landscape) {
.seat-south .player-hand .tile,
.etalare-zone .tile,
.table-meld-group .tile,
.arrangement-zone .tile {
touch-action: none !important;
}
.etalare-zone {
touch-action: pan-y !important;
}
/* Landscape: la fel ca portrait — pan-x pan-y pe meld-group pentru swipe horizontal */
.table-meld-group {
touch-action: pan-x pan-y !important;
}
}
.player-hand::-webkit-scrollbar { height: 4px; }
.player-hand::-webkit-scrollbar-track { background: transparent; }
.player-hand::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
/* ================================================================================================
10. TILE STYLES
================================================================================================ */
/* ═══ PREMIUM TILE — sheen 3D + bevel + realistic shadow ═══ */
.tile {
width: var(--tile-width);
height: var(--tile-height);
border-radius: var(--remi-radius-tile);
border: 1px solid rgba(0, 0, 0, 0.22);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--font-tile, var(--font-display));
font-weight: 700;
letter-spacing: 0.3px;
font-size: var(--tile-font);
cursor: pointer;
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.15s;
position: relative;
flex-shrink: 0;
/* Ivory warm — bevel crisp, fara border solid (interfera cu cifrele color) */
background: linear-gradient(172deg, #ead7a8 0%, #dcc58a 55%, #c8ad6a 100%);
border: none !important;
box-shadow:
inset 0 1px 0 rgba(255, 245, 210, .9),
inset 1px 0 0 rgba(255, 240, 200, .5),
inset 0 -1px 0 rgba(70, 45, 15, .65),
inset -1px 0 0 rgba(100, 70, 30, .45),
0 0 0 1px rgba(70, 45, 15, .7),
0 1px 0 rgba(40, 22, 8, .6),
0 2px 3px rgba(0, 0, 0, .5),
0 4px 7px rgba(0, 0, 0, .28);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
/* BLOCHEAZA Chrome Android "Touch to Search" / context action bar ("Atinge
pentru a vedea rezultate") care apare pe text selectabil la tap/long-press.
Combinatia asta dezactiveaza complet: text selection, Tap-to-Search, context
menu cu Save Image/Search Google. */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
}
/* Highlight convex difuz — plastic mat (același ca spatele) */
.tile::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(ellipse 80% 55% at 38% 25%,
rgba(255, 240, 200, .28) 0%,
transparent 60%);
pointer-events: none;
z-index: 1;
}
/* Tile content sits ABOVE the sheen */
.tile > * { position: relative; z-index: 2; }
.tile:hover {
transform: translateY(-5px) scale(1.03);
box-shadow:
0 3px 4px rgba(0, 0, 0, 0.15),
0 6px 12px rgba(0, 0, 0, 0.2),
0 12px 24px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(160, 130, 80, 0.18);
}
.tile.selected {
/* PRO: lift mic (-6px) + scale subtil (1.04) + border gold 3px + glow pulsant.
Balanta intre vizibilitate si pastrarea layout-ului (fara sa "sara" pieseie
atat de sus incat sa incurce rearanjarea). */
transform: translateY(-6px) scale(1.04);
border: 3px solid #ffd700;
box-shadow:
0 0 0 2px rgba(255, 215, 0, 0.55),
0 0 18px rgba(255, 215, 0, 0.85),
0 8px 18px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -2px 4px rgba(255, 180, 40, 0.3);
z-index: 8;
position: relative;
animation: tileSelectedPulseGlobal 1.4s ease-in-out infinite;
}
@keyframes tileSelectedPulseGlobal {
0%, 100% {
box-shadow:
0 0 0 2px rgba(255, 215, 0, 0.55),
0 0 18px rgba(255, 215, 0, 0.85),
0 8px 18px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -2px 4px rgba(255, 180, 40, 0.3);
}
50% {
box-shadow:
0 0 0 3px rgba(255, 230, 80, 0.8),
0 0 26px rgba(255, 220, 40, 1),
0 10px 22px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -2px 6px rgba(255, 200, 60, 0.55);
}
}
.tile.playable {
border-color: var(--remi-success);
animation: tilePulse 1.5s ease-in-out infinite;
}
/* ═══ PROFESSIONAL DRAG & DROP — ghost follows finger ═══ */
/* Piesa ORIGINALĂ (rămasă pe loc) — dimmed, ca să indice clar de unde a pornit */
.tile.dragging {
opacity: 0.22 !important;
transform: scale(0.88) !important;
transition: opacity 0.15s, transform 0.15s !important;
filter: grayscale(0.5) blur(0.3px);
pointer-events: none;
}
/* GHOST — clona piesei care urmărește degetul. Position fixed, pointer-events none.
Toate transformările se fac pe inline-style din JS (translate + scale + rotate).
CSS-ul doar adaugă shadow-ul și overridează tranziția ca urmărirea să fie 1:1. */
.tile.tile-drag-ghost {
transition: none !important;
animation: none !important;
opacity: 0.97 !important;
pointer-events: none !important;
/* Shadow puternic — arată că piesa e "ridicată" deasupra board-ului */
filter:
drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55))
drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35))
drop-shadow(0 0 12px rgba(255, 215, 0, 0.35));
/* Bordură aurie subtilă ca să iasă în evidență */
border-color: rgba(255, 215, 0, 0.6) !important;
/* Elimină focus/hover/selection borders din clonă */
outline: none !important;
}
/* SNAP bump — scurt scale bump când ghost-ul intră peste o zonă validă de drop
(meld). Feedback vizual ca "lock-on" / "magnet" — user simte că piesa e gata
să fie lipită. Inspirat din pragmatic-drag-and-drop + dnd-kit. */
.tile.tile-drag-ghost.ghost-snap {
animation: ghostSnapBump 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes ghostSnapBump {
0% { filter:
drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55))
drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35))
drop-shadow(0 0 12px rgba(255, 215, 0, 0.35)); }
50% { filter:
drop-shadow(0 20px 34px rgba(0, 0, 0, 0.6))
drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4))
drop-shadow(0 0 22px rgba(255, 215, 0, 0.75))
drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); }
100% { filter:
drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55))
drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35))
drop-shadow(0 0 12px rgba(255, 215, 0, 0.35)); }
}
/* Meld highlighted când ghost-ul trece peste el — lipire gata să se facă */
.table-meld-group.drag-over {
outline: 3px solid var(--remi-accent, #ffd700) !important;
outline-offset: -3px;
box-shadow:
0 0 24px rgba(255, 215, 0, 0.55),
inset 0 0 20px rgba(255, 215, 0, 0.18) !important;
transition: outline 0.08s, box-shadow 0.1s;
}
.tile.drag-over {
border-color: var(--remi-accent);
box-shadow: 0 0 12px var(--remi-accent-glow);
}
/* LUPA (11-09-2026, cerută de user): combinaţia peste care tragi piesa se măreşte,
ca pe telefon să vezi exact unde o laşi. Se ridică peste vecine (z-index) şi
revine singură când pleci de pe ea. elementFromPoint ţine cont de transformare,
deci ţinta rămâne aceeaşi în timp ce e mărită. */
.table-meld-group.drag-over {
transform: scale(1.35);
transform-origin: center center;
z-index: 60;
position: relative;
transition: transform .12s ease-out, outline .08s, box-shadow .1s;
}
.table-meld-group.drag-over .tile.joker-swappable {
box-shadow: 0 0 0 3px rgba(251, 191, 36, .95), 0 0 18px rgba(251, 191, 36, .6);
}
/* Prima piesă din rândul aruncatelor — ancora şirului, nu se poate rupe (11-09-2026) */
.discard-tile.is-anchor {
cursor: default;
filter: saturate(.75) brightness(.92);
}
.discard-tile.is-anchor::after {
content: '' !important;
position: absolute !important; left: 15% !important; right: 15% !important;
top: auto !important; bottom: 2px !important; width: auto !important; height: 2px !important;
background: rgba(212, 165, 68, .9) !important; border-radius: 2px !important;
/* ::after al piesei e folosit de luciu/marcaje cu alte reguli — de aici !important */
}
/* Zona TA de etalare când tragi o piesă peste ea — drop = etalare (11-09-2026) */
.etalare-zone.etalare-drop-over {
outline: 3px solid var(--remi-accent, #ffd700) !important;
outline-offset: -3px;
box-shadow: 0 0 24px rgba(255, 215, 0, .5), inset 0 0 20px rgba(255, 215, 0, .15) !important;
transition: outline 0.08s, box-shadow 0.1s;
}
/* Grămada / rândul aruncatelor când tragi o piesă peste ele — drop = aruncare (11-09-2026) */
.discard-drop-over {
outline: 3px solid rgba(239, 68, 68, .9) !important;
outline-offset: -3px;
box-shadow: 0 0 22px rgba(239, 68, 68, .5), inset 0 0 18px rgba(239, 68, 68, .15) !important;
transition: outline 0.08s, box-shadow 0.1s;
}
.tile.drag-insert-marker {
border-left: 3px solid #ffd700;
margin-left: 4px;
transition: margin 0.15s, border 0.15s;
}
/* ═══ LUPA — DROP INDICATOR (ghost slot outline) ═══
Arata user-ului EXACT unde se va aseza piesa la drop, in timp real.
Tip "Rummikub Live" — chenar galben dashed care luneca prin raft pe masura
ce user-ul misca degetul. Cand slot-ul tinta e ocupat → chenar portocaliu
(indica SWAP). Cand e gol → chenar verde (indica plasare libera). */
.hand-drop-indicator {
position: absolute;
pointer-events: none;
border: 2px dashed #34d399;
background: linear-gradient(135deg,
rgba(52, 211, 153, 0.22) 0%,
rgba(52, 211, 153, 0.12) 100%);
border-radius: 7px;
box-shadow:
0 0 14px rgba(52, 211, 153, 0.55),
inset 0 0 12px rgba(52, 211, 153, 0.2);
z-index: 8;
transition: left 0.08s cubic-bezier(0.4, 0, 0.2, 1),
top 0.08s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.12s,
background 0.12s,
box-shadow 0.12s;
animation: hand-drop-indicator-pulse 1.2s ease-in-out infinite;
}
.hand-drop-indicator.hand-drop-indicator-swap {
/* Slot ocupat → SWAP (ocupantul va muta in slot-ul piesei trase) */
border-color: #fbbf24;
background: linear-gradient(135deg,
rgba(251, 191, 36, 0.28) 0%,
rgba(245, 158, 11, 0.16) 100%);
box-shadow:
0 0 16px rgba(251, 191, 36, 0.65),
inset 0 0 14px rgba(251, 191, 36, 0.25);
}
@keyframes hand-drop-indicator-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.04); opacity: 0.85; }
}
/* ═══ LOCKED ACTION BUTTONS ═══
Butoanele "TRAGE/ETALEAZA/LIPI/ARUNCA" NU sunt dezactivate prin attr `disabled`
(asta blocheaza click-ul complet). In schimb primesc `aria-disabled="true"` +
`.is-locked` → click-ul trece prin ele si handler-ul arata un toast cu motivul.
User-ul intelege MEREU de ce butonul nu merge. */
.btn-action-bar.is-locked,
.action-in-infobar.is-locked,
.btn-primary-action.is-locked,
button.is-locked {
opacity: 0.48;
filter: grayscale(0.45) brightness(0.92);
cursor: help !important;
position: relative;
}
.btn-action-bar.is-locked:hover,
.action-in-infobar.is-locked:hover,
.btn-primary-action.is-locked:hover,
button.is-locked:hover {
opacity: 0.72;
filter: grayscale(0.25) brightness(1);
/* hint vizual: border subtire portocaliu care spune "da, se poate apasa, dar iti va spune de ce nu merge" */
box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45), 0 0 10px rgba(251, 191, 36, 0.25);
}
button.is-locked::before {
content: '';
position: absolute;
top: 3px;
right: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
box-shadow: 0 0 4px rgba(251, 191, 36, 0.7);
pointer-events: none;
opacity: 0.8;
}
/* Shake scurt cand user-ul apasa pe buton locked — confirma ca butonul a fost vazut */
.shake-hint {
animation: btnShakeHint 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes btnShakeHint {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-3px); }
40%, 60% { transform: translateX(3px); }
}
/* ═══ CONTEXTUAL HINT — sugereaza user-ului pasul urmator ═══
Apare langa bar-ul de actiuni si se actualizeaza in functie de state. */
.game-context-hint {
/* INTOTDEAUNA vizibil — rezerva spatiul ca sa nu se miscoreze/maseste layout-ul
cand mesajul apare/dispare. Cand e gol, ramane spatiul cu opacity redus. */
display: flex;
width: 100%;
box-sizing: border-box;
align-items: center;
gap: 7px;
padding: 5px 12px;
margin: 6px 0 0 0;
min-height: 30px;
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.12) 0%,
rgba(255, 180, 40, 0.06) 100%);
border: 1px solid rgba(255, 215, 0, 0.35);
border-radius: 10px;
color: rgba(60, 40, 15, 0.92);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
opacity: 0.4;
transition: opacity 0.2s ease-out;
}
.game-context-hint.visible {
opacity: 1;
animation: ctxHintFadeIn 0.25s ease-out;
}
.game-context-hint:empty::before {
content: '⏳';
opacity: 0.5;
font-size: 13px;
}
.game-context-hint .gch-icon {
font-size: 15px;
line-height: 1;
filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
}
.game-context-hint .gch-msg {
flex: 1;
letter-spacing: 0.1px;
}
@keyframes ctxHintFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Dark/immersive theme variant */
body.immersive-mode .game-context-hint,
body[data-theme="midnight"] .game-context-hint,
body[data-theme="onyx"] .game-context-hint,
body[data-theme="black-diamond"] .game-context-hint {
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.14) 0%,
rgba(100, 70, 10, 0.35) 100%);
color: rgba(255, 230, 160, 0.95);
border-color: rgba(255, 215, 0, 0.45);
}
/* ═══ DISCARD PILE READY ═══
Cand user-ul are o piesa selectata si poate arunca, zona de aruncat (pile, strip,
buton ARUNCA) pulseaza auriu pentru a invita drop-ul. Disparea imediat ce nu mai
sunt conditiile. */
.discard-pile.discard-ready,
#discardPile.discard-ready,
#discardHistoryStrip.discard-ready,
.discard-history-strip.discard-ready {
animation: discardPileReady 1.1s ease-in-out infinite;
position: relative;
}
.discard-pile.discard-ready::after,
#discardPile.discard-ready::after,
#discardHistoryStrip.discard-ready::after,
.discard-history-strip.discard-ready::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 10px;
border: 2px dashed rgba(255, 215, 0, 0.85);
pointer-events: none;
animation: discardPileReadyOutline 1.1s ease-in-out infinite;
z-index: 2;
}
/* Pe butonul ARUNCA (chip-btn/action-in-infobar) — doar box-shadow, fara ::after ca
sa nu suprapuna peste label. */
#btnDiscard.discard-ready {
animation: discardBtnReady 1.1s ease-in-out infinite;
position: relative;
}
@keyframes discardPileReady {
0%, 100% {
box-shadow:
0 0 0 2px rgba(255, 215, 0, 0.35),
0 0 14px rgba(255, 215, 0, 0.55);
}
50% {
box-shadow:
0 0 0 3px rgba(255, 215, 0, 0.7),
0 0 22px rgba(255, 215, 0, 0.85);
}
}
@keyframes discardPileReadyOutline {
0%, 100% { opacity: 0.75; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
@keyframes discardBtnReady {
0%, 100% {
box-shadow:
0 0 0 2px rgba(255, 100, 80, 0.5),
0 0 12px rgba(255, 180, 100, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
50% {
box-shadow:
0 0 0 3px rgba(255, 180, 40, 0.85),
0 0 20px rgba(255, 215, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
}
/* ═══ GRUP NOU — gap vizual inainte de piesa marcata cu dublu-click ═══
Permite user-ului sa faca gramezi/grupuri distincte in mana, fara sa
afecteze serverul (pur vizual). Dublu-click pe piesa activeaza/dezactiveaza. */
.tile.hand-group-start {
margin-left: 28px !important;
position: relative;
transition: margin 0.2s ease;
}
.tile.hand-group-start::before {
content: '';
position: absolute;
left: -14px;
top: 15%;
bottom: 15%;
width: 3px;
background: linear-gradient(180deg, rgba(255, 215, 0, 0.85) 0%, rgba(204, 153, 0, 0.6) 100%);
border-radius: 2px;
box-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
pointer-events: none;
}
/* Tile Colors — Remi clasic: rosu, galben, albastru, negru */
.tile.color-red { color: #b91c1c; text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 -1px 1px rgba(120, 20, 20, 0.15); }
.tile.color-blue { color: #1e40af; text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 -1px 1px rgba(20, 30, 120, 0.15); }
.tile.color-yellow{ color: #facc15; text-shadow: 0 0 1px #7c5e00, 0 1px 0 rgba(0,0,0,0.35), -1px 0 0 #7c5e00, 1px 0 0 #7c5e00, 0 -1px 0 #7c5e00; -webkit-text-stroke: 0.4px #7c5e00; }
.tile.color-black { color: #111111; text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 -1px 1px rgba(0, 0, 0, 0.2); }
/* ═══ JOKER — holographic shimmer + golden border + art-deco pattern ═══ */
.tile.color-joker {
background:
/* Damask diamond pattern */
repeating-linear-gradient(45deg,
transparent 0, transparent 3px,
rgba(184, 134, 11, 0.08) 3px, rgba(184, 134, 11, 0.08) 4px),
repeating-linear-gradient(-45deg,
transparent 0, transparent 3px,
rgba(184, 134, 11, 0.08) 3px, rgba(184, 134, 11, 0.08) 4px),
/* Gold gradient base */
linear-gradient(135deg,
#fff8dc 0%,
#ffecb3 20%,
#ffd700 50%,
#ffb300 80%,
#cc9900 100%);
background-size: 8px 8px, 8px 8px, 100% 100%;
color: #7b4f00;
font-size: 16px;
border: 1.5px solid #b8860b;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 2px;
}
/* SVG jester face — ocupa top 70% din tile */
.tile.color-joker .joker-svg {
width: 85%;
height: auto;
max-height: 72%;
filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
pointer-events: none;
position: relative;
z-index: 1;
}
/* Pe tile-uri mici (≤360px portrait), simplifica joker-ul — ascunde labelul "JOKER", marește SVG */
@media (max-width: 360px) {
.tile.color-joker .joker-svg { width: 92%; max-height: 85%; }
.tile.color-joker .joker-label { display: none; }
}
/* Label JOKER mic aurit sub fata */
.tile.color-joker .joker-label {
font-family: 'Oswald', var(--font-display), sans-serif;
font-size: 7px;
font-weight: 800;
letter-spacing: 1.2px;
color: #8b5a00;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
position: relative;
z-index: 1;
line-height: 1;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.25),
0 4px 10px rgba(184, 134, 11, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 -1px 0 rgba(120, 80, 0, 0.3),
inset 0 0 0 1px rgba(255, 215, 0, 0.6);
animation: jokerShimmer 3s ease-in-out infinite;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.7),
0 0 8px rgba(255, 215, 0, 0.5);
}
/* Holographic shimmer sweep */
.tile.color-joker::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(115deg,
transparent 30%,
rgba(255, 255, 255, 0.5) 45%,
rgba(255, 235, 150, 0.7) 50%,
rgba(255, 255, 255, 0.5) 55%,
transparent 70%);
background-size: 250% 100%;
background-position: -100% 0;
animation: jokerSweep 2.8s ease-in-out infinite;
pointer-events: none;
mix-blend-mode: overlay;
z-index: 2;
}
@keyframes jokerShimmer {
0%, 100% {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.25),
0 4px 10px rgba(184, 134, 11, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 -1px 0 rgba(120, 80, 0, 0.3),
inset 0 0 0 1px rgba(255, 215, 0, 0.6);
}
50% {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.25),
0 4px 14px rgba(255, 193, 7, 0.55),
0 0 18px rgba(255, 215, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(120, 80, 0, 0.3),
inset 0 0 0 1px rgba(255, 235, 150, 0.9);
}
}
@keyframes jokerSweep {
0% { background-position: -100% 0; }
50% { background-position: 200% 0; }
100% { background-position: 200% 0; }
}
/* Joker selectat: efect intens */
.tile.color-joker.selected {
animation: jokerShimmer 1.5s ease-in-out infinite;
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.3),
0 0 28px rgba(255, 215, 0, 0.7),
inset 0 0 0 2px #ffd700;
}
/* Tile Number */
.tile-number {
line-height: 1;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.tile-suit-dot {
width: calc(var(--tile-font) * 0.7);
height: calc(var(--tile-font) * 0.7);
border-radius: 50%;
margin-top: 2px;
border: 1px solid rgba(0, 0, 0, 0.28);
box-shadow:
inset 0 1px 1.5px rgba(255, 255, 255, 0.42),
inset 0 -1px 1.5px rgba(0, 0, 0, 0.2),
0 1px 1.5px rgba(0, 0, 0, 0.22);
}
/* Gradientul punctului are culoarea centrala IDENTICA cu culoarea numarului
(vezi .tile.color-X color: ... mai sus) — consistenta piesa/punct. */
.tile.color-red .tile-suit-dot {
background: radial-gradient(circle at 35% 30%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%);
border-color: #7f1d1d;
}
.tile.color-blue .tile-suit-dot {
background: radial-gradient(circle at 35% 30%, #3b82f6 0%, #1e40af 60%, #1e3a8a 100%);
border-color: #1e3a8a;
}
.tile.color-yellow .tile-suit-dot {
background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #facc15 55%, #a16207 100%);
border-color: #854d0e;
}
.tile.color-black .tile-suit-dot {
background: radial-gradient(circle at 35% 30%, #4b5563 0%, #111111 60%, #000000 100%);
border-color: #000000;
}
/* Tile set indicator */
.tile-set-mark {
position: absolute;
top: 2px;
right: 3px;
font-size: 6px;
opacity: 0.3;
}
/* Small tiles */
.tile-sm {
width: var(--tile-width-sm);
height: var(--tile-height-sm);
font-size: var(--tile-font-sm);
}
.tile-sm .tile-suit-dot {
width: calc(var(--tile-font-sm, 14px) * 0.7);
height: calc(var(--tile-font-sm, 14px) * 0.7);
}
/* Mini tiles (lobby/stats) */
.tile-mini {
width: 22px;
height: 30px;
font-size: 12px;
border-width: 1px;
}
/* Face-down tile (attached to others' melds) */
.tile-attached {
opacity: 0.5;
background: linear-gradient(135deg, var(--remi-accent), #6b21a8) !important;
color: transparent !important;
}
.tile-attached .tile-suit-dot { display: none; }
.tile-attached .tile-number { color: transparent; }
/* Tile back — cream/beige like real remi tile backs */
.tile-back {
background: linear-gradient(145deg, #e8dcc8, #d4c4a8, #c8b898);
color: transparent;
border-color: rgba(0, 0, 0, 0.12);
}
.tile-back::after {
content: '✦';
color: rgba(120, 90, 50, 0.25);
font-size: 20px;
}
/* Joker swap highlight */
.tile.joker-swappable {
border-color: var(--remi-warning);
box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
cursor: pointer;
}
.tile.joker-swappable:hover {
box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
}
/* Tooltip on tile hover */
.tile-tooltip {
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 30, 10, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
padding: 2px 6px;
font-size: 10px;
font-weight: 600;
color: #fff;
white-space: nowrap;
pointer-events: none;
z-index: 10;
opacity: 0;
transition: opacity 0.2s;
}
.tile:hover .tile-tooltip { opacity: 1; }
/* ================================================================================================
11. ACTION BAR
================================================================================================ */
/* ═══ ACTION BAR — butoane mici, premium casino, profesional ═══
2026-04-21: Redesign fin — 34px inaltime (redus de la 44px), padding compact,
font 12px, iconite 16px. Gradients mai subtile, ring auriu subtle la hover/active.
Functionalitatea NU se schimba (aceleasi clase, aceleasi id-uri, aceleasi state-uri). */
.action-bar {
display: flex;
gap: 6px;
padding: 6px 10px;
justify-content: center;
flex-shrink: 0;
flex-wrap: wrap;
background: transparent;
max-width: 680px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.action-btn-game {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 12px;
/* Subtle dark gradient cu luciu fin pe muchia de sus */
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0) 35%,
rgba(0, 0, 0, 0.12) 100%),
linear-gradient(180deg, #4a321a 0%, #352312 100%);
border: 1px solid rgba(255, 215, 0, 0.12);
border-radius: 7px;
color: #e8d5b8;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
cursor: pointer;
transition: border-color 0.18s ease, color 0.18s ease,
box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;
white-space: nowrap;
font-family: inherit;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 1px 3px rgba(0, 0, 0, 0.35);
flex: 1 1 0;
min-width: 0;
min-height: 34px;
line-height: 1;
position: relative;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
.action-btn-game .material-symbols-rounded {
font-size: 16px;
line-height: 1;
opacity: 0.92;
}
.action-btn-game:hover:not(:disabled) {
border-color: rgba(255, 215, 0, 0.55);
color: #ffd700;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 2px 6px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(255, 215, 0, 0.18);
transform: translateY(-1px);
}
.action-btn-game:active:not(:disabled) {
transform: translateY(0);
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.2);
}
.action-btn-game:disabled {
opacity: 0.38;
cursor: not-allowed;
filter: saturate(0.6);
}
/* Primary action — Etaleaza (distinct verde emerald) */
.action-btn-game.btn-primary-action {
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0) 40%,
rgba(0, 0, 0, 0.12) 100%),
linear-gradient(180deg, #2d7d3a 0%, #1a5e28 100%);
border-color: rgba(102, 255, 128, 0.35);
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.action-btn-game.btn-primary-action:hover:not(:disabled) {
border-color: rgba(180, 255, 200, 0.7);
color: #ffffff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 2px 8px rgba(46, 125, 50, 0.45),
0 0 0 1px rgba(102, 255, 128, 0.25);
transform: translateY(-1px);
}
.action-btn-game.btn-primary-action:disabled {
opacity: 0.38;
}
.action-btn-game.active {
border-color: rgba(255, 215, 0, 0.7);
color: #ffd700;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 0 1px rgba(255, 215, 0, 0.35),
0 2px 6px rgba(255, 215, 0, 0.18);
}
@media (max-width: 480px) {
.action-btn-game span:not(.material-symbols-rounded) { display: none; }
.action-btn-game {
padding: 6px 8px;
min-height: 32px;
gap: 0;
}
.action-btn-game .material-symbols-rounded { font-size: 18px; }
.action-bar { gap: 4px; padding: 4px 6px; }
}
/* ================================================================================================
12. TURN TIMER
================================================================================================ */
.turn-timer-display {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: var(--remi-text);
padding: 2px 8px;
border-radius: var(--remi-radius-xs);
background: var(--remi-surface-2);
border: 1px solid var(--remi-border);
}
.turn-timer-display .material-symbols-rounded {
font-size: 16px;
color: var(--remi-accent);
}
.turn-timer-display.warning {
color: var(--remi-warning);
border-color: rgba(var(--remi-warning-rgb), 0.3);
animation: turnTimerPulse 1s ease-in-out infinite;
}
.turn-timer-display.warning .material-symbols-rounded {
color: var(--remi-warning);
}
.turn-timer-display.danger {
color: var(--remi-danger);
border-color: rgba(var(--remi-danger-rgb), 0.3);
animation: turnTimerPulse 0.5s ease-in-out infinite;
}
.turn-timer-display.danger .material-symbols-rounded {
color: var(--remi-danger);
}
.turn-timer-bar {
height: 4px;
background: rgba(0, 0, 0, 0.4);
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
position: relative;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.turn-timer-fill {
height: 100%;
background:
linear-gradient(90deg,
rgba(255, 215, 0, 0.9) 0%,
rgba(255, 235, 150, 1) 50%,
rgba(255, 215, 0, 0.9) 100%);
box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
border-radius: 2px;
transition: width 1s linear;
position: relative;
overflow: hidden;
}
/* Animated shine on timer bar */
.turn-timer-fill::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.5) 50%,
transparent 100%);
animation: timerShine 2s linear infinite;
}
@keyframes timerShine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.turn-timer-fill.warning {
background: linear-gradient(90deg, #fb923c 0%, #f59e0b 50%, #fb923c 100%);
box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
}
.turn-timer-fill.danger {
background: linear-gradient(90deg, #ef4444 0%, #dc2626 50%, #ef4444 100%);
box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
animation: timerDangerPulse 0.5s ease-in-out infinite;
}
@keyframes timerDangerPulse {
0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }
50% { box-shadow: 0 0 18px rgba(239, 68, 68, 1); }
}
/* ═══ ORBITING PARTICLES on active player area ═══
NOTA: NU se aplica pe .seat-south — acolo ::after e deja folosit pentru
BRACKET-UL DREAPTA cu rivets (linia ~4163). Cand jucatorul sud era in rand,
particle overridea bracket-ul → rama dreapta disparea. Pastram particle DOAR
pentru opponents; seat-south are deja glow pulsant prin seatSouthTurnGlow. */
.opponent-area.active-turn::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: radial-gradient(circle, #ffd700 0%, transparent 70%);
border-radius: 50%;
top: -2px;
left: 50%;
animation: orbitParticle 3s linear infinite;
pointer-events: none;
box-shadow:
0 0 8px rgba(255, 215, 0, 0.8),
0 0 16px rgba(255, 215, 0, 0.4);
}
@keyframes orbitParticle {
0% {
transform: translate(-50%, 0) rotate(0deg) translateX(20px) rotate(0deg);
opacity: 0;
}
10% { opacity: 1; }
90% { opacity: 1; }
100% {
transform: translate(-50%, 0) rotate(360deg) translateX(20px) rotate(-360deg);
opacity: 0;
}
}
/* ================================================================================================
13. GAME END OVERLAY
================================================================================================ */
.game-end-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 300;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
/* Animatie strangere piese la game end */
.tile-collecting {
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s !important;
pointer-events: none !important;
position: relative;
z-index: 500;
}
.tiles-collected .tile,
.tiles-collected .opponent-tile-back,
.tiles-collected .pile-tile,
.tiles-collected .table-meld-group,
.tiles-collected .discard-history-tile,
.tiles-collected .activity-log-entry,
.tiles-collected .tile-count-badge {
visibility: hidden !important;
}
/* Fade-out paralel pentru punctele/scorurile de pe masă */
.points-fading-out {
transition: opacity 0.5s ease, transform 0.5s ease !important;
opacity: 0 !important;
transform: scale(0.85) !important;
pointer-events: none !important;
}
.game-end-overlay.active {
opacity: 1;
visibility: visible;
}
.game-end-card {
background: var(--remi-surface);
border: 1px solid var(--remi-border);
border-radius: var(--remi-radius);
padding: 32px;
width: 90%;
max-width: 420px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
text-align: center;
animation: fadeInScale 0.4s ease;
}
.result-animation {
position: relative;
width: 56px;
height: 56px;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 42px;
}
.result-animation::before {
content: '';
position: absolute;
inset: -10px;
background: radial-gradient(circle, rgba(var(--remi-accent-rgb), 0.25) 0%, transparent 70%);
border-radius: 50%;
animation: resultPulse 2.5s ease-in-out infinite;
}
.game-end-header { margin-bottom: 20px; }
.game-end-icon {
font-size: 48px;
color: var(--remi-gold);
display: block;
margin-bottom: 8px;
}
.game-end-header h2 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
margin: 0;
color: var(--remi-text);
}
/* Result Ranking */
.result-ranking {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.ranking-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: var(--remi-radius-xs);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
}
.ranking-item.winner {
background: var(--remi-accent-glow);
border-color: var(--remi-accent);
}
.ranking-position {
font-weight: 800;
font-size: 16px;
min-width: 24px;
color: var(--remi-text-dim);
}
.ranking-item.winner .ranking-position {
color: var(--remi-gold);
}
.ranking-name {
flex: 1;
font-weight: 600;
text-align: left;
}
.ranking-score {
font-weight: 700;
font-size: 16px;
color: var(--remi-accent);
}
/* Scores */
.game-end-scores {
margin-bottom: 24px;
text-align: left;
}
.score-row {
padding: 10px 14px;
border-radius: 10px;
margin-bottom: 6px;
font-size: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: background 0.2s ease;
}
.score-row:hover {
background: rgba(255, 255, 255, 0.06);
}
.score-row.winner {
background: rgba(var(--remi-accent-rgb), 0.12);
border: 1px solid rgba(var(--remi-accent-rgb), 0.4);
box-shadow: 0 0 20px rgba(var(--remi-accent-rgb), 0.1);
}
.score-row-main {
display: flex;
align-items: center;
gap: 6px;
}
.score-row .score-rank {
font-weight: 800;
font-size: 14px;
min-width: 22px;
color: var(--remi-text-dim);
}
.score-row.winner .score-rank {
color: var(--remi-accent);
}
.score-row .score-name {
font-weight: 600;
flex: 1;
text-align: left;
}
.score-row .score-value-end {
font-weight: 800;
font-size: 18px;
font-family: var(--font-display);
color: var(--remi-accent);
margin-left: auto;
}
.score-row .score-detail {
font-size: 11px;
color: var(--remi-text-dim);
margin-left: 4px;
}
.score-breakdown {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 11px;
color: var(--remi-text-dim);
}
.score-breakdown span {
padding: 2px 6px;
background: rgba(255, 255, 255, 0.04);
border-radius: 4px;
}
/* 2026-04-20: Per-player balance progression — "balanta before → balanta after (+delta)"
in fiecare rand de ranking (ca Septica/Table). */
.score-balance {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 12px;
color: var(--remi-text-dim);
}
.score-balance-label {
font-weight: 600;
color: var(--remi-text-dim);
opacity: 0.85;
}
.score-balance-before {
opacity: 0.55;
text-decoration: line-through;
font-size: 0.9em;
}
.score-balance-arrow {
opacity: 0.6;
font-size: 0.95em;
margin: 0 2px;
}
.score-balance-after {
font-weight: 700;
font-size: 1em;
}
.score-balance-delta {
font-weight: 600;
font-size: 0.9em;
padding: 1px 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
margin-left: 4px;
}
.score-balance-delta.reward-positive {
background: rgba(34, 197, 94, 0.14);
}
.score-balance-delta.reward-negative {
background: rgba(239, 68, 68, 0.14);
}
/* Reward colors */
.reward-positive { color: #22c55e !important; }
.reward-negative { color: #ef4444 !important; }
.reward-neutral { color: var(--remi-text-dim) !important; }
/* Result Stats */
.result-stats {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
width: 100%;
}
.result-stat {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 0;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s ease;
}
.result-stat:first-child { border-radius: 8px 8px 0 0; }
.result-stat:last-child { border-bottom: none; border-radius: 0 0 8px 8px; }
.result-stat:hover { background: rgba(255, 255, 255, 0.06); }
.result-stat-value {
font-size: 16px;
font-weight: 700;
font-family: var(--font-display);
color: var(--remi-accent);
}
.result-stat-label {
font-size: 12px;
color: var(--remi-text-dim);
font-weight: 500;
}
/* Result stats row (inline) */
.result-stat-row {
display: flex;
justify-content: center;
gap: 16px;
padding: 8px 0;
font-size: 13px;
color: var(--remi-text-dim);
}
/* Result stats grid (2x2) */
.result-stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 8px;
width: 100%;
}
.result-stat-cell {
padding: 8px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.result-stat-cell-val {
font-size: clamp(14px, 3vw, 16px);
font-weight: 800;
color: var(--remi-accent);
font-family: var(--font-display);
}
.result-stat-cell-lbl {
font-size: 10px;
color: var(--remi-text-dim);
margin-top: 2px;
}
/* Highlight stat row */
.result-stat-highlight {
background: rgba(var(--remi-accent-rgb), 0.08) !important;
border-left: 3px solid var(--remi-accent);
}
/* Auto-rematch */
.auto-rematch-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px;
font-size: 12px;
color: var(--remi-text-dim);
}
.rematch-switch {
width: 36px;
height: 20px;
background: var(--remi-surface-2);
border-radius: 10px;
position: relative;
cursor: pointer;
transition: background 0.3s;
display: inline-block;
}
.rematch-switch::after {
content: '';
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s;
}
.rematch-switch.active {
background: var(--remi-accent);
}
.rematch-switch.active::after {
transform: translateX(16px);
}
.auto-rematch-countdown {
font-size: 12px;
color: var(--remi-accent);
font-weight: 600;
text-align: center;
padding: 4px;
}
/* End Actions */
.game-end-actions {
display: flex;
gap: 8px;
}
.game-end-btn {
flex: 1;
padding: 12px;
border: 1px solid var(--remi-border);
border-radius: var(--remi-radius-sm);
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.2s;
font-family: inherit;
}
.game-end-btn .material-symbols-rounded { font-size: 20px; }
.btn-play-again {
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-light));
color: white;
border-color: transparent;
}
.btn-play-again:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px var(--remi-accent-glow);
}
.btn-back-menu {
background: var(--remi-surface-2);
color: var(--remi-text);
}
.btn-back-menu:hover {
border-color: var(--remi-accent);
}
/* ═══ Panou oferta promovare spectator — INLINE in modal premiere ═══ */
.mp-offer-in-modal {
margin: 14px 0 8px;
padding: 12px 14px;
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.15) 0%,
rgba(37, 99, 235, 0.08) 100%);
border: 1px solid rgba(59, 130, 246, 0.35);
border-radius: 10px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: mpOfferSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mpOfferSlideIn {
0% { opacity: 0; transform: translateY(-8px); }
100% { opacity: 1; transform: translateY(0); }
}
.mp-offer-in-modal .mp-offer-badge {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.mp-offer-in-modal .mp-offer-badge .material-symbols-rounded {
font-size: 22px;
color: #60a5fa;
filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.5));
}
.mp-offer-in-modal .mp-offer-title {
font-size: 13px;
font-weight: 800;
color: #dbeafe;
letter-spacing: 0.2px;
}
.mp-offer-in-modal .mp-offer-progress-bar {
width: 100%;
height: 5px;
background: rgba(0, 0, 0, 0.3);
border-radius: 3px;
overflow: hidden;
margin: 6px 0;
}
.mp-offer-in-modal .mp-offer-progress-fill {
height: 100%;
width: 100%;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
border-radius: 3px;
/* 0,25s, nu 1s: de la 20-09-2026 bara se rescrie la fiecare 200ms (numărătoarea
ofertei se citeşte din ceas, nu din paşi de-o secundă). Cu tranziţie de 1s bara
rămânea mereu o secundă în urma cifrei de dedesubt. */
transition: width 0.25s linear, background 0.3s ease;
}
.mp-offer-in-modal .mp-offer-progress-fill.is-urgent {
background: linear-gradient(90deg, #dc2626, #ef4444);
animation: mpOfferUrgentPulse 0.6s ease-in-out infinite;
}
@keyframes mpOfferUrgentPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.mp-offer-in-modal .mp-offer-countdown {
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
text-align: center;
margin-top: 4px;
}
.mp-offer-in-modal .mp-offer-countdown strong {
color: #93c5fd;
font-size: 12px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
/* Result actions (for modal variant) — butoane compacte, elegante, single-line */
.result-actions {
display: flex;
gap: 8px;
margin-top: 14px;
width: 100%;
justify-content: center;
}
.result-actions .btn,
.result-actions .btn-control {
flex: 0 1 auto; /* nu mai umple tot spatiul — ia cat trebuie */
min-width: 0;
padding: 8px 14px; /* mai compact */
font-size: 12px; /* era 13px */
font-weight: 700;
letter-spacing: 0.3px;
border-radius: 8px; /* era 10px */
text-transform: uppercase;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid transparent;
min-height: 36px; /* era 40px */
white-space: nowrap; /* text pe o singura linie */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.result-actions .btn-control .material-symbols-rounded {
font-size: 16px;
}
/* PRIMARY — Joaca din nou (albastru remi) */
.result-actions .btn-primary,
.result-actions .btn-control.btn-primary {
background: linear-gradient(135deg,
rgba(var(--remi-accent-rgb), 0.85) 0%,
rgba(var(--remi-accent-rgb), 0.7) 100%
);
border-color: rgba(var(--remi-accent-rgb), 0.6);
color: #fff;
box-shadow:
0 3px 8px rgba(var(--remi-accent-rgb), 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.result-actions .btn-primary:hover,
.result-actions .btn-control.btn-primary:hover {
transform: translateY(-1px);
box-shadow:
0 5px 14px rgba(var(--remi-accent-rgb), 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* SUCCESS — Intra in joc (verde) */
.result-actions .btn-success,
.result-actions .btn-control.btn-success {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.85) 0%,
rgba(22, 163, 74, 0.75) 100%
);
border-color: rgba(34, 197, 94, 0.55);
color: #fff;
box-shadow:
0 3px 8px rgba(34, 197, 94, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.result-actions .btn-success:hover {
transform: translateY(-1px);
box-shadow:
0 5px 14px rgba(34, 197, 94, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* SECONDARY — Inchide (rosu outline) */
.result-actions .btn-secondary,
.result-actions .btn-control.btn-secondary {
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.15) 0%,
rgba(220, 38, 38, 0.1) 100%
);
border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5;
box-shadow:
0 2px 6px rgba(239, 68, 68, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.result-actions .btn-secondary:hover {
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.25) 0%,
rgba(220, 38, 38, 0.2) 100%);
border-color: rgba(239, 68, 68, 0.6);
color: #fff;
transform: translateY(-1px);
}
/* Mobile: daca nu incap pe o linie, stack vertical */
@media (max-width: 480px) {
.result-actions {
flex-direction: column;
gap: 6px;
}
.result-actions .btn,
.result-actions .btn-control {
width: 100%;
flex: 0 0 auto;
padding: 10px 14px;
}
}
.result-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
background: linear-gradient(135deg,
var(--remi-accent) 0%,
var(--remi-accent-light, #e8c55a) 50%,
var(--remi-accent) 100%
);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 14px 0;
letter-spacing: 1px;
animation: titlePulse 3s ease-in-out infinite;
flex-shrink: 0;
}
/* Title win/lose animations */
@keyframes resultTitleWin {
0% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes resultTitleLose {
0% { transform: translateY(-10px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.result-title-win {
animation: resultTitleWin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.result-title-lose {
animation: resultTitleLose 0.5s ease !important;
}
/* ================================================================================================
14. CONTEXT PANEL
================================================================================================ */
/* Context Panel — copied from Table (reference) and adapted for Remi */
.context-panel {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
min-width: 320px !important;
display: flex !important;
flex-direction: column !important;
height: calc(100% - var(--sab, 0px)) !important;
max-height: calc(100vh - var(--top-bar-height, 60px) - 108px - var(--sab, 0px)) !important;
background: linear-gradient(180deg,
rgba(var(--remi-primary-rgb, 36, 21, 66), 0.95) 0%,
rgba(var(--remi-primary-rgb, 36, 21, 66), 0.98) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-left: 1px solid rgba(var(--remi-accent-rgb), 0.1);
box-shadow: -4px 0 30px rgba(var(--remi-accent-rgb), 0.06);
position: relative;
z-index: var(--z-dropdown, 100);
transition: transform var(--transition-base, 0.3s ease);
transform-style: preserve-3d;
backface-visibility: hidden;
overflow: hidden;
}
.context-panel.active {
transform: translateX(0);
}
/* Animația panoului de context — la deschidere ȘI la fiecare trecere între file
(chat / mese / jucători / turnee), fiindcă `remi-pro.js:8186` scoate și repune
clasa la fiecare comutare.
2026-09-04, înlocuită. Ce era: `pageFlip 0.7s cubic-bezier(0.34, 1.56, 0.64, 1)`
— o rotire 3D din muchie (`rotateY(-90deg)`) cu depășire elastică. Trei
probleme, toate confirmate în banc:
a) 0,7s e de trei ori mai lentă decât orice altceva din joc (durata folosită
de 80 de ori în fișier e 0,2s, apoi 0,3s de 43 de ori);
b) rotirea din muchie citește ca „pagină întoarsă", obositor la fiecare
comutare de filă;
c) keyframes-ul mergea de la `opacity: 0`, deci în timpul animației se vedea
masa PRIN panou. Ăsta a fost motivul principal pentru care userul a
respins și primele variante de înlocuire: „se vede în spatele panoului
mesele, nu îmi place".
Ce e acum („Cortină + conținut", ales din 5 variante comparate live): panoul
intră ca o suprafață PLINĂ dinspre dreapta — opacitatea lui nu e atinsă
deloc, deci nu se vede nimic prin el în niciun moment — iar conținutul se
așază 80ms mai târziu, în două straturi. Ambele durate și accelerarea sunt
din vocabularul jocului.
Panoul e opac prin design (gradient 95-98% + `backdrop-filter: blur(20px)`),
de-aia funcționează: ajunge să NU animăm opacitatea.
`@keyframes pageFlip` și `pageFlipMobile` au fost ȘTERSE odată cu schimbarea
asta (vezi nota de la ~19359) — primul devenea nefolosit, al doilea era deja
mort în Remi dinainte. */
@keyframes remiPanouCortina {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes remiPanouContinut {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.context-panel.page-flip-in {
animation: remiPanouCortina 0.26s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
}
.context-panel.page-flip-in .panel-content {
animation: remiPanouContinut 0.24s cubic-bezier(0.4, 0, 0.2, 1) 0.08s both;
}
.context-panel.hidden {
transform: translateX(100%);
flex-basis: 0 !important;
width: 0 !important;
max-width: 0 !important;
min-width: 0 !important;
overflow: hidden;
}
.panel-header {
flex-shrink: 0;
padding: 4px 10px;
border-bottom: 1px solid rgba(var(--remi-accent-rgb), 0.08);
box-shadow: 0 2px 10px rgba(var(--remi-accent-rgb), 0.04);
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-title {
font-family: var(--font-display, 'Poppins', sans-serif);
font-size: 12px;
font-weight: 700;
color: var(--remi-accent);
text-shadow: 0 0 10px rgba(var(--remi-accent-rgb), 0.3);
margin: 0;
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
overflow: hidden;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.panel-title .panel-title-icon {
font-size: 16px !important;
line-height: 1;
opacity: 0.85;
}
.panel-back {
width: 28px;
height: 28px;
background: var(--glass-bg, rgba(255,255,255,0.06));
border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
border-radius: 6px;
color: var(--remi-text-dim);
cursor: pointer;
transition: all var(--transition-base, 0.3s ease);
flex-shrink: 0;
}
.panel-back:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--remi-accent);
border-color: rgba(255, 255, 255, 0.15);
transform: translateX(2px);
}
.panel-back:active {
transform: translateX(2px) scale(0.95);
background: rgba(255, 255, 255, 0.15);
}
.panel-back .material-symbols-rounded {
font-size: 16px;
transition: transform var(--transition-base, 0.3s ease);
}
.panel-back:hover .material-symbols-rounded { transform: translateX(1px); }
.panel-close {
width: 28px;
height: 28px;
background: var(--glass-bg, rgba(255,255,255,0.06));
border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
border-radius: 6px;
color: var(--remi-text-dim);
cursor: pointer;
transition: all var(--transition-base, 0.3s ease);
flex-shrink: 0;
}
.panel-close .material-symbols-rounded { font-size: 16px; }
.panel-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--remi-text);
}
.panel-loading-bar {
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 2.5px;
background: linear-gradient(90deg,
rgba(var(--remi-accent-rgb), 0.6),
rgba(var(--remi-accent-rgb), 1),
rgba(var(--remi-accent-rgb), 0.6));
border-radius: 0 2px 2px 0;
box-shadow:
0 0 8px rgba(var(--remi-accent-rgb), 0.4),
0 0 20px rgba(var(--remi-accent-rgb), 0.15);
opacity: 0;
pointer-events: none;
z-index: 2;
transition: opacity 0.15s ease;
}
.panel-loading-bar.active {
opacity: 1;
animation: panelLoadingSlide 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.panel-loading-bar.fade-out {
opacity: 0;
transition: opacity 0.25s ease;
}
.panel-content {
flex: 1 1 auto;
min-height: 0;
overflow-y: scroll !important;
overflow-x: hidden;
padding: clamp(8px, 2vw, 14px);
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
contain: layout style;
}
.panel-content::-webkit-scrollbar { width: 10px; display: block !important; }
.panel-content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.panel-content::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(var(--remi-accent-rgb), 0.6) 0%, rgba(var(--remi-accent-rgb), 0.5) 100%);
border-radius: 9999px;
border: 2px solid rgba(var(--remi-accent-rgb), 0.3);
box-shadow: 0 0 6px rgba(var(--remi-accent-rgb), 0.4);
}
.panel-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(var(--remi-accent-rgb), 0.8) 0%, rgba(var(--remi-accent-rgb), 0.7) 100%);
box-shadow: 0 0 8px rgba(var(--remi-accent-rgb), 0.6);
}
.panel-content::-webkit-scrollbar-thumb:active { background: var(--remi-accent); }
/* ═══ STATS PANEL — premium casino cards ═══ */
.stats-panel-container {
padding: 8px 4px;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.stats-card {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 12px;
background: linear-gradient(135deg,
rgba(20, 45, 25, 0.55) 0%,
rgba(10, 30, 15, 0.7) 100%);
border: 1px solid rgba(255, 215, 0, 0.15);
border-radius: 12px;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 2px 8px rgba(0, 0, 0, 0.25);
}
.stats-card::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.35), transparent);
}
.stats-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 215, 0, 0.35);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 8px 18px rgba(0, 0, 0, 0.35),
0 0 14px rgba(255, 215, 0, 0.15);
}
.stats-card-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.2),
rgba(184, 134, 11, 0.12));
border: 1px solid rgba(255, 215, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.stats-card-icon .material-symbols-rounded {
font-size: 22px;
color: #ffd700;
filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
}
.stats-card-body {
flex: 1;
min-width: 0;
}
.stats-card-value {
font-family: var(--font-tile, 'Oswald', sans-serif);
font-size: 24px;
font-weight: 800;
color: #ffd700;
line-height: 1;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
letter-spacing: -0.5px;
}
.stats-card-label {
font-size: 10px;
font-weight: 600;
color: rgba(255, 235, 180, 0.6);
margin-top: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Specific card accent colors */
.stats-card-wins .stats-card-icon {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.15));
border-color: rgba(34, 197, 94, 0.4);
}
.stats-card-wins .stats-card-icon .material-symbols-rounded {
color: #86efac;
filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
}
.stats-card-wins .stats-card-value {
color: #86efac;
text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}
.stats-card-winrate .stats-card-icon {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.15));
border-color: rgba(59, 130, 246, 0.4);
}
.stats-card-winrate .stats-card-icon .material-symbols-rounded {
color: #93c5fd;
filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.45));
}
.stats-card-winrate .stats-card-value {
color: #93c5fd;
text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}
/* Stats Card: games (default gold) + points (default gold) — verificare explicita */
.stats-card-games .stats-card-icon,
.stats-card-points .stats-card-icon {
/* Foloseste default-ul auriu din .stats-card-icon */
}
.stats-card-games .stats-card-value {
color: #ffd700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.stats-card-points .stats-card-value {
color: #fde047;
text-shadow: 0 0 10px rgba(253, 224, 71, 0.35);
}
/* Light theme */
[data-theme="light"] .stats-card {
background: linear-gradient(135deg, rgba(255, 253, 245, 0.95) 0%, rgba(245, 238, 220, 0.9) 100%);
border-color: rgba(184, 134, 11, 0.3);
}
[data-theme="light"] .stats-card:hover {
border-color: rgba(184, 134, 11, 0.55);
}
[data-theme="light"] .stats-card-icon {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(184, 134, 11, 0.25));
border-color: rgba(184, 134, 11, 0.45);
}
[data-theme="light"] .stats-card-value {
color: #8b6914;
text-shadow: 0 0 8px rgba(184, 134, 11, 0.2);
}
[data-theme="light"] .stats-card-label {
color: rgba(139, 105, 20, 0.75);
}
/* Mobile stats — single column + tighter */
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr; gap: 8px; }
.stats-card { padding: 12px 10px; }
.stats-card-value { font-size: 22px; }
.stats-card-icon { width: 36px; height: 36px; }
.stats-card-icon .material-symbols-rounded { font-size: 19px; }
}
/* Mobile online users — compact meta row */
@media (max-width: 480px) {
.online-users-header { gap: 6px; padding: 6px 2px 10px; }
.online-stat-pill { padding: 4px 8px; font-size: 10px; }
.online-stat-pill strong { font-size: 11px; }
.online-user-row { padding: 6px 8px; gap: 8px; }
.online-user-avatar { width: 32px; height: 32px; }
.online-user-avatar-fallback { font-size: 20px !important; }
.online-user-name { font-size: 12px; }
.online-user-meta { font-size: 9px; gap: 6px; }
.online-user-meta .material-symbols-rounded { display: none; } /* Mai curat pe mobil */
.online-user-level, .online-user-badge-you { font-size: 8px; padding: 1px 5px; }
.online-user-rank { font-size: 8px; padding: 1px 4px; }
}
/* Micro phones (≤360) — ascund puncte/wins numbers, arata doar name + level + status */
@media (max-width: 360px) {
.online-user-points, .online-user-wins { display: none; }
.online-user-rank { display: none; }
}
/* ═══ PANEL EMPTY STATE (shared across all panels) ═══ */
.panel-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 20px;
text-align: center;
color: rgba(255, 255, 255, 0.4);
font-size: 13px;
}
.panel-empty-icon {
font-size: 42px !important;
opacity: 0.35;
color: rgba(255, 215, 0, 0.45) !important;
}
.panel-empty p { margin: 0; }
/* ═══ ONLINE USERS LIST — premium casino card layout ═══ */
.online-users-header {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding: 8px 4px 12px;
border-bottom: 1px solid rgba(255, 215, 0, 0.12);
margin-bottom: 10px;
}
.online-stat-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 14px;
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.06) 0%,
rgba(0, 0, 0, 0.3) 100%);
border: 1px solid rgba(255, 215, 0, 0.2);
font-size: 11px;
font-weight: 600;
color: rgba(255, 235, 180, 0.85);
}
.online-stat-pill strong {
font-size: 13px;
color: #ffd700;
font-weight: 800;
}
.online-pill-label {
font-size: 10px;
opacity: 0.75;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.online-pill-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
animation: onlineDotPulse 2s ease-in-out infinite;
}
@keyframes onlineDotPulse {
0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); }
50% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.9); }
}
.online-stat-playing .online-pill-dot {
background: #3b82f6;
box-shadow: 0 0 6px rgba(59, 130, 246, 0.7);
}
.online-stat-hidden {
opacity: 0.75;
cursor: help;
}
.online-stat-hidden .material-symbols-rounded {
color: rgba(255, 215, 0, 0.6);
}
/* Pill REAL users — evidentiat, verde natural */
.online-stat-real {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.18) 0%,
rgba(22, 163, 74, 0.1) 100%) !important;
border-color: rgba(34, 197, 94, 0.45) !important;
color: rgba(220, 252, 220, 0.95) !important;
}
.online-stat-real strong {
color: #86efac !important;
text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}
/* Pill BOTS — stil discret, nuanta gri/albastru, nu distrage */
.online-stat-bots {
background: linear-gradient(135deg,
rgba(148, 163, 184, 0.12) 0%,
rgba(71, 85, 105, 0.18) 100%) !important;
border-color: rgba(148, 163, 184, 0.3) !important;
color: rgba(203, 213, 225, 0.75) !important;
opacity: 0.85;
}
.online-stat-bots strong {
color: #cbd5e1 !important;
}
.online-stat-bots .material-symbols-rounded {
color: rgba(148, 163, 184, 0.8);
}
.online-users-list {
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 2px;
}
.online-user-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: linear-gradient(135deg,
rgba(20, 45, 25, 0.35) 0%,
rgba(10, 30, 15, 0.45) 100%);
border: 1px solid rgba(255, 215, 0, 0.08);
border-radius: 10px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.online-user-row:hover {
background: linear-gradient(135deg,
rgba(30, 60, 35, 0.5) 0%,
rgba(20, 45, 25, 0.6) 100%);
border-color: rgba(255, 215, 0, 0.25);
transform: translateX(2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.online-user-row.is-current {
border-color: rgba(255, 215, 0, 0.5);
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.12) 0%,
rgba(184, 134, 11, 0.08) 100%);
box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Avatar */
.online-user-avatar {
position: relative;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 215, 0, 0.35);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.15) 0%,
rgba(184, 134, 11, 0.1) 100%);
}
.online-user-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.online-user-avatar-fallback {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px !important;
color: rgba(255, 215, 0, 0.7);
}
.online-user-status-dot {
position: absolute;
bottom: -1px;
right: -1px;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid rgba(8, 22, 14, 0.98);
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.online-user-status-dot.online-status-online {
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.online-user-status-dot.online-status-playing,
.online-user-status-dot.online-status-in_game {
background: #3b82f6;
box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
animation: onlinePlayingPulse 1.6s ease-in-out infinite;
}
.online-user-status-dot.online-status-idle,
.online-user-status-dot.online-status-away {
background: #f59e0b;
box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}
@keyframes onlinePlayingPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* Info column */
.online-user-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.online-user-name-row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.online-user-name {
font-size: 13px;
font-weight: 700;
color: rgba(255, 245, 200, 0.95);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 0 1 auto;
min-width: 0;
}
.online-user-level {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.15));
border: 1px solid rgba(59, 130, 246, 0.4);
font-size: 9px;
font-weight: 800;
color: #93c5fd;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.online-user-badge-you {
padding: 1px 7px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(184, 134, 11, 0.2));
border: 1px solid rgba(255, 215, 0, 0.5);
font-size: 9px;
font-weight: 800;
color: #ffd700;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.online-user-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 10px;
color: rgba(255, 245, 200, 0.55);
flex-wrap: wrap;
}
.online-user-meta > span {
display: inline-flex;
align-items: center;
gap: 3px;
white-space: nowrap;
}
.online-user-meta .material-symbols-rounded {
opacity: 0.7;
}
.online-user-status-text {
color: rgba(120, 200, 120, 0.75);
}
.online-user-rank {
padding: 1px 5px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 9px;
font-weight: 600;
color: rgba(255, 235, 180, 0.7);
}
.online-user-points {
color: #ffd700;
font-weight: 700;
}
.online-user-wins {
color: #fca5a5;
font-weight: 600;
}
/* Light theme overrides */
[data-theme="light"] .online-user-row {
background: linear-gradient(135deg, rgba(255, 253, 245, 0.9) 0%, rgba(245, 238, 220, 0.85) 100%);
border-color: rgba(184, 134, 11, 0.2);
}
[data-theme="light"] .online-user-row:hover {
background: linear-gradient(135deg, rgba(255, 235, 150, 0.3) 0%, rgba(255, 215, 0, 0.15) 100%);
border-color: rgba(184, 134, 11, 0.45);
}
[data-theme="light"] .online-user-name { color: #1a1a1a; }
[data-theme="light"] .online-user-meta { color: rgba(0, 0, 0, 0.55); }
[data-theme="light"] .online-stat-pill { color: #6b5617; }
/* Panel content styling */
.panel-section {
margin-bottom: 16px;
}
.panel-section-title {
font-size: 13px;
font-weight: 700;
color: var(--remi-accent);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.panel-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.panel-list-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: var(--remi-radius-xs);
background: var(--glass-bg);
transition: background 0.2s;
cursor: pointer;
}
.panel-list-item:hover {
background: var(--glass-bg-strong);
}
/* Panel tabs (pill style) */
.panel-tabs {
display: flex;
gap: 4px;
padding: 0 0 12px;
border-bottom: 1px solid var(--remi-border);
margin-bottom: 12px;
}
.panel-tab {
padding: 6px 12px;
border-radius: var(--remi-radius-full);
font-size: 12px;
font-weight: 600;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
color: var(--remi-text-dim);
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.panel-tab:hover {
background: rgba(var(--remi-accent-rgb), 0.08);
}
.panel-tab.active {
background: rgba(var(--remi-accent-rgb), 0.15);
border-color: rgba(var(--remi-accent-rgb), 0.3);
color: var(--remi-accent);
}
/* ── Lobby Panel Buttons (ported from Table .mp-create-btn) ── */
.panel-btn {
min-height: clamp(30px, 5.5vw, 34px);
padding: clamp(5px, 1vw, 7px) clamp(8px, 1.5vw, 12px);
width: 100%;
background: linear-gradient(135deg, var(--remi-accent) 0%, rgba(var(--remi-accent-rgb), 0.75) 100%);
border: none;
border-radius: clamp(6px, 1.2vw, 8px);
color: #fff;
font-weight: 700;
font-size: clamp(11px, 2.2vw, 13px);
font-family: inherit;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
transition: all 0.25s ease;
white-space: nowrap;
touch-action: manipulation;
box-shadow: 0 2px 8px rgba(var(--remi-accent-rgb), 0.25);
-webkit-tap-highlight-color: transparent;
}
.panel-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(var(--remi-accent-rgb), 0.4);
}
.panel-btn:active {
transform: translateY(0);
}
.panel-btn[disabled] {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
cursor: default;
opacity: 0.85;
}
.panel-btn .material-symbols-rounded {
font-size: clamp(14px, 2.5vw, 16px);
}
/* ── Lobby Room List & Cards (ported from Table .mpc-card) ── */
.panel-room-list {
display: flex;
flex-direction: column;
gap: clamp(6px, 1.5vw, 10px);
}
.panel-room-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(6px, 1.5vw, 10px);
padding: clamp(8px, 1.6vw, 10px) clamp(10px, 2vw, 12px);
background: rgba(var(--remi-primary-rgb), 0.22);
border: 1px solid rgba(var(--remi-accent-rgb), 0.1);
border-radius: clamp(6px, 1.2vw, 10px);
position: relative;
overflow: hidden;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.panel-room-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 0 3px 3px 0;
transition: background 0.25s ease;
}
.panel-room-card[data-status="waiting"]::before { background: #22c55e; }
.panel-room-card[data-status="playing"]::before { background: #f59e0b; }
.panel-room-card[data-status="full"]::before { background: #6b7280; }
.panel-room-card:hover {
background: rgba(var(--remi-primary-rgb), 0.32);
border-color: rgba(var(--remi-accent-rgb), 0.22);
transform: translateY(-1px);
}
.panel-room-card:active {
transform: translateY(0);
}
.panel-room-card .room-name {
font-size: clamp(11px, 2.3vw, 13px);
font-weight: 700;
color: var(--remi-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.panel-room-card .room-meta {
font-size: clamp(10px, 2vw, 11px);
color: var(--remi-text-dim);
display: flex;
gap: 8px;
align-items: center;
margin-top: 2px;
}
.panel-room-card .room-action {
padding: clamp(5px, 1vw, 6px) clamp(10px, 2vw, 14px);
border: none;
border-radius: clamp(5px, 1vw, 7px);
font-weight: 700;
font-size: clamp(10px, 2vw, 12px);
cursor: pointer;
transition: all 0.2s ease;
touch-action: manipulation;
white-space: nowrap;
background: linear-gradient(135deg, var(--remi-accent) 0%, rgba(var(--remi-accent-rgb), 0.75) 100%);
color: #fff;
box-shadow: 0 2px 6px rgba(var(--remi-accent-rgb), 0.25);
}
.panel-room-card .room-action:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(var(--remi-accent-rgb), 0.4);
}
.panel-room-card .room-action.spectate {
background: rgba(var(--remi-primary-rgb), 0.18);
color: var(--remi-text-dim);
border: 1px solid rgba(var(--remi-primary-rgb), 0.28);
box-shadow: none;
}
.panel-room-card .room-action.spectate:hover {
background: rgba(var(--remi-primary-rgb), 0.28);
color: var(--remi-text);
}
/* Lobby status info bar (connection + counts) */
.panel-lobby-status {
display: flex;
gap: 6px;
align-items: center;
font-size: clamp(10px, 2vw, 12px);
color: var(--remi-text-dim);
padding: 6px 8px;
background: rgba(var(--remi-primary-rgb), 0.1);
border: 1px solid rgba(var(--remi-accent-rgb), 0.06);
border-radius: 8px;
margin-bottom: 8px;
}
.panel-lobby-status strong {
color: var(--remi-accent);
font-weight: 700;
}
/* Empty room list state */
.panel-room-empty {
text-align: center;
padding: clamp(24px, 5vw, 36px) clamp(12px, 2vw, 16px);
color: var(--remi-text-dim);
font-size: clamp(11px, 2.2vw, 13px);
background: rgba(var(--remi-primary-rgb), 0.08);
border: 1px dashed rgba(var(--remi-accent-rgb), 0.15);
border-radius: 10px;
}
.panel-room-empty .material-symbols-rounded {
font-size: clamp(32px, 6vw, 44px);
display: block;
margin-bottom: 8px;
opacity: 0.3;
}
/* ── Leaderboard Panel (ported from Table .lb-*) ── */
.lb-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.lb-sort-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
background: rgba(var(--remi-primary-rgb), 0.12);
border: 1px solid rgba(var(--remi-accent-rgb), 0.08);
border-radius: 10px;
}
.lb-sort-btn {
flex: 1 1 auto;
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 8px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--remi-text-dim);
font-size: clamp(10px, 2vw, 11px);
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.lb-sort-btn:hover {
background: rgba(var(--remi-accent-rgb), 0.08);
color: var(--remi-text);
}
.lb-sort-btn.active {
background: rgba(var(--remi-accent-rgb), 0.18);
border-color: rgba(var(--remi-accent-rgb), 0.35);
color: var(--remi-accent);
box-shadow: 0 2px 8px rgba(var(--remi-accent-rgb), 0.2);
}
.lb-sort-icon {
font-size: clamp(14px, 3vw, 16px);
line-height: 1;
}
.lb-sort-label {
font-size: clamp(9px, 1.8vw, 10px);
letter-spacing: 0.02em;
}
.lb-loading {
text-align: center;
padding: clamp(32px, 6vw, 48px) 20px;
}
.lb-loading-icon {
font-size: clamp(36px, 7vw, 48px);
animation: lb-pulse 1.5s ease-in-out infinite;
}
.lb-loading-text {
color: var(--remi-text-dim);
font-size: clamp(11px, 2.2vw, 13px);
margin: 12px 0 0;
}
@keyframes lb-pulse {
0%, 100% { transform: scale(1); opacity: 0.9; filter: drop-shadow(0 0 8px rgba(var(--remi-accent-rgb), 0.4)); }
50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 16px rgba(var(--remi-accent-rgb), 0.7)); }
}
.lb-rows {
display: flex;
flex-direction: column;
gap: 4px;
}
.lb-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(var(--remi-primary-rgb), 0.10);
border: 1px solid rgba(var(--remi-accent-rgb), 0.05);
border-radius: 8px;
transition: background 0.2s ease;
}
.lb-row:hover {
background: rgba(var(--remi-primary-rgb), 0.18);
}
.lb-row.lb-top {
background: rgba(var(--remi-accent-rgb), 0.08);
border-color: rgba(var(--remi-accent-rgb), 0.18);
}
.lb-row.lb-top[data-rank="1"] {
background: linear-gradient(90deg, rgba(255, 215, 0, 0.12) 0%, rgba(var(--remi-accent-rgb), 0.05) 100%);
border-color: rgba(255, 215, 0, 0.25);
}
.lb-rank {
width: 32px;
text-align: center;
font-size: clamp(14px, 2.8vw, 18px);
font-weight: 700;
color: var(--remi-text-dim);
flex-shrink: 0;
}
.lb-top .lb-rank {
font-size: clamp(18px, 3.5vw, 22px);
}
.lb-name {
flex: 1;
font-size: clamp(12px, 2.5vw, 13px);
font-weight: 600;
color: var(--remi-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lb-value {
font-size: clamp(12px, 2.5vw, 13px);
font-weight: 700;
color: var(--remi-accent);
flex-shrink: 0;
}
.lb-empty,
.lb-error {
text-align: center;
padding: clamp(24px, 5vw, 40px) 20px;
color: var(--remi-text-dim);
font-size: clamp(11px, 2.2vw, 13px);
}
.lb-empty .material-symbols-rounded {
font-size: clamp(36px, 7vw, 52px);
display: block;
margin-bottom: 10px;
opacity: 0.3;
}
.lb-error {
color: #ef4444;
}
/* ── Rules Panel (polished layout) ── */
.panel-rules {
padding: clamp(6px, 1.5vw, 10px);
font-size: clamp(12px, 2.4vw, 13px);
line-height: 1.6;
color: var(--remi-text-dim);
}
.panel-rules .rules-title {
color: var(--remi-accent);
font-size: clamp(15px, 3vw, 17px);
font-weight: 800;
margin: 0 0 10px;
text-shadow: 0 0 12px rgba(var(--remi-accent-rgb), 0.3);
}
.panel-rules .rules-intro {
padding: 10px 12px;
background: rgba(var(--remi-accent-rgb), 0.08);
border-left: 3px solid var(--remi-accent);
border-radius: 0 8px 8px 0;
margin: 0 0 16px;
color: var(--remi-text);
font-size: clamp(12px, 2.4vw, 13px);
}
.panel-rules .rules-intro strong {
color: var(--remi-accent);
}
.panel-rules .rules-heading {
color: var(--remi-text);
font-size: clamp(13px, 2.6vw, 14px);
font-weight: 700;
margin: 16px 0 8px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(var(--remi-accent-rgb), 0.12);
letter-spacing: 0.02em;
}
.panel-rules .rules-list {
margin: 0 0 4px;
padding-left: 20px;
list-style: disc;
}
.panel-rules .rules-list li {
margin-bottom: 5px;
color: var(--remi-text-dim);
}
.panel-rules .rules-list li strong {
color: var(--remi-text);
font-weight: 700;
}
/* Text body pentru fiecare regula (numerotate automat: 1. / 2. / 3. in paragrafe) */
.panel-rules .rules-text {
color: var(--remi-text-dim);
font-size: 12.5px;
line-height: 1.65;
margin: 4px 0 14px;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.02);
border-left: 2px solid rgba(var(--remi-accent-rgb), 0.2);
border-radius: 0 6px 6px 0;
}
.panel-rules .rules-text p {
margin: 0 0 6px;
}
.panel-rules .rules-text p:last-child {
margin-bottom: 0;
}
.panel-rules .rules-text strong {
color: var(--remi-text);
font-weight: 700;
}
/* Mobile context panel */
@media (max-width: 767px) {
.context-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 0 100% !important;
flex-basis: 100% !important;
max-height: 100dvh !important;
height: 100dvh !important;
z-index: 500;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.context-panel.hidden {
transform: translateX(100%);
width: 0 !important;
max-width: 0 !important;
flex-basis: 0 !important;
}
/* Chat: let panel-content scroll naturally; input bar uses sticky bottom */
.context-panel.panel-type-chat .panel-content {
padding: 6px !important;
}
.remi-chat-wrapper #chatGlobalUsers,
.remi-chat-wrapper #chatRoomUsers {
max-height: 100px !important;
}
.remi-chat-wrapper .cmsg-container {
max-height: 50vh !important;
}
.remi-chat-wrapper #chatInput {
flex: 1 1 auto;
min-width: 0;
}
.context-panel input[type="text"],
.context-panel textarea,
.remi-chat-wrapper #chatInput {
font-size: 16px !important; /* iOS: prevent zoom on focus */
}
}
/* Landscape phones — shrink header and keep chat input reachable */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
.context-panel {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
height: 100dvh !important;
max-height: 100dvh !important;
z-index: 500;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.context-panel .panel-header {
padding: 6px 10px !important;
min-height: 40px !important;
}
.remi-chat-wrapper #chatGlobalUsers,
.remi-chat-wrapper #chatRoomUsers {
max-height: 60px !important;
}
/* 16-09-2026: eticheta rămâne VIZIBILĂ şi aici (vezi nota din „Chat landscape compact”) */
.remi-chat-wrapper .chat-tabs-bar .ct-label {
display: inline;
font-size: 10px;
}
}
/* ================================================================================================
15. MODALS
================================================================================================ */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-container {
position: relative;
/* ── FUNDALUL MODALELOR VINE DIN TEMĂ (17-09-2026) ──────────────────────────────────
Era scris de mână, un violet închis (rgb 36,21,66 / 26,10,46), deci ORICE modal din
Remi — detaliile mesei, profilul jucătorului, restul — apărea mov pe toate cele 33 de
teme. Se vedea cel mai urât la temele aurii: lobby auriu, modal mov.
Acum ia suprafeţele temei; degradeul rămâne, doar culorile îl urmează. */
background: linear-gradient(145deg,
var(--remi-surface-2, var(--remi-surface)) 0%,
var(--remi-surface) 50%,
var(--remi-surface-2, var(--remi-surface)) 100%
);
border: 1px solid var(--remi-border);
border-radius: var(--remi-radius-lg);
width: 92%;
max-width: 520px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow:
0 0 0 1px rgba(var(--remi-accent-rgb), 0.06),
0 8px 32px rgba(0, 0, 0, 0.4),
0 24px 80px rgba(0, 0, 0, 0.25);
overflow: hidden;
transform: scale(0.9) translateY(30px);
opacity: 0;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.active .modal-container {
transform: scale(1) translateY(0);
opacity: 1;
}
.modal-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--remi-accent-rgb), 0.6) 50%,
transparent 100%
);
pointer-events: none;
}
.modal-header {
padding: 20px 24px 16px;
border-bottom: 1px solid var(--remi-border);
position: relative;
background: linear-gradient(135deg,
rgba(var(--remi-accent-rgb), 0.04) 0%,
transparent 100%
);
}
.modal-header::after {
content: '';
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--remi-accent-rgb), 0.3) 50%,
transparent 100%
);
}
.modal-header h2 {
font-family: var(--font-display);
font-size: clamp(18px, 4vw, 22px);
font-weight: 700;
color: var(--remi-accent);
margin: 0;
}
.modal-icon {
width: 40px;
height: 40px;
border-radius: var(--remi-radius-sm);
background: rgba(var(--remi-accent-rgb), 0.1);
border: 1px solid rgba(var(--remi-accent-rgb), 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.modal-icon .material-symbols-rounded {
font-size: 22px;
color: var(--remi-accent);
}
.modal-title {
font-family: var(--font-display);
font-size: clamp(18px, 4vw, 22px);
font-weight: 700;
color: var(--remi-accent);
}
.modal-subtitle {
font-size: 12px;
color: var(--remi-text-dim);
}
.modal-close,
.modal-close-btn {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--remi-radius-xs);
color: var(--remi-text-dim);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.modal-close:hover,
.modal-close-btn:hover {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.15);
color: #dc2626;
}
.modal-close .material-symbols-rounded,
.modal-close-btn .material-symbols-rounded {
font-size: 18px;
}
.modal-body {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
scrollbar-width: thin;
scrollbar-color: rgba(var(--remi-accent-rgb), 0.2) transparent;
}
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb {
background: rgba(var(--remi-accent-rgb), 0.2);
border-radius: 2px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--remi-border);
background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), 0.03) 0%, transparent 100%);
}
/* ── Rules Modal ── */
.rules-modal {
max-width: 600px;
}
.rules-section {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--remi-border);
}
.rules-section:last-child {
border-bottom: none;
}
.rules-section h3 {
font-size: 15px;
font-weight: 700;
color: var(--remi-accent);
margin: 0 0 8px;
}
.rules-section p,
.rules-section ul {
font-size: 13px;
color: var(--remi-text-dim);
line-height: 1.6;
margin: 0;
}
.rules-section ul {
padding-left: 20px;
}
.rules-section li {
margin-bottom: 4px;
}
/* ── Settings Modal ── */
.settings-modal {
max-width: 480px;
}
.settings-section {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--remi-border);
position: relative;
overflow: hidden;
}
.settings-section::before {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(var(--color-accent-rgb), 0.04) 50%, transparent 100%);
transition: all 0.5s ease;
}
.settings-section:hover {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(var(--color-accent-rgb), 0.02) 100%
);
border-color: rgba(var(--color-accent-rgb), 0.2);
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), 0.15);
}
.settings-section:hover::before { left: 100%; }
.settings-section:last-child {
border-bottom: none;
}
.settings-section h3 {
font-size: 14px;
font-weight: 700;
color: var(--remi-text);
}
.setting-item {
display: flex;
align-items: center;
padding: 8px 0;
gap: 12px;
}
.setting-item label {
flex: 1;
font-size: 13px;
color: var(--remi-text);
cursor: pointer;
}
.setting-label {
font-size: 12px;
font-weight: 600;
color: var(--remi-text-dim);
}
/* Custom checkbox */
.setting-item input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 40px;
height: 22px;
background: var(--remi-surface-2);
border-radius: 11px;
position: relative;
cursor: pointer;
transition: background 0.3s;
flex-shrink: 0;
}
.setting-item input[type="checkbox"]::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--remi-text-dim);
top: 2px;
left: 2px;
transition: transform 0.3s, background 0.3s;
}
.setting-item input[type="checkbox"]:checked {
background: var(--remi-accent);
}
.setting-item input[type="checkbox"]:checked::before {
background: white;
transform: translateX(18px);
}
/* Custom range slider */
.setting-item input[type="range"] {
appearance: none;
-webkit-appearance: none;
width: 120px;
height: 4px;
background: var(--remi-surface-2);
border-radius: 2px;
outline: none;
cursor: pointer;
}
.setting-item input[type="range"]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--remi-accent);
border: 2px solid white;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.setting-item input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--remi-accent);
border: 2px solid white;
cursor: pointer;
}
/* Settings Buttons */
.settings-buttons {
display: flex;
gap: 8px;
}
.settings-buttons .btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
border-radius: var(--remi-radius-sm);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: 1px solid var(--remi-border);
font-family: inherit;
}
.settings-buttons .btn .material-symbols-rounded { font-size: 18px; }
.settings-buttons .btn-primary {
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-light));
color: white;
border-color: transparent;
}
.settings-buttons .btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--remi-accent-glow);
}
.settings-buttons .btn-secondary {
background: var(--remi-surface-2);
color: var(--remi-text-dim);
}
.settings-buttons .btn-secondary:hover {
border-color: var(--remi-accent);
color: var(--remi-text);
}
/* ── Game Setup Modal ── */
.game-setup-modal {
max-width: 520px;
}
.game-setup-modal .btn-close {
position: absolute;
top: 16px;
right: 16px;
}
.difficulty-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 8px;
}
.difficulty-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 8px;
background: var(--glass-bg);
border: 2px solid transparent;
border-radius: var(--remi-radius-sm);
color: var(--remi-text-dim);
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.difficulty-btn:hover {
border-color: rgba(var(--remi-accent-rgb), 0.3);
background: var(--glass-bg-strong);
}
.difficulty-btn.active {
border-color: var(--remi-accent);
background: var(--remi-accent-glow);
color: var(--remi-accent);
}
.difficulty-btn .material-symbols-rounded {
font-size: 24px;
}
.diff-name {
font-size: 12px;
font-weight: 700;
}
.diff-desc {
font-size: 10px;
color: var(--remi-text-muted);
}
.diff-stars {
font-size: 12px;
color: var(--remi-gold);
}
.setup-info {
padding: 12px;
background: var(--glass-bg);
border-radius: var(--remi-radius-sm);
border: 1px solid var(--glass-border);
margin-top: 12px;
}
.info-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: var(--remi-text-dim);
}
.info-item .material-symbols-rounded {
font-size: 16px;
color: var(--remi-accent);
flex-shrink: 0;
margin-top: 1px;
}
/* Button controls (modal footer) */
.btn-control {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 20px;
border-radius: var(--remi-radius-sm);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: 1px solid var(--remi-border);
font-family: inherit;
}
.btn-control .material-symbols-rounded { font-size: 20px; }
.btn-control.btn-primary {
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-light));
color: white;
border-color: transparent;
}
.btn-control.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px var(--remi-accent-glow);
}
.btn-control.btn-secondary {
background: var(--remi-surface-2);
color: var(--remi-text-dim);
}
.btn-control.btn-secondary:hover {
border-color: var(--remi-accent);
color: var(--remi-text);
}
/* ── Game End Modal ── */
.game-end-modal {
max-width: 380px !important;
width: 92% !important;
border-radius: 18px !important;
overflow: hidden !important;
padding: 0 !important;
}
.game-end-modal > .modal-body {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 20px 18px 16px !important;
text-align: center !important;
gap: 0 !important;
max-height: 85vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* ── Room Detail Modal ── */
.room-detail-modal {
max-width: 380px;
width: 92%;
padding: clamp(14px, 2.5vw, 18px);
}
.rdm-header {
text-align: center;
padding-bottom: clamp(8px, 1.5vw, 12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
margin-bottom: clamp(8px, 1.5vw, 12px);
}
.rdm-room-name {
font-size: clamp(14px, 3vw, 17px);
font-weight: 800;
color: var(--remi-text);
margin-bottom: 2px;
}
.rdm-host {
font-size: clamp(10px, 2vw, 11px);
color: var(--remi-text-dim);
}
.rdm-players {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: clamp(8px, 1.5vw, 12px);
}
.rdm-player {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: rgba(0, 0, 0, 0.25);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.rdm-player-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 12px;
color: #fff;
flex-shrink: 0;
}
.rdm-player-name {
font-size: 12px;
font-weight: 700;
color: var(--remi-text);
flex: 1;
}
.rdm-player-badge {
font-size: 8px;
font-weight: 700;
padding: 2px 5px;
border-radius: 4px;
background: rgba(var(--remi-accent-rgb), 0.15);
color: var(--remi-accent);
}
.rdm-empty-slot {
padding: 6px 8px;
background: rgba(0, 0, 0, 0.15);
border-radius: 8px;
border: 1px dashed rgba(255, 255, 255, 0.12);
text-align: center;
font-size: 10px;
color: var(--remi-text-dim);
}
.rdm-settings {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: clamp(10px, 2vw, 14px);
}
.rdm-setting {
padding: 6px;
background: rgba(0, 0, 0, 0.25);
border-radius: 8px;
text-align: center;
}
.rdm-setting-value {
font-size: clamp(14px, 2.5vw, 16px);
font-weight: 800;
color: var(--remi-accent);
}
.rdm-setting-label {
font-size: 9px;
color: var(--remi-text-dim);
margin-top: 1px;
}
.rdm-actions {
display: flex;
gap: 6px;
}
.rdm-actions .rdm-action-btn {
flex: 1;
padding: clamp(8px, 1.8vw, 10px);
border: none;
border-radius: 8px;
font-weight: 700;
font-size: clamp(12px, 2.2vw, 13px);
cursor: pointer;
transition: all 0.25s;
}
.rdm-action-btn.rdm-join {
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-dark, #b8860b));
color: var(--remi-bg);
box-shadow: 0 4px 16px rgba(var(--remi-accent-rgb), 0.3);
}
.rdm-action-btn.rdm-join:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(var(--remi-accent-rgb), 0.4);
}
.rdm-action-btn.rdm-spectate {
background: rgba(0, 0, 0, 0.3);
color: var(--remi-text);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.rdm-action-btn.rdm-spectate:hover { background: rgba(0, 0, 0, 0.4); }
/* ================================================================================================
16. ROOM WAITING VIEW — container pentru .mw-room-takeover (stil Table)
================================================================================================ */
.room-waiting-view {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
width: 100%;
padding: 12px;
box-sizing: border-box;
overflow: hidden;
}
/* .mw-room-takeover este copilul direct — îl lăsăm să umple tot containerul */
.room-waiting-view > .mw-room-takeover {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Body.room-waiting — forțează ascunderea elementelor de joc și conține overflow (ca Table) */
body.room-waiting #lobbyView,
body.room-waiting #gameSetupView,
body.room-waiting #gamePlayView,
body.room-waiting #actionBar,
body.room-waiting #lobbyAdLeft,
body.room-waiting #lobbyAdRight,
body.room-waiting .mp-game-bar,
body.room-waiting #mpGameBar {
display: none !important;
}
body.room-waiting .game-canvas { overflow: hidden !important; }
body.room-waiting .game-area {
overflow: hidden !important;
min-height: 0 !important;
}
body.room-waiting #roomWaitingView {
display: flex !important;
}
body.room-waiting .mw-room-takeover {
min-height: 0 !important;
max-height: 100% !important;
}
body.room-waiting .mw-tab-content { min-height: 0 !important; }
body.room-waiting .mw-tab-panel.active {
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.room-waiting-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: var(--remi-accent);
}
.room-waiting-players {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.room-player-slot {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--remi-radius-sm);
min-width: 80px;
}
.room-player-slot.occupied {
border-color: var(--remi-accent);
}
.room-player-slot.empty {
border-style: dashed;
opacity: 0.5;
}
.room-player-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--remi-accent-glow);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
color: var(--remi-accent);
}
.room-player-name {
font-size: 12px;
font-weight: 600;
color: var(--remi-text);
}
.room-waiting-actions {
display: flex;
gap: 8px;
}
.room-waiting-info {
font-size: 13px;
color: var(--remi-text-dim);
display: flex;
align-items: center;
gap: 6px;
}
/* ================================================================================================
17. DISCONNECT OVERLAY
================================================================================================ */
.disconnect-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
z-index: 5000;
animation: fadeIn 0.3s;
}
.disconnect-icon {
font-size: 48px;
color: var(--remi-warning);
animation: disconnectPulse 2s ease-in-out infinite;
}
.disconnect-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: var(--remi-text);
}
.disconnect-message {
font-size: 14px;
color: var(--remi-text-dim);
text-align: center;
max-width: 300px;
}
.disconnect-actions {
display: flex;
gap: 8px;
}
/* ================================================================================================
18. TOAST NOTIFICATIONS
================================================================================================ */
.toast-container {
position: fixed;
top: 60px;
right: 16px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
/* 2026-09-04: alertele trec SUB panoul de context cât e el deschis.
Cerut explicit de user („c" din trei variante oferite).
Ce se întâmpla: în peisaj panoul e pe tot ecranul, iar alertele stau la
`top: 60px` cu z-index 10000, deci cădeau peste el, pe antet. Pe desktop NU
se suprapun (măsurat: alerta la y=20, panoul începe mai jos) — de-aia regula
e legată de panoul DESCHIS, nu de lățime.
REZERVA MEA, spusă userului înainte și asumată de el: cât e panoul deschis nu
mai vezi alertele de joc, inclusiv „e rândul tău". Dacă se răzgândește,
variantele respinse erau: (a) alertele rămân deasupra dar coboară sub antetul
panoului, (b) rămân deasupra dar mai mici/mai transparente în peisaj.
Legat de `.active` ca să NU coboare alertele și în restul timpului — altfel
ar ajunge sub modale și sub sertar, ceea ce nu s-a cerut. `:has()` e deja
tiparul casei aici (52 de folosiri în fișier, inclusiv `body:has(...)`). */
body:has(#contextPanel.active) #toastContainer {
z-index: 40 !important;
}
.toast-msg {
padding: 10px 16px;
border-radius: var(--remi-radius-sm);
font-size: 13px;
font-weight: 500;
color: white;
pointer-events: auto;
animation: toastIn 0.3s ease;
max-width: 340px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
/* ── CULORILE ALERTELOR VIN DIN TEMĂ (17-09-2026) ──────────────────────────────────────
Trei din patru erau scrise de mână (#16a34a, #dc2626, #d97706), deci alertele arătau la
fel pe toate cele 33 de teme, ca şi cum ar fi fost dintr-un alt site.
Culoarea temei e uneori deschisă (verdele implicit e #4ade80) şi scrisul alb n-ar mai fi
fost lizibil pe ea — de aceea fundalul se închide cu `color-mix`: păstrează NUANŢA temei,
dar garantează contrastul, pe temă deschisă ca şi pe una întunecată. */
.toast-msg.success { background: color-mix(in srgb, var(--remi-success) 78%, #000); }
.toast-msg.error { background: color-mix(in srgb, var(--remi-danger) 78%, #000); }
.toast-msg.warning { background: color-mix(in srgb, var(--remi-warning) 78%, #000); }
.toast-msg.info { background: color-mix(in srgb, var(--remi-accent) 78%, #000); }
/* browsere fără `color-mix`: rămân pe culoarea temei, tot mai bine decât una străină */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
.toast-msg.success { background: var(--remi-success); }
.toast-msg.error { background: var(--remi-danger); }
.toast-msg.warning { background: var(--remi-warning); }
.toast-msg.info { background: var(--remi-accent); }
}
.toast-msg.removing { animation: toastOut 0.3s ease forwards; }
/* ================================================================================================
19. PARTICLE CONTAINER
================================================================================================ */
.particle-container {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
}
/* ================================================================================================
20. DOUBLE GAME BANNER
================================================================================================ */
.double-game-banner {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #1e293b;
padding: 4px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
z-index: 50;
box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
animation: doublePulse 2s ease-in-out infinite;
}
/* ================================================================================================
21. GAME LOADER
================================================================================================ */
/* ═══════════ REMI LOADER — Professional Wood & Gold ═══════════ */
.game-loader {
position: fixed;
inset: 0;
background:
radial-gradient(ellipse at 20% 10%, rgba(212, 165, 68, 0.12) 0%, transparent 55%),
radial-gradient(ellipse at 80% 90%, rgba(139, 69, 19, 0.18) 0%, transparent 55%),
linear-gradient(180deg, #2a1b0e 0%, #1a0f06 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 500;
transition: opacity 0.6s ease, transform 0.6s ease;
overflow: hidden;
}
.game-loader.hidden,
.game-loader.fade-out {
opacity: 0;
pointer-events: none;
transform: scale(1.02);
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Ascunde INSTANT continutul (piese Fan Deal + Joker) cand loader-ul incepe
sa dispara — doar fundalul face fade scurt (250ms), continutul e oprit
imediat ca sa nu se mai vada animatia in timp ce lobby-ul apare. */
.game-loader.hidden .loader-content,
.game-loader.fade-out .loader-content {
opacity: 0 !important;
visibility: hidden !important;
transition: none !important;
}
/* Subtle wood grain texture */
.game-loader::before {
content: '';
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(90deg,
rgba(139,69,19,0.03) 0 2px,
transparent 2px 6px),
radial-gradient(circle at 1px 1px, rgba(212,165,68,0.04) 1px, transparent 0);
background-size: auto, 4px 4px;
pointer-events: none;
z-index: 0;
}
/* Floating Remi tiles in background */
.loader-ambient {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
background: radial-gradient(ellipse at center, rgba(212, 165, 68, 0.15), transparent 70%);
}
.loader-ambient::before,
.loader-ambient::after {
content: '';
position: absolute;
width: 220px; height: 220px;
border-radius: 50%;
filter: blur(60px);
opacity: 0.35;
animation: loaderOrb 8s ease-in-out infinite;
}
.loader-ambient::before {
background: radial-gradient(circle, #d4a544, transparent 70%);
top: -40px; left: -40px;
}
.loader-ambient::after {
background: radial-gradient(circle, #c53030, transparent 70%);
bottom: -40px; right: -40px;
animation-delay: -4s;
}
@keyframes loaderOrb {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, -20px) scale(1.15); }
}
/* Floating tiles decorative */
.loader-content {
position: relative;
z-index: 2;
text-align: center;
width: 380px;
max-width: 92vw;
background:
linear-gradient(145deg,
rgba(58, 35, 16, 0.85) 0%,
rgba(42, 27, 14, 0.7) 100%);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
border: 1px solid rgba(212, 165, 68, 0.35);
border-radius: 20px;
padding: 34px 28px 26px;
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(212, 165, 68, 0.08),
inset 0 1px 0 rgba(255, 220, 140, 0.12),
inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}
/* Gold corner ornaments */
.loader-content::before,
.loader-content::after {
content: '';
position: absolute;
width: 40px; height: 40px;
border: 2px solid #d4a544;
opacity: 0.5;
}
.loader-content::before {
top: 12px; left: 12px;
border-right: none; border-bottom: none;
border-radius: 8px 0 0 0;
}
.loader-content::after {
bottom: 12px; right: 12px;
border-left: none; border-top: none;
border-radius: 0 0 8px 0;
}
/* Logo area with floating tiles */
.loader-logo {
position: relative;
margin-bottom: 28px;
padding-top: 8px;
}
.loader-logo::before {
content: '';
position: absolute;
top: -8px; left: 50%;
width: 100px; height: 3px;
background: linear-gradient(90deg, transparent, #d4a544, transparent);
transform: translateX(-50%);
opacity: 0.6;
}
.logo-text {
font-family: 'Georgia', 'Playfair Display', serif;
font-size: 34px;
font-weight: 800;
letter-spacing: 6px;
background: linear-gradient(180deg, #f0c66a 0%, #d4a544 50%, #a8822a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 40px rgba(212, 165, 68, 0.5);
position: relative;
display: inline-block;
animation: logoShine 3s ease-in-out infinite;
}
.logo-text::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.5),
transparent);
background-clip: text;
-webkit-background-clip: text;
animation: logoShimmer 2.8s linear infinite;
}
@keyframes logoShine {
0%, 100% { filter: brightness(1) drop-shadow(0 0 8px rgba(212,165,68,0.3)); }
50% { filter: brightness(1.15) drop-shadow(0 0 16px rgba(212,165,68,0.6)); }
}
@keyframes logoShimmer {
0% { transform: translateX(0); }
100% { transform: translateX(200%); }
}
/* ═══════════════ CINEMATIC FAN DEAL ANIMATION ═══════════════ */
.loader-fan-deal {
position: relative;
width: 100%;
height: 150px;
margin-bottom: 12px;
perspective: 1000px;
overflow: visible;
}
/* Spotlight beam cinematic */
.loader-fan-deal::after {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 260px; height: 100%;
pointer-events: none;
background: radial-gradient(ellipse 45% 55% at 50% 40%, rgba(255,220,150,0.22), transparent 65%);
mix-blend-mode: screen;
z-index: 0;
}
.lfd-tile {
position: absolute;
width: 36px; height: 52px;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Oswald', 'Bebas Neue', sans-serif;
font-weight: 700;
font-size: 18px;
background: linear-gradient(145deg, #ffffff 0%, #fefdf6 30%, #f9f3e3 65%, #efe6d0 100%);
box-shadow:
0 1px 0 rgba(180,150,100,0.9),
0 2px 0 rgba(160,130,85,0.85),
0 3px 0 rgba(140,110,70,0.8),
0 4px 0 rgba(120,90,55,0.75),
0 5px 0 rgba(100,75,45,0.7),
inset 0 2px 1px rgba(255,255,255,1),
inset 0 -2px 3px rgba(160,120,70,0.35),
inset 2px 0 1px rgba(255,255,255,0.5),
inset -2px 0 2px rgba(140,100,60,0.25);
overflow: hidden;
top: 0;
left: 50%;
margin-left: -18px;
filter:
drop-shadow(0 2px 2px rgba(0,0,0,0.4))
drop-shadow(0 8px 10px rgba(0,0,0,0.3));
animation: lfdDeal 2.8s infinite cubic-bezier(.22,1.2,.36,1);
}
.lfd-tile::before {
content: '';
position: absolute;
inset: 1px;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 22%, transparent 45%);
z-index: 1;
mix-blend-mode: screen;
}
/* Rim light auriu pe marginea de sus — reflexie spotlight */
.lfd-tile::after {
content: '';
position: absolute;
top: 0; left: 2px; right: 2px;
height: 35%;
border-radius: 5px 5px 20px 20px;
background: linear-gradient(180deg, rgba(255,240,200,0.55) 0%, rgba(255,220,150,0.15) 60%, transparent 100%);
pointer-events: none;
z-index: 2;
mix-blend-mode: screen;
}
.lfd-num {
position: relative; z-index: 3;
line-height: 1;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.lfd-dot {
position: relative; z-index: 3;
width: 12px; height: 12px;
border-radius: 50%;
margin-top: 3px;
border: 1px solid rgba(0,0,0,0.28);
box-shadow:
inset 0 1px 1.5px rgba(255,255,255,0.42),
inset 0 -1px 1.5px rgba(0,0,0,0.2),
0 1px 1.5px rgba(0,0,0,0.22);
}
.lfd-red .lfd-num { color: #b91c1c; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.lfd-red .lfd-dot { background: radial-gradient(circle at 35% 30%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%); border-color: #7f1d1d; }
.lfd-blue .lfd-num { color: #1e40af; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.lfd-blue .lfd-dot { background: radial-gradient(circle at 35% 30%, #3b82f6 0%, #1e40af 60%, #1e3a8a 100%); border-color: #1e3a8a; }
.lfd-yellow .lfd-num { color: #facc15; -webkit-text-stroke: 0.4px #7c5e00; text-shadow: 0 0 1px #7c5e00, 0 1px 0 rgba(0,0,0,0.35); }
.lfd-yellow .lfd-dot { background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #facc15 55%, #a16207 100%); border-color: #854d0e; }
.lfd-black .lfd-num { color: #111; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.lfd-black .lfd-dot { background: radial-gradient(circle at 35% 30%, #4b5563 0%, #111 60%, #000 100%); border-color: #000; }
.lfd-joker {
background:
repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(184,134,11,0.1) 3px, rgba(184,134,11,0.1) 4px),
repeating-linear-gradient(-45deg, transparent 0, transparent 3px, rgba(184,134,11,0.1) 3px, rgba(184,134,11,0.1) 4px),
linear-gradient(135deg, #fff8dc 0%, #ffecb3 20%, #ffd700 50%, #ffb300 80%, #cc9900 100%);
background-size: 8px 8px, 8px 8px, 100% 100%;
border: 1.5px solid #b8860b;
padding: 3px 2px;
/* Glow + umbre identice cu .tile.color-joker din joc (jokerShimmer) */
box-shadow:
0 1px 0 rgba(180,150,100,0.9),
0 2px 0 rgba(160,130,85,0.85),
0 3px 0 rgba(140,110,70,0.8),
0 4px 0 rgba(120,90,55,0.75),
0 5px 0 rgba(100,75,45,0.7),
0 6px 14px rgba(255,193,7,0.55),
0 0 18px rgba(255,215,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -1px 0 rgba(120,80,0,0.3),
inset 0 0 0 1px rgba(255,235,150,0.9);
animation: lfdJokerShimmer 2.2s ease-in-out infinite;
}
@keyframes lfdJokerShimmer {
0%, 100% {
box-shadow:
0 1px 0 rgba(180,150,100,0.9),
0 2px 0 rgba(160,130,85,0.85),
0 3px 0 rgba(140,110,70,0.8),
0 4px 0 rgba(120,90,55,0.75),
0 5px 0 rgba(100,75,45,0.7),
0 4px 10px rgba(184,134,11,0.3),
0 0 10px rgba(255,215,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 -1px 0 rgba(120,80,0,0.3),
inset 0 0 0 1px rgba(255,215,0,0.6);
}
50% {
box-shadow:
0 1px 0 rgba(180,150,100,0.9),
0 2px 0 rgba(160,130,85,0.85),
0 3px 0 rgba(140,110,70,0.8),
0 4px 0 rgba(120,90,55,0.75),
0 5px 0 rgba(100,75,45,0.7),
0 6px 18px rgba(255,193,7,0.7),
0 0 26px rgba(255,215,0,0.55),
0 0 50px rgba(255,215,0,0.25),
inset 0 1px 0 rgba(255,255,255,1),
inset 0 -1px 0 rgba(120,80,0,0.3),
inset 0 0 0 1.5px rgba(255,235,150,1);
}
}
.lfd-jface {
position: relative; z-index: 2;
width: 88%; max-height: 72%;
filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.35));
}
.lfd-jlbl {
position: relative; z-index: 2;
font-size: 5.5px;
font-weight: 800;
letter-spacing: 1.2px;
color: #8b5a00;
margin-top: 1px;
text-shadow: 0 1px 0 rgba(255,255,255,0.7);
font-family: 'Oswald', sans-serif;
}
.lfd-joker::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 3;
mix-blend-mode: overlay;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 45%, rgba(255,235,150,0.7) 50%, rgba(255,255,255,0.5) 55%, transparent 70%);
background-size: 250% 100%;
animation: lfdJokerSweep 2.8s ease-in-out infinite;
}
@keyframes lfdJokerSweep {
0% { background-position: -100% 0; }
50%,100% { background-position: 200% 0; }
}
/* Fan positions — tiles fan out at bottom of 150px container */
.lfd-t1 { animation-delay: 0s; --r: -32deg; --x: -80px; --y: 78px; }
.lfd-t2 { animation-delay: 0.08s; --r: -20deg; --x: -48px; --y: 88px; }
.lfd-t3 { animation-delay: 0.16s; --r: -8deg; --x: -16px; --y: 94px; }
.lfd-t4 { animation-delay: 0.24s; --r: 5deg; --x: 16px; --y: 94px; }
.lfd-t5 { animation-delay: 0.32s; --r: 18deg; --x: 48px; --y: 88px; }
.lfd-t6 { animation-delay: 0.40s; --r: 30deg; --x: 80px; --y: 78px; }
/* Joker hero center — apare DUPA ce toate piesele fan sunt asezate */
.lfd-t7 {
animation: lfdHero 2.8s infinite cubic-bezier(.22,1.2,.36,1);
animation-delay: 0.55s;
animation-fill-mode: backwards;
z-index: 10;
filter:
drop-shadow(0 2px 2px rgba(0,0,0,0.5))
drop-shadow(0 10px 14px rgba(0,0,0,0.4))
drop-shadow(0 0 20px rgba(255,215,0,0.7))
drop-shadow(0 0 35px rgba(255,215,0,0.4));
}
@keyframes lfdDeal {
0%, 5% { transform: translate(0, -30px) rotate(-200deg) scale(0.6); opacity: 0; }
12% { opacity: 1; }
28%, 75% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 1; }
90%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 0; }
}
@keyframes lfdHero {
0%, 22% { transform: translate(0, -50px) rotateY(-180deg) scale(0.4); opacity: 0; }
32% { opacity: 1; transform: translate(0, 45px) rotateY(0) scale(1.05); }
38%, 78% { transform: translate(0, 45px) rotateY(0) scale(0.95); opacity: 1; }
92%, 100% { transform: translate(0, 45px) rotateY(0) scale(0.95); opacity: 0; }
}
/* Checklist */
.loader-checklist {
margin-bottom: 22px;
text-align: left;
}
.loader-check-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-size: 13px;
color: rgba(244, 236, 216, 0.65);
border-radius: 8px;
margin-bottom: 4px;
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(212, 165, 68, 0.08);
transition: all 0.3s ease;
}
.loader-check-item.active {
background: rgba(212, 165, 68, 0.08);
border-color: rgba(212, 165, 68, 0.25);
color: #f4ecd8;
}
.loader-check-item.done {
background: rgba(76, 175, 80, 0.08);
border-color: rgba(76, 175, 80, 0.2);
color: #a8d9a7;
}
.check-icon {
width: 18px; height: 18px;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid rgba(212, 165, 68, 0.3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
position: relative;
}
.check-icon::after { content: ''; }
.loader-check-item.active .check-icon {
border-color: #d4a544;
box-shadow: 0 0 10px rgba(212, 165, 68, 0.4);
animation: checkSpin 1s linear infinite;
}
.loader-check-item.active .check-icon::before {
content: '';
position: absolute;
inset: 2px;
border-radius: 50%;
border: 1.5px solid transparent;
border-top-color: #d4a544;
animation: checkSpin 0.8s linear infinite;
}
.loader-check-item.done .check-icon {
border-color: #7ac17c;
background: #4caf50;
color: #fff;
}
.loader-check-item.done .check-icon::after { content: '✓'; }
@keyframes checkSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.check-label { flex: 1; }
.check-detail {
margin-left: auto;
font-size: 11px;
opacity: 0.7;
font-family: 'Courier New', monospace;
color: #d4a544;
}
/* Progress bar — gold with shimmer */
.loader-progress-container { margin-bottom: 18px; }
.progress-bar-bg {
height: 6px;
background: rgba(0, 0, 0, 0.4);
border-radius: 999px;
overflow: hidden;
border: 1px solid rgba(212, 165, 68, 0.15);
position: relative;
}
.progress-bar-fill {
height: 100%;
width: 0;
background:
linear-gradient(90deg, #a8822a 0%, #d4a544 30%, #f0c66a 50%, #d4a544 70%, #a8822a 100%);
background-size: 200% 100%;
border-radius: 999px;
transition: width 0.35s ease;
box-shadow:
0 0 12px rgba(212, 165, 68, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: progressShimmer 2s linear infinite;
position: relative;
}
.progress-bar-fill::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 20px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
border-radius: 0 999px 999px 0;
}
@keyframes progressShimmer {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
.progress-info {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 11px;
color: rgba(244, 236, 216, 0.7);
font-family: 'Courier New', monospace;
letter-spacing: 1px;
}
.percent-text {
color: #d4a544;
font-weight: 700;
}
.loader-tip {
font-size: 12px;
color: rgba(244, 236, 216, 0.55);
font-style: italic;
padding: 10px 0 0;
margin-top: 4px;
border-top: 1px solid rgba(212, 165, 68, 0.15);
line-height: 1.5;
}
.loader-tip::before {
content: '💡 ';
opacity: 0.8;
}
/* ================================================================================================
22. ORIENTATION WARNING
================================================================================================ */
.orientation-warning {
display: none !important; /* portrait mobil SUPORTAT — joc responsiv, nu mai forteaza landscape */
position: fixed;
inset: 0;
z-index: 10000;
background: var(--remi-bg, #1c2333);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 40px;
text-align: center;
}
.orientation-content {
max-width: 300px;
}
.orientation-content h2 {
font-size: 22px;
color: var(--remi-text);
margin: 16px 0 8px;
}
.orientation-content p {
font-size: 14px;
color: var(--remi-text-dim);
line-height: 1.5;
}
.phone-icon {
font-size: 64px;
animation: tiltPhone 2s ease-in-out infinite;
}
.rotate-arrow {
font-size: 40px;
color: var(--remi-accent);
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Portrait mobile NU mai forteaza warning — joc responsiv inline (vezi @media sub 767px) */
/* ================================================================================================
23. SCROLLBAR STYLES
================================================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--remi-border);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--remi-accent); }
/* ================================================================================================
23a. CHAT TABS BAR (5 icon tabs)
================================================================================================ */
.chat-tabs-bar {
display: flex;
background: rgba(255, 255, 255, 0.04);
border-radius: 12px;
padding: 4px;
margin-bottom: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
gap: 3px;
}
.ct-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 2px 4px;
border: none;
border-radius: 10px;
background: transparent;
color: var(--remi-text-dim);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
min-width: 0;
}
.ct-tab:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--remi-text);
}
.ct-tab.ct-active {
background: rgba(var(--remi-accent-rgb), 0.15);
color: var(--remi-accent);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.ct-icon { font-size: 20px; line-height: 1; }
.ct-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
text-transform: uppercase;
}
.ct-badge {
position: absolute;
top: 0;
right: 2px;
min-width: 14px;
height: 14px;
padding: 0 3px;
/* 20-09-2026 — testerul de layout: alb pe `#ef4444` dă 3,8:1, sub minimul de citit
(4,5:1 WCAG pentru text normal). `#dc2626` e acelaşi roşu, o treaptă mai închis, şi
urcă la 4,85:1 — e chiar valoarea `--danger` din tema deschisă, deci rămâne în
paletă. Doar culoarea se schimbă: mărimea, forma şi aşezarea insignei sunt aceleaşi. */
background: #dc2626;
color: #fff;
border-radius: 7px;
font-size: 8px;
font-weight: 800;
line-height: 14px;
text-align: center;
pointer-events: none;
box-shadow: 0 1px 3px rgba(239, 68, 68, 0.4);
}
/* Individual tab active colors */
#chatTabGlobal.ct-active { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
#chatTabTable.ct-active { background: rgba(var(--remi-accent-rgb), 0.15); color: var(--remi-accent); }
#chatTabPrivate.ct-active { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
#chatTabFriends.ct-active { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
#chatTabNotifs.ct-active { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
/* ================================================================================================
23b. CHAT MESSAGES
================================================================================================ */
.cmsg-container {
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 10px;
background: rgba(0,0,0,0.12);
border-radius: 8px;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: rgba(var(--remi-accent-rgb), 0.15) transparent;
}
.cmsg-container::-webkit-scrollbar { width: 4px; }
.cmsg-container::-webkit-scrollbar-track { background: transparent; }
.cmsg-container::-webkit-scrollbar-thumb { background: rgba(var(--remi-accent-rgb), 0.2); border-radius: 4px; }
.cmsg-bubble {
padding: 7px 11px;
font-size: 13px;
color: var(--remi-text);
word-break: break-word;
line-height: 1.4;
border-radius: 12px;
background: rgba(255,255,255, 0.06);
border: 1px solid rgba(255,255,255, 0.06);
margin-bottom: 4px;
}
.cmsg-bubble.cmsg-me {
border-radius: 12px 12px 3px 12px;
background: linear-gradient(135deg,
rgba(var(--remi-accent-rgb), 0.25) 0%,
rgba(var(--remi-accent-rgb), 0.15) 100%);
border: 1px solid rgba(var(--remi-accent-rgb), 0.12);
}
.cmsg-bubble.cmsg-system {
text-align: center;
font-style: italic;
color: var(--remi-text-dim);
background: transparent;
border: none;
font-size: 11px;
}
.cmsg-name {
font-size: 10px;
font-weight: 600;
margin-right: 6px;
}
.cmsg-time {
font-size: 9px;
color: var(--remi-text-dim);
margin-left: 6px;
opacity: 0.6;
}
.cmsg-empty {
text-align: center;
color: var(--remi-text-dim);
padding: 20px;
font-size: 12px;
}
.cmsg-input {
flex: 1;
padding: 10px 14px;
background: rgba(255,255,255, 0.06);
border: 1px solid rgba(255,255,255, 0.1);
border-radius: 10px;
color: var(--remi-text);
font-size: 13px;
font-family: inherit;
outline: none;
transition: border-color 0.2s, background 0.2s;
resize: none;
overflow: hidden;
line-height: 1.4;
min-height: 0;
max-height: 38px;
}
.cmsg-input:focus {
border-color: rgba(var(--remi-accent-rgb), 0.4);
background: rgba(255,255,255, 0.1);
}
/* ── Chat Row Layout (Table-compatible) ── */
.cmsg-row {
display: flex;
gap: 8px;
padding: 4px 0;
align-items: flex-start;
}
.cmsg-row.cmsg-me {
flex-direction: row-reverse;
}
.cmsg-row.cmsg-other {
flex-direction: row;
}
.cmsg-row.cmsg-me .cmsg-bubble {
border-radius: 12px 12px 3px 12px;
background: linear-gradient(135deg,
rgba(var(--remi-accent-rgb), 0.25) 0%,
rgba(var(--remi-accent-rgb), 0.15) 100%);
border: 1px solid rgba(var(--remi-accent-rgb), 0.12);
}
.cmsg-row.cmsg-me .cmsg-time {
text-align: right;
}
.cmsg-row .cmsg-content {
display: flex;
flex-direction: column;
gap: 2px;
max-width: 80%;
min-width: 0;
}
.cmsg-me .cmsg-content { align-items: flex-end; }
.cmsg-other .cmsg-content { align-items: flex-start; }
.cmsg-avatar-img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.cmsg-avatar-initial {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(var(--remi-accent-rgb), 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: var(--remi-accent);
flex-shrink: 0;
}
.cmsg-row .cmsg-name {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 2px;
}
.cmsg-me .cmsg-name { color: var(--remi-accent); }
.cmsg-other .cmsg-name { color: var(--remi-text-dim); }
.cmsg-row .cmsg-time {
font-size: 9px;
color: var(--remi-text-dim);
padding: 0 3px;
}
.cmsg-del-btn {
background: none;
border: none;
color: var(--remi-text-dim);
font-size: 11px;
cursor: pointer;
padding: 0 2px;
opacity: 0.4;
transition: opacity 0.2s, color 0.2s;
}
.cmsg-del-btn:hover {
opacity: 1;
color: #ef4444;
}
.chat-username-link {
cursor: pointer;
transition: all 0.15s ease;
border-bottom: 1px dotted transparent;
}
.chat-username-link:hover {
filter: brightness(1.3);
border-bottom-color: currentColor;
}
.cmsg-enter {
animation: cmsgSlideIn 0.25s ease-out;
}
@keyframes cmsgSlideIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Chat User Popup (copied from Table) ── */
.chat-user-popup,
.cmsg-user-popup {
position: fixed;
z-index: 10001;
width: 170px;
background: var(--remi-surface-2, #1e1240);
border: 1px solid rgba(var(--remi-accent-rgb), 0.15);
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
overflow: hidden;
opacity: 0;
transform: translateY(-4px) scale(0.95);
transition: all 0.15s ease;
pointer-events: none;
}
.chat-user-popup.visible,
.cmsg-user-popup.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.chat-popup-header {
padding: 8px 12px;
border-bottom: 1px solid rgba(var(--remi-accent-rgb), 0.1);
background: rgba(var(--remi-accent-rgb), 0.04);
}
.chat-popup-name {
font-size: 12px;
font-weight: 700;
color: var(--remi-accent);
}
.chat-popup-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: none;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
color: var(--remi-text-dim);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}
.chat-popup-btn:last-child { border-bottom: none; }
.chat-popup-btn:hover {
background: rgba(var(--remi-accent-rgb), 0.08);
color: var(--remi-text);
}
.chat-popup-btn .material-symbols-rounded {
font-size: 16px;
color: var(--remi-accent);
}
.chat-popup-btn.chat-popup-danger { color: #f87171; }
.chat-popup-btn.chat-popup-danger .material-symbols-rounded { color: #ef4444; }
.chat-popup-btn.chat-popup-danger:hover {
background: rgba(239, 68, 68, 0.12);
color: #fca5a5;
}
.chat-popup-badge {
font-size: 9px;
font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
background: rgba(var(--remi-accent-rgb), 0.15);
color: var(--remi-accent);
margin-left: 6px;
}
/* Chat user lists scrollable */
#chatGlobalUsers,
#chatRoomUsers {
max-height: 155px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(var(--remi-accent-rgb), 0.15) transparent;
}
#chatGlobalUsers::-webkit-scrollbar,
#chatRoomUsers::-webkit-scrollbar { width: 4px; }
#chatGlobalUsers::-webkit-scrollbar-track,
#chatRoomUsers::-webkit-scrollbar-track { background: transparent; }
#chatGlobalUsers::-webkit-scrollbar-thumb,
#chatRoomUsers::-webkit-scrollbar-thumb { background: rgba(var(--remi-accent-rgb), 0.2); border-radius: 4px; }
/* Chat nav badge */
.chat-nav-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 9px;
font-weight: 700;
line-height: 16px;
text-align: center;
color: #fff;
background: linear-gradient(135deg, #ff4444, #ff6b6b);
border-radius: 10px;
box-shadow: 0 2px 6px rgba(255, 68, 68, 0.5);
z-index: 5;
pointer-events: none;
animation: chatBadgeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes chatBadgeIn {
from { opacity: 0; transform: scale(0.5); }
to { opacity: 1; transform: scale(1); }
}
/* ================================================================================================
23c. EMOJI PICKER
================================================================================================ */
.prv-emoji-picker {
display: none;
flex-direction: column;
background: linear-gradient(135deg, var(--remi-bg, rgba(20, 16, 32, 0.98)), rgba(var(--remi-primary-rgb, 36, 21, 66), 0.98));
border: 1px solid rgba(var(--remi-accent-rgb), 0.15);
border-radius: 14px;
padding: 8px;
gap: 4px;
z-index: 100;
box-shadow: 0 -4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2);
max-height: 280px;
margin-bottom: 4px;
}
.prv-emoji-close {
position: absolute;
top: 4px;
right: 8px;
background: none;
border: none;
color: var(--remi-text-dim);
font-size: 14px;
cursor: pointer;
z-index: 2;
}
.prv-emoji-tabs {
display: flex;
gap: 2px;
padding: 0 2px 6px;
overflow-x: auto;
flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
scrollbar-width: none;
}
.prv-emoji-tabs::-webkit-scrollbar { display: none; }
.prv-emoji-tab {
flex: 0 0 auto;
min-width: 32px;
background: none;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
padding: 4px 8px;
font-size: 14px;
transition: background 0.15s, opacity 0.15s;
opacity: 0.5;
line-height: 1;
text-align: center;
}
.prv-emoji-tab:hover { background: rgba(255, 255, 255, 0.08); opacity: 0.8; }
.prv-emoji-tab.active {
background: rgba(var(--remi-accent-rgb), 0.15);
opacity: 1;
}
.prv-emoji-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
gap: 3px;
max-height: 180px;
overflow-y: auto;
padding: 4px 2px;
}
.prv-emoji-grid::-webkit-scrollbar { width: 4px; }
.prv-emoji-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.prv-emoji-btn {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
background: none;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: transform 0.12s, background 0.15s;
padding: 2px;
line-height: 1;
}
.prv-emoji-btn:hover {
background: rgba(var(--remi-accent-rgb), 0.15);
border-color: rgba(var(--remi-accent-rgb), 0.3);
transform: scale(1.15);
}
/* ================================================================================================
23d. MULTIPLAYER CREATE ROOM MODAL
================================================================================================ */
.mp-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
animation: mp-modal-fadein 0.3s ease-out;
}
@keyframes mp-modal-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.mp-modal-card {
background: linear-gradient(145deg,
var(--remi-surface-2, #1e1040) 0%,
var(--remi-bg, #0f0820) 50%,
var(--remi-surface-2, #1e1040) 100%
);
border: 1px solid rgba(var(--remi-accent-rgb), 0.2);
border-radius: 20px;
padding: 28px;
width: 90%;
max-width: 420px;
max-height: 85vh;
overflow-y: auto;
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.5),
0 0 40px rgba(var(--remi-accent-rgb), 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
animation: mp-modal-slidein 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
scrollbar-width: thin;
scrollbar-color: rgba(var(--remi-accent-rgb), 0.4) transparent;
}
.mp-modal-card::-webkit-scrollbar { width: 6px; }
.mp-modal-card::-webkit-scrollbar-track { background: rgba(var(--remi-accent-rgb), 0.05); border-radius: 3px; }
.mp-modal-card::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(var(--remi-accent-rgb), 0.5) 0%, rgba(var(--remi-accent-rgb), 0.25) 100%);
border-radius: 3px;
}
@keyframes mp-modal-slidein {
from { transform: translateY(20px) scale(0.92); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.mp-modal-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.mp-modal-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(var(--remi-accent-rgb), 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mp-modal-icon .material-symbols-rounded {
font-size: 24px;
color: var(--remi-accent);
}
.mp-modal-title {
color: var(--remi-accent);
font-size: 1.3rem;
margin: 0;
font-weight: 700;
}
.mp-modal-subtitle {
color: var(--remi-text-dim);
font-size: 0.8rem;
margin: 2px 0 0;
}
.mp-modal-close {
margin-left: auto;
background: none;
border: none;
color: var(--remi-text-dim);
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
border-radius: 8px;
transition: background 0.2s;
}
.mp-modal-close:hover { background: rgba(255,255,255,0.08); }
.mp-modal-field { margin-bottom: 16px; }
.mp-modal-label {
display: block;
color: var(--remi-text-dim);
font-size: 0.8rem;
margin-bottom: 6px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mp-modal-input {
width: 100%;
padding: 10px 14px;
background: rgba(var(--remi-accent-rgb), 0.06);
border: 1px solid rgba(var(--remi-accent-rgb), 0.1);
border-radius: 10px;
color: var(--remi-text);
font-size: 0.95rem;
outline: none;
transition: all 0.2s;
box-sizing: border-box;
}
.mp-modal-input:focus {
border-color: var(--remi-accent);
box-shadow: 0 0 12px rgba(var(--remi-accent-rgb), 0.15);
}
.mp-modal-input::placeholder { color: var(--remi-text-dim); opacity: 0.5; }
.mp-modal-hint {
font-size: 0.75rem;
color: var(--remi-text-dim);
margin-top: 6px;
padding-left: 2px;
}
.mp-opt-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mp-opt-btn {
flex: 1;
min-width: 60px;
padding: 8px 12px;
background: rgba(var(--remi-accent-rgb), 0.06);
border: 1px solid rgba(var(--remi-accent-rgb), 0.08);
border-radius: 10px;
color: var(--remi-text-dim);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.mp-opt-btn:hover {
background: rgba(var(--remi-accent-rgb), 0.1);
border-color: rgba(var(--remi-accent-rgb), 0.25);
}
.mp-opt-btn.selected {
background: rgba(var(--remi-accent-rgb), 0.18);
border-color: var(--remi-accent);
color: var(--remi-accent);
box-shadow:
0 4px 12px rgba(var(--remi-accent-rgb), 0.2),
0 0 16px rgba(var(--remi-accent-rgb), 0.1);
}
.mp-modal-actions {
display: flex;
gap: 10px;
margin-top: 22px;
}
.mp-modal-btn-create,
.mp-modal-btn-cancel {
flex: 1;
padding: 12px 16px;
border: none;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.mp-modal-btn-create {
background: linear-gradient(135deg, var(--remi-accent) 0%, var(--remi-accent-dark) 100%);
color: white;
box-shadow:
0 4px 16px rgba(var(--remi-accent-rgb), 0.3),
0 0 20px rgba(var(--remi-accent-rgb), 0.15);
}
.mp-modal-btn-create:hover {
transform: translateY(-2px);
box-shadow:
0 8px 24px rgba(var(--remi-accent-rgb), 0.4),
0 0 32px rgba(var(--remi-accent-rgb), 0.25);
}
.mp-modal-btn-cancel {
background: rgba(var(--remi-accent-rgb), 0.06);
color: var(--remi-text-dim);
border: 1px solid rgba(var(--remi-accent-rgb), 0.08);
}
.mp-modal-btn-cancel:hover {
background: rgba(var(--remi-accent-rgb), 0.12);
border-color: rgba(var(--remi-accent-rgb), 0.15);
}
/* ================================================================================================
24. LIGHT THEME OVERRIDES
================================================================================================ */
/* Light theme: Chat */
[data-theme="light"] .chat-tabs-bar {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ct-tab { color: rgba(0, 0, 0, 0.35); }
[data-theme="light"] .ct-tab:hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.55); }
[data-theme="light"] .ct-tab.ct-active { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
[data-theme="light"] #chatTabGlobal.ct-active { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
[data-theme="light"] #chatTabTable.ct-active { background: rgba(var(--remi-accent-rgb), 0.1); color: var(--remi-accent); }
[data-theme="light"] #chatTabPrivate.ct-active { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
[data-theme="light"] #chatTabFriends.ct-active { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
[data-theme="light"] #chatTabNotifs.ct-active { background: rgba(245, 158, 11, 0.1); color: #d97706; }
[data-theme="light"] .cmsg-container { background: rgba(0,0,0,0.04); }
[data-theme="light"] .cmsg-bubble { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .cmsg-bubble.cmsg-me {
background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), 0.15) 0%, rgba(var(--remi-accent-rgb), 0.08) 100%);
border-color: rgba(var(--remi-accent-rgb), 0.15);
}
[data-theme="light"] .cmsg-input { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .cmsg-input:focus { background: rgba(0,0,0,0.06); border-color: rgba(var(--remi-accent-rgb), 0.3); }
[data-theme="light"] .cmsg-avatar-initial { background: rgba(var(--remi-accent-rgb), 0.1); }
[data-theme="light"] .cmsg-me .cmsg-bubble { background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), 0.12) 0%, rgba(var(--remi-accent-rgb), 0.06) 100%); border-color: rgba(var(--remi-accent-rgb), 0.12); }
[data-theme="light"] .cmsg-other .cmsg-bubble { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .cmsg-me .cmsg-name { color: var(--remi-accent); }
[data-theme="light"] .cmsg-other .cmsg-name { color: #64748b; }
[data-theme="light"] .chat-username-link:hover { filter: brightness(0.8); }
[data-theme="light"] .cmsg-user-popup,
[data-theme="light"] .chat-user-popup {
background: rgba(255, 255, 255, 0.97);
border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .chat-popup-header {
background: rgba(var(--remi-accent-rgb), 0.05);
border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .chat-popup-btn {
color: #555;
border-bottom-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .chat-popup-btn:hover {
background: rgba(var(--remi-accent-rgb), 0.06);
color: #222;
}
[data-theme="light"] .chat-popup-btn.chat-popup-danger { color: #dc2626; }
[data-theme="light"] .chat-popup-btn.chat-popup-danger:hover {
background: rgba(239, 68, 68, 0.06);
color: #b91c1c;
}
[data-theme="light"] .prv-emoji-picker {
background: linear-gradient(135deg, rgba(248, 249, 250, 0.98) 0%, rgba(240, 242, 244, 0.98) 100%);
border-color: rgba(var(--remi-accent-rgb), 0.25);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .prv-emoji-btn {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .prv-emoji-btn:hover {
background: rgba(var(--remi-accent-rgb), 0.1);
}
/* Light theme: Create Room Modal */
[data-theme="light"] .mp-modal-card {
background: linear-gradient(145deg, #f8f9fa 0%, #fff 50%, #f8f9fa 100%);
border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .mp-modal-input { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: var(--remi-text); }
[data-theme="light"] .mp-opt-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: var(--remi-text-dim); }
[data-theme="light"] .mp-opt-btn.selected { background: rgba(var(--remi-accent-rgb), 0.12); color: var(--remi-accent); }
[data-theme="light"] .prv-emoji-picker {
background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,249,250,0.98));
border-color: rgba(0,0,0,0.1);
}
/* Light theme: Drawer */
[data-theme="light"] .drawer-panel {
background: linear-gradient(180deg,
rgba(250, 249, 247, 0.98) 0%,
rgba(245, 243, 238, 0.95) 100%);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .drawer-handle-bar {
background: rgba(0, 0, 0, 0.15);
}
/* Indigo scris direct (#1e1b4b la opacitate mică) — peste fundal deschis
iese gri-ALBĂSTRUI. Era în 16 locuri din fişierul ăsta şi de aici venea
impresia că tema deschisă „se duce în albastru", chiar după ce tokenii de
paletă fuseseră făcuţi calzi. Peste tot s-a trecut pe tokeni. */
[data-theme="light"] .drawer-category-label {
color: var(--text-secondary);
}
[data-theme="light"] .drawer-item {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.06);
color: var(--text-secondary);
}
[data-theme="light"] .drawer-item:hover {
background: rgba(var(--remi-accent-rgb), 0.1);
border-color: rgba(var(--remi-accent-rgb), 0.3);
color: var(--remi-text);
}
/* Light theme: Top Bar — cream ivory with gold accents (matches light theme tile aesthetic) */
[data-theme="light"] .top-bar {
background:
repeating-linear-gradient(45deg,
transparent 0, transparent 10px,
rgba(184, 134, 11, 0.02) 10px, rgba(184, 134, 11, 0.02) 11px),
repeating-linear-gradient(-45deg,
transparent 0, transparent 10px,
rgba(184, 134, 11, 0.02) 10px, rgba(184, 134, 11, 0.02) 11px),
radial-gradient(ellipse 60% 100% at 50% 0%,
rgba(255, 215, 0, 0.12) 0%,
transparent 70%),
linear-gradient(180deg, rgba(255,253,245,0.98) 0%, rgba(248,243,230,0.95) 100%);
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg,
transparent 0%,
rgba(184, 134, 11, 0.35) 20%,
rgba(184, 134, 11, 0.55) 50%,
rgba(184, 134, 11, 0.35) 80%,
transparent 100%) 1;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .top-bar::before {
background: linear-gradient(90deg,
transparent 0%,
rgba(184, 134, 11, 0.08) 40%,
rgba(255, 215, 0, 0.14) 50%,
rgba(184, 134, 11, 0.08) 60%,
transparent 100%);
}
[data-theme="light"] .top-bar::after {
background: linear-gradient(90deg,
transparent,
rgba(184, 134, 11, 0.7) 30%,
rgba(255, 215, 0, 0.95) 50%,
rgba(184, 134, 11, 0.7) 70%,
transparent);
}
/* 17-09-2026 — pe tema deschisă titlul avea nevoie de nuanţe ÎNCHISE ca să se citească pe alb.
Rămâne aşa, doar că închisul se calculează din accentul temei, nu din aurul fix. */
[data-theme="light"] .brand-title {
background: linear-gradient(135deg,
color-mix(in srgb, var(--remi-accent) 55%, #000) 0%,
color-mix(in srgb, var(--remi-accent) 75%, #000) 25%,
var(--remi-accent) 50%,
color-mix(in srgb, var(--remi-accent) 75%, #000) 75%,
color-mix(in srgb, var(--remi-accent) 55%, #000) 100%);
background-size: 300% 200%;
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.6));
}
[data-theme="light"] .brand-section .brand-title::after, [data-theme="light"] .brand-section .brand-title .brand-tag {
color: color-mix(in srgb, var(--remi-accent) 70%, #000);
-webkit-text-fill-color: color-mix(in srgb, var(--remi-accent) 70%, #000);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .brand-section::after {
background: linear-gradient(180deg,
transparent,
rgba(184, 134, 11, 0.4) 30%,
rgba(184, 134, 11, 0.6) 50%,
rgba(184, 134, 11, 0.4) 70%,
transparent);
}
/* Light theme: Nav Rail */
[data-theme="light"] .nav-rail {
box-shadow:
0 -2px 16px rgba(0, 0, 0, 0.08),
0 -1px 0 rgba(var(--remi-accent-rgb), 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
background:
linear-gradient(0deg,
rgba(250, 249, 247, 0.98) 0%,
rgba(245, 243, 238, 0.95) 100%);
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .nav-bar-btn {
color: var(--color-text-secondary, rgba(30, 27, 75, 0.5));
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .nav-bar-btn:hover {
color: var(--color-text-primary, #1e1b4b);
background: rgba(var(--remi-accent-rgb), 0.15);
border-color: rgba(var(--remi-accent-rgb), 0.3);
}
[data-theme="light"] .nav-bar-btn.active {
color: var(--color-text-primary, #1e1b4b);
background: linear-gradient(135deg,
rgba(var(--remi-accent-rgb), 0.2) 0%,
rgba(var(--remi-accent-rgb), 0.15) 100%
);
border-color: var(--remi-accent);
}
[data-theme="light"] .nav-bar-btn .material-symbols-rounded {
color: var(--color-text-secondary, rgba(30, 27, 75, 0.5));
}
[data-theme="light"] .nav-bar-btn:hover .material-symbols-rounded,
[data-theme="light"] .nav-bar-btn.active .material-symbols-rounded {
color: var(--remi-accent);
}
[data-theme="light"] .nav-bar-fab {
color: #fff;
box-shadow: 0 4px 16px rgba(var(--remi-accent-rgb), 0.3);
}
[data-theme="light"] .nav-bar-fab.nav-fab-profile {
background: transparent;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .nav-bar-fab.nav-fab-profile:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .action-btn {
background:
linear-gradient(145deg,
rgba(255, 253, 245, 0.85) 0%,
rgba(245, 238, 220, 0.7) 100%);
border-color: rgba(184, 134, 11, 0.25);
color: rgba(139, 105, 20, 0.75);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 rgba(184, 134, 11, 0.1),
0 2px 6px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .action-btn:hover {
background:
linear-gradient(145deg,
rgba(255, 235, 150, 0.4) 0%,
rgba(255, 215, 0, 0.22) 100%);
color: #8b6914;
border-color: rgba(184, 134, 11, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(184, 134, 11, 0.15),
0 0 0 1px rgba(184, 134, 11, 0.25),
0 4px 12px rgba(184, 134, 11, 0.2);
}
[data-theme="light"] .brand-icon {
background: linear-gradient(145deg, #ffffff 0%, #f9f3e0 50%, #ebdfbd 100%);
border-color: #8b6914;
}
[data-theme="light"] .brand-icon::after {
color: #a01717;
}
/* Light theme: Status bar items */
[data-theme="light"] .status-item { color: var(--text-secondary); }
[data-theme="light"] .status-item .material-symbols-rounded { color: var(--remi-accent); }
[data-theme="light"] .score-value { color: var(--remi-accent); }
[data-theme="light"] .score-label { color: var(--text-secondary); }
[data-theme="light"] .status-btn {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.08);
color: var(--text-secondary);
}
[data-theme="light"] .status-btn:hover {
background: rgba(var(--remi-accent-rgb), 0.08);
color: var(--remi-accent);
}
[data-theme="light"] .balance-badge {
background: rgba(var(--remi-accent-rgb), 0.06);
border-color: rgba(var(--remi-accent-rgb), 0.12);
}
[data-theme="light"] .xp-bar-container {
background: rgba(var(--remi-accent-rgb), 0.04);
border-color: rgba(var(--remi-accent-rgb), 0.08);
}
[data-theme="light"] .xp-progress-track { background: rgba(0,0,0,0.06); }
/* Light theme: Immersive Toggle */
[data-theme="light"] .immersive-toggle-float {
background: linear-gradient(135deg, rgba(255,255,255,0.94) 0%, rgba(240,238,232,0.88) 100%);
border-color: rgba(0,0,0,0.12);
color: var(--remi-accent-dark);
}
[data-theme="light"] .immersive-toggle-float:hover {
border-color: rgba(var(--remi-accent-rgb), 0.4);
box-shadow: 0 0 18px rgba(var(--remi-accent-rgb), 0.2), 0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .immersive-glow {
background: radial-gradient(circle, rgba(var(--remi-accent-rgb), 0.08) 0%, transparent 70%);
}
/* Light theme: Context Panel */
[data-theme="light"] .context-panel {
background: linear-gradient(180deg,
rgba(248, 249, 250, 0.98) 0%,
rgba(255, 255, 255, 0.98) 100%);
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.06);
border-left-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .panel-title {
color: var(--remi-accent);
}
[data-theme="light"] .panel-back {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(var(--remi-accent-rgb), 0.2);
color: var(--text-secondary);
}
[data-theme="light"] .panel-back:hover {
background: rgba(var(--remi-accent-rgb), 0.12);
color: var(--remi-text);
}
[data-theme="light"] .panel-close {
color: var(--text-secondary);
}
[data-theme="light"] .panel-close:hover {
background: rgba(var(--remi-accent-rgb), 0.12);
color: var(--remi-text);
}
/* Light theme: Modal */
[data-theme="light"] .modal-overlay {
background: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .modal-container {
background: linear-gradient(145deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 249, 250, 0.97) 50%,
rgba(255, 255, 255, 0.98) 100%);
border-color: rgba(0, 0, 0, 0.08);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 8px 32px rgba(0, 0, 0, 0.1),
0 24px 80px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .modal-container::before {
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--remi-accent-rgb), 0.5) 50%,
transparent 100%);
}
[data-theme="light"] .modal-header {
background: linear-gradient(135deg,
rgba(var(--remi-accent-rgb), 0.04) 0%,
transparent 100%);
border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .modal-header h2 {
color: var(--remi-accent);
}
[data-theme="light"] .modal-close,
[data-theme="light"] .modal-close-btn {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
color: #999;
}
[data-theme="light"] .modal-close:hover,
[data-theme="light"] .modal-close-btn:hover {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.15);
color: #dc2626;
}
[data-theme="light"] .modal-subtitle { color: #888; }
[data-theme="light"] .modal-footer {
border-top-color: rgba(0, 0, 0, 0.06);
background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), 0.03) 0%, transparent 100%);
}
[data-theme="light"] .modal-footer .btn-secondary {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.1);
color: #666;
}
[data-theme="light"] .modal-body {
scrollbar-color: rgba(var(--remi-accent-rgb), 0.25) rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .modal-body::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .modal-body::-webkit-scrollbar-thumb {
background: rgba(var(--remi-accent-rgb), 0.2);
}
/* Light theme: Setup */
[data-theme="light"] .difficulty-btn {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
color: var(--text-secondary);
}
[data-theme="light"] .difficulty-btn:hover {
border-color: rgba(var(--remi-accent-rgb), 0.3);
background: rgba(var(--remi-accent-rgb), 0.06);
}
[data-theme="light"] .difficulty-btn.active {
border-color: var(--remi-accent);
background: rgba(var(--remi-accent-rgb), 0.1);
color: var(--remi-accent);
}
[data-theme="light"] .count-btn,
[data-theme="light"] .diff-btn {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
color: var(--text-secondary);
}
[data-theme="light"] .count-btn:hover,
[data-theme="light"] .diff-btn:hover {
border-color: rgba(var(--remi-accent-rgb), 0.3);
}
[data-theme="light"] .count-btn.active,
[data-theme="light"] .diff-btn.active {
border-color: var(--remi-accent);
background: rgba(var(--remi-accent-rgb), 0.1);
color: var(--remi-accent);
}
/* Light theme: Checkbox & Range */
[data-theme="light"] .setting-item input[type="checkbox"] {
background: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .setting-item input[type="checkbox"]::before {
background: rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .setting-item input[type="checkbox"]:checked {
background: var(--remi-accent);
}
[data-theme="light"] .setting-item input[type="checkbox"]:checked::before {
background: white;
}
[data-theme="light"] .setting-item input[type="range"] {
background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .setting-item input[type="range"]::-webkit-slider-thumb {
background: var(--remi-accent);
border-color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* ══════════════════════════════════════════════════════════════════════════
`:not(.game-play-view *)` de pe regulile următoare (20-09-2026)
──────────────────────────────────────────────────────────────────────────
Blocul ăsta e din prima încercare de „masă pe temă deschisă", la care s-a
renunţat: masa rămâne pe tema remi. Regulile NU pot fi şterse, fiindcă
nouă dintre ele sunt largi (`p, span, div`, `button`, `h1`-`h6`,
`.material-symbols-rounded`, `.tile`) şi de ele depinde restul paginii —
lobby, panouri, modaluri. Aşa că se exclude doar interiorul mesei.
Sunt 39 de linii de selector marcate aşa, aici şi mai jos.
══════════════════════════════════════════════════════════════════════════ */
/* Light theme: Tiles */
[data-theme="light"] .tile:not(.game-play-view *) {
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .tile:hover:not(.game-play-view *) {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .tile.selected:not(.game-play-view *) {
box-shadow: 0 8px 24px rgba(var(--remi-accent-rgb), 0.2);
}
[data-theme="light"] .tile-back:not(.game-play-view *) {
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-dark));
}
[data-theme="light"] .opponent-tile-back:not(.game-play-view *) {
background: linear-gradient(172deg, #ead7a8 0%, #dcc58a 55%, #c8ad6a 100%);
}
[data-theme="light"] .pile-tile:not(.game-play-view *) {
background: linear-gradient(135deg, var(--remi-accent), var(--remi-accent-dark));
}
/* Light theme: Game areas */
[data-theme="light"] .opponent-area:not(.game-play-view *) {
background: white;
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .table-melds-area:not(.game-play-view *) {
background: rgba(var(--remi-accent-rgb), 0.03);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .table-zone-label:not(.game-play-view *) {
color: var(--remi-accent);
}
[data-theme="light"] .pile-label:not(.game-play-view *) {
color: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .activity-log:not(.game-play-view *) {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .activity-log-header:not(.game-play-view *) {
color: var(--remi-accent);
background: rgba(0, 0, 0, 0.03);
border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .activity-log-header .material-symbols-rounded:not(.game-play-view *) {
color: var(--remi-accent);
}
[data-theme="light"] .activity-log-entry:not(.game-play-view *) {
color: rgba(0, 0, 0, 0.78);
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .activity-log-entry:nth-child(odd):not(.game-play-view *) {
background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .activity-log-entry:hover:not(.game-play-view *) {
background: rgba(var(--remi-accent-rgb), 0.10);
border-color: rgba(var(--remi-accent-rgb), 0.25);
}
[data-theme="light"] .activity-log-entry:last-child:not(.game-play-view *) {
background: linear-gradient(180deg, rgba(var(--remi-accent-rgb),0.10), rgba(var(--remi-accent-rgb),0.04));
border-color: rgba(var(--remi-accent-rgb), 0.28);
box-shadow: 0 0 0 1px rgba(var(--remi-accent-rgb), 0.08) inset;
}
[data-theme="light"] .activity-log-entry .log-player-name:not(.game-play-view *) {
color: var(--remi-accent);
}
[data-theme="light"] .activity-log-entry .log-action-type:not(.game-play-view *) {
color: #0284c7; /* cyan-700 pentru contrast pe fundal deschis */
}
[data-theme="light"] .activity-log-entry .log-details:not(.game-play-view *) {
color: rgba(0, 0, 0, 0.60);
}
[data-theme="light"] .hand-scroll-arrow:not(.game-play-view *) {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(0, 0, 0, 0.15);
color: var(--remi-accent);
}
[data-theme="light"] .table-meld-group:not(.game-play-view *) {
background: white;
border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .arrangement-zone:not(.game-play-view *) {
background: white;
border-color: var(--remi-accent);
}
[data-theme="light"] .game-end-card {
background: white;
border-color: rgba(0, 0, 0, 0.08);
}
/* Light theme: Lobby */
[data-theme="light"] .lobby-card {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .lobby-card.lc-clickable:hover {
background: rgba(var(--remi-accent-rgb), 0.06);
border-color: rgba(var(--remi-accent-rgb), 0.2);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .lobby-stats-bar,
[data-theme="light"] .lobby-ai-card,
[data-theme="light"] .lobby-leaderboard {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .lobby-chip {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
color: var(--text-secondary);
}
[data-theme="light"] .lobby-chip.active {
background: rgba(var(--remi-accent-rgb), 0.1);
border-color: rgba(var(--remi-accent-rgb), 0.3);
color: var(--remi-accent);
}
[data-theme="light"] .lobby-search-toggle,
[data-theme="light"] .lobby-sort-select {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
color: var(--text-secondary);
}
[data-theme="light"] .lobby-search-wrap {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .lobby-search-input {
color: var(--remi-text);
}
[data-theme="light"] .lobby-guest-overlay {
background: rgba(240, 240, 245, 0.9);
}
/* Light theme: Chat */
[data-theme="light"] .chat-message {
color: var(--color-text-primary);
}
[data-theme="light"] .chat-message-player {
background: rgba(var(--color-accent-rgb), 0.1);
border: 1px solid rgba(var(--color-accent-rgb), 0.2);
}
[data-theme="light"] .chat-message-opponent {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .chat-message-system {
background: rgba(0, 0, 0, 0.03);
color: var(--color-text-tertiary);
}
[data-theme="light"] .chat-input-field {
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(0, 0, 0, 0.12);
color: var(--color-text-primary);
}
[data-theme="light"] .chat-input-field:focus {
border-color: var(--color-accent);
}
[data-theme="light"] .chat-input-field::placeholder {
color: var(--color-text-disabled);
}
[data-theme="light"] .chat-tab-bar {
background: rgba(0, 0, 0, 0.04);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .chat-tab {
color: var(--color-text-secondary);
}
[data-theme="light"] .chat-tab:hover {
background: rgba(0, 0, 0, 0.06);
color: var(--color-text-primary);
}
[data-theme="light"] .chat-tab-active {
background: rgba(var(--color-accent-rgb), 0.12) !important;
color: var(--color-accent) !important;
border-color: rgba(var(--color-accent-rgb), 0.3);
}
[data-theme="light"] .chat-messages {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.02) 0%,
rgba(0, 0, 0, 0.01) 100%);
}
[data-theme="light"] .chat-messages::-webkit-scrollbar-track {
background: transparent;
}
[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,
rgba(var(--color-accent-rgb), 0.2) 0%,
rgba(var(--color-accent-rgb), 0.12) 100%
);
}
[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb:hover {
background: rgba(var(--color-accent-rgb), 0.35);
}
[data-theme="light"] .chat-messages {
scrollbar-color: rgba(var(--color-accent-rgb), 0.15) transparent;
}
[data-theme="light"] .chat-input-area {
background: rgba(255, 255, 255, 0.9) !important;
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .chat-input-context {
color: var(--color-text-tertiary);
}
[data-theme="light"] .chat-emoji-picker {
background: linear-gradient(135deg,
rgba(248, 249, 250, 0.98) 0%,
rgba(240, 242, 244, 0.98) 100%);
border-color: rgba(var(--color-accent-rgb), 0.25);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .chat-action-btn {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.1);
color: var(--color-text-secondary);
}
[data-theme="light"] .chat-action-btn:hover {
background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .chat-message-timestamp {
color: var(--color-text-disabled);
}
[data-theme="light"] .chat-message-name-opponent {
color: var(--color-info);
}
/* Light theme: Action bar */
[data-theme="light"] .action-btn-game:not(.game-play-view *) {
background: white;
border-color: rgba(0, 0, 0, 0.1);
color: var(--remi-text);
}
[data-theme="light"] .action-btn-game:hover:not(:disabled):not(.game-play-view *) {
background: rgba(var(--remi-accent-rgb), 0.08);
border-color: rgba(var(--remi-accent-rgb), 0.3);
color: var(--remi-accent);
}
/* Light theme: Setup card */
[data-theme="light"] .setup-card {
background: white;
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}
/* Light theme: Loader */
[data-theme="light"] .game-loader {
background: var(--remi-bg);
}
[data-theme="light"] .progress-bar-bg {
background: rgba(0, 0, 0, 0.08);
}
/* Light theme: Toast */
[data-theme="light"] .toast-msg {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* Light theme: Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb {
background: rgba(var(--remi-accent-rgb), 0.15);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: rgba(var(--remi-accent-rgb), 0.3);
}
/* Light theme: Status bar */
[data-theme="light"] .status-item {
color: var(--text-secondary);
}
[data-theme="light"] .status-item .material-symbols-rounded {
color: var(--remi-accent);
}
[data-theme="light"] .balance-value {
color: var(--remi-accent);
}
/* Light theme: Surface */
[data-theme="light"] .game-canvas {
background: transparent;
}
[data-theme="light"] body {
background:
radial-gradient(ellipse at 20% 50%, rgba(var(--remi-accent-rgb), 0.02) 0%, transparent 50%),
linear-gradient(135deg, #f0f0f5 0%, #e8e0f8 50%, #f0f0f5 100%);
}
/* ================================================================================================
LIGHT THEME — Additional Overrides (copied from Remi reference)
================================================================================================ */
/* Modal header accent line */
[data-theme="light"] .modal-header::after {
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--color-accent-rgb), 0.3) 50%,
transparent 100%
);
}
/* Modal icon */
[data-theme="light"] .modal-icon {
background: rgba(var(--color-accent-rgb), 0.08);
border-color: rgba(var(--color-accent-rgb), 0.15);
}
/* Modal footer secondary button hover */
[data-theme="light"] .modal-footer .btn-secondary:hover {
background: rgba(0, 0, 0, 0.08);
}
/* Modal body scrollbar thumb hover */
[data-theme="light"] .modal-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg,
rgba(var(--color-accent-rgb), 0.5) 0%,
rgba(var(--color-accent-rgb), 0.3) 100%
);
}
/* Setting item border */
[data-theme="light"] .setting-item {
border-bottom-color: rgba(0, 0, 0, 0.06);
}
/* Settings Section */
[data-theme="light"] .settings-section {
background: linear-gradient(135deg,
rgba(var(--color-accent-rgb), 0.06) 0%,
rgba(255, 255, 255, 0.5) 100%
);
border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .settings-section:hover {
background: linear-gradient(135deg,
rgba(var(--color-accent-rgb), 0.1) 0%,
rgba(255, 255, 255, 0.7) 100%
);
border-color: rgba(var(--color-accent-rgb), 0.3);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .settings-section h3 {
color: var(--color-accent);
}
[data-theme="light"] .setting-item label {
color: var(--color-text-secondary);
}
[data-theme="light"] .setting-item label:hover {
color: var(--color-text-primary);
}
/* Buttons */
[data-theme="light"] .btn-control {
color: var(--color-text-primary);
}
[data-theme="light"] .btn-primary {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
color: #1a1a1a;
font-weight: 700;
}
[data-theme="light"] .btn-secondary {
background: rgba(0, 0, 0, 0.04);
border: 2px solid rgba(0, 0, 0, 0.12);
color: var(--color-text-primary);
}
[data-theme="light"] .btn-secondary:hover {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.2);
}
/* Stats */
[data-theme="light"] .stat-item {
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.7) 0%,
rgba(245, 245, 245, 0.5) 100%);
border: 1px solid rgba(0, 0, 0, 0.06);
border-top-color: rgba(255, 255, 255, 0.8);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .stat-value {
color: var(--color-text-primary);
}
[data-theme="light"] .stat-label:not(.game-play-view *) {
color: var(--color-text-tertiary);
}
[data-theme="light"] .stat-change.positive {
color: var(--color-success);
}
/* Profile Avatar */
[data-theme="light"] .profile-avatar-img {
border-color: rgba(var(--color-accent-rgb), 0.35);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.08),
0 0 0 3px rgba(var(--color-accent-rgb), 0.08),
0 1px 4px rgba(0, 0, 0, 0.1);
}
/* Unified Profile Modal */
[data-theme="light"] .unified-modal {
background: #f8f6f1;
border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 0 40px rgba(var(--color-accent-rgb), 0.08);
}
[data-theme="light"] .unified-modal::before {
background: radial-gradient(ellipse at 50% 0%, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 60%);
}
[data-theme="light"] .unified-tabs {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .unified-tab { color: rgba(0,0,0,0.5); }
[data-theme="light"] .unified-tab:hover { color: rgba(0,0,0,0.8); }
[data-theme="light"] .unified-tab.active { color: #fff; }
[data-theme="light"] .unified-modal .btn-close {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .unified-modal .btn-close::before,
[data-theme="light"] .unified-modal .btn-close::after { background: rgba(0,0,0,0.7); }
[data-theme="light"] .profile-info-item,
[data-theme="light"] .activity-stat-card,
[data-theme="light"] .pm-game-card,
[data-theme="light"] .settings-section,
[data-theme="light"] .pm-social-counts,
[data-theme="light"] .pm-badge-stats,
[data-theme="light"] .profile-bio,
[data-theme="light"] .profile-social,
[data-theme="light"] .profile-badges {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .profile-info-item:hover,
[data-theme="light"] .activity-stat-card:hover,
[data-theme="light"] .settings-section:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .unified-form .form-control,
[data-theme="light"] .unified-form select {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
color: var(--color-text-primary);
}
[data-theme="light"] .unified-form .form-control:focus,
[data-theme="light"] .unified-form select:focus {
background: #fff;
border-color: rgba(var(--color-accent-rgb), 0.5);
}
[data-theme="light"] .message-item {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .message-item:hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .activity-item {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .tab-content-wrapper {
scrollbar-color: rgba(var(--color-accent-rgb), 0.25) transparent;
}
[data-theme="light"] .tab-content-wrapper::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .danger-zone {
background: rgba(239, 68, 68, 0.06);
border-color: rgba(239, 68, 68, 0.2);
}
[data-theme="light"] .skeleton-line,
[data-theme="light"] .skeleton-circle,
[data-theme="light"] .skeleton-avatar,
[data-theme="light"] .skeleton-badge {
background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.05) 75%);
background-size: 400px 100%;
}
[data-theme="light"] .pm-badge.earned {
background: rgba(251,191,36,0.1);
border-color: rgba(251,191,36,0.2);
}
[data-theme="light"] .pm-badge.locked {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .badge-item {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .pm-user-item {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.06);
}
/* Game End Modal */
[data-theme="light"] .result-title {
background: linear-gradient(135deg,
var(--color-accent) 0%,
var(--color-accent-light) 50%,
var(--color-accent) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .result-score {
background: linear-gradient(180deg,
var(--color-accent) 0%,
var(--color-accent-dark) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .result-subtitle {
color: var(--color-text-secondary);
}
[data-theme="light"] .result-stat {
background: rgba(0, 0, 0, 0.02);
border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .result-stat:hover {
background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .ranking-table thead th {
color: #64748b;
border-bottom-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .ranking-table tbody td {
border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .ranking-table .rank-1st {
background: rgba(var(--color-accent-rgb), 0.12);
}
[data-theme="light"] .result-stat-highlight {
background: rgba(var(--color-accent-rgb), 0.1) !important;
}
[data-theme="light"] .score-row {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .score-row:hover {
background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .score-row.winner {
background: rgba(var(--color-accent-rgb), 0.1);
border-color: rgba(var(--color-accent-rgb), 0.3);
}
[data-theme="light"] .score-breakdown {
border-top-color: rgba(0, 0, 0, 0.06);
color: var(--color-text-secondary);
}
[data-theme="light"] .score-breakdown span:not(.game-play-view *) {
background: rgba(0, 0, 0, 0.04);
}
/* Rules section */
[data-theme="light"] .rules-section {
background: rgba(var(--color-accent-rgb), 0.03);
border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .rules-section:hover {
border-color: rgba(var(--color-accent-rgb), 0.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .rules-section-header:hover {
background: rgba(var(--color-accent-rgb), 0.06);
}
/* Setup Info */
[data-theme="light"] .setup-info {
background: rgba(var(--color-accent-rgb), 0.04);
border-color: rgba(var(--color-accent-rgb), 0.15);
}
/* Turn Indicator */
[data-theme="light"] .turn-indicator {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
color: #1a1a1a;
}
/* Material Icons */
[data-theme="light"] .material-symbols-rounded:not(.game-play-view *) {
color: var(--color-text-secondary);
}
/* Headings */
[data-theme="light"] h1:not(.game-play-view *),
[data-theme="light"] h2:not(.game-play-view *),
[data-theme="light"] h3:not(.game-play-view *),
[data-theme="light"] h4:not(.game-play-view *),
[data-theme="light"] h5:not(.game-play-view *),
[data-theme="light"] h6:not(.game-play-view *) {
color: var(--color-text-primary);
}
/* Typography */
[data-theme="light"] p:not(.game-play-view *),
[data-theme="light"] span:not(.game-play-view *),
[data-theme="light"] div:not(.game-play-view *) {
color: inherit;
}
[data-theme="light"] button:not(.game-play-view *) {
color: var(--color-text-primary);
}
[data-theme="light"] a {
color: var(--color-accent);
}
[data-theme="light"] a:hover {
color: var(--color-accent-dark);
}
/* Player Timer — ROSU (per CERUT USER) */
/* Turn timer — inline with player info bar */
.player-timer {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 6px; /* mai compact */
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 10px;
font-size: 10px; /* font mai mic ca sa incap in opponent-info */
font-weight: 700;
color: #fca5a5; /* rosu deschis pt. lizibilitate */
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
margin-left: 3px;
position: relative;
overflow: hidden;
visibility: hidden;
flex-shrink: 0; /* NU se shrink ca sa nu ascunda numarul */
min-width: 34px; /* asigura loc pt icon + numar 2 cifre */
}
.player-timer .material-symbols-rounded {
font-size: 12px;
color: #f87171;
}
/* Timer progress bar (draining) — ROSU */
.player-timer::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: var(--timer-progress, 100%);
background: linear-gradient(90deg, #ef4444, #dc2626);
transition: width 1s linear;
border-radius: 0 0 12px 12px;
}
.player-timer.timer-active {
visibility: visible;
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.55);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}
/* Timer SOUTH (pe bg wood/crem) — contrast marit: rosu SOLID cu text alb */
.seat-south .player-info-bar .player-timer,
#timerPlayer {
background: rgba(0, 0, 0, 0.55) !important; /* fond mai intunecat */
border-color: #dc2626 !important;
color: #fff !important;
}
.seat-south .player-info-bar .player-timer .material-symbols-rounded,
#timerPlayer .material-symbols-rounded {
color: #fca5a5 !important;
}
.seat-south .player-info-bar .player-timer.timer-active,
#timerPlayer.timer-active {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
border-color: #7f1d1d !important;
color: #fff !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.5),
0 0 10px rgba(239, 68, 68, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.seat-south .player-info-bar .player-timer.timer-active .material-symbols-rounded,
#timerPlayer.timer-active .material-symbols-rounded {
color: #fff !important;
}
.player-timer.timer-active.turn-timer-warning {
animation: timerWarningPulse 0.6s ease-in-out infinite;
background: rgba(255, 60, 60, 0.25);
color: #ff5555;
border-color: #ff5555;
box-shadow: 0 0 12px rgba(255, 60, 60, 0.5);
}
.player-timer.timer-active.turn-timer-warning::after {
background: linear-gradient(90deg, #ff5555, #ff3333);
}
@keyframes timerWarningPulse {
0%, 100% { box-shadow: 0 0 8px rgba(255, 100, 100, 0.4); }
50% { box-shadow: 0 0 16px rgba(255, 100, 100, 0.7); }
}
[data-theme="light"] .player-timer {
background: rgba(var(--color-accent-rgb), 0.05);
color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .player-timer.timer-active {
background: rgba(var(--color-accent-rgb), 0.12);
color: var(--color-accent);
box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.3);
}
[data-theme="light"] .player-timer.timer-active.turn-timer-warning {
background: rgba(255, 100, 100, 0.15);
color: #d32f2f;
box-shadow: 0 0 8px rgba(255, 100, 100, 0.4);
}
/* Lobby detail */
[data-theme="light"] .lobby-stat { color: #666; }
[data-theme="light"] .lobby-stat strong { color: #333; }
[data-theme="light"] .lobby-ai-text strong { color: #333; }
[data-theme="light"] .lobby-ai-stats strong { color: #333; }
[data-theme="light"] .lc-chip {
background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .lc-badge-open { background: rgba(34, 197, 94, 0.1); }
[data-theme="light"] .lc-badge-playing { background: rgba(245, 158, 11, 0.1); }
[data-theme="light"] .lc-badge-full { background: rgba(107, 114, 128, 0.1); }
/* Room Detail Modal */
[data-theme="light"] .room-detail-modal { background: rgba(255, 255, 255, 0.95); }
[data-theme="light"] .rdm-player { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .rdm-setting { background: rgba(0, 0, 0, 0.03); }
[data-theme="light"] .lobby-lb-item { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.06); }
/* Settings buttons */
[data-theme="light"] .settings-buttons .btn-secondary {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
color: #888;
}
[data-theme="light"] .settings-buttons .btn-secondary:hover {
background: rgba(0, 0, 0, 0.06);
color: #666;
}
/* Notification items */
[data-theme="light"] .notif-item:hover { background: rgba(0, 0, 0, 0.04); }
[data-theme="light"] .notif-unread { background: rgba(var(--color-accent-rgb), 0.06); }
/* ================================================================================================
25. RESPONSIVE BREAKPOINTS
================================================================================================ */
/* Mobile Small (≤ 360px) */
@media (max-width: 360px) {
:root {
--tile-width: 32px;
--tile-height: 44px;
--tile-font: 16px;
--tile-width-sm: 26px;
--tile-height-sm: 36px;
--tile-font-sm: 13px;
}
.setup-card { padding: 16px; }
.setup-header h2 { font-size: 22px; }
/* 2026-04-21: min-width eliminat — overrides dedicate pt. portrait (flex:1 1 0) si
landscape (width:170px) gestioneaza dimensiunea. Pastrez doar padding compact. */
.opponent-area { padding: 3px 6px; }
.action-bar { gap: 4px; }
.game-end-card { padding: 20px; }
.game-end-header h2 { font-size: 20px; }
}
/* Small mobile (≤ 576px) — compact lobby */
@media (max-width: 576px) {
.lobby-view { padding: 8px 6px; gap: 8px; }
.lobby-header { padding: 8px; gap: 6px; }
.lobby-header-left { gap: 6px; }
.lobby-header-right { gap: 4px; }
.lobby-btn { padding: 6px 10px; font-size: 11px; }
.lobby-stats-row { gap: 8px; }
.lobby-stats-bar { padding: 6px 8px; gap: 8px; }
.lobby-stat { font-size: 11px; }
.lobby-ai-card { padding: 8px; }
.lobby-filter-bar { padding: 4px 8px; gap: 4px; }
.lobby-chip { padding: 4px 8px; font-size: 11px; }
.lobby-grid { gap: 8px; grid-template-columns: 1fr; }
.lobby-card { padding: 10px; }
.lobby-pagination { padding: 8px 0; }
.lobby-leaderboard { padding: 6px 8px; }
.lobby-sort-select { font-size: 11px; padding: 3px 6px; }
.lobby-search-input { font-size: 13px; }
/* Room Detail Modal — full-width on mobile */
.room-detail-modal {
width: 96%;
max-width: none;
padding: 14px;
}
.rdm-room-name { font-size: 16px; }
.rdm-player-avatar { width: 28px; height: 28px; font-size: 11px; }
.rdm-player-name { font-size: 12px; }
.rdm-setting-value { font-size: 15px; }
.rdm-setting-label { font-size: 9px; }
.rdm-action-btn { padding: 10px; font-size: 13px; }
}
/* Extra small mobile (≤ 400px) */
@media (max-width: 400px) {
.room-detail-modal { padding: 10px; }
.rdm-settings { gap: 4px; }
.rdm-setting { padding: 6px; }
}
/* Mobile (≤ 480px) */
@media (max-width: 480px) {
:root {
--tile-width: 36px;
--tile-height: 50px;
--tile-font: 18px;
--tile-width-sm: 30px;
--tile-height-sm: 42px;
--tile-font-sm: 15px;
}
.setup-card { padding: 20px; }
/* 2026-04-21: min-width eliminat, overrides portrait/landscape dedicate */
.pile-area { gap: 10px; padding: 6px; }
.game-end-card { padding: 24px; }
.lobby-header { flex-direction: column; align-items: stretch; }
.lobby-header-right { justify-content: flex-start; }
.modal-container { width: 95%; max-height: 90vh; }
.modal-header { padding: 16px 20px 12px; }
.modal-body { padding: 16px 20px; }
.modal-footer { padding: 12px 20px; }
.context-panel { width: 100%; }
}
/* Chat landscape compact */
@media (orientation: landscape) and (max-height: 500px) {
/* 16-09-2026 (userul): în peisaj taburile chatului arătau DOAR pictograme, iar
„userii nu înţeleg icon". Panoul e pe toată lăţimea în peisaj (≥ 700px), deci
e loc pentru text: pictogramă + etichetă pe acelaşi rând, mărunte, ca să nu
crească bara pe verticală (înălţimea e cea rară în peisaj). */
.chat-tabs-bar { padding: 2px !important; gap: 2px !important; }
.ct-tab { padding: 3px 6px !important; gap: 4px !important; min-width: 0 !important;
flex-direction: row !important; align-items: center !important; justify-content: center !important; }
.ct-icon { font-size: 13px !important; }
.ct-label { display: inline !important; font-size: 10px !important; letter-spacing: .2px; white-space: nowrap; }
.cmsg-container { min-height: 40px !important; padding: 4px !important; }
.cmsg-avatar-img, .cmsg-avatar-initial { width: 18px !important; height: 18px !important; font-size: 8px !important; }
.cmsg-name { font-size: 9px !important; }
.cmsg-bubble { padding: 3px 6px !important; font-size: 11px !important; }
.cmsg-time { font-size: 8px !important; }
.cmsg-input { max-height: 26px !important; padding: 4px 8px !important; font-size: 11px !important; }
.prv-emoji-picker { max-height: 240px !important; }
/* Game-end modal — fundal uniform brun (nu mai apare mov de sub) in landscape */
.modal-container.game-end-modal,
#gameEndModal .modal-container {
background: linear-gradient(145deg,
rgba(58, 35, 16, 0.98) 0%,
rgba(42, 27, 14, 0.97) 50%,
rgba(58, 35, 16, 0.98) 100%
) !important;
border: 1px solid rgba(212, 165, 68, 0.35) !important;
}
.modal-container.game-end-modal > .modal-body,
#gameEndModal .modal-body {
flex: 1 1 auto !important;
max-height: none !important;
height: 100% !important;
padding: 12px 14px !important;
background: transparent !important;
}
/* User list (Global/Masa/Privat) — limitat la 60px cu scroll, sa lase loc mesajelor */
#chatGlobalUsers,
#chatRoomUsers {
max-height: 60px !important;
overflow-y: auto !important;
padding: 3px 4px !important;
margin-bottom: 3px !important;
scrollbar-width: thin;
scrollbar-color: rgba(var(--remi-accent-rgb), 0.35) transparent;
}
#chatGlobalUsers::-webkit-scrollbar,
#chatRoomUsers::-webkit-scrollbar { width: 4px; }
#chatGlobalUsers::-webkit-scrollbar-thumb,
#chatRoomUsers::-webkit-scrollbar-thumb {
background: rgba(var(--remi-accent-rgb), 0.35);
border-radius: 4px;
}
/* Avatare userlist mai mici */
#chatGlobalUsers > div > div,
#chatRoomUsers > div > div {
padding: 2px 4px !important;
gap: 4px !important;
}
#chatGlobalUsers img,
#chatRoomUsers img {
width: 16px !important;
height: 16px !important;
}
#chatGlobalUsers span,
#chatRoomUsers span {
font-size: 10px !important;
}
/* Containere private/friends/notifs — max-height redus ca sa fie usabile */
#chatMessagesPrivate,
#chatFriendsContent,
#chatNotifsContent {
max-height: calc(100dvh - 140px) !important;
min-height: 60px !important;
}
}
/* Tiny mobile (≤ 420px) */
@media (max-width: 420px) {
.lobby-header-right .lobby-btn span:not(.material-symbols-rounded) { display: none; }
/* Keep text visible on Create Masa button so users know how to create a table */
.lobby-header-right .lobby-btn-create span:not(.material-symbols-rounded) { display: inline !important; }
.lobby-btn { padding: 6px 8px; min-width: 36px; }
.lobby-btn-create { padding: 6px 10px; }
.lobby-stats-bar { flex-wrap: wrap; }
.lobby-ai-card { flex-direction: column; align-items: stretch; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBIL (≤ 767px) — viewport-fit, tot responsive
Calcul: 100dvh - top-bar (44px) - nav-rail (76px) = spatiu util
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
:root {
--nav-rail-h: 76px;
}
/* Main content: inaltime exacta viewport minus header+footer */
.main-content {
height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
max-height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
padding-bottom: 0 !important;
overflow: hidden;
}
.game-canvas {
padding: 0 !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
.game-area {
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
/* Game play view: grid care fitteaza exact spatiul disponibil */
.game-play-view {
/* Padding 8px UNIFORM (cerință utilizator: multipli de 8px) */
padding: 8px !important;
gap: 8px !important;
/* Cadru lemn redus pe mobil */
border-width: 4px;
border-radius: 8px;
box-shadow:
inset 0 0 16px rgba(0,0,0,0.22),
inset 0 0 3px rgba(0,0,0,0.1),
0 0 0 1px #2a1808,
0 0 0 2px #B09060,
0 2px 8px rgba(0,0,0,0.4);
grid-template-areas:
"hand-top hand-top"
"zone1 zone2"
"zone3 zone4"
"sidebar sidebar"
"hand-bot hand-bot";
grid-template-columns: 1fr 1fr;
/* Max-width container centrat (cerință: max-width 1200px centrat) */
max-width: 1200px;
margin: 0 auto;
}
/* Mobile layouts per player count */
.game-play-view[data-players="2"] {
grid-template-areas:
"hand-top hand-top"
"zone1 zone1"
"zone2 zone2"
"sidebar sidebar"
"hand-bot hand-bot";
}
.game-play-view[data-players="3"] {
grid-template-areas:
"hand-top hand-top"
"zone1 zone2"
"zone3 zone3"
"sidebar sidebar"
"hand-bot hand-bot";
}
.game-play-view[data-players="4"] {
grid-template-areas:
"hand-top hand-top"
"zone1 zone2"
"zone3 zone4"
"sidebar sidebar"
"hand-bot hand-bot";
/* grid-template-rows: setat in regulile portrait/landscape (5 randuri portrait / 4 landscape) */
height: 100%;
max-height: 100%;
overflow: hidden;
}
/* (aici micşora monograma „R" pe mobil — pecetea care i-a luat locul îşi ia
mărimea din postav, deci se potriveşte singură pe orice ecran) */
/* ── SIDEBAR orizontal ── */
.remi-sidebar {
flex-direction: row;
align-items: stretch;
height: 56px;
padding: 2px 4px;
gap: 3px;
}
.remi-sidebar .pile-area {
gap: 2px;
padding: 1px;
flex: 0 0 auto;
}
.remi-sidebar .draw-pile,
.remi-sidebar .discard-pile {
transform: scale(0.55);
margin: -12px -6px;
}
.remi-sidebar .atu-display {
transform: scale(0.65);
margin: -8px -3px;
}
/* MOBILE/LANDSCAPE FIX: ATU inline + min-width rezervat ca sa nu fie comprimat */
.remi-sidebar .atu-display.atu-beside-pile {
position: relative !important;
top: auto !important;
right: auto !important;
flex: 0 0 auto;
min-width: 50px; /* rezerva spatiu — nu se striveste */
padding: 2px 5px 3px;
gap: 1px;
animation: none;
align-self: center;
}
.remi-sidebar .atu-display.atu-beside-pile .atu-tile-display {
transform: scale(0.6);
margin: -7px -3px;
}
.remi-sidebar .atu-display.atu-beside-pile .atu-label-small {
font-size: 8px;
letter-spacing: .5px;
}
.remi-sidebar .pile-label { font-size: 6px; }
/* LANDSCAPE: activity log = scroll orizontal cu entries inline + lizibil */
.remi-sidebar .activity-log-body {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap;
gap: 4px;
overflow-x: auto;
overflow-y: hidden;
align-items: center;
padding: 0 4px;
max-height: 100%;
}
.remi-sidebar .activity-log-body::-webkit-scrollbar { height: 3px; }
.remi-sidebar .activity-log-body::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, .5);
border-radius: 2px;
}
.remi-sidebar .activity-log-entry {
flex: 0 0 auto;
white-space: nowrap;
font-size: 9px;
padding: 2px 6px;
border-radius: 8px;
border: 1px solid rgba(255, 215, 0, .15);
background: rgba(0, 0, 0, .3);
}
/* Discard strip (single row, scroll horizontal) */
.remi-sidebar .sidebar-section-discard {
flex: 1 1 auto;
min-height: 56px;
max-height: 56px;
min-width: 0;
}
.remi-sidebar .discard-history-strip {
/* 2026-04-21: MOBILE landscape — OVERRIDE grid-ul desktop, single-row horizontal */
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
grid-template-columns: none !important;
grid-auto-rows: initial !important;
max-height: 42px;
min-height: 42px;
overflow-x: auto;
overflow-y: hidden;
padding: 6px 14px 6px 6px;
align-items: center;
}
.remi-sidebar .discard-history-tile {
width: 18px;
height: 26px;
font-size: 11px;
flex-shrink: 0;
}
.remi-sidebar .activity-log {
min-width: 0;
flex: 1 1 auto;
max-height: 100%;
}
.remi-sidebar .activity-log-header { padding: 3px 6px; font-size: 9px; letter-spacing: .5px; }
.remi-sidebar .activity-log-entry { font-size: 10px; padding: 2px 5px; line-height: 1.3; }
/* ── ETALARE ZONES ── */
.etalare-zone {
padding: 11px 3px 3px;
min-height: 0;
/* 2026-04-21: scroll e pe .etalare-scroll (interior), zone ramane hidden */
overflow: hidden;
}
.etalare-zone::before { font-size: 7px !important; padding: 0 4px !important; line-height: 10px !important; font-weight: 500 !important; text-transform: none !important; }
.etalare-scroll { gap: 4px; padding: 1px; }
/* ── OPPONENT AREAS ── */
/* 2026-04-21: MOBILE — restore horizontal row layout override-uind .seat-north
base de pe desktop (care e flex-direction: column pt. stacking vertical). */
.seat-north {
flex-direction: row !important;
justify-content: center !important;
gap: 3px;
padding: 2px;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
/* Hint vizual de scroll — gradient fade la margini cand exista continut ascuns */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12px, #000 calc(100% - 12px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 12px, #000 calc(100% - 12px), transparent 100%);
scroll-snap-type: x proximity;
}
.seat-north > .opponent-area { scroll-snap-align: start; }
/* 2026-04-21: Landscape mobile — latime FIXA 170px + scroll pe .seat-north
(seatul de sus scrolleaza orizontal cand sunt 3-4 opponenti) */
.opponent-area {
padding: 3px 6px 4px;
width: 170px;
min-width: 170px;
max-width: 170px;
flex: 0 0 170px;
border-radius: 8px;
}
.opponent-tile-back {
width: 10px;
height: 14px;
font-size: 0;
/* La 10×14 border 1px ocupa 20% — folosim outline subpixel ca sa pastram aspectul */
border-width: 0 !important;
box-shadow:
inset 0 .5px 0 rgba(255, 245, 210, .7),
inset 0 -.5px 0 rgba(70, 45, 15, .55),
0 0 0 1px rgba(70, 45, 15, .8),
0 1px 2px rgba(0, 0, 0, .45);
border-radius: 1.5px;
}
/* Landscape mobile: tiles 10x14 sunt prea mici pt. logo vizibil — il ascundem */
.opponent-tile-back::after { display: none; }
.opponent-tile-row { gap: 1px; flex-wrap: nowrap; }
.opponent-name { font-size: 10px; max-width: 40px; }
.opponent-meta { font-size: 8px; gap: 3px; }
.opponent-avatar { width: 22px !important; height: 22px !important; }
/* Ascunde status + timer cand e stramt (pastreaza avatar+nume+tiles-count+points) */
.opponent-info .opponent-status,
.opponent-info .player-timer { display: none; }
/* ── PLAYER HAND ── */
.seat-south .player-hand {
padding: 4px 8px 6px;
gap: 2px;
}
.seat-south .player-info-bar {
padding: 2px 6px;
font-size: 10px;
}
}
/* ═══ PORTRAIT specific fine-tuning ═══ */
@media (max-width: 767px) and (orientation: portrait) {
:root {
/* Piese mai mici in portrait — incap mai multe in mana */
--tile-width: 32px;
--tile-height: 46px;
--tile-font: 16px;
--tile-width-sm: 26px;
--tile-height-sm: 36px;
--tile-font-sm: 13px;
}
/* ═══════════════════════════════════════════════════════════════
CALCUL SPATIU PROFESIONAL pentru portrait 412×915 (Pixel 6/7):
Viewport: 915px
− top-bar-h: 34px (--top-bar-h override portrait)
− nav-rail-h: 60px (--nav-rail-h override portrait)
− game border: 8px (4 top + 4 bottom)
− game padding: 16px (8 top + 8 bottom)
− main gaps × 4: 32px (8×4 intre randuri)
= Inner content: 765px
Alocare randuri (toate paddings/gaps multipli de 8):
hand-top: 64px (3 coloane egale, 8×8)
zone row 1: minmax(120, 1fr) → ~218px
zone row 2: minmax(120, 1fr) → ~218px
sidebar: 120px (8×15)
hand-bot (auto): ~145px (info-bar wrap + mana 96)
Totalul: 64 + 218 + 218 + 120 + 145 = 765 ✓
═══════════════════════════════════════════════════════════════ */
/* ── HEADER (HAND-TOP) — 3 COLOANE EGALE, space-evenly ── */
.seat-north {
display: flex !important;
justify-content: space-evenly !important;
align-items: stretch !important;
gap: 8px !important;
padding: 0 !important;
min-height: 64px;
max-height: 64px;
margin-bottom: -4px; /* continuitate vizuala cu sidebar (fara gap) */
/* Nu mai e scroll orizontal — fit 3-4 jucatori uniform */
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.seat-north > .opponent-area {
/* 2026-04-21: Portrait — equal-share TOATE boxurile au aceeasi latime
(N opponenti impart egal latimea randului). Override fixed width din base. */
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
padding: 4px !important; /* compact, face loc la 3-4 oponenti */
min-height: 56px;
max-height: 64px;
gap: 4px !important;
overflow: hidden;
/* 2026-04-21 BUGFIX: NU mai setez display:flex !important — asta suprascria
inline display:none setat de JS in renderOpponents() pt. seats neactive
(ex. vest in jocuri 3P). Baza .opponent-area { display: flex } e suficienta
pentru a arata flex container; JS poate ascunde via style.display = 'none'. */
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
}
/* Opponent-info pe UN SINGUR RAND (avatar + nume + pct + count) */
.seat-north .opponent-area .opponent-info {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 4px !important;
min-width: 0 !important;
max-width: 100% !important;
}
.seat-north .opponent-area .opponent-avatar,
.seat-north .opponent-area .seat-avatar {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
flex-shrink: 0 !important;
}
.seat-north .opponent-area .opponent-name {
flex: 1 1 0 !important;
font-size: 10px !important;
font-weight: 600 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
min-width: 0 !important;
max-width: none !important;
}
.seat-north .opponent-area .opponent-points,
.seat-north .opponent-area .opponent-tiles-count {
font-size: 9px !important;
padding: 1px 4px !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* Ascunde timer + status pe portrait — prea multa info */
.seat-north .opponent-area .player-timer,
.seat-north .opponent-area .opponent-status { display: none !important; }
/* Opponent hand (tiles face-down) — scroll orizontal pe un singur rand
2026-04-21: overflow-x auto + flex-wrap nowrap => cand tilurile depasesc
latimea, userul scrolleaza orizontal in loc sa se taie sau wrap pe 2 rânduri. */
.seat-north .opponent-area .opponent-hand {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 2px !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
flex-shrink: 0 !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.seat-north .opponent-area .opponent-hand::-webkit-scrollbar { display: none; }
.opponent-tiles-container {
max-width: 100%;
overflow: hidden;
}
/* ── GRID PRINCIPAL (8px multipli, centrat) ── */
.game-play-view {
grid-template-columns: 1fr 1fr; /* 2 coloane egale — explicit, nu inherit */
grid-template-rows:
64px /* hand-top: fixed 64px (8×8) pentru aliniere clara */
minmax(120px, 1fr) /* zone row 1 (120 = 8×15) */
minmax(120px, 1fr) /* zone row 2 (120 = 8×15) */
120px /* sidebar fixed 120px (8×15) */
auto; /* hand-bot: auto (info-bar wrap + mana 96) — sticky jos */
}
/* GARANTIE 5 randuri pt. toate variantele (2/3/4 jucatori) — asigura ca areas cu 5 randuri
(hand-top, zone-row1, zone-row2, sidebar, hand-bot) gasesc track-uri reale, nu implicit auto. */
.game-play-view[data-players="2"],
.game-play-view[data-players="3"],
.game-play-view[data-players="4"] {
grid-template-rows:
64px
minmax(120px, 1fr)
minmax(120px, 1fr)
120px
auto;
}
/* ── MIDDLE (etalare zones) — centrate, egale ── */
.etalare-zone {
padding: 12px 8px 6px !important; /* 2026-04-21: top 12px pt. label subtil 8px */
min-height: 0;
}
/* ── SIDEBAR — 2 randuri grid (multipli de 8px) ──
Math: sidebar 120px (border-box)
− border 2px (1 top + 1 bot)
= content 118px
tracks: minmax(80px,1fr) + 8px gap + 24px = 112px min → 1fr fills la 86px
✓ 8-aligned: gap 8px, padding 0 */
.remi-sidebar {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: minmax(80px, 1fr) 24px;
grid-template-areas:
"piles discard"
"log log";
height: 120px;
padding: 0 !important;
gap: 8px !important;
}
/* ── HAND-BOT sticky la capat via grid position (ultimul row) ── */
.seat-south {
grid-area: hand-bot;
position: relative;
z-index: 2;
}
.remi-sidebar .sidebar-section-piles {
grid-area: piles;
/* Layout intern: draw-pile STANGA + ATU DREAPTA, in-flow (NU absolute)
— asa rezervam spatiu real pentru ATU pe grid coloana auto */
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
padding: 0 2px;
}
.remi-sidebar .sidebar-section-discard {
grid-area: discard;
min-height: 80px;
max-height: 80px;
}
.remi-sidebar .sidebar-section-log {
grid-area: log;
min-height: 0;
min-width: 0;
}
.remi-sidebar .pile-area {
gap: 4px;
padding: 2px;
flex-shrink: 0;
}
/* ATU pe portrait: in-flow langa draw-pile, NU absolute */
.remi-sidebar .atu-display.atu-beside-pile {
position: static;
flex-shrink: 0;
top: auto;
right: auto;
padding: 2px 4px 3px;
}
/* Draw pile BINE VIZIBIL — scale 0.80 → ~25×36 cu spatiu generos */
.remi-sidebar .draw-pile,
.remi-sidebar .discard-pile {
transform: scale(0.80);
margin: -5px -3px;
}
.remi-sidebar .atu-display {
transform: none;
margin: 0;
}
/* ATU marit ca piesele din etalare — scale 0.92 → ~29×40 match tile mobile 32×44 */
.remi-sidebar .atu-display.atu-beside-pile .atu-tile-display {
transform: scale(0.92);
margin: -2px 0 -3px;
}
.remi-sidebar .atu-display.atu-beside-pile .atu-label-small {
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
color: #ffd700;
}
.remi-sidebar .pile-label {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Pile count badge ("33") mai prominent */
.remi-sidebar .pile-count {
font-size: 11px;
font-weight: 800;
padding: 1px 5px;
}
/* Secțiunea ARUNCATE — header + strip mai înalte */
.remi-sidebar .sidebar-section-header {
font-size: 10px;
padding: 2px 5px;
}
.remi-sidebar .sidebar-section-header .material-symbols-rounded {
font-size: 13px;
}
.remi-sidebar .discard-count-badge {
font-size: 10px;
min-width: 20px;
}
/* Strip-ul discardurilor — tiles 24×33 (font 13px) in strip 56px;
header ~24px deasupra, deci sectiunea discard totala = 80px ✓
2026-04-21: OVERRIDE grid-ul desktop, portrait ramane single-row horizontal */
.remi-sidebar .discard-history-strip {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
grid-template-columns: none !important;
grid-auto-rows: initial !important;
max-height: 56px;
min-height: 56px;
gap: 4px;
padding: 6px 8px;
overflow-x: auto;
overflow-y: hidden;
align-items: center;
}
.remi-sidebar .discard-history-tile {
width: 24px;
height: 33px;
font-size: 13px;
font-weight: 700;
}
/* Activity log — TICKER orizontal pe rand 2 (full-width, 24px, aliniat 8px) */
.remi-sidebar .activity-log {
display: flex !important;
flex-direction: row;
align-items: stretch;
gap: 4px;
height: 24px;
min-height: 24px;
max-height: 24px;
padding: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.50), rgba(0,0,0,0.35));
border: 1px solid rgba(255,215,0,0.18);
border-radius: 4px;
overflow: hidden;
}
.remi-sidebar .activity-log-header {
display: flex;
align-items: center;
gap: 2px;
padding: 0 4px;
font-size: 0;
color: rgba(255,255,255,0.65);
background: rgba(0,0,0,0.25);
border-right: 1px solid rgba(255,255,255,0.08);
flex-shrink: 0;
}
.remi-sidebar .activity-log-header .material-symbols-rounded {
font-size: 12px;
}
.remi-sidebar .activity-log-header span:not(.material-symbols-rounded) {
display: none; /* ascunde textul "Activitate Masa" — iconul e destul */
}
.remi-sidebar .activity-log-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 4px;
padding: 2px 4px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
align-items: center;
scroll-behavior: smooth;
scrollbar-width: none;
}
.remi-sidebar .activity-log-body::-webkit-scrollbar { display: none; }
.remi-sidebar .activity-log-empty {
font-size: 9px;
color: rgba(255,255,255,0.45);
font-style: italic;
}
.remi-sidebar .activity-log-entry {
display: inline-flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
padding: 2px 6px;
font-size: 10px; /* Mai lizibil (era 9px) */
line-height: 1.1;
white-space: nowrap;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
color: rgba(255,255,255,0.95);
}
.remi-sidebar .activity-log-entry .log-player-name {
font-weight: 700;
color: #FFD94A;
}
.remi-sidebar .activity-log-entry .log-action-type {
color: #8FE0F5;
font-weight: 600;
}
.remi-sidebar .activity-log-entry .log-details {
opacity: 0.78;
}
/* highlight intrarea cea mai noua (primul copil vizual cu row-reverse = ultimul DOM) */
.remi-sidebar .activity-log-body .activity-log-entry:last-child {
background: rgba(255,217,74,0.14);
border-color: rgba(255,217,74,0.35);
box-shadow: 0 0 0 1px rgba(255,217,74,0.18) inset;
}
}
/* ═══ LANDSCAPE mobil (≤767px, orizontal) — pastreaza layout 3 coloane ═══ */
/* ════════════════════════════════════════════════════════════════════════
LANDSCAPE EXACT — calculat profesional pentru Galaxy S20 Ultra 915×412
════════════════════════════════════════════════════════════════════════
Buget vertical 412px:
top-bar 28px
nav-rail 56px (status-bar 24 + nav-primary 32)
───────────
main-content 328px
gpv padding 4px (2 top + 2 bot)
gpv gap × 3 6px (2 each between rows)
──────────
grid usable 318px
hand-top 42px (opponents)
zone-r1 98px (1fr)
zone-r2 98px (1fr)
hand-bot 80px (south player)
──────────
318px ✓
Buget orizontal 915px:
gpv padding 4px (2 left + 2 right)
gpv gap × 2 4px (between cols)
───────────
grid usable 907px
col 1 ~399px (1fr)
col 2 ~399px (1fr)
sidebar 110px
Sidebar 318×110 → usable 304×102 (după padding 4 top/bot, 4 left/right):
pile-area 60px (draw-pile + count)
ATU display 56px
discard sec 60px (ARUNCATE strip)
activity log 128px (header + 4-5 entries)
gap × 3 = 0 (sections gap-less, separator visual)
════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
:root {
--nav-rail-h: 56px;
--top-bar-h: 28px;
--tile-width: 22px;
--tile-height: 30px;
--tile-font: 12px;
}
/* Chain de heights forțat */
body.game-active .main-content,
body.mp-game-active .main-content {
height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
max-height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
min-height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
padding-bottom: 0 !important;
}
body.game-active .game-canvas,
body.mp-game-active .game-canvas,
body.game-active .game-area,
body.mp-game-active .game-area {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
padding-bottom: 0 !important;
}
/* Grid landscape — bate body.mp-game-active.immersive-mode (0,4,1) cu (0,5,1) */
body.game-active.immersive-mode .game-play-view,
body.mp-game-active.immersive-mode .game-play-view,
body.game-active.immersive-mode .game-play-view[data-players="2"],
body.mp-game-active.immersive-mode .game-play-view[data-players="2"],
body.game-active.immersive-mode .game-play-view[data-players="3"],
body.mp-game-active.immersive-mode .game-play-view[data-players="3"],
body.game-active.immersive-mode .game-play-view[data-players="4"],
body.mp-game-active.immersive-mode .game-play-view[data-players="4"],
body.game-active .game-play-view,
body.mp-game-active .game-play-view,
body.game-active .game-play-view[data-players="2"],
body.mp-game-active .game-play-view[data-players="2"],
body.game-active .game-play-view[data-players="3"],
body.mp-game-active .game-play-view[data-players="3"],
body.game-active .game-play-view[data-players="4"],
body.mp-game-active .game-play-view[data-players="4"] {
/* 3 rânduri (NO hand-top): zone1+2 / zone3+4 / hand-bot. Sidebar la dreapta.
seat-north este POSITION ABSOLUTE peste sidebar sus. */
position: relative !important;
grid-template-areas:
"zone1 zone2 sidebar"
"zone3 zone4 sidebar"
"hand-bot hand-bot sidebar" !important;
grid-template-columns: 1fr 1fr 140px !important;
grid-template-rows: 1fr 1fr 130px !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
gap: 2px !important;
padding: 2px !important;
overflow: hidden !important;
}
/* SEAT-NORTH absolute peste sidebar sus — overlay 110px wide × 162px tall */
body.game-active.immersive-mode .seat-north,
body.mp-game-active.immersive-mode .seat-north,
body.game-active .seat-north,
body.mp-game-active .seat-north {
display: flex !important;
flex-direction: column !important;
position: absolute !important;
top: 2px !important;
right: 2px !important;
width: 140px !important;
/* 3 carduri × 60 + 4 gap + 4 padding = 188 */
height: 188px !important;
max-height: 188px !important;
min-height: 188px !important;
gap: 2px !important;
padding: 2px !important;
margin: 0 !important;
overflow: hidden !important;
z-index: 10 !important;
background: linear-gradient(180deg, rgba(8,30,15,.92) 0%, rgba(3,18,8,.96) 100%) !important;
border: 1px solid rgba(255,215,0,.2) !important;
border-radius: 6px !important;
box-shadow: inset 0 1px 0 rgba(255,215,0,.12), 0 2px 6px rgba(0,0,0,.4) !important;
align-items: stretch !important;
justify-content: flex-start !important;
grid-area: unset !important;
}
/* Opponent card — 50px × 100% width (3 stacked = 150px + 12px gap/padding = 162px) */
body.game-active.immersive-mode .opponent-area[data-seat],
body.mp-game-active.immersive-mode .opponent-area[data-seat],
body.game-active .opponent-area[data-seat],
body.mp-game-active .opponent-area[data-seat],
body.game-active .game-play-view .opponent-area,
body.mp-game-active .game-play-view .opponent-area,
.seat-north .opponent-area {
flex: 0 0 60px !important;
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
max-width: 100% !important;
width: 100% !important;
padding: 3px 4px !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
align-items: stretch !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,215,0,.15) !important;
border-radius: 4px !important;
grid-area: unset !important;
overflow: hidden !important;
}
/* 2026-05-02 FIX: piesa de inchidere "INCHIS" — vizibilitate in landscape compact.
In landscape etalare zone are ~140px inaltime cu meld groups stacked vertical.
Forteaza wrap-ul cu z-index si position relative + scroll-margin pentru scrollIntoView. */
.mw-closing-tile-wrap {
position: relative !important;
z-index: 50 !important;
scroll-margin: 8px !important;
margin-top: 4px !important;
/* Highlight prominent in landscape — border auriu mai gros + glow */
border-width: 2px !important;
box-shadow:
0 0 14px rgba(255, 215, 100, 0.9),
0 3px 10px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 215, 100, 0.35) !important;
}
/* Tile-ul mai mare in landscape pentru vizibilitate (default 32px → 38px) */
.tile.mw-closing-tile {
min-width: 36px !important;
min-height: 50px !important;
}
/* Ribbon mai mare si mai vizibil */
.mw-closing-ribbon {
font-size: 9px !important;
padding: 3px 9px !important;
}
/* Etalare-scroll: snap-to-end astfel incat wrap-ul nou apare instant vizibil */
.etalare-scroll {
scroll-behavior: smooth !important;
}
/* 2026-05-02 FIX BUG: ascunde opponentEast/West cand mesa nu are atatia jucatori.
data-players este setat pe .game-play-view de applyPlayerLayout(pc) — JS linia 1233.
Aceasta regula trebuie sa apara DUPA cea de mai sus pentru a invinge display:flex !important.
Pentru 2P MP: nu apar East+West. Pentru 3P MP: nu apare West. */
.game-play-view[data-players="2"] .opponent-area[data-seat="east"],
.game-play-view[data-players="2"] .opponent-area[data-seat="west"],
.game-play-view[data-players="3"] .opponent-area[data-seat="west"] {
display: none !important;
}
/* Info row 22px: avatar + nume + scor + tiles */
body.game-active .opponent-area .opponent-info,
body.mp-game-active .opponent-area .opponent-info,
.opponent-area .opponent-info {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 2px !important;
height: 18px !important;
min-height: 18px !important;
max-height: 18px !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
padding: 0 !important;
font-size: 8px !important;
}
.opponent-area .seat-avatar {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
flex-shrink: 0 !important;
}
.opponent-area .opponent-name {
font-size: 8px !important;
max-width: none !important;
flex: 1 1 auto !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.opponent-area .player-timer,
.opponent-area .opponent-points,
.opponent-area .opponent-tiles-count,
.opponent-area .opponent-atu-badge {
font-size: 7px !important;
padding: 0 3px !important;
line-height: 1.2 !important;
flex-shrink: 0 !important;
height: 14px !important;
display: inline-flex !important;
align-items: center !important;
gap: 1px !important;
}
.opponent-area .player-timer .material-symbols-rounded,
.opponent-area .opponent-points .material-symbols-rounded {
font-size: 9px !important;
}
/* opponent-points FORCE visible (timer + status hidden in this layout — vezi mai jos) */
body.game-active .opponent-info .opponent-points,
body.mp-game-active .opponent-info .opponent-points,
.opponent-info .opponent-points {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Active turn highlight — opponent activ pulseaza auriu */
.opponent-area.active-turn,
.opponent-area.is-current-player {
border-color: rgba(255,215,0,.7) !important;
background: linear-gradient(180deg, rgba(255,215,0,.15) 0%, rgba(255,215,0,.05) 100%) !important;
box-shadow: 0 0 8px rgba(255,215,0,.35), inset 0 0 4px rgba(255,215,0,.15) !important;
}
/* ATU badge cu styling auriu */
.opponent-area .opponent-atu-badge {
background: linear-gradient(135deg, #ffd700, #b8860b) !important;
color: #1a0f00 !important;
font-weight: 800 !important;
border-radius: 3px !important;
}
/* Online status dot */
.opponent-area .opponent-status,
.opponent-area .seat-avatar::after {
width: 6px !important;
height: 6px !important;
}
/* Tile-back row 22px — visible like desktop */
body.game-active .opponent-area .opponent-hand,
body.mp-game-active .opponent-area .opponent-hand {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 1px !important;
height: 24px !important;
min-height: 24px !important;
max-height: 24px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
align-items: center !important;
}
/* Tile-back compact: 14 piese × 8px + 13 gaps = 125 → fits in 132 card width */
.opponent-tile-back {
width: 8px !important;
height: 18px !important;
min-width: 8px !important;
}
.opponent-tile-back {
width: 7px !important;
height: 18px !important;
min-width: 7px !important;
flex-shrink: 0 !important;
}
/* Remi-sidebar grid-area: sidebar — pushed DOWN ca sa lase loc seat-north overlay */
body.game-active.immersive-mode .remi-sidebar,
body.mp-game-active.immersive-mode .remi-sidebar,
body.game-active .remi-sidebar,
body.mp-game-active .remi-sidebar {
margin-top: 192px !important; /* 188 seat-north + 4 gap */
height: calc(100% - 192px) !important;
max-height: calc(100% - 192px) !important;
}
/* Sidebar sections — calcul exact pe 318px height */
.remi-sidebar {
padding: 4px !important;
gap: 0 !important;
}
.remi-sidebar .sidebar-section-piles {
flex: 0 0 auto !important;
min-height: 60px !important;
max-height: 60px !important;
}
.remi-sidebar .pile-area {
min-height: 60px !important;
max-height: 60px !important;
padding: 2px !important;
}
.remi-sidebar .atu-display.atu-beside-pile {
min-height: 56px !important;
max-height: 56px !important;
}
.remi-sidebar .sidebar-section-discard {
flex: 0 0 auto !important;
min-height: 60px !important;
max-height: 60px !important;
padding: 2px !important;
}
.remi-sidebar .discard-history-strip {
max-height: 36px !important;
min-height: 36px !important;
}
.remi-sidebar .sidebar-section-log {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 130px !important; /* cap clar — nu mai umple tot sidebar */
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.remi-sidebar .sidebar-section-log .activity-log {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.remi-sidebar .sidebar-section-log .activity-log-body {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* Hand-bot 130px = info-bar 36 + hand 86 (2 RÂNDURI × 38 + 4 row-gap + padding 6) + 4 padding seat */
.seat-south {
min-height: 130px !important;
max-height: 130px !important;
}
/* INFO-BAR landscape — UN SINGUR RÂND 36px (28 conținut + 8 padding).
Specificitate 0,5,1 (body + 3 clase + .merged-actions + atribut) bate desktop 0,4,1. */
/* (banda în peisaj scund: mărimile vin din scara fluidă de la finalul
fişierului; aici rămâne doar ce ţine de modul imersiv) */
/* Toate elementele compact 28px tall, fără shrink */
body.game-active .seat-south .player-info-bar > *,
body.mp-game-active .seat-south .player-info-bar > * {
flex-shrink: 1 !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
font-size: 9px !important;
line-height: 1 !important;
}
/* Identity — avatar 30 + nume 50 + gap = 86px (avatar prominent) */
body.game-active .seat-south .player-info-bar .player-module-identity,
body.mp-game-active .seat-south .player-info-bar .player-module-identity {
flex: 0 0 86px !important;
gap: 4px !important;
padding: 0 2px !important;
}
/* AVATAR PROMINENT 30×30 — important vizual, rotund, identic ca timer ca size */
html body.game-active .seat-south .player-info-bar .seat-avatar,
html body.mp-game-active .seat-south .player-info-bar .seat-avatar,
html body.game-active .seat-south .player-info-bar .player-avatar,
html body.mp-game-active .seat-south .player-info-bar .player-avatar,
html body.game-active .seat-south .player-info-bar .identity-avatar-wrap,
html body.mp-game-active .seat-south .player-info-bar .identity-avatar-wrap,
html body.game-active .seat-south .player-info-bar .identity-avatar-wrap .seat-avatar,
html body.mp-game-active .seat-south .player-info-bar .identity-avatar-wrap .seat-avatar,
html body.game-active .seat-south .identity-avatar-wrap,
html body.mp-game-active .seat-south .identity-avatar-wrap {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
border-radius: 50% !important;
object-fit: cover !important;
flex-shrink: 0 !important;
overflow: hidden !important;
aspect-ratio: 1/1 !important;
border: 2px solid rgba(255, 215, 0, .55) !important;
box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4) !important;
}
/* ASCUNDE STATUS LABEL "online" — redundant cu dot-ul verde de langa avatar */
body.game-active .seat-south .player-info-bar .identity-status-label,
body.mp-game-active .seat-south .player-info-bar .identity-status-label {
display: none !important;
}
/* TIMER DONUT — pastram doar valoarea numerica centrală, NU eticheta "SEC" */
body.game-active .seat-south .player-info-bar .timer-donut-label,
body.mp-game-active .seat-south .player-info-bar .timer-donut-label {
display: none !important;
}
/* identity-text wrap intr-un singur rand */
body.game-active .seat-south .player-info-bar .identity-text,
body.mp-game-active .seat-south .player-info-bar .identity-text {
flex-direction: row !important;
align-items: center !important;
gap: 4px !important;
line-height: 1 !important;
}
/* TIMER ROTUND — pill complet rotunjit (border-radius full) */
body.game-active .seat-south .player-info-bar .player-module-timer,
body.mp-game-active .seat-south .player-info-bar .player-module-timer,
body.game-active .seat-south .player-timer,
body.mp-game-active .seat-south .player-timer,
.seat-south .player-info-bar .player-module-timer,
.seat-south .player-timer {
border-radius: 999px !important;
overflow: hidden !important;
background: linear-gradient(180deg, rgba(40,90,40,.85), rgba(20,60,20,.95)) !important;
border: 1px solid rgba(80,200,80,.6) !important;
}
/* NUME mic + scroll marquee — text 7px ca avatarul să fie prominent */
@keyframes nameScrollLR {
0%, 10% { text-indent: 0; }
90%, 100% { text-indent: -60px; }
}
body.game-active .seat-south .player-info-bar .player-name-label,
body.mp-game-active .seat-south .player-info-bar .player-name-label,
.seat-south .player-info-bar .player-name-label {
font-size: 7px !important;
width: 50px !important;
max-width: 50px !important;
min-width: 50px !important;
overflow: hidden !important;
white-space: nowrap !important;
display: inline-block !important;
line-height: 12px !important;
text-overflow: clip !important;
animation: nameScrollLR 6s ease-in-out infinite alternate !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
.seat-south .player-info-bar .player-name-label {
font-size: 9px !important;
max-width: 60px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Timer DONUT — circular animation 30×30, ring vizibil */
body.game-active .seat-south .player-info-bar .player-module-timer,
body.mp-game-active .seat-south .player-info-bar .player-module-timer {
flex: 0 0 32px !important;
padding: 0 !important;
font-size: 9px !important;
font-weight: 700 !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
}
/* Timer donut IDENTIC ca desktop, scalat la 30×30 (vs 39 pe desktop) */
body.game-active .seat-south .player-info-bar .player-timer.timer-donut,
body.mp-game-active .seat-south .player-info-bar .player-timer.timer-donut,
body.game-active .seat-south .player-info-bar .player-timer,
body.mp-game-active .seat-south .player-info-bar .player-timer {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
max-width: 30px !important;
border-radius: 50% !important;
position: relative !important;
overflow: visible !important;
/* Background radial dark identic cu desktop */
background: radial-gradient(circle, rgba(10,20,8,.95) 0%, rgba(20,40,16,.95) 100%) !important;
border: 1.5px solid rgba(0,0,0,.35) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Ring conic-gradient — MASK scalat pentru 30×30 (vs desktop 54).
Banda 11..14px radius (3px wide) shows green countdown drain. */
body.game-active .seat-south .player-info-bar .timer-donut-ring,
body.mp-game-active .seat-south .player-info-bar .timer-donut-ring,
.seat-south .player-module-timer .timer-donut-ring {
width: 30px !important;
height: 30px !important;
position: absolute !important;
inset: -1.5px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
border-radius: 50% !important;
-webkit-mask: radial-gradient(circle at 50% 50%,
transparent 0,
transparent 11px,
#000 11px,
#000 14.5px,
transparent 14.5px) !important;
mask: radial-gradient(circle at 50% 50%,
transparent 0,
transparent 11px,
#000 11px,
#000 14.5px,
transparent 14.5px) !important;
}
/* Center text "45 SEC" identic ca desktop */
body.game-active .seat-south .player-info-bar .timer-donut-center,
body.mp-game-active .seat-south .player-info-bar .timer-donut-center {
font-size: 8px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #fff !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
text-align: center !important;
}
body.game-active .seat-south .player-info-bar .timer-donut-value,
body.mp-game-active .seat-south .player-info-bar .timer-donut-value {
font-size: 9px !important;
font-weight: 800 !important;
line-height: 1 !important;
color: #fff !important;
}
/* Stats (PUNCTE + PIESE + penalty) compact */
body.game-active .seat-south .player-info-bar .player-module-stats,
body.mp-game-active .seat-south .player-info-bar .player-module-stats {
flex: 0 0 110px !important;
gap: 2px !important;
padding: 0 2px !important;
}
.seat-south .player-info-bar .player-module-stats .player-points,
.seat-south .player-info-bar .player-module-stats .player-tiles-count,
.seat-south .player-info-bar .player-module-stats .player-hand-penalty {
font-size: 9px !important;
padding: 1px 3px !important;
line-height: 1.2 !important;
}
/* Hints + Sort — icon-uri compacte (vizibile DOAR la player, ascunse la spectator) */
body.game-active .seat-south .player-info-bar .player-module-hints,
body.mp-game-active .seat-south .player-info-bar .player-module-hints {
flex: 0 0 28px !important;
padding: 0 !important;
height: 28px !important;
min-height: 28px !important;
}
/* ASCUNDE textul "0 pct" din hints — pastram doar icon 💡 */
body.game-active .seat-south .player-info-bar .player-module-hints .hint-cost,
body.mp-game-active .seat-south .player-info-bar .player-module-hints .hint-cost,
body.game-active .seat-south .player-info-bar .player-module-hints .hint-price,
body.mp-game-active .seat-south .player-info-bar .player-module-hints .hint-price,
body.game-active .seat-south .player-info-bar .player-module-hints span:not(.material-symbols-rounded),
body.mp-game-active .seat-south .player-info-bar .player-module-hints span:not(.material-symbols-rounded) {
display: none !important;
}
body.game-active .seat-south .player-info-bar .player-module-sort,
body.mp-game-active .seat-south .player-info-bar .player-module-sort {
flex: 0 0 76px !important;
gap: 1px !important;
padding: 0 !important;
height: 28px !important;
min-height: 28px !important;
}
/* Spectator: ascunde hints + sort + action — info-bar arata curat doar cu identity+timer+stats */
body.spectator-mode .seat-south .player-info-bar .player-module-hints,
body.spectator-mode .seat-south .player-info-bar .player-module-sort {
display: none !important;
}
.seat-south .player-info-bar .player-module-sort .sort-btn,
.seat-south .player-info-bar .player-module-hints .hint-btn {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
padding: 0 !important;
}
.seat-south .player-info-bar .sort-btn .material-symbols-rounded,
.seat-south .player-info-bar .hint-btn .material-symbols-rounded {
font-size: 13px !important;
}
/* 5 ACTION BUTTONS — flex 1 1 0 EGALE, font 8px, icon 11px, padding minim */
body.game-active .seat-south .player-info-bar .action-btn-game,
body.mp-game-active .seat-south .player-info-bar .action-btn-game {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
height: 28px !important;
padding: 1px 3px !important;
font-size: 8px !important;
font-weight: 700 !important;
gap: 1px !important;
letter-spacing: 0 !important;
border-radius: 4px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ASCUNDE ICON pe butoane TRAGE/ETALEAZA/LIPESTE/ARUNCA — texul e suficient,
eliberam spatiu sa incapa toate 5 + ATU. */
body.game-active .seat-south .player-info-bar .action-btn-game .material-symbols-rounded,
body.mp-game-active .seat-south .player-info-bar .action-btn-game .material-symbols-rounded {
display: none !important;
}
/* ATU pastreaza icon (steluta) — text scurt, icon e simbolic */
body.game-active .seat-south .player-info-bar .action-btn-game.btn-atu .material-symbols-rounded,
body.mp-game-active .seat-south .player-info-bar .action-btn-game.btn-atu .material-symbols-rounded {
display: inline-block !important;
font-size: 12px !important;
}
.seat-south .player-info-bar .seat-avatar,
.seat-south .player-info-bar .player-avatar,
.seat-south .seat-avatar {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
flex-shrink: 0 !important;
}
.seat-south .player-info-bar .player-timer,
.seat-south .player-timer {
font-size: 11px !important;
padding: 2px 6px !important;
min-height: 24px !important;
max-height: 24px !important;
line-height: 1.1 !important;
flex-shrink: 0 !important;
font-weight: 700 !important;
}
.seat-south .player-info-bar .player-timer .material-symbols-rounded,
.seat-south .player-timer .material-symbols-rounded {
font-size: 14px !important;
}
.seat-south .player-info-bar .player-name-label,
.seat-south .player-info-bar .player-points,
.seat-south .player-info-bar .player-tiles-count,
.seat-south .player-info-bar .player-hand-penalty {
font-size: 10px !important;
padding: 2px 5px !important;
line-height: 1.2 !important;
}
/* HAND 2 RÂNDURI — separație vizibilă între rânduri (row 2 împins jos) */
body.game-active.immersive-mode .seat-south .player-hand,
body.mp-game-active.immersive-mode .seat-south .player-hand,
body.game-active .seat-south .player-hand,
body.mp-game-active .seat-south .player-hand,
.seat-south .player-hand {
min-height: 86px !important;
max-height: 86px !important;
height: 86px !important;
padding: 2px 8px !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-content: space-between !important; /* Row 1 SUS, Row 2 JOS */
align-items: flex-start !important;
justify-content: flex-start !important;
row-gap: 12px !important; /* spațiu mai mare între rânduri */
column-gap: 2px !important;
overflow: hidden !important;
}
/* Tiles 24×36 — vizibile, cursor grab pentru drag/drop reorder */
body.game-active .seat-south .player-hand .tile,
body.mp-game-active .seat-south .player-hand .tile,
.seat-south .player-hand .tile {
width: 24px !important;
height: 36px !important;
min-width: 24px !important;
font-size: 13px !important;
flex-shrink: 0 !important;
cursor: grab !important;
}
.seat-south .player-hand .tile:active,
.seat-south .player-hand .tile.dragging,
.seat-south .player-hand .tile.drag-active {
cursor: grabbing !important;
z-index: 100 !important;
}
/* LOBBY landscape — compact: header + stats + filters + grid totul vizibil */
.lobby-view {
height: 100% !important;
max-height: 100% !important;
overflow-y: auto !important;
padding: 6px 8px !important;
}
.lobby-header {
max-height: 44px !important;
min-height: 44px !important;
padding: 4px 8px !important;
gap: 6px !important;
overflow: hidden !important;
flex-wrap: nowrap !important;
}
.lobby-header .lobby-title {
font-size: 14px !important;
line-height: 1.1 !important;
}
.lobby-header .lobby-subtitle {
font-size: 10px !important;
display: none !important;
}
/* Ascunde mascota logo pe landscape compact — economie spatiu orizontal */
.lobby-tile-mascot {
display: none !important;
}
.lobby-header-right .lobby-btn {
padding: 5px 9px !important;
font-size: 11px !important;
min-height: 30px !important;
}
.lobby-header-right .lobby-btn span:not(.material-symbols-rounded) {
display: none !important;
}
.lobby-stats-row {
flex-wrap: nowrap !important;
gap: 4px !important;
}
.lobby-stats-bar {
max-height: 30px !important;
min-height: 30px !important;
padding: 2px 8px !important;
gap: 8px !important;
font-size: 10px !important;
}
.lobby-stats-bar > * {
font-size: 10px !important;
}
/* Hide AI promo + leaderboard pe landscape — economie spațiu pentru grid mese */
.lobby-ai-card,
.lobby-leaderboard {
display: none !important;
}
.lobby-filters,
.lobby-filter-bar {
max-height: 32px !important;
min-height: 32px !important;
padding: 2px 6px !important;
gap: 4px !important;
}
.lobby-filters .filter-btn,
.lobby-filter-bar button {
padding: 4px 8px !important;
font-size: 10px !important;
min-height: 26px !important;
}
/* Grid mese — 3-4 coloane pe landscape, carduri compacte */
.lobby-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 6px !important;
padding: 6px 0 !important;
}
.lobby-card {
padding: 6px 8px !important;
min-height: 60px !important;
max-height: 64px !important;
font-size: 10px !important;
}
.lobby-card .lobby-card-title,
.lobby-card h3,
.lobby-card h4 {
font-size: 11px !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.lobby-card .lobby-card-meta,
.lobby-card .lobby-card-info {
font-size: 9px !important;
gap: 4px !important;
}
.lobby-card button,
.lobby-card .btn-spectate,
.lobby-card .btn-join {
padding: 4px 8px !important;
font-size: 9px !important;
min-height: 24px !important;
}
/* NAV-BAR FAB landscape — micsorat ca sa nu suprapuna butoanele tab */
.nav-bar-fab {
width: 38px !important;
height: 38px !important;
top: -6px !important;
font-size: 8px !important;
}
.nav-bar-fab .material-symbols-rounded {
font-size: 18px !important;
}
/* LOADER landscape compact — layout orizontal, incape in 412px inaltime */
.game-loader {
align-items: center !important;
justify-content: center !important;
}
.loader-content {
width: 92vw !important;
max-width: 700px !important;
max-height: 92dvh !important;
padding: 16px 20px !important;
border-radius: 14px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
overflow: hidden !important;
}
.loader-logo {
flex-shrink: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
min-width: 140px !important;
}
.loader-logo::before {
display: none !important;
}
.loader-fan-deal {
height: 90px !important;
margin-bottom: 0 !important;
}
.logo-text {
font-size: 20px !important;
letter-spacing: 3px !important;
}
.loader-checklist {
flex: 1 !important;
gap: 5px !important;
display: flex !important;
flex-direction: column !important;
}
.loader-check-item {
padding: 5px 10px !important;
font-size: 11px !important;
min-height: 28px !important;
}
.loader-progress-container {
margin-bottom: 6px !important;
}
.loader-progress-label {
font-size: 10px !important;
}
.loader-tip {
font-size: 10px !important;
padding: 6px 10px !important;
margin-top: 6px !important;
}
/* MODAL-uri — FULL landscape (95vw × 95dvh) — bate orice max-width hardcodat */
.modal-overlay,
.mp-modal-overlay,
.discard-history-modal,
.tile-audit-modal {
align-items: center !important;
justify-content: center !important;
padding: 8px !important;
}
.modal-container,
.modal-container.game-setup-modal,
.mp-modal-card,
.discard-history-modal-card,
.tile-audit-modal-card,
.mw-modal-card {
width: 95vw !important;
max-width: 95vw !important;
height: 95dvh !important;
max-height: 95dvh !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* Game-setup-modal — TOATE secțiunile vizibile cu scroll vertical pe body */
.modal-container.game-setup-modal .modal-body {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 6px 10px !important;
-webkit-overflow-scrolling: touch !important;
}
/* Setup grid cu 2 coloane — body interior fluid (nu fix col widths) */
.modal-container.game-setup-modal .setup-grid,
.modal-container.game-setup-modal .setup-columns,
.modal-container.game-setup-modal .modal-body > div {
overflow: visible !important;
max-height: none !important;
}
/* Coloane cu scroll independent (cea dreapta are mai multe sectiuni) */
.modal-container.game-setup-modal .setup-col-left,
.modal-container.game-setup-modal .setup-col-right,
.modal-container.game-setup-modal .setup-column {
overflow: visible !important;
max-height: none !important;
flex: 1 1 50% !important;
min-width: 0 !important;
}
/* Preset cards row — compact in landscape, nu ocupa prea mult vertical */
.modal-container.game-setup-modal .preset-cards,
.modal-container.game-setup-modal .difficulty-options[data-section="presets"] {
gap: 4px !important;
margin-bottom: 8px !important;
}
.modal-container.game-setup-modal .preset-card {
padding: 6px 8px !important;
min-height: 48px !important;
}
.modal-container.game-setup-modal .preset-card .preset-name {
font-size: 11px !important;
}
.modal-container.game-setup-modal .preset-card .preset-meta {
font-size: 9px !important;
}
/* Toggle Da/Nu, slider, butoane reguli — compact */
.modal-container.game-setup-modal .toggle-yn,
.modal-container.game-setup-modal .toggle-button,
.modal-container.game-setup-modal .yn-btn {
padding: 4px 10px !important;
font-size: 10px !important;
min-height: 28px !important;
}
.modal-container.game-setup-modal .rule-chip,
.modal-container.game-setup-modal .rule-toggle {
padding: 4px 8px !important;
font-size: 10px !important;
min-height: 28px !important;
}
.modal-container.game-setup-modal .min-rating-slider,
.modal-container.game-setup-modal input[type="range"] {
height: 6px !important;
}
.modal-container.game-setup-modal .modal-header {
padding: 6px 12px !important;
font-size: 13px !important;
}
.modal-container.game-setup-modal .modal-title {
font-size: 14px !important;
}
.modal-container.game-setup-modal .modal-subtitle {
font-size: 10px !important;
}
.modal-container.game-setup-modal .setup-section {
margin-bottom: 8px !important;
padding: 8px !important;
}
.modal-container.game-setup-modal .setup-label {
font-size: 11px !important;
margin-bottom: 4px !important;
}
.modal-container.game-setup-modal .difficulty-btn,
.modal-container.game-setup-modal .modal-count-btn {
padding: 6px 8px !important;
font-size: 10px !important;
min-height: 36px !important;
}
.modal-container.game-setup-modal .difficulty-options {
gap: 4px !important;
}
.modal-container.game-setup-modal .modal-footer,
.modal-container.game-setup-modal .modal-actions {
padding: 6px 12px !important;
flex: 0 0 auto !important;
}
.modal-container.game-setup-modal .btn-create-game,
.modal-container.game-setup-modal .btn-primary {
padding: 8px 16px !important;
font-size: 12px !important;
min-height: 36px !important;
}
.modal-header,
.mp-modal-header,
.discard-history-modal-header,
.tile-audit-modal-header {
flex: 0 0 auto !important;
padding: 8px 12px !important;
font-size: 13px !important;
}
.modal-body,
.mp-modal-body,
.mp-modal-body-v2,
.discard-history-modal-body,
.tile-audit-modal-body,
.mp-modal-card-body {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 8px 12px !important;
-webkit-overflow-scrolling: touch !important;
}
/* mp-modal v2 footer compact (94px e prea mult) */
.mp-modal-footer-v2 {
padding: 6px 12px !important;
gap: 6px !important;
}
.mp-modal-footer-v2 .mp-modal-btn-create,
.mp-modal-footer-v2 .mp-modal-btn-cancel {
padding: 8px 16px !important;
font-size: 12px !important;
min-height: 36px !important;
}
.mp-modal-header {
padding: 6px 12px !important;
}
.mp-preset-strip {
padding: 4px 8px !important;
gap: 4px !important;
}
.mp-preset-strip .mp-preset-card {
padding: 6px !important;
min-height: 50px !important;
}
.modal-footer,
.mp-modal-footer,
.tile-audit-modal-footer {
flex: 0 0 auto !important;
padding: 6px 12px !important;
}
/* Sterse rule-uri duplicat 2026-04-30: forțau seat-north + opponent-area la
42px care contrazicea noul layout cu seat-north 140px + carduri 56px. */
/* CRITIC pt 3P/4P landscape: opponents au pe desktop grid-area: opp1/opp2/opp3
(linia 4814-4824). In landscape grid-ul nostru NU are opp1/opp2/opp3, doar
hand-top. Resetam grid-area si lasam auto-placement in hand-top spread. */
body.game-active.immersive-mode .opponent-area[data-seat="north"],
body.mp-game-active.immersive-mode .opponent-area[data-seat="north"],
body.game-active.immersive-mode .opponent-area[data-seat="east"],
body.mp-game-active.immersive-mode .opponent-area[data-seat="east"],
body.game-active.immersive-mode .opponent-area[data-seat="west"],
body.mp-game-active.immersive-mode .opponent-area[data-seat="west"],
body.game-active .opponent-area[data-seat="north"],
body.mp-game-active .opponent-area[data-seat="north"],
body.game-active .opponent-area[data-seat="east"],
body.mp-game-active .opponent-area[data-seat="east"],
body.game-active .opponent-area[data-seat="west"],
body.mp-game-active .opponent-area[data-seat="west"] {
grid-area: hand-top !important;
}
/* sters duplicat 2026-04-30 — bata regula corecta de mai sus cu position:absolute */
.seat-south {
min-height: 70px !important;
max-height: 70px !important;
}
.seat-south .player-info-bar {
padding: 1px 6px !important;
font-size: 10px !important;
}
.seat-south .player-hand {
min-height: 38px !important;
max-height: 38px !important;
padding: 1px 4px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
.etalare-zone {
padding: 4px 2px 1px !important;
min-height: 0 !important;
}
/* OPPONENT — layout complet vizibil pentru 2/3/4 jucatori in hand-top 42px:
- opponent-info bar 18px (avatar 16 + nume + timer + scor + tiles badge)
- opponent-hand 22px (tile-backs 12x18)
Total = 18 + 22 + 2 padding = 42px ✓ */
body.game-active.immersive-mode .opponent-area .opponent-name,
body.mp-game-active.immersive-mode .opponent-area .opponent-name,
body.game-active .opponent-area .opponent-name,
body.mp-game-active .opponent-area .opponent-name,
.opponent-area .opponent-name {
font-size: 9px !important;
max-width: none !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
line-height: 1.2 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
body.game-active .opponent-area .opponent-info,
body.mp-game-active .opponent-area .opponent-info,
/* Info row 32px = 2 sub-rânduri × 16px each via flex-wrap.
Row 1: avatar + name + status. Row 2: timer + score + tiles. */
.opponent-area .opponent-info {
font-size: 8px !important;
gap: 3px !important;
row-gap: 0 !important;
flex-wrap: wrap !important;
max-height: 32px !important;
min-height: 32px !important;
height: 32px !important;
overflow: hidden !important;
align-items: center !important;
align-content: flex-start !important;
padding: 1px 3px !important;
display: flex !important;
flex-direction: row !important;
}
/* Avatar + Name + Status — Row 1 (top, 16px). Empuie restul pe Row 2. */
.opponent-area .seat-avatar { order: 1 !important; }
.opponent-area .opponent-name { order: 2 !important; }
.opponent-area .opponent-status { order: 3 !important; }
/* Forteaza wrap dupa Row 1 — un spacer 100% width */
.opponent-area .opponent-info::after {
content: '' !important;
flex-basis: 100% !important;
height: 0 !important;
order: 4 !important;
}
.opponent-area .player-timer { order: 5 !important; }
.opponent-area .opponent-points { order: 6 !important; }
.opponent-area .opponent-tiles-count { order: 7 !important; }
/* Avatar 16×16 — sidebar 140px lat, mai mult spatiu */
body.game-active.immersive-mode .game-play-view .opponent-area .seat-avatar,
body.mp-game-active.immersive-mode .game-play-view .opponent-area .seat-avatar,
body.game-active .game-play-view .opponent-area .seat-avatar,
body.mp-game-active .game-play-view .opponent-area .seat-avatar,
body.game-active .opponent-area .seat-avatar,
body.mp-game-active .opponent-area .seat-avatar,
.opponent-area .seat-avatar,
.opponent-area .opponent-avatar {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
flex-shrink: 0 !important;
}
/* Name max 60px, font 8px — confortabil */
body.game-active.immersive-mode .opponent-area .opponent-name,
body.mp-game-active.immersive-mode .opponent-area .opponent-name,
body.game-active .game-play-view .opponent-area .opponent-name,
body.mp-game-active .game-play-view .opponent-area .opponent-name,
.opponent-area .opponent-name {
font-size: 8px !important;
max-width: 60px !important;
min-width: 0 !important;
flex: 0 1 60px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 14px !important;
letter-spacing: 0 !important;
}
/* Timer + Score + Tiles count — font 7px, 14px tall */
body.game-active.immersive-mode .opponent-area .player-timer,
body.mp-game-active.immersive-mode .opponent-area .player-timer,
body.game-active.immersive-mode .opponent-area .opponent-points,
body.mp-game-active.immersive-mode .opponent-area .opponent-points,
body.game-active.immersive-mode .opponent-area .opponent-tiles-count,
body.mp-game-active.immersive-mode .opponent-area .opponent-tiles-count,
body.game-active .game-play-view .opponent-area .player-timer,
body.mp-game-active .game-play-view .opponent-area .player-timer,
body.game-active .game-play-view .opponent-area .opponent-points,
body.mp-game-active .game-play-view .opponent-area .opponent-points,
body.game-active .game-play-view .opponent-area .opponent-tiles-count,
body.mp-game-active .game-play-view .opponent-area .opponent-tiles-count,
.opponent-area .player-timer,
.opponent-area .opponent-points,
.opponent-area .opponent-tiles-count {
font-size: 7px !important;
padding: 0 3px !important;
line-height: 14px !important;
flex-shrink: 0 !important;
height: 14px !important;
display: inline-flex !important;
visibility: visible !important;
align-items: center !important;
gap: 1px !important;
}
/* Material icons in badges — 9px */
.opponent-area .player-timer .material-symbols-rounded,
.opponent-area .opponent-points .material-symbols-rounded {
font-size: 9px !important;
}
/* Status dot — 6px round indicator (online + ATU) */
body.game-active.immersive-mode .opponent-area .opponent-status,
body.mp-game-active.immersive-mode .opponent-area .opponent-status,
body.game-active .opponent-area .opponent-status,
body.mp-game-active .opponent-area .opponent-status,
.opponent-area .opponent-status {
display: inline-block !important;
width: 6px !important;
height: 6px !important;
font-size: 0 !important;
flex-shrink: 0 !important;
border-radius: 50% !important;
background: #4caf50 !important;
}
body.game-active .opponent-area .seat-avatar,
body.mp-game-active .opponent-area .seat-avatar,
body.game-active .opponent-area .opponent-avatar,
body.mp-game-active .opponent-area .opponent-avatar,
.opponent-area .seat-avatar,
.opponent-area .opponent-avatar {
width: 12px !important;
height: 12px !important;
min-width: 12px !important;
min-height: 12px !important;
flex-shrink: 0 !important;
}
.opponent-area .opponent-name {
font-size: 7px !important;
max-width: 70px !important;
}
.opponent-area .opponent-hand {
max-height: 24px !important;
min-height: 22px !important;
gap: 1px !important;
}
body.game-active .opponent-tile-back,
body.mp-game-active .opponent-tile-back,
.opponent-tile-back {
width: 10px !important;
height: 16px !important;
}
/* Badges info: timer, points, tiles-count, ATU — micro 14px row */
body.game-active .opponent-area .player-timer,
body.mp-game-active .opponent-area .player-timer,
body.game-active .opponent-area .opponent-points,
body.mp-game-active .opponent-area .opponent-points,
body.game-active .opponent-area .opponent-tiles-count,
body.mp-game-active .opponent-area .opponent-tiles-count,
.opponent-area .player-timer,
.opponent-area .opponent-points,
.opponent-area .opponent-tiles-count,
.opponent-area .opponent-atu-badge {
font-size: 7px !important;
padding: 0 3px !important;
line-height: 1.2 !important;
flex-shrink: 0 !important;
min-height: 12px !important;
max-height: 12px !important;
}
.opponent-area .player-timer .material-symbols-rounded,
.opponent-area .opponent-points .material-symbols-rounded {
font-size: 9px !important;
}
/* SIDEBAR overflow fix — expand-btn iesea 18px in dreapta; discard strip
scroll-snap la latest entry; sidebar in sine clip overflow. */
.remi-sidebar {
overflow-x: hidden !important;
}
.remi-sidebar .section-expand-btn {
position: absolute !important;
top: 4px !important;
right: 4px !important;
width: 16px !important;
height: 16px !important;
font-size: 10px !important;
}
.remi-sidebar .section-expand-btn .material-symbols-rounded {
font-size: 12px !important;
}
.remi-sidebar .sidebar-section-discard {
position: relative !important;
}
/* Discard strip — scroll-snap-end ca ultima piesa sa fie mereu vizibila */
.remi-sidebar .discard-history-strip {
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth !important;
}
.remi-sidebar .discard-history-tile {
scroll-snap-align: end !important;
}
/* ACTIVITY LOG — design profesional pe coloana 96px:
- background subtil cu gradient
- separator linie aurie intre entries
- nume jucator BOLD auriu, actiune normal
- hover highlight, animation slide-in
- O singura linie per entry cu ellipsis */
.remi-sidebar .sidebar-section-log {
padding: 4px !important;
}
.remi-sidebar .activity-log-header {
font-size: 8px !important;
padding: 3px 4px !important;
white-space: nowrap !important;
line-height: 1.1 !important;
text-transform: uppercase !important;
letter-spacing: 0 !important;
background: linear-gradient(90deg, rgba(255,215,0,.12), transparent) !important;
border-radius: 3px !important;
border-bottom: 1px solid rgba(255,215,0,.25) !important;
margin-bottom: 3px !important;
color: rgba(255,215,0,.95) !important;
font-weight: 700 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: flex !important;
align-items: center !important;
gap: 3px !important;
}
.remi-sidebar .activity-log-header > * {
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.remi-sidebar .activity-log-header .material-symbols-rounded {
font-size: 11px !important;
}
.remi-sidebar .activity-log-header span:not(.material-symbols-rounded) {
font-size: 8px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
.remi-sidebar .activity-log-entry,
body.game-active .activity-log-entry,
body.mp-game-active .activity-log-entry {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 7px !important;
padding: 2px 4px !important;
line-height: 1.25 !important;
max-width: 100% !important;
display: block !important;
border-bottom: 1px solid rgba(255,215,0,.08) !important;
background: linear-gradient(90deg, rgba(0,0,0,.18), transparent) !important;
transition: background .15s ease !important;
margin-bottom: 1px !important;
border-radius: 2px !important;
letter-spacing: .1px !important;
}
.remi-sidebar .activity-log-entry:nth-child(odd) {
background: linear-gradient(90deg, rgba(255,215,0,.04), transparent) !important;
}
.remi-sidebar .activity-log-entry:hover {
background: rgba(255,215,0,.12) !important;
}
/* TOATE elementele din entry pe acelasi rand cu username — display inline,
acelasi font 7px, NIMIC pe linie noua. Specificitate (0,3,1) bate baza (0,2,0). */
.remi-sidebar .activity-log-entry > *,
body.game-active .remi-sidebar .activity-log-entry .log-player-name,
body.mp-game-active .remi-sidebar .activity-log-entry .log-player-name,
body.game-active .remi-sidebar .activity-log-entry .log-action-type,
body.mp-game-active .remi-sidebar .activity-log-entry .log-action-type,
body.game-active .remi-sidebar .activity-log-entry .log-details,
body.mp-game-active .remi-sidebar .activity-log-entry .log-details,
.remi-sidebar .activity-log-entry .log-player-name,
.remi-sidebar .activity-log-entry .log-action-type,
.remi-sidebar .activity-log-entry .log-details {
display: inline !important;
font-size: 7px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
.remi-sidebar .activity-log-entry .log-player-name {
color: #FFD94A !important;
font-weight: 700 !important;
}
.remi-sidebar .activity-log-entry .log-action-type {
color: #8FE0F5 !important;
font-weight: 600 !important;
}
.remi-sidebar .activity-log-entry .log-details {
color: rgba(255,255,255,.78) !important;
font-weight: 400 !important;
}
/* Spatiu intre username si actiune (1 caracter) */
.remi-sidebar .activity-log-entry .log-player-name::after {
content: ' ' !important;
display: inline !important;
}
.remi-sidebar .activity-log-empty {
font-size: 9px !important;
color: rgba(255,255,255,.45) !important;
padding: 8px !important;
text-align: center !important;
font-style: italic !important;
}
/* TABLE MELD GROUPS — piesele sa se aseze corect pe etalare zones */
.etalare-zone .table-meld-group,
.etalare-zone .meld-group,
.etalare-zone .etalare-meld {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 1px !important;
padding: 2px 3px !important;
margin: 2px 1px !important;
}
.etalare-zone .etalare-melds-container,
.etalare-zone .etalare-scroll {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 2px !important;
align-items: flex-start !important;
overflow-y: auto !important;
overflow-x: hidden !important;
max-height: 100% !important;
}
.etalare-zone .tile {
width: 22px !important;
height: 30px !important;
min-width: 22px !important;
min-height: 30px !important;
font-size: 12px !important;
flex-shrink: 0 !important;
}
/* CONTEXT PANEL (chat/menu drawer) — overlay fixed, slide-in din dreapta.
Default position relative iese din viewport in landscape ingust. */
.context-panel {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 100dvh !important;
max-height: 100dvh !important;
width: 280px !important;
max-width: 80vw !important;
min-width: 0 !important;
flex: none !important;
z-index: 1000 !important;
transform: translateX(100%);
transition: transform .25s ease !important;
}
.context-panel.active {
transform: translateX(0) !important;
}
.context-panel.hidden {
transform: translateX(100%) !important;
width: 280px !important;
}
/* Landscape layouts per player count */
.game-play-view[data-players="2"] {
grid-template-areas:
"hand-top hand-top sidebar"
"zone1 zone1 sidebar"
"zone2 zone2 sidebar"
"hand-bot hand-bot sidebar";
}
.game-play-view[data-players="3"] {
grid-template-areas:
"hand-top hand-top sidebar"
"zone1 zone2 sidebar"
"zone3 zone3 sidebar"
"hand-bot hand-bot sidebar";
}
.game-play-view[data-players="4"] {
grid-template-areas:
"hand-top hand-top sidebar"
"zone1 zone2 sidebar"
"zone3 zone4 sidebar"
"hand-bot hand-bot sidebar";
}
.remi-sidebar {
flex-direction: column;
height: auto;
max-height: 100%;
}
.remi-sidebar .discard-history-strip {
flex-wrap: wrap;
overflow-x: hidden;
}
}
/* Desktop (≥ 768px) */
@media (min-width: 768px) {
/* Container max-width 1200px centrat (cerinta: max-width 1200 centrat) */
.app-container { max-width: 1200px; margin: 0 auto; }
/* 2026-04-21 v8 DESKTOP FIX: Nav-rail e position:fixed bottom + z-index 200 →
acopera partea de jos a game-play-view (butoane seat-south clipped).
Fix: padding-bottom pe .main-content = nav-rail-h REAL (status-bar ~35px +
nav-bar-primary ~60px + paduri = ~110-120px) + margin de siguranta 16px.
Folosesc 140px fix pe desktop (nav-rail-h fiind variable peste tot).
Default .main-content din linia 1484 e 110px — insuficient. */
.main-content {
padding-bottom: 140px !important;
}
.game-play-view {
padding: 8px; /* 8px multiplu */
gap: 8px; /* 8px multiplu */
max-width: 1200px;
margin: 0 auto;
}
.remi-sidebar { max-width: 200px; }
/* 2026-04-21 DESKTOP v2: SIDEBAR UNIT — seat-north (opponents top) + remi-sidebar
(piles+atu+discard+log) LOOK ca un singur bloc vertical continuu pe coloana dreapta.
Acelasi fundal gradient, fara border intre ele, rotunjit doar sus/jos. */
.seat-north {
/* Fundal identic cu .remi-sidebar (vezi linia 4732) pentru continuitate vizuala */
background:
repeating-linear-gradient(120deg,
transparent 0, transparent 3px,
rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px),
linear-gradient(135deg,
rgba(8, 30, 15, 0.75) 0%,
rgba(3, 18, 8, 0.85) 100%);
border: 1px solid rgba(255, 215, 0, 0.12);
border-bottom: none; /* fara border jos — seamless cu sidebar */
border-radius: 10px 10px 0 0; /* rotunjit doar sus */
padding: 6px 5px;
gap: 6px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 0 20px rgba(0, 0, 0, 0.2);
position: relative;
/* Elimina gap-ul dintre seat-north si remi-sidebar (grid gap 8px pe desktop)
— margin negativ ca sa para atipit de sidebar */
margin-bottom: -8px;
z-index: 1;
}
/* Gold accent line la varful seat-north (ca la varful original al remi-sidebar) */
.seat-north::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(255, 215, 0, 0.4) 50%,
transparent);
z-index: 2;
}
/* Sidebar fara border sus, rotunjit doar jos — continuitate cu seat-north */
.remi-sidebar {
border-top: none;
border-radius: 0 0 10px 10px;
}
/* Gold accent jos pentru sidebar (era sus in base, mutam-o) */
.remi-sidebar::before {
top: auto;
bottom: 0;
}
/* 2026-04-21 DESKTOP: oponentii stivuiti vertical in coloana 180px — umple latimea
(base .opponent-area deja are width:100% + flex:1 1 0; aici override-uim regulile
vechi care forteaza 240/260px fix pe orizontal).
2026-04-21 v3 FIX overlap: flex: 0 0 auto + min-height FIX 86px ca oponentii sa
NU mai poata shrink-ui sub continut (info wrap 2 randuri ~35px + hand 24-28px +
padding 11px = ~76px minim real). Daca nu incap toti, .seat-north scrolleaza
(are overflow-y: auto din baza) — mai bine decat overlap vizual. */
.seat-north > .opponent-area,
.opponent-area {
width: 100%;
min-width: 0;
max-width: 100%;
flex: 0 0 auto; /* NU grow, NU shrink — dimensiune fixa controlata */
min-height: 86px; /* minim content real (info 2 randuri + hand + padding) */
/* Incadrare fix: padding mic, gap mic (continutul se auto-constrange via
overflow-x pe .opponent-hand si ellipsis pe .opponent-name). Adaug
overflow:hidden dar cu margin negativ pe ::before ca sa nu taiem gold accent. */
padding: 5px 7px 6px;
gap: 4px;
overflow: hidden; /* clip spill — previne overlap vizual cand content = tall */
}
/* 2026-04-21 DESKTOP: opponent-info WRAP pe 2 randuri ca sa incapa tot in coloana 180px
(avatar+nume+puncte pe rand 1, timer+count+status pe rand 2). */
.opponent-area .opponent-info {
flex-wrap: wrap;
row-gap: 3px;
column-gap: 4px;
font-size: 10px;
align-items: center;
width: 100%;
min-width: 0;
}
/* Avatar compact pe desktop — 22px in loc de 26px, face loc la nume mai lung */
.opponent-area .opponent-avatar,
.opponent-area .seat-avatar {
width: 22px !important;
height: 22px !important;
min-width: 22px;
flex-shrink: 0;
font-size: 10px;
}
/* Nume oponent — ocupa spatiul ramas pe primul rand, ellipsis la overflow */
.opponent-area .opponent-name {
flex: 1 1 auto;
min-width: 0;
max-width: 90px;
font-size: 10px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Hover expandeaza pe desktop ca sa vezi numele complet, daca e cazul */
.opponent-area .opponent-name:hover {
max-width: 140px;
}
/* Timer, points, tiles-count — compact pe rand 2 cu font mic */
.opponent-area .player-timer {
font-size: 9px;
padding: 1px 4px;
gap: 2px;
flex-shrink: 0;
}
.opponent-area .player-timer .material-symbols-rounded {
font-size: 12px;
}
.opponent-area .opponent-points {
font-size: 9px;
padding: 1px 5px;
flex-shrink: 0;
}
.opponent-area .opponent-tiles-count {
font-size: 9px;
padding: 1px 5px;
min-width: 20px;
flex-shrink: 0;
}
.opponent-area .opponent-status {
font-size: 9px;
flex-shrink: 0;
}
/* Status gol — nu ocupa spatiu */
.opponent-area .opponent-status:empty { display: none; }
/* Hand oponent — 1 rand de tiluri 16×22, scroll orizontal profesional cand depasesc
2026-04-21 v10: scrollbar vizibil inline, gold thin stil casino (match cu activity log).
Reservam 34px inaltime (22 tile + 4 margin + 4 scrollbar + 4 buffer) ca scrollbar-ul
sa fie mereu vizibil fara sa deformeze layout-ul tilurilor. */
.opponent-area .opponent-hand {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 2px;
width: 100%;
max-width: 100%;
min-height: 32px;
max-height: 34px;
overflow-x: auto;
overflow-y: hidden;
flex-shrink: 0;
padding-bottom: 4px; /* buffer intre tile-uri si scrollbar */
/* Firefox — thin gold scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 0, 0.45) rgba(0, 0, 0, 0.25);
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* ═══ WEBKIT SCROLLBAR — orizontal gold inline (Chrome/Edge/Safari) ═══
Stil identic cu activity-log pt. coerenta vizuala premium. */
.opponent-area .opponent-hand::-webkit-scrollbar {
display: block;
height: 5px; /* orizontal: height in loc de width */
}
.opponent-area .opponent-hand::-webkit-scrollbar-track {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.2) 100%);
border-radius: 3px;
margin: 0 2px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
}
.opponent-area .opponent-hand::-webkit-scrollbar-thumb {
background: linear-gradient(90deg,
rgba(255, 215, 0, 0.55) 0%,
rgba(184, 134, 11, 0.65) 100%);
border-radius: 3px;
border: 1px solid rgba(255, 215, 0, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 245, 200, 0.3),
0 0 4px rgba(255, 215, 0, 0.2);
transition: background 180ms ease;
}
.opponent-area .opponent-hand::-webkit-scrollbar-thumb:hover {
background: linear-gradient(90deg,
rgba(255, 235, 150, 0.85) 0%,
rgba(255, 215, 0, 0.9) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 220, 0.5),
0 0 8px rgba(255, 215, 0, 0.45);
}
.opponent-area .opponent-hand::-webkit-scrollbar-thumb:active {
background: linear-gradient(90deg,
rgba(255, 245, 180, 0.95) 0%,
rgba(255, 215, 0, 1) 100%);
}
.opponent-area .opponent-hand::-webkit-scrollbar-corner {
background: transparent;
}
/* Piese oponent pe desktop — 20×28 (marit fata de 16×22 ca sa se vada complet) */
.opponent-area .opponent-tile-back {
width: 20px;
height: 28px;
flex-shrink: 0;
}
/* 2026-04-21 v3 DESKTOP: ARUNCATE = single row horizontal (FIX 72px), ACTIVITATE = restul
sidebar-ului (flex:1, vizibila jos). Schimbare fata de v2 (multi-row discard) ca sa
se vada activity log complet, nu doar 3-4 pastile taiate jos. */
.remi-sidebar .sidebar-section-discard {
flex: 0 0 auto; /* FIX, nu grow — cedam spatiul la log */
min-height: 72px;
max-height: 72px;
}
/* Override grid multi-row (base .discard-history-strip) → single row horizontal */
.remi-sidebar .discard-history-strip {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
grid-template-columns: none !important;
grid-auto-rows: initial !important;
max-height: 50px;
min-height: 50px;
gap: 3px;
padding: 4px 6px;
overflow-x: auto;
overflow-y: hidden;
align-items: center;
}
.remi-sidebar .discard-history-tile {
width: 20px;
height: 28px;
font-size: 11px;
flex-shrink: 0;
}
/* 2026-04-30 DESKTOP: Activity log GROW — umple sidebarul pana jos.
flex:1 cu min-height 0 ca sa NU iasa din parent + max sa nu se umfle peste. */
.remi-sidebar .sidebar-section-log {
flex: 1 1 0; /* grow + shrink, fara baza fixa */
min-height: 0; /* CRITIC: permite shrink in parent flex */
max-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.remi-sidebar .sidebar-section-log .activity-log {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.remi-sidebar .sidebar-section-log .activity-log-body {
flex: 1 1 auto;
min-height: 0;
max-height: none; /* fara plafon — body se intinde cu sectiunea */
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 0, 0.45) rgba(0, 0, 0, 0.2);
scroll-behavior: auto;
overscroll-behavior: contain;
padding-right: 6px;
}
.remi-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar {
width: 6px;
}
.remi-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-track {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.2) 100%);
border-radius: 3px;
margin: 2px 0;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.4);
}
.remi-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,
rgba(255, 215, 0, 0.6) 0%,
rgba(184, 134, 11, 0.7) 100%);
border-radius: 3px;
border: 1px solid rgba(255, 215, 0, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 245, 200, 0.3),
0 0 4px rgba(255, 215, 0, 0.2);
transition: background 180ms ease;
}
.remi-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg,
rgba(255, 235, 150, 0.85) 0%,
rgba(255, 215, 0, 0.9) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 220, 0.5),
0 0 8px rgba(255, 215, 0, 0.45);
}
.remi-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-thumb:active {
background: linear-gradient(180deg,
rgba(255, 245, 180, 0.95) 0%,
rgba(255, 215, 0, 1) 100%);
}
.remi-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-corner {
background: transparent;
}
.remi-sidebar .pile-area {
min-height: 48px;
padding: 4px 2px;
}
/* 2026-04-21 v3 DESKTOP: 4 zone etalare VERTICALE → coloane inguste (~200-245px).
Meld group = INLINE (horizontal, tiles pe un rand) — nu wrap, nu shrink.
Daca grupul e prea lat (>zona), scroll orizontal e activat in baza (.etalare-zone
.table-meld-group linia ~4700) cu scrollbar VIZIBIL subtle auriu + fade mask la
margine dreapta. Aici doar boost la dimensiune pe desktop (4px vs 3px mobile).
NOTA v5: overflow-y: visible — tiles cu box-shadow vertical nu sunt taiate. */
.etalare-zone .table-meld-group::-webkit-scrollbar {
height: 4px;
}
/* 2026-04-21 v5 DESKTOP FIX: REVERTAT max-height + align-self: start — cauzau piese
invizibile (align-self: start inhiba stretch la grid cell → .etalare-scroll cu
flex:1 1 0 nu mai primea inaltime determinata → overflow:hidden pe zona taia continut).
Zone raman la stretch default (umple celula grid), scroll intern functional. */
/* ═══ SCROLLBAR PROFESIONAL pe .etalare-scroll (fiecare zona) ═══
Acelasi stil ca activity-log — gradient auriu multi-state, track subtle. */
.etalare-scroll {
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 0, 0.45) rgba(0, 0, 0, 0.2);
padding-right: 6px; /* textul nu se lipeste de scrollbar */
}
.etalare-scroll::-webkit-scrollbar {
width: 6px;
}
.etalare-scroll::-webkit-scrollbar-track {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.2) 100%);
border-radius: 3px;
margin: 2px 0;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.4);
}
.etalare-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,
rgba(255, 215, 0, 0.6) 0%,
rgba(184, 134, 11, 0.7) 100%);
border-radius: 3px;
border: 1px solid rgba(255, 215, 0, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 245, 200, 0.3),
0 0 4px rgba(255, 215, 0, 0.2);
transition: background 180ms ease;
}
.etalare-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg,
rgba(255, 235, 150, 0.85) 0%,
rgba(255, 215, 0, 0.9) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 220, 0.5),
0 0 8px rgba(255, 215, 0, 0.45);
}
.etalare-scroll::-webkit-scrollbar-thumb:active {
background: linear-gradient(180deg,
rgba(255, 245, 180, 0.95) 0%,
rgba(255, 215, 0, 1) 100%);
}
.etalare-scroll::-webkit-scrollbar-corner {
background: transparent;
}
/* 2026-04-21 DESKTOP: seat-south MAI COMPACT pe desktop — reducem tile-height de la
60px la 48px (cascada prin --tile-height local pe .seat-south), plus padding mai mic.
Efect cumulat pe inaltimea stativului:
- .player-hand height = calc(2 * 48 + 29) = 125px (era 2*60+29 = 149px, saved 24px)
- player-hand padding: 10/12 → 6/8 (saved 8px)
- info-bar padding: 4px → 2px (saved 4px)
2026-04-21 v9 FIX RAMA: seat-south primeste padding 6px 4px (era 0) ca rama lemn
(.player-area border 1px + border-radius 6px + box-shadow 0 6px 16px 0.5 alpha)
sa aibă unde sa se deseneze. Fara padding, box-shadow-ul si colturile rotunjite
sunt clipped de grid boundary. */
.seat-south {
padding: 6px 4px;
/* Override CSS vars local — cascada la .seat-south .player-hand .tile si la
calc-ul height din .player-hand (2 * var(--tile-height) + 29). Celelalte
locuri (etalare, sidebar, aruncate) primesc tile-height din :root neschimbat. */
--tile-width: 38px;
--tile-height: 48px;
--tile-font: 19px;
}
.seat-south .player-hand {
padding: 6px 30px 8px;
}
.seat-south .player-info-bar {
padding: 2px 8px;
}
/* 2026-04-21 v7 DESKTOP: ANIMATIA TURN — border auriu SOLID 3px (outline, NU ocupa
layout) + inset glow puternic + outer glow pulsant. Imposibil de ratat.
Folosesc `outline` (nu `border`) pentru granita vizibila pt ca border-ul ar
afecta dimensiunile si ar impinge continutul — outline-ul pluteste deasupra. */
.etalare-zone.zone-active {
z-index: 3;
position: relative;
border-color: rgba(255, 215, 0, 0.85) !important;
outline: 3px solid rgba(255, 215, 0, 0.9);
outline-offset: -2px;
background:
radial-gradient(ellipse 80% 60% at 50% 0%,
rgba(255, 215, 0, 0.1) 0%,
transparent 60%),
linear-gradient(165deg,
rgba(18, 70, 32, 0.65) 0%,
rgba(8, 50, 22, 0.75) 100%) !important;
animation: zoneActivePulseDesktop 2.2s ease-in-out infinite !important;
}
.etalare-zone.zone-active::before,
.etalare-zone.zone-active::after {
border-color: rgba(255, 235, 130, 1) !important;
box-shadow: 0 0 16px rgba(255, 215, 0, 0.85) !important;
}
/* Label chip pe zona activa — background auriu puternic, nume negru lizibil */
.etalare-zone.zone-active[data-label]:not(:has(.etalare-label))::before {
background: linear-gradient(135deg,
rgba(255, 235, 130, 0.95),
rgba(255, 195, 50, 0.85)) !important;
color: #1a1208 !important;
border-color: rgba(255, 245, 180, 1) !important;
font-weight: 700 !important;
box-shadow:
0 0 12px rgba(255, 215, 0, 0.7),
0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
/* Keyframes desktop — pulse DRAMATIC: outer glow 45px 0.65 alpha la peak,
inset glow schimba intensitatea pt senzatie de "respiratie" pe masa. */
@keyframes zoneActivePulseDesktop {
0%, 100% {
box-shadow:
inset 0 0 28px rgba(255, 215, 0, 0.25),
inset 0 1px 3px rgba(0, 0, 0, 0.3),
0 0 28px 3px rgba(255, 215, 0, 0.45);
}
50% {
box-shadow:
inset 0 0 44px rgba(255, 215, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3),
0 0 48px 6px rgba(255, 215, 0, 0.7);
}
}
/* Seat-south wooden rack glow — pe desktop stativul e mai compact (125px inaltime),
padding:0 deci outer glow risca sa fie clipped de grid boundary.
Fix: z-index + glow mai pronuntat (35px la peak) + position relative ca glow-ul
sa iasa deasupra zone etalare adiacente. Animation override cu keyframes desktop. */
.seat-south {
position: relative;
z-index: 2;
}
.seat-south .player-area.active-turn {
animation: seatSouthTurnGlowDesktop 1.8s ease-in-out infinite !important;
}
@keyframes seatSouthTurnGlowDesktop {
0%, 100% {
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.35),
0 1px 3px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 245, 220, 0.7),
inset 0 -2px 3px rgba(110, 70, 35, 0.25),
inset 0 0 0 1px rgba(180, 130, 60, 0.45),
0 0 14px 2px rgba(255, 200, 80, 0.4);
}
50% {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.45),
0 1px 3px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 250, 230, 0.85),
inset 0 -2px 3px rgba(110, 70, 35, 0.25),
inset 0 0 0 1px rgba(230, 180, 90, 0.75),
0 0 34px 4px rgba(255, 200, 80, 0.75);
}
}
/* ═══════════════════════════════════════════════════════════════════════
2026-04-21 DESKTOP v10 — PREMIUM SIDEBAR CASINO STYLE
Look profesional pentru coloana dreapta (seat-north + remi-sidebar).
Target: 180-200px latime, arata ca un panel ornat de casino cu:
- Double-border (exterior lemn intunecat + interior hairline auriu)
- Felt emerald texture (matcheaza masa, dar mai intunecat/elegant)
- Section headers cu label auriu, uppercase, letter-spaced + underline subtile
- Separator decorativ intre sectiuni (diamant central + linii aurii)
- Inset highlight top (reflection glossy) + ambient drop-shadow
- Pile/atu/discard/log polish: spacing crescut, borders mai precise
═══════════════════════════════════════════════════════════════════════ */
/* ── Wrapper sidebar — emerald premium felt cu bronze/gold double-border ── */
.remi-sidebar {
background:
/* Highlight top — subtile gloss reflection */
linear-gradient(180deg,
rgba(255, 235, 150, 0.05) 0%,
transparent 6%,
transparent 100%),
/* Micro-noise felt texture */
repeating-linear-gradient(115deg,
transparent 0, transparent 2px,
rgba(255, 255, 255, 0.012) 2px, rgba(255, 255, 255, 0.012) 3px),
repeating-linear-gradient(25deg,
transparent 0, transparent 2px,
rgba(0, 0, 0, 0.025) 2px, rgba(0, 0, 0, 0.025) 3px),
/* Vignette soft — center highlight, dark edges */
radial-gradient(ellipse 120% 80% at 50% 0%,
rgba(20, 55, 30, 0.5) 0%,
rgba(8, 28, 14, 0.85) 55%,
rgba(3, 14, 6, 0.95) 100%);
/* Dark wood border outer + gold hairline inset (via box-shadow) */
border: 1px solid rgba(62, 38, 14, 0.9) !important;
border-top: none !important; /* seamless cu seat-north deasupra */
border-radius: 0 0 12px 12px;
padding: 8px 6px !important;
box-shadow:
/* Gold hairline inset — the real premium accent */
inset 0 0 0 1px rgba(255, 215, 0, 0.22),
/* Top gloss */
inset 0 1px 0 rgba(255, 245, 200, 0.1),
/* Inner depth vignette */
inset 0 0 24px rgba(0, 0, 0, 0.45),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
/* Outer drop shadow — floats on the felt */
0 4px 14px rgba(0, 0, 0, 0.5),
0 1px 3px rgba(0, 0, 0, 0.4);
gap: 6px;
position: relative;
}
/* Unitate vizuala cu seat-north (deja seamless via margin-bottom:-8px) */
.seat-north {
/* Enhance seat-north cu aceleasi multi-layer gradient ca sidebar-ul */
background:
linear-gradient(180deg,
rgba(255, 235, 150, 0.06) 0%,
transparent 6%,
transparent 100%),
repeating-linear-gradient(115deg,
transparent 0, transparent 2px,
rgba(255, 255, 255, 0.012) 2px, rgba(255, 255, 255, 0.012) 3px),
repeating-linear-gradient(25deg,
transparent 0, transparent 2px,
rgba(0, 0, 0, 0.025) 2px, rgba(0, 0, 0, 0.025) 3px),
radial-gradient(ellipse 120% 80% at 50% 100%,
rgba(20, 55, 30, 0.5) 0%,
rgba(8, 28, 14, 0.85) 55%,
rgba(3, 14, 6, 0.95) 100%) !important;
border: 1px solid rgba(62, 38, 14, 0.9) !important;
border-bottom: none !important;
border-radius: 12px 12px 0 0 !important;
box-shadow:
inset 0 0 0 1px rgba(255, 215, 0, 0.22),
inset 0 1px 0 rgba(255, 245, 200, 0.15),
inset 0 0 24px rgba(0, 0, 0, 0.45),
0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Bronze decorative corner ornaments in the sidebar 4 corners */
.remi-sidebar::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(184, 134, 11, 0.55) 15%,
rgba(255, 215, 0, 0.65) 50%,
rgba(184, 134, 11, 0.55) 85%,
transparent 100%);
border-radius: 0 0 12px 12px;
opacity: 0.7;
pointer-events: none;
}
/* Override ::before din baza — lasa just seamless cu seat-north */
.remi-sidebar::before {
display: none;
}
/* ── Section wrapper — subtle card look ── */
.remi-sidebar .sidebar-section-piles,
.remi-sidebar .sidebar-section-discard,
.remi-sidebar .sidebar-section-log {
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.015) 0%,
transparent 100%);
border-radius: 6px;
position: relative;
}
/* Separator intre sectiuni — linie aurie cu diamant central */
.remi-sidebar .sidebar-section-piles::after,
.remi-sidebar .sidebar-section-discard::after {
content: '';
position: absolute;
bottom: -4px;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(184, 134, 11, 0.3) 20%,
rgba(255, 215, 0, 0.55) 50%,
rgba(184, 134, 11, 0.3) 80%,
transparent 100%);
pointer-events: none;
}
/* Mic diamant auriu in centrul separator-ului */
.remi-sidebar .sidebar-section-piles > .separator-diamond,
.remi-sidebar .sidebar-section-discard > .separator-diamond {
display: none; /* placeholder — folosim ::before pe urmatoarea sectiune */
}
/* ═══ SECTION HEADERS — Premium gold bar ═══ */
.remi-sidebar .sidebar-section-header {
background:
linear-gradient(180deg,
rgba(255, 215, 0, 0.12) 0%,
rgba(184, 134, 11, 0.08) 50%,
rgba(0, 0, 0, 0.25) 100%) !important;
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg,
transparent 0%,
rgba(255, 215, 0, 0.4) 20%,
rgba(255, 235, 150, 0.6) 50%,
rgba(255, 215, 0, 0.4) 80%,
transparent 100%) 1;
padding: 4px 8px !important;
font-size: 10px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
color: rgba(255, 235, 150, 0.95) !important;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.6),
0 0 8px rgba(255, 215, 0, 0.3);
box-shadow:
inset 0 1px 0 rgba(255, 245, 200, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
position: relative;
}
.remi-sidebar .sidebar-section-header .material-symbols-rounded {
font-size: 14px !important;
color: rgba(255, 215, 0, 0.85) !important;
text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}
.remi-sidebar .sidebar-section-header .section-title {
flex: 1;
}
/* Count badge refined — gold pill glossy */
.remi-sidebar .sidebar-section-header .discard-count-badge {
background:
linear-gradient(180deg,
rgba(255, 235, 150, 0.35) 0%,
rgba(184, 134, 11, 0.25) 100%);
border: 1px solid rgba(255, 215, 0, 0.55);
color: rgba(255, 250, 215, 1) !important;
font-size: 10px !important;
font-weight: 800 !important;
padding: 1px 7px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 2px rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
/* ═══ PILE AREA — draw + atu ═══ */
.remi-sidebar .pile-area {
padding: 8px 4px !important;
min-height: 64px !important;
background:
radial-gradient(ellipse 80% 60% at 50% 50%,
rgba(255, 215, 0, 0.04) 0%,
transparent 70%);
border-radius: 6px;
}
/* ═══ DISCARD STRIP — Aruncate premium ═══ */
.remi-sidebar .discard-history-strip {
background:
linear-gradient(180deg,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.1) 100%);
border-radius: 4px;
border: 1px solid rgba(255, 215, 0, 0.08);
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.4),
inset 0 0 8px rgba(0, 0, 0, 0.2);
padding: 5px 6px !important;
margin: 0 2px;
}
.remi-sidebar .discard-history-tile {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.remi-sidebar .discard-history-tile:hover {
transform: translateY(-2px);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.5),
0 0 8px rgba(255, 215, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* ═══ ACTIVITY LOG — container premium ═══ */
.remi-sidebar .sidebar-section-log .activity-log-body {
background:
linear-gradient(180deg,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.15) 100%);
border-radius: 4px;
border: 1px solid rgba(255, 215, 0, 0.08);
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.4),
inset 0 0 8px rgba(0, 0, 0, 0.2);
padding: 6px 8px 6px 8px !important;
margin: 2px;
}
/* Activity entries — compact premium */
.remi-sidebar .activity-log-body .activity-entry,
.remi-sidebar .activity-log-body .log-entry {
font-size: 10px;
padding: 3px 6px;
border-radius: 3px;
margin-bottom: 2px;
background: rgba(255, 255, 255, 0.02);
border-left: 2px solid rgba(255, 215, 0, 0.25);
transition: background 0.2s ease, border-color 0.2s ease;
}
.remi-sidebar .activity-log-body .activity-entry:hover,
.remi-sidebar .activity-log-body .log-entry:hover {
background: rgba(255, 215, 0, 0.05);
border-left-color: rgba(255, 215, 0, 0.6);
}
/* ═══ ATU DISPLAY — ornate badge ═══ */
.remi-sidebar .atu-display {
position: relative;
}
.remi-sidebar .atu-display::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(255, 215, 0, 0.15) 0%,
transparent 70%);
pointer-events: none;
z-index: -1;
}
/* ═══ DRAW PILE — subtle glow ═══ */
.remi-sidebar .draw-pile {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
transition: filter 0.25s ease, transform 0.25s ease;
}
.remi-sidebar .draw-pile:hover {
filter: drop-shadow(0 3px 8px rgba(255, 215, 0, 0.4));
transform: translateY(-1px);
}
/* ═══ LABEL "DRAW" / "ATU" — gold premium ═══ */
.remi-sidebar .pile-label {
font-size: 8px !important;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6px;
color: rgba(255, 215, 0, 0.75);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
margin-top: 4px !important;
}
/* Keep context-panel fixed (override .col-auto) */
.context-panel:not(.hidden) {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
min-width: 320px !important;
}
/* ═══════════════════════════════════════════════════════════════════════
2026-04-21 DESKTOP v11 — PREMIUM MASA CASINO STYLE
Look profesional pentru intreaga masa (.game-play-view). Match sidebar.
- Multi-layer premium gradient (gloss top + ambient gold + felt + noise + vignette)
- Double-inset ring: dark contrast + gold hairline (matched to sidebar)
- Enhanced wood frame cu reinforced bronze gold trim
- Top + bottom gold hairline strips (seal auriu sus si jos)
- Ambient corner gold auras + richer watermark depth
- Corner ornaments decorative (gold diamonds in 4 colturi)
═══════════════════════════════════════════════════════════════════════ */
.game-play-view {
/* Enhanced multi-layer premium background */
background:
/* Top gloss highlight — subtle reflection */
linear-gradient(180deg,
rgba(255, 235, 150, 0.045) 0%,
transparent 6%,
transparent 100%),
/* Ambient gold aura — corners */
radial-gradient(ellipse 60% 30% at 15% 12%,
rgba(255, 215, 0, 0.035) 0%,
transparent 55%),
radial-gradient(ellipse 60% 30% at 85% 12%,
rgba(255, 215, 0, 0.035) 0%,
transparent 55%),
radial-gradient(ellipse 60% 30% at 15% 88%,
rgba(184, 134, 11, 0.03) 0%,
transparent 55%),
radial-gradient(ellipse 60% 30% at 85% 88%,
rgba(184, 134, 11, 0.03) 0%,
transparent 55%),
/* Spot light — soft center highlight */
radial-gradient(ellipse 80% 50% at 50% 20%,
rgba(255, 255, 240, 0.11) 0%, transparent 55%),
/* Deep vignette — darker corners for focus */
radial-gradient(ellipse at 50% 50%,
transparent 40%, rgba(0, 0, 0, 0.35) 100%),
/* Cross-hatched felt fibers — microscopic texture */
repeating-linear-gradient(27deg,
transparent 0, transparent 1.5px,
rgba(0, 0, 0, 0.028) 1.5px, rgba(0, 0, 0, 0.028) 2px),
repeating-linear-gradient(117deg,
transparent 0, transparent 1.5px,
rgba(0, 0, 0, 0.022) 1.5px, rgba(0, 0, 0, 0.022) 2px),
/* Noise */
repeating-linear-gradient(45deg,
transparent 0, transparent 3px,
rgba(255, 255, 255, 0.012) 3px, rgba(255, 255, 255, 0.012) 4px),
/* Richer deeper emerald felt gradient */
linear-gradient(175deg,
#218843 0%,
#1e803b 18%,
#1b7533 38%,
#176a2c 58%,
#135121 78%,
#0e421a 100%) !important;
/* Double-inset ring + wood frame reinforced + ambient drop */
box-shadow:
/* Gold hairline inset — the real premium accent (matches sidebar) */
inset 0 0 0 1px rgba(255, 215, 0, 0.28),
/* Dark contrast ring — deepens the gold */
inset 0 0 0 3px rgba(0, 0, 0, 0.45),
/* Top gloss reflection */
inset 0 2px 0 rgba(255, 245, 200, 0.08),
/* Deep inner vignette */
inset 0 0 55px rgba(0, 0, 0, 0.4),
inset 0 0 14px rgba(0, 0, 0, 0.18),
/* Wood frame reinforced bronze gold trim */
0 0 0 1px #2a1808,
0 0 0 3px #C09970,
0 0 0 4px #3d2510,
/* Ambient drop shadow — floats */
0 8px 32px rgba(0, 0, 0, 0.58),
0 2px 6px rgba(0, 0, 0, 0.42) !important;
}
/* ── Decorative top + bottom hairline seals + corner diamonds ── */
.game-play-view::after {
content: '';
position: absolute;
top: 4px; right: 4px; bottom: 4px; left: 4px;
pointer-events: none;
z-index: 3;
border-radius: 8px;
background:
/* TOP gold hairline strip */
linear-gradient(90deg,
transparent 0%,
rgba(184, 134, 11, 0) 10%,
rgba(255, 215, 0, 0.38) 50%,
rgba(184, 134, 11, 0) 90%,
transparent 100%) top / 100% 1px no-repeat,
/* BOTTOM gold hairline strip */
linear-gradient(90deg,
transparent 0%,
rgba(184, 134, 11, 0) 10%,
rgba(255, 215, 0, 0.32) 50%,
rgba(184, 134, 11, 0) 90%,
transparent 100%) bottom / 100% 1px no-repeat,
/* Corner diamonds — subtle gold dots in 4 colturi */
radial-gradient(circle 3px at 10px 10px,
rgba(255, 215, 0, 0.55) 0%,
rgba(184, 134, 11, 0.35) 45%,
transparent 70%) top left / 20px 20px no-repeat,
radial-gradient(circle 3px at 10px 10px,
rgba(255, 215, 0, 0.55) 0%,
rgba(184, 134, 11, 0.35) 45%,
transparent 70%) top right / 20px 20px no-repeat,
radial-gradient(circle 3px at 10px 10px,
rgba(255, 215, 0, 0.4) 0%,
rgba(184, 134, 11, 0.25) 45%,
transparent 70%) bottom left / 20px 20px no-repeat,
radial-gradient(circle 3px at 10px 10px,
rgba(255, 215, 0, 0.4) 0%,
rgba(184, 134, 11, 0.25) 45%,
transparent 70%) bottom right / 20px 20px no-repeat;
}
/* (aici era întărirea monogramei „R" — a plecat odată cu ea; pecetea îşi
ţine singură adâncimea, din cele trei straturi de relief) */
/* ── Etalare zones — premium emerald card cu gold inset hairline ── */
.etalare-zone {
background:
/* Top gloss */
linear-gradient(180deg,
rgba(255, 235, 150, 0.03) 0%,
transparent 8%,
transparent 100%),
/* Subtle noise */
repeating-linear-gradient(115deg,
transparent 0, transparent 2px,
rgba(255, 255, 255, 0.01) 2px, rgba(255, 255, 255, 0.01) 3px),
repeating-linear-gradient(25deg,
transparent 0, transparent 2px,
rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 3px),
/* Darker inset felt gradient */
radial-gradient(ellipse 110% 80% at 50% 0%,
rgba(22, 58, 32, 0.55) 0%,
rgba(10, 32, 16, 0.75) 55%,
rgba(5, 18, 8, 0.88) 100%) !important;
border: 1px solid rgba(62, 38, 14, 0.75) !important;
border-radius: 8px !important;
box-shadow:
/* Gold hairline inset */
inset 0 0 0 1px rgba(255, 215, 0, 0.18),
/* Top gloss */
inset 0 1px 0 rgba(255, 245, 200, 0.08),
/* Inner depth */
inset 0 0 18px rgba(0, 0, 0, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.45),
/* Drop shadow */
0 2px 8px rgba(0, 0, 0, 0.35),
0 1px 2px rgba(0, 0, 0, 0.3) !important;
position: relative;
}
/* Boost subtil pe corner brackets-urile existente — mai aurii pe masa premium */
.etalare-zone::before,
.etalare-zone::after {
border-color: rgba(255, 215, 0, 0.42) !important;
}
/* Enhance player label chip — gold premium pe masa premium */
.etalare-zone[data-label]:not(:has(.etalare-label))::before {
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.18),
rgba(184, 134, 11, 0.1)) !important;
border-color: rgba(255, 215, 0, 0.32) !important;
color: rgba(255, 235, 150, 0.92) !important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6) !important;
}
}
/* Large Desktop (≥ 992px) */
@media (min-width: 992px) {
/* 2026-04-21 DESKTOP: la fel ca la 768px — opponents umplu latimea coloanei 180px
(inlocuim regula veche care forta 260px fix pentru layout orizontal).
2026-04-21 v3 FIX overlap: flex 0 0 auto + min-height 86px (identic cu 768px),
nu mai folosim flex: 1 1 0 care lasa content-ul sa overflow. */
.seat-north > .opponent-area,
.opponent-area {
width: 100%;
min-width: 0;
max-width: 100%;
flex: 0 0 auto;
min-height: 86px;
overflow: hidden;
}
/* Padding/gap 8px — aceleasi multipli ca pe mobile, consistent */
.game-play-view { padding: 8px; gap: 8px; }
.remi-sidebar { max-width: 200px; }
.lobby-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Extra Large Desktop (≥ 1200px) */
@media (min-width: 1200px) {
.lobby-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Small tablets (≥ 576px) */
@media (min-width: 576px) {
.lobby-grid { grid-template-columns: repeat(2, 1fr); }
.lobby-stats-bar { gap: 12px; }
}
/* Large desktop (≥ 1366px) */
@media (min-width: 1366px) {
.lobby-grid { grid-template-columns: repeat(4, 1fr); }
.game-play-view { padding: 16px; }
/* Keep context-panel fixed at 360px on big desktop (override .col-auto) */
.context-panel:not(.hidden) {
flex: 0 0 360px !important;
width: 360px !important;
max-width: 360px !important;
min-width: 360px !important;
}
.player-hand { gap: 4px; }
}
/* Very small phones (≤ 375px) */
@media (max-width: 375px) {
.top-bar { padding: 4px 10px; }
.brand-title { font-size: 13px; letter-spacing: 0.6px; }
.brand-section .brand-title::after, .brand-section .brand-title .brand-tag { display: none; } /* Hide tagline on very small */
.brand-icon { width: 26px; height: 34px; }
.brand-icon::after { font-size: 18px; }
.nav-bar-btn { min-width: 40px; }
.nav-bar-label { display: none; }
.lobby-btn span:not(.material-symbols-rounded) { display: none; }
/* Keep Create Masa button text visible even on very small phones */
.lobby-btn-create span:not(.material-symbols-rounded) { display: inline !important; }
}
/* Short landscape with game active */
@media (orientation: landscape) and (max-height: 400px) {
/* Tiny landscape: viewport <400px h — lasa scroll vertical ca fallback dacă layout
depăşeşte (mai bine scroll decât conținut tăiat). */
body.mp-game-active .main-content,
body.game-active .main-content { overflow-y: auto !important; }
.game-play-view { overflow-y: auto !important; }
.top-bar { height: 36px; min-height: 36px; padding: 2px 10px; }
.top-bar::after { display: none; }
.brand-title { font-size: 12px; }
.brand-section .brand-title::after, .brand-section .brand-title .brand-tag { display: none; }
.brand-icon { width: 24px; height: 30px; }
.brand-icon::after { font-size: 16px; }
.action-btn { width: 30px; height: 30px; }
.action-btn .material-symbols-rounded { font-size: 17px; }
.nav-rail { height: 36px; }
.nav-bar-btn { height: 32px; }
.nav-bar-label { display: none; }
body.game-active .top-bar { display: none; }
body.game-active .nav-rail { height: 32px; }
}
/* Mobile — hide tagline where space is tight */
@media (max-width: 640px) {
.brand-section .brand-title::after, .brand-section .brand-title .brand-tag {
font-size: 7px;
letter-spacing: 1.5px;
margin-top: 1px;
}
}
/* Touch devices */
@media (hover: none) and (pointer: coarse) {
.nav-bar-btn { min-height: 44px; }
.lobby-btn { min-height: 44px; }
.drawer-item { min-height: 44px; }
.mp-opt-btn { min-height: 44px; }
.ct-tab { min-height: 40px; }
}
/* ================================================================================================
26. GAME ACTIVE — full-screen game mode (all viewports)
================================================================================================ */
body.game-active .app-container { padding: 0 !important; }
/* Keep header and footer visible during game */
/* ================================================================================================
26a. MOBILE PORTRAIT GAME — maximize board space
================================================================================================ */
@media (max-width: 480px) and (orientation: portrait) {
:root {
/* Nav-rail compact pe telefon mic: status-bar 28px + butoane compacte 38px + pad 6px = 72px */
--nav-rail-h: 72px;
}
/* Nav-rail compact — asigura vizibilitatea */
.nav-rail {
height: var(--nav-rail-h) !important;
min-height: var(--nav-rail-h) !important;
max-height: var(--nav-rail-h) !important;
padding-top: 4px !important;
padding-bottom: calc(var(--sab, 0px) + 4px) !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
z-index: 500 !important;
}
.nav-bar-primary { gap: 0; }
.nav-bar-btn {
padding: 4px 8px !important;
min-height: 0 !important;
position: relative;
}
/* Expand touch target to 44px without changing visual size */
.nav-bar-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 44px;
transform: translate(-50%, -50%);
}
.nav-bar-btn .material-symbols-rounded { font-size: 18px !important; }
.nav-bar-label { font-size: 9px !important; }
/* Full-screen game — remove all padding */
body.game-active .app-container { padding: 0 !important; }
}
/* Telefon foarte mic (≤360px) — piese si mai mici */
@media (max-width: 360px) and (orientation: portrait) {
:root {
--tile-width: 28px;
--tile-height: 40px;
--tile-font: 14px;
}
/* 2026-04-21: dimensiunea e gestionata de overrides portrait (flex 1 1 0) — doar padding compact */
.opponent-area { padding: 2px 4px 3px; }
.opponent-name { font-size: 9px; max-width: 38px; }
.opponent-avatar { width: 18px !important; height: 18px !important; }
/* Pe mobil mic: ascunde elementele care nu incap (avatar+nume+tiles-count raman) */
.opponent-info .opponent-status,
.opponent-info .opponent-points,
.opponent-info .player-timer { display: none; }
.opponent-info .seat-avatar { width: 16px; height: 16px; }
/* ═══ SMALL PHONES (≤360px) — 8px-aligned pt. 360×640 ═══
Viewport: 640px − 34 top − 60 nav = 546px, − 16 border/padding = 530px inner
hand-top: 56px (8×7)
zone1/2: minmax(96, 1fr) (96 = 8×12)
sidebar: 104px (8×13)
hand-bot: auto ~120px
Total min: 56 + 192 + 104 + 120 = 472px ✓ fits 530px */
.opponent-area { padding: 2px 4px 3px !important; }
.seat-north { min-height: 56px; max-height: 56px; }
.game-play-view {
grid-template-rows:
56px
minmax(96px, 1fr)
minmax(96px, 1fr)
104px
auto;
}
/* 360px: override pentru [data-players="N"] (altfel rula 767px-portrait cu 120px ar domina) */
.game-play-view[data-players="2"],
.game-play-view[data-players="3"],
.game-play-view[data-players="4"] {
grid-template-rows:
56px
minmax(96px, 1fr)
minmax(96px, 1fr)
104px
auto;
}
.remi-sidebar {
height: 104px;
padding: 0 !important;
gap: 8px !important;
grid-template-rows: minmax(64px, 1fr) 24px;
}
.remi-sidebar .draw-pile,
.remi-sidebar .discard-pile { transform: scale(0.72); margin: -5px -3px; }
.remi-sidebar .atu-display { transform: none; margin: 0; }
.remi-sidebar .atu-display.atu-beside-pile .atu-tile-display {
transform: scale(0.80); margin: -3px 0 -4px;
}
.remi-sidebar .atu-display.atu-beside-pile .atu-label-small { font-size: 9px; }
.remi-sidebar .sidebar-section-discard { min-height: 72px; max-height: 72px; }
.remi-sidebar .discard-history-strip {
min-height: 52px;
max-height: 52px;
padding: 4px 6px 4px 4px;
overflow-y: hidden;
}
.remi-sidebar .discard-history-tile {
width: 22px;
height: 30px;
font-size: 12px;
font-weight: 700;
}
/* Activity log ecrane f. mici */
.remi-sidebar .activity-log { height: 24px; min-height: 24px; max-height: 24px; }
.remi-sidebar .activity-log-entry { font-size: 9px; padding: 1px 5px; }
.remi-sidebar .activity-log-header .material-symbols-rounded { font-size: 11px; }
}
/* ================================================================================================
26b. PRINT MEDIA
================================================================================================ */
@media print {
.nav-rail,
.drawer-overlay,
.drawer-panel,
.context-panel,
.orientation-warning,
.immersive-toggle-float,
.top-bar .actions-section,
.game-loader,
.toast-container,
#fab,
.mp-modal-overlay { display: none !important; }
body { background: white !important; color: black !important; }
.app-container { overflow: visible !important; }
}
/* ================================================================================================
26c. FULLSCREEN DISPLAY MODE
================================================================================================ */
/* Fullscreen (aplicația Android): NU ascundem footerul. Regula veche îl făcea
display:none — în APK dispărea, deși în PWA (standalone) se vedea. Primește
același tratament ca în standalone: loc pentru bara de gesturi. */
@media (display-mode: fullscreen) {
.top-bar { padding-top: max(4px, env(safe-area-inset-top)); }
.nav-rail { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}
/* ================================================================================================
26d. STANDALONE PWA DISPLAY MODE
================================================================================================ */
@media (display-mode: standalone) {
.top-bar { padding-top: max(4px, env(safe-area-inset-top)); }
.nav-rail { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}
/* ================================================================================================
27. REDUCED MOTION PREFERENCES
================================================================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.lobby-status-dot,
.lobby-card,
.lobby-card.lc-waiting,
.lc-status-badge,
.lobby-stats-bar .stat-item,
.lobby-ai-play-btn::after,
.lobby-btn-quick::after,
.lobby-btn-create,
.lc-chip .material-symbols-rounded,
.lobby-grid::before,
.balance-badge.balance-updated,
.double-game-banner {
animation: none !important;
}
}
/* ================================================================================================
27. UTILITIES
================================================================================================ */
/* Hide/Show — Bootstrap handles d-none, d-flex, d-block; DO NOT override here
as it breaks responsive utilities (d-sm-inline, d-md-none, etc.) */
.hidden { display: none !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
/* Flex */
.flex-1 { flex: 1 !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-fill { flex: 1 1 auto !important; }
/* Alignment */
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
/* Text */
.text-center { text-align: center !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Spacing */
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mt-2 { margin-top: 8px !important; }
.p-0 { padding: 0 !important; }
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 16px !important; }
/* Position */
.position-relative { position: relative !important; }
.position-fixed { position: fixed !important; }
/* Sizing */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
/* Overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
/* Bootstrap compatibility */
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.row { display: flex; flex-wrap: wrap; }
.start-0 { left: 0 !important; }
.top-0 { top: 0 !important; }
/* ================================================================================================
28. CHAT PANEL STYLES (context panel - chat)
================================================================================================ */
.chat-messages {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 8px;
}
.chat-message {
display: flex;
gap: 8px;
padding: 6px 8px;
border-radius: var(--remi-radius-xs);
font-size: 13px;
transition: background 0.2s;
}
.chat-message:hover {
background: var(--glass-bg);
}
.chat-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 10px;
color: white;
}
.chat-body { flex: 1; min-width: 0; }
.chat-username {
font-weight: 700;
font-size: 12px;
color: var(--remi-accent);
}
.chat-text {
color: var(--remi-text);
word-break: break-word;
}
.chat-time {
font-size: 10px;
color: var(--remi-text-muted);
}
.chat-input-wrap {
display: flex;
gap: 6px;
padding: 8px 0 0;
border-top: 1px solid var(--remi-border);
margin-top: 8px;
}
.chat-input {
flex: 1;
padding: 8px 12px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--remi-radius-sm);
color: var(--remi-text);
font-size: 13px;
font-family: inherit;
outline: none;
resize: none;
}
.chat-input:focus {
border-color: rgba(var(--remi-accent-rgb), 0.3);
}
.chat-send-btn {
width: 36px;
height: 36px;
background: var(--remi-accent);
border: none;
border-radius: var(--remi-radius-sm);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.chat-send-btn:hover {
background: var(--remi-accent-light);
}
.chat-send-btn .material-symbols-rounded {
font-size: 18px;
}
/* Reaction buttons */
.reaction-bar {
display: flex;
gap: 4px;
padding: 4px 0;
}
.reaction-btn {
padding: 4px 8px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--remi-radius-full);
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
}
.reaction-btn:hover {
background: var(--glass-bg-strong);
transform: scale(1.1);
}
/* ================================================================================================
29. ONLINE USERS PANEL
================================================================================================ */
.user-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.user-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: var(--remi-radius-xs);
transition: background 0.2s;
cursor: pointer;
}
.user-item:hover {
background: var(--glass-bg);
}
.user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 11px;
color: white;
flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name {
font-size: 13px;
font-weight: 600;
color: var(--remi-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-status {
font-size: 11px;
color: var(--remi-text-dim);
}
.user-online-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--remi-success);
flex-shrink: 0;
box-shadow: 0 0 4px rgba(var(--remi-success-rgb), 0.5);
}
/* ================================================================================================
30. LEADERBOARD PANEL
================================================================================================ */
.leaderboard-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.leaderboard-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: var(--remi-radius-xs);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
transition: all 0.2s;
}
.leaderboard-item.top-3 {
background: rgba(var(--remi-gold-rgb), 0.05);
border-color: rgba(var(--remi-gold-rgb), 0.15);
}
.leaderboard-rank {
font-weight: 800;
font-size: 14px;
min-width: 24px;
text-align: center;
color: var(--remi-text-dim);
}
.leaderboard-item.top-3:nth-child(1) .leaderboard-rank { color: #ffd700; }
.leaderboard-item.top-3:nth-child(2) .leaderboard-rank { color: #c0c0c0; }
.leaderboard-item.top-3:nth-child(3) .leaderboard-rank { color: #cd7f32; }
.leaderboard-name {
flex: 1;
font-weight: 600;
font-size: 13px;
color: var(--remi-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.leaderboard-score {
font-weight: 700;
font-size: 14px;
color: var(--remi-accent);
font-variant-numeric: tabular-nums;
}
/* ================================================================================================
31. STATS / GAME LOG PANEL
================================================================================================ */
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--remi-radius-sm);
}
.stat-card-value {
font-size: 20px;
font-weight: 800;
color: var(--remi-accent);
font-variant-numeric: tabular-nums;
}
.stat-card-label {
font-size: 11px;
color: var(--remi-text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Game Log */
.game-log {
display: flex;
flex-direction: column;
gap: 4px;
}
.log-entry {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: var(--remi-radius-xs);
font-size: 12px;
color: var(--remi-text-dim);
border-left: 3px solid var(--remi-border);
}
.log-entry.action-draw { border-left-color: var(--remi-info); }
.log-entry.action-discard { border-left-color: var(--remi-warning); }
.log-entry.action-etalare { border-left-color: var(--remi-success); }
.log-entry.action-lipire { border-left-color: var(--remi-accent); }
.log-time {
font-size: 10px;
color: var(--remi-text-muted);
flex-shrink: 0;
}
.log-player {
font-weight: 600;
color: var(--remi-text);
}
/* ================================================================================================
32. TUTORIAL PANEL
================================================================================================ */
.tutorial-steps {
display: flex;
flex-direction: column;
gap: 12px;
}
.tutorial-step {
display: flex;
gap: 12px;
padding: 12px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--remi-radius-sm);
}
.tutorial-step-number {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--remi-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.tutorial-step-content {
flex: 1;
}
.tutorial-step-title {
font-weight: 700;
font-size: 13px;
color: var(--remi-text);
margin-bottom: 4px;
}
.tutorial-step-text {
font-size: 12px;
color: var(--remi-text-dim);
line-height: 1.5;
}
/* ================================================================================================
33. REPORT MODAL
================================================================================================ */
.report-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.report-reason-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.report-reason {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--remi-radius-sm);
cursor: pointer;
transition: all 0.2s;
font-size: 13px;
color: var(--remi-text);
}
.report-reason:hover {
background: var(--glass-bg-strong);
border-color: rgba(var(--remi-accent-rgb), 0.2);
}
.report-reason.selected {
border-color: var(--remi-accent);
background: var(--remi-accent-glow);
}
.report-reason input[type="radio"] {
accent-color: var(--remi-accent);
}
.report-textarea {
width: 100%;
min-height: 80px;
padding: 10px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--remi-radius-sm);
color: var(--remi-text);
font-size: 13px;
font-family: inherit;
resize: vertical;
outline: none;
}
.report-textarea:focus {
border-color: rgba(var(--remi-accent-rgb), 0.3);
}
/* ================================================================================================
34. NOTIFICATIONS
================================================================================================ */
.notification-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
background: var(--remi-danger);
color: white;
font-size: 9px;
font-weight: 700;
border-radius: var(--remi-radius-full);
box-shadow: 0 2px 6px rgba(var(--remi-danger-rgb), 0.4);
}
/* ================================================================================================
MULTIPLAYER PANEL CARDS (.mpc-*) — copied from Table
================================================================================================ */
.mpc-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(6px, 1.5vw, 10px);
padding: clamp(8px, 1.6vw, 10px) clamp(10px, 2vw, 12px);
background: rgba(var(--color-primary-rgb), 0.10);
border: 1px solid rgba(var(--color-accent-rgb), 0.08);
border-radius: clamp(6px, 1.2vw, 10px);
position: relative;
overflow: hidden;
cursor: default;
transition: background 0.2s, border-color 0.2s;
}
.mpc-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
border-radius: 0 3px 3px 0;
transition: background 0.25s;
}
.mpc-card.waiting::before { background: var(--color-success, #22c55e); }
.mpc-card.playing::before { background: #f59e0b; }
.mpc-card.full::before { background: #6b7280; }
.mpc-card.clickable { cursor: pointer; }
.mpc-card.clickable:hover {
background: rgba(var(--color-primary-rgb), 0.20);
border-color: rgba(var(--color-accent-rgb), 0.20);
}
/* Avatarul gazdei (adăugat în `_mpBuildRoomCard`, remi-pro.js ~13288, 07-09-2026).
Forma exista doar în remi-mobile.css (≤991px) — pe desktop `
in interiorul H1, ca sa-l poata citi si Google. Pseudo-elementul ramane
definit mai sus (pentru stiluri), dar nu mai scrie nimic. */
.brand-title::after { content: none !important; }
/* ── Cronometrele adversarilor: stare „nu e la rand" ─────────────────────────
Perechea reparatiei din remi-pro.js (updateTurnTimerDisplay): chip-ul unui
jucator care nu e la rand arata timpul plin al mesei, stins; doar cel activ
bate. Inainte chip-ul pastra ultima valoare din tura trecuta si parea mort. */
#timerPlayer.timer-idle,
#timerOpponent.timer-idle,
#timerEast.timer-idle,
#timerWest.timer-idle {
opacity: .45;
}
/* ── Contorul de etalare „(Xpt/45)" ca pastilă lângă buton (portret + desktop) ──
Înăuntrul butonului nu încăpea: eticheta „Etaleaza" ia deja 63px dintr-un buton
de 94px, iar în portret rămânea complet ascuns — jucătorul nu vedea niciodată
cât a adunat din cele 45 pentru prima etalare. În peisaj are rând propriu în
grila #raActiuni (vezi remi-mobile.css). */
.player-info-bar > .etalare-pts {
display: inline-flex !important;
align-items: center;
align-self: center;
margin: 0 0 0 4px !important;
padding: 3px 8px;
border-radius: 8px;
font-size: 11px !important;
font-weight: 800;
line-height: 1;
white-space: nowrap;
opacity: 1 !important;
color: #e9c45a;
background: rgba(6, 10, 6, .9);
border: 1px solid rgba(212, 165, 68, .7);
}
.player-info-bar > .etalare-pts.gata {
color: #8ff0a8;
background: rgba(18, 50, 26, .9);
border-color: #5fbf7a;
}
/* ═══════════════════════════════════════════════════════════════════════════
SCAUNUL DE JOS PE DESKTOP — (şters 18-09-2026)
═══════════════════════════════════════════════════════════════════════════
Aici stăteau 99 de linii care redesenau banda DOAR pe desktop în peisaj:
insula maro cu ramă aurie, module cu chenar, balanţa ca pastilă aurie plină,
butoane de 30px lipite şi un puls auriu în buclă pe butonul deblocat.
Selectorul lor, `body.game-active #seatSouth #playerArea .player-info-bar`,
are specificitatea (2,2,1) — mai mare decât a secţiunii noi (2,1,0) — deci
îi bătea fundalul şi banda rămânea maro pe cel mai folosit ecran. Găsit
măsurând cine câştigă fiecare proprietate, nu citind.
Banda are acum O SINGURĂ definiţie: secţiunea „BANDA DE JOS — marginea mesei"
de la finalul fişierului, aceeaşi pentru toate ecranele şi toate temele.
Ce era util aici a fost păstrat acolo: cronometrul-pastilă rămâne ascuns
(`.player-module-timer`), iar contorul de etalare stă în rând, nu plutind —
banda nu mai duce lipsă de lăţime, aşa că nu mai are de ce să se ferească. */
/* =====================================================================
NUANŢELE CROMULUI, DERIVATE DIN TEMĂ (2026-09-20)
---------------------------------------------------------------------
Blocul de mai jos (şi perechea lui de la masă) îşi scria culorile de
mână: rgb(42,27,14) pentru pagină, rgb(35,22,11) pentru antet ş.a.m.d.
Fiind `!important` şi venind DUPĂ `themes.css` — care chiar spune
`body { background: var(--bg-primary) !important }` — nicio temă nu mai
putea schimba fondul. Măsurat pe toate cele 34 de teme: o singură
culoare, rgb(42,27,14), la toate. Doar scrisul urma tema, de unde şi
etichetele ilizibile la `crimson` şi `dragon`: culoarea temei pe un
maro care nu se schimba niciodată.
Acum fiecare nuanţă coboară din `--bg-primary` al temei. Procentele sunt
alese ca tema `remi` să rămână unde era — abaterea măsurată e de cel
mult 3 unităţi din 255, adică nimic:
antet rgb(35,22,11) → rgb(34,22,11) bara jos rgb(24,15,8) → identic
cutie rgb(26,19,11) → rgb(26,17,9) filtre rgb(16,13,9) → rgb(18,11,6)
`light` e SINGURA temă deschisă din 34 (i-am măsurat luminanţa fondului
la toate), deci are nevoie de propriile procente: cu 82/57/42% ar fi
ieşit bare gri pe alb. La ea nuanţele coboară abia cu 3-9%.
`color-mix` e verificat în browser înainte de a fi folosit aici.
===================================================================== */
:root {
--jo-pag: var(--bg-primary);
--jo-bar-a: color-mix(in srgb, var(--bg-primary) 82%, #000);
--jo-bar-b: color-mix(in srgb, var(--bg-primary) 57%, #000);
--jo-bar-c: color-mix(in srgb, var(--bg-primary) 42%, #000);
--jo-cutie-a: color-mix(in srgb, var(--bg-primary) 63%, #000);
--jo-cutie-b: color-mix(in srgb, var(--bg-primary) 42%, #000);
}
/* Tema deschisă merge INVERS: pe temele închise nuanţele coboară spre negru,
aici urcă spre alb. Pagina e gri (#e3e9f0) şi cromul e alb, ca să se ridice
din ea. Cu formula de mai sus (coborâre) ieşeau bare gri pe gri, adică fix
spălăceala de care ne-am ferit. */
:root[data-theme="light"] {
--jo-pag: #ebe9e5;
--jo-bar-a: #ffffff;
--jo-bar-b: #fdfcfa;
--jo-bar-c: #efedea;
--jo-cutie-a: #ffffff;
--jo-cutie-b: #efedea;
}
/* =====================================================================
LOBBY DESKTOP = STRUCTURA TABINET (2026-09-02)
Probat injectat pe live, una langa alta cu Tabinet la 1536x639, apoi scris.
Culorile vin din nuanţele `--jo-*` de mai sus, ca sa urmeze tema;
accentele raman aurii (--primary-rgb); doar structura e a Tabinetului.
Limitat la >=992px: sub 992 raspunde remi-mobile.css / regulile de mobil,
care se verifica separat (vezi RAPORT-2026-09-02.md, sectiunea 3).
Pereche HTML: in index.php, #lobbyStatsBar e mutat din .lobby-stats-row
in .lobby-header (intre -left si -right), ca la Tabinet.
===================================================================== */
@media (min-width: 992px) {
/* ---- fundal: glow auriu radial, ca cele doua albastre de la Tabinet ---- */
body.game-menu {
background:
radial-gradient(120% 80% at 50% -10%, rgba(var(--primary-rgb, 212, 165, 68), .14), transparent),
radial-gradient(at 80% 70%, rgba(var(--primary-rgb, 212, 165, 68), .07) 0%, transparent 50%),
var(--jo-pag) !important;
}
/* ---- incadrare: 12px margini, fara plafonul de 1200px ---- */
body.game-menu #app { padding: 0 12px !important; max-width: none !important; }
body.game-menu .main-content {
max-width: none !important; width: 100% !important; position: relative;
padding-bottom: 78px !important; /* bara de jos 64 + 10 jos + 4 aer */
}
.context-panel { max-height: calc(100vh - var(--top-bar-height, 48px) - var(--nav-rail-h, 93px) - var(--sab, 0px)) !important; }
/* 2026-09-03: în imersiv nu mai există nici header, nici footer, deci nu se
mai scade nimic — altfel panoul se oprea cu 141px deasupra marginii de jos
(măsurat: 639 − 48 − 93 = 498). Se aplică şi în lobby, şi la masă. */
body.immersive-mode .context-panel { max-height: calc(100vh - var(--sab, 0px)) !important; }
/* ---- header si bara de jos ca INSULE ---- */
body.game-menu .top-bar {
background: linear-gradient(var(--jo-bar-a) 0%, var(--jo-bar-b) 100%) !important;
border: 0 !important; border-radius: 18px !important;
margin: 8px 12px 6px !important; padding: 7px 14px !important; min-height: 52px !important;
max-width: none !important; width: auto !important;
box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .10) !important;
}
.brand-logo {
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .35) !important; border-radius: 12px !important;
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 212, 165, 68), .06) !important;
}
body.game-menu #navRail {
background: linear-gradient(var(--jo-bar-b), var(--jo-bar-c)) !important;
left: 12px !important; right: 12px !important; width: auto !important; bottom: 10px !important;
border-radius: 20px !important; border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .30) !important;
box-shadow: 0 -10px 34px -10px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .10) !important;
/* un singur rand, ca la Tabinet */
flex-direction: row !important; justify-content: space-between !important; align-items: center !important;
gap: 14px !important; height: 64px !important; min-height: 64px !important; padding: 8px 16px !important;
--nav-rail-h: 64px;
}
body.game-menu .status-bar { display: contents !important; }
body.game-menu .status-bar > div {
background: rgba(var(--primary-rgb, 212, 165, 68), .06) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .22) !important;
border-radius: 14px !important; padding: 5px 12px !important; gap: 10px !important;
width: auto !important; flex: 0 0 auto !important; font-size: 11px !important;
}
/* in lobby raman doar avatarul si balanta; cronometrul, runda si scorul sunt de joc */
body.game-menu .status-bar > div:first-child > .status-item:not(.user-avatar-badge):not(.balance-badge) { display: none !important; }
body.game-menu .status-bar > div:first-child { order: 1; }
body.game-menu .nav-bar-primary { order: 2; max-width: 600px !important; gap: 6px !important; height: 46px !important; padding: 0 !important; }
body.game-menu .status-bar > .status-actions { order: 3; }
body.game-menu #balanceBadge {
font-size: 12px !important; padding: 3px 8px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .15) !important;
}
body.game-menu .nav-bar-btn {
flex: 1 1 auto !important; flex-direction: row !important; gap: 8px !important; padding: 9px 22px !important; width: auto !important;
background: linear-gradient(rgba(var(--primary-rgb, 212, 165, 68), .14), rgba(var(--primary-rgb, 212, 165, 68), .05)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .45) !important; box-shadow: none !important;
}
body.game-menu .nav-bar-label {
font-size: 15px !important; font-weight: 800 !important; letter-spacing: .4px !important; text-transform: uppercase !important;
color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
body.game-menu #fabBtn {
width: 58px !important; height: 58px !important; top: -18px !important;
border: 2.4px solid rgba(var(--primary-rgb, 212, 165, 68), .95) !important;
box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 212, 165, 68), .12), 0 4px 16px rgba(var(--primary-rgb, 212, 165, 68), .3) !important;
}
/* ---- reclamele laterale: toata inaltimea, eticheta sus, iconita+nume la mijloc, buton alb jos ---- */
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad { padding: 8px !important; align-self: stretch !important; display: flex !important; flex-direction: column !important; }
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card {
flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important;
justify-content: flex-start !important; padding: 18px 12px !important; border-radius: 20px !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .30) !important;
box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .10) !important;
}
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card .ad-shimmer { width: 100% !important; left: 0 !important; }
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card .ad-label { border: 0 !important; border-radius: 20px !important; padding: 5px 14px !important; letter-spacing: 1.44px !important; }
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card .ad-icon {
font-size: 46px !important; width: 46px !important; height: 46px !important;
margin: auto 0 12px !important; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card .ad-name { font-size: 18.4px !important; font-weight: 900 !important; margin: 0 !important; }
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card .ad-slogan { font-weight: 400 !important; margin: 6px 0 0 !important; padding: 0 !important; }
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card .ad-cta {
margin-top: auto !important; background: #fff !important; color: #0a0e1a !important; font-weight: 900 !important;
border-radius: 14px !important; border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .4) !important;
box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .55) !important; padding: 13px 22px !important;
}
/* ---- panoul de sub lobby ---- */
body.game-menu .lobby-view {
background: linear-gradient(165deg,
color-mix(in srgb, var(--jo-cutie-a) 50%, transparent),
color-mix(in srgb, var(--jo-cutie-b) 60%, transparent)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .22) !important; border-radius: 16px !important;
box-shadow: 0 22px 54px -26px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .08) !important;
padding: 16px 14px 0 !important; gap: 6px !important;
}
/* ---- randul de sus: sigla mica | online, mese | statistici | butoane (ca la Tabinet) ---- */
.lobby-header {
flex-wrap: wrap !important; justify-content: space-between !important;
gap: 8px !important; row-gap: 6px !important; padding: 0 0 2px !important;
}
.lobby-header-left { order: 1; flex: 0 0 auto !important; gap: 8px !important; }
.lobby-header-right { order: 3; flex: 0 0 auto !important; gap: 8px !important; margin-left: auto; }
.lobby-header .lobby-tile-mascot { width: 56px !important; height: 28px !important; display: block !important; flex: 0 0 auto; overflow: visible !important; }
.lobby-header .lobby-tile-mascot .remi-logo-tiles { transform: scale(.5) !important; transform-origin: 0 0 !important; width: auto !important; height: auto !important; }
.lobby-header .lobby-stats-bar {
order: 2; flex: 0 1 auto !important; min-width: max-content !important; height: 41px !important;
gap: 14px !important; padding: 8px 12px !important; justify-content: center !important;
}
.lobby-header .lobby-stats-bar * { white-space: nowrap; }
.lobby-header .lobby-btn { padding: 6px 12px !important; }
.lobby-stats-bar {
border-radius: 10px !important; background: rgba(255, 255, 255, .04) !important;
border-color: rgba(255, 255, 255, .08) !important; font-size: 13px !important;
}
.lobby-btn {
height: 36px !important; min-height: 36px !important; padding: 6px 14px !important;
border-radius: 8px !important; font-weight: 800 !important;
box-shadow: 0 0 13px -1px rgba(var(--primary-rgb, 212, 165, 68), .41) !important;
}
/* randul "Tu vs Bot" ramane (exista doar la Remi), dar subtire */
.lobby-stats-row { width: 100%; }
.lobby-ai-card {
flex: 1 1 auto !important; height: 41px !important; padding: 4px 12px !important; justify-content: space-between !important;
border-radius: 10px !important; background: rgba(255, 255, 255, .04) !important; border: .8px solid rgba(255, 255, 255, .08) !important;
}
.lobby-ai-card * { white-space: nowrap; }
/* ---- Top Jucatori: un singur rand, in cutie ---- */
.lobby-leaderboard {
display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 !important; padding: 5px 12px !important;
background: rgba(var(--primary-rgb, 212, 165, 68), .04) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .20) !important; border-radius: 10px !important;
}
.lobby-lb-header { margin: 0 !important; font-size: 13px !important; white-space: nowrap !important; width: auto !important; flex: 0 0 auto; }
/* Bara de derulare rămâne VIZIBILĂ: Remi arată 10 jucători în fâşie (Tabinet doar 5),
deci se ascund ~1600px din 2600 — fără bară nu se vede că mai sunt şi nu se ajunge
la ei. Prima versiune a pachetului o ascundea (scrollbar-width:none) şi asta era o
regresie faţă de stilul original al Remi-ului. Corectat 2026-09-02. */
.lobby-leaderboard { align-items: center !important; padding: 4px 12px 2px !important; }
.lobby-lb-list {
flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
padding: 0 0 5px !important; overflow-x: auto !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(var(--primary-rgb, 212, 165, 68), .55) transparent !important;
}
.lobby-lb-list::-webkit-scrollbar { display: block !important; height: 5px !important; }
.lobby-lb-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25) !important; border-radius: 6px !important; }
.lobby-lb-list::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb, 212, 165, 68), .55) !important; border-radius: 6px !important; }
.lobby-lb-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb, 212, 165, 68), .85) !important; }
.lobby-lb-item {
height: auto !important; padding: 4px 10px !important; gap: 6px !important; border-radius: 12px !important; font-size: 12px !important;
background: linear-gradient(135deg, rgba(var(--primary-rgb, 212, 165, 68), .16), rgba(184, 134, 11, .04)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .40) !important;
box-shadow: 0 4px 14px -6px rgba(212, 175, 55, .45) !important;
}
.lobby-lb-info { display: flex !important; align-items: center !important; gap: 6px !important; }
.lobby-lb-name { font-weight: 800 !important; }
.lobby-lb-name, .lobby-lb-score { white-space: nowrap; }
/* ---- filtre: bara lipita sus, colturi rotunjite ---- */
.lobby-filter-bar {
margin: 0 -14px !important; padding: 8px 14px 10px !important; border-radius: 16px 16px 0 0 !important;
background: linear-gradient(
color-mix(in srgb, var(--jo-cutie-b) 99%, transparent) 62%,
color-mix(in srgb, var(--jo-cutie-b) 60%, transparent) 85%, transparent) !important;
}
.lobby-filter-bar > * { gap: 4px !important; }
.lobby-filter-bar button { font-weight: 800 !important; padding: 4px 9px !important; }
.lobby-filter, [class*=lobby-chip] { border-radius: 5px !important; }
/* ---- grila: 3 coloane; randurile nu se micsoreaza sub continut (cardurile au overflow:hidden) ---- */
body.game-menu .lobby-grid {
grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: min-content !important;
padding: 0 8px 10px 0 !important; flex: 1 1 auto !important; min-height: 0; align-content: start !important; overflow: hidden auto !important;
}
.lobby-card { height: auto !important; border-radius: 14px !important; border-color: rgba(255, 255, 255, .15) !important; }
.lobby-card.lc-waiting { box-shadow: inset 3px 0 0 0 rgba(34, 197, 94, .7) !important; }
.lobby-card.lc-playing { box-shadow: inset 3px 0 0 0 rgba(245, 158, 11, .7) !important; }
.lobby-card.lc-full { box-shadow: inset 3px 0 0 0 rgba(107, 114, 128, .7) !important; }
.lobby-card button { border-radius: 9px !important; }
.lobby-card-meta > * { gap: 4px !important; }
/* ---- paginare: prinsa jos de panou ---- */
.lobby-pagination {
margin: auto -14px 0 !important; padding: 12px 14px 14px !important; gap: 4px !important; border-radius: 0 0 16px 16px !important;
background: linear-gradient(0deg,
color-mix(in srgb, var(--jo-cutie-b) 99%, transparent) 60%,
color-mix(in srgb, var(--jo-cutie-b) 55%, transparent) 82%, transparent) !important;
border-top: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .14) !important;
}
.lobby-pagination button { width: 40px !important; height: 40px !important; border-radius: 10px !important; font-weight: 800 !important; }
.lobby-pagination button:disabled { opacity: .35 !important; }
/* ---- umbrele care lipseau (fata de Tabinet) ---- */
#hintBtn { box-shadow: 0 2px 8px rgba(0, 0, 0, .2), 0 0 6px rgba(var(--primary-rgb, 212, 165, 68), .15) !important; }
.mascot-card { box-shadow: inset 0 0 4px rgba(0, 0, 0, .15) !important; }
.modal-close, .modal-icon { box-shadow: 0 2px 8px rgba(0, 0, 0, .2) !important; }
}
/* la latimi mari randul de sus incape pe o linie cu valorile exacte din Tabinet */
@media (min-width: 1300px) {
.lobby-header-left { gap: 12px !important; }
.lobby-header .lobby-stats-bar { padding: 10px 16px !important; gap: 20px !important; }
.lobby-header .lobby-btn { padding: 6px 14px !important; }
}
/* ---- accente aurii ca la Tabinet (2026-09-02, probat live): linie fina jos pe header,
sus pe footer, 2px sus/jos pe panoul lobby-ului si pe reclame; reclamele fara
textura si fara rama interioara. Accentele panoului stau pe .lobby-view (nu pe
.game-area ca la Tabinet) fiindca la Remi containerul e cu 11px mai inalt decat
panoul si accentul de jos ar cadea in gol; .lobby-view nu scroleaza (doar grila). ---- */
@media (min-width: 992px) {
/* header: fara sclipirea animata; linia aurie JOS */
body.game-menu .top-bar::before { display: none !important; }
body.game-menu .top-bar::after {
top: auto !important; bottom: 0 !important; left: 18px !important; right: 18px !important;
width: auto !important; height: 1px !important; animation: none !important;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .45), transparent) !important;
}
/* footer: linia aurie SUS, simetric */
body.game-menu #navRail::before {
content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; z-index: 2; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .45), transparent);
}
/* panoul lobby-ului: accent 2px sus si jos */
body.game-menu .lobby-view { position: relative !important; }
body.game-menu .lobby-view::before,
body.game-menu .lobby-view::after {
content: ''; position: absolute; left: 26px; right: 26px; height: 2px; border-radius: 2px; z-index: 4; pointer-events: none;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent);
}
body.game-menu .lobby-view::before { top: 0; }
body.game-menu .lobby-view::after { bottom: 0; }
/* ---- panoul lateral (Mese / Chat / Provocări) = aceeaşi cutie ca lobby-ul (07-09-2026) ----
Userul: „nu are încadrări bune, nu are început şi sfârşit; zona din spate nu arată
ca zona Mese; şi liniile aurii de început/sfârşit nu sunt la fel". Măsurat: panoul
avea maro opac .95 + blur 20px, fără rază/bordură/accente, şi cobora sub lobby
(B617 faţă de B550). Copiat 1:1 din `.lobby-view` de mai sus (~26814) + accentele
::before/::after; înălţimea din acelaşi `calc(100vh - 155px)` ca lobby-ul (~2488),
NU un număr fix — verificat la 1000×600, 1200×500, 1300×740, 1536×639: 0px
diferenţă jos. Doar în lobby (`body.game-menu`); la masă panoul rămâne cum era.
Mobilul (≤991) nu e atins. */
body.game-menu #contextPanel {
position: relative !important; top: auto !important; bottom: auto !important;
height: calc(100vh - 155px) !important; max-height: calc(100vh - 155px) !important;
background: linear-gradient(165deg,
color-mix(in srgb, var(--jo-cutie-a) 50%, transparent),
color-mix(in srgb, var(--jo-cutie-b) 60%, transparent)) !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .22) !important; border-radius: 16px !important;
box-shadow: 0 22px 54px -26px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .08) !important;
overflow: hidden !important;
}
body.game-menu #contextPanel::before,
body.game-menu #contextPanel::after {
content: ''; position: absolute; left: 26px; right: 26px; height: 2px; border-radius: 2px; z-index: 5; pointer-events: none;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent);
}
body.game-menu #contextPanel::before { top: 0; }
body.game-menu #contextPanel::after { bottom: 0; }
body.game-menu #contextPanel #panelContent { height: auto !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }
/* ---- acelaşi accent auriu pe paginare şi pe butoanele din dock (07-09-2026, cerut de user:
„pseudo-elemente glow şi la paginare, şi la butoanele din footer"). Paginarea: linia
de 2px SUS (jos coincide cu ::after al lobby-ului). Butoanele: ::before e deja luat de
efectul lor de hover (lăţime 0, fundal none) — NU se atinge; linia de sus e umbră
interioară `inset 0 1px`, ca la cutia lobby-ului, jos ::after, plus glow discret. ---- */
body.game-menu .lobby-pagination { position: relative !important; }
body.game-menu .lobby-pagination::before {
content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 2px; border-radius: 2px; z-index: 4; pointer-events: none;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent);
}
body.game-menu #navRail .nav-bar-btn {
position: relative !important; overflow: hidden !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .35), 0 0 10px rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
}
body.game-menu #navRail .nav-bar-btn::after {
content: ''; position: absolute; bottom: 0; left: 10px; right: 10px; height: 2px; border-radius: 2px; pointer-events: none; z-index: 1;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .8), transparent);
}
/* reclame: pseudo-elementele devin accentele de 2px (inlocuiesc textura si rama) */
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card::before,
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card::after {
content: '' !important; position: absolute !important; left: 22px !important; right: 22px !important;
width: auto !important; height: 2px !important; border-radius: 2px !important; z-index: 3 !important;
animation: none !important; transform: none !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent) !important;
}
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card::before { top: 0 !important; bottom: auto !important; }
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card::after { bottom: 0 !important; top: auto !important; }
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card { transition: transform .45s cubic-bezier(.2, .8, .25, 1), box-shadow .45s, border-color .45s !important; }
body:is(.game-menu, .game-active, .mp-game-active) .lobby-ad-card:hover {
transform: translateY(-5px) !important; border-color: rgba(var(--primary-rgb, 212, 165, 68), .55) !important;
box-shadow: 0 28px 56px -20px rgba(0, 0, 0, .82), 0 0 0 1px rgba(var(--primary-rgb, 212, 165, 68), .28) !important;
}
}
/* =====================================================================
LA MASĂ: HEADER + FOOTER CA ÎN LOBBY (2026-09-02)
Probat injectat într-o masă live de 4 jucători, apoi scris.
De ce era nevoie: pachetul de lobby de mai sus e legat de `body.game-menu`,
iar la masă corpul primeşte `game-active` / `mp-game-active`. Aşa că headerul
şi footerul săreau înapoi la înfăţişarea veche imediat ce intrai la masă:
header lipit sus cu colţuri drepte, plafonat la 1200px, cu sclipire animată
şi linia aurie SUS; footer lipit, 93px pe două rânduri, fără linie aurie.
Ce face blocul: aceleaşi insule ca în lobby, footerul pe UN rând, iar blocul
de butoane din mijloc centrat pe bară. Conţinutul de joc din bara de stare
(ceas, rundă, ATU, scorul rundei) RĂMÂNE vizibil — spre deosebire de lobby,
unde e ascuns, aici chiar se foloseşte.
===================================================================== */
/* ---- rândurile mesei la 4 jucători -------------------------------------
Regula veche (v8, aprilie) fixa `75px 75px 75px 80px 168px`. Suma lor plus
spaţiile dintre rânduri depăşea cutia, aşa că scaunul de jos ieşea afară şi
`.game-play-view` (overflow:hidden) tăia exact bara cu Trage / Etalează /
Lipeşte / Aruncă / ATU — jocul devenea nejucabil sub ~700px înălţime utilă.
Footerul plutitor mai ia 10px, deci fără asta se rupea şi mai devreme.
Scaunul de jos are nevoie de 215px: stativ (125) + bara de acţiuni (44) +
indiciul de sub ea (30) + marginile scaunului.
ATENŢIE: grila la 4 jucători NU se mai defineşte aici. A fost preluată de
blocul „ŞIRUL DE ARUNCATE PE MASĂ", la finalul fişierului, care adaugă un
rând nou pentru şir şi rescrie şi ariile, nu doar înălţimile. O singură
sursă pentru grilă — dacă schimbi rândurile, schimbă-le acolo. */
@media (min-width: 992px) {
/* ---- încadrare: aceleaşi 12px ca în lobby, fără plafonul de 1200px ---- */
body.game-active #app,
body.mp-game-active #app { padding: 0 12px !important; max-width: none !important; }
/* footerul pluteşte: 64px înălţime + 10px de la baza ecranului */
body.game-active .main-content,
body.mp-game-active .main-content { padding-bottom: 74px !important; }
/* ---- HEADER ca insulă ---- */
body.game-active .top-bar,
body.mp-game-active .top-bar {
background: linear-gradient(var(--jo-bar-a) 0%, var(--jo-bar-b) 100%) !important;
border: 0 !important; border-radius: 18px !important;
margin: 8px 12px 6px !important; padding: 7px 14px !important;
min-height: 52px !important; max-width: none !important; width: auto !important;
box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .10) !important;
}
/* fără sclipirea animată; linia aurie coboară JOS, ca în lobby şi la Tabinet */
body.game-active .top-bar::before,
body.mp-game-active .top-bar::before { display: none !important; }
body.game-active .top-bar::after,
body.mp-game-active .top-bar::after {
top: auto !important; bottom: 0 !important; left: 18px !important; right: 18px !important;
width: auto !important; height: 1px !important; animation: none !important;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .45), transparent) !important;
}
/* ---- FOOTER ca insulă, pe UN rând ----
Trei coloane: laterale egale şi elastice (minmax(0,1fr)), mijlocul auto.
Aşa blocul de butoane stă exact pe centrul barei la ORICE lăţime.
Centrarea absolută nu mergea: pastila din stânga e mai lungă la masă
(are ceas, rundă, ATU, scor) şi intra peste butoane sub ~1530px. */
body.game-active #navRail,
body.mp-game-active #navRail {
background: linear-gradient(var(--jo-bar-b), var(--jo-bar-c)) !important;
left: 12px !important; right: 12px !important; width: auto !important; bottom: 10px !important;
border-radius: 20px !important; border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .30) !important;
box-shadow: 0 -10px 34px -10px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .10) !important;
display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
align-items: center !important; column-gap: 12px !important;
height: 64px !important; min-height: 64px !important; padding: 8px 16px !important;
--nav-rail-h: 64px;
}
body.game-active #navRail::before,
body.mp-game-active #navRail::before {
content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; z-index: 2; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .45), transparent);
}
/* bara de stare se dizolvă, ca cei doi copii ai ei să devină celule de grilă */
body.game-active #navRail .status-bar,
body.mp-game-active #navRail .status-bar {
display: contents !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
body.game-active #navRail .status-bar > div,
body.mp-game-active #navRail .status-bar > div {
background: rgba(var(--primary-rgb, 212, 165, 68), .06) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .22) !important;
border-radius: 14px !important; padding: 5px 12px !important; gap: 10px !important;
width: auto !important; height: auto !important; font-size: 11px !important;
}
/* stânga: avatar, balanţă, ceas, rundă, ATU, scorul rundei — strâns ca să nu
ajungă sub blocul centrat pe ferestre mai mici */
/* `grid-row: 1` pe toate trei e OBLIGATORIU: fără el aşezarea automată merge
doar înainte (sparse), iar butoanele — care vin ultimele în HTML, dar cer
coloana din mijloc — sunt împinse pe rândul 2 şi ies din bară. */
body.game-active #navRail .status-bar > div:first-child,
body.mp-game-active #navRail .status-bar > div:first-child {
grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; margin: 0 !important;
gap: 6px !important; padding: 5px 10px !important;
}
body.game-active #navRail .status-bar > div:first-child .status-item,
body.mp-game-active #navRail .status-bar > div:first-child .status-item { gap: 4px !important; }
/* mijloc: butoanele + avatarul rotund */
body.game-active #navRail .nav-bar-primary,
body.mp-game-active #navRail .nav-bar-primary {
grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important;
position: relative !important; left: auto !important; transform: none !important;
max-width: 600px !important; gap: 6px !important; height: 46px !important; padding: 0 !important; margin: 0 !important;
}
/* dreapta: nivel, experienţă, bec */
body.game-active #navRail .status-actions,
body.mp-game-active #navRail .status-actions {
grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; margin: 0 !important;
}
body.game-active #navRail .nav-bar-btn,
body.mp-game-active #navRail .nav-bar-btn {
flex: 1 1 auto !important; flex-direction: row !important; gap: 8px !important;
padding: 9px 22px !important; width: auto !important;
background: linear-gradient(rgba(var(--primary-rgb, 212, 165, 68), .14), rgba(var(--primary-rgb, 212, 165, 68), .05)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .45) !important;
/* 09-09-2026: era `box-shadow: none`. La masă butoanele ieşeau plate; după ce
header-ul a primit placa (blocul de la coada fişierului), diferenţa se
vedea cu ochiul liber. Aceeaşi umbră ca în lobby. */
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .35),
0 0 10px rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
}
/* Linia aurie de sub text, la MASĂ. Regula exista doar pentru `body.game-menu`,
deci la masă butoanele rămâneau fără ea. Pe mobil era pusă pentru amândouă
stările — de-aia acolo arăta bine şi pe desktop nu. */
body.game-active #navRail .nav-bar-btn::after,
body.mp-game-active #navRail .nav-bar-btn::after {
content: '' !important; position: absolute !important;
left: 10px !important; right: 10px !important; bottom: 0 !important; top: auto !important;
height: 2px !important; width: auto !important; border-radius: 2px !important;
pointer-events: none !important;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .8), transparent) !important;
}
body.game-active #navRail .nav-bar-label,
body.mp-game-active #navRail .nav-bar-label {
font-size: 15px !important; font-weight: 800 !important; letter-spacing: .4px !important;
text-transform: uppercase !important; color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
body.game-active #navRail #fabBtn,
body.mp-game-active #navRail #fabBtn {
width: 58px !important; height: 58px !important; top: -18px !important; flex: 0 0 auto !important;
border: 2.4px solid rgba(var(--primary-rgb, 212, 165, 68), .95) !important;
box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 212, 165, 68), .12), 0 4px 16px rgba(var(--primary-rgb, 212, 165, 68), .3) !important;
}
body.game-active #navRail #balanceBadge,
body.mp-game-active #navRail #balanceBadge {
font-size: 12px !important; padding: 3px 8px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .15) !important;
}
}
/* =====================================================================
ŞIRUL DE ARUNCATE PE MASĂ (2026-09-02)
Probat injectat într-o masă live de 4 jucători, apoi scris.
De ce: regulile publicate spun că piesele aruncate stau „una după alta în
şir" şi că cine a etalat poate rupe din adâncime, luând piesa aleasă plus
tot ce e deasupra ei. Şirul stătea într-o fereastră de 159px din bara
laterală, cu piese de 20×28 — se vedeau 4 din 40. Decizia „merită să rup de
la a şaptea dacă înghit şase peste ea?" era imposibil de luat aşa.
Acum: şir întins pe lăţimea mesei, sub zonele de etalare, cu piese la
aceeaşi mărime ca cele etalate. Clicul deschide mai departe modalul, care
păstrează validările de rupere — aici nu se decide nimic, doar se vede.
De unde am luat înălţimea, fără să tai nimic:
- spatele pieselor adversarilor (decorativ; numărul lor e pe badge) 75→57px
- zonele de etalare, umplute între 36% şi 54%, 240→181px (maximul folosit 129)
===================================================================== */
@media (min-width: 768px) {
/* rând nou „sir" între zone şi scaunul de jos; bara laterală rămâne pe coloana 5 */
body.game-active .game-play-view[data-players="4"],
body.mp-game-active .game-play-view[data-players="4"] {
grid-template-areas:
"zone1 zone2 zone3 zone4 opp1"
"zone1 zone2 zone3 zone4 opp2"
"zone1 zone2 zone3 zone4 opp3"
"sir sir sir sir sidebar"
"hand-bot hand-bot hand-bot hand-bot sidebar" !important;
grid-template-rows: 57px 57px 57px 62px minmax(215px, auto) !important;
}
/* ŞTERS (2026-09-03) — perechea imersivă pentru 4 jucători.
Nota de care era însoţită („modul imersiv are propriile rânduri") era
adevărată pe atunci, dar tocmai asta a devenit problema: aşezarea s-a
schimbat (6 rânduri, cu `jurnal` şi `lateral`), iar copia imersivă a
rămas pe cea veche, cu `opp1/opp2/opp3`. Având specificitate mai mare,
o învingea pe cea nouă şi rupea masa în modul imersiv.
Vezi nota lungă de la ariile imersive 2P/3P, mai jos în fişier. */
/* ŞTERS (2026-09-03): aici forţam scaunul adversarului la 57px şi piesele
lui la 12px, fiindcă atunci fiecare scaun stătea pe câte un rând de 57px
al grilei. De când coloana din dreapta e un bloc propriu care se împarte
singur (`#lateralWrap`), regulile astea doar se băteau cu cele noi —
piesele rămâneau firimituri de 12px, iar scaunele nu-şi luau înălţimea.
Aşezarea lor e acum în blocul `#lateralWrap` de mai jos. */
/* ---- banda şirului: UN rând — eticheta la stânga, şirul umple restul.
`flex-direction: row` e obligatoriu: `.sidebar-section` (clasa moştenită din
bara laterală) e pe coloană, iar fără asta eticheta se aşază centrată
deasupra pieselor, care plutesc în mijlocul unui gol. ---- */
.game-play-view > .discard-row {
grid-area: sir !important; position: relative;
display: flex !important; flex-direction: row !important;
align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
padding: 4px 12px !important;
background: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .18)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .28) !important; border-radius: 12px !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .10) !important;
}
.discard-row .sidebar-section-header {
flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 6px !important;
white-space: nowrap !important; margin: 0 !important; padding: 0 !important; width: auto !important;
height: auto !important; font-size: 12px !important; letter-spacing: .4px !important; text-transform: uppercase !important;
}
/* jgheabul în care stă şirul — partea încă neumplută trebuie să arate ca o
tavă, nu ca un gol pe pâslă */
.discard-row .discard-history-strip {
flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
/* 54 = 5 sus + piesă 36 + 3 jos + 10 pentru bara de derulare orizontală.
Bara de derulare mănâncă din înălţimea utilă (clientHeight), iar dacă
nu i se lasă loc, `overflow-y: hidden` taie piesele la partea de sus. */
height: 54px !important; min-height: 54px !important; max-height: 54px !important;
display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 3px !important;
overflow-x: auto !important; overflow-y: hidden !important; padding: 5px 4px 3px !important;
background: rgba(0, 0, 0, .22) !important; border-radius: 8px !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4) !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(var(--primary-rgb, 212, 165, 68), .55) transparent !important;
}
.discard-row .discard-history-strip::-webkit-scrollbar { display: block !important; height: 6px !important; }
.discard-row .discard-history-strip::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3) !important; border-radius: 6px !important; }
.discard-row .discard-history-strip::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb, 212, 165, 68), .55) !important; border-radius: 6px !important; }
.discard-row .discard-history-strip::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb, 212, 165, 68), .85) !important; }
/* Piesele: DOAR dimensiunea se stabileşte aici. Relieful bombat, degradeul
fildeş, marginea caldă şi umbrele vin din `.tile`, exact ca la etalare.
Nu reseta background / border / box-shadow — aia le face plate. */
.discard-row .discard-tile {
width: 26px !important; height: 36px !important; font-size: 13px !important;
/* 3px, cât au piesele din zonele de etalare — `.tile` singur dă 6px.
Verificat prin comparaţie: cu asta, toate proprietăţile vizuale ale unei
piese aruncate sunt identice cu ale uneia etalate. */
border-radius: 3px !important;
flex: 0 0 auto !important; position: relative;
transition: transform .12s, box-shadow .12s, filter .12s !important;
}
.discard-row .discard-tile .tile-number { font-size: 13px !important; }
.discard-row .discard-tile .tile-suit-dot { width: 13px !important; height: 13px !important; }
/* Previzualizare: se sting piesele dinaintea celei pe care stai, rămân aprinse
ea + toate cele de după — exact ce ai fi obligat să iei rupând de acolo.
`:has()` ca să se stingă DOAR când cursorul e chiar pe o piesă, nu oriunde
în bandă.
Intervalul se marchează cu CONTUR, nu prin ridicare: la etalare hover-ul
ridică o singură piesă, iar un grup care sare deodată arăta ca o eroare de
desenare, nu ca o selecţie. Aşa, se ridică doar piesa de sub cursor (din
`.tile:hover`, moştenit), iar restul intervalului stă pe loc, încadrat.
Conturul, nu umbra: umbra ar înlocui relieful bombat al piesei. */
.discard-row .discard-history-strip:has(.discard-tile:hover) .discard-tile {
filter: grayscale(.6) brightness(.6);
}
.discard-row .discard-tile:hover ~ .discard-tile {
transform: none !important; box-shadow: none !important;
}
/* Ridicare mai mică decât la etalare (-6px + scale 1.05): banda are 54px şi
piesa ar ieşi peste marginea de sus, unde `overflow-y: hidden` o taie. */
.discard-row .discard-tile:hover {
transform: translateY(-4px) !important; scale: 1 !important;
}
.discard-row .discard-tile:hover,
.discard-row .discard-tile:hover ~ .discard-tile {
filter: none !important; z-index: 2;
outline: 2px solid rgba(var(--primary-rgb, 212, 165, 68), .9) !important; outline-offset: -1px !important;
}
/* pe piesele pe care chiar ai voie să rupi, cursorul spune că se poate da clic */
.discard-row .discard-tile.is-breakable { cursor: pointer; }
/* (scos 11-09-2026: hașura „prima piesă aruncată nu poate fi trasă" — regula era
copiată din joci.ro, motorul n-a aplicat-o niciodată, userul a decis să n-o avem.
Oricum se vedea greșit: `.tile::after` de umbră îi dădea `height: 18%`, deci
rămâneau două liniuțe sus în loc de hașură.) */
/* numărul pieselor pe care le-ai lua (textul îl pune remi-pro.js) */
.discard-row .discard-take-hint {
position: absolute; right: 10px; top: -11px; z-index: 5; pointer-events: none;
background: rgb(var(--primary-rgb, 212, 165, 68)); color: #1a1206;
font: 800 11px/1 system-ui, sans-serif; padding: 4px 9px; border-radius: 9px;
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .7);
opacity: 0; transition: opacity .12s;
}
.discard-row .discard-take-hint.is-on { opacity: 1; }
.discard-row .discard-history-empty { font-size: 12px; opacity: .6; padding-left: 4px; }
}
/* =====================================================================
ZONA TA DE ETALARE — starea „încă n-ai etalat" (2026-09-02)
Probat injectat într-o masă live de 4 jucători, apoi scris.
Conţinutul îl pune `updateEtalareZoneHint()` din remi-pro.js.
===================================================================== */
.etalare-zone.zona-mea { box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 212, 165, 68), .35); }
.zona-mea-hint {
position: absolute; inset: 0; z-index: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 10px; text-align: center;
pointer-events: none; /* zona rămâne ţintă de drop pentru piese */
}
.zona-mea-hint .zmh-titlu {
font: 800 11px/1 system-ui, sans-serif; letter-spacing: 1.6px; text-transform: uppercase;
color: rgba(var(--primary-rgb, 212, 165, 68), .85);
}
.zona-mea-hint .zmh-prag {
font: 800 30px/1 Oswald, system-ui, sans-serif; color: #f4ecd8;
text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.zona-mea-hint .zmh-prag b { color: rgb(var(--primary-rgb, 212, 165, 68)); }
.zona-mea-hint.gata .zmh-prag,
.zona-mea-hint.gata .zmh-prag b { color: #4ade80; }
.zona-mea-hint .zmh-bara {
width: min(78%, 220px); height: 6px; border-radius: 6px; overflow: hidden;
background: rgba(0, 0, 0, .42); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.zona-mea-hint .zmh-bara i {
display: block; height: 100%; border-radius: 6px; transition: width .25s ease;
background: linear-gradient(90deg, rgba(var(--primary-rgb, 212, 165, 68), .7), rgb(var(--primary-rgb, 212, 165, 68)));
}
.zona-mea-hint.gata .zmh-bara i { background: linear-gradient(90deg, #22c55e, #4ade80); }
.zona-mea-hint .zmh-text {
font: 600 12px/1.35 system-ui, sans-serif; color: rgba(244, 236, 216, .72); max-width: 230px;
}
/* pe ecrane mici zona e mult mai joasă — păstrăm doar cifra şi bara */
@media (max-width: 991px) {
.zona-mea-hint { gap: 5px; padding: 6px; }
.zona-mea-hint .zmh-prag { font-size: 20px; }
.zona-mea-hint .zmh-text { display: none; }
}
/* =====================================================================
CAPUL ZONELOR DE ETALARE + ZONA STRÂNSĂ (2026-09-02)
Probat injectat într-o masă live de 4 jucători, apoi scris.
Conţinutul şi lăţimile le pune `updateEtalareZones()` din remi-pro.js.
===================================================================== */
/* capul propriu înlocuieşte eticheta de 8px din ::before */
.etalare-zone.are-cap::before { display: none !important; }
.zona-cap {
position: absolute; top: 4px; left: 6px; right: 6px; z-index: 2;
display: flex; align-items: center; gap: 6px;
font: 700 11px/1 system-ui, sans-serif; white-space: nowrap; overflow: hidden;
pointer-events: none; /* zona rămâne ţintă de drop */
}
.zona-cap .zc-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.zona-cap .zc-nume { color: #f4ecd8; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.zona-cap .zc-b { flex: 0 0 auto; padding: 2px 6px; border-radius: 6px; font: 800 10px/1 system-ui, sans-serif; }
.zona-cap .zc-pct {
background: rgba(var(--primary-rgb, 212, 165, 68), .18); color: rgb(var(--primary-rgb, 212, 165, 68));
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .35);
}
.zona-cap .zc-piese { background: rgba(239, 68, 68, .18); color: #fca5a5; border: .8px solid rgba(239, 68, 68, .35); }
.zona-cap .zc-etalat { background: rgba(34, 197, 94, .16); color: #86efac; border: .8px solid rgba(34, 197, 94, .35); }
.zona-cap .zc-tura { margin-left: auto; color: rgb(var(--primary-rgb, 212, 165, 68)); font-weight: 800; }
/* ---- zona strânsă (jucător care încă n-a etalat) ----
Capul stă JOS: insigna de acţiune (TRAGE / ARUNCĂ) apare sus, peste zona
jucătorului activ, şi acoperea numele când capul era tot sus. */
.etalare-zone { transition: opacity .25s; }
.etalare-zone.zona-stransa { opacity: .82; }
.etalare-zone.zona-stransa .zona-cap {
top: auto; bottom: 6px; left: 0; right: 0;
flex-direction: column; align-items: center; justify-content: flex-end;
gap: 5px; height: auto; white-space: normal;
}
.etalare-zone.zona-stransa .zona-cap .zc-nume {
writing-mode: vertical-rl; transform: rotate(180deg);
max-height: 104px; font-size: 10px; text-align: left; color: rgba(244, 236, 216, .8);
}
.etalare-zone.zona-stransa .zona-cap .zc-dot { order: -1; }
/* la 72px nu încap lizibil, iar un text orizontal lângă un nume vertical arăta
amestecat; al cui e rândul se vede oricum din conturul auriu al zonei */
.etalare-zone.zona-stransa .zona-cap .zc-tura,
.etalare-zone.zona-stransa .zona-cap .zc-pct { display: none; }
/* sub 992px zonele sunt cu totul altfel aşezate — capul rămâne simplu */
@media (max-width: 991px) {
.zona-cap { font-size: 10px; gap: 4px; }
.zona-cap .zc-pct, .zona-cap .zc-tura { display: none; }
}
/* =====================================================================
ŞIRUL DE ARUNCATE FĂRĂ FEREASTRĂ (2026-09-02)
Ruperea se face direct de pe masă; regula în vigoare se scrie în bandă.
Textul îl pune `updateDiscardRuleHint()` din remi-pro.js.
===================================================================== */
@media (min-width: 768px) {
/* piesele pe care NU ai voie să rupi nu primesc cursor de clic — altfel par
că nu răspund */
.discard-row .discard-tile { cursor: default; }
.discard-row .discard-tile.is-breakable { cursor: pointer; }
}
/* ── Anunţul regulii de rupere, în ZONA TA DE ETALARE (16-09-2026) ──────────────────────
Userul: „în zona jucătorului de etalare", dreapta sus, cu text scurt (până azi stătea în rândul
aruncatelor, `.discard-row .discard-regula`, şi pe telefon în portret era ascuns). Îl pune
`updateDiscardRuleHint()`, care îi calculează şi lăţimea maximă (cât rămâne în dreapta capului
zonei) şi micşorează literele până la 8px dacă textul nu încape. Textul întreg e în `title`. */
.etalare-zone .zona-mea-regula {
position: absolute; top: 4px; right: 22px; z-index: 3;
pointer-events: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding: 3px 9px; border-radius: 999px;
background: rgba(0, 0, 0, .55);
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .35);
color: rgba(244, 236, 216, .72);
font: 700 10.5px/1.3 system-ui, sans-serif;
text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
/* auriu doar când chiar poţi rupe acum */
.etalare-zone .zona-mea-regula.poti-rupe {
color: rgb(var(--primary-rgb, 212, 165, 68));
border-color: rgba(var(--primary-rgb, 212, 165, 68), .55);
}
.etalare-zone .zona-mea-regula .marca-verde { color: #4ade80; font-weight: 800; }
.etalare-zone .zona-mea-regula .marca-hover { color: rgb(var(--primary-rgb, 212, 165, 68)); font-weight: 800; }
/* =====================================================================
INEL VERDE — piesa din şir îţi completează o combinaţie (2026-09-02)
Clasa `.ajuta` o pune `renderDiscardHistoryStrip()`, pe baza
`discardTileHelps()`, care validează cu `isValidMeld`.
Verde = „asta îţi foloseşte", auriu la hover = „atâtea iei dacă rupi de aici".
===================================================================== */
@media (min-width: 768px) {
.discard-row .discard-tile.ajuta {
outline: 2px solid rgba(34, 197, 94, .95) !important; outline-offset: -1px !important;
box-shadow: 0 0 10px -1px rgba(34, 197, 94, .75) !important;
}
/* uşoară tentă verde peste faţa piesei, ca să se vadă şi pe fundal deschis */
.discard-row .discard-tile.ajuta::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(34, 197, 94, .22), transparent 60%);
}
/* la hover câştigă previzualizarea ruperii (aurie) — altfel s-ar bate două semnale */
.discard-row .discard-tile.ajuta:hover,
.discard-row .discard-tile:hover ~ .discard-tile.ajuta {
outline-color: rgba(var(--primary-rgb, 212, 165, 68), .9) !important;
}
}
/* =====================================================================
„Cât îmi mai lipseşte până la 45" — rândul din zona ta (2026-09-02)
Textul îl pune `updateEtalarePotential()` din remi-pro.js.
===================================================================== */
.zona-mea-hint .zmh-potential {
font: 700 12px/1.35 system-ui, sans-serif; max-width: 260px;
padding: 5px 10px; border-radius: 8px;
color: rgba(var(--primary-rgb, 212, 165, 68), .9);
background: rgba(var(--primary-rgb, 212, 165, 68), .10);
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .28);
}
/* verde când ai deja cu ce să etalezi — acelaşi semnal ca inelul de pe şir */
.zona-mea-hint .zmh-potential.are-prag {
color: #86efac; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .32);
}
.zona-mea-hint .zmh-potential:empty { display: none; }
@media (max-width: 991px) {
.zona-mea-hint .zmh-potential { font-size: 11px; padding: 4px 8px; }
}
/* =====================================================================
ŞIRUL CENTRAT + numărul „iei N piese" în rândul cu regula (2026-09-02)
===================================================================== */
@media (min-width: 768px) {
/* 11-09-2026 — şirul creşte de la STÂNGA, mereu.
Era `safe center`: centrat cât timp piesele încăpeau, aliniat la stânga abia
când depăşeau. Efect la masă: cu puţine piese aruncate stăteau plutind pe
mijlocul jgheabului (măsurat: 273px gol în stânga, 145 în dreapta), iar pe
măsură ce se adunau alunecau singure spre stânga. Un şir de aruncate se
citeşte de la început, deci începutul stă la început. Regula asta o dubla
pe cea de la ~27244, care spunea deja `flex-start` — acelaşi selector,
acelaşi media query, câştiga ultima. */
.discard-row .discard-history-strip { justify-content: flex-start !important; }
/* Numărul „iei N piese" de la trecerea peste şir se scrie în anunţul din zona ta
de etalare (16-09-2026) — stilul lui e la `.zona-mea-regula`. */
}
/* =====================================================================
BARA DE ACŢIUNI REGÂNDITĂ (2026-09-02)
O singură acţiune principală + opţionalele doar când sunt legale.
Clasele le pune `updateBaraActiuni()` din remi-pro.js.
ATENŢIE la specificitate: butoanele din bară au reguli scrise cu
identificatori (`#seatSouth #playerArea ...`), care bat orice selector de
clasă. De aceea fiecare regulă de aici e scrisă în două variante — cu prefixul
de identificatori şi fără. Fără prefix nu prinde deloc.
===================================================================== */
@media (min-width: 992px) {
/* ---- trei grupuri: stare | unelte | acţiuni ---- */
#seatSouth #playerArea .player-info-bar,
.player-info-bar {
justify-content: flex-start !important; gap: 8px !important; padding: 0 12px !important;
}
#seatSouth #playerArea .player-info-bar .player-module-sort,
.player-info-bar .player-module-sort {
margin-left: 14px !important; padding-left: 14px !important;
border-left: 1px solid rgba(244, 236, 216, .14) !important;
}
#seatSouth #playerArea .player-info-bar .action-btn-game,
.player-info-bar .action-btn-game { margin: 0 !important; }
/* ---- indicatorul de paşi: DOAR puncte, lângă starea ta ----
Fără cuvinte: altfel ar repeta exact textul butonului de acţiune de
alături şi pare că ai două seturi de comenzi. */
#seatSouth #playerArea .player-info-bar #raPasi,
.player-info-bar #raPasi {
display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
margin-left: 10px !important; padding-left: 10px !important;
border-left: 1px solid rgba(244, 236, 216, .14) !important;
}
#raPasi .ra-pas { display: flex; align-items: center; }
#raPasi .ra-pas i {
width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
background: rgba(244, 236, 216, .22); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3);
transition: background .2s, box-shadow .2s;
}
#raPasi .ra-pas.gata i { background: rgba(34, 197, 94, .8); }
#raPasi .ra-pas.acum i {
background: rgb(var(--primary-rgb, 212, 165, 68));
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 212, 165, 68), .22);
}
/* ---- acţiunea principală: singurul text de acţiune din bară ---- */
#seatSouth #playerArea .player-info-bar .ra-principal,
.player-info-bar .ra-principal {
flex: 0 0 auto !important; width: auto !important; min-width: 200px !important;
max-width: none !important; height: 34px !important; margin-left: auto !important;
background: linear-gradient(180deg, rgb(var(--primary-rgb, 212, 165, 68)), rgba(var(--primary-rgb, 212, 165, 68), .82)) !important;
border: 0 !important; border-radius: 10px !important; opacity: 1 !important;
box-shadow: 0 4px 14px -4px rgba(var(--primary-rgb, 212, 165, 68), .65), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
#seatSouth #playerArea .player-info-bar .ra-principal .chip-label,
.player-info-bar .ra-principal .chip-label { color: #1a1206 !important; font: 800 13px/1 system-ui, sans-serif !important; }
#seatSouth #playerArea .player-info-bar .ra-principal .material-symbols-rounded,
.player-info-bar .ra-principal .material-symbols-rounded { color: #1a1206 !important; }
/* Aceeaşi acţiune, dar încă nu e îndeplinită condiţia (ex. n-ai ales piesa).
Butonul poartă aici şi clasa `.is-locked`, care îl ţine la `opacity: .45`
(vezi regula `.action-in-infobar.is-locked`) — adică era stins exact în
clipa în care trebuia văzut cel mai bine: „e rândul tău, alege ce arunci".
Îi redăm opacitatea şi îl facem vizibil prin CONTUR, nu prin plin.
Diferenţa plin / contur e intenţionată şi trebuie păstrată:
plin = apasă acum;
contur = e rândul tău, dar mai ai un pas de făcut întâi.
Dacă ambele stări ar fi pline, userul ar apăsa degeaba. (2026-09-02) */
#seatSouth #playerArea .player-info-bar .ra-principal.ra-asteapta,
.player-info-bar .ra-principal.ra-asteapta {
opacity: 1 !important;
background: linear-gradient(180deg, rgba(var(--primary-rgb, 212, 165, 68), .16), rgba(var(--primary-rgb, 212, 165, 68), .08)) !important;
border: 1.5px solid rgb(var(--primary-rgb, 212, 165, 68)) !important;
box-shadow: none !important;
animation: raCheama 1.6s ease-in-out infinite !important;
}
#seatSouth #playerArea .player-info-bar .ra-principal.ra-asteapta .chip-label,
.player-info-bar .ra-principal.ra-asteapta .chip-label {
color: rgb(var(--primary-rgb, 212, 165, 68)) !important; font-weight: 800 !important;
}
#seatSouth #playerArea .player-info-bar .ra-principal.ra-asteapta .material-symbols-rounded,
.player-info-bar .ra-principal.ra-asteapta .material-symbols-rounded {
color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
/* chemare discretă: inel care se stinge, fără să mişte butonul din loc */
@keyframes raCheama {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 212, 165, 68), .45); }
50% { box-shadow: 0 0 0 7px rgba(var(--primary-rgb, 212, 165, 68), 0); }
}
/* ---- opţionale, întregi doar când sunt legale ---- */
#seatSouth #playerArea .player-info-bar .ra-secundar,
.player-info-bar .ra-secundar {
flex: 0 0 auto !important; width: auto !important; min-width: 118px !important;
max-width: none !important; height: 30px !important; opacity: 1 !important;
background: rgba(var(--primary-rgb, 212, 165, 68), .10) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .55) !important; border-radius: 9px !important;
}
#seatSouth #playerArea .player-info-bar .ra-secundar.ra-recomandat,
.player-info-bar .ra-secundar.ra-recomandat {
border-color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
animation: raPuls 1.4s ease-in-out infinite;
}
@keyframes raPuls {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 212, 165, 68), .55); }
50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb, 212, 165, 68), 0); }
}
/* ---- urma acţiunii imposibile: contur, doar iconiţa ---- */
#seatSouth #playerArea .player-info-bar .ra-fantoma,
.player-info-bar .ra-fantoma {
flex: 0 0 auto !important; width: 46px !important; min-width: 46px !important;
max-width: 46px !important; height: 26px !important; margin-left: 2px !important;
background: transparent !important; border: 1px dashed rgba(244, 236, 216, .22) !important;
border-radius: 8px !important; opacity: .5 !important; overflow: hidden !important;
padding: 0 !important; animation: none !important;
}
#seatSouth #playerArea .player-info-bar .ra-fantoma .chip-label,
.player-info-bar .ra-fantoma .chip-label,
#seatSouth #playerArea .player-info-bar .ra-fantoma .chip-key,
.player-info-bar .ra-fantoma .chip-key { display: none !important; }
#seatSouth #playerArea .player-info-bar .ra-fantoma .material-symbols-rounded,
.player-info-bar .ra-fantoma .material-symbols-rounded { font-size: 15px !important; opacity: .55 !important; }
}
/* =====================================================================
ŞIRUL DE ARUNCATE ŞI LA 2 ŞI 3 JUCĂTORI (2026-09-02) — REPARAŢIE
Când am mutat şirul pe masă, i-am dat `grid-area: sir`, dar am definit aria
`sir` DOAR în grila de 4 jucători. La 2 şi la 3, aria nu exista, aşa că banda
pica în aşezarea automată şi ateriza jos-dreapta, plutind peste pâslă, peste
bara laterală. Mesele de 2 şi 3 arătau rupte.
Aici primesc acelaşi rând pentru şir ca mesele de 4, plus aceleaşi rânduri
pentru scaunul de jos. Modul imersiv la fel — are propriile rânduri, cu
specificitate mai mare.
===================================================================== */
@media (min-width: 768px) {
body.game-active .game-play-view[data-players="2"],
body.mp-game-active .game-play-view[data-players="2"] {
grid-template-areas:
"zone1 zone2 zone3 zone4 opp1"
"zone1 zone2 zone3 zone4 sidebar"
"zone1 zone2 zone3 zone4 sidebar"
"sir sir sir sir sidebar"
"hand-bot hand-bot hand-bot hand-bot sidebar" !important;
grid-template-rows: 75px minmax(0, 1fr) minmax(0, 1fr) 62px minmax(215px, auto) !important;
}
body.game-active .game-play-view[data-players="3"],
body.mp-game-active .game-play-view[data-players="3"] {
grid-template-areas:
"zone1 zone2 zone3 zone4 opp1"
"zone1 zone2 zone3 zone4 opp2"
"zone1 zone2 zone3 zone4 sidebar"
"sir sir sir sir sidebar"
"hand-bot hand-bot hand-bot hand-bot sidebar" !important;
grid-template-rows: 75px 75px minmax(0, 1fr) 62px minmax(215px, auto) !important;
}
/* =================================================================
AICI ERA O COPIE IMERSIVĂ A ARIILOR — ŞTEARSĂ (2026-09-03)
Blocul repeta aşezarea veche, pe 5 rânduri, cu `opp1/opp2/sidebar`.
Aşezarea de acum are 6 rânduri şi ariile `jurnal` + `lateral`.
Fiindcă selectorul imersiv are specificitate (0,4,1), iar cel normal
(0,3,1), copia asta ÎNVINGEA aşezarea curentă: în modul imersiv
`#lateralWrap` şi banda de activitate cereau arii inexistente, aşa că
browserul le făcea piste proprii. Măsurat: grila sărea la 7 coloane şi
8 rânduri, coloana laterală se umfla de la 230px la 854px, iar masa
arăta ruptă.
Butonul plutitor trebuie DOAR să ascundă headerul şi footerul — ceea ce
fac deja regulile de la liniile ~1579 şi ~27727 (`#navRail`, cu id,
fiindcă un id bate clasele). Fără copia asta, modul imersiv moşteneşte
aşezarea normală şi doar creşte în spaţiul eliberat.
Verificat live: 5 coloane, 6 rânduri, laterala 230px, masa 639/639px,
zonele de la 57px la 105px.
DACĂ ADAUGI AICI CEVA IMERSIV: nu redefini `grid-template-areas` sau
`grid-template-rows`. Orice aşezare nouă trebuie scrisă o singură dată,
în regulile normale, altfel imersivul rămâne iar în urmă în tăcere.
================================================================= */
/* NU pune aici o „plasă de siguranţă" cu `grid-column`.
Prima încercare a fost `.game-play-view > .discard-row { grid-column: 1/-2 }`
plus un `grid-column: auto` pentru 2/3/4 jucători. Efectul: `grid-column`
rescrie partea de coloană din `grid-area: sir`, iar banda se strângea pe o
singură coloană, cât prima zonă. Ariile definite mai sus acoperă toate
cazurile — asta e singura plasă de care e nevoie. */
}
/* =====================================================================
BARA DE JOS — CITITĂ CU LUPA (2026-09-02)
Patru lucruri găsite uitându-mă de aproape la bară, nu la cod:
1. Pastila cu potenţialul de etalare arăta doar „155 PCT", fără etichetă.
Lângă „PUNCTE 0 pct" păreau două cifre de puncte care se contrazic, iar
ce înseamnă se afla numai ţinând mouse-ul pe ea. Primeşte etichetă
„DE ETALAT", în acelaşi tipar ca PUNCTE / PIESE / ATU.
2. ATU era singurul buton auriu plin din bară — mai puternic decât acţiunea
principală. E o acţiune rară; nu el trebuie să atragă ochiul. Devine
contur, ca plinul să rămână doar pe butonul care chiar trebuie apăsat.
3. Bulina cu numărul scurtăturii (`::before`, 18px, aşezată la -7px) e
potrivită pe un buton întreg de 118px, dar pe fantoma de 46x26 iese pe
jumătate afară şi se citeşte ca o pată aurie lângă iconiţă. Ascunsă doar
pe fantome — pe butoanele întregi rămâne.
Ca peste tot în bară: fiecare regulă scrisă şi cu prefixul de identificatori
(`#seatSouth #playerArea ...`), şi fără. Fără prefix nu prinde.
===================================================================== */
@media (min-width: 992px) {
/* ---- 1. eticheta pastilei de potenţial ---- */
#seatSouth #playerArea .player-info-bar .player-module-hints,
.player-info-bar .player-module-hints {
position: relative !important; padding-top: 11px !important; overflow: visible !important;
}
#seatSouth #playerArea .player-info-bar .player-module-hints::before,
.player-info-bar .player-module-hints::before {
content: "DE ETALAT"; position: absolute; top: 1px; left: 0; right: 0; text-align: center;
font: 800 7px/1 system-ui, sans-serif; letter-spacing: .7px;
color: rgba(244, 236, 216, .55); pointer-events: none;
}
/* ---- 2. ATU: prezent, dar nu în locul acţiunii principale ---- */
#seatSouth #playerArea .player-info-bar #btnAtu,
.player-info-bar #btnAtu {
background: transparent !important;
border: 1px solid rgba(var(--primary-rgb, 212, 165, 68), .5) !important;
box-shadow: none !important;
}
#seatSouth #playerArea .player-info-bar #btnAtu .chip-label,
.player-info-bar #btnAtu .chip-label { color: rgba(244, 236, 216, .8) !important; }
/* ---- 3. bulina scurtăturii nu iese din butoanele-urmă ---- */
#seatSouth #playerArea .player-info-bar .ra-fantoma::before,
.player-info-bar .ra-fantoma::before { content: none !important; display: none !important; }
}
/* =====================================================================
LOBBY — VERIFICARE CAP-COADĂ (2026-09-02)
Patru nepotriviri găsite uitându-mă la lobby după hard refresh:
1. `.brand-section::after` e o linie verticală permanentă. La masă separă
brandul de „<- Mese" şi de numele mesei; în lobby nu urmează nimic după ea
şi atârnă în gol, lângă titlu. Apare doar unde are ce separa.
2. Rândul de filtre ascundea 84px la dreapta (scrollWidth 1082 / clientWidth
993) fără niciun semn că se poate derula, aşa că ultimul filtru de miză
arăta ca „50" fără contor — de fapt „50 (8)", cu paranteza tăiată.
Primeşte aceeaşi bară subţire aurie ca lista Top Jucători. Aceeaşi lecţie
ca acolo: conţinut derulabil fără bară de derulare = conţinut inexistent
pentru user.
3. Footerul din lobby era decentrat cu 49px. Grila de trei coloane e scrisă
pentru `body.game-active` / `body.mp-game-active`; în lobby
(`body.game-menu`) rămăsese `space-between`, care împarte spaţiul ÎNTRE
elemente, nu centrează elementul din mijloc. Cu o latură de 160px şi
cealaltă de 257px, grupul cădea pe 719 în loc de 768.
Două capcane aici, ambele plătite o dată:
- `.status-bar` are `display: contents`, deci copiii lui (punctele şi
blocul Lv/XP) devin direct itemi în grila lui #navRail — nu poţi ţinti
`.status-bar` însuşi.
- `.status-actions` are ŞI clasa `.d-flex`, aşa că o regulă pe
`.status-bar > .d-flex` îl prinde şi pe el şi îl mută lângă puncte.
De aceea `:not(.status-actions)`.
4. Bara de derulare a grilei de mese era cea gri de sistem, deşi Top Jucători
şi filtrele o au aurie. Aliniată.
===================================================================== */
@media (min-width: 992px) {
/* ---- 1. separatorul apare doar când are ce separa ---- */
body.game-menu .brand-section::after { display: none !important; content: none !important; }
/* ---- 2. rândul de filtre îşi arată bara de derulare ---- */
.lobby-filters-scroll {
scrollbar-width: thin !important;
scrollbar-color: rgba(var(--primary-rgb, 212, 165, 68), .55) transparent !important;
padding-bottom: 4px !important;
}
.lobby-filters-scroll::-webkit-scrollbar { display: block !important; height: 5px !important; }
.lobby-filters-scroll::-webkit-scrollbar-track { background: transparent !important; }
.lobby-filters-scroll::-webkit-scrollbar-thumb {
background: rgba(var(--primary-rgb, 212, 165, 68), .55) !important; border-radius: 3px !important;
}
/* ---- 3. footerul din lobby, centrat ca la masă ---- */
body.game-menu #navRail {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
align-items: center !important;
}
/* `grid-row: 1` pe toate trei: aşezarea automată e rară, nu densă, iar fără
el elementele cad pe rânduri diferite. Aceeaşi capcană ca la masă. */
body.game-menu #navRail > .nav-bar-primary { grid-column: 2 !important; grid-row: 1 !important; }
body.game-menu #navRail .status-bar > .d-flex:not(.status-actions) {
grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important;
}
body.game-menu #navRail .status-actions {
grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important;
}
/* ---- 4. grila de mese, aceeaşi bară aurie ---- */
.lobby-grid {
scrollbar-width: thin !important;
scrollbar-color: rgba(var(--primary-rgb, 212, 165, 68), .55) transparent !important;
}
.lobby-grid::-webkit-scrollbar { width: 5px !important; }
.lobby-grid::-webkit-scrollbar-track { background: transparent !important; }
.lobby-grid::-webkit-scrollbar-thumb {
background: rgba(var(--primary-rgb, 212, 165, 68), .55) !important; border-radius: 3px !important;
}
}
/* =====================================================================
LA MASĂ: FOOTERUL NU MAI INTRĂ PESTE BUTOANE (2026-09-02)
Bara de scoruri din stânga („nume: 0 • nume: 0") creştea odată cu numele
jucătorilor şi ajungea 54px peste butonul MESE din grupul central.
Trei cauze suprapuse, toate implicite:
- itemii de grilă au `min-width: auto`, deci NU se strâng sub lăţimea
conţinutului nici într-o coloană `1fr`;
- blocul are `justify-self: start`, deci îşi ia lăţimea din conţinut şi poate
depăşi coloana în loc s-o umple;
- toţi copiii lui au `flex-shrink: 0`, deci nimic dinăuntru nu cedează.
Rămâne în coloana lui şi capătă bară de derulare: nimic nu se taie definitiv,
scorurile lungi rămân accesibile. Nu ascundem conţinut ca să încapă.
Şi: pastila „DE ETALAT" n-are ce arăta spectatorului, care nu vede nicio mână.
Eticheta adăugată azi o făcea vizibilă goală, cu o liniuţă sub ea.
===================================================================== */
@media (min-width: 992px) {
body.game-active #navRail > *, body.mp-game-active #navRail > *,
body.game-active #navRail .status-bar > *, body.mp-game-active #navRail .status-bar > * {
min-width: 0 !important;
}
body.game-active #navRail .status-bar > .d-flex:not(.status-actions),
body.mp-game-active #navRail .status-bar > .d-flex:not(.status-actions) {
justify-self: stretch !important; min-width: 0 !important; overflow-x: auto !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(var(--primary-rgb, 212, 165, 68), .45) transparent !important;
}
body.game-active #navRail .status-bar > .d-flex:not(.status-actions)::-webkit-scrollbar,
body.mp-game-active #navRail .status-bar > .d-flex:not(.status-actions)::-webkit-scrollbar {
height: 4px !important;
}
body.game-active #navRail .status-bar > .d-flex:not(.status-actions)::-webkit-scrollbar-track,
body.mp-game-active #navRail .status-bar > .d-flex:not(.status-actions)::-webkit-scrollbar-track {
background: transparent !important;
}
body.game-active #navRail .status-bar > .d-flex:not(.status-actions)::-webkit-scrollbar-thumb,
body.mp-game-active #navRail .status-bar > .d-flex:not(.status-actions)::-webkit-scrollbar-thumb {
background: rgba(var(--primary-rgb, 212, 165, 68), .45) !important; border-radius: 2px !important;
}
/* spectatorul n-are mână, deci n-are potenţial de etalare */
body.spectator-mode .player-module-hints { display: none !important; }
}
/* =====================================================================
MODUL IMERSIV: ASCUNDE ŞI FOOTERUL, NU DOAR HEADERUL (2026-09-02)
Regula care ascunde footerul în imersiv e scrisă cu clasă:
body.immersive-mode .nav-rail { display: none !important; }
iar footerul de la masă l-am scris cu identificator:
body.game-active #navRail { display: grid !important; ... }
Un identificator bate oricâte clase, aşa că regula de ASPECT o învingea pe
cea de ASCUNDERE — `!important` de ambele părţi nu schimbă nimic, el
departajează doar între reguli de aceeaşi specificitate. Headerul n-a avut
problema fiindcă acolo nu am atins `display`.
REGULĂ DE LUCRU pentru oricine adaugă aici ceva cu `#navRail`: dacă atinge
`display`, are nevoie şi de perechea de mai jos, altfel modul imersiv se
strică din nou fără niciun mesaj de eroare.
2026-09-03 — ACELAŞI defect, în LOBBY. Lista de mai jos acoperea doar masa
(`game-active` / `mp-game-active`), iar în lobby corpul are `game-menu`, cu
propria regulă de aspect scrisă tot cu identificator:
body.game-menu #navRail { display: grid !important; } (l. ~27620)
Aşa că butonul plutitor ascundea headerul, dar footerul rămânea. Măsurat:
`header: none`, `footer: grid`. A treia linie de mai jos îl acoperă.
===================================================================== */
body.immersive-mode.game-active #navRail,
body.immersive-mode.mp-game-active #navRail,
body.immersive-mode.game-menu #navRail { display: none !important; }
/* =====================================================================
PIESA ARUNCATĂ APARE ABIA DUPĂ CE ATERIZEAZĂ FANTOMA (2026-09-02)
Fără asta, piesa intra în şir după ~60ms, iar fantoma mai zbura 850ms peste
ea: se vedeau două obiecte — unul deja aşezat şi altul rotindu-se prin aer.
Trasul face exact la fel (ascunde piesa reală cât zboară fantoma), de aceea
arată curat acolo.
Clasa stă pe BANDĂ, nu pe piesă: banda se redesenează în timpul zborului şi
ar pierde orice clasă pusă direct pe piesă. Se scoate din JS, după 860ms.
===================================================================== */
#discardHistoryStrip.zboara-piesa .discard-tile.is-top { visibility: hidden !important; }
/* =====================================================================
SCAUNUL DE JOS LIPIT DE RAMA MESEI + BARA CURATĂ LA SPECTATOR (2026-09-03)
1. Sub stativ rămâneau ~13px de pâslă. Doar 6 erau de vină: masa are
`border: 12px` — aceea e RAMA mesei, nu spaţiu gol, şi rămâne — plus un
`padding-bottom: 6px` care ţinea scaunul ridicat de rama de jos. Scoatem
doar padding-ul; scaunul ajunge exact pe marginea interioară.
Ce am încercat şi NU e bine, ca să nu se repete: `align-self: end` pe
scaun — îl scoate din întindere şi îl strânge la conţinut (215px -> 182px);
`align-content: end` pe grilă — nu schimbă nimic, fiindcă rândurile
elastice absorb deja tot spaţiul.
2. Modulul butoanelor de sortare rămânea vizibil la spectator ca o pastilă
goală de 19px cu fundal: codul ascunde `.sort-buttons` (copilul), nu
containerul `.player-module-sort`.
Regula pentru container EXISTĂ deja în fişier (lângă cea pentru hints),
dar e închisă în `@media (max-height: 500px) and (orientation: landscape)`,
deci nu ajunge niciodată pe desktop. O repetăm aici pentru desktop; dacă
cineva mută vreodată regula din peisaj în afara acelui @media, asta devine
de prisos şi poate fi ştearsă.
===================================================================== */
@media (min-width: 992px) {
body.game-active .game-play-view,
body.mp-game-active .game-play-view { padding-bottom: 0 !important; }
body.spectator-mode .player-module-sort { display: none !important; }
}
/* =====================================================================
MASA REAŞEZATĂ: ACTIVITATEA JOS, COLOANA DIN DREAPTA PLINĂ (2026-09-03)
Ce s-a schimbat şi de ce:
1. „ACTIVITATE MASA" era o listă verticală în dreapta, care mânca înălţime
degeaba. Devine o bandă orizontală sub şirul de aruncate: se citeşte de la
stânga la dreapta, ocupă 26px în loc de 162, iar forma asta merge şi pe
mobil, unde lăţimea e mai ieftină decât înălţimea.
2. Odată activitatea mutată, sub stivă rămâneau 182px de pâslă goală, chiar
lângă nişte scaune de adversar înghesuite. Cele trei scaune + stiva intră
acum într-un singur bloc (`#lateralWrap`, făcut din JS) care ţine coloana
întreagă şi se împarte singur: scaunele iau ce rămâne, stiva cât îi
trebuie. Rezultat: 180x75 -> 230x112, iar piesele adversarului 20x12 ->
30x42. Cu 14 piese se strâng singure la 13px şi tot încap.
Piesele aveau `max-height: 26px`, care le ţinea mici oricât spaţiu
primeau — de aceea trebuie ridicat explicit aici.
3. Rândurile zonelor de etalare devin elastice (`minmax(...,1fr)`): absorb
spaţiul rămas în loc să-l lase gol, deci zona se lungeşte cu ecranul.
181px -> 193px pe un ecran de 639px înălţime; pe unul mai înalt, mai mult.
4. Scaunul de jos rămâne cât era (185px) şi lipit de rama mesei — spaţiul
pentru adversari s-a luat din coloana lor, nu din el.
===================================================================== */
@media (min-width: 992px) {
/* ---- 1. rândul nou din grilă, pentru activitate ---- */
body.game-active .game-play-view[data-players="4"],
body.mp-game-active .game-play-view[data-players="4"] {
grid-template-areas:
"zone1 zone2 zone3 zone4 lateral"
"zone1 zone2 zone3 zone4 lateral"
"zone1 zone2 zone3 zone4 lateral"
"sir sir sir sir lateral"
"jurnal jurnal jurnal jurnal lateral"
"hand-bot hand-bot hand-bot hand-bot lateral" !important;
grid-template-rows: minmax(57px, 1fr) minmax(57px, 1fr) minmax(57px, 1fr) 62px 26px minmax(185px, 185px) !important;
}
body.game-active .game-play-view[data-players="3"],
body.mp-game-active .game-play-view[data-players="3"] {
grid-template-areas:
"zone1 zone2 zone3 zone4 lateral"
"zone1 zone2 zone3 zone4 lateral"
"zone1 zone2 zone3 zone4 lateral"
"sir sir sir sir lateral"
"jurnal jurnal jurnal jurnal lateral"
"hand-bot hand-bot hand-bot hand-bot lateral" !important;
grid-template-rows: minmax(75px, 1fr) minmax(75px, 1fr) minmax(0, 1fr) 62px 26px minmax(185px, 185px) !important;
}
body.game-active .game-play-view[data-players="2"],
body.mp-game-active .game-play-view[data-players="2"] {
grid-template-areas:
"zone1 zone2 zone3 zone4 lateral"
"zone1 zone2 zone3 zone4 lateral"
"zone1 zone2 zone3 zone4 lateral"
"sir sir sir sir lateral"
"jurnal jurnal jurnal jurnal lateral"
"hand-bot hand-bot hand-bot hand-bot lateral" !important;
grid-template-rows: minmax(75px, 1fr) minmax(0, 1fr) minmax(0, 1fr) 62px 26px minmax(185px, 185px) !important;
}
/* ---- banda de activitate ---- */
.jurnal-orizontal {
grid-area: jurnal !important; display: flex !important; align-items: center !important;
justify-content: flex-start !important; min-height: 0 !important;
padding: 0 6px !important; overflow: hidden !important;
}
.jurnal-orizontal .activity-log {
width: 100% !important; display: flex !important; flex-direction: row !important;
align-items: center !important; gap: 8px !important;
overflow: hidden !important; min-width: 0 !important;
}
/* antetul rămâne fix la stânga; derulează doar lista */
.jurnal-orizontal .activity-log-header {
flex: 0 0 auto !important; margin: 0 !important; white-space: nowrap !important;
padding-right: 8px !important; border-right: 1px solid rgba(244, 236, 216, .14) !important;
}
.jurnal-orizontal .activity-log-body {
flex: 1 1 auto !important; min-width: 0 !important;
display: flex !important; flex-direction: row !important; gap: 6px !important;
align-items: center !important; width: auto !important; height: auto !important;
overflow-x: auto !important; overflow-y: hidden !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(var(--primary-rgb, 212, 165, 68), .45) transparent !important;
}
.jurnal-orizontal .activity-log-body::-webkit-scrollbar { height: 4px !important; }
.jurnal-orizontal .activity-log-body::-webkit-scrollbar-thumb {
background: rgba(var(--primary-rgb, 212, 165, 68), .45) !important; border-radius: 2px !important;
}
.jurnal-orizontal .activity-log-body > * {
flex: 0 0 auto !important; white-space: nowrap !important; margin: 0 !important;
}
/* ---- 2. coloana din dreapta, ca un bloc care se împarte singur ---- */
#lateralWrap {
grid-area: lateral !important; display: flex !important; flex-direction: column !important;
gap: 6px !important; min-height: 0 !important; overflow: hidden !important;
}
/* DESCENDENT, nu copil direct (`>`). Scaunele sunt copiii lui `#seatNorth`,
care are `display: contents`: asta le face să se AŞEZE ca itemi ai
coloanei, dar NU le mută în arborele paginii — rămân nepoţi. Scris cu
`>`, blocul ăsta nu prindea niciun element, iar scaunele rămâneau la
aşezarea veche. Piesele funcţionau tocmai fiindcă erau scrise descendent.
`max-width: none` ridică un `max-width: 180px` scris când coloana avea
180px; acum are 230 şi scaunele rămâneau cu 50px de gol în dreapta. */
#lateralWrap .opponent-area {
flex: 1 1 0 !important; height: auto !important; min-height: 75px !important;
max-height: none !important;
width: 100% !important; max-width: none !important; align-self: auto !important;
display: flex !important; flex-direction: column !important;
padding: 4px 6px !important; overflow: hidden !important;
}
/* `max-width: none` din acelaşi motiv ca la scaune: stiva are `max-width:
200px`, aşa că într-o coloană de 230px rămâneau 30px goi la dreapta, iar
`width: 100%` singur nu ajunge — max-width câştigă. A doua oară aceeaşi
capcană în acelaşi bloc; când o lăţime nu se aplică, `max-width` e primul
lucru de verificat. */
#lateralWrap > #remiSidebar {
flex: 0 0 auto !important; align-self: auto !important;
width: 100% !important; max-width: none !important;
height: auto !important; min-height: 0 !important; overflow: visible !important;
}
#lateralWrap .opponent-info {
flex: 0 0 auto !important;
height: 34px !important; min-height: 34px !important; max-height: 34px !important;
}
/* Înălţime FIXĂ, nu elastică: cu `flex: 1 1 auto` zona creştea sau scădea
după câte piese are fiecare şi după apariţia barei de derulare (26px
fără bară, 16px cu ea), aşa că scaunele nu mai arătau la fel între ele. */
#lateralWrap .opponent-hand {
flex: 0 0 auto !important;
height: 56px !important; min-height: 56px !important; max-height: 56px !important;
display: flex !important; align-items: center !important;
justify-content: flex-start !important; flex-wrap: nowrap !important;
gap: 1px !important; padding: 0 2px !important;
overflow-x: auto !important; overflow-y: hidden !important;
scrollbar-gutter: stable !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(var(--primary-rgb, 212, 165, 68), .4) transparent !important;
}
#lateralWrap .opponent-hand::-webkit-scrollbar { height: 3px !important; }
#lateralWrap .opponent-hand::-webkit-scrollbar-thumb {
background: rgba(var(--primary-rgb, 212, 165, 68), .4) !important; border-radius: 2px !important;
}
/* Piesa adversarului = piesa reală, doar întoarsă: acelaşi gradient, aceeaşi
bordură, acelaşi relief ca `.tile`, la scara locului ei. Dimensiune FIXĂ
pentru toţi — dacă se strâng după câte are fiecare, ajung inegale între
adversari; ce nu încape se derulează. */
#lateralWrap .opponent-tile-back {
flex: 0 0 auto !important;
/* 2026-09-03: mărimea EXACTĂ a pieselor etalate (26×36), cerută de user.
Era 16×22 — acum dosul e cât o piesă de pe masă; ce nu încape se
derulează (vezi `.opponent-hand` de mai sus). */
width: 26px !important; min-width: 26px !important; max-width: 26px !important;
height: 36px !important; min-height: 36px !important; max-height: 36px !important;
margin: 0 !important; border-radius: 3px !important;
background: linear-gradient(160deg, #fff 0%, #fdf9ec 22%, #f6ecd0 55%, #ead8ae 88%, #d9c394 100%) !important;
border: .8px solid rgba(90, 60, 30, .38) !important;
/* relieful COMPLET al piesei etalate (citit din `.etalare-zone .tile`),
nu unul simplificat — să fie identic cu piesele de pe masă. */
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, .95),
inset 0 3px 1px rgba(255, 250, 230, .6),
inset 0 -3px 0 rgba(140, 105, 60, .35),
inset 0 -5px 6px rgba(120, 85, 45, .22),
inset 2px 0 0 rgba(255, 252, 240, .55),
inset -2px 0 0 rgba(130, 95, 55, .22),
inset 3px 0 4px rgba(255, 255, 255, .25),
inset -3px 0 4px rgba(110, 80, 45, .18),
0 1px 0 rgba(0, 0, 0, .15),
0 2px 2px rgba(0, 0, 0, .22),
0 4px 6px rgba(0, 0, 0, .28) !important;
}
/* piesele etalate n-au luciul radial din `.opponent-tile-back::before`
(l.~5853); îl ascundem ca dosul să fie identic cu ele. */
#lateralWrap .opponent-tile-back::before { display: none !important; }
}
/* =====================================================================
SPECTATOR: BUTOANELE SE VĂD, DAR SUNT DOAR DE CITIT (2026-09-03)
Erau ascunse, şi nu din motive de securitate: pur şi simplu starea lor nu se
mai calcula pentru spectator, aşa că rămâneau toate aprinse, cu textele de
pornire — „Etaleaza" părea disponibil la un jucător care nu era nici măcar la
rând. Acum `updateActionButtons` le marchează după rândul jucătorului urmărit
(`.ra-activ-acum`), iar aici le facem inerte.
Trei straturi, nu unul: `pointer-events: none` (nu primesc clic),
`aria-disabled` + `disabled` + `tabindex="-1"` din JS (nu sunt focusabile,
nu răspund la Enter), iar dacă totuşi cineva ar declanşa acţiunea din
consolă, serverul o respinge — mutările se validează în `RemiEngine`, nu în
pagină. Aşa că spectatorul vede ce se întâmplă, fără să poată interveni.
===================================================================== */
@media (min-width: 992px) {
/* `display` e obligatoriu aici: o regulă lungă pentru spectator ascunde
`.action-btn-game` din bară, iar fără el butoanele rămâneau invizibile
oricâte alte proprietăţi le dădeam. */
body.spectator-mode #seatSouth .player-info-bar .action-btn-game.ra-doar-citire {
display: flex !important;
pointer-events: none !important;
cursor: default !important;
filter: saturate(.55) !important;
animation: none !important;
}
/* Opacitatea are nevoie de `[aria-disabled="true"]` în selector: regula
existentă `#seatSouth #playerArea ... [aria-disabled="true"]` (două id-uri
plus atribut) bate orice variantă mai scurtă, iar butoanele rămâneau toate
la .45, fără să se distingă cel activ. */
body.spectator-mode #seatSouth #playerArea .player-info-bar .action-btn-game.ra-doar-citire[aria-disabled="true"] {
opacity: .35 !important;
}
/* acţiunea pe care jucătorul urmărit chiar o are de făcut acum */
body.spectator-mode #seatSouth #playerArea .player-info-bar .action-btn-game.ra-doar-citire.ra-activ-acum[aria-disabled="true"] {
opacity: .95 !important;
filter: none !important;
box-shadow: 0 0 0 1px rgba(var(--primary-rgb, 212, 165, 68), .6) !important;
}
/* ---- pastila de acţiune în zona strânsă ----
`.bot-action-indicator` („T TRAGE", „A ARUNCĂ", „L LIPIRE", „E ETALARE")
are 46-67px; într-o zonă strânsă de 72px intra tăiată şi se citea „TR",
„AR". Acolo păstrăm bulina cu litera şi ascundem doar textul.
Ţintim clasele REALE dinăuntru (`.zone-act-icon`, `.zone-act-text`), nu
`> *:first-child`: prima încercare, scrisă pe poziţie, nu prindea nimic,
fiindcă regulile existente lucrează pe clase şi sunt mai specifice.
Bulina urcă la 20px — la 12px, cât are implicit, „nu se vedea". */
/* Zona strânsă are 72px, iar pastila („T TRAGE", „A ARUNCĂ") cere ~64px.
Nu o tăiem şi nu-i scoatem textul — o lăsăm întreagă şi îi dăm voie să
depăşească zona îngustă.
Ce am greşit pe drum, ca să nu se reia: am ascuns `.zone-act-text`,
crezând că „intră tăiată" înseamnă „nu încape textul". Rezultatul a fost
că apărea doar bulina cu litera, fără cuvânt — adică exact ce nu trebuia.
Pastila spune CE face jucătorul; litera singură nu spune nimic cuiva care
n-a învăţat convenţia.
`overflow: visible` pe zonă e obligatoriu: altfel zona taie pastila la
marginea ei. Zona strânsă e goală (jucătorul n-a etalat), deci nu iese
nimic altceva. Ancorarea trece pe STÂNGA: la dreapta, în zona strânsă,
stă numele scris vertical. */
.etalare-zone.zona-stransa { overflow: visible !important; }
/* Încadrată ÎN zonă, nu lăsată să iasă: ancorată pe amândouă laturile
(`left` + `right`), cu bulina şi textul micşorate cât să intre în cei
~66px utili. Măsurat pe cazul real, cu textul întreg: „TRAGE" ~55px.
Varianta dinainte, `width: max-content` fără `right`, dădea o pastilă de
69px într-o zonă de 72 pornind de la 5px — ieşea 2px peste margine. */
.etalare-zone.zona-stransa .bot-action-indicator {
left: 3px !important; right: 3px !important;
width: auto !important; max-width: none !important;
height: auto !important; min-height: 20px !important;
padding: 2px 4px 2px 2px !important; gap: 3px !important;
overflow: hidden !important; white-space: nowrap !important;
z-index: 9 !important; opacity: 1 !important; filter: none !important;
align-items: center !important; justify-content: flex-start !important;
}
.etalare-zone.zona-stransa .bot-action-indicator .zone-act-text { display: inline-flex !important; }
/* numele jucătorului rămâne ascuns: îl scrie oricum capul zonei, vertical */
.etalare-zone.zona-stransa .bot-action-indicator .zone-act-name { display: none !important; }
.etalare-zone.zona-stransa .bot-action-indicator .zone-act-action {
font-size: 8px !important; letter-spacing: 0 !important;
}
.etalare-zone.zona-stransa .bot-action-indicator .zone-act-icon {
width: 16px !important; height: 16px !important; min-width: 16px !important;
font-size: 9px !important; font-weight: 900 !important;
box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .5) !important;
}
}
/* =====================================================================
BARA DE ACŢIUNI ÎNCAPE ÎN MASĂ (2026-09-03) — REGRESIE PROPRIE
Măsurat în joc, când e rândul tău: bara are 830px, iar conţinutul cerea
1010px — 180px în plus. Butonul ATU ajungea la 1276, iar coloana din dreapta
începe la 1108: intra 168px SUB ea. La 2, 3 şi 4 jucători deopotrivă.
Cauza e lărgirea coloanei laterale de la 180 la 230px, făcută tot azi ca să
încapă scaunele adversarilor: masa a pierdut 50px, iar bara era deja la
limită. Nu s-a văzut la spectator, fiindcă acolo butoanele erau ascunse.
Ce cedează, în ordinea importanţei:
- ATU rămâne doar cu iconiţa (52px în loc de 122) — e o acţiune rară;
- acţiunea principală se poate strânge până la 150px, cu text tăiat elegant;
- grupul de sortare pierde din margini.
Bara primeşte `overflow: hidden`, ca nimic să nu mai iasă niciodată sub
coloană, oricât s-ar lungi o etichetă.
===================================================================== */
@media (min-width: 992px) {
#seatSouth #playerArea .player-info-bar {
min-width: 0 !important; overflow: hidden !important;
}
#seatSouth #playerArea .player-info-bar #btnAtu {
min-width: 52px !important; max-width: 52px !important; flex: 0 0 52px !important;
}
#seatSouth #playerArea .player-info-bar #btnAtu .chip-label { display: none !important; }
#seatSouth #playerArea .player-info-bar .ra-principal {
flex: 0 1 auto !important; min-width: 150px !important;
}
#seatSouth #playerArea .player-info-bar .ra-principal .chip-label {
overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
#seatSouth #playerArea .player-info-bar .player-module-sort {
margin-left: 8px !important; padding-left: 8px !important;
}
}
/* =====================================================================
MASA UMPLE ÎNĂLŢIMEA, LA ORICÂŢI JUCĂTORI (2026-09-03)
Găsit testând mese de 2 şi 3 jucători: sub masă rămâneau 24px de gol până la
footer (la 4 jucători, doar 1px). Două cauze suprapuse, nu una:
1. GRILA nu umplea containerul. `#gamePlayView` are 499px, dar
`.game-play-view` se oprea la 475 — containerul e `flex-direction: column`,
iar grila îşi lua înălţimea din conţinut. `align-self: stretch` +
`min-height: 100%` o fac să umple; rândurile cresc apoi singure (49 -> 57px).
2. RÂNDURILE cerute erau mai mari decât spaţiul. Măsurat: din 445px interiori,
banda de aruncate (62) + jurnalul (26) + scaunul de jos (185) iau 273, plus
25px de spaţii — rămân 147 pentru cele trei rânduri de zone, adică 49 fiecare.
Ceruseră 75. De aceea, la prima încercare, scaunul de jos a ieşit 7px SUB
footer — mai rău decât golul pe care îl reparam.
De aceea rândurile zonelor sunt `minmax(0, 1fr)`: împart ce rămâne, cât o fi,
în loc să ceară o valoare fixă care nu încape.
===================================================================== */
@media (min-width: 992px) {
body.game-active #gamePlayView > .game-play-view,
body.mp-game-active #gamePlayView > .game-play-view {
align-self: stretch !important; min-height: 100% !important; flex: 1 1 auto !important;
}
/* ŞI `[data-players="4"]` — omis din greşeală la prima scriere.
La 4 jucători rândurile rămâneau `minmax(57px,1fr)`, adică 57×3 + 62 + 26
+ 185 + 25 spaţii = 469px într-un spaţiu de 445: cei 24px în plus erau
TĂIAŢI (masa are `overflow: hidden`), aşa că partea de jos a barei de
acţiuni dispărea sub ramă. `minmax(0,1fr)` lasă rândurile să împartă cât
există — 49px fiecare — în loc să ceară o valoare care nu încape. */
body.game-active .game-play-view[data-players="4"],
body.mp-game-active .game-play-view[data-players="4"],
body.game-active .game-play-view[data-players="3"],
body.mp-game-active .game-play-view[data-players="3"],
body.game-active .game-play-view[data-players="2"],
body.mp-game-active .game-play-view[data-players="2"] {
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 62px 26px 185px !important;
}
/* AICI a fost `max-height: 130px` pe scaunul adversarului. L-am scos:
plafonul rezolva umflarea, dar lăsa în schimb o coadă de pâslă goală sub
stivă (206px la 2 jucători). Soluţia bună e mai jos, în blocul „COLOANA
DIN DREAPTA": fundalul se lungeşte cât ţine coloana, iar conţinutul se
centrează în el — aşa nu rămâne gol nici sub stivă, nici în cartonaş.
Cele două reguli se băteau; a rămas una singură. (2026-09-03) */
/* ATU şi mai compact: cu coloana la 230px, 52 erau încă prea mult */
#seatSouth #playerArea .player-info-bar #btnAtu {
min-width: 44px !important; max-width: 44px !important; flex: 0 0 44px !important;
margin-left: 4px !important;
}
}
/* =====================================================================
BARA DE ACŢIUNI: UN SINGUR LOC UNDE SE DECIDE LĂŢIMEA (2026-09-03)
Măsurat în joc, pe toate stările barei — asta a fost greşeala de dinainte,
verificam o singură stare şi trăgeam concluzii pentru toate:
nu e rândul meu 789 / 830 încăpea ← doar aici verificasem
trebuie să trag 945 / 830 +114
trebuie să arunc 1020 / 830 +190
Şi cauza de fond: reparaţiile scrise la ore diferite se anulau reciproc.
Două dovedite:
- `gap: 8px` de aici a anulat un `column-gap: 2px` scris cu o zi înainte,
care avea chiar comentariul „strâns cât să încapă tot pe un rând" (-66px);
- `overflow: hidden` pus tot aici tăia pastila `(45pt/45)` pe care o regulă
anterioară o scosese elegant din flux, deasupra barei (-71px).
De aceea blocul ăsta stă la FINALUL fişierului şi adună toate deciziile de
lăţime într-un singur loc. Cine schimbă ceva aici, schimbă tot.
Bugetul, după reparaţie: 585 / 754 / 777 din 830 — încape în toate stările,
cu rezervă, iar butonul acţiunii principale rămâne cu textul întreg (174px).
===================================================================== */
@media (min-width: 992px) {
/* pastila cu punctele selectate iese din flux: e informaţie de moment,
nu merită 71px permanent din bară. `overflow: visible` e obligatoriu —
altfel bara o taie exact cum o tăia înainte. */
#seatSouth #playerArea .player-info-bar {
overflow: visible !important; gap: 5px !important; position: relative !important;
}
#seatSouth #playerArea .player-info-bar .etalare-pts {
position: absolute !important; bottom: calc(100% + 4px) !important;
right: 8px !important; margin: 0 !important; z-index: 5 !important;
}
/* butoanele fără text: 30px ajung pentru o iconiţă de 15px */
#seatSouth #playerArea .player-info-bar .ra-fantoma {
width: 30px !important; min-width: 30px !important; max-width: 30px !important;
}
#seatSouth #playerArea .player-info-bar #btnAtu {
min-width: 30px !important; max-width: 30px !important; flex: 0 0 30px !important;
}
/* butoanele cu text: marginile interioare erau 18px, mai mari decât spaţiul
dintre butoane */
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn {
padding: 8px 10px !important; gap: 5px !important;
}
/* avatarul propriu şi fişele de statistici: cel mai puţin utile din bară —
jucătorul ştie cine e şi câte piese are din stativ */
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap,
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap .seat-avatar {
width: 28px !important; height: 28px !important;
}
#seatSouth #playerArea .player-info-bar .player-module-identity { gap: 6px !important; }
#seatSouth #playerArea .player-info-bar .stat-card { min-width: 38px !important; }
}
/* =====================================================================
COLOANA DIN DREAPTA, UMPLUTĂ LA ORICÂŢI ADVERSARI (2026-09-03)
La 2 jucători coloana are 469px, dar conţinutul (un scaun + stiva) ocupă
doar ~257 — restul rămânea o coadă goală de 206px SUB stivă, adică exact
ce se vede ca „neterminat".
Stiva coboară la bază (`margin-top: auto`), scaunele rămân sus. Spaţiul
liber cade acum ÎNTRE cele două blocuri, unde citeşte ca aerisire, nu ca
ceva neisprăvit.
Ce am încercat şi NU e bine: să las scaunul adversarului să crească până la
200px ca să umple coloana. Golul nu dispare, se mută ÎN scaun — piesele stau
sus, iar restul cartonaşului rămâne pâslă. Limita de 130px îl ţine la
dimensiunea conţinutului lui.
===================================================================== */
@media (min-width: 992px) {
/* Scaunul adversarului = CÂT CONŢINUTUL LUI, lipit sus. Stiva la bază.
Spaţiul liber cade între ele.
Golul NU poate fi eliminat, doar mutat: coloana are 469px ficşi, iar
adversarul are 14 piese la începutul rundei şi 2 la final. Varianta
încercată — fundal întins pe toată coloana — mută golul ÎN cartonaş:
măsurat cu 2 piese, 226px goi înăuntru, arăta ca un card gol. Aşa, golul
cade între blocuri, unde citeşte ca aerisire. (2026-09-03) */
#lateralWrap { justify-content: flex-start !important; }
#lateralWrap .opponent-area {
flex: 0 0 auto !important; height: auto !important;
min-height: 0 !important; max-height: none !important;
justify-content: flex-start !important; padding: 8px 10px !important;
}
#lateralWrap .opponent-info { flex: 0 0 auto !important; margin-bottom: 6px !important; }
/* Mâna adversarului (rând + dos piesă) e stilată o SINGURĂ dată, mai sus în
fişier (`#lateralWrap .opponent-hand` / `.opponent-tile-back`, ~27893).
Aici NU o mai redefinim — altfel s-ar duplica şi s-ar bate reguli. */
#lateralWrap > #remiSidebar { flex: 0 0 auto !important; margin-top: auto !important; }
/* pastila punctelor selectate stă DEASUPRA barei, nu sub ea */
#seatSouth #playerArea .player-info-bar .etalare-pts { bottom: auto !important; top: -20px !important; }
}
/* =====================================================================
PANOU DESCHIS → RECLAMELE SE ASCUND (2026-09-03)
Acelaşi tipar ca la Tabinet (`tabinet-pro.css`, în jur de 27002), unde e
scris chiar motivul: „altfel s-ar aduna două îngustări simultan — reclame +
chat — şi podurile ar ieşi din masă, confirmat live".
La Remi lipsea, şi se vedea exact aşa: cu panoul deschis masa scădea de la
1176 la 816px, iar butoanele ieşeau 283px peste coloana din dreapta, cu 4
piese din stativ afară.
Ce am încercat înainte şi NU e bine: să comprim bara ca să încapă în 816px.
Butoanele se strâng, dar textul devine „T…" şi „PUNCTE" se ciunteşte — adică
repar revărsarea şi stric citirea. Reclamele au 160px fiecare; ascunse, masa
recuperează 320px şi nu mai e nevoie de nicio comprimare.
Verificat după: masa 1176px, ultimul buton la 1054 cu coloana la 1108 (54px
rezervă), zero piese ieşite, textul „ALEGE O PIESĂ DE ARUNCAT" întreg.
===================================================================== */
@media (min-width: 992px) {
body.game-active:has(.context-panel.active) .lobby-ad,
body.mp-game-active:has(.context-panel.active) .lobby-ad { display: none !important; }
}
/* Stativul nu lasă piesele să iasă din el.
Cu masa îngustată (panou deschis) ieşeau 4 din 14 piese peste coloana din
dreapta. Regula rămâne şi după ce reclamele se ascund: e plasa care ţine
piesele înăuntru la orice lăţime, nu doar în cazul de acum. (2026-09-03) */
@media (min-width: 992px) {
#seatSouth #playerHand { overflow: hidden !important; }
}
/* =====================================================================
BARA DE JOS: DOAR ACŢIUNILE POSIBILE, RESTUL RESPIRĂ (2026-09-03)
Butoanele-urmă (`.ra-fantoma` — acţiunile pe care NU le poţi face acum) nu
se mai desenează pe desktop. Le pusesem pe 2 septembrie ca să se vadă că
acţiunile există; în practică ocupau 90px ca să arate ce nu poţi face, iar
trei iconiţe stinse lângă ATU nu se deosebeau de un buton disponibil.
Cu ele scoase rămâne loc, aşa că TOATE strâmtorările de mai devreme se dau
înapoi: avatarul revine de la 28 la 36px, fişele de la 38 la 48, spaţiile de
la 5 la 8, marginile butoanelor de la 8/10 la 9/16, sortarea de la 26 la 30.
Măsurat după, la rândul jucătorului (bara plină): 783px din 830, cu 48px
rezervă şi 52px până la coloana din dreapta. Când nu e rândul tău rămân doar
starea şi sortarea — 478px.
ATENŢIE la iconiţe: `.merged-actions` (clasă gândită pentru mobil, dar activă
şi pe desktop) pune iconiţă ŞI text pe fiecare buton. Iconiţa se ascunde doar
unde eticheta e chiar vizibilă — nu şi pe ATU, care are eticheta ascunsă şi
ar rămâne un buton complet gol. Am păţit-o.
===================================================================== */
@media (min-width: 992px) {
/* urmele acţiunilor imposibile nu se mai desenează */
#seatSouth #playerArea .player-info-bar .action-btn-game.ra-fantoma { display: none !important; }
/* iconiţa dispare unde textul spune deja acelaşi lucru; ATU e exceptat */
#seatSouth #playerArea .player-info-bar .action-btn-game:not(.ra-fantoma):not(#btnAtu) .material-symbols-rounded:has(~ .chip-label:not([hidden])) {
display: none !important;
}
/* conţinutul barei, la dimensiuni normale */
#seatSouth #playerArea .player-info-bar { gap: 8px !important; padding: 0 14px !important; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap,
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap .seat-avatar {
width: 36px !important; height: 36px !important;
}
#seatSouth #playerArea .player-info-bar .player-module-identity { gap: 9px !important; }
#seatSouth #playerArea .player-info-bar .stat-card {
min-width: 48px !important; padding: 3px 9px !important;
}
#seatSouth #playerArea .player-info-bar .player-module { padding: 2px 5px !important; }
#seatSouth #playerArea .player-info-bar .player-module-sort {
margin-left: 12px !important; padding-left: 12px !important;
}
#seatSouth #playerArea .player-info-bar .player-module-sort .sort-btn { width: 30px !important; }
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn {
padding: 9px 16px !important; gap: 7px !important;
}
#seatSouth #playerArea .player-info-bar .ra-principal { min-width: 190px !important; }
#seatSouth #playerArea .player-info-bar .ra-principal .chip-label {
overflow: visible !important; text-overflow: clip !important;
}
#seatSouth #playerArea .player-info-bar #btnAtu {
min-width: 44px !important; max-width: 44px !important; flex: 0 0 44px !important;
}
}
/* =====================================================================
BARA DE JOS — AŞEZARE FINALĂ ŞI IERARHIE (2026-09-03)
Trei zone, nu opt cutii egale: STARE (cronometru, nume, puncte, piese, atu,
potenţial) | UNELTE (sortarea, între linii fine) | ACŢIUNE (dreapta).
Un singur lucru trebuie să atragă privirea: ce ai de făcut acum.
Trei reguli învăţate pe parcurs, care explică valorile de mai jos:
1. BUTONUL ÎŞI IA LĂŢIMEA DIN TEXT, nu invers. Când i-am fixat `min-width`
şi am lăsat textul să se strângă, a ieşit „EGE O PIESĂ DE ARUNC".
Spaţiul se ia din module (spaţii, fişe, sortare), nu din etichetă.
2. ATU CU TEXT, nu doar cu steluţă. Îi ascunsesem eticheta ca să câştig
spaţiu şi rămăsese identic cu butoanele blocate, deşi era disponibil.
Când are text, iconiţa dispare (ca la butonul principal); rămâne doar
iconiţa când e blocat.
3. `margin-left: auto` pe butonul principal împinge grupul la dreapta fără
să ţină cont de ce vine DUPĂ el — ATU ieşea 18px din bară. Alinierea se
face cu `margin-right: auto` pe ultimul modul din stânga.
===================================================================== */
@media (min-width: 992px) {
/* ---- „DE ETALAT": eticheta deasupra valorii, nu peste ea ---- */
#seatSouth #playerArea .player-info-bar .player-module-hints {
display: flex !important; flex-direction: column !important;
align-items: center !important; justify-content: center !important;
gap: 1px !important; padding: 3px 9px !important; line-height: 1 !important;
background: rgba(0, 0, 0, .28) !important;
border: .8px solid rgba(244, 236, 216, .10) !important; border-radius: 8px !important;
}
#seatSouth #playerArea .player-info-bar .player-module-hints::before {
position: static !important; font-size: 7px !important; letter-spacing: .8px !important;
color: rgba(244, 236, 216, .5) !important; margin: 0 !important;
}
/* ---- zonele: starea fără chenare repetate, uneltele despărţite ---- */
#seatSouth #playerArea .player-info-bar .player-module-identity,
#seatSouth #playerArea .player-info-bar .player-module-stats {
background: transparent !important; border: 0 !important; box-shadow: none !important;
}
#seatSouth #playerArea .player-info-bar .stat-card {
background: rgba(0, 0, 0, .28) !important;
border: .8px solid rgba(244, 236, 216, .10) !important; box-shadow: none !important;
min-width: 44px !important; padding: 3px 7px !important;
}
#seatSouth #playerArea .player-info-bar { gap: 6px !important; padding: 0 10px !important; }
#seatSouth #playerArea .player-info-bar .player-module-identity { gap: 7px !important; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap,
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap .seat-avatar {
width: 32px !important; height: 32px !important;
}
/* `margin-right: auto` AICI, nu `margin-left: auto` pe buton — vezi nota 3 */
#seatSouth #playerArea .player-info-bar .player-module-sort {
border-left: 1px solid rgba(244, 236, 216, .12) !important;
border-right: 1px solid rgba(244, 236, 216, .12) !important;
margin: 0 6px 0 6px !important; padding: 0 6px !important;
margin-right: auto !important;
}
#seatSouth #playerArea .player-info-bar .player-module-sort .sort-btn {
width: 25px !important; background: rgba(0, 0, 0, .22) !important;
border: .8px solid rgba(244, 236, 216, .10) !important; opacity: .82 !important;
}
#seatSouth #playerArea .player-info-bar .player-module-sort .sort-btn:hover { opacity: 1 !important; }
/* ---- acţiunea principală: domină, şi îşi ia lăţimea din text ---- */
#seatSouth #playerArea .player-info-bar .ra-principal {
margin-left: 0 !important; min-width: 0 !important; width: auto !important;
flex: 0 0 auto !important; padding: 9px 18px !important;
height: 38px !important; border-radius: 11px !important;
box-shadow: 0 5px 18px -6px rgba(var(--primary-rgb, 212, 165, 68), .75),
inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}
#seatSouth #playerArea .player-info-bar .ra-principal .chip-label {
overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important;
letter-spacing: .6px !important; font-size: 13.5px !important;
}
/* ---- ATU: secundar, dar citibil ---- */
#seatSouth #playerArea .player-info-bar #btnAtu {
height: 34px !important; border-radius: 10px !important;
background: rgba(var(--primary-rgb, 212, 165, 68), .10) !important;
border: 1px solid rgba(var(--primary-rgb, 212, 165, 68), .45) !important;
box-shadow: none !important; margin-left: 8px !important;
}
#seatSouth #playerArea .player-info-bar #btnAtu.ra-secundar {
width: auto !important; min-width: 0 !important; max-width: none !important;
flex: 0 0 auto !important; padding: 9px 12px !important;
}
#seatSouth #playerArea .player-info-bar #btnAtu.ra-secundar .chip-label {
display: inline-block !important; font-size: 12px !important; font-weight: 800 !important;
letter-spacing: .5px !important; color: rgba(244, 236, 216, .92) !important;
}
#seatSouth #playerArea .player-info-bar #btnAtu.ra-secundar .material-symbols-rounded {
display: none !important;
}
/* ---- mişcare discretă: feedback, nu spectacol ---- */
#seatSouth #playerArea .player-info-bar .action-btn-game,
#seatSouth #playerArea .player-info-bar .stat-card,
#seatSouth #playerArea .player-info-bar .sort-btn {
transition: width .18s ease, opacity .18s ease, box-shadow .22s ease, transform .12s ease !important;
}
#seatSouth #playerArea .player-info-bar .ra-principal:hover {
transform: translateY(-1px) !important;
box-shadow: 0 7px 22px -6px rgba(var(--primary-rgb, 212, 165, 68), .85),
inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}
#seatSouth #playerArea .player-info-bar .ra-principal:active { transform: translateY(1px) !important; }
#seatSouth #playerArea .player-info-bar #btnAtu:hover {
background: rgba(var(--primary-rgb, 212, 165, 68), .22) !important;
border-color: rgba(var(--primary-rgb, 212, 165, 68), .75) !important;
}
#seatSouth #playerArea .player-info-bar .sort-btn:hover { transform: translateY(-1px) !important; }
#raPasi .ra-pas i {
transition: background .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
#raPasi .ra-pas.acum i { transform: scale(1.25) !important; }
@keyframes raIntra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#seatSouth #playerArea .player-info-bar .ra-principal { animation: raIntra .22s ease both !important; }
/* pastila punctelor selectate stă deasupra barei, în afara fluxului */
#seatSouth #playerArea { position: relative !important; }
#seatSouth #playerArea .player-info-bar .etalare-pts {
position: absolute !important; top: -20px !important; right: 12px !important;
margin: 0 !important; z-index: 6 !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
ECRANUL DE INTRARE ÎN LOBBY — refăcut 2026-09-04
───────────────────────────────────────────────────────────────────────────
Varianta „tipografic, calm" (D), aleasă de user dintre cinci propuneri.
PRINCIPIUL, cerut explicit: tot ce scrie pe ecran trebuie să CORESPUNDĂ.
Userul: „nu putem să lăsăm fără să corespundă". De aceea:
· salutul foloseşte username-ul real din sesiune, iar dacă nu eşti logat
rândul nici nu se randează (vezi includes/header.php);
· numărul de jucători vine din `api-online-users.php` şi rândul apare
DOAR după ce numărul a sosit — fără cifre inventate;
· linia de lumină de sub titlu ESTE bara de progres existentă, condusă de
paşii reali din `loader.js` — nu o animaţie decorativă pusă lângă ea.
CE S-A SCOS ŞI DE CE (măsurat în `loader.js` înainte de schimbare):
· paşii se afişau permanent, ca un jurnal de pornire — „Detectare
dispozitiv: Windows / Chrome" nu spune nimic jucătorului. Acum apar doar
când încărcarea depăşeşte pragul sau când un pas eşuează; atunci chiar ai
nevoie de „Lent (840ms)".
· pasul „Pregătire joc" era un `delay(300)` — nu pregătea nimic. Scos.
· sfatul de jos („Ştiaţi? …") — umplutură la intrarea în lobby. Scos.
Evantaiul de piese (`.loader-fan-deal`) rămâne în marcaj dar e ascuns aici:
varianta aleasă e tipografică. Se aduce înapoi ştergând o singură regulă.
═══════════════════════════════════════════════════════════════════════════ */
.game-loader .loader-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0;
}
/* evantaiul: ascuns în varianta tipografică (vezi nota de sus) */
.game-loader .loader-fan-deal { display: none !important; }
.game-loader .loader-logo { margin: 0 !important; }
.game-loader .logo-text {
font-family: Georgia, 'Times New Roman', serif;
letter-spacing: .22em;
font-size: clamp(22px, 6.4vw, 30px);
line-height: 1.28;
color: #eabf62;
text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 6px 28px rgba(212, 165, 68, .32);
margin: 0;
}
/* linia de lumină = bara de progres reală, doar altfel îmbrăcată */
.game-loader .loader-progress-container {
width: min(232px, 66%);
margin: 30px auto 0;
}
.game-loader .progress-bar-bg {
height: 2px;
border-radius: 2px;
background: rgba(212, 165, 68, .15);
overflow: hidden;
}
.game-loader .progress-bar-fill {
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, #c99700, #ffe6ab);
box-shadow: 0 0 14px rgba(255, 214, 132, .55);
transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
/* procentul şi textul de stare: nu-şi mai au locul lângă o linie subţire */
.game-loader .progress-info { display: none; }
.game-loader .loader-salut {
margin-top: 22px;
font-size: 13.5px;
color: rgba(234, 191, 98, .7);
}
.game-loader .loader-salut b { color: #f0cd7a; font-weight: 600; }
/* rândul „locul e viu" — ascuns până soseşte numărul adevărat */
.game-loader .loader-viu {
display: none;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 14px;
font-size: 12.5px;
color: rgba(234, 191, 98, .85);
}
.game-loader.are-online .loader-viu {
display: flex;
animation: ldApare .45s cubic-bezier(.4, 0, .2, 1) both;
}
.game-loader .loader-viu b { color: #f0cd7a; font-weight: 700; font-size: 14px; }
.game-loader .lv-puls {
width: 7px; height: 7px; border-radius: 50%; background: #43d17a;
box-shadow: 0 0 0 0 rgba(67, 209, 122, .6);
animation: ldPuls 2.1s ease-out infinite;
}
@keyframes ldPuls {
0% { box-shadow: 0 0 0 0 rgba(67, 209, 122, .5); }
70% { box-shadow: 0 0 0 8px rgba(67, 209, 122, 0); }
100% { box-shadow: 0 0 0 0 rgba(67, 209, 122, 0); }
}
@keyframes ldApare { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ── Subtitlul, 2026-09-04 ───────────────────────────────────────────────
Era în macheta variantei D pe care a ales-o userul, dar rămăsese doar în
injectări — pe pagina adevărată nu exista. Marcajul e acum în
`includes/header.php`, sub ``.
`text-indent` compensează spaţierea: fără el, `letter-spacing` adaugă un gol
după ultima literă şi rândul apare descentrat spre stânga. */
.game-loader .loader-subtitlu {
margin: 9px 0 0;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(9.5px, 2.6vw, 11px);
letter-spacing: .42em;
text-indent: .42em;
text-transform: uppercase;
color: rgba(234, 191, 98, .42);
}
/* ── Paşii: SE VĂD cât se lucrează, apoi SE RETRAG ───────────────────────
2026-09-04. Erau ascunşi până la un prag de întârziere, dar userul ceruse
explicit să se vadă cum se testează conexiunea. Acum sunt la vedere de la
început — asta ARATĂ munca reală, nu o ascunde — iar când toate s-au
terminat, `loader.js` pune `.s-a-terminat` şi lista se strânge de la sine,
lăsând ecranul curat, tipografic, pentru ultima secundă.
`max-height` face strângerea, nu doar dispariţia: altfel rămânea un gol. */
.game-loader .loader-checklist {
display: block;
width: min(300px, 90%);
margin: 24px auto 0;
text-align: left;
max-height: 200px;
opacity: 1;
/* ATENŢIE: fără `both`, dinadins. Cu `animation: ... both`, valoarea din
ultimul cadru (opacity: 1) rămâne lipită de element, iar o valoare
animată bate o declaraţie obişnuită în cascadă — deci `opacity: 0` din
`.s-a-terminat` era pur şi simplu ignorată şi lista se tăia brusc.
Prins la măsurare în browser, nu din citit. Fără `both`, după cele 0,32s
elementul revine la valorile declarate şi tranziţia de mai jos poate
interpola: măsurat 1 → 0,63 → 0,2 → 0,03 → 0. */
animation: ldApare .32s cubic-bezier(.4, 0, .2, 1);
transition: opacity .55s ease,
transform .55s cubic-bezier(.4, 0, .2, 1),
max-height .55s ease,
margin-top .55s ease;
}
.game-loader.s-a-terminat .loader-checklist {
opacity: 0;
transform: translateY(-8px) scale(.96);
max-height: 0;
margin-top: 0;
overflow: hidden;
pointer-events: none;
}
/* ── Coregrafia rândurilor, 2026-09-04 (a şasea trecere) ─────────────────
Userul, după ce a văzut varianta dinainte: „toate animaţiile nu se văd,
sunt prea rapide, nici nu se vede când verifică". Avea dreptate şi cauza
era a mea: după ce am scos întârzierile prefăcute, verificările se termină
în ~1,2s (dispozitivul instant, resursele instant, conexiunea ~175ms), deci
totul se bifa aproape simultan şi urmau 1,4s de ecran mort.
Ce am înţeles greşit până acum: „real" şi „frumos" nu se bat cap în cap.
Ecranul stă 2,9s ORICUM — momentul de brand era deja hotărât. Nu inventez
muncă; doar întind DEZVĂLUIREA peste fereastra care se cheltuie oricum.
Regula care ţine totul cinstit e în `loader.js`: fiecare rând apare la
`max(sosirea reală, slotul lui)` — niciodată mai devreme decât adevărul,
şi niciodată întinzând ecranul dacă munca durează mai mult.
Măsurat, aceleaşi stiluri, trei situaţii:
server liber → sosiri 3/179/2ms → arătate la 827/1380/1910ms
seară plină → sosiri 7/1204/7ms → arătate la 821/1380/1900ms
server sufocat → sosiri 12/3404/4105ms → arătate la 826/3405/4105ms
Pe ultimul rând: 3404 → 3405, o milisecundă. Ceremonia dispare singură.
NU redefinim aici pastila din stânga: rotirea (`checkSpin`) şi bifa `✓`
există deja la ~12122-12158. Adăugăm doar ce lipsea. */
.game-loader .loader-check-item {
display: flex; align-items: center; gap: 9px;
padding: 7px 10px; margin-bottom: 5px;
border-radius: 8px;
font-size: 12px; color: rgba(234, 191, 98, .8);
/* pornesc invizibile şi puţin mai jos; `loader.js` le cheamă pe rând */
opacity: 0;
transform: translateY(10px);
background: rgba(0, 0, 0, .2);
box-shadow: 0 0 0 0 rgba(212, 165, 68, 0);
transition: opacity .45s cubic-bezier(.4, 0, .2, 1),
transform .45s cubic-bezier(.4, 0, .2, 1),
background .45s ease,
box-shadow .45s ease;
}
/* `.vine` = rândul a intrat în listă, dar încă nu e al lui rândul */
.game-loader .loader-check-item.vine { opacity: .55; transform: none; }
/* rândul la care se lucrează chiar acum — halou cald, ochiul merge singur */
.game-loader .loader-check-item.active {
opacity: 1; transform: none;
background: rgba(212, 165, 68, .10);
box-shadow: 0 0 0 1px rgba(212, 165, 68, .28),
0 4px 18px rgba(212, 165, 68, .10);
}
.game-loader .loader-check-item.done {
opacity: 1; transform: none;
background: rgba(0, 0, 0, .22);
box-shadow: 0 0 0 1px rgba(67, 209, 122, .18);
}
/* Pasul care a picat trebuie să fie CEL MAI vizibil rând din listă.
Fără regula asta rămânea la 0,55 (moştenit de la `.vine`) — adică exact
rândul care contează era cel mai stins. Măsurat, nu presupus. */
.game-loader .loader-check-item.eroare {
opacity: 1; transform: none;
background: rgba(120, 30, 30, .25);
box-shadow: 0 0 0 1px rgba(224, 90, 90, .34);
}
/* bifa nu apare, ci pocneşte — arcul din curbă face diferenţa */
.game-loader .loader-check-item.done .check-icon,
.game-loader .loader-check-item.eroare .check-icon {
animation: ldPocneste .42s cubic-bezier(.34, 1.56, .64, 1);
}
/* Pastila pasului picat: exista `.done .check-icon` cu ✓ (~12149), dar pentru
`.eroare` nu exista NIMIC — rămânea un cerc gol, care nu spune nici că a
mers, nici că n-a mers. Îi dăm semnul ei. */
.game-loader .loader-check-item.eroare .check-icon {
border-color: #e05a5a;
background: #e05a5a;
color: #fff;
font-size: 11px;
line-height: 1;
}
.game-loader .loader-check-item.eroare .check-icon::after { content: '!'; }
@keyframes ldPocneste {
0% { transform: scale(.4); }
60% { transform: scale(1.18); }
100% { transform: scale(1); }
}
/* rezultatul intră dinspre dreapta, ca să-l vezi SOSIND, nu apărut deja */
.game-loader .check-detail {
margin-left: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: rgba(234, 191, 98, .55);
opacity: 0;
transform: translateX(7px);
transition: opacity .4s ease .06s,
transform .4s cubic-bezier(.4, 0, .2, 1) .06s;
}
.game-loader .loader-check-item.done .check-detail,
.game-loader .loader-check-item.eroare .check-detail {
opacity: .62; transform: none;
}
/* bara urmează pasul rândurilor, nu sare */
.game-loader .progress-bar-fill { transition: width .55s cubic-bezier(.4, 0, .2, 1); }
/* pasul care merge prost se vede din prima */
.game-loader .loader-check-item.lent .check-detail,
.game-loader .loader-check-item.eroare .check-detail { color: #ffb95e; }
.game-loader .loader-check-item.eroare { background: rgba(120, 30, 30, .25); }
@media (prefers-reduced-motion: reduce) {
.game-loader .lv-puls,
.game-loader.are-online .loader-viu,
.game-loader .loader-checklist { animation: none !important; }
/* Coregrafia rămâne, dar fără mişcare: rândurile şi rezultatele se văd la
fel de bine, doar că apar direct, fără să alunece sau să pocnească. */
.game-loader .loader-checklist,
.game-loader .loader-check-item,
.game-loader .check-detail,
.game-loader .progress-bar-fill { transition: none !important; }
.game-loader .loader-check-item.done .check-icon,
.game-loader .loader-check-item.eroare .check-icon,
.game-loader .loader-check-item.active .check-icon,
.game-loader .loader-check-item.active .check-icon::before { animation: none !important; }
.game-loader .loader-check-item { transform: none; }
.game-loader .check-detail { transform: none; }
.game-loader.s-a-terminat .loader-checklist { transform: none; }
}
/* Ordinea vizuală, independentă de ordinea din marcaj (2026-09-04).
În HTML lista tehnică vine imediat după logo, deci când se dezvăluie se băga
ÎNTRE titlu şi salut şi rupea compoziţia. Cu `order` o trimitem la coadă,
fără să mutăm nimic în marcaj: titlu → linie → salut → jucători → detalii. */
.game-loader .loader-logo { order: 1; }
.game-loader .loader-subtitlu { order: 2; }
.game-loader .loader-progress-container { order: 3; }
.game-loader .loader-salut { order: 4; }
.game-loader .loader-viu { order: 5; }
.game-loader .loader-checklist { order: 6; }
/* ── PEISAJ SCURT: bifele pe UN RÂND ─────────────────────────────────────
2026-09-04. Când am scos paşii de sub ascundere, portretul a ieşit bine dar
peisajul s-a rupt: măsurat pe 737×357, conţinutul ajungea la 400px într-o
cutie de 357 — titlul se tăia sus, a treia bifă jos. Prins din captură de
ecran, nu din calcul.
Am încercat întâi doar strângerea distanţelor: încăpea, dar fix la limită,
cu 0px rezervă. Prea riscant — alt telefon, alt font, alt nume de utilizator
mai lung şi iar se taie.
Soluţia care ţine: în peisaj cele trei verificări stau UNA LÂNGĂ ALTA, ca
trei cartonaşe, nu una sub alta. Lista scade de la 114px la 68px şi rămâne
loc liber jos. Retragerea (`.s-a-terminat`) funcţionează la fel — verificat:
68px → 0, opacitate 1 → 0.
NOTĂ: regula veche din @media (max-height:500px) de la ~15929 pune
`flex-direction: column !important` pe listă; de-aia sunt `!important`-urile
de aici — nu din obişnuinţă. */
@media (max-height: 500px) and (orientation: landscape) {
.game-loader .loader-checklist {
display: flex !important;
flex-direction: row !important;
flex: 0 0 auto !important;
width: min(520px, 96%) !important;
gap: 6px !important;
margin-top: 14px;
}
.game-loader .loader-check-item {
flex: 1 1 0 !important;
flex-direction: column !important;
align-items: center !important;
gap: 3px !important;
padding: 6px !important;
margin-bottom: 0 !important;
min-height: 0 !important;
font-size: 10.5px !important;
text-align: center;
}
.game-loader .loader-check-item .check-detail {
margin-left: 0 !important;
font-size: 9.5px !important;
}
.game-loader .loader-subtitlu { margin-top: 6px; }
.game-loader .loader-progress-container { margin-top: 16px; }
.game-loader .loader-salut { margin-top: 12px; }
.game-loader .loader-viu { margin-top: 8px; }
/* 16-09-2026 — userul: „loader-ul nu se încadrează în landscape". Măsurat pe
844×390: regula VECHE de peisaj de la ~16461 pune `.loader-content
{ flex-direction: row !important }` şi bate `.game-loader .loader-content
{ flex-direction: column }` de mai sus (aceea n-are !important). Rezultatul:
titlu, subtitlu, salut, jucători şi lista — toate pe UN rând de 92vw;
titlul ieşea tăiat în stânga, al treilea cartonaş ieşea din cutie în
dreapta. Aici forţăm coloana cu !important (specificitate mai mare + mai
jos în fişier) şi strângem spaţiile. Măsurat după: cutie 560×230, fără
nicio depăşire (scrollWidth = clientWidth, scrollHeight = clientHeight). */
.game-loader .loader-content {
flex-direction: column !important;
gap: 0 !important;
width: min(560px, 94vw) !important;
max-width: 560px !important;
max-height: 94dvh !important;
padding: 14px 22px 20px !important;
overflow: hidden !important;
}
.game-loader .loader-logo { min-width: 0 !important; }
.game-loader .logo-text { font-size: 22px !important; letter-spacing: .2em !important; }
.game-loader .loader-subtitlu { margin-top: 4px !important; }
.game-loader .loader-progress-container { margin-top: 12px !important; }
.game-loader .loader-salut { margin-top: 10px !important; font-size: 12.5px !important; }
.game-loader .loader-viu { margin-top: 6px !important; }
.game-loader .loader-checklist { margin-top: 12px !important; }
}
/* Ieşirea ecranului de intrare (2026-09-04, a doua trecere).
Conţinutul se ascundea INSTANT (`transition: none`) şi doar fundalul se
stingea — deci textul nu se topea, se tăia, şi asta contribuia la senzaţia
de „a fulgerat". Motivul din comentariul original era evantaiul de piese,
care arăta prost în timpul stingerii; în varianta tipografică piesele nu mai
sunt afişate, deci motivul a dispărut.
Măsurat la mijlocul stingerii: conţinut 0.42, fundal 0.50 — merg împreună. */
.game-loader.fade-out {
transition: opacity .34s ease, transform .34s ease !important;
}
.game-loader.fade-out .loader-content {
opacity: 0 !important;
visibility: visible !important;
transform: translateY(-6px) !important;
transition: opacity .3s ease, transform .34s cubic-bezier(.4, 0, .2, 1) !important;
}
/* ===== „Creează Masa" = CTA special + animaţie (07-09-2026) =====
Userul: „butonul creează masa să-l faci special" + „şi animaţie, să înţeleagă
userii că acolo se creează masa". Era aur mat (gradient 135° primar→închis,
text alb, fără contur). Acum: aur plin cu luciu (deschis sus → închis jos),
inel auriu deschis INTERIOR (inset 0 0 0 1px, nu border — border-ul îl făcea
cu 1px mai înalt decât „Intră Rapid"), text ÎNCHIS 900 majuscule cu umbră fină,
highlight interior sus + umbră interioară jos, glow auriu.
Animaţii (toate infinite, discrete, oprite la prefers-reduced-motion):
• remiCreatePulse 2.6s — glow-ul creşte şi un inel auriu se dilată din contur
şi se stinge (de asta `overflow: visible`);
• remiCreatePop 2.6s — „+"-ul saltă (1.3×) şi se roteşte 90° o dată pe ciclu;
• remiCreateSheen 4.5s — licăr alb care traversează; e `::before` cu
background-position (o bară skew-uită pe ::after ieşea din buton cu overflow visible).
Fără @media: aceeaşi regulă pe desktop (36px, ca „Intră Rapid") şi pe mobil
(34px în ambele orientări) — id-ul bate `.lobby-btn` din remi-mobile.css.
Verificat 1300×630, 844×390, 360×740: înălţimea egală cu „Intră Rapid". */
/* 17-09-2026 — butonul rămâne „special" (luciu, inel, pulsaţie), dar culoarea vine din TEMĂ.
Era aur fix (#f6dc8c → #c3923a), aşa că pe temele verzi/albastre/roşii sărea în ochi ca
venit din alt site. Degradeul se face acum din accentul temei: deschis sus, accent la
mijloc, închis jos — acelaşi relief, altă culoare. */
html body.game-menu #lobbyBtnCreate {
position: relative !important; overflow: visible !important; isolation: isolate;
background: linear-gradient(180deg,
color-mix(in srgb, var(--remi-accent) 55%, #fff) 0%,
var(--remi-accent) 45%,
color-mix(in srgb, var(--remi-accent) 76%, #000) 100%) !important;
color: var(--remi-bg) !important; font-weight: 900 !important; letter-spacing: .5px !important; text-transform: uppercase !important;
border: 0 !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--remi-accent) 45%, #fff), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 color-mix(in srgb, var(--remi-accent) 55%, #000),
0 0 18px rgba(var(--primary-rgb, 212, 165, 68), .5), 0 4px 12px rgba(0, 0, 0, .4) !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
animation: remiCreatePulse 2.6s ease-in-out infinite;
}
html body.game-menu #lobbyBtnCreate .material-symbols-rounded {
color: var(--remi-bg) !important; transform-origin: 50% 50%;
animation: remiCreatePop 2.6s ease-in-out infinite;
}
html body.game-menu #lobbyBtnCreate::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
background: linear-gradient(105deg, transparent 0%, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%, transparent 100%);
background-size: 260% 100%;
animation: remiCreateSheen 4.5s ease-in-out infinite;
}
@keyframes remiCreateSheen { 0% { background-position: 120% 0; } 35% { background-position: -60% 0; } 100% { background-position: -60% 0; } }
@keyframes remiCreatePulse {
0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--remi-accent) 45%, #fff), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 color-mix(in srgb, var(--remi-accent) 55%, #000),
0 0 14px rgba(var(--primary-rgb, 212, 165, 68), .45), 0 4px 12px rgba(0, 0, 0, .4), 0 0 0 0 rgba(var(--primary-rgb, 212, 165, 68), .55); }
55% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--remi-accent) 45%, #fff), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 color-mix(in srgb, var(--remi-accent) 55%, #000),
0 0 24px rgba(var(--primary-rgb, 212, 165, 68), .7), 0 4px 12px rgba(0, 0, 0, .4), 0 0 0 7px rgba(var(--primary-rgb, 212, 165, 68), 0); }
}
@keyframes remiCreatePop { 0%, 60%, 100% { transform: scale(1) rotate(0); } 70% { transform: scale(1.3) rotate(90deg); } 85% { transform: scale(1) rotate(90deg); } }
html body.game-menu #lobbyBtnCreate:hover { filter: brightness(1.06); transform: translateY(-1px); }
html body.game-menu #lobbyBtnCreate:active { transform: translateY(0); filter: brightness(.98); }
@media (prefers-reduced-motion: reduce) {
html body.game-menu #lobbyBtnCreate, html body.game-menu #lobbyBtnCreate::before,
html body.game-menu #lobbyBtnCreate .material-symbols-rounded { animation: none !important; }
}
/* ═══ HEADER = FOOTER şi pe DESKTOP (09-09-2026) ═══════════════════════════════
Userul: „butoane header ca în footer". Pe mobil era făcut din 07-09
(`remi-mobile.css` ~3259) — verificat pe banc în ambele orientări, diff-ul
computed buton↔buton şi etichetă↔etichetă e gol. Pe desktop însă butoanele
rămăseseră pe reţeta din `daily-spin.css`: pastilă 999px, gradient albăstrui
(38,45,56 → 21,26,34), ramă albă .14, umbră albă+neagră. Nu din fişierele
Remi — de-aia nu se vedea căutând aici.
Măsurat computed-style pe `.nav-bar-btn` (MESE/CHAT/SETARI/MENU) şi copiat
proprietate cu proprietate: colţ 12, ramă aurie .45, gradient auriu .14→.05,
inset auriu .35 + halou 10px .18, înălţime 38, padding 9/22, conţinut centrat,
etichetă 15px/800 majuscule cu spaţiere .4 în `rgb(212,165,68)` — aceeaşi
culoare la toate patru butoanele din footer, activ sau nu.
CAPCANĂ: la footer linia aurie de jos e pe `::after`, dar la header `::after`
e deja folosit de licărul roţii zilnice (`.ds-hbtn--ready::after`, daily-spin.css).
Pusă acolo, ar fi omorât animaţia. De-aceea linia e pe `::before`, exact ca în
`remi-mobile.css`. Butoanele se lăţesc de la majuscule (97→123 şi 151→197);
verificat la 1536, mai rămâne loc în dreapta. */
@media (min-width: 992px) {
html body .ds-hbtn {
height: 38px !important;
padding: 9px 22px !important;
justify-content: center !important;
gap: 8px !important;
border-radius: 12px !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .45) !important;
background: linear-gradient(rgba(var(--primary-rgb, 212, 165, 68), .14), rgba(var(--primary-rgb, 212, 165, 68), .05)) !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .35),
0 0 10px rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
position: relative !important;
overflow: hidden !important;
}
html body .ds-hbtn::before {
content: '' !important;
position: absolute !important;
left: 10px !important; right: 10px !important; bottom: 0 !important; top: auto !important;
height: 2px !important; width: auto !important;
border-radius: 2px !important;
pointer-events: none !important;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .8), transparent) !important;
}
html body .ds-hbtn:hover {
border-color: rgba(var(--primary-rgb, 212, 165, 68), .7) !important;
background: linear-gradient(rgba(var(--primary-rgb, 212, 165, 68), .22), rgba(var(--primary-rgb, 212, 165, 68), .08)) !important;
}
html body .ds-hbtn .ds-htxt {
font-size: 15px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .4px !important;
color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
html body .ds-hbtn .ds-hico {
font-size: 16px !important;
color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
}
/* ═══ MASA: „← MESE" în familie, pe mijlocul barei (09-09-2026) ════════════════
Butonul de ieşire (`.mp-game-bar-leave`) rămăsese pe reţeta lui: colţ 10, alt
auriu (255,215,0 în loc de 212,165,68), gradient 135deg spre negru, umbră
alb+negru, text 12/700 minuscule, fără linie aurie. Lângă header-ul şi footer-ul
refăcute sărea în ochi. Acum ia aceeaşi placă.
Pe mijloc: aşezat lângă titlu se lipea de el (marginea titlului 210,2 şi
marginea butonului 210,0 — se atingeau).
CAPCANĂ, plătită: centrarea trebuie pusă pe ÎNVELIŞ (`.mp-game-bar.active`), nu
pe buton. Învelişul are `backdrop-filter: blur(6px)`, iar asta îl face bloc de
încadrare pentru copiii absoluţi — butonul cu `left: 50%` se centra în cei 26px
ai învelişului, nu în bară, şi rămânea lipit de titlu (centru 231 în loc de 768).
La proba injectată mergea fiindcă bara n-avea încă clasa `active`, deci nici
blur; după reîncărcare, cu masa pornită, s-a rupt. Învelişul se face şi
transparent, altfel i se vede propria cutie în jurul butonului.
Rezultat pe 1536: buton centrat pe 768, titlul se termină la 210, butoanele din
dreapta încep la 1153. */
@media (min-width: 992px) {
html body .top-bar > .mp-game-bar.active {
position: absolute !important;
left: 50% !important; top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important; z-index: 6 !important;
background: none !important; border: 0 !important; padding: 0 !important;
box-shadow: none !important; border-radius: 0 !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .top-bar .mp-game-bar-leave {
position: relative !important;
left: auto !important; right: auto !important; top: auto !important;
transform: none !important;
height: 38px !important; padding: 9px 22px !important; gap: 8px !important;
border-radius: 12px !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .45) !important;
background: linear-gradient(rgba(var(--primary-rgb, 212, 165, 68), .14), rgba(var(--primary-rgb, 212, 165, 68), .05)) !important;
box-shadow: inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .35),
0 0 10px rgba(var(--primary-rgb, 212, 165, 68), .18) !important;
overflow: hidden !important;
font-size: 15px !important; font-weight: 800 !important;
letter-spacing: .4px !important; text-transform: uppercase !important;
color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
html body .top-bar .mp-game-bar-leave::after {
content: '' !important; position: absolute !important;
left: 10px !important; right: 10px !important; bottom: 0 !important; top: auto !important;
height: 2px !important; width: auto !important; border-radius: 2px !important;
pointer-events: none !important;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 212, 165, 68), .8), transparent) !important;
}
html body .top-bar .mp-game-bar-leave .material-symbols-rounded {
font-size: 18px !important;
color: rgb(var(--primary-rgb, 212, 165, 68)) !important;
}
/* `transform: none !important` de mai sus omoară şi ridicarea la trecerea cu
mouse-ul (regula de bază n-are !important). O pun la loc. */
html body .top-bar .mp-game-bar-leave:hover { transform: translateY(-1px) !important; }
}
/* ═══ MASA: panoul din dreapta = cutia din lobby (09-09-2026) ══════════════════
Userul: „panelul nu este ca în lobby, de ce?". Fiindcă reţeta de cutie e scrisă
doar pentru `body.game-menu` — şi aici, şi în `remi-mobile.css`. La masă se
aplica doar regula de bază `.context-panel`: fundal maro deschis
rgba(58,35,16,.95), fără ramă, colţ 0, doar o licărire pe muchie. Acum ia exact
cutia din lobby: fundal întunecat, ramă aurie subţire, colţ 16 şi cele două
linii aurii sus şi jos. Valorile-s copiate din regula `body.game-menu
#contextPanel` de mai sus, nu rescrise din memorie. */
@media (min-width: 992px) {
body.game-active #contextPanel,
body.mp-game-active #contextPanel {
background: linear-gradient(165deg,
color-mix(in srgb, var(--jo-cutie-a) 50%, transparent),
color-mix(in srgb, var(--jo-cutie-b) 60%, transparent)) !important;
border: .8px solid rgba(var(--primary-rgb, 212, 165, 68), .22) !important;
border-radius: 16px !important;
box-shadow: 0 22px 54px -26px rgba(0, 0, 0, .75),
inset 0 1px 0 rgba(var(--primary-rgb, 212, 165, 68), .08) !important;
overflow: hidden !important;
}
body.game-active #contextPanel::before,
body.game-active #contextPanel::after,
body.mp-game-active #contextPanel::before,
body.mp-game-active #contextPanel::after {
content: '' !important; position: absolute !important;
left: 26px !important; right: 26px !important; height: 2px !important;
border-radius: 2px !important; z-index: 5 !important; pointer-events: none !important;
background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb, 212, 165, 68)), transparent) !important;
}
body.game-active #contextPanel::before,
body.mp-game-active #contextPanel::before { top: 0 !important; bottom: auto !important; }
body.game-active #contextPanel::after,
body.mp-game-active #contextPanel::after { bottom: 0 !important; top: auto !important; }
}
/* ══════════════════════════════════════════════════════════════════════
CORONIŢE — primii 3 din clasament, arătaţi în joc (16-09-2026)
──────────────────────────────────────────────────────────────────────
Desenul e unul singur, montat în pagină de `remi-pro.js`
(`_coroaneMonteazaDesenul`). Aici se decide doar DIN CE e făcută fiecare:
--mg = metalul (aur / argint / bronz)
--gemA = piatra mare (vârf + mijlocul benzii)
--gemB = pietrele laterale de pe bandă
--ln = conturul, altul pentru fiecare metal — cu un contur brun comun
aurul se murdărea şi semăna cu bronzul.
Strălucirea e pusă pe , nu în desen, ca să meargă la orice mărime.
Clasele sunt noi (prefix `rmi-cor`), nu calcă nimic existent.
══════════════════════════════════════════════════════════════════════ */
.rmi-cor {
display: inline-block;
vertical-align: -2px;
flex: 0 0 auto; /* în rândurile flex să nu fie turtită */
pointer-events: none;
}
.rmi-cor-1 {
--mg: url(#rmiAur);
--gemA: url(#rmiRubin);
--gemB: url(#rmiSmarald);
--ln: rgba(138, 96, 0, .48);
filter: drop-shadow(0 0 2px rgba(255, 226, 80, .95)) drop-shadow(0 0 6px rgba(255, 205, 20, .55));
animation: rmiCorAur 2.6s ease-in-out infinite;
}
.rmi-cor-2 {
--mg: url(#rmiArg);
--gemA: url(#rmiSafir);
--gemB: url(#rmiRubin);
--ln: rgba(52, 64, 80, .5);
filter: drop-shadow(0 0 1.6px rgba(226, 236, 245, .9)) drop-shadow(0 0 5px rgba(170, 190, 210, .42));
animation: rmiCorArgint 3.1s ease-in-out infinite;
}
.rmi-cor-3 {
--mg: url(#rmiBrz);
--gemA: url(#rmiSmarald);
--gemB: url(#rmiSafir);
--ln: rgba(58, 32, 8, .62);
filter: drop-shadow(0 0 1.5px rgba(214, 150, 96, .85)) drop-shadow(0 0 4.5px rgba(150, 86, 34, .4));
animation: rmiCorBronz 3.5s ease-in-out infinite;
}
@keyframes rmiCorAur {
0%, 100% { filter: drop-shadow(0 0 1.6px rgba(255, 226, 80, .8)) drop-shadow(0 0 4px rgba(255, 205, 20, .4)); }
50% { filter: drop-shadow(0 0 3.4px rgba(255, 236, 120, 1)) drop-shadow(0 0 10px rgba(255, 210, 25, .78)); }
}
@keyframes rmiCorArgint {
0%, 100% { filter: drop-shadow(0 0 1.2px rgba(226, 236, 245, .72)) drop-shadow(0 0 3.4px rgba(170, 190, 210, .3)); }
50% { filter: drop-shadow(0 0 2.8px rgba(245, 250, 255, .95)) drop-shadow(0 0 8px rgba(180, 200, 220, .6)); }
}
@keyframes rmiCorBronz {
0%, 100% { filter: drop-shadow(0 0 1.1px rgba(214, 150, 96, .62)) drop-shadow(0 0 3px rgba(150, 86, 34, .26)); }
50% { filter: drop-shadow(0 0 2.6px rgba(228, 168, 114, .88)) drop-shadow(0 0 7px rgba(162, 94, 38, .5)); }
}
/* Cine a cerut sistemului mai puţină mişcare o primeşte: rămâne doar haloul fix.
`--anim` opreşte şi scânteia, şi lumina care mătură, care sunt desenate în SVG. */
@media (prefers-reduced-motion: reduce) {
.rmi-cor-1, .rmi-cor-2, .rmi-cor-3 { animation: none; --anim: none; }
}
/* Pe mobil barele de identitate sunt strâmte (bara de jos are `flex-wrap`), iar
`.lobby-card-name` taie cu „…". Coroniţa se face puţin mai mică, ca să nu împingă
numele pe rândul următor. CSS bate atributele `width`/`height` din SVG. */
@media (max-width: 991px) {
.rmi-cor { width: 18px; height: 15px; vertical-align: -2px; }
}
/* În cartonaşul din lobby coroniţa stă înaintea numelui (vezi nota din remi-pro.js),
deci are nevoie de puţin aer la dreapta, nu la stânga. */
.lobby-card-name .rmi-cor { margin-right: 3px; }
/* ══════════════════════════════════════════════════════════════════════
FIŞA DE JUCĂTOR — panoul Statistici (16-09-2026)
Desenată de `_lobbyFetchPanelStats()` din remi-pro.js. Totul pe variabilele temei;
fără lăţimi fixe, deci încape în panoul lateral (desktop), în panoul pe toată
lăţimea (mobil portret) şi în panoul pe tot ecranul (mobil peisaj), unde doar
derulează. Prefix `fj-`, clase noi, nu calcă nimic.
══════════════════════════════════════════════════════════════════════ */
.fj { color: var(--remi-text); }
.fj-gol { padding: 26px 12px; text-align: center; color: var(--remi-text-dim); font-size: 13px; }
.fj-gol p { margin: 8px 0 0; }
.fj-head { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--remi-border);
border-radius: 14px; background: linear-gradient(160deg, rgba(var(--remi-accent-rgb), .10), rgba(0, 0, 0, .18)); }
.fj-head-txt { flex: 1; min-width: 0; }
.fj-av { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
background: linear-gradient(135deg, var(--remi-surface-3), var(--remi-surface-2)); display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 18px; color: var(--remi-accent); border: 2px solid rgba(var(--remi-accent-rgb), .45); }
.fj-av img { width: 100%; height: 100%; object-fit: cover; }
.fj-name { font-size: 16px; font-weight: 800; letter-spacing: .2px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.fj-rang { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--remi-accent);
background: rgba(var(--remi-accent-rgb), .12); border: 1px solid rgba(var(--remi-accent-rgb), .35); }
.fj-lvl { margin-top: 8px; }
.fj-lvl-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 10.5px;
color: var(--remi-text-dim); font-variant-numeric: tabular-nums; }
.fj-lvl-row b { color: var(--remi-text); }
.fj-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fj-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--remi-accent), var(--remi-accent-light)); }
.fj-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fj-kpi > div { border: 1px solid var(--remi-border); border-radius: 12px; padding: 10px 6px; text-align: center; background: rgba(0, 0, 0, .14); min-width: 0; }
.fj-kpi b { display: block; font-size: 19px; font-weight: 800; line-height: 1.1; color: var(--remi-accent); font-variant-numeric: tabular-nums; }
.fj-kpi small { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--remi-text-dim); }
.fj-kpi em { display: block; margin-top: 1px; font-style: normal; font-size: 10px; color: var(--remi-text-dim); }
.fj-sec { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 10px; font-weight: 800;
letter-spacing: .9px; text-transform: uppercase; color: var(--remi-text-dim); }
.fj-sec::after { content: ""; flex: 1; height: 1px; background: var(--remi-border); }
.fj-wl { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--remi-border); border-radius: 12px; background: rgba(0, 0, 0, .14); }
.fj-wl-row { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fj-wl-row b { font-weight: 800; white-space: nowrap; }
.fj-wl-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.fj-wl-bar i { display: block; height: 100%; }
.fj-list { margin-top: 8px; border: 1px solid var(--remi-border); border-radius: 12px; background: rgba(0, 0, 0, .14); overflow: hidden; }
.fj-li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; font-size: 12px; border-top: 1px solid var(--remi-border); }
.fj-li:first-child { border-top: 0; }
.fj-li span { color: var(--remi-text-dim); min-width: 0; }
.fj-li b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fj-g { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--remi-border); }
.fj-g:first-child { border-top: 0; }
.fj-pill { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 11px; }
.fj-pill.v { background: rgba(var(--remi-success-rgb), .15); color: var(--remi-success); border: 1px solid rgba(var(--remi-success-rgb), .35); }
.fj-pill.i { background: rgba(var(--remi-danger-rgb), .12); color: var(--remi-danger); border: 1px solid rgba(var(--remi-danger-rgb), .3); }
.fj-g-main { flex: 1; min-width: 0; }
.fj-g-t { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; }
.fj-g-t b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fj-g-s { margin-top: 1px; font-size: 10.5px; color: var(--remi-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── REALIZĂRI (18-09-2026) — acelaşi limbaj ca fişa de jucător.
Reia `.fj-kpi`, `.fj-sec`, `.fj-list`, `.fj-g`, `.fj-pill`, `.fj-bar`; aici sunt
doar cele patru bucăţi pe care fişa nu le avea: raritatea, bara de progres pe
rând, bifa şi starea „încă închisă". */
.rz-inchisa { opacity: .62; }
.rz-rar { font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
padding: 1px 6px; border-radius: 999px; border: 1px solid var(--remi-border); color: var(--remi-text-dim); }
.rz-obisnuita { }
.rz-rara { color: var(--remi-accent); border-color: rgba(var(--remi-accent-rgb), .35); }
.rz-aleasa { color: var(--remi-success); border-color: rgba(var(--remi-success-rgb), .35); }
.rz-legendara { color: var(--remi-accent); border-color: rgba(var(--remi-accent-rgb), .55);
background: rgba(var(--remi-accent-rgb), .12); }
.rz-bara { height: 3px; border-radius: 3px; overflow: hidden; margin-top: 5px;
background: rgba(var(--remi-accent-rgb), .14); }
.rz-bara i { display: block; height: 100%; background: var(--remi-accent); transition: width .25s ease; }
.rz-bif { flex: 0 0 auto; font-size: 18px; color: var(--remi-success); }
/* telefoane înguste (portret ≤ 400px): cifrele mari puţin mai mici, avatarul mai mic */
@media (max-width: 400px) {
.fj-av { width: 44px; height: 44px; font-size: 16px; }
.fj-name { font-size: 15px; }
.fj-kpi { gap: 6px; }
.fj-kpi b { font-size: 17px; }
.fj-kpi small { font-size: 9px; letter-spacing: .5px; }
}
/* peisaj pe telefon (înălţime mică): panoul e pe tot ecranul şi derulează; strângem spaţiile
pe verticală ca să se vadă antetul + cifrele + bilanţul fără derulare */
@media (orientation: landscape) and (max-height: 500px) {
.fj-head { padding: 10px 12px; }
.fj-av { width: 40px; height: 40px; font-size: 15px; }
.fj-lvl { margin-top: 5px; }
.fj-kpi { margin-top: 8px; }
.fj-kpi > div { padding: 7px 6px; }
.fj-sec { margin-top: 10px; }
.fj-li, .fj-g { padding: 6px 10px; }
}
/* ══════════════════════════════════════════════════════════════════════
MASA LINIŞTITĂ CÂT SE JOACĂ (18-09-2026)
──────────────────────────────────────────────────────────────────────
Userul: „când tragi, arunci, tot flashuieşte". Am căutat întâi în partea
greşită — credeam că se reconstruieşte stativul. Se reconstruieşte (70 de ori
pe o partidă, din care 37 degeaba), dar asta NU se vede: o reconstruire făcută
într-o bucată se desenează o singură dată.
Măsurat cu `document.getAnimations()` în timpul unei partide reale:
· în repaus, fără nicio acţiune : 25 de bucle care nu se opresc niciodată
· imediat după ce tragi/arunci : între 31 şi 100 de animaţii, media 48
Deci nu acţiunea e vinovată. Masa pur şi simplu nu stă locului: respiră,
sclipeşte, pulsează şi orbitează în peste douăzeci de locuri deodată.
Aici oprim DOAR podoabele, şi doar cât e o mână în joc. Rămân semnele care
înseamnă ceva: rama de rând, becul de etalare, avertismentul de nepotrivire.
══════════════════════════════════════════════════════════════════════ */
body.game-active .brand-title, /* sclipirea aurie din titlu */
body.game-active .result-title, /* pulsul din fereastra de final */
body.game-active .result-animation::before,
body.game-active .lobby-ad-card .ad-icon, /* iconiţele din panourile laterale */
body.game-active .opponent-area.active-turn::after, /* particulele care orbitează */
body.game-active .seat-south .identity-status-dot,
body.game-active .tile.color-joker::after, /* lucirea de pe jokeri */
body.game-active .tile.color-joker .joker-label,
body.game-active .discard-history-tile.color-joker::after,
body.game-active .immersive-toggle-float,
body.game-active .immersive-toggle-float::before,
body.game-active .immersive-toggle-float::after,
body.game-active .atu-display.atu-beside-pile {
animation: none !important;
}
/* Rama de rând rămâne solidă şi la fel de vizibilă — se opreşte doar pulsul ei. */
body.game-active .etalare-zone.zone-active { animation: none !important; }
/* Cine a cerut mişcare redusă din sistem primeşte liniştea peste tot, nu doar în joc. */
@media (prefers-reduced-motion: reduce) {
.brand-title, .result-title, .result-animation::before, .lobby-ad-card .ad-icon,
.opponent-area.active-turn::after, .seat-south .identity-status-dot,
.tile.color-joker::after, .tile.color-joker .joker-label,
.discard-history-tile.color-joker::after, .immersive-toggle-float,
.atu-display.atu-beside-pile, .etalare-zone.zone-active {
animation: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════════
BULA DE CHAT ÎN SALA DE AŞTEPTARE (18-09-2026)
Stă în rândul celui care a scris, lipită de avatarul lui, cu vârful spre el.
Nu poate ieşi din cartonaşul locului: într-o listă de rânduri, orice balon care
iese în sus acoperă antetul sau butoanele vecinului. Textul se opreşte la două
rânduri, cu trei puncte — întregul rămâne oricum în panoul de chat.
══════════════════════════════════════════════════════════════════════ */
.jo-bula-sala {
position: fixed; z-index: 70; max-width: 300px; padding: 6px 11px 7px;
border-radius: 12px; border: 1px solid rgba(var(--remi-accent-rgb), .34);
background: linear-gradient(180deg, rgba(58, 42, 22, .98), rgba(38, 26, 14, .98));
box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
font-size: 12.5px; line-height: 1.35; color: var(--remi-text); text-align: left;
opacity: 0; transform: translateX(-6px) scale(.97); transform-origin: 0 50%;
transition: opacity .16s ease, transform .18s cubic-bezier(.2, .8, .3, 1);
pointer-events: none; /* butoanele de dedesubt rămân apăsabile */
}
.jo-bula-sala.vine { opacity: 1; transform: none; }
.jo-bula-sala.pleaca { opacity: 0; transform: translateX(-4px); }
.jo-bula-sala b {
display: block; margin-bottom: 1px; font-size: 10px; font-weight: 800;
letter-spacing: .5px; text-transform: uppercase; color: var(--remi-accent);
}
.jo-bula-sala-text {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis; word-break: break-word;
}
/* vârful, spre avatar */
.jo-bula-sala::before {
content: ''; position: absolute; left: -6px; top: var(--varfY, 50%); margin-top: -6px;
width: 11px; height: 11px; transform: rotate(45deg);
background: rgba(58, 42, 22, .98);
border-left: 1px solid rgba(var(--remi-accent-rgb), .34);
border-bottom: 1px solid rgba(var(--remi-accent-rgb), .34);
}
/* La masă locurile adversarilor stau pe marginea din dreapta, deci bula lor n-are loc
acolo: trece în stânga avatarului şi vârful se mută pe partea cealaltă. */
.jo-bula-sala.spre-stanga { transform: translateX(6px) scale(.97); transform-origin: 100% 50%; }
.jo-bula-sala.spre-stanga.vine { transform: none; }
.jo-bula-sala.spre-stanga.pleaca { transform: translateX(4px); }
.jo-bula-sala.spre-stanga::before {
left: auto; right: -6px;
border-left: 0; border-bottom: 0;
border-right: 1px solid rgba(var(--remi-accent-rgb), .34);
border-top: 1px solid rgba(var(--remi-accent-rgb), .34);
}
/* Reper lat (bara locului pe telefon, zona adversarului): bula stă deasupra lui,
centrată, cu vârful în jos. Lateral n-ar mai avea unde încăpea. */
.jo-bula-sala.deasupra { transform: translateY(6px) scale(.97); transform-origin: 50% 100%; }
.jo-bula-sala.deasupra.vine { transform: none; }
.jo-bula-sala.deasupra.pleaca { transform: translateY(-4px); }
.jo-bula-sala.deasupra::before {
left: var(--varfX, 50%); top: auto; bottom: -6px; margin-top: 0; margin-left: -6px;
border-left: 0; border-top: 0;
border-right: 1px solid rgba(var(--remi-accent-rgb), .34);
border-bottom: 1px solid rgba(var(--remi-accent-rgb), .34);
}
/* avatarul pulsează scurt cât vorbeşte omul — şi în sală, şi la masă */
@keyframes joVorbeste {
0% { box-shadow: 0 0 0 0 rgba(var(--remi-accent-rgb), .55); }
100% { box-shadow: 0 0 0 10px rgba(var(--remi-accent-rgb), 0); }
}
.mw-lx-avatar.jo-vorbeste,
.seat-avatar.jo-vorbeste { animation: joVorbeste 1.1s ease-out 2; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
.mw-lx-avatar.jo-vorbeste, .seat-avatar.jo-vorbeste { animation: none; }
.jo-bula-sala { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════════
PANOUL DE CONTEXT — limbaj vizual comun pentru toate taburile (16-09-2026)
──────────────────────────────────────────────────────────────────────
Fiecare tab avea propriul stil (rame, raze, taburi, butoane, etichete diferite).
Blocul ăsta le aliniază la aspectul fişei de jucător (`.fj-*`): aceleaşi rame şi
raze pe cartonaşe, acelaşi control segmentat pentru taburi/pastile, acelaşi buton
auriu principal, aceleaşi etichete de secţiune, aceleaşi stări goale. Se atinge
DOAR aspectul (culori, rame, raze, spaţii, tipografie) — nu display/poziţii —
deci nu schimbă aşezarea existentă. Verificat live pe desktop, 360×740 şi 844×390.
══════════════════════════════════════════════════════════════════════ */
#contextPanel { --pn-r: 12px; --pn-bg: rgba(0, 0, 0, .14); --pn-bd: var(--remi-border); }
#contextPanel .panel-header { padding: 10px 12px; border-bottom: 1px solid var(--pn-bd);
background: linear-gradient(180deg, rgba(var(--remi-accent-rgb), .07), transparent); }
#contextPanel .panel-header h3, #contextPanel .panel-header .panel-title { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; }
/* etichete de secţiune — toate ca `.fj-sec` */
#contextPanel .challenge-section-title, #contextPanel .payment-section-title, #contextPanel .rules-heading,
#contextPanel .tutorial-header h3, #contextPanel .mp-lobby-header h4 {
display: flex; align-items: center; gap: 8px; margin: 14px 0 8px;
font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--remi-text-dim); }
#contextPanel .challenge-section-title::after, #contextPanel .payment-section-title::after, #contextPanel .rules-heading::after {
content: ""; flex: 1; height: 1px; background: var(--pn-bd); }
#contextPanel .rules-heading { font-size: 11px; color: var(--remi-text); letter-spacing: .6px; }
/* taburi / pastile — acelaşi control segmentat */
#contextPanel .mp-tab, #contextPanel .challenge-tab, #contextPanel .tournament-tab, #contextPanel .payment-tab,
#contextPanel .shop-tab, #contextPanel .lb-sort-btn, #contextPanel .lb-window-bar button, #contextPanel .lb-window-bar .lb-window-btn,
#contextPanel .chat-tabs-bar .ct-tab, #contextPanel .chat-tabs-bar > * {
border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .3px; transition: background .15s, color .15s, border-color .15s; }
#contextPanel .mp-filter-chip { border-radius: 999px; font-size: 11px; font-weight: 700; }
#contextPanel .mp-toolbar-filters { flex-wrap: wrap; row-gap: 6px; } /* pe 360px filtrele se tăiau („Ju…") */
/* cartonaşe — aceeaşi ramă, rază, fundal; accent la trecere */
#contextPanel .mpc-card, #contextPanel .challenge-card, #contextPanel .tournament-card, #contextPanel .shop-item,
#contextPanel .payment-package, #contextPanel .lb-row, #contextPanel .online-user-row, #contextPanel .tutorial-lesson,
#contextPanel .challenge-streak-bar, #contextPanel .mp-stats-bar, #contextPanel .online-users-header, #contextPanel .shop-balance {
border: 1px solid var(--pn-bd); border-radius: var(--pn-r); background: var(--pn-bg); }
#contextPanel .mpc-card:hover, #contextPanel .challenge-card:hover, #contextPanel .tournament-card:hover, #contextPanel .shop-item:hover,
#contextPanel .lb-row:hover, #contextPanel .online-user-row:hover, #contextPanel .tutorial-lesson:hover {
border-color: rgba(var(--remi-accent-rgb), .45); background: rgba(var(--remi-accent-rgb), .06); }
#contextPanel .lb-row.lb-top { border-color: rgba(var(--remi-accent-rgb), .35);
background: linear-gradient(90deg, rgba(var(--remi-accent-rgb), .10), var(--pn-bg)); }
#contextPanel .lb-value, #contextPanel .mp-stat, #contextPanel .package-price, #contextPanel .online-user-points,
#contextPanel .challenge-progress-text { font-variant-numeric: tabular-nums; }
#contextPanel .lb-name .rmi-cor, #contextPanel .lobby-lb-name .rmi-cor { margin-left: 4px; } /* coroniţa nu lipită de nume */
/* butoane principale — acelaşi auriu */
#contextPanel .mp-create-btn, #contextPanel .tournament-join-btn, #contextPanel .shop-buy-btn, #contextPanel .tutorial-next-btn,
#contextPanel .mpc-action-btn.join, #contextPanel .lc-join {
border-radius: 10px; font-weight: 800; letter-spacing: .3px; color: var(--remi-bg);
background: linear-gradient(180deg, var(--remi-accent-light), var(--remi-accent-dark)); border: 1px solid rgba(var(--remi-accent-rgb), .6); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
#contextPanel .mpc-action-btn.spectate { border-radius: 10px; font-weight: 700; }
/* ─── Culori: tot ce venea din altă paletă trece pe tema aurie (18-09-2026)
Tabul activ era albastru la Chat şi mov la Prieteni, iar însemnele din Jucători
albastru şi gri. Pe un panou auriu săreau în ochi ca petice de la alt joc. */
#contextPanel .ct-tab.ct-active, #contextPanel .friends-tab.active, #contextPanel .challenge-tab.active {
background: rgba(var(--remi-accent-rgb), .15); border-color: rgba(var(--remi-accent-rgb), .40);
color: var(--remi-accent); }
#contextPanel .ct-tab.ct-active .ct-icon, #contextPanel .ct-tab.ct-active .ct-label { color: var(--remi-accent); }
/* Butoanele de pe rândul de prieten: fundal neutru, iconiţa spune ce face.
Roşul rămâne DOAR la blocare, unde culoarea chiar înseamnă ceva; înainte erau
trei culori pe acelaşi rând (albastru, portocaliu, roşu) şi niciuna nu spunea nimic. */
#contextPanel .friend-btn { background: rgba(0, 0, 0, .18); border: 1px solid var(--pn-bd); border-radius: 9px; }
#contextPanel .friend-btn.message { color: var(--remi-accent); }
#contextPanel .friend-btn.remove { color: var(--remi-text-dim); }
#contextPanel .friend-btn.block { color: var(--remi-danger); }
#contextPanel .friend-btn:hover { border-color: rgba(var(--remi-accent-rgb), .45); background: rgba(var(--remi-accent-rgb), .08); }
#contextPanel .online-user-level, #contextPanel .online-user-badge-you {
display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px;
font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
background: rgba(var(--remi-accent-rgb), .12); border: 1px solid rgba(var(--remi-accent-rgb), .32);
color: var(--remi-accent); }
#contextPanel .online-user-rank {
display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px;
font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
background: transparent; border: 1px solid var(--pn-bd); color: var(--remi-text-dim); }
#contextPanel .online-user-avatar, #contextPanel .online-user-avatar-img { border-radius: 9px; }
/* ─── Liste: un chenar, rânduri despărţite de linie subţire (18-09-2026)
Regula de mai sus dă ramă şi rază FIECĂRUI rând, deci Jucători, Clasament şi
Provocări arătau ca zece cutii una sub alta pe o coloană de 360px. Fişa de
jucător face invers şi de aia pare aşezată: un singur chenar, rânduri cu linie.
Cartonaşele rămân acolo unde chiar sunt obiecte separate (mese, magazin). */
#contextPanel .online-users-list, #contextPanel .lb-rows, #contextPanel .challenge-tab-content.active {
border: 1px solid var(--pn-bd); border-radius: var(--pn-r); background: var(--pn-bg); overflow: hidden; }
#contextPanel .online-user-row, #contextPanel .lb-row,
#contextPanel .challenge-tab-content.active > .challenge-card {
border: 0; border-top: 1px solid var(--pn-bd); border-radius: 0;
background: transparent; margin: 0; box-shadow: none; }
#contextPanel .online-users-list > *:first-child, #contextPanel .lb-rows > *:first-child,
#contextPanel .challenge-tab-content.active > .challenge-card:first-child { border-top: 0; }
#contextPanel .online-user-row:hover, #contextPanel .lb-row:hover,
#contextPanel .challenge-tab-content.active > .challenge-card:hover {
border-color: var(--pn-bd); border-top-color: var(--pn-bd); background: rgba(var(--remi-accent-rgb), .06); }
#contextPanel .online-user-row.is-current, #contextPanel .lb-row.lb-top {
background: rgba(var(--remi-accent-rgb), .08); }
/* stări goale */
#contextPanel .panel-empty, #contextPanel .season-empty, #contextPanel .tournament-empty, #contextPanel .cmsg-empty {
border: 1px dashed var(--pn-bd); border-radius: var(--pn-r); padding: 26px 14px; margin: 10px 0;
color: var(--remi-text-dim); font-size: 13px; text-align: center; }
#contextPanel .panel-empty-icon { opacity: .7; }
/* mobil portret îngust */
@media (max-width: 400px) {
#contextPanel .mp-tab, #contextPanel .challenge-tab, #contextPanel .tournament-tab, #contextPanel .payment-tab,
#contextPanel .shop-tab, #contextPanel .lb-sort-btn { font-size: 10.5px; padding-left: 6px; padding-right: 6px; }
#contextPanel .tournament-tab { white-space: nowrap; }
}
/* mobil peisaj (înălţime mică): mai strâns pe verticală, mesele pe două coloane */
@media (orientation: landscape) and (max-height: 500px) {
#contextPanel .panel-header { padding: 6px 10px; }
#contextPanel .mpc-card, #contextPanel .challenge-card, #contextPanel .tournament-card, #contextPanel .lb-row,
#contextPanel .online-user-row { padding-top: 6px; padding-bottom: 6px; }
#contextPanel .challenge-section-title, #contextPanel .payment-section-title { margin: 10px 0 6px; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 700px) {
#contextPanel .mp-room-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#contextPanel .mp-room-list .mpc-card { margin: 0; }
}
/* ══════════════════════════════════════════════════════════════════════
CHAT — tratament profesional + „chat practic” (16-09-2026, ales de user)
Bule cu ramă fină şi colţ de vorbire (ale tale în auriu, la dreapta), mesaje de sistem
ca pastilă, lista de jucători ca un cartonaş cu cap (oameni/boţi, boţii strânşi),
moderare la „⋯”, mesaje consecutive grupate, buton „↓ mesaje noi”, fraze rapide la masă,
emoji recente, câmp de scris tip pastilă cu inel auriu, buton de trimis auriu rotund.
══════════════════════════════════════════════════════════════════════ */
#contextPanel .remi-chat-wrapper { gap: 8px; position: relative; }
#contextPanel #chatGlobalUsers, #contextPanel #chatRoomUsers { border: 1px solid var(--remi-border); border-radius: 12px; background: rgba(0, 0, 0, .16); padding: 4px; }
#contextPanel .cu-row { border-radius: 8px !important; padding: 5px 8px !important; transition: background .12s; }
#contextPanel .cu-row:hover { background: rgba(var(--remi-accent-rgb), .08) !important; }
#contextPanel .cu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px 4px;
font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--remi-text-dim); }
#contextPanel .cu-head b { color: var(--remi-text); }
#contextPanel .cu-toggle { cursor: pointer; border: 1px solid var(--remi-border); border-radius: 999px; padding: 2px 8px; font-size: 9.5px;
font-weight: 700; letter-spacing: .3px; text-transform: none; color: var(--remi-accent); background: rgba(var(--remi-accent-rgb), .08); }
#contextPanel .cu-bot { display: none !important; }
#contextPanel .cu-arata .cu-bot { display: flex !important; }
#contextPanel .cu-mod-btns { display: none; gap: 3px; align-items: center; }
#contextPanel .cu-row:hover .cu-mod-btns, #contextPanel .cu-row.cu-mod .cu-mod-btns { display: flex; }
#contextPanel .cu-row:hover .cu-dots, #contextPanel .cu-row.cu-mod .cu-dots { display: none; }
#contextPanel .cu-dots { cursor: pointer; color: var(--remi-text-dim); font-weight: 900; padding: 0 4px; font-size: 14px; line-height: 1; }
#contextPanel .cmsg-container { padding: 6px 4px; }
#contextPanel .cmsg-row { gap: 8px; padding: 3px 4px; align-items: flex-start; }
#contextPanel .cmsg-avatar-img, #contextPanel .cmsg-avatar-initial { border: 1px solid rgba(var(--remi-accent-rgb), .35); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
#contextPanel .cmsg-bubble { background: rgba(255, 255, 255, .05); border: 1px solid var(--remi-border); border-radius: 12px 12px 12px 4px;
padding: 7px 10px; line-height: 1.35; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
#contextPanel .cmsg-me .cmsg-bubble { background: rgba(var(--remi-accent-rgb), .13); border-color: rgba(var(--remi-accent-rgb), .38); border-radius: 12px 12px 4px 12px; }
#contextPanel .cmsg-name { font-size: 11px; font-weight: 800; letter-spacing: .2px; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
#contextPanel .cmsg-time { font-size: 9.5px; color: var(--remi-text-dim); margin-top: 2px; letter-spacing: .2px; }
#contextPanel .cmsg-sys { display: block; margin: 6px auto; padding: 2px 10px; width: max-content; max-width: 90%; border-radius: 999px;
background: rgba(255, 255, 255, .05); border: 1px solid var(--remi-border);
font-size: 10.5px !important; font-style: normal !important; color: var(--remi-text-dim) !important; opacity: 1 !important; }
#contextPanel .cmsg-empty { border: 1px dashed var(--remi-border); border-radius: 12px; padding: 22px 12px; color: var(--remi-text-dim); text-align: center; }
/* mesaje consecutive de la acelaşi jucător */
#contextPanel .cmsg-cont .cmsg-avatar-img, #contextPanel .cmsg-cont .cmsg-avatar-initial { visibility: hidden; height: 0 !important; min-height: 0 !important; }
#contextPanel .cmsg-cont .cmsg-name { display: none; }
#contextPanel .cmsg-cont { padding-top: 0 !important; margin-top: -2px; }
#contextPanel .cmsg-cont .cmsg-bubble { border-top-left-radius: 6px; }
#contextPanel .cmsg-notlast .cmsg-time { display: none; }
/* „↓ N mesaje noi” */
#contextPanel .cu-noi { position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 5; display: none;
border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 800; cursor: pointer;
background: linear-gradient(180deg, var(--remi-accent-light), var(--remi-accent-dark)); color: var(--remi-bg); border: 1px solid rgba(var(--remi-accent-rgb), .6); box-shadow: 0 3px 10px rgba(0, 0, 0, .45); }
#contextPanel .cu-noi.on { display: inline-flex; gap: 5px; align-items: center; }
/* fraze rapide + emoji recente */
#contextPanel .cu-fraze { gap: 6px; flex-wrap: wrap; padding: 4px 8px 0; }
#contextPanel .cu-fraze span { cursor: pointer; border: 1px solid var(--remi-border); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700;
background: rgba(255, 255, 255, .05); color: var(--remi-text); }
#contextPanel .cu-fraze span:hover { border-color: rgba(var(--remi-accent-rgb), .5); background: rgba(var(--remi-accent-rgb), .10); }
#contextPanel .cu-emoji { gap: 2px; padding: 0 8px 4px; }
#contextPanel .cu-emoji span { cursor: pointer; font-size: 16px; line-height: 1; padding: 3px 4px; border-radius: 6px; }
#contextPanel .cu-emoji span:hover { background: rgba(255, 255, 255, .08); }
/* bara de scris */
#contextPanel #chatInputBar { border-top: 1px solid var(--remi-border) !important; background: linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .28)) !important; padding: 8px !important; }
#contextPanel .cmsg-input { border-radius: 999px !important; border: 1px solid var(--remi-border) !important; background: rgba(0, 0, 0, .28) !important;
padding: 8px 14px !important; font-size: 13px !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
#contextPanel .cmsg-input:focus { border-color: rgba(var(--remi-accent-rgb), .55) !important; outline: none; box-shadow: 0 0 0 3px rgba(var(--remi-accent-rgb), .15); }
#contextPanel #chatSendBtn { width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 50% !important;
background: linear-gradient(180deg, var(--remi-accent-light), var(--remi-accent-dark)) !important; color: var(--remi-bg) !important; border: 1px solid rgba(var(--remi-accent-rgb), .6) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .4); font-size: 15px !important; display: flex; align-items: center; justify-content: center; }
#contextPanel #chatMuteBtn, #contextPanel #chatInputBar button:not(#chatSendBtn) { width: 34px !important; height: 34px !important; border-radius: 50% !important;
background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--remi-border) !important; color: var(--remi-text-dim) !important; }
@media (orientation: landscape) and (max-height: 500px) {
#contextPanel .cmsg-bubble { padding: 5px 9px; }
#contextPanel #chatInputBar { padding: 5px 6px !important; }
#contextPanel #chatSendBtn { width: 32px !important; height: 32px !important; }
#contextPanel #chatMuteBtn, #contextPanel #chatInputBar button:not(#chatSendBtn) { width: 28px !important; height: 28px !important; }
#contextPanel .cu-noi { bottom: 70px; }
#contextPanel .cu-fraze span { padding: 2px 7px; font-size: 10px; }
#contextPanel .cu-emoji span { font-size: 14px; padding: 2px 3px; }
}
/* ══════════════════════════════════════════════════════════════════════
PANOUL PE MOBIL — mâner, rând de taburi, fără săgeată (16-09-2026, varianta B full)
Montate de `_panouMobilMonteaza()` din remi-pro.js doar sub 992 px.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
#contextPanel .panel-back { display: none !important; } /* săgeata „→”: închiderea e din mâner / X / glisare */
#contextPanel .pnm-maner { display: flex; flex-direction: column; align-items: center; padding: 7px 0 2px; cursor: grab; touch-action: none; flex: 0 0 auto; }
#contextPanel .pnm-maner i { display: block; width: 42px; height: 4px; border-radius: 2px; background: rgba(var(--remi-accent-rgb), .45); }
#contextPanel .pnm-taburi { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px 8px 8px; flex: 0 0 auto;
border-bottom: 1px solid var(--remi-border); background: rgba(0, 0, 0, .14); }
#contextPanel .pnm-taburi::-webkit-scrollbar { display: none; }
#contextPanel .pnm-taburi button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer;
border: 1px solid var(--remi-border); border-radius: 999px; padding: 4px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
background: rgba(255, 255, 255, .04); color: var(--remi-text-dim); }
#contextPanel .pnm-taburi button .material-symbols-rounded { font-size: 14px; }
#contextPanel .pnm-taburi button.on { color: var(--remi-bg); background: linear-gradient(180deg, var(--remi-accent-light), var(--remi-accent-dark)); border-color: rgba(var(--remi-accent-rgb), .6); }
}
@media (max-width: 991px) and (orientation: landscape) and (max-height: 500px) {
#contextPanel .pnm-maner { padding: 4px 0 0; }
#contextPanel .pnm-taburi { padding: 2px 6px 5px; }
#contextPanel .pnm-taburi button { padding: 2px 8px; font-size: 10px; }
}
/* De la 992px în sus nimic din toate astea nu are stil — dar `panouMobilMonteaza()` (remi-tabla-pro.js) nu le scoate
când lățimea crește fără reîncărcare (DevTools telefon → desktop, tabletă rotită 820 → 1180): rândul de
taburi apărea în capul panoului ca butoane albe de browser. Aici se ascund; sub 992px revin. 07-10-2026,
la fel ca în remi-pro.css și macao-pro.css. */
@media (min-width: 992px) { #contextPanel .pnm-maner, #contextPanel .pnm-taburi { display: none; } }
/* ══════════════════════════════════════════════════════════════════════
PUNTEA CĂTRE TEMELE SITE-ULUI (16-09-2026, la observaţia userului „nu ai respectat temele”)
──────────────────────────────────────────────────────────────────────
Meniul de teme (din profil / antet) are 33 de teme, definite în `assets/css/themes.css`
cu variabile `--color-*` / `--bg-*` / `--text-*`. Fişierul ăsta îşi defineşte propriile
variabile `--remi-*` pentru 20 dintre ele; pentru celelalte 14 Remi cădea pe albastrul
din `:root` (Dim) — adică ignora tema aleasă. Blocul de mai jos leagă `--remi-*` de
variabilele temei pentru cele 14, deci TOT jocul (nu doar panoul) urmează tema.
Nuanţele deschisă/închisă ale accentului se calculează din accent (color-mix), pentru
că `--color-accent-dark` din themes.css e un albastru rămas de demult, nu al temei.
══════════════════════════════════════════════════════════════════════ */
[data-theme="tabinet"], [data-theme="dark"], [data-theme="dim"], [data-theme="poker"], [data-theme="velvet"],
[data-theme="royalflush"], [data-theme="neon"], [data-theme="whiskey"], [data-theme="ice"], [data-theme="dragon"],
[data-theme="sahara"], [data-theme="cyber"], [data-theme="champagne"], [data-theme="steampunk"] {
--remi-accent: var(--color-accent);
--remi-accent-rgb: var(--color-accent-rgb);
--remi-accent-light: color-mix(in srgb, var(--color-accent) 72%, white);
--remi-accent-dark: color-mix(in srgb, var(--color-accent) 72%, black);
--remi-accent-glow: rgba(var(--color-accent-rgb), .35);
--remi-bg: var(--color-bg-primary, var(--bg-primary));
--remi-surface: var(--bg-secondary);
--remi-surface-2: var(--bg-tertiary);
--remi-surface-3: var(--bg-quaternary);
--remi-text: var(--text-primary);
--remi-text-dim: var(--text-secondary);
--remi-text-muted: var(--text-muted);
--remi-border: var(--border-color);
--remi-border-strong: var(--border-color-light);
/* Cu valoare de rezervă: dacă o temă n-ar defini culoarea, `var()` ar da o valoare
nevalidă, iar alerta ar rămâne complet FĂRĂ fundal — nu pe culoarea implicită, cum
pare firesc. Aşa, în cel mai rău caz rămâne culoarea jocului. (17-09-2026) */
--remi-success: var(--success, #4ade80);
--remi-danger: var(--danger, #f87171);
/* 17-09-2026: lipsea, deşi toate cele 14 teme îl au — alertele de avertizare rămâneau
pe galbenul implicit al jocului, indiferent de tema aleasă */
--remi-warning: var(--warning, #fbbf24);
--remi-primary-rgb: var(--primary-rgb);
}
/* ══════════════════════════════════════════════════════════════════════
BANNER DE TURNEU în lobby (17-09-2026)
Desenat de `_turneuBannerDeseneaza()` din remi-pro.js, sub antetul lobby-ului, cât eşti
înscrisă la un turneu care n-a început. Pe culorile temei; se strânge pe mobil.
══════════════════════════════════════════════════════════════════════ */
#turneuBanner {
display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 14px;
border: 1px solid rgba(var(--remi-accent-rgb), .45); border-radius: 14px;
background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), .16), rgba(0, 0, 0, .28));
box-shadow: 0 2px 14px rgba(0, 0, 0, .35); position: relative; overflow: hidden;
}
#turneuBanner::before { /* licărul care trece o dată la câteva secunde — atrage privirea */
content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
animation: tbSweep 3.2s ease-in-out infinite;
}
@keyframes tbSweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
#turneuBanner .tb-ic { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
font-size: 20px; border-radius: 12px; background: rgba(var(--remi-accent-rgb), .18); border: 1px solid rgba(var(--remi-accent-rgb), .4); }
#turneuBanner .tb-mid { flex: 1; min-width: 0; }
#turneuBanner .tb-nume { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--remi-text); }
#turneuBanner .tb-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#turneuBanner .tb-eticheta { flex: 0 0 auto; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
color: var(--remi-bg); background: var(--remi-accent); border-radius: 999px; padding: 1px 7px; }
#turneuBanner .tb-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 3px; font-size: 11.5px; color: var(--remi-text-dim); }
#turneuBanner .tb-premiu b { color: var(--remi-accent); }
#turneuBanner .tb-ceas { font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: .5px;
color: var(--remi-accent); font-variant-numeric: tabular-nums; }
#turneuBanner .tb-ceas.urgent { color: var(--remi-danger); animation: tbPuls 1s ease-in-out infinite; }
@keyframes tbPuls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#turneuBanner .tb-locuri { display: flex; gap: 3px; align-items: center; }
#turneuBanner .tb-loc { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid var(--remi-border); }
#turneuBanner .tb-loc.on { background: var(--remi-accent); border-color: var(--remi-accent); }
#turneuBanner .tb-btn { flex: 0 0 auto; padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 800; cursor: pointer;
color: var(--remi-bg); background: linear-gradient(180deg, var(--remi-accent-light), var(--remi-accent-dark));
border: 1px solid rgba(var(--remi-accent-rgb), .6); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
#turneuBanner .tb-x { flex: 0 0 auto; padding: 4px; background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1; color: var(--remi-text-dim); }
/* ── BANNERUL DE TURNEU PE TELEFON (17-09-2026) ────────────────────────────────────────
Era un singur rând: iconiţă + text + buton + ✕. Pe un ecran de 360 px nu încăpea, iar ce
ieşea afară era exact ce conta: butonul „Intră în sală" apărea tăiat pe margine, iar ✕-ul
dispărea cu totul. Verificat randând banda la 360 şi la 320 px.
Acum se rupe în două rânduri: sus iconiţa, textul şi ✕-ul; jos butonul, pe toată lăţimea —
uşor de nimerit cu degetul. Pe ecrane late nu se schimbă nimic. */
@media (max-width: 600px) {
#turneuBanner { flex-wrap: wrap; gap: 9px; row-gap: 9px; padding: 9px 10px; }
#turneuBanner .tb-ic { width: 34px; height: 34px; font-size: 17px; }
#turneuBanner .tb-mid { flex: 1 1 0; }
#turneuBanner .tb-nume { font-size: 12.5px; }
#turneuBanner .tb-ceas { font-size: 15px; }
/* ✕-ul rămâne sus, lipit de margine; butonul coboară pe rândul lui, cât toată banda */
#turneuBanner .tb-x { order: 1; margin-left: auto; padding: 2px 0 2px 6px; }
#turneuBanner .tb-btn { order: 2; flex: 1 0 100%; padding: 10px 12px; font-size: 12.5px; text-align: center; }
}
@media (max-width: 420px) {
/* bulinele spun acelaşi lucru ca „3/4 jucători" de lângă ele — pe ecran îngust,
textul e mai limpede decât punctele, deci punctele pleacă */
#turneuBanner .tb-locuri { display: none; }
#turneuBanner .tb-sub { gap: 7px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { #turneuBanner::before, #turneuBanner .tb-ceas.urgent { animation: none; } }
/* ══════════════════════════════════════════════════════════════════════
TURNEU — blocul din premiere (17-09-2026)
──────────────────────────────────────────────────────────────────────
Adăugat de `showGameEndModal` DOAR când serverul a trimis clasamentul de turneu, deasupra
scorurilor. Clase proprii (`jo-turneu-final` / `jtf-*`), ca jocul normal să rămână neatins.
══════════════════════════════════════════════════════════════════════ */
.jo-turneu-final {
margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
border: 1px solid rgba(var(--remi-accent-rgb), .4);
background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), .14), rgba(0, 0, 0, .2));
}
.jo-turneu-final .jtf-cap { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--remi-text); }
.jo-turneu-final .jtf-ic { font-size: 15px; }
.jo-turneu-final .jtf-nume { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jo-turneu-final .jtf-rez { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px;
padding-bottom: 7px; border-bottom: 1px solid var(--remi-border); }
.jo-turneu-final .jtf-loc { font-size: 13px; font-weight: 800; color: var(--remi-text); }
.jo-turneu-final .jtf-rez.castig .jtf-loc { color: var(--remi-accent); }
.jo-turneu-final .jtf-premiu { font-size: 11.5px; color: var(--remi-text-dim); white-space: nowrap; }
.jo-turneu-final .jtf-premiu b { color: var(--remi-success); font-size: 13px; }
.jo-turneu-final .jtf-lista { margin-top: 6px; }
.jo-turneu-final .jtf-rand { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 11.5px; color: var(--remi-text-dim); }
.jo-turneu-final .jtf-rand.eu { color: var(--remi-text); font-weight: 700; }
.jo-turneu-final .jtf-p { width: 26px; flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--remi-accent); font-weight: 800; }
.jo-turneu-final .jtf-u { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jo-turneu-final .jtf-u i { font-style: normal; font-size: 9px; opacity: .6; text-transform: uppercase; letter-spacing: .5px; }
.jo-turneu-final .jtf-pr { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* verdele marchează BANII, nu rândul meu: înainte, „—" de pe rândul propriu apărea verde,
adică locul 4 fără premiu arăta la fel ca o încasare (văzut la proba pe ecran, 17-09-2026) */
.jo-turneu-final .jtf-pr.castig { color: var(--remi-success); font-weight: 800; }
/* ══ TURNEU — banda cu ceasul din sala de aşteptare (17-09-2026) ══
Apare DOAR la mesele de turneu (`room.sitGo`); la mesele obişnuite nu se randează deloc. */
.mw-lx-turneu {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 8px 0 0; padding: 7px 12px; border-radius: 10px;
border: 1px solid rgba(var(--remi-accent-rgb), .45);
background: linear-gradient(135deg, rgba(var(--remi-accent-rgb), .16), rgba(0, 0, 0, .22));
}
.mw-lx-turneu .mlt-ic { font-size: 15px; }
.mw-lx-turneu .mlt-txt { font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: var(--remi-text-dim); text-transform: uppercase; }
.mw-lx-turneu .mlt-ceas { font-size: 18px; font-weight: 800; letter-spacing: .5px; color: var(--remi-accent); font-variant-numeric: tabular-nums; }
.mw-lx-turneu.urgent .mlt-ceas, .mw-lx-turneu.urgent .mlt-txt { color: var(--remi-danger); }
.mw-lx-turneu.urgent { border-color: rgba(var(--remi-danger-rgb), .5); animation: mltPuls 1s ease-in-out infinite; }
@keyframes mltPuls { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (max-width: 600px) {
.mw-lx-turneu { padding: 5px 9px; gap: 6px; }
.mw-lx-turneu .mlt-txt { font-size: 10px; }
.mw-lx-turneu .mlt-ceas { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .mw-lx-turneu.urgent { animation: none; } }
/* ═══════════════════════════════════════════════════════════════════════════════════════
TURNEU — prelungirea, galeria şi strigarea de un minut (17-09-2026)
Toate culorile vin din variabilele de temă (`--remi-*`), ca să meargă pe toate cele 33
de teme. Nimic din blocul ăsta nu atinge masa obişnuită: selectorii cer fie banda de
turneu, fie clase care se randează numai când camera are `sitGo`.
═══════════════════════════════════════════════════════════════════════════════════ */
/* prelungirea de un minut de după ora de start — altă culoare decât „mai e puţin" */
/* Temele nu definesc `--warning-rgb`, deci nu pot construi rgba() din el — folosesc
`color-mix`, care lucrează direct pe culoarea temei.
Fundalul se amestecă peste SUPRAFAŢA temei, nu peste negru: pe o temă deschisă un voal
negru făcea banda cenuşie, iar aurul de pe ea abia se citea. Iar textul se trage spre
culoarea de text a temei, ca să rămână lizibil şi pe fundal deschis, şi pe unul închis.
(17-09-2026, văzut la proba pe cele 8 teme) */
.mw-lx-turneu.prelungire {
border-color: color-mix(in srgb, var(--remi-warning) 58%, transparent);
background: color-mix(in srgb, var(--remi-warning) 16%, var(--remi-surface));
}
.mw-lx-turneu.prelungire .mlt-ceas,
.mw-lx-turneu.prelungire .mlt-txt {
color: color-mix(in srgb, var(--remi-warning) 68%, var(--remi-text));
}
/* banda din sala de aşteptare pentru cine e în galerie */
.mw-lx-galerie {
display: flex; align-items: flex-start; gap: 10px;
margin: 8px 0 0; padding: 9px 12px; border-radius: 10px;
border: 1px solid rgba(var(--remi-accent-rgb), .3);
background: rgba(var(--remi-accent-rgb), .08);
}
.mw-lx-galerie .mlg-ic { font-size: 19px; color: var(--remi-accent); flex: 0 0 auto; margin-top: 1px; }
.mw-lx-galerie .mlg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mw-lx-galerie .mlg-txt b { font-size: 12.5px; color: var(--remi-text); letter-spacing: .2px; }
.mw-lx-galerie .mlg-txt span { font-size: 11.5px; line-height: 1.45; color: var(--remi-text-dim); }
/* strigarea de un minut — fereastră peste tot ecranul, cu ceasul ei */
.tstrig {
position: fixed; inset: 0; z-index: 12000;
display: flex; align-items: center; justify-content: center;
padding: 16px; background: rgba(0, 0, 0, .62);
animation: tstrigIn .18s ease-out;
}
@keyframes tstrigIn { from { opacity: 0; } to { opacity: 1; } }
.tstrig-box {
position: relative; width: min(420px, 100%);
padding: 22px 20px 18px; border-radius: 16px; text-align: center;
border: 1px solid rgba(var(--remi-accent-rgb), .5);
background: var(--remi-surface, #1b1b23);
box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.tstrig-x {
position: absolute; top: 8px; right: 10px; width: 30px; height: 30px;
border: 0; border-radius: 8px; background: transparent; cursor: pointer;
font-size: 22px; line-height: 1; color: var(--remi-text-dim);
}
.tstrig-x:hover { background: rgba(var(--remi-accent-rgb), .14); color: var(--remi-text); }
.tstrig-ic { font-size: 38px; line-height: 1; }
.tstrig-titlu { margin-top: 6px; font-size: 16px; font-weight: 800; color: var(--remi-text); }
.tstrig-ceas {
margin: 8px 0 4px; font-size: 40px; font-weight: 800; letter-spacing: 1px;
color: var(--remi-accent); font-variant-numeric: tabular-nums;
animation: tstrigPuls 1s ease-in-out infinite;
}
@keyframes tstrigPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.tstrig-sub { font-size: 12px; line-height: 1.5; color: var(--remi-text-dim); }
.tstrig-btns { display: flex; gap: 8px; margin-top: 14px; }
.tstrig-b {
flex: 1; padding: 11px 12px; border-radius: 10px; cursor: pointer;
font-size: 13px; font-weight: 700; font-family: inherit;
border: 1px solid rgba(var(--remi-accent-rgb), .35);
background: transparent; color: var(--remi-text);
}
.tstrig-b:hover { background: rgba(var(--remi-accent-rgb), .14); }
/* text pe accent = fundalul temei, ca la restul butoanelor pline din Remi (`--remi-bg`);
aşa contrastul rămâne bun şi pe temele deschise, şi pe cele întunecate */
.tstrig-b.primar {
border-color: transparent; color: var(--remi-bg);
background: var(--remi-accent);
}
.tstrig-b.primar:hover { filter: brightness(1.08); }
@media (max-width: 600px) {
.tstrig-box { padding: 18px 16px 14px; }
.tstrig-ceas { font-size: 34px; }
.tstrig-titlu { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.tstrig { animation: none; }
.tstrig-ceas { animation: none; }
}
/* cardul de TURNEU din lobby — insignă şi etichete proprii, pe culorile temei (17-09-2026) */
.lc-badge-turneu {
background: rgba(var(--remi-gold-rgb, var(--remi-accent-rgb)), .18);
color: var(--remi-gold, var(--remi-accent));
}
.lc-chip-turneu {
background: rgba(var(--remi-accent-rgb), .14);
color: var(--remi-accent);
}
/* clasamentul de turneu arătat în fereastră proprie (partidă ruptă): titlul nu trebuie să
intre sub butonul de închidere, iar lista are textul la stânga, nu centrat ca restul cutiei */
#turneuFinalBox .jo-turneu-final { margin: 4px 0 0; text-align: left; }
#turneuFinalBox .jo-turneu-final .jtf-cap { padding-right: 26px; }
/* ── FELICITAREA de la finalul turneului + legătura spre diplomă (17-09-2026) ──────────
Câştigătorul nu trebuie să-şi caute numele într-o listă: cupa, cuvântul şi suma stau
primele. Culorile vin din temă, deci merg pe toate cele 33. */
.jo-turneu-final .jtf-felicit { text-align: center; padding: 6px 0 10px; border-bottom: 1px solid var(--remi-border); }
.jo-turneu-final .jtf-cupa { font-size: 34px; line-height: 1; animation: jtfCupa .6s .1s cubic-bezier(.18,1.45,.4,1) both; }
@keyframes jtfCupa { from { opacity: 0; transform: scale(.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
.jo-turneu-final .jtf-mare {
margin-top: 4px; font-size: 21px; font-weight: 800; letter-spacing: .3px;
color: var(--remi-gold, var(--remi-accent));
}
.jo-turneu-final .jtf-mic { font-size: 12px; color: var(--remi-text-dim); margin-top: 1px; }
.jo-turneu-final .jtf-suma {
margin-top: 7px; font-size: 30px; font-weight: 800; line-height: 1;
color: var(--remi-success); font-variant-numeric: tabular-nums;
animation: jtfSuma .5s .34s cubic-bezier(.18,1.45,.4,1) both;
}
.jo-turneu-final .jtf-suma small { font-size: 12px; font-weight: 600; margin-left: 6px; color: var(--remi-text-dim); }
@keyframes jtfSuma { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.jtf-diploma {
display: block; margin: 9px 0 0; padding: 9px 14px; border-radius: 10px; text-align: center;
font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer;
color: var(--remi-text); border: 1px solid rgba(var(--remi-accent-rgb), .38);
background: rgba(var(--remi-accent-rgb), .1);
}
.jtf-diploma:hover { background: rgba(var(--remi-accent-rgb), .18); }
@media (prefers-reduced-motion: reduce) {
.jo-turneu-final .jtf-cupa, .jo-turneu-final .jtf-suma { animation: none; }
}
/* iconiţa din bulinele de anunţ cu titlu (notificări) — vine ca element, nu ca HTML lipit
în mesaj, altfel se vedea codul CSS pe ecran în loc de alertă (17-09-2026) */
.toast-msg .toast-ic {
font-size: 16px; vertical-align: -3px; margin-right: 5px; opacity: .95;
}
.toast-msg b { font-weight: 700; }
/* legătura spre diplomă din istoricul jucătorului — ca 🧾 din istoricul de plăţi (17-09-2026) */
.fj-g .fj-dip {
flex: 0 0 auto; align-self: center; margin-left: 6px; padding: 4px 7px;
border-radius: 8px; text-decoration: none; font-size: 15px; line-height: 1;
border: 1px solid rgba(var(--remi-accent-rgb), .35);
background: rgba(var(--remi-accent-rgb), .1);
}
.fj-g .fj-dip:hover { background: rgba(var(--remi-accent-rgb), .2); }
/* ================================================================================================
BANDA DE JOS — „ŞINA" (18-09-2026)
------------------------------------------------------------------------------------------------
O singură definiţie pentru banda jucătorului, pe toate ecranele şi toate temele.
A înlocuit 67 de blocuri (451 de linii) împrăştiate pe 8 praguri; au rămas 3 praguri de lăţime,
şi alea doar pentru ce DISPARE la strâmtoare, nu pentru mărimi.
Ce e banda: o şină care iese din masă. Grosime reală dedesubt (straturi în culoarea temei,
tot mai închise), o faţă de sus care prinde lumina, umbră aruncată pe postav. Pe şină stau
jetoanele cu cifre, ceasul pe poză şi cele două butoane, ca nişte jetoane groase.
Culorile vin TOATE din tema aleasă (`--remi-surface*`, `--remi-accent`, `--remi-text`).
Ce se mişcă, şi doar atunci când înseamnă ceva:
· o lucire trece O DATĂ pe muchia de sus când îţi începe tura;
· secundele se scurg PE poză şi fac schimb cu ea la 3s (sub 10s rămân fixe, roşii);
· numele lung se plimbă dacă nu încape (clasa `nume-lung` o pune remi-pro.js);
· jetonul de penalizare se împinge în faţă când chiar ai ce etala.
Nicio buclă decorativă. Becul de etalare a ieşit — jetonul împins spune acelaşi lucru.
================================================================================================ */
#seatSouth #playerArea .player-info-bar {
--u: clamp(10px, 0.62vw + 7.4px, 14px);
--inalt: calc(var(--u) * 3.4);
--av: calc(var(--u) * 2.8);
--raza: calc(var(--u) * 0.8);
--aur: var(--remi-accent, #d4a544);
--scris: var(--remi-text, #f4ecd8);
--scris-sters: var(--remi-text-dim, rgba(244, 236, 216, .6));
--postav-sus: var(--remi-surface-2, #4a2e16);
--postav-jos: var(--remi-surface, #3a2310);
--umbra-1: rgba(0, 0, 0, .35);
--umbra-2: rgba(0, 0, 0, .5);
--umbra-3: rgba(0, 0, 0, .65);
--ra-inel: var(--aur);
position: relative;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
font-size: calc(var(--u) * 0.9) !important;
gap: calc(var(--u) * 0.66) !important;
height: var(--inalt) !important;
min-height: var(--inalt) !important;
max-height: var(--inalt) !important;
box-sizing: border-box !important;
padding: calc(var(--u) * 0.35) calc(var(--u) * 0.9) 0 !important;
margin: 0 !important;
overflow: visible !important;
border: 0 !important;
border-radius: var(--raza) !important;
background:
repeating-linear-gradient(90deg, rgba(0, 0, 0, .045) 0 3px, transparent 3px 9px),
linear-gradient(180deg, var(--postav-sus) 0%, var(--postav-jos) 100%) !important;
/* grosimea şinei: faţa de sus luminată, apoi patru trepte de umbră, apoi umbra pe masă */
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, .18),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 2px 0 var(--umbra-1),
0 4px 0 var(--umbra-2),
0 6px 0 var(--umbra-3),
0 9px 2px rgba(0, 0, 0, .55),
0 18px 28px -8px rgba(0, 0, 0, .65) !important;
transform: perspective(760px) rotateX(2.4deg);
transform-origin: 50% 100%;
transition: transform .18s ease, box-shadow .18s ease;
}
/* culoarea şinei, întoarsă un pic spre accentul temei (unde browserul ştie color-mix) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
#seatSouth #playerArea .player-info-bar {
--postav-sus: color-mix(in srgb, var(--remi-surface-2, #4a2e16) 86%, var(--aur) 14%);
--postav-jos: color-mix(in srgb, var(--remi-surface, #3a2310) 92%, #000 8%);
--umbra-1: color-mix(in srgb, var(--remi-surface, #3a2310) 72%, #000 28%);
--umbra-2: color-mix(in srgb, var(--remi-surface, #3a2310) 56%, #000 44%);
--umbra-3: color-mix(in srgb, var(--remi-surface, #3a2310) 40%, #000 60%);
}
}
/* când e rândul tău, şina se ridică un pic spre tine */
#seatSouth #playerArea.active-turn .player-info-bar {
transform: perspective(760px) rotateX(2.4deg) translateY(-2px);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, .22),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 2px 0 var(--umbra-1),
0 4px 0 var(--umbra-2),
0 6px 0 var(--umbra-3),
0 8px 0 var(--umbra-3),
0 11px 2px rgba(0, 0, 0, .6),
0 24px 34px -8px rgba(0, 0, 0, .7) !important;
}
/* Muchia de sus: un fir de lumină care se stinge spre capete (nu o linie punctată).
Peste el trece o lucire O SINGURĂ DATĂ, la începutul turei tale. */
#seatSouth #playerArea .player-info-bar::before {
content: '';
position: absolute;
left: 3px; right: 3px; top: 0;
height: 1px;
pointer-events: none;
background:
linear-gradient(90deg, transparent, rgba(255, 245, 215, .95), transparent) no-repeat,
linear-gradient(90deg, transparent 0%, var(--aur) 18%, var(--aur) 82%, transparent 100%);
background-size: 26% 100%, auto;
background-position: -45% 0, 0 0;
opacity: .9;
}
#seatSouth #playerArea.active-turn .player-info-bar::before {
animation: bandaLucire 1.25s cubic-bezier(.32, .72, .35, 1) 1;
}
@keyframes bandaLucire {
from { background-position: -45% 0, 0 0; }
to { background-position: 145% 0, 0 0; }
}
/* culoarea locului tău, pe muchia din stânga */
#seatSouth #playerArea .player-info-bar::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
border-radius: var(--raza) 0 0 var(--raza);
pointer-events: none;
background: var(--ra-loc, var(--aur));
opacity: .9;
}
/* spectatorul: firul de lumină trece pe roşu */
body.spectator-mode #seatSouth #playerArea .player-info-bar::before {
background: linear-gradient(90deg, transparent 0%, #b23a48 18%, #b23a48 82%, transparent 100%);
}
/* ordinea zonelor, scrisă explicit: JS-ul mută butoanele şi paşii în bandă la sfârşit */
#seatSouth #playerArea .player-info-bar .player-module-identity { order: 1; }
#seatSouth #playerArea .player-info-bar .player-module-stats { order: 2; }
#seatSouth #playerArea .player-info-bar #rlBalanta { order: 3; }
#seatSouth #playerArea .player-info-bar .player-module-hints { order: 4; }
#seatSouth #playerArea .player-info-bar .ra-pasi { order: 5; }
#seatSouth #playerArea .player-info-bar .etalare-pts { order: 6; }
#seatSouth #playerArea .player-info-bar .action-btn-game { order: 7; }
/* ── ZONA 1: identitatea ────────────────────────────────────────────────────────────────────── */
#seatSouth #playerArea .player-info-bar .player-module {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
gap: calc(var(--u) * 0.62) !important;
padding: 0 !important;
font-size: inherit !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
min-width: 0 !important;
}
#seatSouth #playerArea .player-info-bar .player-module-identity { max-width: calc(var(--u) * 16); }
/* Poza: inelul din jur se goleşte cu secundele (`--ra-arc` din remi-pro.js).
Secundele stau PE poză (`data-sec`, tot din remi-pro.js) şi fac schimb cu ea. */
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap {
position: relative !important;
width: var(--av) !important;
height: var(--av) !important;
flex: 0 0 auto !important;
border-radius: 50% !important;
padding: 0 !important;
background: conic-gradient(from -90deg,
var(--ra-inel) 0 var(--ra-arc, 0deg),
rgba(0, 0, 0, .45) var(--ra-arc, 0deg) 360deg) !important;
box-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 5px 8px -2px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .35) !important;
}
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap[data-timer-state="normal"] { --ra-inel: #3fae6a; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap[data-timer-state="warn"] { --ra-inel: #e9c45a; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap[data-timer-state="critical"] { --ra-inel: #e05545; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap[data-timer-state="idle"] { --ra-inel: var(--aur); }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap .seat-avatar,
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap #avatarSouth {
position: absolute !important;
top: 3px !important;
left: 3px !important;
width: calc(100% - 6px) !important;
height: calc(100% - 6px) !important;
border: 0 !important;
border-radius: 50% !important;
object-fit: cover;
background: #16110a !important;
box-shadow: none !important;
}
/* secundele peste poză */
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap::after {
content: attr(data-sec);
position: absolute;
inset: 3px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
font: 800 calc(var(--u) * 1.15) / 1 Inter, system-ui, sans-serif;
font-variant-numeric: tabular-nums;
color: #fff;
text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .85);
opacity: 0;
}
/* cât e rândul celui de jos: poza şi secundele fac schimb la 3 secunde */
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap:not([data-timer-state="idle"]) .seat-avatar {
animation: pozaCeas 6s ease-in-out infinite;
}
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap:not([data-timer-state="idle"])::after {
animation: cifraCeas 6s ease-in-out infinite;
}
@keyframes pozaCeas { 0%, 40% { opacity: 1; } 50%, 90% { opacity: .22; } 100% { opacity: 1; } }
@keyframes cifraCeas { 0%, 40% { opacity: 0; transform: scale(.82); } 50%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.82); } }
/* sub 10 secunde nu mai e vreme de schimb: cifra stă fixă, roşie */
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap[data-timer-state="critical"] .seat-avatar { animation: none; opacity: .22 !important; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap[data-timer-state="critical"]::after { animation: none; opacity: 1; color: #ff7a6a; }
#seatSouth #playerArea .player-info-bar .identity-status-dot {
width: calc(var(--u) * 0.72) !important;
height: calc(var(--u) * 0.72) !important;
right: -1px !important; bottom: -1px !important;
border-width: 2px !important;
animation: none !important;
box-shadow: none !important;
z-index: 2;
}
#seatSouth #playerArea .player-info-bar .identity-text {
display: flex !important;
flex-direction: column;
justify-content: center;
gap: 1px;
min-width: 0 !important;
overflow: hidden;
}
#seatSouth #playerArea .player-info-bar .identity-text .player-name-label {
font-family: inherit !important;
font-size: calc(var(--u) * 1.02) !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
line-height: 1.2 !important;
color: var(--scris) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6) !important;
max-width: none !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* numele lung se plimbă, în loc să fie tăiat (clasa şi `--nume-scroll` vin din remi-pro.js) */
#seatSouth #playerArea .player-info-bar .identity-text .player-name-label.nume-lung {
text-overflow: clip;
animation: numeScroll 6s ease-in-out infinite alternate;
}
@keyframes numeScroll { 0%, 12% { text-indent: 0; } 88%, 100% { text-indent: var(--nume-scroll, -60px); } }
#seatSouth #playerArea .player-info-bar .identity-status-label {
font-size: calc(var(--u) * 0.68) !important;
font-style: normal !important;
font-weight: 600;
letter-spacing: .07em;
line-height: 1.2;
color: var(--scris-sters) !important;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* donutul separat rămâne stins: un singur ceas, pe poză */
#seatSouth #playerArea .player-info-bar .player-module-timer { display: none !important; }
/* ── ZONA 2: jetoanele (cresc şi umplu şina) ────────────────────────────────────────────────── */
#seatSouth #playerArea .player-info-bar .player-module-stats,
#seatSouth #playerArea .player-info-bar #rlBalanta {
flex: 1 1 auto !important;
min-width: 0 !important;
gap: calc(var(--u) * 0.5) !important;
}
#seatSouth #playerArea .player-info-bar .stat-card {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0 !important;
padding: calc(var(--u) * 0.18) calc(var(--u) * 0.7) !important;
border-radius: calc(var(--raza) * 0.8) !important;
border: 1px solid color-mix(in srgb, var(--aur) 42%, transparent) !important;
background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .34)) !important;
background-color: transparent !important;
/* jeton cu grosime: lumină sus, muchie jos, umbră */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .2),
0 2px 0 rgba(0, 0, 0, .45),
0 4px 6px -2px rgba(0, 0, 0, .5) !important;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#seatSouth #playerArea .player-info-bar .stat-card .stat-label {
order: 2;
font-family: inherit !important;
font-size: calc(var(--u) * 0.64) !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
line-height: 1.35 !important;
color: var(--scris-sters) !important;
white-space: nowrap;
overflow: hidden;
}
#seatSouth #playerArea .player-info-bar .stat-card #pointsSouth,
#seatSouth #playerArea .player-info-bar .stat-card #playerTilesCount,
#seatSouth #playerArea .player-info-bar .stat-card .rl-bal-v {
order: 1;
font-family: inherit !important;
letter-spacing: 0 !important;
font-size: calc(var(--u) * 1.28) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
color: var(--scris) !important;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 1px rgba(0, 0, 0, .65) !important;
background: none !important;
border: 0 !important;
padding: 0 !important;
}
/* balanţa: un teanc — două jetoane dedesubt, dintr-o singură umbră */
#seatSouth #playerArea .player-info-bar #rlBalanta .stat-card {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .2),
0 3px 0 -1px color-mix(in srgb, var(--aur) 55%, transparent),
0 4px 5px -1px rgba(0, 0, 0, .5),
0 6px 0 -2px color-mix(in srgb, var(--aur) 30%, transparent),
0 7px 6px -2px rgba(0, 0, 0, .4) !important;
}
/* ── Indiciile: fără bec. Penalizarea e un jeton; când ai ce etala, se împinge înainte ─────── */
#seatSouth #playerArea .player-info-bar .player-module-hints {
flex: 0 0 auto !important;
gap: calc(var(--u) * 0.4) !important;
}
#seatSouth #playerArea .player-info-bar .player-module-hints::before { display: none !important; }
#seatSouth #playerArea .player-info-bar .etalare-hint { display: none !important; }
#seatSouth #playerArea .player-info-bar .player-hand-penalty {
font-size: calc(var(--u) * 0.86) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
padding: calc(var(--u) * 0.22) calc(var(--u) * 0.6) !important;
border-radius: 999px !important;
color: var(--scris) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .34)) !important;
border: 1px solid color-mix(in srgb, var(--aur) 35%, transparent) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 0 rgba(0, 0, 0, .4), 0 3px 5px -1px rgba(0, 0, 0, .45) !important;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#seatSouth #playerArea .player-info-bar:has(#btnEtalare:not([disabled]):not([aria-disabled="true"])) .player-hand-penalty {
transform: translateY(-3px);
border-color: var(--aur) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 5px 0 rgba(0, 0, 0, .4), 0 7px 10px -2px rgba(0, 0, 0, .55),
0 0 14px -3px color-mix(in srgb, var(--aur) 70%, transparent) !important;
}
/* ── ZONA 3: acţiunile — jetoane groase, se înfundă la apăsare ──────────────────────────────── */
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn {
position: relative;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
height: calc(var(--u) * 2.5) !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 calc(var(--u) * 1.25) !important;
border-radius: 999px !important;
overflow: visible !important;
font-family: inherit !important;
font-size: calc(var(--u) * 0.92) !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
white-space: nowrap;
animation: none !important;
transition: transform .1s ease, box-shadow .1s ease, filter .1s ease !important;
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn .chip-label {
display: inline-block !important;
font-size: inherit !important;
color: inherit !important;
line-height: 1 !important;
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn .material-symbols-rounded { display: none !important; }
/* principalul: jeton auriu ridicat, cu muchie groasă şi halou */
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.ra-principal,
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.btn-primary-action {
color: #1b1405 !important;
transform: translateY(-3px);
background: linear-gradient(180deg,
color-mix(in srgb, var(--aur) 34%, #fff 66%) 0%,
color-mix(in srgb, var(--aur) 82%, #fff 18%) 34%,
var(--aur) 60%,
color-mix(in srgb, var(--aur) 64%, #000 36%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--aur) 48%, #000 52%) !important;
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 color-mix(in srgb, var(--aur) 45%, #000 55%),
0 2px 0 color-mix(in srgb, var(--aur) 55%, #000 45%),
0 4px 0 color-mix(in srgb, var(--aur) 40%, #000 60%),
0 6px 0 color-mix(in srgb, var(--aur) 28%, #000 72%),
0 8px 10px -2px rgba(0, 0, 0, .7),
0 0 24px -6px color-mix(in srgb, var(--aur) 90%, #fff 10%) !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, .65) !important;
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.ra-principal:hover {
filter: brightness(1.08);
transform: translateY(-5px);
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.ra-principal:active {
transform: translateY(1px);
box-shadow: inset 0 3px 7px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3),
0 1px 0 color-mix(in srgb, var(--aur) 45%, #000 55%) !important;
}
/* secundarul: acelaşi relief, jeton gol */
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn:not(.ra-principal):not(.btn-primary-action) {
color: var(--scris) !important;
transform: translateY(-3px);
background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 40%, rgba(0, 0, 0, .32) 100%) !important;
border: 1px solid color-mix(in srgb, var(--aur) 55%, transparent) !important;
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .32),
0 2px 0 rgba(0, 0, 0, .5),
0 4px 0 rgba(0, 0, 0, .4),
0 6px 0 rgba(0, 0, 0, .3),
0 9px 12px -3px rgba(0, 0, 0, .6) !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, .6) !important;
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn:not(.ra-principal):not(.btn-primary-action):hover {
border-color: var(--aur) !important;
transform: translateY(-5px);
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn:not(.ra-principal):not(.btn-primary-action):active {
transform: translateY(1px);
box-shadow: inset 0 3px 7px rgba(0, 0, 0, .6) !important;
}
/* blocat: relieful se turteşte, nu doar se estompează */
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn[disabled],
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn[aria-disabled="true"] {
transform: none !important;
opacity: .5 !important;
cursor: default !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .35) !important;
}
/* Acţiunile imposibile nu se desenează. DUPĂ blocul de mai sus: aceeaşi specificitate (2,3,0),
iar `.chip-btn` pune `display: inline-flex !important` — scrisă înainte, pierdea la egalitate. */
#seatSouth #playerArea .player-info-bar .action-btn-game.ra-fantoma,
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.ra-fantoma { display: none !important; }
#seatSouth #playerArea .player-info-bar .action-btn-game::before,
#seatSouth #playerArea .player-info-bar .action-btn-game::after { display: none !important; }
/* paşii turei: trei cusături scurte; `display` fără !important, JS-ul le stinge inline când nu e tura ta */
#seatSouth #playerArea .player-info-bar .ra-pasi {
display: flex;
flex: 0 0 auto !important;
align-items: center;
gap: 3px;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
#seatSouth #playerArea .player-info-bar .ra-pasi .ra-pas {
display: block;
width: calc(var(--u) * 0.72);
height: 2px;
border-radius: 2px;
background: color-mix(in srgb, var(--aur) 22%, transparent);
}
#seatSouth #playerArea .player-info-bar .ra-pasi .ra-pas i { display: none; }
#seatSouth #playerArea .player-info-bar .ra-pasi .ra-pas.gata { background: #3fae6a; box-shadow: 0 0 5px rgba(63, 174, 106, .7); }
#seatSouth #playerArea .player-info-bar .ra-pasi .ra-pas.acum { background: var(--aur); box-shadow: 0 0 6px color-mix(in srgb, var(--aur) 80%, transparent); }
/* contorul „(30/45)": portocaliu sub prag, verde la prag */
#seatSouth #playerArea .player-info-bar .etalare-pts {
flex: 0 0 auto !important;
margin: 0 !important;
font-size: calc(var(--u) * 0.9) !important;
font-weight: 700 !important;
opacity: 1 !important;
color: #e0a05a !important;
background: none !important;
border: 0 !important;
padding: 0 !important;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#seatSouth #playerArea .player-info-bar .etalare-pts.gata { color: #8fe3ae !important; }
/* nu e rândul tău: acţiunile tac */
#seatSouth #playerArea:not(.active-turn) .player-info-bar .action-btn-game.chip-btn,
#seatSouth #playerArea:not(.active-turn) .player-info-bar .ra-pasi,
#seatSouth #playerArea:not(.active-turn) .player-info-bar .etalare-pts { opacity: .4 !important; }
/* ── Ce cade la strâmtoare ──────────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
#seatSouth #playerArea .player-info-bar .player-module-hints { display: none !important; }
#seatSouth #playerArea .player-info-bar .identity-text .player-name-label { max-width: calc(var(--u) * 7); }
}
@media (max-width: 440px) {
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn:not(.btn-primary-action):not(.ra-principal) { display: none !important; }
#seatSouth #playerArea .player-info-bar .etalare-pts { display: none !important; }
}
@media (max-width: 360px) {
#seatSouth #playerArea .player-info-bar #rlBalanta { display: none !important; }
#seatSouth #playerArea .player-info-bar .ra-pasi { display: none !important; }
}
/* tableta în peisaj (992–1200): panourile laterale strâng zona jucătorului la ~385px */
@media (min-width: 992px) and (max-width: 1200px) and (orientation: landscape) {
#seatSouth #playerArea .player-info-bar .player-module-hints { display: none !important; }
#seatSouth #playerArea .player-info-bar .etalare-pts { display: none !important; }
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn:not(.btn-primary-action):not(.ra-principal) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
#seatSouth #playerArea .player-info-bar,
#seatSouth #playerArea .player-info-bar::before,
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap .seat-avatar,
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap::after,
#seatSouth #playerArea .player-info-bar .player-name-label,
#seatSouth #playerArea .player-info-bar .player-hand-penalty,
#seatSouth #playerArea .player-info-bar .action-btn-game { animation: none !important; transition: none !important; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap:not([data-timer-state="idle"])::after { opacity: 1; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap:not([data-timer-state="idle"]) .seat-avatar { opacity: .22 !important; }
}
/* ── VIAŢA BENZII — aprobat de user în joc, 18-09-2026 ────────────────────────────────────────
Exact ce a văzut injectat în masă, scris în fişier. Toate se mişcă lin, în cicluri de 2–6s.
1. lumina circulă pe muchia de sus (mai repede cât e rândul tău)
2. un sclipici se roteşte pe inelul ceasului
3. poza şi secundele fac schimb ca o monedă care se răstoarnă, la 3 secunde
4. o sclipire trece peste jetoane, decalată
5. butonul principal respiră, cu halou în spate
6. pasul curent clipeşte blând
7. şina pulsează cald cât e rândul tău
8. jetonul ticăie când i se schimbă cifra (clasa `tic` o pune remi-pro.js) */
#seatSouth #playerArea .player-info-bar::before { animation: bandaLucire 4.6s cubic-bezier(.4, .1, .6, .9) infinite !important; }
#seatSouth #playerArea.active-turn .player-info-bar::before { animation-duration: 2.4s !important; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap { perspective: 220px; overflow: visible; }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap::before {
content: ''; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; z-index: 1;
background: conic-gradient(from 0deg, transparent 0 80%, rgba(255, 255, 255, .75) 93%, transparent 100%);
animation: inelSclipici 2.6s linear infinite; mix-blend-mode: screen;
}
@keyframes inelSclipici { to { transform: rotate(360deg); } }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap:not([data-timer-state="idle"]) .seat-avatar {
animation: fataPoza 6s ease-in-out infinite !important; opacity: 1 !important; backface-visibility: hidden;
}
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap:not([data-timer-state="idle"])::after {
animation: fataCifra 6s ease-in-out infinite !important; opacity: 1; backface-visibility: hidden;
background: radial-gradient(circle at 50% 38%, #3b2a12, #14100a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
@keyframes fataPoza { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes fataCifra { 0%, 40% { transform: rotateY(180deg); } 50%, 90% { transform: rotateY(360deg); } 100% { transform: rotateY(540deg); } }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap[data-timer-state="critical"] .seat-avatar { animation: none !important; transform: rotateY(180deg); }
#seatSouth #playerArea .player-info-bar .identity-avatar-wrap[data-timer-state="critical"]::after { animation: none !important; transform: rotateY(0); opacity: 1; color: #ff7a6a; }
#seatSouth #playerArea .player-info-bar .stat-card { overflow: hidden; }
#seatSouth #playerArea .player-info-bar .stat-card::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .24) 50%, transparent 62%);
background-size: 260% 100%; background-position: 140% 0; animation: jetonSclipire 5.5s ease-in-out infinite;
}
#seatSouth #playerArea .player-info-bar .player-module-stats .stat-card:nth-child(2)::after { animation-delay: .9s; }
#seatSouth #playerArea .player-info-bar #rlBalanta .stat-card::after { animation-delay: 1.8s; }
#seatSouth #playerArea .player-info-bar .player-hand-penalty { position: relative; overflow: hidden; }
@keyframes jetonSclipire { 0%, 55% { background-position: 140% 0; } 75%, 100% { background-position: -40% 0; } }
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.ra-principal::after {
display: block !important; content: ''; position: absolute; inset: -9px -10px -14px; border-radius: 999px; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--aur) 70%, transparent), transparent 70%);
animation: haloRespira 2.2s ease-in-out infinite;
}
@keyframes haloRespira { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.08); } }
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.ra-principal { animation: butonRespira 2.2s ease-in-out infinite !important; }
@keyframes butonRespira { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } }
#seatSouth #playerArea .player-info-bar .ra-pasi .ra-pas.acum { animation: pasClip 1.4s ease-in-out infinite; }
@keyframes pasClip { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
#seatSouth #playerArea.active-turn .player-info-bar { animation: sinaRespira 3s ease-in-out infinite; }
@keyframes sinaRespira { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--aur) 65%, transparent)); } }
#seatSouth #playerArea .player-info-bar .stat-card.tic { animation: jetonTic .45s cubic-bezier(.34, 1.4, .5, 1) 1; }
@keyframes jetonTic { 0% { transform: translateY(0); } 40% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
#seatSouth #playerArea .player-info-bar .stat-card.tic b,
#seatSouth #playerArea .player-info-bar .stat-card.tic #pointsSouth,
#seatSouth #playerArea .player-info-bar .stat-card.tic #playerTilesCount,
#seatSouth #playerArea .player-info-bar .stat-card.tic .rl-bal-v { animation: cifraTic .45s ease-out 1; }
@keyframes cifraTic { 0% { color: #fff; text-shadow: 0 0 12px rgba(255, 235, 180, .9); } 100% { } }
/* ── BUTOANE SPAŢIALE + „Etalează" mereu prezent (cerut de user: „butoane spaţiale", „rămâne gol") ── */
/* golul din dreapta: „Etalează" stă mereu acolo — turtit şi stins când nu se poate, ridicat când se poate */
#seatSouth #playerArea .player-info-bar #btnEtalare.action-btn-game.chip-btn.ra-fantoma {
display: inline-flex !important; pointer-events: none; opacity: .55 !important; transform: none !important;
color: var(--scris) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .35)) !important;
border: 1px solid color-mix(in srgb, var(--aur) 30%, transparent) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .4) !important;
text-shadow: none !important;
}
#seatSouth #playerArea .player-info-bar #btnEtalare.ra-fantoma::after { display: none !important; }
/* jetoanele mai strânse între ele */
#seatSouth #playerArea .player-info-bar .player-module-stats,
#seatSouth #playerArea .player-info-bar #rlBalanta { gap: calc(var(--u) * .32) !important; }
#seatSouth #playerArea .player-info-bar { gap: calc(var(--u) * .5) !important; }
/* jeton gros de 7px, cu bizou, se apasă în şină */
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn {
height: calc(var(--u) * 2.7) !important; padding: 0 calc(var(--u) * 1.5) !important;
font-size: calc(var(--u) * .98) !important; letter-spacing: .04em !important; text-transform: uppercase;
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.ra-principal,
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.btn-primary-action {
transform: translateY(-5px); color: #1b1405 !important;
background: linear-gradient(180deg,
color-mix(in srgb, var(--aur) 28%, #fff 72%) 0%,
color-mix(in srgb, var(--aur) 70%, #fff 30%) 28%,
var(--aur) 55%,
color-mix(in srgb, var(--aur) 62%, #000 38%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--aur) 40%, #000 60%) !important;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -2px 0 color-mix(in srgb, var(--aur) 50%, #000 50%),
inset 2px 0 0 rgba(255, 255, 255, .35), inset -2px 0 0 rgba(0, 0, 0, .25),
0 2px 0 color-mix(in srgb, var(--aur) 58%, #000 42%), 0 3px 0 color-mix(in srgb, var(--aur) 52%, #000 48%),
0 4px 0 color-mix(in srgb, var(--aur) 46%, #000 54%), 0 5px 0 color-mix(in srgb, var(--aur) 40%, #000 60%),
0 6px 0 color-mix(in srgb, var(--aur) 34%, #000 66%), 0 7px 0 color-mix(in srgb, var(--aur) 26%, #000 74%),
0 10px 14px -3px rgba(0, 0, 0, .75), 0 0 28px -6px color-mix(in srgb, var(--aur) 90%, #fff 10%) !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .15) !important;
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.ra-principal:hover { transform: translateY(-7px); filter: brightness(1.08); }
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn.ra-principal:active {
transform: translateY(2px) !important;
box-shadow: inset 0 4px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25),
0 1px 0 color-mix(in srgb, var(--aur) 45%, #000 55%), 0 0 18px -6px color-mix(in srgb, var(--aur) 80%, transparent) !important;
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn:not(.ra-principal):not(.btn-primary-action):not(.ra-fantoma) {
transform: translateY(-5px);
background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .06) 35%, rgba(0, 0, 0, .36) 100%) !important;
border: 1px solid color-mix(in srgb, var(--aur) 50%, #000 50%) !important;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .5), inset 2px 0 0 rgba(255, 255, 255, .12),
0 2px 0 rgba(0, 0, 0, .55), 0 3px 0 rgba(0, 0, 0, .5), 0 4px 0 rgba(0, 0, 0, .45), 0 5px 0 rgba(0, 0, 0, .4),
0 6px 0 rgba(0, 0, 0, .35), 0 7px 0 rgba(0, 0, 0, .3), 0 10px 14px -3px rgba(0, 0, 0, .7) !important;
}
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn:not(.ra-principal):not(.btn-primary-action):not(.ra-fantoma):hover { transform: translateY(-7px); border-color: var(--aur) !important; }
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn:not(.ra-principal):not(.btn-primary-action):active { transform: translateY(2px) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, .6) !important; }
/* ── plase găsite la verificarea „trage / aruncă" ── */
#seatSouth #playerArea .player-info-bar .material-symbols-rounded { display: none !important; }
#seatSouth #playerArea .player-info-bar #btnLipire.is-locked { display: none !important; }
#seatSouth #playerArea .player-info-bar #rlBalanta .stat-card { min-width: calc(var(--u) * 5.4) !important; }
#seatSouth #playerArea .player-info-bar .rl-bal-v:empty::before { content: "–"; }
/* ── jetonul BALANŢĂ răsturnat (raBalFx din remi-features.js scrie „+ TRAGE" / „− ARUNCAT") ──
Faţa răsturnată arată ca jetonul, iar textul e auriu, nu maro pe maro. */
#seatSouth #playerArea .player-info-bar #rlBalanta:has(> b) {
border-radius: calc(var(--raza) * .8) !important;
border: 1px solid color-mix(in srgb, var(--aur) 60%, transparent) !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--aur) 22%, transparent), rgba(0, 0, 0, .4)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 0 rgba(0, 0, 0, .45), 0 4px 6px -2px rgba(0, 0, 0, .5),
0 0 14px -3px color-mix(in srgb, var(--aur) 60%, transparent) !important;
}
#seatSouth #playerArea .player-info-bar #rlBalanta > b {
font: 800 calc(var(--u) * .86) / 1 Inter, system-ui, sans-serif !important; letter-spacing: .1em;
color: color-mix(in srgb, var(--aur) 75%, #fff 25%) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
#rlApron .ra-gold > b { color: var(--scris) !important; letter-spacing: .1em; }
/* ════════════════════════════════════════════════════════════════════════════════════════════
EMBLEMA MESEI — pecetea casei, presată în postav (19-09-2026)
────────────────────────────────────────────────────────────────────────────────────────────
A luat locul monogramei „R" din centrul mesei (o literă, fără legătură cu marca site-ului).
Marcajul stă în `index.php` ca `#masaEmblema`, în HTML static — nu injectat din JS, fiindcă
jocul îşi re-randează panourile şi l-ar mătura.
CUM E FĂCUT RELIEFUL: desenul e trasat de trei ori — o umbră coborâtă 3px, o lumină urcată
2,5px şi faţa la mijloc. Muchia de sus prinde lumina, cea de jos lasă umbră. Nu e o umbră
de text: e acelaşi desen de trei ori, ca la ştanţare.
TREI STĂRI:
· repaus — filigran stins, cât se joacă (ca monograma de dinainte)
· deschidere (`.emb-scena.emb-start`) — masa se retrage, pecetea se presează, linia de
sub marcă se umple, apoi conţinutul mesei apare cu animaţie (`.emb-imprastie`)
· închidere (`.emb-scena`) — pecetea coboară DUPĂ ce jocul şi-a strâns masa singur
(`playGameEndAnimation`) şi ţine până intră premierea
ÎNCADRAREA se ia din POSTAV, nu din fereastră: procentele se rezolvă faţă de
`.game-play-view`. Măsurat de la 1400×760 la 667×375 — nicăieri nu depăşeşte masa.
════════════════════════════════════════════════════════════════════════════════════════════ */
#masaEmblema {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: 56%;
aspect-ratio: 1 / 1;
max-width: 52%;
max-height: 56%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
user-select: none;
}
#masaEmblema svg { width: 100%; height: 100%; overflow: visible; display: block; }
#masaEmblema .emb-txt { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
/* cele trei straturi de relief */
#masaEmblema .emb-umbra { transform: translate(0, 3px); }
#masaEmblema .emb-lumina { transform: translate(0, -2.5px); }
/* inelele rămân goale oricâtă culoare ar primi stratul */
#masaEmblema .emb-umbra circle.emb-inel,
#masaEmblema .emb-lumina circle.emb-inel,
#masaEmblema .emb-fata circle.emb-inel { fill: none !important; }
/* ── REPAUS: ASCUNSĂ (20-09-2026) ──────────────────────────────────────────────────
Userul: „hai să îi facem hide la emblema asta care stă acolo, dar doar aşa, nu la
celelalte."
Pecetea de repaus a fost mereu problema ei: „ştearsă, vagă, nu se vede, parcă n-ar mai
fi". Şi avea două defecte reale — cutia ieşea 202×493 în loc de pătrat (`height: 56%`
fixează înălţimea, `max-width: 52%` taie lăţimea, iar `aspect-ratio` nu mai are ce
face), iar desenul e gândit pentru ~400px: trei inele, şirag de perle, cuvinte pe arc,
relief din trei straturi — nouă cercuri concentrice. La 100px nu se „micşorează", se
adună într-un ghem. Userul, după ce am încercat: „ai o grămadă de rotunduri".
Aşa că nu se micşorează: se stinge. Masa rămâne curată, iar pecetea apare doar când
are ceva de spus.
`:not(.emb-imprastie)` NU e de ornament: la ieşirea din scenă clasa `emb-scena` se
scoate prima şi animaţia mai rulează ~1,3s. Fără ea, pecetea ar dispărea brusc în
mijlocul ieşirii. Măsurat pe drumul adevărat (`deschide` cu ieşirea ei):
162ms scenă/opacitate 0 · 762ms opacitate 1 · 5164ms IEŞIRE/opacitate 1 ·
6455ms repaus/opacitate 0 — adică dispare abia după ce animaţia s-a terminat.
Cele patru scene rămân neatinse (probate: `asteapta`, `tineScurt`, `inchide`,
`deschide` — toate 387×387, opacitate 1). Regulile de culoare de mai jos rămân şi ele
scrise: sunt baza peste care scrie starea de scenă, iar dacă filigranul se reaprinde
vreodată, de-aici porneşte. */
.game-play-view:not(.emb-scena):not(.emb-imprastie) #masaEmblema { opacity: 0; }
/* ── REPAUS: filigran, cât se joacă (stins de regula de mai sus) ── */
#masaEmblema .emb-halou,
#masaEmblema .emb-unda,
#masaEmblema .emb-flash-jo,
#masaEmblema .emb-loader { opacity: 0; }
#masaEmblema .emb-umbra * { fill: #fff6d8; stroke: #fff6d8; opacity: .05; }
#masaEmblema .emb-lumina * { fill: #000; stroke: #000; opacity: .26; }
#masaEmblema .emb-fata * { fill: #0d2a18; stroke: #0d2a18; opacity: .18; }
/* ── SCENĂ (deschidere ŞI închidere): aur adevărat ── */
.emb-scena #masaEmblema .emb-umbra * { fill: #000; stroke: #000; opacity: .55; }
.emb-scena #masaEmblema .emb-lumina * { fill: #fff4cf; stroke: #fff4cf; opacity: .16; }
.emb-scena #masaEmblema .emb-fata * { fill: url(#embAur); stroke: url(#embAur); opacity: .94; }
.emb-scena #masaEmblema .emb-halou { opacity: 1; }
.emb-scena #masaEmblema {
height: 84%;
max-width: 80%;
max-height: 84%;
/* Peste tot ce zboară pe masă: piesele strânse au `z-index: 500` (`.tile-collecting`),
iar înainte treceau PESTE pecete, prin aer. Rămâne însă SUB modale (3000), ca
premierea să se aşeze deasupra. */
z-index: 901;
animation: embPresare .62s cubic-bezier(.22, 1.1, .3, 1) both;
}
@keyframes embPresare {
0% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
62% { opacity: 1; }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Postavul se închide pe margini, ca pecetea să iasă în faţă.
Are ELEMENT PROPRIU (`#masaUmbrire`), nu `::after` pe postav: acolo există deja o
decoraţie a mesei (rama interioară, 4px, z-index 3). Prima variantă folosea acelaşi
pseudo-element, pierdea lupta cu el, şi masa nu se întuneca deloc. */
#masaUmbrire {
position: absolute;
inset: 0;
z-index: 900;
pointer-events: none;
opacity: 0;
/* OPAC, nu o vignetă: în spatele peceţii nu trebuie să se vadă nimic. Rămâne postav
(verde închis), nu o cortină neagră, ca să pară aceeaşi masă, nu alt ecran. */
background:
repeating-linear-gradient(115deg, transparent 0 2px, rgba(255, 255, 255, .012) 2px 3px),
radial-gradient(ellipse at 50% 45%, #103d25 0%, #0a2718 55%, #061710 100%);
background-color: #0a2718;
transition: opacity .55s ease;
}
.emb-scena #masaUmbrire { opacity: 1; }
/* Piesele care zboară sunt `position: fixed` cu `z-index: 99999`, lipite de `body` —
nu sunt copii ai mesei, deci din postav nu pot fi atinse, şi treceau prin aer PESTE
pecete. De-aia scena pune o clasă şi pe `body`. */
body.emb-activa .flying-tile,
body.emb-activa .tile-ghost { opacity: 0 !important; transition: opacity .25s ease !important; }
/* ── CEREMONIA PRINDE TOATĂ PAGINA, nu doar postavul ──────────────────────────────────────
Găsit privind, la auditul din 19-09-2026: `#masaUmbrire` acoperă numai masa, iar
panourile PROMO din lateral, bara de sus şi footerul rămâneau complet aprinse. Ieşea un
dreptunghi solemn în mijlocul unei pagini care-şi vedea de treabă — momentul nu se citea
ca moment. Vălul ăsta e pe `body`, deci ajunge peste tot; masa urcă peste el ca pecetea
să rămână pe postav, nu în spatele unei perdele. */
body.emb-activa::before {
content: "";
position: fixed;
inset: 0;
z-index: 800;
pointer-events: none;
background: rgba(0, 0, 0, .72);
animation: embVal .5s ease both;
}
/* PLASĂ DE SIGURANŢĂ: în lobby nu există pecete, deci nici văl. Dacă o scenă rămâne
cumva aprinsă când pleci de la masă, nu mai înnegreşte tot site-ul — s-a întâmplat pe
19-09-2026 („am ieşit şi s-a blocat ecranul"): cauza era în JS şi e reparată acolo, dar
rândul ăsta face ca o scăpare din viitor să nu mai poată acoperi lobby-ul. */
body.emb-activa.game-menu::before { display: none; }
@keyframes embVal { from { opacity: 0 } to { opacity: 1 } }
body.emb-activa .game-play-view { position: relative; z-index: 850; }
/* ── PE PORTRET PECETEA CĂDEA SUB VĂL ─────────────────────────────────────────────────────
Userul, 20-09-2026: „dar se vede întunecată, de ce?"
`@media (max-width: 768px) and (orientation: portrait)` pune pe `.app-container`,
`.game-canvas` şi `.context-panel` un `will-change: transform, opacity`. Asta creează
CONTEXT DE STIVUIRE, iar masa cu `z-index: 850` rămâne prizonieră înăuntru: vălul, care e
`body::before`, e în afara contextului şi se pictează peste tot — inclusiv peste aurul
peceţii, 72% negru. Pe desktop regula nu se aplică, de-aia nu se vedea.
`will-change` e doar un sfat de performanţă pentru browser. Îl stingem cât ţine scena —
două secunde fără el nu schimbă nimic, iar pecetea iese deasupra, ca pe desktop.
(Aceeaşi capcană ca la «e dedesubt»: nu z-index-ul, contextul de stivuire.) */
body.emb-activa .app-container,
body.emb-activa .game-canvas,
body.emb-activa .context-panel,
body.emb-activa #app { will-change: auto !important; }
/* Banda roşie „TURĂ PIERDUTĂ PE TIMP 2/3" e `position: fixed` şi stătea lipită peste
ceremonie. Se stinge cât ţine scena şi revine după. */
body.emb-activa #joTureRatate {
opacity: 0 !important;
transition: opacity .3s ease !important;
pointer-events: none !important;
}
/* ── CONEXIUNEA: pecetea spune, cutia veche doar butonează ────────────────────────────────
Cerut de user pe 19-09-2026: „conexiunea, reconectarea, server indisponibil, reconectat —
să nu ia din stilul vechi, să nu-ţi apară două; tot ce are, pui în emblemă".
Aşa e făcut: când pecetea preia starea, `showServerDownOverlay` NU mai scrie titlul,
pictograma şi paragraful — nu sunt ascunse din CSS, nu se mai nasc deloc (vezi
`remi-pro.js`). Din cutie rămân doar lucrurile pe care o pecete desenată nu le poate
face: butoanele şi cronometrul de forfeit. Iar cutia coboară jos, ca să nu stea peste
emblemă. Fundalul ei negru pleacă — vălul de mai sus îl dă deja, şi două straturi negre
unul peste altul făceau masa neagră de tot. */
#serverDownOverlay.emb-pe-pecete {
background: transparent !important;
/* `.disconnect-overlay` e `flex-direction: column`, deci AXA VERTICALĂ e
`justify-content`, nu `align-items`. Prima încercare folosea `align-items: flex-end`
şi împingea cutia în DREAPTA, nu jos — văzut în captură, nu dedus. */
justify-content: flex-end !important;
padding-bottom: 24px;
/* Şi vălul, şi cutia aveau `backdrop-filter: blur(8px)`. Fondul ei a plecat, dar blurul
rămâne peste tot ecranul şi încețoşa chiar pecetea de dedesubt: emblema se vedea ca
prin geam aburit. */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
/* Cutia stă jos de tot, doar pe cât ocupă butoanele: restul ecranului rămâne al
peceţii, şi se poate apăsa pe masă în timpul ăsta. */
pointer-events: none;
}
#serverDownOverlay.emb-pe-pecete .disconnect-content { pointer-events: auto; }
#serverDownOverlay.emb-pe-pecete .disconnect-content {
background: rgba(20, 12, 4, .92);
border: 1px solid rgba(212, 165, 68, .45);
box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
border-radius: 12px;
padding: 12px 18px;
max-width: 320px;
text-align: center;
}
/* urma de impact: un inel care se desface o dată şi se stinge */
.emb-scena #masaEmblema .emb-unda { animation: embUnda .85s cubic-bezier(.15, .7, .3, 1) .5s both; }
@keyframes embUnda {
0% { opacity: .75; transform: scale(1); transform-origin: 400px 400px; }
100% { opacity: 0; transform: scale(1.3); transform-origin: 400px 400px; }
}
/* inelul perlat se trage în jurul mărcii, bob cu bob (rotaţia lui e mai jos, la marcă) */
@keyframes embPerle { from { stroke-dashoffset: 120 } to { stroke-dashoffset: 0 } }
/* Marca se AŞAZĂ, nu se răsuceşte. Prima variantă o aducea rotită (−16°, apoi 360°) —
userul, 19-09-2026: „animaţia logo rotate nu, efectul ăla urât… mai bine scoate rotaţia
şi dai un flash peste JO, elegant". Aşa că răsucirea a plecat de tot şi a rămas doar
coborârea: vine cu 6% mai mare şi se aşază la locul ei. Lumina e treaba flashului. */
#masaEmblema .emb-marca-anim { transform-box: fill-box; transform-origin: 50% 50%; }
.emb-scena #masaEmblema .emb-marca-anim { animation: embMarcaAsezare .8s cubic-bezier(.2, .8, .3, 1) .22s both; }
@keyframes embMarcaAsezare {
0% { transform: scale(1.06); opacity: 0; }
40% { opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* Inelul perlat se roteşte încet, cât ţine scena — o tură în 48 de secunde. Atât de lent
încât nu-l prinzi mişcându-se, dar emblema nu pare îngheţată. Se roteşte DOAR el:
dacă s-ar învârti şi marca sau cuvintele, ar fi o morişcă, nu o pecete. */
.emb-scena #masaEmblema .emb-perle {
animation: embPerle 1.15s cubic-bezier(.3, .7, .3, 1) .45s both,
embRoteste 48s linear infinite;
transform-origin: 400px 400px;
}
@keyframes embRoteste { from { rotate: 0deg } to { rotate: 360deg } }
.emb-scena #masaEmblema .emb-umbra { animation: embAdancire .6s ease .3s both; }
.emb-scena #masaEmblema .emb-lumina { animation: embRidicare .6s ease .3s both; }
@keyframes embAdancire { from { transform: translate(0, 0) } to { transform: translate(0, 3px) } }
@keyframes embRidicare { from { transform: translate(0, 0) } to { transform: translate(0, -2.5px) } }
/* cuvintele urcă din pânză, întâi cele de sus */
.emb-scena #masaEmblema .emb-arc-sus { animation: embCuvinte .6s ease .62s both; }
.emb-scena #masaEmblema .emb-arc-jos { animation: embCuvinte .6s ease .76s both; }
@keyframes embCuvinte { from { opacity: 0 } to { opacity: 1 } }
/* ── FLASHUL DE PE LITERE — singura lumină a peceţii ──────────────────────────────────────
Înainte erau trei lumini deodată: una peste tot aurul, una peste cuvintele de pe arc şi
asta. Userul, 19-09-2026: „vreau doar pe logo, pe litere, atât". Celelalte două au fost
scoase cu totul — şi din marcaj, şi de aici — nu doar stinse din CSS.
CIFRELE SUNT MĂSURATE. În spaţiul înclinat al benzii marca ţine de la 317 la 509.
Drumul vechi (−320 → 175) se termina cu 142 de unităţi înainte de J: lumina trecea peste
postav gol, niciodată peste litere. De-aia userul tot spunea „nu e pe O" — nu era nici
pe J. Acum banda (lată de 90) intră la 215, adică lipită de marginea stângă a mărcii,
şi iese la 515, dincolo de O.
MERS LINIAR, nu cu frână la final: un `cubic-bezier` cu coada moale ducea banda de la 60%
la 100% în numai 21 de pixeli — adică lumina încetinea şi murea exact pe O. */
.emb-scena #masaEmblema .emb-flash-jo { animation: embFlashJO 1.25s linear 1.05s both; }
@keyframes embFlashJO {
0% { opacity: 0; transform: translateX(215px); }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; transform: translateX(515px); }
}
/* ── MESAJUL, sub linie ──
Emblema informează, nu doar împodobeşte: aici scrie „JOC NOU", „RECONECTARE",
„CONEXIUNE PIERDUTĂ". Gol = invizibil, deci nu lasă loc alb când nu e nimic de spus.
Nu e triplat în cele trei straturi de relief fiindcă textul se schimbă din JS; adâncimea
o dă conturul (`paint-order: stroke`), care ţine şi litera lizibilă pe postav.
PE DOUĂ RÂNDURI, cerut de user: „Felicitări — urmează premierea nu e încadrată, trebuie
prima dată FELICITĂRI, dedesubt urmează premierea". Rândul de sus poartă starea, cel de
jos explică. Rândurile se fac din ``-uri în `remi-features.js`, care le şi
micşorează dacă ies din cerc.
Conturul e 2,5, nu 3,5: la litera mică de acum (21 şi 14) un contur gros îngroşa glifa
până arăta murdar. */
#masaEmblema .emb-mesaj {
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
text-transform: uppercase;
fill: #f4e4b8;
stroke: rgba(0, 0, 0, .55);
stroke-width: 2.5;
paint-order: stroke fill;
opacity: 0;
transition: opacity .45s ease;
transform-box: fill-box;
transform-origin: 50% 50%;
}
/* Textul nu apare odată cu pecetea: urcă din ea, DUPĂ ce marca s-a aşezat şi lumina a
trecut peste litere. Altfel scena se citea ca trei lucruri pornite în acelaşi moment. */
.emb-scena #masaEmblema .emb-mesaj[data-plin="1"] {
opacity: 0;
animation: embMesajIntra .7s cubic-bezier(.3, .7, .3, 1) 1.45s both;
}
@keyframes embMesajIntra {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* ── BUTONUL DIN PECETE — doar în scenele de decizie ──────────────────────────────────────
Userul: „îi faci buton să intre în masă, în emblemă, şi dai 10 sec".
Apare numai cu `.emb-decizie` pe postav, adică în cele zece secunde de răzgândire de la
plecare. În rest nu există (`hidden`), ca pecetea să rămână un desen, nu un panou. */
/* ── SUBSOLUL: coloana de sub cerc, cu textul (pe ecran îngust) şi butonul ────────────────
Cercul desenat se termină la 82% din cutia peceţii — de-aici pleacă coloana, plus 14px aer
ca să nu se lipească de „ROMÂNESC".
Butonul NU mai e poziţionat singur, la un procent din cutie. Aşa era, şi pe portret a ieşit
prost: cutia nu e mereu pătrată (acolo era 310×738), iar 97% din ea cădea la 228px sub
pecete — butonul plutea rupt de emblemă. În coloană nu se mai poate rupe, oricât de
ciudată ar fi masa. */
#masaEmblema #embSubsol {
position: absolute;
left: 50%;
top: calc(82% + 14px);
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: .28em;
width: max-content;
max-width: 96%;
text-align: center;
font-family: Georgia, "Times New Roman", serif;
text-transform: uppercase;
pointer-events: none; /* doar butonul dinăuntru prinde clicuri */
}
/* Rândurile de text apar DOAR pe ecran îngust; pe desktop scrie pecetea, în cerc. */
#masaEmblema #embSubsol > div { display: none; text-shadow: 0 2px 4px rgba(0, 0, 0, .8); color: #f4e4b8; }
.emb-mic #masaEmblema #embSubsol > div { display: block; }
.emb-mic #masaEmblema #embSubsol > div:empty { display: none; }
.emb-mic #masaEmblema .emb-mesaj { display: none; } /* textul din cerc se retrage */
#masaEmblema #embSubsol .es-sus { font-size: clamp(13px, 3.4vw, 19px); font-weight: 700; letter-spacing: .14em; }
#masaEmblema #embSubsol .es-jos { font-size: clamp(11px, 2.7vw, 15px); font-style: italic; text-transform: none; opacity: .8; }
#masaEmblema #embSubsol .es-avert { font-size: clamp(11px, 2.7vw, 15px); font-weight: 700; letter-spacing: .06em; color: #f87171; }
#masaEmblema #embButon {
margin-top: .5em;
pointer-events: auto; /* singurul loc din pecete care prinde clicuri */
cursor: pointer;
white-space: nowrap;
border-radius: 999px;
padding: .5em 1.15em;
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
font-size: clamp(9px, 2.1vh, 15px);
color: #2a1c06;
background: linear-gradient(180deg, #ffe9b0 0%, #e8c46a 45%, #b8862c 100%);
border: 1px solid rgba(255, 246, 216, .75);
box-shadow: 0 2px 10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#masaEmblema #embButon:hover { filter: brightness(1.08); box-shadow: 0 3px 14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .7); }
#masaEmblema #embButon:active { transform: scale(.97); }
/* Coloana intră odată cu mesajul, nu înaintea lui: altfel textul şi butonul săreau pe ecran
peste o pecete care încă se aşază. Se animează COLOANA, nu butonul separat, ca să vină
toate ca un bloc. `.45s` după `.45s` e ritmul grăbit al mesajului (mai jos). */
.emb-scena #masaEmblema #embSubsol { animation: embSubsolIntra .45s cubic-bezier(.3, .7, .3, 1) .45s both; }
@keyframes embSubsolIntra {
from { opacity: 0; transform: translate(-50%, 6px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ── LINIA DE ÎNCĂRCARE, sub marcă — doar la deschidere ──
Creşte din mijloc spre amândouă capetele, ca să rămână simetrică sub marcă. */
#masaEmblema .emb-loader-sina { opacity: .13; }
#masaEmblema .emb-loader-halou { opacity: 0; }
#masaEmblema .emb-loader-fir { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(0); }
.emb-start #masaEmblema .emb-loader { animation: embLoaderIntra .35s ease .34s both; }
@keyframes embLoaderIntra { from { opacity: 0 } to { opacity: 1 } }
/* Linia nu se umple şi apoi stă moartă: după ce s-a umplut, o lumină trece prin ea la
fiecare 3,2 secunde, cât ţine scena. Semn că masa lucrează, nu că s-a blocat ecranul. */
.emb-start #masaEmblema .emb-loader-fir {
animation: embLoaderCreste 1.15s cubic-bezier(.35, .05, .2, 1) .42s both,
embFirLumina 3.2s ease-in-out 1.7s infinite;
}
@keyframes embLoaderCreste { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes embFirLumina {
0%, 70%, 100% { filter: none; }
82% { filter: drop-shadow(0 0 6px rgba(255, 240, 200, .95)) brightness(1.35); }
}
.emb-start #masaEmblema .emb-loader-halou { animation: embLoaderLumina 1.15s cubic-bezier(.35, .05, .2, 1) .42s both; }
@keyframes embLoaderLumina { 0% { opacity: 0 } 45% { opacity: .9 } 100% { opacity: .55 } }
/* ── DESCHIDEREA E GRĂBITĂ, NU CIUNTITĂ ───────────────────────────────────────────────────
Ceasul turei porneşte odată cu mâna şi e al serverului — fiecare secundă de ceremonie
se scade din prima ta tură. De-aia deschiderea ţine doar 1,2s. Dar la vitezele normale
marca se aşază abia la 1,22s, linia se umple la 1,57s, perlele la 1,60s: s-ar tăia exact
ce e frumos. Aşa că aici mişcările merg mai repede şi se termină toate până la ~1,05s.
Flashul de pe litere JOACĂ şi la deschidere, dar grăbit: porneşte la 0,42s şi se termină
la 1,14s, adică se încheie ÎNAINTE ca masa să iasă la loc (1,2s). Cu ritmul de la final
(1,05s + 1,25s) s-ar fi tăiat pe la jumătatea J-ului.
Excepţie: `emb-asteptare` (conexiune pierdută) NU e grăbită — acolo scena stă pe ecran
până revine legătura, deci are tot timpul din lume.
───────────────────────────────────────────────────────────────────────────────────────── */
.emb-start:not(.emb-asteptare) #masaEmblema { animation-duration: .5s; }
.emb-start:not(.emb-asteptare) #masaEmblema .emb-marca-anim { animation: embMarcaAsezare .62s cubic-bezier(.2, .8, .3, 1) .18s both; }
.emb-start:not(.emb-asteptare) #masaEmblema .emb-perle { animation: embPerle .75s cubic-bezier(.3, .7, .3, 1) .3s both, embRoteste 48s linear infinite; }
.emb-start:not(.emb-asteptare) #masaEmblema .emb-arc-sus { animation: embCuvinte .4s ease .42s both; }
.emb-start:not(.emb-asteptare) #masaEmblema .emb-arc-jos { animation: embCuvinte .4s ease .52s both; }
.emb-start:not(.emb-asteptare) #masaEmblema .emb-unda { animation: embUnda .6s cubic-bezier(.15, .7, .3, 1) .34s both; }
/* `animation` prescurtat ştergea pulsul de lumină al firului — de-aia e scris şi el aici */
.emb-start:not(.emb-asteptare) #masaEmblema .emb-loader-fir {
animation: embLoaderCreste .78s cubic-bezier(.35, .05, .2, 1) .28s both,
embFirLumina 3.2s ease-in-out 1.2s infinite;
}
.emb-start:not(.emb-asteptare) #masaEmblema .emb-loader-halou { animation: embLoaderLumina .78s cubic-bezier(.35, .05, .2, 1) .28s both; }
.emb-start:not(.emb-asteptare) #masaEmblema .emb-loader { animation: embLoaderIntra .25s ease .22s both; }
.emb-start:not(.emb-asteptare) #masaEmblema .emb-flash-jo { animation: embFlashJO .72s linear .42s both; }
/* Mesajul urcă mai devreme la deschidere: cu .72s + .5s se termina de apărut la 1,22s, iar
masa revenea la 1,2s — adică nu era niciodată întreg pe ecran. Acum e gata la 0,80s, iar
scena ţine cel puţin 5,0s (`TINE_EMBLEMA` în remi-features.js), deci rămân peste 4s de
citit. Userul: „dispare de nici nu se vede, ochiul uman nu poate vedea aşa repede". */
.emb-start:not(.emb-asteptare) #masaEmblema .emb-mesaj[data-plin="1"] { animation: embMesajIntra .45s cubic-bezier(.3, .7, .3, 1) .35s both; }
/* Aici a stat `.emb-scena.emb-repede` — o ceremonie scurtată (pecete 1,8s) doar pentru
spectatorul cu invitaţie. Scoasă pe 20-09-2026: „nu ai voie să ascunzi nimic, trebuie să
se întâmple toată animaţia". Ceremonia e una singură pentru toată lumea, în ritmul plin. */
/* La AŞTEPTARE (conexiune pierdută, reconectare) linia nu se umple o dată şi gata —
respiră, ca să se vadă că lucrul e în curs şi nu s-a blocat ecranul. */
.emb-asteptare #masaEmblema .emb-loader-fir {
animation: embLoaderPuls 1.4s ease-in-out infinite !important;
}
@keyframes embLoaderPuls {
0%, 100% { transform: scaleX(.16); opacity: .5; }
50% { transform: scaleX(1); opacity: 1; }
}
.emb-asteptare #masaEmblema .emb-loader-halou { animation: none !important; opacity: .5 !important; }
/* ── STRÂNGEREA DE LA FINAL: două straturi, nu unul ───────────────────────────────────────
`window.playGameEndAnimation` (remi-pro.js) zboară FIECARE piesă spre centru şi stinge
punctele, zonele de etalare şi barele de jucător. Dar NU strânge mobila mesei: măsurat
după ce termină, rămân întregi `#discardRow`, jurnalul, `#seatSouth` (stativul) şi
`#lateralWrap` (bara laterală). Adică pecetea cobora peste o masă pe jumătate plină.
De-aia mobila se strânge aici, în paralel cu piesele: `.emb-aduna` porneşte odată cu
animaţia jocului, nu după ea, ca să nu lungească aşteptarea până la premiere. Direcţia
vine din `transform-origin` — fiecare zonă pleacă ÎNSPRE centru — iar stativul tău se
strânge ultimul, oglinda deschiderii.
───────────────────────────────────────────────────────────────────────────────────────── */
.emb-aduna > *:not(#masaEmblema):not(#masaUmbrire) {
transform-origin: center !important;
transform: scale(.5) !important;
opacity: 0 !important;
transition: transform .55s cubic-bezier(.5, 0, .2, 1), opacity .45s ease .05s !important;
pointer-events: none !important;
}
.emb-aduna > #lateralWrap { transform-origin: left center !important; transition-delay: 0ms, 50ms !important; }
.emb-aduna > .sidebar-section-log { transition-delay: 70ms, 120ms !important; }
.emb-aduna > #discardRow { transition-delay: 140ms, 190ms !important; }
.emb-aduna > .etalare-zone { transform-origin: bottom right !important; transition-delay: 140ms, 190ms !important; }
.emb-aduna > #seatSouth { transform-origin: top center !important; transition-delay: 210ms, 260ms !important; }
/* ── DESCHIDEREA: masa se retrage, apoi conţinutul apare ──────────────────────────────────
ALEGERE CONŞTIENTĂ, luată de user pe 19-09-2026, între două lucruri care nu încap
amândouă:
· aşa cum e aici — masa se retrage complet cât ţine pecetea, apoi conţinutul apare cu
animaţie. Arată bine, fiindcă pecetea are postav gol sub ea.
· varianta cealaltă — pecetea se aprinde peste masa plină. Atunci se vede împărţirea
piesă-cu-piesă a jocului (`_animateHandTiles` → `.tile-animate-deal`), dar pecetea
rămâne spălăcită printre panouri, iar umbrirea (o vignetă) nu se mai simte.
S-a ales prima. Preţul, scris ca să nu se redescopere: împărţirea jocului se joacă
dedesubt, nevăzută, în cele ~1,5 secunde cât stă masa retrasă.
───────────────────────────────────────────────────────────────────────────────────────── */
.emb-start > *:not(#masaEmblema):not(#masaUmbrire) {
transform: scale(.5) !important;
opacity: 0 !important;
pointer-events: none !important;
transition: none !important;
}
/* …şi iese la loc ÎN ORDINE, nu tot deodată: mai întâi mobila mesei (teancul, aruncatele,
jurnalul, zonele de etalare), apoi oponenţii, iar stativul tău ULTIMUL — ca şi cum ţi se
împarte ţie la urmă. Pecetea se stinge peste apariţia asta, nu înaintea ei: tranziţiile
de mai sus (culori 0,5s, mărime 0,5s) pornesc în aceeaşi clipă în care începe ieşirea,
deci nimic nu se taie brusc. */
.emb-imprastie > *:not(#masaEmblema):not(#masaUmbrire) {
animation: embIesire .6s cubic-bezier(.2, .7, .25, 1) both;
}
/* Ordinea e scrisă pe COPIII DIRECŢI ai postavului — ăştia sunt, verificaţi în pagină:
`#etalareZone1..4`, `#discardRow`, `.sidebar-section-log`, `#seatSouth`, `#lateralWrap`.
`#playerArea` stă în `#seatSouth`, iar `.seat-north` în `#lateralWrap`, deci NU sunt
copii direcţi: reguli scrise pe ele cu `>` nu prind nimic (greşeală făcută şi reparată
pe 19-09-2026 — ieşea totul deodată). Se sting şi ies odată cu părinţii lor. */
/* Întârzierile poartă `!important` dintr-un motiv precis: regula de mai sus foloseşte
`:not(#masaEmblema)`, iar un `:not()` cu ID înăuntru urcă specificitatea la nivel de ID.
Aşa, regula generală — care scrie `animation` prescurtat şi deci resetează întârzierea
la 0 — le bătea pe astea, şi ieşea totul deodată. Verificat în pagină după reparaţie:
mobila porneşte la 0, lateralul pe la 170ms, stativul pe la 340ms. */
/* 1. mobila mesei — zonele de etalare, aruncatele, jurnalul */
.emb-imprastie > .etalare-zone,
.emb-imprastie > #discardRow,
.emb-imprastie > .sidebar-section-log { animation-delay: 0ms !important; }
/* 2. oponenţii şi teancul (stau amândoi în `#lateralWrap`) */
.emb-imprastie > #lateralWrap { transform-origin: left center !important; animation-delay: 170ms !important; }
/* 3. stativul tău, la urmă — ca şi cum ţi se împarte ţie ultima */
.emb-imprastie > #seatSouth { transform-origin: top center !important; animation-delay: 340ms !important; }
@keyframes embIesire { from { transform: scale(.5); opacity: 0 } to { transform: none; opacity: 1 } }
/* Întoarcerea din scenă la filigran se face lin, nu dintr-o smucitură: culorile şi
mărimea au tranziţii, aşa că scoaterea claselor stinge pecetea uşor. */
#masaEmblema { transition: height .5s ease, max-width .5s ease, max-height .5s ease; }
#masaEmblema .emb-umbra *,
#masaEmblema .emb-lumina *,
#masaEmblema .emb-fata * { transition: opacity .5s ease, fill .5s ease, stroke .5s ease; }
#masaEmblema .emb-halou { transition: opacity .5s ease; }
@media (prefers-reduced-motion: reduce) {
#masaUmbrire { transition: none !important; }
.emb-scena #masaEmblema,
.emb-scena #masaEmblema * { animation: none !important; }
.emb-scena #masaEmblema .emb-unda,
.emb-scena #masaEmblema .emb-flash-jo { opacity: 0 !important; }
.emb-scena #masaEmblema .emb-mesaj[data-plin="1"] { opacity: 1 !important; }
body.emb-activa::before { animation: none !important; }
.emb-scena #masaEmblema .emb-perle { stroke-dashoffset: 0 !important; rotate: 0deg !important; }
.emb-start #masaEmblema .emb-loader { opacity: 1 !important; }
.emb-start #masaEmblema .emb-loader-fir { transform: scaleX(1) !important; }
#masaEmblema,
#masaEmblema .emb-umbra *,
#masaEmblema .emb-lumina *,
#masaEmblema .emb-fata *,
#masaEmblema .emb-halou { transition: none !important; }
.emb-imprastie > *:not(#masaEmblema):not(#masaUmbrire) { animation: none !important; }
.emb-aduna > *:not(#masaEmblema):not(#masaUmbrire) { transition: none !important; }
}
/* ══════════════════════════════════════════════════════════════════════
TEMA DESCHISĂ — RELIEFUL DE PORŢELAN (2026-09-20)
──────────────────────────────────────────────────────────────────────
Paleta stă mai sus (blocul `[data-theme="light"]`). Aici e doar relieful:
degrade vertical, muchie albă sus, umbră difuză dedesubt. Fără el,
suprafeţele albe pe pagină gri arată plat, ca o foaie de calcul.
De ce `html[data-theme="light"]` şi nu doar `[data-theme="light"]`:
blocurile de desktop şi de mobil scriu aceleaşi proprietăţi cu
`!important` şi aceeaşi specificitate; prefixul `html` urcă specificitatea
cu un element şi câştigă indiferent de ordinea foilor.
Auriul apare DOAR ca umplutură şi ramă (`--remi-accent-bright`). Ca literă
se foloseşte `--remi-accent`, care în tema deschisă e deja cel închis.
══════════════════════════════════════════════════════════════════════ */
/* lumină albă difuză de sus — de aici vine senzaţia de lac */
html[data-theme="light"] body.game-menu {
background:
radial-gradient(130% 75% at 50% -22%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 62%),
var(--jo-pag) !important;
}
/* suprafeţele mari: lobby, panou, antet, bară — şi în lobby, şi la masă */
html[data-theme="light"] body:is(.game-menu, .game-active, .mp-game-active)
:is(.lobby-view, #contextPanel, .top-bar, #navRail) {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 96%, #fff) 46%, color-mix(in srgb, var(--bg-secondary) 21%, var(--bg-primary)) 100%) !important;
border: 1px solid rgba(16, 24, 40, .14) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(16, 24, 40, .05),
0 3px 6px rgba(16, 24, 40, .07),
0 18px 36px -16px rgba(16, 24, 40, .34) !important;
}
html[data-theme="light"] .lobby-card {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 96%, #fff) 46%, color-mix(in srgb, var(--bg-secondary) 21%, var(--bg-primary)) 100%) !important;
border: 1px solid rgba(16, 24, 40, .14) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
0 1px 2px rgba(16, 24, 40, .06),
0 4px 10px -6px rgba(16, 24, 40, .22) !important;
}
html[data-theme="light"] .lobby-card:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
0 2px 4px rgba(16, 24, 40, .08),
0 10px 22px -8px rgba(16, 24, 40, .30) !important;
}
/* controale: pastile, butoane, căutare, sortare, paginare */
html[data-theme="light"] :is(.lobby-chip, .lobby-btn, .lobby-page-btn, .lobby-search-toggle,
.lobby-sort-select, .lc-action-btn, .nav-bar-btn, .status-btn, .drawer-toggle-btn) {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 61%, var(--bg-primary)) 100%) !important;
border: 1px solid rgba(16, 24, 40, .10) !important;
color: var(--remi-text) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 2px rgba(16, 24, 40, .07) !important;
}
html[data-theme="light"] :is(.lobby-chip, .lobby-btn, .lc-action-btn, .nav-bar-btn, .status-btn):hover {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 39%, var(--bg-primary)) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 5px rgba(16, 24, 40, .12) !important;
}
/* starea aprinsă: aur viu, lăcuit */
html[data-theme="light"] :is(.lobby-chip.active, .nav-bar-btn.active, .lobby-page-btn.active) {
background: linear-gradient(180deg,
rgba(var(--remi-accent-bright-rgb), .30),
rgba(var(--remi-accent-bright-rgb), .16)) !important;
border: 1px solid rgba(var(--remi-accent-bright-rgb), .62) !important;
color: var(--remi-accent) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(150, 110, 20, .22) !important;
}
/* butonul principal: aur în trei opriri */
html[data-theme="light"] :is(.lobby-btn-primary, .btn-primary-action, .mw-ready-btn) {
background: linear-gradient(180deg, color-mix(in srgb, var(--accent-bright) 82%, #fff) 0%, var(--accent-bright) 52%, color-mix(in srgb, var(--accent-bright) 78%, #000) 100%) !important;
border: 1px solid color-mix(in srgb, var(--accent-bright) 70%, #000) !important;
color: color-mix(in srgb, #000 78%, var(--accent-bright)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 2px 5px rgba(150, 110, 20, .35) !important;
}
/* câmpuri de scris: adâncite, nu ridicate */
html[data-theme="light"] :is(input[type="text"], input[type="search"], textarea, #chatInput) {
background: var(--bg-secondary) !important;
border: 1px solid rgba(16, 24, 40, .10) !important;
color: var(--remi-text) !important;
box-shadow: inset 0 1px 2px rgba(16, 24, 40, .07) !important;
}
html[data-theme="light"] :is(.modal-content, .modal-unified, .mu-panel, .discard-history-modal) {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 96%, #fff) 46%, color-mix(in srgb, var(--bg-secondary) 21%, var(--bg-primary)) 100%) !important;
border: 1px solid rgba(16, 24, 40, .14) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
0 18px 36px -16px rgba(16, 24, 40, .34) !important;
}
/* ── PANOUL DE CONTEXT ────────────────────────────────────────────────
Panoul îşi face blocurile interioare cu umbriri NEGRE transparente
(`--pn-bg: rgba(0,0,0,.14)` şi rgba(0,0,0,.03….18) prin file). Pe fundal
închis alea sunt o adâncire discretă; pe porţelan devin plăci gri, iar
rama albă nu mai semăna cu conţinutul. Lista de mai jos e culeasă
deschizând pe rând toate cele 12 file ale panoului. */
html[data-theme="light"] #contextPanel {
--pn-bg: rgba(255, 255, 255, .9);
--pn-bd: rgba(16, 24, 40, .10);
}
html[data-theme="light"] #contextPanel :is(.shop-balance, .payment-tab, .shop-tab, .fj-wl, .fj-list,
.chat-tabs-bar, #chatGlobalUsers, #chatMessagesGlobal, .mp-stats-bar, #mpFilterBar,
.mpc-action-btn, .friends-tab, .friends-search-bar, .challenge-streak-bar, .challenge-tab,
.challenge-tab-content, .tournament-tab) {
background: rgba(255, 255, 255, .94) !important;
border: 1px solid rgba(16, 24, 40, .10) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html[data-theme="light"] #contextPanel :is(.shop-item, .mpc-card, .tutorial-lesson, .tournament-card) {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 61%, var(--bg-primary)) 100%) !important;
border: 1px solid rgba(16, 24, 40, .12) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 3px rgba(16, 24, 40, .08) !important;
}
/* butoanele mici din rândurile de prieteni — lipseau din prima trecere
fiindcă filtrul cerea lăţime ≥40px, iar ele au 38 */
html[data-theme="light"] #contextPanel :is(.friend-btn, .mpp-btn) {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 61%, var(--bg-primary)) 100%) !important;
border: 1px solid rgba(16, 24, 40, .12) !important;
color: var(--remi-text-dim) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 2px rgba(16, 24, 40, .07) !important;
}
html[data-theme="light"] #contextPanel :is(.friend-btn, .mpp-btn):hover {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 39%, var(--bg-primary)) 100%) !important;
border-color: rgba(var(--remi-accent-bright-rgb), .5) !important;
color: var(--remi-accent) !important;
}
html[data-theme="light"] #contextPanel
:is(.chat-tab, .shop-tab, .friends-tab, .challenge-tab, .tournament-tab, .payment-tab).active {
background: linear-gradient(180deg,
rgba(var(--remi-accent-bright-rgb), .30),
rgba(var(--remi-accent-bright-rgb), .16)) !important;
border: 1px solid rgba(var(--remi-accent-bright-rgb), .62) !important;
color: var(--remi-accent) !important;
}
/* ── RECLAMELE LATERALE ───────────────────────────────────────────────
Fiecare joc îşi are degradeul lui ÎNCHIS, scris de mână. Pe temă
deschisă rămâneau două plăci negre — cele mai mari elemente din pagină.
Nuanţele de mai jos nu sunt alese de mână: sunt unghiul de culoare citit
din chiar degradeul fiecărui joc, urcat la luminozitate de porţelan.
Numele jocului NU se colorează cu `color`: e pictat cu un degrade auriu
prin `background-clip: text`, deci trebuie stins fondul şi pictat prin
`-webkit-text-fill-color`, altfel rămâne auriu invizibil pe card deschis. */
html[data-theme="light"] .lobby-ad-card[data-game="septica"] { --ad-h: 140; --ad-s: 44%; }
html[data-theme="light"] .lobby-ad-card[data-game="tabinet"] { --ad-h: 350; --ad-s: 52%; }
html[data-theme="light"] .lobby-ad-card[data-game="table"] { --ad-h: 27; --ad-s: 51%; }
html[data-theme="light"] .lobby-ad-card[data-game="video-poker"] { --ad-h: 222; --ad-s: 52%; }
html[data-theme="light"] .lobby-ad-card[data-game="macao"] { --ad-h: 279; --ad-s: 52%; }
/* jocurile fără culoare proprie (Whist n-are) cad pe auriul casei */
html[data-theme="light"] .lobby-ad-card { --ad-h: 40; --ad-s: 44%; }
html[data-theme="light"] .lobby-ad-card {
background: linear-gradient(180deg,
hsl(var(--ad-h) var(--ad-s) 97%) 0%,
hsl(var(--ad-h) var(--ad-s) 92%) 46%,
hsl(var(--ad-h) var(--ad-s) 85%) 100%) !important;
border: 1px solid hsl(var(--ad-h) calc(var(--ad-s) * 0.6) 74%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
0 14px 30px -16px hsl(var(--ad-h) 45% 28% / .5) !important;
}
html[data-theme="light"] .lobby-ad-card .ad-name {
background: none !important;
background-image: none !important;
-webkit-text-fill-color: hsl(var(--ad-h) var(--ad-s) 22%) !important;
color: hsl(var(--ad-h) var(--ad-s) 22%) !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8) !important;
}
html[data-theme="light"] .lobby-ad-card .ad-icon { color: hsl(var(--ad-h) var(--ad-s) 26%) !important; }
html[data-theme="light"] .lobby-ad-card .ad-slogan { color: hsl(var(--ad-h) 20% 33%) !important; }
html[data-theme="light"] .lobby-ad-card .ad-label {
background: linear-gradient(180deg,
hsl(var(--ad-h) var(--ad-s) 90%),
hsl(var(--ad-h) var(--ad-s) 84%)) !important;
color: hsl(var(--ad-h) var(--ad-s) 22%) !important;
border: 1px solid hsl(var(--ad-h) var(--ad-s) 76%) !important;
}
/* butonul plin: pe card deschis, unul alb ar dispărea */
html[data-theme="light"] .lobby-ad-card .ad-cta {
background: linear-gradient(180deg,
hsl(var(--ad-h) var(--ad-s) 34%),
hsl(var(--ad-h) var(--ad-s) 25%)) !important;
color: #fff !important;
border: 1px solid hsl(var(--ad-h) var(--ad-s) 22%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
0 4px 10px -5px hsl(var(--ad-h) 45% 20% / .6) !important;
}
/* textura aurie de deasupra e gândită pentru fundal închis */
html[data-theme="light"] .lobby-ad-card::before { opacity: .12 !important; }
/* ── ÎNCĂRCĂTORUL ─────────────────────────────────────────────────────
Exista deja `[data-theme="light"] .game-loader { background: var(--remi-bg) }`,
deci FONDUL a devenit deschis odată cu paleta. Dar cardul dinăuntru
(`.loader-content`) rămăsese maro — `rgba(58,35,16,.85)` — adică o placă
închisă plutind pe o pagină deschisă. Iar textul lui e auriu palid
(#eabf62), gândit pentru maro: pe alb ar dispărea, deci se închide odată
cu fondul, nu separat.
De reţinut: contrastul textului NU se măsoară faţă de fondul ecranului,
ci faţă de cardul pe care stă. Măsurătoarea care compară cu fondul
raportează 1,14:1 şi pare o catastrofă, când de fapt textul era lizibil
pe maro — problema era placa, nu litera. */
html[data-theme="light"] .game-loader .loader-content {
background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 96%, #fff) 46%, color-mix(in srgb, var(--bg-secondary) 21%, var(--bg-primary)) 100%) !important;
border: 1px solid rgba(16, 24, 40, .14) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
0 18px 36px -16px rgba(16, 24, 40, .34) !important;
}
/* titlul e pictat cu degrade prin background-clip, deci nu ascultă de `color` */
html[data-theme="light"] .game-loader .logo-text {
background: none !important;
background-image: none !important;
-webkit-text-fill-color: var(--remi-accent) !important;
color: var(--remi-accent) !important;
text-shadow: none !important;
}
html[data-theme="light"] .game-loader .loader-subtitlu { color: var(--remi-text-muted) !important; }
html[data-theme="light"] .game-loader .check-label { color: var(--remi-text) !important; }
html[data-theme="light"] .game-loader .check-detail { color: var(--remi-text-dim) !important; }
html[data-theme="light"] .game-loader .loader-salut { color: var(--remi-text-dim) !important; }
html[data-theme="light"] .game-loader .loader-salut b { color: var(--remi-accent) !important; }
html[data-theme="light"] .game-loader .loader-check-item {
background: rgba(255, 255, 255, .94) !important;
border: 1px solid rgba(16, 24, 40, .10) !important;
color: var(--remi-text) !important;
}
html[data-theme="light"] .game-loader .progress-bar-bg { background: rgba(16, 24, 40, .10) !important; }
/* textura de lemn de deasupra e pentru fundal închis */
html[data-theme="light"] .game-loader::before { opacity: .35 !important; }
/* ── etichetele secundare din panouri, pe temă deschisă ───────────────
Toate erau gândite ca „text discret pe fundal închis": gri deschis sau
auriu palid. Pe porţelan ies prea şterse. Găsite deschizând pe rând
toate cele 12 file ale panoului plus sertarul şi încărcătorul. */
html[data-theme="light"] :is(.drawer-category-label, .ct-label, .mpc-chip,
.rz-rar, .shop-item-rarity) {
color: var(--remi-text-dim) !important;
}
/* bannerul „MOD TEST" din magazin: auriu pe auriu pal, prea slab */
html[data-theme="light"] .stb-tit { color: color-mix(in srgb, var(--primary-color) 85%, #000) !important; }
html[data-theme="light"] .stb-txt { color: var(--text-secondary) !important; }
html[data-theme="light"] .game-loader .loader-viu { color: var(--remi-text-dim) !important; }
/* ══════════════════════════════════════════════════════════════════════
MASA DE JOC PE TEMĂ DESCHISĂ (2026-09-20)
──────────────────────────────────────────────────────────────────────
Postavul rămâne verde şi stativul rămâne de lemn — sunt obiecte de joc,
nu suprafeţe de interfaţă; la fel cum tabla de şah nu devine albă când
pui lichess pe temă deschisă.
Dar tokenii de text urmau tema, iar suprafeţele nu: am măsurat 12
elemente cu LITERĂ ÎNCHISĂ PE FUNDAL ÎNCHIS — numele jucătorilor de pe
postav, jurnalul de activitate, eticheta de rând, contoarele de piese.
Erau ilizibile. Cauza e schimbarea de paletă: `--remi-text` a devenit
închis pentru tema deschisă, dar postavul de sub el n-a devenit deschis.
Reparaţia nu e pe cele 12 elemente, ci pe tokeni: înăuntrul mesei se
restabilesc valorile temei `remi`. Un bloc, nu douăsprezece reguli.
ACTUALIZARE 20-09 seara: blocul de 23 de tokeni care stătea AICI a fost
şters. Copia lui nu mai e necesară — masa a fost adăugată direct la
selectorul temei remi (linia ~558 din fişierul ăsta şi
`:root[data-theme="remi"]` din `assets/css/themes.css`), deci primeşte
toţi cei 47 de tokeni, nu doar 23, şi nicio valoare nu mai e scrisă de
două ori. Comparat element cu element: masa pe temă deschisă are aceleaşi
culori ca masa pe tema `remi`.
Ce NU se atinge: piesele rămân crem (`.tile`), spatele pieselor la fel,
grupurile etalate la fel — alea chiar sunt albe şi în jocul fizic.
══════════════════════════════════════════════════════════════════════ */
/* `[data-theme="light"] .opponent-area { background: white }` e o regulă
VECHE, din prima încercare de temă deschisă — făcea două plăci albe în
mijlocul postavului verde. Se întoarce la verdele scaunului. */
html[data-theme="light"] .game-play-view .opponent-area {
background: linear-gradient(135deg, rgba(20, 45, 25, .55) 0%, rgba(12, 32, 18, .65) 100%) !important;
border: 1px solid rgba(212, 165, 68, .25) !important;
}
/* Masa avea nevoie şi de o CULOARE proprie, nu doar de tokeni.
Motivul e o regulă veche din acest fişier: `[data-theme="light"] span,
[data-theme="light"] p … { color: inherit }`. Elementele nu-şi mai iau
culoarea din variabilă, ci o MOŞTENESC — iar masa n-avea de la ce, aşa
că moşteneau culoarea închisă a paginii. Numele adversarilor, punctele
şi contoarele de piese rămâneau închise pe postav, chiar cu tokenii
corecţi. Cu `color` pe container, moştenirea porneşte de la crem. */
html[data-theme="light"] .game-play-view { color: var(--remi-text) !important; }
/* tipul acţiunii din jurnal are o albastră semantică; pe postav trebuie
varianta deschisă, altfel cade la 2,5:1 */
html[data-theme="light"] .game-play-view .log-action-type { color: #7fd4ff !important; }
/* ══════════════════════════════════════════════════════════════════════════
TEMA DESCHISĂ — restul corecturilor probate live (20-09-2026)
══════════════════════════════════════════════════════════════════════════ */
/* --- banda de stare de sub masă ------------------------------------------
Ceasul şi iconiţa lui erau #fca5a5 şi #f87171 — două roşuri palide,
potrivite pe fundal închis, ilizibile pe banda deschisă (1,67:1).
Regulile lor din fişier NU se ating: pe temele închise sunt corecte. */
html[data-theme="light"] :is(.status-item-timer,
.status-item-timer #gameTimer,
#gameTimerShort,
.status-item-timer #gameTimerShort,
.status-item-timer .material-symbols-rounded) {
color: var(--danger) !important;
}
/* --- bara de sus ----------------------------------------------------------
„pts" şi eticheta de XP moşteneau indigoul; cifrele stau pe pastile uşor
aurii, unde accentul e corect ca nuanţă dar prea deschis la corp mic. */
html[data-theme="light"] :is(#balanceBadge, #xpLabel) { color: var(--text-primary) !important; }
html[data-theme="light"] :is(#balanceValue, #levelBadge, .lobby-chip.active,
.rd-plus, .mpc-chip) {
color: var(--primary-hover) !important;
}
/* --- lobby ----------------------------------------------------------------
Blocul de porţelan albise TOT `:is(.lobby-chip, .lobby-btn, …)`, deci şi
butonul principal — numai că lui îi rămăsese litera aproape albă (3,68:1).
Se întoarce la aur plin, cum îl are şi regula lui de bază
`.lobby-btn-create`. Selectorul are nevoie de `body.game-menu` şi de id
ca să treacă de regula cu id de mai sus din fişier. */
html[data-theme="light"] body.game-menu #lobbyBtnCreate {
background-image: linear-gradient(180deg, var(--primary-color), var(--primary-hover)) !important;
border-color: var(--primary-hover) !important;
color: #ffffff !important;
}
html[data-theme="light"] body.game-menu #lobbyBtnCreate :is(span, b, i) {
color: inherit !important;
}
/* pastila activă: litera închisă are nevoie de fundal deschis, nu de 30% aur */
html[data-theme="light"] .lobby-chip.active {
background-image: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary)) !important;
border-color: rgba(138, 100, 16, .45) !important;
}
/* --- încărcător ----------------------------------------------------------- */
html[data-theme="light"] .game-loader #loaderOnline { color: var(--remi-accent) !important; }
html[data-theme="light"] .game-loader .loader-subtitlu { color: var(--remi-text-dim) !important; }
/* --- filele panoului lateral ---------------------------------------------
Foloseau `--remi-text-dim`, bun pe fundal închis; panoul e auriu-pal pe
tema deschisă, deci ieşeau la 3,73:1. Sunt etichete de navigare. */
html[data-theme="light"] #contextPanel .pnm-taburi button,
html[data-theme="light"] #contextPanel .pnm-taburi button :is(span, .material-symbols-rounded) {
color: var(--text-primary) !important;
}
html[data-theme="light"] #contextPanel .pnm-taburi button.active,
html[data-theme="light"] #contextPanel .pnm-taburi button.active :is(span, .material-symbols-rounded) {
color: var(--primary-hover) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
23-09-2026 — CONTRAST PE INSIGNA DE INDICII
──────────────────────────────────────────────────────────────────────────
`span.hint-count` e cifra din colţul butonului „Hint". Linia 2273 din acest
fişier îi dă `color: white`, iar fundalul e `var(--remi-accent)`, adică
`rgb(212,165,68)`. Măsurat cu formula WCAG: 2,27:1. Pragul pentru text
normal e 4,5:1 — cifra e practic invizibilă pe auriu.
înainte rgb(255,255,255) pe rgb(212,165,68) → 2,27:1
după rgb(43,29,2) pe rgb(212,165,68) → 7,24:1
Regula stă AICI, nu în `remi-mobile.css`. Acela se încarcă doar sub 991px
(`media="(max-width: 991px)"`, includes/header.php:93), aşa că o zi întreagă
cifra a rămas albă pe desktop deşi pe telefon era reparată. `remi-pro.css`
se încarcă peste tot.
Singura regulă concurentă e `.status-btn .hint-count` de la linia 2266,
fără `!important` şi cu specificitate mai mică — verificat enumerând toate
foile de stil ale paginii, nu presupus. Fundalul auriu rămâne neatins.
══════════════════════════════════════════════════════════════════════════ */
html body span.hint-count {
color: #2b1d02 !important;
}
/* ══════════════════════════════════════════════════════════════════════════
23-09-2026 — TREI FIXURI DE DESKTOP, VALIDATE PE MASĂ MP REALĂ
──────────────────────────────────────────────────────────────────────────
Măsurate cu mine jucător activ (nu spectator: în spectator scaunul de jos
arată altceva şi mâna nu se vede) pe o masă de 4 jucători cu 3 boţi, fiecare
cu 14 piese — cazul cel mai rău. Cifrele din comentarii sunt reale.
Stau AICI, nu în `remi-mobile.css`: acela se încarcă doar sub 991px
(`media="(max-width: 991px)"`, includes/header.php:93), deci nu poate atinge
desktopul. Exact capcana în care am căzut cu contrastul, o zi mai devreme.
══════════════════════════════════════════════════════════════════════════ */
/* ── P1. MÂNA ADVERSARULUI PE DESKTOP ─────────────────────────────────────
Aceeaşi problemă ca pe mobil, doar că aici piesa e 26px, nu 16px:
#lateralWrap .opponent-hand { gap: 1px !important }
#lateralWrap .opponent-tile-back { width:26px; min-width:26px;
margin-left:0 !important }
14 × 26 + 13 × 1 = 381px ceruţi, container 208px → 7 piese tăiate din 14,
la FIECARE adversar, pe toate lăţimile de la 1024px în sus.
Piesa RĂMÂNE 26px. Le suprapunem, ca pe mobil: pas de 13px.
Am încercat întâi −12px → 212px ceruţi, tot o piesă tăiată (containerul are
~4px de umplutură). −13px → 199px. Măsurat, nu calculat pe hârtie.
1024, 1280, 1366, 1440, 1536, 1920, 2560 208/381 · 7 tăiate → 208/199 · 0 */
@media (min-width: 992px) {
html body .game-play-view #lateralWrap .opponent-area .opponent-hand {
gap: 0 !important;
}
html body .game-play-view #lateralWrap .opponent-area
.opponent-tile-back + .opponent-tile-back {
margin-left: -13px !important;
}
}
/* ── P2. `#pileAuditBtn` PE DESKTOP ───────────────────────────────────────
`.pile-audit-btn { width: 22px }` — mai sus în acest fişier, specificitate
(0,1,0), fără `!important`. Pe mobil era reparat din `remi-mobile.css`;
pe desktop a rămas 22×22, sub pragul de atingere.
desktop 22,0 × 22,0 → 32,0 × 32,0
Iconiţa nu se micşorează; creşte doar cutia. Pe mobil regula din
`remi-mobile.css` compensează scara părintelui şi dă 34×34 — nu o atingem. */
html body #drawPile #pileAuditBtn.pile-audit-btn {
min-width: 32px !important;
min-height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── P3. `#btnEtalare` ────────────────────────────────────────────────────
Două cauze, nu una — de asta n-a mers din prima.
1) Regula care câştiga, mai sus în acest fişier, fără media query:
#seatSouth #playerArea .player-info-bar .action-btn-game.chip-btn
{ height: calc(var(--u) * 2.7) !important } → (2,3,0)
Orice selector mai slab e ignorat tăcut.
2) `.player-info-bar` are `matrix3d(...)` cu scară pe Y de 0,9991 (o uşoară
înclinare 3D). Cu `min-height: 32px` am măsurat 31,91px randaţi — sub prag.
De aceea 33px: 33 × 0,9991 = 32,97.
91,2 × 29,9 → 91,2 × 32,9 (la toate lăţimile mobile) */
html body #seatSouth #playerArea .player-info-bar #btnEtalare.action-btn-game.chip-btn {
min-height: 33px !important;
}
/* ════════════════════════════════════════════════════════════════════════
25-09-2026 — LIGHT, masa de joc: elemente care stau pe fundal ÎNCHIS şi pe tema
light primeau culoarea de text a paginii (închisă) prin şablonul light (G1, titluri).
Culorile de mai jos sunt EXACT cele de pe întunecat. Pe `remi` nu se schimbă nimic.
════════════════════════════════════════════════════════════════════════ */
/* R1 — bula de mesaj a jucătorului (.jo-bula-sala, fundal maro fix) */
html[data-theme="light"] body .jo-bula-sala { color: #f4ecd8; }
/* R2 — insigna de mesaje necitite (roşie): cifra albă, nu culoarea butonului */
html[data-theme="light"] body :is(.chat-nav-badge, .chat-unread-badge) { color: #fff; }
/* ══════════════════════════════════════════════════════════════════════
BUG LIGHT componente (26-09-2026) — reparaţii punctuale, doar html[data-theme="light"].
Reper: Remi LIGHT. DARK şi regulile existente nu sunt atinse; G1 rămâne.
══════════════════════════════════════════════════════════════════════ */
/* toast-uri: „info" avea text închis pe maro închis (2,0:1), „error" 3,6:1 */
html[data-theme="light"] #toastContainer .toast-msg.info {
color: #ffffff !important;
}
html[data-theme="light"] #toastContainer .toast-msg.error {
background: #b04545 !important;
color: #ffffff !important;
}
html[data-theme="light"] #toastContainer .toast-msg:is(.info, .error) * {
color: inherit !important;
}
/* ══════════════════════════════════════════════════════════════════════
LIGHT FINAL — închiderea uniformizării (26-09-2026)
──────────────────────────────────────────────────────────────────────
Remi: doar problemele reale găsite în panou şi în Setări.
Reper: Remi LIGHT (porţelan, text #26231e / #6b645b, accent #8a6410).
Doar html[data-theme="light"] → DARK neatins. G1 rămâne.
══════════════════════════════════════════════════════════════════════ */
/* Statistici: victorii/înfrângeri/puncte scrise inline cu var(--remi-success/danger) (1,7-2,8:1) */
html[data-theme="light"] #contextPanel [style*="var(--remi-success)"] { color: #15803d !important; }
html[data-theme="light"] #contextPanel [style*="var(--remi-danger)"] { color: #b91c1c !important; }
/* Online: pastilele „Reali/Boţi" aveau textul temei închise (1,1:1 — invizibil) */
html[data-theme="light"] #contextPanel .online-stat-pill { color: #6b5617 !important; }
html[data-theme="light"] #contextPanel .online-stat-real { color: #166534 !important; }
html[data-theme="light"] #contextPanel .online-stat-bots { color: #475569 !important; }
html[data-theme="light"] #contextPanel .online-stat-pill :is(strong, .online-pill-label) { color: inherit !important; }
/* Setări: iconiţa „save" era gri pe butonul auriu (1,1:1) */
html[data-theme="light"] #saveSettingsBtn .material-symbols-rounded { color: inherit !important; }
/* lista Global: Kick ✕ / Ban 🚫 / „Admin" au culoarea în atributul style (roz pe roz, 1,8:1) */
html[data-theme="light"] #contextPanel :is(button, span)[style*="#f87171"] {
color: #b91c1c !important;
background: rgba(220, 38, 38, .10) !important;
}
/* Shop: preţul „prea scump" era roz deschis (var(--color-error)) pe alb (2,8:1) */
html[data-theme="light"] #contextPanel .shop-item-price.expensive { color: #b91c1c !important; }
/* ── LIGHT FINAL — completare după testul pe server (26-09-2026) ──
Găsite la testul final pe server; tot doar pe LIGHT. */
/* lista Global: insigna „🤖 Bot" — violet deschis inline pe violet 15% (2,7:1) */
html[data-theme="light"] #contextPanel span[style*="#a78bfa"] { color: #6d28d9 !important; }
/* Online: cifrele scrise inline cu var(--color-warning) — galben pe alb (1,9-2,1:1) */
html[data-theme="light"] #contextPanel [style*="var(--color-warning)"] { color: #b45309 !important; }
/* Sezon: „Claim Reward" — regula generică de butoane LIGHT îi punea text închis pe auriu (2,9:1) */
html[data-theme="light"] #contextPanel .season-claim-btn {
color: #ffffff !important;
background: linear-gradient(135deg, #a87c1e 0%, #6d5013 100%) !important;
}
/* ecrane goale (ex. Jurnal): iconiţa mare era galben 45% pe alb (1,4:1) */
html[data-theme="light"] #contextPanel .panel-empty-icon { color: #a87c1e !important; }