/* ── lightlol.com theme, ported ──────────────────────────────────────── Sudoku 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. See every other game's theme.css for the same reasoning. 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; --success: #3FA96A; --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.78rem; font-weight: 500; color: var(--text-mid); } .stats-hint { margin-top: 0.75rem; text-align: center; font-size: 0.75rem; color: var(--text-muted); } .auth-form button:not(.icon-btn) { margin-top: 0.5rem; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; padding: 0.8rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .auth-form button:not(.icon-btn):hover { background: var(--accent-hover); } .auth-form button:not(.icon-btn):active { transform: scale(0.98); } .auth-form button:not(.icon-btn):disabled { opacity: 0.4; cursor: default; transform: none; } .auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.4rem 0 1.1rem; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .icon-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .icon-btn:hover { border-color: var(--accent); background: var(--surface-1); } .icon-btn:active { transform: scale(0.92); } .color-assigned-hint { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; color: var(--text-muted); } .my-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border-strong); flex-shrink: 0; }