/* =============================================================================
TICHU CARD DESIGN SYSTEM
-----------------------------------------------------------------------------
A design language for an online Tichu card game.
Derived from "Warm Stone" (light) and "Slate & Linen" (dark) themes.
This file defines:
1. Theme tokens (colors, radii, shadows, motion)
2. Card family colors (special cards + four suits)
3. Card anatomy classes (.card, .card__face, .card__band, etc.)
4. Table / surface / hand layout primitives
A redesigning agent can change the LOOK by editing :root / [data-theme]
variables, and change the STRUCTURE by editing the component classes.
The two are intentionally decoupled.
============================================================================= */
/* -----------------------------------------------------------------------------
1. THEME TOKENS
----------------------------------------------------------------------------- */
:root,
[data-theme="warm-stone"] {
/* ── Surfaces ────────────────────────────────────────────────────────────── */
--surface-table: #e4ddd3; /* the felt — warm stone */
--surface-raised: #efe9e0; /* panels, sidebars, modals */
--surface-sunken: #d6cec1; /* wells, score tray */
--surface-overlay: rgba(31, 31, 29, 0.55);
/* ── Text on table ──────────────────────────────────────────────────────── */
--ink-strong: #1f1f1d;
--ink-muted: #5b5852;
--ink-faint: #8a857c;
--ink-inverse: #f5f1e8;
/* ── Card faces (the surface BEHIND the letter) ─────────────────────────── */
--card-face-special: #504e59; /* dark slate — Dragon/Phoenix/Dog/Mahjong */
--card-face-suit: #ffffff; /* clean white — A/K/Q/J suit cards */
--card-face-back: #2b3043; /* the back of a card (dealt face-down) */
/* ── Card outlines / edges ──────────────────────────────────────────────── */
--card-border: rgba(31, 31, 29, 0.10);
--card-border-strong: rgba(31, 31, 29, 0.22);
/* ── Shadows (Tichu cards should feel physical, not floating) ───────────── */
--shadow-card-rest:
0 1px 2px rgba(31, 31, 29, 0.10),
0 2px 6px rgba(31, 31, 29, 0.08);
--shadow-card-hover:
0 2px 4px rgba(31, 31, 29, 0.14),
0 8px 22px rgba(31, 31, 29, 0.18);
--shadow-card-drag:
0 6px 12px rgba(31, 31, 29, 0.20),
0 20px 40px rgba(31, 31, 29, 0.28);
--shadow-table-inset: inset 0 0 80px rgba(31, 31, 29, 0.06);
/* ── Focus / selection (turn indicators, played cards, highlighted cards) ─ */
--focus-ring: var(--accent);
--selection-glow: 0 0 0 2px var(--accent), 0 0 24px var(--accent-ring);
/* ── Accent — bright yellow. Used on action buttons and primary CTAs. ────── */
--accent: #f2c43b;
--accent-hover: #dcb02b;
--accent-active: #c39a1f;
--accent-soft: #faecbb;
--accent-ink: #1f1f1d;
--accent-text-on-surface: #a37e15; /* darker yellow for text directly on the warm-stone felt */
--accent-ring: rgba(242, 196, 59, 0.45);
}
[data-theme="slate-linen"] {
--surface-table: #2b3043;
--surface-raised: #353a4f;
--surface-sunken: #1f2434;
--surface-overlay: rgba(0, 0, 0, 0.55);
--ink-strong: #f5f1e8;
--ink-muted: #bdbcb7;
--ink-faint: #8a8a85;
--ink-inverse: #1f1f1d;
--card-face-special: #504e59; /* unchanged — special cards keep their slate face */
--card-face-suit: #f5f1e8; /* warm linen — softer than pure white at night */
--card-face-back: #1f2434;
--card-border: rgba(245, 241, 232, 0.10);
--card-border-strong: rgba(245, 241, 232, 0.22);
--shadow-card-rest:
0 1px 2px rgba(0, 0, 0, 0.40),
0 2px 6px rgba(0, 0, 0, 0.30);
--shadow-card-hover:
0 2px 4px rgba(0, 0, 0, 0.50),
0 8px 22px rgba(0, 0, 0, 0.45);
--shadow-card-drag:
0 6px 12px rgba(0, 0, 0, 0.55),
0 20px 40px rgba(0, 0, 0, 0.60);
--shadow-table-inset: inset 0 0 80px rgba(0, 0, 0, 0.30);
--focus-ring: var(--accent);
--selection-glow: 0 0 0 2px var(--accent), 0 0 24px var(--accent-ring);
/* ── Accent — bright yellow. Used on action buttons and primary CTAs. ────── */
--accent: #f2c43b;
--accent-hover: #f8d263;
--accent-active: #dcb02b;
--accent-soft: rgba(242, 196, 59, 0.18);
--accent-ink: #1f1f1d;
--accent-text-on-surface: #f2c43b; /* dark slate has plenty of contrast, bright yellow works */
--accent-ring: rgba(242, 196, 59, 0.55);
}
/* -----------------------------------------------------------------------------
2. CARD COLOR PALETTE
-----------------------------------------------------------------------------
Tichu has 4 special cards and 4 suits of A–2.
Each card type has ONE signature color used for:
• the letter on the face
• the band across the middle
• the upside-down letter on the back-of-face
Pick a card type by adding a class to .card, e.g.:
…
…
----------------------------------------------------------------------------- */
:root {
/* Special cards */
--c-dragon: #247a3b; /* deep emerald — the most powerful card */
--c-phoenix: #c94723; /* burnt orange — the wildcard */
--c-dog: #e8d44a; /* lemon yellow — passes the lead */
--c-mahjong: #768aad; /* dusty blue — the 1, requests a card */
/* Four suits — named by color. */
--c-suit-yellow: #d4a017; /* warm amber-yellow */
--c-suit-blue: #1a52af; /* cobalt */
--c-suit-green: #247a3d; /* emerald (twin of Dragon) */
--c-suit-red: #7c1e38; /* wine red */
}
/* -----------------------------------------------------------------------------
3. GEOMETRY, MOTION, TYPOGRAPHY
----------------------------------------------------------------------------- */
:root {
/* Card sizing — playing-card ratio 5:7. Resize via --card-w only. */
--card-w: 6.5rem;
--card-h: calc(var(--card-w) * 7 / 5);
--card-radius: 0.5rem;
--card-band-height: 22%; /* the colored stripe across the middle */
--card-pad: 0.55rem;
--card-gap: 0.4rem; /* between cards in a hand (fanned tighter via negative margin) */
--card-fan-overlap: -2.6rem; /* hand fan — negative right-margin per card */
/* Letter typography on the card face */
--card-letter-size: 1.55rem;
--card-letter-weight: 700;
--card-letter-tracking: -0.01em;
/* Motion */
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--t-fast: 120ms;
--t-base: 220ms;
--t-slow: 420ms;
/* Type stack — geometric sans throughout, matching the reference card art.
The agent is free to swap, but keep --font-card as a clean, semi-bold sans. */
--font-display: "Manrope", "Inter Tight", system-ui, -apple-system, sans-serif;
--font-ui: "Manrope", "Inter Tight", system-ui, -apple-system, sans-serif;
--font-card: "Manrope", "Inter Tight", system-ui, -apple-system, sans-serif;
}
/* -----------------------------------------------------------------------------
4. TABLE & PAGE PRIMITIVES
----------------------------------------------------------------------------- */
body,
.table {
background: var(--surface-table);
color: var(--ink-strong);
font-family: var(--font-ui);
box-shadow: var(--shadow-table-inset);
-webkit-font-smoothing: antialiased;
}
.panel {
background: var(--surface-raised);
color: var(--ink-strong);
border-radius: 0.75rem;
padding: 1rem 1.25rem;
box-shadow: var(--shadow-card-rest);
}
/* -----------------------------------------------------------------------------
5. THE CARD
-----------------------------------------------------------------------------
Markup:
Dr
Dr
Variants:
.card--dragon | .card--phoenix | .card--dog | .card--mahjong
.card--suit-yellow | .card--suit-blue | .card--suit-green | .card--suit-red
States:
.is-selected raised + glow
.is-playable subtle pulse
.is-disabled desaturated, can't be picked
.is-face-down shows the back, hides corners + band
----------------------------------------------------------------------------- */
.card {
--card-color: var(--ink-strong); /* overridden per variant below */
--face: var(--card-face-suit); /* overridden per family below */
position: relative;
display: inline-block;
width: var(--card-w);
height: var(--card-h);
padding: var(--card-pad);
background: var(--face);
color: var(--card-color);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--shadow-card-rest);
font-family: var(--font-card);
font-weight: var(--card-letter-weight);
letter-spacing: var(--card-letter-tracking);
cursor: pointer;
user-select: none;
transform-origin: 50% 100%;
transition:
transform var(--t-base) var(--ease-out-quart),
box-shadow var(--t-base) var(--ease-out-quart),
margin var(--t-base) var(--ease-out-quart),
filter var(--t-fast) var(--ease-out-quart);
}
/* The thick colored stripe across the middle. */
.card__band {
position: absolute;
left: 0;
right: 0;
top: calc(50% - var(--card-band-height) / 2);
height: var(--card-band-height);
background: var(--card-color);
/* The band runs edge to edge; if you want it inset, swap to left/right: 8% */
}
/* Top-left corner letter. */
.card__corner {
position: absolute;
font-size: var(--card-letter-size);
line-height: 1;
letter-spacing: var(--card-letter-tracking);
}
.card__corner--top {
top: var(--card-pad);
left: var(--card-pad);
}
.card__corner--bottom {
bottom: var(--card-pad);
right: var(--card-pad);
transform: rotate(180deg); /* the playing-card mirror */
transform-origin: center;
}
/* ── Card-family face colors ─────────────────────────────────────────────── */
.card--dragon,
.card--phoenix,
.card--dog,
.card--mahjong {
--face: var(--card-face-special);
}
.card--suit-yellow,
.card--suit-blue,
.card--suit-green,
.card--suit-red {
--face: var(--card-face-suit);
}
/* ── Card-family ink colors ──────────────────────────────────────────────── */
.card--dragon { --card-color: var(--c-dragon); }
.card--phoenix { --card-color: var(--c-phoenix); }
.card--dog { --card-color: var(--c-dog); }
.card--mahjong { --card-color: var(--c-mahjong); }
.card--suit-yellow { --card-color: var(--c-suit-yellow); }
.card--suit-blue { --card-color: var(--c-suit-blue); }
.card--suit-green { --card-color: var(--c-suit-green); }
.card--suit-red { --card-color: var(--c-suit-red); }
/* -----------------------------------------------------------------------------
6. CARD STATES & INTERACTIONS
----------------------------------------------------------------------------- */
/* Hover — lift slightly. */
.card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-card-hover);
}
/* Selected (queued to be played). */
.card.is-selected {
transform: translateY(-18px);
box-shadow: var(--shadow-card-hover), var(--selection-glow);
}
/* Currently playable on this turn — gentle attention pulse on the border. */
.card.is-playable {
animation: card-pulse 2.4s var(--ease-in-out-quint) infinite;
}
@keyframes card-pulse {
0%, 100% { box-shadow: var(--shadow-card-rest); }
50% { box-shadow: var(--shadow-card-rest), 0 0 0 2px var(--focus-ring); }
}
/* Disabled — can't be selected (e.g. illegal combination). */
.card.is-disabled {
filter: grayscale(0.6) brightness(0.85);
cursor: not-allowed;
pointer-events: none;
}
/* Face-down — covers everything with the back pattern. */
.card.is-face-down {
background: var(--card-face-back);
box-shadow: var(--shadow-card-rest);
}
.card.is-face-down .card__corner,
.card.is-face-down .card__band {
visibility: hidden;
}
/* Keyboard focus ring (accessibility). */
.card:focus-visible {
outline: none;
box-shadow: var(--shadow-card-hover), 0 0 0 3px var(--focus-ring);
}
/* -----------------------------------------------------------------------------
7. THE HAND — fanned row of overlapping cards
----------------------------------------------------------------------------- */
.hand {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
padding: 1rem;
min-height: calc(var(--card-h) + 2rem);
}
.hand > .card {
margin-right: var(--card-fan-overlap);
}
.hand > .card:last-child {
margin-right: 0;
}
/* When you hover the hand, fan it open so every card is easier to read. */
.hand:hover > .card {
margin-right: var(--card-gap);
}
/* -----------------------------------------------------------------------------
8. THE TRICK PILE — cards played to the center
----------------------------------------------------------------------------- */
.trick {
display: flex;
gap: 0.4rem;
padding: 1.25rem 1.5rem;
border-radius: 1rem;
background: var(--surface-sunken);
box-shadow: inset 0 1px 3px rgba(31, 31, 29, 0.12);
}
.trick > .card {
cursor: default;
/* Played cards don't lift on hover. */
}
.trick > .card:hover {
transform: none;
box-shadow: var(--shadow-card-rest);
}
/* -----------------------------------------------------------------------------
9. UTILITIES
----------------------------------------------------------------------------- */
/* Stack cards tightly (e.g. for a captured-tricks pile). */
.stack > .card + .card { margin-left: -1.1rem; }
/* Bigger card preview (e.g. a card hovered over for inspection). */
.card--xl {
--card-w: 11rem;
--card-letter-size: 2.6rem;
}
/* Smaller card chip (e.g. a tiny inline legend in chat). */
.card--xs {
--card-w: 3rem;
--card-letter-size: 0.85rem;
--card-pad: 0.3rem;
}
/* -----------------------------------------------------------------------------
11. ACTION BUTTONS
-----------------------------------------------------------------------------
Markup:
Variants:
btn--primary The "do the thing" CTA — Play, Confirm, Call Tichu, Submit.
At most ONE primary visible per context.
btn--secondary Outlined brass — Pass, Skip, secondary confirmations.
btn--ghost Neutral/low-emphasis — Cancel, Back, Close, chrome.
----------------------------------------------------------------------------- */
.btn {
font-family: var(--font-ui);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.01em;
padding: 0.6rem 1.1rem;
border-radius: 0.5rem;
border: 1px solid transparent;
cursor: pointer;
line-height: 1;
/* Never wrap the label. "call tihu" was breaking onto two lines on narrow
mobile bars, so its border rendered as a tall rounded rect mismatched with
the single-line buttons beside it. */
white-space: nowrap;
transition:
background-color var(--t-fast) var(--ease-out-quart),
border-color var(--t-fast) var(--ease-out-quart),
color var(--t-fast) var(--ease-out-quart),
transform var(--t-fast) var(--ease-out-quart),
box-shadow var(--t-fast) var(--ease-out-quart);
}
/* Keyboard focus shows a soft ring via box-shadow. Suppress the browser's
default (often dashed/square) outline in every focus state — on mobile a tap
leaves the button :focus'd and the UA outline rendered a second, dashed border
just outside the button's own rounded border. */
.btn:focus { outline: none; }
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
.btn--primary {
background: var(--accent);
color: var(--accent-ink);
}
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn--primary:active:not(:disabled) { background: var(--accent-active); }
.btn--secondary {
background: transparent;
color: var(--accent-text-on-surface);
border-color: var(--accent-text-on-surface);
}
.btn--secondary:hover:not(:disabled) { background: var(--accent-soft); }
.btn--ghost {
background: transparent;
color: var(--ink-strong);
border-color: var(--card-border-strong);
}
.btn--ghost:hover:not(:disabled) {
background: var(--surface-raised);
border-color: var(--ink-muted);
}
.btn--bomb {
background: #7a1e00;
color: #ffc4a3;
border-color: #c43000;
}
.btn--bomb:hover:not(:disabled) { background: #962800; }
/* -----------------------------------------------------------------------------
10. NOTES FOR THE REDESIGNING AGENT
-----------------------------------------------------------------------------
• The two themes live entirely in section 1. To add a third theme (e.g.
"Forest Felt"), copy a [data-theme="…"] block and override only the
tokens that change.
• The eight card colors in section 2 are SEMANTIC, not theme-dependent.
A red dragon is a red dragon in any theme. If a theme needs different
card colors, override the --c-* tokens inside that theme block.
• All structural numbers (card ratio, band height, corner positions) are
CSS variables — vary the look without touching .card itself.
• Component HTML is intentionally tiny (3 elements per card). If the
redesign wants suit pips or an illustration in the band, add a
.card__art slot between __corner--top and __band — no other class
needs to change.
----------------------------------------------------------------------------- */