/* Theme palettes -- three selectable via [data-theme] on (see appearance.js, and the Appearance tab in the Settings modal). This unscoped :root block IS the "planeswalker" theme, kept as the default/fallback so the app renders correctly even before appearance.js runs (or if it fails to load) rather than flashing unstyled. Every value below was chosen and contrast-checked as a full palette (see the dev-only contrast script referenced in the redesign notes) -- don't tweak one color here without re-checking text/accent pairs across all three themes. */ :root { --bg: #121018; --bg-panel: #1a1626; --bg-input: #0e0c14; --border: #332c48; --text: #eeecf7; --text-dim: #a49dc2; --accent: #8b6ef2; --accent-hover: #a68bf7; --accent-dim: #4a3f7a; --on-accent: #0e0c14; /* text color for content painted on top of --accent (e.g. .btn-primary) -- themed separately from --text since a light accent (foil, eldrazi) needs dark text instead */ --ok: #4caf7d; --warn: #e0a63c; --error: #e56b6b; --danger: #d9534f; /* not themed -- a separate, rarely-used destructive-action color, unrelated to any theme's accent/error hues */ --neon-green: #39ff6a; /* Game Changers glow + the Fluffy side of the Spicy/Fluffy score -- intentionally NOT themed (no [data-theme] block below redefines it) so this specific green/red pair always reads the same regardless of theme, unlike --neon (which IS themed per-palette). */ --neon-red: #ff3b3b; /* the Spicy side of the Spicy/Fluffy score -- see --neon-green above */ --neon-blue: #3fd8ff; /* Play nav tab + home button glow -- intentionally NOT themed, same reasoning as --neon-orange below: the Play landmark should read identically in every palette. */ --neon-orange: #ff8c1a; /* Synergy Matrix nav tab + home button glow -- intentionally NOT themed, same reasoning as --neon-green/--neon-red above */ --firefly-glow: #d4ff4a; /* Inbox tab's new-message firefly (see notifications.js's spawnInboxFirefly + .inbox-firefly below) -- a bioluminescent yellow-green, intentionally NOT themed for the same reason as --neon-green/--neon-red above */ /* Presence dots (see presence.js) -- green/yellow/red/gray, intentionally NOT themed, same reasoning as --neon-green/--neon-red above: "online" has to read as green regardless of which appearance theme is active, the same way a mana symbol's color doesn't shift per theme. */ --status-online: #3ba55c; --status-away: #f0b232; --status-dnd: #ed4245; --status-offline: #80848e; /* Build tab's WUBRG color-filter toggle buttons (see .mana-toggle below) -- one fixed glow color per mana color, intentionally NOT themed (same reasoning as --neon-green/--neon-red above): a card's color identity is a fixed game concept, not a UI accent, so these read the same regardless of which appearance theme is active. --mana-c (colorless) stands in for the {C} symbol -- a cool silver rather than a hue, since colorless has no color of its own. */ --mana-w: #ffe066; --mana-u: #2fb8ff; --mana-b: #b565ff; --mana-r: #ff3b3b; --mana-g: #39ff6a; --mana-c: #c7d0dc; --radius: 8px; /* -rgb triplets for every color above that gets used as an rgba() alpha variant somewhere in this sheet (badge backgrounds, hover states, the focus ring below) -- keeps those derivations in one place instead of hand-picking a new rgba() literal per rule. */ --accent-rgb: 139, 110, 242; --error-rgb: 229, 107, 107; --ok-rgb: 76, 175, 125; --warn-rgb: 224, 166, 60; --danger-rgb: 217, 83, 79; /* Spacing scale -- replaces the ad hoc 4/6/8/9/10/12/14/16/18/20/24/28px literals previously scattered through this file with no consistent rhythm. */ --space-2xs: 4px; --space-xs: 6px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px; /* Type scale -- replaces literal font-size values (10/10.5/11/12/12.5/13/13.5/14/15/16/17px) that had no naming/system behind them. In rem (relative to html's root font-size, see the Appearance tab's font-size control) so the whole scale grows/shrinks together. */ --font-2xs: 0.7857rem; --font-xs: 0.8571rem; --font-sm: 0.9286rem; --font-md: 1rem; --font-lg: 1.0714rem; --font-xl: 1.1429rem; /* Border-radius scale -- var(--radius) (8px) already covered panels/modals/tabs; this fills in the other radii that were hardcoded per-rule instead of tokenized. */ --radius-xs: 4px; --radius-sm: 6px; --radius-lg: 10px; --radius-pill: 999px; /* Visible keyboard-focus ring (WCAG 2.4.7) -- a border-color change alone isn't a strong enough indicator on its own, so form fields pair it with this box-shadow; buttons/tabs/other controls use the plain outline further down. */ --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.45); --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); /* "Balanced" timing/easing -- smooth, no bounce/overshoot, a touch slower than pure micro-interaction speed but well short of a deliberately slow "cinematic" feel. */ --ease: cubic-bezier(.3, .6, .3, 1); --transition-fast: 190ms var(--ease); --transition-base: 300ms var(--ease); /* Loading mascot scene (see loadingUI.js) -- not themed, same reasoning as --danger: these are fixed material colors (hair, oak wood, leather, candlelight, paper, glasses lenses), not UI accents, so they stay constant across all three themes rather than living in the [data-theme="..."] blocks below. */ --hair: #cfc9dd; --wood: #8a6a45; --wood-dark: #5f4429; --wood-light: #a98454; --paper: #efe8d8; --lens: #6b6b78; --leather: #6b2f2c; --leather-dark: #481f1d; --flame: #ffb347; /* "The Cards" section heading's neon glow (see .the-cards-section below) -- picked per-theme as a hue roughly opposite this theme's --accent, so it reads as a deliberately different, eye- catching color against that theme's background rather than just a brighter version of the accent already used everywhere else. Violet bg/accent here -> neon lime. */ --neon: #4dff8a; } /* Softened from this theme's original values -- the near-black bg paired with a fairly saturated, bright gold accent read as harsh/eye-straining over extended use. Lightened the bg a touch (charcoal-brown instead of near-black) and pulled the accent down to a more muted antique-brass, which keeps the "foil border" identity without the glare. */ :root[data-theme="foil"] { --bg: #1c1811; --bg-panel: #241f16; --bg-input: #171307; --border: #40361f; --text: #ece3d0; --text-dim: #ac9c81; --accent: #b9915a; --accent-hover: #cba572; --accent-dim: #5f4d2e; --on-accent: #1c1811; --ok: #93a86a; --warn: #cf9752; --error: #c98170; --accent-rgb: 185, 145, 90; --error-rgb: 201, 129, 112; --ok-rgb: 147, 168, 106; --warn-rgb: 207, 151, 82; /* Warm bronze/gold bg+accent here -> cool neon cyan for max contrast. */ --neon: #2ff0e0; } /* Softened the same way as Foil Bronze above -- the original accent (#3ecfd6) was a very bright, highly saturated cyan against a near-black bg, which is the single harshest color pairing across all three themes since --accent is used everywhere (borders, links, buttons, focus rings). Lightened the bg slightly and desaturated/dimmed the cyan toward a calmer teal. */ :root[data-theme="eldrazi"] { --bg: #101718; --bg-panel: #172223; --bg-input: #0c1213; --border: #2c3f41; --text: #dceaea; --text-dim: #93aeae; --accent: #4fb0b5; --accent-hover: #6cc3c7; --accent-dim: #285356; --on-accent: #101718; --ok: #5cad8a; --warn: #cf9c4c; --error: #cf6d69; --accent-rgb: 79, 176, 181; --error-rgb: 207, 109, 105; --ok-rgb: 92, 173, 138; --warn-rgb: 207, 156, 76; /* Cool cyan bg+accent here -> warm neon magenta for max contrast. */ --neon: #ff4fe0; } /* Light-mode variant of each theme above -- toggled independently of theme choice (see the Appearance tab's light/dark switch and appearance.js's applyMode) via [data-mode="light"] alongside [data-theme]. Each keeps that theme's accent hue but re-picked at a darker value than its dark-mode counterpart, since a hue calibrated to pop against a near-black background is usually too washed-out for 4.5:1 text contrast against a light one -- every pairing below (text/bg, accent/bg, accent/white) was checked against WCAG AA before picking these. --neon is re-picked per mode too, same reasoning as --accent above -- the dark-mode neon values are light, highly-saturated colors meant to pop off a near-black background, and would wash out to near- invisible against --bg-panel: #ffffff (the "The Cards" glow text, chart.js's sparkle) without a darker light-mode value here. --hair gets a light-mode override for the same reason (the loading mascot's hair strokes render straight over --bg-panel with no other backing shape, so a light lavender that's fine against a near-black panel disappears against a white one); --wood/--paper/ etc. are left as-is in every mode since those sit inside shapes with their own opaque fills/ strokes (desk, cabinets, book) that don't depend on the surrounding panel color for contrast. */ :root[data-mode="light"] { --bg: #f5f3fb; --bg-panel: #ffffff; --bg-input: #ffffff; --border: #d9d3ee; --text: #221c35; --text-dim: #6b6285; --accent: #6b4fd6; --accent-hover: #7f66e0; --accent-dim: #cfc3f2; --on-accent: #ffffff; --ok: #2f8f5c; --warn: #9c6708; --error: #c94f4f; --accent-rgb: 107, 79, 214; --error-rgb: 201, 79, 79; --ok-rgb: 47, 143, 92; --warn-rgb: 156, 103, 8; /* Violet bg/accent here -> a darker forest green (dark mode's neon lime, re-darkened for 4.5:1+ against a white panel instead of a near-black one). */ --neon: #15773f; --hair: #8039a3; } :root[data-theme="foil"][data-mode="light"] { --bg: #faf6ec; --bg-panel: #ffffff; --bg-input: #ffffff; --border: #e6dcc0; --text: #2b2313; --text-dim: #7a6b48; --accent: #86642a; --accent-hover: #977231; --accent-dim: #e8d9b5; --on-accent: #ffffff; --ok: #5f7a3a; --warn: #916017; --error: #a8503f; --accent-rgb: 134, 100, 42; --error-rgb: 168, 80, 63; --ok-rgb: 95, 122, 58; --warn-rgb: 145, 96, 23; /* Warm bronze/gold bg+accent here -> a darker teal (dark mode's neon cyan, re-darkened). */ --neon: #0d7a75; --hair: #8a7550; } :root[data-theme="eldrazi"][data-mode="light"] { --bg: #eef6f6; --bg-panel: #ffffff; --bg-input: #ffffff; --border: #cfe3e3; --text: #12262a; --text-dim: #4d6c6f; --accent: #1b7075; --accent-hover: #228086; --accent-dim: #bfe1e2; --on-accent: #ffffff; --ok: #337a5c; --warn: #8f6519; --error: #ad5450; --accent-rgb: 27, 112, 117; --error-rgb: 173, 84, 80; --ok-rgb: 51, 122, 92; --warn-rgb: 143, 101, 25; /* Cool cyan bg+accent here -> a darker magenta (dark mode's neon magenta, re-darkened). */ --neon: #9c1f88; --hair: #4d7a7d; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Visually-hidden but still screen-reader-accessible -- for accessible names that shouldn't also render as visible label text (e.g. a filter input whose placeholder already shows the sighted affordance). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } * { box-sizing: border-box; } /* The actual root size every `rem` value in this file is relative to -- can't be expressed in rem itself (on the root element, 1rem resolves to the browser's own default of 16px, not this app's 14px baseline, since there's no ancestor for it to inherit from). This is only the fallback for before appearance.js runs (or if it fails to load) -- the Appearance tab's font-size slider/number input (see appearance.js's applyFontSize) sets an inline style on instead of an attribute here, since it's a free px value rather than a handful of presets a CSS selector could match on. */ html { font-size: 14px; } /* No rule for the default font -- the var(--font-family, ...) fallback on html/body above already supplies the system-UI stack when this attribute is absent (see appearance.js). CSP blocks font CDNs (script-src/style-src 'self'), so every option here is a system font stack, not a downloaded typeface. */ html[data-font="serif"] { --font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif; } html[data-font="rounded"] { --font-family: "Trebuchet MS", "Century Gothic", "Segoe UI", sans-serif; } html[data-font="mono"] { --font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-family, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); } body { display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-panel); flex-shrink: 0; -webkit-app-region: drag; } .app-footer { text-align: center; padding: 16px 12px; font-size: 0.75rem; color: var(--text-dim); } .topbar-title { font-weight: 600; font-size: 1.0714rem; display: flex; align-items: center; gap: 8px; } .title-icon { font-size: 1.1429rem; } .topbar button { -webkit-app-region: no-drag; } .tabs { display: flex; gap: 4px; padding: 8px 16px 0 16px; border-bottom: 1px solid var(--border); background: var(--bg-panel); flex-shrink: 0; } .tab { position: relative; background: transparent; border: none; color: var(--text-dim); padding: 8px 16px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; font-size: 0.9286rem; font-weight: 500; transition: color var(--transition-fast); } .tab:hover { color: var(--text); } .tab.active { color: var(--text); } .tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; } /* "Build / Edit Deck" tab while a real build/edit is in flight, and "Card Ideas" while suggestions are being generated -- see app.js's setNavTabBusy(). Cycles the outline through the five mana colors (--mana-w/u/b/r/g, already fixed/un-themed -- see those vars' own comments) rather than a single glow color, so it reads as something being conjured rather than a generic busy spinner. Not themed for the same reason the mana-toggle glows and Synergy Matrix tab aren't -- these colors are a fixed game concept, not a UI accent. */ .tab.is-building { color: var(--text); animation: build-tab-text-glow 1.8s ease-in-out infinite; } .tab.is-building::before { content: ''; position: absolute; inset: 2px; border: 2px solid var(--mana-u); border-radius: var(--radius-sm) var(--radius-sm) 0 0; pointer-events: none; animation: build-tab-outline-pulse 2.5s linear infinite; } @keyframes build-tab-outline-pulse { 0%, 100% { border-color: var(--mana-w); box-shadow: 0 0 5px var(--mana-w), 0 0 12px color-mix(in srgb, var(--mana-w) 65%, transparent); } 20% { border-color: var(--mana-u); box-shadow: 0 0 5px var(--mana-u), 0 0 12px color-mix(in srgb, var(--mana-u) 65%, transparent); } 40% { border-color: var(--mana-b); box-shadow: 0 0 5px var(--mana-b), 0 0 12px color-mix(in srgb, var(--mana-b) 65%, transparent); } 60% { border-color: var(--mana-r); box-shadow: 0 0 5px var(--mana-r), 0 0 12px color-mix(in srgb, var(--mana-r) 65%, transparent); } 80% { border-color: var(--mana-g); box-shadow: 0 0 5px var(--mana-g), 0 0 12px color-mix(in srgb, var(--mana-g) 65%, transparent); } } @keyframes build-tab-text-glow { 0%, 100% { text-shadow: 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); } 50% { text-shadow: 0 0 8px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent); } } @media (prefers-reduced-motion: reduce) { .tab.is-building, .tab.is-building::before { animation: none; } .tab.is-building::before { border-color: var(--accent); box-shadow: 0 0 6px var(--accent); } } /* #app-shell (index.html) wraps .tabs + .content and sits directly in body's flex column, but had no display/flex rule of its own -- it defaulted to a plain block box that shrink-wraps its content's natural height. That silently broke .content's "flex: 1" below (a flex property only does anything when the element's own parent is a flex container) so .content was never actually viewport-height-constrained; it just grew as tall as whatever tab was open, and any short tab left dead space below it inside the fixed-height body instead of that tab's own content stretching down to fill the window. Making #app-shell itself a flex column fixes that for every tab at once, not just My Collection (see #tab-collection.active below for the collection-list fix this enables). */ #app-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; } .content { flex: 1; overflow: auto; padding: 20px; } .tab-panel { display: none; } .tab-panel.active { display: block; } .two-col { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 20px; align-items: start; height: 100%; } .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .form { display: flex; flex-direction: column; gap: 14px; } /* Submit + "Clear all fields" side by side at the bottom of the Build/Edit form -- see app.js's clearBuildFields(). */ .form-actions { display: flex; gap: 10px; align-items: center; } .form-actions .btn-primary { flex: 1; } /* Houses the "Your build inputs" recap + Decklist sections once a build/edit result exists (see app.js's renderBuildResult) -- lives in the form's own flex column so it inherits the same 14px gap as the fields above it. :empty keeps it from reserving that gap before any result exists. */ .build-side-extra { display: flex; flex-direction: column; gap: 14px; } .build-side-extra:empty { display: none; } /* Wraps Mana Curve + Color Breakdown once they're moved into the sidebar (see chart.js's buildAnalysisBlock/app.js's renderBuildResult) -- same gap treatment as .build-side-extra's own direct children, since this is just a plain div, not itself part of that flex column's gap. */ .build-side-charts { display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field-label { font-size: 0.8929rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; } .field-hint { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-dim); } input[type="text"], input[type="password"], input[type="number"], select, textarea { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.9643rem; font-family: inherit; width: 100%; } textarea { resize: vertical; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.8929rem; line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } .btn { border: none; border-radius: var(--radius-sm); padding: 9px 16px; font-size: 0.9643rem; font-weight: 600; cursor: pointer; transition: background var(--transition-fast); } /* Keyboard-only focus ring (WCAG 2.4.7) -- :focus-visible so mouse clicks don't also show it. Covers every interactive element that isn't a plain text field (those get the box-shadow ring above instead, since a solid outline would clash with their border). */ .btn:focus-visible, .tab:focus-visible, .settings-tab:focus-visible, .view-toggle-btn:focus-visible, .card-qty-btn:focus-visible, .collapsible-header:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { background: var(--accent-dim); cursor: not-allowed; } .btn-secondary { background: var(--border); color: var(--text); } .btn-secondary:hover { background: #3a3f4c; } .btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--text); border-color: var(--text-dim); } .file-row { display: flex; align-items: center; gap: 8px; } .file-row input { flex: 1; } .file-name { font-size: 0.8571rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* Wraps a sub-group of .field elements inside the build form (the "new build" fields, and the "existing decklist" field) so they can be shown/hidden together based on the build-mode select, while keeping the same vertical rhythm as .form's own top-level gap -- see app.js's updateBuildModeFields(). */ .field-group { display: flex; flex-direction: column; gap: 14px; } /* WUBRG(+C) color-filter toggles under the Build tab's Theme/colors/archetype field -- see app.js's build-color-toggle wiring. Off by default (plain outline pip); toggling one on lights it up with that color's neon glow (--mana-w/u/b/r/g/c, defined per-color and un-themed, see :root above) so active colors are readable at a glance against any of the three appearance themes. Picking a commander from the autocomplete auto-syncs these to its color identity, but they stay editable by hand afterward -- e.g. to add an off-color splash the commander itself doesn't grant. */ .mana-toggle-row { display: flex; gap: 8px; flex-wrap: wrap; } .mana-toggle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-input); color: var(--text-dim); font-weight: 700; font-size: 0.9286rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); } .mana-toggle:hover { border-color: var(--text-dim); color: var(--text); } .mana-toggle--w.active { --mana-color: var(--mana-w); } .mana-toggle--u.active { --mana-color: var(--mana-u); } .mana-toggle--b.active { --mana-color: var(--mana-b); } .mana-toggle--r.active { --mana-color: var(--mana-r); } .mana-toggle--g.active { --mana-color: var(--mana-g); } .mana-toggle--c.active { --mana-color: var(--mana-c); } .mana-toggle.active { background: color-mix(in srgb, var(--mana-color) 22%, var(--bg-input)); border-color: var(--mana-color); color: var(--mana-color); text-shadow: 0 0 6px var(--mana-color), 0 0 12px color-mix(in srgb, var(--mana-color) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mana-color) 55%, transparent), 0 0 10px color-mix(in srgb, var(--mana-color) 65%, transparent), 0 0 20px color-mix(in srgb, var(--mana-color) 40%, transparent); } /* Format toggle -- the Build/Edit Deck tab's Commander/Standard switch (#build-format-toggle) and My Decks' All/Commander/Standard filter (#decks-format-filter). Both reuse .mana-toggle-row for layout (flex + gap) but need a text-label pill rather than a round WUBRG pip, so this gets its own button style -- same look as .view-toggle-btn (List/Grid/Card) for visual consistency with that other toolbar toggle. */ .format-toggle { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 0.8571rem; font-weight: 600; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .format-toggle:hover { color: var(--text); border-color: var(--text-dim); } .format-toggle.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* Small format badge shown per-deck in My Decks (see decks.js's buildDeckMetaLine) -- distinct from the toggle buttons above, this is read-only labeling inline in a deck's meta row. */ .format-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 0.7857rem; font-weight: 600; border: 1px solid var(--border); color: var(--text-dim); } .format-badge--standard { border-color: var(--accent); color: var(--accent); } .hidden { display: none !important; } .results { min-height: 300px; max-height: calc(100vh - 140px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } /* Caps the left form column to the same viewport-relative height as .results (right column, above) and gives it its own scrollbar. Without this, .form has no height limit -- once its content (build inputs + decklist + mana curve, etc.) grows taller than the viewport, .content's own overflow:auto kicks in and scrolls the WHOLE row, including the already-independently- scrolling .results panel next to it. That's a "scroll twice" experience: scrolling the outer page to see the rest of the form also drags the card grid out of view, requiring a second, separate scroll inside .results to get back to it. Matching both columns' heights to the viewport means .content itself never needs to scroll -- each column scrolls on its own instead. Scoped to .two-col's direct child so unrelated standalone .form panels (Friends tab, login, etc.) aren't affected. Reset to no cap on mobile (see the max-width: 760px query below), same as .results there -- a single stacked column scrolls with the page instead. */ .two-col > .form { max-height: calc(100vh - 140px); overflow-y: auto; } /* Makes the "each column scrolls on its own, .content never does" goal above actually hold, instead of very nearly holding. `100vh - 140px` is a guess at the app chrome around .content, and it's 9px short: the real total is .topbar (63) + .app-footer (46) + .content's own 20px padding top and bottom = 149. So both columns were laid out 9px taller than the space they had, .content's overflow:auto kicked in over those 9px, and a second, nearly-unscrollable scrollbar appeared right next to the column's own -- the "multiple scrollbars" symptom. .content is a stretched flex item of #app-shell, so its height is definite and a percentage height on the panel resolves against it exactly, with no constant to keep in sync with the chrome. That makes .two-col's existing `height: 100%` resolve too, and the columns cap to their real available height. Scoped with :has() to panels whose .two-col is a direct child (Build/Edit, Card Ideas) -- the .two-col inside My Collection's detail view and the Draft view sit further down and keep the viewport-relative cap above, which is fine there because those panels scroll as a whole anyway. */ .content > .tab-panel.active:has(> .two-col) { height: 100%; } /* One row, sized to the grid's own height rather than to its tallest item's content. Without this the row still grows past .two-col to fit .results' 300px min-height (min beats max in CSS), which puts the outer scrollbar right back on short windows -- and because `max-height: 100%` below resolves against the grid AREA, both columns would follow the row past the bottom of the screen. */ .content > .tab-panel.active:has(> .two-col) > .two-col { grid-template-rows: minmax(0, 1fr); } .content > .tab-panel.active:has(> .two-col) > .two-col > .form, .content > .tab-panel.active:has(> .two-col) > .two-col > .results { max-height: 100%; } /* .results' 300px floor exists to stop an empty/short result panel collapsing to nothing next to a full-height form; stretching it to the row does that job properly instead, and does it at every window height. The floor is what's left of the old fixed sizing -- keeping it here would only re-introduce the overflow it caused above, so it goes with the same rule that replaces it. .two-col's `align-items: start` still governs .form, which is meant to shrink-wrap its fields. */ .content > .tab-panel.active:has(> .two-col) > .two-col > .results { align-self: stretch; min-height: 0; } /* Reserves the scrollbar's width whether or not it's currently showing. Both columns' content grows and shrinks as a deck is built (and the Build form's fields change wholesale with the "How do you want to start?" select -- Analyze is short enough to need no scrollbar at all), so without this, each appearance/disappearance changes the column's content width by the scrollbar's ~17px and every label, help text and card row inside it re-wraps. Text visibly reflowing as a side effect of picking from a dropdown is what this prevents. */ .results, .two-col > .form { scrollbar-gutter: stable; } .results-empty { color: var(--text-dim); font-size: 0.9286rem; padding: 20px 0; text-align: center; } .results-empty.results-error { color: var(--error); } .results-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 0; color: var(--text-dim); font-size: 0.9286rem; } .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Loading progress bar (see loadingUI.js) -- indeterminate (sliding highlight) by default since most callers have no real progress signal; .determinate + an explicit width (set via JS when the desktop app's real deck:progress events arrive) switches it to a plain fill transition. */ .loading-progress-bar { width: 100%; max-width: 320px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; position: relative; } .loading-progress-fill { position: absolute; top: 0; left: -40%; height: 100%; width: 40%; background: var(--accent); border-radius: 2px; animation: loading-indeterminate 1.4s ease-in-out infinite; } .loading-progress-fill.determinate { animation: none; left: 0; width: 0; transition: width 0.4s ease; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent); } @keyframes loading-indeterminate { 0% { left: -40%; } 100% { left: 100%; } } .loading-detail { font-size: 0.8571rem; color: var(--text-dim); text-align: center; max-width: 340px; /* text-align alone only centers the text *inside* this box -- without this, the box itself (a plain block element, max-width narrower than its parent) sits flush against the parent's left edge by default, same underlying issue as the SVG sign box below being centered on the automaton/desk area instead of the full scene. */ margin: 0 auto; line-height: 1.4; } /* Real-updates line + glowing progress bar, anchored at the bottom of the mascot frame (see loadingUI.js's showRich()) -- .mascot-status-text reuses .loading-detail's own type/centering and just adds the wrapper's own margin instead, since it's now positioned by its parent's gap rather than its own auto margins. Deliberately separate from the SVG sign box above (still pure flavor quips) -- this is the one place a genuine reported build stage shows up. */ .mascot-status-wrap { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .mascot-status-text { margin: 0; } .mascot-progress-track { position: relative; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; } /* The "glowing loading bar" itself -- a slowly-scrolling rainbow gradient (not a flat fill) with a soft multi-layer glow, same "something magical, not just a plain bar" intent as the scroll's own rainbow fill above. Width is set directly by loadingUI.js's setProgress/reveal(). */ .mascot-progress-fill-bar { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, #ff3b3b, #ff9c3b, #ffe93b, #4dff7a, #3bc9ff, #7a5bff, #ff3bcf); background-size: 300% 100%; animation: mascot-progress-glow-shift 3s linear infinite; transition: width 0.5s ease; box-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 16px color-mix(in srgb, var(--accent-hover) 55%, transparent), 0 0 28px color-mix(in srgb, var(--accent-hover) 30%, transparent); } @keyframes mascot-progress-glow-shift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* Wraps loadingUI's spinner/bar/detail inside a My Decks tile while a fresh per-deck analysis runs -- see decks.js's toggleAnalysis(). */ .deck-analysis-loading { padding: 8px 0; } /* ============================================================================================ Loading mascot scene (see loadingUI.js's showRich()) -- the illustrated automaton used for the two main Build/Edit and Card Ideas results panels. Every selector here is class-based, never id-based: loadingUI.js can have more than one instance live at once (e.g. Build and Ideas both loading at the same time, on different tabs), and duplicate ids across two simultaneously- rendered scenes would break the CSS/attribute-selector targeting below. data-pos/data-motion/ data-facing live on .mascot-svg itself (the root of one instance), scoped by descendant selectors from there, so two instances never cross-talk. ============================================================================================ */ .mascot-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-lg) 0; } .mascot-stage { width: 100%; max-width: 760px; } .mascot-svg { width: 100%; height: auto; overflow: visible; display: block; } /* Old-looking serif italic -- the sign reads Urza's quips as invoked lore, not a UI label, so it gets its own font rather than inheriting the app's chosen body font (var(--font-family)). System stack only (no webfont fetch), same convention as the rest of this app. */ .mascot-sign-text { transition: opacity 200ms ease; font-family: Cambria, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif; font-style: italic; letter-spacing: 0.015em; } /* ---------- automaton positioning + facing ---------- Structural note: SVG elements can carry a `transform` *attribute* (e.g. transform="translate(20,0)") AND be targeted by a CSS `transform` rule -- but the CSS value completely replaces the attribute rather than composing with it. Every element below that needs a static positioning offset AND a CSS-animated transform is therefore split into two nested s: an outer one carrying the plain attribute (left alone, never touched by CSS), and an inner one CSS is free to animate. This applies equally to the speech bubble, which separately carries its own show/hide transform -- see .mascot-speech-bubble below. */ .automaton-pos { transform: translateX(0px); transition: transform 2.3s cubic-bezier(.4,0,.2,1); } .automaton-facing { transform-origin: 219px 180px; transition: transform 2.3s cubic-bezier(.4,0,.2,1); } .mascot-svg[data-facing="left"] .automaton-facing { transform: scaleX(-1); } .automaton-body { transform-origin: center bottom; } .mascot-svg[data-motion="sitting"] .automaton-body, .mascot-svg[data-motion="cabinet"] .automaton-body, .mascot-svg[data-motion="shelf"] .automaton-body { animation: mascot-bob 3.2s ease-in-out infinite; } @keyframes mascot-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(0deg); } } .automaton-eye { animation: mascot-blink 4.5s ease-in-out infinite; transform-origin: center; } @keyframes mascot-blink { 0%, 88%, 100% { transform: scaleY(1); } 92% { transform: scaleY(0.15); } } .automaton-eye-glow { animation: mascot-glow-pulse 2.6s ease-in-out infinite; } @keyframes mascot-glow-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* Mouse-follow: JS sets --eye-dx/--eye-dy on .eye-pupil while the pointer moves over the stage. */ .eye-pupil { transform: translate(var(--eye-dx, 0px), var(--eye-dy, 0px)); transition: transform 140ms ease-out; } .automaton-quill { transform-origin: 250px 191px; } .mascot-svg[data-motion="sitting"] .automaton-quill { animation: mascot-quill-write 2.4s ease-in-out infinite; } @keyframes mascot-quill-write { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } } /* Floating, not walking -- no legs, so he glides sideways (via .automaton-pos's own translateX transition) with just a bob/tilt to read as drifting rather than sliding like a cutout. */ .mascot-svg[data-motion="walking"] .automaton-body { animation: mascot-shuffle-bob 0.9s ease-in-out infinite; } @keyframes mascot-shuffle-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } } .mascot-float-shadow { animation: mascot-float-shadow-pulse 3.2s ease-in-out infinite; } @keyframes mascot-float-shadow-pulse { 0%, 100% { opacity: 0.25; transform: scaleX(1); } 50% { opacity: 0.15; transform: scaleX(0.85); } } .mascot-svg[data-motion="walking"] .automaton-arm-l { animation: mascot-swing-l 0.46s ease-in-out infinite; transform-origin: 206px 189px; } .mascot-svg[data-motion="walking"] .automaton-arm-r { animation: mascot-swing-r 0.46s ease-in-out infinite; transform-origin: 242px 189px; } @keyframes mascot-swing-l { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } } @keyframes mascot-swing-r { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } } /* ---------- gesture: randomized arm/wand flourishes layered on top of the idle sitting pose ---------- Both Lebard (home.js, always data-motion="sitting") and the loading scene's automaton (while seated at the desk between shuffles) share this same markup, so a `data-gesture` attribute on the shared .mascot-svg root is all either caller needs to set -- see home.js's applyGesture and loadingUI.js's own applyGesture, called on each fresh arrival at "sitting". Scoped under [data-motion="sitting"] specifically so a stale attribute left over from a previous gesture can never fight the walking/cabinet/shelf arm rules above/below once he's moved on. `null`/absent is a valid pick too (see the GESTURES lists in both callers) -- picking "no gesture" some of the time keeps him from looking like he's constantly performing. */ .mascot-svg[data-motion="sitting"][data-gesture="conjure"] .automaton-arm-l { animation: lebard-gesture-conjure-l 2.8s ease-in-out infinite; transform-origin: 206px 189px; } .mascot-svg[data-motion="sitting"][data-gesture="conjure"] .automaton-arm-r { animation: lebard-gesture-conjure-r 2.8s ease-in-out infinite; transform-origin: 242px 189px; } @keyframes lebard-gesture-conjure-l { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-36deg) translateY(-6px); } } @keyframes lebard-gesture-conjure-r { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(36deg) translateY(-6px); } } .mascot-svg[data-motion="sitting"][data-gesture="stir"] .automaton-arm-r { animation: lebard-gesture-stir-r 1.9s linear infinite; transform-origin: 242px 189px; } @keyframes lebard-gesture-stir-r { 0% { transform: rotate(6deg) translate(0, 0); } 25% { transform: rotate(22deg) translate(2px, -2px); } 50% { transform: rotate(6deg) translate(3px, 2px); } 75% { transform: rotate(-8deg) translate(-1px, 1px); } 100% { transform: rotate(6deg) translate(0, 0); } } /* The one gesture that also reaches the wand itself -- his quill (always in-hand, see .automaton-quill) and the separate .lebard-prop-wand (only present while home.js's "wand" scene is showing) share this same keyframe at the same duration so hand and wand tip read as one sweep rather than two independently-timed motions. */ .mascot-svg[data-motion="sitting"][data-gesture="flourish"] .automaton-arm-r { animation: lebard-gesture-flourish-r 1.7s ease-in-out infinite; transform-origin: 242px 189px; } .mascot-svg[data-motion="sitting"][data-gesture="flourish"] .automaton-arm-l { animation: lebard-gesture-flourish-l 1.7s ease-in-out infinite; transform-origin: 206px 189px; } .mascot-svg[data-motion="sitting"][data-gesture="flourish"] .automaton-quill, .mascot-svg[data-motion="sitting"][data-gesture="flourish"] .lebard-prop-wand { animation: lebard-gesture-flourish-prop 1.7s ease-in-out infinite; } @keyframes lebard-gesture-flourish-r { 0%, 12% { transform: rotate(0deg); } 38% { transform: rotate(-44deg); } 60% { transform: rotate(48deg); } 82%, 100% { transform: rotate(0deg); } } @keyframes lebard-gesture-flourish-l { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } } @keyframes lebard-gesture-flourish-prop { 0%, 12% { transform: rotate(-4deg); } 38% { transform: rotate(-48deg); } 60% { transform: rotate(44deg); } 82%, 100% { transform: rotate(-4deg); } } .mascot-svg[data-motion="sitting"][data-gesture="point"] .automaton-arm-r { animation: lebard-gesture-point-r 2.6s ease-in-out infinite; transform-origin: 242px 189px; } @keyframes lebard-gesture-point-r { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-52deg); } 70% { transform: rotate(-52deg); } } .mascot-svg[data-motion="cabinet"] .automaton-body, .mascot-svg[data-motion="shelf"] .automaton-body { animation: mascot-browse-tilt 1.8s ease-in-out infinite; } @keyframes mascot-browse-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } } /* ---------- scroll: unfurls downward from its rod while "reading" ---------- */ /* Real progress bar (see loadingUI.js's setProgress/reveal), not a decorative loop -- scaleY is driven by JS setting an inline `transform` directly on this group (see that function's own comment for why that safely overrides the CSS default below without the attribute-vs-CSS- transform collision documented elsewhere in this file: there's no competing CSS `transform` *rule* here, just this one static default, and inline style always wins over a stylesheet rule regardless of specificity). `transform-box: fill-box` makes `transform-origin: top` resolve against this group's own bounding box (the parchment rect, y=158) rather than the whole 780x320 scene's top edge -- without it the parchment would grow from a point far above the rod instead of its own top. Everything that should visibly "unfurl" together -- the parchment, its rainbow fill, the faint rule lines -- lives inside this one group so a single scaleY grows all of them in lockstep. */ .mascot-scroll-fill { transform: scaleY(0); transform-origin: top; transform-box: fill-box; transition: transform 0.6s ease; } /* `fill` is the per-instance rainbow gradient defined in loadingUI.js's buildMascotMarkup, not a flat color -- reads as something magical washing over the parchment as it unfurls. */ .page-fill { opacity: 0.6; } /* ---------- wax seal: cracks once as the scene mounts, then stays gone ---------- Deliberately a plain (non-`infinite`) animation with `animation-fill-mode: forwards` -- it just plays through once as soon as this element exists (loadingUI.js rebuilds the whole scene's markup fresh on every show(), so a new instance always gets a fresh crack) and then holds its end state, rather than looping alongside the ambient stuff below. */ .mascot-seal-solid, .mascot-seal-half { transform-box: fill-box; transform-origin: center; } .mascot-seal-solid { animation: mascot-seal-hold 1.1s ease forwards; } @keyframes mascot-seal-hold { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } .mascot-seal-half { animation-duration: 1.1s; animation-timing-function: cubic-bezier(.5, 0, .75, 1); animation-fill-mode: forwards; } .mascot-seal-half--l { animation-name: mascot-seal-crack-l; } .mascot-seal-half--r { animation-name: mascot-seal-crack-r; } @keyframes mascot-seal-crack-l { 0%, 78% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(-16px, 22px) rotate(-55deg); opacity: 0; } } @keyframes mascot-seal-crack-r { 0%, 78% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(16px, 24px) rotate(55deg); opacity: 0; } } /* ambient magic near the book while reading */ .mascot-spark { opacity: 0; } .mascot-svg[data-motion="sitting"] .mascot-spark { animation: mascot-spark-rise 2.6s ease-out infinite; } .mascot-spark--1 { animation-delay: 0s; } .mascot-spark--2 { animation-delay: 0.6s; } .mascot-spark--3 { animation-delay: 1.2s; } .mascot-spark--4 { animation-delay: 1.8s; } .mascot-spark--5 { animation-delay: 0.3s; } @keyframes mascot-spark-rise { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 15% { opacity: 1; } 80% { opacity: 0.4; } 100% { opacity: 0; transform: translateY(-34px) scale(1); } } .book-glow { animation: mascot-aura-pulse 3.4s ease-in-out infinite; } @keyframes mascot-aura-pulse { 0%, 100% { opacity: 0.12; r: 46; } 50% { opacity: 0.28; r: 56; } } /* Shelf books are draggable (see loadingUI.js's makeShelfBooksInteractive) -- touch-action: none stops a touchscreen drag from also scrolling the page while a book is being picked up. */ .mascot-shelf-book { cursor: grab; touch-action: none; } .mascot-shelf-book.is-dragging { cursor: grabbing; } /* ---------- desk dressing: candle, reading lamp, alchemy props ---------- */ /* transform-box: fill-box makes transform-origin resolve against this 's own geometry (its flame shape spans x=6..14, so "bottom center" lands exactly on the candlestick's cx=10) -- without it, some browsers anchor an SVG element's transform-origin to the whole viewport instead of the element's own bounding box, which is what was actually causing the flame to swing off-center: the rotate/scale below was pivoting around a point nowhere near the candle. Also toned down the rotate/scale amplitude itself, which read as too jittery even once correctly anchored. */ .candle-flame { transform-box: fill-box; transform-origin: bottom center; animation: mascot-flicker 1.8s ease-in-out infinite; } @keyframes mascot-flicker { 0%, 100% { transform: scale(1, 1) rotate(0deg); } 25% { transform: scale(0.97, 1.03) rotate(-0.75deg); } 50% { transform: scale(1.02, 0.98) rotate(0.5deg); } 75% { transform: scale(0.98, 1.02) rotate(0.75deg); } } .candle-glow, .lamp-glow, .vial-glow { animation: mascot-aura-pulse 2.6s ease-in-out infinite; } .lamp-glow { animation-duration: 3.1s; } .vial-glow { animation-duration: 2.2s; animation-delay: 0.4s; } /* ---------- ambient mystical dust, drifting the whole scene, always on ---------- */ .ambient-mote { opacity: 0; animation: mascot-ambient-drift 8s ease-in-out infinite; } @keyframes mascot-ambient-drift { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 0.5; } 50% { opacity: 0.7; transform: translate(var(--mx, 10px), calc(var(--my, -20px) * 0.5)); } 90% { opacity: 0.3; } 100% { opacity: 0; transform: translate(var(--mx, 10px), var(--my, -20px)); } } /* ---------- essence wisps: motes whisked from the shelf/cabinets toward the book ---------- Positions (cx/cy) and per-wisp --dx/--dy are set in JS by loadingUI.js's populateEssenceWisps -- the keyframes below just animate a translate() offset + fade so each wisp reads as drawn out of its source and converging on the book while it's "building". */ .mascot-essence-wisp { opacity: 0; animation: mascot-essence-flow 2.6s ease-in infinite; } @keyframes mascot-essence-flow { 0% { opacity: 0; transform: translate(0, 0) scale(0.7); } 12% { opacity: 0.9; } 75% { opacity: 0.5; } 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.4); } } /* ---------- reveal: the loading scene's completion moment (see loadingUI.js's showRich's own reveal(), called via LoadingUI.playReveal() right before the real result replaces this scene) -- everything still moving slows way down while the scroll finishes unfurling and grows slightly, so "it's done" reads as a deliberate beat instead of the scene just vanishing mid-motion. Every duration in this whole section was deliberately lengthened together (durations up from an original ~0.55-1.7s to ~1.3-4.4s here, plus loadingUI.js's own EXPLOSION_DELAY_MS/ RESOLVE_AFTER_EXPLOSION_MS/EXPLOSION_SLOWMO/animateSectionsIn stagger) -- this is a one-time payoff moment, not something anyone sits through repeatedly the way the ambient wandering/quips are, so there's no cost to lingering on it, and the original faster pace made the reveal burst's own arrival at the book hard to actually follow (see mascot-reveal-converge below). ---------- */ .mascot-scroll-group { transition: transform 4.4s cubic-bezier(.22, .9, .3, 1); transform-box: fill-box; transform-origin: center; } .mascot-svg.revealing .mascot-scroll-group { transform: scale(1.16); } .mascot-svg.revealing .mascot-scroll-fill { transition: transform 4.4s cubic-bezier(.22, .9, .3, 1); } .mascot-svg.revealing .book-glow { animation: none; opacity: 0.5; r: 66; transition: opacity 4.4s ease, r 4.4s ease; } .mascot-svg.revealing .mascot-spark { animation-duration: 7.5s; } .mascot-svg.revealing .ambient-mote { animation-duration: 23s; } .mascot-svg.revealing .mascot-essence-wisp { animation-duration: 7.5s; } .mascot-svg.revealing .candle-flame, .mascot-svg.revealing .candle-glow, .mascot-svg.revealing .lamp-glow, .mascot-svg.revealing .vial-glow { animation-duration: 7.5s; } /* Celebration: jumps in place while both arms raise and wave, wherever the automaton currently is (desk, cabinet, or shelf; see loadingUI.js's reveal() for why he isn't sent home first). The jump overrides -- doesn't combine with -- the ambient mascot-bob/mascot-browse-tilt rule above (same .automaton-body element, tied specificity via the [data-motion="..."] attribute selector, so this wins purely on appearing later in the stylesheet); same transform-origin values on the arms as the existing walking swing further up. Jump and wave share one duration so the peaks of each land together and read as one cohesive celebration gesture rather than two independently- timed motions drifting in and out of sync. */ .mascot-svg.revealing .automaton-body { animation: mascot-celebrate-jump 1.3s ease-in-out infinite; } @keyframes mascot-celebrate-jump { 0%, 100% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(-16px) rotate(0deg); } 55% { transform: translateY(-16px) rotate(0deg); } } .mascot-svg.revealing .automaton-arm-l { animation: mascot-wave-l 1.3s ease-in-out infinite; transform-origin: 206px 189px; } .mascot-svg.revealing .automaton-arm-r { animation: mascot-wave-r 1.3s ease-in-out infinite; transform-origin: 242px 189px; } @keyframes mascot-wave-l { 0%, 100% { transform: rotate(-48deg); } 50% { transform: rotate(-74deg); } } @keyframes mascot-wave-r { 0%, 100% { transform: rotate(48deg); } 50% { transform: rotate(74deg); } } /* ---------- reveal burst: rainbow motes rushing in from all four edges of the frame toward the book's exact center the instant the deck is ready (see loadingUI.js's populateRevealBurst) -- a continuous ~5s stream of individually-spawned, one-shot particles (not an always-on loop like the ambient essence wisps above), so it reads as a distinct celebratory rush rather than continuous ambient flow. Went through several revisions before landing here, all chasing the same problem from different angles: a version that faded a particle out well before it actually reached the book never read as "landing" anywhere; a version that held particles fully opaque and motionless at the target for a big chunk of a shared, long animation piled dozens of them into one static, book-shaped clump; even randomizing each particle's OWN duration/delay within that same "create them all up front" approach still left a large fraction of the field parked near the target at any given instant, since so much of any one particle's long lifetime was necessarily spent already arrived. The actual fix wasn't in this keyframe at all -- it was spawning particles one at a time, spread over the whole ~5s window (see populateRevealBurst), so only a small, constantly-changing handful are ever in flight together. That means each individual particle's OWN trip (below) can -- and needs to -- be short and almost entirely in motion: translation runs across nearly this whole duration, with only a brief flash right at arrival before fading, rather than a long dwell. ------- */ .mascot-reveal-particle { opacity: 0; animation: mascot-reveal-converge 1.1s cubic-bezier(.3, .05, .35, 1) forwards; } @keyframes mascot-reveal-converge { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 10% { opacity: 1; } 86% { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.96), calc(var(--dy, 0px) * 0.96)) scale(1.05); } 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.3); } } /* ---------- speech bubble (child of .automaton-pos, tracks his position) ---------- .mascot-speech-bubble itself carries the show/hide transform below -- its static position lives on a separate outer wrapper in the markup, not on this element, for the same attribute-vs-CSS-transform reason documented above .automaton-pos. */ .mascot-speech-bubble { opacity: 0; transform: translateY(6px) scale(0.85); transform-origin: bottom left; transition: opacity 220ms ease, transform 220ms ease; } .mascot-speech-bubble.show { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .automaton-pos, .automaton-facing, .automaton-body, .automaton-eye, .automaton-eye-glow, .eye-pupil, .automaton-quill, .mascot-float-shadow, .automaton-arm-l, .automaton-arm-r, .lebard-prop-wand, .page-fill, .book-glow, .candle-flame, .candle-glow, .lamp-glow, .vial-glow, .ambient-mote, .mascot-spark, .mascot-speech-bubble, .mascot-essence-wisp, .mascot-scroll-group, .mascot-scroll-fill, .mascot-seal-solid, .mascot-seal-half, .mascot-progress-fill-bar, .mascot-reveal-particle, .reveal-section, .companion-svg, .companion-svg * { animation: none !important; transition: none !important; } /* No crack animation to reveal it, so skip straight to "already open": hide the seal outright rather than leaving an intact wax seal sitting there forever. */ .mascot-seal-solid, .mascot-seal-half { opacity: 0 !important; } } /* Staggered top-to-bottom fade-in for a freshly-rendered result's own top-level sections (see loadingUI.js's animateSectionsIn, called right after renderBuildResult/renderAnalyzeResult/the Card Ideas gallery render, while playReveal()'s page-wide explosion is still travelling across the screen) -- transition-delay is set per-element in JS, this just defines the two end states. */ .reveal-section { opacity: 0; transform: translateY(-14px); transition: opacity 0.5s ease, transform 0.5s var(--ease); } .reveal-section--in { opacity: 1; transform: translateY(0); } .result-block { display: flex; flex-direction: column; gap: 10px; } .result-heading { font-size: 0.8929rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); } /* Collapsible section headers (see collapsible.js) -- every result-heading in the build/analyze output, the mana curve/color/Card View blocks, and My Decks' analysis view is one of these now. .result-heading's font styling above still applies; this gives the
Key") and the last one clipped off the edge. A second row is fine; an unreadable one isn't. */ .settings-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); border-bottom: 1px solid var(--border); margin-bottom: var(--space-sm); } .settings-tab { position: relative; flex: 0 0 auto; white-space: nowrap; background: transparent; border: none; color: var(--text-dim); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; font-size: var(--font-sm); font-weight: 500; transition: color var(--transition-fast); } .settings-tab:hover { color: var(--text); } .settings-tab.active { color: var(--text); } .settings-tab.active::after { content: ''; position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; } .settings-panel { padding-top: var(--space-2xs); } .settings-section { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .settings-section:last-child { border-bottom: none; padding-bottom: 0; } .settings-section h3 { margin: 0; font-size: 0.9643rem; color: var(--text); } .theme-options { display: flex; flex-direction: column; gap: var(--space-sm); } .theme-option { display: flex; align-items: center; gap: var(--space-md); width: 100%; text-align: left; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-md); cursor: pointer; font-family: inherit; transition: border-color var(--transition-fast), background var(--transition-fast); } .theme-option:hover { border-color: var(--text-dim); } .theme-option.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); } .theme-swatches { display: flex; gap: 4px; flex-shrink: 0; } .theme-swatch { width: 16px; height: 16px; border-radius: var(--radius-xs); border: 1px solid rgba(255, 255, 255, 0.1); } .theme-option-name { display: block; font-size: var(--font-sm); font-weight: 600; color: var(--text); } .theme-option-desc { display: block; font-size: var(--font-xs); color: var(--text-dim); margin-top: 2px; } .font-preview-glyph { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: var(--font-lg); color: var(--text); } /* Slider + typed number input for text size (see app.js's buildFontSizeOptions) -- replaces the old three-button small/medium/large picker with a continuous px value either control can drive. */ .font-size-controls { display: flex; align-items: center; gap: var(--space-md); } .font-size-slider { flex: 1; accent-color: var(--accent); } .font-size-number { width: 56px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); color: var(--text); font-family: inherit; text-align: right; } .font-size-number:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); } .font-size-unit { color: var(--text-dim); font-size: var(--font-sm); } .settings-subheading { margin: 4px 0 0; font-size: var(--font-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); } .checkbox-field { display: flex; align-items: center; gap: 8px; font-size: 0.9286rem; color: var(--text-dim); } .checkbox-field input { width: auto; } /* ---------- Topbar profile / logout ---------- */ .topbar-right { display: flex; align-items: center; gap: 10px; -webkit-app-region: no-drag; } .profile-chip { display: inline-flex; align-items: center; font-size: 0.8929rem; color: var(--text-dim); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 12px; } .profile-chip-inner { display: flex; align-items: center; gap: 8px; } .profile-chip-name { font-weight: 600; color: var(--text); } /* ---------- Profile bling: avatar frame, border color/glow effects, tier badge (see public/bling.js) ---------- */ .avatar-frame { position: relative; flex-shrink: 0; border-radius: 50%; } .avatar-frame-inner { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--bg-input); border: 2px solid var(--avatar-border-color, var(--mana-c)); display: flex; align-items: center; justify-content: center; } .avatar-frame-img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); font-weight: 700; } .avatar-prefab-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(0, 0, 0, 0.72); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35); } /* "Soft Glow" (Playgroup+) -- a steady colored glow behind the border. */ .avatar-effect--glow .avatar-frame-inner { box-shadow: 0 0 6px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 70%, transparent), 0 0 14px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 40%, transparent); } /* "Pulsing Glow" (Commander+) -- the same glow, breathing between soft and bright. */ .avatar-effect--pulse .avatar-frame-inner { animation: avatar-pulse 2.4s ease-in-out infinite; } @keyframes avatar-pulse { 0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 55%, transparent), 0 0 12px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 25%, transparent); } 50% { box-shadow: 0 0 14px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 90%, transparent), 0 0 28px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 55%, transparent); } } /* "Holo Foil" (Rules Committee) -- ignores the chosen color (see bling.js), always a spinning rainbow ring. Lives on a ::before pseudo-element rather than rotating .avatar-frame itself, so the avatar image/icon inside stays upright while only the ring spins. The mask cuts a thin band out of a solid circle so only the ring (not a full rainbow disc) is visible. */ .avatar-effect--holo .avatar-frame-inner { border-color: var(--bg-panel); } .avatar-effect--holo::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; z-index: 0; background: conic-gradient(from 0deg, #ff3b3b, #ff8c1a, #ffe066, #39ff6a, #2fb8ff, #b565ff, #ff3b3b); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); animation: avatar-holo-spin 3s linear infinite; } @keyframes avatar-holo-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .avatar-effect--pulse .avatar-frame-inner, .avatar-effect--holo::before { animation: none; } } .tier-badge { position: absolute; right: -2px; bottom: -2px; z-index: 2; min-width: 14px; width: 42%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7em; line-height: 1; border: 1px solid var(--bg-panel); } .tier-badge--playgroup { background: #b08d57; color: #2a1f0f; } .tier-badge--commander { background: #c7cbd4; color: #1a1a1a; } .tier-badge--rules_committee { background: linear-gradient(135deg, #ffd700, #fff2a8); color: #3a2c00; box-shadow: 0 0 6px rgba(255, 215, 0, 0.7); } .bling-preview { display: flex; justify-content: center; margin-bottom: var(--space-md); } .bling-avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--space-sm); margin: var(--space-sm) 0 var(--space-lg); } .bling-avatar-option { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--border); padding: 0; overflow: hidden; cursor: pointer; background: none; } .bling-avatar-option:hover { border-color: var(--accent); } .bling-avatar-option .avatar-prefab-icon { font-size: 1.2rem; } .bling-color-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-sm) 0; } .bling-color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; } .bling-color-swatch.active { box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent); } .bling-effect-options { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-sm) 0; } .bling-effect-option:disabled { opacity: 0.5; cursor: not-allowed; } .friend-name-row { display: flex; align-items: center; gap: var(--space-sm); margin-right: auto; } /* ---------- Presence (see presence.js) ---------- */ .friend-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; } /* Initial-letter avatar, used when there's no bling avatar to draw (see gameLobby.js's seatAvatarNode). Mostly a desktop path -- bling.js is web-only -- but the markup comes from a SHARED file, so the class has to be styled on both platforms or one of them renders an unstyled blob. Mirrors desktop-app/renderer/styles.css's copy. */ .friend-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; flex-shrink: 0; } /* ---------- Commander on a lobby seat (see gameLobby.js's commanderNode) ---------- Which commander a seat brought, with its colour identity as pips right next to the name -- both from a SHARED file, so this block is mirrored in desktop-app/renderer/styles.css. */ .lobby-commander { display: inline-flex; align-items: center; gap: var(--space-2xs); min-width: 0; } .lobby-commander-name { color: var(--text-dim); font-size: 0.8571rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lobby-commander-colors { display: inline-flex; gap: 2px; flex-shrink: 0; } /* Mana pips. Colours match the deck charts' own colour-identity palette (see chart.js's PIE_COLORS) so one commander reads as the same colours everywhere in the app. The letter stays in the pip rather than relying on colour alone -- W and C are near-indistinguishable at 14px for anyone who doesn't already know the convention, and colour-blind readers get nothing from the fill at all. */ .mana-pip { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1; border: 1px solid rgba(0, 0, 0, 0.35); } .mana-pip--w { background: #f8f6d8; color: #2b2a22; } .mana-pip--u { background: #4f8fd8; color: #06182b; } .mana-pip--b { background: #3a3a3f; color: #d9d9de; } .mana-pip--r { background: #d8503a; color: #2b0b06; } .mana-pip--g { background: #4f9a5a; color: #07200d; } .mana-pip--c { background: #9aa1ae; color: #1b1f26; } .status-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg-input); /* "cutout" ring against whatever it's sitting on */ box-sizing: border-box; } /* Own status toggle/picker rows aren't sitting on an avatar -- no cutout ring needed there, just a plain dot inline with the label text (see .presence-own-toggle/.presence-option below). */ .presence-own-toggle .status-dot, .presence-option .status-dot { position: static; border: none; width: 9px; height: 9px; } .status-dot--online { background: var(--status-online); } .status-dot--away { background: var(--status-away); } .status-dot--dnd { background: var(--status-dnd); } .status-dot--offline { background: var(--status-offline); } .presence-own-wrap { position: relative; } .presence-own-toggle { display: inline-flex; align-items: center; gap: 6px; } .presence-picker { position: absolute; top: calc(100% + 8px); right: 0; width: 200px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-modal); z-index: 150; } .presence-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: none; border: none; border-radius: var(--radius-sm); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .presence-option:hover { background: var(--bg-input); } .presence-option.active { background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 600; } /* ---------- Companion mascot (see companion.js) -- a small animated cat/dog/owl that paces in its own strip of space in the topbar, between the title and the profile chip. Same class-based convention as the loading mascot scene above (only one companion instance ever exists, but consistency matters more than the saved characters). ---------- */ .companion-slot { width: 130px; height: 32px; overflow: visible; position: relative; flex-shrink: 0; } .companion-svg { width: 34px; height: 34px; overflow: visible; opacity: 0; position: absolute; left: 0; top: 50%; margin-top: -17px; /* vertically centered in the slot -- absolutely-positioned children ignore .companion-slot's own layout, so this can't rely on flex/grid alignment there */ transform: translateX(0) scale(0.4) translateY(6px); } .companion-svg.enter { animation: companion-enter 420ms cubic-bezier(.3,1.6,.4,1) forwards; } .companion-svg.exit { animation: companion-exit 260ms ease-in forwards; } @keyframes companion-enter { to { opacity: 1; transform: translateX(0) scale(1) translateY(0); } } @keyframes companion-exit { to { opacity: 0; transform: translateX(0) scale(0.5) translateY(6px); } } /* Pacing: ping-pongs across the slot's width once settled in. Runs on the outer (position) while the species-specific idle animations below run independently on inner elements (tail, ears, etc.), so they layer without fighting over `transform`. opacity:1 is declared here explicitly, not just left to companion-enter's forwards fill -- .enter is removed once .pacing takes over, and since this keyframe only touches `transform`, omitting it here would mean the element falls back to its base (opacity:0) declaration the instant pacing starts (see the identical note on .mascot-speech-bubble's sibling bug class above -- same root cause: animation-fill-mode: forwards only holds what its own keyframes touch). */ .companion-svg.pacing { opacity: 1; animation: companion-pace 5.2s ease-in-out infinite; } @keyframes companion-pace { 0%, 100% { transform: translateX(0) scaleX(1); } 48% { transform: translateX(96px) scaleX(1); } 50% { transform: translateX(96px) scaleX(-1); } 98% { transform: translateX(0) scaleX(-1); } } .companion-svg .companion-foot-l, .companion-svg .companion-foot-r { transform-origin: top center; } .companion-svg.pacing .companion-foot-l { animation: companion-pace-step-l 0.32s ease-in-out infinite; } .companion-svg.pacing .companion-foot-r { animation: companion-pace-step-r 0.32s ease-in-out infinite; } @keyframes companion-pace-step-l { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-18deg); } } @keyframes companion-pace-step-r { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } } .companion-svg .companion-idle-blink { animation: mascot-blink 3.2s ease-in-out infinite; transform-origin: center; } .companion-svg .companion-idle-cat-tail { animation: companion-cat-tail 1.6s ease-in-out infinite; transform-origin: 20px 26px; } @keyframes companion-cat-tail { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } } .companion-svg .companion-idle-dog-tail { animation: companion-dog-tail 0.35s ease-in-out infinite; transform-origin: 26px 22px; } @keyframes companion-dog-tail { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } } .companion-svg .companion-idle-dog-bob { animation: companion-dog-bob 1.1s ease-in-out infinite; } @keyframes companion-dog-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } .companion-svg .companion-idle-owl-tilt { animation: companion-owl-tilt 2.4s ease-in-out infinite; transform-origin: 17px 20px; } @keyframes companion-owl-tilt { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } /* Essence-active: toggled via window.Companion.setEssenceActive() (see companion.js) while a rich automaton loading scene is running somewhere in the app -- ties the topbar companion into the same "drawing magical essence" idea as the shelf/cabinet wisps in loadingUI.js, without any cross-DOM positioning between the two (see loadingUI.js's richInstanceCount comment). A soft pulsing glow behind the critter, not a new shape, so it reads at 34x34 without redesigning the sprite itself. */ .companion-slot.essence-active .companion-svg.pacing { filter: drop-shadow(0 0 4px var(--accent-hover)) drop-shadow(0 0 8px var(--ok)); animation-name: companion-pace, companion-essence-glow; animation-duration: 5.2s, 1.6s; animation-timing-function: ease-in-out, ease-in-out; animation-iteration-count: infinite, infinite; } @keyframes companion-essence-glow { 0%, 100% { filter: drop-shadow(0 0 3px var(--accent-hover)) drop-shadow(0 0 6px var(--ok)); } 50% { filter: drop-shadow(0 0 6px var(--accent-hover)) drop-shadow(0 0 12px var(--ok)); } } /* ---------- Auth screen ---------- */ .auth-screen { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 200; } .auth-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; width: 400px; max-width: 92vw; display: flex; flex-direction: column; gap: 16px; } .auth-title { font-weight: 700; font-size: 1.2143rem; display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 4px; } .auth-view { display: flex; flex-direction: column; gap: 14px; } .auth-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .profile-list { display: flex; flex-direction: column; gap: 8px; } .profile-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 10px 14px; cursor: pointer; font-size: 0.9643rem; text-align: left; } .profile-btn:hover { border-color: var(--accent); } .profile-btn .twofa-tag { font-size: 0.7857rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 8px; } /* ---------- My Decks tab ---------- */ .decks-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } /* Groups multiple action buttons inside a .decks-toolbar into one tight cluster (small gap, wraps on narrow screens) instead of letting the toolbar's own space-between spread each button apart individually -- used wherever a toolbar has a heading plus more than one button (e.g. the Cube detail view's Start Draft/Rename/Delete row). */ .toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* --- List/Grid/Card view toggle (viewToggle.js) --------------------------------------------- */ .view-toggle { display: flex; gap: 4px; margin-bottom: 10px; } /* My Collection, opened-collection view (index.html's #collection-detail): stretch the card list all the way to the bottom of the window instead of capping it at a fixed height and leaving the rest of the viewport as dead space below it. Each level below #tab-collection has to opt into flex (rather than percentage heights) because .content is the only ancestor with a height that's actually definite -- flex:1 propagates that down without every intermediate div needing its own explicit height. .two-col's own align-items: start (needed elsewhere so its two columns don't stretch to match each other) is overridden back to stretch here so .panel.results actually fills the row instead of shrinking to its content height. */ #tab-collection.active { display: flex; flex-direction: column; height: 100%; } #collection-detail:not(.hidden) { display: flex; flex-direction: column; flex: 1; min-height: 0; } #collection-detail .two-col { flex: 1; min-height: 0; align-items: stretch; } #collection-detail .panel.results { display: flex; flex-direction: column; min-height: 0; } #collection-detail .collection-list { flex: 1; min-height: 0; max-height: none; } /* My Collection's per-collection toolbar (index.html's #collection-detail) -- sits the List/Grid/ Card view toggle and the color-identity filter (reuses .mana-toggle-row, same WUBRG(+C) pips as the Build tab's own color filter) on one tight row, color toggles pushed to the right via space-between. Both children keep their own margin-bottom: 0 here (each carries one on its own elsewhere -- .view-toggle above, .mana-toggle-row nowhere but inherits field spacing) so the row itself owns the single margin below it instead of doubling up unevenly between two children of different heights (36px round pips vs. the shorter text pills). align-items: center keeps both rows' buttons vertically centered against each other despite that height difference. */ .collection-view-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; } .collection-view-toolbar .view-toggle, .collection-view-toolbar .mana-toggle-row { margin-bottom: 0; } .view-toggle-btn { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 0.8571rem; cursor: pointer; } .view-toggle-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } /* --- My Decks tab: three view modes ---------------------------------------------------------- */ .decks-grid.view-list { display: flex; flex-direction: column; gap: 8px; } .decks-grid.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .decks-grid.view-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .deck-card, .deck-tile { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; } .deck-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; } .deck-row .deck-name { flex: 0 0 auto; min-width: 140px; } .deck-row .deck-meta { flex: 1; } .deck-row .deck-actions { margin-top: 0; flex: 0 0 auto; } .deck-card .deck-name, .deck-tile .deck-name, .deck-row .deck-name { font-weight: 600; font-size: 1rem; } .deck-card .deck-meta, .deck-tile .deck-meta, .deck-row .deck-meta { font-size: 0.8571rem; color: var(--text-dim); line-height: 1.5; } .deck-card .deck-actions, .deck-tile .deck-actions, .deck-row .deck-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .deck-card .deck-actions .btn, .deck-tile .deck-actions .btn, .deck-row .deck-actions .btn { padding: 6px 10px; font-size: 0.8571rem; } .deck-tile-art { width: 100%; aspect-ratio: 63 / 88; overflow: hidden; border-radius: var(--radius-sm); } .deck-tile-art img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); } .deck-tile-art .missing-img { width: 100%; height: 100%; } /* Read-only deck detail ("View") -- see decks.js's renderDeckDetail. Shown in place of the deck list within the same My Decks tab, never inside the Build/Edit tab (that's still "Edit This Deck"'s job). */ .deck-detail-back { margin-bottom: var(--space-md); } .deck-detail-header { display: flex; gap: var(--space-md); margin-bottom: var(--space-md); } .deck-detail-art { width: 140px; flex-shrink: 0; aspect-ratio: 63 / 88; overflow: hidden; border-radius: var(--radius-sm); } .deck-detail-art img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); } .deck-detail-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .deck-detail-name { font-size: 1.2857rem; font-weight: 700; cursor: pointer; } .deck-detail-name:hover { text-decoration: underline dotted; } /* Edit This Deck / View Analysis / Add a card / Delete -- previously plain full-size .btn elements with no gap rule at all (relying on whatever incidental inline spacing the browser happened to give adjacent buttons), which read as cramped next to each other. Sized down a step from the default .btn (not all the way to the deck-list rows' compact size above -- these are the primary actions for whichever single deck is open, so they stay a bit more prominent than a list row's inline buttons) and given real breathing room between them. */ #deck-detail .deck-actions { margin-bottom: var(--space-lg); display: flex; gap: 10px; flex-wrap: wrap; } #deck-detail .deck-actions .btn { padding: 7px 14px; font-size: 0.8929rem; } #deck-detail .deck-analysis-sections { margin-bottom: var(--space-lg); } .badge-warn-text { color: var(--error) !important; } /* --- My Collection tab ---------------------------------------------------------------------- */ /* Detail view's own toolbar (see index.html) -- wraps to two lines on a narrow viewport instead of .decks-toolbar's plain single-row space-between, since the stats bar below can now carry more than one line of its own (title + a row of stat pills). */ .collection-detail-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 12px; } .collection-detail-actions { display: flex; gap: 8px; flex-shrink: 0; } .collection-stats-bar { display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* One labeled pill per stat (see collection.js's buildStatPill) -- same label+value shape as chart.js's .market-total-badge ("The Cards" section's own per-source price totals), reused here so a collection's headline numbers read as part of the same visual system. */ .collection-stats-pills { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .collection-stat-pill { display: flex; align-items: baseline; gap: 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; font-size: var(--font-xs); } .collection-stat-pill-label { color: var(--text-dim); } .collection-stat-pill-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* Total Value gets its own neon-green glowing border rather than blending in with the other pills -- it's the number someone opening their collection cares about most. Reuses game-changer-glow-pulse (see the Game Changers section above) rather than a third near- identical keyframe block, and --neon-green rather than the themed --neon for the same reason Game Changers/the Spicy-Fluffy score do: a fixed, unmistakably "money" green regardless of theme. */ .collection-stat-pill--value { border: 2px solid var(--neon-green); animation: game-changer-glow-pulse 2.2s ease-in-out infinite; } .collection-stat-pill--value .collection-stat-pill-value { color: var(--neon-green); text-shadow: 0 0 6px color-mix(in srgb, var(--neon-green) 70%, transparent); } .collection-stat-pill--warn { border-color: var(--warn); } .collection-stat-pill--warn .collection-stat-pill-value { color: var(--warn); } .collection-list { max-height: 520px; overflow-y: auto; } .collection-list.view-list { display: flex; flex-direction: column; gap: 6px; } .collection-list.view-grid, .card-price-list.view-grid, .card-role-group.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .collection-list.view-card, .card-price-list.view-card, .card-role-group.view-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .collection-row { display: flex; align-items: center; gap: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } .collection-row-name { flex: 1; /* Flex items default to `min-width: auto`, which for `white-space: nowrap` text resolves to the *full* unwrapped text width, not 0 -- without this override, a long card name can't actually shrink below its own full width to make room for the price/qty/Remove columns that come after it, which forces the row to either overflow or crowd/hide those later columns depending on the browser. This is what actually lets `flex: 1` + the ellipsis truncation below do their job. */ min-width: 0; font-size: 0.9286rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .collection-row-price { font-size: 0.8571rem; color: var(--text-dim); white-space: nowrap; } .collection-row-qty { /* `flex: 0 0 60px` (not just `width: 60px`) so this can never get stretched wide by leftover flex space -- belt-and-suspenders alongside collection-row-name's min-width fix above, so the qty box stays a fixed 60px regardless of how the row's other columns end up sized. */ flex: 0 0 60px; width: 60px; text-align: center; } .collection-row .btn { padding: 5px 10px; font-size: 0.8571rem; } /* --- Deck card-prices list (chart.js) -------------------------------------------------------- */ .card-price-list.view-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; } /* View / Group By dropdowns (see chart.js's buildFilterDropdown/buildGroupToggle) -- independent axes, so both stay visible and usable together. */ .card-view-controls { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } /* Pushes the Sort dropdown (and the Price Tier/Treatment dropdowns after it, if present) to the right side of .card-view-controls, separating "how these cards are sorted/priced" from the View/Group By dropdowns on the left rather than having every control run together in one row. */ .price-sort-wrap { margin-left: auto; } /* --- Filter dropdowns shared by View/Group By/Sort (chart.js) and Price Tier/Treatment (priceFilters.js) -- a header label above a native ; widening moves them back and drops the class. Everything below keys off that class rather than a @media query of its own -- the JS matchMedia is then the single place the breakpoint is written down, so the styling and the DOM move can never disagree about which one is in effect. */ /* Wide screens: no hamburger, and #nav-drawer is an empty div sitting in the topbar. */ .nav-drawer-toggle { display: none; } .nav-drawer { display: none; } /* Text labels that only earn their space once a control is a full-width row in the drawer -- in the topbar the icon alone is the affordance (and there's no room for more). */ .topbar-btn-label { display: none; } body.nav-collapsed .topbar { /* Positioning context for the drawer, so it can hang off the topbar's bottom edge without JS having to measure the header's height. */ position: relative; gap: 8px; } /* Long title + fixed-width companion + toggle can exceed a 320px-wide phone -- let the title be the thing that gives, since it's the one part that's still legible truncated. */ body.nav-collapsed .topbar-title { min-width: 0; } body.nav-collapsed .topbar-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.nav-collapsed .nav-drawer-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; width: 42px; height: 42px; padding: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); } body.nav-collapsed .nav-drawer-toggle:hover, body.nav-collapsed .nav-drawer-toggle.is-open { border-color: var(--accent); color: var(--accent); } .nav-drawer-bars { position: relative; display: block; width: 20px; height: 14px; } .nav-drawer-bars > span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--transition-base), opacity var(--transition-fast); } .nav-drawer-bars > span:nth-child(1) { top: 0; } .nav-drawer-bars > span:nth-child(2) { top: 6px; } .nav-drawer-bars > span:nth-child(3) { top: 12px; } /* Open: the outer bars slide onto the middle one and cross, the middle one fades out. */ .nav-drawer-toggle.is-open .nav-drawer-bars > span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-drawer-toggle.is-open .nav-drawer-bars > span:nth-child(2) { opacity: 0; } .nav-drawer-toggle.is-open .nav-drawer-bars > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } body.nav-collapsed .nav-drawer { display: block; position: absolute; top: 100%; left: 0; right: 0; /* Over normal page content, under .modal-overlay's 100 and .game-board-overlay's 500 -- a menu shouldn't be able to cover a dialog or the live game board. */ z-index: 90; background: var(--bg-panel); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-modal); /* The drawer lives inside .topbar, which is the desktop app's window-drag region -- .topbar's own rule only exempts `button`, which would leave the notification rows (divs) as dead drag-handles instead of clickable rows. */ -webkit-app-region: no-drag; /* Closed. `visibility` is what actually takes the collapsed menu out of the tab order and the accessibility tree, and it's transitioned with a delay equal to the slide so it only flips to `hidden` once the panel has finished sliding away (0s and no delay on the way open). */ max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: max-height var(--transition-base), opacity var(--transition-fast), transform var(--transition-base), visibility 0s linear 300ms; } body.nav-collapsed .nav-drawer.is-open { /* An explicit max-height (rather than `none`) is what makes the open/close animatable at all; the cap doubles as "never taller than the screen", with the overflow scrolling the rest. */ max-height: min(76dvh, 620px); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 1; visibility: visible; transform: none; transition: max-height var(--transition-base), opacity var(--transition-fast), transform var(--transition-base), visibility 0s; } @media (prefers-reduced-motion: reduce) { /* The global reduce rule near the top of this file collapses transition-*duration* only, which would leave the closing drawer's visibility delay intact -- and a 300ms invisible-but-present panel is exactly the kind of thing that eats the next tap. */ body.nav-collapsed .nav-drawer { transition-delay: 0s; } } /* Both moved elements were horizontal rows; in the drawer the narrow axis is the other one, so they become a single stacked list of full-width rows. */ body.nav-collapsed .nav-drawer .tabs, body.nav-collapsed .nav-drawer .topbar-right { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; background: transparent; border-bottom: none; overflow: visible; } /* Separator between the two halves of the menu -- only when the nav half is actually present. */ body.nav-collapsed .nav-drawer:not(.nav-drawer--no-tabs) .topbar-right { border-top: 1px solid var(--border); } /* The tabs' normal parent (#app-shell) is `hidden` until a profile signs in, and moving them out from under it would otherwise put the whole nav on the login screen. */ body.nav-collapsed .nav-drawer--no-tabs .tabs { display: none; } body.nav-collapsed .nav-drawer .tab, body.nav-collapsed .nav-drawer .topbar-right > .btn, body.nav-collapsed .nav-drawer .presence-own-toggle, body.nav-collapsed .nav-drawer .notif-bell { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; padding: 12px 14px; border-radius: var(--radius-sm); } body.nav-collapsed .nav-drawer .presence-own-wrap, body.nav-collapsed .nav-drawer .notif-bell-wrap { width: 100%; } body.nav-collapsed .nav-drawer .profile-chip { justify-content: center; } body.nav-collapsed .nav-drawer .topbar-btn-label { display: inline; /* Keeps the click target reporting the button itself as event.target -- notifications.js's close-on-outside-click compares `e.target !== bellBtn`, so a child element swallowing the tap would close the dropdown the same tap just opened. */ pointer-events: none; } body.nav-collapsed .nav-drawer .notif-bell { gap: 10px; display: flex; align-items: center; } body.nav-collapsed .nav-drawer .notif-bell-badge { top: 8px; right: auto; left: 26px; } /* The active-tab marker is a bottom edge on a horizontal row; on a vertical list it reads as a left edge instead. */ body.nav-collapsed .nav-drawer .tab.active { background: var(--bg-input); } body.nav-collapsed .nav-drawer .tab.active::after { left: 0; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; border-radius: 0 2px 2px 0; } /* Both of these normally float over the page anchored to their topbar button. Inside a scrolling drawer a floating panel would just be clipped by the drawer's own overflow, so they become in-flow blocks that push the rest of the menu down instead. */ body.nav-collapsed .nav-drawer .presence-picker, body.nav-collapsed .nav-drawer .notif-dropdown { position: static; width: 100%; max-width: none; max-height: none; margin-top: 4px; box-shadow: none; } /* ---------- Mobile ---------- */ /* The desktop app's layout assumes a wide window; this is the one addition needed to make the same markup/CSS work on a phone screen -- everything above is otherwise shared as-is. */ @media (max-width: 760px) { /* `100vh` on the body (see the shared rule above) is sized to the viewport with the mobile browser's address bar hidden -- with the bar visible (the common case), the actual visible area is shorter than 100vh, so body's fixed-height + overflow:hidden shell ends up taller than the screen with no way to reach the bottom. `100dvh` ("dynamic viewport height") tracks the real visible area instead; every current mobile browser supports it, and this simply overrides the 100vh above in ones that do, cascade order handles browsers that don't. */ body { height: 100dvh; } .strengths-weaknesses-grid { grid-template-columns: 1fr; } /* iOS Safari doesn't give an `overflow: auto` region inertial/touch-drag scrolling by default when it's nested inside an `overflow: hidden` ancestor (the body above) -- without this, a finger-drag inside .content silently does nothing instead of scrolling. This is the actual "no scrolling on mobile" bug: the layout was already correct, touch scrolling just wasn't enabled on the region that needed it. */ .content, .modal-body, .collection-list, .card-price-list.view-list, .autocomplete-dropdown { -webkit-overflow-scrolling: touch; } .content { padding: 12px; } .two-col { display: flex; flex-direction: column; height: auto; } /* Undoes the desktop height chain (see .content > .tab-panel.active:has(> .two-col) above) for the same reason the two caps below are reset: stacked, the columns are meant to be their natural height and scroll with .content as one page, not be pinned to one screenful. Those rules are more specific than the plain .results/.two-col > .form resets below, so the parts of the chain that aren't already inert here (.two-col is display: flex on mobile, which ignores grid-template-rows) have to be undone at matching specificity rather than by those. */ .content > .tab-panel.active:has(> .two-col) { height: auto; } .content > .tab-panel.active:has(> .two-col) > .two-col > .form, .content > .tab-panel.active:has(> .two-col) > .two-col > .results { max-height: none; } .content > .tab-panel.active:has(> .two-col) > .two-col > .results { align-self: auto; min-height: 200px; } .results { max-height: none; min-height: 200px; } .two-col > .form { max-height: none; } .field-row { grid-template-columns: 1fr; } .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px 0 10px; } .tab { white-space: nowrap; padding: 8px 12px; } .topbar { padding: 10px 12px; } .topbar-title span:last-child { font-size: 0.9286rem; } .modal-wide, .modal-xwide, .auth-card { width: 100%; max-width: 100vw; } .modal { padding: 18px; border-radius: 0; } .spicy-score-modal-columns { flex-direction: column; max-height: none; } .spicy-score-modal-divider { width: 100%; height: 3px; margin: 8px 0; } .decks-grid.view-grid, .decks-grid.view-card { grid-template-columns: 1fr; } .file-row { flex-wrap: wrap; } /* Inputs/buttons a little taller for touch. */ input[type="text"], input[type="password"], input[type="number"], select, textarea, .btn { font-size: 16px; /* also prevents iOS Safari's auto-zoom-on-focus below 16px */ } /* A float narrow enough to still read as "an image with text wrapping around it" needs real width to work with -- on a phone-width column it would squeeze the Game Plan prose down to a couple of words per line instead. Stack the commander above the text instead, centered. */ .game-plan-commander { float: none; width: 55%; max-width: 220px; margin: 0 auto 12px; } /* Hover has no real equivalent on a touch screen -- most mobile browsers won't fire the mouseenter/mousemove events cardPreview.js listens for at all, but on the rare one that synthesizes something close to it on tap, a large floating image stuck open over the content with no obvious way to dismiss it is worse than just not showing one. */ .card-hover-preview { display: none !important; } } /* ================================================================================================ Friends / Chat / Inbox / Notifications (see friends.js, inbox.js, notifications.js, ws.js) ================================================================================================ */ .friend-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .friend-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); } .friend-name { font-weight: 600; } .friend-row-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* ---------- Social dock (Friends + Chat, see friends.js) ---------- Fixed to the bottom-right of the viewport, outside #app-shell -- persists across every tab instead of being buried behind a page switch, same reasoning a chat app docks its contact list/conversations rather than making them a page you navigate to and away from. */ .social-dock { position: fixed; right: 16px; bottom: 0; z-index: 250; /* above normal content, below .modal-overlay's 100... */ display: flex; align-items: flex-end; gap: 10px; max-width: calc(100vw - 24px); } .chat-windows { display: flex; align-items: flex-end; gap: 10px; overflow-x: auto; } .chat-window { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-modal); } .chat-window-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border); } .chat-window-close { background: none; border: none; color: var(--text-dim); font-size: 1.2857rem; line-height: 1; cursor: pointer; padding: 0 4px; } .chat-window-close:hover { color: var(--text); } .friends-dock { position: relative; } .friends-dock-toggle { border-radius: var(--radius) var(--radius) 0 0; } .friends-dock-panel { position: absolute; bottom: 100%; right: 0; width: 340px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-modal); } .friends-dock-panel .panel { margin: 0; } /* Card Rulings' live-search suggestions, opened UPWARD. The dock panel is itself a scroll box and the rulings field is its last child, so the dropdown's default downward direction drops the suggestions past the end of the panel's content, where they can only be reached by scrolling the whole panel further down. The panel is anchored to the bottom of the viewport, so there is always more room above this field than below it. */ .friends-dock-panel .autocomplete-dropdown { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px; } .chat-messages { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding: 10px; background: var(--bg-input); margin: 0; } .chat-bubble { align-self: flex-start; max-width: 75%; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; } .chat-bubble--mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 22%, var(--bg-panel)); border-color: var(--accent-dim); } .chat-bubble-text { white-space: pre-wrap; word-break: break-word; } .chat-bubble-time { font-size: 0.7857rem; color: var(--text-dim); margin-top: 4px; } .chat-form { display: flex; gap: 8px; } .chat-window .chat-form { padding: 8px 10px; border-top: 1px solid var(--border); } /* ---------- Inbox ---------- */ .inbox-preview { margin: 6px 0; } /* ---------- Notification bell (see notifications.js) ---------- */ /* Reuses --neon-orange -- same fixed, un-themed glow color as the Synergy Matrix tab/home button (see that section's own comment for why it's deliberately not themed per-palette). */ .notif-bell-wrap { position: relative; } .notif-bell { position: relative; font-size: 1.1429rem; line-height: 1; padding: 8px 10px; } .notif-bell-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.6429rem; font-weight: 700; line-height: 16px; text-align: center; } .notif-bell.has-unread { color: var(--neon-orange); border-color: color-mix(in srgb, var(--neon-orange) 55%, var(--border)); animation: notif-bell-glow-pulse 3s ease-in-out infinite; } @keyframes notif-bell-glow-pulse { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-orange) 40%, transparent), 0 0 12px color-mix(in srgb, var(--neon-orange) 30%, transparent); } 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-orange) 65%, transparent), 0 0 22px color-mix(in srgb, var(--neon-orange) 55%, transparent); } } /* Brief stronger flash the moment a live push arrives (see notifications.js's flash()), layered on top of has-unread's slower persistent pulse -- settles back to the plain pulse a couple seconds later rather than looping indefinitely, so it reads as "something just happened" rather than a permanently more intense state. */ .notif-bell.just-arrived { animation: notif-bell-flash 0.6s ease-in-out 2; } @keyframes notif-bell-flash { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-orange) 65%, transparent), 0 0 22px color-mix(in srgb, var(--neon-orange) 55%, transparent); } 50% { box-shadow: 0 0 0 2px var(--neon-orange), 0 0 36px color-mix(in srgb, var(--neon-orange) 90%, transparent), 0 0 60px color-mix(in srgb, var(--neon-orange) 60%, transparent); transform: scale(1.08); } } /* ---------- Inbox tab firefly (see notifications.js's spawnInboxFirefly) ---------- */ /* Each live notification/message spawns one of these inside the "Inbox" nav tab button (.tab[data-tab="inbox"], already position:relative). JS builds a one-off @keyframes per firefly that circles the button and fades in/out right on top of the "o" (.inbox-o span in index.html) -- this rule just supplies the dot's look; the per-firefly