class below; --rank-color is set only on .ri-trump (trump-purple rank tint, CSS-driven off the
template's ri-trump class — no inline style, unlike the old JS-built tiles). */
.ri-card {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
width: 44px;
height: 62px; /* why: ~width / 0.714, the --card-ratio used across the game */
padding: 3px 0 0 5px;
background: #e2e8f0;
border-radius: var(--radius-sm);
border: 1px solid rgba(0, 0, 0, 0.25);
border-left: 4px solid var(--suit);
}
/* Suit colors: mirrors cards.js SUIT_COLORS — desync check: grep -n
"D97706\|BE123C\|046C4E\|0369A1" -r src/main/resources/static (game-history-htmx-spike design
§ Verification). */
.ri-suit-diamonds {
--suit: #d97706;
}
.ri-suit-hearts {
--suit: #be123c;
}
.ri-suit-spades {
--suit: #046c4e;
}
.ri-suit-clubs {
--suit: #0369a1;
}
.ri-card.ri-trump {
--rank-color: #7e22ce; /* Royal Purple — mirrors constants.js TRUMP_COLOR */
}
.ri-card-rank {
color: var(--rank-color, var(--suit));
font-weight: 700;
font-size: var(--fs-md);
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* "10" is the one two-glyph rank — condensed so it stays inside the overlap sliver (real decks
narrow their 10 indices the same way). */
.ri-card[data-rank="10"] .ri-card-rank {
font-size: var(--fs-sm);
letter-spacing: -0.06em;
}
/* Unicode-pip fallback (no-JS / pre-enhance content); round-inspection-enhance.js replaces this
element outright with the real card-art svg, so no post-enhance override is needed here. */
.ri-pip {
color: var(--suit);
font-size: var(--fs-md);
line-height: 1;
}
.ri-card svg {
display: block;
}
.ri-bid .bid-value {
min-width: 72px;
font-variant-numeric: tabular-nums;
font-size: var(--fs-lg);
color: var(--text-primary);
}
.ri-bid.ri-declarer .bid-value {
color: var(--ui-warning);
font-weight: 700;
}
.ri-bid .declarer-tag {
font-size: var(--fs-md);
color: var(--ui-warning);
}
/* --- Trick blocks --- */
/* One bordered block per trick: a header line (trick number, its Augen, the running faction
score) over three seat rows. Each seat row is the seat's full hand at trick start as an
overlapping fan; the played card is lifted out of the fan (ri-played) instead of sitting in a
separate column — one glance gives what they held AND what they chose. The color vocabulary
carries over from the old table: cyan = led the trick (row inset edge), amber = won it (ring on
the played card). */
.ri-tricks {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.ri-trick {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
padding: var(--space-xs) var(--space-md) var(--space-sm);
background: rgba(255, 255, 255, 0.02);
}
.ri-trick-head {
display: flex;
flex-wrap: wrap; /* a Ramsch head carries three named tallies — fold rather than overflow at 390 */
align-items: baseline;
gap: var(--space-md);
padding: 2px 0 var(--space-xs);
}
.ri-trick-no {
font-size: var(--fs-lg);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
}
/* Icon + "+N" pair (number-glyphs-game-wide-sweep), mirroring games.html's .round-kpi wrapper:
the icon leads, the title naming "Augen" rides this visible wrapper rather than the aria-hidden
icon slot. */
.ri-trick-points {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
}
.ri-trick-points-icon {
display: inline-flex;
opacity: 0.65; /* play-test: matches .round-kpi-icon's supporting-mark dimness */
}
.ri-trick-points-icon svg {
display: block;
}
/* Running score after this trick, right-aligned: one label+total pair per faction, the trick's
taker tinted amber — the winner accent and the tally accent are the same fact, told once. */
.ri-trick-score {
margin-left: auto;
display: flex;
align-items: baseline;
gap: var(--space-md);
}
.ri-tally {
display: inline-flex;
align-items: baseline;
gap: 5px;
color: var(--text-secondary);
font-size: var(--fs-sm);
}
.ri-tally-total {
font-size: var(--fs-md);
font-variant-numeric: tabular-nums;
}
.ri-tally-active {
color: var(--ui-warning);
}
.ri-tally-active .ri-tally-total {
font-weight: 700;
}
/* Seat row: the seat marker, then the fan. The lead accent is a cyan inset edge on the row —
off the cards, so it never fights the winner ring. */
.ri-seat-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 4px 0 2px 6px;
}
.ri-seat-row.ri-lead {
box-shadow: inset 3px 0 0 var(--system-hint);
}
/* Persona avatar + position icon, replacing the bare seat number and the FH/MH/RH abbreviation
(round-inspector-show-dont-tell) — both wrapped in visible spans (.ri-seat-name/.ri-seat-pos)
that carry the tooltip, since the seat row shows no name text of its own. Position icons inherit
this color via currentColor; personas carry their own identity color inline (the JS factory
call), so this color only ever shows through the position icon. */
.ri-seat-mark {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 42px;
color: var(--text-secondary);
}
.ri-seat-name,
.ri-seat-pos {
display: inline-flex;
}
.ri-seat-persona svg,
.ri-seat-pos-icon svg {
display: block;
}
.ri-seat-mark-declarer {
color: var(--ui-warning);
}
/* The fan: overlapped cards (corner indices keep the sliver readable), the played card lifted
above its neighbours. Static shadows only — nothing here animates. */
.ri-fan {
display: flex;
padding-top: 7px; /* headroom for the played card's lift */
}
.ri-fan .ri-card + .ri-card {
/* Overlap step sized to the corner index: 25px visible = border 1 + stripe 4 + pad 5 + the
widest index ("10", ~15px condensed below). 10 cards then span 269px — inside a 390 viewport
with the seat mark beside. */
margin-left: -19px;
}
/* The played card pulls fully out of the fan: lifted, and the fan PARTS around it (the next
card's overlap margin resets) so its whole face shows without covering any neighbour's index —
a z-index lift instead would paint over the card to its right. Costs ~17px row width, still
inside 390. */
.ri-fan .ri-card.ri-played {
transform: translateY(-7px);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.4),
0 3px 9px rgba(0, 0, 0, 0.5);
}
.ri-fan .ri-card.ri-played + .ri-card {
margin-left: -2px;
}
/* Wider viewports have the room — relax the overlap so more of each card face shows. */
@media (min-width: 700px) {
.ri-fan .ri-card + .ri-card {
margin-left: -12px;
}
.ri-fan .ri-card.ri-played + .ri-card {
margin-left: 0;
}
}
/* Winner ring: the trick-taker's played card swaps the neutral ring for amber + a soft glow
(static — DESIGN's no-animated-shadow rule doesn't bite). rgba mirrors --ui-warning #d97706. */
.ri-seat-row.ri-winner .ri-card.ri-played {
box-shadow:
0 0 0 2px var(--ui-warning),
0 0 12px 2px rgba(217, 119, 6, 0.45);
}
/* Phone widths: the 10-card first-trick fan needs ~342px for its widest seat row, and the
overlap can't tighten (card readability floors it at a 25px sliver). Trim the fragment's own
side padding so that row fits its content box rather than bleeding past it — on /games the
bleed lands within the viewport, but the narrower result overlay turns it into a horizontal
scrollbar. Pairs with the inspect panel's full-width treatment (§ Result Overlays → narrow overlays). */
@media (max-width: 430px) {
.inspector-body {
padding: var(--space-lg) var(--space-xs);
}
}
/* === Games Page === */
/* /games — the player's own warehoused runs (game-history-htmx-spike design § Surface): a run
section per warehoused mode-file, round rows that navigate into the shared round-inspection
fragment above via plain server-rendered pages (games-page-ux-pass design § Plumbing). Rows are
quiet vellum-toned link surfaces — navigation, so neither metal nor glass (DESIGN Principle 18);
each carries its contract emblem from the game-type icon family (games-list-enhance.js). */
.games-page {
max-width: 900px;
margin: 0 auto;
padding: var(--space-xl) var(--space-lg);
color: var(--text-primary);
font-family: "Satoshi", system-ui, sans-serif;
}
.games-empty {
display: flex;
min-height: 70vh; /* centre the first-visit state in the viewport rather than pinning it to the top */
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-lg);
text-align: center;
}
.games-empty-emblem {
opacity: 0.6; /* a quiet mark, not a showpiece (DESIGN Principle 18 — the empty state is chrome) */
color: #e2e8f0; /* Vellum — the empty-state feel pass's locked option D (games-list-enhance.js) */
}
.games-empty-copy {
margin: 0;
font-size: var(--fs-md);
color: var(--text-secondary);
}
/* Play CTA: struck-amber metal (.btn-primary) without the .btn-plate glow — the glow register is
reserved for the two screen-defining CTAs (DESIGN Principle 18). */
.games-empty-cta {
display: inline-block;
text-decoration: none;
}
.games-list h1 {
margin: 0 0 var(--space-xs);
font-size: var(--fs-2xl);
font-weight: 700;
letter-spacing: -0.01em;
}
.games-notice {
margin: 0 0 var(--space-xl);
color: var(--text-secondary);
font-size: var(--fs-sm);
}
.games-mode {
margin-bottom: var(--space-2xl);
}
.games-mode h2 {
margin: 0 0 2px;
font-size: var(--fs-xl);
font-weight: 700;
}
.games-meta {
margin: 0 0 var(--space-md);
color: var(--text-secondary);
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
}
/* --- Round row --- */
/* A quiet vellum-toned link surface (DESIGN Principle 18 — navigation, so neither metal nor glass).
Icon-forward grid (games-page-ux-pass icon redesign): number, game-type emblem, stakes value,
declarer name, then feat + outcome icons anchored to the right edge. Icons carry the row — see
games-list-enhance.js and the .round-* accessible-name (aria-label) attributes in games.html. */
.games-round-row {
display: grid;
/* number · type emblem · role icon · declarer avatar · declarer name (1fr) · KPI cluster · verdict */
grid-template-columns: 30px 46px 38px 30px 1fr auto auto;
column-gap: 10px;
align-items: center;
padding: 6px 14px;
margin-bottom: var(--space-sm);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
background: var(--bg-surface);
color: var(--text-primary);
text-decoration: none;
transition:
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast);
}
.games-round-row:hover {
background: var(--bg-elevated);
border-color: rgba(255, 255, 255, 0.18);
transform: translateX(3px);
}
.round-number {
text-align: center;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.round-emblem {
display: flex;
align-items: center;
justify-content: center;
width: 46px; /* why: matches EMBLEM_SIZE in games-list-enhance.js */
height: 46px;
}
.round-emblem svg {
display: block;
}
/* The human's role this round (games-list-enhance.js#appendRoleIcon) — the compound defender icon
is position:absolute inside, so this slot must be a positioned box of a known size. */
.round-role {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 38px; /* why: matches ROLE_ICON_SIZE in games-list-enhance.js */
height: 38px;
color: var(--text-secondary);
}
.round-role svg {
display: block;
}
/* The declarer's court persona in its identity colour, beside the name (games-list-enhance.js). */
.round-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 30px; /* why: matches AVATAR_SIZE in games-list-enhance.js */
height: 30px;
}
.round-avatar svg {
display: block;
}
.round-declarer {
min-width: 0; /* lets the 1fr track actually shrink below the name's intrinsic width */
color: var(--text-secondary);
}
/* The row's three KPIs (bid · worth · net), echoing the stats panel's — a right-aligned numeric
cluster before the verdict. */
.round-kpis {
display: flex;
align-items: baseline;
gap: var(--space-md);
justify-content: flex-end;
font-variant-numeric: tabular-nums;
}
/* A KPI (bid/worth): its number-glyph icon before its number (worth-icon task), centered like
.round-net below rather than the text label's old baseline alignment. */
.round-kpi {
display: inline-flex;
align-items: center;
gap: 4px;
}
.round-kpi-icon {
display: inline-flex;
opacity: 0.65; /* play-test: matches the retired text label's dimness — a supporting mark, not the number */
}
.round-kpi-icon svg {
display: block;
}
.round-bid,
.round-value {
color: var(--text-secondary);
}
/* The declarer-signed net, carrying the AVG-NET balance scale and coloured by its own sign
(.round-result-win/-loss on the span) — the icon draws with currentColor, so it tints too. */
.round-net {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 700;
}
.round-net-icon {
display: inline-flex;
}
.round-net-icon svg {
display: block;
}
.round-verdict {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-md);
}
.round-feats {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.round-feat {
display: flex;
align-items: center;
}
/* The four icon feats (Hand/Ouvert/Schwarz/Schneider) — a fixed icon slot. Overbid has no icon
(.round-feat-overbid below) and carries no data-feat, so it's untouched by this rule. */
.round-feat[data-feat] {
justify-content: center;
width: 40px; /* why: matches FEAT_SIZE in games-list-enhance.js */
height: 40px;
}
.round-feat[data-feat] svg {
display: block;
}
/* Overbid — a lost declared game, kept as a small modest text mark since it has no icon. */
.round-feat-overbid {
padding: 2px var(--space-xs);
border-radius: var(--radius-sm);
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--score-negative);
background: rgba(255, 90, 120, 0.13); /* --score-negative, low-alpha fill */
}
.round-outcome {
display: flex;
align-items: center;
justify-content: center;
width: 46px; /* why: matches OUTCOME_SIZE in games-list-enhance.js */
height: 46px;
}
.round-outcome svg {
display: block;
}
.round-result-win {
color: var(--score-positive);
}
.round-result-loss {
color: var(--score-negative);
}
/* Narrow viewports: the fixed lead-column widths and wide gaps overflow a phone (DESIGN
Principle 10). Tighten the grid and shrink the icon slots (CSS-scaling the SVGs to their smaller
containers — the desktop constants above stay the drawn size, only the display size shrinks);
the declarer name truncates so the row stays one line. */
@media (max-width: 560px) {
.games-round-row {
grid-template-columns: 22px 34px 30px 26px 1fr auto auto;
column-gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
}
.round-emblem {
width: 34px;
height: 34px;
}
.round-role {
width: 30px;
height: 30px;
}
.round-avatar {
width: 26px;
height: 26px;
}
.round-role svg,
.round-avatar svg {
width: 100%;
height: 100%;
}
.round-kpis {
gap: var(--space-sm);
}
.round-feat[data-feat] {
width: 30px;
height: 30px;
}
.round-outcome {
width: 38px;
height: 38px;
}
.round-emblem svg,
.round-feat[data-feat] svg,
.round-outcome svg {
width: 100%;
height: 100%;
}
.round-verdict {
gap: var(--space-sm);
}
.round-feats {
gap: var(--space-xs);
}
.round-declarer {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Back control: the sole direct-child of .games-detail (games.html's plain href="/games"
link back to the list). */
.games-detail > a {
display: inline-block;
margin-bottom: var(--space-lg);
color: var(--ui-warning);
text-decoration: none;
}
/* --- Self-analytics panel (games-self-analytics slice 1) --- */
/* Chips are plain links (no JS): a click re-navigates /games with the toggled param, so the
only styling job here is active/inactive state, not interactivity. The KPI strip reuses the
round-inspector's .ri-facts/.ri-fact stat-card language directly (§ Rendering reuses the games
page's visual language) — .stats-kpi-strip only adds the section's top margin. */
.stats-panel {
margin-bottom: var(--space-2xl);
padding-bottom: var(--space-xl);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.stats-panel h2 {
margin: 0 0 var(--space-md);
font-size: var(--fs-xl);
font-weight: 700;
}
.stats-panel h3 {
margin: 0 0 var(--space-xs);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stats-chip-rail {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.stats-chip-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.stats-chip {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-md);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: var(--fs-md);
text-decoration: none;
white-space: nowrap;
transition:
background var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast);
}
.stats-chip:hover {
border-color: rgba(255, 255, 255, 0.28);
color: var(--text-primary);
}
.stats-chip-active {
border-color: var(--ui-warning);
color: var(--ui-warning);
background: rgba(255, 193, 87, 0.1); /* --ui-warning, low-alpha fill */
}
/* The matching-round count each chip carries (games-stats-panel-surface-and-styling): a quiet
tabular number after the label. */
.stats-chip-count {
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: var(--fs-sm);
opacity: 0.7;
}
/* Zero matches under the other active filters — the chip greys out and drops its href (a dead-end
click). The active chip is never disabled (it must stay clickable to clear itself). */
.stats-chip-disabled {
opacity: 0.5;
pointer-events: none;
}
.stats-kpi-strip {
margin-bottom: var(--space-lg);
}
/* The KPI card's corner emblem, scoped here (round-inspector-show-dont-tell, Gap 2): the round
inspector's own .ri-fact went icon-primary (hero icon on top, § Round Inspection), but this
panel's KPI cards keep the original small corner mark unchanged — so the positioning rules that
used to be global live only under this strip now. */
.stats-kpi-strip .ri-fact {
position: relative; /* anchors the corner .ri-fact-icon */
}
.stats-kpi-strip .ri-fact:has(.ri-fact-icon) {
padding-right: 46px;
}
.stats-kpi-strip .ri-fact-icon {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
opacity: 0.85;
}
.stats-breakdowns {
display: flex;
flex-wrap: wrap;
gap: var(--space-xl);
}
.stats-breakdown table {
border-collapse: collapse;
}
.stats-breakdown th,
.stats-breakdown td {
padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
font-size: var(--fs-sm);
text-align: left;
}
.stats-breakdown th {
color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stats-breakdown .stats-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* The by-round-type panel's donut slot (chart-vocabulary design): games-list-enhance.js fills it
from the table's own data-round-type/data-rounds attributes. Sits above the table (the panel is
one of three side-by-side .stats-breakdowns columns, too narrow for the composer's donut-beside-
table row treatment — an open question the design left for driving); :empty hides the slot when
JS never runs, matching the .breakdowns/#kpi-health empty-hide precedent above. */
.stats-roundtype-chart {
display: flex;
justify-content: center;
margin-bottom: var(--space-md);
}
.stats-roundtype-chart:empty {
display: none;
}
/* Chip-rail and breakdown-table icon slots (games-list-enhance.js): the icon draws at the JS
factory's own explicit size, so these only need a positioning box + block-level svg — no CSS
sizing (the "let CSS own the size" clamp treatment other icon-shaped chrome uses doesn't fit
here, since the compound role:DEFENDER icon below needs its offset computed in JS proportional
to a known size). The chip's gap comes from .stats-chip's flex gap above; a | isn't flex, so
.stats-dim-icon carries its own trailing margin instead. */
.stats-chip-icon,
.stats-dim-icon {
position: relative; /* anchors a compound role:DEFENDER paired-standard icon, see below */
display: inline-flex;
align-items: center;
justify-content: center;
}
.stats-chip-icon svg,
.stats-dim-icon svg {
display: block;
}
.stats-dim-icon {
margin-right: 4px;
}
/* The role:DEFENDER icon composes two battle standards absolutely centered then leaned outward —
games-list-enhance.js#appendPairedStandards, the leaderboard-detail-body.js
#makePairedBannerMarker recipe at a different scale (chip rail, breakdown cell, KPI card all
reuse this one class). */
.stats-paired-standard {
position: absolute;
top: 50%;
left: 50%;
}
/* --- Overlay consumer (games-overlay.js) --- */
/* The menu-mounted /games overlay: the same content fragment the page composes, inside the shared
vellum shell (overlay-shell.js). Sized to the page's own column width, not the shell's
full 980px — the content wasn't designed for that width. The content div (not the panel) owns
the internal scroll, so a long history doesn't carry the close row along with it. */
.games-overlay-panel {
max-width: 900px; /* matches .games-page's own column width */
}
.games-overlay-content {
overflow-y: auto;
max-height: 70vh;
}
.games-overlay-error {
padding: var(--space-lg);
color: var(--text-secondary);
text-align: center;
}
/* Legal links (go-live-impressum-datenschutz), standalone at page end — the overlay
consumer above never mounts this (it fetches `games :: content` only, not the whole
page), so it stays reachable exclusively on the standalone /games navigation. */
.games-page > .legal-footer-links {
justify-content: center;
margin-top: var(--space-2xl);
}
/* === Help Page === */
/* /help — the app reference (help-page design § Styling): Principle 12's bar is Lothar's
reference sheet, not a generic docs page, so this holds to the established vellum/petrol/Satoshi
vocabulary rather than a fresh layout — a 1200px two-column spread (wider than /games' single
900px column, tuned for the reference's paired entries per Andre's live pixel round). Icons
render plain — no etch entrance (reference entries label, they don't arrive, the same line
ICONOGRAPHY draws for feat chips on stats surfaces). */
.help-page {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-xl) var(--space-lg) var(--space-2xl);
font-family: "Satoshi", system-ui, sans-serif;
}
.help-back {
display: inline-block;
margin-bottom: var(--space-lg);
color: var(--ui-warning);
text-decoration: none;
}
/* Scoped to `.help-content` (the th:fragment="content" boundary), not `.help-page` — the
overlay-mounted fragment (reference-overlay.js) never carries the page class (the
html:has(.help-page) scroll-lock carve-out would otherwise leak into the game page), so basic
prose styling can't hang off it either; `.help-content` travels with the fragment into both the
standalone page and the overlay panel. */
/* The fragment's color anchor lives here, not on `.help-page`: inside the overlay the inheritance
chain runs through the native |