/* ============================================================ TABLES.CSS — Multiple table style variations Switch via [data-table="..."] on - felt (Klasik Neon Yeşil — default) - carbon (Kara Karbon + Mor Neon Halo) - velvet (Şarap Kırmızı Kadife + Altın) - marble (Mermer + Buz Mavisi Halo) ============================================================ */ /* ───────────────────────────────────────────────────────────── 1. NEON FELT (default) — already styled in game-polish.css ───────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────── 2. CARBON — black diamond carbon weave + magenta neon piping ───────────────────────────────────────────────────────────── */ [data-table="carbon"] #table { background: /* Two cool ceiling pools */ radial-gradient(ellipse 38% 28% at 30% 25%, rgba(var(--neon-1-rgb), 0.18) 0%, transparent 60%), radial-gradient(ellipse 38% 28% at 70% 25%, rgba(var(--neon-2-rgb), 0.14) 0%, transparent 60%), /* Inner glow */ radial-gradient(ellipse 65% 50% at 50% 50%, rgba(var(--neon-1-rgb), 0.08) 0%, transparent 65%), /* Vignette */ radial-gradient(ellipse 95% 95% at 50% 55%, transparent 50%, rgba(0,0,0,0.7) 100%), /* Diamond carbon weave */ repeating-linear-gradient(45deg, #11101a 0px, #11101a 5px, #1a1925 5px, #1a1925 6px, #11101a 6px, #11101a 11px, #14131e 11px, #14131e 12px), /* Base */ radial-gradient(ellipse 100% 100% at 50% 50%, #1a1830 0%, #0c0a1c 60%, #050310 100%) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 2px rgba(0,0,0,0.6), /* Chrome / steel rim */ inset 0 0 0 4px #6a6a78, inset 0 0 0 6px #2a2a35, inset 0 0 0 7px rgba(var(--neon-1-rgb), 0.85), inset 0 0 0 9px rgba(0,0,0,0.95), inset 0 0 110px rgba(0,0,0,0.65), inset 0 -50px 100px rgba(0,0,0,0.4), 0 50px 120px rgba(0,0,0,0.95), 0 0 100px rgba(var(--neon-1-rgb), 0.22), 0 0 180px rgba(var(--neon-2-rgb), 0.12) !important; } [data-table="carbon"] #table::before { color: rgba(255,255,255,0.13) !important; text-shadow: 0 0 30px rgba(var(--neon-1-rgb), 0.5), 0 0 60px rgba(var(--neon-1-rgb), 0.3) !important; } /* ───────────────────────────────────────────────────────────── 3. VELVET — rich wine red velvet + gold inlay ───────────────────────────────────────────────────────────── */ [data-table="velvet"] #table { background: /* Two warm gold pools */ radial-gradient(ellipse 38% 28% at 30% 25%, rgba(255,210,120,0.12) 0%, transparent 60%), radial-gradient(ellipse 38% 28% at 70% 25%, rgba(255,210,120,0.12) 0%, transparent 60%), /* Inner glow */ radial-gradient(ellipse 70% 55% at 50% 50%, rgba(220,80,120,0.14) 0%, transparent 65%), /* Vignette */ radial-gradient(ellipse 95% 95% at 50% 55%, transparent 48%, rgba(0,0,0,0.65) 100%), /* Quilted diamond pattern */ repeating-linear-gradient(45deg, transparent 0 22px, rgba(0,0,0,0.08) 22px 23px), repeating-linear-gradient(-45deg, transparent 0 22px, rgba(0,0,0,0.08) 22px 23px), /* Velvet base — rich wine */ radial-gradient(ellipse 100% 100% at 50% 50%, #6a1024 0%, #4a0a18 50%, #1a0408 100%), /* Fabric weave */ repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.05) 2px 3px), repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,0.04) 2px 3px) !important; box-shadow: inset 0 0 0 1px rgba(255,235,180,0.5), inset 0 0 0 3px rgba(0,0,0,0.45), /* Triple gold ring */ inset 0 0 0 4px #c89030, inset 0 0 0 5px rgba(255,225,150,0.6), inset 0 0 0 6px #c89030, inset 0 0 0 8px rgba(0,0,0,0.85), inset 0 0 100px rgba(0,0,0,0.5), inset 0 -50px 100px rgba(0,0,0,0.35), 0 50px 120px rgba(0,0,0,0.95), 0 0 80px rgba(220,80,120,0.2), 0 0 160px rgba(200,150,60,0.12) !important; } [data-table="velvet"] #table::before { color: rgba(255,230,170,0.18) !important; text-shadow: 0 0 30px rgba(255,210,120,0.5), 0 0 60px rgba(220,80,120,0.3) !important; } [data-table="velvet"] #table::after { color: rgba(255,230,170,0.22) !important; } /* ───────────────────────────────────────────────────────────── 4. MARBLE — cool white marble + ice cyan piping ───────────────────────────────────────────────────────────── */ [data-table="marble"] #table { background: /* Cool ceiling pool */ radial-gradient(ellipse 50% 35% at 50% 25%, rgba(74,210,255,0.14) 0%, transparent 65%), /* Inner highlight */ radial-gradient(ellipse 65% 50% at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 70%), /* Marble veining */ radial-gradient(ellipse 80% 20% at 40% 30%, rgba(255,255,255,0.08) 0%, transparent 70%), radial-gradient(ellipse 60% 15% at 70% 65%, rgba(255,255,255,0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 12% at 25% 75%, rgba(180,200,220,0.05) 0%, transparent 70%), /* Vignette */ radial-gradient(ellipse 95% 95% at 50% 55%, transparent 48%, rgba(0,0,0,0.5) 100%), /* Marble base */ radial-gradient(ellipse 100% 100% at 50% 50%, #3a3e4e 0%, #1e2030 60%, #08090f 100%), /* Subtle stone grain */ repeating-linear-gradient(20deg, transparent 0 3px, rgba(255,255,255,0.012) 3px 4px), repeating-linear-gradient(-65deg, transparent 0 4px, rgba(0,0,0,0.04) 4px 5px) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 0 0 2px rgba(0,0,0,0.4), /* Polished metal rim */ inset 0 0 0 4px #b0c4d8, inset 0 0 0 5px rgba(255,255,255,0.6), inset 0 0 0 6px #6a7a90, inset 0 0 0 8px rgba(74,210,255,0.55), inset 0 0 0 10px rgba(0,0,0,0.85), inset 0 0 120px rgba(0,0,0,0.45), 0 50px 120px rgba(0,0,0,0.9), 0 0 100px rgba(74,210,255,0.22), 0 0 160px rgba(180,200,220,0.1) !important; } [data-table="marble"] #table::before { color: rgba(220,235,255,0.16) !important; text-shadow: 0 0 30px rgba(74,210,255,0.45), 0 0 60px rgba(180,200,220,0.25) !important; } [data-table="marble"] #table::after { color: rgba(220,235,255,0.18) !important; } /* ───────────────────────────────────────────────────────────── PER-THEME default felt color tweaks When user changes theme, the felt color follows for "felt" style Already done in style.css via --felt-mid / --felt / --felt-dark ───────────────────────────────────────────────────────────── */