/* ============================================================ Wordist Hub — Global Styles Theme variables, base reset, marquee, scrollbar, utilities. ============================================================ */ /* ────────────────────────────────────────────────────────────── THEME: DARK (default) Applied when (or unset). ────────────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { /* ── Site palette ── */ --color-bg: #0A0E1A; --color-surface: #111827; --color-panel: #1F2937; --color-border: #374151; --color-violet: #7C3AED; --color-violet-lt: #A78BFA; --color-teal: #0D9488; --color-gold: #F59E0B; --color-text: #F1F5F9; --color-muted: #94A3B8; /* ── Tile skin: Classic Ivory ── */ --tile-bg: #F5F0E8; --tile-bg-end: #E6DDC8; --tile-shadow-clr: #A89870; --tile-letter-clr: #1A1A2E; --tile-score-clr: #4A3E28; --tile-border-clr: #CEC0A4; /* ── Layout chrome ── */ --banner-bg: linear-gradient(180deg, #0D1220 0%, #111827 100%); --banner-border: #1F2937; --banner-shadow: 0 1px 0 rgba(124, 58, 237, 0.25), 0 4px 24px rgba(0, 0, 0, 0.4); --nav-bg: #0F1629; --nav-border: #1F2937; --marquee-bg: #080C18; --marquee-border: rgba(124, 58, 237, 0.35); --marquee-text: #94A3B8; --marquee-shadow: inset 0 1px 0 rgba(124, 58, 237, 0.2); /* ── Input / form elements ── */ --input-bg: #1F2937; --input-border: #374151; --input-text: #F1F5F9; --input-placeholder: #64748B; /* ── Dropdown / popover ── */ --popup-bg: #1A2035; --popup-border: #2D3748; --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); /* ── Card / content surfaces ── */ --color-surface-2: #1E1E2E; --color-surface-3: #16162A; /* ── Game: grid cells ── */ --cell-bg: #1A2035; --cell-border: #2A3550; --cell-selected: rgba(124, 58, 237, 0.25); /* ── Game: modifier badges ── */ --mod-word-bg: rgba(16, 185, 129, 0.12); --mod-word-border: rgba(16, 185, 129, 0.4); --mod-word-text: #10B981; --mod-letter-bg: rgba(59, 130, 246, 0.12); --mod-letter-border: rgba(59, 130, 246, 0.4); --mod-letter-text: #60A5FA; /* ── Game: stage & HUD ── */ --stage-bg: var(--board-surface, #131928); --stage-border: rgba(124, 58, 237, 0.3); --hud-bg: rgba(17, 24, 39, 0.95); --hud-border: rgba(124, 58, 237, 0.2); /* ── Game components (WASM tile/grid/stage variables) ── */ --color-accent: #8B5CF6; --color-accent-hover: #7C3AED; --color-text-primary: #F1F5F9; --color-text-secondary: #94A3B8; --tile-size: 58px; --tile-bg: #2A2A3A; --tile-text: #E0D8FF; --tile-border: #3D3D55; --tile-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); --tile-selected-bg: #8B5CF6; --tile-selected-text: #ffffff; --tile-selected-glow: 0 4px 12px rgba(139, 92, 246, 0.45); --grid-bg: #14141E; --grid-cell-bg: #1A1A28; --grid-cell-border: #2A2A3D; --grid-cell-hover: #2D2A45; --grid-row0-highlight: rgba(139, 92, 246, 0.15); --grid-row0-highlight-border: #8B5CF6; --stage-slot-bg: var(--board-surface, #1A1A28); --stage-slot-border: var(--board-border, #2A2A3D); --cell-2x-letter-bg: #142238; --cell-3x-letter-bg: #142238; --cell-4x-letter-bg: #142238; --cell-5x-letter-bg: #142238; --cell-2x-word-bg: #2A1A2A; --cell-3x-word-bg: #381438; /* ── Board-area theming (overridable by board skins) ── */ --board-surface: #111827; --board-border: #374151; --board-text: #F1F5F9; --board-text-secondary: #94A3B8; --board-accent: #8B5CF6; --board-accent-hover: #7C3AED; --board-accent-glow: rgba(139, 92, 246, 0.3); --board-btn-text: #fff; --board-error: #ef4444; --board-error-bg: #7f1d1d; --board-error-text: #fecaca; --board-bonus: #F59E0B; --board-bonus-glow: rgba(245, 158, 11, 0.08); --board-og: #d97706; --board-og-hover: #b45309; } /* ────────────────────────────────────────────────────────────── THEME: LIGHT Applied when . ────────────────────────────────────────────────────────────── */ [data-theme="light"] { /* ── Site palette ── */ --color-bg: #F0F4FF; --color-surface: #FFFFFF; --color-panel: #F1F5F9; --color-border: #CBD5E1; --color-violet: #7C3AED; --color-violet-lt: #6D28D9; --color-teal: #0F766E; --color-gold: #D97706; --color-text: #0F172A; --color-muted: #64748B; /* ── Tile skin: Classic Ivory (same in both themes) ── */ --tile-bg: #F5F0E8; --tile-bg-end: #E6DDC8; --tile-shadow-clr: #A89870; --tile-letter-clr: #1A1A2E; --tile-score-clr: #4A3E28; --tile-border-clr: #CEC0A4; /* ── Layout chrome ── */ --banner-bg: linear-gradient(180deg, #EEF2FF 0%, #E8EFFF 100%); --banner-border: #C7D2FE; --banner-shadow: 0 1px 0 rgba(124, 58, 237, 0.2), 0 4px 16px rgba(99, 102, 241, 0.1); --nav-bg: #E0E7FF; --nav-border: #C7D2FE; --marquee-bg: #EEF2FF; --marquee-border: rgba(124, 58, 237, 0.25); --marquee-text: #64748B; --marquee-shadow: inset 0 1px 0 rgba(124, 58, 237, 0.1); /* ── Input / form elements ── */ --input-bg: #FFFFFF; --input-border: #CBD5E1; --input-text: #0F172A; --input-placeholder: #94A3B8; /* ── Dropdown / popover ── */ --popup-bg: #FFFFFF; --popup-border: #E2E8F0; --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); /* ── Card / content surfaces ── */ --color-surface-2: #FFFFFF; --color-surface-3: #F8FAFC; /* ── Game: grid cells ── */ --cell-bg: #E8EFFF; --cell-border: #C7D2FE; --cell-selected: rgba(124, 58, 237, 0.15); /* ── Game: modifier badges ── */ --mod-word-bg: rgba(16, 185, 129, 0.1); --mod-word-border: rgba(16, 185, 129, 0.4); --mod-word-text: #059669; --mod-letter-bg: rgba(59, 130, 246, 0.1); --mod-letter-border: rgba(59, 130, 246, 0.4); --mod-letter-text: #2563EB; /* ── Game: stage & HUD ── */ --stage-bg: var(--board-surface, #EEF2FF); --stage-border: rgba(124, 58, 237, 0.25); --hud-bg: rgba(255, 255, 255, 0.95); --hud-border: rgba(124, 58, 237, 0.2); /* ── Game components (WASM tile/grid/stage variables) ── */ --color-accent: #8B5CF6; --color-accent-hover: #7C3AED; --color-text-primary: #0F172A; --color-text-secondary: #64748B; --tile-size: 58px; --tile-bg: #FFFFFF; --tile-text: #1A1A2E; --tile-border: #D0C8F0; --tile-shadow: 0 2px 6px rgba(139, 92, 246, 0.15); --tile-selected-bg: #8B5CF6; --tile-selected-text: #ffffff; --grid-bg: #E8E4F4; --grid-cell-bg: #F5F3FF; --grid-cell-border: #D8D0F0; --grid-cell-hover: #EDE8FF; --grid-row0-highlight: rgba(139, 92, 246, 0.12); --grid-row0-highlight-border: #8B5CF6; --stage-slot-bg: var(--board-surface, #F5F3FF); --stage-slot-border: var(--board-border, #C8C0E8); --cell-2x-letter-bg: #E0F0FF; --cell-3x-letter-bg: #CCE6FF; --cell-2x-word-bg: #FFE0FF; --cell-3x-word-bg: #FFCCFF; /* ── Board-area theming (overridable by board skins) ── */ --board-surface: #FFFFFF; --board-border: #CBD5E1; --board-text: #0F172A; --board-text-secondary: #64748B; --board-accent: #8B5CF6; --board-accent-hover: #7C3AED; --board-accent-glow: rgba(139, 92, 246, 0.2); --board-btn-text: #fff; --board-error: #ef4444; --board-error-bg: #fef2f2; --board-error-text: #991b1b; --board-bonus: #D97706; --board-bonus-glow: rgba(217, 119, 6, 0.08); --board-og: #d97706; --board-og-hover: #b45309; } /* ────────────────────────────────────────────────────────────── BASE RESET ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Nunito', system-ui, sans-serif; background: var(--color-bg); color: var(--color-text); min-height: 100vh; } /* ────────────────────────────────────────────────────────────── SCROLLBAR (Webkit) ────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--color-surface); } ::-webkit-scrollbar-thumb { background: var(--color-violet); border-radius: 3px; } /* ────────────────────────────────────────────────────────────── MARQUEE ANIMATION ────────────────────────────────────────────────────────────── */ .marquee-inner { display: inline-block; white-space: nowrap; will-change: transform; /* Animation driven by JS (marquee-live.js) for jerk-free dynamic content updates. */ } /* ────────────────────────────────────────────────────────────── ICON BUTTON ────────────────────────────────────────────────────────────── */ .icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; color: var(--color-muted); border-radius: 50%; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease; text-decoration: none; } .icon-btn:hover { color: var(--color-text); background-color: rgba(124, 58, 237, 0.15); transform: scale(1.1); } .icon-btn svg { width: 22px; height: 22px; stroke-width: 1.75; } /* ────────────────────────────────────────────────────────────── AUTH NAV (AuthNav WASM component) ────────────────────────────────────────────────────────────── */ .auth-handle { font-size: 0.8125rem; font-weight: 600; color: var(--color-accent); padding: 0 0.25rem; } .auth-link { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); text-decoration: none; padding: 0 0.25rem; transition: color 0.15s; } .auth-link:hover { color: var(--color-text); } .auth-link-accent { color: var(--color-accent); font-weight: 700; } .auth-link-accent:hover { color: var(--color-accent-hover); } .auth-sep { font-size: 0.75rem; color: var(--color-border); padding: 0 0.1rem; } /* ────────────────────────────────────────────────────────────── NAV LINK ────────────────────────────────────────────────────────────── */ .nav-link-item { position: relative; color: var(--color-muted); text-decoration: none; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 4px; transition: color 0.2s ease; } .nav-link-item::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--color-violet); border-radius: 1px; transition: width 0.25s ease; } .nav-link-item:hover { color: var(--color-text); } .nav-link-item:hover::after, .nav-link-item.active::after { width: 100%; } .nav-link-item.active { color: var(--color-violet-lt); } /* ────────────────────────────────────────────────────────────── FOCUS MANAGEMENT FocusOnNavigate (Routes.razor) programmatically focuses the first

after every route change for screen-reader support. Suppress the focus ring entirely: h1 elements are not in the natural tab order, so they are only ever focused via this JS call — never by keyboard Tab navigation. On initial page load (before any pointer interaction) browsers classify programmatic focus as "keyboard-context", which makes :focus-visible always true in that moment, so :focus:not(:focus-visible) is not sufficient here. ────────────────────────────────────────────────────────────── */ h1:focus { outline: none; } /* ────────────────────────────────────────────────────────────── BLAZOR ERROR BOUNDARY ────────────────────────────────────────────────────────────── */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #7f1d1d; padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: 6px; margin: 1rem; } .blazor-error-boundary::after { content: "An error has occurred." } /* ────────────────────────────────────────────────────────────── RESPONSIVE — MOBILE ────────────────────────────────────────────────────────────── */ @media (max-width: 850px) { .top-banner { grid-template-columns: auto 1fr !important; } .banner-center { display: none !important; } } /* ────────────────────────────────────────────────────────────── TILE ANIMATIONS (global scope — applied by JS, not Blazor-scoped) These must live in the host app.css so they cascade into the WASM-rendered game components. ────────────────────────────────────────────────────────────── */ @keyframes tile-land { 0% { transform: translateY(-20px) scale(0.85); opacity: 0; } 55% { transform: translateY(3px) scale(1.04); opacity: 1; } 75% { transform: translateY(-2px) scale(0.99); } 100% { transform: translateY(0) scale(1); } } @keyframes tile-shift { 0% { transform: translate(var(--shift-dx, 0), var(--shift-dy, 0)); } 70% { transform: translate(calc(var(--shift-dx, 0) * -0.06), calc(var(--shift-dy, 0) * -0.06)); } 100% { transform: translate(0, 0); } } .tile-landing { animation: tile-land 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .tile-shifting { animation: tile-shift 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* ────────────────────────────────────────────────────────────── AUTH PAGES (Login, Register, AuthComplete) ────────────────────────────────────────────────────────────── */ .auth-page { display: flex; align-items: flex-start; justify-content: center; min-height: calc(100vh - 120px); padding: 4rem 1rem 2rem; } .auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 2.5rem 2rem; width: 100%; max-width: 400px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .auth-card-compact { max-width: 340px; text-align: center; padding: 2rem; } .auth-title { font-size: 1.625rem; font-weight: 900; color: var(--color-text); margin: 0 0 0.4rem; letter-spacing: -0.02em; } .auth-subtitle { font-size: 0.875rem; color: var(--color-muted); margin: 0 0 1.75rem; } .auth-error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); color: #FCA5A5; border-radius: 8px; padding: 0.65rem 0.9rem; font-size: 0.8125rem; margin-bottom: 1.25rem; } .auth-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1.1rem; } .auth-field label { font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); display: flex; justify-content: space-between; align-items: baseline; } .auth-field-hint { font-size: 0.7rem; font-weight: 400; color: var(--color-border); } .auth-input { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); font-size: 0.9375rem; padding: 0.6rem 0.85rem; width: 100%; box-sizing: border-box; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; } .auth-input::placeholder { color: var(--color-border); } .auth-input:focus { border-color: var(--color-violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); } .auth-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.9375rem; font-weight: 700; font-family: inherit; cursor: pointer; border: none; text-decoration: none; transition: opacity 0.15s, transform 0.1s; box-sizing: border-box; margin-bottom: 0.75rem; } .auth-btn:hover { opacity: 0.88; transform: translateY(-1px); } .auth-btn:active { transform: translateY(0); } .auth-btn:disabled, .auth-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .auth-btn-primary { background: var(--color-violet); color: #fff; } .auth-btn-google { background: var(--color-panel); color: var(--color-text); border: 1px solid var(--color-border); font-weight: 600; } .auth-btn-google:hover { border-color: var(--color-violet); } .google-icon { flex-shrink: 0; } .auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--color-border); font-size: 0.8125rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .auth-switch { text-align: center; font-size: 0.8125rem; color: var(--color-muted); margin: 0.5rem 0 0; } .auth-switch a { color: var(--color-violet-lt); text-decoration: none; font-weight: 600; } .auth-switch a:hover { text-decoration: underline; } .auth-anon-note { text-align: center; font-size: 0.75rem; color: var(--color-border); margin: 0.75rem 0 0; } .loading-spinner { width: 36px; height: 36px; border: 3px solid var(--color-border); border-top-color: var(--color-violet); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }