/* =========================================================================
PUBE & FARTS CASINO — shared design system
/casino/casino.css · pair with /casino/casino.js
=========================================================================
Plain CSS. No build step, no framework, no imports. Every casino page
(/casino, /casino/blackjack, /casino/poker, /casino/school) loads this file
plus the Pixelify Sans Google-Fonts link and nothing else.
-------------------------------------------------------------------------
HOW SIZING WORKS (read this first — it explains every calc() below)
-------------------------------------------------------------------------
The design was authored on a fixed 375px phone. In production the frame IS
the viewport on phones and a centered ~420px handheld on desktop, so the
whole stage scales proportionally instead of being letter-boxed.
`--u` is the scale unit: 1 unit == 1 design pixel.
* outside .c-frame --u = 1px
* inside .c-frame --u = frameWidth / 375 (via container query units)
So `calc(var(--u) * 118)` means "118px in the original 375px mockup".
Everything positional, every font-size and every card scales together, which
keeps the felt curvature and the arc-text alignment exact at any width.
Interactive controls additionally carry a hard `min-height:44px` floor so a
narrow phone can never produce an untappable button.
You almost never need to write calc() yourself: use the classes below, and
when you must position something custom inside the felt use the `.c-fslot`
helper with `style="--top:142"` (design px).
-------------------------------------------------------------------------
CLASS CONTRACT
-------------------------------------------------------------------------
SHELL
.c-page body-level wrapper; page gradient + centering
.c-frame the device. full-bleed on phones, 420px card on desktop
.c-frame--nobloom drops the purple bloom (poker cheat-sheet state)
.c-frame--lobby lobby gradient fill
.c-crt CRT scanline overlay — FIRST child of .c-frame, z 20
.c-hidden display:none !important
.c-center text-align:center
.c-thinking animated ellipsis: . . . )
.c-foldedwings .c-shoe .c-shoe__topcard .c-bell blackjack props
.c-fslot absolute full-width centered row inside the felt;
set style="--top:118" and optionally --gap
.c-slot--bj-dealer (52) .c-slot--bj-seats (118)
.c-slot--pk-opp (16) .c-slot--pk-comm (74) .c-slot--pk-player (190)
.c-slot--sc-dealer (44) .c-slot--sc-player (124)
CARDS (Casino.cardHTML(code,size) builds these)
.c-card + one size:
--mini 30x42 · --xs 32x44 · --s 34x48 · --sm 38x53 · --md 40x56
--dlr 42x58 · --lg 50x70 · --xl 56x78 · --xxl 58x82
variants: .c-card--red .c-card--back .c-card--slot .c-card--glow
.c-card--midflip .c-card--flipping (600ms 3D reveal)
.c-card__corner .c-card__pip .c-card__ring
.c-cardrow flex row, gap 6 (use --gap to override)
TOTALS / SEATS / CHIPS
.c-total .c-total--dealer (gold) .c-total--school
.c-seatsrow .c-seat .c-seatcards
.c-plate .c-plate__av .c-plate__txt .c-plate__nm .c-plate__sub
states: .c-plate--tina .c-plate--chris .c-plate--active
.c-plate--dim .c-plate--ghost .c-plate--bust
.c-pkplate poker player plate (teal, glowing)
.c-seatplate big reference plate (components)
.c-betchip .c-betchip__ring .c-betchip--payout (chipFly 1.6s)
.c-sit .c-sit__lbl .c-sit--1 .c-sit--2 .c-sit--3 .c-sit--4
.c-picker .c-chip .c-chip--5 --25 --100 --500 .c-chip--ref
.c-chip__ring .c-chip__val .c-chipname
.c-stackcol .c-stack .c-stack__d3 .c-stack__d2 .c-stack__d1
.c-flychip free-flying chip for arc animations
POKER TABLE FURNITURE
.c-potwrap .c-potwrap--payout .c-pot
.c-explain .c-explain__t .c-explain__b
.c-blindchip .c-dbutton .c-badges
FEEDBACK
.c-cf .c-cf--a --b --c .c-cf--ga --gb --gc .c-cf--burst confetti particles
.c-confzone dashed placeholder swatch
.c-toasts .c-toast .c-toast--good --bad --info .c-toast__emo .c-toast__msg
.c-result .c-result--win --gold --push --lose .c-result__main .c-result__sub
.c-countflash gold flash while a balance counts up
ACTION AREA + CONTROLS
.c-actions (alias .c-panel for the school lesson panel)
.c-btnrow .c-btnrow--tight(8) --wide(10) --col --4
.c-f1 .c-f2 .c-f14 flex weights
.c-btn + .c-btn--teal --gold --pink --ghost --off
+ size .c-btn--md(16) --sm(15) --wide(components) --cta(lobby)
.c-note muted footnote line under the actions
.c-hint .c-hint__toggle blackjack hint strip (dashed gold)
.c-notestrip poker jargon strip (dashed gold)
.c-jargon .c-jargon__icon inline ⓘ explainer chip
.c-sliderrow .c-track .c-fill .c-thumb .c-val
.c-presets .c-presets__b .c-presets__b--allin
POKER CHEAT SHEET
.c-cheathandle .c-cheathandle__b .c-cheathandle__sub
.c-sheetwrap .c-sheetscrim .c-sheet .c-drag
.c-sheethdr .c-sheethdr__l .c-sheethdr__r
.c-rows .c-rrow .c-rrow--gold --teal --purple --muted
.c-rrow__n .c-rrow__ex .c-rrow__txt .c-rrow__nm .c-rrow__hint
.c-dimstub stub for the dimmed table behind the sheet
CASINO SCHOOL
.c-courses .c-course .c-course--bj .c-course--pk
.c-course__row .c-course__t .c-course__meta .c-course__path
.c-listtitle .c-listtitle--bj --pk --gold
.c-lrow .c-lrow__ic .c-lrow__tx
.c-coachwrap .c-coachstack .c-coachpill .c-coacharrow
.c-q .c-qopts .c-qopt .c-qopt--correct .c-qopt--neutral .c-fb
.c-cert .c-cert__cap .c-cert__h .c-cert__sub
.c-certchip .c-certchip__coin .c-certchip__lbl
.c-scrim .c-dialog .c-dialog__g __t __b __btns __p __s
LOBBY
.c-tables .c-tcard .c-tcard--bj .c-tcard--pk .c-tcard--locked
.c-tcard__hdr .c-tcard__t .c-tcard__meta .c-tcard__ftr
.c-minifelt .c-minifelt--bj .c-minifelt--pk .c-minifelt--locked
.c-minifelt__pot
.c-lockwrap .c-lockpill
.c-presence .c-presence--live .c-presence--empty .c-presence__dot
.c-school .c-school__ic __t __s __p
.c-enroll .c-enroll__ic __t __s __arrow .c-coachbadge
.c-sectionpanel .c-sectionpanel__t .c-sectionpanel__s (reference sheet)
IDENTITY GATE (rendered by Casino.identityGate)
.c-gate .c-gate__card .c-gate__title .c-gate__sub
.c-gate__row .c-gate__pick .c-gate__pick--tina --chris
.c-gate__emoji .c-gate__name
INLINE HOOKS you may set with style=""
--accent seat plate / total pill accent colour
--glow seat plate glow colour
--turn --turnGlow turn pill colour pair
--track school track colour (#38F9D7 blackjack · #FF6EC7 hold'em)
--resultBg --resultInk result card palette
--pct timer ring fill percentage (e.g. 65%)
--top --gap .c-fslot placement, in design px
========================================================================= */
/* ============================== 1 · TOKENS ============================== */
:root {
/* scale unit — overridden inside .c-frame */
--u: 1px;
/* --- backgrounds & surfaces ------------------------------------------ */
--bg-void: #0C0220;
--bg-page-end: #1A0533;
--surface-frame: #12042E;
--surface-sunken: #12042E;
--surface-panel: #1D0836;
--surface-room: #2A0845;
--surface-lobby-deep: #3D0B4E;
--surface-warm-a: #2A1445;
--surface-warm-b: #3A2410;
--surface-disabled: #3A2F55;
--border-disabled: #2A2040;
--border-muted: #4A3A6E;
/* --- neon accents ----------------------------------------------------- */
--teal: #38F9D7;
--teal-ink: #063A31;
--teal-2: #18C7A8;
--pink: #FF6EC7;
--pink-ink: #4A0B33;
--pink-2: #E24A9E;
--gold: #FFD54A;
--gold-ink: #3A2410;
--gold-2: #F2A40E;
--purple: #7A5CFF;
--purple-ink: #FFFFFF;
--red-suit: #E2453A;
--cream: #FFF9EE;
--cream-ink: #2A0845;
--ink-black: #1A1A1A;
--ink-on-pink: #3A0524; /* ink on pink badges: lobby lock label, coach mark */
/* --- text ------------------------------------------------------------- */
--text: #EDE6FF;
--text-secondary: #D8CCEE;
--text-lilac: #B9A8DC;
--text-muted: #8E7FB8;
--text-disabled: #7C6F9E;
--text-cert-sub: #6B5A8E;
--text-gold-body: #FFE9A8;
--text-quiz-fb: #9FF5E3;
--text-on-cream: #2A0845;
/* --- felt & table ----------------------------------------------------- */
--felt-1: #D31A40;
--felt-2: #A11430;
--felt-3: #7A0F26;
--rail-1: #D9A93E;
--rail-2: #8A6420;
--minifelt-1: #0E4A3E;
--minifelt-2: #0A2E27;
--minifelt-border:#123A32;
/* --- gradients (canonical) ------------------------------------------- */
--grad-page: linear-gradient(180deg,#0C0220,#1A0533);
--grad-room: linear-gradient(180deg,#1A0533,#2A0845);
--grad-action: linear-gradient(180deg,#12042E,#1A0533);
--grad-frame-lobby: linear-gradient(180deg,#12042e,#2a0845 60%,#3d0b4e);
--grad-rail: linear-gradient(180deg,#D9A93E,#8A6420);
--grad-felt: radial-gradient(ellipse at 50% 18%,#D31A40,#A11430 45%,#7A0F26 75%);
--grad-minifelt-bj: radial-gradient(ellipse at 50% 120%,#0E4A3E,#0A2E27 70%);
--grad-minifelt-pk: radial-gradient(ellipse at 50% 50%,#0E4A3E,#0A2E27 75%);
--grad-teal: linear-gradient(#38F9D7,#18C7A8);
--grad-gold: linear-gradient(#FFD54A,#F2A40E);
--grad-pink: linear-gradient(#FF6EC7,#E24A9E);
--grad-tuxedo: linear-gradient(#1E1730,#120D22);
--grad-shoe: linear-gradient(120deg,rgba(255,255,255,.85),rgba(255,255,255,.5));
--grad-school: linear-gradient(120deg,#2A1445,#1D0836);
--grad-enroll: linear-gradient(120deg,#3A2410,#2A1445);
--grad-slider: linear-gradient(90deg,#38F9D7,#FFD54A);
--grad-midflip: linear-gradient(100deg,#FFF9EE 49%,#7A5CFF 51%);
/* --- elevation ladder (hard, blur-zero) ------------------------------ */
--el-2: 0 2px 0 rgba(0,0,0,.4);
--el-3a: 0 3px 0 rgba(0,0,0,.3);
--el-3b: 0 3px 0 rgba(0,0,0,.35);
--el-3c: 0 3px 0 rgba(0,0,0,.4);
--el-3d: 0 3px 0 rgba(0,0,0,.5);
--el-4a: 0 4px 0 rgba(0,0,0,.4);
--el-4b: 0 4px 0 rgba(0,0,0,.45);
--el-5: 0 5px 0 rgba(0,0,0,.45);
--el-6: 0 6px 0 rgba(0,0,0,.45);
--el-8: 0 8px 0 rgba(0,0,0,.45);
--felt-inner: inset 0 14px 40px rgba(0,0,0,.45);
/* --- glows ------------------------------------------------------------ */
--glow-teal: 0 0 12px rgba(56,249,215,.5);
--glow-pink: 0 0 12px rgba(255,110,199,.55);
--glow-gold: 0 0 16px rgba(255,213,74,.6);
--glow-frame: 0 0 18px rgba(122,92,255,.35);
/* Two faces, on purpose. Pixelify carries the arcade identity but its
numerals are genuinely hard to read at speed — and a casino is nothing
but numerals you have to read at speed, plus a tutorial you have to read
at length. So Pixelify is kept for display type (the marquee, headings,
the felt print) and Space Grotesk does the work: balances, pots, bets,
card ranks, timers, dealer lines and every word of Casino School. */
--font: 'Pixelify Sans', ui-monospace, monospace;
--font-ui: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* ============================== 2 · SHELL =============================== */
.c-page,
.c-page * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.c-page {
margin: 0;
padding: 0;
min-height: 100vh;
min-height: 100dvh;
font-family: var(--font-ui);
/* Money changes while you watch it (countUp animates the balances), and
proportional digits make the number twitch as it climbs. Tabular figures
hold their column. */
font-variant-numeric: tabular-nums;
color: var(--text);
background: var(--bg-void);
background: var(--grad-page);
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: flex-start;
overflow-x: hidden; /* never a horizontal scrollbar, ever */
-webkit-font-smoothing: antialiased;
}
/* Display type keeps the arcade face — the identity lives in these, and none
of them is something you have to read a number off of. */
.c-marquee__top,
.c-marquee__word,
.c-marquee__tag,
.c-result__main,
.c-tcard__t,
.c-course__t,
.c-cert__h,
.c-dialog__t,
.c-sheethdr__l,
.c-school__t,
.c-gate__title { font-family: var(--font); }
.c-frame {
position: relative;
width: 100%;
max-width: 420px;
overflow: hidden;
background: var(--surface-frame);
border: 4px solid var(--purple);
border-radius: 26px;
box-shadow: var(--el-6), var(--glow-frame);
min-height: 100vh;
min-height: 100dvh;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.c-frame--lobby { background: var(--grad-frame-lobby); }
.c-frame--nobloom { box-shadow: var(--el-6); } /* poker cheat-sheet state */
/* Phones: the frame IS the viewport — full bleed, no floating card. */
@media (max-width: 459px) {
.c-frame {
border-radius: 0;
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 0;
box-shadow: none;
}
}
/* Desktop / tablet: a centered handheld with the purple border + bloom. */
@media (min-width: 460px) {
.c-page { align-items: center; padding: 26px 16px 44px; }
.c-frame { min-height: 0; }
}
/* --------------------------------------------------------------------------
BIG SCREENS — grow the handheld instead of stranding it in the middle.
Every measurement inside the frame is in --u (1/375 of the frame's own
width), so widening the frame scales the whole casino together — felt,
cards, chips and type all get bigger at once. Nothing re-flows, so there is
no second layout to keep correct.
The bound that matters is HEIGHT, not width: the frame's proportions are
fixed, so a wider frame is a taller frame, and past a point a table stops
fitting on screen. --fit-h is a page's measured height in design px;
dividing the viewport's spare height by it turns "how much room is there"
into "how wide may the frame be". clamp() keeps it from ever dropping
below today's 420px on a short laptop.
Pages that scroll by nature — the lobby, the school menu — leave --fit-h at
1, which makes the height term enormous so min() falls through to the width
bound. They scroll either way, so for them bigger is simply better.
-------------------------------------------------------------------------- */
.c-frame { --fit-h: 1; }
@media (min-width: 700px) {
.c-page { padding: 16px 16px 22px; }
.c-frame {
max-width: clamp(420px, min(92vw, calc((100dvh - 38px) * 375 / var(--fit-h))), 680px);
}
}
/* Proportional scaling: 1 --u == 1 design px of the original 375px mockup. */
@supports (width: 1cqw) {
.c-frame { container-type: inline-size; }
.c-frame { --u: 0.26666667cqw; }
}
/* --------------------------------------------------------------------------
LANDSCAPE — on a wide screen, put the table and the controls side by side.
Portrait stacks dealer → felt → controls. That is right on a phone and
wasteful on a monitor: the tall stack runs out of HEIGHT long before the
screen runs out of width, so the casino stays a narrow column no matter how
big the display is. Splitting it moves everything you press or read into a
second column, which roughly halves the height the casino needs — and since
--u is a fraction of the frame's own width, needing less height is exactly
what lets the whole thing grow.
The stage is a FIXED height in design px (room 198 + felt 308 - 2 = 504 for
blackjack, 186 + 318 - 2 = 502 for poker), so the arithmetic is exact:
504 x --split = 292 turns the viewport's spare height into how wide the
frame may be. On a 1440x900 laptop that is a ~1100px-wide casino instead of
a 420px one.
No markup is reordered — grid placement ignores source order, so the same
HTML reads correctly stacked on a phone and split on a desktop.
-------------------------------------------------------------------------- */
@supports (width: 1cqw) and selector(:has(> *)) {
@media (min-width: 1040px) and (min-height: 600px) {
.c-page { padding: 14px 16px 18px; }
.c-frame:has(> .c-stage) {
--split: 0.58; /* the stage's share */
--u: calc(0.26666667cqw * var(--split)); /* ...so the felt still spans it exactly */
display: grid;
/* minmax(0,…) not 1fr: a plain fr track keeps a min-content floor, and the
balance chips are wide enough to push the grid past the frame */
grid-template-columns: calc(var(--split) * 100%) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
max-width: min(96vw, calc((100dvh - 44px) * 375 / 292), 1500px);
}
/* left: the dealer scene and the felt, floor to ceiling */
.c-frame:has(> .c-stage) > .c-stage { grid-column: 1; grid-row: 1 / -1; }
/* right: the chrome stacks from the top, the controls sit centred beside
the felt rather than stranded under the header */
.c-frame:has(> .c-stage) > .bj-topbar,
.c-frame:has(> .c-stage) > .c-balbar,
.c-frame:has(> .c-stage) > .c-statusbar,
.c-frame:has(> .c-stage) > .c-proghdr { grid-column: 2; }
.c-frame:has(> .c-stage) > .c-actions,
.c-frame:has(> .c-stage) > .c-panel { grid-column: 2; grid-row: 3; align-self: center; }
/* Every component in here was authored to span a 375-design-px phone, so
the right column needs its OWN --u — the stage's would overflow it by
the ratio between the two columns. Sized off the same container width,
it lands each block exactly in its track. (Still larger than portrait:
1.23px per unit here against 1.12px at the old 420px width.) */
.c-frame:has(> .c-stage) > .bj-topbar,
.c-frame:has(> .c-stage) > .c-balbar,
.c-frame:has(> .c-stage) > .c-statusbar,
.c-frame:has(> .c-stage) > .c-proghdr,
.c-frame:has(> .c-stage) > .c-actions,
.c-frame:has(> .c-stage) > .c-panel { --u: calc(0.26666667cqw * (1 - var(--split))); }
/* The controls need far less height than the felt, so the right-hand track
is mostly empty. Tinting it makes that read as a control panel beside
the table rather than as dead space, and the hairline gives the felt its
own edge. The gradient stop tracks --split, so the two never drift. */
.c-frame:has(> .c-stage) {
background:
linear-gradient(90deg,
rgba(0,0,0,0) 0 calc(var(--split) * 100%),
var(--surface-panel) calc(var(--split) * 100%) 100%),
var(--surface-frame);
}
.c-frame:has(> .c-stage) > .c-stage { border-right: 2px solid var(--purple); }
.c-frame:has(> .c-stage) > .c-actions,
.c-frame:has(> .c-stage) > .c-panel { padding-left: calc(var(--u) * 14); padding-right: calc(var(--u) * 14); }
/* The strategy card / hand-rankings sheet is a bottom sheet on a phone. It
still covers the whole cabinet here, but its CONTENT is authored 375
design px wide — left to stretch it becomes a 1000px-wide banner with
unreadable line lengths. Capped to the felt's width and centred, it
reads as a card laid on the table. */
.c-frame:has(> .c-stage) .c-sheet {
max-width: calc(var(--u) * 375);
margin-inline: auto;
}
/* overlays still own the whole cabinet */
.c-frame:has(> .c-stage) > .c-crt,
.c-frame:has(> .c-stage) > .c-sheetwrap,
.c-frame:has(> .c-stage) > .c-scrim,
.c-frame:has(> .c-stage) > .pk-overlay { grid-column: 1 / -1; grid-row: 1 / -1; }
}
}
/* CRT scanline overlay — first child of .c-frame, topmost thing in the frame.
The stripe is a physical texture, so it is NOT scaled with --u. */
.c-crt {
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg,
rgba(0,0,0,.13) 0 2px,
transparent 2px 4px);
pointer-events: none;
z-index: 20;
}
/* utilities */
.c-hidden { display: none !important; }
.c-center { text-align: center; }
.c-thinking i { font-style: normal; animation: thinkDots 1.2s infinite; }
.c-thinking i:nth-child(2) { animation-delay: .2s; }
.c-thinking i:nth-child(3) { animation-delay: .4s; }
/* ============================= 3 · HEADERS ============================== */
/* 3.1 games status bar */
.c-statusbar {
position: relative;
z-index: 12;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--u) * 8);
padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 8);
font-size: calc(var(--u) * 14);
font-weight: 700;
}
.c-statusbar__t { color: var(--teal); }
.c-statusbar__c { color: var(--pink); }
.c-statusbar__note { font-size: calc(var(--u) * 10); color: var(--text-muted); font-weight: 400; }
/* 3.2 persistent balance chips (spec: rendered on EVERY casino screen) */
.c-balbar {
position: relative;
z-index: 12;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--u) * 8);
padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 10);
border-bottom: 2px solid rgba(122,92,255,.4);
}
.c-balchip {
display: flex;
align-items: center;
gap: calc(var(--u) * 7);
background: var(--surface-panel);
border: 2.5px solid;
border-radius: calc(var(--u) * 12);
padding: calc(var(--u) * 5) calc(var(--u) * 10);
box-shadow: var(--el-3c);
}
.c-balchip > span:first-child { font-size: calc(var(--u) * 18); }
.c-balchip > span:last-child { font-size: calc(var(--u) * 15); font-weight: 700; }
.c-balchip--t { border-color: var(--teal); color: var(--teal); }
.c-balchip--c { border-color: var(--pink); color: var(--pink); }
.c-balcap {
font-size: calc(var(--u) * 10);
color: var(--text-muted);
text-align: center;
line-height: 1.25;
}
/* 3.3 animated balance readout */
.c-balpill {
display: inline-flex;
align-items: center;
gap: calc(var(--u) * 7);
background: var(--surface-sunken);
border: 2.5px solid var(--gold);
border-radius: calc(var(--u) * 12);
padding: calc(var(--u) * 7) calc(var(--u) * 12);
box-shadow: var(--el-3c);
}
.c-balpill > span:first-child { font-size: calc(var(--u) * 19); }
.c-balpill__amt { font-size: calc(var(--u) * 18); font-weight: 700; color: var(--gold); }
.c-balpill__delta { font-size: calc(var(--u) * 12); font-weight: 700; color: var(--teal); }
.c-countflash { animation: countGlow 1.2s ease-in-out infinite; }
/* 3.4 school progress header + dots */
.c-proghdr {
position: relative;
z-index: 12;
display: flex;
justify-content: space-between;
align-items: center;
gap: calc(var(--u) * 8);
padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 8);
}
.c-proghdr__lbl { font-size: calc(var(--u) * 13); font-weight: 700; color: var(--gold); white-space: nowrap; }
.c-proghdr__skip { font-size: calc(var(--u) * 11); color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.c-dots { display: flex; gap: calc(var(--u) * 4); }
.c-dot { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; flex: none; }
.c-dot--on { background: var(--gold); border: 2px solid var(--ink-black); }
.c-dot--off { background: transparent; border: 2px solid var(--border-muted); }
/* ============================ 4 · MARQUEE =============================== */
.c-marquee {
text-align: center;
padding: calc(var(--u) * 18) calc(var(--u) * 14) calc(var(--u) * 6);
animation: neonFlick 7s linear infinite;
}
.c-marquee__top {
font-size: calc(var(--u) * 13);
letter-spacing: calc(var(--u) * 4);
color: var(--teal);
text-shadow: 0 0 10px rgba(56,249,215,.9);
}
.c-marquee__word {
font-size: calc(var(--u) * 40);
font-weight: 700;
letter-spacing: calc(var(--u) * 6);
color: var(--pink);
line-height: 1;
text-shadow: 0 0 8px rgba(255,110,199,.9), 0 0 26px rgba(255,110,199,.6);
}
.c-marquee__tag {
font-size: calc(var(--u) * 11);
color: var(--text-muted);
margin-top: calc(var(--u) * 4);
}
/* locked lobby: static, dimmer, no tagline (author simply omits .c-marquee__tag) */
.c-marquee--locked { animation: none; }
.c-marquee--locked .c-marquee__word { text-shadow: 0 0 8px rgba(255,110,199,.9); }
/* =========================== 5 · ROOM ZONE ============================== */
.c-room {
--roomH: 198;
position: relative;
height: calc(var(--u) * var(--roomH));
overflow: hidden;
background: var(--grad-room);
}
.c-room--bj { --roomH: 198; }
.c-room--pk { --roomH: 186; }
.c-room--school { --roomH: 170; }
.c-pinstripes {
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg,
rgba(255,213,74,.13) 0 calc(var(--u) * 2),
transparent calc(var(--u) * 2) calc(var(--u) * 30));
}
.c-arch {
position: absolute;
left: 50%;
transform: translateX(-50%);
border-bottom: none;
}
.c-arch--outer {
top: calc(var(--u) * 10);
width: calc(var(--u) * 190);
height: calc(var(--u) * 200);
border: 3px solid rgba(255,213,74,.35);
border-bottom: none;
border-radius: calc(var(--u) * 95) calc(var(--u) * 95) 0 0;
}
.c-arch--inner { /* blackjack only */
top: calc(var(--u) * 26);
width: calc(var(--u) * 150);
height: calc(var(--u) * 200);
border: 2px solid rgba(255,110,199,.3);
border-bottom: none;
border-radius: calc(var(--u) * 75) calc(var(--u) * 75) 0 0;
}
.c-arch--school { /* 180x190, r 90, top 8 */
top: calc(var(--u) * 8);
width: calc(var(--u) * 180);
height: calc(var(--u) * 190);
border: 3px solid rgba(255,213,74,.35);
border-bottom: none;
border-radius: calc(var(--u) * 90) calc(var(--u) * 90) 0 0;
}
.c-room--pk .c-arch--outer { top: calc(var(--u) * 8); }
/* --------------------- 5.1 Goosevelt, the dealer ------------------------
Conflict #15 fix: the ANCHOR owns translateX(-50%), the inner .c-dealer
runs dealerSway, so the sway rotation can never clobber the centering. */
.c-dealer-anchor {
position: absolute;
left: 50%;
bottom: calc(var(--u) * -6);
transform: translateX(-50%);
}
.c-dealer-anchor--pk { left: 26%; } /* poker: dealer sits off to the left */
.c-dealer {
--headSize: 46;
--tuxW: 118; --tuxH: 72;
--tuxR: 30; --tuxR2: 10;
--tuxMt: -8;
--triW: 17; --triH: 30;
--bowW: 16; --bowH: 8;
display: flex;
flex-direction: column;
align-items: center;
animation: dealerSway 5s ease-in-out infinite;
transform-origin: 50% 100%;
}
.c-dealer--bj { --headSize: 46; --tuxW: 118; --tuxH: 72; --tuxR: 30; --tuxR2: 10; --tuxMt: -8; --triW: 17; --triH: 30; --bowW: 16; --bowH: 8; }
.c-dealer--pk { --headSize: 40; --tuxW: 100; --tuxH: 62; --tuxR: 26; --tuxR2: 9; --tuxMt: -7; --triW: 14; --triH: 26; --bowW: 14; --bowH: 7; }
.c-dealer--school { --headSize: 42; --tuxW: 106; --tuxH: 64; --tuxR: 27; --tuxR2: 9; --tuxMt: -7; --triW: 15; --triH: 27; --bowW: 15; --bowH: 7; }
.c-dealer__head {
font-size: calc(var(--u) * var(--headSize));
line-height: 1;
filter: drop-shadow(0 3px 2px rgba(0,0,0,.5));
}
.c-dealer__tux {
position: relative;
width: calc(var(--u) * var(--tuxW));
height: calc(var(--u) * var(--tuxH));
margin-top: calc(var(--u) * var(--tuxMt));
background: var(--grad-tuxedo);
border: 3px solid var(--ink-black);
border-radius: calc(var(--u) * var(--tuxR)) calc(var(--u) * var(--tuxR))
calc(var(--u) * var(--tuxR2)) calc(var(--u) * var(--tuxR2));
}
.c-dealer__shirt {
position: absolute;
left: 50%; top: 0;
transform: translateX(-50%);
width: 0; height: 0;
border-left: calc(var(--u) * var(--triW)) solid transparent;
border-right: calc(var(--u) * var(--triW)) solid transparent;
border-top: calc(var(--u) * var(--triH)) solid var(--cream);
}
.c-dealer__bow {
position: absolute;
left: 50%; top: calc(var(--u) * 2);
transform: translateX(-50%);
width: calc(var(--u) * var(--bowW));
height: calc(var(--u) * var(--bowH));
background: var(--pink);
border: 2px solid var(--ink-black);
border-radius: 3px;
}
.c-dealer__wing { /* blackjack only */
position: absolute;
top: calc(var(--u) * 16);
width: calc(var(--u) * 22);
height: calc(var(--u) * 44);
background: #1E1730;
border: 2.5px solid var(--ink-black);
border-radius: calc(var(--u) * 11);
}
.c-dealer__wing--l { left: calc(var(--u) * -14); transform: rotate(18deg); }
.c-dealer__wing--r { right: calc(var(--u) * -14); transform: rotate(-18deg); }
.c-dealer__cap { /* school only */
position: absolute;
right: calc(var(--u) * -30);
top: calc(var(--u) * -6);
font-size: calc(var(--u) * 22);
transform: rotate(20deg);
}
/* bare emoji goose — lobby greeter / reference sheet */
.c-goose {
font-size: calc(var(--u) * 40);
line-height: 1;
filter: drop-shadow(0 3px 2px rgba(0,0,0,.5));
}
.c-goose--bob { animation: bobY 3.5s ease-in-out infinite; }
/* poker opponent, standing across the felt */
.c-opp {
position: absolute;
left: 70%;
bottom: calc(var(--u) * -4);
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 5;
}
.c-opp__av { font-size: calc(var(--u) * 40); line-height: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.c-oppplate {
display: flex;
align-items: center;
gap: calc(var(--u) * 5);
background: rgba(0,0,0,.6);
border: 2px solid var(--pink);
border-radius: calc(var(--u) * 10);
padding: calc(var(--u) * 3) calc(var(--u) * 8);
margin-top: calc(var(--u) * 2);
}
.c-oppplate__nm { font-size: calc(var(--u) * 11); font-weight: 700; color: var(--pink); }
.c-oppplate__sub { font-size: calc(var(--u) * 10); color: var(--text-secondary); }
/* ===================== 6 · DIALOGUE · BANNERS · TIMER =================== */
.c-bubble {
position: relative;
background: var(--cream);
border: 3px solid var(--ink-black);
border-radius: calc(var(--u) * 12);
padding: calc(var(--u) * 6) calc(var(--u) * 9);
color: var(--text-on-cream);
font-size: calc(var(--u) * 12);
line-height: 1.3;
box-shadow: var(--el-3c);
z-index: 6;
}
.c-bubble b { font-weight: 700; }
.c-bubble--bj {
position: absolute;
right: calc(var(--u) * 8);
top: calc(var(--u) * 12);
max-width: calc(var(--u) * 168);
}
.c-bubble--pk {
position: absolute;
left: calc(var(--u) * 8);
top: calc(var(--u) * 10);
max-width: calc(var(--u) * 170);
}
.c-bubble--school {
position: absolute;
left: calc(var(--u) * 8);
top: calc(var(--u) * 10);
max-width: calc(var(--u) * 186);
padding: calc(var(--u) * 7) calc(var(--u) * 10);
font-size: calc(var(--u) * 12.5);
line-height: 1.35;
}
.c-bubble--lg { /* lobby / reference sheet */
border-radius: calc(var(--u) * 14);
padding: calc(var(--u) * 8) calc(var(--u) * 12);
font-size: calc(var(--u) * 14);
line-height: 1.35;
}
.c-bubble__tail { position: absolute; color: var(--ink-black); font-size: calc(var(--u) * 11); }
.c-bubble__tail--left { left: calc(var(--u) * -9); bottom: calc(var(--u) * 8); } /* ◀ goose beside */
.c-bubble__tail--down { left: calc(var(--u) * 14); bottom: calc(var(--u) * -11); } /* ▼ goose below */
.c-bubble--lg .c-bubble__tail--left { bottom: calc(var(--u) * 10); font-size: calc(var(--u) * 12); }
.c-bubble--school .c-bubble__tail--down { left: calc(var(--u) * 16); }
/* lobby greeter: goose beside the bubble, bottoms aligned to his feet */
.c-greeter {
display: flex;
align-items: flex-end;
gap: calc(var(--u) * 10);
padding: 0 calc(var(--u) * 14) calc(var(--u) * 6);
}
/* letterbox banner */
.c-banner-row {
position: absolute;
left: 0; right: 0;
top: calc(var(--u) * 108);
display: flex;
justify-content: center;
z-index: 8;
}
.c-banner {
background: rgba(0,0,0,.82);
border-top: 2px solid rgba(255,255,255,.25);
border-bottom: 2px solid rgba(255,255,255,.25);
color: #fff;
font-size: calc(var(--u) * 17);
font-weight: 700;
letter-spacing: calc(var(--u) * 3);
padding: calc(var(--u) * 8) calc(var(--u) * 26);
/* no border-radius — it is a letterbox */
}
/* turn pill */
.c-turnpill {
--turn: var(--teal);
--turnGlow: rgba(56,249,215,.4);
position: absolute;
left: calc(var(--u) * 10);
top: calc(var(--u) * 12);
display: flex;
align-items: center;
gap: calc(var(--u) * 6);
background: rgba(0,0,0,.6);
border: 2.5px solid var(--turn);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 5) calc(var(--u) * 10);
font-size: calc(var(--u) * 12);
font-weight: 700;
color: var(--turn);
box-shadow: 0 0 12px var(--turnGlow);
z-index: 6;
}
.c-turnpill--right { left: auto; right: calc(var(--u) * 10); } /* poker */
.c-turnpill--pink { --turn: var(--pink); --turnGlow: rgba(255,110,199,.4); }
.c-turnpill__dot {
width: calc(var(--u) * 7);
height: calc(var(--u) * 7);
border-radius: 50%;
background: var(--turn);
animation: pulseDot 1.4s infinite;
}
/* sticky in-table turn banner */
.c-turnbanner {
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--u) * 8);
background: rgba(56,249,215,.14);
border: 2.5px solid var(--teal);
border-radius: calc(var(--u) * 12);
padding: calc(var(--u) * 8) calc(var(--u) * 16);
font-size: calc(var(--u) * 16);
font-weight: 700;
color: var(--teal);
box-shadow: 0 0 14px rgba(56,249,215,.4);
}
.c-turnbanner__dot {
width: calc(var(--u) * 9);
height: calc(var(--u) * 9);
border-radius: 50%;
background: var(--teal);
animation: pulseDot 1.4s ease-in-out infinite;
}
/* timer ring — 30s drain, teal until 10s remain, then pink (conflict #12) */
.c-ringcol { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); }
.c-ring {
--pct: 100%;
--tcol: var(--teal);
position: relative;
width: calc(var(--u) * 52);
height: calc(var(--u) * 52);
border-radius: 50%;
background: conic-gradient(var(--tcol) 0 var(--pct), rgba(255,255,255,.12) var(--pct) 100%);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.c-ring__hub {
width: calc(var(--u) * 38);
height: calc(var(--u) * 38);
border-radius: 50%;
background: var(--surface-panel);
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 14);
font-weight: 700;
color: var(--tcol);
}
.c-ring--warn { --tcol: var(--pink); }
.c-ring--sm { /* poker: orbits the opponent's head */
position: absolute;
right: calc(var(--u) * -34);
top: calc(var(--u) * 2);
width: calc(var(--u) * 34);
height: calc(var(--u) * 34);
--tcol: var(--pink);
}
.c-ring--sm .c-ring__hub {
width: calc(var(--u) * 24);
height: calc(var(--u) * 24);
background: var(--surface-sunken);
font-size: calc(var(--u) * 10);
}
.c-rlabel { font-size: calc(var(--u) * 11); color: var(--text-muted); }
/* =========================== 7 · TABLE ZONE ============================= */
.c-table {
--tableH: 308; --railH: 540; --feltH: 516;
position: relative;
height: calc(var(--u) * var(--tableH));
margin-top: calc(var(--u) * -2);
overflow: hidden;
}
.c-table--bj { --tableH: 308; --railH: 540; --feltH: 516; }
.c-table--pk { --tableH: 318; --railH: 560; --feltH: 536; }
.c-table--school { --tableH: 250; --railH: 520; --feltH: 496; }
.c-table--school-sm { --tableH: 150; --railH: 520; --feltH: 496; }
.c-rail {
position: absolute;
left: calc(var(--u) * -133);
top: 0;
width: calc(var(--u) * 640);
height: calc(var(--u) * var(--railH));
border-radius: 50%;
background: var(--grad-rail);
}
.c-felt {
position: absolute;
left: calc(var(--u) * -121);
top: calc(var(--u) * 11);
width: calc(var(--u) * 616);
height: calc(var(--u) * var(--feltH));
border-radius: 50%;
background: var(--grad-felt);
box-shadow: var(--felt-inner);
}
/* SVG arc print. Author the viewBox as "0 0 375 " (conflict #16:
bind the height to the CURRENT table height, do not hard-code 250). */
.c-print { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-print text { font-family: var(--font); }
/* blackjack props */
.c-foldedwings {
position: absolute;
left: 50%; top: calc(var(--u) * 14);
transform: translateX(-50%);
width: calc(var(--u) * 56);
height: calc(var(--u) * 22);
background: #F5EFE0;
border: 2.5px solid var(--ink-black);
border-radius: 50%;
z-index: 4;
}
.c-shoe {
position: absolute;
right: calc(var(--u) * 16);
top: calc(var(--u) * 30);
width: calc(var(--u) * 64);
height: calc(var(--u) * 34);
background: var(--grad-shoe);
border: 2.5px solid var(--ink-black);
border-radius: calc(var(--u) * 6);
transform: rotate(-14deg) skewX(-8deg);
box-shadow: var(--el-3a);
z-index: 4;
}
.c-shoe__topcard {
position: absolute;
left: calc(var(--u) * 5); top: calc(var(--u) * 5);
width: calc(var(--u) * 20);
height: calc(var(--u) * 22);
background: var(--purple);
border: 2px solid var(--ink-black);
border-radius: 3px;
}
.c-bell {
position: absolute;
left: calc(var(--u) * 20);
top: calc(var(--u) * 36);
font-size: calc(var(--u) * 22);
transform: rotate(-8deg);
z-index: 4;
}
/* generic felt slot: a full-width, centered, absolutely placed row.
…
*/
.c-fslot {
--top: 0; --gap: 6;
position: absolute;
left: 0; right: 0;
top: calc(var(--u) * var(--top));
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--u) * var(--gap));
z-index: 5;
}
.c-slot--bj-dealer { --top: 52; --gap: 6; }
.c-slot--bj-seats { --top: 118; --gap: 26; align-items: flex-start; }
.c-slot--pk-opp { --top: 16; --gap: 5; }
.c-slot--pk-comm { --top: 74; --gap: 5; }
.c-slot--pk-player { --top: 190; --gap: 5; align-items: flex-start; }
.c-slot--sc-dealer { --top: 44; --gap: 6; }
.c-slot--sc-player { --top: 124; --gap: 6; }
/* ============================== 8 · CARDS =============================== */
.c-card {
--cw: 40; --ch: 56; --cbw: 2.5; --cr: 6;
--ccr: 11; --ccs: 9; --ct: 2; --cl: 4;
--cpip: 16; --cpt: 6;
--cbg: var(--cream);
--cbc: var(--ink-black);
--cink: var(--ink-black);
--cs: var(--el-3b);
position: relative;
flex: none;
width: calc(var(--u) * var(--cw));
height: calc(var(--u) * var(--ch));
background: var(--cbg);
border: calc(var(--u) * var(--cbw)) solid var(--cbc);
border-radius: calc(var(--u) * var(--cr));
box-shadow: var(--cs);
}
.c-card__corner {
position: absolute;
top: calc(var(--u) * var(--ct));
left: calc(var(--u) * var(--cl));
font-size: calc(var(--u) * var(--ccr));
font-weight: 700;
line-height: 1;
color: var(--cink);
}
.c-card__corner span { font-size: calc(var(--u) * var(--ccs)); }
.c-card__pip {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding-top: calc(var(--u) * var(--cpt));
font-size: calc(var(--u) * var(--cpip));
color: var(--cink);
}
.c-card__ring { display: none; }
/* size tiers — size communicates depth (far → near) */
.c-card--mini { --cw:30; --ch:42; --cbw:2; --cr:5; --cs:none; --cpip:13; --cpt:0; }
.c-card--xs { --cw:32; --ch:44; --cbw:2; --cr:5; --cs:var(--el-3b); --ccr:10; --ccs:8; --ct:1; --cl:3; --cpip:13; --cpt:4; }
.c-card--s { --cw:34; --ch:48; --cbw:2; --cr:6; --cs:var(--el-2); --cpip:16; --cpt:0; }
.c-card--sm { --cw:38; --ch:53; --cbw:2.5; --cr:6; --cs:var(--el-3b); --ccr:11; --ccs:9; --ct:2; --cl:4; --cpip:16; --cpt:6; }
.c-card--md { --cw:40; --ch:56; --cbw:2.5; --cr:6; --cs:var(--el-3b); --ccr:11; --ccs:9; --ct:2; --cl:4; --cpip:16; --cpt:6; }
.c-card--dlr { --cw:42; --ch:58; --cbw:2.5; --cr:7; --cs:none; --ccr:12; --ccs:10; --ct:2; --cl:4; --cpip:18; --cpt:6; }
.c-card--lg { --cw:50; --ch:70; --cbw:3; --cr:8; --cs:var(--el-4a); --ccr:14; --ccs:11; --ct:3; --cl:5; --cpip:21; --cpt:8; }
.c-card--xl { --cw:56; --ch:78; --cbw:3; --cr:8; --cs:var(--el-4a); --ccr:15; --ccs:12; --ct:3; --cl:5; --cpip:24; --cpt:10; }
.c-card--xxl { --cw:58; --ch:82; --cbw:3; --cr:9; --cs:var(--el-4b); --ccr:16; --ccs:13; --ct:4; --cl:6; --cpip:26; --cpt:10; }
/* variants */
.c-card--red { --cink: var(--red-suit); }
.c-card--back { --cbg: var(--purple); --cink: #fff; }
.c-card--slot {
--cbg: rgba(122,92,255,.22);
--cbc: rgba(255,255,255,.3);
--cink: transparent;
--cs: none;
border-style: dashed;
}
.c-card--glow { --cbc: var(--gold); animation: flipGlow 1.2s infinite; }
.c-card--midflip {
--cbc: var(--gold);
--cink: var(--gold);
background: var(--grad-midflip);
box-shadow: 0 0 16px rgba(255,213,74,.6);
animation: flipGlow 1s infinite;
}
/* conflict #7: the dashed inset ring is legible only at ≥58px card width */
.c-card--back.c-card--xxl .c-card__ring {
display: block;
position: absolute;
inset: calc(var(--u) * 5) calc(var(--u) * 2);
border: 2px dashed rgba(255,255,255,.5);
border-radius: calc(var(--u) * 6);
}
/* 600ms hole-card / street reveal */
.c-card--flipping { animation: cardFlip3d .6s ease-in-out; transform-style: preserve-3d; }
.c-cardrow { --gap: 6; display: flex; gap: calc(var(--u) * var(--gap)); }
/* ================= 9 · TOTALS · SEATS · CHIPS · SIT HERE ================ */
.c-total {
--accent: var(--teal);
align-self: center;
background: var(--ink-black);
border: 2px solid var(--accent);
border-radius: calc(var(--u) * 8);
padding: calc(var(--u) * 2) calc(var(--u) * 7);
font-size: calc(var(--u) * 13);
font-weight: 700;
color: var(--accent);
white-space: nowrap;
}
.c-total--dealer {
--accent: var(--gold);
border-radius: calc(var(--u) * 9);
padding: calc(var(--u) * 3) calc(var(--u) * 8);
}
.c-total--school {
border-radius: calc(var(--u) * 9);
padding: calc(var(--u) * 3) calc(var(--u) * 9);
font-size: calc(var(--u) * 14);
}
.c-seatsrow {
position: absolute;
left: 0; right: 0;
top: calc(var(--u) * 118);
display: flex;
justify-content: center;
align-items: flex-start;
gap: calc(var(--u) * 26);
z-index: 5;
}
.c-seat {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--u) * 5);
}
.c-seatcards { display: flex; gap: calc(var(--u) * 4); }
.c-plate {
--accent: var(--teal);
--glow: none;
display: flex;
align-items: center;
gap: calc(var(--u) * 6);
background: rgba(0,0,0,.55);
border: 2.5px solid var(--accent);
border-radius: calc(var(--u) * 12);
padding: calc(var(--u) * 4) calc(var(--u) * 10);
box-shadow: var(--glow);
}
.c-plate__av { font-size: calc(var(--u) * 17); }
.c-plate__txt { line-height: 1.15; }
.c-plate__nm { font-size: calc(var(--u) * 12); font-weight: 700; color: var(--accent); }
.c-plate__sub { font-size: calc(var(--u) * 10); color: var(--text-secondary); }
/* seat states */
.c-plate--tina { --accent: var(--teal); --glow: 0 0 12px rgba(56,249,215,.5); }
.c-plate--chris { --accent: var(--pink); --glow: none; }
.c-plate--active{ --glow: 0 0 12px rgba(255,110,199,.55); }
.c-plate--dim { --glow: none; opacity: .75; }
.c-plate--ghost { --accent: var(--border-muted); --glow: none; opacity: .6; border-style: dashed; }
.c-plate--bust { --accent: var(--red-suit); --glow: none; }
/* poker player plate (teal, always glowing; sub = live hand strength) */
.c-pkplate {
display: flex;
align-items: center;
gap: calc(var(--u) * 6);
background: rgba(0,0,0,.55);
border: 2.5px solid var(--teal);
border-radius: calc(var(--u) * 12);
padding: calc(var(--u) * 4) calc(var(--u) * 10);
box-shadow: 0 0 12px rgba(56,249,215,.4);
}
/* big reference plate */
.c-seatplate {
display: flex;
align-items: center;
gap: calc(var(--u) * 10);
background: var(--surface-sunken);
border: 2.5px solid var(--teal);
border-radius: calc(var(--u) * 14);
padding: calc(var(--u) * 8) calc(var(--u) * 12);
box-shadow: var(--el-3c);
}
.c-seatplate .c-plate__av { font-size: calc(var(--u) * 26); }
.c-seatplate .c-plate__nm { font-size: calc(var(--u) * 15); }
.c-seatplate .c-plate__sub { font-size: calc(var(--u) * 12); color: var(--text-muted); }
.c-seatplate .c-plate__sub b { color: var(--gold); }
/* bet chip riding on a seat plate */
.c-betchip {
position: relative;
flex: none;
width: calc(var(--u) * 30);
height: calc(var(--u) * 30);
border-radius: 50%;
background: var(--gold);
border: 2px solid var(--ink-black);
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 9);
font-weight: 700;
color: var(--gold-ink);
animation: chipFly 3s infinite; /* betting tumble */
}
.c-betchip__ring {
position: absolute;
inset: calc(var(--u) * 3);
border: 1.5px dashed rgba(255,255,255,.7);
border-radius: 50%;
}
.c-betchip--payout { animation: chipFly 1.6s infinite; } /* faster = payout urgency */
/* SIT HERE ghost seats — four hard positions tracing the near felt edge */
.c-sit {
position: absolute;
width: calc(var(--u) * 58);
height: calc(var(--u) * 58);
border-radius: 50%;
background: rgba(255,255,255,.14);
border: 2.5px solid rgba(255,255,255,.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 5;
cursor: pointer;
animation: sitPulse 2.4s infinite;
}
.c-sit > span:first-child { font-size: calc(var(--u) * 16); }
.c-sit__lbl {
font-size: calc(var(--u) * 8);
font-weight: 700;
color: #fff;
letter-spacing: calc(var(--u) * 1);
}
.c-sit--1 { left: calc(var(--u) * 16); top: calc(var(--u) * 196); animation-delay: 0s; }
.c-sit--2 { left: calc(var(--u) * 104); top: calc(var(--u) * 238); animation-delay: .4s; }
.c-sit--3 { left: calc(var(--u) * 213); top: calc(var(--u) * 238); animation-delay: .8s; }
.c-sit--4 { left: calc(var(--u) * 301); top: calc(var(--u) * 196); animation-delay: 1.2s; }
/* chip denominations + picker */
.c-picker {
display: flex;
justify-content: center;
gap: calc(var(--u) * 10);
margin-bottom: calc(var(--u) * 10);
}
.c-chip {
--cbg: var(--gold);
--cink: var(--gold-ink);
position: relative;
flex: none;
width: calc(var(--u) * 50);
height: calc(var(--u) * 50);
min-width: 44px;
min-height: 44px;
border-radius: 50%;
background: var(--cbg);
border: 3px solid var(--ink-black);
box-shadow: var(--el-4b);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
}
.c-chip__ring {
position: absolute;
inset: calc(var(--u) * 4);
border: 2px dashed rgba(255,255,255,.75);
border-radius: 50%;
}
.c-chip__val { font-size: calc(var(--u) * 12); font-weight: 700; color: var(--cink); }
.c-chip--5 { --cbg: #FF6EC7; --cink: #4A0B33; }
.c-chip--25 { --cbg: #38F9D7; --cink: #063A31; }
.c-chip--100 { --cbg: #FFD54A; --cink: #3A2410; }
.c-chip--500 { --cbg: #7A5CFF; --cink: #FFFFFF; }
.c-chip--ref { width: calc(var(--u) * 56); height: calc(var(--u) * 56); }
.c-chip--ref .c-chip__ring { inset: calc(var(--u) * 5); }
.c-chip--ref .c-chip__val { font-size: calc(var(--u) * 15); }
.c-chipname { font-size: calc(var(--u) * 12); color: var(--text-muted); text-align: center; margin-top: calc(var(--u) * 6); }
/* chip stack (win payout). Discs carry no dashed ring and no shadow — deliberate. */
.c-stackcol { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.c-stack { position: relative; width: calc(var(--u) * 56); height: calc(var(--u) * 56); }
.c-stack > div {
position: absolute;
left: 0;
width: calc(var(--u) * 56);
height: calc(var(--u) * 56);
border-radius: 50%;
border: 3px solid var(--ink-black);
}
.c-stack__d3 { top: calc(var(--u) * 8); background: var(--teal); }
.c-stack__d2 { top: calc(var(--u) * 4); background: var(--gold); }
.c-stack__d1 {
top: 0;
background: var(--pink);
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 13);
font-weight: 700;
color: var(--pink-ink);
animation: chipFly 2.6s ease-in-out infinite;
}
/* free-flying chip, for scripted arcs (picker → bet spot, pot → winner) */
.c-flychip {
position: absolute;
width: calc(var(--u) * 30);
height: calc(var(--u) * 30);
border-radius: 50%;
background: var(--gold);
border: 2px solid var(--ink-black);
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 9);
font-weight: 700;
color: var(--gold-ink);
pointer-events: none;
z-index: 7;
}
/* ==================== 10 · POKER TABLE FURNITURE ======================= */
.c-potwrap {
position: absolute;
left: 0; right: 0;
top: calc(var(--u) * 142);
display: flex;
justify-content: center;
z-index: 5;
}
.c-potwrap--payout { top: calc(var(--u) * 168); animation: potPulse 1s infinite; }
.c-pot {
display: inline-flex;
align-items: center;
gap: calc(var(--u) * 7);
background: var(--ink-black);
border: 2.5px solid var(--gold);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 5) calc(var(--u) * 14);
animation: potPulse 2.4s infinite;
}
.c-pot span { font-size: calc(var(--u) * 14); font-weight: 700; color: var(--gold); }
/* showdown explainer — deliberately overlaps the player row (z 6 over z 5) */
.c-explain {
position: absolute;
left: calc(var(--u) * 16);
right: calc(var(--u) * 16);
top: calc(var(--u) * 180);
background: rgba(0,0,0,.72);
border: 2.5px solid var(--teal);
border-radius: calc(var(--u) * 13);
padding: calc(var(--u) * 8) calc(var(--u) * 12);
z-index: 6;
}
.c-explain__t { font-size: calc(var(--u) * 13); font-weight: 700; color: var(--teal); }
.c-explain__b { font-size: calc(var(--u) * 11); color: var(--text-secondary); line-height: 1.35; margin-top: calc(var(--u) * 2); }
/* blind chip + dealer button badges (poker state A only) */
.c-badges { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.c-blindchip {
width: calc(var(--u) * 22);
height: calc(var(--u) * 22);
border-radius: 50%;
background: var(--pink);
border: 2px solid var(--ink-black);
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 8);
font-weight: 700;
color: var(--pink-ink);
}
.c-dbutton {
width: calc(var(--u) * 22);
height: calc(var(--u) * 22);
border-radius: 50%;
background: #fff;
border: 2px solid var(--ink-black);
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 10);
font-weight: 700;
color: var(--ink-black);
}
/* ======================== 11 · FEEDBACK LAYER ========================== */
/* confetti particles (z 7). Any win; poker only for pots over $200. */
.c-cf {
position: absolute;
z-index: 7;
pointer-events: none;
animation-name: confettiFall;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
}
.c-cf--a { top: calc(var(--u) * 30); left: calc(var(--u) * 44); font-size: calc(var(--u) * 16); animation-duration: 1.7s; }
.c-cf--b { top: calc(var(--u) * 20); right: calc(var(--u) * 56); font-size: calc(var(--u) * 14); animation-duration: 1.4s; animation-delay: .4s; }
.c-cf--c { top: calc(var(--u) * 44); left: calc(var(--u) * 180); font-size: calc(var(--u) * 15); animation-duration: 2s; animation-delay: .2s; }
/* school graduation variant */
.c-cf--ga { top: calc(var(--u) * 20); left: calc(var(--u) * 40); font-size: calc(var(--u) * 17); animation-duration: 1.6s; }
.c-cf--gb { top: calc(var(--u) * 14); right: calc(var(--u) * 52); font-size: calc(var(--u) * 15); animation-duration: 1.3s; animation-delay: .4s; }
.c-cf--gc { top: calc(var(--u) * 30); left: calc(var(--u) * 178); font-size: calc(var(--u) * 16); animation-duration: 1.9s; animation-delay: .2s; }
/* one-shot burst, used by Casino.confetti() */
.c-cf--burst { animation-iteration-count: 1; animation-fill-mode: forwards; }
.c-confzone {
position: relative;
width: calc(var(--u) * 120);
height: calc(var(--u) * 64);
background: var(--surface-sunken);
border: 2.5px dashed var(--border-muted);
border-radius: calc(var(--u) * 13);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 13);
color: var(--text-muted);
}
/* toasts — slide in from the top of the viewport, auto-dismiss at 3.5s */
.c-toasts {
position: fixed;
left: 0; right: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: calc(10px + env(safe-area-inset-top)) 12px 0;
z-index: 999;
pointer-events: none;
}
.c-toast {
display: flex;
align-items: center;
gap: 10px;
max-width: 380px;
background: var(--surface-sunken);
border: 2.5px solid var(--teal);
border-radius: 13px;
padding: 10px 14px;
box-shadow: var(--el-4b);
animation: toastIn .28s ease-out;
pointer-events: auto;
}
.c-toast--out { animation: toastOut .28s ease-in forwards; }
.c-toast--good { border-color: var(--teal); }
.c-toast--bad { border-color: var(--pink); }
.c-toast--info { border-color: var(--gold); }
.c-toast__emo { font-size: 20px; flex: none; }
.c-toast__msg { font-size: 14px; font-weight: 600; color: var(--text); }
/* result card / banner */
.c-result {
--resultBg: var(--grad-teal);
--resultInk: var(--teal-ink);
text-align: center;
background: var(--resultBg);
border: 3px solid var(--ink-black);
border-radius: calc(var(--u) * 13);
padding: calc(var(--u) * 9);
margin-bottom: calc(var(--u) * 10);
box-shadow: var(--el-4b);
}
.c-result__main { font-size: calc(var(--u) * 19); font-weight: 700; color: var(--resultInk); }
.c-result__sub { font-size: calc(var(--u) * 11); color: var(--resultInk); opacity: .8; }
.c-result--win { --resultBg: var(--grad-teal); --resultInk: var(--teal-ink); }
.c-result--gold { --resultBg: var(--grad-gold); --resultInk: var(--gold-ink); } /* 🃏 BLACKJACK! */
.c-result--push { --resultBg: linear-gradient(#8E7FB8,#6B5A8E); --resultInk: #1A1030; }
.c-result--lose { --resultBg: linear-gradient(#E2453A,#A8281F); --resultInk: #2A0808; }
/* ==================== 12 · ACTION AREA + CONTROLS ====================== */
.c-actions,
.c-panel {
position: relative;
z-index: 12;
background: var(--grad-action);
border-top: 3px solid rgba(122,92,255,.5);
padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 16);
}
.c-btnrow { display: flex; gap: calc(var(--u) * 9); }
.c-btnrow--tight { gap: calc(var(--u) * 8); }
.c-btnrow--wide { gap: calc(var(--u) * 10); }
.c-btnrow--col { flex-direction: column; gap: calc(var(--u) * 10); }
.c-btnrow--4 > * { flex: 1; }
.c-f1 { flex: 1; }
.c-f2 { flex: 2; }
.c-f14 { flex: 1.4; }
.c-btn {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-ui);
font-weight: 700;
font-size: calc(var(--u) * 17);
padding: calc(var(--u) * 13) calc(var(--u) * 4);
min-height: 44px; /* hard floor — never smaller than a thumb */
border: 3px solid var(--ink-black);
border-radius: calc(var(--u) * 13);
box-shadow: var(--el-4b);
cursor: pointer;
user-select: none;
transition: filter .12s ease, transform .12s ease;
}
.c-btn--md { font-size: calc(var(--u) * 16); padding: calc(var(--u) * 12); }
.c-btn--sm { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 12) calc(var(--u) * 4); }
.c-btn--wide { font-size: calc(var(--u) * 17); padding: calc(var(--u) * 12) calc(var(--u) * 22); }
.c-btn--cta { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 11) calc(var(--u) * 16); }
.c-btn--teal { background: var(--grad-teal); color: var(--teal-ink); }
.c-btn--gold { background: var(--grad-gold); color: var(--gold-ink); }
.c-btn--pink { background: var(--grad-pink); color: var(--pink-ink); } /* FOLD / irreversible only */
/* secondary but LIVE — quiet, no shadow, lilac ink */
.c-btn--ghost {
background: var(--surface-disabled);
color: var(--text-lilac);
border: 3px solid var(--border-disabled);
box-shadow: none;
}
/* disabled — flat: no shadow, no gradient, no glow, emoji stripped by the author */
.c-btn--off {
background: var(--surface-disabled);
color: var(--text-disabled);
border: 3px solid var(--border-disabled);
box-shadow: none;
cursor: not-allowed;
}
@media (hover: hover) {
.c-btn:not(.c-btn--off):hover,
.c-chunky:hover { filter: brightness(1.06); transform: translateY(-2px); }
}
.c-btn:not(.c-btn--off):not(.c-btn--ghost):active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.45); }
.c-btn--off:active { transform: none; }
.c-note {
font-size: calc(var(--u) * 12);
color: var(--text-muted);
line-height: 1.5;
text-align: center;
margin-top: calc(var(--u) * 10);
}
/* teaching asides — dashed always means "we are explaining something" */
.c-hint {
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--u) * 8);
background: rgba(255,213,74,.1);
border: 2px dashed var(--gold);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 6) calc(var(--u) * 10);
font-size: calc(var(--u) * 12);
color: var(--text-gold-body);
margin-top: calc(var(--u) * 9);
line-height: 1.35;
}
.c-hint__toggle {
flex: none;
background: var(--gold);
color: var(--gold-ink);
font-size: calc(var(--u) * 10);
font-weight: 700;
padding: calc(var(--u) * 2) calc(var(--u) * 7);
border-radius: calc(var(--u) * 7);
border: 1.5px solid var(--ink-black);
cursor: pointer;
}
.c-notestrip {
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--u) * 8);
background: rgba(255,213,74,.1);
border: 2px dashed var(--gold);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 6) calc(var(--u) * 10);
font-size: calc(var(--u) * 12);
color: var(--text-gold-body);
line-height: 1.35;
margin-top: calc(var(--u) * 9);
}
/* ⓘ chip — one-line explainer the FIRST time a jargon word appears. Once. */
.c-jargon {
display: flex;
align-items: center;
gap: calc(var(--u) * 8);
background: rgba(255,213,74,.1);
border: 2px dashed var(--gold);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 7) calc(var(--u) * 11);
font-size: calc(var(--u) * 13);
color: var(--text-gold-body);
max-width: calc(var(--u) * 330);
line-height: 1.35;
}
.c-jargon__icon { font-size: calc(var(--u) * 15); flex: none; }
/* bet slider + presets (poker) */
.c-sliderrow {
display: flex;
align-items: center;
gap: calc(var(--u) * 10);
margin-bottom: calc(var(--u) * 8);
margin-top: calc(var(--u) * 8);
}
.c-track {
flex: 1;
position: relative;
height: calc(var(--u) * 14);
background: var(--ink-black);
border: 2px solid var(--surface-disabled);
border-radius: calc(var(--u) * 8);
}
.c-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 34%;
background: var(--grad-slider);
border-radius: calc(var(--u) * 6);
}
.c-thumb {
position: absolute;
left: 34%;
top: 50%;
transform: translate(-50%,-50%);
width: calc(var(--u) * 28);
height: calc(var(--u) * 28);
min-width: 28px;
min-height: 28px;
border-radius: 50%;
background: var(--gold);
border: 3px solid var(--ink-black);
box-shadow: var(--el-3c);
cursor: grab;
}
.c-thumb:active { cursor: grabbing; }
.c-val {
font-size: calc(var(--u) * 15);
font-weight: 700;
color: var(--gold);
min-width: calc(var(--u) * 44);
text-align: right;
}
.c-presets { display: flex; gap: calc(var(--u) * 7); }
.c-presets__b {
flex: 1;
text-align: center;
background: var(--surface-panel);
border: 2px solid var(--border-muted);
border-radius: calc(var(--u) * 10);
padding: calc(var(--u) * 7) calc(var(--u) * 2);
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 12);
font-weight: 700;
color: var(--text-lilac);
cursor: pointer;
}
.c-presets__b--allin { border-color: var(--pink); color: var(--pink); }
/* ====================== 13 · POKER CHEAT SHEET ========================= */
/* handle — present on EVERY poker state, unconditional */
.c-cheathandle { display: flex; justify-content: center; margin-top: calc(var(--u) * 10); }
.c-cheathandle__b {
display: flex;
align-items: center;
gap: calc(var(--u) * 7);
background: var(--surface-panel);
border: 2.5px solid var(--purple);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 6) calc(var(--u) * 14);
min-height: 44px;
font-size: calc(var(--u) * 12);
font-weight: 700;
color: var(--text-lilac);
cursor: pointer;
box-shadow: var(--el-3c);
}
.c-cheathandle__sub { font-size: calc(var(--u) * 10); color: var(--text-muted); font-weight: 400; }
.c-sheetwrap {
position: absolute;
inset: 0;
z-index: 8;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.c-sheetscrim { position: absolute; inset: 0; background: rgba(10,3,26,.5); }
.c-sheet {
position: relative;
background: var(--surface-panel);
border-top: 4px solid var(--purple);
border-radius: calc(var(--u) * 22) calc(var(--u) * 22) 0 0;
padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 18);
animation: sheetUp .3s ease-out;
max-height: 100%;
overflow-y: auto;
}
.c-drag {
width: calc(var(--u) * 44);
height: calc(var(--u) * 5);
border-radius: 3px;
background: var(--border-muted);
margin: 0 auto calc(var(--u) * 8);
cursor: grab;
}
.c-sheethdr {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: calc(var(--u) * 10);
}
.c-sheethdr__l { font-size: calc(var(--u) * 18); font-weight: 700; color: var(--gold); }
.c-sheethdr__r { font-size: calc(var(--u) * 11); color: var(--text-muted); }
.c-rows { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.c-rrow {
--rbg: var(--surface-sunken);
--rbd: var(--purple);
--rink: var(--text);
display: flex;
align-items: center;
gap: calc(var(--u) * 10);
background: var(--rbg);
border: 2.5px solid var(--rbd);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 6) calc(var(--u) * 10);
}
.c-rrow--gold { --rbg: rgba(255,213,74,.14); --rbd: var(--gold); --rink: var(--gold); }
.c-rrow--teal { --rbd: var(--teal); --rink: var(--teal); }
.c-rrow--purple { --rbd: var(--purple); --rink: var(--text); }
.c-rrow--muted { --rbd: var(--border-muted); --rink: var(--text-muted); }
.c-rrow__n { font-size: calc(var(--u) * 12); font-weight: 700; color: var(--text-muted); min-width: calc(var(--u) * 18); }
.c-rrow__ex { font-size: calc(var(--u) * 15); letter-spacing: calc(var(--u) * 1); min-width: calc(var(--u) * 104); }
.c-rrow__txt { flex: 1; }
.c-rrow__nm { font-size: calc(var(--u) * 13); font-weight: 700; color: var(--rink); }
.c-rrow__hint { font-size: calc(var(--u) * 10); color: var(--text-lilac); }
/* the table behind the sheet, dimmed to 40% */
.c-dimstub {
height: calc(var(--u) * 120);
background: var(--grad-room);
opacity: .4;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 13);
color: var(--text-muted);
}
/* ========================= 14 · CASINO SCHOOL ========================== */
.c-courses { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.c-course {
--track: var(--teal);
background: var(--surface-sunken);
border: 3px solid var(--track);
border-radius: calc(var(--u) * 14);
padding: calc(var(--u) * 11) calc(var(--u) * 13);
box-shadow: var(--el-4a);
cursor: pointer;
}
.c-course--bj { --track: var(--teal); }
.c-course--pk { --track: var(--pink); }
.c-course__row { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 8); }
.c-course__t { font-size: calc(var(--u) * 17); font-weight: 700; color: var(--track); }
.c-course__meta { font-size: calc(var(--u) * 11); color: var(--text-muted); }
.c-course__path { font-size: calc(var(--u) * 11.5); color: var(--text-lilac); line-height: 1.5; margin-top: calc(var(--u) * 4); }
.c-listtitle {
--track: var(--teal);
font-size: calc(var(--u) * 14);
font-weight: 700;
color: var(--track);
margin-bottom: calc(var(--u) * 8);
}
.c-listtitle--bj { --track: var(--teal); }
.c-listtitle--pk { --track: var(--pink); }
.c-listtitle--gold { --track: var(--gold); }
.c-lrow {
display: flex;
align-items: flex-start;
gap: calc(var(--u) * 9);
background: var(--surface-sunken);
border: 2px solid var(--surface-disabled);
border-radius: calc(var(--u) * 10);
padding: calc(var(--u) * 7) calc(var(--u) * 10);
}
.c-lrow + .c-lrow { margin-top: calc(var(--u) * 6); }
.c-lrow__ic { font-size: calc(var(--u) * 15); flex: none; }
.c-lrow__tx { font-size: calc(var(--u) * 12.5); color: var(--text-secondary); line-height: 1.4; }
.c-lrow__tx b { color: var(--text); }
/* coach mark: exactly ONE button enabled, the rest visible but disabled */
.c-coachwrap { display: flex; justify-content: center; margin-bottom: calc(var(--u) * 2); position: relative; z-index: 5; }
.c-coachstack {
display: flex;
flex-direction: column;
align-items: center;
animation: coachArrow 1.2s ease-in-out infinite;
}
.c-coachpill {
background: var(--gold);
color: var(--gold-ink);
font-size: calc(var(--u) * 12);
font-weight: 700;
padding: calc(var(--u) * 4) calc(var(--u) * 12);
border-radius: calc(var(--u) * 9);
border: 2.5px solid var(--ink-black);
}
.c-coacharrow { color: var(--gold); font-size: calc(var(--u) * 16); line-height: .8; }
/* the single enabled coach button */
.c-btn--coach { border-color: var(--gold); animation: coachPulse 1.4s infinite; }
/* quiz — always 3 options, correct is always B, unlimited retry, no fail state */
.c-q { font-size: calc(var(--u) * 14); font-weight: 700; color: var(--text); margin-bottom: calc(var(--u) * 9); }
.c-qopts { display: flex; flex-direction: column; gap: calc(var(--u) * 7); }
.c-qopt {
display: flex;
align-items: center;
gap: calc(var(--u) * 9);
border-radius: calc(var(--u) * 11);
border: 2.5px solid var(--border-muted);
padding: calc(var(--u) * 9) calc(var(--u) * 12);
min-height: 44px;
font-size: calc(var(--u) * 14);
cursor: pointer;
}
.c-qopt--correct { background: rgba(56,249,215,.12); border-color: var(--teal); color: var(--teal); font-weight: 700; }
.c-qopt--neutral { background: var(--surface-sunken); border-color: var(--border-muted); color: var(--text-lilac); font-weight: 400; }
.c-fb {
margin-top: calc(var(--u) * 9);
background: rgba(56,249,215,.1);
border: 2px dashed var(--teal);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 7) calc(var(--u) * 11);
font-size: calc(var(--u) * 12);
color: var(--text-quiz-fb);
line-height: 1.35;
}
/* certificate — sits UNDER the confetti (z 6 vs z 7), by design */
.c-cert {
position: absolute;
left: calc(var(--u) * 28);
right: calc(var(--u) * 28);
top: calc(var(--u) * 36);
background: var(--cream);
border: 4px solid var(--gold);
border-radius: calc(var(--u) * 16);
padding: calc(var(--u) * 16);
text-align: center;
z-index: 6;
box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 0 26px rgba(255,213,74,.5);
animation: gradPop .5s ease-out;
}
.c-cert__cap { font-size: calc(var(--u) * 34); }
.c-cert__h { font-size: calc(var(--u) * 22); font-weight: 700; color: var(--cream-ink); margin-top: calc(var(--u) * 2); }
.c-cert__sub { font-size: calc(var(--u) * 12); color: var(--text-cert-sub); margin-top: calc(var(--u) * 4); line-height: 1.4; }
.c-certchip {
display: inline-flex;
align-items: center;
gap: calc(var(--u) * 7);
margin-top: calc(var(--u) * 10);
background: var(--surface-panel);
border: 2.5px solid var(--gold);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 6) calc(var(--u) * 14);
}
.c-certchip__coin {
width: calc(var(--u) * 28);
height: calc(var(--u) * 28);
border-radius: 50%;
background: var(--gold);
border: 2px solid var(--ink-black);
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--u) * 8);
font-weight: 700;
color: var(--gold-ink);
animation: chipFly 1.8s infinite;
}
.c-certchip__lbl { font-size: calc(var(--u) * 13); font-weight: 700; color: var(--gold); }
/* skip modal — the scrim covers the FELT only, not the header or panel */
.c-scrim {
position: absolute;
inset: 0;
background: rgba(10,3,26,.72);
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--u) * 26);
}
.c-dialog {
background: var(--surface-panel);
border: 4px solid var(--pink);
border-radius: calc(var(--u) * 18);
padding: calc(var(--u) * 18);
text-align: center;
box-shadow: var(--el-8);
}
.c-dialog__g { font-size: calc(var(--u) * 30); }
.c-dialog__t { font-size: calc(var(--u) * 17); font-weight: 700; color: var(--pink); margin-top: calc(var(--u) * 4); }
.c-dialog__b { font-size: calc(var(--u) * 13); color: var(--text-lilac); margin-top: calc(var(--u) * 6); line-height: 1.4; }
.c-dialog__btns { display: flex; flex-direction: column; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 14); }
.c-dialog__p {
background: var(--grad-teal);
color: var(--teal-ink);
font-size: calc(var(--u) * 14);
font-weight: 700;
padding: calc(var(--u) * 11) calc(var(--u) * 18);
min-height: 44px;
border: 3px solid var(--ink-black);
border-radius: calc(var(--u) * 12);
box-shadow: var(--el-4b);
cursor: pointer;
}
.c-dialog__s {
background: var(--surface-disabled);
color: var(--text-lilac);
font-size: calc(var(--u) * 12);
font-weight: 700;
padding: calc(var(--u) * 9) calc(var(--u) * 18);
min-height: 44px;
border: 3px solid var(--border-disabled);
border-radius: calc(var(--u) * 12);
cursor: pointer;
}
/* ============================= 15 · LOBBY ============================== */
.c-tables {
display: flex;
flex-direction: column;
gap: calc(var(--u) * 14);
padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 12);
}
.c-tcard {
--accent: var(--teal);
--bloom: rgba(56,249,215,.3);
position: relative;
background: var(--surface-panel);
border: 3px solid var(--accent);
border-radius: calc(var(--u) * 20);
padding: calc(var(--u) * 14);
box-shadow: var(--el-5), 0 0 12px var(--bloom);
cursor: pointer; /* the whole card is the door */
}
.c-tcard--bj { --accent: var(--teal); --bloom: rgba(56,249,215,.3); }
.c-tcard--pk { --accent: var(--pink); --bloom: rgba(255,110,199,.3); }
.c-tcard--locked { opacity: .45; filter: grayscale(.6); box-shadow: none; cursor: default; }
.c-tcard__hdr { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); }
.c-tcard__t { font-size: calc(var(--u) * 21); font-weight: 700; color: var(--accent); }
.c-tcard__meta { font-size: calc(var(--u) * 11); color: var(--text-muted); }
.c-tcard__ftr { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); }
.c-minifelt {
margin: calc(var(--u) * 10) 0;
height: calc(var(--u) * 74);
border: 3px solid var(--minifelt-border);
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--u) * 6);
}
.c-minifelt--bj {
background: var(--grad-minifelt-bj);
border-radius: calc(var(--u) * 60) calc(var(--u) * 60) calc(var(--u) * 14) calc(var(--u) * 14);
}
.c-minifelt--pk {
background: var(--grad-minifelt-pk);
border-radius: 50% / 46%;
gap: calc(var(--u) * 5);
}
.c-minifelt--locked { height: calc(var(--u) * 56); margin: calc(var(--u) * 10) 0 0; }
.c-minifelt--locked.c-minifelt--bj {
border-radius: calc(var(--u) * 50) calc(var(--u) * 50) calc(var(--u) * 12) calc(var(--u) * 12);
}
.c-minifelt__pot { font-size: calc(var(--u) * 15); color: var(--gold); font-weight: 700; margin-left: calc(var(--u) * 6); }
/* The lock pill is a NORMAL-FLOW SIBLING yanked up, so it must live OUTSIDE
the .45-opacity / grayscale subtree and stays full gold. */
.c-lockwrap {
position: relative;
margin-top: calc(var(--u) * -86);
z-index: 5;
display: flex;
justify-content: center;
}
.c-lockpill {
background: var(--ink-black);
border: 2.5px solid var(--gold);
border-radius: calc(var(--u) * 11);
padding: calc(var(--u) * 6) calc(var(--u) * 14);
font-size: calc(var(--u) * 13);
font-weight: 700;
color: var(--gold);
box-shadow: var(--el-3d);
}
/* the negative margin collapses flow — re-open the spacing after it */
.c-lockwrap + .c-tcard { margin-top: calc(var(--u) * 26); }
.c-lockwrap + .c-enroll { margin-top: calc(var(--u) * 20); }
.c-presence {
display: flex;
align-items: center;
gap: calc(var(--u) * 6);
border-radius: calc(var(--u) * 10);
padding: calc(var(--u) * 4) calc(var(--u) * 9);
font-size: calc(var(--u) * 12);
font-weight: 600;
border: 2px solid;
}
.c-presence__dot { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; flex: none; }
.c-presence--live { background: rgba(56,249,215,.12); border-color: var(--teal); color: var(--teal); }
.c-presence--live .c-presence__dot { background: var(--teal); animation: pulseDot 1.6s ease-in-out infinite; }
.c-presence--empty { background: rgba(142,127,184,.14); border-color: var(--border-muted); color: var(--text-muted); }
.c-presence--empty .c-presence__dot { background: var(--border-muted); } /* no animation */
/* compact school strip */
.c-school {
display: flex;
align-items: center;
gap: calc(var(--u) * 12);
background: var(--grad-school);
border: 3px solid var(--gold);
border-radius: calc(var(--u) * 16);
padding: calc(var(--u) * 11) calc(var(--u) * 14);
box-shadow: var(--el-4b);
cursor: pointer;
}
.c-school__ic { font-size: calc(var(--u) * 28); }
.c-school__t { font-size: calc(var(--u) * 15); font-weight: 700; color: var(--gold); }
.c-school__s { font-size: calc(var(--u) * 12); color: var(--text-lilac); }
.c-school__p { font-size: calc(var(--u) * 12); font-weight: 700; color: var(--text-muted); margin-left: auto; }
/* promoted Enroll CTA — its box-shadow comes ENTIRELY from glowPulse */
.c-enroll {
position: relative;
display: flex;
align-items: center;
gap: calc(var(--u) * 12);
background: var(--grad-enroll);
border: 3px solid var(--gold);
border-radius: calc(var(--u) * 16);
padding: calc(var(--u) * 13) calc(var(--u) * 14);
margin-top: calc(var(--u) * 20);
cursor: pointer;
animation: glowPulse 2.2s ease-in-out infinite;
}
.c-enroll__ic { font-size: calc(var(--u) * 30); }
.c-enroll__t { font-size: calc(var(--u) * 17); font-weight: 700; color: var(--gold); }
.c-enroll__s { font-size: calc(var(--u) * 12); color: var(--text-lilac); }
.c-enroll__arrow { font-size: calc(var(--u) * 20); color: var(--gold); font-weight: 700; margin-left: auto; }
.c-coachbadge {
position: absolute;
top: calc(var(--u) * -14);
left: calc(var(--u) * 16);
background: var(--pink);
color: var(--ink-on-pink);
font-size: calc(var(--u) * 11);
font-weight: 700;
padding: calc(var(--u) * 2) calc(var(--u) * 9);
border-radius: calc(var(--u) * 8);
border: 2px solid var(--ink-black);
}
/* reference-sheet panel */
.c-sectionpanel {
background: var(--surface-panel);
border: 3px solid var(--purple);
border-radius: calc(var(--u) * 20);
padding: calc(var(--u) * 18) calc(var(--u) * 20);
box-shadow: var(--el-5);
}
.c-sectionpanel__t { font-size: calc(var(--u) * 22); font-weight: 700; color: var(--gold); margin-bottom: calc(var(--u) * 4); }
.c-sectionpanel__s { font-size: calc(var(--u) * 13); color: var(--text-muted); margin-bottom: calc(var(--u) * 14); }
/* ========================= 16 · IDENTITY GATE ========================== */
.c-gate {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(10,3,26,.86);
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
animation: toastIn .2s ease-out;
}
.c-gate__card {
width: 100%;
max-width: 340px;
background: var(--surface-panel);
border: 4px solid var(--purple);
border-radius: 22px;
padding: 22px 18px;
text-align: center;
box-shadow: var(--el-6), var(--glow-frame);
}
.c-gate__title { font-size: 22px; font-weight: 700; color: var(--gold); }
.c-gate__sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
.c-gate__row { display: flex; gap: 12px; margin-top: 18px; }
.c-gate__pick {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
background: var(--surface-sunken);
border: 3px solid var(--teal);
border-radius: 16px;
padding: 14px 8px;
min-height: 44px;
cursor: pointer;
box-shadow: var(--el-4b);
transition: filter .12s ease, transform .12s ease;
}
.c-gate__pick--tina { border-color: var(--teal); }
.c-gate__pick--chris { border-color: var(--pink); }
.c-gate__emoji { font-size: 34px; line-height: 1; }
.c-gate__name { font-size: 16px; font-weight: 700; color: var(--teal); }
.c-gate__pick--chris .c-gate__name { color: var(--pink); }
@media (hover: hover) { .c-gate__pick:hover { filter: brightness(1.08); transform: translateY(-2px); } }
/* ---- TEMPORARY: the "under construction" hold on the two game tables ----
Lives with the identity gate because it is the same object — a full-bleed
card that owns the screen until it is satisfied. Deletable in one block
once the tables open; see constructionGate() in casino.js. */
/* Opaque + blurred: the point is that the unfinished table is NOT on show,
so the dim alone (which the identity gate can afford) is not enough here. */
.c-gate--wip {
background: rgba(10,3,26,.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.c-gate--wip .c-gate__card { border-color: var(--gold); max-width: 360px; }
.c-wip__ic {
font-size: 44px;
line-height: 1;
margin-bottom: 10px;
animation: wipTilt 3.2s ease-in-out infinite;
}
.c-wip__row {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.c-wip__reveal {
margin-top: 18px;
background: none;
border: 0;
padding: 6px;
font-family: var(--font-ui);
font-size: 11px;
color: var(--text-faint, rgba(255,255,255,.38));
letter-spacing: .5px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (hover: hover) { .c-wip__reveal:hover { color: var(--text-muted); } }
.c-wip__form {
display: flex;
gap: 8px;
margin-top: 10px;
align-items: stretch;
justify-content: center;
}
.c-wip__input {
flex: 1;
min-width: 0;
max-width: 150px;
background: var(--surface-sunken);
border: 3px solid var(--purple);
border-radius: 12px;
padding: 8px 12px;
font-family: var(--font-ui);
font-size: 18px;
font-weight: 700;
letter-spacing: 5px;
text-align: center;
color: var(--gold);
}
.c-wip__input:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.c-wip__err { margin-top: 10px; font-size: 12px; color: var(--pink); }
@keyframes wipTilt {
0%, 100% { transform: rotate(-6deg); }
50% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .c-wip__ic { animation: none; } }
/* ======================== 17 · ANIMATION CATALOG ======================= */
@keyframes pulseDot {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.6); opacity: .45; }
}
@keyframes dealerSway {
0%,100% { transform: rotate(-1.5deg); }
50% { transform: rotate(1.5deg); }
}
@keyframes flipGlow {
0%,100% { box-shadow: 0 3px 0 rgba(0,0,0,.45); }
50% { box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 16px rgba(255,213,74,.95); }
}
/* conflict #2: -10px / 160deg wins (3 files agree) */
@keyframes chipFly {
0%,100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-10px) rotate(160deg); }
}
/* conflict #3: -8px → 26px / 220deg / opacity → .25 wins */
@keyframes confettiFall {
0% { transform: translateY(-8px) rotate(0); opacity: 1; }
100% { transform: translateY(26px) rotate(220deg); opacity: .25; }
}
@keyframes sitPulse {
0%,100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.07); opacity: 1; }
}
@keyframes thinkDots {
0%,100% { opacity: .3; }
50% { opacity: 1; }
}
@keyframes potPulse {
0%,100% { box-shadow: 0 0 8px rgba(255,213,74,.4); }
50% { box-shadow: 0 0 20px rgba(255,213,74,.9); }
}
@keyframes coachPulse {
0%,100% { box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 10px rgba(255,213,74,.5); transform: scale(1); }
50% { box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 26px rgba(255,213,74,1); transform: scale(1.04); }
}
@keyframes coachArrow {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes gradPop {
0% { transform: scale(.8) rotate(-4deg); }
60% { transform: scale(1.05) rotate(1deg); }
100% { transform: scale(1) rotate(0); }
}
@keyframes neonFlick {
0%,100% { opacity: 1; }
91% { opacity: 1; }
92% { opacity: .55; }
93% { opacity: 1; }
96% { opacity: .75; }
97% { opacity: 1; }
}
@keyframes bobY {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes glowPulse {
0%,100% { box-shadow: 0 6px 0 rgba(0,0,0,.45), 0 0 14px rgba(255,213,74,.35); }
50% { box-shadow: 0 6px 0 rgba(0,0,0,.45), 0 0 30px rgba(255,213,74,.75); }
}
@keyframes countGlow {
0%,100% { color: #FFD54A; }
50% { color: #FFF3C4; text-shadow: 0 0 14px rgba(255,213,74,.9); }
}
/* --- build-side additions (spec'd behaviours with no keyframe in the doc) */
@keyframes cardFlip3d { /* 600ms hole-card / street reveal */
0% { transform: perspective(600px) rotateY(0deg) scale(1); }
50% { transform: perspective(600px) rotateY(90deg) scale(1.06); }
100% { transform: perspective(600px) rotateY(180deg) scale(1); }
}
@keyframes toastIn { from { transform: translateY(-120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-120%); opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ==================== 18 · REDUCED MOTION (neutered) =================== */
@media (prefers-reduced-motion: reduce) {
.c-page *,
.c-page *::before,
.c-page *::after,
.c-toasts *,
.c-gate * {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0s !important;
transition-duration: .001ms !important;
}
/* keep the still frames legible rather than mid-animation */
.c-dealer { transform: rotate(0); }
.c-cf { opacity: .85; }
.c-btn:hover,
.c-chunky:hover,
.c-gate__pick:hover { transform: none; filter: none; }
html { scroll-behavior: auto; }
}