/** * CORNER MERCHANT — Table Scene helper * * Shared styling for every trainer table page. A trainer HTML opts in by * setting: * * * * The class paints the backdrop behind everything, applies a vignette for * legibility, and exposes a `.scene-table` container the page can wrap its * game area in. Optional `.scene-table.ripped` adds a jagged-cardboard * edge (used by Cee-Lo). * * Locked frontends (Spades, Skin) receive the same treatment via the * gateway's LOCKED_REWRITES middleware — the disk bytes don't change. */ body.table-scene { background: linear-gradient(180deg, rgba(5,4,3,0.72) 0%, rgba(5,4,3,0.9) 72%, rgba(5,4,3,0.96) 100%), var(--scene-bg, linear-gradient(180deg, #1a1410, #0a0807)) center/cover no-repeat fixed #0a0807; } body.table-scene::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, transparent 28%, rgba(0,0,0,0.62) 100%); } body.table-scene .site-header, body.table-scene main, body.table-scene section, body.table-scene .container { position: relative; z-index: 1; } body.table-scene .site-header { background: rgba(10, 8, 6, 0.85); backdrop-filter: blur(6px); } /* ── The "table" container (surface the game sits on) ───────────── */ .scene-table { background: linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.26) 100%), var(--scene-table, linear-gradient(180deg, #1a1410, #0a0807)) center/cover no-repeat; border-radius: 10px; padding: 36px 30px 30px; position: relative; box-shadow: 0 18px 56px rgba(0,0,0,0.7), inset 0 0 120px rgba(0,0,0,0.32); } .scene-table::after { /* Ambient shadow under the table */ content: ""; position: absolute; left: 4%; right: 4%; bottom: -16px; height: 18px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 70%); z-index: -1; pointer-events: none; } /* ── Ripped / torn edge (Cee-Lo cardboard variant) ─────────────── */ /* Only apply the jagged clip on wider viewports so content doesn't get chewed on phones. The base container keeps its rounded-rect corners. */ @media (min-width: 720px) { .scene-table.ripped { border-radius: 0; clip-path: polygon( 1% 3%, 4% 0%, 9% 2%, 14% 0%, 20% 3%, 26% 1%, 33% 2%, 40% 0%, 47% 2%, 54% 1%, 61% 3%, 68% 0%, 75% 2%, 82% 1%, 89% 3%, 95% 1%, 98% 4%, 100% 8%, 97% 13%, 100% 20%, 98% 28%, 100% 38%, 97% 47%, 100% 56%, 98% 65%, 100% 74%, 97% 83%, 100% 92%, 95% 98%, 88% 99%, 82% 97%, 75% 99%, 68% 98%, 61% 100%, 54% 98%, 47% 99%, 40% 97%, 33% 100%, 26% 98%, 20% 99%, 14% 97%, 9% 99%, 4% 98%, 1% 96%, 0% 90%, 3% 83%, 0% 72%, 2% 60%, 0% 48%, 3% 37%, 0% 26%, 2% 15% ); } } /* ── Slight atmospheric overlay inside the table for fog/smoke feel ── */ .scene-table .scene-haze { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 30% at 50% 0%, rgba(255,200,140,0.06) 0%, transparent 60%); border-radius: inherit; }