/* ======================================================== WordPlay - Scrabble & Crossplay Helper | app.css ======================================================== */ /* ========================================================== THEME TOKENS — one block per theme, applied via [data-theme="..."] on . Shape/font tokens are shared and live in :root only. ========================================================== */ /* -- SHARED (shape, shadows) ------------------------------ */ :root { --radius: 8px; --radius-lg: 14px; --shadow-tile: 3px 4px 0 var(--tile-shadow); } /* ========================================================== 1. TRADITIONAL / CLASSIC (default — warm parchment) Fonts: Playfair Display · DM Sans · DM Mono ========================================================== */ :root, [data-theme="traditional"] { --font-display: 'Playfair Display', Georgia, serif; --font-ui: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; --tile-bg: #f5e6c8; --tile-border: #c8a96e; --tile-shadow: #9c7a3c; --tile-text: #3b2a0f; --tile-score: #7a4f1e; --bg: #fdf6e3; --bg2: #f0e4c8; --bg3: #e3d4b0; --surface: #fff9ee; --surface2: #f5edd8; --text-primary: #2a1a05; --text-secondary: #6b4c1e; --text-muted: #9c7a3c; --accent: #d4500a; --accent-light: #f07030; --accent-bg: #fde8d8; --green: #2e7d32; --green-bg: #e8f5e9; --border: #d4b88a; --border-light: #e8d4a8; --shadow-sm: 0 1px 3px rgba(60,30,0,.12); --shadow-md: 0 4px 12px rgba(60,30,0,.15); } /* ========================================================== 2. MODERN / MINIMAL (clean neutral grays) Fonts: Inter · Inter · JetBrains Mono ========================================================== */ [data-theme="modern"] { --font-display: 'Inter', system-ui, sans-serif; --font-ui: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --tile-bg: #f0f0f0; --tile-border: #bdbdbd; --tile-shadow: #9e9e9e; --tile-text: #212121; --tile-score: #616161; --bg: #fafafa; --bg2: #f0f0f0; --bg3: #e0e0e0; --surface: #ffffff; --surface2: #f5f5f5; --text-primary: #212121; --text-secondary: #424242; --text-muted: #9e9e9e; --accent: #1976d2; --accent-light: #42a5f5; --accent-bg: #e3f2fd; --green: #388e3c; --green-bg: #e8f5e9; --border: #e0e0e0; --border-light: #eeeeee; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.12); } /* ========================================================== 3. TECH / CYBER / DEVELOPER (dark terminal green) Fonts: Share Tech Mono (all three — pure terminal aesthetic) ========================================================== */ [data-theme="cyber"] { --font-display: 'Share Tech Mono', 'Courier New', monospace; --font-ui: 'Share Tech Mono', 'Courier New', monospace; --font-mono: 'Share Tech Mono', 'Courier New', monospace; --tile-bg: #0d1f0d; --tile-border: #00c853; --tile-shadow: #003300; --tile-text: #00ff41; --tile-score: #69ff47; --bg: #020c02; --bg2: #0a1a0a; --bg3: #112211; --surface: #061306; --surface2: #0d1f0d; --text-primary: #00ff41; --text-secondary: #00c853; --text-muted: #2e7d32; --accent: #00e676; --accent-light: #69ff47; --accent-bg: #003300; --green: #00e676; --green-bg: #003300; --border: #1b5e20; --border-light: #0d3b0d; --shadow-sm: 0 1px 4px rgba(0,255,65,.15); --shadow-md: 0 4px 16px rgba(0,255,65,.2); } /* ========================================================== 4. FUN / PLAYFUL (coral + sunny yellow) Fonts: Fredoka One · Nunito · Inconsolata ========================================================== */ [data-theme="playful"] { --font-display: 'Fredoka One', 'Comic Sans MS', cursive; --font-ui: 'Nunito', system-ui, sans-serif; --font-mono: 'Inconsolata', 'Courier New', monospace; --tile-bg: #fff9c4; --tile-border: #f9a825; --tile-shadow: #e65100; --tile-text: #4a148c; --tile-score: #e65100; --bg: #fffde7; --bg2: #fff9c4; --bg3: #fff176; --surface: #ffffff; --surface2: #fffde7; --text-primary: #1a237e; --text-secondary: #4a148c; --text-muted: #7b1fa2; --accent: #e91e63; --accent-light: #f06292; --accent-bg: #fce4ec; --green: #00897b; --green-bg: #e0f2f1; --border: #f9a825; --border-light: #fff59d; --shadow-sm: 0 2px 6px rgba(233,30,99,.15); --shadow-md: 0 4px 16px rgba(233,30,99,.2); } /* ========================================================== 5. NATURE / CALM (sage greens + earth) Fonts: Lora · Source Sans 3 · Source Code Pro ========================================================== */ [data-theme="nature"] { --font-display: 'Lora', Georgia, serif; --font-ui: 'Source Sans 3', system-ui, sans-serif; --font-mono: 'Source Code Pro', 'Courier New', monospace; --tile-bg: #dcedc8; --tile-border: #8bc34a; --tile-shadow: #558b2f; --tile-text: #1b5e20; --tile-score: #33691e; --bg: #f1f8e9; --bg2: #dcedc8; --bg3: #c5e1a5; --surface: #f9fbe7; --surface2: #f1f8e9; --text-primary: #1b5e20; --text-secondary: #33691e; --text-muted: #558b2f; --accent: #2e7d32; --accent-light: #4caf50; --accent-bg: #c8e6c9; --green: #1b5e20; --green-bg: #c8e6c9; --border: #a5d6a7; --border-light: #c8e6c9; --shadow-sm: 0 1px 3px rgba(27,94,32,.12); --shadow-md: 0 4px 12px rgba(27,94,32,.18); } /* ========================================================== 6. PROFESSIONAL / SAAS DASHBOARD (slate blue-gray) Fonts: IBM Plex Sans · IBM Plex Sans · IBM Plex Mono ========================================================== */ [data-theme="saas"] { --font-display: 'IBM Plex Sans', system-ui, sans-serif; --font-ui: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --tile-bg: #1e2a3a; --tile-border: #3d5a80; --tile-shadow: #0d1b2a; --tile-text: #e0e8f0; --tile-score: #7eb8d4; --bg: #0f1923; --bg2: #162030; --bg3: #1e2a3a; --surface: #162030; --surface2: #1e2a3a; --text-primary: #e0e8f0; --text-secondary: #90aec4; --text-muted: #4a6fa5; --accent: #4dabf7; --accent-light: #74c0fc; --accent-bg: #1a2e40; --green: #51cf66; --green-bg: #1a2e20; --border: #2c3e50; --border-light: #243040; --shadow-sm: 0 1px 4px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.4); } /* ========================================================== 7. GAMING / IMMERSIVE (deep purple + electric violet) Fonts: Orbitron · Rajdhani · Space Mono ========================================================== */ [data-theme="gaming"] { --font-display: 'Orbitron', system-ui, sans-serif; --font-ui: 'Rajdhani', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; --tile-bg: #1a0533; --tile-border: #7c3aed; --tile-shadow: #0d0020; --tile-text: #e9d5ff; --tile-score: #c084fc; --bg: #0a0015; --bg2: #130025; --bg3: #1e0038; --surface: #130025; --surface2: #1a0533; --text-primary: #f3e8ff; --text-secondary: #c084fc; --text-muted: #7c3aed; --accent: #a855f7; --accent-light: #c084fc; --accent-bg: #2d0057; --green: #34d399; --green-bg: #022c22; --border: #3b0764; --border-light: #2d0057; --shadow-sm: 0 1px 6px rgba(168,85,247,.2); --shadow-md: 0 4px 20px rgba(168,85,247,.3); } /* ========================================================== 8. READING / CONTENT (sepia warm off-white) Fonts: Libre Baskerville · Crimson Pro · Courier Prime ========================================================== */ [data-theme="reading"] { --font-display: 'Libre Baskerville', Georgia, serif; --font-ui: 'Crimson Pro', Georgia, serif; --font-mono: 'Courier Prime', 'Courier New', monospace; --tile-bg: #e8dcc8; --tile-border: #b8a080; --tile-shadow: #8a7060; --tile-text: #2c1e12; --tile-score: #6b4c30; --bg: #f8f2e8; --bg2: #ede3d0; --bg3: #ddd0b8; --surface: #fdf8f2; --surface2: #f4eedd; --text-primary: #2c1e12; --text-secondary: #5a3e28; --text-muted: #9a7a58; --accent: #8b4513; --accent-light: #a0522d; --accent-bg: #f0e0cc; --green: #3d6b2e; --green-bg: #e8f0e0; --border: #c8b090; --border-light: #ddd0b8; --shadow-sm: 0 1px 3px rgba(44,30,18,.1); --shadow-md: 0 4px 12px rgba(44,30,18,.14); } /* ========================================================== 9. SOLARIZED (Ethan Schoonover's balanced palette) Fonts: Fira Sans · Fira Sans · Fira Code ========================================================== */ [data-theme="solarized"] { --font-display: 'Fira Sans', system-ui, sans-serif; --font-ui: 'Fira Sans', system-ui, sans-serif; --font-mono: 'Fira Code', 'Courier New', monospace; --tile-bg: #073642; --tile-border: #586e75; --tile-shadow: #002b36; --tile-text: #93a1a1; --tile-score: #657b83; --bg: #002b36; --bg2: #073642; --bg3: #0d424f; --surface: #073642; --surface2: #0d424f; --text-primary: #eee8d5; --text-secondary: #93a1a1; --text-muted: #586e75; --accent: #268bd2; --accent-light: #2aa198; --accent-bg: #073642; --green: #859900; --green-bg: #0d3820; --border: #073642; --border-light: #0d424f; --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4); } /* ========================================================== 10. HIGH CONTRAST (WCAG AAA accessible) Fonts: Atkinson Hyperlegible · Atkinson Hyperlegible · Overpass Mono ========================================================== */ [data-theme="highcontrast"] { --font-display: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-ui: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-mono: 'Overpass Mono', 'Courier New', monospace; --tile-bg: #000000; --tile-border: #ffffff; --tile-shadow: #666666; --tile-text: #ffffff; --tile-score: #ffff00; --bg: #000000; --bg2: #111111; --bg3: #222222; --surface: #000000; --surface2: #111111; --text-primary: #ffffff; --text-secondary: #ffff00; --text-muted: #aaaaaa; --accent: #ffff00; --accent-light: #ffffff; --accent-bg: #333300; --green: #00ff00; --green-bg: #003300; --border: #ffffff; --border-light: #888888; --shadow-sm: 0 0 0 1px #ffffff; --shadow-md: 0 0 0 2px #ffffff; } /* ========================================================== 11. AMOLED (true black, power-saving) Fonts: Exo 2 · Exo 2 · Roboto Mono ========================================================== */ [data-theme="amoled"] { --font-display: 'Exo 2', system-ui, sans-serif; --font-ui: 'Exo 2', system-ui, sans-serif; --font-mono: 'Roboto Mono', 'Courier New', monospace; --tile-bg: #0a0a0a; --tile-border: #ff6b00; --tile-shadow: #000000; --tile-text: #ffffff; --tile-score: #ff9b50; --bg: #000000; --bg2: #050505; --bg3: #0f0f0f; --surface: #000000; --surface2: #080808; --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #666666; --accent: #ff6b00; --accent-light: #ff9b50; --accent-bg: #1a0a00; --green: #00e676; --green-bg: #001a0a; --border: #1a1a1a; --border-light: #111111; --shadow-sm: 0 1px 3px rgba(0,0,0,.8); --shadow-md: 0 4px 12px rgba(0,0,0,.9); } /* -- RESET ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text-primary); min-height: 100dvh; transition: background .25s, color .25s; -webkit-font-smoothing: antialiased; } /* -- APP SHELL -------------------------------------------- */ .app-shell { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; } /* -- HEADER ----------------------------------------------- */ header { background: var(--surface); border-bottom: 2px solid var(--border); padding: 0 clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); /* Needed so the dropdown child positions relative to the header */ overflow: visible; } /* Logo */ .logo { display: flex; align-items: baseline; gap: 10px; text-decoration: none; } .logo-tiles { display: flex; gap: 3px; } .logo-tile { width: 28px; height: 28px; background: var(--tile-bg); border: 2px solid var(--tile-border); border-radius: 4px; box-shadow: var(--shadow-tile); font-family: var(--font-display); font-size: 14px; font-weight: 900; color: var(--tile-text); display: flex; align-items: center; justify-content: center; transition: transform .15s; } .logo-tile:hover { transform: translateY(-2px); } .logo-text { font-family: var(--font-display); font-size: clamp(18px, 3vw, 22px); font-weight: 900; color: var(--text-primary); letter-spacing: .05em; } .logo-sub { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase; display: none; } @media (min-width: 480px) { .logo-sub { display: block; } } /* Header actions */ .header-actions { display: flex; gap: 8px; align-items: center; } .btn-icon { width: 38px; height: 38px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--bg2); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background .15s, transform .1s, border-color .15s; } .btn-icon:hover { background: var(--bg3); transform: scale(1.05); } .btn-icon:active { transform: scale(.96); } /* -- MENU BUTTON ------------------------------------------ */ .btn-menu { color: var(--text-secondary); position: relative; } .btn-menu[aria-expanded="true"] { background: var(--bg3); border-color: var(--accent); color: var(--accent); } /* -- DROPDOWN MENU ---------------------------------------- */ .menu-dropdown { position: absolute; top: calc(100% + 6px); right: clamp(16px, 4vw, 48px); min-width: 230px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md), 0 8px 32px rgba(0,0,0,.18); z-index: 200; overflow: hidden; /* Hidden state */ opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; transition: opacity .15s, transform .15s cubic-bezier(.34,1.56,.64,1); } .menu-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } .menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-ui); font-size: 13px; cursor: pointer; text-align: left; transition: background .12s; } .menu-item:hover, .menu-item:focus { background: var(--bg2); outline: none; } .menu-item:active { background: var(--bg3); } .menu-item-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; } .menu-item-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .menu-item-label { font-weight: 600; color: var(--text-primary); white-space: nowrap; } .menu-item-value { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-item-arrow { font-size: 16px; color: var(--text-muted); flex-shrink: 0; } .menu-divider { height: 1px; background: var(--border-light); margin: 4px 0; } /* -- ABOUT DIALOG ----------------------------------------- */ .about-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .2s; } .about-backdrop.open { opacity: 1; pointer-events: all; } .about-dialog { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md), 0 20px 60px rgba(0,0,0,.35); width: min(380px, 100%); padding: 32px 28px 28px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; transform: translateY(12px) scale(.97); transition: transform .25s cubic-bezier(.34,1.56,.64,1); } .about-backdrop.open .about-dialog { transform: translateY(0) scale(1); } /* Close button — reuses .theme-dialog-close */ .about-dialog .theme-dialog-close { position: absolute; top: 12px; right: 12px; } /* Logo tiles */ .about-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; } .about-tiles { display: flex; gap: 5px; } .about-tile { width: 38px; height: 38px; background: var(--tile-bg); border: 2px solid var(--tile-border); border-radius: 6px; box-shadow: var(--shadow-tile); font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--tile-text); display: flex; align-items: center; justify-content: center; } .about-app-name { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--text-primary); letter-spacing: .06em; } .about-tagline { font-size: 12px; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; } /* Meta table */ .about-meta { width: 100%; border: 1.5px solid var(--border-light); border-radius: var(--radius); overflow: hidden; } .about-meta-row { display: flex; align-items: center; padding: 9px 14px; gap: 12px; border-bottom: 1px solid var(--border-light); } .about-meta-row:last-child { border-bottom: none; } .about-meta-row dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); width: 80px; flex-shrink: 0; } .about-meta-row dd { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* GitHub button */ .about-github-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--text-primary); color: var(--bg); border-radius: var(--radius); font-family: var(--font-ui); font-size: 13px; font-weight: 600; text-decoration: none; transition: opacity .15s, transform .1s; } .about-github-btn:hover { opacity: .85; transform: translateY(-1px); } .about-github-btn:active { transform: scale(.97); } /* -- MAIN ------------------------------------------------- */ main { padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 48px); max-width: 1100px; margin: 0 auto; width: 100%; } /* -- SEARCH PANEL ----------------------------------------- */ .search-panel { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: clamp(16px, 3vw, 28px); margin-bottom: 28px; box-shadow: var(--shadow-sm); } .panel-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } /* Fields grid */ .fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; } .field { display: flex; flex-direction: column; gap: 5px; } .field label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); } .field input { height: 42px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text-primary); font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: border-color .15s, box-shadow .15s; outline: none; -webkit-appearance: none; } .field input::placeholder { text-transform: none; font-style: italic; color: var(--text-muted); font-size: 13px; opacity: .7; } .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .letters-field { grid-column: 1 / -1; } /* Pattern fields span full width on small screens handled by auto-fit grid */ /* Letter tiles display */ .letters-display { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 6px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--bg); align-items: center; } .letter-chip { width: 34px; height: 34px; background: var(--tile-bg); border: 2px solid var(--tile-border); border-radius: 5px; box-shadow: 2px 3px 0 var(--tile-shadow); font-family: var(--font-display); font-size: 15px; font-weight: 900; color: var(--tile-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .1s, opacity .1s; position: relative; flex-shrink: 0; } .letter-chip:hover { transform: translateY(-2px); } .letter-chip:active { transform: scale(.92); } .letter-chip.wildcard { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } .letter-chip .score-badge { position: absolute; bottom: 1px; right: 2px; font-family: var(--font-mono); font-size: 7px; font-weight: 500; color: var(--tile-score); line-height: 1; } /* Button row */ .btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .btn-primary { height: 44px; padding: 0 24px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: .05em; cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); display: flex; align-items: center; gap: 8px; } .btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); } .btn-primary:active { transform: scale(.97); } .btn-primary:disabled { opacity: .5; cursor: default; transform: none; } .btn-secondary { height: 44px; padding: 0 18px; background: var(--bg2); color: var(--text-secondary); border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font-ui); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s; } .btn-secondary:hover { background: var(--bg3); } .result-count { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); } .result-count strong { color: var(--accent); } /* Dictionary status pill */ .dict-status { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--border); white-space: nowrap; transition: opacity .6s; } .dict-status.loading { color: var(--text-muted); background: var(--bg2); border-color: var(--border); } .dict-status.ready { color: var(--green); background: var(--green-bg); border-color: var(--green); } .dict-status.error { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); } /* -- FILTER BAR ------------------------------------------- */ .filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .filter-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .chip-group { display: flex; gap: 6px; flex-wrap: wrap; } .chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* -- RESULTS AREA ----------------------------------------- */ .results-area { display: flex; flex-direction: column; gap: 20px; } /* Empty state */ .empty-state { text-align: center; padding: 60px 24px; color: var(--text-muted); } .empty-state .icon { font-size: 48px; margin-bottom: 16px; opacity: .5; } .empty-state h3 { font-family: var(--font-display); font-size: 20px; color: var(--text-secondary); margin-bottom: 8px; } .empty-state p { font-size: 14px; } /* Word group */ .word-group { background: var(--surface); border: 1.5px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); animation: slideUp .25s ease both; } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .group-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg2); border-bottom: 1.5px solid var(--border-light); cursor: pointer; user-select: none; transition: background .12s; } .group-header:hover { background: var(--bg3); } .group-length-badge { width: 34px; height: 34px; background: var(--tile-bg); border: 2px solid var(--tile-border); border-radius: 5px; box-shadow: 2px 2px 0 var(--tile-shadow); font-family: var(--font-display); font-size: 16px; font-weight: 900; color: var(--tile-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .group-header-info { flex: 1; } .group-header-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); } .group-header-sub { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); } .group-sort { display: flex; gap: 4px; } .sort-btn { height: 26px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--border); background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .12s; } .sort-btn:hover { border-color: var(--accent); color: var(--accent); } .sort-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .chevron { font-size: 13px; color: var(--text-muted); transition: transform .2s; margin-left: 4px; } .word-group.collapsed .chevron { transform: rotate(-90deg); } .group-body { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 8px; } .word-group.collapsed .group-body { display: none; } /* Word card */ .word-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px 6px; border: 1.5px solid var(--border-light); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: all .12s; min-width: 64px; } .word-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); } .word-card:active { transform: scale(.96); } .word-card .word-text { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--text-primary); letter-spacing: .06em; text-transform: uppercase; } .word-card .word-points { font-size: 11px; font-weight: 600; color: var(--accent); font-family: var(--font-mono); } /* Wildcard tile highlight — letter that used a '?' blank tile */ .wild-letter { color: var(--wild-color, #9333ea); /* font-style: italic; */ } /* Score separator and wild-score portion */ .pts-sep { color: var(--text-muted); font-weight: 400; margin: 0 1px; } .wild-pts { color: var(--wild-color, #9333ea); } /* Per-theme wild colour overrides */ [data-theme="traditional"] { --wild-color: #7c3aed; } [data-theme="modern"] { --wild-color: #7c3aed; } [data-theme="cyber"] { --wild-color: #ff6ec7; } [data-theme="playful"] { --wild-color: #db2777; } [data-theme="nature"] { --wild-color: #0369a1; } [data-theme="saas"] { --wild-color: #a78bfa; } [data-theme="gaming"] { --wild-color: #f472b6; } [data-theme="reading"] { --wild-color: #b45309; } [data-theme="solarized"] { --wild-color: #d33682; } [data-theme="highcontrast"]{ --wild-color: #00ffff; } [data-theme="amoled"] { --wild-color: #f472b6; } .word-card.copied { border-color: var(--green); background: var(--green-bg); } .word-card.copied .word-text { color: var(--green); } /* Loading shimmer */ .shimmer { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; } .shimmer-item { height: 56px; width: 70px; border-radius: var(--radius); background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* -- TOAST ------------------------------------------------ */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--text-primary); color: var(--bg); padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 500; pointer-events: none; z-index: 9999; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; opacity: 0; white-space: nowrap; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* -- FOOTER ----------------------------------------------- */ footer { border-top: 1.5px solid var(--border-light); padding: 12px clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); background: var(--surface); gap: 12px; flex-wrap: wrap; } .scrabble-key { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .key-tile { display: inline-flex; gap: 3px; align-items: center; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 3px; padding: 1px 5px; font-family: var(--font-mono); font-size: 10px; color: var(--tile-text); box-shadow: 1px 1.5px 0 var(--tile-shadow); } .key-tile span { color: var(--tile-score); } /* -- MOBILE TWEAKS ---------------------------------------- */ @media (max-width: 600px) { .letters-display { min-height: 36px; } .letter-chip { width: 30px; height: 30px; font-size: 13px; } .word-card { min-width: 54px; padding: 6px 8px 4px; } .word-card .word-text { font-size: 12px; } } /* -- SCROLLBAR -------------------------------------------- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--tile-border); } /* ========================================================== THEME PICKER DIALOG ========================================================== */ /* Backdrop */ .theme-dialog-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .2s; } .theme-dialog-backdrop.open { opacity: 1; pointer-events: all; } /* Dialog panel */ .theme-dialog { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md), 0 20px 60px rgba(0,0,0,.35); width: min(560px, 100%); max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(12px) scale(.97); transition: transform .25s cubic-bezier(.34,1.56,.64,1); } .theme-dialog-backdrop.open .theme-dialog { transform: translateY(0) scale(1); } /* Dialog header */ .theme-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1.5px solid var(--border-light); flex-shrink: 0; } .theme-dialog-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-primary); } .theme-dialog-close { width: 32px; height: 32px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--bg2); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: background .15s, color .15s; } .theme-dialog-close:hover { background: var(--bg3); color: var(--text-primary); } /* Scrollable grid area */ .theme-dialog-body { padding: 16px 20px 20px; overflow-y: auto; } /* Theme grid */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } /* Individual theme card */ .theme-card { border: 2px solid transparent; border-radius: var(--radius); padding: 12px 14px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: border-color .15s, transform .1s, box-shadow .15s; position: relative; overflow: hidden; } .theme-card:hover { border-color: var(--tc-accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); } .theme-card:active { transform: scale(.98); } .theme-card.selected { border-color: var(--tc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-accent) 20%, transparent); } /* Checkmark on selected */ .theme-card.selected::after { content: '✓'; position: absolute; top: 6px; right: 8px; font-size: 11px; font-weight: 700; color: var(--tc-accent); background: var(--tc-bg); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Swatch preview — a mini window mockup */ .theme-swatch { width: 52px; height: 40px; border-radius: 5px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; border: 1.5px solid var(--tc-border); box-shadow: 0 2px 6px rgba(0,0,0,.2); } .swatch-header { height: 10px; background: var(--tc-surface); border-bottom: 1px solid var(--tc-border); display: flex; align-items: center; padding: 0 4px; gap: 2px; } .swatch-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tc-accent); opacity: .8; } .swatch-body { flex: 1; background: var(--tc-bg); display: flex; align-items: center; padding: 3px 4px; gap: 3px; } .swatch-tile { width: 10px; height: 12px; border-radius: 2px; background: var(--tc-tile); border: 1px solid var(--tc-tileborder); font-size: 6px; display: flex; align-items: center; justify-content: center; color: var(--tc-tiletext); font-weight: 900; font-family: Georgia, serif; } .swatch-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--tc-accent); opacity: .7; } /* Theme card text */ .theme-card-info { flex: 1; min-width: 0; } .theme-card-name { font-size: 13px; font-weight: 600; color: var(--tc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .theme-card-desc { font-size: 11px; color: var(--tc-muted); line-height: 1.4; } .theme-card-fonts { font-size: 10px; font-weight: 600; color: var(--tc-accent); letter-spacing: .04em; margin-top: 3px; opacity: .85; } /* -- Per-theme card color vars (set inline via JS) -------- */ /* These --tc-* vars are set on each .theme-card element */ /* so each card always shows its own palette regardless of */ /* what the active app theme is. */ @media (max-width: 480px) { .theme-grid { grid-template-columns: 1fr 1fr; } .theme-card { padding: 10px; gap: 8px; } .theme-swatch { width: 42px; height: 34px; } .theme-card-desc { display: none; } }