/* ============================================================
BACCARAT — THE GENTLEMAN'S GAME
Dark lacquer · Gold filigree · Deep carmine
============================================================ */
:root {
/* True-black dark mode — no green tint. Layered greys for depth. */
--bg-abyss: #000000;
--bg-felt-deep: #060606;
--bg-felt: #0d0d0d;
--bg-felt-light: #1a1a1a;
--bg-panel: #0a0a0a;
--bg-card: #111111;
--bg-card-hover: #1c1c1c;
/* Gold filigree */
--gold: #c9a961;
--gold-bright: #e6c985;
--gold-dim: #8a7640;
--gold-ghost: rgba(201, 169, 97, 0.15);
/* Carmine (banker / accent red) */
--carmine: #c1272d;
--carmine-bright: #e04349;
--carmine-deep: #8a1c21;
/* Jade (player) */
--jade: #4a9d7f;
--jade-bright: #6dd0a8;
--jade-dim: #2e6652;
/* Ivory for cards & chalk */
--ivory: #f3ead3;
--ivory-dim: #c8bfa5;
--bone: #e8dfc4;
/* Neutrals */
--text-primary: #eadfc4;
--text-secondary: #9b9481;
--text-muted: #6b6550;
--border-subtle: rgba(201, 169, 97, 0.14);
--border-gold: rgba(201, 169, 97, 0.32);
/* Typography */
--font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
--font-body: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
/* Geometry */
--sidebar-w: 260px;
--topbar-h: 52px;
--content-max: 1180px;
--prose-max: 72ch;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
background: var(--bg-abyss);
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--text-primary);
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(193, 39, 45, 0.06), transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 100%, rgba(201, 169, 97, 0.04), transparent 60%),
var(--bg-abyss);
min-height: 100vh;
/* `clip` instead of `hidden`: hides horizontal overflow without creating
a scroll container. `hidden` computes overflow-y to auto, making body
a scroll container — that breaks `position: sticky` on .stage-sticky. */
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Grainy film overlay — neutral grey, finer grain, more visible. Sits above
the body background but below all interactive content. */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.55;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
/* Selection */
::selection { background: var(--carmine); color: var(--ivory); }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-abyss); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
/* ===================== LAYOUT ===================== */
.app {
display: block;
min-height: 100vh;
position: relative;
z-index: 2;
/* Hero is full-bleed; the floating pill sits over it. Other sections
get top breathing room via their own padding. */
}
/* ===================== TOPBAR — floating pill ===================== */
.topbar {
position: fixed;
top: 18px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 880px;
height: var(--topbar-h);
z-index: 100;
pointer-events: none; /* let .topbar-inner own pointer events */
}
.topbar-inner {
pointer-events: auto;
position: relative;
height: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
padding: 4px 16px 4px 22px;
background: linear-gradient(180deg, rgba(14, 18, 14, 0.88) 0%, rgba(6, 10, 8, 0.92) 100%);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(201, 169, 97, 0.18);
border-radius: 999px;
box-shadow:
0 14px 50px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.03) inset,
0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
/* Three-zone topbar: brand left, dropdown triggers centered, settings + Play right. */
.brand { grid-column: 1; justify-self: start; }
.topnav { grid-column: 2; justify-self: center; }
.topnav-actions {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 4px;
}
/* Subtle dark gloss — faint top highlight for a polished glass read. */
.topbar-inner::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.02) 38%,
rgba(255, 255, 255, 0) 62%);
pointer-events: none;
z-index: 0;
}
.topbar-inner > * { position: relative; z-index: 1; }
.brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
cursor: pointer;
flex-shrink: 0;
padding-right: 10px;
}
.brand-mark {
width: 28px;
height: 28px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold) 40%, var(--gold-dim) 100%);
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-style: italic;
color: var(--bg-abyss);
font-size: 15px;
box-shadow:
0 0 0 1px var(--gold-bright) inset,
0 2px 12px rgba(201, 169, 97, 0.3);
flex-shrink: 0;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.brand-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--ivory);
letter-spacing: 0.01em;
line-height: 1;
}
.brand-sub {
font-family: var(--font-display);
font-style: italic;
font-size: 10px;
color: var(--gold-bright);
letter-spacing: 0.04em;
line-height: 1.1;
}
/* ===================== TOPNAV ===================== */
.topnav {
display: flex;
align-items: center;
gap: 4px;
}
.topnav-item {
position: relative;
}
.topnav-trigger {
background: transparent;
border: 1px solid transparent;
color: var(--ivory-dim);
font-family: var(--font-sans, 'Inter', system-ui);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 5px 13px;
border-radius: 999px;
cursor: pointer;
transition: color 0.18s ease, background 0.18s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.topnav-trigger:hover,
.topnav-trigger[aria-expanded="true"] {
color: var(--ivory);
background: rgba(255, 255, 255, 0.06);
}
.topnav-caret {
font-size: 9px;
color: var(--gold);
transition: transform 0.2s ease;
display: inline-block;
}
.topnav-trigger[aria-expanded="true"] .topnav-caret {
transform: rotate(180deg);
}
.topnav-gear {
font-size: 16px;
line-height: 1;
color: var(--gold);
}
.topnav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 280px;
background: linear-gradient(180deg, rgba(20, 20, 20, 0.97) 0%, rgba(8, 8, 8, 0.97) 100%);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 14px 12px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(201, 169, 97, 0.06) inset;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
z-index: 200;
}
.topnav-dropdown-right {
left: auto;
right: 0;
}
.topnav-item.open .topnav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.topnav-dropdown-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-dim);
padding: 4px 10px 10px;
}
.topnav-dropdown-divider {
height: 1px;
margin: 10px 0;
background: var(--border-subtle);
}
/* ===== Premium-Glow CTA — CSS port of Framer PremiumGlowButton =====
Rotating conic-gradient ring on a near-black pill, with a soft gold
outer glow. The ring lives on ::before (spinning), the inner fill on
::after (covers everything but a 1.5px rim). Text sits above both. */
.topnav-cta {
--pg-border: 1.5px;
--pg-radius: 999px;
--pg-inner: var(--ivory);
--pg-glow: var(--gold-bright);
--pg-glow-outer: rgba(230, 201, 133, 0.32);
--pg-spin: 3s;
margin-left: 6px;
padding: 8px 22px !important;
position: relative;
overflow: hidden;
isolation: isolate;
background: transparent !important;
color: #0a0a0a !important;
border-radius: var(--pg-radius) !important;
font-family: var(--font-body);
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: 0.06em;
text-transform: uppercase;
border: none !important;
border-left: none !important;
text-decoration: none;
display: inline-flex !important;
align-items: center;
box-shadow: 0 15px 35px 0 var(--pg-glow-outer);
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.22s ease !important;
}
.topnav-cta::before {
content: "";
position: absolute;
inset: -100%;
background: conic-gradient(from 0deg,
transparent 0%,
var(--pg-glow) 20%,
transparent 50%);
animation: premiumGlowSpin var(--pg-spin) linear infinite;
z-index: -2;
}
.topnav-cta::after {
content: "";
position: absolute;
inset: var(--pg-border);
background: var(--pg-inner);
border-radius: inherit;
z-index: -1;
}
.topnav-cta:hover {
transform: scale(1.03);
box-shadow: 0 18px 42px 0 rgba(230, 201, 133, 0.42);
}
.topnav-cta:active { transform: scale(0.98); }
@keyframes premiumGlowSpin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.topnav-cta::before { animation: none; }
}
/* nav-item used inside dropdowns and as base for CTA */
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: var(--radius-sm);
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.18s ease, background 0.18s ease;
cursor: pointer;
border-left: 2px solid transparent;
}
.nav-item:hover {
color: var(--ivory);
background: rgba(201, 169, 97, 0.07);
}
.nav-item.active {
color: var(--ivory);
background: linear-gradient(90deg, rgba(201, 169, 97, 0.14), transparent);
border-left-color: var(--gold);
}
.nav-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
width: 22px;
}
.nav-item.active .nav-num { color: var(--gold-bright); }
.theme-picker, .ruleset-picker {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 4px;
}
.theme-option, .ruleset-option {
padding: 7px 12px;
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
user-select: none;
}
.theme-option:hover, .ruleset-option:hover {
color: var(--ivory);
background: rgba(201, 169, 97, 0.05);
}
.theme-option.active, .ruleset-option.active {
color: var(--ivory);
background: var(--bg-felt);
border-left: 2px solid var(--gold);
}
.settings-action {
width: 100%;
text-align: left;
background: transparent;
border: 1px solid var(--border-subtle);
color: var(--ivory-dim);
font-family: inherit;
font-size: 13px;
padding: 9px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
margin: 4px;
width: calc(100% - 8px);
}
.settings-action:hover {
color: var(--ivory);
background: rgba(201, 169, 97, 0.07);
border-color: var(--gold-dim);
}
/* ===================== STRATEGY DEMO ===================== */
.strat-demo-trigger {
margin-top: 22px;
width: 100%;
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(201, 169, 97, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
border: 1px solid rgba(201, 169, 97, 0.3);
border-radius: var(--radius-md);
color: var(--ivory);
font-family: inherit;
text-align: left;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.strat-demo-trigger:hover {
transform: translateY(-2px);
border-color: var(--gold);
background: linear-gradient(135deg, rgba(201, 169, 97, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
}
.strat-demo-trigger-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
color: var(--bg-abyss);
font-size: 16px;
box-shadow: 0 4px 14px rgba(201, 169, 97, 0.4);
}
.strat-demo-trigger-label {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.3;
}
.strat-demo-trigger-label strong {
font-family: var(--font-display);
font-size: 18px;
color: var(--ivory);
}
.strat-demo-trigger-label span {
font-size: 13px;
color: var(--ivory-dim);
}
/* No full-page backdrop — the live table must stay visible while the demo
is running. The container is just a click-through overlay; the card
itself sits pinned to the bottom-right corner as a side panel. */
.strat-demo {
position: fixed;
inset: 0;
z-index: 1000;
background: transparent;
pointer-events: none;
opacity: 0;
transition: opacity 0.28s ease;
}
.strat-demo[hidden] { display: none; }
.strat-demo.active { opacity: 1; }
.strat-demo-card {
position: fixed;
bottom: max(24px, env(safe-area-inset-bottom));
right: 24px;
width: 360px;
max-width: calc(100% - 32px);
background: linear-gradient(180deg, rgba(22, 22, 22, 0.97) 0%, rgba(8, 8, 8, 0.98) 100%);
border: 1px solid rgba(201, 169, 97, 0.4);
border-radius: 16px;
padding: 20px 22px 18px;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.7),
0 0 40px rgba(201, 169, 97, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
pointer-events: auto;
transform: translateY(20px);
transition: transform 0.28s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.strat-demo.active .strat-demo-card { transform: translateY(0); }
@media (max-width: 720px) {
.strat-demo-card {
left: 16px;
right: 16px;
bottom: 16px;
width: auto;
}
}
.strat-demo-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.strat-demo-progress {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
}
.strat-demo-step {
color: var(--gold-bright);
font-weight: 600;
font-size: 12px;
padding: 3px 9px;
border: 1px solid var(--gold-dim);
border-radius: 999px;
background: rgba(201, 169, 97, 0.08);
}
.strat-demo-strategy {
color: var(--gold);
}
.strat-demo-close {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.strat-demo-close:hover {
color: var(--ivory);
background: rgba(201, 169, 97, 0.1);
border-color: var(--gold-dim);
}
.strat-demo-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
color: var(--ivory);
margin: 0 0 8px;
line-height: 1.2;
letter-spacing: -0.005em;
}
.strat-demo-body {
font-size: 14.5px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 18px;
}
.strat-demo-body strong {
color: var(--ivory);
font-weight: 600;
}
.strat-demo-picker {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 8px;
}
.strat-demo-pick {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 14px 16px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--ivory);
font-family: inherit;
cursor: pointer;
text-align: left;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.strat-demo-pick:hover {
transform: translateY(-1px);
border-color: var(--gold);
background: rgba(201, 169, 97, 0.08);
}
.strat-demo-pick-name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--gold-bright);
}
.strat-demo-pick-desc {
font-size: 12.5px;
color: var(--ivory-dim);
}
.strat-demo-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.strat-demo-skip {
background: transparent;
border: none;
color: var(--text-muted);
font-family: inherit;
font-size: 12px;
cursor: pointer;
padding: 8px 4px;
letter-spacing: 0.04em;
transition: color 0.18s ease;
}
.strat-demo-skip:hover { color: var(--ivory); }
.strat-demo-nav {
display: flex;
gap: 8px;
}
.strat-demo-pause, .strat-demo-next {
padding: 9px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all 0.18s ease;
letter-spacing: 0.02em;
}
.strat-demo-pause {
background: transparent;
border: 1px solid var(--border-subtle);
color: var(--ivory-dim);
}
.strat-demo-pause:hover { color: var(--ivory); border-color: var(--gold-dim); background: rgba(201, 169, 97, 0.05); }
.strat-demo-next {
background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
border: 1px solid rgba(0, 0, 0, 0.15);
color: var(--bg-abyss);
box-shadow: 0 4px 14px rgba(201, 169, 97, 0.35);
}
.strat-demo-next:hover {
background: linear-gradient(180deg, #f1d595 0%, var(--gold-bright) 100%);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(230, 201, 133, 0.5);
}
/* Brief flash to direct the eye when the demo first highlights an element. */
.demo-pulse {
position: relative;
z-index: 5;
animation: demoPulse 1.4s ease-out;
border-radius: var(--radius-md);
}
@keyframes demoPulse {
0% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
35% { box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.55), 0 0 50px rgba(201, 169, 97, 0.4); }
100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
}
/* Persistent gold-glow ring around the element the demo is currently
talking about. Stays applied until the demo moves on to the next target,
so the user always knows where to look. */
.demo-target {
position: relative;
z-index: 5;
animation: demoTargetPulse 1.8s ease-in-out infinite;
border-radius: var(--radius-md);
}
@keyframes demoTargetPulse {
0%, 100% {
box-shadow:
0 0 0 3px rgba(230, 201, 133, 0.85),
0 0 0 7px rgba(201, 169, 97, 0.18),
0 0 30px rgba(201, 169, 97, 0.5);
}
50% {
box-shadow:
0 0 0 4px rgba(255, 221, 153, 0.95),
0 0 0 12px rgba(201, 169, 97, 0.28),
0 0 50px rgba(201, 169, 97, 0.75);
}
}
/* Round bet-circle override — the table image bets are circles */
.bet-box.demo-target,
.bet-box.demo-pulse { border-radius: var(--radius-md); }
.chip-btn.demo-target,
.chip-btn.demo-pulse { border-radius: 50%; }
/* While the demo is open, hide the floating help FAB so it doesn't compete. */
body.strat-demo-open .help-fab,
body.strat-demo-open .rsvp-toast { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
@media (max-width: 600px) {
.strat-demo-card { padding: 18px 18px 16px; }
.strat-demo-title { font-size: 20px; }
.strat-demo-controls { flex-direction: column; align-items: stretch; }
.strat-demo-nav { justify-content: space-between; }
}
/* ==================== SIM HAND-RESULT EXPLAINER ====================
Short modal that appears after the first 2 settled hands in the live
simulator. Blocks the auto-loop and the next manual deal until the
user hits Continue — then it stays out of the way for the rest of
the session. */
.sim-explain {
position: fixed;
inset: 0;
z-index: 1100;
display: grid;
place-items: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 0.24s ease;
}
.sim-explain[hidden] { display: none; }
.sim-explain.active { opacity: 1; pointer-events: auto; }
.sim-explain-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 6, 6, 0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.sim-explain-card {
position: relative;
width: min(480px, 100%);
background: linear-gradient(180deg, rgba(22, 22, 22, 0.98) 0%, rgba(8, 8, 8, 0.99) 100%);
border: 1px solid rgba(201, 169, 97, 0.45);
border-radius: 18px;
padding: 24px 26px 20px;
box-shadow:
0 28px 70px rgba(0, 0, 0, 0.75),
0 0 50px rgba(201, 169, 97, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transform: translateY(16px) scale(0.98);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.sim-explain.active .sim-explain-card { transform: translateY(0) scale(1); }
.sim-explain-step {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-bright);
margin-bottom: 10px;
}
.sim-explain-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.2;
color: var(--ivory);
margin: 0 0 16px;
}
.sim-explain-recap {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.8;
color: var(--ivory-dim);
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(201, 169, 97, 0.18);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 14px;
}
.sim-explain .sim-explain-cd {
display: inline-block;
padding: 1px 6px;
margin: 0 1px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--ivory);
font-family: var(--font-mono);
font-size: 12px;
}
.sim-explain .sim-explain-cd.red { color: #ef6b6b; }
.sim-explain-why {
font-size: 14px;
line-height: 1.7;
color: var(--ivory-dim);
margin: 0 0 14px;
}
.sim-explain-why em { color: var(--gold-bright); font-style: italic; }
.sim-explain-why strong { color: var(--ivory); }
.sim-explain-result {
font-size: 14px;
line-height: 1.65;
color: var(--ivory);
padding: 12px 14px;
border-radius: 10px;
background: rgba(201, 169, 97, 0.08);
border: 1px solid rgba(201, 169, 97, 0.25);
margin-bottom: 16px;
}
.sim-explain-result .jade { color: #6dd0a8; }
.sim-explain-result .carmine { color: #e04349; }
.sim-explain-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sim-explain-note {
font-size: 11px;
letter-spacing: 0.05em;
color: var(--text-muted);
font-style: italic;
}
.sim-explain-next {
background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
color: var(--bg-abyss);
border: 1px solid var(--gold);
border-radius: 8px;
padding: 8px 16px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sim-explain-next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(201, 169, 97, 0.35); }
@media (max-width: 560px) {
.sim-explain { padding: 12px; }
.sim-explain-card { padding: 18px 18px 16px; }
.sim-explain-title { font-size: 20px; }
.sim-explain-foot { flex-direction: column; align-items: stretch; }
.sim-explain-next { width: 100%; }
}
/* ===================== HELP FAB ===================== */
.help-fab {
position: fixed;
bottom: 28px;
left: 28px;
width: 52px;
height: 52px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-dim) 100%);
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--bg-abyss);
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
font-style: italic;
cursor: pointer;
z-index: 90;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(201, 169, 97, 0.3),
0 0 24px rgba(201, 169, 97, 0.28);
display: grid;
place-items: center;
padding: 0;
animation: helpBob 3s ease-in-out infinite;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.help-fab:hover {
transform: scale(1.08);
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(230, 201, 133, 0.55),
0 0 36px rgba(201, 169, 97, 0.45);
animation-play-state: paused;
}
.help-fab:active { transform: scale(0.98); }
.help-fab-icon {
line-height: 1;
position: relative;
z-index: 2;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Soft outer pulse ring — telegraphs interactivity without being noisy. */
.help-fab-pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--gold);
opacity: 0;
animation: helpPulse 2.6s ease-out infinite;
pointer-events: none;
}
@keyframes helpBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@keyframes helpPulse {
0% { transform: scale(1); opacity: 0.55; }
80% { transform: scale(1.7); opacity: 0; }
100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.help-fab { animation: none; }
.help-fab-pulse { animation: none; }
}
/* Hide the FAB while the tour is actually open (it's redundant) */
.tour:not([hidden]) ~ .help-fab,
body.tour-open .help-fab { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
/* ===================== INTRO TOUR ===================== */
.tour {
position: fixed;
inset: 0;
z-index: 1000;
pointer-events: none;
}
.tour[hidden] { display: none; }
.tour-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
pointer-events: auto;
opacity: 0;
transition: opacity 0.3s ease;
}
.tour.active .tour-backdrop { opacity: 1; }
.tour-card {
position: fixed;
bottom: 32px;
right: 32px;
width: 380px;
max-width: calc(100% - 32px);
background: linear-gradient(180deg, rgba(22, 22, 22, 0.97) 0%, rgba(8, 8, 8, 0.97) 100%);
border: 1px solid rgba(201, 169, 97, 0.35);
border-radius: 18px;
padding: 26px 26px 22px;
pointer-events: auto;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.7),
0 0 60px rgba(201, 169, 97, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.tour.active .tour-card { opacity: 1; transform: translateY(0); }
.tour-progress {
display: flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.16em;
margin-bottom: 14px;
text-transform: uppercase;
}
.tour-step-current {
color: var(--gold-bright);
font-weight: 600;
font-size: 13px;
}
.tour-step-sep { color: var(--text-muted); margin: 0 2px; }
.tour-progress-label {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid var(--border-subtle);
letter-spacing: 0.18em;
color: var(--gold);
}
.tour-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
color: var(--ivory);
margin: 0 0 10px;
line-height: 1.2;
letter-spacing: -0.005em;
}
.tour-body {
font-size: 14.5px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 18px;
}
.tour-dots {
display: flex;
gap: 6px;
margin-bottom: 22px;
}
.tour-dot {
width: 22px;
height: 4px;
border-radius: 2px;
background: rgba(201, 169, 97, 0.18);
transition: background 0.25s ease, transform 0.25s ease;
}
.tour-dot.active {
background: var(--gold);
transform: scaleY(1.4);
}
.tour-dot.done { background: var(--gold-dim); }
.tour-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tour-skip {
background: transparent;
border: none;
color: var(--text-muted);
font-family: inherit;
font-size: 12px;
cursor: pointer;
padding: 8px 4px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: color 0.18s ease;
}
.tour-skip:hover { color: var(--ivory); }
.tour-nav-buttons { display: flex; gap: 8px; }
.tour-back, .tour-next {
padding: 9px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all 0.18s ease;
letter-spacing: 0.02em;
}
.tour-back {
background: transparent;
border: 1px solid var(--border-subtle);
color: var(--ivory-dim);
}
.tour-back:hover { color: var(--ivory); border-color: var(--gold-dim); background: rgba(201, 169, 97, 0.05); }
.tour-next {
background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
border: 1px solid rgba(0, 0, 0, 0.15);
color: var(--bg-abyss);
box-shadow: 0 4px 14px rgba(201, 169, 97, 0.35);
}
.tour-next:hover {
background: linear-gradient(180deg, #f1d595 0%, var(--gold-bright) 100%);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(230, 201, 133, 0.5);
}
/* Pulse highlight on the section the tour is currently pointing at. */
.tour-pulse {
animation: tourPulse 1.6s ease-out;
position: relative;
z-index: 5;
border-radius: var(--radius-lg);
}
@keyframes tourPulse {
0% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
35% { box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.45), 0 0 80px rgba(201, 169, 97, 0.35); }
100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
}
@media (max-width: 600px) {
.tour-card { left: 16px; right: 16px; bottom: 16px; width: auto; }
}
.topbar-burger {
display: none;
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
width: 40px;
height: 36px;
padding: 0;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
margin-left: auto;
}
.topbar-burger span {
display: block;
width: 18px;
height: 1.5px;
background: var(--gold);
border-radius: 1px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* ===================== MAIN ===================== */
.main {
position: relative;
min-width: 0;
}
.section {
max-width: var(--content-max);
margin: 0 auto;
padding: 80px 48px;
position: relative;
}
.section-header {
margin-bottom: 40px;
}
.section-kicker {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-bright);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
}
.section-kicker::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--border-gold), transparent);
max-width: 180px;
}
h1.section-title {
font-family: var(--font-display);
font-size: 58px;
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--ivory);
margin-bottom: 20px;
}
h1.section-title em {
font-style: italic;
color: var(--gold-bright);
font-weight: 400;
}
.section-lede {
font-family: var(--font-display);
font-size: 20px;
line-height: 1.55;
color: var(--bone);
font-weight: 400;
max-width: 640px;
}
.section-lede strong {
color: var(--ivory);
font-weight: 600;
}
.section-lede em {
color: var(--gold-bright);
font-style: italic;
}
h2.sub-title {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
color: var(--ivory);
margin: 48px 0 16px;
letter-spacing: -0.01em;
}
h2.sub-title .dot {
color: var(--carmine-bright);
margin: 0 10px;
font-weight: 400;
}
h3.minor-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ivory);
margin: 32px 0 10px;
}
p.prose {
font-size: 16px;
line-height: 1.75;
color: var(--text-primary);
margin-bottom: 18px;
max-width: 680px;
}
p.prose em { color: var(--gold-bright); font-style: italic; }
p.prose strong { color: var(--ivory); font-weight: 600; }
p.prose .carmine { color: var(--carmine-bright); font-weight: 600; }
.prose-small {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.65;
max-width: 640px;
}
/* ===================== HERO ===================== */
.hero {
min-height: 100vh;
display: grid;
place-items: start center;
/* Title sits in the upper third — closer to the chandeliers, away from
centre. Uses padding-top so it scales with viewport height. */
padding: 22vh 0 0;
position: relative;
overflow: hidden;
max-width: none;
}
/* Casino-salon background image — sits at the very back of the hero stack.
Mask fades the bottom half to transparent so the image only contributes
the chandelier/candlelight portion at the top. The remainder hands off
into pure black so the chips video & vignette can take over. */
.hero-bg-image {
position: absolute;
inset: 0;
z-index: 0;
background-image: url('../../media/hero-bg.png');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
/* Faded overall + mask fades sooner so the bg is atmospheric, not dominant. */
opacity: 0.55;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 32%, transparent 75%);
mask-image: linear-gradient(180deg, #000 0%, #000 32%, transparent 75%);
pointer-events: none;
}
/* Pai Gow hero — Chinese salon with chandeliers, lattice screens, and
light beams already baked in. Higher opacity than the baccarat shot
because the source is already darker, and a longer fade so the side
architecture reads further down the hero. */
.hero--paigow .hero-bg-image {
background-image: url('../../media/pai-gow-bg.png');
opacity: 0.78;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
}
#heroCanvas, .hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
pointer-events: none;
}
/* Spinning chips video — sits above the bg image. Screen blend lets the
black areas of the footage drop out so the casino salon shows through;
the chips brighten on top of it. Brightness kept higher than before
per request — chips should read clearly, not faded. */
.hero-video {
filter: saturate(1.12) contrast(1.08) brightness(1.05);
mix-blend-mode: screen;
}
/* ===== Candlelight + smoke ambience (z=2, above video, below vignette) ===== */
.hero-ambience {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
mix-blend-mode: screen;
}
/* Two large warm halos in the upper corners — distant chandeliers. */
.hero-chandelier {
position: absolute;
top: -22%;
width: 75%;
height: 95%;
border-radius: 50%;
filter: blur(80px);
opacity: 0.85;
background: radial-gradient(ellipse at center,
rgba(255, 205, 130, 0.55) 0%,
rgba(232, 175, 90, 0.32) 22%,
rgba(180, 120, 50, 0.14) 48%,
transparent 72%);
animation: chandelierFlicker 7s ease-in-out infinite;
}
.hero-chandelier-l { left: -32%; }
.hero-chandelier-r { right: -32%; animation-delay: -3s; }
/* Subtle warm wash across the top third — ties the two chandeliers together. */
.hero-warm-wash {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60%;
background: radial-gradient(ellipse at 50% 0%,
rgba(255, 195, 120, 0.18) 0%,
rgba(200, 140, 70, 0.08) 35%,
transparent 70%);
filter: blur(20px);
}
/* Smoke wisps — soft warm-grey ellipses drifting horizontally + bobbing. */
.hero-smoke {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0;
background: radial-gradient(ellipse at center,
rgba(220, 190, 140, 0.22) 0%,
rgba(180, 150, 110, 0.12) 35%,
transparent 70%);
}
.hero-smoke-1 {
top: 18%;
left: -25%;
width: 70%;
height: 22%;
animation: smokeDrift1 26s ease-in-out infinite;
}
.hero-smoke-2 {
top: 38%;
right: -25%;
width: 75%;
height: 24%;
animation: smokeDrift2 32s ease-in-out infinite;
animation-delay: -8s;
}
.hero-smoke-3 {
top: 50%;
left: -15%;
width: 60%;
height: 18%;
animation: smokeDrift3 38s ease-in-out infinite;
animation-delay: -14s;
}
.hero-smoke-4 {
top: 8%;
left: 30%;
width: 45%;
height: 14%;
animation: smokeDrift4 22s ease-in-out infinite;
animation-delay: -5s;
}
@keyframes chandelierFlicker {
0%, 100% { opacity: 0.78; transform: scale(1); }
50% { opacity: 0.95; transform: scale(1.04); }
}
@keyframes smokeDrift1 {
0% { transform: translateX(-10%) translateY(0) scale(1); opacity: 0; }
20% { opacity: 0.55; }
50% { transform: translateX(60%) translateY(-22px) scale(1.15); opacity: 0.8; }
80% { opacity: 0.45; }
100% { transform: translateX(120%) translateY(0) scale(1); opacity: 0; }
}
@keyframes smokeDrift2 {
0% { transform: translateX(10%) translateY(0) scale(1); opacity: 0; }
20% { opacity: 0.5; }
50% { transform: translateX(-55%) translateY(18px) scale(1.2); opacity: 0.75; }
80% { opacity: 0.4; }
100% { transform: translateX(-115%) translateY(0) scale(1); opacity: 0; }
}
@keyframes smokeDrift3 {
0% { transform: translateX(0) translateY(0) scale(1); opacity: 0; }
25% { opacity: 0.4; }
50% { transform: translateX(45%) translateY(-30px) scale(1.1); opacity: 0.65; }
75% { opacity: 0.35; }
100% { transform: translateX(95%) translateY(0) scale(1); opacity: 0; }
}
@keyframes smokeDrift4 {
0% { transform: translateX(0) translateY(0) scale(1); opacity: 0; }
30% { opacity: 0.42; }
50% { transform: translateX(-30%) translateY(12px) scale(1.18); opacity: 0.6; }
70% { opacity: 0.35; }
100% { transform: translateX(-65%) translateY(0) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-chandelier, .hero-smoke { animation: none; opacity: 0.5; }
}
.hero-content {
position: relative;
z-index: 4;
text-align: center;
max-width: 780px;
padding: 0 40px;
pointer-events: none;
transform: translateY(-5vh);
}
.hero-kicker {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold-bright);
margin-bottom: 26px;
opacity: 0;
animation: fadeUp 1.2s 0.2s ease-out forwards;
}
/* (Hero title shimmer is now a CSS-only animation on .hero-title-mark
— the WebGL canvas overlay was removed.) */
.hero-title {
font-family: var(--font-display);
font-size: clamp(72px, 14vw, 196px);
font-weight: 600;
line-height: 0.92;
letter-spacing: -0.03em;
color: var(--ivory);
margin: 0 0 18px;
opacity: 0;
animation: fadeUp 1.4s 0.4s ease-out forwards;
text-shadow:
0 2px 24px rgba(0, 0, 0, 0.6),
0 0 40px rgba(201, 169, 97, 0.18);
}
/* Title is the original ivory→gold vertical gradient (clipped to text).
A separate 8-second animation adds a brief brightness + warm gold halo
pulse that reads as a clean shine, without touching the gradient layer
that draws the actual letterforms.
IMPORTANT: re-declares the fadeUp animation from .hero-title because
the `animation` shorthand here would otherwise override it, leaving the
title at opacity: 0. Both animations run together. */
.hero-title-mark {
background: linear-gradient(180deg, var(--ivory) 0%, #e6c985 60%, var(--gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation:
fadeUp 1.4s 0.4s ease-out forwards,
heroShine 6s 2.5s ease-in-out infinite;
}
@keyframes heroShine {
/* Mostly at rest — gentle gleam every 8 seconds. */
0%, 70%, 100% {
filter:
brightness(1)
drop-shadow(0 0 0 transparent);
}
82% {
filter:
brightness(1.15)
drop-shadow(0 0 28px rgba(255, 230, 170, 0.55))
drop-shadow(0 0 6px rgba(255, 248, 220, 0.7));
}
}
@media (prefers-reduced-motion: reduce) {
.hero-title-mark { animation: none; }
}
.hero-title em {
font-style: italic;
color: var(--gold-bright);
font-weight: 400;
display: block;
}
.hero-sub {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(16px, 1.7vw, 21px);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: lowercase;
color: var(--ivory-dim);
margin: 0 0 26px;
opacity: 0;
animation: fadeUp 1.4s 0.7s ease-out forwards;
}
.hero-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
max-width: 320px;
margin: 0 auto 28px;
opacity: 0;
animation: fadeUp 1.4s 0.95s ease-out forwards;
}
.hero-rule-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(201, 169, 97, 0.55) 50%,
transparent 100%);
}
.hero-rule-mark {
font-family: var(--font-display);
font-size: 14px;
line-height: 1;
color: var(--gold);
transform: translateY(-1px);
text-shadow: 0 0 12px rgba(201, 169, 97, 0.35);
}
.hero-lede {
font-family: var(--font-body);
font-size: clamp(14px, 1.15vw, 16px);
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.01em;
color: var(--text-secondary);
max-width: 560px;
margin: 0 auto;
opacity: 0;
animation: fadeUp 1.4s 1.15s ease-out forwards;
}
.hero-lede::first-line {
color: var(--ivory-dim);
}
.hero-scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--text-muted);
text-align: center;
opacity: 0;
animation: fadeUp 1.4s 1.5s ease-out forwards, bob 3s 2.9s ease-in-out infinite;
z-index: 4;
pointer-events: none;
}
.hero-scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(180deg, var(--gold), transparent);
margin: 14px auto 0;
}
/* Vignette: side-darkening removed so the chips read clearly across the
full width. Just a soft top dust + a clean fade-to-black at the bottom. */
.hero-vignette {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.12) 0%,
transparent 25%,
transparent 60%,
rgba(0, 0, 0, 0.85) 95%,
var(--bg-abyss) 100%
);
z-index: 3;
pointer-events: none;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bob {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* ===================== SCROLLYTELLING STAGE ===================== */
.stage {
position: relative;
height: 500vh; /* Scroll distance */
margin: 0;
/* Fallback warm-felt tint so the section never reads as pure-black void
if the canvas is mid-render. */
background:
radial-gradient(ellipse 60% 40% at 50% 50%, rgba(20, 30, 24, 0.35) 0%, transparent 70%),
var(--bg-abyss);
}
.stage-sticky {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
display: grid;
place-items: center;
}
#stageCanvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.stage-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
perspective: 1400px; /* enables 3D tilt on the popup */
}
/* Popup orbit: per-step the panel glides between four anchor positions
(right → top → left → bottom). Each anchor adds a slight rotateY/X for
3D perspective; a moving gloss sheen passes across the surface; deep
floating shadow lifts it off the table. */
.stage-panel {
position: absolute;
pointer-events: auto;
width: clamp(280px, 38vw, 420px);
background:
linear-gradient(135deg, rgba(201, 169, 97, 0.10), transparent 35%),
linear-gradient(225deg, rgba(201, 169, 97, 0.06), transparent 40%),
linear-gradient(180deg, rgba(15, 15, 15, 0.94), rgba(5, 5, 5, 0.96));
border: 1px solid var(--gold-dim);
border-radius: 16px;
padding: 26px 30px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 0 0 1px rgba(201, 169, 97, 0.18),
0 32px 70px rgba(0, 0, 0, 0.7),
0 8px 22px rgba(0, 0, 0, 0.45),
0 0 50px rgba(201, 169, 97, 0.15);
transform-style: preserve-3d;
opacity: 0;
/* Default anchor: right-centre */
top: 50%;
right: 48px;
left: auto;
bottom: auto;
transform: translate3d(0, -50%, 0) rotateY(-5deg);
transition:
opacity 0.45s ease,
top 0.7s cubic-bezier(0.22, 1, 0.36, 1),
right 0.7s cubic-bezier(0.22, 1, 0.36, 1),
left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
bottom 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: top, right, left, bottom, transform, opacity;
}
/* Moving gloss sheen across the card surface — looks like polished lacquer. */
.stage-panel::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
115deg,
transparent 35%,
rgba(255, 230, 170, 0.12) 48%,
rgba(255, 245, 215, 0.18) 50%,
rgba(255, 230, 170, 0.10) 52%,
transparent 65%
);
background-size: 250% 100%;
background-position: 130% 0;
animation: stagePanelShine 6.5s ease-in-out infinite;
mix-blend-mode: overlay;
z-index: 1;
}
/* Inner content sits above the sheen layer */
.stage-panel-float { position: relative; z-index: 2; }
@keyframes stagePanelShine {
0%, 100% { background-position: 130% 0; }
50% { background-position: -30% 0; }
}
.stage-panel.visible { opacity: 1; }
.stage-panel.transit { opacity: 0; transition-duration: 0.25s; }
/* ---- Anchor positions with per-position 3D tilt ---- */
.stage-panel[data-pos="right"] {
top: 50%; right: 48px; left: auto; bottom: auto;
transform: translate3d(0, -50%, 0) rotateY(-5deg);
}
.stage-panel[data-pos="top"] {
top: calc(var(--topbar-h) + 36px);
left: 50%; right: auto; bottom: auto;
transform: translate3d(-50%, 0, 0) rotateX(5deg);
}
.stage-panel[data-pos="left"] {
top: 50%; left: 48px; right: auto; bottom: auto;
transform: translate3d(0, -50%, 0) rotateY(5deg);
}
.stage-panel[data-pos="bottom"] {
bottom: 36px; left: 50%; top: auto; right: auto;
transform: translate3d(-50%, 0, 0) rotateX(-5deg);
}
/* Inner: gentle continuous bob so the panel feels alive, not pinned. */
.stage-panel-float {
animation: stagePanelFloat 5.5s ease-in-out infinite;
will-change: transform;
}
@keyframes stagePanelFloat {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -8px, 0); }
}
@media (prefers-reduced-motion: reduce) {
.stage-panel::before { animation: none; }
.stage-panel-float { animation: none; }
.stage-panel { transition: opacity 0.3s ease; }
}
@media (max-width: 820px) {
.stage-panel { width: calc(100% - 32px); padding: 18px 20px; }
.stage-panel[data-pos="right"] { right: 16px; left: auto; }
.stage-panel[data-pos="left"] { left: 16px; right: auto; }
.stage-panel[data-pos="top"] { top: 14px; }
.stage-panel[data-pos="bottom"] { bottom: 18px; }
}
.stage-step {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
color: var(--gold-bright);
text-transform: uppercase;
margin-bottom: 12px;
}
.stage-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
color: var(--ivory);
margin-bottom: 14px;
line-height: 1.15;
}
.stage-body {
font-size: 14px;
line-height: 1.7;
color: var(--ivory-dim);
}
.stage-body em { color: var(--gold-bright); font-style: italic; }
.stage-body strong { color: var(--ivory); }
.stage-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: rgba(201, 169, 97, 0.1);
z-index: 10;
}
.stage-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright), var(--carmine));
width: 0%;
transition: width 0.1s linear;
}
/* ===================== CARD COMPONENTS ===================== */
.card-row {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin: 32px 0;
}
.p-card {
--w: 80px;
width: var(--w);
aspect-ratio: 5 / 7;
background: linear-gradient(180deg, #faf5e6 0%, #f3ead3 100%);
border-radius: 6px;
position: relative;
box-shadow:
0 2px 0 rgba(0, 0, 0, 0.15),
0 6px 20px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(0, 0, 0, 0.08) inset;
overflow: hidden;
transform-style: preserve-3d;
transition: transform 0.3s ease, box-shadow 0.3s ease;
flex-shrink: 0;
}
.p-card:hover {
transform: translateY(-6px) rotate(-1deg);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.6),
0 0 0 1px var(--gold) inset,
0 0 20px rgba(201, 169, 97, 0.2);
}
.p-card.back {
background:
linear-gradient(135deg, #8a1c21 0%, #c1272d 50%, #8a1c21 100%);
}
.p-card.back::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(201, 169, 97, 0.6);
border-radius: 3px;
background-image:
repeating-linear-gradient(45deg, rgba(201, 169, 97, 0.2) 0, rgba(201, 169, 97, 0.2) 1px, transparent 1px, transparent 6px),
repeating-linear-gradient(-45deg, rgba(201, 169, 97, 0.15) 0, rgba(201, 169, 97, 0.15) 1px, transparent 1px, transparent 6px);
}
.p-card.back::after {
content: '♠';
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: calc(var(--w) * 0.45);
color: var(--gold);
text-shadow: 0 0 10px rgba(201, 169, 97, 0.5);
}
/* SVG-art cards: image fills the card; suppress the old CSS back pattern */
.p-card.svg {
background: #ffffff;
}
.p-card.svg.back::before,
.p-card.svg.back::after { content: none; display: none; }
.p-card-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.p-card-rank {
position: absolute;
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: calc(var(--w) * 0.22);
line-height: 1;
}
.p-card-suit-small {
position: absolute;
font-size: calc(var(--w) * 0.14);
line-height: 1;
}
.p-card-rank.tl {
top: 6px;
left: 6px;
}
.p-card-suit-small.tl {
top: calc(var(--w) * 0.28);
left: 7px;
}
.p-card-rank.br {
bottom: 6px;
right: 6px;
transform: rotate(180deg);
}
.p-card-suit-small.br {
bottom: calc(var(--w) * 0.28);
right: 7px;
transform: rotate(180deg);
}
.p-card-center {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: calc(var(--w) * 0.5);
line-height: 1;
}
.p-card.red { color: var(--carmine); }
.p-card.black { color: #0a0a0a; }
.p-card-value {
position: absolute;
bottom: -22px;
left: 0;
right: 0;
text-align: center;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--gold-bright);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Flip animation for deal */
.p-card.dealing {
animation: cardDeal 0.6s ease-out;
}
@keyframes cardDeal {
0% { opacity: 0; transform: translateY(-80px) rotate(-15deg); }
60% { opacity: 1; transform: translateY(4px) rotate(1deg); }
100% { opacity: 1; transform: translateY(0) rotate(0); }
}
/* ===================== CARD VALUE EXPLAINER GRID ===================== */
/* ---------- Section 02: pinned scrollytelling card stage ---------- */
.values-stage {
position: relative;
/* Natural height — no scroll runway, no pin. The cards sit immediately
under the lede and the spotlight cycles as the user scrolls past. */
margin: 12px 0 16px;
}
.values-stage-inner {
position: static;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.values-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: stretch;
perspective: 1200px;
}
.value-card-large {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
padding: 28px 24px 26px;
background: linear-gradient(180deg, rgba(22, 22, 22, 0.62) 0%, rgba(12, 12, 12, 0.48) 100%);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
/* Resting = full-strength. Hover = slight enlarge + gold rim. */
transform: translateZ(0);
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s ease,
box-shadow 0.35s ease,
background 0.3s ease;
transform-origin: center top;
will-change: transform;
}
.value-card-large:hover {
transform: scale(1.04) translateZ(0);
border-color: var(--gold);
background: linear-gradient(180deg, rgba(30, 30, 30, 0.74) 0%, rgba(15, 15, 15, 0.58) 100%);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.5),
0 0 60px rgba(201, 169, 97, 0.18),
0 0 0 1px rgba(201, 169, 97, 0.22) inset;
z-index: 2;
}
.value-card-large-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
order: 1; /* text above the card art */
}
.value-card-large-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.value-card-large:hover .value-card-large-label {
color: var(--gold);
}
.value-card-large-title {
font-family: var(--font-body);
font-size: 18px;
font-weight: 700;
color: var(--ivory);
letter-spacing: -0.005em;
line-height: 1.25;
margin: 0;
}
.value-card-large-sub {
font-size: 13.5px;
line-height: 1.55;
color: var(--text-secondary);
max-width: 28ch;
margin: 0;
}
.value-card-large:hover .value-card-large-sub {
color: var(--ivory-dim);
}
.value-card-large-art {
position: relative;
display: grid;
place-items: center;
order: 2; /* card art below the text */
}
.value-card-large-svg {
width: 150px;
max-width: 100%;
height: auto;
border-radius: 8px;
background: #ffffff;
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(0, 0, 0, 0.12);
position: relative;
z-index: 2;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.value-card-large:hover .value-card-large-svg {
transform: translateY(-4px) rotate(-1.5deg);
}
.value-card-large-glow {
position: absolute;
inset: -24px;
border-radius: 50%;
background: radial-gradient(ellipse at center,
rgba(255, 205, 130, 0.32) 0%,
rgba(201, 169, 97, 0.13) 35%,
transparent 70%);
filter: blur(24px);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 1;
}
.value-card-large:hover .value-card-large-glow { opacity: 1; }
/* Progress dots — hidden because the scroll spotlight has been removed.
Markup is preserved for now in case the dots are repurposed later. */
.values-progress {
display: none;
}
.values-progress-dot {
width: 28px;
height: 4px;
border-radius: 2px;
background: rgba(201, 169, 97, 0.18);
transition: background 0.4s ease, transform 0.4s ease;
}
.values-progress-dot.is-active {
background: var(--gold);
transform: scaleY(1.6);
}
/* Mobile: skip the pin/scrub. Show all 3 stacked at full size. */
@media (max-width: 900px) {
.values-stage {
height: auto;
margin: 32px 0 48px;
}
.values-stage-inner {
position: static;
height: auto;
gap: 18px;
}
.values-track {
grid-template-columns: 1fr;
gap: 18px;
}
.value-card-large {
transform: none;
opacity: 1;
filter: none;
padding: 24px 20px;
}
.value-card-large-svg { width: 130px; }
.value-card-large-title { font-size: 17px; }
.values-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.values-stage { height: auto; }
.values-stage-inner { position: static; height: auto; }
.value-card-large { transform: none; opacity: 1; filter: none; transition: none; }
.values-progress { display: none; }
}
/* ===================== TAB COMPONENT ===================== */
.tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-subtle);
margin: 32px 0 24px;
flex-wrap: wrap;
}
.tab {
padding: 14px 22px 14px 18px;
cursor: pointer;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all 0.25s ease;
display: flex;
align-items: center;
gap: 10px;
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.tab:hover {
color: var(--ivory);
}
.tab.active {
color: var(--ivory);
border-bottom-color: var(--carmine);
}
/* ---- Pill-style tab variant (used in the modulo-10 examples) ---- */
.tabs--pills {
border-bottom: none;
justify-content: center;
gap: 8px;
margin: 24px 0 28px;
}
.tabs--pills .tab {
padding: 10px 18px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
margin-bottom: 0;
background: rgba(20, 20, 20, 0.55);
font-size: 13.5px;
gap: 8px;
}
.tabs--pills .tab:hover {
color: var(--ivory);
border-color: var(--gold-dim);
background: rgba(201, 169, 97, 0.06);
}
.tabs--pills .tab.active {
color: var(--bg-abyss);
border-color: var(--gold-bright);
background: linear-gradient(180deg, var(--gold-bright), var(--gold));
box-shadow: 0 6px 18px rgba(201, 169, 97, 0.3);
}
.tabs--pills .tab.active .tab-cn,
.tabs--pills .tab.active .tab-label { color: var(--bg-abyss); }
.tabs--pills .tab-cn {
font-size: 14px;
font-style: italic;
color: var(--gold);
}
.tabs--pills .tab.active .tab-cn { color: var(--gold-bright); }
.tabs--pills .tab-label {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.04em;
}
.tab-cn {
font-family: var(--font-display);
font-size: 18px;
color: var(--gold-bright);
font-style: italic;
}
.tab-meta {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 3px;
background: var(--bg-felt);
}
.tab.active .tab-meta {
color: var(--carmine-bright);
background: rgba(193, 39, 45, 0.15);
}
.tab-panel {
background: linear-gradient(180deg, var(--bg-felt-deep), var(--bg-panel));
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 36px 36px;
margin-bottom: 24px;
position: relative;
display: none;
}
.tab-panel.active {
display: block;
animation: panelIn 0.4s ease-out;
}
@keyframes panelIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-panel-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 22px;
gap: 24px;
}
.tab-panel-title {
font-family: var(--font-display);
font-size: 30px;
font-weight: 600;
color: var(--ivory);
line-height: 1.2;
}
.tab-panel-title .cn {
color: var(--carmine-bright);
font-style: italic;
margin-left: 10px;
}
.tab-panel-desc {
font-size: 15px;
color: var(--ivory-dim);
line-height: 1.65;
margin-bottom: 22px;
max-width: 640px;
}
.tab-replay {
background: var(--bg-felt);
border: 1px solid var(--border-subtle);
color: var(--ivory-dim);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: all 0.2s ease;
white-space: nowrap;
}
.tab-replay:hover {
border-color: var(--gold);
color: var(--gold-bright);
}
/* ===================== SHOE SECTION ===================== */
/* ---- Deck spread ---- */
/*
Mirrors the Framer CardDeckSpread mechanic:
Cards start stacked at the centre with subtle depth offset; when the
section enters the viewport (.is-spread is added by JS), each card slides
to its own --offset, fanning out into a row with a 60-px overlap and a
cubic-bezier(0.25, 0.8, 0.25, 1) easing on a 700-ms timing.
*/
.deck-spread {
--card-w: 138px;
--card-h: 194px;
--overlap: 92px; /* per-card x-shift; bigger = more visible per card */
position: relative;
height: calc(var(--card-h) + 56px);
margin: 36px 0 22px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1400px;
}
.deck-spread-track {
position: relative;
width: 100%;
height: var(--card-h);
}
.deck-spread-card {
position: absolute;
left: 50%;
top: 0;
width: var(--card-w);
height: var(--card-h);
margin-left: calc(var(--card-w) / -2);
border-radius: 12px;
box-shadow:
0 6px 28px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(0, 0, 0, 0.35);
/* Stacked baseline: small staircase offset for depth perception */
transform: translate3d(0, calc(var(--depth, 0) * 1.5px), 0) rotate(calc(var(--rot, 0) * 1deg));
transition:
transform 0.75s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.4s ease;
will-change: transform;
cursor: pointer;
overflow: hidden;
}
/* Red lacquer back — same look as the original CSS-built card backs:
carmine gradient body, gold inner trim with crossing diagonal weave,
big gold spade in the middle. */
.deck-spread-back {
background: linear-gradient(135deg, #6e1418 0%, #c1272d 50%, #6e1418 100%);
}
.deck-spread-back::before {
content: '';
position: absolute;
inset: 10px;
border: 1px solid rgba(201, 169, 97, 0.55);
border-radius: 6px;
background-image:
repeating-linear-gradient(45deg, rgba(201, 169, 97, 0.20) 0, rgba(201, 169, 97, 0.20) 1px, transparent 1px, transparent 8px),
repeating-linear-gradient(-45deg, rgba(201, 169, 97, 0.16) 0, rgba(201, 169, 97, 0.16) 1px, transparent 1px, transparent 8px);
pointer-events: none;
}
.deck-spread-back::after {
content: '♠';
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: calc(var(--card-w) * 0.5);
color: var(--gold);
text-shadow: 0 0 14px rgba(201, 169, 97, 0.5);
pointer-events: none;
}
/* When the section enters viewport, each card translates to its --offset.
The 90-ms stagger comes from --i * 0.09s applied as transition-delay. */
.deck-spread.is-spread .deck-spread-card {
transform: translate3d(var(--offset, 0), 0, 0);
transition-delay: calc(var(--i, 0) * 0.06s);
}
.deck-spread.is-spread .deck-spread-card:hover {
transform: translate3d(var(--offset, 0), -14px, 0) scale(1.06);
box-shadow:
0 18px 50px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(201, 169, 97, 0.4),
0 0 30px rgba(201, 169, 97, 0.25);
z-index: 99 !important;
}
.deck-spread-caption {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
opacity: 0;
transition: opacity 0.6s ease 0.7s;
}
.deck-spread.is-spread .deck-spread-caption { opacity: 1; }
.deck-spread-caption-line {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
@media (max-width: 900px) {
.deck-spread {
--card-w: 130px;
--card-h: 182px;
--overlap: 56px;
margin: 32px 0 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.deck-spread-card { transition: none !important; }
}
/* ===================== MODULO-10 EXAMPLES (section 02) ===================== */
.modulo-section-head {
text-align: center;
margin: 96px auto 48px;
max-width: 640px;
}
/* Tighten the section header → spotlight cards distance just for sec-values. */
#sec-values .section-header { margin-bottom: 18px; }
.modulo-section-head .sub-title {
margin: 0 0 14px;
font-size: 40px;
letter-spacing: -0.012em;
}
.modulo-section-sub {
font-size: 16px;
line-height: 1.65;
color: var(--text-secondary);
margin: 0 auto;
max-width: 540px;
}
/* The modulo tab panels strip the standard panel framing so the felt
stage below can carry the visual weight on its own. */
.tab-panel--modulo {
background: transparent;
border: none;
padding: 0;
margin-bottom: 0;
}
.modulo-layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 56px;
align-items: stretch;
min-height: 460px;
margin-top: 12px;
}
/* ---- Left column: cards on a felt-table background ---- */
.modulo-stage {
position: relative;
display: flex;
}
.modulo-felt {
flex: 1;
position: relative;
display: grid;
place-items: center;
padding: 78px 56px;
border-radius: 20px;
/* Real-table look: deep felt with a subtle radial highlight, gold rim,
inner shadow for depth. */
background:
radial-gradient(ellipse 80% 70% at 50% 38%, var(--bg-felt-light) 0%, var(--bg-felt) 55%, var(--bg-felt-deep) 100%);
border: 1px solid var(--gold-dim);
box-shadow:
inset 0 0 80px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(201, 169, 97, 0.18),
0 18px 50px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
/* Inner gold trim ring — the "playing area" outline you see on real felt. */
.modulo-felt::before {
content: '';
position: absolute;
inset: 14px;
border: 1px solid rgba(201, 169, 97, 0.22);
border-radius: 12px;
pointer-events: none;
}
/* Felt weave texture — diagonal threads at very low opacity. */
.modulo-felt::after {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(45deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.012) 2px, rgba(255, 255, 255, 0.012) 4px),
repeating-linear-gradient(-45deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.045) 2px, rgba(0, 0, 0, 0.045) 4px);
border-radius: inherit;
pointer-events: none;
mix-blend-mode: overlay;
}
/* Faded "Player" mark on the felt — like the printed labels on a real layout. */
.modulo-felt-mark {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(201, 169, 97, 0.4);
z-index: 1;
}
.modulo-felt-mark-natural {
color: rgba(224, 67, 73, 0.55);
}
.modulo-cards {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
padding-top: 16px;
}
.modulo-cards .p-card {
transform: rotate(-3deg);
transition: transform 0.3s ease;
}
.modulo-cards .p-card:nth-child(3) { transform: rotate(3deg); }
.modulo-cards:hover .p-card { transform: rotate(0); }
.modulo-plus {
font-family: var(--font-display);
font-size: 44px;
font-weight: 400;
color: var(--gold);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
user-select: none;
}
/* ---- Right column: title, body, big result ---- */
.modulo-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.modulo-info-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
}
.modulo-info-title {
font-family: var(--font-display);
font-size: 38px;
font-weight: 600;
color: var(--ivory);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
}
.modulo-info-body {
font-size: 15.5px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0;
max-width: 46ch;
}
.modulo-info-body strong { color: var(--ivory); font-weight: 600; }
.modulo-info-body em { color: var(--gold-bright); font-style: italic; }
.modulo-info-result {
display: flex;
align-items: baseline;
gap: 14px;
margin-top: 10px;
padding: 18px 22px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(193, 39, 45, 0.1) 0%, rgba(201, 169, 97, 0.08) 100%);
border: 1px solid var(--border-subtle);
align-self: flex-start;
}
.modulo-info-result-eq {
font-family: var(--font-display);
font-size: 32px;
color: var(--gold);
line-height: 1;
}
.modulo-info-result-val {
font-family: var(--font-display);
font-size: 72px;
font-weight: 600;
color: var(--gold-bright);
line-height: 0.9;
letter-spacing: -0.02em;
}
.modulo-info-result-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin-left: 6px;
align-self: center;
}
@media (max-width: 900px) {
.modulo-section-head { margin-top: 80px; }
.modulo-section-head .sub-title { font-size: 30px; }
.modulo-layout {
grid-template-columns: 1fr;
gap: 28px;
min-height: auto;
}
.modulo-felt { padding: 48px 24px; }
.modulo-cards { gap: 20px; }
.modulo-cards .p-card { --w: 118px !important; }
.modulo-info-title { font-size: 28px; }
.modulo-info-result-val { font-size: 56px; }
.modulo-info-result { padding: 14px 18px; }
}
/* ===================== TABLE SIDES (Player / Banker) ===================== */
.hand-layout {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 38px;
align-items: start;
margin: 36px 0 26px;
}
.hand-side {
text-align: center;
}
.hand-label {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 18px;
font-weight: 600;
}
.hand-label.player { color: var(--jade-bright); }
.hand-label.banker { color: var(--carmine-bright); }
.hand-cards {
display: flex;
justify-content: center;
gap: 12px;
min-height: 170px;
flex-wrap: wrap;
}
.hand-total {
font-family: var(--font-display);
font-size: 54px;
font-weight: 600;
margin-top: 22px;
line-height: 1;
}
.hand-total .lbl {
font-family: var(--font-mono);
font-size: 11px;
display: block;
color: var(--text-muted);
letter-spacing: 0.2em;
margin-bottom: 5px;
text-transform: uppercase;
font-weight: 600;
}
.hand-total.player { color: var(--jade-bright); }
.hand-total.banker { color: var(--carmine-bright); }
.hand-vs {
display: grid;
place-items: center;
padding-top: 58px;
}
.hand-vs-dot {
font-family: var(--font-display);
font-style: italic;
font-size: 56px;
color: var(--gold);
}
/* ===================== TABLEAU / RULES TABLE ===================== */
.tableau-wrap {
margin: 32px 0;
background: var(--bg-panel);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
}
.tableau-head {
padding: 20px 24px;
border-bottom: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(90deg, var(--bg-felt-deep), var(--bg-panel));
}
.tableau-head-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--ivory);
}
.tableau-head-sub {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tableau-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.tableau-table th {
padding: 14px 16px;
text-align: left;
font-family: var(--font-mono);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-felt-deep);
}
.tableau-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-primary);
}
.tableau-table tr:last-child td { border-bottom: none; }
.tableau-table tr:hover td {
background: var(--bg-felt);
}
.tab-badge {
display: inline-block;
padding: 3px 9px;
border-radius: 12px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
}
.tab-badge.draw {
background: rgba(74, 157, 127, 0.15);
color: var(--jade-bright);
border: 1px solid rgba(74, 157, 127, 0.3);
}
.tab-badge.stand {
background: rgba(193, 39, 45, 0.12);
color: var(--carmine-bright);
border: 1px solid rgba(193, 39, 45, 0.3);
}
.tab-badge.natural {
background: rgba(201, 169, 97, 0.12);
color: var(--gold-bright);
border: 1px solid rgba(201, 169, 97, 0.3);
}
/* ---- Side-by-side Player/Banker rule panels (Section 05) ----
Two columns on desktop; stacks on ≤900px. The inner tables get
tighter padding/typography so the Banker rule's wide cells fit
inside a half-width column without wrapping awkwardly. */
.tableau-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: start;
margin: 28px 0 16px;
}
.tableau-col > .minor-title { margin: 0 0 10px; }
.tableau-col > .tableau-wrap { margin: 0; }
.tableau-col-prose {
font-size: 14px;
line-height: 1.6;
color: var(--ivory-dim);
margin: 0 0 14px;
}
.tableau-col-prose em { color: var(--gold-bright); font-style: italic; }
.tableau-range {
font-family: var(--font-display);
font-size: 17px;
letter-spacing: 0.01em;
color: var(--ivory);
white-space: nowrap;
}
.tableau-grid .tableau-head { padding: 14px 18px; }
.tableau-grid .tableau-head-title { font-size: 17px; }
.tableau-grid .tableau-head-sub { font-size: 10px; }
.tableau-grid .tableau-table { font-size: 12.5px; }
.tableau-grid .tableau-table th,
.tableau-grid .tableau-table td { padding: 11px 12px; }
.tableau-grid .tableau-table th { font-size: 9.5px; letter-spacing: 0.1em; }
.tableau-grid .tab-badge { font-size: 9.5px; padding: 3px 8px; }
@media (max-width: 900px) {
.tableau-grid { grid-template-columns: 1fr; gap: 22px; }
.tableau-grid .tableau-head { padding: 18px 22px; }
.tableau-grid .tableau-head-title { font-size: 19px; }
.tableau-grid .tableau-table { font-size: 13px; }
.tableau-grid .tableau-table th,
.tableau-grid .tableau-table td { padding: 13px 14px; }
.tableau-range { font-size: 18px; }
}
/* ===================== BET / SIMULATOR ===================== */
.sim {
background:
radial-gradient(ellipse 70% 80% at 50% 20%, rgba(201, 169, 97, 0.06), transparent 60%),
linear-gradient(180deg, var(--bg-felt-light) 0%, var(--bg-felt-deep) 100%);
border: 1px solid var(--border-gold);
border-radius: var(--radius-lg);
padding: 36px 36px;
margin: 32px 0;
position: relative;
overflow: hidden;
}
/* ---- Variant picker (Punto Banco / Mini / Dragon Tiger) ---- */
.sim-variant-picker {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 24px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border-subtle);
}
.sim-variant {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: rgba(0, 0, 0, 0.35);
color: var(--text-secondary);
font-family: inherit;
cursor: pointer;
transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.sim-variant:hover {
color: var(--ivory);
border-color: var(--gold-dim);
background: rgba(201, 169, 97, 0.06);
}
.sim-variant.active {
color: var(--bg-abyss);
background: linear-gradient(180deg, var(--gold-bright), var(--gold));
border-color: var(--gold-bright);
box-shadow: 0 6px 18px rgba(201, 169, 97, 0.3);
}
.sim-variant.active .sim-variant-cn,
.sim-variant.active .sim-variant-label { color: var(--bg-abyss); }
.sim-variant-cn {
font-family: var(--font-display);
font-size: 14px;
font-style: italic;
color: var(--gold);
}
.sim-variant-label {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.04em;
font-weight: 500;
}
/* ---- Rules panel — swaps text per variant ---- */
.sim-rules {
margin: 0 0 24px;
padding: 14px 18px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--gold);
border-radius: var(--radius-md);
}
.sim-rules-eyebrow {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
}
.sim-rules-body {
font-size: 13.5px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.sim-rules-body strong { color: var(--ivory); font-weight: 600; }
.sim-rules-body em { color: var(--gold-bright); font-style: italic; }
/* Hide the strategy demo trigger when the variant doesn't match its
bet schema (it's keyed to player/banker/tie). */
.sim[data-variant="dragontiger"] .strat-demo-trigger { display: none; }
.sim::before {
content: '';
position: absolute;
inset: 12px;
border: 1px solid rgba(201, 169, 97, 0.08);
border-radius: var(--radius-md);
pointer-events: none;
}
.sim-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
gap: 20px;
flex-wrap: wrap;
}
.sim-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
color: var(--ivory);
margin-bottom: 6px;
}
.sim-sub {
font-size: 13px;
color: var(--ivory-dim);
}
.sim-bankroll {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.sim-bankroll-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
}
.sim-bankroll-value {
font-family: var(--font-display);
font-size: 34px;
font-weight: 600;
color: var(--gold-bright);
line-height: 1;
}
.sim-bankroll-value.down { color: var(--carmine-bright); }
.sim-bankroll-value.up { color: var(--jade-bright); }
/* ---- Real-felt baccarat table ----
Curved-top oval with deep dark felt + gold rim. Player and Banker card
boxes sit on the upper half; three printed bet circles sit on the lower
half. The same DOM serves Punto Banco, Mini, and Dragon Tiger — labels
and bet-box content swap via simulator.js applyVariant(). */
/* Playfield wrapper holds the aspect-ratio so bets + controls can overlay
the table (desktop) without growing the table image. On mobile the
playfield auto-sizes and children flow naturally below. */
.sim-playfield {
position: relative;
width: 100%;
aspect-ratio: 1606 / 979;
margin: 0 auto 24px;
}
/* ---- Realistic-table layout (image background + positioned overlays) ---- */
.sim-table--realistic {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
background:
url('../../media/baccarat-table.png') no-repeat center center;
background-size: 100% 100%;
overflow: visible;
}
.sim-table--realistic::before,
.sim-table--realistic::after { content: none; display: none; }
/* Variant mark covers the painted 百家樂 at top-centre. */
.sim-table--realistic .sim-table-mark {
position: absolute;
top: 7%;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(14px, 1.6vw, 24px);
letter-spacing: 0.32em;
color: rgba(201, 169, 97, 0.92);
/* Solid background to mask the painted mark beneath when it differs. */
padding: 4px 14px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
border-radius: 4px;
pointer-events: none;
z-index: 4;
white-space: nowrap;
}
/* Hand labels overlay the painted PUNTO-PLAYER / BANCO-BANKER text so
variant switching can rewrite them (Dragon · 龍 / Tiger · 虎). */
.sim-table--realistic .sim-hand-label {
position: absolute;
top: 14%;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(13px, 1.5vw, 22px);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
/* Solid felt-tone background to cover the painted label */
background: rgba(8, 24, 18, 0.95);
padding: 4px 12px;
border-radius: 3px;
z-index: 3;
white-space: nowrap;
margin: 0;
}
.sim-table--realistic .sim-hand-label-player { left: 22%; transform: translateX(-50%); }
.sim-table--realistic .sim-hand-label-banker { right: 22%; transform: translateX(50%); }
/* Card landing zones — sit exactly over the painted card outlines on the
new baccarat_table.png image (outlines run ~24-35% / ~65-76% from left,
~32-50% from top). */
.sim-table--realistic .sim-hand-zone {
position: absolute;
top: 33%;
width: 12%;
height: 17%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
z-index: 2;
}
.sim-table--realistic .sim-hand-zone-player { left: 24%; }
.sim-table--realistic .sim-hand-zone-banker { right: 24%; }
.sim-table--realistic .sim-hand-cards {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
width: 100%;
height: 100%;
}
.sim-table--realistic .sim-hand-cards .p-card {
--w: clamp(34px, 4.6vw, 70px) !important;
}
/* Hand totals — appear just BELOW the painted card outlines on the felt */
.sim-table--realistic .sim-hand-total {
position: absolute;
top: 53%;
font-family: var(--font-display);
font-size: clamp(22px, 2.6vw, 38px);
font-weight: 600;
line-height: 1;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
z-index: 3;
}
.sim-table--realistic .sim-hand-total.player {
color: var(--jade-bright);
left: 30%;
transform: translateX(-50%);
}
.sim-table--realistic .sim-hand-total.banker {
color: var(--carmine-bright);
right: 30%;
transform: translateX(50%);
}
/* Wager row sits ON the felt — positioned absolutely against the
playfield wrapper so the table image itself stays at its fixed aspect. */
.sim-playfield .sim-bets {
position: absolute;
top: 72%;
left: 16%;
right: 16%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(8px, 1.2vw, 18px);
margin: 0;
padding: 0;
max-width: none;
z-index: 4;
}
/* Chips + Deal/Auto/Reset row sits just below the wagers, on the felt
bottom edge / table rim. Pill fits its content (no edge-stretch). */
.sim-playfield .sim-controls {
position: absolute;
top: 88%;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: calc(100% - 32px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: clamp(8px, 1.2vw, 16px);
flex-wrap: wrap;
padding: clamp(6px, 0.9vw, 12px) clamp(14px, 1.6vw, 22px);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7));
border: 1px solid rgba(201, 169, 97, 0.22);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 4;
}
/* Slightly tighter chip + button sizing inside the playfield */
.sim-playfield .chip-btn {
width: clamp(34px, 3.4vw, 48px);
height: clamp(34px, 3.4vw, 48px);
font-size: clamp(10px, 0.9vw, 13px);
}
.sim-playfield .btn {
padding: clamp(7px, 0.9vw, 11px) clamp(12px, 1.4vw, 20px);
font-size: clamp(11px, 1vw, 14px);
}
/* Compact, semi-transparent bet boxes so the felt reads through but the
text stays crisp on the green background. */
.sim-playfield .bet-box {
padding: clamp(8px, 1.1vw, 14px) clamp(6px, 0.9vw, 12px);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.62));
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1.5px solid rgba(201, 169, 97, 0.28);
border-radius: 10px;
gap: 2px;
}
.sim-playfield .bet-box .bet-label {
font-size: clamp(11px, 1.05vw, 15px);
}
.sim-playfield .bet-box .bet-payout {
font-size: clamp(13px, 1.4vw, 18px);
}
.sim-playfield .bet-box .bet-edge {
font-size: clamp(8px, 0.7vw, 10px);
}
.sim-playfield .bet-box:hover {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.7));
}
.sim-playfield .bet-box.selected {
border-color: var(--gold-bright);
background: linear-gradient(180deg, rgba(40, 32, 16, 0.85), rgba(20, 16, 8, 0.85));
box-shadow:
0 0 0 1px var(--gold-bright) inset,
0 0 28px rgba(201, 169, 97, 0.45);
}
.sim-playfield .bet-box.winner {
border-color: var(--jade-bright);
background: linear-gradient(180deg, rgba(20, 50, 38, 0.9), rgba(10, 28, 22, 0.9));
box-shadow:
0 0 0 2px var(--jade-bright) inset,
0 0 30px rgba(74, 157, 127, 0.55);
}
/* Chip badge stays attached to the corner of the (now smaller) bet box */
.sim-playfield .bet-box .bet-chip {
width: clamp(22px, 2.2vw, 32px);
height: clamp(22px, 2.2vw, 32px);
top: -10px;
right: -10px;
font-size: clamp(9px, 0.85vw, 11px);
}
@media (max-width: 720px) {
.sim-table--realistic .sim-table-mark { font-size: 12px; padding: 3px 10px; }
.sim-table--realistic .sim-hand-label { font-size: 11px; padding: 3px 8px; }
}
/* ---- Card-boxes row ---- */
.sim-hands {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: stretch;
margin: 18px 0 32px;
}
.sim-hand {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.sim-hand-label {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
font-style: italic;
}
.sim-hand-label.player { color: var(--jade-bright); }
.sim-hand-label.banker { color: var(--carmine-bright); }
/* The card "frame" — printed gold-bordered rectangle that holds the cards */
.sim-hand-frame {
position: relative;
width: 100%;
min-height: 110px;
padding: 14px 12px;
border: 1px solid rgba(201, 169, 97, 0.25);
border-radius: var(--radius-md);
background:
radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0, 0, 0, 0.25), transparent 80%),
rgba(0, 0, 0, 0.18);
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}
.sim-hand-cards {
display: flex;
gap: 6px;
justify-content: center;
min-height: 80px;
align-items: center;
}
.sim-hand-total {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1;
min-height: 32px;
}
.sim-hand-total.player { color: var(--jade-bright); }
.sim-hand-total.banker { color: var(--carmine-bright); }
.sim-vs {
position: relative;
display: grid;
place-items: center;
align-self: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--gold-dim);
background: rgba(0, 0, 0, 0.4);
}
.sim-vs span {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--gold);
}
/* ---- Wager row (Player / Tie / Banker) ---- */
.sim-bets {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 24px auto 16px;
max-width: 720px;
padding: 0;
}
.bet-box {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 18px 16px 16px;
border: 2px solid var(--border-subtle);
border-radius: var(--radius-md);
background: linear-gradient(180deg, rgba(20, 20, 20, 0.85), rgba(8, 8, 8, 0.9));
font-family: inherit;
cursor: pointer;
text-align: center;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.bet-box:hover {
transform: translateY(-2px);
border-color: var(--gold-dim);
background: linear-gradient(180deg, rgba(28, 28, 28, 0.9), rgba(12, 12, 12, 0.95));
}
.bet-box.selected {
border-color: var(--gold-bright);
background: linear-gradient(180deg, rgba(40, 32, 16, 0.85), rgba(20, 16, 8, 0.9));
box-shadow:
0 0 0 1px var(--gold-bright) inset,
0 0 28px rgba(201, 169, 97, 0.3);
}
.bet-box.winner {
border-color: var(--jade-bright);
background: linear-gradient(180deg, rgba(20, 50, 38, 0.85), rgba(10, 28, 22, 0.9));
box-shadow:
0 0 0 2px var(--jade-bright) inset,
0 0 30px rgba(74, 157, 127, 0.45);
animation: pulseWin 0.6s ease-out;
}
@keyframes pulseWin {
0% { transform: scale(1); }
50% { transform: scale(1.04); }
100% { transform: scale(1); }
}
.bet-label {
font-family: var(--font-display);
font-style: italic;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.04em;
margin: 0;
line-height: 1.1;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.bet-box.player-bet .bet-label { color: var(--jade-bright); }
.bet-box.banker-bet .bet-label { color: var(--carmine-bright); }
.bet-box.tie-bet .bet-label { color: var(--gold-bright); }
.bet-payout {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--ivory);
line-height: 1;
margin: 0;
}
.bet-edge {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.bet-chip {
display: none;
width: 38px;
height: 38px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold) 50%, var(--gold-dim));
position: absolute;
top: -10px;
right: -10px;
z-index: 5;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.7),
0 0 0 2px var(--bg-abyss),
0 0 0 3px rgba(201, 169, 97, 0.5);
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
color: var(--bg-abyss);
font-style: italic;
}
.bet-box.selected .bet-chip {
display: flex;
animation: chipDrop 0.4s ease-out;
}
@keyframes chipDrop {
0% { opacity: 0; transform: translateY(-40px) rotate(180deg); }
100% { opacity: 1; transform: translateY(0) rotate(0); }
}
/* Mobile-friendly felt: tighter padding + smaller bet circles. */
@media (max-width: 720px) {
.sim-table {
padding: 48px 18px 24px;
border-radius: 120px 120px 18px 18px / 60px 60px 18px 18px;
}
.sim-table::before {
inset: 10px;
border-radius: 110px 110px 12px 12px / 52px 52px 12px 12px;
}
.sim-table-mark { font-size: 14px; top: 16px; }
.sim-hands { gap: 10px; }
.sim-vs { width: 36px; height: 36px; }
.sim-bets { gap: 14px; padding: 0 8px; }
.bet-label { font-size: 13px; }
.bet-payout { font-size: 14px; }
.bet-edge { font-size: 8px; }
}
.sim-controls {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.sim-chip-row {
display: flex;
gap: 8px;
align-items: center;
}
.chip-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px dashed var(--ivory);
background: var(--carmine-deep);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
color: var(--ivory);
cursor: pointer;
transition: all 0.2s ease;
display: grid;
place-items: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.chip-btn.c25 { background: var(--jade-dim); border-color: var(--jade-bright); }
.chip-btn.c100 { background: #1a1a1a; border-color: var(--ivory); }
.chip-btn.c500 { background: var(--carmine); border-color: var(--gold); }
.chip-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.chip-btn.active {
outline: 2px solid var(--gold-bright);
outline-offset: 3px;
}
.btn {
padding: 12px 22px;
border-radius: 6px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
background: var(--bg-felt);
color: var(--ivory);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn:hover { background: var(--bg-felt-light); }
.btn-primary {
--pg-border: 1.5px;
--pg-inner: var(--ivory);
--pg-glow: var(--gold-bright);
--pg-glow-outer: rgba(230, 201, 133, 0.32);
--pg-spin: 3s;
position: relative;
overflow: hidden;
isolation: isolate;
background: transparent;
border: none;
border-radius: 999px;
padding: 14px 30px;
color: #0a0a0a;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
box-shadow: 0 15px 35px 0 var(--pg-glow-outer);
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.22s ease,
opacity 0.18s ease;
}
.btn-primary::before {
content: "";
position: absolute;
inset: -100%;
background: conic-gradient(from 0deg,
transparent 0%,
var(--pg-glow) 20%,
transparent 50%);
animation: premiumGlowSpin var(--pg-spin) linear infinite;
z-index: -2;
}
.btn-primary::after {
content: "";
position: absolute;
inset: var(--pg-border);
background: var(--pg-inner);
border-radius: inherit;
z-index: -1;
}
.btn-primary:hover {
background: transparent;
transform: scale(1.03);
box-shadow: 0 18px 42px 0 rgba(230, 201, 133, 0.42);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.btn-primary:disabled::before { animation: none; opacity: 0.3; }
@media (prefers-reduced-motion: reduce) {
.btn-primary::before { animation: none; }
}
.btn-ghost {
background: transparent;
border-color: var(--border-gold);
color: var(--gold-bright);
}
.btn-ghost:hover {
background: var(--gold-ghost);
}
/* Sim log */
.sim-log {
margin-top: 24px;
padding: 18px 20px;
background: rgba(5, 8, 7, 0.5);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
max-height: 200px;
overflow-y: auto;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.8;
color: var(--text-secondary);
}
.sim-log-line {
display: flex;
gap: 10px;
padding: 2px 0;
}
.sim-log-line .time { color: var(--text-muted); min-width: 50px; }
.sim-log-line .win { color: var(--jade-bright); }
.sim-log-line .loss { color: var(--carmine-bright); }
.sim-log-line .tie { color: var(--gold-bright); }
.sim-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
margin-top: 18px;
}
.sim-stat {
background: rgba(5, 8, 7, 0.4);
border: 1px solid var(--border-subtle);
border-radius: 6px;
padding: 12px;
text-align: center;
}
.sim-stat-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
}
.sim-stat-value {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ivory);
line-height: 1;
}
.sim-stat-value.jade { color: var(--jade-bright); }
.sim-stat-value.carmine { color: var(--carmine-bright); }
.sim-stat-value.gold { color: var(--gold-bright); }
/* ===================== STRATEGY CARDS ===================== */
.strategy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
margin: 28px 0;
}
.strat-card {
background: var(--bg-panel);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 26px;
position: relative;
transition: all 0.3s ease;
overflow: hidden;
}
.strat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.strat-card:hover::before { transform: translateX(0); }
.strat-card:hover {
border-color: var(--border-gold);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.strat-name {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
color: var(--ivory);
margin-bottom: 6px;
}
.strat-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 14px;
font-weight: 600;
}
.strat-tag.beginner { color: var(--jade-bright); }
.strat-tag.intermediate { color: var(--gold-bright); }
.strat-tag.advanced { color: var(--carmine-bright); }
.strat-desc {
font-size: 14px;
line-height: 1.6;
color: var(--ivory-dim);
margin-bottom: 14px;
}
.strat-sequence {
display: flex;
gap: 4px;
margin-top: 14px;
flex-wrap: wrap;
}
.seq-num {
padding: 4px 10px;
background: var(--bg-felt);
border: 1px solid var(--border-subtle);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--gold-bright);
}
.seq-arrow { color: var(--text-muted); padding: 4px 2px; font-size: 10px; }
.strat-meta {
display: flex;
justify-content: space-between;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.strat-meta .val { color: var(--ivory); font-weight: 600; }
/* ===================== PLAYER PORTRAIT CARDS ===================== */
.legends-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 32px 0;
}
.legend-card {
background:
linear-gradient(180deg, var(--bg-felt-deep) 0%, var(--bg-panel) 100%);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 28px;
position: relative;
transition: all 0.3s ease;
}
.legend-card:hover {
border-color: var(--border-gold);
transform: translateY(-4px);
}
.legend-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.legend-portrait {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--bg-abyss);
flex-shrink: 0;
box-shadow: 0 0 0 2px var(--bg-abyss), 0 0 0 3px var(--gold);
font-style: italic;
}
.legend-info .legend-name {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--ivory);
line-height: 1.15;
}
.legend-info .legend-title {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--carmine-bright);
margin-top: 2px;
}
.legend-era {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.12em;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
text-transform: uppercase;
}
.legend-desc {
font-size: 14px;
line-height: 1.65;
color: var(--ivory-dim);
margin-bottom: 14px;
}
.legend-stat {
display: flex;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
font-size: 12px;
}
.legend-stat .lbl {
font-family: var(--font-mono);
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.legend-stat .val {
color: var(--gold-bright);
font-weight: 600;
}
/* ===================== PAYOUT ODDS BAR ===================== */
.odds-wrap {
margin: 28px 0;
background: var(--bg-panel);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 26px;
}
.odds-row {
display: grid;
grid-template-columns: 140px 1fr 80px;
gap: 16px;
align-items: center;
margin-bottom: 14px;
}
.odds-row:last-child { margin-bottom: 0; }
.odds-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--ivory);
}
.odds-name .pct {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-left: 6px;
font-weight: 400;
}
.odds-bar {
height: 22px;
background: rgba(5, 8, 7, 0.6);
border-radius: 11px;
overflow: hidden;
position: relative;
border: 1px solid var(--border-subtle);
}
.odds-fill {
height: 100%;
border-radius: 11px;
transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
}
.odds-fill.banker { background: linear-gradient(90deg, var(--carmine-deep), var(--carmine-bright)); }
.odds-fill.player { background: linear-gradient(90deg, var(--jade-dim), var(--jade-bright)); }
.odds-fill.tie { background: linear-gradient(90deg, #6b4a1a, var(--gold-bright)); }
.odds-edge {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--gold-bright);
text-align: right;
}
.odds-edge.bad { color: var(--carmine-bright); }
/* ===================== CALLOUT ===================== */
/* ---- Etiquette list — punchy do/don't list ---- */
.etiquette-list {
list-style: none;
padding: 0;
margin: 32px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.etiquette-list li {
display: grid;
grid-template-columns: 96px 1fr;
align-items: center;
gap: 18px;
padding: 16px 20px;
background: linear-gradient(180deg, rgba(18, 18, 18, 0.85), rgba(10, 10, 10, 0.85));
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--gold-dim);
border-radius: var(--radius-md);
transition: border-color 0.18s ease, transform 0.18s ease;
}
.etiquette-list li:hover {
border-left-color: var(--gold);
transform: translateX(2px);
}
.etiquette-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--carmine-bright);
font-weight: 700;
}
.etiquette-tag-gold { color: var(--gold-bright); }
.etiquette-list li:has(.etiquette-tag-gold) {
border-left-color: var(--gold-bright);
background: linear-gradient(180deg, rgba(28, 22, 12, 0.85), rgba(14, 11, 6, 0.9));
}
.etiquette-line {
font-size: 14.5px;
line-height: 1.5;
color: var(--ivory-dim);
}
.etiquette-line strong { color: var(--gold-bright); font-weight: 600; }
@media (max-width: 600px) {
.etiquette-list li { grid-template-columns: 1fr; gap: 4px; }
}
.callout {
margin: 28px 0;
padding: 22px 26px 22px 30px;
background: linear-gradient(90deg, rgba(193, 39, 45, 0.08), transparent);
border-left: 3px solid var(--carmine);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.callout.gold {
background: linear-gradient(90deg, rgba(201, 169, 97, 0.08), transparent);
border-left-color: var(--gold);
}
.callout.jade {
background: linear-gradient(90deg, rgba(74, 157, 127, 0.08), transparent);
border-left-color: var(--jade-bright);
}
.callout-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--ivory);
margin-bottom: 6px;
font-style: italic;
}
.callout-body {
font-size: 14px;
line-height: 1.65;
color: var(--ivory-dim);
}
/* ===================== ROADS / SCOREBOARD ===================== */
/* ---- Roads stage: pill filter + single-pane viewer ---- */
.roads-stage {
margin: 32px 0 16px;
}
.roads-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 24px;
}
.road-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: rgba(20, 20, 20, 0.55);
color: var(--ivory-dim);
font-family: inherit;
cursor: pointer;
transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.road-pill:hover {
color: var(--ivory);
border-color: var(--gold-dim);
background: rgba(201, 169, 97, 0.06);
}
.road-pill.active {
color: var(--bg-abyss);
background: linear-gradient(180deg, var(--gold-bright), var(--gold));
border-color: var(--gold-bright);
box-shadow: 0 6px 18px rgba(201, 169, 97, 0.3);
}
.road-pill-cn {
font-family: var(--font-display);
font-size: 16px;
font-style: italic;
color: var(--gold);
}
.road-pill.active .road-pill-cn { color: var(--bg-abyss); }
.road-pill-label {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.04em;
}
.roads-layout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 36px;
align-items: stretch;
}
.roads-visual {
position: relative;
background:
radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201, 169, 97, 0.05), transparent 70%),
linear-gradient(180deg, rgba(20, 20, 20, 0.85), rgba(8, 8, 8, 0.9));
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 26px;
display: flex;
align-items: center;
justify-content: center;
min-height: 260px;
}
.roads-pane {
display: none;
width: 100%;
}
.roads-pane.is-active {
display: block;
animation: roadsPaneIn 0.4s ease-out;
}
@keyframes roadsPaneIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.roads-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.roads-info-pane {
display: none;
flex-direction: column;
gap: 14px;
}
.roads-info-pane.is-active {
display: flex;
animation: roadsPaneIn 0.4s ease-out;
}
.roads-info-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
}
.roads-info-name {
font-family: var(--font-display);
font-size: 36px;
font-weight: 600;
color: var(--ivory);
margin: 0;
line-height: 1.15;
letter-spacing: -0.01em;
}
.roads-info-body {
font-size: 15px;
line-height: 1.65;
color: var(--text-secondary);
margin: 0;
max-width: 46ch;
}
.roads-info-body em { color: var(--gold-bright); font-style: italic; }
.roads-info-body strong { color: var(--ivory); font-weight: 600; }
.roads-info-meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.roads-info-meta strong {
display: block;
color: var(--gold);
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 4px;
font-weight: 700;
}
.roads-callout {
margin-top: 8px;
padding: 14px 16px;
background: rgba(201, 169, 97, 0.05);
border-left: 3px solid var(--gold);
border-radius: var(--radius-md);
font-size: 13px;
line-height: 1.55;
color: var(--ivory-dim);
}
.roads-callout strong { color: var(--gold-bright); font-weight: 600; }
@media (max-width: 900px) {
.roads-layout { grid-template-columns: 1fr; gap: 22px; }
.roads-info-name { font-size: 28px; }
.roads-visual { min-height: 200px; padding: 18px; }
}
.road-grid-inner {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3px;
padding: 0;
background: transparent;
border-radius: 4px;
aspect-ratio: 3 / 1;
width: 100%;
}
.road-cell {
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 8px;
color: var(--ivory);
font-family: var(--font-mono);
font-weight: 700;
}
.road-cell.p { background: var(--jade); }
.road-cell.b { background: var(--carmine); }
.road-cell.t { background: var(--gold); color: var(--bg-abyss); }
.road-cell.empty { background: transparent; border: 1px solid rgba(201, 169, 97, 0.1); border-radius: 3px; }
.road-desc {
font-size: 12px;
color: var(--ivory-dim);
line-height: 1.55;
}
/* ==================== SIMULATOR BIG ROAD ====================
Live scoreboard under the sim stats that fills from this session's
outcomes. Columns stack streaks top-to-bottom; a switch starts a new
column. Ties accumulate on the most recent non-tie cell as a small
gold dot in the corner. */
.sim-roads {
margin-top: 18px;
padding: 14px 16px 16px;
background: linear-gradient(180deg, rgba(20, 20, 20, 0.7), rgba(8, 8, 8, 0.85));
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
}
.sim-roads-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.sim-roads-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
}
.sim-roads-title span { color: var(--text-muted); }
.sim-roads-legend {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.sim-roads-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sim-roads-dot {
width: 9px; height: 9px; border-radius: 50%;
display: inline-block;
}
.sim-roads-dot.p { background: var(--jade); }
.sim-roads-dot.b { background: var(--carmine); }
.sim-roads-dot.t { background: var(--gold); }
.sim-big-road {
display: grid;
grid-template-columns: repeat(24, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 3px;
padding: 8px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(201, 169, 97, 0.1);
border-radius: 6px;
aspect-ratio: 4 / 1;
width: 100%;
}
.sim-big-road .road-cell {
position: relative;
font-size: 7px;
}
.sim-big-road .road-cell .tie-mark {
position: absolute;
top: -1px;
right: -1px;
width: 5px;
height: 5px;
background: var(--gold-bright);
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 50%;
pointer-events: none;
}
.sim-big-road-empty {
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.04em;
padding: 8px;
text-align: center;
}
@media (max-width: 700px) {
.sim-big-road { grid-template-columns: repeat(18, 1fr); aspect-ratio: 3 / 1; }
.sim-roads-legend { gap: 10px; font-size: 9px; }
}
/* ===================== MISC ===================== */
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
margin: 60px 0;
}
.footer-section {
position: relative;
padding: 60px 48px 80px;
max-width: var(--content-max);
margin: 0 auto;
text-align: center;
border-top: 1px solid var(--border-subtle);
}
.footer-mark {
font-family: var(--font-display);
font-style: italic;
font-size: 22px;
color: var(--gold-bright);
margin-bottom: 8px;
}
.footer-text {
font-size: 12px;
color: var(--text-muted);
max-width: 500px;
margin: 0 auto;
line-height: 1.8;
}
.footer-credit {
position: absolute;
right: 48px;
bottom: 24px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
opacity: 0.7;
}
/* RSVP / Floating toast like mahjong reference */
.rsvp-toast {
position: fixed;
bottom: 28px;
right: 28px;
background: linear-gradient(180deg, var(--bg-felt), var(--bg-felt-deep));
border: 1px solid var(--border-gold);
border-radius: var(--radius-md);
padding: 12px 38px 12px 14px;
display: flex;
align-items: center;
gap: 12px;
z-index: 100;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
transform: translateY(0);
transition: transform 0.3s ease, opacity 0.25s ease;
cursor: pointer;
max-width: 300px;
}
.rsvp-toast.dismissed {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
visibility: hidden;
}
.rsvp-toast-close {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
border-radius: 50%;
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
font-family: inherit;
transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.rsvp-toast-close:hover {
color: var(--ivory);
background: rgba(201, 169, 97, 0.1);
border-color: var(--gold-dim);
}
.rsvp-toast:hover {
transform: translateY(-3px);
border-color: var(--gold);
}
.rsvp-toast-icon {
width: 36px;
height: 36px;
border-radius: 6px;
background: var(--gold);
color: var(--bg-abyss);
display: grid;
place-items: center;
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
}
.rsvp-toast-content {
font-size: 11px;
color: var(--ivory-dim);
line-height: 1.4;
}
.rsvp-toast-content strong {
font-family: var(--font-display);
font-size: 13px;
color: var(--ivory);
display: block;
}
/* ===================== WELCOME SECTION ===================== */
.welcome-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 56px;
position: relative;
}
/* Connector line between the three numbered badges. Desktop only — on
mobile the badges stack and don't need a horizontal thread. */
@media (min-width: 1100px) {
.welcome-grid::before {
content: '';
position: absolute;
top: 0;
left: 8%;
right: 8%;
border-top: 1px dashed rgba(201, 169, 97, 0.32);
z-index: 0;
pointer-events: none;
}
}
.welcome-panel {
position: relative;
z-index: 1;
background: linear-gradient(180deg, rgba(18, 18, 18, 0.85) 0%, rgba(10, 10, 10, 0.85) 100%);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 42px 22px 20px;
overflow: visible; /* badge straddles the top edge */
display: flex;
flex-direction: column;
}
.welcome-panel::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.05), transparent 55%);
pointer-events: none;
}
/* Numbered badge — circular, sits on the connector line. The 5 px solid
"halo" is the abyss colour: it cleanly punches the dashed line so the
badge looks like a node on a thread. */
.welcome-step {
position: absolute;
top: -22px;
left: 22px;
width: 44px;
height: 44px;
background: var(--bg-abyss);
border: 1.5px solid var(--gold);
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
font-style: italic;
color: var(--gold-bright);
z-index: 2;
box-shadow:
0 0 0 5px var(--bg-abyss),
0 6px 16px rgba(0, 0, 0, 0.6),
0 0 22px rgba(201, 169, 97, 0.22);
line-height: 1;
}
.welcome-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ivory);
margin: 0 0 8px;
letter-spacing: -0.005em;
line-height: 1.2;
}
.welcome-body {
font-size: 13.5px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0 0 12px;
max-width: 100%;
}
.welcome-body strong {
color: var(--ivory);
font-weight: 600;
}
/* ---- Panel 1: bets ---- */
.welcome-bets {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: auto;
}
.welcome-bet {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 10px;
padding: 9px 13px;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
background: rgba(0, 0, 0, 0.45);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.welcome-bet:hover {
transform: translateX(2px);
border-color: var(--gold-dim);
background: rgba(0, 0, 0, 0.6);
}
/* Slot-machine spinner states (driven by JS in interactions.js) */
.welcome-bets.is-spinning .welcome-bet {
opacity: 0.4;
transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.welcome-bets.is-spinning .welcome-bet.is-spin-on {
opacity: 1;
background: rgba(255, 255, 255, 0.07);
border-color: var(--ivory-dim);
transform: translateX(0) scale(1.04);
}
.welcome-bet.is-winner-player,
.welcome-bet.is-winner-banker,
.welcome-bet.is-winner-tie {
opacity: 1 !important;
transform: translateX(0) scale(1.05);
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.welcome-bet.is-winner-player {
border-color: var(--jade-bright);
background: rgba(109, 208, 168, 0.14);
box-shadow:
0 0 0 1px var(--jade-bright) inset,
0 0 32px rgba(109, 208, 168, 0.45),
0 8px 26px rgba(0, 0, 0, 0.45);
}
.welcome-bet.is-winner-banker {
border-color: var(--carmine-bright);
background: rgba(224, 67, 73, 0.14);
box-shadow:
0 0 0 1px var(--carmine-bright) inset,
0 0 32px rgba(224, 67, 73, 0.45),
0 8px 26px rgba(0, 0, 0, 0.45);
}
.welcome-bet.is-winner-tie {
border-color: var(--gold-bright);
background: rgba(230, 201, 133, 0.16);
box-shadow:
0 0 0 1px var(--gold-bright) inset,
0 0 32px rgba(230, 201, 133, 0.5),
0 8px 26px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
.welcome-card-svg { animation: none; }
.welcome-steps li { animation: none; opacity: 1; transform: none; }
.welcome-bets.is-spinning .welcome-bet { opacity: 1; }
}
.welcome-bet-label {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
display: none; /* the body already says "bet on" */
}
.welcome-bet-name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
line-height: 1;
}
.welcome-bet-pay {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--gold);
letter-spacing: 0.04em;
white-space: nowrap;
}
.welcome-bet-player .welcome-bet-name { color: #6dd0a8; }
.welcome-bet-banker .welcome-bet-name { color: var(--carmine-bright); }
.welcome-bet-tie .welcome-bet-name { color: var(--gold-bright); }
/* ---- Panel 2: cards & values ---- */
.welcome-cardrow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
align-items: end;
margin: 0 0 8px;
}
.welcome-cardgroup {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.welcome-card-svg {
width: 100%;
max-width: 64px;
height: auto;
border-radius: 5px;
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(0, 0, 0, 0.1);
background: #fff;
transform-origin: center bottom;
animation: welcomeCardWiggle 5s ease-in-out infinite;
will-change: transform;
}
.welcome-cardgroup:nth-child(2) .welcome-card-svg { animation-delay: 0.4s; }
.welcome-cardgroup:nth-child(3) .welcome-card-svg { animation-delay: 0.8s; }
@keyframes welcomeCardWiggle {
0%, 60%, 100% { transform: rotate(0); }
68% { transform: rotate(-5deg); }
76% { transform: rotate( 4deg); }
84% { transform: rotate(-3deg); }
92% { transform: rotate( 2deg); }
}
.welcome-card-val {
font-family: var(--font-display);
font-size: 14px;
color: var(--text-secondary);
line-height: 1;
}
.welcome-card-val strong {
color: var(--gold-bright);
font-weight: 700;
font-size: 19px;
margin-left: 2px;
}
.welcome-fineprint {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.02em;
line-height: 1.45;
margin: 0 0 8px;
}
.welcome-example {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 9px 13px;
border-radius: var(--radius-md);
background: linear-gradient(90deg, rgba(201, 169, 97, 0.12), rgba(201, 169, 97, 0.04));
border: 1px solid var(--border-subtle);
font-family: var(--font-display);
font-size: 14px;
color: var(--ivory);
margin-top: auto;
}
.welcome-arrow { color: var(--gold); font-size: 16px; }
.welcome-example-result { color: var(--text-secondary); font-size: 12.5px; }
.welcome-example-result strong { color: var(--gold-bright); font-size: 16px; margin-left: 2px; }
/* ---- Panel 3: steps ---- */
.welcome-steps {
list-style: none;
counter-reset: welcome-step-counter;
padding: 0;
margin: 0 0 8px;
}
/* Sequential reveal — only step 1 is visible initially. Step 2 fades in
at ~3s, step 3 at ~6s, step 4 at ~9s. All four hold briefly, fade out
together, then the loop restarts. Layout space for all four is
reserved at all times so the panel never jumps. 14 s loop total. */
.welcome-steps li {
counter-increment: welcome-step-counter;
position: relative;
padding: 9px 0 9px 34px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-secondary);
border-bottom: 1px solid rgba(201, 169, 97, 0.07);
opacity: 0;
transform: translateY(6px);
animation-duration: 14s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.welcome-steps li:last-child { border-bottom: none; }
.welcome-steps li::before {
content: counter(welcome-step-counter);
position: absolute;
left: 0;
top: 9px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--gold);
background: rgba(201, 169, 97, 0.08);
border: 1px solid var(--border-subtle);
border-radius: 50%;
width: 24px;
height: 24px;
display: grid;
place-items: center;
font-weight: 600;
}
.welcome-steps li:nth-child(1) { animation-name: welcomeStepReveal1; }
.welcome-steps li:nth-child(2) { animation-name: welcomeStepReveal2; }
.welcome-steps li:nth-child(3) { animation-name: welcomeStepReveal3; }
.welcome-steps li:nth-child(4) { animation-name: welcomeStepReveal4; }
/* Percentage → time (14 s loop):
0 % = 0 s · 7 % ≈ 1 s · 21 % ≈ 3 s · 28 % ≈ 4 s · 43 % = 6 s
50 % = 7 s · 64 % ≈ 9 s · 71 % ≈ 10 s · 86 % ≈ 12 s · 93 % = 13 s */
@keyframes welcomeStepReveal1 {
0% { opacity: 0; transform: translateY(6px); }
7% { opacity: 1; transform: translateY(0); }
86% { opacity: 1; transform: translateY(0); }
93%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes welcomeStepReveal2 {
0%, 21% { opacity: 0; transform: translateY(6px); }
28% { opacity: 1; transform: translateY(0); }
86% { opacity: 1; transform: translateY(0); }
93%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes welcomeStepReveal3 {
0%, 43% { opacity: 0; transform: translateY(6px); }
50% { opacity: 1; transform: translateY(0); }
86% { opacity: 1; transform: translateY(0); }
93%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes welcomeStepReveal4 {
0%, 64% { opacity: 0; transform: translateY(6px); }
71% { opacity: 1; transform: translateY(0); }
86% { opacity: 1; transform: translateY(0); }
93%, 100% { opacity: 0; transform: translateY(6px); }
}
.welcome-steps li strong { color: var(--ivory); font-weight: 600; }
.welcome-callout {
padding: 12px 14px;
border-radius: var(--radius-md);
background: rgba(201, 169, 97, 0.05);
border-left: 3px solid var(--gold);
font-size: 13px;
line-height: 1.55;
color: var(--ivory-dim);
margin-bottom: 14px;
}
.welcome-callout strong { color: var(--gold-bright); font-weight: 600; }
.welcome-cta {
--pg-border: 1.5px;
--pg-radius: 999px;
--pg-inner: var(--ivory);
--pg-glow: var(--gold-bright);
--pg-glow-outer: rgba(230, 201, 133, 0.32);
--pg-spin: 3s;
position: relative;
overflow: hidden;
isolation: isolate;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 12px 22px !important;
background: transparent !important;
color: #0a0a0a !important;
border-radius: var(--pg-radius);
font-family: var(--font-body);
font-weight: 600;
font-size: 12.5px !important;
text-decoration: none;
border: none;
border-left: none !important;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 15px 35px 0 var(--pg-glow-outer);
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.22s ease;
margin-top: auto;
align-self: flex-start;
}
.welcome-cta::before {
content: "";
position: absolute;
inset: -100%;
background: conic-gradient(from 0deg,
transparent 0%,
var(--pg-glow) 20%,
transparent 50%);
animation: premiumGlowSpin var(--pg-spin) linear infinite;
z-index: -2;
}
.welcome-cta::after {
content: "";
position: absolute;
inset: var(--pg-border);
background: var(--pg-inner);
border-radius: inherit;
z-index: -1;
}
.welcome-cta:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
.welcome-cta::before { animation: none; }
}
.welcome-cta:hover {
transform: scale(1.03);
box-shadow: 0 18px 42px 0 rgba(230, 201, 133, 0.42);
}
@media (min-width: 1100px) {
.welcome-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
}
/* Mobile */
@media (max-width: 900px) {
.topbar { top: 12px; width: calc(100% - 24px); }
.topbar-inner {
display: flex;
grid-template-columns: none;
padding: 6px 6px 6px 16px;
}
.brand { justify-self: auto; }
.topnav-actions { justify-self: auto; margin-left: auto; }
.topbar-burger { display: flex; margin-left: 0; }
.brand-text { display: none; }
.topnav {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 12px;
background: linear-gradient(180deg, rgba(14, 18, 14, 0.96) 0%, rgba(6, 10, 8, 0.97) 100%);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(201, 169, 97, 0.18);
border-radius: 22px;
box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6);
margin-left: 0;
transform: translateY(-8px);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.topnav.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.topnav-trigger {
width: 100%;
justify-content: space-between;
padding: 12px 14px;
}
.topnav-dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: transparent;
border: none;
padding: 4px 0 12px 14px;
display: none;
}
.topnav-item.open .topnav-dropdown { display: block; }
.topnav-cta { margin: 8px 0 0; text-align: center; justify-content: center; }
.welcome-bets { grid-template-columns: 1fr; }
.welcome-cardrow { gap: 18px; justify-content: center; }
.welcome-card-svg { width: 78px; }
.welcome-step { font-size: 44px; top: 18px; right: 20px; }
.welcome-panel { padding: 28px 22px; }
.section { padding: 60px 24px; }
h1.section-title { font-size: 42px; }
.section-lede { font-size: 17px; }
.stage-overlay {
grid-template-columns: 1fr;
padding: 0 24px;
align-items: end;
padding-bottom: 40px;
}
.stage-panel {
grid-column: 1;
max-width: 100%;
}
.rsvp-toast { display: none; }
.hand-layout { grid-template-columns: 1fr; gap: 14px; }
.hand-vs { display: none; }
.hand-cards { min-height: 150px; gap: 10px; }
.hand-total { font-size: 42px; margin-top: 16px; }
.tab-panel-title { font-size: 24px; }
.tab-panel-desc { font-size: 14px; }
}
/* ===================== GLOSSARY TERM HOVER-POPOVER =====================
Reusable inline explanation component. Wrap any jargon word with:
burn
The Burn
Full definition text here.
The outer stays inline and keyboard-focusable. The label gets
a subtle gold italic treatment + dashed underline. On hover OR focus,
.term-pop fades in above the word. No JS required.
========================================================================= */
.term {
position: relative;
display: inline;
cursor: help;
outline: none;
}
.term-label {
font-style: italic;
color: var(--gold-bright);
background: linear-gradient(180deg,
transparent 0%,
transparent 60%,
rgba(201, 169, 97, 0.14) 60%,
rgba(201, 169, 97, 0.14) 100%);
border-bottom: 1px dashed rgba(201, 169, 97, 0.55);
padding-bottom: 1px;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.term:hover .term-label,
.term:focus .term-label,
.term:focus-within .term-label {
color: var(--ivory);
border-bottom-color: var(--gold-bright);
background: linear-gradient(180deg,
transparent 0%,
transparent 60%,
rgba(230, 201, 133, 0.28) 60%,
rgba(230, 201, 133, 0.28) 100%);
}
.term-pop {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(6px);
width: 300px;
max-width: min(90vw, 360px);
padding: 14px 16px 15px;
background:
linear-gradient(180deg, rgba(22, 22, 22, 0.98) 0%, rgba(8, 8, 8, 0.98) 100%);
border: 1px solid rgba(201, 169, 97, 0.22);
border-radius: var(--radius-md);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(201, 169, 97, 0.05) inset,
0 1px 0 rgba(255, 255, 255, 0.04) inset;
font-family: var(--font-body);
font-style: normal;
font-size: 12.5px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0;
color: var(--text-secondary);
text-align: left;
text-indent: 0;
white-space: normal;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 60;
}
/* Tiny caret pointing down at the underlined word. */
.term-pop::before,
.term-pop::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
}
.term-pop::before {
top: 100%;
border-top: 7px solid rgba(201, 169, 97, 0.22);
}
.term-pop::after {
top: calc(100% - 1px);
border-top: 7px solid rgba(14, 14, 14, 0.98);
}
.term:hover .term-pop,
.term:focus .term-pop,
.term:focus-within .term-pop {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.term-pop-title {
display: block;
font-family: var(--font-display);
font-style: normal;
font-size: 15px;
font-weight: 600;
color: var(--gold-bright);
letter-spacing: 0.01em;
line-height: 1.2;
margin-bottom: 6px;
}
/* Edge safety — if a term sits too close to the viewport edge the
popover may clip. Authors can add .term--left / .term--right to
anchor the popover from that edge instead of centering. */
.term--left .term-pop { left: 0; transform: translateX(0) translateY(6px); }
.term--left:hover .term-pop,
.term--left:focus-within .term-pop { transform: translateX(0) translateY(0); }
.term--left .term-pop::before,
.term--left .term-pop::after { left: 18px; transform: none; }
.term--right .term-pop { left: auto; right: 0; transform: translateX(0) translateY(6px); }
.term--right:hover .term-pop,
.term--right:focus-within .term-pop { transform: translateX(0) translateY(0); }
.term--right .term-pop::before,
.term--right .term-pop::after { left: auto; right: 18px; transform: none; }
@media (prefers-reduced-motion: reduce) {
.term-pop { transition: opacity 0.12s ease, visibility 0.12s ease; transform: translateX(-50%); }
.term:hover .term-pop,
.term:focus-within .term-pop { transform: translateX(-50%); }
}
/* ===================== BETTING SYSTEMS — 3-CARD FLIP =====================
Three difficulty cards (green / gold / red) sit side-by-side. Click any
one to "anchor" it in front; the other two flip in 3D to reveal the two
systems for that tier. Click the anchored card again to reset.
============================================================================ */
.strategy-flip-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
margin: 28px 0;
perspective: 1800px;
}
.strat-flip {
position: relative;
min-height: 380px;
/* drop-shadow uses the rendered alpha so it follows the rotated card —
unlike box-shadow, which stays planar to the screen. This gives the
thin-card slab a real ground shadow that swings during the flip. */
filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
transition:
transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
filter 0.4s ease;
}
/* Idle hover lift — only when no tier is anchored, so the cards feel
physical before a flip. */
.strategy-flip-grid:not([data-active]) .strat-flip:hover {
transform: translateY(-6px);
filter: drop-shadow(0 26px 36px rgba(0, 0, 0, 0.62));
}
.strat-flip-inner {
position: relative;
width: 100%;
height: 100%;
min-height: inherit;
transform-style: preserve-3d;
transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.strat-face {
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
padding: 28px 26px 24px;
display: flex;
flex-direction: column;
border: 1px solid var(--border-subtle);
text-align: left;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.strat-face--front {
cursor: pointer;
font: inherit;
color: var(--ivory);
transition: filter 0.25s ease, box-shadow 0.25s ease;
/* +2 px in front's local frame puts the front face 2 px toward the
viewer from the centerplane. */
transform: rotateY(0deg) translateZ(2px);
}
.strat-face--front:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: 4px;
}
.strat-face--back {
background: linear-gradient(180deg, rgba(20, 20, 20, 0.96) 0%, rgba(8, 8, 8, 0.97) 100%);
border-color: var(--border-gold);
/* In the back's local frame (rotated 180°), +Z points away from the
viewer; translateZ(2px) here lands the back 2 px on the OPPOSITE
side of the centerplane from the front. Total card thickness: 4 px. */
transform: rotateY(180deg) translateZ(2px);
display: none;
}
/* Show the right back face per active tier on the cards that aren't anchored. */
.strategy-flip-grid[data-active="beginner"] .strat-flip:not([data-tier="beginner"]) .strat-face--back[data-show-when="beginner"],
.strategy-flip-grid[data-active="intermediate"] .strat-flip:not([data-tier="intermediate"]) .strat-face--back[data-show-when="intermediate"],
.strategy-flip-grid[data-active="advanced"] .strat-flip:not([data-tier="advanced"]) .strat-face--back[data-show-when="advanced"] {
display: flex;
}
/* Flip the non-anchored cards. */
.strategy-flip-grid[data-active="beginner"] .strat-flip:not([data-tier="beginner"]) .strat-flip-inner,
.strategy-flip-grid[data-active="intermediate"] .strat-flip:not([data-tier="intermediate"]) .strat-flip-inner,
.strategy-flip-grid[data-active="advanced"] .strat-flip:not([data-tier="advanced"]) .strat-flip-inner {
transform: rotateY(180deg);
}
/* Anchored card — gold rim glow so it reads as "selected". */
.strat-flip.is-active .strat-face--front {
box-shadow:
0 18px 44px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(230, 201, 133, 0.55) inset,
0 0 36px rgba(230, 201, 133, 0.22);
}
.strat-flip.is-active .strat-front-cta::after {
content: " · anchored";
color: var(--gold-bright);
letter-spacing: 0.06em;
}
/* When a tier is active, dim the anchored card slightly less and the
flipping cards keep their full saturation. The grid as a whole stays
readable; the chosen tier just feels "held". */
.strategy-flip-grid[data-active] .strat-flip:not(.is-active) {
filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.62)) saturate(1.08);
}
/* ----- Front color schemes ----- */
/* Sheen var — a single diagonal glossy band reused across the three
color schemes, so any tint adjustment stays consistent. */
.strat-face--front {
--pg-sheen: linear-gradient(135deg,
rgba(255, 255, 255, 0.14) 0%,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, 0) 62%,
rgba(0, 0, 0, 0.18) 100%);
}
.strat-front--beginner {
background:
var(--pg-sheen),
radial-gradient(ellipse at top right, rgba(109, 208, 168, 0.20), transparent 55%),
linear-gradient(165deg, rgba(46, 102, 82, 0.92) 0%, rgba(15, 38, 30, 0.96) 100%);
border-color: rgba(74, 157, 127, 0.38);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.45),
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 -1px 0 rgba(0, 0, 0, 0.35) inset,
0 0 0 1px rgba(109, 208, 168, 0.10) inset;
}
.strat-front--intermediate {
background:
var(--pg-sheen),
radial-gradient(ellipse at top right, rgba(230, 201, 133, 0.22), transparent 55%),
linear-gradient(165deg, rgba(138, 118, 64, 0.92) 0%, rgba(46, 36, 16, 0.96) 100%);
border-color: rgba(201, 169, 97, 0.42);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.45),
0 1px 0 rgba(255, 255, 255, 0.10) inset,
0 -1px 0 rgba(0, 0, 0, 0.35) inset,
0 0 0 1px rgba(230, 201, 133, 0.12) inset;
}
.strat-front--advanced {
background:
var(--pg-sheen),
radial-gradient(ellipse at top right, rgba(224, 67, 73, 0.22), transparent 55%),
linear-gradient(165deg, rgba(138, 28, 33, 0.92) 0%, rgba(46, 8, 10, 0.96) 100%);
border-color: rgba(193, 39, 45, 0.42);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.45),
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 -1px 0 rgba(0, 0, 0, 0.35) inset,
0 0 0 1px rgba(224, 67, 73, 0.12) inset;
}
/* The same sheen on the dark back face for visual continuity. */
.strat-face--back {
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, 0) 62%,
rgba(0, 0, 0, 0.22) 100%),
linear-gradient(180deg, rgba(20, 20, 20, 0.96) 0%, rgba(8, 8, 8, 0.97) 100%);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.5),
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 -1px 0 rgba(0, 0, 0, 0.4) inset;
}
.strat-face--front:hover {
filter: brightness(1.08);
}
.strat-front-eyebrow {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(243, 234, 211, 0.72);
}
.strat-front-title {
font-family: var(--font-display);
font-size: 44px;
font-weight: 600;
line-height: 1;
margin: 14px 0 12px;
letter-spacing: -0.012em;
}
.strat-front--beginner .strat-front-title { color: #d8f5e3; }
.strat-front--intermediate .strat-front-title { color: var(--gold-bright); }
.strat-front--advanced .strat-front-title { color: #f6c8ca; }
.strat-front-blurb {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.6;
color: rgba(243, 234, 211, 0.85);
margin: 0;
flex: 1;
}
.strat-front-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
margin-top: 18px;
border-top: 1px solid rgba(243, 234, 211, 0.16);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(243, 234, 211, 0.7);
}
.strat-front-cta {
font-weight: 600;
letter-spacing: 0.18em;
color: var(--ivory);
transition: transform 0.2s ease;
}
.strat-face--front:hover .strat-front-cta { transform: translateX(3px); }
/* ----- Back styling (system info) ----- */
.strat-back-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 12px;
}
.strat-back-tag.beginner { color: var(--jade-bright); }
.strat-back-tag.intermediate { color: var(--gold-bright); }
.strat-back-tag.advanced { color: var(--carmine-bright); }
.strat-back-name {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
color: var(--ivory);
margin-bottom: 10px;
line-height: 1.05;
}
.strat-back-desc {
font-size: 13.5px;
line-height: 1.6;
color: var(--ivory-dim);
margin: 0 0 16px;
flex: 1;
}
.strat-back-desc em { color: var(--gold-bright); font-style: italic; }
.strat-back-desc strong { color: var(--ivory); font-weight: 600; }
/* The .strat-sequence / .seq-num / .seq-arrow / .strat-meta rules from the
original betting card already style the back's progression chips. */
@media (max-width: 900px) {
.strategy-flip-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.strat-flip { min-height: 320px; }
.strat-front-title { font-size: 36px; }
.strategy-flip-grid[data-active] .strat-flip:not(.is-active) {
filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
.strat-flip-inner { transition: none; }
.strat-flip { transition: none; }
.strategy-flip-grid:not([data-active]) .strat-flip:hover { transform: none; }
}
/* ============================================================
MOBILE COMPATIBILITY (≤700 px) — final-pass overrides
============================================================
Most components already have ≤900/720/600 breakpoints; this block is the
smallest/last-resort fallback for handheld portrait. Goals:
1) No horizontal scroll
2) Touch targets ≥44 px
3) Simulator usable (table image readable, bets + chips below it)
4) Stats/tour/demo card don't overflow
============================================================ */
/* `clip` keeps horizontal overflow hidden without making html/body into
scroll containers — required for `position: sticky` (e.g., .stage-sticky)
to pin against the viewport correctly. */
html, body { overflow-x: clip; }
@media (max-width: 700px) {
/* ---- Layout safety net ---- */
.app, main, section { max-width: 100%; }
.section { padding: 48px 18px; }
.section-header { margin-bottom: 24px; }
h1.section-title { font-size: clamp(28px, 7vw, 36px); line-height: 1.12; }
.section-lede { font-size: 15px; line-height: 1.55; }
/* ---- Hero — tighter padding so title + sub fit comfortably ---- */
.hero { padding: 16vh 0 0; }
.hero-title { font-size: clamp(56px, 17vw, 88px); }
.hero-sub { font-size: 14px; letter-spacing: 0.14em; }
.hero-rule { display: none; }
.hero-lede { font-size: 14px; line-height: 1.5; padding: 0 24px; }
.hero-kicker { font-size: 10px; }
/* ---- Topbar already has burger at ≤900; tighten further at ≤700 ---- */
.topbar { top: 10px; width: calc(100% - 20px); }
.brand-mark { width: 28px; height: 28px; font-size: 15px; }
.topnav-cta { padding: 8px 14px !important; font-size: 12px !important; }
/* ---- Welcome panels — already single column. Just tighter padding. ---- */
.welcome-grid { margin-top: 40px; }
.welcome-panel { padding: 38px 18px 18px; }
.welcome-step { left: 18px; }
/* ============================================================
SIMULATOR — biggest mobile work. Bets + controls move BELOW
the realistic table image so they're readable and tappable.
============================================================ */
.sim { padding: 18px 14px; }
/* Variant picker: horizontally scrollable so 3 tabs never wrap or
overflow at narrow widths. */
.sim-variant-picker {
gap: 6px;
padding-bottom: 12px;
margin-bottom: 14px;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sim-variant-picker::-webkit-scrollbar { display: none; }
.sim-variant { padding: 8px 14px; font-size: 12px; flex-shrink: 0; min-width: 96px; }
.sim-variant-cn { font-size: 13px; }
.sim-variant-label { font-size: 11px; }
.sim-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.sim-title { font-size: 18px; }
.sim-sub { font-size: 11px; }
.sim-bankroll { align-self: stretch; text-align: left; }
.sim-rules { padding: 12px 14px; }
.sim-rules-body { font-size: 12.5px; line-height: 1.55; }
/* Playfield on mobile: auto-size so the table keeps its natural
aspect and the bets/controls flow as normal blocks below it. */
.sim-playfield {
aspect-ratio: auto;
margin-bottom: 14px;
}
/* `relative` (not `static`) so the table remains the containing block
for its own absolute overlays — cards, labels, totals — keeping
their percentage offsets (top: 13% / 33% / 52%) anchored to the
table image itself. With `static`, those percentages would compute
against the playfield's total height (including bets + controls)
and the cards would float below the felt. */
.sim-table--realistic {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 1606 / 979;
}
.sim-table--realistic .sim-table-mark { font-size: 11px; padding: 2px 8px; }
.sim-table--realistic .sim-hand-label { font-size: 10px; padding: 2px 6px; top: 13%; }
.sim-table--realistic .sim-hand-cards .p-card { --w: clamp(26px, 7vw, 44px) !important; }
.sim-table--realistic .sim-hand-total { font-size: 18px; top: 52%; }
/* Bets row: stop being absolute, flow below the table. */
.sim-playfield .sim-bets {
position: static;
transform: none;
inset: auto;
top: auto; left: auto; right: auto; bottom: auto;
width: auto;
max-width: none;
margin: 14px 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 0;
}
/* Bet box on mobile — solid, high-contrast, proper touch target.
Drop the backdrop blur (expensive on phones) and widen the tap zone. */
.sim-playfield .bet-box {
padding: 14px 8px 12px;
min-height: 64px;
gap: 3px;
background: linear-gradient(180deg, rgba(22, 22, 22, 0.97), rgba(10, 10, 10, 0.98));
border-radius: 10px;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.sim-playfield .bet-box .bet-label { font-size: 12px; }
.sim-playfield .bet-box .bet-payout { font-size: 14px; }
.sim-playfield .bet-box .bet-edge { font-size: 9px; }
/* Chip badge sits INSIDE the box corner so it can't clip against
neighbours in the tight 3-col grid. */
.sim-playfield .bet-box .bet-chip {
top: 5px;
right: 5px;
width: 22px;
height: 22px;
font-size: 10px;
}
/* Sim-controls panel below the bets. Grid layout keeps a short stack:
row 1 — chip row, row 2 — big primary Deal, row 3 — Auto + Reset. */
.sim-playfield .sim-controls {
position: static;
transform: none;
inset: auto;
top: auto; left: auto; right: auto; bottom: auto;
width: 100%;
max-width: none;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"chips chips"
"deal deal"
"auto reset";
gap: 10px;
padding: 12px;
margin: 12px 0 0;
border-radius: 14px;
background: linear-gradient(180deg, rgba(22, 22, 22, 0.97), rgba(10, 10, 10, 0.98));
border: 1px solid rgba(201, 169, 97, 0.22);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Chip row: flex so the 4 chips spread evenly; each chip keeps a solid
touch size (≥44 px) even on a 320-px phone. */
.sim-playfield .sim-chip-row {
grid-area: chips;
display: flex;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.sim-playfield .chip-btn {
flex: 1 1 0;
min-width: 0;
width: auto;
max-width: 72px;
height: 48px;
aspect-ratio: 1;
border-radius: 50%;
font-size: 12px;
margin: 0 auto;
}
/* Deal is the primary action: full-width, prominent. Auto + Reset are
secondary and share row 3. */
.sim-playfield .btn {
width: 100%;
min-height: 48px;
padding: 12px 14px;
font-size: 14px;
font-weight: 600;
}
.sim-playfield #dealBtn { grid-area: deal; }
.sim-playfield #autoBtn { grid-area: auto; min-height: 44px; font-size: 13px; }
.sim-playfield #resetBtn { grid-area: reset; min-height: 44px; font-size: 13px; }
/* Stats: 5 in a row → 3+2 grid for thumb-friendly layout */
.sim-stats {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.sim-stat { padding: 10px 8px; }
.sim-stat-label { font-size: 8px; letter-spacing: 0.1em; }
.sim-stat-value { font-size: 16px; }
.sim-log { font-size: 11px; padding: 12px; max-height: 220px; }
.sim-log-line .time { font-size: 9px; }
/* Strategy demo trigger — full-width, smaller */
.strat-demo-trigger { padding: 14px 16px; gap: 12px; }
.strat-demo-trigger-icon { width: 38px; height: 38px; font-size: 14px; }
.strat-demo-trigger-label strong { font-size: 16px; }
.strat-demo-trigger-label span { font-size: 12px; }
/* ---- Strategy demo card already has a mobile rule at ≤720 ---- */
/* ---- Modulo & Roads pill rows: smaller pills + scroll if needed ---- */
.tabs--pills, .roads-pills { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; }
.tabs--pills::-webkit-scrollbar, .roads-pills::-webkit-scrollbar { display: none; }
.tabs--pills .tab, .road-pill { flex-shrink: 0; }
/* ---- Tour card already mobile-OK; ensure no overflow ---- */
.tour-card { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 18px 16px; }
/* ---- Help FAB + RSVP toast: smaller, tucked in ---- */
.help-fab { width: 44px; height: 44px; bottom: 18px; left: 18px; font-size: 22px; }
.rsvp-toast { right: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 10px 32px 10px 12px; }
.rsvp-toast-icon { width: 30px; height: 30px; font-size: 15px; }
/* ---- Etiquette list: stack tag above line on narrow screens ---- */
.etiquette-list li { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
/* ---- Footer ---- */
.footer-section { padding: 32px 18px 56px; }
.footer-text { font-size: 12px; line-height: 1.5; }
.footer-credit { right: 18px; bottom: 16px; font-size: 9px; }
}
/* Smaller phones (≤400 px) — last-line tightening */
@media (max-width: 400px) {
.hero-title { font-size: clamp(48px, 16vw, 72px); }
.topnav-cta { display: none; } /* save room — Play CTA available via burger */
/* Wager options: tighter text, no 'edge' line (covered in §07) so the
three boxes always fit across a 320-360 px viewport without wrapping. */
.sim-playfield .sim-bets { gap: 6px; }
.sim-playfield .bet-box { padding: 12px 6px 10px; min-height: 58px; }
.sim-playfield .bet-box .bet-label { font-size: 11px; letter-spacing: 0; }
.sim-playfield .bet-box .bet-payout { font-size: 13px; }
.sim-playfield .bet-box .bet-edge { display: none; }
.sim-playfield .bet-box .bet-chip { top: 4px; right: 4px; width: 18px; height: 18px; font-size: 9px; }
/* Chips: smaller but still ≥44 px tap target */
.sim-playfield .sim-chip-row { gap: 6px; }
.sim-playfield .chip-btn { height: 44px; max-width: 56px; font-size: 11px; }
/* Sim header: title sits above bankroll so both read at narrow width */
.sim-title { font-size: 17px; }
.sim-bankroll-value { font-size: 20px; }
/* Big Road gets a touch more breathing room — fewer columns so dots
don't collapse to sub-pixel size. */
.sim-big-road { grid-template-columns: repeat(14, 1fr); aspect-ratio: 3 / 1; }
/* Stats: 2 across instead of 3 to keep numbers readable */
.sim-stats { grid-template-columns: repeat(2, 1fr); }
.sim-stat-value { font-size: 15px; }
.welcome-bet-name { font-size: 16px; }
}
/* ============================================================
GAME MODE SWITCHER — header pill that swaps between games
============================================================ */
.topnav-trigger-game {
background: linear-gradient(135deg, rgba(201, 169, 97, 0.16), rgba(201, 169, 97, 0.04));
border: 1px solid var(--gold-ghost);
color: var(--ivory);
font-weight: 600;
letter-spacing: 0.03em;
padding: 5px 12px 5px 14px;
margin-right: 6px;
}
.topnav-trigger-game .game-mode-eyebrow {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-right: 8px;
opacity: 0.85;
}
.topnav-trigger-game:hover,
.topnav-trigger-game[aria-expanded="true"] {
background: linear-gradient(135deg, rgba(201, 169, 97, 0.26), rgba(201, 169, 97, 0.08));
border-color: var(--gold-dim);
color: var(--ivory);
}
.game-mode-list { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.game-mode-item {
display: block;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--ivory);
text-decoration: none;
border-left: 2px solid transparent;
transition: background 0.18s ease, border-color 0.18s ease;
cursor: pointer;
}
.game-mode-item:hover {
background: rgba(201, 169, 97, 0.07);
border-left-color: var(--gold-dim);
}
.game-mode-item.active {
background: linear-gradient(90deg, rgba(201, 169, 97, 0.14), transparent);
border-left-color: var(--gold);
}
.game-mode-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--ivory);
line-height: 1.1;
}
.game-mode-sub {
font-size: 11px;
font-style: italic;
color: var(--text-muted);
margin-top: 3px;
letter-spacing: 0.02em;
}
.game-mode-item.active .game-mode-name { color: var(--gold-bright); }
.game-mode-item.active .game-mode-sub { color: var(--ivory-dim); }
/* Coming-soon variants — dimmed, non-interactive, with a small badge. */
.game-mode-item.is-soon {
position: relative;
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.game-mode-item.is-soon:hover {
background: transparent;
border-left-color: transparent;
}
.game-mode-soon {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-dim);
background: rgba(201, 169, 97, 0.1);
border: 1px solid rgba(201, 169, 97, 0.25);
border-radius: 999px;
padding: 3px 8px;
white-space: nowrap;
}
@media (max-width: 720px) {
.topnav-trigger-game .game-mode-eyebrow { display: none; }
.topnav-trigger-game { padding: 5px 10px; margin-right: 0; }
}
/* ============================================================
PAI GOW POKER — page-specific tweaks
Reuses every section/component class from the baccarat layout;
these rules only adjust the elements unique to Pai Gow Poker.
============================================================ */
/* Hand-rank ladder used in the "What beats what" section */
.rank-ladder {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 28px 0 8px;
}
.rank-ladder-item {
position: relative;
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-felt) 100%);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 16px 16px 14px;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.rank-ladder-item:hover { transform: translateY(-2px); border-color: var(--gold-dim); }
.rank-ladder-item .rank-num {
position: absolute; top: 10px; right: 12px;
font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.rank-ladder-item .rank-name {
font-family: var(--font-display); font-size: 19px; font-weight: 600;
color: var(--gold-bright); margin-bottom: 4px; line-height: 1.1;
}
.rank-ladder-item .rank-desc {
font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.rank-ladder-item .rank-cards {
display: flex; gap: 4px; margin-top: 12px;
}
.rank-ladder-item .rank-cards img {
width: 38px; height: auto; border-radius: 3px;
box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}
/* Split diagram — 7 cards splitting into 5 + 2 */
.split-diagram {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
margin: 28px auto 6px;
max-width: 760px;
padding: 26px 22px;
background: var(--bg-felt);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
}
.split-row {
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.split-row-label {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold-dim);
}
/* Pai-gow only (these .split-* classes are unused on the baccarat page).
Every .split-cards row — the seven-card deal, the high hand, the low
hand — uses the same flex/overlap layout so each renders as a tight
held-in-hand fan instead of a sprawling spread. Hover lifts a card
and pulls it to the front so any individual card stays inspectable. */
.split-cards {
display: flex; gap: 0; flex-wrap: nowrap; justify-content: center;
}
.split-cards img {
width: 60px; border-radius: 4px;
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
position: relative;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.split-cards img + img {
margin-inline-start: -38px;
}
.split-cards img:nth-child(1) { z-index: 1; }
.split-cards img:nth-child(2) { z-index: 2; }
.split-cards img:nth-child(3) { z-index: 3; }
.split-cards img:nth-child(4) { z-index: 4; }
.split-cards img:nth-child(5) { z-index: 5; }
.split-cards img:nth-child(6) { z-index: 6; }
.split-cards img:nth-child(7) { z-index: 7; }
.split-cards img:hover {
z-index: 20;
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0,0,0,0.6);
}
.split-arrow {
text-align: center; color: var(--gold); font-size: 22px;
letter-spacing: 0.1em;
}
.split-result {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 18px;
}
@media (max-width: 600px) {
.split-result { grid-template-columns: 1fr; }
}
.split-hand {
background: var(--bg-card);
border: 1px solid var(--gold-ghost);
border-radius: var(--radius-md);
padding: 14px;
text-align: center;
}
.split-hand-name {
font-family: var(--font-display); font-style: italic;
color: var(--gold-bright); font-size: 16px; margin-bottom: 4px;
}
.split-hand-sub {
font-size: 11px; font-family: var(--font-mono);
color: var(--text-muted); letter-spacing: 0.12em;
text-transform: uppercase; margin-bottom: 10px;
}
/* Tiny seven-card sample under each house-way category title — same fan
layout as .split-cards but at ~60% scale so it sits comfortably above
the rules table. Hover lifts a card so any individual rank is readable. */
.houseway-sample {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 4px 0 14px;
}
.houseway-sample-cards {
display: flex; gap: 0; flex-wrap: nowrap; justify-content: center;
padding-top: 6px;
}
.houseway-sample-cards img {
width: 38px; border-radius: 3px;
box-shadow: 0 4px 10px rgba(0,0,0,0.55);
position: relative;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.houseway-sample-cards img + img { margin-inline-start: -22px; }
.houseway-sample-cards img:nth-child(1) { z-index: 1; }
.houseway-sample-cards img:nth-child(2) { z-index: 2; }
.houseway-sample-cards img:nth-child(3) { z-index: 3; }
.houseway-sample-cards img:nth-child(4) { z-index: 4; }
.houseway-sample-cards img:nth-child(5) { z-index: 5; }
.houseway-sample-cards img:nth-child(6) { z-index: 6; }
.houseway-sample-cards img:nth-child(7) { z-index: 7; }
.houseway-sample-cards img:hover {
z-index: 20;
transform: translateY(-6px);
box-shadow: 0 10px 18px rgba(0,0,0,0.6);
}
.houseway-sample-caption {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-dim);
text-align: center;
}
/* House-way table — replaces the baccarat tableau */
.houseway-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 18px;
}
@media (max-width: 720px) {
.houseway-grid { grid-template-columns: 1fr; }
}
/* ============================================================
PAI GOW LIVE PLAYFIELD — image-backed table with slot overlays
The pai-gow-table.png image (1620×971) is the felt background;
cards drop into the painted High/Low rectangles for each side
via percentage-positioned absolute overlays. Same scaling
pattern as baccarat's .sim-table--realistic so the table sits
at a fixed visual size at every viewport width.
============================================================ */
.pg-playfield {
position: relative;
width: 100%;
/* Aspect matches the source pai-gow-table.png (1620×971). */
aspect-ratio: 1620 / 971;
margin: 0 auto 24px;
border-radius: var(--radius-lg);
overflow: hidden;
background: #050807;
box-shadow:
0 28px 60px rgba(0, 0, 0, 0.6),
0 0 0 1px var(--border-subtle) inset;
}
.pg-table-bg {
position: absolute;
inset: 0;
background:
url('../../media/pai-gow-table.png') no-repeat center center;
background-size: 100% 100%;
pointer-events: none;
}
/* Slot zones — positioned over the painted HIGH / LOW boxes. We expand
the zone's height a bit beyond the painted box so the card has room to
show its full rank/suit corners (cards "sit on" the painted box rather
than being clipped to fit strictly inside). Wider gap between cards. */
.pg-slot-zone {
position: absolute;
display: grid;
align-items: center;
justify-items: center;
gap: 1.2%; /* roomier spacing between cards */
z-index: 4;
pointer-events: none; /* children re-enable per-card */
}
.pg-slot-zone--dealer-high,
.pg-slot-zone--player-high {
grid-template-columns: repeat(5, 1fr);
width: 28%;
left: 18%; /* shifted further left for more separation */
}
.pg-slot-zone--dealer-low,
.pg-slot-zone--player-low {
grid-template-columns: repeat(2, 1fr);
width: 14.5%;
left: 61%; /* shifted further right for more separation */
}
/* Taller zones so cards can be larger without being clipped by the
painted box height. */
.pg-slot-zone--dealer-high,
.pg-slot-zone--dealer-low { top: 22%; height: 18%; }
.pg-slot-zone--player-high,
.pg-slot-zone--player-low { top: 57.5%; height: 18%; }
/* Highlight the player's LOW row when in selection mode. */
.pg-slot-zone--target::before {
content: '';
position: absolute;
inset: -4px;
border: 1.5px dashed rgba(230, 201, 133, 0.55);
border-radius: 6px;
pointer-events: none;
animation: pgTargetPulse 2.4s ease-in-out infinite;
}
@keyframes pgTargetPulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Cards inside slots — bare positioning wrappers. No background, no
overflow clip. The card SVG itself is a full poker card (white face,
rank/suit corners) so we just show it directly with a drop-shadow
(which traces the SVG silhouette, not a rectangle). */
.pg-slot-zone .pg-card {
position: relative;
height: 100%;
width: auto;
aspect-ratio: 5 / 7;
max-width: 100%;
background: transparent;
pointer-events: auto;
cursor: pointer;
transition: transform 0.18s ease, filter 0.18s ease;
user-select: none;
}
.pg-slot-zone .pg-card img {
position: absolute; inset: 0;
width: 100%; height: 100%;
/* contain (not cover) — guarantees the full SVG (with rank/suit
corners) is visible, no cropping. */
object-fit: contain;
display: block;
pointer-events: none;
}
/* Player cards are clickable; dealer cards aren't. */
.pg-slot-zone--dealer-high .pg-card,
.pg-slot-zone--dealer-low .pg-card { cursor: default; }
.pg-slot-zone--dealer-high .pg-card:hover,
.pg-slot-zone--dealer-low .pg-card:hover { transform: none; }
/* Hover + selected states use drop-shadow (silhouette-aware) instead of
box-shadow (which would draw a rectangle around the now-transparent
card container). Selected card gets a gold halo via stacked drop-shadows. */
.pg-slot-zone--player-high .pg-card:hover,
.pg-slot-zone--player-low .pg-card:hover {
transform: translateY(-3px);
filter:
drop-shadow(0 10px 18px rgba(0, 0, 0, 0.7))
drop-shadow(0 0 6px rgba(201, 169, 97, 0.55));
}
.pg-slot-zone .pg-card.is-selected {
transform: translateY(-6px);
filter:
drop-shadow(0 12px 22px rgba(0, 0, 0, 0.75))
drop-shadow(0 0 12px rgba(230, 201, 133, 0.85));
}
/* Status / strength overlays on the felt */
.pg-table-status,
.pg-table-strength {
position: absolute;
z-index: 5;
font-family: var(--font-mono);
font-size: clamp(9px, 0.95vw, 13px);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-dim);
background: rgba(0, 0, 0, 0.6);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.pg-table-strength {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(11px, 1.15vw, 16px);
letter-spacing: 0.02em;
text-transform: none;
color: var(--ivory);
border: 1px solid var(--gold-dim);
}
/* Status pills hover on the wood rim above DEALER / below PLAYER labels */
.pg-table-status--dealer { top: 4%; left: 50%; transform: translateX(-50%); }
.pg-table-status--player { top: 53.5%; left: 50%; transform: translateX(-50%); }
/* Strength badges land on the painted "DEALER" / "PLAYER" header lines */
.pg-table-strength--dealer { top: 14%; left: 50%; transform: translateX(-50%); }
.pg-table-strength--player { top: 49.2%; left: 50%; transform: translateX(-50%); }
/* Wager chip lands on the painted MIDDLE POT circle when a bet is set */
.pg-table-chip {
position: absolute;
top: 49.8%;
left: 50%;
transform: translate(-50%, -50%);
width: 4.8%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold) 50%, var(--gold-dim));
display: grid;
place-items: center;
z-index: 6;
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.7),
0 0 0 2px var(--bg-abyss),
0 0 0 3px rgba(230, 201, 133, 0.55),
0 0 24px rgba(230, 201, 133, 0.25);
animation: pgChipDrop 0.45s ease-out;
}
.pg-table-chip[hidden] { display: none; }
.pg-table-chip-amount {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(10px, 1.1vw, 15px);
font-weight: 700;
color: var(--bg-abyss);
}
@keyframes pgChipDrop {
0% { opacity: 0; transform: translate(-50%, -120%) rotate(180deg); }
100% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
}
/* Below-table readouts — high/low summaries + coach hint */
.pg-readouts {
display: grid;
grid-template-columns: 1fr 1fr 1.6fr;
gap: 10px;
margin-top: 14px;
}
@media (max-width: 720px) {
.pg-readouts { grid-template-columns: 1fr; }
}
.pg-readout {
background: var(--bg-felt-deep);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 3px;
}
.pg-readout-label {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
}
.pg-readout-value {
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
color: var(--ivory);
}
.pg-readout--hint .pg-readout-value {
font-family: var(--font-body);
font-style: normal;
font-size: 12.5px;
color: var(--ivory-dim);
line-height: 1.4;
}
/* Action pill — chip row + action buttons. Sits as a normal block right
below the playfield (NOT positioned absolutely inside it). This avoids
the playfield's overflow:hidden clipping the bottom buttons when the
pill wraps to two rows on narrower viewports. */
.pg-controls {
margin: 14px auto 0;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(8px, 1vw, 14px);
flex-wrap: wrap;
padding: clamp(8px, 0.9vw, 12px) clamp(16px, 1.6vw, 24px);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.75));
border: 1px solid rgba(201, 169, 97, 0.25);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
width: max-content;
max-width: calc(100% - 16px);
}
.pg-controls .sim-chip-row { gap: clamp(6px, 0.7vw, 10px); }
.pg-controls .chip-btn {
width: clamp(36px, 3.2vw, 46px);
height: clamp(36px, 3.2vw, 46px);
font-size: clamp(10px, 0.9vw, 12px);
}
.pg-controls .btn {
padding: clamp(7px, 0.85vw, 11px) clamp(12px, 1.4vw, 20px);
font-size: clamp(11px, 0.95vw, 13px);
}
/* Pai Gow live game — aggressively compress everything above the
playfield so the table sits as high in the section as possible. */
.sim[data-variant="paigow"] .sim-head { margin-bottom: 8px; gap: 12px; }
.sim[data-variant="paigow"] .sim-rules { margin-bottom: 10px; padding: 8px 12px; }
.sim[data-variant="paigow"] .sim-rules-body { font-size: 12px; line-height: 1.45; }
.sim[data-variant="paigow"] .sim-rules-eyebrow { font-size: 9px; margin-bottom: 4px; }
.sim[data-variant="paigow"] .sim-bankroll-value { font-size: 20px; }
.sim[data-variant="paigow"] .sim-title { font-size: 16px; }
.sim[data-variant="paigow"] .sim-sub { font-size: 11px; }
/* Tighten the section header above as well */
#sec-sim .section-header { margin-bottom: 22px; }
#sec-sim .section-lede { font-size: 14px; }
/* FORTUNE BONUS help icon — small "?" pinned next to the painted circle
on the right side of the felt, with a hover tooltip explaining the
side bet. */
.pg-help-icon {
position: absolute;
/* Sits at the top-right of the painted FORTUNE BONUS circle so the
"?" reads as the disclaimer for that bet. */
top: 28%;
right: 5.5%;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
border: 1.5px solid var(--bg-abyss);
color: var(--bg-abyss);
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 14px;
cursor: pointer;
display: grid;
place-items: center;
z-index: 7;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.6),
0 0 14px rgba(230, 201, 133, 0.45);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pg-help-icon:hover,
.pg-help-icon:focus-visible {
transform: scale(1.12);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 22px rgba(230, 201, 133, 0.65);
}
.pg-help-pop {
position: absolute;
/* Drops below the "?" icon so the start of the popup stays visible —
popping above clipped the title off-screen at typical scroll positions. */
top: calc(100% + 14px);
right: -8px;
width: 280px;
padding: 13px 15px 12px;
background: linear-gradient(180deg, rgba(28, 22, 14, 0.97) 0%, rgba(10, 8, 4, 0.97) 100%);
border: 1px solid var(--gold-dim);
border-radius: var(--radius-md);
box-shadow:
0 24px 50px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(201, 169, 97, 0.1) inset,
0 0 32px rgba(201, 169, 97, 0.16);
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
z-index: 8;
}
.pg-help-pop::after {
/* Caret on the TOP edge of the popup, pointing up at the "?" icon. */
content: '';
position: absolute;
bottom: 100%;
right: 14px;
width: 12px;
height: 12px;
background: linear-gradient(315deg, transparent 50%, rgba(28, 22, 14, 0.97) 50%);
border-left: 1px solid var(--gold-dim);
border-top: 1px solid var(--gold-dim);
margin-bottom: -6px;
rotate: 45deg;
}
.pg-help-pop-eyebrow {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-dim);
}
.pg-help-pop-title {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
font-weight: 600;
color: var(--gold-bright);
line-height: 1.15;
margin-bottom: 2px;
}
.pg-help-pop-body {
font-size: 12px;
line-height: 1.55;
color: var(--ivory-dim);
}
.pg-help-pop-body strong { color: var(--ivory); font-weight: 600; }
.pg-help-pop-body em { color: var(--gold-bright); font-style: italic; font-weight: 600; }
.pg-help-pop-foot {
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid rgba(201, 169, 97, 0.18);
font-size: 11px;
font-style: italic;
color: var(--text-muted);
line-height: 1.5;
}
.pg-help-icon:hover .pg-help-pop,
.pg-help-icon:focus-visible .pg-help-pop {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* ============================================================
PAI GOW LIVE GAME — MOBILE (≤720px)
Mirror baccarat's mobile sim layout: stakes shrink, chip row +
action buttons grid into a compact stack so Deal / Set hand /
Reset all stay reachable on a 320 px phone.
============================================================ */
@media (max-width: 720px) {
.pg-playfield { border-radius: var(--radius-md); margin-bottom: 12px; }
/* Status / strength overlays — shrink so they don't blot out the felt */
.pg-table-status,
.pg-table-strength { font-size: 8.5px; padding: 2px 6px; }
.pg-table-strength { font-size: 10px; }
/* Wager chip on MIDDLE POT — slightly larger so the amount stays readable */
.pg-table-chip { width: 7%; }
.pg-table-chip-amount { font-size: clamp(8px, 1.6vw, 11px); }
/* Help icon / popup */
.pg-help-icon { width: 22px; height: 22px; font-size: 12px; }
.pg-help-pop { width: 220px; right: -4px; }
/* Card slot zones — keep the painted-box alignment but allow cards to
scale down with viewport so 5 fit in HIGH and 2 fit in LOW. */
.pg-slot-zone { gap: 0.6%; }
/* ---- Action pill below the table: grid layout matching baccarat ---- */
.pg-controls {
width: 100%;
max-width: none;
margin: 12px 0 0;
padding: 12px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(22, 22, 22, 0.97), rgba(10, 10, 10, 0.98));
border: 1px solid rgba(201, 169, 97, 0.22);
backdrop-filter: none;
-webkit-backdrop-filter: none;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"chips chips"
"deal deal"
"house house"
"set reset";
gap: 10px;
}
.pg-controls .sim-chip-row {
grid-area: chips;
display: flex;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.pg-controls .chip-btn {
flex: 1 1 0;
min-width: 0;
width: auto;
max-width: 72px;
height: 48px;
aspect-ratio: 1;
border-radius: 50%;
font-size: 12px;
margin: 0 auto;
}
.pg-controls .btn {
width: 100%;
min-height: 46px;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
}
.pg-controls #pgDealBtn { grid-area: deal; }
.pg-controls #pgHouseWayBtn { grid-area: house; min-height: 42px; font-size: 12.5px; }
.pg-controls #pgSetBtn { grid-area: set; min-height: 44px; font-size: 13px; }
.pg-controls #pgResetBtn { grid-area: reset; min-height: 44px; font-size: 13px; }
/* Coach + hand readouts — single column instead of 3 */
.pg-readouts { grid-template-columns: 1fr; gap: 8px; }
.pg-readout { padding: 8px 12px; }
.pg-readout-label { font-size: 8.5px; }
.pg-readout-value { font-size: 13px; }
/* Strength badges position higher on mobile so the painted plaque
"DEALER" / "PLAYER" text stays readable */
.pg-table-strength--dealer { top: 12%; }
.pg-table-strength--player { top: 73%; }
}
/* ---- Smallest phones (≤400px): tighten chip + button sizing ---- */
@media (max-width: 400px) {
.pg-controls .chip-btn { height: 44px; font-size: 11px; }
.pg-controls .btn { min-height: 42px; font-size: 12.5px; padding: 8px 10px; }
.pg-table-status, .pg-table-strength { font-size: 8px; padding: 2px 5px; }
}
.pg-result-line {
text-align: center; font-family: var(--font-display);
font-style: italic; font-size: 18px; color: var(--ivory);
padding: 10px;
}
.pg-result-line.win { color: var(--jade-bright); }
.pg-result-line.lose { color: var(--carmine-bright); }
.pg-result-line.push { color: var(--gold-bright); }
.pg-hand-strength {
display: inline-block;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--gold-bright);
padding: 2px 8px; border: 1px solid var(--gold-ghost);
border-radius: 999px; margin-left: 8px;
}
/* ============================================================
PAI GOW WALKTHROUGH — step-by-step coach for the live sim
============================================================ */
/* Floating step card — anchors to the bottom-right of the viewport while the
user is in the simulator, with a connector line pointing toward the
pulsing UI target. Doesn't block clicks on the rest of the page. */
.pg-walk {
position: fixed;
right: 24px;
bottom: 24px;
width: min(360px, calc(100vw - 32px));
z-index: 320;
pointer-events: none;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.28s ease, transform 0.28s ease;
}
.pg-walk[hidden] { display: none; }
.pg-walk.active { opacity: 1; transform: translateY(0); pointer-events: none; }
.pg-walk-card {
pointer-events: auto;
background: linear-gradient(180deg, rgba(28, 22, 14, 0.97) 0%, rgba(10, 8, 4, 0.97) 100%);
border: 1px solid var(--gold-dim);
border-radius: var(--radius-md);
padding: 16px 18px 14px;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(201, 169, 97, 0.12) inset,
0 0 36px rgba(201, 169, 97, 0.18);
color: var(--ivory);
font-family: var(--font-body);
}
.pg-walk-progress {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold-dim); margin-bottom: 8px;
}
.pg-walk-progress strong { color: var(--gold-bright); font-weight: 600; }
.pg-walk-progress-bar {
margin-left: auto; width: 80px; height: 3px;
background: rgba(201, 169, 97, 0.16);
border-radius: 999px; overflow: hidden;
}
.pg-walk-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
width: 0; transition: width 0.35s ease;
}
.pg-walk-title {
font-family: var(--font-display);
font-size: 19px; font-weight: 600;
color: var(--ivory); margin-bottom: 6px;
line-height: 1.2;
}
.pg-walk-title em { color: var(--gold-bright); font-style: italic; }
.pg-walk-body {
font-size: 13px; line-height: 1.55;
color: var(--ivory-dim); margin-bottom: 12px;
}
.pg-walk-body strong { color: var(--ivory); }
.pg-walk-body em { color: var(--gold-bright); font-style: italic; }
.pg-walk-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding-top: 10px;
border-top: 1px solid rgba(201, 169, 97, 0.12);
}
.pg-walk-skip {
background: transparent; border: none;
color: var(--text-muted); font-family: inherit;
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
cursor: pointer; padding: 4px 6px;
transition: color 0.18s ease;
}
.pg-walk-skip:hover { color: var(--ivory-dim); }
.pg-walk-next {
background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
border: none; color: var(--bg-abyss);
font-family: inherit; font-size: 12px; font-weight: 600;
letter-spacing: 0.04em; padding: 8px 16px;
border-radius: var(--radius-sm); cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 4px 12px rgba(201, 169, 97, 0.25);
}
.pg-walk-next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(201, 169, 97, 0.35); }
.pg-walk-next:disabled {
opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
}
.pg-walk-hint {
display: block;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.06em; color: var(--text-muted);
margin-top: 4px;
}
/* Continuous pulse on the current step's target. Stronger and looping —
.tour-pulse is a one-shot, this is "stay highlighted until we move on." */
.pg-walk-target {
position: relative;
z-index: 6;
animation: pgWalkPulse 1.8s ease-in-out infinite;
border-radius: var(--radius-md);
}
@keyframes pgWalkPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.25), 0 0 0px rgba(201, 169, 97, 0); }
50% { box-shadow: 0 0 0 3px rgba(230, 201, 133, 0.7), 0 0 36px rgba(201, 169, 97, 0.5); }
}
/* Note: the bottom-left "?" floating button on Pai Gow now uses the
shared .help-fab class (same as baccarat). The previous .pg-help-fab
class was removed when we wired the fab to the page-level intro tour
instead of the live-game walkthrough. */
@media (max-width: 600px) {
.pg-walk { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
/* Reuse .sim-explain for the post-hand outcome modal — no new CSS, only an
alternate ID. Cards inside use this pair-naming when listing the split. */
.pg-explain-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 12px 0 6px;
font-size: 13px;
}
.pg-explain-pair > div {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 8px 10px;
}
.pg-explain-pair .lbl {
display: block;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 3px;
}
.pg-explain-pair .row {
display: flex; justify-content: space-between; gap: 8px;
padding: 2px 0;
font-family: var(--font-body); color: var(--ivory-dim);
}
.pg-explain-pair .row.win strong { color: var(--jade-bright); }
.pg-explain-pair .row.lose strong { color: var(--carmine-bright); }
.pg-explain-pair .row.push strong { color: var(--gold-bright); }
/* ============================================================
PAI GOW — PANEL 01 SPLIT ANIMATION
Replaces the spinning bet-box pattern with a card-fan that
visually splits 7 → 5 + 2. This is the defining mechanic of
Pai Gow Poker, so the panel-01 visual demonstrates it.
============================================================ */
.welcome-split {
position: relative;
margin-top: auto;
padding-top: 12px;
}
/* Stage holds all cards in absolute positioning so the transform-based
transitions don't reflow surrounding text. Width is the natural span
of seven 50px cards at 42px stride + 8px wiggle = ~302px. */
.welcome-split-stage {
position: relative;
height: 240px;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
/* Each card uses CSS custom props for both states: --xR/--yR are the
"row" (united) coords; --xS/--yS are the "split" coords. The single
transform property switches between them as the parent state flips,
giving a smooth GPU-accelerated transition with one easing curve. */
.welcome-split-card {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 70px;
border-radius: 4px;
overflow: hidden;
background: var(--ivory);
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(0, 0, 0, 0.15);
transform: translate(var(--xR), var(--yR)) rotate(0deg);
transition: transform 0.85s cubic-bezier(0.65, 0.02, 0.18, 1.04),
box-shadow 0.5s ease,
filter 0.5s ease;
z-index: 2;
}
.welcome-split-card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
pointer-events: none;
}
/* Split state — cards translate to their high/low positions. Low-hand
cards get a gold-rim halo so the eye snaps to which two were chosen. */
.welcome-split[data-state="split"] .welcome-split-card {
transform: translate(var(--xS), var(--yS)) rotate(var(--rotS, 0deg));
}
.welcome-split[data-state="split"] .welcome-split-card--low {
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.6),
0 0 0 1.5px var(--gold-bright),
0 0 22px rgba(230, 201, 133, 0.45);
z-index: 3;
}
/* Brackets — thin gold rules with labels. Hidden when united; fade +
slide in when the cards split. */
.welcome-split-bracket {
position: absolute;
display: block;
border: 1px solid rgba(201, 169, 97, 0.45);
border-radius: 6px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
pointer-events: none;
}
.welcome-split-bracket-label {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--bg-felt);
padding: 0 8px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-dim);
white-space: nowrap;
}
.welcome-split-bracket--high {
/* Wraps the 5 cards (xS spans 0 → 240+50) in the top row */
top: -8px;
left: -8px;
width: 306px;
height: 86px;
}
.welcome-split-bracket--low {
/* Wraps the 2 cards (xS 142 → 188+50) in the bottom row */
top: 110px;
left: 134px;
width: 112px;
height: 86px;
}
.welcome-split[data-state="split"] .welcome-split-bracket {
opacity: 1;
transform: translateY(0);
}
/* Caption — cross-fades between two lines as the state flips. */
.welcome-split-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
color: var(--ivory-dim);
height: 22px;
}
.welcome-split-caption-line {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.45s ease;
}
.welcome-split-caption-line em {
color: var(--gold-bright);
font-style: italic;
font-weight: 600;
}
.welcome-split[data-state="united"] .welcome-split-caption-line--united { opacity: 1; }
.welcome-split[data-state="split"] .welcome-split-caption-line--split { opacity: 1; }
/* Mobile — shrink the stage so 7 cards still fit on a 320 px viewport. */
@media (max-width: 420px) {
.welcome-split-stage {
height: 220px;
transform: scale(0.85);
transform-origin: top center;
}
}
@media (prefers-reduced-motion: reduce) {
.welcome-split-card,
.welcome-split-bracket,
.welcome-split-caption-line { transition: none; }
}
/* ---- Pai Gow welcome grid: drop the dashed connector + speed up the
"what happens at the table" step reveal. Both rules are scoped to the
--paigow modifier so the baccarat layout is untouched. */
.welcome-grid--paigow::before { display: none !important; }
.welcome-grid--paigow .welcome-steps li {
/* 14 s → 7 s. Keyframes are percentage-based, so the cadence stays
proportional — each step still appears, holds, fades in turn, just
twice as fast. */
animation-duration: 7s;
}
/* ============================================================
PAI GOW — DECK SPREAD VARIANT
Replaces the baccarat ♠ on the back with a stacked 牌九 wordmark,
and renders three of the cards face-up with hover popups that
describe the card's role. Reuses the .deck-spread engine so the
stagger / cubic-bezier easing / scroll trigger all match.
============================================================ */
/* 牌九 wordmark on the back — replaces the ::after ♠ used by baccarat. */
.pg-deck .deck-spread-back::after { display: none; }
.pg-back-mark {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
pointer-events: none;
font-family: 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
font-weight: 700;
font-size: calc(var(--card-w) * 0.34);
color: var(--gold);
text-shadow: 0 0 14px rgba(201, 169, 97, 0.5);
line-height: 0.95;
letter-spacing: 0.02em;
}
.pg-back-mark span { display: block; }
/* Face-up card variant — uses an actual SVG card art instead of the
carmine back. Removes the back's filigree pseudo-elements and sits
on top of the deck so the face reads cleanly. */
.deck-spread-card--face {
background: var(--ivory);
overflow: visible; /* allow tooltip to escape */
}
.deck-spread-card--face::before,
.deck-spread-card--face::after { content: none; }
.deck-spread-card--face > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
user-select: none;
pointer-events: none;
}
/* Subtle gold rim so the face-up cards read as "highlighted" against the
row of carmine backs even before hover. */
.deck-spread-card--face {
box-shadow:
0 6px 28px rgba(0, 0, 0, 0.6),
0 0 0 1.5px rgba(230, 201, 133, 0.55),
0 0 22px rgba(201, 169, 97, 0.18);
}
/* Face-up cards already raise on hover (inherited from .deck-spread.is-spread
.deck-spread-card:hover); we add a stronger gold halo + raise so the
tooltip placement reads as anchored to the card. */
.deck-spread.is-spread .deck-spread-card--face:hover {
transform: translate3d(var(--offset, 0), -22px, 0) scale(1.08);
box-shadow:
0 22px 56px rgba(0, 0, 0, 0.75),
0 0 0 2px var(--gold-bright),
0 0 40px rgba(230, 201, 133, 0.45);
}
/* Tooltip popup — sits above the face-up card, fades + slides in on hover.
Sized so it reads at a glance without overflowing typical viewports. */
.deck-tip {
position: absolute;
bottom: calc(100% + 16px);
left: 50%;
width: 280px;
transform: translate(-50%, 6px);
padding: 14px 16px 13px;
background: linear-gradient(180deg, rgba(28, 22, 14, 0.97) 0%, rgba(10, 8, 4, 0.97) 100%);
border: 1px solid var(--gold-dim);
border-radius: var(--radius-md);
box-shadow:
0 24px 50px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(201, 169, 97, 0.1) inset,
0 0 32px rgba(201, 169, 97, 0.14);
text-align: left;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
z-index: 200;
}
/* Caret connecting the tooltip to the card */
.deck-tip::after {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
width: 14px; height: 14px;
background: linear-gradient(135deg, transparent 50%, rgba(10, 8, 4, 0.97) 50%);
border-right: 1px solid var(--gold-dim);
border-bottom: 1px solid var(--gold-dim);
margin-top: -7px;
rotate: 45deg;
}
.deck-tip-eyebrow {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-dim);
margin-bottom: 4px;
}
.deck-tip-title {
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
font-weight: 600;
color: var(--gold-bright);
line-height: 1.15;
margin-bottom: 6px;
}
.deck-tip-body {
font-size: 12.5px;
line-height: 1.55;
color: var(--ivory-dim);
}
.deck-tip-body strong { color: var(--ivory); font-weight: 600; }
.deck-tip-body em { color: var(--gold-bright); font-style: italic; }
.deck-spread-card--face:hover .deck-tip,
.deck-spread-card--face:focus-visible .deck-tip {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
/* Edge-case: the leftmost / rightmost face-up cards risk pushing the
tooltip off-screen. Nudge it inward when the card sits near the row
ends. The deck-spread track is centered, so left-edge cards live at
data-i values < ~3, right-edge at > ~9. */
.pg-deck .deck-spread-card--face[data-i="3"] .deck-tip { left: 65%; }
.pg-deck .deck-spread-card--face[data-i="9"] .deck-tip { left: 35%; }
@media (max-width: 720px) {
.deck-tip { width: 220px; padding: 12px 14px 11px; }
.deck-tip-title { font-size: 16px; }
.deck-tip-body { font-size: 11.5px; }
}
@media (max-width: 480px) {
/* On narrow screens the row is too tight for off-card tooltips; pin them
below the deck so they don't get clipped. */
.deck-tip {
position: fixed;
bottom: 16px; left: 16px; right: 16px;
width: auto; max-width: none;
transform: translateY(0);
}
.deck-tip::after { display: none; }
}