/* ============================================================ Living Pokédex — global theme "Dark collector's terminal": deep slate, Pokédex-red accent, emerald/gold/violet collection palette, HUD typography. ============================================================ */ :root { --bg: #14151c; --bg-2: #181a23; --surface: #1e2029; --surface-2: #23262f; --line: #2d3142; --line-soft: #353849; --text: #e9ebf5; --text-dim: #aab0c8; --text-mute: #868cab; /* Pokédex red — the iconic device accent */ --red: #ee5a47; --red-deep: #c8341f; --red-glow: rgba(238, 90, 71, 0.35); /* Collection state palette */ --caught: #3ecf8e; --shiny: #f5c518; --ha: #8a6dff; /* "Active toggle" text colours (readable on a rgba(accent,.16) wash) + neutral pip + blur bar. Redefined per-theme below so light mode stays legible. */ --red-soft: #ffd9d2; --shiny-soft: #ffe9a3; --ha-soft: #e2d9ff; --pip-bg: #2c3043; --pip-fg: #5b6076; --surface-blur: rgba(20, 21, 28, 0.9); --radius: 12px; --radius-lg: 16px; --font-display: 'Chakra Petch', 'Segoe UI', sans-serif; --font-body: 'Outfit', 'Segoe UI', system-ui, sans-serif; } :root[data-theme="light"] { --bg: #f3f4fa; --bg-2: #e9ebf4; --surface: #ffffff; --surface-2: #f0f1f8; --line: #dde0ec; --line-soft: #ccd1e1; --text: #1a1c25; --text-dim: #474c60; --text-mute: #7e84a0; --red: #df4730; --red-deep: #bf2f1c; --red-glow: rgba(223, 71, 48, 0.25); --caught: #1f9e64; --shiny: #c79a0e; --ha: #6a4ce0; /* Active-toggle text goes DEEP (dark) in light mode so it reads on the light accent wash; neutral pip + blur bar flip to light surfaces. */ --red-soft: #b5311d; --shiny-soft: #7a5c00; --ha-soft: #5a3fd0; --pip-bg: #dfe2ee; --pip-fg: #767c98; --surface-blur: rgba(248, 249, 253, 0.88); } * { box-sizing: border-box; } html, body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); } body { min-height: 100vh; /* atmospheric depth: warm red glow up top, cool fade below + faint dot grid */ background: radial-gradient(1100px 520px at 18% -8%, rgba(238, 90, 71, 0.10), transparent 60%), radial-gradient(900px 600px at 100% 0%, rgba(96, 120, 255, 0.06), transparent 55%), linear-gradient(180deg, var(--bg-2), var(--bg) 40%); background-attachment: fixed; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px); background-size: 22px 22px; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.2px; } a { color: var(--red); text-decoration: none; } a:hover { color: #ff7a68; } ::selection { background: var(--red-glow); color: #fff; } /* Rubber-band marquee for box grid selection (created on by box-select.js). Absolute (document-coord) positioning so it scrolls with the content as one shape. */ .marquee { position: absolute; z-index: 90; pointer-events: none; border: 1px solid var(--red); background: var(--red-glow); border-radius: 2px; } /* ---- Explorer-style grid selection (shared by Boxes + Forms) ---- */ .cell .sprite { cursor: pointer; } .cell .sprite:hover { transform: scale(1.06); transition: transform .1s ease; } /* Grid-prefixed so this beats each page's scoped .cell/.form-cell base styles. */ .pkgrid .cell.selected, .forms-grid .cell.selected { border-color: var(--red); background: rgba(238, 90, 71, 0.12); box-shadow: inset 0 0 0 1px var(--red); } .box-markall { margin-left: auto; font-family: var(--font-display); font-size: 11px; letter-spacing: .5px; text-transform: none; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 7px; padding: 5px 11px; cursor: pointer; transition: color .12s, border-color .12s; } .box-markall:hover { color: var(--caught); border-color: var(--caught); } .box-confirm { margin-left: auto; display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 12px; letter-spacing: .3px; text-transform: none; color: var(--text-dim); font-weight: 500; } .box-confirm button { font-family: var(--font-display); font-size: 12px; border-radius: 6px; padding: 4px 12px; cursor: pointer; border: 1px solid var(--line-soft); background: var(--surface); color: var(--text); } .box-confirm .bc-yes { background: var(--caught); color: #06281a; border-color: var(--caught); font-weight: 700; } .box-confirm .bc-no:hover { border-color: var(--text-dim); } /* Floating action bar for the current selection. */ .sel-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); } .sel-count { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; } .sel-group { display: flex; align-items: center; gap: 6px; } .sel-lbl { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute); } .sel-group .btn { padding: 5px 11px; font-size: 13px; } .sel-deselect { font-family: var(--font-display); font-size: 13px; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 5px 4px; } .sel-deselect:hover { color: var(--text); } /* Numbers (dex ids etc.) read better in the HUD face */ .mono { font-family: var(--font-display); font-variant-numeric: tabular-nums; } /* ---------- Scrollbar ---------- */ * { scrollbar-width: thin; scrollbar-color: var(--line-soft) transparent; } *::-webkit-scrollbar { width: 11px; height: 11px; } *::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: #454a63; background-clip: padding-box; } /* ---------- Pokéball brand mark (pure CSS) ---------- */ .pokeball { --d: 26px; width: var(--d); height: var(--d); border-radius: 50%; background: linear-gradient(180deg, var(--red) 0 48%, #fff 52% 100%); border: 2px solid #0c0d12; position: relative; box-shadow: 0 0 14px var(--red-glow); flex: none; } .pokeball::before { /* equator */ content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #0c0d12; transform: translateY(-50%); } .pokeball::after { /* button */ content: ""; position: absolute; left: 50%; top: 50%; width: 32%; height: 32%; border-radius: 50%; background: #fff; border: 2px solid #0c0d12; transform: translate(-50%, -50%); } /* ---------- Blazor error UI (restyled) ---------- */ #blazor-error-ui { background: var(--surface-2); color: var(--text); border-top: 2px solid var(--red); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5); bottom: 0; box-sizing: border-box; display: none; left: 0; padding: 0.9rem 1.4rem; position: fixed; width: 100%; z-index: 1000; font-family: var(--font-body); } #blazor-error-ui .reload { color: var(--red); margin-left: 8px; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.75rem; color: var(--text-mute); } .blazor-error-boundary { background: var(--red-deep); color: #fff; padding: 1rem 1.4rem; border-radius: var(--radius); } .blazor-error-boundary::after { content: "An error has occurred."; } /* ---------- Form niceties ---------- */ input, select, button { font-family: var(--font-body); } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* Blazor's moves focus to the page

(tabindex="-1") after every navigation; that programmatic focus must not paint the interactive red focus ring. / [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } / ---------- Header nav (rendered by the interactive island, so global, not scoped — global also lets one rule style both the anchors and the