/* ============================================================ SHARED CARD-GAME TABLE THEME Hosted once, on games.lightlol.com's landing service (which already owns the root of this domain — no new routing needed for other games to reach it at /shared/table-theme.css). Every card game loads this file and uses these --tbl-* tokens for its table/felt/ seat/log styling, instead of hardcoding its own. That's the whole point: one file to edit, every game (current and future) picks it up on next load — not N copies that quietly drift apart, which is exactly the bug pattern this site has hit repeatedly. Three skins, chosen by [data-table-theme] on : "light" (default) — matches the site's own light theme tokens "felt" — dark green casino-table look, poker's original identity, now selectable anywhere "site" — felt table, but the page around it follows the site's light/dark theme (see below) Each game still supplies its OWN --accent/--bg/etc. (unrelated to this — that's the site-wide brand color) — --tbl-* is a separate, parallel namespace purely for the table/seat/log surfaces, so this file never has to know or care what any given game's accent color currently is. ============================================================ */ :root, [data-table-theme="light"] { --tbl-page-bg: var(--bg, #E4E7EB); --tbl-panel-bg: var(--surface-1, #FFFFFF); --tbl-panel-border: var(--border, rgba(25,30,40,0.08)); --tbl-felt: var(--surface-2, #D8DCE1); --tbl-felt-border: var(--border-strong, rgba(25,30,40,0.16)); --tbl-felt-shadow: inset 0 0 30px rgba(0, 0, 0, 0.05); --tbl-seat-bg: var(--surface-1, #FFFFFF); --tbl-seat-bg-taken: var(--surface-1, #FFFFFF); --tbl-seat-bg-me: var(--surface-1, #FFFFFF); --tbl-seat-border: var(--border, rgba(25,30,40,0.08)); --tbl-seat-border-taken: var(--border-strong, rgba(25,30,40,0.16)); --tbl-seat-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --tbl-felt-border-width: 1px; --tbl-text: var(--text, #20242C); --tbl-text-mid: var(--text-mid, #5C6270); --tbl-text-muted: var(--text-muted, #6E7481); --tbl-accent: var(--accent, #FFE438); --tbl-on-accent: var(--on-accent, #241800); --tbl-log-bg: var(--surface-1, #FFFFFF); --tbl-log-border: var(--border, rgba(25,30,40,0.08)); --tbl-log-text: var(--text-mid, #5C6270); --tbl-log-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --tbl-log-text-shadow: none; /* dark text on a light box needs no shadow to stay legible */ --tbl-log-fade: linear-gradient(to bottom, transparent, var(--tbl-log-bg)); } [data-table-theme="felt"] { /* Poker's exact page background (its html/body { background: var(--bg) }), not the near-black this used to be — the whole point of this pass is these two skins no longer being visibly different games. */ --tbl-page-bg: #536878; --tbl-panel-bg: #0e0e0e; --tbl-panel-border: #2a3a2a; /* Poker's exact .table-felt gradient — re-verified directly against poker's own CSS this time (the previous version's comment claimed this already matched and it didn't: outer stops were off, only the middle one happened to be right). */ --tbl-felt: radial-gradient(ellipse at 40% 35%, #2a7a2a, #1a4a1a, #0e2e0e); --tbl-felt-border: #5a3a1a; --tbl-felt-border-width: 8px; --tbl-felt-shadow: 0 0 0 4px #3a2010, inset 0 0 60px rgba(0, 0, 0, 0.5), 0 8px 40px rgba(0, 0, 0, 0.6); /* Poker's seat pips aren't one flat color — empty/taken/taken-and-me are three different shades (see .tbl-seat state rules below). */ --tbl-seat-bg: #111; --tbl-seat-bg-taken: #1a3a1a; --tbl-seat-bg-me: #2e5a2e; --tbl-seat-border: #333; --tbl-seat-border-taken: #2e5a2e; --tbl-seat-shadow: none; --tbl-text: #fff; --tbl-text-mid: #cfc9b8; --tbl-text-muted: #9a9282; --tbl-accent: #ffd700; --tbl-on-accent: #241800; /* Poker's original log has no background at all — it floats directly on the felt, legible only via heavy text-shadow. Kept identical here rather than boxed like the light skin's log, since a solid panel would look out of place on a felt table. */ --tbl-log-bg: transparent; --tbl-log-border: transparent; --tbl-log-text: #ffd700; /* These two used to be one shared variable (--tbl-log-shadow) doing double duty as both the container's box-shadow and each entry's text-shadow — the heavy value below is right for the text (that's what keeps gold text legible over a busy felt background) but was never meant to be a box-shadow on the container itself, which has no background here at all (poker's own log floats with no box). Applying it as a box-shadow anyway traced a dark rectangle around the whole element — exactly what read as an unwanted border. */ --tbl-log-box-shadow: none; --tbl-log-text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7); --tbl-log-fade: none; } /* ── "site" skin — page chrome follows lightlol.com's light/dark theme, the table itself stays felt. Opted into per page by writing data-table-theme="site" on in the markup (see getTableTheme in table-theme.js); nothing changes for pages that don't. Blackjack, 31 and 4-Point Pitch use it: their seat-management / "make a game" screen was poker's slate page with dark panels, but the headings and body text on it came from each game's own theme.css (the site's light palette), so dark text sat on a dark page. Poker stays on "felt" — its game screen is self-contained and deliberately its own look. Everything page-level (--tbl-page-bg, panels, text, log box) is the light skin's mapping onto the site's --bg/--surface/--text tokens, which each game's theme.css defines and its [data-theme="dark"] override flips. Everything felt-level (oval, seat pips) is copied from the felt skin so the table looks identical to poker's. ── */ [data-table-theme="site"] { --tbl-page-bg: var(--bg, #E4E7EB); --tbl-panel-bg: var(--surface-1, #FFFFFF); --tbl-panel-border: var(--border, rgba(25,30,40,0.08)); --tbl-felt: radial-gradient(ellipse at 40% 35%, #2a7a2a, #1a4a1a, #0e2e0e); --tbl-felt-border: #5a3a1a; --tbl-felt-border-width: 8px; --tbl-felt-shadow: 0 0 0 4px #3a2010, inset 0 0 60px rgba(0, 0, 0, 0.5), 0 8px 40px rgba(0, 0, 0, 0.6); --tbl-seat-bg: #111; --tbl-seat-bg-taken: #1a3a1a; --tbl-seat-bg-me: #2e5a2e; --tbl-seat-border: #333; --tbl-seat-border-taken: #2e5a2e; --tbl-seat-shadow: none; --tbl-text: var(--text, #20242C); --tbl-text-mid: var(--text-mid, #5C6270); --tbl-text-muted: var(--text-muted, #6E7481); --tbl-accent: var(--accent, #FFE438); --tbl-on-accent: var(--on-accent, #241800); --tbl-log-bg: var(--surface-1, #FFFFFF); --tbl-log-border: var(--border, rgba(25,30,40,0.08)); --tbl-log-text: var(--text-mid, #5C6270); --tbl-log-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --tbl-log-text-shadow: none; --tbl-log-fade: linear-gradient(to bottom, transparent, var(--tbl-log-bg)); } /* Accent as *text* on the light page: the site's #FFE438 is a button color and vanishes against #E4E7EB, so chrome text that uses --tbl-accent (room codes, turn labels, the instructions banner) gets a darker amber in light mode. Dark mode and the felt keep the yellow. */ [data-table-theme="site"]:not([data-theme="dark"]) { --tbl-accent: #7A6100; --tbl-on-accent: #FFFFFF; } [data-table-theme="site"] .tbl-instructions { color: var(--tbl-text-mid); background: var(--surface-1, #fff); border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); } /* On the felt itself (seat pips, anything a game places inside the oval) text keeps poker's light-on-green palette regardless of the site theme — dark site text on a dark-green pip would be unreadable. */ [data-table-theme="site"] .tbl-seat, [data-table-theme="site"] .tbl-felt { --tbl-text: #fff; --tbl-text-mid: #cfc9b8; --tbl-text-muted: #9a9282; --tbl-accent: #ffd700; --tbl-on-accent: #241800; } /* The floating log sits over the felt in all three games, so it keeps poker's no-box gold ticker rather than the light skin's white panel. */ [data-table-theme="site"] #tbl-log { --tbl-log-bg: transparent; --tbl-log-border: transparent; --tbl-log-text: #ffd700; --tbl-log-box-shadow: none; --tbl-log-text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7); --tbl-log-fade: none; border-radius: 0; padding: 4px 8px; } /* ── Felt surface ─────────────────────────────────────────── */ .tbl-felt { background: var(--tbl-felt); border: var(--tbl-felt-border-width, 1px) solid var(--tbl-felt-border); box-shadow: var(--tbl-felt-shadow); } /* ── Seat tokens ──────────────────────────────────────────── */ .tbl-seat { background: var(--tbl-seat-bg); border: 1px solid var(--tbl-seat-border); box-shadow: var(--tbl-seat-shadow); color: var(--tbl-text); transition: background 0.15s ease, border-color 0.15s ease; } .tbl-seat.taken { background: var(--tbl-seat-bg-taken); border-color: var(--tbl-seat-border-taken); } .tbl-seat.taken.is-me { background: var(--tbl-seat-bg-me); border-color: var(--tbl-accent); } .tbl-seat.tbl-seat-active { border-color: var(--tbl-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tbl-accent) 30%, transparent), var(--tbl-seat-shadow); } .tbl-seat-name { color: var(--tbl-text); } /* ── Instructions banner ("Tap or drag a player onto a seat.") ── Light: matches the site's normal banner look. Felt: poker's exact dark-green-with-gold treatment, not an approximation. ── */ .tbl-instructions { font-size: 0.75rem; padding: 0.5rem 1rem; margin: 0; color: var(--tbl-accent); background: var(--surface-1, #fff); border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); } [data-table-theme="felt"] .tbl-instructions { background: #0a150a; border-bottom: 1px solid var(--tbl-seat-border-taken); } .tbl-seat-sub { color: var(--tbl-text-mid); } /* ── Action/message log — the floating feed every game can share ── Usage: a container with id="tbl-log", populated via shared/table-theme.js's renderTableLog(messages). Light skin: a boxed panel like any other card UI. Felt skin: poker's original floating gold ticker with no background at all. */ #tbl-log { background: var(--tbl-log-bg); border: 1px solid var(--tbl-log-border); box-shadow: var(--tbl-log-box-shadow); border-radius: 10px; padding: 6px 10px; max-height: 160px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 2px; font-size: 0.78rem; pointer-events: none; } [data-table-theme="felt"] #tbl-log { border-radius: 0; padding: 4px 8px; } .tbl-log-entry { color: var(--tbl-log-text); text-shadow: var(--tbl-log-text-shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .tbl-log-entry.tbl-log-newest { animation: tbl-log-slide-in 0.25s ease; } @keyframes tbl-log-slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Theme toggle — same look wherever it's placed (setup screen or the in-game settings menu) ── */ .tbl-theme-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tbl-theme-toggle-row .tbl-theme-label { font-size: 0.85rem; font-weight: 600; color: var(--tbl-text-mid, var(--text-mid)); } .tbl-theme-switch { display: flex; border-radius: 999px; border: 1px solid var(--tbl-panel-border, rgba(0,0,0,0.15)); overflow: hidden; } .tbl-theme-switch button { border: none; background: var(--tbl-panel-bg, #fff); color: var(--tbl-text-mid, #666); font-size: 0.75rem; font-weight: 700; padding: 6px 14px; cursor: pointer; } .tbl-theme-switch button.active { background: var(--tbl-accent, #FFE438); color: var(--tbl-on-accent, #241800); } /* ── Settings modal — created by shared/table-theme.js's openTableSettings(), not per-game HTML. Used to deliberately stay on the site's light surface tokens "regardless of which skin is picked" — now that there's only one skin (felt, locked to match poker exactly, see getTableTheme), that reasoning no longer applies, so this uses the --tbl-* panel tokens like everything else now does. ── */ .tbl-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 500; display: none; align-items: center; justify-content: center; padding: 20px; } .tbl-modal-overlay.show { display: flex; } .tbl-modal-sheet { background: var(--tbl-panel-bg); border: 1px solid var(--tbl-panel-border); border-radius: 16px; padding: 1.2rem; width: 100%; max-width: 340px; max-height: 85vh; overflow-y: auto; } .tbl-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .tbl-modal-header h2 { font-family: var(--font-display, inherit); font-size: 1.1rem; margin: 0; color: var(--tbl-accent); } .tbl-modal-close { background: none; border: 1px solid var(--tbl-panel-border); border-radius: 8px; color: var(--tbl-text-mid); font-size: 0.9rem; padding: 0.3rem 0.55rem; cursor: pointer; } .tbl-modal-close:hover { border-color: var(--tbl-accent); } .tbl-modal-body { display: flex; flex-direction: column; gap: 1rem; color: var(--tbl-text); } /* ── Settings sections — one wrapper per registered section (see openTableSettings in table-theme.js). Sections are separated by a hairline; the first one has none. Games used to inline these margins and borders per section, each slightly differently — this is the one copy now. ── */ .tbl-settings-section { padding-top: 1rem; border-top: 1px solid var(--tbl-panel-border); } .tbl-settings-section:first-child { padding-top: 0; border-top: none; } .tbl-settings-section > .tbl-settings-label:first-child { margin-top: 0; } .tbl-settings-label { font-size: 0.65rem; color: var(--tbl-text-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin: 0 0 0.6rem; } .tbl-settings-section .tbl-theme-toggle-row { margin-bottom: 0.8rem; } .tbl-settings-hint { font-size: 0.68rem; color: var(--tbl-text-muted); line-height: 1.4; margin: 0.4rem 0 0; } /* Full-width secondary button (How to Play, Focus Mode, Cast…). The .danger variant is the one red Leave Game button at the bottom. */ .tbl-settings-btn { display: block; width: 100%; box-sizing: border-box; padding: 0.7rem; font-size: 0.85rem; font-weight: 600; font-family: inherit; background: var(--tbl-panel-bg); color: var(--tbl-text-mid); border: 1px solid var(--tbl-panel-border); border-radius: 8px; cursor: pointer; text-decoration: none; text-align: center; transition: border-color 0.15s, color 0.15s; } .tbl-settings-btn:hover { border-color: var(--tbl-accent); color: var(--tbl-text); } .tbl-settings-btn + .tbl-settings-btn { margin-top: 0.5rem; } .tbl-settings-btn.danger { padding: 0.9rem; font-size: 0.9rem; font-weight: 700; background: #1a1010; color: #c0392b; border-color: #3a2020; } .tbl-settings-btn.danger:hover { border-color: #c0392b; color: #e74c3c; } .tbl-settings-btn.active { border-color: var(--tbl-accent); color: var(--tbl-accent); } /* On/Off pairs (Focus Mode, Auto-Flow, sound…) */ .tbl-settings-choice { display: flex; gap: 0.5rem; } .tbl-settings-choice .tbl-settings-btn { flex: 1; } .tbl-settings-choice .tbl-settings-btn + .tbl-settings-btn { margin-top: 0; } .tbl-settings-choice.disabled { opacity: 0.4; pointer-events: none; } /* ── Your Color — registerTableColorPicker() ── */ .tbl-color-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tbl-color-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--tbl-panel-border); cursor: pointer; padding: 0; transition: border-color 0.15s ease, transform 0.1s ease; } .tbl-color-swatch:hover { transform: scale(1.08); } .tbl-color-swatch.selected { border-color: var(--tbl-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbl-accent) 30%, transparent); } /* ── Rules sheet — openTableRules(). Same sheet as Settings, a little wider, and the content typography every game's rules.js relies on (p / ul / strong / example hands with mini cards). ── */ /* The rules overlay stacks above the Settings overlay (z-index 500) so "How to Play" from inside Settings opens on top of it. */ #tbl-rules-modal { z-index: 510; } .tbl-rules-sheet { max-width: 480px; } .tbl-rules-content { display: block; font-size: 0.85rem; line-height: 1.6; color: var(--tbl-text-mid); } .tbl-rules-content p { margin: 0 0 0.7rem; } .tbl-rules-content p:last-child { margin-bottom: 0; } .tbl-rules-content strong { color: var(--tbl-text); } .tbl-rules-content ul { margin: 0 0 0.7rem 1.2rem; padding: 0; } .tbl-rules-content li { margin-bottom: 0.3rem; } .tbl-rules-content h3 { font-size: 0.7rem; color: var(--tbl-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 1.1rem 0 0.5rem; } .tbl-rules-content h3:first-child { margin-top: 0; } .tbl-example-hand { background: color-mix(in srgb, var(--tbl-text) 6%, transparent); border: 1px solid var(--tbl-panel-border); border-radius: 10px; padding: 0.6rem 0.75rem; margin: 0 0 0.7rem; } .tbl-example-cards { display: flex; gap: 6px; margin-bottom: 0.4rem; flex-wrap: wrap; } .tbl-example-explain { margin: 0 !important; font-size: 0.8rem; } .tbl-mini-card { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 46px; border-radius: 5px; background: #fff; border: 1px solid #b8b8b8; font-weight: 800; font-size: 0.8rem; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .tbl-mini-card.red { color: #c0392b; } /* Text table (poker hand rankings) */ .tbl-rules-table { display: grid; grid-template-columns: auto 1fr auto; align-items: center; border: 1px solid var(--tbl-panel-border); border-radius: 10px; overflow: hidden; font-size: 0.78rem; margin: 0 0 0.7rem; } .tbl-rules-table > div { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--tbl-panel-border); } .tbl-rules-table > div:nth-last-child(-n+3) { border-bottom: none; } .tbl-rules-table .name { font-weight: 700; color: var(--tbl-text); white-space: nowrap; } .tbl-rules-table .cards { font-family: ui-monospace, Menlo, monospace; } .tbl-rules-table .odds { color: var(--tbl-text-muted); text-align: right; white-space: nowrap; } /* ── "How to Play" link on the join screen — sits under the game title on every card game's index.html and opens the same rules sheet. ── */ .tbl-howto-link { display: inline-block; background: none; border: none; padding: 0; margin: -0.2rem 0 0.9rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--tbl-text-mid, var(--text-mid, #666)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .tbl-howto-link:hover { color: var(--tbl-text, var(--text, #222)); } /* ── Deck style picker — shared/table-theme.js's renderDeckStyleSection(). Same tbl-* tokens as the rest of this file, so the picker matches whichever table skin is active. Each game still owns the CSS that makes ITS OWN real cards match whatever's picked here — see e.g. blackjack/public/css/game.css's own [data-deck-style] rules on .pcard.face-down — this is only the picker's preview swatches. ── */ .tbl-deck-style-row { display: flex; flex-direction: column; gap: 0.6rem; } .tbl-deck-style-label { font-size: 0.85rem; font-weight: 600; color: var(--tbl-text-mid); } .tbl-deck-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .tbl-deck-swatch-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; } .tbl-deck-swatch { width: 44px; height: 62px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); position: relative; flex-shrink: 0; } .tbl-deck-swatch.active { border-color: var(--tbl-accent); } .tbl-deck-swatch-caption { font-size: 0.62rem; color: var(--tbl-text-muted); } .tbl-deck-swatch[data-preview="nautical"] { background: radial-gradient(circle at 50% 42%, #234b6e 0%, #0f2438 100%); display: flex; align-items: center; justify-content: center; color: var(--tbl-accent); font-size: 16px; } .tbl-deck-swatch[data-preview="nautical"]::after { content: '✦'; } .tbl-deck-swatch[data-preview="emerald"] { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 3px, transparent 3px, transparent 14px), linear-gradient(160deg, #0f4a3a, #06261e); border-color: #c9a227; display: flex; align-items: center; justify-content: center; color: #c9a227; font-size: 16px; } .tbl-deck-swatch[data-preview="emerald"]::after { content: '✦'; } .tbl-deck-swatch[data-preview="geo"] { background-color: #101114; background-image: linear-gradient(135deg, #1c1e24 25%, transparent 25%), linear-gradient(225deg, #1c1e24 25%, transparent 25%), linear-gradient(45deg, #1c1e24 25%, transparent 25%), linear-gradient(315deg, #1c1e24 25%, transparent 25%); background-position: 0 0, 8px 0, 8px -8px, 0 8px; background-size: 16px 16px; border-color: #565b66; display: flex; align-items: center; justify-content: center; color: #9aa4b8; font-size: 16px; } .tbl-deck-swatch[data-preview="geo"]::after { content: '◇'; } .tbl-deck-swatch[data-preview="sunset"] { background: radial-gradient(circle at 50% 60%, #ffb35c 0%, #e8586b 45%, #5a2a6e 100%); display: flex; align-items: center; justify-content: center; color: #fff4dc; font-size: 16px; } .tbl-deck-swatch[data-preview="sunset"]::after { content: '●'; } .tbl-deck-swatch[data-preview="deco"] { background-color: #17140f; background-image: repeating-conic-gradient(from 0deg at 50% 120%, #17140f 0deg 8deg, #8a5a2a 8deg 10deg); border-color: #b9812f; display: flex; align-items: center; justify-content: center; color: #e2b45a; font-size: 16px; } .tbl-deck-swatch[data-preview="deco"]::after { content: '▲'; } .tbl-deck-swatch[data-preview="frost"] { background: repeating-linear-gradient(60deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 10px), repeating-linear-gradient(-60deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 10px), linear-gradient(160deg, #cfe8f5, #8fb9d6); border-color: #ffffff; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 16px; } .tbl-deck-swatch[data-preview="frost"]::after { content: '❄'; } .tbl-deck-swatch[data-preview="velvet"] { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 10px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 10px), radial-gradient(circle at 50% 45%, #8a1a2a, #4a0d16); border-color: #d4af37; display: flex; align-items: center; justify-content: center; color: #d4af37; font-size: 16px; } .tbl-deck-swatch[data-preview="velvet"]::after { content: '◆'; } .tbl-deck-swatch[data-preview="slate"] { background: linear-gradient(160deg, #2b2f36, #16181c); border-color: #4a4f58; display: flex; align-items: center; justify-content: center; color: #c7a55a; font-family: Georgia, serif; font-weight: bold; font-size: 16px; } .tbl-deck-swatch[data-preview="slate"]::after { content: 'L'; } .tbl-deck-swatch[data-preview="camo"] { background-color: #24361f; background-image: radial-gradient(ellipse 14px 9px at 20% 30%, #3c5230 40%, transparent 41%), radial-gradient(ellipse 17px 10px at 75% 20%, #17240f 40%, transparent 41%), radial-gradient(ellipse 15px 10px at 30% 75%, #17240f 40%, transparent 41%), radial-gradient(ellipse 18px 12px at 80% 70%, #3c5230 40%, transparent 41%); border-color: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; color: #d8d8b0; font-size: 16px; } .tbl-deck-swatch[data-preview="camo"]::after { content: '★'; } /* ── Drag-and-drop — behavior lives in shared/table-theme.js's initSeatDrag(); this is just the ghost element that follows the pointer and the two state classes each game's seat tokens pick up automatically during a drag. Uses --tbl-* tokens so the ghost matches whichever table skin is active. ── */ .tbl-drag-ghost { position: fixed; z-index: 999; transform: translate(-50%, -50%); pointer-events: none; background: var(--tbl-accent); color: var(--tbl-on-accent); font-weight: 700; font-size: 12px; padding: 8px 12px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); white-space: nowrap; } .drag-source-active { opacity: 0.35; } .drag-over { border-color: var(--tbl-accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tbl-accent) 30%, transparent) !important; } /* ── Lobby seat assignment — the felt+seat-token look, reused for the pre-game "who sits where" screen instead of a plain grid. Each game still renders its own seat content (name/stack/etc.) — this is only the shape/positioning wrapper, same split as the active table. ── */ .tbl-lobby-list { display: flex; flex-direction: column; gap: 6px; } .tbl-lobby-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--tbl-panel-bg); border: 1px solid var(--tbl-panel-border); border-radius: 10px; padding: 0.5rem 0.75rem; cursor: grab; color: var(--tbl-text); }