lib
Table themes
Seven table themes: Matrix, CoinPoker, GGPoker, ACR, Ignition, Halloween and Classic. A stylesheet keyed on data-skin plus the hook that remembers the player's pick.
Import app/table-skins.css into your global stylesheet, then set data-skin on the element that holds the table. useTrainerSkin and setTrainerSkinremember the player's pick, and TABLE_THEMES lists the seven for a picker.
Q♠
J♥
2♣
Pot 11.5
RAISE
You
92.5BB
7.5
FOLD
Agent 1
100BB
D
Agent 2
99.5BB
0.5
12
Agent 3
99BB
1
RAISE
Agent 4
97.5BB
2.5
FOLD
Agent 5
100BB
Installation
$ npx shadcn@latest add https://www.pokerstudy.ai/r/table-themes.jsonGenerative UI
A model can draw this with json-render. Install generative UI and spread its definitions into your catalog. The model reads the description and the schema below, and answers with a spec like the example.
PokerTable
A full poker table: seats round an oval, stacks, bets, the board and the pot. Use to show a spot or a moment in a hand.
Pot 4
RAISE
Hero
97.5BB
2.5
D
FOLD
SB
99.5BB
0.5
BB
99BB
1
Source
lib/trainer/storage.ts
"use client";
/**
* SSR-safe localStorage shim. The mobile trainer persists through an async
* AsyncStorage wrapper; the ported code keeps the same call shape so the two
* stay diffable, but here the reads are synchronous under the hood.
*/
export function getItem(key: string): string | null {
if (typeof window === "undefined") return null;
try {
return window.localStorage.getItem(key);
} catch {
// Private mode / storage disabled — the trainer degrades to session-only.
return null;
}
}
export function setItem(key: string, value: string): void {
if (typeof window === "undefined") return;
try {
window.localStorage.setItem(key, value);
} catch {
// Best-effort persistence; failures are non-fatal.
}
}
app/table-skins.css
/*
* Train-table themes (`data-skin` on the table root).
*
* Each themed skin sets one set of variables: the page field, the UI accent
* and inks for the action bar, dock, hand strip and pot pill, and the table
* variables the components read for seat plates, card backs, bet chips and
* the dealer button (those fall back to the navy skin's values when unset).
* The hook rules below are shared by every themed skin and only style the
* `data-*` hooks the components expose, so the navy, zinc and classic skins
* are untouched.
*/
/* ---------- Matrix: black field, phosphor green, monospace numbers ------- */
[data-skin="matrix"] {
--ui-bg: #000;
--ui-font: var(--font-mono);
--ui-tracking: 0.06em;
--ui-accent: #00ff41;
--ui-accent-hover: #5cff86;
--ui-accent-ink: #001a06;
--ui-accent-glow: 0 0 14px rgba(0, 255, 65, 0.45), 0 0 40px rgba(0, 255, 65, 0.15);
--ui-accent-glow-hover: 0 0 18px rgba(0, 255, 65, 0.65), 0 0 48px rgba(0, 255, 65, 0.22);
--ui-glow: 0 0 10px rgba(0, 255, 65, 0.45);
--ui-ink: #d8ffe2;
--ui-ink-muted: rgba(216, 255, 226, 0.55);
--ui-line: rgba(0, 255, 65, 0.28);
--ui-line-strong: rgba(0, 255, 65, 0.6);
--ui-line-faint: rgba(0, 255, 65, 0.1);
--ui-fill: rgba(0, 255, 65, 0.06);
--ui-fill-strong: rgba(0, 255, 65, 0.14);
--ui-surface: rgba(0, 0, 0, 0.75);
--ui-pot-ink: #00ff41;
--ui-key-ink: #00ff41;
--seat-live: rgba(0, 255, 65, 0.55);
--seat-acting: #00ff41;
--seat-acting-track: rgba(0, 255, 65, 0.2);
--seat-acting-glow: 0 0 14px rgba(0, 255, 65, 0.55), 0 0 32px rgba(0, 255, 65, 0.2);
--seat-muted: rgba(0, 255, 65, 0.16);
--seat-sitout: #ff3b6b;
--seat-plate: rgba(0, 0, 0, 0.92);
--seat-plate-muted: rgba(0, 0, 0, 0.6);
--seat-name: #d8ffe2;
--seat-name-muted: rgba(216, 255, 226, 0.3);
--seat-stack: #00ff41;
--seat-stack-muted: rgba(0, 255, 65, 0.3);
--seat-timer-ink: #00ff41;
--seat-timer-bg: #000;
--seat-winner-glow: rgba(0, 255, 65, 0.75);
--seat-radius: 6px;
--seat-border-width: 1px;
--seat-stack-shadow: 0 0 8px rgba(0, 255, 65, 0.45);
--card-back-bg: #020a04;
--card-back-image: linear-gradient(158deg, rgba(0, 255, 65, 0.16) 0%, rgba(0, 255, 65, 0.02) 45%, rgba(0, 0, 0, 0.3) 100%),
radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.35) 0 12%, rgba(0, 255, 65, 0) 13%),
repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.14) 0 1px, transparent 1px 4px),
repeating-linear-gradient(0deg, rgba(0, 255, 65, 0.08) 0 1px, transparent 1px 3px);
--card-back-frame: rgba(0, 255, 65, 0.7);
--card-back-edge: rgba(0, 255, 65, 0.25);
--card-back-inner: rgba(0, 255, 65, 0.4);
--table-chip: #031a0b;
--table-chip-ink: #d8ffe2;
--dealer-bg: #000;
--dealer-ink: #00ff41;
--dealer-ring: #00ff41;
--slot-border: rgba(0, 255, 65, 0.22);
--slot-bg: rgba(0, 0, 0, 0.5);
}
/* ---------- CoinPoker: charcoal client, green cloth, crimson accent ------ */
[data-skin="coinpoker"] {
/* Square portraits in a crimson frame, the new client's seat tiles. */
--seat-portrait-radius: 10px;
--seat-portrait-ring: #c4183a;
--seat-portrait-ring-width: 2px;
/* Uniform dark buttons; only Raise is colored. */
--btn-quiet-bg: #22262b;
--btn-quiet-ink: #e8ebee;
--btn-quiet-line: rgba(255, 255, 255, 0.1);
--btn-plain-bg: #2b3036;
--btn-plain-ink: #fff;
--btn-plain-line: rgba(255, 255, 255, 0.14);
--btn-radius: 14px;
--ui-bg: #121417;
--ui-accent: #e0193e;
--ui-accent-hover: #f0325a;
--ui-accent-ink: #fff;
--ui-ink: #f2f4f6;
--ui-ink-muted: rgba(242, 244, 246, 0.6);
--ui-line: rgba(255, 255, 255, 0.12);
--ui-line-strong: rgba(255, 255, 255, 0.28);
--ui-line-faint: rgba(255, 255, 255, 0.06);
--ui-fill: rgba(255, 255, 255, 0.06);
--ui-fill-strong: rgba(224, 25, 62, 0.16);
--ui-surface: #1d2126;
--ui-pot-ink: #fff;
--ui-key-ink: #f2f4f6;
--seat-live: #3dce6e;
--seat-acting: #2ec8d6;
--seat-plate: rgba(18, 20, 24, 0.96);
--seat-plate-muted: rgba(18, 20, 24, 0.7);
--seat-stack: #f6c445;
--seat-radius: 12px;
--card-back-bg: #b3122b;
--card-back-image: linear-gradient(158deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.22) 100%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 0 14%, rgba(255, 255, 255, 0) 15%),
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px),
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px);
--card-back-frame: #f7dfe3;
--card-back-edge: rgba(70, 10, 20, 0.6);
--table-chip: #d3121c;
--dealer-bg: #fff;
--dealer-ink: #121417;
--dealer-ring: #e0193e;
}
/* ---------- GGPoker: burgundy room, green felt, brass rim, white plates -- */
[data-skin="ggpoker"] {
/* Round portraits in a brass ring. */
--seat-portrait-radius: 9999px;
--seat-portrait-ring: #c9a85a;
--seat-portrait-ring-width: 2px;
/* Grey Fold, green Call, gold Raise. */
--btn-quiet-bg: #3a3d44;
--btn-quiet-ink: #e9e6df;
--btn-quiet-line: rgba(255, 255, 255, 0.08);
--btn-plain-bg: #2f9e5a;
--btn-plain-ink: #fff;
--btn-plain-line: rgba(255, 255, 255, 0.12);
--btn-radius: 12px;
--ui-bg: #17090c;
--ui-accent: #f0a63a;
--ui-accent-hover: #ffbb55;
--ui-accent-ink: #231200;
--ui-ink: #f7f1e6;
--ui-ink-muted: rgba(247, 241, 230, 0.6);
--ui-line: rgba(240, 166, 58, 0.3);
--ui-line-strong: rgba(240, 166, 58, 0.6);
--ui-line-faint: rgba(240, 166, 58, 0.12);
--ui-fill: rgba(240, 166, 58, 0.08);
--ui-fill-strong: rgba(240, 166, 58, 0.18);
--ui-surface: #2a151a;
--ui-pot-ink: #ffe3a6;
--ui-key-ink: #f0a63a;
--seat-live: #c9a85a;
--seat-acting: #ffd166;
--seat-acting-track: rgba(255, 209, 102, 0.3);
--seat-acting-glow: 0 0 14px rgba(255, 209, 102, 0.55);
--seat-muted: rgba(201, 168, 90, 0.35);
--seat-plate: rgba(248, 246, 240, 0.97);
--seat-plate-muted: rgba(248, 246, 240, 0.55);
--seat-name: #1d1a16;
--seat-name-muted: rgba(29, 26, 22, 0.5);
--seat-stack: #1d1a16;
--seat-stack-muted: rgba(29, 26, 22, 0.45);
--seat-timer-ink: #1d1a16;
--seat-timer-bg: #ffd166;
--seat-radius: 14px;
--seat-border-width: 2px;
--card-back-bg: #141416;
--card-back-image: linear-gradient(158deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.3) 100%),
radial-gradient(circle at 50% 50%, rgba(226, 59, 59, 0.95) 0 13%, rgba(226, 59, 59, 0) 14%),
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px),
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px);
--card-back-frame: #e8e2d4;
--card-back-edge: rgba(0, 0, 0, 0.7);
--card-back-inner: rgba(226, 59, 59, 0.6);
--table-chip: #c9a85a;
--table-chip-ink: #fff;
--dealer-bg: #fff;
--dealer-ink: #1d1a16;
--dealer-ring: #c9a85a;
}
/* ---------- ACR: black client, slate felt, orange-red accent ------------- */
[data-skin="acr"] {
/* Rounded-square portraits. */
--seat-portrait-radius: 12px;
--seat-portrait-ring: #3a3f47;
--seat-portrait-ring-width: 2px;
/* Red Fold, green Call, orange Raise. */
--btn-quiet-bg: #5a1a1f;
--btn-quiet-ink: #ffd9dc;
--btn-quiet-line: rgba(255, 90, 90, 0.25);
--btn-plain-bg: #1f7a45;
--btn-plain-ink: #fff;
--btn-plain-line: rgba(255, 255, 255, 0.12);
--btn-radius: 8px;
--ui-bg: #0c0d10;
--ui-accent: #ff5a1f;
--ui-accent-hover: #ff7442;
--ui-accent-ink: #fff;
--ui-ink: #eef0f3;
--ui-ink-muted: rgba(238, 240, 243, 0.6);
--ui-line: rgba(255, 255, 255, 0.12);
--ui-line-strong: rgba(255, 90, 31, 0.55);
--ui-line-faint: rgba(255, 255, 255, 0.06);
--ui-fill: rgba(255, 255, 255, 0.05);
--ui-fill-strong: rgba(255, 90, 31, 0.18);
--ui-surface: #15171b;
--ui-pot-ink: #fff;
--ui-key-ink: #ff5a1f;
--seat-live: #5b6470;
--seat-acting: #ff5a1f;
--seat-acting-track: rgba(255, 90, 31, 0.3);
--seat-acting-glow: 0 0 14px rgba(255, 90, 31, 0.55);
--seat-muted: #353a42;
--seat-plate: rgba(16, 18, 22, 0.96);
--seat-plate-muted: rgba(16, 18, 22, 0.7);
--seat-stack: #ffffff;
--seat-stack-muted: rgba(255, 255, 255, 0.4);
--seat-timer-ink: #ff5a1f;
--seat-timer-bg: #0c0d10;
--seat-radius: 8px;
--card-back-bg: #b8252c;
--card-back-image: linear-gradient(158deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.25) 100%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28) 0 14%, rgba(255, 255, 255, 0) 15%),
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 4px);
--card-back-frame: #f3e9e9;
--card-back-edge: rgba(60, 10, 12, 0.6);
--table-chip: #ff5a1f;
--dealer-bg: #fff;
--dealer-ink: #0c0d10;
--dealer-ring: #ff5a1f;
}
/* ---------- Ignition: charcoal client, grey felt, orange racetrack ------- */
[data-skin="ignition"] {
/* Round portraits in a quiet grey ring. */
--seat-portrait-radius: 9999px;
--seat-portrait-ring: #3a3c41;
--seat-portrait-ring-width: 2px;
/* Grey Fold and Call, orange Raise. */
--btn-quiet-bg: #2e2f33;
--btn-quiet-ink: #e6e6e3;
--btn-quiet-line: rgba(255, 255, 255, 0.08);
--btn-plain-bg: #3b3c41;
--btn-plain-ink: #fff;
--btn-plain-line: rgba(255, 255, 255, 0.12);
--btn-radius: 10px;
--ui-bg: #1a1a1c;
--ui-accent: #f5841f;
--ui-accent-hover: #ff9a3d;
--ui-accent-ink: #1a0c00;
--ui-ink: #f3f3f1;
--ui-ink-muted: rgba(243, 243, 241, 0.6);
--ui-line: rgba(255, 255, 255, 0.12);
--ui-line-strong: rgba(245, 132, 31, 0.55);
--ui-line-faint: rgba(255, 255, 255, 0.06);
--ui-fill: rgba(255, 255, 255, 0.06);
--ui-fill-strong: rgba(245, 132, 31, 0.18);
--ui-surface: #242427;
--ui-pot-ink: #fff;
--ui-key-ink: #f5841f;
--seat-live: #6b6f76;
--seat-acting: #f5841f;
--seat-acting-track: rgba(245, 132, 31, 0.3);
--seat-acting-glow: 0 0 14px rgba(245, 132, 31, 0.55);
--seat-muted: #3a3c41;
--seat-plate: rgba(17, 17, 19, 0.96);
--seat-plate-muted: rgba(17, 17, 19, 0.7);
--seat-stack: #f5c04a;
--seat-timer-ink: #f5841f;
--seat-timer-bg: #1a1a1c;
--seat-radius: 10px;
--card-back-bg: #2a2b30;
--card-back-image: linear-gradient(158deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.3) 100%),
radial-gradient(circle at 50% 50%, rgba(245, 132, 31, 0.9) 0 13%, rgba(245, 132, 31, 0) 14%),
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px);
--card-back-frame: #f5841f;
--card-back-edge: rgba(0, 0, 0, 0.7);
--card-back-inner: rgba(245, 132, 31, 0.5);
--table-chip: #f5841f;
--table-chip-ink: #fff;
--dealer-bg: #f5841f;
--dealer-ink: #1a0c00;
--dealer-ring: #fff;
}
/* ---------- Halloween: midnight purple felt, pumpkin orange ------------- */
[data-skin="halloween"] {
--ui-bg: #0a0410;
--ui-accent: #ff7a18;
--ui-accent-hover: #ff9440;
--ui-accent-ink: #1a0800;
--ui-accent-glow: 0 0 14px rgba(255, 122, 24, 0.45), 0 0 36px rgba(255, 122, 24, 0.15);
--ui-accent-glow-hover: 0 0 18px rgba(255, 122, 24, 0.6), 0 0 44px rgba(255, 122, 24, 0.22);
--ui-glow: 0 0 10px rgba(255, 122, 24, 0.4);
--ui-ink: #f6ecff;
--ui-ink-muted: rgba(246, 236, 255, 0.6);
--ui-line: rgba(255, 122, 24, 0.3);
--ui-line-strong: rgba(255, 122, 24, 0.6);
--ui-line-faint: rgba(255, 122, 24, 0.12);
--ui-fill: rgba(140, 80, 200, 0.14);
--ui-fill-strong: rgba(255, 122, 24, 0.18);
--ui-surface: #190b26;
--ui-pot-ink: #ffb46b;
--ui-key-ink: #ff7a18;
--seat-live: #7a4cae;
--seat-acting: #ff7a18;
--seat-acting-track: rgba(255, 122, 24, 0.3);
--seat-acting-glow: 0 0 14px rgba(255, 122, 24, 0.6), 0 0 30px rgba(255, 122, 24, 0.2);
--seat-muted: rgba(122, 76, 174, 0.35);
--seat-sitout: #b6ff3b;
--seat-plate: rgba(10, 4, 16, 0.94);
--seat-plate-muted: rgba(10, 4, 16, 0.65);
--seat-name: #f6ecff;
--seat-name-muted: rgba(246, 236, 255, 0.4);
--seat-stack: #ff9a3d;
--seat-stack-muted: rgba(255, 154, 61, 0.4);
--seat-timer-ink: #ff7a18;
--seat-timer-bg: #0a0410;
--seat-winner-glow: rgba(255, 122, 24, 0.75);
--seat-portrait-radius: 9999px;
--seat-portrait-ring: #ff7a18;
--seat-portrait-ring-width: 2px;
--seat-radius: 12px;
--card-back-bg: #140821;
--card-back-image: linear-gradient(158deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.3) 100%),
radial-gradient(circle at 50% 50%, rgba(255, 122, 24, 0.95) 0 13%, rgba(255, 122, 24, 0) 14%),
repeating-linear-gradient(45deg, rgba(190, 120, 255, 0.12) 0 1px, transparent 1px 4px),
repeating-linear-gradient(-45deg, rgba(190, 120, 255, 0.12) 0 1px, transparent 1px 4px);
--card-back-frame: #ff7a18;
--card-back-edge: rgba(0, 0, 0, 0.7);
--card-back-inner: rgba(255, 122, 24, 0.5);
--table-chip: #ff7a18;
--table-chip-ink: #fff;
--dealer-bg: #ff7a18;
--dealer-ink: #1a0800;
--dealer-ring: #f6ecff;
--slot-border: rgba(255, 122, 24, 0.25);
--slot-bg: rgba(0, 0, 0, 0.3);
--btn-quiet-bg: #1b0d2a;
--btn-quiet-ink: rgba(246, 236, 255, 0.7);
--btn-quiet-line: rgba(122, 76, 174, 0.35);
--btn-plain-bg: #4a2a78;
--btn-plain-ink: #fff;
--btn-plain-line: rgba(190, 120, 255, 0.3);
--btn-radius: 12px;
}
/* ---------- pokerdata: charcoal felt, white hairlines, no colour ---------- */
[data-skin="pokerdata"] {
--ui-bg: #0a0a0a;
--ui-accent: #fafafa;
--ui-accent-hover: #ffffff;
--ui-accent-ink: #0a0a0a;
--ui-ink: #fafafa;
--ui-ink-muted: rgba(250, 250, 250, 0.6);
--ui-line: rgba(255, 255, 255, 0.1);
--ui-line-strong: rgba(255, 255, 255, 0.4);
--ui-line-faint: rgba(255, 255, 255, 0.06);
--ui-fill: rgba(255, 255, 255, 0.06);
--ui-fill-strong: rgba(255, 255, 255, 0.14);
--ui-surface: #171717;
--ui-pot-ink: #fafafa;
--ui-key-ink: #fafafa;
--btn-quiet-bg: #171717;
--btn-quiet-ink: #fafafa;
--btn-quiet-line: rgba(255, 255, 255, 0.1);
--btn-plain-bg: #262626;
--btn-plain-ink: #fafafa;
--btn-plain-line: rgba(255, 255, 255, 0.14);
--btn-radius: 6px;
--seat-live: rgba(255, 255, 255, 0.45);
--seat-acting: #fafafa;
--seat-acting-track: rgba(255, 255, 255, 0.25);
--seat-acting-glow: 0 0 12px rgba(255, 255, 255, 0.35);
--seat-muted: rgba(255, 255, 255, 0.14);
--seat-plate: rgba(10, 10, 10, 0.94);
--seat-plate-muted: rgba(10, 10, 10, 0.6);
--seat-stack: #fafafa;
--seat-timer-ink: #fafafa;
--seat-timer-bg: #0a0a0a;
--seat-radius: 6px;
--seat-border-width: 1px;
--card-back-bg: #262626;
--card-back-image: linear-gradient(158deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.25) 100%),
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
--card-back-frame: rgba(255, 255, 255, 0.35);
--card-back-edge: rgba(0, 0, 0, 0.7);
--card-back-inner: rgba(255, 255, 255, 0.12);
--table-chip: #fafafa;
--table-chip-ink: #fafafa;
--dealer-bg: #fafafa;
--dealer-ink: #0a0a0a;
--dealer-ring: #0a0a0a;
}
/* ======================= shared hook rules ============================== */
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) {
background: var(--ui-bg);
color-scheme: dark;
}
/* Seat plates */
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-seat-plate] {
border-radius: var(--seat-radius, 12px);
border-width: var(--seat-border-width, 2px);
backdrop-filter: blur(4px);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-seat-stack] {
font-family: var(--ui-font, inherit);
text-shadow: var(--seat-stack-shadow, none);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-seat-name] {
font-family: var(--ui-font, inherit);
}
[data-skin="matrix"] [data-seat-plate][data-acting] [data-seat-stack] {
text-shadow: 0 0 10px rgba(0, 255, 65, 0.8);
}
[data-skin="matrix"] [data-seat-name] {
font-weight: 500;
letter-spacing: 0.02em;
}
/* Action tags on the plate. Matrix outlines them; the site skins keep the pills. */
[data-skin="matrix"] [data-action-tag] {
background: #000 !important;
border: 1px solid currentColor;
font-family: var(--font-mono);
letter-spacing: 0.08em;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}
[data-skin="matrix"] [data-action-tag="fold"] {
color: rgba(216, 255, 226, 0.45) !important;
}
[data-skin="matrix"] [data-action-tag="check"] {
color: #7ad7ff !important;
}
[data-skin="matrix"] [data-action-tag="call"] {
color: #00ff41 !important;
}
[data-skin="matrix"] [data-action-tag="bet"] {
color: #ffb13b !important;
}
/* Pot pill */
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-pot-pill] {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-line-strong);
color: var(--ui-pot-ink) !important;
font-family: var(--ui-font, inherit);
font-weight: 600;
letter-spacing: var(--ui-tracking, 0.02em);
text-transform: uppercase;
box-shadow: var(--ui-glow, none), 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}
/* Board slots */
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) .border-dashed {
border-color: var(--slot-border, rgba(255, 255, 255, 0.15)) !important;
background: var(--slot-bg, rgba(0, 0, 0, 0.2)) !important;
}
/* Header: hand strip and session accuracy. */
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-strip-chip] {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-line);
color: var(--ui-ink) !important;
font-family: var(--ui-font, inherit);
font-weight: 500;
opacity: 1 !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-strip-chip="fold"] {
border-color: var(--ui-line-faint);
color: var(--ui-ink-muted) !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-strip-chip="take-action"] {
border-color: var(--ui-accent);
color: var(--ui-accent) !important;
box-shadow: var(--ui-glow, none);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-pos-chip] {
background: var(--ui-fill-strong) !important;
color: var(--ui-accent) !important;
font-family: var(--ui-font, inherit);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-pos-chip="muted"] {
background: var(--ui-fill) !important;
color: var(--ui-ink-muted) !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-accuracy] > span:first-child {
color: var(--ui-ink-muted) !important;
font-family: var(--ui-font, inherit);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-accuracy] > span:last-child {
color: var(--ui-accent) !important;
text-shadow: var(--ui-glow, none);
}
/* RNG number in the corner. */
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-rng] [role="status"] > span:first-child {
color: var(--ui-accent) !important;
text-shadow: var(--ui-glow, none);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-rng] [role="status"] > span:last-child {
color: var(--ui-ink-muted) !important;
}
/* Action bar: Fold quiet, Check/Call plain, Raise in the accent. */
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-action-button] {
border-radius: var(--btn-radius, 10px) !important;
border-width: 1px;
font-family: var(--ui-font, inherit);
transition:
background-color 0.15s ease,
box-shadow 0.15s ease,
border-color 0.15s ease;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-action-button="quiet"] {
background: var(--btn-quiet-bg, var(--ui-surface)) !important;
border-color: var(--btn-quiet-line, var(--ui-line-faint)) !important;
color: var(--btn-quiet-ink, var(--ui-ink-muted)) !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-action-button="quiet"]:hover:not(:disabled) {
border-color: var(--ui-line) !important;
color: var(--ui-ink) !important;
filter: brightness(1.12);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-action-button="plain"] {
background: var(--btn-plain-bg, var(--ui-fill)) !important;
border-color: var(--btn-plain-line, var(--ui-line)) !important;
color: var(--btn-plain-ink, var(--ui-ink)) !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-action-button="plain"]:hover:not(:disabled) {
border-color: var(--ui-line-strong) !important;
filter: brightness(1.12);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-action-button="strong"] {
background: var(--ui-accent) !important;
border-color: var(--ui-accent) !important;
color: var(--ui-accent-ink) !important;
box-shadow: var(--ui-accent-glow, 0 4px 14px rgba(0, 0, 0, 0.35));
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-action-button="strong"]:hover:not(:disabled) {
background: var(--ui-accent-hover) !important;
box-shadow: var(--ui-accent-glow-hover, 0 6px 18px rgba(0, 0, 0, 0.4));
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-action-button] kbd {
border-color: currentColor;
opacity: 0.6;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-empty-cell] {
border-color: var(--ui-line-faint) !important;
background: transparent !important;
border-radius: var(--btn-radius, 10px);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-size-chip] {
border-color: var(--ui-line) !important;
color: var(--ui-ink-muted) !important;
font-family: var(--ui-font, inherit);
background: var(--ui-surface) !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-size-chip]:hover:not(:disabled) {
border-color: var(--ui-line-strong) !important;
color: var(--ui-ink) !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-size-chip][aria-pressed="true"] {
border-color: var(--ui-accent) !important;
background: var(--ui-fill-strong) !important;
color: var(--ui-accent) !important;
}
/* Session dock: outlined tiles, the primary one in the accent. */
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-rail-tile] {
border: 1px solid var(--ui-line);
background: var(--ui-surface) !important;
color: var(--ui-ink) !important;
border-radius: 12px !important;
backdrop-filter: blur(6px);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-rail-tile]:hover {
background: var(--ui-fill-strong) !important;
border-color: var(--ui-line-strong);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-rail-tile="current"] {
background: var(--ui-fill-strong) !important;
border-color: var(--ui-accent);
color: var(--ui-accent) !important;
box-shadow: var(--ui-glow, none);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-rail-tile="primary"] {
background: var(--ui-accent) !important;
border-color: var(--ui-accent);
color: var(--ui-accent-ink) !important;
box-shadow: var(--ui-accent-glow, 0 4px 14px rgba(0, 0, 0, 0.35));
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-rail-key] {
background: var(--ui-bg) !important;
border-color: var(--ui-line-strong) !important;
color: var(--ui-key-ink) !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-mobile-dock] {
background: var(--ui-surface) !important;
border-color: var(--ui-line) !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) button[aria-label="Keyboard shortcuts"] {
color: var(--ui-ink-muted);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) button[aria-label="Keyboard shortcuts"]:hover {
background: var(--ui-fill-strong);
color: var(--ui-accent);
}
/* Lobby */
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-lobby] h1 {
font-family: var(--ui-font, inherit);
color: var(--ui-accent);
text-shadow: var(--ui-glow, none);
}
[data-skin="matrix"] [data-lobby] h1 {
letter-spacing: 0.04em;
}
[data-skin="matrix"] [data-lobby] h1::before {
content: "> ";
opacity: 0.6;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-lobby] [role="tablist"] {
border-color: var(--ui-line) !important;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-lobby] [role="tab"] {
font-family: var(--ui-font, inherit);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-lobby] [role="tab"][aria-selected="true"] {
border-color: var(--ui-accent) !important;
color: var(--ui-accent) !important;
text-shadow: var(--ui-glow, none);
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-lobby-art] {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-line);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-lobby] button:not(:disabled):hover [data-lobby-art] {
border-color: var(--ui-accent);
box-shadow: var(--ui-accent-glow, 0 8px 24px rgba(0, 0, 0, 0.45));
}
:is([data-skin="matrix"], [data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-lobby-felt] {
border-color: var(--ui-line-strong) !important;
}
[data-skin="matrix"] [data-lobby-felt] {
box-shadow:
0 0 16px rgba(0, 255, 65, 0.18),
inset 0 0 24px rgba(0, 255, 65, 0.08);
}
[data-skin="matrix"] [data-lobby-card] {
background-color: #020a04 !important;
border-color: rgba(0, 255, 65, 0.55) !important;
background-image: repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.18) 0 1px, transparent 1px 4px) !important;
}
:is([data-skin="coinpoker"], [data-skin="ggpoker"], [data-skin="acr"], [data-skin="ignition"], [data-skin="halloween"], [data-skin="pokerdata"]) [data-lobby-card] {
background-color: var(--card-back-bg) !important;
border-color: var(--card-back-frame) !important;
}
/*
* Phone table (the table container under 32rem, where the shared layout
* switches to the portrait oval). The oval fills the space between the
* header and the action bar instead of keeping a fixed 3:4 shape: taller on
* a tall phone (down to a 0.55 width-to-height ratio), rounder when the
* browser's toolbars leave less height, so the seats spread over the whole
* stage instead of crowding into a small oval. `anchorsFor` places the seats
* for the shape it measures. The hero's cards sit clear of their nameplate,
* and an action tag gets its own strip on top of the plate instead of
* covering the name.
*/
@container (width < 32rem) {
[data-skin="matrix"] [data-table-oval] {
aspect-ratio: auto;
width: 100%;
max-width: none;
height: min(100%, calc(100cqw / 0.55));
}
[data-skin="matrix"] [data-seat-hand="hero"] {
margin-bottom: 0.25rem;
}
[data-skin="matrix"] [data-seat-hand="hero"] .coin-hole-card {
font-size: 12px;
}
[data-skin="matrix"] [data-seat-plate]:has([data-action-tag]) {
padding-top: 0.6rem;
}
}
/* The frame around the phone oval leaves less room above and below: the top
seat and the hero's plate still clear the header and the action bar. */
@media (width < 32rem) {
[data-skin="matrix"] :has(> [data-table-oval]) {
padding-block: 1.75rem;
}
}