/* ───────────────────────────────────────────────────────────────────────────── Vanikar Card Games · desktop web client Palette tokens (--theme-*) are written onto at runtime from the shared ThemePalettes, one per MAUI resource key (ThemeBgPage → --theme-bg-page). The fallbacks below are the Royal Felt theme so the page holds before the runtime is up. Everything else derives from those tokens. ───────────────────────────────────────────────────────────────────────────── */ :root { --theme-bg-page: #0f2f23; --theme-bg-surface: #16402f; --theme-bg-card: #1d4d39; --theme-text-primary: #f4efe4; --theme-text-secondary: #cfd8cf; --theme-text-muted: #9fb0a3; --theme-accent: #d4a94a; --theme-accent-bright: #ecc46a; --theme-accent-dark: #9e7a2b; --theme-danger: #e53935; --theme-danger-bright: #ff6b6b; --theme-danger-dark: #6d1616; --theme-danger-soft: #ef9a9a; --theme-success: #4caf50; --theme-scrim: rgba(0, 0, 0, .66); --theme-highlight-soft: rgba(255, 255, 255, .13); --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --font-display: "Fraunces", Georgia, serif; /* The vanikar.games wordmark face; only the brand block uses it. */ --font-brand: "Cinzel", Georgia, serif; --radius: 10px; --card-radius: 7px; --shadow-card: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .25); --ease: cubic-bezier(.2, .7, .2, 1); /* Every duration is written against the chosen card animation speed, which cardGames.media.animationScale keeps in step with the setting. */ --anim-scale: 1; --t-fast: calc(140ms * var(--anim-scale)); --t-med: calc(280ms * var(--anim-scale)); --t-deal: calc(420ms * var(--anim-scale)); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; --t-deal: 0ms; } } * { box-sizing: border-box; } /* Page width tokens, the same as the vanikar.games site: 1200px content, 820px narrow, 1.5rem gutters. */ :root { --max-width: 1200px; --max-narrow: 820px; --gutter: 1.5rem; } html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--theme-bg-page); color: var(--theme-text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.45; } a { color: var(--theme-accent-bright); } a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--theme-accent-bright); outline-offset: 2px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; margin: 0; } /* ── Boot screen (before the runtime is up) ─────────────────────────────────── */ .boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--theme-text-secondary); } .boot-mark { width: 72px; height: 72px; border-radius: 18px; } .boot-text { font-family: var(--font-display); font-size: 20px; } .boot-bar { width: 220px; height: 4px; background: var(--theme-highlight-soft); border-radius: 2px; overflow: hidden; } .boot-bar-fill { height: 100%; width: 5%; background: var(--theme-accent); transition: width 200ms linear; } #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; padding: 12px 18px; background: var(--theme-danger-dark); color: var(--theme-text-primary); box-shadow: 0 -2px 10px rgba(0,0,0,.3); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 14px; top: 10px; } /* ── Shell ──────────────────────────────────────────────────────────────────── */ .shell { min-height: 100vh; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 28px; /* Full-width bar, contents aligned to the same 1200px frame as the page body (vanikar.games layout). */ padding: 10px max(var(--gutter), calc((100% - var(--max-width)) / 2)); background: var(--theme-bg-surface); border-bottom: 1px solid var(--theme-highlight-soft); } .brand { display: inline-flex; align-items: center; color: var(--theme-text-primary); text-decoration: none; } .brand-mark { display: block; width: 36px; height: 36px; border-radius: 9px; } .topbar-nav { display: flex; gap: 18px; align-items: center; } /* The account end of the bar, pushed away from the ways to play. */ .topbar-nav--end { margin-left: auto; } .topbar-nav a, .topbar-nav .topbar-link { color: var(--theme-text-secondary); text-decoration: none; font-weight: 600; } .topbar-nav a:hover, .topbar-nav .topbar-link:hover { color: var(--theme-text-primary); } /* Theme and sound ride the page's own top line, opposite the breadcrumb: they belong to the page rather than to the chrome, and every page that has a breadcrumb starts it at the same height. Out of the flow so the page below is laid out as if they were not there. */ .toolbar { position: absolute; top: 26px; right: 0; z-index: 4; display: flex; gap: 10px; align-items: center; padding: 0 max(var(--gutter), calc((100% - var(--max-width)) / 2)); } /* A page whose own head sits where a breadcrumb would carries the tools on that head's line instead: the setup head, and the table's. */ .content:has(.setup-head) .toolbar { top: 55px; } .content:has(.table-page) .toolbar { top: 10px; } .tool { display: inline-flex; align-items: center; gap: 8px; color: var(--theme-text-secondary); font-size: 14px; } .tool-select, .tool-button { font: inherit; color: var(--theme-text-primary); background: var(--theme-bg-card); border: 1px solid var(--theme-highlight-soft); border-radius: 6px; padding: 5px 8px; cursor: pointer; } .content { position: relative; flex: 1; display: flex; flex-direction: column; } /* ── Home ───────────────────────────────────────────────────────────────────── */ .hero { padding: 40px var(--gutter) 8px; max-width: var(--max-width); margin: 0 auto; width: 100%; } .hero h1 { font-size: 40px; } .lede { color: var(--theme-text-secondary); max-width: 62ch; font-size: 17px; } .badge { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--theme-highlight-soft); color: var(--theme-text-secondary); } /* ── Game selection ───────────────────────────────────────────────────────────── The phone's GameSelectionPage, ported: GameSelectionStyles.xaml gives the numbers (radii, strokes, shadows) and the --theme-* tokens give the colours, so both clients restyle together when a palette changes. The MAUI gradient brushes become the same gradients here — ThemeCardBrush, ThemeIconRingBrush, ThemeAccentPlateBrush. ───────────────────────────────────────────────────────────────────────────── */ .selection { display: flex; flex-direction: column; max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 0 var(--gutter); } .selection-title { font-family: var(--font-body); font-size: 32px; font-weight: 800; letter-spacing: 3px; text-align: center; color: var(--theme-accent-bright); padding: 18px 0 14px; } .selection-hero { padding: 14px 16px; border-radius: 24px; border: 1.1px solid var(--theme-border-strong); background: linear-gradient(135deg, var(--theme-bg-card), var(--theme-bg-surface) 55%, var(--theme-bg-deep)); box-shadow: 0 12px 24px var(--theme-scrim); display: flex; flex-direction: column; gap: 7px; } .selection-pills { display: flex; gap: 8px; justify-content: center; } .pill { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; padding: 4px 9px; border-radius: 14px; border: 1px solid var(--theme-border); background: var(--theme-bg-surface); color: var(--theme-text-secondary); } .pill--on { border-color: var(--theme-border-strong); background: var(--theme-bg-card); color: var(--theme-accent-bright); } .selection-hero-title { margin: 0; text-align: center; font-size: 20px; font-weight: 700; color: var(--theme-accent-bright); } .selection-hero-body { margin: 0; text-align: center; font-size: 12px; line-height: 1.35; color: var(--theme-text-secondary); } /* The phone fixes two columns; a desktop window takes as many as fit at the tile's own size. */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 20px; padding: 26px 0 30px; } /* The dark slab offset behind the face, which is what makes the tile read as raised. */ .tile { position: relative; } .tile::before { content: ""; position: absolute; inset: 0; transform: translate(6px, 8px); border-radius: 24px; background: var(--theme-card-depth-color); } .tile--dim { opacity: .72; } .tile-face { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 11px; border-radius: 24px; border: 2px solid var(--theme-border); /* The highlight along the top edge is a background layer, not a child: over only 5px of height its own corners stay nearly square, so an element would ride out past the tile's rounding. Clipped to the padding box, the radius trims it to the same curve. */ background: linear-gradient(var(--theme-highlight-soft), var(--theme-highlight-soft)) top / 100% 5px no-repeat, linear-gradient(180deg, var(--theme-bg-card), var(--theme-bg-surface)); background-clip: padding-box; box-shadow: 0 14px 28px var(--theme-card-shadow-color); color: var(--theme-text-primary); text-decoration: none; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast); } a.tile-face:hover, a.tile-face:focus-visible { transform: translateY(-3px); border-color: var(--theme-accent-bright); } .icon-ring { width: 76px; height: 76px; margin-top: 11px; padding: 5px; border-radius: 50%; border: 2.5px solid var(--theme-accent-bright); background: radial-gradient(circle at 40% 35%, var(--theme-bg-card), var(--theme-bg-deep)); box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-accent) 45%, transparent); display: grid; place-items: center; flex: none; } .icon-img { width: 100%; height: 100%; object-fit: contain; } .icon-emoji { font-size: 36px; line-height: 1; color: #1c1c1c; } .nameplate { width: 100%; margin-top: 6px; padding: 5px 8px; border-radius: 9px; border: 1.5px solid var(--theme-accent-bright); background: linear-gradient(135deg, var(--theme-accent-bright), var(--theme-accent) 45%, var(--theme-accent-dark)); box-shadow: 0 5px 12px var(--theme-scrim); font-size: 14px; font-weight: 700; text-align: center; color: var(--theme-accent-on-accent); } .tile-meta { font-size: 12px; color: var(--theme-text-secondary); } .tile-pawn { color: var(--theme-accent-bright); margin-right: 5px; } .soon-badge { padding: 3px 8px; border-radius: 8px; background: #607d8b; font-size: 8px; font-weight: 700; letter-spacing: .8px; color: #fff; } /* The phone puts these at the screen bottom; here they sit above the grid they switch, so the rule and the active marker are underlines rather than overlines. */ .selection-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-bottom: 1px solid var(--theme-border-strong); } .selection-tab { font: inherit; font-size: 14px; font-weight: 700; height: 52px; border: 0; background: none; cursor: pointer; color: var(--theme-text-secondary); border-bottom: 3px solid transparent; margin-bottom: -2px; } .selection-tab--on { color: var(--theme-accent-bright); border-bottom-color: var(--theme-accent-bright); } /* ── Site footer ──────────────────────────────────────────────────────────────── The footer from vanikar.games, reduced to its bottom line: a darker band under every page with the copyright on the left and every link on the right. ───────────────────────────────────────────────────────────────────────────── */ .site-footer { background: color-mix(in srgb, var(--theme-bg-page) 65%, #000); border-top: 1px solid color-mix(in srgb, var(--theme-border) 45%, transparent); padding: 24px 0; } .site-footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } .site-footer-ext { font-size: 11px; margin-left: 3px; color: var(--theme-text-muted); } .site-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; } .site-footer-copy { margin: 0; font-size: 12.5px; color: var(--theme-text-muted); } .site-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; } .site-footer-legal a { font-size: 12.5px; color: var(--theme-text-muted); text-decoration: none; } .site-footer-legal a:hover { color: var(--theme-text-primary); } /* ── Setup / settings / how-to ──────────────────────────────────────────────── */ .setup, .howto { padding: 32px var(--gutter); max-width: var(--max-narrow); margin: 0 auto; width: 100%; } .setup h1, .howto h1 { font-size: 34px; margin: 6px 0 4px; } .back { display: inline-block; color: var(--theme-text-secondary); text-decoration: none; font-weight: 600; } .setup-form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; } .field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--theme-text-secondary); } /* The phone's Animations sub-page: a heading per group, then a card per choice. */ .settings-group { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-text-muted); } .speed-choices { display: flex; flex-direction: column; gap: 10px; } .opt-card.speed-choice { width: 100%; flex-direction: row; align-items: center; gap: 14px; text-align: left; font: inherit; cursor: pointer; border-color: var(--theme-border); } .opt-card.speed-choice:hover { border-color: var(--theme-accent); } .opt-card.speed-choice--on { border-color: var(--theme-accent-bright); } .speed-icon { font-size: 28px; line-height: 1; width: 42px; text-align: center; flex: none; } .speed-tick { font-size: 24px; color: var(--theme-accent-bright); } .field--row { flex-direction: row; align-items: center; gap: 10px; } .input { font: inherit; color: var(--theme-text-primary); background: var(--theme-bg-card); border: 1px solid var(--theme-highlight-soft); border-radius: 6px; padding: 9px 12px; } .error { color: var(--theme-danger-bright); margin: 0; } .note { color: var(--theme-text-muted); font-size: 14px; } .howto h2 { font-size: 20px; margin-top: 24px; color: var(--theme-accent-bright); } .howto-list dt { font-weight: 700; margin-top: 10px; } .howto-list dd { margin: 2px 0 0; color: var(--theme-text-secondary); } /* ── Game setup ───────────────────────────────────────────────────────────────── The phone's GameSetupPage in a browser window: one narrow column of panels, the same rules card, steppers, seat rows and gold start button. The numbers come from that page's XAML; the colours from the --theme-* tokens. ───────────────────────────────────────────────────────────────────────────── */ /* Back and title; How to play has moved to the page tools, which share this line. */ .setup-head { display: grid; grid-template-columns: 40px 1fr; align-items: center; padding: 10px 0 14px; } .setup-back, .setup-info { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; font-weight: 700; } .setup-back { color: var(--theme-accent); font-size: 22px; } .setup-info { justify-self: end; width: 34px; height: 34px; font-family: var(--font-display); font-size: 18px; color: #fff; background: radial-gradient(circle at 40% 30%, #4a8fd6, #123a6b); border: 1px solid var(--theme-highlight-soft); } .setup-title { font-family: var(--font-body); font-size: 30px; font-weight: 800; text-align: center; color: var(--theme-accent-bright); margin: 0; } /* Stated, not offered: dashed outline, no fill, no shadow. */ .rules-card { border: 1px dashed var(--theme-border); border-radius: 16px; padding: 12px 16px; } .rules-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-text-muted); } .rules-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .rules-badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--theme-border); font-size: 22px; color: var(--theme-text-secondary); } .rules-main { flex: 1; font-size: 17px; color: var(--theme-text-primary); } .rules-decks { font-size: 17px; color: var(--theme-text-primary); } .rules-glyph { color: var(--theme-text-muted); margin-right: 8px; } .opt-split { display: flex; gap: 12px; align-items: stretch; } .opt-split > .opt-card:first-child { flex: 1; } .opt-card { border: 1px solid var(--theme-accent); border-radius: 18px; padding: 10px 14px; background: linear-gradient(180deg, var(--theme-bg-card), var(--theme-bg-surface)); display: flex; flex-direction: column; gap: 8px; } .opt-card--toggle { align-items: center; justify-content: center; text-align: center; gap: 10px; min-width: 130px; } .opt-head { display: flex; align-items: center; gap: 12px; } .opt-row { display: flex; align-items: center; gap: 12px; } .opt-row--text { flex-direction: column; align-items: stretch; gap: 6px; } .opt-row + .opt-row { border-top: 1px solid var(--theme-highlight-soft); padding-top: 8px; } .opt-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; background: linear-gradient(135deg, var(--theme-accent-bright), var(--theme-accent-dark)); color: var(--theme-accent-on-accent); font-size: 20px; } .opt-labels { flex: 1; display: flex; flex-direction: column; } .opt-title { font-size: 19px; font-weight: 700; color: var(--theme-text-primary); } .opt-title--block { margin: 0 0 4px; } .opt-sub { font-size: 14px; color: var(--theme-text-secondary); } .stepper { display: flex; align-items: center; gap: 10px; } .step { font: inherit; font-size: 22px; line-height: 1; width: 52px; height: 44px; cursor: pointer; border-radius: 12px; border: 1px solid var(--theme-border); background: var(--theme-bg-surface); color: var(--theme-text-primary); } .step:hover:not(:disabled) { border-color: var(--theme-accent); } .step:disabled { opacity: .4; cursor: default; } .step-value { min-width: 78px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--theme-accent); background: var(--theme-bg-deep); color: var(--theme-accent-bright); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } /* A checkbox drawn as the phone's switch; the input stays the control. */ .switch { display: inline-flex; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { /* A neutral off: the muted text token is a green in Royal Felt, which read as "on". */ width: 56px; height: 30px; border-radius: 999px; background: #6f6f6f; display: flex; align-items: center; padding: 3px; transition: background var(--t-fast); } .switch-knob { width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform var(--t-fast) var(--ease); } .switch input:checked + .switch-track { background: var(--theme-accent); } .switch input:checked + .switch-track .switch-knob { transform: translateX(26px); } .switch input:focus-visible + .switch-track { outline: 2px solid var(--theme-accent-bright); outline-offset: 2px; } /* The table-name field and its dice, the note under a heading, and the Discord card: the pieces only an online table shows. */ .opt-labels--field { gap: 4px; cursor: text; } .table-name { font: inherit; font-size: 17px; height: 44px; padding: 0 10px; border-radius: 12px; color: var(--theme-text-primary); background: var(--theme-bg-deep); border: 1px solid var(--theme-border-strong); } .table-name::placeholder { color: var(--theme-text-secondary); } .step--dice { font-size: 18px; } .opt-note { margin: 0; font-size: 15px; line-height: 1.4; color: var(--theme-text-secondary); } /* Discord's own blurple, so the one card that leaves the table reads as another service. */ .opt-card--discord { flex-direction: row; align-items: center; gap: 14px; border-color: #8891f6; } .opt-icon--discord { background: #5865f2; color: #fff; } .seats { border: 1px solid var(--theme-accent); border-radius: 18px; padding: 8px; display: flex; flex-direction: column; gap: 8px; } .seat-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--theme-border); background: linear-gradient(180deg, var(--theme-bg-card), var(--theme-bg-surface)); } .seat-row--human { border-color: var(--theme-accent-dark); } .seat-avatar { position: relative; width: 52px; height: 52px; flex: none; } .seat-avatar img { width: 100%; height: 100%; border-radius: 14px; background: var(--theme-bg-deep); } .seat-slot { position: absolute; top: -2px; left: -2px; font-size: 11px; font-weight: 700; color: var(--theme-text-primary); text-shadow: 0 1px 2px #000; } .seat-name { flex: 1; min-width: 0; font: inherit; font-size: 19px; color: var(--theme-text-primary); background: none; border: 0; border-bottom: 1px solid var(--theme-highlight-soft); padding: 4px 2px; } .seat-name:focus { outline: none; border-bottom-color: var(--theme-accent); } .seat-skill { font: inherit; font-weight: 600; font-size: 15px; padding: 7px 10px; border-radius: 10px; cursor: pointer; color: var(--theme-accent-bright); background: var(--theme-bg-deep); border: 1px solid var(--theme-accent); } .seat-partner { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--theme-accent); color: var(--theme-accent-on-accent); } .seat-remove { width: 40px; height: 40px; flex: none; border-radius: 50%; cursor: pointer; font-size: 16px; font-weight: 700; background: var(--theme-bg-deep); color: #ff4b4b; border: 1px solid #ff3b30; } .seat-remove:hover { background: #ff3b30; color: #fff; } .round-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .round-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--theme-border); background: var(--theme-bg-surface); font-size: 14px; color: var(--theme-text-secondary); } .round-chip b { font-weight: 600; } .round-chip--on { border-color: var(--theme-accent); color: var(--theme-accent-bright); } .partner-picker { display: flex; flex-wrap: wrap; gap: 8px; } .partner-chip { font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--theme-border); background: var(--theme-bg-surface); color: var(--theme-text-secondary); } .partner-chip--on { border-color: var(--theme-accent); background: var(--theme-bg-deep); color: var(--theme-accent-bright); } .setup-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .btn-block { width: 100%; } .btn-start { height: 62px; font-size: 22px; font-weight: 700; border-radius: 16px; background: linear-gradient(135deg, var(--theme-accent-bright), var(--theme-accent) 45%, var(--theme-accent-dark)); color: var(--theme-accent-on-accent); } /* ── Buttons ────────────────────────────────────────────────────────────────── */ .btn { font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--t-fast) var(--ease), filter var(--t-fast); } .btn:hover:not(:disabled) { filter: brightness(1.08); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: .45; cursor: default; } .btn-lg { padding: 12px 24px; font-size: 17px; } /* The four roles the phone's action bar draws, from the same palette tokens. */ .btn-primary, .btn-spades, .btn-gin { background: var(--theme-btn-primary-bg); color: var(--theme-btn-primary-fg); border-color: var(--theme-btn-primary-border); } .btn-secondary { background: var(--theme-btn-secondary-bg); color: var(--theme-btn-secondary-fg); border-color: var(--theme-btn-secondary-border); } .btn-passive { background: var(--theme-btn-neutral-bg); color: var(--theme-btn-neutral-fg); border-color: var(--theme-btn-neutral-border); } .btn-destructive { background: var(--theme-btn-danger-bg); color: var(--theme-btn-danger-fg); border-color: var(--theme-btn-danger-border); } /* ── Table page ───────────────────────────────────────────────────────────────── The phone's gameplay screen: the players in a strip across the top of the felt, the trick or the piles in the middle, the hand fanned beneath, and the action bar along the bottom, all inside the one rounded table. The felt, its wooden bezel and the spade watermark are the phone's own image; the tiles and the buttons take the phone's numbers and the --theme-* tokens. ───────────────────────────────────────────────────────────────────────────── */ .table-page { flex: 1; display: flex; flex-direction: column; gap: 8px; max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 8px var(--gutter) 18px; outline: none; } .table-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 6px; } .table-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } /* Embossed like the phone's title: a dark shadow down-right, a pale highlight up-left. */ .table-heading { font-family: var(--font-body); font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -.01em; color: var(--theme-accent-bright); text-shadow: 1.5px 1.5px 0 #3a2000, -1px -1px 0 rgba(255, 251, 230, .5); } .table-meta { color: var(--theme-text-secondary); font-size: 14px; display: inline-flex; gap: 10px; align-items: center; } /* The phone's row of dark pills under the players: chips first, then the status. */ .table-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 34px; padding: 0 2px; } .chip { font-size: 15px; font-weight: 500; line-height: 1.2; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; white-space: nowrap; } .chip--broken { color: var(--theme-danger-bright); } .table-actions { display: flex; gap: 10px; } /* Fills the page the way the lobby's felt does, so the middle of the table — piles, trump, notices — gets whatever height the window has to give, not a fixed 640px. */ .felt { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 640px; padding: 12px 12px 14px; border-radius: 48px; /* The phone's background carries its wooden rail in the picture; here the picture is cropped to a wide table, so the rail is drawn around it instead (the ::before ring shows through this transparent border). */ border: 22px solid transparent; background: url(/table/gameplay_background.png) center / cover no-repeat, var(--theme-bg-card); background-clip: padding-box; /* after the shorthand, which would reset it */ box-shadow: inset 0 0 0 2px rgba(214, 167, 74, .5), inset 0 0 0 3px rgba(20, 10, 3, .5), inset 0 0 0 4px rgba(214, 167, 74, .3), inset 0 0 48px rgba(0, 0, 0, .55), 0 14px 34px rgba(0, 0, 0, .55); } :root[data-theme="light"] .felt { background-image: url(/table/gameplay_background_light.png); } /* The rail: turned wood with a grain, a lit top edge and a shadowed underside, and three fine brass stringing lines set into it. A ring only — the mask cuts the felt's own box out of it. Dark themes get walnut; the light theme a light honey oak. */ .felt::before { --rail-1: #6a3a17; --rail-2: #4e2a10; --rail-3: #34190a; --rail-4: #26120a; --rail-5: #47260f; --rail-inlay: rgba(214, 167, 74, .7); --rail-dark: rgba(20, 10, 3, .6); content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 48px; padding: 22px; box-sizing: border-box; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); background: repeating-linear-gradient(100deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 6px, rgba(255, 225, 170, .10) 6px 8px, transparent 8px 13px), linear-gradient(180deg, var(--rail-1) 0%, var(--rail-2) 25%, var(--rail-3) 50%, var(--rail-4) 75%, var(--rail-5) 100%); box-shadow: inset 0 3px 3px rgba(255, 230, 180, .45), inset 0 -4px 5px rgba(0, 0, 0, .65), /* three stringing lines, each a brass thread between two dark ones */ inset 0 0 0 3px var(--rail-dark), inset 0 0 0 4px var(--rail-inlay), inset 0 0 0 5px var(--rail-dark), inset 0 0 0 10px var(--rail-dark), inset 0 0 0 11px var(--rail-inlay), inset 0 0 0 12px var(--rail-dark), inset 0 0 0 17px var(--rail-dark), inset 0 0 0 18px var(--rail-inlay), inset 0 0 0 19px var(--rail-dark); } :root[data-theme="light"] .felt::before { --rail-1: #e8b96f; --rail-2: #d6a252; --rail-3: #bb853c; --rail-4: #a3702e; --rail-5: #cc984a; --rail-inlay: rgba(255, 236, 170, .8); --rail-dark: rgba(70, 40, 10, .55); } /* The strip: every seat, the local player first, scrolling sideways when six will not fit. */ .player-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; } .player-tile { flex: 0 0 auto; min-width: 104px; padding: 10px 6px 6px; border-radius: 16px; border: 2px solid var(--theme-border); background: var(--theme-bg-card); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; transition: border-color var(--t-fast), box-shadow var(--t-med); } .player-tile--turn { border-color: var(--theme-accent-bright); background: var(--theme-bg-surface); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent) 55%, transparent); } .player-tile--timing-out { border-color: #ffa726; box-shadow: 0 0 16px rgba(255, 167, 38, .75); } .player-tile--won { border-color: #66bb6a; box-shadow: 0 0 18px rgba(102, 187, 106, .85); } .tile-avatar { position: relative; width: 64px; height: 64px; } .tile-avatar-img { width: 56px; height: 56px; margin: 4px; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--accent); background: var(--theme-bg-deep); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); } .tile-badge { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #fff; color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; } .tile-spinner { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--accent); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .tile-flag { position: absolute; top: 2px; right: 0; padding: 1px 5px; border-radius: 8px; border: 1.5px solid; font-size: 8px; font-weight: 700; letter-spacing: .04em; } .tile-flag--pass { background: #dd263238; border-color: #ffa726; color: #ffa726; } .tile-flag--ai { background: #dd1b2a3a; border-color: #64b5f6; color: #64b5f6; } /* The seat-control line reads in the badge's blue so it is not mistaken for a score. */ .player-tile--auto .tile-sub { color: #64b5f6; font-weight: 700; } .tile-flag--belote { top: auto; right: auto; bottom: 2px; left: 0; background: #dd1a237e; border-color: #ffd54f; color: #ffd54f; } .tile-countdown { position: absolute; bottom: 2px; right: 2px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid; background: #dd111111; font-size: 9px; font-weight: 700; display: grid; place-items: center; } .tile-name { font-size: 13px; font-weight: 700; color: var(--theme-text-primary); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile-sub { font-size: 12px; color: var(--theme-text-secondary); white-space: nowrap; } .tile-detail { font-size: 11px; color: var(--theme-text-secondary); white-space: nowrap; } .tile-stat { font-size: 11px; color: var(--theme-text-secondary); white-space: nowrap; } .tile-stat--hearts { color: var(--theme-danger-soft); } .tile-stat--blue { color: #90caf9; } .tile-stat--gold { color: #ffd54f; font-weight: 700; } .tile-team { font-size: 10px; font-weight: 700; } /* The middle of the table: the trick, or whatever piles the game plays from. */ .table-centre-area { flex: 1; display: grid; place-items: center; min-height: 240px; } .table-centre { display: grid; place-items: center; } /* Played cards fan sideways from the first, each showing a 32px step of the one before. */ .trick { position: relative; display: flex; justify-content: center; align-items: center; min-height: 150px; } .trick-slot { width: 96px; height: 134px; position: relative; z-index: var(--i, 0); } .trick-slot + .trick-slot { margin-left: -64px; } .trick-slot--next { pointer-events: none; } .table-page[data-game="HighCard"] .trick-slot--next { display: none; } .trick-card { width: 96px; height: 134px; animation: play-in var(--t-med) var(--ease) both; } @keyframes play-in { from { transform: scale(.7); opacity: 0 } to { transform: none; opacity: 1 } } .table-page[data-game="HighCard"] .trick { flex-wrap: wrap; gap: 28px 40px; max-width: 520px; } .table-page[data-game="HighCard"] .trick-slot + .trick-slot { margin-left: 0; } .table-page[data-game="HighCard"] .trick-slot { height: 164px; } .table-page[data-game="HighCard"] .trick-slot::after { content: attr(data-name); display: block; margin-top: 8px; text-align: center; font-size: 17px; color: var(--theme-text-primary); text-shadow: 0 1px 2px rgba(0,0,0,.6); } .deck { position: relative; width: 96px; height: 134px; } /* A card in flight between two places on the page (cardGames.flight). */ .flight-card { position: fixed; left: 0; top: 0; width: 96px; height: 134px; z-index: 40; pointer-events: none; border-radius: var(--card-radius); background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); } .deck-card { position: absolute; top: 0; left: 0; width: 96px; height: 134px; border-radius: var(--card-radius); box-shadow: var(--shadow-card); } .deck-card:nth-child(2) { transform: translate(3px, -3px); } .deck-card:nth-child(3) { transform: translate(6px, -6px); } /* Draw-and-discard games put their piles in the middle instead of a trick: the draw shoe on the left, the discard in the middle, the trump or wild joker on the right, as on the phone. */ .table-centre { width: 100%; } .piles { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; width: min(100%, 620px); margin: 0 auto; } .pile { display: flex; flex-direction: column; align-items: center; gap: 6px; } .pile--draw { justify-self: start; } .pile--side { justify-self: end; } .pile-label--gold { color: var(--theme-accent-bright); font-weight: 700; } /* The phone's shoe: a dark tray the draw pile sits in, with a darker lip along the bottom. */ .shoe { position: relative; width: 106px; height: 156px; padding: 8px 8px 0; border-radius: 6px; background: #2b2b2b; display: flex; justify-content: center; align-items: flex-start; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); } .shoe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; border-radius: 0 0 6px 6px; background: #151515; } .shoe .pile-empty { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .5); } .pile-btn { width: 90px; height: 126px; padding: 0; border: 0; background: none; border-radius: var(--card-radius); display: grid; place-items: center; cursor: pointer; } .pile-btn:disabled { cursor: default; } .pile-btn:not(:disabled):hover { transform: translateY(-3px); } .pile-btn:not(:disabled) { transition: transform var(--t-fast) var(--ease); box-shadow: 0 0 0 2px var(--theme-accent); } .pile-btn--static { cursor: default; box-shadow: none; } .pile-card { width: 90px; height: 126px; } .pile-empty { width: 90px; height: 126px; display: grid; place-items: center; border: 2px dashed var(--theme-text-muted); border-radius: var(--card-radius); color: var(--theme-text-muted); font-size: 12px; } .pile-label { font-size: 18px; color: var(--theme-text-primary); text-shadow: 0 1px 2px rgba(0,0,0,.6); } .pile-count { font-size: 17px; font-variant-numeric: tabular-nums; color: var(--theme-text-primary); text-shadow: 0 1px 2px rgba(0,0,0,.6); } .status { display: contents; } .status-error { color: var(--theme-danger-bright); font-weight: 600; } .status-hint { font-size: 14px; } /* The foot: bars and dialogs, then the action buttons as the phone's pills. */ .table-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; } .action-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 44px; align-items: center; } .action-bar .btn { border-radius: 14px; min-height: 42px; padding: 8px 22px; font-weight: 700; border-width: 1.5px; } /* The sort bar under the hand: icon buttons, the count in gold, a green tick and a red cross. */ .sort-bar { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 48px; } .sort-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--theme-accent-bright); cursor: pointer; } .sort-btn:disabled { opacity: .45; cursor: default; } .sort-btn:not(:disabled):hover { background: rgba(255, 255, 255, .08); } .sort-btn--ok { background: rgba(27, 94, 32, .8); } .sort-btn--cancel { background: rgba(109, 22, 22, .8); } .sort-icon { width: 39px; height: 39px; display: block; } .sort-icon--arrow { width: 36px; height: 36px; } .sort-count, .sort-label, .sort-index { font-size: 13px; font-weight: 700; color: #ffd700; letter-spacing: .06em; } .sort-total { color: var(--theme-text-muted); font-weight: 400; } .sort-lock { font-size: 15px; } /* Bars under the hand sit like the phone's bottom row: pill buttons, no box around them. */ .pass-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 4px 0; } .pass-bar .btn { border-radius: 14px; min-height: 42px; padding: 8px 22px; font-weight: 700; border-width: 1.5px; } .pass-text { font-weight: 600; } .pass-count { font-variant-numeric: tabular-nums; color: var(--theme-accent-bright); font-weight: 700; } .countdown { align-self: center; padding: 4px 14px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .13); } .countdown--warn { background: rgba(255, 167, 38, .2); color: #ffb74d; } .countdown--urgent { background: rgba(255, 82, 82, .22); color: #ff7b7b; } /* Durak: the bout, attacks in a row with covers laid across them, and the stock beside. */ .bout-pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 140px; padding-top: 44px; align-items: flex-start; } .bout-pair { position: relative; width: 90px; height: 126px; } .bout-pair--covered { width: 138px; } .bout-card { position: absolute; width: 90px; height: 126px; } .bout-card--attack { top: 0; left: 0; } .bout-card--defense { top: 0; left: 48px; animation: play-in var(--t-med) var(--ease) both; } .bout-pair--open .bout-card--attack { box-shadow: 0 0 0 2px var(--theme-danger-bright); } /* Big Two: the current play, a row of up to five cards in the middle of the felt. */ .play-row { display: flex; min-height: 140px; align-items: center; justify-content: center; } .play-row-card { width: 90px; height: 126px; animation: play-in var(--t-med) var(--ease) both; } .play-row-card + .play-row-card { margin-left: -60px; } .play-row-empty { color: var(--theme-text-muted); font-size: 13px; } .chip--warn { background: color-mix(in srgb, var(--theme-danger-bright) 22%, transparent); color: var(--theme-danger-bright); } /* Belote: the second-round suit picker in the auction bar. */ .suit-picker { display: inline-flex; gap: 6px; } .suit-btn { min-width: 40px; font-size: 18px; padding: 4px 8px; } .suit-btn--on { box-shadow: 0 0 0 2px var(--theme-accent); } /* Bluff: the face-down claim pile in the middle of the felt, and the rank picker. */ .claim-pile { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 140px; justify-content: center; } .claim-stack { position: relative; width: 90px; height: 126px; } .claim-stack .pile-card { position: absolute; top: 0; left: 0; } .claim-text { font-size: 14px; color: var(--theme-text-secondary); } .rank-picker { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; } .rank-btn { min-width: 44px; } /* Cribbage: the pegging row, the starter, and the face-down crib in the middle of the felt. */ .crib-table { display: flex; justify-content: center; } .peg-row { display: flex; min-height: 126px; align-items: center; } /* Cards */ .card { display: block; padding: 0; border: 0; background: transparent; border-radius: var(--card-radius); box-shadow: var(--shadow-card); } .card-img { display: block; width: 100%; height: 100%; border-radius: var(--card-radius); background: #fff; } .hand { position: relative; width: 100%; max-width: var(--max-width); } .hand-card { position: absolute; transform-origin: 50% 100%; transform: rotate(var(--rot)); transition: left var(--t-med) var(--ease), top var(--t-med) var(--ease), transform var(--t-med) var(--ease), filter var(--t-fast); cursor: default; } button.hand-card { cursor: pointer; } button.hand-card:hover:not(:disabled), button.hand-card:focus-visible { transform: rotate(var(--rot)) translateY(-14px); z-index: 100 !important; } .card--playable { filter: none; } .card--disabled { cursor: default; } button.hand-card:disabled { filter: saturate(.85) brightness(.92); } button.hand-card:not(:disabled):not(.card--playable):not(.card--selected) { filter: saturate(.6) brightness(.72); } .card--selected { box-shadow: 0 0 0 3px var(--theme-accent), var(--shadow-card); } .card--dealt { animation: deal-in var(--t-deal) var(--ease) both; animation-delay: calc(var(--deal-index, 0) * 40ms); } @keyframes deal-in { from { transform: translate(0, -260px) rotate(var(--rot)) scale(.6); opacity: 0 } to { transform: rotate(var(--rot)); opacity: 1 } } /* Dialogs */ .scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--theme-scrim); animation: fade var(--t-med) both; } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } .dialog { width: min(520px, 92vw); padding: 26px 28px; border-radius: 16px; /* Palette surfaces can carry alpha; stack one over the page colour so the dialog is opaque. */ background: linear-gradient(var(--theme-bg-surface), var(--theme-bg-surface)), var(--theme-bg-page); box-shadow: 0 20px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 16px; } .dialog h2 { font-size: 26px; } .dialog-note { margin: 0; color: var(--theme-accent-bright); font-weight: 600; } /* Signed out, every page is this: the brand and the sign-in card, centred where the page would be. */ .sign-in-gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 40px var(--gutter); } /* The product's name, as the card games page on vanikar.games sets it: the mark, Cinzel in gold, and the one-line promise in the muted green. */ .brand-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; max-width: 520px; } .brand-block p { margin: 0; } .brand-block-mark { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); } .brand-block-name { font-family: var(--font-brand); font-weight: 700; font-size: 30px; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-accent-bright); line-height: 1.1; } .brand-block-by { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-text-secondary); } .brand-block-lead { margin-top: 8px !important; font-size: 15px; line-height: 1.5; color: var(--theme-text-muted); max-width: 46ch; } .account .brand-block { align-items: flex-start; text-align: left; margin: 18px 0 22px; } .dialog-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } .scores { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .scores th, .scores td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--theme-highlight-soft); } .scores th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--theme-text-muted); } .scores .num { text-align: right; } .scores--me td { color: var(--theme-accent-bright); font-weight: 700; } /* Light themes: the tokens flip; adjust the few hardcoded blacks. */ :root[data-theme="light"] .card-img { background: #fff; } /* Spades bidding bar and team chips */ .bid-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(92%, 380px); padding: 22px 20px; border-radius: 18px; border: 1.5px solid #4caf50; background: rgba(6, 30, 12, .92); box-shadow: 0 10px 30px rgba(0,0,0,.5); } .bid-title { margin: 0; font-size: 24px; font-weight: 600; color: #fff; } .bid-teams { display: flex; gap: 22px; font-size: 18px; font-weight: 600; } .bid-us { color: #90caf9; } .bid-them { color: #ef9a9a; } .bid-stepper { display: flex; gap: 16px; align-items: stretch; } .bid-step, .bid-value { display: grid; place-items: center; min-width: 72px; height: 62px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; } .bid-step { border: 0; font-size: 28px; line-height: 1; cursor: pointer; } .bid-step:disabled { opacity: .4; cursor: default; } .bid-value { min-width: 96px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 34px; } .bid-note { color: var(--theme-text-secondary); font-size: 15px; } .chip--bids { color: var(--theme-text-secondary); } .scores th[scope="row"] { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--theme-text-secondary); font-weight: 600; } .scores small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--theme-text-muted); } /* Multi-line dialog text (High Card scores arrive as one string with newlines). */ .dialog-lines { margin: 0; white-space: pre-line; color: var(--theme-text-secondary); font-variant-numeric: tabular-nums; } /* ── Account pages ──────────────────────────────────────────────────────────── */ .account { max-width: 480px; } .account h2 { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--theme-text-secondary); margin: 28px 0 6px; } .account-alt { margin-top: 18px; color: var(--theme-text-secondary); } .account-alt a { color: var(--theme-accent); } .rules { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; font-weight: 500; } .rule { color: var(--theme-text-muted); } .rule::before { content: "○ "; } .rule--met { color: var(--theme-text-primary); } .rule--met::before { content: "● "; } .strength { font-size: 13px; font-weight: 700; margin: 0; } .hint { font-size: 13px; color: var(--theme-text-muted); font-weight: 500; margin: 0; } .status-ok { color: var(--theme-text-primary); font-weight: 600; margin: 0; } .readonly { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--theme-highlight-soft); } .readonly span:first-child { color: var(--theme-text-secondary); font-weight: 600; } .avatar-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; } .avatar-preview { width: 72px; height: 72px; border-radius: 50%; background: var(--theme-bg-card); display: grid; place-items: center; font-size: 40px; overflow: hidden; border: 2px solid var(--theme-highlight-soft); } .avatar-photo { width: 100%; height: 100%; object-fit: cover; } .avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .avatar-option { width: 48px; height: 48px; font-size: 26px; border-radius: 12px; border: 2px solid transparent; background: var(--theme-bg-card); cursor: pointer; } .avatar-option--selected { border-color: var(--theme-accent); } .topbar-link { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; } .topbar-account { font-weight: 700; } /* ── Online: hub, waiting room, countdown ───────────────────────────────────── */ /* ── Online: the phone's lobby, join sheet and table lobby ──────────────────── */ .online-title { text-align: center; } .online-lede { text-align: center; } .back-button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; } /* Two ways in, each a gold-edged card with an icon, a title, a line and a chevron. */ .option-cards { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; } .option-card { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 18px; text-align: left; border: 2px solid var(--theme-accent-bright); background: var(--theme-bg-card); color: var(--theme-text-primary); text-decoration: none; font: inherit; cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast); } .option-card:hover, .option-card:focus-visible { transform: translateY(-2px); background: var(--theme-bg-surface); } .option-icon { font-size: 40px; line-height: 1; width: 56px; text-align: center; flex: none; } .option-text { flex: 1; display: flex; flex-direction: column; gap: 4px; } .option-title { font-size: 22px; font-weight: 700; } .option-body { font-size: 15px; color: var(--theme-text-secondary); } .option-chevron { font-size: 30px; color: var(--theme-accent-bright); } /* The join sheet: a green card with icon-led fields and one gold verb. */ .join { max-width: 520px; } .join-card { display: flex; flex-direction: column; gap: 14px; padding: 26px 22px; border-radius: 22px; border: 2px solid var(--theme-accent-bright); background: var(--theme-bg-card); } .join-title { margin: 0; font-family: var(--font-body); font-size: 28px; font-weight: 700; text-align: center; color: var(--theme-accent-bright); } .join-lede { margin: -6px 0 4px; text-align: center; color: var(--theme-text-secondary); } .join-form { display: contents; } .join-field { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--theme-accent-bright); background: var(--theme-bg-deep); } .join-icon { font-size: 20px; flex: none; } .join-input { flex: 1; font: inherit; font-size: 19px; color: var(--theme-text-primary); background: none; border: 0; border-bottom: 1px solid var(--theme-highlight-soft); padding: 4px 0; outline: none; } .join-input::placeholder { color: var(--theme-text-secondary); } .join-details { margin: 0; display: flex; flex-direction: column; gap: 8px; } .join-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--theme-highlight-soft); } .join-row dt { color: var(--theme-text-secondary); } .join-row dd { margin: 0; font-weight: 700; } /* The table lobby: a dark card over the felt, gold-edged, with the seats in a row. */ .lobby { flex: 1; display: flex; flex-direction: column; max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 8px var(--gutter) 18px; } .lobby-felt { flex: 1; display: grid; place-items: center; padding: 28px 16px; min-height: 560px; } .lobby-card { display: flex; flex-direction: column; gap: 12px; width: min(100%, 560px); padding: 26px 22px; border-radius: 22px; border: 2px solid var(--theme-accent-bright); background: #17151f; color: #fffbe6; box-shadow: 0 16px 40px rgba(0,0,0,.55); } .lobby-title { margin: 0; font-family: var(--font-body); font-size: 28px; font-weight: 700; text-align: center; color: #ffd700; } .lobby-sub { margin: -6px 0 2px; text-align: center; color: #e6e1cc; } .lobby-code { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; border-radius: 12px; background: #0f1f16; border: 1px solid #2d4a37; } .lobby-code-text { display: flex; flex-direction: column; gap: 2px; } .lobby-code-label { font-size: 13px; color: #aaaaaa; } .lobby-code strong { font-size: 30px; letter-spacing: .2em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #fffbe6; } .lobby-section { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #aaaaaa; margin-top: 6px; } .lobby-slots { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .lobby-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 118px; min-height: 116px; padding: 10px 6px; border-radius: 14px; background: #1a1c2e; border: 1.5px solid #3a3d55; color: #fffbe6; text-align: center; } .lobby-slot--waiting { color: #b0b0b8; } .lobby-slot--local { background: #2a1f4a; border-color: #9977cc; } .lobby-slot--pick { background: #141a38; border-color: #5577ff; } .lobby-slot--confirmed { background: #0a2818; border-color: #33cc77; } .lobby-slot--pickable { cursor: pointer; } .lobby-slot--pickable:hover { border-color: #8899ff; } .lobby-avatar { font-size: 24px; line-height: 1; color: #666688; } .lobby-slot--local .lobby-avatar { color: #bb99ee; } .lobby-slot--host .lobby-avatar { color: #ffd700; } .lobby-spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid #888899; border-top-color: transparent; animation: spin 1s linear infinite; } .lobby-slot-name { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lobby-slot-you { font-size: 12px; color: #bb99ee; } .lobby-slot-partner { font-size: 11px; font-weight: 700; color: #5577ff; } .lobby-slot-partner--confirmed { color: #33cc77; } .lobby-hint { margin: 0; text-align: center; font-size: 13px; color: #aaaaaa; } .lobby-voice { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #1a1d3a; border: 1px solid #5865f2; } .lobby-voice-head { display: flex; align-items: center; justify-content: space-between; } .lobby-voice-state { margin: 0; color: #aab2ff; } .lobby-voice-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* The lobby's buttons are the phone's own, not the table's role tokens. */ .btn-gold { background: #ffd700; color: #1e1b2e; border-color: #ffd700; font-weight: 700; } .btn-gold:disabled { opacity: .45; } .btn-outline { background: transparent; color: #e6e1cc; border-color: #4a4d66; } .btn-outline-gold { background: transparent; color: #ffd700; border-color: #ffd700; } .btn-voice { background: transparent; color: #aab2ff; border-color: #5865f2; } .btn-leave { background: transparent; color: #ff6b6b; border-color: #ff6b6b; } .lobby-card .btn, .join-card .btn { border-radius: 12px; border-width: 1.5px; } /* The phone's table notice and Resume bar: over the felt, under the chips. */ .table-notice { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } .chip--notice { white-space: normal; text-align: center; max-width: 520px; background: rgba(27, 42, 58, .9); border: 1px solid #64b5f6; color: #e3f2fd; font-size: 14px; } .btn-resume { background: #64b5f6; color: #0d1b2a; border-color: #64b5f6; border-radius: 12px; font-weight: 700; } /* Home's way back to a table still running: the phone's rejoin banner. */ .rejoin-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 18px; padding: 12px 18px; max-width: 720px; border-radius: 14px; background: rgba(27, 42, 58, .9); border: 1px solid #64b5f6; color: #e3f2fd; } .rejoin-banner p { margin: 0; font-weight: 600; }