/* ==========================================================================
KINGSTON "SALOON" — poker room design kit (casino floor)
High-end poker saloon: deep emerald felt, aged brass, mahogany rail,
oxblood details, candle-lit smoke. Companion to the Flight Deck system
(kingston.css) — every class here is namespaced .saloon / .pt- so the two
sheets can load together and never collide.
SANDBOX ONLY — play chips, never real money. No webfonts, no image assets
except the existing Kingston logo PNGs; all texture is CSS gradients.
Color law (saloon annex to the Flight Deck law):
- brass/gold = the brand accent metal: chrome, focus, to-act, winner
- oxblood = deep red details only: card pips ♥♦, dealer coin ring,
loss deltas, the 5-chip. Never large surfaces, never kitsch.
- emerald = felt + the 25-chip + card backs; atmosphere, not text
- ivory = card faces, high-value text on dark
Motion law: every animation keyframes FROM a displaced state into the
element's natural (resting) styles, so `animation: none` under
prefers-reduced-motion lands on the exact final state — same information,
zero movement. Infinite pulses are frozen lit in the reduced-motion block.
========================================================================== */
:root {
/* ---------- shared Kingston brand (identical constants in kingston.css) --
One house, two rooms: the crowned-K gold + emerald live in BOTH sheets.
Here the brand IS the room — brass ink/highlight resolve to these. */
--brand-gold: #d9bc79;
--brand-gold-hi: #ecd392;
--brand-gold-dim: rgba(217,188,121,0.14);
--brand-emerald: #175e42;
/* ---------- saloon palette ---------- */
--sal-felt: #0c4030; /* emerald felt, mid tone */
--sal-felt-hi: #14563f; /* lamplit pool on the felt */
--sal-felt-deep: #062b1f; /* felt falling into shadow */
--sal-felt-glow: rgba(38,142,101,0.30);
--sal-wood: #4a2417; /* mahogany rail, lit grain */
--sal-wood-2: #2a120a; /* mahogany in shadow */
--sal-wood-edge: #1a0b06;
--sal-brass: #b08d46; /* aged brass */
--sal-brass-hi: var(--brand-gold-hi); /* polished brass = brand gold hi */
--sal-gold-hi: var(--sal-brass-hi);/* alias: gold = polished brass */
--sal-brass-ink: var(--brand-gold); /* brass text on dark = brand gold */
--sal-brass-dim: rgba(176,141,70,0.32);
--sal-brass-faint:rgba(176,141,70,0.14);
--sal-oxblood: #571620; /* oxblood surfaces (chip, coin) */
--sal-oxblood-pip:#7e1f26; /* ♥ ♦ pips on ivory */
--sal-oxblood-ink:#c96a6a; /* loss deltas on dark */
--sal-smoke: #0b0906; /* warm near-black room */
--sal-smoke-2: #14100a; /* raised warm surface */
--sal-smoke-3: #1d1710; /* hovered warm surface */
--sal-ivory: #f2e8d3; /* card faces, hero text */
--sal-ivory-2: #d9cdb2; /* secondary ivory */
--sal-ivory-dim: #8d8470; /* muted labels on dark */
--sal-pip-ink: #1c1a16; /* ♠ ♣ pips, card ranks */
--sal-line: rgba(217,188,121,0.13);
--sal-glass: rgba(13,10,7,0.82);
/* ---------- elevation & glow ---------- */
--sal-sh: 0 2px 4px rgba(0,0,0,0.55), 0 16px 40px -18px rgba(0,0,0,0.85);
--sal-glow-gold: 0 0 0 1px rgba(217,188,121,0.55), 0 0 18px -2px rgba(217,188,121,0.45);
--sal-bloom: 0 0 0 1px rgba(236,211,146,0.65), 0 0 26px 2px rgba(217,188,121,0.30);
/* ---------- typography (system stacks only) ---------- */
--sal-serif: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--sal-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Courier New", monospace;
/* ---------- knobs a client may retune per breakpoint ----------
Grown 2026-07-22 ("the felt upgrade"): the old kit ran out of room for
cards and chips once bet piles and the dealer coin shared the felt. */
--pt-card-w: 60px; /* base card width; height = 1.4x */
--pt-pod-w: 150px; /* seat pod width */
--pt-avatar: 52px;
--pt-chip: 29px; /* chip diameter */
/* ---------- motion ---------- */
--sal-t: 200ms; --sal-t-slow: 420ms;
--sal-ease: cubic-bezier(0.2,0.7,0.2,1);
--sal-ease-deal: cubic-bezier(0.22,1.1,0.36,1);
}
/* ==========================================================================
STAGE — the room: layered vignette, candle rim light, slow smoke drift
========================================================================== */
.saloon-stage {
/* NO overflow:hidden here — pages must scroll when content exceeds the
viewport (the atmosphere layers below are position:fixed, so they
neither leak past the edges nor create phantom scroll area). */
position: relative; isolation: isolate; overflow-x: clip;
min-height: 100vh; padding: 22px clamp(12px, 3vw, 40px) 40px;
color: var(--sal-ivory-2);
font-family: var(--sal-serif);
background:
radial-gradient(1100px 560px at 50% -6%, rgba(236,211,146,0.055), transparent 62%),
radial-gradient(900px 480px at 50% 108%, rgba(120,60,24,0.14), transparent 64%),
radial-gradient(1400px 900px at 50% 46%, rgba(20,86,63,0.10), transparent 70%),
linear-gradient(180deg, #0e0b08 0%, var(--sal-smoke) 42%, #080604 100%);
}
/* edge vignette — the room falls away into shadow (viewport-glued) */
.saloon-stage::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
/* smoke drift — one wide soft plume, very slow, ambient only */
.saloon-stage::after {
content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
background:
radial-gradient(38% 24% at 30% 34%, rgba(210,195,170,0.045), transparent 70%),
radial-gradient(30% 20% at 68% 22%, rgba(210,195,170,0.035), transparent 70%),
radial-gradient(44% 26% at 52% 58%, rgba(190,175,150,0.028), transparent 70%);
animation: pt-smoke 70s ease-in-out infinite alternate;
}
@keyframes pt-smoke {
from { transform: translate3d(-3%, 1.5%, 0) rotate(-1.2deg); }
to { transform: translate3d(3%, -2%, 0) rotate(1.2deg); }
}
/* saloon heading voice: display serif, brass, tracked small caps eyebrow */
.saloon-title {
margin: 0; font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--sal-serif);
color: var(--sal-ivory); letter-spacing: 0.4px;
}
.saloon-title b { color: var(--sal-brass-ink); font-weight: 400; }
.saloon-eyebrow {
display: block; margin-bottom: 6px;
font: 600 10px/1 var(--sal-mono); letter-spacing: 2.2px; text-transform: uppercase;
color: var(--sal-ivory-dim);
}
.saloon-eyebrow::before { content: "— "; color: var(--sal-brass); }
.saloon-eyebrow::after { content: " —"; color: var(--sal-brass); }
.saloon-stage :focus-visible {
outline: 2px solid var(--sal-brass-ink); outline-offset: 2px; border-radius: 4px;
}
.saloon-stage ::selection { background: rgba(176,141,70,0.35); }
/* ==========================================================================
TABLE — mahogany rail, brass inlay, emerald felt oval
Markup: .pt-table[data-seats="2".."9"]
> .pt-felt > .pt-brand > img, .pt-pot, .pt-board, .pt-bets…
> .pt-seat[data-pos="0".."8"] (pos 0 = hero, bottom center)
> .pt-dealer (coin, positioned via --coin-x/--coin-y)
========================================================================== */
.pt-table {
position: relative;
/* Bigger, better-balanced felt (2026-07-23). Squarer than the old 1.9:1
— vertical room is what bet piles and hole cards were short of — and
the interior (board/pot/brand) is scaled up so the centre reads FULL
rather than a green void. Pods sit on the rail; the hero pod clears the
dock (the dock no longer rides up over it). */
width: min(1200px, 95vw);
aspect-ratio: 1.75 / 1;
margin: 46px auto 44px; /* top pods overhang; hero sits in */
--pt-chip: calc(29px * var(--pt-fit, 1)); /* chips scale with the felt too */
border-radius: 50%;
background:
/* rail sheen */
linear-gradient(158deg, rgba(255,214,150,0.13), transparent 34%, transparent 68%, rgba(255,190,120,0.05) 92%),
/* wood grain */
repeating-linear-gradient(93deg,
rgba(0,0,0,0.22) 0 2px, transparent 2px 7px,
rgba(255,196,130,0.05) 7px 9px, transparent 9px 15px),
linear-gradient(180deg, var(--sal-wood) 0%, var(--sal-wood-2) 70%, var(--sal-wood-edge) 100%);
box-shadow:
0 34px 70px -22px rgba(0,0,0,0.9),
0 8px 22px -8px rgba(0,0,0,0.7),
inset 0 2px 2px rgba(255,214,150,0.16),
inset 0 -3px 6px rgba(0,0,0,0.6);
}
/* brass inlay ring set into the rail */
.pt-table::before {
content: ""; position: absolute; inset: 3.2%; border-radius: 50%; pointer-events: none;
border: 2px solid transparent;
background:
linear-gradient(140deg, var(--sal-gold-hi), var(--sal-brass) 30%, #6d5527 52%, var(--sal-brass) 72%, var(--sal-gold-hi)) border-box;
-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0.9;
}
.pt-felt {
position: absolute; inset: 5.5%; border-radius: 50%;
background:
/* candle pool */
radial-gradient(58% 52% at 50% 34%, rgba(240,220,160,0.09), transparent 62%),
/* felt nap (two crossed micro-strias) */
repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
radial-gradient(85% 90% at 50% 42%, var(--sal-felt-hi), var(--sal-felt) 55%, var(--sal-felt-deep) 100%);
box-shadow:
inset 0 3px 4px rgba(0,0,0,0.55), /* rail lip over felt */
inset 0 0 60px rgba(0,0,0,0.5),
inset 0 0 0 1px rgba(0,0,0,0.5);
}
/* stitched betting line on the felt */
.pt-felt::before {
content: ""; position: absolute; inset: 9% 8%; border-radius: 50%; pointer-events: none;
border: 1px dashed rgba(236,211,146,0.16);
}
/* brand watermark, pressed into the felt behind the board (true centre) */
.pt-brand {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: clamp(120px, 20%, 230px); opacity: 0.10; pointer-events: none;
filter: grayscale(35%) brightness(1.35);
mix-blend-mode: luminosity;
}
.pt-brand img { display: block; width: 100%; height: auto; }
/* pot chip tray — recessed brass-edged well above the board */
.pt-pot {
position: absolute; left: 50%; top: 25%; transform: translate(-50%, -50%);
display: flex; align-items: center; gap: 10px;
padding: 6px 16px 6px 10px; border-radius: 999px;
background: rgba(0,0,0,0.34);
box-shadow: inset 0 2px 5px rgba(0,0,0,0.55), 0 1px 0 rgba(236,211,146,0.10);
border: 1px solid rgba(0,0,0,0.35); outline: 1px solid var(--sal-brass-faint);
white-space: nowrap;
}
.pt-pot i {
font: 600 10px/1 var(--sal-mono); font-style: normal;
letter-spacing: 1.8px; text-transform: uppercase; color: var(--sal-ivory-dim);
}
.pt-pot-amt {
font: 700 18px/1 var(--sal-mono); color: var(--sal-ivory);
font-variant-numeric: tabular-nums; letter-spacing: 0.3px;
}
.pt-pot-bb {
font: 600 10px/1 var(--sal-mono); color: var(--sal-brass-ink);
letter-spacing: 0.5px; margin-left: 1px;
}
/* pot slides to the winner on award — JS sets --fly-x/--fly-y (seat delta) */
.pt-pot.is-award { animation: pt-pot-award 700ms var(--sal-ease) both; }
@keyframes pt-pot-award {
0% { transform: translate(-50%, -50%); opacity: 1; }
100% { transform: translate(calc(-50% + var(--fly-x, 0px)), calc(-50% + var(--fly-y, 220px))) scale(0.6); opacity: 0; }
}
/* community board — the felt's centrepiece, sized up so it fills the eye
(scales with --pt-fit so it never overflows a short viewport) */
.pt-board {
position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
display: flex; gap: 8px; --pt-card-w: calc(70px * var(--pt-fit, 1));
}
/* bet layer: client positions each .pt-bet with --bet-x/--bet-y (percents) */
.pt-bets { position: absolute; inset: 0; pointer-events: none; }
.pt-bet {
position: absolute; left: var(--bet-x, 50%); top: var(--bet-y, 50%);
transform: translate(-50%, -50%);
display: flex; align-items: flex-end; gap: 7px;
}
.pt-bet-amt {
font: 700 12px/1.6 var(--sal-mono); color: var(--sal-gold-hi);
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
/* chips fly from the seat to the bet spot — JS sets --fly-x/--fly-y */
.pt-bet.is-flying { animation: pt-bet-fly 420ms var(--sal-ease-deal) backwards; }
@keyframes pt-bet-fly {
from {
transform: translate(calc(-50% + var(--fly-x, 0px)), calc(-50% + var(--fly-y, 60px)));
opacity: 0;
}
}
/* dealer coin — ivory disc, oxblood ring, serif D; --coin-x/--coin-y */
.pt-dealer {
position: absolute; left: var(--coin-x, 50%); top: var(--coin-y, 50%);
transform: translate(-50%, -50%); z-index: 3;
width: 24px; height: 24px; border-radius: 50%;
display: grid; place-items: center;
font: 700 12px/1 var(--sal-serif); color: var(--sal-oxblood);
background: radial-gradient(circle at 38% 30%, #fdf7e8, var(--sal-ivory) 55%, #cfc0a0 100%);
box-shadow: inset 0 0 0 2px var(--sal-oxblood-pip), 0 2px 5px rgba(0,0,0,0.6), inset 0 -3px 4px rgba(0,0,0,0.18);
}
/* ==========================================================================
SEATS — brass-edged pods around the ellipse
States on .pt-seat: .is-toact (gold ring + --pct countdown arc)
.is-folded .is-winner .is-away
========================================================================== */
.pt-seat {
position: absolute; z-index: 2;
left: var(--seat-x, 50%); top: var(--seat-y, 50%);
transform: translate(-50%, -50%);
width: var(--pt-pod-w);
display: flex; flex-direction: column; align-items: center; gap: 4px;
text-align: center;
transition: opacity var(--sal-t) var(--sal-ease), filter var(--sal-t) var(--sal-ease);
}
.pt-seat { --pt-pod-w: calc(150px * var(--pt-fit, 1)); --pt-avatar: calc(52px * var(--pt-fit, 1)); }
.pt-seat--hero { --pt-pod-w: calc(160px * var(--pt-fit, 1)); --pt-avatar: calc(56px * var(--pt-fit, 1)); z-index: 4; }
/* hole cards sit above the pod, fanned */
.pt-hole { display: flex; justify-content: center; min-height: calc(var(--pt-card-w) * 0.6); }
.pt-hole .pt-card:first-child { transform: rotate(-5deg) translateX(3px); }
.pt-hole .pt-card:last-child { transform: rotate(5deg) translateX(-3px); }
.pt-seat--hero .pt-hole { --pt-card-w: calc(64px * var(--pt-fit, 1)); min-height: 50px; margin-bottom: -28px; }
.pt-seat:not(.pt-seat--hero) .pt-hole { --pt-card-w: calc(36px * var(--pt-fit, 1)); margin-bottom: -12px; }
.pt-pod {
position: relative; width: 100%;
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 9px 10px 8px; border-radius: 12px;
background: linear-gradient(180deg, var(--sal-smoke-3), var(--sal-smoke-2) 55%, #0d0a06 100%);
border: 1px solid var(--sal-brass-dim);
box-shadow:
inset 0 1px 0 rgba(236,211,146,0.10),
0 3px 10px rgba(0,0,0,0.6);
transition: border-color var(--sal-t) var(--sal-ease), box-shadow var(--sal-t) var(--sal-ease);
}
.pt-avatar {
position: relative; width: var(--pt-avatar); height: var(--pt-avatar);
border-radius: 50%; display: grid; place-items: center;
font: 600 calc(var(--pt-avatar) * 0.42)/1 var(--sal-serif); color: var(--sal-brass-ink);
background: radial-gradient(circle at 36% 30%, #262019, #14100a 68%);
box-shadow: inset 0 0 0 1.5px var(--sal-brass-dim), inset 0 -6px 10px rgba(0,0,0,0.5);
}
.pt-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* countdown arc — client sets --pct (0..100, remaining) on the seat.
The arc is state, not chrome: it drains as the clock runs. */
.pt-timer {
position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
background: conic-gradient(from -90deg,
var(--sal-gold-hi) calc(var(--pct, 100) * 1%),
rgba(236,211,146,0.14) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
opacity: 0;
transition: opacity var(--sal-t) var(--sal-ease);
}
.pt-seat.is-toact .pt-timer { opacity: 1; }
.pt-seat.is-toact .pt-pod {
border-color: rgba(236,211,146,0.6);
box-shadow: var(--sal-glow-gold), 0 3px 10px rgba(0,0,0,0.6);
}
.pt-seat.is-toact .pt-avatar { box-shadow: inset 0 0 0 1.5px rgba(236,211,146,0.55), inset 0 -6px 10px rgba(0,0,0,0.5); }
.pt-name {
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font: 600 13px/1.2 var(--sal-serif); letter-spacing: 0.4px; color: var(--sal-ivory);
}
.pt-seat--hero .pt-name { color: var(--sal-gold-hi); }
.pt-stack {
font: 700 12.5px/1 var(--sal-mono); color: var(--sal-ivory-2);
font-variant-numeric: tabular-nums; letter-spacing: 0.4px;
}
.pt-stack::before { content: "◆ "; font-size: 8px; color: var(--sal-brass); vertical-align: 1px; }
/* stack measured in big blinds — the number that actually matters */
.pt-stack-bb {
margin-left: 5px; font: 600 10px/1 var(--sal-mono); color: var(--sal-brass-ink);
letter-spacing: 0.3px;
}
.pt-delta-win { color: var(--sal-gold-hi); }
.pt-delta-loss { color: var(--sal-oxblood-ink); }
/* position badge (BTN/CO/UTG…) — pinned to the pod's top-left corner */
.pt-pos {
position: absolute; top: -7px; left: -6px;
padding: 2px 6px; border-radius: 999px;
font: 700 8.5px/1 var(--sal-mono); letter-spacing: 0.8px;
color: var(--sal-ivory-2); background: var(--sal-smoke-2);
box-shadow: inset 0 0 0 1px var(--sal-brass-dim);
}
.pt-pos--btn { color: var(--sal-smoke); background: linear-gradient(180deg, #fdf7e8, #cfc0a0); }
/* last action this street — a caption under the pod that fades in */
.pt-last {
min-height: 12px; margin-top: 1px;
font: 600 9px/1.3 var(--sal-mono); letter-spacing: 1px; text-transform: uppercase;
color: var(--sal-ivory-dim);
}
.pt-last b { color: var(--sal-gold-hi); font-weight: 700; }
.pt-last--fold { color: var(--sal-oxblood-ink); }
.pt-last--aggr { color: var(--sal-brass-ink); }
/* small-blind / big-blind pips, pinned to the pod corner */
.pt-blind {
position: absolute; top: -7px; right: -6px;
padding: 2px 6px; border-radius: 999px;
font: 700 8.5px/1 var(--sal-mono); letter-spacing: 1px;
color: var(--sal-smoke); background: linear-gradient(180deg, var(--sal-gold-hi), var(--sal-brass));
box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.pt-blind--sb { color: var(--sal-brass-ink); background: linear-gradient(180deg, #3a2f1c, #241c10); box-shadow: inset 0 0 0 1px var(--sal-brass-dim), 0 1px 3px rgba(0,0,0,0.6); }
/* --- seat states ------------------------------------------------------- */
.pt-seat.is-folded { opacity: 0.42; filter: saturate(0.25) brightness(0.8); }
.pt-seat.is-folded .pt-hole { visibility: hidden; }
.pt-seat.is-away .pt-pod { border-style: dashed; opacity: 0.75; }
.pt-seat.is-away .pt-avatar { filter: grayscale(0.7) brightness(0.75); }
.pt-tag-away {
position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
padding: 2px 8px; border-radius: 999px;
font: 700 8.5px/1 var(--sal-mono); letter-spacing: 1.6px;
color: var(--sal-ivory-dim); background: var(--sal-smoke-2);
box-shadow: inset 0 0 0 1px rgba(141,132,112,0.4);
}
.pt-seat.is-winner .pt-pod {
border-color: rgba(236,211,146,0.75);
box-shadow: var(--sal-bloom), 0 3px 10px rgba(0,0,0,0.6);
animation: pt-bloom 1.8s ease-in-out infinite;
}
@keyframes pt-bloom {
0%, 100% { box-shadow: var(--sal-bloom), 0 3px 10px rgba(0,0,0,0.6); }
50% { box-shadow: 0 0 0 1px rgba(236,211,146,0.9), 0 0 40px 6px rgba(217,188,121,0.45), 0 3px 10px rgba(0,0,0,0.6); }
}
/* --- default seat geometry: .pt-table[data-seats=N] .pt-seat[data-pos=K]
pos 0 is ALWAYS the hero, bottom center; others clockwise from hero's
left. A client may override per-seat with inline --seat-x/--seat-y. --- */
.pt-table[data-seats="2"] [data-pos="0"] { --seat-x: 50%; --seat-y: 88%; }
.pt-table[data-seats="2"] [data-pos="1"] { --seat-x: 50%; --seat-y: -3%; }
.pt-table[data-seats="3"] [data-pos="0"] { --seat-x: 50%; --seat-y: 88%; }
.pt-table[data-seats="3"] [data-pos="1"] { --seat-x: 13%; --seat-y: 9%; }
.pt-table[data-seats="3"] [data-pos="2"] { --seat-x: 87%; --seat-y: 9%; }
.pt-table[data-seats="4"] [data-pos="0"] { --seat-x: 50%; --seat-y: 88%; }
.pt-table[data-seats="4"] [data-pos="1"] { --seat-x: 2%; --seat-y: 44%; }
.pt-table[data-seats="4"] [data-pos="2"] { --seat-x: 50%; --seat-y: -3%; }
.pt-table[data-seats="4"] [data-pos="3"] { --seat-x: 98%; --seat-y: 44%; }
.pt-table[data-seats="5"] [data-pos="0"] { --seat-x: 50%; --seat-y: 88%; }
.pt-table[data-seats="5"] [data-pos="1"] { --seat-x: 5%; --seat-y: 66%; }
.pt-table[data-seats="5"] [data-pos="2"] { --seat-x: 19%; --seat-y: 2%; }
.pt-table[data-seats="5"] [data-pos="3"] { --seat-x: 81%; --seat-y: 2%; }
.pt-table[data-seats="5"] [data-pos="4"] { --seat-x: 95%; --seat-y: 66%; }
.pt-table[data-seats="6"] [data-pos="0"] { --seat-x: 50%; --seat-y: 88%; }
.pt-table[data-seats="6"] [data-pos="1"] { --seat-x: 4%; --seat-y: 72%; }
.pt-table[data-seats="6"] [data-pos="2"] { --seat-x: 11%; --seat-y: 10%; }
.pt-table[data-seats="6"] [data-pos="3"] { --seat-x: 50%; --seat-y: -5%; }
.pt-table[data-seats="6"] [data-pos="4"] { --seat-x: 89%; --seat-y: 10%; }
.pt-table[data-seats="6"] [data-pos="5"] { --seat-x: 96%; --seat-y: 72%; }
.pt-table[data-seats="7"] [data-pos="0"] { --seat-x: 50%; --seat-y: 88%; }
.pt-table[data-seats="7"] [data-pos="1"] { --seat-x: 7%; --seat-y: 79%; }
.pt-table[data-seats="7"] [data-pos="2"] { --seat-x: 2%; --seat-y: 30%; }
.pt-table[data-seats="7"] [data-pos="3"] { --seat-x: 28%; --seat-y: -4%; }
.pt-table[data-seats="7"] [data-pos="4"] { --seat-x: 72%; --seat-y: -4%; }
.pt-table[data-seats="7"] [data-pos="5"] { --seat-x: 98%; --seat-y: 30%; }
.pt-table[data-seats="7"] [data-pos="6"] { --seat-x: 93%; --seat-y: 79%; }
.pt-table[data-seats="8"] [data-pos="0"] { --seat-x: 50%; --seat-y: 88%; }
.pt-table[data-seats="8"] [data-pos="1"] { --seat-x: 11%; --seat-y: 86%; }
.pt-table[data-seats="8"] [data-pos="2"] { --seat-x: 0%; --seat-y: 42%; }
.pt-table[data-seats="8"] [data-pos="3"] { --seat-x: 17%; --seat-y: 4%; }
.pt-table[data-seats="8"] [data-pos="4"] { --seat-x: 50%; --seat-y: -5%; }
.pt-table[data-seats="8"] [data-pos="5"] { --seat-x: 83%; --seat-y: 4%; }
.pt-table[data-seats="8"] [data-pos="6"] { --seat-x: 100%;--seat-y: 42%; }
.pt-table[data-seats="8"] [data-pos="7"] { --seat-x: 89%; --seat-y: 86%; }
.pt-table[data-seats="9"] [data-pos="0"] { --seat-x: 50%; --seat-y: 88%; }
.pt-table[data-seats="9"] [data-pos="1"] { --seat-x: 15%; --seat-y: 92%; }
.pt-table[data-seats="9"] [data-pos="2"] { --seat-x: 0%; --seat-y: 55%; }
.pt-table[data-seats="9"] [data-pos="3"] { --seat-x: 6%; --seat-y: 14%; }
.pt-table[data-seats="9"] [data-pos="4"] { --seat-x: 32%; --seat-y: -4%; }
.pt-table[data-seats="9"] [data-pos="5"] { --seat-x: 68%; --seat-y: -4%; }
.pt-table[data-seats="9"] [data-pos="6"] { --seat-x: 94%; --seat-y: 14%; }
.pt-table[data-seats="9"] [data-pos="7"] { --seat-x: 100%;--seat-y: 55%; }
.pt-table[data-seats="9"] [data-pos="8"] { --seat-x: 85%; --seat-y: 92%; }
/* ==========================================================================
CARDS — pure-CSS playing cards
Markup: .pt-card.pt-card--s|--h|--d|--c > .pt-rank (A♠) + .pt-suit (♠)
Back: .pt-card.pt-card--back (emerald & brass lattice, crowned-K)
========================================================================== */
.pt-card {
position: relative; flex: none;
width: var(--pt-card-w); height: calc(var(--pt-card-w) * 1.4);
border-radius: calc(var(--pt-card-w) * 0.12);
background:
radial-gradient(120% 90% at 30% 12%, #fbf5e6, var(--sal-ivory) 48%, #e2d5b8 100%);
box-shadow:
0 2px 5px rgba(0,0,0,0.65),
inset 0 0 0 1px rgba(255,255,255,0.5),
inset 0 -2px 4px rgba(120,100,60,0.16);
color: var(--sal-pip-ink);
font-family: var(--sal-serif);
user-select: none;
}
.pt-card--h, .pt-card--d { color: var(--sal-oxblood-pip); }
/* a card that forms YOUR made hand — gold frame + soft bloom, lifted a hair */
.pt-card.is-made {
box-shadow:
0 0 0 2px var(--sal-gold-hi),
0 0 14px 1px rgba(217,188,121,0.55),
0 3px 7px rgba(0,0,0,0.6),
inset 0 0 0 1px rgba(255,255,255,0.5);
transform: translateY(-3px);
transition: box-shadow var(--sal-t) var(--sal-ease), transform var(--sal-t) var(--sal-ease);
z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .pt-card.is-made { transition: none; } }
.pt-rank {
position: absolute; top: 5%; left: 9%;
font-size: calc(var(--pt-card-w) * 0.34); font-weight: 700; line-height: 1;
letter-spacing: -0.5px;
}
.pt-rank i {
display: block; font-style: normal; font-size: calc(var(--pt-card-w) * 0.26);
line-height: 1.1; text-align: left;
}
.pt-suit {
position: absolute; right: 8%; bottom: 4%;
font-size: calc(var(--pt-card-w) * 0.62); line-height: 1;
}
/* card back: emerald field, brass lattice, crowned-K medallion */
.pt-card--back {
background:
/* lattice */
repeating-linear-gradient(45deg, rgba(217,188,121,0.16) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-45deg, rgba(217,188,121,0.16) 0 1px, transparent 1px 7px),
radial-gradient(100% 80% at 50% 30%, var(--sal-felt-hi), var(--sal-felt-deep) 90%);
box-shadow:
0 2px 5px rgba(0,0,0,0.65),
inset 0 0 0 1px var(--sal-brass),
inset 0 0 0 3px rgba(6,43,31,0.9),
inset 0 0 0 4px var(--sal-brass-dim);
color: transparent;
}
/* medallion ring + crown */
.pt-card--back::before {
content: "♛"; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -54%);
width: calc(var(--pt-card-w) * 0.56); height: calc(var(--pt-card-w) * 0.56);
border-radius: 50%;
background: radial-gradient(circle at 40% 30%, #0f4a36, var(--sal-felt-deep) 75%);
box-shadow: inset 0 0 0 1.5px var(--sal-brass), 0 0 0 2px rgba(6,43,31,0.9), 0 0 0 2.5px var(--sal-brass-dim);
color: var(--sal-brass-ink);
font: 400 calc(var(--pt-card-w) * 0.17)/1 var(--sal-serif);
display: grid; place-items: center; padding-bottom: calc(var(--pt-card-w) * 0.28);
box-sizing: border-box;
}
.pt-card--back::after {
content: "K"; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -42%);
color: var(--sal-gold-hi);
font: 700 calc(var(--pt-card-w) * 0.30)/1 var(--sal-serif);
text-shadow: 0 1px 1px rgba(0,0,0,0.7);
}
/* empty card slot on the felt */
.pt-card--slot {
background: none; box-shadow: inset 0 0 0 1px rgba(236,211,146,0.14);
border: none;
}
/* --- card motion (all keyframe FROM displaced -> natural state) --------- */
/* deal: flies in from the dealer coin, slight spin; JS staggers --deal-i */
.pt-card.is-dealt {
animation: pt-deal 420ms var(--sal-ease-deal) backwards;
animation-delay: calc(var(--deal-i, 0) * 90ms);
}
@keyframes pt-deal {
from {
transform: translate(var(--deal-x, 0px), var(--deal-y, -150px)) rotate(-16deg) scale(0.72);
opacity: 0;
}
}
/* board street slide-in */
.pt-card.is-board-in {
animation: pt-board-in 340ms var(--sal-ease) backwards;
animation-delay: calc(var(--deal-i, 0) * 70ms);
}
@keyframes pt-board-in {
from { transform: translateX(-16px); opacity: 0; }
}
/* muck: fades toward the dealer; JS sets --muck-x/--muck-y (coin delta) */
.pt-card.is-mucked, .pt-hole.is-mucked .pt-card {
opacity: 0; visibility: hidden;
transition: visibility 0s 420ms;
animation: pt-muck 420ms var(--sal-ease) both;
}
@keyframes pt-muck {
from { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; visibility: visible; }
to { transform: translate(var(--muck-x, 0px), var(--muck-y, -80px)) rotate(10deg) scale(0.7); opacity: 0; }
}
/* 3D flip reveal.
Markup: .pt-flip > .pt-flip-inner > (.pt-card--back) + (.pt-card.pt-flip-face)
Toggle .is-revealed on .pt-flip. */
.pt-flip {
position: relative; flex: none; perspective: 620px;
width: var(--pt-card-w); height: calc(var(--pt-card-w) * 1.4);
}
.pt-flip-inner {
position: absolute; inset: 0; transform-style: preserve-3d;
transition: transform 480ms var(--sal-ease);
}
.pt-flip .pt-card { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.pt-flip .pt-flip-face { transform: rotateY(180deg); }
.pt-flip.is-revealed .pt-flip-inner { transform: rotateY(180deg); }
/* ==========================================================================
CHIPS — play-chip discs. Denominations: 1 ivory / 5 oxblood / 25 emerald /
100 smoke&brass / 500 brass. Stack with .pt-chipstack; the count label is
.pt-chip-count (mono).
========================================================================== */
.pt-chip {
--chip-c: #ded3b8; --chip-e: #9d9176; --chip-hi: rgba(255,255,255,0.35);
position: relative; flex: none;
width: 26px; height: 26px; border-radius: 50%;
background:
radial-gradient(circle at 36% 28%, var(--chip-hi), transparent 46%),
radial-gradient(circle, var(--chip-c) 0 56%, transparent 57%),
repeating-conic-gradient(var(--chip-e) 0 16deg, var(--chip-c) 16deg 60deg);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.35),
inset 0 2px 2px rgba(255,255,255,0.18),
inset 0 -2px 3px rgba(0,0,0,0.35),
0 2px 3px rgba(0,0,0,0.55);
}
/* inner stamped ring */
.pt-chip::before {
content: ""; position: absolute; inset: 22%; border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22), inset 0 0 0 2.5px rgba(255,255,255,0.10);
}
.pt-chip--1 { --chip-c: #e7dcc2; --chip-e: #a89b7c; --chip-hi: rgba(255,255,255,0.5); }
.pt-chip--5 { --chip-c: var(--sal-oxblood); --chip-e: #d8c9a8; --chip-hi: rgba(255,160,150,0.25); }
.pt-chip--25 { --chip-c: #12503a; --chip-e: var(--sal-brass); --chip-hi: rgba(160,255,210,0.20); }
.pt-chip--100 { --chip-c: #191512; --chip-e: var(--sal-brass); --chip-hi: rgba(236,211,146,0.22); }
.pt-chip--500 { --chip-c: #a8842f; --chip-e: #241c10; --chip-hi: rgba(255,240,200,0.45); }
/* vertical stack: chips pile with a thin edge showing */
.pt-chipstack { display: flex; flex-direction: column-reverse; align-items: center; }
.pt-chipstack .pt-chip { margin-top: -21px; }
.pt-chipstack .pt-chip:last-child { margin-top: 0; }
.pt-chip-count {
font: 700 11.5px/1.5 var(--sal-mono); color: var(--sal-ivory-2);
font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
/* ==========================================================================
ACTION DOCK — the hero control bar
Markup: .pt-dock > .pt-dock-read + .pt-dock-actions + .pt-dock-size
Buttons: .pt-act--fold / --check / --call / --raise
States: :disabled, .is-armed (raise amount staged)
========================================================================== */
.pt-dock {
position: relative; z-index: 5;
/* sits just under the felt, clear of the hero pod (no longer riding up
over it) */
width: min(940px, 100%); margin: 4px auto 0;
display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); flex-wrap: wrap;
padding: 13px 20px; border-radius: 14px;
background:
linear-gradient(158deg, rgba(255,214,150,0.06), transparent 40%),
repeating-linear-gradient(92deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 9px),
linear-gradient(180deg, #241610, #150c07 65%, #0e0804 100%);
border: 1px solid rgba(0,0,0,0.6);
box-shadow:
inset 0 1px 0 rgba(236,211,146,0.14),
inset 0 0 0 1px var(--sal-brass-faint),
0 18px 40px -14px rgba(0,0,0,0.9);
}
.pt-dock-read {
display: flex; flex-direction: column; gap: 2px; flex: none; min-width: 86px;
}
.pt-dock-read i {
font: 600 9px/1.4 var(--sal-mono); font-style: normal;
letter-spacing: 1.8px; text-transform: uppercase; color: var(--sal-ivory-dim);
}
.pt-dock-read b {
font: 700 15px/1.2 var(--sal-mono); color: var(--sal-ivory);
font-variant-numeric: tabular-nums;
}
.pt-dock-actions { display: flex; gap: 9px; align-items: stretch; }
.pt-act {
cursor: pointer; flex: none;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
min-width: 92px; padding: 11px 18px; border-radius: 9px;
font: 700 12.5px/1 var(--sal-mono); letter-spacing: 1.6px; text-transform: uppercase;
color: var(--sal-brass-ink);
background: linear-gradient(180deg, #2b2013, #191006 70%, #120b04 100%);
border: 1px solid var(--sal-brass-dim);
box-shadow:
inset 0 1px 0 rgba(236,211,146,0.16), /* engraved top light */
inset 0 -3px 6px rgba(0,0,0,0.5), /* engraved recess */
0 3px 8px rgba(0,0,0,0.55);
text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
transition: filter var(--sal-t) var(--sal-ease), box-shadow var(--sal-t) var(--sal-ease), transform 60ms var(--sal-ease);
font-variant-numeric: tabular-nums;
}
.pt-act:hover { filter: brightness(1.22); }
.pt-act:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5); }
.pt-act:disabled {
cursor: default; opacity: 0.38; filter: saturate(0.4);
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4);
}
.pt-act:disabled:hover { filter: saturate(0.4); }
/* Fold is deliberately the quietest control — never the temptation */
.pt-act--fold {
color: var(--sal-ivory-dim); border-color: rgba(141,132,112,0.28);
background: linear-gradient(180deg, #1c1812, #110d08 70%, #0c0905 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -3px 6px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.45);
text-shadow: none;
}
.pt-act--check { }
.pt-act--call { border-color: rgba(217,188,121,0.55); color: var(--sal-gold-hi); }
/* Raise: the one filled-brass control */
.pt-act--raise {
color: #221604;
background: linear-gradient(180deg, var(--sal-gold-hi), #c9a45c 45%, var(--sal-brass) 100%);
border-color: #6d5527;
box-shadow:
inset 0 1px 0 rgba(255,246,220,0.75),
inset 0 -3px 6px rgba(90,64,20,0.55),
0 3px 10px rgba(0,0,0,0.6);
text-shadow: 0 1px 0 rgba(255,246,220,0.5);
}
.pt-act--raise:hover { filter: brightness(1.08); }
.pt-act.is-armed {
box-shadow:
var(--sal-glow-gold),
inset 0 1px 0 rgba(255,246,220,0.75),
inset 0 -3px 6px rgba(90,64,20,0.55);
}
/* bet sizing: quick chips + slider + readout */
.pt-dock-size {
display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 220px;
}
.pt-quick { display: flex; gap: 5px; flex: none; }
.pt-quick-chip {
cursor: pointer; padding: 6px 9px; border-radius: 999px;
font: 700 10px/1 var(--sal-mono); letter-spacing: 0.8px;
color: var(--sal-ivory-dim); background: rgba(0,0,0,0.3);
border: 1px solid var(--sal-brass-faint);
transition: color var(--sal-t) var(--sal-ease), border-color var(--sal-t) var(--sal-ease), background var(--sal-t) var(--sal-ease);
}
.pt-quick-chip:hover { color: var(--sal-brass-ink); border-color: var(--sal-brass-dim); }
.pt-quick-chip.is-active {
color: var(--sal-gold-hi); border-color: rgba(217,188,121,0.6);
background: rgba(176,141,70,0.14);
}
.pt-slider {
-webkit-appearance: none; appearance: none;
flex: 1 1 90px; min-width: 70px; height: 22px; background: none; margin: 0;
}
.pt-slider::-webkit-slider-runnable-track {
height: 4px; border-radius: 2px;
background: linear-gradient(180deg, #0a0703, #1c150b);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(236,211,146,0.10);
}
.pt-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; border-radius: 50%; margin-top: -7px;
background: radial-gradient(circle at 36% 28%, var(--sal-gold-hi), var(--sal-brass) 70%, #6d5527 100%);
box-shadow: 0 2px 5px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,246,220,0.6);
border: none; cursor: pointer;
}
.pt-slider::-moz-range-track {
height: 4px; border-radius: 2px; background: #120d06;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.pt-slider::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%; border: none;
background: radial-gradient(circle at 36% 28%, var(--sal-gold-hi), var(--sal-brass) 70%, #6d5527 100%);
box-shadow: 0 2px 5px rgba(0,0,0,0.7); cursor: pointer;
}
.pt-bet-readout {
flex: none; min-width: 64px; text-align: right;
font: 700 15px/1 var(--sal-mono); color: var(--sal-gold-hi);
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
TOASTS + SHOWDOWN BANNER
========================================================================== */
.pt-toasts {
/* toasts outrank every scrim (busted overlay z-60, sheets) — feedback
must never paint underneath the thing that caused it */
position: absolute; top: 16px; right: 16px; z-index: 70;
display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
pointer-events: none;
}
.pt-toast {
display: inline-flex; align-items: baseline; gap: 8px;
padding: 8px 14px; border-radius: 8px;
background: var(--sal-glass);
border: 1px solid var(--sal-brass-faint); border-left: 3px solid var(--sal-brass);
box-shadow: var(--sal-sh);
font: 600 12px/1.4 var(--sal-mono); color: var(--sal-ivory-2);
font-variant-numeric: tabular-nums;
animation: pt-toast-in 260ms var(--sal-ease) backwards;
}
.pt-toast b { color: var(--sal-ivory); font-weight: 700; }
.pt-toast .pt-toast-seat {
font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
color: var(--sal-brass-ink);
}
.pt-toast--win { border-left-color: var(--sal-gold-hi); }
.pt-toast--fold { border-left-color: var(--sal-ivory-dim); opacity: 0.85; }
@keyframes pt-toast-in {
from { transform: translateY(-8px); opacity: 0; }
}
/* client adds .is-leaving then removes node on transitionend */
.pt-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity var(--sal-t) var(--sal-ease), transform var(--sal-t) var(--sal-ease); }
/* showdown banner — centered over the felt */
.pt-showdown {
position: relative; z-index: 6;
width: min(560px, 92%); margin: 0 auto;
padding: 18px 26px 20px; text-align: center; border-radius: 12px;
background:
radial-gradient(80% 120% at 50% 0%, rgba(87,22,32,0.35), transparent 70%),
linear-gradient(180deg, #1a120b, #100a05 80%);
border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.12), var(--sal-sh);
animation: pt-showdown-in 420ms var(--sal-ease-deal) backwards;
}
@keyframes pt-showdown-in {
from { transform: translateY(10px) scale(0.97); opacity: 0; }
}
.pt-showdown-eyebrow {
display: block; margin-bottom: 6px;
font: 600 9.5px/1 var(--sal-mono); letter-spacing: 2.6px; text-transform: uppercase;
color: var(--sal-ivory-dim);
}
.pt-showdown-rake {
font: 400 11px/1 var(--sal-serif); font-style: italic;
color: var(--sal-ivory-dim); margin-left: 6px; letter-spacing: 0.4px;
}
.pt-showdown-winner {
display: block; font: 600 15px/1.3 var(--sal-mono); letter-spacing: 0.6px;
color: var(--sal-ivory); margin-bottom: 2px;
font-variant-numeric: tabular-nums;
}
/* (the old .pt-showdown-hand / -pot / -rule board-line flourish is gone —
the pill now reads eyebrow + winner + the named hand below, and the
community cards stay visible on the felt behind it) */
/* "with Two Pair, Kings & Nines" — what the pot was won with, in gold */
.pt-showdown-with {
display: block; margin: 1px 0 3px;
font: 400 clamp(15px, 1.6vw, 19px)/1.2 var(--sal-serif); letter-spacing: 0.4px;
}
.pt-showdown-with b {
background: linear-gradient(180deg, #f6e7bd, var(--sal-gold-hi) 42%, var(--sal-brass) 92%);
-webkit-background-clip: text; background-clip: text; color: transparent;
font-weight: 400;
}
/* re-triggerable entrance (client toggles .is-in each showdown) */
.pt-showdown.is-in { animation: pt-showdown-in 460ms var(--sal-ease-deal) backwards; }
.pt-toast .pt-toast-with { color: var(--sal-brass-ink); font-style: italic; }
/* the exact five cards that make the winning hand — a warm gold frame that
pulses once, on the board and in the winner's revealed hand alike */
.pt-card--win {
outline: 2px solid var(--sal-gold-hi);
outline-offset: 1px;
box-shadow: 0 0 0 1px rgba(236,211,146,0.5), 0 0 16px 2px rgba(236,211,146,0.5);
animation: pt-card-win 1600ms var(--sal-ease) 260ms 2;
z-index: 3;
}
@keyframes pt-card-win {
0%, 100% { box-shadow: 0 0 0 1px rgba(236,211,146,0.4), 0 0 10px 1px rgba(236,211,146,0.35); }
50% { box-shadow: 0 0 0 1px rgba(236,211,146,0.7), 0 0 22px 5px rgba(236,211,146,0.7); }
}
/* losing hands that flipped face-up recede so the winner reads first */
.pt-seat.is-mucked-loser .pt-hole { filter: grayscale(0.65) brightness(0.72); opacity: 0.8; transition: filter var(--sal-t) var(--sal-ease), opacity var(--sal-t) var(--sal-ease); }
/* every SHOWN hand is called by name at the showdown — a small plaque under
the pod ("Two Pair", "Pair of Aces"); the winner's is struck in gold */
.pt-hand-tag {
display: inline-block; margin-top: 3px; padding: 2px 9px 3px;
border-radius: 999px; white-space: nowrap;
font: 400 10.5px/1.25 var(--sal-serif); letter-spacing: 0.5px;
color: var(--sal-ivory-2);
background: rgba(0,0,0,0.52);
border: 1px solid var(--sal-brass-dim);
animation: pt-showdown-in 360ms var(--sal-ease-deal) 200ms backwards;
}
.pt-hand-tag--win {
color: var(--sal-smoke-2); font-weight: 600;
background: linear-gradient(180deg, var(--sal-gold-hi), var(--sal-brass) 92%);
border-color: var(--sal-gold-hi);
}
/* staggered showdown flip — cards are inserted already .is-revealed, so the
turn plays as a keyframe (with a per-card delay), not a transition */
.pt-flip.is-revealed .pt-flip-inner {
animation: pt-flip-turn 560ms var(--sal-ease) backwards;
animation-delay: calc(var(--flip-i, 0) * 140ms);
}
@keyframes pt-flip-turn { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
/* ==========================================================================
RESPONSIVE — 1440 desktop down to tablet
========================================================================== */
@media (max-width: 1100px) {
:root { --pt-card-w: 46px; --pt-pod-w: 118px; --pt-avatar: 40px; }
.pt-board { --pt-card-w: 50px; }
.pt-seat--hero { --pt-pod-w: 138px; --pt-avatar: 46px; }
.pt-seat--hero .pt-hole { --pt-card-w: 52px; margin-bottom: -24px; }
.pt-table { aspect-ratio: 1.75 / 1; margin: 72px auto 108px; }
}
@media (max-width: 820px) {
:root { --pt-card-w: 40px; --pt-pod-w: 100px; --pt-avatar: 34px; }
.pt-board { --pt-card-w: 42px; gap: 5px; }
.pt-seat--hero { --pt-pod-w: 118px; --pt-avatar: 40px; }
.pt-seat--hero .pt-hole { --pt-card-w: 46px; margin-bottom: -20px; }
.pt-seat:not(.pt-seat--hero) .pt-hole { --pt-card-w: 28px; }
.pt-table { aspect-ratio: 1.5 / 1; margin: 64px auto 100px; }
.pt-name { font-size: 11.5px; }
.pt-stack { font-size: 11px; }
.pt-dock { margin-top: -44px; padding: 11px 12px; }
.pt-act { min-width: 72px; padding: 10px 12px; letter-spacing: 1px; }
.pt-dock-read { display: none; }
.pt-pot-amt { font-size: 13px; }
.pt-chip { width: 21px; height: 21px; }
.pt-chipstack .pt-chip { margin-top: -17px; }
.pt-chipstack .pt-chip:last-child { margin-top: 0; }
}
/* ==========================================================================
REDUCED MOTION — same information, zero movement.
Every one-shot animation keyframes FROM a displaced state into the
element's resting styles, so `animation: none` = the final state.
Infinite pulses (winner bloom, smoke) freeze lit; the flip lands revealed;
the countdown arc stays a static gauge (it is data, redrawn by the client).
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.saloon-stage::after { animation: none; transform: none; }
.pt-card.is-dealt, .pt-card.is-board-in,
.pt-bet.is-flying, .pt-pot.is-award,
.pt-toast, .pt-showdown { animation: none; }
.pt-card.is-mucked, .pt-hole.is-mucked .pt-card { animation: none; transition: none; }
.pt-pot.is-award { opacity: 0; } /* end state: pot gone */
.pt-seat.is-winner .pt-pod { animation: none; } /* static gold bloom */
.pt-showdown.is-in, .pt-card--win, .pt-hand-tag { animation: none; } /* frame stays lit */
.pt-flip-inner, .pt-flip.is-revealed .pt-flip-inner { transition: none; animation: none; }
.pt-toast.is-leaving { transition: none; }
.pt-seat, .pt-pod, .pt-timer, .pt-act, .pt-quick-chip {
transition-duration: 1ms;
}
}
/* ==========================================================================
PAGE SHELL (additive) — Saloon base/lobby/auth pages.
Everything above this line is the table kit — a FROZEN CONTRACT shared
with the table renderer; add page classes here, never edit the kit.
All .sal-* below is chrome for the player-facing shell: brass-line top
bar, felt-green lobby cards, modals, and the signup/auth stage.
Motion: transitions only (no keyframes), so reduced-motion needs nothing
beyond the kit's existing block.
========================================================================== */
.sal-shell { display: flex; flex-direction: column; gap: 26px; padding-top: 14px; }
/* --- top bar: one polished brass line under warm smoke ------------------- */
.sal-top {
display: flex; align-items: center; gap: clamp(14px, 3vw, 34px);
padding: 10px 6px 14px;
border-bottom: 1px solid var(--sal-brass-dim);
box-shadow: 0 1px 0 rgba(236,211,146,0.07);
}
.sal-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.sal-brand-img {
display: block; border-radius: 8px;
box-shadow: 0 0 0 1px var(--sal-brass-dim), 0 2px 8px rgba(0,0,0,0.6);
}
.sal-wordmark {
font: 400 22px/1 var(--sal-serif); color: var(--sal-ivory); letter-spacing: 0.6px;
}
.sal-wordmark .sal-brand-sub, .sal-brand-sub {
display: block; margin-top: 3px; font: 600 8.5px/1 var(--sal-mono); font-style: normal;
letter-spacing: 2.4px; text-transform: uppercase; color: var(--sal-brass-ink);
}
.sal-nav { display: flex; gap: clamp(6px, 1.6vw, 14px); flex: 1; min-width: 0; }
.sal-nav-link {
padding: 7px 12px; border-radius: 999px; text-decoration: none;
font: 600 11px/1 var(--sal-mono); letter-spacing: 1.8px; text-transform: uppercase;
color: var(--sal-ivory-dim); border: 1px solid transparent;
transition: color var(--sal-t) var(--sal-ease), border-color var(--sal-t) var(--sal-ease);
}
.sal-nav-link:hover { color: var(--sal-brass-ink); }
.sal-nav-link.is-active {
color: var(--sal-gold-hi); border-color: rgba(217,188,121,0.45);
background: rgba(176,141,70,0.10);
}
.sal-top-side { display: flex; align-items: center; gap: 14px; flex: none; }
/* admin world toggle (Flight Deck ⇄ Saloon) — mirror of the Flight Deck one,
in the saloon's brass/gold voice; staff only, players never see it */
.world-toggle {
display: inline-flex; align-items: center; padding: 2px; border-radius: 999px;
background: rgba(0,0,0,0.32); border: 1px solid var(--sal-brass-faint);
}
.world-toggle .wt-seg {
display: inline-block; padding: 3px 11px; border-radius: 999px;
font: 600 10px/1.4 var(--sal-mono); letter-spacing: 0.7px; text-transform: uppercase;
color: var(--sal-ivory-dim); text-decoration: none; white-space: nowrap;
transition: color var(--sal-t) var(--sal-ease), background var(--sal-t) var(--sal-ease);
}
.world-toggle a.wt-seg:hover { color: var(--sal-ivory); }
.world-toggle .wt-seg.is-on {
color: var(--sal-smoke);
background: linear-gradient(180deg, var(--sal-gold-hi), var(--sal-brass));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.sal-coins {
display: inline-flex; align-items: baseline; gap: 7px;
padding: 7px 13px; border-radius: 999px;
background: rgba(0,0,0,0.32); border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.sal-coins i { font-style: normal; font-size: 10px; color: var(--sal-brass); }
.sal-coins b {
font: 700 13.5px/1 var(--sal-mono); color: var(--sal-gold-hi);
font-variant-numeric: tabular-nums; letter-spacing: 0.4px;
}
.sal-user { display: flex; align-items: center; gap: 10px; }
.sal-user-name { font: 600 13px/1 var(--sal-serif); color: var(--sal-ivory-2); letter-spacing: 0.4px; }
.sal-logout {
cursor: pointer; padding: 6px 11px; border-radius: 999px;
font: 600 9.5px/1 var(--sal-mono); letter-spacing: 1.4px; text-transform: uppercase;
color: var(--sal-ivory-dim); background: none; border: 1px solid rgba(141,132,112,0.3);
transition: color var(--sal-t) var(--sal-ease), border-color var(--sal-t) var(--sal-ease);
}
.sal-logout:hover { color: var(--sal-brass-ink); border-color: var(--sal-brass-dim); }
/* --- flash messages ------------------------------------------------------ */
.sal-messages { display: flex; flex-direction: column; gap: 8px; }
.sal-msg {
padding: 9px 14px; border-radius: 8px;
background: var(--sal-glass); border: 1px solid var(--sal-brass-faint);
border-left: 3px solid var(--sal-brass);
font: 600 12px/1.4 var(--sal-mono); color: var(--sal-ivory-2);
}
.sal-msg--error { border-left-color: var(--sal-oxblood-pip); color: var(--sal-oxblood-ink); }
/* --- main column + footer ------------------------------------------------ */
.sal-main { flex: 1; width: min(1080px, 100%); margin: 0 auto; padding: 26px 20px 44px; }
/* The shell drives visibility with the hidden attribute; make sure no
display rule above can ever out-specificity it. */
.sal-shell [hidden] { display: none !important; }
.sal-foot {
margin-top: 30px; padding: 16px 0 0; text-align: center;
border-top: 1px solid var(--sal-line);
font: 600 10px/1.5 var(--sal-mono); letter-spacing: 2px; text-transform: uppercase;
color: var(--sal-ivory-dim);
}
.sal-foot--fixed { position: fixed; left: 0; right: 0; bottom: 14px; border-top: none; margin: 0; }
/* --- lobby --------------------------------------------------------------- */
.sal-lobby { display: flex; flex-direction: column; gap: 30px; }
.sal-hero { position: relative; text-align: center; padding: 14px 0 2px; }
/* faint house mark behind the greeting — lamplight on the wall, not wallpaper */
.sal-hero::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: 220px; height: 238px; transform: translate(-50%, -40%);
background: url("logo_kingston_640.png") center / contain no-repeat;
opacity: 0.05; pointer-events: none;
}
.sal-hero > * { position: relative; }
.sal-section { display: flex; flex-direction: column; gap: 12px; }
.sal-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sal-h {
margin: 0; font: 600 11px/1 var(--sal-mono); letter-spacing: 2.4px;
text-transform: uppercase; color: var(--sal-brass-ink);
}
.sal-cards {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
/* felt-green table card: a pool of lamplit felt with a brass edge */
.sal-card {
display: flex; flex-direction: column; gap: 8px;
padding: 15px 16px 14px; border-radius: 12px;
background:
radial-gradient(120% 90% at 50% 0%, rgba(240,220,160,0.05), transparent 55%),
radial-gradient(140% 130% at 50% 40%, var(--sal-felt-hi), var(--sal-felt) 60%, var(--sal-felt-deep) 100%);
border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.10), 0 4px 14px rgba(0,0,0,0.5);
transition: border-color var(--sal-t) var(--sal-ease), box-shadow var(--sal-t) var(--sal-ease);
}
.sal-card:hover { border-color: rgba(217,188,121,0.5); box-shadow: inset 0 1px 0 rgba(236,211,146,0.12), 0 6px 20px rgba(0,0,0,0.55); }
a.sal-card { text-decoration: none; color: inherit; cursor: pointer; }
.sal-card--mine { border-color: rgba(217,188,121,0.4); }
.sal-card-name {
margin: 0; font: 400 18px/1.25 var(--sal-serif); color: var(--sal-ivory);
letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sal-card-meta {
margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px;
font: 600 11px/1.5 var(--sal-mono); color: var(--sal-ivory-2);
font-variant-numeric: tabular-nums;
}
.sal-card-note { margin: 0; font: italic 400 12px/1.4 var(--sal-serif); color: var(--sal-ivory-dim); }
.sal-code {
padding: 1px 7px; border-radius: 999px; letter-spacing: 1.6px;
color: var(--sal-brass-ink); background: rgba(0,0,0,0.28);
border: 1px solid var(--sal-brass-faint);
}
.sal-empty {
grid-column: 1 / -1; margin: 0; padding: 22px;
text-align: center; border-radius: 12px;
border: 1px dashed var(--sal-brass-dim);
font: italic 400 14px/1.5 var(--sal-serif); color: var(--sal-ivory-dim);
}
.sal-invites { display: flex; flex-direction: column; gap: 8px; }
.sal-invite {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 11px 14px; border-radius: 10px;
background: linear-gradient(180deg, var(--sal-smoke-3), var(--sal-smoke-2));
border: 1px solid var(--sal-brass-dim); border-left: 3px solid var(--sal-brass);
}
.sal-invite-text { font: 400 14px/1.4 var(--sal-serif); color: var(--sal-ivory-2); }
.sal-invite-text b { color: var(--sal-gold-hi); font-weight: 400; }
.sal-invite-btns { display: flex; gap: 8px; }
/* --- The Rail: live floor ticker ------------------------------------------
A slow brass wire of live tables + tournaments under the top bar. The
track holds its content twice; one full loop = translateX(-50%). Pauses
on hover; reduced motion stops the crawl and lets it wrap statically. */
.sal-rail {
position: relative; z-index: 5;
display: flex; align-items: center; gap: 12px;
margin: 0 auto 4px; width: min(1080px, 100%);
padding: 5px 14px; border-radius: 999px;
background: linear-gradient(180deg, rgba(20,16,10,0.85), rgba(12,10,6,0.85));
border: 1px solid var(--sal-brass-faint);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.06);
}
.sal-rail-label {
flex: none; font: 600 9.5px/1 var(--sal-mono); letter-spacing: 2.2px;
text-transform: uppercase; color: var(--sal-brass-ink);
}
.sal-rail-window { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sal-rail-track {
display: inline-flex; align-items: baseline; gap: 18px; white-space: nowrap;
animation: sal-rail-crawl var(--rail-secs, 40s) linear infinite;
will-change: transform;
}
.sal-rail:hover .sal-rail-track { animation-play-state: paused; }
@keyframes sal-rail-crawl { to { transform: translateX(-50%); } }
.sal-rail-item {
font: 500 11.5px/1.6 var(--sal-mono); color: var(--sal-ivory-2);
text-decoration: none; letter-spacing: 0.4px;
}
.sal-rail-item b { color: var(--sal-gold-hi); font-weight: 600; }
.sal-rail-item:hover { color: var(--sal-ivory); }
.sal-rail-sep { color: var(--sal-brass-dim); font-size: 8px; margin-left: 18px; }
@media (prefers-reduced-motion: reduce) {
.sal-rail-track { animation: none; white-space: normal; }
}
/* --- ambient stage-dressing ------------------------------------------------
Ghost suits + chips live far behind everything; the ember canvas sits
above the wallpaper but below all content. Nothing is interactive. */
#sal-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.sal-dressing { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.sal-ghost {
position: absolute; font-family: var(--sal-serif);
color: rgba(236, 211, 146, 0.028); user-select: none;
animation: sal-ghost-drift 60s ease-in-out infinite alternate;
}
.sal-ghost--s { top: 6%; left: -2%; font-size: 34vmin; }
.sal-ghost--h { bottom: -8%; right: 2%; font-size: 30vmin; color: rgba(122, 38, 38, 0.05); animation-duration: 74s; }
.sal-ghost--c { top: 40%; right: -4%; font-size: 22vmin; animation-duration: 66s; animation-delay: -20s; }
.sal-ghost--d { bottom: 4%; left: 16%; font-size: 18vmin; color: rgba(122, 38, 38, 0.04); animation-duration: 82s; animation-delay: -40s; }
@keyframes sal-ghost-drift {
from { transform: translateY(-1.5vmin) rotate(-3deg); }
to { transform: translateY(2.5vmin) rotate(4deg); }
}
.sal-ghost-chip {
position: absolute; border-radius: 50%;
border: 1.2vmin dashed rgba(236, 211, 146, 0.03);
box-shadow: inset 0 0 0 1.1vmin rgba(20, 86, 63, 0.05);
animation: sal-ghost-drift 90s ease-in-out infinite alternate;
}
.sal-ghost-chip--a { width: 26vmin; height: 26vmin; top: 14%; right: 12%; }
.sal-ghost-chip--b { width: 15vmin; height: 15vmin; bottom: 18%; left: 4%; animation-delay: -30s; }
@media (prefers-reduced-motion: reduce) {
.sal-ghost, .sal-ghost-chip { animation: none; }
}
/* --- content fade-in: every section settles into the room ----------------- */
@keyframes sal-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sal-lobby > *, .ptr > * {
animation: sal-settle 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.sal-lobby > *:nth-child(2), .ptr > *:nth-child(2) { animation-delay: 90ms; }
.sal-lobby > *:nth-child(3), .ptr > *:nth-child(3) { animation-delay: 170ms; }
.sal-lobby > *:nth-child(4), .ptr > *:nth-child(4) { animation-delay: 250ms; }
.sal-lobby > *:nth-child(n+5), .ptr > *:nth-child(n+5) { animation-delay: 330ms; }
@media (prefers-reduced-motion: reduce) {
.sal-lobby > *, .ptr > * { animation: none; }
}
/* --- open seats: railbirds can pull up a chair ----------------------------- */
.pt-seat--open .pt-pod {
cursor: pointer; border-style: dashed; opacity: 0.55;
transition: opacity var(--sal-t) var(--sal-ease), box-shadow var(--sal-t) var(--sal-ease);
}
.pt-seat--open .pt-pod:hover { opacity: 1; box-shadow: var(--sal-bloom); }
.pt-seat--open .pt-open-label {
font: 600 10px/1.4 var(--sal-mono); letter-spacing: 1.6px;
text-transform: uppercase; color: var(--sal-brass-ink);
}
/* a taken-seat viewer just sees a faint empty marker (no invite to sit) */
.pt-seat--empty { opacity: 0.3; }
.pt-seat--empty .pt-pod {
background: rgba(10,8,5,0.4); border-style: dashed; box-shadow: none; cursor: default;
}
.pt-seat--empty .pt-pod:hover { opacity: 1; box-shadow: none; }
.pt-seat--empty .pt-avatar { background: rgba(20,16,10,0.5); box-shadow: inset 0 0 0 1px var(--sal-brass-faint); }
.pt-seat--empty .pt-open-label { color: var(--sal-ivory-dim); letter-spacing: 1.2px; }
/* --- notice board (Missions page) ---------------------------------------
Dark-wood mission cards pinned with a brass tack; felt-green progress
fill; an oxblood COLLECTED stamp once a reward is claimed. */
.sal-board { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.sal-note {
position: relative; display: flex; flex-direction: column; gap: 9px;
padding: 16px 16px 14px; border-radius: 12px; overflow: hidden;
background:
radial-gradient(130% 100% at 50% 0%, rgba(240,220,160,0.045), transparent 55%),
linear-gradient(180deg, var(--sal-smoke-3), var(--sal-smoke-2));
border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.08), 0 4px 14px rgba(0,0,0,0.5);
}
.sal-note::before { /* brass pin */
content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
width: 7px; height: 7px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--sal-brass-hi), var(--sal-brass) 60%, #6d5a2e);
box-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.sal-note--weekly { border-color: rgba(217,188,121,0.42); }
.sal-note-title { margin: 4px 0 0; font: 400 17px/1.25 var(--sal-serif); color: var(--sal-ivory); }
.sal-note-flavor { margin: 0; font: italic 400 12.5px/1.45 var(--sal-serif); color: var(--sal-ivory-dim); }
.sal-note-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.sal-note-progress { flex: 1; height: 7px; border-radius: 999px; background: rgba(0,0,0,0.45);
border: 1px solid var(--sal-brass-faint); overflow: hidden; }
.sal-note-progress i {
display: block; height: 100%; border-radius: inherit;
background: linear-gradient(90deg, var(--sal-felt-hi), #2f8a63);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
transition: width 400ms var(--sal-ease);
}
.sal-note-count { font: 600 11px/1 var(--sal-mono); color: var(--sal-ivory-2); font-variant-numeric: tabular-nums; }
.sal-note-reward { font: 600 12px/1 var(--sal-mono); color: var(--sal-brass-ink); letter-spacing: 0.6px; }
.sal-note-reward i { font-style: normal; opacity: 0.8; }
.sal-note.is-claimed { opacity: 0.78; }
.sal-stamp {
position: absolute; right: 10px; top: 12px; transform: rotate(8deg);
padding: 3px 9px; border-radius: 4px;
border: 1.5px solid var(--sal-oxblood-pip); color: var(--sal-oxblood-ink);
font: 700 10px/1 var(--sal-mono); letter-spacing: 2.4px; text-transform: uppercase;
background: rgba(0,0,0,0.25);
}
.sal-plaques { display: flex; gap: 14px; flex-wrap: wrap; }
.sal-plaque {
flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px;
padding: 13px 16px; border-radius: 10px; text-align: center;
background: linear-gradient(180deg, rgba(217,188,121,0.10), rgba(217,188,121,0.03));
border: 1px solid var(--sal-brass-dim);
}
.sal-plaque b { font: 400 20px/1.1 var(--sal-serif); color: var(--sal-gold-hi); }
.sal-plaque span { font: 600 10px/1.4 var(--sal-mono); letter-spacing: 1.8px; text-transform: uppercase; color: var(--sal-ivory-dim); }
.sal-plaque.is-lit { border-color: rgba(217,188,121,0.5); box-shadow: var(--sal-bloom); }
/* --- company page (Friends) ----------------------------------------------
Friend cards on dark wood; a small brass lamp dot when they're at the
tables; "the wire" activity feed in ledger voice. */
.sal-mates { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sal-mate {
display: flex; flex-direction: column; gap: 10px;
padding: 15px 16px 13px; border-radius: 12px;
background: linear-gradient(180deg, var(--sal-smoke-3), var(--sal-smoke-2));
border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.08), 0 4px 14px rgba(0,0,0,0.5);
}
.sal-mate-head { display: flex; align-items: center; gap: 10px; }
.sal-mate-name { flex: 1; font: 400 17px/1.2 var(--sal-serif); color: var(--sal-ivory); }
.sal-mate-name small { display: block; font: 500 10px/1.5 var(--sal-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--sal-ivory-dim); }
.sal-dot {
width: 8px; height: 8px; border-radius: 50%; flex: none;
background: #4a4436; box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
}
.sal-dot.on {
background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--sal-brass) 70%);
box-shadow: 0 0 8px 1px rgba(236,211,146,0.55);
}
.sal-mate-stats {
display: flex; gap: 4px 16px; flex-wrap: wrap;
font: 600 11px/1.5 var(--sal-mono); color: var(--sal-ivory-2);
font-variant-numeric: tabular-nums;
}
.sal-mate-stats i { font-style: normal; color: var(--sal-ivory-dim); }
.sal-mate-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.sal-feed { display: flex; flex-direction: column; gap: 0; }
.sal-feed-row {
display: flex; align-items: baseline; gap: 10px;
padding: 9px 4px; border-bottom: 1px solid var(--sal-line);
font: 400 13.5px/1.5 var(--sal-serif); color: var(--sal-ivory-2);
}
.sal-feed-row:last-child { border-bottom: none; }
.sal-feed-row b { color: var(--sal-gold-hi); font-weight: 400; }
.sal-feed-kind { flex: none; width: 16px; text-align: center; color: var(--sal-brass-ink); }
.sal-feed-at { margin-left: auto; flex: none; font: 500 10px/1.5 var(--sal-mono); letter-spacing: 1px; color: var(--sal-ivory-dim); }
/* --- buttons (shell voice; the dock button .pt-act stays table-only) ----- */
.sal-btn {
cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
padding: 9px 16px; border-radius: 8px;
font: 700 11px/1 var(--sal-mono); letter-spacing: 1.6px; text-transform: uppercase;
color: var(--sal-brass-ink);
background: linear-gradient(180deg, #2b2013, #191006 70%, #120b04 100%);
border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.16), inset 0 -3px 6px rgba(0,0,0,0.5), 0 3px 8px rgba(0,0,0,0.55);
transition: filter var(--sal-t) var(--sal-ease), transform 60ms var(--sal-ease);
}
.sal-btn:hover { filter: brightness(1.22); }
.sal-btn:active { transform: translateY(1px); }
.sal-btn--brass {
color: #221604;
background: linear-gradient(180deg, var(--sal-gold-hi), #c9a45c 45%, var(--sal-brass) 100%);
border-color: #6d5527;
box-shadow: inset 0 1px 0 rgba(255,246,220,0.75), inset 0 -3px 6px rgba(90,64,20,0.55), 0 3px 10px rgba(0,0,0,0.6);
text-shadow: 0 1px 0 rgba(255,246,220,0.5);
}
.sal-btn--brass:hover { filter: brightness(1.08); }
.sal-btn--quiet {
color: var(--sal-ivory-dim); border-color: rgba(141,132,112,0.28);
background: linear-gradient(180deg, #1c1812, #110d08 70%, #0c0905 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -3px 6px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.45);
}
.sal-btn--block { width: 100%; margin-top: 6px; }
.sal-join { align-self: flex-start; margin-top: 4px; }
/* --- modals -------------------------------------------------------------- */
/* ==========================================================================
THE MODALS — a chart table in the captain's cabin. Kings and pirates:
brass corner rivets, a wax-seal header rule, parchment-warm ink on
lamplit smoke. Every modal in the Saloon uses this one kit, and the
shell's delegated controller (saloon_base.html) opens/closes them, so
no page can ship a popup that silently fails.
========================================================================== */
.sal-modal {
position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
padding: 18px; overscroll-behavior: contain;
}
.sal-modal[hidden] { display: none !important; }
.sal-modal-scrim {
position: absolute; inset: 0;
background:
radial-gradient(80% 60% at 50% 40%, rgba(20,12,4,0.6), rgba(4,3,2,0.86) 75%);
backdrop-filter: blur(2px);
animation: sal-scrim-in 220ms var(--sal-ease) backwards;
}
@keyframes sal-scrim-in { from { opacity: 0; } }
.sal-modal-card {
position: relative; width: min(460px, 100%);
max-height: min(88vh, 900px); overflow-y: auto; overscroll-behavior: contain;
display: flex; flex-direction: column; gap: 13px;
padding: 24px 26px 20px; border-radius: 16px;
background:
radial-gradient(120% 70% at 50% -10%, rgba(240,220,160,0.09), transparent 62%),
linear-gradient(180deg, #1d140c, #0d0803 88%);
border: 1px solid var(--sal-brass-dim);
box-shadow:
inset 0 1px 0 rgba(236,211,146,0.16),
inset 0 0 0 1px rgba(236,211,146,0.05),
0 30px 70px -20px rgba(0,0,0,0.95);
animation: sal-card-in 300ms var(--sal-ease-deal) backwards;
scrollbar-width: thin; scrollbar-color: var(--sal-brass-dim) transparent;
}
@keyframes sal-card-in {
from { opacity: 0; transform: translateY(14px) scale(0.97); }
}
.sal-modal-card::-webkit-scrollbar { width: 8px; }
.sal-modal-card::-webkit-scrollbar-thumb {
background: var(--sal-brass-dim); border-radius: 99px;
}
/* brass corner rivets — the cabin's chart table, bolted down */
.sal-modal-card::before, .sal-modal-card::after {
content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--sal-gold-hi), var(--sal-brass) 60%, #4a3714);
box-shadow: 0 0 6px -1px rgba(236,211,146,0.5);
pointer-events: none;
}
.sal-modal-card::before { left: 11px; top: 11px; }
.sal-modal-card::after { right: 11px; top: 11px; }
/* the header: title struck in gold, a wax-seal rule beneath */
.sal-modal-card .sal-h {
margin: 2px 0 0; padding-bottom: 12px; text-align: center;
font: 400 clamp(19px, 2.4vw, 23px)/1.2 var(--sal-serif); letter-spacing: 0.6px;
background: linear-gradient(180deg, #f6e7bd, var(--sal-gold-hi) 46%, var(--sal-brass) 92%);
-webkit-background-clip: text; background-clip: text; color: transparent;
position: relative;
}
.sal-modal-card .sal-h::after {
content: "❦"; position: absolute; left: 50%; bottom: -2px;
transform: translateX(-50%);
font-size: 11px; color: var(--sal-brass);
background: transparent; -webkit-text-fill-color: var(--sal-brass);
padding: 0 10px;
}
.sal-modal-card .sal-h::before {
content: ""; position: absolute; left: 8%; right: 8%; bottom: 4px; height: 1px;
background: linear-gradient(90deg, transparent, var(--sal-brass-dim) 20%,
var(--sal-brass-dim) 80%, transparent);
}
.sal-modal-btns {
display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px;
padding-top: 14px; border-top: 1px solid var(--sal-line);
position: sticky; bottom: -20px;
background: linear-gradient(180deg, transparent, #0d0803 40%);
}
@media (prefers-reduced-motion: reduce) {
.sal-modal-scrim, .sal-modal-card { animation: none; }
}
/* --- forms --------------------------------------------------------------- */
.sal-field {
display: flex; flex-direction: column; gap: 6px; min-width: 0;
font: 600 10px/1 var(--sal-mono); letter-spacing: 1.8px; text-transform: uppercase;
color: var(--sal-ivory-dim);
}
.sal-field-row { display: flex; gap: 12px; }
.sal-field-row .sal-field { flex: 1; }
.sal-input {
width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 8px;
font: 500 14px/1.3 var(--sal-serif); letter-spacing: 0.3px;
color: var(--sal-ivory); background: rgba(0,0,0,0.34);
border: 1px solid var(--sal-brass-faint);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
transition: border-color var(--sal-t) var(--sal-ease);
}
.sal-input:focus { outline: none; border-color: rgba(217,188,121,0.55); }
.sal-fine { margin: 0; font: 400 12.5px/1.5 var(--sal-serif); color: var(--sal-ivory-dim); }
.sal-fine a { color: var(--sal-brass-ink); }
.sal-err { font: 600 10.5px/1.4 var(--sal-mono); letter-spacing: 0.4px; text-transform: none; color: var(--sal-oxblood-ink); }
/* --- auth stage (signup) ------------------------------------------------- */
/* Auth stages are exactly one screen: min-height already spends 100vh, so
the stage padding must not add a phantom scrollbar on top of it. */
.sal-auth { display: grid; place-items: center; box-sizing: border-box; min-height: 100svh; padding-block: 0; }
.sal-auth-card {
width: min(400px, 100%);
display: flex; flex-direction: column; gap: 12px; text-align: center;
padding: 30px 30px 26px; border-radius: 16px;
background:
radial-gradient(90% 55% at 50% 0%, rgba(240,220,160,0.06), transparent 60%),
linear-gradient(180deg, #17100a, #0e0905 85%);
border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.12), var(--sal-sh);
}
.sal-auth-card form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.sal-auth-logo {
margin: 0 auto 2px; display: block; border-radius: 10px;
box-shadow: 0 0 0 1px var(--sal-brass-dim), 0 0 26px rgba(217,188,121,0.18), 0 4px 12px rgba(0,0,0,0.6);
}
.sal-auth-alt { margin-top: 6px; text-align: center; }
/* --- monogram avatars (web/avatars.py — palette + glyph, no uploads) ----- */
.sal-avatar {
--av: 40px;
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: var(--av); height: var(--av); border-radius: 50%;
font: 600 calc(var(--av) * 0.38)/1 var(--sal-serif); letter-spacing: 0.5px;
color: var(--av-ink, var(--sal-smoke));
background: radial-gradient(120% 120% at 30% 20%, var(--av-hi, #d9bc79), var(--av-lo, #8a6c34) 78%);
box-shadow: 0 0 0 1px var(--sal-brass-dim), 0 3px 10px -3px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(255,255,255,0.25);
user-select: none;
}
.sal-avatar--xl { --av: 92px; }
.av-p-brass { --av-hi: #ecd392; --av-lo: #8a6c34; --av-ink: #14100a; }
.av-p-emerald { --av-hi: #1f7a58; --av-lo: #062b1f; --av-ink: #f2e8d3; }
.av-p-oxblood { --av-hi: #7e1f26; --av-lo: #2b0a12; --av-ink: #f2e8d3; }
.av-p-midnight { --av-hi: #1a527d; --av-lo: #0a2136; --av-ink: #f2e8d3; }
.av-p-slate { --av-hi: #3a434d; --av-lo: #171b20; --av-ink: #f2e8d3; }
.av-p-ivory { --av-hi: #fbf5e6; --av-lo: #cbbf9f; --av-ink: #1c1a16; }
.av-p-violet { --av-hi: #4a3770; --av-lo: #241a38; --av-ink: #f2e8d3; }
.av-p-aqua { --av-hi: #17646a; --av-lo: #0a2f33; --av-ink: #f2e8d3; }
/* seat avatars consume the monogram palettes when the payload carries
one — the SAME av-p-* custom props the .sal-avatar component uses */
.pt-avatar[class*="av-p-"] {
background: radial-gradient(120% 120% at 30% 20%,
var(--av-hi, #d9bc79), var(--av-lo, #8a6c34) 78%);
color: var(--av-ink, var(--sal-smoke));
}
/* free player-card banners (web/avatars.BANNERS -> .pb- on the
profile header) — personalization costs nothing */
.pb-felt { background: radial-gradient(120% 160% at 20% 0%, var(--sal-felt-hi), var(--sal-felt-deep) 80%); }
.pb-oxblood { background: radial-gradient(120% 160% at 20% 0%, #6e2029, #2b0a12 80%); }
.pb-midnight { background: radial-gradient(120% 160% at 20% 0%, #1a527d, #0a2136 80%); }
.pb-gold { background: radial-gradient(120% 160% at 20% 0%, rgba(217,188,121,0.5), #2c2009 80%); }
.pb-slate { background: radial-gradient(120% 160% at 20% 0%, #3a434d, #171b20 80%); }
.pb-violet { background: radial-gradient(120% 160% at 20% 0%, #4a3770, #241a38 80%); }
.pb-corsair { background: radial-gradient(120% 160% at 20% 0%, #145059, #061f23 80%); }
.pb-blacksail { background: radial-gradient(120% 160% at 20% 0%, #1a1d26, #04050a 80%); }
.pb-speakeasy { background: radial-gradient(120% 160% at 20% 0%, #4f3a22, #1e150b 80%); }
.pb-famiglia { background: radial-gradient(120% 160% at 20% 0%, #571620, #12060a 80%); }
.pro-head--banner {
padding: 18px; border-radius: 14px;
border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.1), 0 10px 30px -14px rgba(0,0,0,0.8);
}
/* the engraved motto + its calligraphies (web/trophies.MOTTO_STYLES).
Special styles UNLOCK via trophies — never priced. */
.pro-motto { margin: 6px 0 0; font: 400 14px/1.5 var(--sal-serif); color: var(--sal-ivory-2); }
.ms-serif { font-style: italic; letter-spacing: 0.3px; }
.ms-smallcaps { font-variant: small-caps; letter-spacing: 1.4px;
font-family: var(--sal-mono); font-size: 12.5px; }
.ms-script { font-style: italic; letter-spacing: 0.9px; font-size: 16px; }
.ms-gilded { font-style: italic; font-size: 16px; letter-spacing: 0.6px;
background: linear-gradient(180deg, #f6e7bd, var(--sal-gold-hi) 45%, var(--sal-brass) 92%);
-webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-bounty { color: var(--sal-oxblood-ink); letter-spacing: 0.6px; font-weight: 600; }
.ms-royal { color: #b7a6e0; font-variant: small-caps; letter-spacing: 1.6px; }
.ms-corsair { color: #6fb5bd; font-style: italic; letter-spacing: 1px;
text-transform: uppercase; font-size: 12.5px; }
.ms-vendetta { color: var(--sal-oxblood-ink); font-style: italic; font-size: 16px;
letter-spacing: 0.8px; text-shadow: 0 1px 6px rgba(126,31,38,0.35); }
/* PIRATE KINGS: a black flag flown, and a privateer's rolling hand. */
.ms-blackflag { color: #e6e6ec; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; font-size: 12px;
text-shadow: 0 0 10px rgba(230,230,236,0.35), 0 1px 0 #000; }
.ms-privateer { color: var(--sal-brass-ink); font-style: italic; font-size: 15px;
letter-spacing: 0.4px; transform: rotate(-1.2deg); display: inline-block;
text-shadow: 0 1px 5px rgba(236,211,146,0.28); }
/* the trophy case: rings, belts and the rest — earned, never bought */
.pro-trophies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pro-trophy {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 11px 5px; border-radius: 999px; white-space: nowrap;
font: 400 11.5px/1.3 var(--sal-serif); letter-spacing: 0.4px;
color: var(--sal-brass-ink);
background: rgba(0,0,0,0.35);
border: 1px solid var(--sal-brass-dim);
}
.pro-trophy i { font-style: normal; font-size: 13px; }
.pro-trophy.is-locked { color: var(--sal-ivory-dim); border-color: var(--sal-line); opacity: 0.65; }
.pro-trophy.is-locked i { filter: grayscale(1); opacity: 0.7; }
/* crew pot controls on your own card */
.pro-pot-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
/* settings: banner swatches (rounded-square cloths) + calligraphy picker */
.set-banner { border-radius: 10px; }
.set-styles { margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.set-style b { font-weight: 400; font-size: 13px; height: auto; padding: 10px 8px; }
.set-style.is-locked { cursor: not-allowed; }
.set-style.is-locked b { opacity: 0.5; }
/* lobby table tiles: each stakes tier wears its OWN frame — a fuller
treatment than the cloth edge (owner ask: "different frames on the
table cards") */
.sal-card--t-emerald { border-color: rgba(38,142,101,0.4); }
.sal-card--t-sapphire { border-color: rgba(56,124,190,0.45);
box-shadow: inset 0 0 0 1px rgba(56,124,190,0.18), 0 2px 5px rgba(0,0,0,0.5); }
.sal-card--t-oxblood { border-color: rgba(160,60,70,0.5);
box-shadow: inset 0 0 0 1px rgba(160,60,70,0.22), inset 0 1px 0 rgba(201,106,106,0.15), 0 2px 5px rgba(0,0,0,0.5); }
.sal-card--t-highroller {
border-color: var(--sal-gold-hi);
box-shadow: inset 0 0 0 1px var(--sal-brass-dim), inset 0 0 18px -8px rgba(236,211,146,0.5), 0 2px 8px rgba(0,0,0,0.55);
}
.sal-card--t-highroller::after {
content: "º6"; position: absolute; top: 6px; right: 10px;
font-size: 12px; color: var(--sal-brass-ink); opacity: 0.8;
}
.sal-card--t-highroller { position: relative; }
/* --- THE BOARD: players' own asks, pinned up for backers to read ------- */
.sal-board { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.sal-board-h {
margin: 4px 0 2px;
font: 600 9.5px/1 var(--sal-mono); letter-spacing: 2.4px;
text-transform: uppercase; color: var(--sal-brass-ink);
}
/* an ask reads like a note pinned to the board: a brass tack, warm paper */
.sal-invite--ask {
position: relative; padding-left: 24px;
border-color: var(--sal-brass-dim);
background:
linear-gradient(90deg, rgba(236,211,146,0.05), transparent 40%),
rgba(0,0,0,0.25);
}
.sal-invite--ask::before {
content: ""; position: absolute; left: 9px; top: 50%;
width: 7px; height: 7px; margin-top: -3px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--sal-gold-hi),
var(--sal-brass) 60%, #4a3714);
box-shadow: 0 0 6px -1px rgba(236,211,146,0.55);
}
.sal-invite--ask i { color: var(--sal-ivory-2); }
/* the player's form, one line under the ask — what a backer reads first */
.sal-ask-form {
display: block; margin-top: 3px;
font: 400 10.5px/1.5 var(--sal-mono); color: var(--sal-brass-ink);
opacity: 0.9;
}
/* landmark labels under the share slider (1% … a full horse) */
.sal-share-marks {
display: flex; justify-content: space-between; margin-top: 2px;
font: 400 9px/1 var(--sal-mono); letter-spacing: 0.6px;
color: var(--sal-ivory-dim); text-transform: none;
}
.sal-share-marks i { font-style: normal; }
.sal-share-marks i:last-child { color: var(--sal-brass-ink); }
/* --- the brass switch (the advisor's monitor toggle) -------------------- */
.pt-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pt-sw-track {
position: relative; width: 30px; height: 16px; border-radius: 99px;
background: rgba(0,0,0,0.55); border: 1px solid var(--sal-line-2);
transition: background var(--sal-t) var(--sal-ease),
border-color var(--sal-t) var(--sal-ease),
box-shadow var(--sal-t) var(--sal-ease);
flex: none;
}
.pt-sw-thumb {
position: absolute; top: 1px; left: 1px; width: 12px; height: 12px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #8a7a55, #5b4c2e 65%);
transition: left 160ms var(--sal-ease), background var(--sal-t) var(--sal-ease);
}
.pt-switch input:checked + .pt-sw-track {
background: rgba(236,211,146,0.16); border-color: var(--sal-brass-dim);
box-shadow: 0 0 8px -2px rgba(236,211,146,0.55);
}
.pt-switch input:checked + .pt-sw-track .pt-sw-thumb {
left: 15px;
background: radial-gradient(circle at 35% 30%, var(--sal-gold-hi), var(--sal-brass) 65%);
}
.pt-switch input:focus-visible + .pt-sw-track {
outline: 2px solid var(--sal-brass); outline-offset: 2px;
}
.pt-sw-label { user-select: none; }
/* --- THE ADVISOR (admin only): the intelligence watching your seat ------ */
.pt-adv {
position: fixed; left: 16px; bottom: 16px; z-index: 30; width: min(320px, 92vw);
border-radius: 14px; overflow: hidden;
background: linear-gradient(180deg, rgba(22,16,10,0.97), rgba(10,7,4,0.97));
border: 1px solid var(--sal-brass-dim);
box-shadow: 0 18px 44px -18px rgba(0,0,0,0.9);
font: 400 12.5px/1.5 var(--sal-serif); color: var(--sal-ivory-2);
}
.pt-adv-head {
display: flex; align-items: center; gap: 8px; padding: 8px 12px;
border-bottom: 1px solid var(--sal-line);
background: linear-gradient(180deg, rgba(236,211,146,0.07), transparent);
font: 600 10px/1 var(--sal-mono); letter-spacing: 1.6px; text-transform: uppercase;
color: var(--sal-brass-ink);
}
.pt-adv-head b { font-weight: 600; }
.pt-adv-dot {
width: 7px; height: 7px; border-radius: 50%; flex: none;
background: var(--sal-ivory-dim); transition: background var(--sal-t) var(--sal-ease);
}
.pt-adv-dot.is-on {
background: var(--sal-gold-hi);
box-shadow: 0 0 8px 1px rgba(236,211,146,0.7);
animation: pt-adv-pulse 1.6s var(--sal-ease) infinite;
}
@keyframes pt-adv-pulse { 50% { opacity: 0.45; } }
.pt-adv-sub {
font: 400 9px/1.3 var(--sal-mono); letter-spacing: 0.4px;
color: var(--sal-ivory-dim); text-transform: none;
}
.pt-adv-watch {
margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
font: 400 10px/1 var(--sal-mono); letter-spacing: 0.6px;
color: var(--sal-ivory-dim); text-transform: none;
}
.pt-adv-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.pt-adv-call {
font: 400 clamp(17px, 2vw, 21px)/1.2 var(--sal-serif); letter-spacing: 0.4px;
color: var(--sal-ivory-dim);
}
.pt-adv.is-live .pt-adv-call {
background: linear-gradient(180deg, #f6e7bd, var(--sal-gold-hi) 46%, var(--sal-brass) 92%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.pt-adv.is-thinking .pt-adv-call { opacity: 0.55; }
.pt-adv-meta { font: 400 11px/1.4 var(--sal-mono); color: var(--sal-ivory-dim); }
.pt-adv-why { font-size: 12px; color: var(--sal-ivory-2); }
.pt-adv-read { font: 400 10.5px/1.4 var(--sal-mono); color: var(--sal-brass-ink); opacity: 0.85; }
.pt-adv .sal-btn { align-self: flex-start; padding: 5px 11px; font-size: 11px; }
@media (max-width: 900px) { .pt-adv { position: static; width: auto; margin: 10px 0; } }
@media (prefers-reduced-motion: reduce) { .pt-adv-dot.is-on { animation: none; } }
/* the header username is now a door to your own player card */
a.sal-user-name { text-decoration: none; }
a.sal-user-name:hover { color: var(--sal-ivory); }
/* --- the front-door dressing: falling chips, brass frame, red pulse ------ */
/* Standalone stages only (login door, welcome splash). Pure CSS, zero
assets; everything is aria-hidden, sits BEHIND the card (z-index 0 vs
the card's 2), and goes still under prefers-reduced-motion. */
.door-dressing { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.door-frame {
position: absolute; inset: 14px; border-radius: 10px;
border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px var(--sal-brass-faint);
}
/* FIRELIGHT — flames burn somewhere off-stage: a red-orange glow breathes
up from the bottom of the room (two layers at different tempos, never a
hard shape), and embers climb off it. This is the "red" of the door —
atmosphere, not dots. */
/* ==========================================================================
PIRATE KINGS — the skyline off the firelight.
Black sails standing against the glow with pennants snapping at the
masthead, and ship lanterns swaying above the floor. Silhouettes only:
they read as HOLES in the light, never as objects, so the fire still owns
the room. Pure CSS, no assets, all of it pointer-events:none and behind
the content. Every animation resolves to its resting state, so
prefers-reduced-motion simply stops it mid-pose.
========================================================================== */
.door-sails, .door-lanterns { position: absolute; inset: 0; pointer-events: none; }
.door-sail {
position: absolute; bottom: 0; transform-origin: bottom center;
width: clamp(150px, 22vmin, 340px);
background: linear-gradient(180deg, rgba(11,9,6,0.5), rgba(11,9,6,0.9));
clip-path: polygon(50% 0, 88% 92%, 12% 92%);
opacity: 0.85;
}
/* the mast, and the yard-arm across it */
.door-sail::before {
content: ""; position: absolute; left: 50%; top: -6%; width: 2px; height: 106%;
margin-left: -1px; background: linear-gradient(180deg, #1a0b06, #2a120a);
opacity: 0.9;
}
.door-sail::after {
content: ""; position: absolute; left: 22%; right: 22%; top: 8%; height: 2px;
background: linear-gradient(90deg, transparent, #2a120a 20%, #2a120a 80%, transparent);
opacity: 0.75;
}
.door-sail--l { left: 6%; height: 44vh; }
.door-sail--c { left: 50%; height: 58vh; margin-left: -11vmin; opacity: 0.7; }
.door-sail--r { right: 8%; height: 36vh; }
/* the black flag at the masthead */
.door-pennant {
position: absolute; left: 50%; top: -6%; width: 26px; height: 15px;
background: linear-gradient(90deg, rgba(20,17,12,0.96), rgba(11,9,6,0.8));
clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%);
transform-origin: left center;
animation: door-flagwave 3.4s var(--sal-ease) infinite;
}
.door-sail--c .door-pennant { animation-duration: 4.6s; }
.door-sail--r .door-pennant { animation-duration: 2.9s; width: 20px; }
@keyframes door-flagwave {
0%, 100% { transform: skewY(-2deg) scaleX(0.96); }
50% { transform: skewY(3deg) scaleX(1); }
}
/* hanging ship lanterns — the warm foreground beat */
.door-lantern {
position: absolute; top: 0; width: 14px; height: 20px;
transform-origin: top center;
animation: door-lanternsway 7s var(--sal-ease) infinite;
}
.door-lantern::before { /* the cord it hangs from */
content: ""; position: absolute; left: 50%; top: -9vh; width: 1px; height: 9vh;
background: linear-gradient(180deg, transparent, rgba(236,211,146,0.16));
}
.door-lantern::after { /* the flame in its glass */
content: ""; position: absolute; inset: 0; border-radius: 40% 40% 46% 46%;
background: radial-gradient(circle at 50% 62%, rgba(255,196,110,0.85),
rgba(226,138,52,0.45) 55%, transparent 78%);
box-shadow: 0 0 22px 6px rgba(236,150,60,0.16);
animation: door-lanternglow 4.2s var(--sal-ease) infinite;
}
.door-lantern--n1 { left: 12%; top: 11vh; }
.door-lantern--n2 { left: 34%; top: 7vh; animation-duration: 8.5s; }
.door-lantern--n3 { right: 28%; top: 13vh; animation-duration: 6.2s; }
.door-lantern--n4 { right: 9%; top: 8vh; animation-duration: 9.1s; }
@keyframes door-lanternsway {
0%, 100% { transform: rotate(-2.2deg); }
50% { transform: rotate(2.2deg); }
}
@keyframes door-lanternglow { 50% { opacity: 0.62; } }
@media (prefers-reduced-motion: reduce) {
.door-pennant, .door-lantern, .door-lantern::after { animation: none; }
}
.door-fire {
position: absolute; left: 0; right: 0; bottom: 0; height: 46vh;
pointer-events: none;
background:
radial-gradient(58% 95% at 16% 102%, rgba(126,31,38,0.36), transparent 70%),
radial-gradient(52% 85% at 84% 102%, rgba(126,31,38,0.32), transparent 70%),
radial-gradient(85% 60% at 50% 106%, rgba(201,90,60,0.20), transparent 75%);
transform-origin: bottom center;
animation: door-firebreathe 6.5s var(--sal-ease) infinite;
}
.door-fire::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(38% 55% at 28% 103%, rgba(224,120,70,0.18), transparent 70%),
radial-gradient(34% 50% at 72% 103%, rgba(224,120,70,0.15), transparent 70%);
animation: door-flicker 1.3s var(--sal-ease) infinite;
}
@keyframes door-firebreathe {
0%, 100% { opacity: 0.55; transform: scaleY(0.86); }
22% { opacity: 0.95; transform: scaleY(1.12); }
38% { opacity: 0.7; transform: scaleY(0.94); }
58% { opacity: 1; transform: scaleY(1.22); }
74% { opacity: 0.65; transform: scaleY(0.9); }
}
@keyframes door-flicker {
0%, 100% { opacity: 0.5; transform: scaleY(0.97); }
30% { opacity: 0.95; transform: scaleY(1.03); }
55% { opacity: 0.6; }
80% { opacity: 0.88; transform: scaleY(1.01); }
}
.door-fire--ambient { animation-duration: 6.5s; opacity: 0.5; }
.door-fire--ambient::after { animation-duration: 2.2s; }
/* embers: hot particles climbing off the fire — drift, shrink, die out */
.door-embers { position: absolute; inset: 0; pointer-events: none; }
.door-ember {
position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%;
background: radial-gradient(circle, #ffd9a0 0 30%, #e07846 60%, rgba(126,31,38,0) 100%);
filter: drop-shadow(0 0 6px rgba(224,120,70,0.8));
opacity: 0;
animation: door-ember-rise 5s linear infinite;
}
@keyframes door-ember-rise {
0% { transform: translate(0, 0) scale(1); opacity: 0; }
8% { opacity: 0.95; }
60% { opacity: 0.7; }
100% { transform: translate(var(--em-dx, 20px), -80vh) scale(0.2); opacity: 0; }
}
.door-ember:nth-child(1) { left: 4%; --em-dx: 26px; animation-duration: 5.2s; animation-delay: -1.0s; }
.door-ember:nth-child(2) { left: 11%; --em-dx: -18px; animation-duration: 4.1s; animation-delay: -3.2s; width: 4px; height: 4px; }
.door-ember:nth-child(3) { left: 19%; --em-dx: 34px; animation-duration: 6.4s; animation-delay: -2.1s; }
.door-ember:nth-child(4) { left: 27%; --em-dx: -24px; animation-duration: 4.7s; animation-delay: -0.4s; width: 3px; height: 3px; }
.door-ember:nth-child(5) { left: 34%; --em-dx: 16px; animation-duration: 5.8s; animation-delay: -4.4s; }
.door-ember:nth-child(6) { left: 43%; --em-dx: -30px; animation-duration: 3.8s; animation-delay: -1.7s; width: 4px; height: 4px; }
.door-ember:nth-child(7) { left: 51%; --em-dx: 22px; animation-duration: 6.9s; animation-delay: -5.3s; width: 3px; height: 3px; }
.door-ember:nth-child(8) { left: 58%; --em-dx: -14px; animation-duration: 4.4s; animation-delay: -2.8s; }
.door-ember:nth-child(9) { left: 66%; --em-dx: 30px; animation-duration: 5.5s; animation-delay: -0.9s; width: 4px; height: 4px; }
.door-ember:nth-child(10) { left: 73%; --em-dx: -22px; animation-duration: 4.0s; animation-delay: -3.7s; }
.door-ember:nth-child(11) { left: 81%; --em-dx: 18px; animation-duration: 6.1s; animation-delay: -1.4s; width: 3px; height: 3px; }
.door-ember:nth-child(12) { left: 88%; --em-dx: -28px; animation-duration: 4.9s; animation-delay: -4.1s; }
.door-ember:nth-child(13) { left: 95%; --em-dx: 14px; animation-duration: 5.6s; animation-delay: -2.4s; width: 4px; height: 4px; }
.door-ember:nth-child(14) { left: 15%; --em-dx: 40px; animation-duration: 7.3s; animation-delay: -6.0s; width: 3px; height: 3px; }
.door-ember:nth-child(15) { left: 47%; --em-dx: -36px; animation-duration: 6.6s; animation-delay: -5.0s; width: 3px; height: 3px; }
.door-ember:nth-child(16) { left: 84%; --em-dx: 32px; animation-duration: 7.0s; animation-delay: -3.5s; width: 3px; height: 3px; }
/* SMOKE hanging at the top of the room — two soft layers drifting on
opposite slow currents, blurred so they never read as shapes */
.door-smoke {
position: absolute; left: 0; right: 0; top: 0; height: 42vh; pointer-events: none;
background:
radial-gradient(70% 80% at 22% -12%, rgba(18,15,12,0.6), transparent 70%),
radial-gradient(60% 70% at 70% -16%, rgba(24,20,16,0.52), transparent 72%),
radial-gradient(95% 55% at 46% -8%, rgba(58,50,42,0.3), transparent 76%);
filter: blur(7px);
animation: door-smoke-drift 16s var(--sal-ease) infinite alternate;
}
.door-smoke::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(50% 60% at 38% -14%, rgba(30,26,22,0.42), transparent 70%),
radial-gradient(44% 55% at 84% -10%, rgba(44,38,32,0.3), transparent 72%);
animation: door-smoke-drift 11s var(--sal-ease) infinite alternate-reverse;
}
@keyframes door-smoke-drift {
from { transform: translateX(-2.5%) scaleY(1); opacity: 0.85; }
to { transform: translateX(2.5%) scaleY(1.1); opacity: 1; }
}
.door-smoke--ambient { opacity: 0.5; }
/* ASH: burnt flakes sinking from the smoke — slow, swaying, tumbling */
.door-ashes { position: absolute; inset: 0; pointer-events: none; }
.door-ash {
position: absolute; top: -8px; width: 4px; height: 3px;
border-radius: 60% 40% 55% 45%;
background: rgba(178,168,156,0.5);
opacity: 0;
animation: door-ash-fall 12s linear infinite;
}
@keyframes door-ash-fall {
0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
6% { opacity: 0.55; }
78% { opacity: 0.4; }
100% { transform: translate(var(--ash-dx, -30px), 108vh) rotate(320deg); opacity: 0; }
}
.door-ash:nth-child(1) { left: 6%; --ash-dx: -40px; animation-duration: 12.5s; animation-delay: -3.0s; }
.door-ash:nth-child(2) { left: 14%; --ash-dx: 30px; animation-duration: 10.2s; animation-delay: -7.4s; width: 3px; height: 2px; }
.door-ash:nth-child(3) { left: 24%; --ash-dx: -24px; animation-duration: 14.8s; animation-delay: -1.8s; }
.door-ash:nth-child(4) { left: 33%; --ash-dx: 44px; animation-duration: 11.4s; animation-delay: -9.1s; width: 5px; height: 4px; }
.door-ash:nth-child(5) { left: 45%; --ash-dx: -32px; animation-duration: 13.6s; animation-delay: -5.2s; width: 3px; height: 2px; }
.door-ash:nth-child(6) { left: 55%; --ash-dx: 22px; animation-duration: 9.8s; animation-delay: -2.7s; }
.door-ash:nth-child(7) { left: 64%; --ash-dx: -46px; animation-duration: 15.4s; animation-delay: -11.0s; width: 3px; height: 3px; }
.door-ash:nth-child(8) { left: 73%; --ash-dx: 34px; animation-duration: 10.9s; animation-delay: -4.4s; }
.door-ash:nth-child(9) { left: 82%; --ash-dx: -20px; animation-duration: 12.1s; animation-delay: -8.3s; width: 5px; height: 3px; }
.door-ash:nth-child(10) { left: 91%; --ash-dx: 40px; animation-duration: 13.0s; animation-delay: -0.9s; width: 3px; height: 2px; }
.door-ash:nth-child(11) { left: 38%; --ash-dx: -36px; animation-duration: 16.2s; animation-delay: -12.5s; width: 3px; height: 2px; }
.door-ash:nth-child(12) { left: 58%; --ash-dx: 26px; animation-duration: 14.1s; animation-delay: -6.6s; }
.door-ember:nth-child(17) { left: 8%; --em-dx: -34px; animation-duration: 5.9s; animation-delay: -2.6s; }
.door-ember:nth-child(18) { left: 25%; --em-dx: 28px; animation-duration: 4.6s; animation-delay: -1.1s; width: 4px; height: 4px; }
.door-ember:nth-child(19) { left: 38%; --em-dx: -16px; animation-duration: 6.7s; animation-delay: -4.9s; width: 3px; height: 3px; }
.door-ember:nth-child(20) { left: 54%; --em-dx: 36px; animation-duration: 5.1s; animation-delay: -0.6s; }
.door-ember:nth-child(21) { left: 63%; --em-dx: -26px; animation-duration: 7.6s; animation-delay: -5.7s; width: 3px; height: 3px; }
.door-ember:nth-child(22) { left: 71%; --em-dx: 20px; animation-duration: 4.3s; animation-delay: -2.2s; width: 4px; height: 4px; }
.door-ember:nth-child(23) { left: 90%; --em-dx: -38px; animation-duration: 6.2s; animation-delay: -3.9s; }
.door-ember:nth-child(24) { left: 98%; --em-dx: 24px; animation-duration: 5.4s; animation-delay: -1.8s; width: 3px; height: 3px; }
.door-embers--ambient .door-ember { animation-duration: 8s; filter: drop-shadow(0 0 4px rgba(224,120,70,0.5)); opacity: 0; }
.door-embers--ambient .door-ember:nth-child(n+11) { display: none; }
.door-ashes--ambient .door-ash { opacity: 0; animation-duration: 18s; }
.door-ashes--ambient .door-ash:nth-child(n+7) { display: none; }
/* a poker chip face, drawn in CSS: eight rim spots (repeating conic),
a colored center inlay with a dashed collar, and a lamplight sheen */
.door-chip {
display: block; width: 38px; height: 38px; border-radius: 50%;
background:
radial-gradient(circle at 32% 26%, rgba(255,255,255,0.32), transparent 42%),
radial-gradient(circle, var(--chip-c2, #8a6c34) 0 53%, transparent 54%),
repeating-conic-gradient(var(--chip-c1, #b08d46) 0 26deg,
var(--chip-cs, #f2e8d3) 26deg 45deg);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.35),
inset 0 0 8px rgba(0,0,0,0.3),
0 6px 14px -4px rgba(0,0,0,0.75);
}
.door-chip::before {
content: ""; position: absolute; inset: 8px; border-radius: 50%;
border: 1px dashed rgba(242,232,211,0.55);
}
.door-chip--red { --chip-c1: #7e1f26; --chip-c2: #571620; --chip-cs: #e8dcc0; }
.door-chip--ivory { --chip-c1: #cbbf9f; --chip-c2: #f2e8d3; --chip-cs: #571620; }
.door-chip--ivory::before { border-color: rgba(87,22,32,0.55); }
@keyframes door-redpulse {
0%, 100% { filter: drop-shadow(0 0 2px rgba(126,31,38,0.3)); }
50% { filter: drop-shadow(0 0 12px rgba(201,106,106,0.8)); }
}
/* chips in FREE FALL past the sides of the centered card: the wrapper
drops under gravity (accelerating bezier) while swaying on the air;
the chip itself TUMBLES in 3D through the wrapper's perspective —
full face, edge-on, full face — the way a real chip falls. Sizes,
tempos and phases all differ so no two chips move alike. */
.door-fall { position: absolute; top: 0; bottom: 0; width: 140px; }
.door-fall--l { left: clamp(8px, 12vw, 220px); }
.door-fall--r { right: clamp(8px, 12vw, 220px); }
.door-fall-chip {
position: absolute; top: -70px; perspective: 420px;
animation: door-drop 7s cubic-bezier(0.42, 0.05, 0.85, 0.55) infinite,
door-sway 2.3s var(--sal-ease) infinite;
}
.door-fall-chip .door-chip { animation: door-tumble 1.7s linear infinite; }
.door-fall-chip:nth-child(1) { left: 4%; animation-delay: 0s, 0.4s; }
.door-fall-chip:nth-child(2) { left: 56%; animation-delay: -2.4s, 0s; scale: 0.82; }
.door-fall-chip:nth-child(3) { left: 26%; animation-delay: -4.6s, 0.9s; scale: 0.68; }
.door-fall-chip:nth-child(4) { left: 76%; animation-delay: -6.1s, 0.2s; scale: 0.92; }
.door-fall-chip:nth-child(5) { left: 42%; animation-delay: -3.3s, 1.3s; scale: 0.58; }
.door-fall-chip:nth-child(2) .door-chip { animation-duration: 1.35s; animation-direction: reverse; }
.door-fall-chip:nth-child(3) .door-chip { animation-duration: 2.2s; }
.door-fall-chip:nth-child(4) .door-chip { animation-duration: 1.5s; }
.door-fall-chip:nth-child(5) .door-chip { animation-duration: 1.9s; animation-direction: reverse; }
.door-fall-chip:nth-child(6) { left: 12%; animation-delay: -1.6s, 0.7s; scale: 0.75; }
.door-fall-chip:nth-child(7) { left: 64%; animation-delay: -5.4s, 1.1s; scale: 0.88; }
.door-fall-chip:nth-child(8) { left: 34%; animation-delay: -0.8s, 0.5s; scale: 0.62; }
.door-fall-chip:nth-child(6) .door-chip { animation-duration: 1.25s; }
.door-fall-chip:nth-child(7) .door-chip { animation-duration: 2.4s; animation-direction: reverse; }
.door-fall-chip:nth-child(8) .door-chip { animation-duration: 1.6s; }
.door-fall--r .door-fall-chip { animation-duration: 8.4s, 2.8s; }
/* red chips breathe while they fall (filter rides the wrapper — the chip's
own transform tumble is never touched) */
.door-fall-chip--red {
animation: door-drop 7s cubic-bezier(0.42, 0.05, 0.85, 0.55) infinite,
door-sway 2.3s var(--sal-ease) infinite,
door-redpulse 2.4s var(--sal-ease) infinite;
}
.door-fall--r .door-fall-chip--red { animation-duration: 8.4s, 2.8s, 2.4s; }
/* ambient rain for the shell: a few faint chips drifting down on every
saloon page — slower, half-seen, never near the content columns */
.door-fall--ambient { opacity: 0.3; width: 90px; }
.door-fall--ambient .door-fall-chip { animation-duration: 13s, 3.4s; }
.door-fall--ambient.door-fall--l { left: clamp(4px, 4vw, 70px); }
.door-fall--ambient.door-fall--r { right: clamp(4px, 4vw, 70px); }
@media (max-width: 1100px) { .door-fall--ambient { display: none; } }
@keyframes door-drop { from { top: -70px; } to { top: 110vh; } }
@keyframes door-sway { 0%, 100% { margin-left: -9px; } 50% { margin-left: 11px; } }
@keyframes door-tumble {
from { transform: rotateZ(12deg) rotateX(0deg); }
to { transform: rotateZ(192deg) rotateX(1080deg); }
}
/* chip TOWERS banked in the bottom corners — seen from the SIDE, the way
stacks sit on a rail. Each is one chip edge-on (a striped pill).
BACKGROUND ONLY: banks sit in their own dark ground shadow, the base
chips are sunk in darkness and the light climbs to the lamplit top; a
scaled-back depth row (.door-stack--back) plus a perspective lean give
the pile its dimension. Red towers breathe. */
.door-bank { position: absolute; bottom: 10px; width: 880px; height: 380px;
opacity: 0.6; pointer-events: none;
transform: perspective(900px) rotateX(6deg); transform-origin: bottom center;
animation: door-bank-rise 1100ms var(--sal-ease-deal) 200ms backwards; }
.door-bank--l { left: 18px; }
.door-bank--r { right: 18px; }
@keyframes door-bank-rise {
from { transform: perspective(900px) rotateX(6deg) translateY(90px); opacity: 0; }
}
/* the dark ground the towers rise out of */
.door-bank::before {
content: ""; position: absolute; left: -10%; right: -10%; bottom: -12px; height: 56px;
background: radial-gradient(62% 100% at 50% 62%, rgba(0,0,0,0.78), transparent 76%);
}
.door-stack { position: absolute; bottom: 0; width: 64px; }
/* explicit slots (front row s1-s5, depth row b1-b2) — markup order free */
.door-stack--s1 { left: 0; }
.door-stack--s2 { left: 58px; }
.door-stack--s3 { left: 116px; }
.door-stack--s4 { left: 174px; }
.door-stack--s5 { left: 232px; }
.door-stack--s6 { left: 290px; }
.door-stack--s7 { left: 348px; }
.door-stack--s8 { left: 406px; }
.door-stack--s9 { left: 464px; }
.door-stack--s10 { left: 522px; }
.door-stack--s11 { left: 580px; }
.door-stack--s12 { left: 638px; }
.door-stack--s13 { left: 696px; }
.door-stack--s14 { left: 754px; }
.door-stack--s15 { left: 812px; }
/* the depth row: further from the lamp — smaller, darker, half a step up */
.door-stack--back {
transform: scale(0.82); transform-origin: bottom center;
bottom: 34px; z-index: -1; filter: brightness(0.6) saturate(0.85);
}
.door-stack--b1 { left: 30px; }
.door-stack--b2 { left: 148px; }
.door-stack--b3 { left: 262px; }
.door-stack--b4 { left: 376px; }
.door-stack--b5 { left: 490px; }
.door-stack--b6 { left: 604px; }
.door-stack--b7 { left: 718px; }
.door-stack--b8 { left: 806px; }
/* a third bank bridges the middle on wide stages */
.door-bank--c { left: 50%;
transform: translateX(-50%) perspective(900px) rotateX(6deg);
animation-name: door-bank-rise-c; }
@keyframes door-bank-rise-c {
from { transform: translateX(-50%) perspective(900px) rotateX(6deg) translateY(90px); opacity: 0; }
}
.door-stack i {
position: absolute; left: 0; width: 64px; height: 14px; border-radius: 7px;
background:
linear-gradient(180deg, rgba(255,255,255,0.2), transparent 50%),
repeating-linear-gradient(90deg,
var(--ec, #b08d46) 0 9px, var(--ec-s, #f2e8d3) 9px 15px);
box-shadow:
inset 0 -3px 4px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.18),
0 1px 2px rgba(0,0,0,0.55);
}
/* each chip sits on the one below (11px step = a 3px overlap) */
.door-stack i:nth-child(1) { bottom: 0; }
.door-stack i:nth-child(2) { bottom: 11px; }
.door-stack i:nth-child(3) { bottom: 22px; }
.door-stack i:nth-child(4) { bottom: 33px; }
.door-stack i:nth-child(5) { bottom: 44px; }
.door-stack i:nth-child(6) { bottom: 55px; }
.door-stack i:nth-child(7) { bottom: 66px; }
.door-stack i:nth-child(8) { bottom: 77px; }
.door-stack i:nth-child(9) { bottom: 88px; }
.door-stack i:nth-child(10) { bottom: 99px; }
.door-stack i:nth-child(11) { bottom: 110px; }
.door-stack i:nth-child(12) { bottom: 121px; }
.door-stack i:nth-child(13) { bottom: 132px; }
.door-stack i:nth-child(14) { bottom: 143px; }
.door-stack i:nth-child(15) { bottom: 154px; }
.door-stack i:nth-child(16) { bottom: 165px; }
.door-stack i:nth-child(17) { bottom: 176px; }
.door-stack i:nth-child(18) { bottom: 187px; }
.door-stack i:nth-child(19) { bottom: 198px; }
.door-stack i:nth-child(20) { bottom: 209px; }
.door-stack i:nth-child(21) { bottom: 220px; }
.door-stack i:nth-child(22) { bottom: 231px; }
.door-stack i:nth-child(23) { bottom: 242px; }
.door-stack i:nth-child(24) { bottom: 253px; }
.door-stack i:nth-child(25) { bottom: 264px; }
.door-stack i:nth-child(26) { bottom: 275px; }
.door-stack i:nth-child(27) { bottom: 286px; }
.door-stack i:nth-child(28) { bottom: 297px; }
.door-stack i:nth-child(29) { bottom: 308px; }
.door-stack i:nth-child(30) { bottom: 319px; }
/* the lamplight ladder: dark at the base, brightening toward the top */
.door-stack i:nth-child(1) { filter: brightness(0.48); }
.door-stack i:nth-child(2) { filter: brightness(0.56); }
.door-stack i:nth-child(3) { filter: brightness(0.64); }
.door-stack i:nth-child(4) { filter: brightness(0.72); }
.door-stack i:nth-child(5) { filter: brightness(0.8); }
.door-stack i:nth-child(6) { filter: brightness(0.88); }
/* the top chip catches the lamp — the stack's lit face */
.door-stack i:last-child {
filter: none;
background:
linear-gradient(180deg, rgba(255,255,255,0.42), transparent 60%),
repeating-linear-gradient(90deg,
var(--ec, #b08d46) 0 9px, var(--ec-s, #f2e8d3) 9px 15px);
}
.door-stack--red { --ec: #7e1f26; --ec-s: #e8dcc0;
animation: door-redpulse 2.8s var(--sal-ease) infinite; }
.door-bank--r .door-stack--red { animation-delay: 1.4s; }
.door-stack--ivory { --ec: #d9cdb2; --ec-s: #571620; }
.door-stack--emerald { --ec: #175e42; --ec-s: #f2e8d3; }
/* ambient towers for the shell (.sal-dressing hosts a pair on EVERY saloon
page, the live table included) — scaled down, faded further, red
breathing at half tempo: furniture, not fireworks */
.door-bank--ambient { opacity: 0.26; animation: none;
transform: perspective(900px) rotateX(6deg) scale(0.55);
transform-origin: bottom left; }
.door-bank--ambient.door-bank--r { transform-origin: bottom right; }
.door-bank--ambient .door-stack--red { animation-duration: 5.5s; }
@media (max-width: 720px) { .door-bank--ambient { display: none; } }
@media (max-width: 900px) { .door-fall { display: none; }
.door-bank { width: 180px; }
.door-stack--s4, .door-stack--s5, .door-stack--s6, .door-stack--s7,
.door-stack--s8, .door-stack--s9, .door-stack--s10, .door-stack--s11,
.door-stack--s12, .door-stack--s13, .door-stack--s14, .door-stack--s15,
.door-stack--b2, .door-stack--b3, .door-stack--b4, .door-stack--b5,
.door-stack--b6, .door-stack--b7, .door-stack--b8 { display: none; } }
@media (max-width: 1200px) { .door-bank--c { display: none; } }
@media (prefers-reduced-motion: reduce) {
.door-fall, .door-embers, .door-ashes { display: none; }
.door-bank, .door-chip, .door-stack--red,
.door-fire, .door-fire::after { animation: none !important; }
.door-fire { opacity: 0.6; }
.door-smoke, .door-smoke::after { animation: none; opacity: 0.6; } /* the glow stays, still */
}
/* --- THE MOTION PASS: designs + animations across every saloon page ------
Rules of the layer: page-LOAD entrances only ever target elements the
polls never re-create (top-level sections, tables rendered once); hover
and press micro-interactions are free everywhere; every animation dies
under prefers-reduced-motion at the bottom of this block. */
/* page content rises in, sections a beat apart */
.sal-main > * { animation: sal-rise-in 460ms var(--sal-ease-deal) backwards; }
.sal-main > *:nth-child(2) { animation-delay: 70ms; }
.sal-main > *:nth-child(3) { animation-delay: 140ms; }
.sal-main > *:nth-child(4) { animation-delay: 210ms; }
.sal-main > *:nth-child(n+5) { animation-delay: 280ms; }
@keyframes sal-rise-in {
from { opacity: 0; transform: translateY(10px); }
}
/* buttons: a real press, and a sheen that sweeps the brass on hover */
.sal-btn { transition: transform 120ms var(--sal-ease), border-color var(--sal-t) var(--sal-ease), color var(--sal-t) var(--sal-ease), box-shadow var(--sal-t) var(--sal-ease); }
.sal-btn:active { transform: translateY(1px) scale(0.985); }
.sal-btn--brass { position: relative; overflow: hidden; }
.sal-btn--brass::after {
content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%;
left: -50%; transform: skewX(-18deg);
background: linear-gradient(90deg, transparent, rgba(255,244,214,0.35), transparent);
transition: left 480ms var(--sal-ease);
pointer-events: none;
}
.sal-btn--brass:hover::after { left: 120%; }
/* nav: an underline that slides open under the standing link */
.sal-nav-link { position: relative; }
.sal-nav-link::after {
content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
height: 1px; background: var(--sal-brass-ink);
transform: scaleX(0); transform-origin: left center;
transition: transform 260ms var(--sal-ease);
}
.sal-nav-link:hover::after, .sal-nav-link.is-active::after { transform: scaleX(1); }
/* lobby / tourney cards: lift toward the lamp, tier edge brightens */
.sal-card { transition: transform 180ms var(--sal-ease), border-color var(--sal-t) var(--sal-ease), box-shadow 220ms var(--sal-ease); }
.sal-card:hover {
transform: translateY(-3px);
border-color: var(--sal-brass-dim);
box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 22px 44px -18px rgba(0,0,0,0.9),
inset 0 1px 0 rgba(236,211,146,0.12);
}
.sal-card .sal-card-name { transition: color var(--sal-t) var(--sal-ease); }
.sal-card:hover .sal-card-name { color: var(--sal-brass-ink); }
/* store: items lift, card-back previews tip like a dealt card */
.cos-item { transition: transform 180ms var(--sal-ease), border-color var(--sal-t) var(--sal-ease), box-shadow 220ms var(--sal-ease); }
.cos-item:hover { transform: translateY(-3px); border-color: var(--sal-brass-dim); }
.cos-preview { perspective: 500px; }
.cos-preview .pt-card { transition: transform 320ms var(--sal-ease); }
.cos-item:hover .cos-preview .pt-card { transform: rotateY(16deg) rotateZ(-2deg); }
.cos-preview .cos-felt { transition: box-shadow 300ms var(--sal-ease); }
.cos-item:hover .cos-preview .cos-felt { box-shadow: 0 0 22px -4px var(--sal-felt-glow); }
/* plaques: a touch of life under the pointer (numbers count up via JS) */
.sal-plaque { transition: transform 160ms var(--sal-ease), border-color var(--sal-t) var(--sal-ease); }
.sal-plaque:hover { transform: translateY(-2px); border-color: var(--sal-brass-dim); }
/* the coin chip pops whenever the balance moves (class from the shell JS) */
#sal-coins { transition: color var(--sal-t) var(--sal-ease); }
#sal-coins.is-bump { animation: sal-coin-bump 520ms var(--sal-ease-deal); }
@keyframes sal-coin-bump {
0% { transform: scale(1); }
35% { transform: scale(1.14); color: var(--sal-gold-hi); }
100% { transform: scale(1); }
}
/* leaderboard & co: server-rendered table rows deal in one after another */
.sal-shell tbody tr { animation: sal-row-in 360ms var(--sal-ease) backwards; }
.sal-shell tbody tr:nth-child(1) { animation-delay: 40ms; }
.sal-shell tbody tr:nth-child(2) { animation-delay: 80ms; }
.sal-shell tbody tr:nth-child(3) { animation-delay: 120ms; }
.sal-shell tbody tr:nth-child(4) { animation-delay: 160ms; }
.sal-shell tbody tr:nth-child(5) { animation-delay: 200ms; }
.sal-shell tbody tr:nth-child(6) { animation-delay: 240ms; }
.sal-shell tbody tr:nth-child(7) { animation-delay: 280ms; }
.sal-shell tbody tr:nth-child(8) { animation-delay: 320ms; }
.sal-shell tbody tr:nth-child(9) { animation-delay: 360ms; }
.sal-shell tbody tr:nth-child(n+10) { animation-delay: 400ms; }
@keyframes sal-row-in { from { opacity: 0; transform: translateX(-8px); } }
.sal-shell tbody tr { transition: background-color var(--sal-t) var(--sal-ease); }
.sal-shell tbody tr:hover { background-color: rgba(217,188,121,0.05); }
/* the bankroll sparkline draws itself (polyline carries pathLength=1) */
.home-spark polyline {
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: sal-spark-draw 1.3s var(--sal-ease) 300ms forwards;
}
.home-spark polygon { opacity: 0; animation: sal-spark-fill 600ms var(--sal-ease) 1.1s forwards; }
@keyframes sal-spark-draw { to { stroke-dashoffset: 0; } }
@keyframes sal-spark-fill { to { opacity: 1; } }
/* big avatars arrive like a chip set down on felt */
.sal-avatar--xl { animation: sal-av-in 420ms var(--sal-ease-deal) backwards; }
@keyframes sal-av-in {
from { opacity: 0; transform: scale(0.82) translateY(6px); }
}
.sal-avatar { transition: box-shadow var(--sal-t) var(--sal-ease), transform 160ms var(--sal-ease); }
a:hover > .sal-avatar, .set-swatch:hover .sal-avatar { box-shadow: 0 0 0 1px var(--sal-brass-dim), 0 0 16px -2px rgba(236,211,146,0.55), 0 3px 10px -3px rgba(0,0,0,0.7); }
/* drawer rows: a quiet slide toward the pointer */
.sal-frow { transition: background-color var(--sal-t) var(--sal-ease), padding-left 180ms var(--sal-ease); }
.sal-frow:hover { background-color: rgba(217,188,121,0.05); padding-left: 6px; }
/* messages/toasts arrive with intent */
.sal-msg { animation: sal-rise-in 360ms var(--sal-ease-deal) backwards; }
.pt-toast { animation: sal-toast-in 300ms var(--sal-ease-deal) backwards; }
@keyframes sal-toast-in { from { opacity: 0; transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) {
.sal-main > *, .sal-shell tbody tr, .sal-avatar--xl, .sal-msg, .pt-toast,
#sal-coins.is-bump { animation: none !important; }
.home-spark polyline { animation: none; stroke-dashoffset: 0; }
.home-spark polygon { animation: none; opacity: 1; }
.sal-btn--brass::after { display: none; }
.sal-btn:active, .sal-card:hover, .cos-item:hover, .sal-plaque:hover,
.cos-item:hover .cos-preview .pt-card { transform: none; }
}
/* --- shell responsive ---------------------------------------------------- */
@media (max-width: 900px) {
.sal-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pt-dock { padding: 10px 12px; gap: 10px; }
.pt-dock-read { min-width: 68px; }
.ptr-menu { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 720px) {
.sal-top { flex-wrap: wrap; }
.sal-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
.sal-user-name { display: none; }
.sal-field-row { flex-direction: column; }
.sal-plaques { gap: 8px; }
.sal-plaque { flex: 1 1 40%; }
.sal-rail { display: none; } /* the ticker steals no width on small screens */
.pt-chat { display: none; } /* chat needs a desk; phones keep the felt */
.sal-drawer { width: 100vw; border-left: none; }
}
/* --- FULLY RESPONSIVE: the phone tier (owner ask). Content first: every
grid single-columns cleanly, touch targets grow, nothing scrolls
sideways except things designed to (nav, table wells). --- */
@media (max-width: 520px) {
.sal-main { padding-left: 10px; padding-right: 10px; }
.sal-hero .saloon-title { font-size: 24px; }
.sal-cards { grid-template-columns: 1fr; }
.cos-grid, .cos-items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sal-section-head { flex-wrap: wrap; gap: 8px; }
.sal-invite { flex-wrap: wrap; gap: 6px; }
.sal-invite-btns { width: 100%; justify-content: flex-end; }
.sal-modal-card { width: 94vw; max-width: 94vw; max-height: 88vh; overflow-y: auto; }
.sal-btn { padding: 9px 13px; } /* thumbs, not cursors */
.sal-coins { font-size: 12px; }
.sal-brand-sub { display: none; }
.sal-messages { padding: 0 10px; }
.pro-head { gap: 12px; }
.pro-head .sal-avatar--xl { --av: 68px; }
.pro-trophies { gap: 4px; }
.pro-pot-row .sal-input { max-width: 110px; }
.set-glyphs { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.set-styles { grid-template-columns: 1fr 1fr; }
.door-bank--ambient { display: none; } /* phones keep every pixel for play */
.door-fall--ambient { display: none; }
.pt-toasts { left: 10px; right: 10px; top: 8px; }
.pt-toast { font-size: 12px; }
}
/* ==========================================================================
COSMETICS (additive) — the Cosmetics Store sink (web/cosmetics.py).
PURE VANITY, play chips only: each class recolours the BUYER'S OWN view.
Two entry points per class: the live table/shell (an equipped css_class
rides on , so `. .pt-…` scopes it) and the store swatch (the
class sits directly on the preview element, so `.pt-….` matches).
Every rule is ADDITIVE — the frozen .pt-* kit above is never edited; themes
only RE-POINT the felt custom properties, so the default (emerald) is left
exactly as-is. Motion: static styles + transitions only (no keyframes), so
the kit's reduced-motion block already covers everything here.
css_class conventions: theme- · back- · frame- · flair-
========================================================================== */
/* --- table felt themes: re-point the felt tokens ------------------------- */
/* The felt (.pt-felt), lobby cards (.sal-card) and store swatch (.cos-felt)
all read var(--sal-felt*), so overriding the tokens on the theme class
recolours them via inheritance (nearest ancestor wins — a store swatch's
own theme class beats the body's equipped theme, with no specificity war).
theme-emerald deliberately sets NOTHING: it is the untouched default. */
.theme-midnight {
--sal-felt: #123a5c; --sal-felt-hi: #1a527d; --sal-felt-deep: #0a2136;
--sal-felt-glow: rgba(60,120,190,0.30);
}
.theme-oxblood {
--sal-felt: #47161c; --sal-felt-hi: #611d25; --sal-felt-deep: #280b0f;
--sal-felt-glow: rgba(160,60,70,0.28);
}
.theme-slate {
--sal-felt: #2b323a; --sal-felt-hi: #3a434d; --sal-felt-deep: #171b20;
--sal-felt-glow: rgba(120,140,160,0.22);
}
.theme-highroller {
--sal-felt: #5a4416; --sal-felt-hi: #7d5f20; --sal-felt-deep: #2c2009;
--sal-felt-glow: rgba(217,188,121,0.30);
}
.theme-velvet {
--sal-felt: #34204d; --sal-felt-hi: #472c68; --sal-felt-deep: #1c1029;
--sal-felt-glow: rgba(140,90,200,0.26);
}
.theme-forest {
--sal-felt: #17331f; --sal-felt-hi: #21472c; --sal-felt-deep: #0b1c11;
--sal-felt-glow: rgba(60,140,80,0.26);
}
.theme-corsair {
--sal-felt: #0d3a40; --sal-felt-hi: #145059; --sal-felt-deep: #061f23;
--sal-felt-glow: rgba(50,150,160,0.26);
}
/* --- PIRATE KINGS: felts for the ones who took the crown by sea ------- */
.theme-jollyroger {
--sal-felt: #17161a; --sal-felt-hi: #24232a; --sal-felt-deep: #08080a;
--sal-felt-glow: rgba(226,226,232,0.20);
}
.theme-krakendeep {
--sal-felt: #0a2b26; --sal-felt-hi: #10403a; --sal-felt-deep: #041412;
--sal-felt-glow: rgba(60,180,150,0.24);
}
.theme-doubloon {
--sal-felt: #4a3410; --sal-felt-hi: #654718; --sal-felt-deep: #241806;
--sal-felt-glow: rgba(236,190,90,0.30);
}
.theme-speakeasy {
--sal-felt: #3a2a18; --sal-felt-hi: #4f3a22; --sal-felt-deep: #1e150b;
--sal-felt-glow: rgba(200,150,80,0.24);
}
/* --- the floor menu: one drawer on every saloon page --------------------- */
.sal-menu-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
font-size: 16px; line-height: 1; color: var(--sal-ivory-2);
background: rgba(0,0,0,0.3); border: 1px solid var(--sal-brass-dim);
transition: border-color var(--sal-t) var(--sal-ease), color var(--sal-t) var(--sal-ease);
}
.sal-menu-btn:hover { border-color: var(--sal-brass); color: var(--sal-ivory); }
.sal-menu-dot {
position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
border-radius: 50%; background: var(--sal-gold-hi);
box-shadow: 0 0 8px 1px rgba(236,211,146,0.6);
}
.sal-drawer-scrim { position: fixed; inset: 0; z-index: 64; background: rgba(4,3,1,0.55); }
.sal-drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 65;
width: min(340px, 92vw); padding: 18px 18px 26px; overflow-y: auto;
background: linear-gradient(180deg, var(--sal-smoke-2), var(--sal-smoke));
border-left: 1px solid var(--sal-brass-dim);
box-shadow: -24px 0 60px -22px rgba(0,0,0,0.85);
animation: sal-drawer-in 220ms var(--sal-ease) backwards;
}
@keyframes sal-drawer-in { from { transform: translateX(28px); opacity: 0; } }
.sal-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sal-drawer-title {
font: 600 11px/1 var(--sal-mono); letter-spacing: 2.6px; text-transform: uppercase;
color: var(--sal-brass-ink);
}
.sal-drawer-x {
background: none; border: 1px solid var(--sal-line); border-radius: 8px;
color: var(--sal-ivory-dim); cursor: pointer; padding: 4px 9px; font-size: 12px;
}
.sal-drawer-x:hover { color: var(--sal-ivory); border-color: var(--sal-brass-dim); }
.sal-drawer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.sal-drawer-nav a {
padding: 9px 11px; border-radius: 10px; text-decoration: none;
font: 400 13px/1.2 var(--sal-serif); color: var(--sal-ivory-2);
background: rgba(0,0,0,0.28); border: 1px solid var(--sal-line);
transition: border-color var(--sal-t) var(--sal-ease), color var(--sal-t) var(--sal-ease);
}
.sal-drawer-nav a:hover { border-color: var(--sal-brass-dim); color: var(--sal-ivory); }
.sal-drawer-sec { margin-bottom: 18px; }
.sal-drawer-h {
margin: 0 0 8px; font: 600 9.5px/1 var(--sal-mono);
letter-spacing: 2.2px; text-transform: uppercase; color: var(--sal-ivory-dim);
}
.sal-drawer-add { display: flex; gap: 6px; }
.sal-drawer-add .sal-input { flex: 1; min-width: 0; }
.sal-drawer-err { margin: 6px 0 0; }
.sal-frow {
display: flex; align-items: center; gap: 8px; padding: 7px 2px;
border-bottom: 1px solid var(--sal-line);
}
.sal-frow:last-child { border-bottom: none; }
.sal-frow-name {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font: 400 13.5px/1.3 var(--sal-serif); color: var(--sal-ivory);
}
.sal-frow-dim { font-style: normal; font-size: 11px; color: var(--sal-ivory-dim); }
.sal-frow-btns { display: flex; gap: 4px; flex: none; }
.sal-frow-btns .sal-btn { padding: 4px 10px; font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .sal-drawer { animation: none; } }
/* --- lobby cards wear their stakes tier ---------------------------------- */
/* the same cloth colours the felt itself wears; --tier feeds the accent
edge and the little swatch dot before the tier name */
.sal-card--t-emerald { --tier: var(--sal-felt-hi); }
.sal-card--t-sapphire { --tier: #155181; }
.sal-card--t-oxblood { --tier: #611d25; }
.sal-card--t-highroller { --tier: #7d5f20; }
.sal-card[class*="sal-card--t-"] { border-left: 3px solid var(--tier); }
.sal-tier { display: inline-flex; align-items: center; gap: 5px; color: var(--sal-ivory-2); }
.sal-tier::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
background: var(--tier, var(--sal-felt-hi));
box-shadow: 0 0 6px rgba(0,0,0,0.4), 0 0 6px var(--tier, transparent);
}
/* --- stakes tiers: the buy-in level sets the cloth ----------------------- */
/* saloon_table.html stamps data-stakes on the page root from table.bb:
emerald (<=10 — the untouched default, sets nothing) · sapphire (<=50) ·
oxblood (<=200) · highroller (beyond). Scoped with :not() so an EQUIPPED
paid felt theme on still outranks the free tier tint — the
cosmetic was bought, the tier is scenery. A new theme- class must be
added to these chains. */
body:not(.theme-midnight):not(.theme-oxblood):not(.theme-slate):not(.theme-highroller):not(.theme-velvet):not(.theme-forest):not(.theme-corsair):not(.theme-speakeasy):not(.theme-jollyroger):not(.theme-krakendeep):not(.theme-doubloon) .ptr[data-stakes="sapphire"] {
--sal-felt: #0e3d63; --sal-felt-hi: #155181; --sal-felt-deep: #071f33;
--sal-felt-glow: rgba(56,124,190,0.30);
}
body:not(.theme-midnight):not(.theme-oxblood):not(.theme-slate):not(.theme-highroller):not(.theme-velvet):not(.theme-forest):not(.theme-corsair):not(.theme-speakeasy):not(.theme-jollyroger):not(.theme-krakendeep):not(.theme-doubloon) .ptr[data-stakes="oxblood"] {
--sal-felt: #47161c; --sal-felt-hi: #611d25; --sal-felt-deep: #280b0f;
--sal-felt-glow: rgba(160,60,70,0.28);
}
body:not(.theme-midnight):not(.theme-oxblood):not(.theme-slate):not(.theme-highroller):not(.theme-velvet):not(.theme-forest):not(.theme-corsair):not(.theme-speakeasy):not(.theme-jollyroger):not(.theme-krakendeep):not(.theme-doubloon) .ptr[data-stakes="highroller"] {
--sal-felt: #5a4416; --sal-felt-hi: #7d5f20; --sal-felt-deep: #2c2009;
--sal-felt-glow: rgba(217,188,121,0.30);
}
/* --- card backs: field + lattice variants (.pt-card--back.back-) ----- */
/* back-house is the untouched default. Each colour variant sets its own
field/lattice and matches the crowned-K medallion to it. */
.back-crimson .pt-card--back, .pt-card--back.back-crimson {
background:
repeating-linear-gradient(45deg, rgba(217,188,121,0.16) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-45deg, rgba(217,188,121,0.16) 0 1px, transparent 1px 7px),
radial-gradient(100% 80% at 50% 30%, #6e2029, #300a0f 90%);
box-shadow: 0 2px 5px rgba(0,0,0,0.65), inset 0 0 0 1px var(--sal-brass),
inset 0 0 0 3px rgba(40,8,12,0.9), inset 0 0 0 4px var(--sal-brass-dim);
}
.back-crimson .pt-card--back::before, .pt-card--back.back-crimson::before {
background: radial-gradient(circle at 40% 30%, #7a2530, #300a0f 75%);
}
.back-azure .pt-card--back, .pt-card--back.back-azure {
background:
repeating-linear-gradient(45deg, rgba(150,190,230,0.18) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-45deg, rgba(150,190,230,0.18) 0 1px, transparent 1px 7px),
radial-gradient(100% 80% at 50% 30%, #1c4f7d, #08213a 90%);
box-shadow: 0 2px 5px rgba(0,0,0,0.65), inset 0 0 0 1px #9db8d0,
inset 0 0 0 3px rgba(8,33,58,0.9), inset 0 0 0 4px rgba(150,190,230,0.28);
}
.back-azure .pt-card--back::before, .pt-card--back.back-azure::before {
background: radial-gradient(circle at 40% 30%, #235f92, #08213a 75%);
}
.back-ivory .pt-card--back, .pt-card--back.back-ivory {
background:
repeating-linear-gradient(45deg, rgba(120,95,50,0.20) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-45deg, rgba(120,95,50,0.20) 0 1px, transparent 1px 7px),
radial-gradient(100% 80% at 50% 30%, #f3ead2, #d8c39a 90%);
box-shadow: 0 2px 5px rgba(0,0,0,0.5), inset 0 0 0 1px #b79b63,
inset 0 0 0 3px #f3ead2, inset 0 0 0 4px rgba(150,120,70,0.5);
}
.back-ivory .pt-card--back::before, .pt-card--back.back-ivory::before {
background: radial-gradient(circle at 40% 30%, #efe4c8, #cdb488 75%);
box-shadow: inset 0 0 0 1.5px #8a6f3c, 0 0 0 2px #efe4c8, 0 0 0 2.5px rgba(150,120,70,0.5);
color: #5a4a24;
}
.back-ivory .pt-card--back::after, .pt-card--back.back-ivory::after {
color: #4a3a1c; text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
/* new backs (2026-07-30 restock): noir gold-thread, royal violet weave */
/* Black Flag: bone-white bones on tarred sailcloth. */
.back-blackflag .pt-card--back, .pt-card--back.back-blackflag {
background:
repeating-linear-gradient(90deg, rgba(226,226,232,0.10) 0 1px, transparent 1px 9px),
radial-gradient(100% 80% at 50% 28%, #23222a, #08080a 92%);
box-shadow: 0 2px 5px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(226,226,232,0.5),
inset 0 0 0 3px rgba(8,8,10,0.92), inset 0 0 0 4px rgba(226,226,232,0.22);
}
.back-blackflag .pt-card--back::before, .pt-card--back.back-blackflag::before {
background: radial-gradient(circle at 50% 42%, rgba(232,232,238,0.30), transparent 62%);
}
/* Dead Reckoning: a compass rose in brass. */
.back-compass .pt-card--back, .pt-card--back.back-compass {
background:
conic-gradient(from 0deg at 50% 50%, rgba(236,211,146,0.16) 0 6deg, transparent 6deg 84deg,
rgba(236,211,146,0.16) 84deg 96deg, transparent 96deg 174deg,
rgba(236,211,146,0.16) 174deg 186deg, transparent 186deg 264deg,
rgba(236,211,146,0.16) 264deg 276deg, transparent 276deg 360deg),
radial-gradient(100% 80% at 50% 30%, #172433, #060a10 90%);
box-shadow: 0 2px 5px rgba(0,0,0,0.65), inset 0 0 0 1px var(--sal-gold-hi),
inset 0 0 0 3px rgba(6,10,16,0.9), inset 0 0 0 4px var(--sal-brass-dim);
}
.back-compass .pt-card--back::before, .pt-card--back.back-compass::before {
background: radial-gradient(circle at 50% 50%, rgba(236,211,146,0.42), transparent 55%);
}
.back-noir .pt-card--back, .pt-card--back.back-noir {
background:
repeating-linear-gradient(45deg, rgba(236,211,146,0.22) 0 1px, transparent 1px 8px),
repeating-linear-gradient(-45deg, rgba(236,211,146,0.22) 0 1px, transparent 1px 8px),
radial-gradient(100% 80% at 50% 30%, #1c1812, #060504 90%);
box-shadow: 0 2px 5px rgba(0,0,0,0.65), inset 0 0 0 1px var(--sal-gold-hi),
inset 0 0 0 3px rgba(8,6,4,0.9), inset 0 0 0 4px var(--sal-brass-dim);
}
.back-noir .pt-card--back::before, .pt-card--back.back-noir::before {
background: radial-gradient(circle at 40% 30%, #262019, #060504 75%);
}
.back-royal .pt-card--back, .pt-card--back.back-royal {
background:
repeating-linear-gradient(45deg, rgba(220,215,235,0.2) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-45deg, rgba(220,215,235,0.2) 0 1px, transparent 1px 7px),
radial-gradient(100% 80% at 50% 30%, #43306b, #1a1130 90%);
box-shadow: 0 2px 5px rgba(0,0,0,0.65), inset 0 0 0 1px #aeb6bf,
inset 0 0 0 3px rgba(22,14,40,0.9), inset 0 0 0 4px rgba(174,182,191,0.4);
}
.back-royal .pt-card--back::before, .pt-card--back.back-royal::before {
background: radial-gradient(circle at 40% 30%, #4d3a78, #1a1130 75%);
}
.back-sails .pt-card--back, .pt-card--back.back-sails {
background:
repeating-linear-gradient(90deg, rgba(226,213,184,0.14) 0 1px, transparent 1px 9px),
repeating-linear-gradient(0deg, rgba(226,213,184,0.1) 0 1px, transparent 1px 12px),
radial-gradient(100% 80% at 50% 30%, #12141a, #04050a 90%);
box-shadow: 0 2px 5px rgba(0,0,0,0.65), inset 0 0 0 1px #cbbf9f,
inset 0 0 0 3px rgba(4,5,10,0.9), inset 0 0 0 4px rgba(203,191,159,0.35);
}
.back-sails .pt-card--back::before, .pt-card--back.back-sails::before {
background: radial-gradient(circle at 40% 30%, #1a1d26, #04050a 75%);
}
.back-pinstripe .pt-card--back, .pt-card--back.back-pinstripe {
background:
repeating-linear-gradient(90deg, rgba(217,205,178,0.2) 0 1px, transparent 1px 6px),
radial-gradient(100% 80% at 50% 30%, #23252a, #0c0d10 90%);
box-shadow: 0 2px 5px rgba(0,0,0,0.65), inset 0 0 0 1px var(--sal-brass),
inset 0 0 0 3px rgba(10,10,13,0.9), inset 0 0 0 4px var(--sal-brass-dim);
}
.back-pinstripe .pt-card--back::before, .pt-card--back.back-pinstripe::before {
background: radial-gradient(circle at 40% 30%, #2b2d33, #0c0d10 75%);
}
/* --- avatar frames: a ring on YOUR OWN seat (pos-0 hero) + store swatch --- */
/* --- card frames: a designed border on the card FACES (self-view) -------- */
/* body.cframe- frames every face card on YOUR view of the felt — never
the backs, never the empty board slots; .cframe- directly on a
.pt-card is the store swatch. Rings ride box-shadow INSET (layout never
moves) and the outer drop shadow is restated so depth survives; the
showdown .pt-card--win gold lands OUTSIDE and still reads on top.
cframe-plain deliberately sets NOTHING: it is the untouched default. */
body.cframe-gilded .pt-card:not(.pt-card--back):not(.pt-card--slot),
.pt-card.cframe-gilded {
box-shadow:
0 2px 5px rgba(0,0,0,0.65),
inset 0 0 0 2px var(--sal-brass),
inset 0 0 0 3px rgba(236,211,146,0.6),
inset 0 -2px 4px rgba(120,100,60,0.16);
}
body.cframe-silver .pt-card:not(.pt-card--back):not(.pt-card--slot),
.pt-card.cframe-silver {
box-shadow:
0 2px 5px rgba(0,0,0,0.65),
inset 0 0 0 2px #aeb6bf,
inset 0 0 0 3px rgba(235,240,245,0.55),
inset 0 -2px 4px rgba(90,100,110,0.18);
}
/* Ropework: hemp braid around the face. */
body.cframe-ropework .pt-card:not(.pt-card--back):not(.pt-card--slot),
.pt-card.cframe-ropework {
box-shadow:
0 2px 5px rgba(0,0,0,0.65),
inset 0 0 0 1px rgba(186,146,86,0.95),
inset 0 0 0 3px rgba(120,86,44,0.45),
inset 0 0 0 4px rgba(210,178,120,0.35);
}
/* Pieces of Eight: a milled, bitten coin edge. */
body.cframe-piecesof8 .pt-card:not(.pt-card--back):not(.pt-card--slot),
.pt-card.cframe-piecesof8 {
box-shadow:
0 2px 5px rgba(0,0,0,0.65),
inset 0 0 0 1px rgba(226,226,232,0.9),
inset 0 0 0 2px rgba(150,150,160,0.4),
inset 0 -2px 5px rgba(226,226,232,0.18);
}
body.cframe-claret .pt-card:not(.pt-card--back):not(.pt-card--slot),
.pt-card.cframe-claret {
box-shadow:
0 2px 5px rgba(0,0,0,0.65),
inset 0 0 0 1px var(--sal-oxblood-pip),
inset 0 0 0 2px rgba(126,31,38,0.35),
inset 0 -2px 4px rgba(120,100,60,0.16);
}
body.cframe-jade .pt-card:not(.pt-card--back):not(.pt-card--slot),
.pt-card.cframe-jade {
box-shadow:
0 2px 5px rgba(0,0,0,0.65),
inset 0 0 0 2px var(--brand-emerald),
inset 0 0 0 3px rgba(38,142,101,0.4),
inset 0 -2px 4px rgba(120,100,60,0.16);
}
body.cframe-royal .pt-card:not(.pt-card--back):not(.pt-card--slot),
.pt-card.cframe-royal {
box-shadow:
0 2px 5px rgba(0,0,0,0.65),
inset 0 0 0 2px var(--sal-gold-hi),
inset 0 0 0 4px rgba(176,141,70,0.4),
inset 0 0 0 5px rgba(236,211,146,0.5),
inset 0 -2px 4px rgba(120,100,60,0.2);
}
/* frame-brass is the untouched default ring. Each variant swaps the OUTER
ring colour while keeping the avatar's inner brass bevel. */
.pt-avatar.frame-silver, .frame-silver .pt-seat--hero .pt-avatar {
box-shadow: 0 0 0 2px #aeb6bf, 0 0 10px -1px rgba(220,228,235,0.45),
inset 0 0 0 1.5px var(--sal-brass-dim), inset 0 -6px 10px rgba(0,0,0,0.5);
}
.pt-avatar.frame-emerald, .frame-emerald .pt-seat--hero .pt-avatar {
box-shadow: 0 0 0 2px var(--brand-emerald), 0 0 10px -1px var(--sal-felt-glow),
inset 0 0 0 1.5px var(--sal-brass-dim), inset 0 -6px 10px rgba(0,0,0,0.5);
}
.pt-avatar.frame-oxblood, .frame-oxblood .pt-seat--hero .pt-avatar {
box-shadow: 0 0 0 2px var(--sal-oxblood-pip), 0 0 10px -1px rgba(126,31,38,0.5),
inset 0 0 0 1.5px var(--sal-brass-dim), inset 0 -6px 10px rgba(0,0,0,0.5);
}
.pt-avatar.frame-gold, .frame-gold .pt-seat--hero .pt-avatar {
box-shadow: 0 0 0 2px var(--sal-gold-hi), 0 0 14px -1px rgba(217,188,121,0.6),
inset 0 0 0 1.5px var(--sal-brass), inset 0 -6px 10px rgba(0,0,0,0.5);
}
/* --- rank flair: a glyph beside YOUR OWN name on the felt ----------------- */
.flair-star .pt-seat--hero .pt-name::after { content: " ★"; color: var(--sal-gold-hi); }
.flair-clover .pt-seat--hero .pt-name::after { content: " ☘"; color: #57c79a; }
.flair-crown .pt-seat--hero .pt-name::after { content: " ♛"; color: var(--sal-gold-hi); }
/* --- the store page ------------------------------------------------------ */
.cos-wrap { display: flex; flex-direction: column; gap: 30px; }
.cos-group { display: flex; flex-direction: column; gap: 12px; }
.cos-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.cos-item {
display: flex; flex-direction: column; gap: 9px; padding: 13px 13px 12px;
border-radius: 12px;
background: linear-gradient(180deg, var(--sal-smoke-3), var(--sal-smoke-2) 60%, #0d0a06 100%);
border: 1px solid var(--sal-brass-dim);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.08), 0 4px 14px rgba(0,0,0,0.5);
transition: border-color var(--sal-t) var(--sal-ease), box-shadow var(--sal-t) var(--sal-ease);
}
.cos-item.is-equipped {
border-color: rgba(217,188,121,0.6);
box-shadow: var(--sal-glow-gold), 0 4px 14px rgba(0,0,0,0.5);
}
/* swatch stage: a recessed lamplit well the preview sits in */
.cos-preview {
position: relative; display: grid; place-items: center; min-height: 98px;
padding: 10px; border-radius: 10px; overflow: hidden;
background: radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,0.18), rgba(0,0,0,0.45));
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.cos-preview--card { --pt-card-w: 54px; }
/* mini felt swatch — reads the felt tokens, so its theme class previews it */
.cos-felt {
width: 100%; height: 92px; border-radius: 10px;
background:
radial-gradient(58% 52% at 50% 34%, rgba(240,220,160,0.09), transparent 62%),
repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
radial-gradient(85% 90% at 50% 42%, var(--sal-felt-hi), var(--sal-felt) 55%, var(--sal-felt-deep) 100%);
box-shadow: inset 0 0 34px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.5),
inset 0 0 0 2px var(--sal-brass-faint);
}
.cos-flair { font: 400 40px/1 var(--sal-serif); color: var(--sal-gold-hi); }
.cos-flair--empty { font-size: 13px; color: var(--sal-ivory-dim); letter-spacing: 1.4px; text-transform: uppercase; }
.cos-name {
margin: 0; font: 400 15px/1.2 var(--sal-serif); color: var(--sal-ivory);
letter-spacing: 0.3px;
}
.cos-flavor {
margin: 0; font: italic 400 11.5px/1.4 var(--sal-serif);
color: var(--sal-ivory-dim); min-height: 2.5em;
}
.cos-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.cos-price {
font: 700 12px/1 var(--sal-mono); color: var(--sal-brass-ink);
letter-spacing: 0.5px; font-variant-numeric: tabular-nums;
}
.cos-price i { font-style: normal; opacity: 0.8; }
.cos-price.is-free { color: var(--sal-ivory-dim); font-weight: 600; }
.cos-tag {
font: 700 8.5px/1 var(--sal-mono); letter-spacing: 1.6px; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px; flex: none;
}
.cos-tag--owned { color: var(--sal-ivory-2); background: rgba(0,0,0,0.3); box-shadow: inset 0 0 0 1px var(--sal-brass-faint); }
.cos-tag--equipped { color: #221604; background: linear-gradient(180deg, var(--sal-gold-hi), var(--sal-brass)); }
.cos-tag--locked { color: var(--sal-oxblood-ink); background: rgba(0,0,0,0.3); box-shadow: inset 0 0 0 1px rgba(126,31,38,0.4); }
.cos-lock { margin: 0; font: 600 9.5px/1.35 var(--sal-mono); letter-spacing: 0.5px; color: var(--sal-oxblood-ink); }
.cos-btns { display: flex; gap: 8px; }
.cos-btns .sal-btn { flex: 1; padding: 8px 10px; }
/* ==========================================================================
PIRATE KINGS ON THE FELT — default dressing, nothing to buy.
ADDITIVE ONLY: the .pt-* kit above is a frozen contract, so every rule
here is page-scoped to .ptr and hangs off a pseudo-element the kit left
free (.pt-felt::after and .pt-table::after were both unused).
========================================================================== */
/* A compass rose sunk into the felt, under the board and the pot. Drawn with
conic gradients — four brass points and a faint ring — and kept far enough
down in opacity that it reads as inlay, never as clutter. */
.ptr .pt-felt::after {
content: ""; position: absolute; left: 50%; top: 47%;
width: calc(230px * var(--pt-fit, 1)); height: calc(230px * var(--pt-fit, 1));
transform: translate(-50%, -50%); border-radius: 50%;
pointer-events: none; z-index: 0;
background:
conic-gradient(from 0deg at 50% 50%,
rgba(236,211,146,0.11) 0 3deg, transparent 3deg 87deg,
rgba(236,211,146,0.11) 87deg 93deg, transparent 93deg 177deg,
rgba(236,211,146,0.11) 177deg 183deg, transparent 183deg 267deg,
rgba(236,211,146,0.11) 267deg 273deg, transparent 273deg 360deg);
-webkit-mask: radial-gradient(farthest-side, #000 62%, transparent 64%);
mask: radial-gradient(farthest-side, #000 62%, transparent 64%);
opacity: 0.9;
}
/* The rope rail: a hemp braid laid in the wood annulus between the brass
inlay ring (inset 3.2%) and the felt edge (inset 5.5%), masked to a thin
ring the same way the seat timers are. */
.ptr .pt-table::after {
content: ""; position: absolute; inset: 4.1%; border-radius: 50%;
pointer-events: none;
background: repeating-conic-gradient(from 0deg at 50% 50%,
rgba(196,158,96,0.30) 0deg 0.7deg,
rgba(96,68,34,0.26) 0.7deg 1.5deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5.5px));
opacity: 0.75;
}
/* --- RARITY on the shelf: what a thing is worth, at a glance ------------ */
.cos-rarity {
font: 600 8.5px/1 var(--sal-mono); letter-spacing: 1.6px;
text-transform: uppercase; padding: 3px 7px; border-radius: 99px;
border: 1px solid currentColor; opacity: 0.9;
}
.cos-rarity--common { color: var(--sal-ivory-dim); }
.cos-rarity--rare { color: #7fb2d8; }
.cos-rarity--fabled { color: #c08adf; }
.cos-rarity--kingly {
color: var(--sal-gold-hi);
background: linear-gradient(90deg, rgba(236,211,146,0.10), transparent);
box-shadow: 0 0 10px -3px rgba(236,211,146,0.6);
}
/* --- the shelf reads its own rarity: a Kingly card should look kingly ---- */
.cos-item { position: relative; }
.cos-item[data-rarity="rare"] { border-color: rgba(127,178,216,0.30); }
.cos-item[data-rarity="fabled"] { border-color: rgba(192,138,223,0.34); }
.cos-item[data-rarity="kingly"] {
border-color: var(--sal-brass-dim);
background-image: radial-gradient(120% 70% at 50% -10%,
rgba(236,211,146,0.09), transparent 62%);
box-shadow: inset 0 1px 0 rgba(236,211,146,0.14),
0 14px 34px -18px rgba(236,150,60,0.55);
}
/* a gold hairline crowning the kingly shelf */
.cos-item[data-rarity="kingly"]::before {
content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px;
background: linear-gradient(90deg, transparent, var(--sal-gold-hi), transparent);
pointer-events: none;
}
/* an item you must EARN wears its gate plainly */
.cos-lock {
font: 600 9px/1.5 var(--sal-mono); letter-spacing: 1.2px;
text-transform: uppercase; color: var(--sal-brass-ink);
border-top: 1px dashed var(--sal-brass-dim); padding-top: 7px; margin-top: 7px;
}
.cos-lock::before { content: "⚔ "; }
/* The house watermark reads as a KING'S SEAL on the felt: the crowned-K
already sits dead centre (.pt-brand), so it only needs the ring of a
wax seal struck around it. Page-scoped and additive — the kit's own
.pt-brand rule is untouched. */
.ptr .pt-brand::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 150%; height: 150%; transform: translate(-50%, -50%);
border-radius: 50%; pointer-events: none;
border: 1px solid rgba(236,211,146,0.10);
box-shadow: inset 0 0 0 5px rgba(236,211,146,0.045);
}