/* THE FELT - 11-style.css Cosmetics: avatars on the table, table felts, card faces and backs, app backgrounds, and the Customize sheet that picks them. 31-style.js drives it; 00-avatars.js draws the characters. HOW A LOOK IS APPLIED. Each choice is one class on - st-felt-X, st-deck-X, st-back-X, st-bg-X - and the DEFAULT of every group is no class at all. That matters: the default look is whatever the base sheets (01-base, 02-table, 06-v4) draw, so this file can never drift out of step with them when they change. Only a non-default choice adds rules. HOW THE PREVIEWS STAY HONEST. The Customize sheet shows every option side by side, inside the same body that already carries the current choice - so a thumbnail of the classic green felt would otherwise inherit, say, the neon felt from . Every body-level rule therefore excludes anything inside a matching isolation box (.st-iso-felt / -deck / -back), and the box carries its own st-felt-X class instead. A default thumbnail is an isolation box with no class, so it shows the base sheets' look. The boxes are per group on purpose: a felt thumbnail still deals the cards in your chosen deck. The action code is not touched anywhere in here. No rule below sets --fold, --call, --raise or --gold, and styleSelfTest() checks that. */ /* ================= AVATARS ON THE TABLE ================= renderTable's hook puts a .fav circle inside the pod's .avatar box. The box keeps its size (the fit layout owns geometry); it just stops painting its own disc so the character's circle is the whole avatar. */ .seat .avatar:has(>.fav){background:none;border:0;padding:0;box-shadow:none;overflow:visible;} .seat .avatar>.fav{width:100%!important;height:100%!important; box-shadow:0 2px 6px -1px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.35);} /* you are still the one violet thing on the table: a ring, not a fill */ .seat.hero .avatar>.fav{box-shadow:0 0 0 1.5px var(--accent-hi),0 2px 10px -2px var(--accent-glow);} .seat.folded .avatar>.fav{filter:saturate(.35);} .profbtn .fav,.pm-row .fav{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 rgba(0,0,0,.4);} .pm-row .fav{width:30px!important;height:30px!important;} /* the menu's way in: three dots of the things it changes - felt, chrome, gold */ .pm-act.pm-style{display:flex;align-items:center;gap:10px;color:var(--text);} .pm-ic{position:relative;width:22px;height:16px;flex:none;} .pm-ic i{position:absolute;top:1px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.5);} .pm-ic i:nth-child(1){left:0;background:radial-gradient(circle at 35% 30%,#3A8C9E,#123447);} .pm-ic i:nth-child(2){left:4px;background:var(--g-accent);} .pm-ic i:nth-child(3){left:8px;background:radial-gradient(circle at 35% 30%,#F6D391,#C8902E);} /* ================= TABLE FELTS ================= Each felt is one complete set of variables, set on the table element itself (and the lobby's little room tables), consumed by one shared set of rules below. A set has: the four cloth stops, the rail's gradient and its three stacked edge colours, the specular sheen, an optional printed pattern, the betting line and the stencilled "THE FELT" mark. */ body.st-felt-teal :is(.ptable,.mini-felt):not(.st-iso-felt *),.st-iso-felt.st-felt-teal :is(.ptable,.mini-felt){ --felt-1:#20514C;--felt-2:#153A3B;--felt-3:#0C2126;--felt-edge:#081619; --rail-1:#333944;--rail-2:#191D24;--rail-3:#232830;--fx-rail4:#2B313B; --fx-e1:#2F343E;--fx-e2:#22262E;--fx-e3:#15181D;--fx-rail-pat:none;--fx-rail-extra:0 0 0 transparent; --fx-sheen:rgba(120,220,200,.10);--fx-pat:none; --fx-line:rgba(214,236,230,.07);--fx-line-glow:inset 0 0 26px rgba(0,0,0,.18); --fx-mark:rgba(198,224,218,.11);--fx-mark-glow:0 1px 0 rgba(0,0,0,.45);} body.st-felt-green :is(.ptable,.mini-felt):not(.st-iso-felt *),.st-iso-felt.st-felt-green :is(.ptable,.mini-felt){ --felt-1:#2B7D4B;--felt-2:#1C5C36;--felt-3:#0F3A22;--felt-edge:#07210F; --rail-1:#3A3330;--rail-2:#141110;--rail-3:#221D1B;--fx-rail4:#2C2623; --fx-e1:#2E2825;--fx-e2:#211C1A;--fx-e3:#141110;--fx-rail-pat:none;--fx-rail-extra:0 0 0 transparent; --fx-sheen:rgba(170,240,180,.11);--fx-pat:none; --fx-line:rgba(225,245,225,.09);--fx-line-glow:inset 0 0 26px rgba(0,0,0,.18); --fx-mark:rgba(220,245,225,.13);--fx-mark-glow:0 1px 0 rgba(0,0,0,.45);} /* royal blue with a gold line: the one felt that is meant to look expensive */ body.st-felt-royal :is(.ptable,.mini-felt):not(.st-iso-felt *),.st-iso-felt.st-felt-royal :is(.ptable,.mini-felt){ --felt-1:#2D5CAD;--felt-2:#1D3F80;--felt-3:#102650;--felt-edge:#081633; --rail-1:#2F3345;--rail-2:#121420;--rail-3:#1C1F2D;--fx-rail4:#242838; --fx-e1:#262A3A;--fx-e2:#1B1E2B;--fx-e3:#10121B;--fx-rail-pat:none;--fx-rail-extra:0 0 0 transparent; --fx-sheen:rgba(160,200,255,.12); --fx-pat:repeating-linear-gradient(45deg,rgba(255,255,255,.024) 0 1px,transparent 1px 16px),repeating-linear-gradient(-45deg,rgba(255,255,255,.024) 0 1px,transparent 1px 16px); --fx-line:rgba(232,180,76,.30);--fx-line-glow:0 0 14px rgba(232,180,76,.10),inset 0 0 26px rgba(0,0,0,.2); --fx-mark:rgba(246,211,145,.2);--fx-mark-glow:0 1px 0 rgba(0,0,0,.5);} body.st-felt-burgundy :is(.ptable,.mini-felt):not(.st-iso-felt *),.st-iso-felt.st-felt-burgundy :is(.ptable,.mini-felt){ --felt-1:#8A2A40;--felt-2:#601B2D;--felt-3:#3A0F1A;--felt-edge:#22070F; --rail-1:#3A2C2D;--rail-2:#151011;--rail-3:#231A1B;--fx-rail4:#2D2223; --fx-e1:#2E2324;--fx-e2:#211919;--fx-e3:#140F10;--fx-rail-pat:none;--fx-rail-extra:0 0 0 transparent; --fx-sheen:rgba(255,180,190,.10);--fx-pat:none; --fx-line:rgba(232,180,76,.24);--fx-line-glow:inset 0 0 26px rgba(0,0,0,.2); --fx-mark:rgba(255,222,200,.14);--fx-mark-glow:0 1px 0 rgba(0,0,0,.5);} /* black and gold, with a fine twill so the cloth still reads as cloth */ body.st-felt-onyx :is(.ptable,.mini-felt):not(.st-iso-felt *),.st-iso-felt.st-felt-onyx :is(.ptable,.mini-felt){ --felt-1:#383A44;--felt-2:#24262D;--felt-3:#15161B;--felt-edge:#0A0A0D; --rail-1:#303038;--rail-2:#0D0D10;--rail-3:#19191E;--fx-rail4:#222228; --fx-e1:#222227;--fx-e2:#17171B;--fx-e3:#0C0C0F;--fx-rail-pat:none;--fx-rail-extra:0 0 0 transparent; --fx-sheen:rgba(255,255,255,.07); --fx-pat:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,transparent 2px 5px); --fx-line:rgba(232,180,76,.36);--fx-line-glow:0 0 16px rgba(232,180,76,.12),inset 0 0 26px rgba(0,0,0,.25); --fx-mark:rgba(246,211,145,.24);--fx-mark-glow:0 1px 0 rgba(0,0,0,.6);} /* the one felt allowed to glow: a synth grid, a cyan line and a magenta rail */ body.st-felt-neon :is(.ptable,.mini-felt):not(.st-iso-felt *),.st-iso-felt.st-felt-neon :is(.ptable,.mini-felt){ --felt-1:#2C1B63;--felt-2:#1C1245;--felt-3:#100A2A;--felt-edge:#080418; --rail-1:#221F33;--rail-2:#0A0912;--rail-3:#14121F;--fx-rail4:#18162A; --fx-e1:#2A1E4A;--fx-e2:#1D1636;--fx-e3:#110D22;--fx-rail-pat:none; --fx-rail-extra:0 0 0 1.5px rgba(255,79,216,.8),0 0 24px -2px rgba(255,79,216,.55); --fx-sheen:rgba(62,231,255,.09); --fx-pat:repeating-linear-gradient(0deg,rgba(62,231,255,.075) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(62,231,255,.075) 0 1px,transparent 1px 26px); --fx-line:rgba(62,231,255,.72);--fx-line-glow:0 0 12px rgba(62,231,255,.45),inset 0 0 12px rgba(62,231,255,.25); --fx-mark:rgba(255,150,236,.62);--fx-mark-glow:0 0 10px rgba(255,79,216,.8),0 0 2px rgba(255,79,216,.9);} /* bent walnut: the rings are a repeating radial sized to the rail's own shape, so the grain follows the curve instead of running straight across it the way a flat wood texture would */ body.st-felt-walnut :is(.ptable,.mini-felt):not(.st-iso-felt *),.st-iso-felt.st-felt-walnut :is(.ptable,.mini-felt){ --felt-1:#1F5F4C;--felt-2:#144334;--felt-3:#0B271E;--felt-edge:#061510; --rail-1:#A86C3A;--rail-2:#4E2A14;--rail-3:#7E4A26;--fx-rail4:#6A3B1E; --fx-e1:#5A3219;--fx-e2:#43240F;--fx-e3:#2C1709; --fx-rail-pat:repeating-radial-gradient(farthest-side at 50% 50%,rgba(60,28,10,0) 0 1.1%,rgba(60,28,10,.3) 1.45% 1.75%,rgba(255,215,170,.07) 2.1% 2.5%),repeating-linear-gradient(88deg,rgba(255,220,180,.035) 0 1px,rgba(0,0,0,.05) 1px 4px); --fx-rail-extra:0 0 0 transparent; --fx-sheen:rgba(170,240,200,.09);--fx-pat:none; --fx-line:rgba(232,190,110,.22);--fx-line-glow:inset 0 0 26px rgba(0,0,0,.2); --fx-mark:rgba(240,214,170,.15);--fx-mark-glow:0 1px 0 rgba(0,0,0,.5);} /* the shared consumers - only for a non-default felt */ body[class*="st-felt-"] .ptable:not(.st-iso-felt *) .rail,.st-iso-felt[class*="st-felt-"] .ptable .rail{ background:var(--fx-rail-pat),linear-gradient(178deg,var(--rail-1) 0%,var(--rail-3) 24%,var(--rail-2) 66%,var(--fx-rail4) 100%); box-shadow:var(--fx-rail-extra),0 2px 0 var(--fx-e1),0 5px 0 var(--fx-e2),0 9px 0 var(--fx-e3), 0 22px 40px -8px rgba(0,0,0,.85),inset 0 2px 0 rgba(255,255,255,.13),inset 0 -6px 14px rgba(0,0,0,.55);} body[class*="st-felt-"] .ptable:not(.st-iso-felt *) .felt,.st-iso-felt[class*="st-felt-"] .ptable .felt{ background:var(--fx-pat), radial-gradient(70% 60% at 50% 38%,var(--fx-sheen),transparent 70%), radial-gradient(ellipse at 50% 45%,var(--felt-1) 0%,var(--felt-2) 58%,var(--felt-3) 90%,var(--felt-edge) 100%);} body[class*="st-felt-"] .ptable:not(.st-iso-felt *) .betline,.st-iso-felt[class*="st-felt-"] .ptable .betline{ border-color:var(--fx-line);box-shadow:var(--fx-line-glow);} body[class*="st-felt-"] .ptable:not(.st-iso-felt *) .feltmark,.st-iso-felt[class*="st-felt-"] .ptable .feltmark{ color:var(--fx-mark);text-shadow:var(--fx-mark-glow);} body.st-felt-walnut .ptable:not(.st-iso-felt *) .rail::after,.st-iso-felt.st-felt-walnut .ptable .rail::after{ background:radial-gradient(120% 62% at 50% -8%,rgba(255,236,210,.26) 0%,rgba(255,236,210,0) 62%);} body.st-felt-neon .ptable:not(.st-iso-felt *) .potline,.st-iso-felt.st-felt-neon .ptable .potline{ border-color:rgba(232,180,76,.45);box-shadow:0 0 12px -2px rgba(232,180,76,.35),inset 0 1px 0 rgba(255,255,255,.06);} /* ================= CARD FACES ================= Four-colour is the default and has no class. Two-colour is the deck on a casino table. Jumbo blows the index up to about half the card's height - it is sized in container units, so one rule fits every card size the app uses (board, hole cards, the tiny ones in the hand log) without having to out-shout each of their pixel sizes one by one. Solid is the modern one: the suit colour is the card. */ body.st-deck-2c :is(.pcard.cd,.pk.cd,.suitpad .su-d):not(.st-iso-deck *),.st-iso-deck.st-deck-2c :is(.pcard.cd,.pk.cd){color:#D0343A;} body.st-deck-2c :is(.pcard.cc,.pk.cc,.suitpad .su-c):not(.st-iso-deck *),.st-iso-deck.st-deck-2c :is(.pcard.cc,.pk.cc){color:#1D222A;} body.st-deck-jumbo .pcard:not(.back):not(.st-iso-deck *),.st-iso-deck.st-deck-jumbo .pcard:not(.back){container-type:size;} body.st-deck-jumbo .pcard:not(.st-iso-deck *) .r,.st-iso-deck.st-deck-jumbo .pcard .r{ font-size:56cqh!important;font-weight:800;line-height:.88;letter-spacing:-.06em;} body.st-deck-jumbo .pcard:not(.st-iso-deck *) .s,.st-iso-deck.st-deck-jumbo .pcard .s{ font-size:34cqh!important;line-height:.9;} body.st-deck-solid .pcard:not(.back):not(.st-iso-deck *),.st-iso-deck.st-deck-solid .pcard:not(.back){ color:#fff;border-color:rgba(0,0,0,.5);text-shadow:0 1px 1px rgba(0,0,0,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 6px rgba(0,0,0,.18),0 1px 1px rgba(0,0,0,.4),0 4px 10px -3px rgba(0,0,0,.6);} body.st-deck-solid .pcard.cs:not(.st-iso-deck *),.st-iso-deck.st-deck-solid .pcard.cs{background:linear-gradient(165deg,#4B5366 0%,#2C313E 55%,#1C2029 100%);} body.st-deck-solid .pcard.ch:not(.st-iso-deck *),.st-iso-deck.st-deck-solid .pcard.ch{background:linear-gradient(165deg,#F0636A 0%,#CF343B 55%,#A3222B 100%);} body.st-deck-solid .pcard.cd:not(.st-iso-deck *),.st-iso-deck.st-deck-solid .pcard.cd{background:linear-gradient(165deg,#5694EE 0%,#2C68C8 55%,#1C4B9A 100%);} body.st-deck-solid .pcard.cc:not(.st-iso-deck *),.st-iso-deck.st-deck-solid .pcard.cc{background:linear-gradient(165deg,#48C07D 0%,#248F50 55%,#176B3A 100%);} body.st-deck-solid .pcard:not(.st-iso-deck *) .r,.st-iso-deck.st-deck-solid .pcard .r{font-weight:800;} /* ================= CARD BACKS ================= */ body.st-back-ember .pcard.back:not(.st-iso-back *),.st-iso-back.st-back-ember .pcard.back{ background:linear-gradient(160deg,#FFB85C 0%,#F2693A 55%,#B8391F 100%);border-color:rgba(90,24,8,.7);} body.st-back-ember .pcard.back:not(.st-iso-back *)::after,.st-iso-back.st-back-ember .pcard.back::after{ border-color:rgba(255,242,222,.6); background:radial-gradient(circle at 50% 50%,rgba(255,244,214,.5) 0 12%,transparent 13%), repeating-radial-gradient(circle at 50% 50%,rgba(255,244,222,.2) 0 1px,transparent 1px 4px);} body.st-back-royal .pcard.back:not(.st-iso-back *),.st-iso-back.st-back-royal .pcard.back{ background:linear-gradient(165deg,#28428A 0%,#15245A 60%,#1C2E68 100%);border-color:rgba(6,10,30,.7);} body.st-back-royal .pcard.back:not(.st-iso-back *)::after,.st-iso-back.st-back-royal .pcard.back::after{ border-color:rgba(232,180,76,.62); background:repeating-linear-gradient(45deg,rgba(232,180,76,.24) 0 1px,transparent 1px 6px), repeating-linear-gradient(-45deg,rgba(232,180,76,.24) 0 1px,transparent 1px 6px);} /* the casino back: red, a fine lattice and a white margin */ body.st-back-crimson .pcard.back:not(.st-iso-back *),.st-iso-back.st-back-crimson .pcard.back{ background:linear-gradient(165deg,#CF3644 0%,#9C1F2D 60%,#B42736 100%);border-color:rgba(60,6,12,.7); box-shadow:inset 0 0 0 2.5px #F6F2EA,0 1px 1px rgba(0,0,0,.4),0 4px 10px -3px rgba(0,0,0,.6);} body.st-back-crimson .pcard.back:not(.st-iso-back *)::after,.st-iso-back.st-back-crimson .pcard.back::after{ inset:4px;border-color:rgba(255,255,255,.55); background:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 1px,transparent 1px 5px), repeating-linear-gradient(-45deg,rgba(255,255,255,.2) 0 1px,transparent 1px 5px);} body.st-back-carbon .pcard.back:not(.st-iso-back *),.st-iso-back.st-back-carbon .pcard.back{ background:linear-gradient(165deg,#2A2B31,#131418);border-color:rgba(0,0,0,.8);} body.st-back-carbon .pcard.back:not(.st-iso-back *)::after,.st-iso-back.st-back-carbon .pcard.back::after{ border-color:rgba(62,231,255,.5);box-shadow:0 0 6px rgba(62,231,255,.25); background:linear-gradient(45deg,#1C1D22 25%,transparent 25% 75%,#1C1D22 75%) 0 0/6px 6px, linear-gradient(45deg,#1C1D22 25%,transparent 25% 75%,#1C1D22 75%) 3px 3px/6px 6px, linear-gradient(180deg,#2E3036,#18191D);} /* foil: a conic spectrum under a fine line screen */ body.st-back-holo .pcard.back:not(.st-iso-back *),.st-iso-back.st-back-holo .pcard.back{ background:conic-gradient(from 210deg at 40% 45%,#8B5CFF,#3EE7FF,#7CF5B8,#FFE27A,#FF7AC8,#8B5CFF);border-color:rgba(40,20,80,.55);} body.st-back-holo .pcard.back:not(.st-iso-back *)::after,.st-iso-back.st-back-holo .pcard.back::after{ border-color:rgba(255,255,255,.7); background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%), repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 1px,transparent 1px 4px);} /* ================= BACKGROUNDS ================= A background is the ground, the panels on it and the lights behind it, so each one re-tones the whole surface ladder, not just body::before. The chrome stays the default violet except in Ember plum, which is the previous look restored whole. Text on every panel clears 4.5:1 - see styleSelfTest. The 80s horizon grid belongs to the default only. */ html:has(>body[class*="st-bg-"])::after{display:none;} body.st-bg-plum{ --bg:#0F0B0E;--bg2:#0A0709; --surface:#1A1419;--surface2:#211A20;--surface3:#2A2129;--surface4:#342932; --border:#2A2028;--border2:#3A2E37;--border3:#4B3C47; --hair:inset 0 1px 0 rgba(255,236,220,.06);--hair-strong:inset 0 1px 0 rgba(255,236,220,.11); --text:#F4ECE0;--text2:#C2B6A8;--text3:#978A7E;--text4:#5E534C; --accent:#8A63F7;--accent-hi:#C8B6FF;--accent-lo:#5F3FD2; --accent-dim:rgba(138,99,247,.15);--accent-line:rgba(200,182,255,.36);--accent-glow:rgba(138,99,247,.5);--info:#C8B6FF; --ember:#FF9A4D;--ember-2:#E8563A; --g-surface:linear-gradient(180deg,#221A21 0%,#171217 100%); --g-surface2:linear-gradient(180deg,#2B222A 0%,#1E181D 100%); --g-head:linear-gradient(180deg,rgba(255,236,220,.05) 0%,rgba(255,236,220,.012) 100%); --g-accent:linear-gradient(160deg,#A185FF 0%,#7A4FF0 55%,#9A46DE 100%); --g-well:linear-gradient(180deg,#0B080A 0%,#110D10 100%); --g-ember:linear-gradient(100deg,#FFC15A 0%,#FF8A45 45%,#E8563A 100%); --st-top:linear-gradient(180deg,rgba(22,16,21,.9) 0%,rgba(15,11,14,.82) 100%); --st-horizon:linear-gradient(90deg,transparent,rgba(255,154,77,.55) 20%,rgba(200,182,255,.45) 55%,rgba(138,99,247,.55) 80%,transparent);} body.st-bg-plum::before{background: radial-gradient(900px 560px at 8% -6%,rgba(232,110,58,.20),transparent 70%), radial-gradient(760px 520px at 94% 4%,rgba(138,99,247,.17),transparent 70%), radial-gradient(900px 640px at 70% 108%,rgba(32,110,100,.20),transparent 72%), radial-gradient(620px 420px at 18% 86%,rgba(160,70,160,.10),transparent 72%);} body.st-bg-ocean{ --bg:#06101A;--bg2:#040B12; --surface:#0D1A26;--surface2:#122232;--surface3:#182C3E;--surface4:#20384D; --border:#17293A;--border2:#22384D;--border3:#2E4862; --hair:inset 0 1px 0 rgba(210,235,255,.06);--hair-strong:inset 0 1px 0 rgba(210,235,255,.11); --text:#E6F0F7;--text2:#A9BFCF;--text3:#7F99AE;--text4:#4F6577; --g-surface:linear-gradient(180deg,#14222F 0%,#0C1721 100%); --g-surface2:linear-gradient(180deg,#1A2A3A 0%,#111E2A 100%); --g-head:linear-gradient(180deg,rgba(210,235,255,.05) 0%,rgba(210,235,255,.012) 100%); --g-well:linear-gradient(180deg,#03080D 0%,#071019 100%); --st-top:linear-gradient(180deg,rgba(10,24,36,.9) 0%,rgba(6,16,26,.82) 100%); --st-horizon:linear-gradient(90deg,transparent,rgba(62,200,255,.5) 25%,rgba(120,160,255,.45) 60%,transparent);} body.st-bg-ocean::before{background: radial-gradient(1000px 600px at 12% -10%,rgba(40,170,220,.22),transparent 70%), radial-gradient(800px 560px at 96% 6%,rgba(50,90,210,.20),transparent 70%), radial-gradient(1100px 700px at 50% 112%,rgba(20,150,150,.20),transparent 72%), radial-gradient(500px 360px at 80% 70%,rgba(90,200,255,.06),transparent 72%);} /* casino night: deep wine and gold light, never the bright raise red */ body.st-bg-casino{ --bg:#12070A;--bg2:#0C0406; --surface:#1E0E12;--surface2:#261318;--surface3:#301920;--surface4:#3C2029; --border:#2E161C;--border2:#402029;--border3:#552B37; --hair:inset 0 1px 0 rgba(255,225,190,.07);--hair-strong:inset 0 1px 0 rgba(255,225,190,.12); --text:#F7EBDD;--text2:#D2BBA8;--text3:#A58A78;--text4:#6A5448; --ember:#FFB54D;--ember-2:#E8563A; --g-surface:linear-gradient(180deg,#2A141A 0%,#1B0C10 100%); --g-surface2:linear-gradient(180deg,#341A21 0%,#241217 100%); --g-head:linear-gradient(180deg,rgba(255,225,190,.05) 0%,rgba(255,225,190,.012) 100%); --g-well:linear-gradient(180deg,#0B0406 0%,#12080B 100%); --g-ember:linear-gradient(100deg,#FFE08A 0%,#F2B64A 45%,#D4822E 100%); --st-top:linear-gradient(180deg,rgba(34,12,18,.9) 0%,rgba(20,7,10,.84) 100%); --st-horizon:linear-gradient(90deg,transparent,rgba(232,180,76,.6) 25%,rgba(255,224,150,.5) 50%,rgba(232,180,76,.6) 75%,transparent);} body.st-bg-casino::before{background: radial-gradient(1000px 520px at 50% -14%,rgba(232,180,76,.20),transparent 70%), radial-gradient(800px 600px at 0% 30%,rgba(150,24,56,.30),transparent 70%), radial-gradient(800px 600px at 100% 40%,rgba(120,20,48,.26),transparent 70%), radial-gradient(900px 500px at 50% 110%,rgba(255,150,60,.10),transparent 72%), repeating-linear-gradient(45deg,rgba(232,180,76,.022) 0 1px,transparent 1px 22px), repeating-linear-gradient(-45deg,rgba(232,180,76,.022) 0 1px,transparent 1px 22px);} body.st-bg-forest{ --bg:#08100C;--bg2:#050B08; --surface:#101C16;--surface2:#15241C;--surface3:#1C2E24;--surface4:#25392E; --border:#1A2A21;--border2:#25392D;--border3:#32493B; --hair:inset 0 1px 0 rgba(225,245,220,.06);--hair-strong:inset 0 1px 0 rgba(225,245,220,.11); --text:#EAF2E8;--text2:#B2C4B4;--text3:#86A08B;--text4:#56685A; --ember:#FFC061;--ember-2:#E08A3A; --g-surface:linear-gradient(180deg,#16251D 0%,#0E1813 100%); --g-surface2:linear-gradient(180deg,#1C2E24 0%,#132019 100%); --g-head:linear-gradient(180deg,rgba(225,245,220,.05) 0%,rgba(225,245,220,.012) 100%); --g-well:linear-gradient(180deg,#040906 0%,#08100B 100%); --g-ember:linear-gradient(100deg,#FFD27A 0%,#F2A64A 45%,#D97A36 100%); --st-top:linear-gradient(180deg,rgba(14,26,20,.9) 0%,rgba(8,16,12,.84) 100%); --st-horizon:linear-gradient(90deg,transparent,rgba(240,170,70,.5) 25%,rgba(140,210,150,.4) 60%,transparent);} body.st-bg-forest::before{background: radial-gradient(1000px 600px at 10% -10%,rgba(90,170,100,.18),transparent 70%), radial-gradient(700px 480px at 92% 8%,rgba(240,170,70,.12),transparent 70%), radial-gradient(1000px 680px at 60% 112%,rgba(30,120,100,.20),transparent 72%), radial-gradient(520px 380px at 20% 80%,rgba(200,220,120,.05),transparent 72%);} /* graphite: no hue at all in the ground, so the felt and the chrome carry every bit of colour on the screen */ body.st-bg-graphite{ --bg:#0C0D0F;--bg2:#08090A; --surface:#16171A;--surface2:#1C1D21;--surface3:#24262B;--surface4:#2E3036; --border:#232428;--border2:#303238;--border3:#3F4249; --hair:inset 0 1px 0 rgba(255,255,255,.055);--hair-strong:inset 0 1px 0 rgba(255,255,255,.1); --text:#EEEFF1;--text2:#B5B8BF;--text3:#8C9099;--text4:#5B5E66; --g-surface:linear-gradient(180deg,#1D1E22 0%,#141518 100%); --g-surface2:linear-gradient(180deg,#25262B 0%,#1A1B1F 100%); --g-head:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.01) 100%); --g-well:linear-gradient(180deg,#070809 0%,#0C0D0F 100%); --st-top:linear-gradient(180deg,rgba(22,23,26,.9) 0%,rgba(12,13,15,.84) 100%); --st-horizon:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 30%,rgba(255,255,255,.22) 70%,transparent);} body.st-bg-graphite::before{background: radial-gradient(1100px 600px at 50% -18%,rgba(255,255,255,.06),transparent 70%), radial-gradient(800px 560px at 100% 100%,rgba(140,150,170,.05),transparent 72%);} body.st-bg-graphite::after{opacity:.035;} /* aurora: ribbons of light that drift. The layer is oversized and moves by transform only, which the compositor does without repainting a pixel. */ body.st-bg-aurora{ --bg:#070A14;--bg2:#05070F; --surface:#111526;--surface2:#161B30;--surface3:#1D233B;--surface4:#262D49; --border:#1D2238;--border2:#293050;--border3:#363E63; --hair:inset 0 1px 0 rgba(210,225,255,.06);--hair-strong:inset 0 1px 0 rgba(210,225,255,.11); --text:#ECEFFA;--text2:#AEB5D2;--text3:#8189AD;--text4:#4F5577; --g-surface:linear-gradient(180deg,#171C31 0%,#0F1323 100%); --g-surface2:linear-gradient(180deg,#1E243C 0%,#141930 100%); --g-head:linear-gradient(180deg,rgba(210,225,255,.05) 0%,rgba(210,225,255,.012) 100%); --g-well:linear-gradient(180deg,#05070E 0%,#0A0D19 100%); --st-top:linear-gradient(180deg,rgba(14,18,34,.88) 0%,rgba(8,11,22,.8) 100%); --st-horizon:linear-gradient(90deg,transparent,rgba(90,240,190,.5) 25%,rgba(139,92,255,.5) 60%,rgba(62,200,255,.4) 85%,transparent);} body.st-bg-aurora::before{inset:-25%; background: radial-gradient(52% 17% at 28% 30%,rgba(70,240,180,.38),transparent 72%), radial-gradient(38% 13% at 55% 25%,rgba(62,210,255,.26),transparent 72%), radial-gradient(50% 19% at 74% 34%,rgba(139,92,255,.40),transparent 72%), radial-gradient(34% 11% at 44% 40%,rgba(255,90,200,.14),transparent 72%), radial-gradient(70% 40% at 50% 100%,rgba(40,60,160,.24),transparent 72%); /* the curtain: two sets of faint vertical rays at different spacings, intersected, so the light hangs in uneven folds instead of sitting as a smooth cloud - and no two rays repeat at the same interval */ -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 2px,rgba(0,0,0,.74) 2px 5px,#000 5px 7px), repeating-linear-gradient(90deg,#000 0 5px,rgba(0,0,0,.8) 5px 11px,#000 11px 13px); -webkit-mask-composite:source-in; mask-image:repeating-linear-gradient(90deg,#000 0 2px,rgba(0,0,0,.74) 2px 5px,#000 5px 7px), repeating-linear-gradient(90deg,#000 0 5px,rgba(0,0,0,.8) 5px 11px,#000 11px 13px); mask-composite:intersect; /* static: a 150%-of-screen masked layer on a 38s loop cost a full-screen composite every frame for motion too slow to notice */ transform:translate3d(2%,1%,0) rotate(-1deg) scale(1.04);} @keyframes st-aurora{ 0%{transform:translate3d(-3%,0,0) rotate(-4deg) scale(1);} 50%{transform:translate3d(2%,2%,0) rotate(2deg) scale(1.08);} 100%{transform:translate3d(4%,-1%,0) rotate(-1deg) scale(1.03);}} @media(prefers-reduced-motion:reduce){body.st-bg-aurora::before{animation:none;transform:none;}} /* the bar and its horizon line follow the ground */ body[class*="st-bg-"] .topbar{background:var(--st-top);} body[class*="st-bg-"] .topbar::after{background:var(--st-horizon);} body[class*="st-bg-"]{background:var(--bg);} /* ================= THE CUSTOMIZE SHEET ================= */ .st-sheet .st-card{width:min(800px,100%);padding:0;overflow:hidden; background:radial-gradient(120% 60% at 50% 0%,rgba(139,92,255,.10),transparent 60%),var(--g-surface);} .st-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:20px 22px 0;} .st-eyebrow{font:700 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:6px;} .st-head h3{margin:0;font:800 clamp(26px,4.4vw,36px)/.95 var(--disp);letter-spacing:-.03em;color:var(--text); text-shadow:0 1px 0 var(--border3),0 2px 0 var(--border2),0 3px 0 var(--border),0 10px 20px rgba(0,0,0,.5);} .st-head h3 em{font-style:normal;background:var(--g-ember);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;} .st-head .lbtn{min-height:44px;padding:9px 20px;} /* the live preview: the real table markup, so it cannot lie */ .st-stage{margin:16px 22px 0;border-radius:18px;padding:40px 70px 60px;position:relative; background:radial-gradient(90% 80% at 50% 10%,rgba(255,255,255,.04),transparent 60%),var(--g-well); border:1px solid var(--border);box-shadow:inset 0 2px 16px rgba(0,0,0,.55);} .st-stage .ptable{max-width:470px;margin:0 auto;} .st-stage .seat{pointer-events:none;} .st-stage .board .pcard{animation:none;} /* the preview table is a third the size of the real one, so the board sits a little higher to leave your two cards room below it */ .st-stage .ptable .board{top:40%;} .st-stage .ptable .feltmark{top:13%;} .st-tabs{display:flex;gap:4px;padding:4px;margin:16px 22px 0;border-radius:14px;background:var(--g-well); box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 1px var(--border);} .st-tabs button{flex:1;min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--text2); font:700 13px var(--ui);cursor:pointer;transition:background var(--t),color var(--t);} .st-tabs button:hover{color:var(--text);} .st-tabs button.on{background:var(--g-accent);color:#fff;box-shadow:var(--hair-strong),0 3px 0 var(--accent-lo);} .st-tabs button:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;} .st-body{padding:18px 22px 6px;min-height:280px;} .st-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px; font:700 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text3);} .st-lbl span{font:500 12px var(--ui);letter-spacing:0;text-transform:none;color:var(--text3);} .st-grp+.st-grp{margin-top:22px;} /* a choosable thing: lit, lifts on hover, violet ring when chosen */ .st-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer; padding:10px;border-radius:16px;border:1px solid var(--border2);background:var(--g-surface2);color:var(--text2); font:600 12px var(--ui);text-align:center;box-shadow:var(--hair),0 3px 0 rgba(0,0,0,.35); transition:transform .14s var(--ease),border-color var(--t),box-shadow var(--t),color var(--t);} .st-opt:hover{transform:translateY(-2px);border-color:var(--accent-line);color:var(--text);} .st-opt:active{transform:translateY(1px);} .st-opt:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;} .st-opt.on{border-color:var(--accent);color:var(--text); box-shadow:0 0 0 1.5px var(--accent),var(--hair-strong),0 12px 26px -12px var(--accent-glow);} .st-opt.on::after{content:"";position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%; box-shadow:0 2px 6px -1px var(--accent-glow); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat,var(--g-accent);} .st-opt b{font:700 13px var(--ui);color:inherit;display:block;} .st-opt small{display:block;font:500 11px var(--ui);color:var(--text3);line-height:1.35;margin-top:1px;} .st-opt .st-cap{width:100%;text-align:left;padding:0 2px;} /* avatars */ .st-avs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;} .st-avs .st-opt{padding:12px 6px 9px;gap:7px;} .st-avs .st-opt .fav{transition:transform .2s var(--ease);box-shadow:0 6px 14px -6px rgba(0,0,0,.7);} .st-avs .st-opt:hover .fav{transform:scale(1.06) rotate(-3deg);} .st-avs .st-opt.on::after{top:6px;right:6px;} .st-cols{display:flex;flex-wrap:wrap;gap:10px;} .st-cols button{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer; box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.25),0 3px 0 rgba(0,0,0,.45); transition:transform .12s var(--ease);} .st-cols button:hover{transform:translateY(-2px);} .st-cols button.on{outline:3px solid var(--text);outline-offset:3px;} .st-cols button:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px;} .st-switch{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;border-radius:14px; background:var(--g-well);border:1px solid var(--border);cursor:pointer;color:var(--text2);font:500 13px var(--ui);min-height:44px;} .st-switch b{color:var(--text);font-weight:600;} .st-switch i{flex:none;width:40px;height:24px;border-radius:99px;background:var(--surface4);position:relative; box-shadow:inset 0 1px 3px rgba(0,0,0,.6);transition:background var(--t);} .st-switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%; background:linear-gradient(180deg,#fff,#D8DAE6);box-shadow:0 2px 4px rgba(0,0,0,.5);transition:transform .16s var(--ease);} .st-switch[aria-checked="true"] i{background:var(--g-accent);} .st-switch[aria-checked="true"] i::after{transform:translateX(16px);} .st-switch:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;} /* tiles: felts, decks, backs, backgrounds */ .st-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;} .st-tiles .st-opt{align-items:stretch;padding:8px 8px 10px;} /* a table drawn at twice the size and scaled down, so its rail shadows and edge keep the proportions of the real one */ .st-minibox{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden;border-radius:11px; background:radial-gradient(80% 90% at 50% 20%,rgba(255,255,255,.035),transparent 60%),var(--g-well);} .st-minibox .ptable{position:absolute;left:7.5%;top:6%;width:170%;transform:scale(.5);transform-origin:0 0;aspect-ratio:2.05/1!important;} .st-minibox .ptable .felt{inset:4.6% 2.6%!important;} .st-minibox .ptable .betline{inset:15% 12%!important;} .st-minibox .ptable .feltmark{top:24%!important;font-size:13px!important;letter-spacing:.3em!important;} .st-minibox .board{gap:5px!important;} .st-minibox .board .pcard{animation:none;width:40px!important;height:56px!important;} .st-cardbox{display:flex;align-items:center;justify-content:center;height:92px;border-radius:11px; background:radial-gradient(ellipse at 50% 40%,var(--felt-1),var(--felt-3));box-shadow:inset 0 2px 10px rgba(0,0,0,.5);} .st-fan{display:flex;align-items:center;justify-content:center;transform:scale(.9);} .st-fan .pcard{animation:none;margin:0 -7px;transform-origin:50% 120%;} .st-fan .pcard:nth-child(1){transform:rotate(-12deg) translateY(4px);} .st-fan .pcard:nth-child(2){transform:rotate(-4deg);} .st-fan .pcard:nth-child(3){transform:rotate(4deg);} .st-fan .pcard:nth-child(4){transform:rotate(12deg) translateY(4px);} .st-fan.two .pcard:nth-child(1){transform:rotate(-8deg);} .st-fan.two .pcard:nth-child(2){transform:rotate(8deg);} .st-bgbox{position:relative;height:92px;border-radius:11px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);} .st-bgbox .p{position:absolute;left:12%;right:30%;bottom:14%;top:34%;border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 16px -8px rgba(0,0,0,.8);} .st-bgbox .p i{position:absolute;left:10%;height:5px;border-radius:9px;} .st-bgbox .p i:nth-child(1){top:22%;width:55%;} .st-bgbox .p i:nth-child(2){top:48%;width:38%;opacity:.7;} .st-bgbox .dot{position:absolute;right:12%;top:40%;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -3px rgba(0,0,0,.6);} .st-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 22px 20px; border-top:1px solid var(--border);margin-top:14px;} .st-foot .hint{margin:0;} .st-foot .lbtn{min-height:40px;} @media(max-width:620px){ .st-sheet{padding:10px 8px;} .st-head{padding:16px 16px 0;} .st-stage{margin:12px 12px 0;padding:34px 34px 46px;} /* the phone table is narrow enough that the side seats' cards would lie on the board */ .st-stage .seat:not(.hero) .holecards{visibility:hidden;} .st-tabs{margin:12px 12px 0;} .st-tabs button{min-height:44px;font-size:12.5px;} .st-body{padding:14px 12px 4px;} .st-foot{padding:12px 12px 16px;} .st-avs{grid-template-columns:repeat(4,1fr);gap:8px;} .st-avs .st-opt{padding:9px 2px 7px;font-size:10.5px;} .st-tiles{grid-template-columns:1fr 1fr;gap:8px;} .st-opt small{display:none;} /* the phone table is rounder (99-responsive); the thumbnails stay wide */ .st-minibox .ptable{aspect-ratio:2.05/1!important;} }