/* ── lightlol.com theme, ported ────────────────────────────────────────
Poker is a separate deployable service from lightlol.com/infotech, so
this is a self-contained copy of the design tokens and the handful of
components these screens need — not a to lightlol.com's own
stylesheet. Linking cross-origin would work today, but it would mean
poker's look silently depends on lightlol.com's static assets never
moving or changing shape, which is exactly the kind of hidden coupling
the identity-service split (see IDENTITY_SERVICE_URL) was deliberately
explicit about instead of assuming.
Source of truth for these values: lightlol/static/css/style.css :root.
If that theme changes, this file needs a manual pass to match — there's
no build step tying the two together. */
:root {
--bg: #E4E7EB;
--surface-1: #FFFFFF;
--surface-2: #D8DCE1;
--border: rgba(25, 30, 40, 0.08);
--border-strong: rgba(25, 30, 40, 0.16);
--text: #20242C;
--text-mid: #5C6270;
--text-muted: #6E7481;
--accent: #FFE438;
--accent-hover: #FFE95C;
--on-accent: #241800;
--white: #ffffff;
--danger: #D1453A;
--danger-deep: #A3352B;
--font-display: 'Raleway', sans-serif;
--font-body: 'Inter', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Stops iOS Safari's double-tap-to-zoom (a second quick tap on the same
spot — tapping "11" or "22" on a number pad, tapping Hit twice, and so
on). The viewport meta's maximum-scale/user-scalable are ignored by
iOS for accessibility, so this CSS is the thing that actually works.
"manipulation" keeps scrolling and pinch-zoom; it only removes the
double-tap gesture (and the 300ms tap delay that comes with it). The
effective value is the intersection down the tree, so setting it on
covers every button/cell without touching each one. */
html, body {
touch-action: manipulation;
height: 100%;
font-family: var(--font-body);
background: radial-gradient(120% 100% at 50% -8%, var(--surface-1) 0%, var(--bg) 55%);
background-attachment: fixed;
color: var(--text);
line-height: 1.5;
}
h1, h2, h3 {
font-family: var(--font-display);
color: var(--text);
}
/* ── Card container, matching lightlol's login/register cards exactly ── */
.auth-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100dvh;
padding: 2rem 1rem;
gap: 1.25rem;
}
.auth-card {
width: 100%;
max-width: 440px;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: 14px;
padding: 2.25rem 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.auth-card h1 {
text-align: center;
font-size: 1.6rem;
font-weight: 800;
margin: 0 0 1.75rem;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.auth-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.auth-field label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-mid);
}
.auth-field input {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.7rem 0.9rem;
font-size: 1rem;
font-family: var(--font-body);
color: var(--text);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-field input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(255, 228, 56, 0.2);
}
.auth-field small {
font-size: 0.75rem;
color: var(--text-muted);
}
/* ── Color picker ──
No longer used on the join screen itself (color is auto-assigned now
— see randomPaletteColor() in index.html's script) but kept unscoped
here since the in-game Settings modal's "Your Color" section (see
game.html) reuses these same .color-picker/.color-swatch classes. */
.color-picker {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.2rem;
}
.color-swatch {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--border);
cursor: pointer;
padding: 0;
transition: border-color 0.15s ease, transform 0.1s ease;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.selected {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(255, 228, 56, 0.25);
}
.stats-hint {
margin-top: 0.75rem;
text-align: center;
font-size: 0.75rem;
color: var(--text-muted);
}
/* Primary action inside a form — same accent-colored pill everywhere on the site
(login, register, resend-verify all use this same bare-button rule). */
/* :not(.icon-btn) matters here — the chip-count steppers in screen-setup
are