/* Type: Bricolage Grotesque (display - brand, headings) + Hanken Grotesk (UI/body). A deliberate pairing chosen over a system stack: the grotesque display gives the personal-collection brand some editorial character; Hanken keeps dense lists legible. The font s live in each page (before this file) so they load in parallel - an @import here would block this stylesheet from applying, flashing raw HTML on a slow fetch. */ :root { --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --font-body: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif; --bg-base: #0a0c12; --bg-card: #1c2432; --bg-card-end: #313c4d; --bg-deep: #0e1119; --bg-overlay: rgba(0, 0, 0, 0.85); --bg-grad-mid: #0b0d15; --bg-grad-end: #0a0c13; --border: #475569; --border-subtle: rgba(71, 85, 105, 0.3); --text-primary: #e2e8f0; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-dim: #7d8ba3; --blue: #3b82f6; --blue-light: #60a5fa; --blue-dark: #1d4ed8; --blue-dim: rgba(59, 130, 246, 0.15); --blue-glow: rgba(59, 130, 246, 0.3); --green: #10b981; --green-light: #34d399; --green-dark: #059669; --green-dim: rgba(16, 185, 129, 0.15); --purple: #8b5cf6; --purple-light: #a78bfa; --purple-dark: #7c3aed; --purple-dim: rgba(139, 92, 246, 0.15); --amber: #f59e0b; --amber-light: #fbbf24; --amber-dark: #d97706; --amber-dim: rgba(245, 158, 11, 0.15); --red: #ef4444; --red-light: #f87171; --red-dark: #dc2626; --red-dim: rgba(239, 68, 68, 0.15); /* ── Per-category identity colors (used app-wide, consistently) ── Movies = blue · Series = green · Anime = pink · Games = amber */ --cat-movie: #3b82f6; --cat-movie-light: #60a5fa; --cat-movie-dim: rgba(59, 130, 246, 0.14); --cat-movie-border: rgba(59, 130, 246, 0.40); --cat-series: #10b981; --cat-series-light: #34d399; --cat-series-dim: rgba(16, 185, 129, 0.14); --cat-series-border: rgba(16, 185, 129, 0.40); --cat-anime: #ec4899; --cat-anime-light: #f472b6; --cat-anime-dim: rgba(236, 72, 153, 0.14); --cat-anime-border: rgba(236, 72, 153, 0.40); --cat-game: #f59e0b; --cat-game-light: #fbbf24; --cat-game-dim: rgba(245, 158, 11, 0.14); --cat-game-border: rgba(245, 158, 11, 0.40); /* Amber is too light for white text to pass contrast (2.15:1) - fills on the Games page use this near-black ink instead (8.6:1). */ --cat-game-ink: #1a1205; /* Active page accent. Neutral by default - only the four category pages (Movies / Shows / Anime / Games) get a real color, set per-page below. --accent is dark enough to carry white text on button/tab fills; --accent-light stays light enough to read as text on the dark page. */ --accent: #475569; --accent-light: #94a3b8; --accent-dim: rgba(148, 163, 184, 0.14); --accent-border: rgba(148, 163, 184, 0.35); --accent-glow: transparent; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 20px; --radius-circle: 50%; --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-btn: 0 2px 10px; --shadow-btn-hover: 0 4px 20px; --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.3); --transition: all 0.3s ease; --transition-fast: all 0.2s ease; } /* `hidden` has to actually hide. The browser's own `[hidden] { display: none }` is weaker than any author class rule, so something like `.backend-wake { display: flex }` silently wins and setting `el.hidden = true` changes the property while the element stays on screen. That is what left the cold-start notice dimming the whole page after it had been dismissed. One guard here covers every element the app toggles this way, rather than another per-class patch each time it surfaces. */ [hidden] { display: none !important; } /* ══ Light theme ═════════════════════════════════════════════════════════ Opt-in via (toggle in nav, saved to localStorage). Only surfaces, text, borders, shadows and the accent *shades* change - the four category identities stay recognizable, deepened for contrast on white. Everything else is token-driven, so it recolors automatically. */ :root[data-theme="light"] { --bg-base: #eef2f9; --bg-grad-mid: #e6ecf6; --bg-grad-end: #dfe6f2; --bg-card: #ffffff; --bg-card-end: #f1f5f9; --bg-deep: #eff3f9; --bg-overlay: rgba(15, 23, 42, 0.5); --border: #cbd5e1; --border-subtle: rgba(100, 116, 139, 0.22); --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #5b6b7a; --text-dim: #667085; /* Category identities - deepened for contrast on white so fills carry their text and the -light shade reads as colored text on a white ground. Games stays amber-600 because its buttons/tabs use forced dark text. */ --cat-movie: #2563eb; --cat-movie-light: #1d4ed8; --cat-series: #059669; --cat-series-light: #047857; --cat-anime: #db2777; --cat-anime-light: #be185d; --cat-game: #d97706; --cat-game-light: #b45309; /* Semantic light tints double as link/emphasis text in generic components - deepen them so they read on a white ground. */ --blue-light: #2563eb; --green-light: #059669; --purple-light: #7c3aed; --red-light: #dc2626; /* Neutral accent (non-category pages): readable slate, no pale text. */ --accent: #475569; --accent-light: #475569; --accent-dim: rgba(71, 85, 105, 0.10); --accent-border: rgba(71, 85, 105, 0.28); --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-card-hover: 0 10px 26px rgba(15, 23, 42, 0.14); --shadow-modal: 0 20px 60px rgba(15, 23, 42, 0.22); --shadow-inset: inset 0 2px 8px rgba(15, 23, 42, 0.06); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Display face for the brand and headings; body/UI stays Hanken (set on body). */ h1, h2, h3, .nav-brand, .brand-name, .page-header-title, .dash-hero-title, .dash-row-title, .stats-card-h, .stat-tile-value, .game-detail-title, .donut-top, .cl-list-title { font-family: var(--font-display); letter-spacing: -0.015em; } /* Numeric UI reads straighter with lining tabular figures. */ .stat-tile-value, .donut-top, .card-rating, .detail-rating, .st-bar-count, .mt-count { font-variant-numeric: tabular-nums; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* The deep base gradient lives on the root (the canvas), so the Aurora layer - a negative-z-index child of body - paints ABOVE it. If the gradient sat on body it would repaint over the Aurora and hide it entirely. */ background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-grad-mid) 55%, var(--bg-grad-end) 100%) fixed; } body { font-family: var(--font-body); background: transparent; /* base is on ; Aurora sits between them */ min-height: 100vh; color: var(--text-primary); overflow-x: hidden; padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } /* Light theme keeps a clean, still base with a whisper of the page accent - Aurora is a dark-environment effect and does not render on light. */ :root[data-theme="light"] html { background: radial-gradient(1600px 1100px at 50% -160px, var(--accent-glow) 0%, transparent 62%), linear-gradient(180deg, var(--bg-base) 0%, var(--bg-grad-mid) 55%, var(--bg-grad-end) 100%) fixed; } img, video, canvas, svg { max-width: 100%; height: auto; } /* Native checkboxes/radios otherwise render in the browser's default blue, clashing with the page's own accent (pink on Anime, amber on Games). */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg-card); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-light); } .hidden { display: none !important; } .error, .success { animation: msg-pop-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; } @media (prefers-reduced-motion: reduce) { .error, .success { animation: none; } } .error { color: #fecaca; background: var(--red-dim); padding: 12px; margin-top: 12px; border: 1px solid var(--red); border-radius: var(--radius-md); font-size: 0.9rem; } .success { color: #a7f3d0; background: var(--green-dim); padding: 12px; margin-top: 12px; border: 1px solid var(--green); border-radius: var(--radius-md); font-size: 0.9rem; } .empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); font-size: 1.1rem; grid-column: 1 / -1; } .loading-indicator { text-align: center; padding: 40px; color: var(--text-primary); } .spinner { border: 4px solid rgba(59, 130, 246, 0.1); border-top: 4px solid var(--blue); border-radius: var(--radius-circle); width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 20px; } /* The full-page loader follows the page's own accent (pink on Anime, green on Shows, amber on Games) rather than a fixed blue that belonged to no category. Scoped to the standalone loader so the tiny in-button spinners are untouched. */ .loading-indicator .spinner { border-color: var(--accent-dim); border-top-color: var(--accent-light); } @keyframes spin { to { transform: rotate(360deg); } } .container { max-width: 1400px; margin: 0 auto; padding: 20px; } .page-tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; box-shadow: var(--shadow-card); } .page-tab { flex: 1; padding: 12px 24px; background: transparent; border: none; border-radius: var(--radius-md); color: var(--text-muted); font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); } .page-tab:hover { color: var(--text-primary); background: var(--accent-dim); } .page-tab.active { background: var(--accent); color: #ffffff; box-shadow: 0 2px 10px var(--accent-dim); } body[data-page="games"] .page-tab.active { color: var(--cat-game-ink); } .tab-panel { display: none; } .tab-panel.active { display: block; } .navbar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 11px 18px; margin-bottom: 28px; /* Three balanced tracks: brand left, categories dead-center, controls right. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; box-shadow: var(--shadow-card); position: relative; z-index: 40; } .nav-brand { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-light); text-decoration: none; white-space: nowrap; justify-self: start; transition: color 0.3s ease; } .nav-sep { display: none; } /* Category tabs - one connected group, centered in the bar. */ .nav-primary { display: flex; align-items: center; gap: 2px; min-width: 0; justify-self: center; } .nav-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease; } .nav-tab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cat-color, var(--text-dim)); flex-shrink: 0; transition: box-shadow 0.18s ease; } .nav-tab[data-cat="movies"] { --cat-color: var(--cat-movie-light); } .nav-tab[data-cat="series"] { --cat-color: var(--cat-series-light); } .nav-tab[data-cat="anime"] { --cat-color: var(--cat-anime-light); } .nav-tab[data-cat="games"] { --cat-color: var(--cat-game-light); } .nav-tab:hover { background: var(--bg-deep); color: var(--text-primary); } /* Only the active tab is filled - tinted in its own category color. */ .nav-tab[data-cat="movies"].active { background: var(--cat-movie-dim); color: var(--cat-movie-light); } .nav-tab[data-cat="series"].active { background: var(--cat-series-dim); color: var(--cat-series-light); } .nav-tab[data-cat="anime"].active { background: var(--cat-anime-dim); color: var(--cat-anime-light); } .nav-tab[data-cat="games"].active { background: var(--cat-game-dim); color: var(--cat-game-light); } .nav-tab.active::before { box-shadow: 0 0 7px 0 var(--cat-color); } /* Right controls: search + theme (ghost icons) + the Profile menu. */ .nav-right { display: flex; align-items: center; gap: 4px; justify-self: end; } .nav-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: 0; color: var(--text-muted); cursor: pointer; flex-shrink: 0; text-decoration: none; transition: background 0.18s ease, color 0.18s ease; } .nav-icon-btn:hover { background: var(--bg-deep); color: var(--text-primary); } .nav-icon-btn.active { background: var(--accent-dim); color: var(--accent-light); } .nav-link { padding: 7px 12px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .nav-link:hover { background: var(--bg-deep); color: var(--text-primary); } .nav-link.active { background: var(--accent-dim); color: var(--accent-light); } .nav-cta { padding: 8px 18px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 700; color: #fff; background: var(--accent); text-decoration: none; white-space: nowrap; transition: filter 0.18s ease; } .nav-cta:hover { filter: brightness(1.12); } body[data-page="games"] .nav-cta, body[data-page="games"] .nav-ava { color: var(--cat-game-ink); } /* Profile dropdown (holds My profile, admin links, and Log out). */ .nav-menu { position: relative; } .nav-menu-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: var(--radius-pill); background: none; border: 1px solid transparent; color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .nav-menu-trigger:hover, .nav-menu.open .nav-menu-trigger, .nav-menu-trigger.active { background: var(--bg-deep); color: var(--text-primary); border-color: var(--border-subtle); } .nav-ava { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; overflow: hidden; } .nav-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Avatar-only trigger (pfp + caret, no label). */ .nav-menu-trigger-ava { padding: 3px 8px 3px 3px; gap: 5px; } .nav-caret { transition: transform 0.2s ease; opacity: 0.8; } .nav-menu.open .nav-caret { transform: rotate(180deg); } .nav-menu-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; display: none; flex-direction: column; padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); z-index: 60; } .nav-menu.open .nav-menu-pop { display: flex; } .nav-menu-name { padding: 6px 12px 8px; font-size: 0.9rem; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-menu-item { display: block; text-align: left; padding: 9px 12px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .nav-menu-item:hover { background: var(--bg-deep); color: var(--text-primary); } .nav-menu-item.active { color: var(--accent-light); } .nav-menu-danger { margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--border-subtle); } .nav-menu-danger:hover { background: var(--red-dim); color: var(--red-light); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-deep); cursor: pointer; flex-shrink: 0; } .nav-toggle-bar { display: block; height: 2px; width: 100%; background: var(--text-primary); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .navbar.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; } .navbar.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .btn { padding: 12px 20px; min-height: 44px; min-width: 44px; cursor: pointer; font-weight: 600; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; border-radius: var(--radius-md); border: none; white-space: nowrap; box-sizing: border-box; } .btn:disabled { cursor: not-allowed; opacity: 0.5; background: var(--bg-card-end); color: var(--text-muted); } .btn-primary { background: var(--accent); color: #ffffff; box-shadow: var(--shadow-btn) var(--accent-dim); } .btn-primary:hover:not(:disabled) { filter: brightness(1.12); box-shadow: var(--shadow-btn-hover) var(--accent-dim); transform: translateY(-2px); } .btn-secondary { background: var(--bg-deep); color: var(--text-secondary); border: 1px solid var(--border-subtle); box-shadow: none; } .btn-secondary:hover:not(:disabled) { background: var(--bg-card); border-color: var(--accent-border); color: var(--text-primary); transform: translateY(-1px); } .nav-actions .btn.active { background: var(--accent); box-shadow: var(--shadow-btn) var(--accent-dim); color: #ffffff; border-color: transparent; } .btn-danger { background: var(--red); color: #ffffff; box-shadow: var(--shadow-btn) var(--red-dim); } .btn-danger:hover:not(:disabled) { background: var(--red-light); box-shadow: var(--shadow-btn-hover) rgba(239, 68, 68, 0.4); transform: translateY(-2px); } .btn-success { background: var(--green); color: #ffffff; box-shadow: var(--shadow-btn) var(--green-dim); } .btn-success:hover:not(:disabled) { background: var(--green-light); box-shadow: var(--shadow-btn-hover) rgba(16, 185, 129, 0.4); transform: translateY(-2px); } .btn-warning { background: var(--amber); color: #ffffff; box-shadow: var(--shadow-btn) var(--amber-dim); } .btn-warning:hover:not(:disabled) { background: var(--amber-light); box-shadow: var(--shadow-btn-hover) rgba(245, 158, 11, 0.4); transform: translateY(-2px); } /* One consistent press response for every button on the site - placed after the per-variant hover rules so it wins the cascade on equal specificity and always registers, whether or not the pointer is also hovering. */ .btn:active:not(:disabled) { transform: scale(0.97) !important; transition-duration: 0.08s; } @media (prefers-reduced-motion: reduce) { .btn:active:not(:disabled) { transform: none !important; } } /* Inline loading state for any button (setBtnLoading in common.js): a small spinner in front of the label, colour-matched to the button it sits in (white on solid fills, the page accent on ghost/secondary buttons, and the dark ink on Games' amber fill like every other filled control there). */ .btn.is-loading { cursor: wait; } .btn-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: -2px; flex-shrink: 0; } .btn-secondary .btn-spinner { border-color: var(--border); border-top-color: var(--text-primary); } body[data-page="games"] .btn-primary .btn-spinner, [data-cat="games"] .btn-primary .btn-spinner { border-color: rgba(26, 18, 5, 0.35); border-top-color: var(--cat-game-ink); } @media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 1.4s; } } .btn-sm { padding: 10px 14px; font-size: 13px; min-height: 44px; } .btn-xs { font-size: 12px !important; padding: 8px 10px !important; min-height: 44px; border-radius: var(--radius-sm) !important; } .btn.small { padding: 10px 14px; font-size: 13px; min-height: 44px; } .btn.danger, .btn.small.danger { background: var(--red); color: #ffffff; box-shadow: var(--shadow-btn) var(--red-dim); } .btn.danger:hover, .btn.small.danger:hover { background: var(--red-light); box-shadow: var(--shadow-btn-hover) rgba(239, 68, 68, 0.4); transform: translateY(-2px); } .btn-nav { padding: 9px 18px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-block; white-space: nowrap; } .btn-nav:hover { background: rgba(59, 130, 246, 0.12); border-color: var(--blue); color: var(--blue-light); } .btn-nav.btn-nav-active { background: var(--blue); border-color: var(--blue); color: #ffffff; box-shadow: none; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-primary); font-size: 0.95rem; } .form-group input, .form-input { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; transition: var(--transition); background: var(--bg-deep); color: var(--text-primary); } .form-group input:focus, .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .form-group input::placeholder, .form-input::placeholder { color: rgba(226, 232, 240, 0.5); } .form-group small { display: block; margin-top: 8px; color: var(--text-muted); font-size: 0.85rem; } .form-textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 15px; font-family: inherit; transition: var(--transition); background: var(--bg-deep); color: var(--text-primary); resize: vertical; min-height: 100px; } .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .form-textarea::placeholder { color: rgba(226, 232, 240, 0.5); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 20px; } .form-actions { display: flex; gap: 15px; margin-top: 30px; } /* Search, sort and filters all live on ONE row: [ input ][ Sort ][ Filters ][ Search ]. The two wrappers use display:contents so their children become flex items of the container, ordered explicitly. */ .search-container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; } .search-bar, .search-filters { display: contents; } .search-container .search-input { order: 1; flex: 1 1 260px; min-width: 200px; } .search-container #sortBy { order: 2; } .search-container #filterBtn { order: 3; } .search-container #searchBtn, .search-container #searchUsersBtn { order: 4; } /* Search button always on the right */ .search-input { padding: 14px 18px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; background: var(--bg-deep); color: var(--text-primary); transition: var(--transition); } .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .search-input::placeholder { color: var(--text-dim); opacity: 0.85; } .filter-select { padding: 12px 40px 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; background-color: var(--bg-deep); color: var(--text-primary); cursor: pointer; transition: var(--transition); min-width: 150px; } .filter-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } /* Custom select chevron - hide OS native arrow button */ select.filter-select, select.form-input, select.search-input, select.update-status-select, .form-group select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bg-deep); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; padding-right: 40px; } select.filter-select:hover, select.form-input:hover, select.search-input:hover, select.update-status-select:hover, .form-group select:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } select.filter-select:focus, select.form-input:focus, select.search-input:focus, select.update-status-select:focus, .form-group select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } select.filter-select::-ms-expand, select.form-input::-ms-expand, select.search-input::-ms-expand, select.update-status-select::-ms-expand, .form-group select::-ms-expand { display: none; } select.filter-select option, select.form-input option, select.search-input option, select.update-status-select option, .form-group select option { background: var(--bg-deep); color: var(--text-primary); } .filter-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } /* Filter panel grid: up to 3 columns on desktop, 2 on tablet, 1 on mobile (tablet/mobile overrides live in the 900px and 600px media queries). */ .filter-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; } .filter-actions { display: flex; gap: 10px; } .pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 25px; } .page-info { font-size: 15px; color: var(--text-secondary); font-weight: 600; min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; } /* Prev / Next: circular arrow buttons matching the scroller nav, tinted to the page's category (visible label kept for screen readers via the button text). */ .pagination .btn { width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; border-radius: 50%; font-size: 0; /* hide the "Previous"/"Next" text visually */ display: inline-flex; align-items: center; justify-content: center; box-shadow: none; transition: transform 0.15s ease, filter 0.15s ease, background 0.2s ease, border-color 0.2s ease; } .pagination .btn::before { font-size: 1.7rem; line-height: 1; font-weight: 400; } .pagination #prevPageBtn::before { content: '\2039'; } /* ‹ */ .pagination #nextPageBtn::before { content: '\203A'; } /* › */ .pagination #prevPageBtn { background: transparent; border: 1px solid var(--accent-border); color: var(--accent-light); } .pagination #nextPageBtn { background: var(--accent); border: 1px solid var(--accent); color: #fff; } .pagination .btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); } .pagination #prevPageBtn:hover:not(:disabled) { background: var(--accent-dim); color: var(--text-primary); } .pagination .btn:disabled { opacity: 0.4; } /* Fixed columns so the 24 results per page fill complete rows with no trailing gaps. 24 divides evenly by 6 / 4 / 3 / 2, so every breakpoint stays full. */ .games-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 20px; } @media (max-width: 1180px) { .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Poster-first tile: the artwork is the object, not a boxed SaaS card. No surface/border/shadow on the card itself - the poster carries it, and the title + year sit as plain text beneath. */ .game-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; color: inherit; font: inherit; text-align: left; width: 100%; } .game-card:hover .game-image-wrapper { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42); } .game-card:focus-visible { outline: none; } .game-card:focus-visible .game-image-wrapper { outline: 2px solid var(--accent-light); outline-offset: 3px; border-color: var(--accent); } .game-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .game-card-date { color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; } .game-card-date.is-soon { color: var(--accent-light); font-weight: 600; } .game-card-desc { color: var(--text-muted); font-size: 12px; margin-top: 8px; line-height: 1.5; } .game-platforms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .platform-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-deep); color: var(--text-muted); font-size: 11px; line-height: 1.4; } /* Text links follow the page's category accent (amber on Games, green on Shows, and so on) rather than a fixed blue that belonged to no category. --accent-light falls back to neutral slate on pages with no category. */ .link-btn { background: none; border: none; color: var(--accent-light); cursor: pointer; font-size: inherit; font-weight: 600; padding: 4px 0; min-height: 44px; text-decoration: underline; text-underline-offset: 2px; } .link-btn:hover { color: var(--text-primary); } .game-image-wrapper { position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--bg-deep); overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, box-shadow 0.28s; } .game-image { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .game-info { padding: 11px 2px 2px; display: flex; flex-direction: column; gap: 3px; } .game-title { font-size: 0.94rem; font-weight: 700; color: var(--text-primary); line-height: 1.28; /* Reserve two lines so the year baseline stays aligned across a row whether a title runs one line or two. */ min-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .game-rating { background: #065f46; color: #a7f3d0; padding: 5px 12px; border-radius: var(--radius-sm); font-size: 0.85rem; display: inline-block; } .game-genres { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .genre-tag { background: var(--bg-card-end); padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.75rem; color: var(--text-secondary); border: 1px solid var(--border); } .my-games-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); margin-bottom: 25px; overflow: hidden; } .list-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 30px; background: var(--bg-deep); border-bottom: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .cl-acc-toolbar .list-header { border-radius: 0; } .list-header h2 { color: var(--text-primary); font-size: 1.5rem; margin: 0; } .list-header-actions { display: flex; gap: 12px; align-items: center; } .list-item { display: flex; align-items: center; padding: 20px 30px; border-bottom: 1px solid var(--border-subtle); transition: var(--transition); gap: 20px; cursor: pointer; } .list-item:hover { background: var(--accent-dim); } .list-item:last-child { border-bottom: none; } .list-game-image { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); flex-shrink: 0; } .list-game-content { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .list-game-info { flex: 1; } .list-game-name { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .list-game-genres { display: flex; flex-wrap: wrap; gap: 6px; } .list-genre-tag { background: var(--bg-card-end); padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; color: var(--text-secondary); border: 1px solid var(--border); } .list-game-score { margin-right: 15px; } .list-game-score-display { font-size: 1.1rem; font-weight: 700; color: var(--accent-light); background: var(--blue-dim); padding: 8px 16px; border-radius: var(--radius-md); border: 1px solid var(--blue-glow); min-width: 90px; text-align: center; display: inline-block; } .list-game-actions { display: flex; gap: 10px; } .status-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 2px solid var(--border); padding: 0 30px; background: var(--bg-deep); } .status-tab { padding: 14px 20px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; font-weight: 500; transition: var(--transition); border-bottom: 3px solid transparent; margin-bottom: -2px; } .status-tab:hover { color: var(--text-primary); background: var(--accent-dim); } .status-tab.active { color: var(--accent-light); border-bottom-color: var(--accent-light); background: var(--accent-dim); } .status-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: #fff; } .my-games-list { display: flex; flex-direction: column; } .coll-empty-state { padding: 60px 20px; text-align: center; color: var(--text-muted); } .coll-empty-icon { font-size: 1.05rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 10px; } .coll-empty-state p { font-size: 1rem; line-height: 1.6; } .coll-item { display: flex; align-items: center; gap: 16px; padding: 16px 30px; border-bottom: 1px solid var(--border-subtle); transition: var(--transition-fast); cursor: pointer; } .coll-item:last-child { border-bottom: none; } .coll-item:hover { background: var(--accent-dim); } .coll-item-img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); flex-shrink: 0; background: var(--bg-deep); } .coll-item-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; } .coll-item-main { flex: 1; min-width: 0; } .coll-item-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; } .coll-item-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .coll-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); } .coll-item-status { font-size: 0.82rem; color: var(--text-secondary); } .coll-meta-sep { color: var(--text-dim); } .coll-item-genres { display: flex; flex-wrap: wrap; gap: 4px; } .status-dot-inline { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .coll-item-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* The user's score is category-agnostic, so the badge is neutral - not tied to the movies-blue colour on every row. Number + word stacked, same vocabulary as the score meter (0 Trash .. 10 Peak), so a badge on its own says exactly what the meter would have shown while it was being set. */ .coll-score-badge { display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 5px 14px; min-width: 56px; text-align: center; } .coll-score-badge .csb-num { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.15; font-variant-numeric: tabular-nums; } .coll-score-badge .csb-word { font-size: 0.66rem; font-weight: 600; color: var(--text-muted); line-height: 1.1; } .coll-score-badge.is-empty { color: var(--text-dim); font-size: 1.05rem; font-weight: 700; padding: 10px 14px; } .coll-item-edit-actions { display: flex; gap: 8px; align-items: center; } .coll-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; padding: 16px 24px; } .coll-game-card { position: relative; border-radius: var(--radius-lg); background: var(--bg-deep); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; display: flex; flex-direction: column; overflow: visible; } .coll-game-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .coll-card-img-wrap { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: var(--bg-deep); } .coll-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .coll-card-score-badge { position: absolute; top: 7px; right: 7px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); pointer-events: none; } .coll-card-status-bar { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #fff; text-align: center; isolation: isolate; } .coll-card-status-bar::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); pointer-events: none; } .coll-card-info { padding: 8px 8px 4px; } .coll-card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .coll-card-year { font-size: 11px; color: var(--text-dim); margin-top: 2px; } .card-edit-actions { display: flex; gap: 4px; padding: 5px 6px 8px; } .card-edit-actions .btn { flex: 1; } .pill { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; background: var(--bg-card-end); border: 1px solid var(--border); color: var(--text-secondary); } .pill-green { background: var(--green-dim); border-color: var(--green-dark); color: var(--green-light); } .pill-amber { background: var(--amber-dim); border-color: var(--amber-dark); color: var(--amber-light); } .modal, .update-modal, .remove-modal { display: none; position: fixed; z-index: 1000; inset: 0; background-color: var(--bg-overlay); backdrop-filter: blur(10px); align-items: center; justify-content: center; padding: 20px; } /* One entrance for every modal family in the app (this one, the custom-list overlays, and the game-detail overlay) - a CSS animation on an element restarts automatically whenever it goes from display:none (or .open being toggled) to visible, so this needs no JS beyond the existing show/hide. */ .modal, .update-modal, .remove-modal, .cl-modal-overlay, .cl-game-modal-overlay { animation: modal-scrim-in 0.18s ease both; } .modal-content, .update-modal-content, .remove-modal-content, .cl-modal-box, .cl-game-modal-box { animation: modal-pop-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes modal-scrim-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop-in { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @media (prefers-reduced-motion: reduce) { .modal, .update-modal, .remove-modal, .cl-modal-overlay, .cl-game-modal-overlay, .modal-content, .update-modal-content, .remove-modal-content, .cl-modal-box, .cl-game-modal-box { animation: none; } } .update-modal-content, .remove-modal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 30px; width: 90%; max-width: 500px; position: relative; box-shadow: var(--shadow-modal); text-align: left; } .update-modal-content h3, .remove-modal-content h3 { margin-bottom: 6px; color: var(--text-primary); font-size: 1.5rem; text-align: center; } .update-modal-game-name { color: var(--text-muted); font-size: 0.92rem; font-style: italic; margin: 0 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .modal-content { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 20px; width: 95%; max-width: 860px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.55); scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .modal-content::-webkit-scrollbar { width: 4px; } .modal-content::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } .game-detail-hero { position: relative; width: 100%; height: 280px; overflow: hidden; border-radius: 20px 20px 0 0; background: #060d1a; } .game-detail-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: brightness(0.7) blur(1px); transform: scale(1.05); } .game-detail-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, transparent 55%, var(--bg-card) 100%); pointer-events: none; } .game-detail-cover { flex-shrink: 0; width: 100px; height: 134px; border-radius: 10px; border: 3px solid rgba(255,255,255,0.12); object-fit: contain; object-position: center; box-shadow: 0 8px 30px rgba(0,0,0,0.6); background: var(--bg-deep); } .close-btn { position: absolute; right: 16px; top: 16px; z-index: 10; font-size: 20px; font-weight: bold; cursor: pointer; color: #fff; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(6px); } .close-btn:hover { background: var(--red); border-color: var(--red); } .game-detail-body { padding: 0 28px 28px; } .game-detail-title-row { display: flex; align-items: flex-end; gap: 20px; margin-top: -60px; position: relative; z-index: 2; margin-bottom: 20px; } .game-detail-title-meta { flex: 1; min-width: 0; padding-bottom: 4px; } .game-detail-title { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); word-break: break-word; } .game-detail-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; /* Breathing room before the genre row below - without it, a badge row that wraps to two lines sits flush against the genre pills with no gap. */ margin-bottom: 10px; } .game-detail-score { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 700; color: #fff; } .game-detail-date { font-size: 0.85rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.06); padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); } .game-detail-genres { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; } .game-detail-genre-tag { font-size: 0.75rem; font-weight: 600; padding: 4px 11px; border-radius: 20px; background: var(--accent-dim); color: var(--accent-light); border: 1px solid var(--accent-border); } .game-detail-info-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .game-detail-info-item { display: flex; align-items: baseline; gap: 8px; } .game-detail-info-label { font-size: 0.82rem; color: var(--text-dim); font-weight: 600; flex-shrink: 0; min-width: 88px; } .game-detail-info-value { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.4; } .game-detail-desc { font-size: 0.92rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 24px; } .add-to-list { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 22px; } .add-to-list h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; } .add-to-list-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .add-to-list label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); margin-bottom: 7px; } /* Add-to-library controls: Status grows, the score stays compact, and the primary action fills the freed space beside the score. */ .atl-controls { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; } .atl-field { display: flex; flex-direction: column; } .atl-field-status { flex: 1 1 200px; min-width: 150px; } .atl-add { flex: 0 0 auto; align-self: flex-end; height: 46px; white-space: nowrap; } @media (max-width: 520px) { .atl-field-status { flex-basis: 100%; } .atl-add { flex: 1 1 100%; } } /* Optional per-item review / note. Full-width row under the controls. */ .atl-note { margin-top: 14px; } .atl-optional { font-weight: 500; color: var(--text-dim); opacity: 0.75; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; margin-left: 4px; } .atl-note-input { width: 100%; box-sizing: border-box; min-height: 70px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-deep); color: var(--text-primary); font: inherit; font-size: 0.9rem; line-height: 1.5; resize: vertical; transition: var(--transition); } .atl-note-input::placeholder { color: var(--text-dim); opacity: 0.8; } .atl-note-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } /* Saved review/note shown on collection cards and profile library items. */ .item-note { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent-border); background: var(--accent-dim); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .item-note-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 4px; } /* Compact review/note preview inside a collection row (clamped to 2 lines). */ .coll-note { margin-top: 6px; font-size: 0.82rem; line-height: 1.45; color: var(--text-secondary); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .score-input-container { display: inline-flex; align-items: center; gap: 8px; } .score-input { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); width: 80px; text-align: center; background: var(--bg-deep); color: var(--text-primary); font-size: 15px; -moz-appearance: textfield; appearance: textfield; transition: var(--transition); } .score-input::-webkit-inner-spin-button, .score-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .score-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .score-controls { display: flex; flex-direction: column; gap: 3px; } .score-btn { width: 28px; height: 22px; padding: 0; margin: 0; border: 1px solid var(--accent); background: var(--accent); color: #ffffff; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: inherit; line-height: 1; transition: var(--transition-fast); user-select: none; } .score-btn:hover { filter: brightness(1.12); transform: translateY(-1px); } body[data-page="games"] .score-btn, [data-cat="games"] .score-btn { color: var(--cat-game-ink); } .score-clear-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; padding: 5px 10px; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); white-space: nowrap; } .score-clear-btn:hover { background: var(--red-dim); border-color: var(--red); color: var(--red-light); transform: none; box-shadow: none; } /* Score meter: a draggable 0–10 bar, like a volume slider, with the word for the chosen point shown above it. Follows the page/dialog accent like every other control; the hidden input carries the value so save code reads `.value` unchanged. One thumb reads far better on a phone than a row of eleven small dots did. */ .score-meter { display: flex; flex-direction: column; gap: 8px; } .score-meter-head { display: flex; align-items: baseline; gap: 9px; } .score-meter-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--accent-light); font-variant-numeric: tabular-nums; min-width: 1.4ch; transition: color 0.15s ease; } .score-meter.is-empty .score-meter-value { color: var(--text-dim); } .score-meter-word { font-size: 0.95rem; font-weight: 700; color: var(--text-secondary); } .score-meter.is-empty .score-meter-word { font-weight: 600; color: var(--text-dim); } .score-meter-clear { margin-left: auto; background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; padding: 4px 11px; border-radius: var(--radius-pill); cursor: pointer; transition: var(--transition-fast); } .score-meter-clear:hover { color: var(--text-primary); border-color: var(--border); } /* The whole bar is the hit target (generous vertical padding), not just the thin visible line - comfortable to grab on a phone without precision. */ .score-slider { position: relative; padding: 15px 13px; cursor: pointer; touch-action: none; } .score-slider:focus-visible { outline: none; } .score-slider:focus-visible .score-slider-thumb { outline: 2px solid var(--accent-light); outline-offset: 3px; } .score-slider-track { position: relative; height: 6px; } .score-slider-track::before { content: ''; position: absolute; inset: 0; background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 999px; } .score-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 999px 0 0 999px; transition: width 0.15s ease; } .score-meter.is-empty .score-slider-fill { opacity: 0.45; } /* Reference marks at each whole point, purely decorative (not interactive) - keeps some of the "which number is where" cue the old dots gave. */ .score-slider-ticks { position: absolute; inset: 0; pointer-events: none; } .score-slider-tick { position: absolute; top: 50%; width: 2px; height: 6px; border-radius: 1px; background: rgba(148, 163, 184, 0.3); transform: translate(-50%, -50%); } .score-slider-thumb { position: absolute; top: 50%; left: 0; width: 24px; height: 24px; background: var(--accent); border: 3px solid var(--bg-card); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); transition: left 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .score-meter.is-empty .score-slider-thumb { opacity: 0.55; } .score-slider:hover .score-slider-thumb { transform: translate(-50%, -50%) scale(1.08); } .score-slider.dragging { cursor: grabbing; } .score-slider.dragging .score-slider-thumb { transition: box-shadow 0.15s ease; transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 7px var(--accent-dim); } body[data-page="games"] .score-slider-thumb, [data-cat="games"] .score-slider-thumb { box-shadow: 0 2px 8px rgba(66, 32, 0, 0.35); } .score-meter-scale { display: flex; justify-content: space-between; font-size: 0.68rem; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .score-slider-thumb, .score-slider-fill { transition: none; } } .update-form, .remove-form { margin: 0; } .update-form label { color: var(--text-primary); display: block; margin-bottom: 6px; margin-top: 14px; font-weight: 500; text-align: center; } .update-status-select { width: 100%; display: block; padding: 12px 40px 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 15px; background-color: var(--bg-deep); color: var(--text-primary); cursor: pointer; transition: var(--transition); margin-bottom: 0; } .update-status-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .update-form .score-input-container { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; } .update-form .score-input { width: 120px; text-align: center; padding: 12px 16px; } .update-form input { width: 120px; padding: 12px 16px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; font-size: 16px; background: var(--bg-deep); color: var(--text-primary); -moz-appearance: textfield; appearance: textfield; display: block; } .update-form input::-webkit-inner-spin-button, .update-form input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .update-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .remove-form p { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; margin: 15px 0; } .update-actions, .remove-actions, .modal-actions { margin-top: 25px; display: flex; gap: 12px; justify-content: center; } .stats-dashboard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 30px; margin: 20px 0 40px 0; box-shadow: var(--shadow-card); } .stats-title { color: var(--text-primary); font-size: 28px; margin: 0 0 25px 0; text-align: center; font-weight: 700; } .combined-chart { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; } @media (max-width: 900px) { .combined-chart { grid-template-columns: 1fr; } } .bar-chart-section { display: flex; flex-direction: column; } .pie-chart-section { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; } .progress-bar-item { margin-bottom: 20px; } .bar-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--text-primary); font-size: 14px; font-weight: 500; } .status-dot { width: 12px; height: 12px; border-radius: var(--radius-circle); display: inline-block; } .status-dot.playing { background: var(--blue); } .status-dot.completed { background: var(--green); } .status-dot.plan { background: var(--purple); } .status-dot.onhold { background: var(--amber); } .status-dot.dropped { background: var(--red); } .bar-container { position: relative; background: rgba(15, 23, 42, 0.5); height: 40px; border-radius: var(--radius-pill); overflow: hidden; } .bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .bar-fill.playing { background: linear-gradient(90deg, var(--blue), var(--blue-light)); } .bar-fill.completed { background: linear-gradient(90deg, var(--green), var(--green-light)); } .bar-fill.plan { background: linear-gradient(90deg, var(--purple), var(--purple-light)); } .bar-fill.onhold { background: linear-gradient(90deg, var(--amber), var(--amber-light)); } .bar-fill.dropped { background: linear-gradient(90deg, var(--red), var(--red-light)); } .bar-percentage { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #ffffff; font-weight: 600; font-size: 13px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .pie-chart-container { position: relative; max-width: 400px; margin: 0 auto 20px auto; } .pie-chart { width: 100%; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } .pie-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .legend-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: rgba(15, 23, 42, 0.5); border-radius: var(--radius-md); transition: var(--transition); } .legend-item:hover { background: rgba(59, 130, 246, 0.1); transform: translateX(5px); } .legend-color { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; } .legend-label { color: var(--text-primary); font-size: 14px; flex: 1; } .legend-value { color: var(--text-muted); font-size: 13px; font-weight: 600; } .profile-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 25px; } .profile-header { padding: 25px 30px; background: var(--bg-deep); border-bottom: 1px solid var(--border); } .profile-header h2 { color: var(--text-primary); font-size: 1.5rem; margin: 0; } .profile-content { padding: 35px; } .profile-avatar-section { display: flex; align-items: center; gap: 30px; margin-bottom: 35px; } .profile-avatar { width: 150px; height: 150px; border-radius: var(--radius-circle); overflow: hidden; border: 3px solid var(--accent-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); flex-shrink: 0; } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-stats { display: flex; gap: 30px; } /* Stat figures sit inside the profile card already, so they read as plain numbers, not boxes inside a box (rule 18). */ .stat-item { display: flex; flex-direction: column; align-items: center; padding: 4px 22px; } .stat-item .stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 3px; font-variant-numeric: tabular-nums; } .stat-item .stat-label { font-size: 0.85rem; color: var(--text-muted); } .profile-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } /* Read-only account facts read as a divided key/value list, not four boxes inside the profile card. */ .detail-item { padding: 13px 2px; border-bottom: 1px solid var(--border-subtle); } .detail-item label { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; } .detail-value { font-size: 1.1rem; color: var(--text-primary); font-weight: 500; } .detail-value.skeleton { display: inline-block; width: 55%; min-width: 90px; height: 1.1em; } .profile-actions { display: flex; gap: 15px; justify-content: center; margin-top: 20px; } .avatar-input-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-primary); font-size: 0.95rem; } .level-badge { background: var(--purple) !important; color: #ffffff !important; padding: 8px 20px; border-radius: 10px; font-weight: 700; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4); border: 1px solid rgba(139, 92, 246, 0.3); } .level-progress-bar { width: 100%; height: 28px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-inset); margin-top: 25px; } .level-progress-fill { height: 100%; background: var(--accent); border-radius: 10px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .level-progress-text { text-align: center; margin-top: 10px; font-size: 0.9rem; color: var(--text-muted); font-weight: 500; } .friends-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); margin-bottom: 25px; box-shadow: var(--shadow-card); overflow: hidden; } .friend-item { display: flex; align-items: center; padding: 20px 30px; border-bottom: 1px solid var(--border-subtle); transition: var(--transition); gap: 20px; } .friend-item:hover { background: var(--accent-dim); } .friend-item:last-child { border-bottom: none; } .friend-avatar { width: 80px; height: 80px; border-radius: var(--radius-circle); object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .friend-info { flex: 1; } .friend-name { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; } .friend-username { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 5px; } .friend-since { font-size: 0.85rem; color: var(--text-dim); } .friend-actions { display: flex; gap: 10px; flex-shrink: 0; } .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .admin-tabs { display: flex; gap: 10px; margin-bottom: 25px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-card); } .admin-tab-btn { flex: 1; padding: 15px 20px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-muted); font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); } .admin-tab-btn:hover { background: rgba(59, 130, 246, 0.1); color: var(--blue-light); } .admin-tab-btn.active { background: var(--blue); color: #ffffff; border-color: var(--blue); box-shadow: none; } .admin-section { display: none; } .admin-section.active { display: block; } .section-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 25px; } .section-header { padding: 25px 30px; background: var(--bg-deep); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .section-header h2 { color: var(--text-primary); font-size: 1.5rem; margin: 0; } .header-actions { display: flex; gap: 10px; align-items: center; } .section-content { padding: 30px; } .table-container { overflow-x: auto; margin-bottom: 20px; } .admin-table { width: 100%; border-collapse: collapse; background: var(--bg-deep); border-radius: 10px; overflow: hidden; } .admin-table thead { background: var(--bg-card); } .admin-table th { padding: 15px; text-align: left; font-weight: 700; color: var(--text-primary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border); } .admin-table td { padding: 15px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); } .admin-table tbody tr { transition: var(--transition-fast); } .admin-table tbody tr:hover { background: rgba(59, 130, 246, 0.08); } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-badge { display: inline-block; padding: 4px 10px; background: var(--amber-dim); border: 1px solid var(--amber); border-radius: var(--radius-sm); color: #fef3c7; font-size: 0.85rem; font-weight: 700; } .moderator-badge { display: inline-block; padding: 4px 10px; background: var(--purple-dim); border: 1px solid var(--purple); border-radius: var(--radius-sm); color: #e9d5ff; font-size: 0.85rem; font-weight: 600; } .banned-badge { display: inline-block; padding: 4px 10px; background: var(--red-dim); border: 1px solid var(--red); border-radius: var(--radius-sm); color: #fecaca; font-size: 0.85rem; font-weight: 600; } .overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; } .overview-card { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 25px; text-align: center; } .overview-card h3 { color: var(--text-primary); margin-bottom: 15px; font-size: 1.1rem; } .big-number { font-size: 3rem; font-weight: 700; color: var(--blue); margin: 10px 0; } .overview-label { color: var(--text-muted); font-size: 0.9rem; } .info-box { padding: 15px; background: var(--blue-dim); border: 1px solid var(--blue); border-radius: var(--radius-md); margin-bottom: 20px; color: #bfdbfe; } .warning-box { padding: 12px; background: var(--amber-dim); border: 1px solid var(--amber); border-radius: var(--radius-sm); margin: 15px 0; color: #fef08a; font-size: 0.9rem; } .danger-box { padding: 12px; background: var(--red-dim); border: 1px solid var(--red); border-radius: var(--radius-sm); margin: 15px 0; color: #fca5a5; font-size: 0.9rem; } .method-tabs { display: flex; gap: 0; margin-bottom: 25px; border-bottom: 2px solid var(--border); width: 100%; } .method-tab { flex: 1; text-align: center; background: transparent; border: none; border-bottom: 3px solid transparent; padding: 12px 24px; cursor: pointer; color: var(--text-muted); font-size: 1rem; font-weight: 600; transition: var(--transition); margin-bottom: -2px; } .method-tab:hover { color: var(--text-primary); background: rgba(59, 130, 246, 0.05); } .method-tab.active { color: var(--blue); border-bottom-color: var(--blue); background: rgba(59, 130, 246, 0.08); } .add-method-section { display: none; } .add-method-section.active { display: block; } .auth-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 40px; width: 100%; max-width: 450px; box-shadow: var(--shadow-modal); } .auth-header { text-align: center; margin-bottom: 30px; } .auth-header h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-light); } .auth-header p { color: var(--text-muted); font-size: 1rem; } .auth-tabs { display: flex; margin-bottom: 30px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .tab-btn { flex: 1; padding: 15px; border: none; background: var(--bg-card-end); color: var(--text-primary); cursor: pointer; transition: var(--transition); font-size: 16px; font-weight: 600; } .tab-btn:hover { background: var(--border); } .tab-btn.active { background: var(--accent); color: #ffffff; } .auth-form { display: none; } .auth-form.active { display: block; } .oauth-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .oauth-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; font-weight: 600; border-radius: 10px; } .oauth-btn .oauth-icon { flex-shrink: 0; } .oauth-google { background: #ffffff; color: #1f2937; border: 1px solid #d1d5db; } .oauth-google:hover:not(:disabled) { background: #f3f4f6; color: #111827; } .oauth-discord { background: #5865F2; color: #ffffff; border: 1px solid #4752c4; } .oauth-discord:hover:not(:disabled) { background: #4752c4; color: #ffffff; } .oauth-github { background: #24292f; color: #ffffff; border: 1px solid #1b1f24; } .oauth-github:hover:not(:disabled) { background: #1b1f24; color: #ffffff; } .oauth-divider { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: var(--text-muted); font-size: 0.85rem; } .oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .cl-overview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .cl-overview-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; } .cl-section-label { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; } .cl-section-label-gap { margin-top: 28px; } .cl-default-card { display: flex; align-items: center; gap: 20px; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: var(--radius-lg); padding: 20px 24px; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-card); margin-bottom: 8px; } .cl-default-card:hover { border-color: var(--blue); box-shadow: var(--shadow-card-hover); transform: translateX(4px); } .cl-default-info { flex: 1; } .cl-default-info h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .cl-default-info p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; } .cl-default-meta { display: flex; flex-wrap: wrap; gap: 8px; } .cl-meta-pill { background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 0.78rem; color: var(--accent-light); } .cl-default-arrow { font-size: 1.4rem; color: var(--text-dim); flex-shrink: 0; transition: var(--transition); } .cl-default-card:hover .cl-default-arrow { color: var(--accent-light); transform: translateX(4px); } .cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .cl-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .cl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--blue); } .cl-card-cover { width: 100%; height: 140px; overflow: hidden; background: var(--bg-deep); } .cl-card-cover.cv-empty { display: flex; align-items: center; justify-content: center; background: var(--bg-deep); } .cl-card-cover.cv-empty::after { content: '---'; color: var(--text-dim); font-size: 1.2rem; letter-spacing: 4px; } .cl-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; } .cl-card-cover.cv-2 { display: grid; grid-template-columns: 1fr 1fr; } .cl-card-cover.cv-2 .cl-cover-img { height: 140px; } .cl-card-cover.cv-3 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 70px 70px; } .cl-card-cover.cv-3 .cl-cover-img.span-row { grid-row: 1 / 3; height: 140px; } .cl-card-cover.cv-3 .cl-cover-img { height: 70px; } .cl-card-cover.cv-4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 70px 70px; } .cl-card-cover.cv-4 .cl-cover-img { height: 70px; } .cl-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; } .cl-card-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-card-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; flex: 1; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cl-card-desc-empty { font-style: italic; color: var(--text-dim) !important; } .cl-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; } .cl-card-count { font-size: 0.78rem; color: var(--text-dim); } .cl-card-count strong { color: var(--text-secondary); } .cl-card-actions { display: flex; align-items: center; gap: 6px; } .cl-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); letter-spacing: 0.3px; } .cl-badge-pub { background: var(--green-dim); border: 1px solid var(--green-dark); color: var(--green-light); } .cl-badge-priv { background: var(--amber-dim); border: 1px solid var(--amber-dark); color: var(--amber-light); } .cl-icon-btn { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: 0.78rem; font-weight: 600; padding: 4px 10px; transition: var(--transition-fast); line-height: 1.4; } .cl-icon-btn:hover { background: var(--blue-dim); border-color: var(--blue); color: var(--blue-light); } .cl-icon-btn.danger:hover { background: var(--red-dim); border-color: var(--red); color: var(--red-light); } .cl-empty-grid { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--text-muted); background: var(--bg-card); border: 2px dashed var(--border); border-radius: var(--radius-xl); font-size: 0.95rem; } .cl-detail { display: none; } .cl-detail.open { display: block; } .cl-back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--accent-light); font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 8px 0; margin-bottom: 20px; transition: var(--transition-fast); } .cl-back-btn:hover { color: var(--text-primary); transform: translateX(-3px); } .cl-detail-header { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); margin-bottom: 20px; box-shadow: var(--shadow-card); overflow: hidden; } .cl-detail-info { padding: 25px 30px 16px; background: var(--bg-deep); border-bottom: 1px solid var(--border); } .cl-detail-info h2 { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; } .cl-detail-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; } .cl-detail-meta { display: flex; align-items: center; gap: 10px; } .cl-detail-actions { display: flex; gap: 10px; padding: 16px 30px; align-items: center; justify-content: flex-end; } .cl-games-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); } .cl-game-item { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); transition: var(--transition-fast); } .cl-game-item:last-child { border-bottom: none; } .cl-game-item:hover { background: var(--accent-dim); } .cl-game-img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); flex-shrink: 0; background: var(--bg-deep); } .cl-game-info { flex: 1; min-width: 0; } .cl-game-name { font-size: 1rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .cl-game-meta { font-size: 0.78rem; color: var(--text-dim); } .cl-game-note { font-size: 0.78rem; color: var(--accent-light); margin-top: 4px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-game-actions { display: flex; gap: 6px; flex-shrink: 0; } .cl-empty-detail { text-align: center; padding: 60px 20px; color: var(--text-muted); } .cl-empty-detail h3 { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 8px; } .cl-empty-detail p { font-size: 0.9rem; } .cl-modal-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: var(--bg-overlay); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 20px; } .cl-modal-overlay.open { display: flex; } .cl-modal-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; width: 90%; max-width: 520px; position: relative; box-shadow: var(--shadow-modal); max-height: 90vh; overflow-y: auto; } .cl-modal-box-sm { max-width: 400px; } .cl-modal-box h3 { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; } .cl-modal-close { position: absolute; top: 14px; right: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: var(--radius-circle); color: var(--text-muted); cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: var(--transition-fast); } .cl-modal-close:hover { background: var(--red-dim); border-color: var(--red); color: var(--red-light); } .cl-form-group { margin-bottom: 18px; } .cl-form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; } .cl-form-input { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; background: var(--bg-deep); color: var(--text-primary); transition: var(--transition); } .cl-form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .cl-form-input::placeholder { color: var(--text-dim); } .cl-form-textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit; background: var(--bg-deep); color: var(--text-primary); resize: vertical; min-height: 90px; transition: var(--transition); } .cl-form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .cl-form-textarea::placeholder { color: var(--text-dim); } .cl-char-count { font-size: 0.72rem; color: var(--text-dim); text-align: right; margin-top: 4px; } .cl-char-count.warn { color: var(--amber); } .cl-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cl-toggle-label { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); } .cl-toggle-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; } .cl-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .cl-toggle input { opacity: 0; width: 0; height: 0; } .cl-toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 24px; cursor: pointer; transition: var(--transition); } .cl-toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: var(--radius-circle); transition: var(--transition); } .cl-toggle input:checked + .cl-toggle-slider { background: #475569; /* neutral, independent of the active category accent */ } .cl-toggle input:checked + .cl-toggle-slider::before { transform: translateX(20px); } .cl-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; } .cl-confirm-text { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 8px 0 0; } .cl-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-primary); font-size: 0.9rem; font-weight: 600; padding: 12px 24px; box-shadow: var(--shadow-modal); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; white-space: nowrap; } .cl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .cl-toast.success { border-color: var(--green); color: var(--green-light); background: linear-gradient(135deg, #0d2b1e 0%, #112b1f 100%); } .cl-toast.error { border-color: var(--red); color: var(--red-light); background: linear-gradient(135deg, #2b0d0d 0%, #2b1111 100%); } .cl-acc-row { border-bottom: 1px solid var(--border-subtle); } .cl-acc-row:last-child { border-bottom: none; } .cl-acc-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; cursor: pointer; transition: var(--transition-fast); gap: 12px; user-select: none; } .cl-acc-header:hover { background: var(--accent-dim); } .cl-acc-row.expanded .cl-acc-header { background: var(--accent-dim); } .cl-acc-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .cl-acc-header-right { display: flex; gap: 8px; flex-shrink: 0; } .cl-acc-chevron { font-size: 0.9rem; font-weight: 700; color: var(--text-dim); flex-shrink: 0; width: 16px; transition: var(--transition-fast); } .cl-acc-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-acc-title-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .cl-acc-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cl-acc-desc { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 600px; } .cl-acc-body { border-top: 1px solid var(--border-subtle); } .cl-acc-toolbar { background: var(--bg-deep); } .cl-acc-toolbar .list-header { padding: 16px 30px; border-radius: 0; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid var(--border-subtle); background: transparent; box-shadow: none; } .cl-acc-list-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 30px; background: var(--bg-deep); border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; } .cl-acc-list-header-inputs { display: flex; gap: 12px; align-items: center; flex: 1; flex-wrap: wrap; min-width: 0; } .cl-acc-list-header-inputs .search-input { flex: 1; min-width: 160px; } .cl-acc-list-header-btns { display: flex; gap: 12px; align-items: center; flex-shrink: 0; } .my-games-section .search-input, .cl-acc-list-header .search-input { padding: 14px 18px; font-size: 15px; } .my-games-section .filter-select, .cl-acc-list-header .filter-select { padding: 12px 40px 12px 16px; font-size: 14px; min-width: 160px; } .coll-item.list-item, .coll-item.cl-list-item { display: flex; align-items: center; gap: 16px; padding: 16px 30px; border-bottom: 1px solid var(--border-subtle); transition: var(--transition-fast); cursor: pointer; } .coll-item.list-item:last-child, .coll-item.cl-list-item:last-child { border-bottom: none; } .coll-item.list-item:hover, .coll-item.cl-list-item:hover { background: var(--accent-dim); } .my-games-section .status-tabs, .cl-acc-status-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 2px solid var(--border); padding: 0 30px; background: var(--bg-deep); margin: 0; } .my-games-section .status-tab, .cl-acc-status-tabs .status-tab { padding: 14px 20px; font-size: 14px; font-weight: 500; background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--text-muted); cursor: pointer; transition: var(--transition); } .my-games-section .status-tab:hover, .cl-acc-status-tabs .status-tab:hover { color: var(--text-primary); background: var(--accent-dim); } .my-games-section .status-tab.active, .cl-acc-status-tabs .status-tab.active { color: var(--accent-light); border-bottom-color: var(--accent-light); background: var(--accent-dim); } .cl-acc-status-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 2px solid var(--border); padding: 0 30px; background: transparent; margin: 0; } .cl-acc-status-tabs .status-tab { padding: 12px 18px; font-size: 13px; } #clAccordion .coll-item { padding: 16px 30px; } .cl-game-modal-overlay { display: none; position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(10px); z-index: 2000; align-items: center; justify-content: center; padding: 20px; } .cl-game-modal-overlay.open { display: flex; } .cl-game-modal-box { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 20px; width: 95%; max-width: 860px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.1); scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .cl-game-modal-box::-webkit-scrollbar { width: 4px; } .cl-game-modal-box::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } .cl-game-modal-close-btn { position: absolute; top: 16px; right: 16px; z-index: 10; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(6px); color: #fff; width: 36px; height: 36px; border-radius: var(--radius-circle); font-size: 20px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: var(--transition-fast); } .cl-game-modal-close-btn:hover { background: var(--red); border-color: var(--red); } .add-to-list-action-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; } .add-to-list-action-row .btn { padding: 7px 16px; font-size: 13px; white-space: nowrap; flex-shrink: 0; } .add-to-list-msg { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .add-to-list-msg--success { color: var(--green-light); } .add-to-list-msg--error { color: var(--red-light); } .site-footer { margin-top: 60px; border-top: 1px solid #1e293b; padding: 40px 0 24px; color: #64748b; font-size: 0.85rem; } .footer-inner { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; margin-bottom: 32px; } .footer-brand .brand-name { font-size: 1.1rem; font-weight: 700; color: #e2e8f0; margin-bottom: 8px; } .footer-brand p { max-width: 260px; line-height: 1.6; } .footer-col h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 12px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .footer-col ul li a { color: #64748b; text-decoration: none; transition: color 0.2s; } .footer-col ul li a:hover { color: #e2e8f0; } .footer-igdb { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 10px; margin-bottom: 24px; } .footer-igdb img { height: 28px; width: auto; } .footer-igdb-text { font-size: 0.8rem; line-height: 1.5; color: #64748b; } .footer-igdb-text a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; } .footer-igdb-text a:hover { color: var(--text-primary); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #1e293b; font-size: 0.8rem; } .footer-bottom-links { display: flex; gap: 16px; } .footer-bottom-links a { color: #64748b; text-decoration: none; } .footer-bottom-links a:hover { color: #e2e8f0; } @media (max-width: 900px) { .container { padding: 14px; } /* Switch the grid bar to a wrapping flex row: brand + controls + hamburger on top; the 4 category tabs drop into the drawer. Profile stays a menu. */ .navbar { display: flex; flex-wrap: wrap; align-items: center; padding: 9px 12px; margin-bottom: 18px; border-radius: var(--radius-lg); gap: 6px; } .nav-brand { flex: 0 0 auto; order: 0; font-size: 1.15rem; } /* Push all controls to the right edge so the row fills the bar (no dead space on the right); brand stays hard-left. */ .nav-right { order: 1; gap: 4px; margin-left: auto; } .nav-toggle { order: 2; display: inline-flex; } .nav-primary { order: 3; display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; } .navbar.is-open .nav-primary { display: flex; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border-subtle); } .nav-tab { width: 100%; padding: 12px 14px; font-size: 0.95rem; } /* Compact the profile trigger to an avatar-only button on mobile. */ .nav-menu-label, .nav-caret { display: none; } .nav-menu-trigger { padding: 3px; border-radius: 50%; } .nav-menu-pop { top: calc(100% + 6px); } body.nav-drawer-open { overflow: hidden; } /* Collection / Custom Lists stays a side-by-side 2-segment control on mobile (stacking it made the active tab read as a stray label). */ .page-tabs { flex-direction: row; } .page-tab { padding: 11px 12px; font-size: 14px; } /* Search input takes the full first row; sort + Filters + Search share the next row (the container wraps). */ .search-container { gap: 10px; } .search-container .search-input { flex: 1 1 100%; } .search-container #sortBy, .search-container #filterBtn, .search-container #searchBtn { flex: 1 1 auto; } .filter-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-section { padding: 14px; } .games-grid { gap: 16px 12px; } .game-info { padding: 12px; } .game-title { font-size: 0.92rem; margin-bottom: 8px; } .pagination { gap: 18px; justify-content: center; } /* Keep the circular arrow buttons - don't let them stretch into pills. */ .pagination .btn { flex: 0 0 auto; } .list-header { flex-direction: column; gap: 15px; align-items: flex-start; } .list-header-actions { width: 100%; flex-wrap: wrap; } .list-item { flex-direction: column; align-items: flex-start; } .list-game-image { width: 100%; height: 180px; } .list-game-content { width: 100%; flex-direction: column; align-items: flex-start; } .list-game-actions { width: 100%; flex-direction: column; } .list-game-actions .btn { width: 100%; } .profile-avatar-section { flex-direction: column; } .profile-stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .profile-stats .stat-item { padding: 14px 8px; } .profile-media-breakdown { justify-content: center; } .friend-item { flex-wrap: wrap; padding: 16px; gap: 14px; } .friend-avatar { width: 56px; height: 56px; } .friend-info { flex: 1 1 auto; min-width: 0; } .friend-actions { width: 100%; } .friend-actions .btn { flex: 1; } .stats-dashboard { padding: 20px; } .stats-title { font-size: 22px; } .admin-stats { grid-template-columns: 1fr; } .admin-tabs { flex-direction: column; } .section-header { flex-direction: column; align-items: flex-start; gap: 12px; } .header-actions { width: 100%; flex-direction: column; } .form-row { grid-template-columns: 1fr; } .form-actions { flex-direction: column; } .form-actions .btn { width: 100%; } .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-table { min-width: 0; width: 100%; } .admin-table thead { display: none; } .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; } .admin-table tr.admin-user-row { margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); padding: 8px 12px; } .admin-table td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 8px 4px; text-align: right; } .admin-table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); text-align: left; flex-shrink: 0; } .admin-table td.cell-actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px; } .admin-table td.cell-actions::before { width: 100%; } .section-header .header-actions { display: flex; flex-direction: column; gap: 10px; } .section-header .search-input, .section-header .btn { width: 100%; min-height: 44px; } .cl-grid { grid-template-columns: 1fr; } .cl-detail-actions { flex-direction: column; align-items: flex-start; } .cl-overview-header { flex-direction: column; align-items: flex-start; gap: 12px; } .add-to-list-fields { grid-template-columns: 1fr; } .game-detail-hero { height: 180px; } .game-detail-title-row { flex-direction: column; align-items: flex-start; margin-top: -20px; } .game-detail-cover { width: 80px; height: 107px; } .game-detail-title { font-size: 1.25rem; } .modal-content, .update-modal-content, .remove-modal-content { width: calc(100vw - 20px); max-width: none; max-height: min(92vh, 100dvh); border-radius: 16px; } .mgl-confirm-actions { flex-direction: column-reverse; align-items: stretch; } .mgl-confirm-actions .btn { width: 100%; } .coll-item { flex-direction: row; flex-wrap: wrap; } .coll-item-body { flex-direction: column; align-items: flex-start; } .coll-item-right { width: 100%; justify-content: space-between; } .coll-item-edit-actions { flex-wrap: wrap; } .cl-acc-header { flex-direction: column; align-items: flex-start; padding: 16px 20px; } .cl-acc-header-right { width: 100%; } /* Status filters (All / In progress / Completed / Planned / On hold / Dropped) become one swipeable row instead of stacking into 3 rows. */ .status-tabs, .my-games-section .status-tabs, .cl-acc-status-tabs { padding: 0 12px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .status-tabs::-webkit-scrollbar, .my-games-section .status-tabs::-webkit-scrollbar, .cl-acc-status-tabs::-webkit-scrollbar { display: none; } .status-tab { flex: 0 0 auto; white-space: nowrap; padding: 13px 15px; } #clAccordion .coll-item { padding: 14px 16px; } .cl-acc-toolbar .list-header { padding: 14px 16px; } .cl-acc-desc { max-width: 100%; } .cl-acc-list-header { flex-direction: column; align-items: flex-start; padding: 16px; } .cl-acc-list-header-inputs { width: 100%; } .cl-acc-list-header-btns { width: 100%; } .cl-acc-list-header-inputs .search-input, .cl-acc-list-header .filter-select, .cl-acc-list-header-btns .btn { width: 100%; min-width: 0; } .coll-cards-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; padding: 12px 16px; } .coll-card-title { font-size: 11px; } .card-edit-actions { flex-direction: column; gap: 3px; } .footer-inner { flex-direction: column; gap: 24px; } .footer-bottom { flex-direction: column; align-items: flex-start; } .auth-container { padding: 16px; align-items: flex-start; min-height: 100dvh; } .auth-card { padding: 24px 18px; border-radius: 16px; } .auth-header h1 { font-size: 2rem; } .oauth-btn { min-height: 46px; font-size: 0.95rem; } .toast-host { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 12px)); max-width: none; } } @media (max-width: 480px) { .container { padding: 10px; } .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .game-card-desc { display: none; } .platform-badge { font-size: 10px; } .auth-card { padding: 20px 14px; } .auth-header h1 { font-size: 1.75rem; } .auth-header p { font-size: 0.9rem; } .coll-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; } .nav-brand { font-size: 1.15rem; } .game-detail-hero { height: 150px; } .empty-state { padding: 48px 16px; font-size: 1rem; } } .toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 12000; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-card); font-size: 0.9rem; line-height: 1.4; animation: toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; } .toast-icon { flex-shrink: 0; margin-top: 1px; } .toast-text { min-width: 0; } .toast-success { border-color: var(--green); } .toast-success .toast-icon { color: var(--green-light); } .toast-error { border-color: var(--red); } .toast-error .toast-icon { color: var(--red-light); } .toast-info { border-color: var(--blue); } .toast-info .toast-icon { color: var(--blue-light); } .toast-out { opacity: 0; transform: translateY(4px) scale(0.97); transition: opacity 0.2s ease, transform 0.2s ease; } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast-out { transform: none; } } /* Cold-start state (Render free tier). Replaces the endless skeleton shimmer with a calm, centred "the server is starting, it will load" panel. A light scrim settles the shimmer behind it; nav stays clickable (scrim is pointer-events:none). */ .backend-wake { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--bg-base) 62%, transparent); pointer-events: none; opacity: 1; transition: opacity 0.35s ease; } .backend-wake.is-out { opacity: 0; } .backend-wake-panel { pointer-events: auto; width: min(440px, 100%); display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); } .backend-wake[data-state="ready"] .backend-wake-panel { border-color: var(--green); } .backend-wake[data-state="error"] .backend-wake-panel { border-color: var(--red); } /* Spinner while booting; solid status dot once resolved (green ready / red error). */ .backend-wake-ind { flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; border-radius: var(--radius-circle); border: 2px solid var(--border-subtle); border-top-color: var(--accent-light); animation: backend-wake-spin 0.8s linear infinite; } .backend-wake[data-state="ready"] .backend-wake-ind { animation: none; border: 0; background: var(--green); } .backend-wake[data-state="error"] .backend-wake-ind { animation: none; border: 0; background: var(--red); } @keyframes backend-wake-spin { to { transform: rotate(360deg); } } .backend-wake-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .backend-wake-title { font-size: 1rem; font-weight: 700; line-height: 1.25; } .backend-wake[data-state="ready"] .backend-wake-title { color: var(--green-light); } .backend-wake[data-state="error"] .backend-wake-title { color: var(--red-light); } .backend-wake-msg { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; } /* Indeterminate progress - signals it's actively working, not frozen. */ .backend-wake-bar { position: relative; height: 5px; margin-top: 2px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; } .backend-wake-bar > span { position: absolute; top: 0; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); animation: backend-wake-slide 1.4s ease-in-out infinite; } @keyframes backend-wake-slide { 0% { left: -42%; } 100% { left: 100%; } } .backend-wake-meta { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .backend-wake-retry { align-self: flex-start; margin-top: 4px; padding: 7px 14px; font-size: 0.83rem; font-weight: 600; color: var(--text-primary); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; } .backend-wake-retry:hover { border-color: var(--accent-light); } .backend-wake-retry:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .backend-wake-ind { animation: none; } .backend-wake-bar > span { animation: none; left: 0; width: 100%; opacity: 0.5; } } @media (max-width: 520px) { .backend-wake-panel { width: 100%; } } /* Shared confirm dialog (confirmAction) */ .mgl-confirm-modal .mgl-confirm-dialog { max-width: 420px; padding: 28px 24px 20px; } .mgl-confirm-modal #mglConfirmTitle { margin: 0 0 12px; font-size: 1.25rem; } .mgl-confirm-message { margin: 0 0 24px; color: var(--text-secondary); line-height: 1.55; white-space: pre-wrap; } .mgl-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0; } /* Display density (Profile preference, localStorage uiDensity) */ :root, html[data-density="comfortable"] { --density-pad: 16px; --density-gap: 16px; --density-font: 1rem; } html[data-density="compact"] { --density-pad: 10px; --density-gap: 10px; --density-font: 0.92rem; } html[data-density="compact"] body { font-size: var(--density-font); } html[data-density="compact"] .navbar { padding-top: 8px; padding-bottom: 8px; } html[data-density="compact"] .game-card, html[data-density="compact"] .profile-section, html[data-density="compact"] .auth-card, html[data-density="compact"] .friends-section, html[data-density="compact"] .my-games-section, html[data-density="compact"] .stats-dashboard, html[data-density="compact"] .admin-section { padding: var(--density-pad); } html[data-density="compact"] .form-group { margin-bottom: var(--density-gap); } html[data-density="compact"] .btn { padding: 8px 12px; font-size: 0.9rem; } html[data-density="compact"] .coll-item { padding: 10px 12px; gap: 10px; } html[data-density="compact"] .search-container, html[data-density="compact"] .filters-section { margin-bottom: var(--density-gap); } html[data-density="compact"] .admin-table th, html[data-density="compact"] .admin-table td { padding: 8px 10px; } html[data-density="compact"] .page-tab { padding: 8px 14px; } /* ── Accessibility ─────────────────────────────────────────── */ .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; } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 10000; padding: 10px 16px; background: var(--blue); color: #fff; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; } .skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; } :focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; } .form-group input:focus-visible, .form-input:focus-visible, .form-textarea:focus-visible, .btn:focus-visible, .tab-btn:focus-visible, .close-btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .game-card:hover { transform: none; } } /* ── Shared site footer (Games / Movies / Series browse pages) ──────────── */ .site-footer { margin-top: 64px; border-top: 1px solid #1e293b; padding: 48px 0 24px; color: #64748b; font-size: 0.85rem; } .footer-inner { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; margin-bottom: 36px; } .footer-brand .brand-name { font-size: 1.15rem; font-weight: 700; color: #e2e8f0; margin-bottom: 10px; letter-spacing: -0.01em; } .footer-brand p { max-width: 260px; line-height: 1.65; color: #64748b; } .footer-col h4 { font-size: 0.82rem; font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--text-secondary); margin-bottom: 14px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { color: #64748b; text-decoration: none; transition: color 0.18s; } .footer-col ul li a:hover { color: #e2e8f0; } .footer-igdb { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 10px; margin-bottom: 28px; } .footer-igdb img { height: 26px; width: auto; flex-shrink: 0; } .footer-igdb-text { font-size: 0.78rem; line-height: 1.6; color: #64748b; } .footer-igdb-text a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; } .footer-igdb-text a:hover { color: var(--text-primary); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #1e293b; font-size: 0.78rem; color: #475569; } .footer-bottom-links { display: flex; gap: 20px; } .footer-bottom-links a { color: #475569; text-decoration: none; transition: color 0.18s; } .footer-bottom-links a:hover { color: #94a3b8; } @media (max-width: 600px) { .footer-inner { gap: 32px; } .footer-col { min-width: 120px; } } /* ── Media-type pills (library + profiles) ─────────────────────────────── */ .media-type-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 8px; border: 1px solid transparent; } .media-type-movie { background: var(--cat-movie-dim); color: var(--cat-movie-light); border-color: var(--cat-movie-border); } .media-type-series { background: var(--cat-series-dim); color: var(--cat-series-light); border-color: var(--cat-series-border); } .media-type-anime { background: var(--cat-anime-dim); color: var(--cat-anime-light); border-color: var(--cat-anime-border); } .media-type-game { background: var(--cat-game-dim); color: var(--cat-game-light); border-color: var(--cat-game-border); } /* ══════════════════════════════════════════════════════════════════════ CATEGORY THEMING · PAGE IDENTITY · NAV · SEARCH (redesign layer) ══════════════════════════════════════════════════════════════════════ */ /* Per-page accent - drives page headers, nav active state, focus rings. body[data-page] / [data-cat] is set by common.js from the nav's data-active. */ body[data-page="movies"], [data-cat="movies"] { --accent: var(--cat-movie); --accent-light: var(--cat-movie-light); --accent-dim: var(--cat-movie-dim); --accent-border: var(--cat-movie-border); --accent-glow: rgba(59,130,246,0.50); } body[data-page="series"], [data-cat="series"] { --accent: var(--cat-series); --accent-light: var(--cat-series-light); --accent-dim: var(--cat-series-dim); --accent-border: var(--cat-series-border); --accent-glow: rgba(16,185,129,0.46); } body[data-page="anime"], [data-cat="anime"] { --accent: var(--cat-anime); --accent-light: var(--cat-anime-light); --accent-dim: var(--cat-anime-dim); --accent-border: var(--cat-anime-border); --accent-glow: rgba(236,72,153,0.48); } /* Games keeps its vibrant brand amber for fills; white button text stays legible via a soft warm shadow (see the games text-shadow rule) - no burnt-orange, no harsh black-on-yellow. */ body[data-page="games"], [data-cat="games"] { --accent: var(--cat-game); --accent-light: var(--cat-game-light); --accent-dim: var(--cat-game-dim); --accent-border: var(--cat-game-border); --accent-glow: rgba(245,158,11,0.46); } /* Surfaces stay a single neutral dark on every page - the category colour now comes ONLY from the Aurora nebula behind them, so there is one cohesive space gradient per page instead of a flat surface tint clashing with the wash. */ /* My Library, Following, and Profile stay neutral (inherit :root) and only pick up a category color when a category filter is chosen inside the page. */ /* ── Page header (every primary page) - clean, centered, no icons/bars ──── */ .page-header { margin: 6px 0 28px; text-align: center; } .page-header-main { min-width: 0; } .page-header-title { margin: 0; font-size: 2.15rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--text-primary); } .page-header-sub { margin: 9px auto 0; color: var(--text-muted); font-size: 1rem; line-height: 1.55; max-width: 62ch; } @media (max-width: 600px) { .page-header { margin: 2px 0 20px; } .page-header-title { font-size: 1.55rem; } .page-header-sub { font-size: 0.9rem; margin-top: 6px; } } /* ── Nav: category color-coding ───────────────────────────────────────── */ .nav-actions .btn[data-cat] { position: relative; } /* small colored dot to signal each category's color even when inactive */ .nav-actions .btn[data-cat]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--cat-color, var(--text-dim)); box-shadow: 0 0 6px var(--cat-color, transparent); flex-shrink: 0; } .nav-actions .btn[data-cat="movies"] { --cat-color: var(--cat-movie-light); } .nav-actions .btn[data-cat="series"] { --cat-color: var(--cat-series-light); } .nav-actions .btn[data-cat="anime"] { --cat-color: var(--cat-anime-light); } .nav-actions .btn[data-cat="games"] { --cat-color: var(--cat-game-light); } /* active category tab glows in its own color (overrides the generic blue active) */ .nav-actions .btn[data-cat="movies"].active { background: linear-gradient(135deg, var(--cat-movie) 0%, #1d4ed8 100%); box-shadow: var(--shadow-btn) var(--cat-movie-dim); } .nav-actions .btn[data-cat="series"].active { background: linear-gradient(135deg, var(--cat-series) 0%, var(--green-dark) 100%); box-shadow: var(--shadow-btn) var(--cat-series-dim); } .nav-actions .btn[data-cat="anime"].active { background: linear-gradient(135deg, var(--cat-anime) 0%, #be185d 100%); box-shadow: var(--shadow-btn) var(--cat-anime-dim); } .nav-actions .btn[data-cat="games"].active { background: var(--cat-game); color: #fff; text-shadow: 0 1px 2px rgba(66,32,0,0.55); box-shadow: var(--shadow-btn) var(--cat-game-dim); } .nav-actions .btn[data-cat].active::before { background: #fff; box-shadow: none; } /* ── Collection category tabs (My Library) - colored per category ─────── */ .media-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .media-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-deep); color: var(--text-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--transition-fast); } .media-tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mt-color, var(--text-dim)); flex-shrink: 0; } .media-tab[data-media="movie"] { --mt-color: var(--cat-movie-light); } .media-tab[data-media="series"] { --mt-color: var(--cat-series-light); } .media-tab[data-media="anime"] { --mt-color: var(--cat-anime-light); } .media-tab[data-media="game"] { --mt-color: var(--cat-game-light); } .media-tab[data-media="all"] { --mt-color: #64748b; } /* neutral, not category blue */ .media-tab[data-media="all"]::before { background: linear-gradient(135deg, var(--cat-movie-light), var(--cat-anime-light)); } .media-tab .mt-count { font-size: 0.72rem; font-weight: 700; padding: 0 6px; min-width: 18px; text-align: center; border-radius: 999px; background: rgba(148,163,184,0.15); color: var(--text-muted); } .media-tab:hover { color: var(--text-primary); border-color: var(--mt-color, var(--border)); } .media-tab.active { color: #fff; border-color: transparent; background: color-mix(in srgb, var(--mt-color, var(--blue)) 78%, #0b1220); } .media-tab.active .mt-count { background: rgba(255,255,255,0.22); color: #fff; } .media-tab.active::before { background: #fff; } /* ── Search + filter bar ────────────────────────────────────────────────── A clean utility bar, not a floating panel: the input and controls carry their own edges, so the wrapper stays out of the way. */ .search-container { margin-bottom: 26px; } .search-input:focus, .filter-select:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim); } .search-container .btn-primary, .search-bar .btn-primary { background: var(--accent); box-shadow: var(--shadow-btn) var(--accent-dim); } /* Brief highlight when "Find people" jumps focus to the search box. */ .input-flash { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important; transition: box-shadow 0.25s ease, border-color 0.25s ease; } /* Amber (Games) is too light to carry white text at AA contrast - these fills use the dark ink token instead (8.6:1, see --cat-game-ink). */ body[data-page="games"] .btn-primary, body[data-page="games"] .search-container .btn-primary, body[data-page="games"] .nav-actions .btn.active, body[data-page="games"] .pagination #nextPageBtn, body[data-page="games"] .nav-cta, body[data-page="games"] .score-btn, [data-cat="games"] .score-btn, body[data-page="games"] .page-tab.active, body[data-page="games"] .year-chip.active, body[data-page="games"] .cal-chip.active { color: var(--cat-game-ink); } /* ── Mobile navigation drawer polish ──────────────────────────────────── */ @media (max-width: 900px) { .nav-toggle { background: var(--accent-dim); border-color: var(--accent-border); } .nav-toggle-bar { background: var(--accent-light); } .navbar.is-open { border-color: var(--accent-border); } /* Each drawer item reads as a full-width, tappable row. */ .navbar.is-open .nav-tab, .navbar.is-open .nav-link, .navbar.is-open .nav-menu-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .navbar.is-open .nav-tab:not(.active), .navbar.is-open .nav-link:not(.active), .navbar.is-open .nav-menu-item:not(.active) { background: var(--bg-deep); } .navbar.is-open .nav-tab::before { width: 9px; height: 9px; } .navbar.is-open .nav-menu-danger { color: var(--red-light); border-color: rgba(239, 68, 68, 0.35); } } @media (max-width: 480px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .media-tabs { gap: 6px; } .media-tab { padding: 6px 12px; font-size: 0.8rem; } } /* ── Category breakdown chips (profiles) ──────────────────────────────── */ .cat-breakdown { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 8px; } .cat-stat { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: var(--bg-deep); border: 1px solid var(--cs-border, var(--border-subtle)); text-decoration: none; } .cat-stat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-color, var(--text-dim)); flex-shrink: 0; } .cat-stat[data-cat="movie"] { --cs-color: var(--cat-movie-light); --cs-border: var(--cat-movie-border); } .cat-stat[data-cat="series"] { --cs-color: var(--cat-series-light); --cs-border: var(--cat-series-border); } .cat-stat[data-cat="anime"] { --cs-color: var(--cat-anime-light); --cs-border: var(--cat-anime-border); } .cat-stat[data-cat="game"] { --cs-color: var(--cat-game-light); --cs-border: var(--cat-game-border); } .cat-stat .cs-num { font-weight: 800; color: var(--cs-color); font-size: 1rem; } .cat-stat .cs-label { font-size: 0.82rem; color: var(--text-secondary); } a.cat-stat:hover { border-color: var(--cs-color); } /* ══ Detail page enrichment: rating · trailer · cast · where-to-watch · similar ══ */ .detail-rating { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 0.95rem; color: var(--accent-light); background: var(--accent-dim); border: 1px solid var(--accent-border); padding: 3px 11px; border-radius: 999px; } .detail-rating .dr-sub { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-left: 1px; } .detail-section { margin-top: 26px; } .detail-h { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 13px; } /* Capped rather than stretched to the full 1400px content width - a 16:9 video at that width is enormous on a wide desktop, taller than the viewport itself. */ .detail-trailer { position: relative; max-width: 900px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; cursor: pointer; border: 1px solid var(--border-subtle); } .detail-trailer img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.82; transition: opacity 0.2s; } .detail-trailer:hover img { opacity: 1; } .detail-trailer iframe { width: 100%; height: 100%; border: 0; display: block; } .detail-trailer.playing { cursor: default; } .detail-trailer-play { position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; border-radius: 50%; background: rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.9); pointer-events: none; } .detail-trailer-play::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; transform: translateX(2px); } .detail-providers { display: flex; flex-direction: column; gap: 12px; } .detail-prov-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .detail-prov-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); min-width: 54px; } .detail-prov-logos { display: flex; gap: 8px; flex-wrap: wrap; } .detail-prov-logos img { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border-subtle); object-fit: cover; background: var(--bg-deep); } .detail-cast { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; } .detail-cast-card { flex: 0 0 96px; scroll-snap-align: start; text-align: center; } .detail-cast-card img { width: 96px; height: 120px; object-fit: cover; border-radius: 10px; background: var(--bg-deep); border: 1px solid var(--border-subtle); } .dc-name { font-size: 0.78rem; font-weight: 600; margin-top: 6px; line-height: 1.2; } .dc-char { font-size: 0.72rem; color: var(--text-muted); line-height: 1.25; } .detail-similar { display: grid; grid-auto-flow: column; grid-auto-columns: 118px; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; } .detail-similar-card { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; scroll-snap-align: start; } .detail-similar-card img { width: 118px; height: 174px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-subtle); transition: transform 0.18s, border-color 0.18s; } .detail-similar-card:hover img { transform: translateY(-3px); border-color: var(--accent); } .ds-name { font-size: 0.76rem; font-weight: 600; margin-top: 6px; line-height: 1.25; color: var(--text-primary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ── Profile page: a person, a character, or a studio ──────────────────────── Split header rather than a centred one: the portrait carries the recognition and the words carry the information, so they sit side by side and the eye starts on the left with the name. Facts are a definition list, not stat tiles - "Born 1974" is a label and a value, and boxing it would make five of them look like a dashboard. Credits are a list, not a poster grid. A filmography is read: who they played, in what, when. A wall of covers answers none of that, so the poster is small, to the left, and there to help you recognise the title. */ /* Back reads as a sibling of the Prev/Next pager: same outline, same accent, same hover lift - so moving through the app feels like one control family. */ .person-back { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 18px; padding: 0 18px 0 14px; min-height: 44px; border: 1px solid var(--accent-border); border-radius: var(--radius-pill); background: transparent; color: var(--accent-light); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease; } .person-back::before { content: '\2039'; font-size: 1.5rem; line-height: 1; font-weight: 400; } .person-back:hover { background: var(--accent-dim); color: var(--text-primary); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .person-back:hover { transform: none; } } .person-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 34px; } .person-portrait { width: 200px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--bg-deep); display: block; } /* A studio's logo is a wordmark on transparency, not a portrait: cropping it to a poster shape would cut the name in half. */ .person-portrait.is-logo { aspect-ratio: 3 / 2; object-fit: contain; padding: 18px; } .person-name { font-family: var(--font-display, inherit); font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 14px; } .person-facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 18px; } .person-fact dt { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; } .person-fact dd { margin: 0; font-size: 0.92rem; font-weight: 600; } .person-bio { max-width: 68ch; } .person-bio-text { margin: 0 0 6px; font-size: 0.95rem; line-height: 1.65; color: var(--text-secondary, var(--text-muted)); } .person-bio-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .person-source { display: inline-block; margin-top: 12px; } .person-section { margin-bottom: 34px; } .person-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 108px; gap: 10px; overflow-x: auto; padding-bottom: 6px; } .person-gallery img { width: 108px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-subtle); display: block; } .person-credits-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .person-credit-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .pt-count { opacity: 0.6; font-variant-numeric: tabular-nums; } .person-credits { list-style: none; margin: 0; padding: 0; } .person-credit + .person-credit { border-top: 1px solid var(--border-subtle); } .pc-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 8px; text-decoration: none; color: inherit; border-radius: 8px; } a.pc-link:hover { background: var(--accent-dim); } a.pc-link:hover .pc-title { color: var(--accent-light); } .pc-poster { width: 44px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 5px; border: 1px solid var(--border-subtle); display: block; } .pc-text { min-width: 0; } .pc-title { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.3; } .pc-role { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .pc-year { font-size: 0.84rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* A cast face is now a way in, so it has to look like one. */ /* These became anchors so a face can be opened. Anchors bring the browser's own blue and underline with them, which is not this app's link language - the name should read exactly as it did before, and only answer on hover. */ .detail-cast-card.is-linked { cursor: pointer; display: block; color: inherit; text-decoration: none; } .detail-cast-card.is-linked .dc-name { color: var(--text-primary); transition: color 0.15s; } .detail-cast-card.is-linked:hover img { border-color: var(--accent); } .detail-cast-card.is-linked:hover .dc-name { color: var(--accent-light); } /* Studio credits in the games info grid, once they lead somewhere. */ .info-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-subtle); } .info-link:hover { color: var(--accent-light); border-bottom-color: var(--accent); } /* People turned up by a search, above the titles they were found in. */ .people-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 14px; overflow-x: auto; padding: 2px 0 10px; } .people-strip-card { text-align: center; text-decoration: none; color: inherit; } .people-strip-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 1px solid var(--border-subtle); display: block; } .people-strip-card:hover img { border-color: var(--accent); } .people-strip-name { display: block; font-size: 0.8rem; font-weight: 600; margin-top: 8px; line-height: 1.25; } .people-strip-note { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .people-found { margin: 0 0 10px; } @media (max-width: 700px) { .person-head { grid-template-columns: 132px minmax(0, 1fr); gap: 18px; } .person-portrait { width: 132px; } .person-facts { gap: 6px 18px; } .pc-link { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; } .pc-poster { width: 38px; } } /* Why a control is off right now. One line, attached to the row it explains, with the single action that gives the control back - not a banner, not a card, because the answer is one sentence long. */ .query-state-notice { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; font-size: 0.82rem; color: var(--text-muted); } .query-state-notice .link-btn { font-size: 0.82rem; } /* Disabled, not hidden: a control that disappears reads as a bug, and the user still needs to see which sort they had chosen. */ .filter-select.is-locked, .btn.is-locked { opacity: 0.5; cursor: not-allowed; } /* The run a title belongs to. Same card size as "More like this" so the modal keeps one rhythm, but each entry carries where it sits in the sequence, and the title you are already on is outlined and inert rather than a link back to itself. That marker is what stops the row reading as more recommendations. */ .detail-series { display: grid; grid-auto-flow: column; grid-auto-columns: 118px; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; } .detail-series-item { padding: 0; border: 0; background: none; text-align: left; scroll-snap-align: start; color: inherit; font: inherit; } .detail-series-item:not(.is-here) { cursor: pointer; } .detail-series-item img { width: 118px; height: 174px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-subtle); transition: transform 0.18s, border-color 0.18s; display: block; } .detail-series-item:not(.is-here):hover img { transform: translateY(-3px); border-color: var(--accent); } .detail-series-item.is-here img { border-color: var(--accent); } .dsr-rel { display: block; margin-top: 6px; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .detail-series-item.is-here .dsr-rel { color: var(--accent-light); font-weight: 700; } .detail-series-item .ds-name { margin-top: 1px; } /* Game screenshots gallery - a horizontal strip, same scroller treatment as cast. */ .detail-shots { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; } .detail-shot { display: block; scroll-snap-align: start; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-subtle); background: var(--bg-deep); } .detail-shot img { width: 280px; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform 0.18s; } .detail-shot:hover img { transform: scale(1.03); } .detail-trailer-fallback { display: inline-block; margin-top: 10px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-decoration: none; } .detail-trailer-fallback:hover { color: var(--accent-light); text-decoration: underline; } @media (max-width: 600px) { .detail-cast-card { flex-basis: 84px; } .detail-cast-card img { width: 84px; height: 108px; } .detail-similar { grid-auto-columns: 104px; } .detail-similar-card img { width: 104px; height: 154px; } .detail-series { grid-auto-columns: 104px; } .detail-series-item img { width: 104px; height: 154px; } .detail-shots { grid-auto-columns: 240px; } .detail-shot img { width: 240px; } } /* Rating chip on browse cards */ .game-image-wrapper { position: relative; } .card-rating { position: absolute; top: 8px; right: 8px; font-size: 0.74rem; font-weight: 700; color: var(--accent-light); background: rgba(8,12,20,0.82); border: 1px solid var(--accent-border); padding: 2px 8px; border-radius: 999px; } /* Mirror of the rating chip, on the other corner: this title is already tracked. Same shape and weight so the two read as one family, not two ideas. */ .card-owned { position: absolute; top: 8px; left: 8px; font-size: 0.74rem; font-weight: 700; color: var(--accent-light); background: rgba(8,12,20,0.82); border: 1px solid var(--accent-border); padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; } /* What the library already holds, above the controls that change it. */ .atl-owned-note { margin: -4px 0 12px; font-size: 0.82rem; color: var(--text-muted); } .atl-owned-note strong { color: var(--text-primary); font-weight: 600; } /* One-tap episode progress in the library */ .coll-progress { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .coll-progress-bar { width: 72px; height: 6px; border-radius: 999px; background: rgba(148,163,184,0.25); overflow: hidden; flex-shrink: 0; } .coll-progress-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.25s ease; } .coll-progress-text { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .coll-ep-plus { font-size: 0.72rem; font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: 7px; cursor: pointer; background: var(--accent-dim); color: var(--accent-light); border: 1px solid var(--accent-border); transition: background 0.15s, color 0.15s; } .coll-ep-plus:hover { background: var(--accent); color: #fff; } /* ── Loading skeletons for browse grids ─────────────────────────────────── */ @keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-end) 37%, var(--bg-card) 63%); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; border-radius: 8px; } .skeleton-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-deep); border: 1px solid var(--border-subtle); } .skel-poster { width: 100%; aspect-ratio: 3 / 4; border-radius: 0; } .skel-info { padding: 12px; display: flex; flex-direction: column; gap: 9px; } .skel-line { height: 12px; } .skel-line.w80 { width: 80%; } .skel-line.w50 { width: 50%; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* List-row skeleton (Collection / friend Collection list view) */ .skel-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-deep); margin-bottom: 10px; } .skel-row-img { width: 46px; height: 62px; border-radius: 8px; flex-shrink: 0; } .skel-row-body { flex: 1; display: flex; flex-direction: column; gap: 9px; } .skel-row-badge { width: 84px; height: 26px; border-radius: var(--radius-pill); flex-shrink: 0; } .stat-skel { display: inline-block; width: 2.2ch; height: 1em; border-radius: 6px; vertical-align: middle; } /* Top navigation progress bar */ .top-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; opacity: 0; background: linear-gradient(90deg, var(--accent, #6366f1), var(--accent-light, #818cf8)); box-shadow: 0 0 8px var(--accent-glow, rgba(99,102,241,0.4)); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .top-progress { transition: opacity 0.2s !important; } } /* ── Library grid view (toggle) ─────────────────────────────────────────── */ .my-games-list.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .my-games-list.as-grid .coll-item { flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-deep); } .my-games-list.as-grid .coll-item-img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; border: 0; } .my-games-list.as-grid .coll-item-body { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; } .my-games-list.as-grid .coll-item-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 0; font-size: 0.9rem; } .my-games-list.as-grid .coll-item-right { width: 100%; justify-content: space-between; margin-top: 2px; } .view-toggle-btn { min-width: 44px; } /* ══ Home dashboard: hero · Continue · ratings · social · trending/upcoming charts ══ */ .dash-hero-inner { padding: 12px 0 6px; text-align: center; } .dash-hero-title { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--text-primary); text-wrap: balance; } .dash-hero-sub { color: var(--text-muted); font-size: 1.02rem; margin: 10px auto 0; max-width: 60ch; } .dash-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; justify-content: center; } /* Library counts stand in for a second headline stat block - centered, same pill used on the profile page, so it reads as one consistent component rather than a one-off dashboard widget. */ .dash-hero-counts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 0; } .dash-row { margin: 30px 0; } .dash-row-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; } .dash-row[data-cat] .dash-row-title::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: middle; background: var(--accent-light); } .dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .dash-section-head .dash-row-title { margin-bottom: 0; } .dash-row-link { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-decoration: none; } .dash-row-link:hover { color: var(--accent-light); } .dash-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; } .dash-card { display: block; text-decoration: none; scroll-snap-align: start; } .dash-card:focus-visible { outline: none; } .dash-card:focus-visible .dash-card-poster { outline: 2px solid var(--accent-light); outline-offset: 3px; } .dash-card-poster { position: relative; width: 150px; aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-deep); border: 1px solid var(--border-subtle); } .dash-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; } .dash-card:hover .dash-card-poster img { transform: scale(1.04); } .dash-card:hover .dash-card-poster { border-color: var(--accent); } .dash-card-name { margin-top: 7px; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Continue: a plain card like everything else on the site - no colour-coded side stripe. The category badge already says what it is. */ .dash-upnext { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } .dash-upnext-card { display: flex; gap: 14px; padding: 12px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-subtle); } .dash-upnext-poster { flex-shrink: 0; width: 66px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--bg-deep); } .dash-upnext-poster img { width: 100%; height: 100%; object-fit: cover; } .dash-upnext-info { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; flex: 1; } .dash-upnext-info > .cl-cat-badge { align-self: flex-start; } .dash-upnext-name { font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); text-decoration: none; } .dash-upnext-name:hover { color: var(--accent-light); } .dash-upnext-status { font-size: 0.8rem; color: var(--text-muted); } .dash-upnext-prog { display: flex; align-items: center; gap: 8px; } .dash-plus { align-self: flex-start; } .dash-empty { color: var(--text-muted); text-align: center; padding: 40px; } /* ── Social: similar-taste and friends'-activity side by side, each optional - the section itself never renders when there is nothing in either. */ .dash-social { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .dash-social-panel:only-child { grid-column: 1 / -1; } .dash-social-h { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px; } .dash-social-panel .pf-people { grid-template-columns: 1fr; } .dash-social-panel .activity-item:not(:last-child) { margin-bottom: 2px; } /* ── Trending / Upcoming: All/Movies/Shows/Anime/Games filter tabs above one poster row (same shape as Recent ratings) - same idiom the profile page uses for "Currently into"/"Top 10", but keyed off the page-level --accent token (already neutral by default via .dash-row[data-cat]) instead of --pf-accent, so "All" never defaults to blue. */ .dash-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; } .dash-tab { padding: 5px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .dash-tab:hover { color: var(--text-secondary); border-color: var(--border); } .dash-tab.active { color: var(--accent-light); border-color: var(--accent-border); } .dash-tab:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; } @media (max-width: 720px) { .dash-social { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 600px) { .dash-scroller { grid-auto-columns: 120px; } .dash-card-poster { width: 120px; } } /* ══ Global search overlay ═══════════════════════════════════════════════ */ .gsearch { position: fixed; inset: 0; z-index: 200; background: rgba(4,8,14,0.6); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; } .gsearch[hidden] { display: none !important; } body.gsearch-open { overflow: hidden; } .gsearch-box { width: 100%; max-width: 620px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); overflow: hidden; display: flex; flex-direction: column; max-height: 74vh; } .gsearch-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); } .gsearch-bar input { flex: 1; background: none; border: 0; outline: none; color: var(--text-primary); font-size: 1.05rem; padding: 4px 0; } .gsearch-esc { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 3px 8px; cursor: pointer; } .gsearch-results { overflow-y: auto; padding: 6px; } .gsearch-hint { padding: 22px 16px; color: var(--text-muted); text-align: center; font-size: 0.92rem; } .gsearch-group-h { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 12px 12px 6px; } .gsearch-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; text-decoration: none; } .gsearch-item img { width: 38px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--bg-deep); flex-shrink: 0; } .gsearch-item-txt { display: flex; flex-direction: column; min-width: 0; } .gsearch-item-name { color: var(--text-primary); font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gsearch-item-meta { color: var(--text-muted); font-size: 0.78rem; } .gsearch-item:hover, .gsearch-item.active { background: var(--accent-dim); } @media (max-width: 600px) { .gsearch { padding-top: 6vh; } /* No physical Esc key on touch - drop the badge so the placeholder isn't clipped. */ .gsearch-esc { display: none; } .gsearch-bar input { font-size: 1rem; } } /* ── Light-theme fixups for components with hardcoded dark-theme colors ─── */ :root[data-theme="light"] .site-footer { color: var(--text-muted); } :root[data-theme="light"] .footer-brand .brand-name, :root[data-theme="light"] .footer-col ul li a:hover, :root[data-theme="light"] .footer-bottom-links a:hover { color: var(--text-primary); } :root[data-theme="light"] .footer-col h4 { color: var(--text-secondary); } :root[data-theme="light"] .footer-col ul li a, :root[data-theme="light"] .footer-bottom, :root[data-theme="light"] .footer-brand p, :root[data-theme="light"] .footer-igdb-text, :root[data-theme="light"] .footer-bottom-links a { color: var(--text-muted); } /* The IGDB attribution stays a dark card (its text is light) - good on both. */ /* ══ Stats / Year in Review ══════════════════════════════════════════════ */ .stats-yearrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 22px; } .year-chip { padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--transition-fast); } .year-chip:hover { border-color: var(--accent-border); color: var(--text-primary); } .year-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } body[data-page="games"] .year-chip.active { color: var(--cat-game-ink); } .stats-loading, .stats-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); } .stats-empty p { margin-bottom: 8px; font-size: 1.05rem; color: var(--text-secondary); } .stats-empty .stats-empty-sub { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; } .stats-empty-mini { color: var(--text-muted); font-size: 0.9rem; padding: 18px 4px; text-align: center; } .stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .stat-tile { background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-card-end) 140%); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px 18px; display: flex; flex-direction: column; gap: 3px; } .stat-tile-value { font-size: 2rem; font-weight: 800; color: var(--accent-light); line-height: 1.1; letter-spacing: -0.02em; } .stat-tile-label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); } .stat-tile-sub { font-size: 0.72rem; color: var(--text-dim); } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; } .stats-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; } .stats-card-h { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; } .stats-split { display: flex; align-items: center; gap: 20px; } .stats-donut-wrap { flex-shrink: 0; } .stats-bars { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; } .donut { width: 130px; height: 130px; } .donut-top { fill: var(--text-primary); font-size: 22px; font-weight: 800; } .donut-sub { fill: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .st-bar-row { display: grid; grid-template-columns: 82px 1fr 38px; align-items: center; gap: 10px; } .st-bar-label { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-bar-track { height: 8px; background: var(--bg-deep); border-radius: 4px; overflow: hidden; } .st-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width 0.5s ease; } .st-bar-count { font-size: 0.8rem; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; } .score-hist { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 6px; } .score-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; } .score-bar { width: 100%; max-width: 26px; background: linear-gradient(180deg, var(--accent-light), var(--accent)); border-radius: 4px 4px 0 0; } .score-num { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .tl-hist { display: flex; align-items: flex-end; gap: 6px; height: 120px; } .tl-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; } .tl-bar { width: 100%; max-width: 30px; background: var(--accent); border-radius: 4px 4px 0 0; opacity: 0.85; } .tl-lab { font-size: 0.66rem; color: var(--text-dim); } .stats-highlights { display: flex; flex-direction: column; gap: 10px; } .hl-item { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 6px; border-radius: 10px; transition: var(--transition-fast); } .hl-item:hover { background: var(--accent-dim); } .hl-item img, .hl-noimg { width: 42px; height: 58px; object-fit: cover; border-radius: 6px; background: var(--bg-deep); flex-shrink: 0; } .hl-txt { display: flex; flex-direction: column; min-width: 0; } .hl-cap { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; } .hl-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl-meta { font-size: 0.8rem; color: var(--accent-light); font-weight: 600; } @media (max-width: 780px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: 1fr; } } @media (max-width: 420px) { .stat-tiles { grid-template-columns: 1fr 1fr; } .stats-split { flex-direction: column; align-items: stretch; } .stats-donut-wrap { align-self: center; } } .library-quicklinks { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: -6px 0 20px; } /* ══ Following - activity feed ═══════════════════════════════════════════ */ .activity-feed { display: flex; flex-direction: column; gap: 4px; } .activity-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); text-decoration: none; transition: var(--transition-fast); } .activity-item:hover { background: var(--accent-dim); } .activity-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-deep); } .activity-text { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 2px; } .activity-line { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.35; } .activity-line strong { color: var(--text-primary); font-weight: 600; } .activity-user { color: var(--accent-light); font-weight: 600; } .activity-time { font-size: 0.75rem; color: var(--text-dim); } .activity-thumb { width: 40px; height: 54px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--bg-deep); } .activity-thumb-empty { display: inline-block; } /* ══ Release calendar ════════════════════════════════════════════════════ */ .cal-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 22px; } .cal-chip { padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--transition-fast); } .cal-chip:hover { border-color: var(--accent-border); color: var(--text-primary); } .cal-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } body[data-page="games"] .cal-chip.active { color: var(--cat-game-ink); } .cal-watchlist { margin-bottom: 26px; } .cal-month { margin-bottom: 26px; } .cal-month-h { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); } .cal-month-n { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); background: var(--bg-deep); border-radius: var(--radius-pill); padding: 2px 9px; } .cal-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .cal-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-subtle); text-decoration: none; transition: var(--transition-fast); } .cal-item:hover { border-color: var(--accent-border); transform: translateY(-1px); } .cal-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; flex-shrink: 0; background: var(--bg-deep); border-radius: 8px; padding: 6px 0; } .cal-date-day { font-size: 1.15rem; font-weight: 800; color: var(--accent-light); line-height: 1; } .cal-date-mon { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; } .cal-thumb { width: 38px; height: 52px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--bg-deep); } .cal-thumb-empty { display: inline-block; } .cal-item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cal-item-name { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-badge { align-self: flex-start; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; } .cal-badge-movie { background: var(--cat-movie-dim); color: var(--cat-movie-light); border-color: var(--cat-movie-border); } .cal-badge-series { background: var(--cat-series-dim); color: var(--cat-series-light); border-color: var(--cat-series-border); } .cal-badge-anime { background: var(--cat-anime-dim); color: var(--cat-anime-light); border-color: var(--cat-anime-border); } .cal-badge-game { background: var(--cat-game-dim); color: var(--cat-game-light); border-color: var(--cat-game-border); } @media (max-width: 640px) { .cal-list { grid-template-columns: 1fr; } } /* ══ List import modal ═══════════════════════════════════════════════════ */ body.imp-open { overflow: hidden; } .imp-overlay { position: fixed; inset: 0; z-index: 210; background: var(--bg-overlay); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; } .imp-box { width: 100%; max-width: 640px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; max-height: 86vh; overflow: hidden; } .imp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); } .imp-head h3 { font-size: 1.1rem; color: var(--text-primary); } .imp-close { background: none; border: 0; color: var(--text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; } .imp-close:hover { color: var(--text-primary); } .imp-body { padding: 18px 20px; overflow-y: auto; } .imp-help { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 14px; } .imp-help em { color: var(--text-primary); font-style: normal; font-weight: 600; } .imp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 0.85rem; color: var(--text-secondary); } .imp-textarea { width: 100%; min-height: 150px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem; resize: vertical; } .imp-orfile { margin: 12px 0; font-size: 0.85rem; color: var(--text-muted); } .imp-msg { font-size: 0.85rem; color: var(--text-muted); min-height: 1.2em; margin: 6px 0; } .imp-msg.error { color: var(--red-light); } .imp-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } .imp-summary { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 12px; } .imp-summary strong { color: var(--text-primary); } .imp-table-wrap { max-height: 42vh; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .imp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .imp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .imp-table tr:last-child td { border-bottom: 0; } .imp-row-miss { opacity: 0.55; } .imp-c-status { width: 26px; text-align: center; } .imp-ok { color: #10b981; font-weight: 700; } .imp-miss { color: var(--text-dim); } .imp-c-title { max-width: 260px; } .imp-title-in { color: var(--text-primary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imp-title-match { color: var(--text-muted); font-size: 0.78rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* What a franchise row absorbed, one step quieter again than the matched name. */ .imp-title-sub { color: var(--text-muted); font-size: 0.72rem; display: block; opacity: 0.85; } .imp-c-meta { color: var(--text-muted); white-space: nowrap; } .imp-run-bar { height: 10px; background: var(--bg-deep); border-radius: 5px; overflow: hidden; margin-bottom: 12px; } .imp-run-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 5px; transition: width 0.25s ease; } .imp-pick { margin-top: 3px; max-width: 100%; width: auto; font-size: 0.78rem; padding: 2px 6px; border-radius: 6px; background: var(--bg-deep); color: var(--text-secondary); border: 1px solid var(--border-subtle); cursor: pointer; } .imp-pick:focus { outline: none; border-color: var(--accent-border); color: var(--text-primary); } /* ══ Avatar upload + privacy toggle (profile edit) ═══════════════════════ */ .avatar-drop { border: 1.5px dashed var(--border); border-radius: var(--radius-md); padding: 16px; text-align: center; cursor: pointer; background: var(--bg-deep); transition: border-color .18s ease, background .18s ease; } .avatar-drop:hover, .avatar-drop:focus-visible, .avatar-drop.is-drag { border-color: var(--accent-border); background: var(--accent-dim); outline: none; } .avatar-drop-main { display: block; font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 4px; } .avatar-drop-link { color: var(--accent-light); font-weight: 600; } .avatar-drop small { color: var(--text-muted); font-size: 0.78rem; } .pv-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-deep); } .pv-toggle-title { font-weight: 600; color: var(--text-primary); } .pv-toggle-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; max-width: 46ch; } .pv-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; } .pv-switch input { opacity: 0; width: 0; height: 0; } .pv-slider { position: absolute; inset: 0; background: var(--border); border: 1px solid var(--border); border-radius: 999px; transition: .2s; cursor: pointer; } .pv-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35); transition: .2s; } .pv-switch input:checked + .pv-slider { background: var(--accent); border-color: var(--accent); } .pv-switch input:checked + .pv-slider::before { transform: translateX(20px); } .pv-switch input:focus-visible + .pv-slider { outline: 2px solid var(--accent-light); outline-offset: 2px; } .friend-tag { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 999px; background: var(--bg-deep); border: 1px solid var(--border-subtle); color: var(--text-muted); vertical-align: middle; margin-left: 6px; } /* Private account notice (viewing someone else's private profile) */ .private-notice { text-align: center; padding: 48px 24px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); margin-bottom: 24px; } .private-notice-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bg-deep); color: var(--text-muted); margin-bottom: 14px; } .private-notice h2 { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-primary); margin: 0 0 8px; } .private-notice p { color: var(--text-muted); max-width: 44ch; margin: 0 auto; line-height: 1.6; } /* ══ Horizontal scrollers: hidden scrollbar + edge fades + arrow buttons ══ */ .dash-scroller, .detail-cast, .detail-similar, .detail-series, .detail-shots { scrollbar-width: none; -ms-overflow-style: none; } .dash-scroller::-webkit-scrollbar, .detail-cast::-webkit-scrollbar, .detail-similar::-webkit-scrollbar, .detail-series::-webkit-scrollbar, .detail-shots::-webkit-scrollbar { width: 0; height: 0; display: none; } .scroller { position: relative; } /* Edge fade removed - it read as a dark smudge over the Aurora; the arrow buttons alone signal there's more to scroll. */ .scroller::before, .scroller::after { display: none; } .scroller-arrow { position: absolute; top: 40%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); opacity: 0; transition: opacity 0.2s ease, background 0.18s ease; } .scroller-arrow:hover { background: var(--bg-card-end); } .scroller:hover .scroller-arrow { opacity: 1; } .scroller-arrow:focus-visible { opacity: 1; } .scroller-arrow-left { left: -8px; } .scroller-arrow-right { right: -8px; } .scroller.at-start .scroller-arrow-left, .scroller.at-end .scroller-arrow-right, .scroller.no-scroll .scroller-arrow { display: none; } @media (hover: none) { .scroller-arrow { display: none; } } /* touch devices just swipe */ /* Collection overview: bars on the left, pie on the right. By category on the All tab, By status inside a category. */ .overview-split { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; } .overview-bars { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 16px; } .overview-pie-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; } .overview-pie-col .pie-chart-container { width: 190px; margin: 0; } .ov-bar-row { display: flex; flex-direction: column; gap: 7px; } .ov-bar-head { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; } .ov-bar-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } .ov-bar-label { color: var(--text-secondary); font-weight: 600; } .ov-bar-count { margin-left: auto; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .ov-bar-pct { color: var(--text-muted); font-weight: 600; } .ov-bar-track { height: 9px; border-radius: var(--radius-pill); background: var(--bg-deep); overflow: hidden; border: 1px solid var(--border-subtle); } .ov-bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .overview-total { text-align: center; line-height: 1.1; } .ov-total-num { display: block; font-family: var(--font-display, inherit); font-size: 1.7rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .ov-total-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); font-weight: 600; } @media (max-width: 640px) { .overview-split { gap: 24px; justify-content: center; } .overview-pie-col { order: -1; } .overview-pie-col .pie-chart-container { width: 150px; } } #collectionOverview .stats-title { font-family: var(--font-display); font-size: 1.5rem; } /* Custom-list management buttons stay neutral (not the active category accent) */ #clNewListBtn.btn-primary, #clListFormSubmit.btn-primary { background: #475569; border-color: #475569; color: #fff; box-shadow: none; } #clNewListBtn.btn-primary:hover, #clListFormSubmit.btn-primary:hover { filter: brightness(1.14); transform: translateY(-1px); } /* Category pills on custom lists + a list-category badge */ .cl-cat-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; } .cl-cat-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cc, var(--text-dim)); } .cl-cat-badge[data-cat="movie"] { --cc: var(--cat-movie-light); color: var(--cat-movie-light); background: var(--cat-movie-dim); } .cl-cat-badge[data-cat="series"] { --cc: var(--cat-series-light); color: var(--cat-series-light); background: var(--cat-series-dim); } .cl-cat-badge[data-cat="anime"] { --cc: var(--cat-anime-light); color: var(--cat-anime-light); background: var(--cat-anime-dim); } .cl-cat-badge[data-cat="game"] { --cc: var(--cat-game-light); color: var(--cat-game-light); background: var(--cat-game-dim); } .cl-cat-badge[data-cat="mixed"] { color: var(--text-muted); background: var(--bg-deep); border-color: var(--border-subtle); } /* ══ Motion & depth: keep pages feeling alive, not flat ══════════════════════ The accent should read beyond the navbar, and content should arrive with a little life rather than snapping in. All of it is gated behind prefers-reduced-motion and stays subtle (no glows, no surface gradients). */ /* Hover response: the poster reacts to the pointer (a real affordance), so the image settles gently into frame. One effect, not a demo reel. */ .game-image { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .game-card:hover .game-image { transform: scale(1.03); } .coll-item-img, .coll-item-img img { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .coll-item:hover .coll-item-img img { transform: scale(1.05); } /* Thread the page's category accent into content, not just the top bar. */ /* (left accent bar removed per request) */ @media (prefers-reduced-motion: no-preference) { /* A grid of freshly-loaded results fades in once as a group - no per-card upward slide (rule 51). Entrance is opacity only, and slight. */ @keyframes fade-in-soft { from { opacity: 0; } to { opacity: 1; } } .games-grid { animation: fade-in-soft 0.4s ease both; } .modal-content .detail-section { animation: fade-in-soft 0.45s ease both; } } /* Reserve the navbar height before common.js mounts it, so a fast navigation doesn't flash a collapsed top and jump when the nav appears. */ #appNav:empty { display: block; min-height: 62px; } /* Profile › Your data: import, per-category export, and full backup. */ .data-tools { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-subtle); } .data-tools-h { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 12px; } .data-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .data-export { display: inline-flex; align-items: center; gap: 8px; } .data-export .filter-select { margin: 0; } .data-tools-note { margin: 12px 0 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; max-width: 66ch; } @media (max-width: 560px) { .data-tools-row { flex-direction: column; align-items: stretch; } .data-export { justify-content: space-between; } .data-export .filter-select { flex: 1; } } /* Danger zone: same data-tools rhythm, tinted red so it reads as a different kind of action from Import/Export above it rather than just more buttons. */ .danger-zone { border-top-color: var(--red-dim); } .danger-zone-h { color: var(--red-light); } .danger-zone .data-tools-note { color: var(--text-muted); } .danger-zone .data-tools-note strong { color: var(--text-secondary); } /* ══ AURORA - animated gradient-blob atmosphere ═════════════════════════════ Moving luminous light in the brand's own colours (the four media hues), used as an environmental background behind content - not inside cards. One reusable system (mountAurora injects the layer + sets intensity per page). Dark theme only; light theme keeps its clean base. See ~/.claude/skills/aurora. */ /* Blob palette per page: the active category's colour dominates (--au-1), with two harmonising brand hues. Neutral pages use the multi-media trio. */ /* ONE colour per context - all three blobs share a single hue so the background is a single-colour moving glow, never a multi-colour mix. Default/neutral pages (dashboard, library, following, profile, user profile) use plain grey. */ :root { --au-1: #64748b; --au-2: #64748b; --au-3: #64748b; --aurora-blur: 72px; } body[data-page="movies"] { --au-1: #3b82f6; --au-2: #3b82f6; --au-3: #3b82f6; } body[data-page="series"] { --au-1: #10b981; --au-2: #10b981; --au-3: #10b981; } body[data-page="anime"] { --au-1: #ec4899; --au-2: #ec4899; --au-3: #ec4899; } body[data-page="games"] { --au-1: #f59e0b; --au-2: #f59e0b; --au-3: #f59e0b; } .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; /* Screen-blend the whole layer onto the dark base so the colour reads as emitted light. (The blend must live here, not on the blobs - the layer's own stacking context would otherwise trap it.) */ mix-blend-mode: screen; --aurora-mult: 0.55; /* default = subtle (app/content pages) */ } .aurora[data-i="strong"] { --aurora-mult: 1; } .aurora[data-i="moderate"] { --aurora-mult: 0.66; } .aurora[data-i="subtle"] { --aurora-mult: 0.42; } :root[data-theme="light"] .aurora { display: none; } .aurora-blob { position: absolute; border-radius: 50%; filter: blur(var(--aurora-blur)); will-change: transform; transition: opacity 0.6s ease; } .aurora-blob-1 { width: 46vmax; height: 46vmax; top: -14%; left: -12%; background: var(--au-1); opacity: calc(0.85 * var(--aurora-mult)); animation: aurora-drift-1 23s ease-in-out infinite; } .aurora-blob-2 { width: 38vmax; height: 38vmax; top: 4%; right: -14%; background: var(--au-2); opacity: calc(0.68 * var(--aurora-mult)); animation: aurora-drift-2 31s ease-in-out infinite; } .aurora-blob-3 { width: 32vmax; height: 32vmax; bottom:-16%; left: 26%; background: var(--au-3); opacity: calc(0.55 * var(--aurora-mult)); animation: aurora-drift-3 19s ease-in-out infinite; } @keyframes aurora-drift-1 { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(24%, 14%, 0); } 50% { transform: translate3d(10%, 34%, 0); } 75% { transform: translate3d(-12%, 10%, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes aurora-drift-2 { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-18%, 20%, 0); } 50% { transform: translate3d(-6%, -14%, 0); } 75% { transform: translate3d(14%, 8%, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes aurora-drift-3 { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(16%, -18%, 0); } 50% { transform: translate3d(-14%, -6%, 0); } 75% { transform: translate3d(8%, 20%, 0); } 100% { transform: translate3d(0, 0, 0); } } /* Mobile: recompose (not a cropped desktop) - fewer/softer, lower blur, no overflow. */ @media (max-width: 640px) { .aurora { --aurora-blur: 48px; } .aurora-blob-1 { width: 78vw; height: 78vw; top: -12%; left: -18%; } .aurora-blob-2 { width: 66vw; height: 66vw; top: 30%; right: -22%; } .aurora-blob-3 { display: none; } /* two blobs is enough on a phone */ } /* Reduced motion: hold a composed, still Aurora (no drift). */ @media (prefers-reduced-motion: reduce) { .aurora-blob { animation: none !important; } } /* Phone layouts: keep desktop rules above intact. */ @media (max-width: 600px) { .container { padding: 12px; } /* Filter panel collapses to a single column on phones. */ .filter-group { grid-template-columns: 1fr; } /* Keep the brand, account and menu on one row. Secondary utilities belong inside the expanded menu, where they have room to tap. */ .navbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 8px 10px; margin-bottom: 22px; } .nav-brand { grid-area: 1 / 1; font-size: 1.1rem; } .nav-right { display: contents; } .nav-right > .nav-menu, .nav-right > .nav-cta { grid-area: 1 / 2; } .nav-toggle { grid-area: 1 / 3; width: 44px; height: 44px; } .nav-menu-trigger { min-width: 44px; min-height: 44px; justify-content: center; } .nav-cta { min-height: 44px; display: inline-flex; align-items: center; } .nav-right > .nav-icon-btn { display: none; } .navbar.is-open .nav-primary { grid-area: 2 / 1 / auto / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .navbar.is-open .nav-icon-btn { display: inline-flex; min-width: 44px; height: 44px; } .navbar.is-open #navSearchBtn { grid-area: 3 / 1; width: 100%; justify-content: flex-start; padding: 0 14px; gap: 10px; } .navbar.is-open #navSearchBtn::after { content: "Search"; font-family: var(--font-body); font-size: 0.95rem; } .navbar.is-open #navPeopleBtn { grid-area: 3 / 2; } .navbar.is-open #navThemeBtn { grid-area: 3 / 3; } .nav-menu-pop { max-width: calc(100vw - 80px); } .nav-menu-item { min-height: 44px; } /* The menu expands in document flow; allow scrolling on short screens. */ body.nav-drawer-open:not(.gsearch-open) { overflow: auto; } .page-header { margin-bottom: 20px; padding: 0 4px; } .page-header-title { font-size: 1.65rem; line-height: 1.2; } .page-header-sub { max-width: 36ch; } .search-container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 22px; } .search-container .search-bar, .search-container .search-filters { display: contents; } .search-container .search-input { grid-area: 1 / 1; width: 100%; min-width: 0; } .search-container #searchBtn { grid-area: 1 / 2; } .search-container #sortBy { grid-area: 2 / 1; width: 100%; } .search-container #filterBtn { grid-area: 2 / 2; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; } .search-input, .filter-select, .form-input { min-width: 0; max-width: 100%; font-size: 16px; } .container select.filter-select { font-size: 16px; } .cl-modal-box select, .cl-modal-box textarea, .cl-modal-box input { font-size: 16px; } .gsearch-bar input { min-width: 0; } .btn, .filter-select, .media-tab, .page-tab, .oauth-btn { min-height: 44px; } .search-filters { min-width: 0; } .filter-actions { display: flex; gap: 8px; } .filter-actions .btn { flex: 1; } .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .game-info { padding: 10px 2px; } .game-title { font-size: 0.92rem; line-height: 1.35; } .page-tabs, .media-tabs { min-width: 0; } .media-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; } .media-tabs::-webkit-scrollbar { display: none; } .media-tab { flex: 0 0 auto; white-space: nowrap; } .page-tab { min-width: 0; } .list-header, .profile-header { padding: 18px 16px; } .list-header h2 { font-size: 1.2rem; } .list-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; } .list-header-actions .search-input, .list-header-actions .filter-select { grid-column: 1 / -1; } .list-header-actions .search-input { flex: 1 1 100%; width: 100%; } .list-header-actions .filter-select { flex: 1 1 140px; } .stats-dashboard { padding: 18px 16px; } .stats-dashboard .stats-title { margin-bottom: 16px; } .overview-split { flex-wrap: nowrap; gap: 16px; align-items: center; } .overview-bars { flex: 1; min-width: 0; gap: 12px; } .overview-pie-col { flex: 0 0 80px; gap: 8px; } .overview-pie-col .pie-chart-container { width: 80px; } .ov-total-num { font-size: 1.35rem; } .ov-bar-head { gap: 6px; font-size: 0.8rem; } .my-games-list.as-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .coll-item, .my-games-list:not(.as-grid) .coll-item.list-item, .my-games-list:not(.as-grid) .coll-item.cl-list-item { padding: 14px 16px; } .my-games-list:not(.as-grid) .coll-item.list-item .coll-item-body, .my-games-list:not(.as-grid) .coll-item.cl-list-item .coll-item-body { flex-direction: column; align-items: stretch; gap: 8px; } .container .my-games-section .status-tabs, .container .cl-acc-status-tabs { flex-wrap: nowrap; padding-inline: 12px; } .coll-item-body, .coll-item-main, .coll-item-right { min-width: 0; } .coll-item-meta, .coll-item-right { flex-wrap: wrap; } .profile-content, .pf-manage { padding: 20px 16px; } .profile-avatar-section { gap: 16px; margin-bottom: 20px; } .profile-avatar { width: 88px; height: 88px; } #profileDisplay .profile-avatar-section { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; } #profileDisplay .profile-avatar { width: 72px; height: 72px; } #profileDisplay .profile-media-breakdown { grid-column: 1 / -1; } .profile-avatar-section > div { min-width: 0; max-width: 100%; } .profile-stats { gap: 4px; } .profile-stats .stat-item { padding: 8px 0; } .stat-item .stat-value { font-size: 1.5rem; } .stat-item .stat-label { font-size: 0.75rem; } .profile-details { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 18px; } .detail-item { padding: 12px 0; } .detail-item label { margin-bottom: 5px; } .detail-value { font-size: 1rem; overflow-wrap: anywhere; } .profile-actions { flex-wrap: wrap; gap: 8px; } .profile-actions .btn { flex: 1 1 120px; padding-inline: 10px; white-space: normal; } .edit-avatar-section { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; } .edit-avatar-section .profile-avatar { align-self: center; } .avatar-input-group { min-width: 0; } .friend-name, .friend-username { overflow-wrap: anywhere; } .data-export { min-width: 0; } .data-export .filter-select { min-width: 0; } .modal, .update-modal, .remove-modal, .cl-modal-overlay, .cl-game-modal-overlay { padding: 10px; } .modal-content, .update-modal-content, .remove-modal-content, .cl-modal-box, .cl-game-modal-box { width: 100%; max-width: 100%; max-height: calc(100dvh - 20px); border-radius: 16px; overflow-y: auto; overscroll-behavior: contain; } .update-modal-content, .remove-modal-content { padding: 22px 16px; } .score-input-container { flex-wrap: wrap; } .score-input-container .score-input { min-width: 0; } .score-input-container .score-controls { flex-direction: row; gap: 6px; } .score-input-container .score-btn { width: 44px; height: 44px; } .score-input-container .score-clear-btn { flex: 1 1 100%; } .cl-modal-box { padding: 22px 16px; } .cl-modal-box h3 { padding-right: 44px; } .close-btn, .cl-modal-close, .cl-game-modal-close-btn { width: 44px; height: 44px; } .cl-modal-close { top: 10px; right: 10px; } .game-detail-body { padding: 0 16px 20px; } .game-detail-title-row { flex-direction: row; align-items: flex-end; gap: 12px; } .game-detail-title { font-size: 1.2rem; overflow-wrap: anywhere; } .game-detail-cover { width: 72px; height: 96px; } .game-detail-info-label { min-width: 72px; } .game-detail-info-value { min-width: 0; overflow-wrap: anywhere; } .cl-modal-actions { flex-wrap: wrap; gap: 8px; } .cl-modal-actions .btn { flex: 1; } .gsearch, .imp-overlay { padding: 12px; } .gsearch-box, .imp-box { max-height: calc(100dvh - 24px); } .dash-upnext { grid-template-columns: minmax(0, 1fr); } .dash-hero-sub { line-height: 1.55; font-size: 0.95rem; } .dash-hero-cta { gap: 10px; } .dash-hero-cta .btn { flex: 1 1 100%; } .site-footer { margin-top: 36px; padding-top: 28px; } .footer-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .footer-brand { grid-column: 1 / -1; } .footer-brand p { max-width: 38ch; } .footer-col { min-width: 0; } .footer-col ul { gap: 0; } .footer-col ul li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); } .footer-bottom-links { flex-wrap: wrap; gap: 4px 16px; } .footer-bottom-links a { display: inline-flex; align-items: center; min-height: 44px; } .footer-igdb { align-items: flex-start; } .footer-igdb-text { min-width: 0; overflow-wrap: anywhere; } .toast-host { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: none; } } /* ══ Personal profiles ══════════════════════════════════════════════════════ Currently into, Top 10 of all time, Similar Taste, and people who match. These sections sit directly on the page rather than each getting a panel of its own: the profile already lives inside .profile-section, and wrapping every block again would stack borders three deep. Separation comes from spacing and one hairline rule, so the poster art stays the loudest thing on the page. Every profile picks one of the four category colors as its accent, exposed here as --pf-accent. Nothing invents a new hue. */ .profile-section[data-accent] { --pf-accent: var(--cat-movie); --pf-accent-dim: var(--cat-movie-dim); } .profile-section[data-accent="movie"] { --pf-accent: var(--cat-movie); --pf-accent-dim: var(--cat-movie-dim); } .profile-section[data-accent="series"] { --pf-accent: var(--cat-series); --pf-accent-dim: var(--cat-series-dim); } .profile-section[data-accent="anime"] { --pf-accent: var(--cat-anime); --pf-accent-dim: var(--cat-anime-dim); } .profile-section[data-accent="game"] { --pf-accent: var(--cat-game); --pf-accent-dim: var(--cat-game-dim); } /* "Currently into" viewed on the All tab isn't any one category, so it takes no data-accent attribute at all - without this it would fall through every var(--pf-accent, var(--cat-movie)) fallback straight to blue. */ .profile-section:not([data-accent]) { --pf-accent: var(--accent-light); --pf-accent-dim: var(--accent-dim); } /* ── Header art ─────────────────────────────────────────────────────────── A band of the profile's own posters, heavily scrimmed so it reads as texture behind the name rather than as a picture competing with it. Short on purpose: this is a header, not a hero. */ .pf-banner { position: relative; height: 104px; margin: calc(var(--radius-lg) * -1) calc(var(--radius-lg) * -1) 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(180deg, var(--pf-accent-dim, var(--cat-movie-dim)), transparent); overflow: hidden; } .pf-banner.has-art { display: flex; gap: 2px; } .pf-banner.has-art img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; opacity: 0.5; } .pf-banner.has-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 18, 0.35) 0%, rgba(10, 12, 18, 0.82) 72%, var(--bg-card) 100%); } /* ── Bio ──────────────────────────────────────────────────────────────────── */ .pf-bio { margin: 0; max-width: 62ch; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; white-space: pre-line; } /* ── Similar taste read-out ─────────────────────────────────────────────── Baseline-aligned figure and label, not a badge. The number carries it. */ .pf-similar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .pf-similar-pct { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--pf-accent, var(--cat-movie)); letter-spacing: -0.02em; } .pf-similar-label { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); } .pf-similar-none { font-size: 1rem; font-weight: 600; color: var(--text-muted); } .pf-similar-note { flex-basis: 100%; font-size: 0.8rem; color: var(--text-dim); } /* ── Section scaffolding ──────────────────────────────────────────────────── */ .pf-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-subtle); } .pf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .pf-section-title { margin: 0 0 14px; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .pf-section-head .pf-section-title { margin-bottom: 0; } .pf-chiprow { display: flex; gap: 6px; flex-wrap: wrap; } .pf-chip { padding: 5px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .pf-chip:hover { color: var(--text-secondary); border-color: var(--border); } .pf-chip.active { color: var(--pf-accent, var(--cat-movie)); border-color: currentColor; } .pf-chip:focus-visible { outline: 2px solid var(--pf-accent, var(--cat-movie)); outline-offset: 2px; } /* ── Currently into ─────────────────────────────────────────────────────── A row of small landscape stills with the verb above the title, so the section reads as sentences ("Watching Severance") rather than as another poster grid. Each item carries its own category color on the left edge. */ .pf-current { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; } .pf-current-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-left: 3px solid var(--cat-movie); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.025); text-decoration: none; transition: background 0.15s; } .pf-current-item:hover { background: rgba(255, 255, 255, 0.055); } .pf-current-item[data-cat="movie"] { border-left-color: var(--cat-movie); } .pf-current-item[data-cat="series"] { border-left-color: var(--cat-series); } .pf-current-item[data-cat="anime"] { border-left-color: var(--cat-anime); } .pf-current-item[data-cat="game"] { border-left-color: var(--cat-game); } .pf-current-item img { width: 44px; height: 62px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-sm); } .pf-current-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pf-current-verb { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .pf-current-name { font-weight: 600; color: var(--text-primary); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-current-prog { font-size: 0.78rem; color: var(--text-muted); } /* ── Top 10 ─────────────────────────────────────────────────────────────── Posters in rank order with the number set over the corner. It scrolls sideways instead of wrapping, because a ranked list that wraps to a second row stops reading as a ranking. */ .pf-top { display: flex; gap: 12px; margin: 0; /* Room for the rank numerals, which sit outside each poster. Without the left and top padding the scroll container clips the 1. */ padding: 4px 0 12px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .pf-top-item { flex: 0 0 118px; scroll-snap-align: start; } .pf-top-item a { display: block; text-decoration: none; position: relative; } .pf-top-item img { width: 118px; height: 172px; object-fit: cover; border-radius: var(--radius-md); display: block; background: var(--bg-deep); } /* The numeral sits inside the poster corner rather than hanging off it: the row is a horizontal scroll container, so anything outside the item box gets clipped at whichever edge the list is scrolled to. */ .pf-top-rank { position: absolute; top: 2px; left: 6px; z-index: 2; font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--bg-base); -webkit-text-stroke: 2px var(--pf-accent, var(--cat-movie)); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); } .pf-top[data-cat="movie"] { --pf-accent: var(--cat-movie); } .pf-top[data-cat="series"] { --pf-accent: var(--cat-series); } .pf-top[data-cat="anime"] { --pf-accent: var(--cat-anime); } .pf-top[data-cat="game"] { --pf-accent: var(--cat-game); } .pf-top-name { display: block; margin-top: 7px; font-size: 0.82rem; line-height: 1.35; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pf-top-item a:hover .pf-top-name { color: var(--text-primary); } .pf-top-item a:focus-visible { outline: 2px solid var(--pf-accent, var(--cat-movie)); outline-offset: 3px; border-radius: var(--radius-md); } /* ── People with similar taste ────────────────────────────────────────────── */ .pf-people { display: grid; /* Wide enough that an ordinary display name is not truncated to initials. */ grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; } .pf-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.15s; } .pf-person:hover { background: rgba(255, 255, 255, 0.05); } .pf-person img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .pf-person-name { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-person-pct { font-size: 0.85rem; font-weight: 700; color: var(--pf-accent, var(--cat-movie)); font-variant-numeric: tabular-nums; } /* ── Editing your own profile ─────────────────────────────────────────────── */ /* .profile-section is only the card chrome on this page; the padding comes from .profile-content. These sections are not built from that wrapper, so they take the same inset here instead of sitting flush against the card edge. */ .pf-manage { padding: 35px; } /* Unlike Edit Profile and Change Password, these act on the list directly above them, so they line up with it rather than being centred under it. */ .pf-manage .profile-actions { justify-content: flex-start; align-items: center; } .pf-swatches { display: flex; gap: 8px; flex-wrap: wrap; } .pf-swatch { width: 34px; height: 34px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; background-clip: content-box; box-shadow: inset 0 0 0 2px var(--bg-card); } .pf-swatch[data-cat="movie"] { background-color: var(--cat-movie); } .pf-swatch[data-cat="series"] { background-color: var(--cat-series); } .pf-swatch[data-cat="anime"] { background-color: var(--cat-anime); } .pf-swatch[data-cat="game"] { background-color: var(--cat-game); } .pf-swatch[aria-pressed="true"] { border-color: var(--text-primary); } .pf-swatch:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; } /* The editor reuses the poster row above, plus controls that only exist here. */ /* Section head: chips + Edit/Done sit together on the right. */ .pf-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* Read-only display strip - the same poster scroller as the home rows. */ .pf-showcase .dash-scroller { grid-auto-columns: 130px; } .pf-showcase .dash-card-poster { width: 130px; } @media (max-width: 640px) { .pf-showcase .dash-scroller { grid-auto-columns: 108px; } .pf-showcase .dash-card-poster { width: 108px; } } .pf-edit-top { display: flex; flex-direction: column; gap: 10px; } .pf-edit-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); } .pf-edit-row[draggable="true"] { cursor: grab; } .pf-edit-row.pf-dragging { opacity: 0.4; } .pf-edit-row.pf-drop-target { border-color: var(--pf-accent, var(--accent-light)); background: var(--pf-accent-dim, var(--accent-dim)); } .pf-drag-handle { color: var(--text-dim); font-size: 0.95rem; line-height: 1; letter-spacing: -2px; padding: 0 2px; user-select: none; } .pf-edit-row img { width: 34px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .pf-edit-pos { width: 1.6em; font-family: var(--font-display); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; } .pf-edit-name { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-edit-actions { display: flex; gap: 4px; } .pf-icon-btn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 0.85rem; line-height: 1; cursor: pointer; } .pf-icon-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border); } .pf-icon-btn:disabled { opacity: 0.35; cursor: default; } .pf-icon-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; } .pf-hint { font-size: 0.82rem; color: var(--text-dim); margin: 0; } .pf-empty { font-size: 0.88rem; color: var(--text-muted); margin: 0; } .pf-picker-results { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; } .pf-picker-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .pf-picker-row:hover { background: rgba(255, 255, 255, 0.05); } .pf-picker-row img { width: 32px; height: 46px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .pf-picker-row[aria-disabled="true"] { opacity: 0.45; cursor: default; } @media (max-width: 640px) { .pf-banner { height: 76px; } .pf-current { grid-template-columns: 1fr; } .pf-top-item { flex-basis: 96px; } .pf-top-item img { width: 96px; height: 140px; } .pf-top-rank { font-size: 1.7rem; } .pf-people { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .pf-current-item, .pf-person, .pf-chip { transition: none; } } /* ── Compare profiles ───────────────────────────────────────────────────── Rows, not cards. Every entry here is a title plus two numbers, which a list states more clearly than a grid of panels would. */ .pf-similar-more { font-size: 0.82rem; font-weight: 600; padding: 0; color: var(--text-muted); } .pf-similar-more:hover { color: var(--pf-accent, var(--cat-movie)); } .pf-cmp-cats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .pf-cmp-cat { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; } .pf-cmp-cat-name { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); } .pf-cmp-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .pf-cmp-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--cat-movie); } .pf-cmp-cat[data-cat="movie"] .pf-cmp-bar > span { background: var(--cat-movie); } .pf-cmp-cat[data-cat="series"] .pf-cmp-bar > span { background: var(--cat-series); } .pf-cmp-cat[data-cat="anime"] .pf-cmp-bar > span { background: var(--cat-anime); } .pf-cmp-cat[data-cat="game"] .pf-cmp-bar > span { background: var(--cat-game); } .pf-cmp-pct { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; } .pf-cmp-nodata { font-size: 0.78rem; color: var(--text-dim); min-width: 3.2em; text-align: right; } .pf-cmp-counts { margin: 0 0 18px; } .pf-cmp-h { margin: 20px 0 8px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--text-secondary); } .pf-cmp-list { display: flex; flex-direction: column; gap: 2px; } .pf-cmp-row { display: flex; align-items: center; gap: 11px; padding: 6px 10px 6px 6px; border-left: 3px solid transparent; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.15s; } .pf-cmp-row:hover { background: rgba(255, 255, 255, 0.05); } .pf-cmp-row[data-cat="movie"] { border-left-color: var(--cat-movie); } .pf-cmp-row[data-cat="series"] { border-left-color: var(--cat-series); } .pf-cmp-row[data-cat="anime"] { border-left-color: var(--cat-anime); } .pf-cmp-row[data-cat="game"] { border-left-color: var(--cat-game); } .pf-cmp-row img { width: 30px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .pf-cmp-name { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-cmp-scores, .pf-cmp-ranks { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; font-size: 0.9rem; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; } .pf-cmp-ranks { font-size: 0.82rem; color: var(--text-muted); } .pf-cmp-vs { font-size: 0.7rem; font-weight: 500; color: var(--text-dim); } /* Only a real gap is coloured; agreement needs no emphasis to be readable. */ .pf-cmp-scores.is-apart .pf-cmp-you { color: var(--cat-series-light); } .pf-cmp-scores.is-apart .pf-cmp-them { color: var(--red-light); } @media (max-width: 640px) { .pf-cmp-cat { grid-template-columns: 60px 1fr auto; gap: 8px; } .pf-cmp-row img { width: 26px; height: 38px; } } @media (prefers-reduced-motion: reduce) { .pf-cmp-row { transition: none; } } /* ══ Season ratings ═════════════════════════════════════════════════════════ A disclosure inside the collection row. .coll-item is a flex row, so the panel wraps onto its own line rather than being nested in a new wrapper, which keeps the row's own layout and its dividing border untouched. */ .coll-item { flex-wrap: wrap; } .coll-seasons-btn { padding: 2px 9px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-family: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .coll-seasons-btn:hover { color: var(--text-primary); border-color: var(--border); } .coll-seasons-btn[aria-expanded="true"] { color: var(--cat-series-light); border-color: currentColor; } .coll-seasons-btn:focus-visible { outline: 2px solid var(--cat-series); outline-offset: 2px; } .coll-seasons { flex: 1 0 100%; width: 100%; min-width: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); cursor: default; } .coll-season-note { margin: 0 0 10px; font-size: 0.8rem; color: var(--text-dim); } .coll-season-note strong { color: var(--cat-series-light); } .coll-season-empty { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .coll-season { display: grid; /* minmax(0, ...) on every flexible track: a plain 1fr floors at min-content, so a long season name refuses to shrink and shoves the two selects past the edge of the row instead of ellipsing. */ grid-template-columns: 1.6em minmax(0, 1fr) minmax(0, 150px) minmax(0, 120px); align-items: center; gap: 10px; padding: 5px 0; } .coll-season-num { font-family: var(--font-display); font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; } .coll-season-main { min-width: 0; display: flex; align-items: baseline; gap: 8px; } .coll-season-name { font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .coll-season-eps { font-size: 0.75rem; color: var(--text-dim); flex-shrink: 0; } /* Fill the grid track and be allowed to shrink with it. Without min-width: 0 a select keeps its own intrinsic width and spills out of the cell. */ .coll-season .filter-select { padding: 5px 8px; font-size: 0.82rem; width: 100%; min-width: 0; } @media (max-width: 640px) { .coll-season { grid-template-columns: 1.4em 1fr; row-gap: 6px; } .coll-season .filter-select { grid-column: span 1; } } @media (prefers-reduced-motion: reduce) { .coll-seasons-btn { transition: none; } } /* ── Secondary sources on a detail view ─────────────────────────────────────── Price, MyAnimeList score, opening/ending themes and episode dates. These sit inside the existing .detail-section / .detail-h rhythm and borrow the .detail-prov-row label/value pattern used by "Where to watch", so nothing here introduces a second visual language. No new colours, radii or fonts. */ /* The source credit under each block. Deliberately quiet: it is provenance, not content, and TVmaze's licence requires the attribution be present. */ .detail-src { margin: 10px 0 0; font-size: 0.76rem; /* --text-dim would sit at ~4.5:1 here: AA, but too tight for 12px. */ color: var(--text-muted); } .detail-src a { color: var(--text-secondary); text-decoration: none; } .detail-src a:hover, .detail-src a:focus-visible { color: var(--text-secondary); text-decoration: underline; } /* Price: a line of text, not a card. The figure is the point, so it carries the weight and the "was" sits beside it as secondary information. */ .detail-deal { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; } .detail-deal-price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); text-decoration: none; } a.detail-deal-price:hover, a.detail-deal-price:focus-visible { color: var(--green-light); text-decoration: underline; } .detail-deal-was { font-size: 0.82rem; font-weight: 600; color: var(--green-light); } /* Reuses .detail-prov-row from "Where to watch"; these only add the value side, which that block did not need. */ .detail-prov-value { font-size: 0.88rem; color: var(--text-secondary); min-width: 0; } .detail-prov-value strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-primary); } .detail-prov-note { color: var(--text-muted); font-size: 0.78rem; } /* Openings and endings: an ordered list, because they genuinely are ordered. The label column is fixed so the titles line up down the list. */ .detail-themes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .detail-theme { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; gap: 4px 12px; } .detail-theme-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cat-anime-light, var(--text-muted)); } .detail-theme-title { font-size: 0.9rem; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; } .detail-theme-artist { grid-column: 2; font-size: 0.78rem; color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; } /* Episode dates. Same label/body split as the theme list so the two read as one family, with the date allowed to wrap under the title on narrow screens. */ .detail-ep { margin: 0 0 8px; display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: baseline; gap: 4px 12px; } .detail-ep:last-of-type { margin-bottom: 0; } .detail-ep-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .detail-ep-body { font-size: 0.9rem; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; } .detail-ep-when { display: block; font-size: 0.78rem; color: var(--text-muted); } .detail-ep-note { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-muted); } @media (max-width: 480px) { /* Stack the label above its value: two narrow columns squeeze long song titles and episode names into single-word ribbons otherwise. */ .detail-theme, .detail-ep { grid-template-columns: minmax(0, 1fr); gap: 2px; } .detail-theme-artist { grid-column: 1; } } /* ── Quick add ──────────────────────────────────────────────────────────────── The plus on a browse card, and the small panel it opens. Both reuse the existing card, button and select language - the panel is a surface like any other popover in the app, not a new visual idea. */ .card-quick-add { position: absolute; left: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent-border); background: rgba(10, 12, 18, 0.78); color: var(--accent-light); font-size: 1.2rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; /* Hidden until the card is touched or focused on pointer devices, so the grid stays about the artwork. Always shown on touch, where there is no hover to reveal it. */ opacity: 0; transform: scale(0.9); transition: opacity 0.15s ease, transform 0.15s ease, background 0.2s ease; padding: 0; } .game-card:hover .card-quick-add, .game-card:focus-within .card-quick-add, .card-quick-add:focus-visible, .card-quick-add.is-owned { opacity: 1; transform: scale(1); } .card-quick-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .card-quick-add.is-owned { background: var(--accent); border-color: var(--accent); color: #fff; } body[data-page="games"] .card-quick-add:hover, body[data-page="games"] .card-quick-add.is-owned { color: var(--cat-game-ink); } @media (hover: none) { .card-quick-add { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .card-quick-add { transition: opacity 0.15s ease; transform: none; } .game-card:hover .card-quick-add { transform: none; } } .quick-add-panel { position: absolute; z-index: 1200; width: 260px; max-width: calc(100vw - 24px); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); padding: 14px; } .qa-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .qa-title { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; /* Two lines then ellipsis: long titles must not push the controls off. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qa-close { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; min-width: 28px; min-height: 28px; } .qa-close:hover { color: var(--text-primary); } .qa-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .qa-row label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); width: 54px; flex-shrink: 0; } .qa-row .filter-select { flex: 1; margin: 0; min-width: 0; } .qa-row .score-input { width: 68px; margin: 0; } .qa-score-hint { font-size: 0.78rem; color: var(--text-muted); } /* Score row breaks the label/control pairing: the meter spans the full panel width with its label sitting above it. */ .qa-row-score { flex-direction: column; align-items: stretch; gap: 8px; } .qa-row-score > label { width: auto; } .qa-row-score .score-meter-value { font-size: 1.4rem; } .qa-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .qa-actions .btn { width: 100%; } .qa-actions .qa-remove { background: transparent; border: 1px solid var(--red); color: var(--red-light); } .qa-actions .qa-remove:hover { background: var(--red-dim); } .qa-actions .qa-remove .btn-spinner { border-color: rgba(239, 68, 68, 0.3); border-top-color: var(--red-light); } .qa-msg { margin: 8px 0 0; font-size: 0.78rem; min-height: 0; } .qa-msg.is-error { color: var(--red-light); } .qa-msg.is-ok { color: var(--green-light); } /* On a phone it stops trying to sit beside a card and becomes a sheet, which is reachable with a thumb and never clipped by the viewport edge. */ @media (max-width: 560px) { .quick-add-panel { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-width: none; } } /* ── Title page ─────────────────────────────────────────────────────────────── The detail view used to be a modal. As a page it keeps exactly the same section styles, so nothing about it looks new - it just has room to breathe and an address of its own. */ .title-page { margin-bottom: 40px; } .title-page .game-detail-body { padding: 0; } /* No banner on the title page any more, so the cover + title sit at the top of the card instead of being pulled up over an image. */ .title-page .game-detail-title-row { margin-top: 0; } /* ── Poster-anchored hero ────────────────────────────────────────────────── The poster is the page's anchor, so it gets real size and sits in its own left rail spanning both right-hand rows: title/meta on top, facts + synopsis filling the column beneath. This is how a media title reads on the products people already use (a poster you recognise, everything else arranged around it) rather than a thumbnail wedged beside a heading. */ .title-hero { display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-areas: "poster head" "poster detail"; column-gap: 32px; row-gap: 14px; align-items: start; margin-bottom: 26px; } .title-hero-poster { grid-area: poster; align-self: start; width: 208px; height: 312px; /* 2:3 frame; games covers (3:4) letterbox in it */ border-radius: 12px; } .title-hero-head { grid-area: head; min-width: 0; } .title-hero-detail { grid-area: detail; min-width: 0; } /* The synopsis and info grid already carry their own bottom margins; the last one shouldn't push extra space before the library panel. */ .title-hero-detail > :last-child { margin-bottom: 0; } .title-hero-head .game-detail-genres { margin-bottom: 0; } /* Phone: the poster tucks beside the title (kept recognisable, not shrunk to an icon) and the details drop to a full-width column under both. */ @media (max-width: 719px) { .title-hero { grid-template-columns: 116px minmax(0, 1fr); grid-template-areas: "poster head" "detail detail"; column-gap: 16px; row-gap: 16px; } .title-hero-poster { width: 116px; height: 174px; } } .title-page .game-detail-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; color: var(--text-primary); } /* Credits in the info grid lead to the person page, so they read as links rather than plain text - in the page's own accent, never a stock blue. */ .detail-credit-link { color: var(--accent-light); text-decoration: none; border-bottom: 1px solid transparent; } .detail-credit-link:hover, .detail-credit-link:focus-visible { color: var(--text-primary); border-bottom-color: currentColor; } /* The library panel is the one thing on this page you act on, so it sits above the supporting material and is the only block with its own surface. */ .title-page .add-to-list { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 20px; margin: 26px 0; } .title-page .add-to-list h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; color: var(--text-primary); } .atl-list-row { margin-bottom: 12px; } .atl-score-row { margin-bottom: 14px; } .atl-list-row label, .atl-score-row > label, .title-page .atl-field label, .title-page .atl-note label { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .atl-list-row .filter-select { width: 100%; margin: 0; } .title-page .atl-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; } .title-page .atl-controls .filter-select { width: 100%; margin: 0; } .title-page .atl-note { margin-top: 14px; } .atl-msg { display: none; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.82rem; font-weight: 600; } .atl-msg:empty { display: none; } .atl-msg.is-shown { display: flex; animation: msg-pop-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; } .atl-msg-icon { display: inline-flex; flex-shrink: 0; } @keyframes msg-pop-in { from { opacity: 0; transform: translateY(-3px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .atl-msg.is-shown { animation: none; } } @media (max-width: 640px) { .title-page .atl-controls { grid-template-columns: minmax(0, 1fr); } .title-page .atl-controls .btn { width: 100%; } } /* Series and similar strips are links now rather than buttons, so they need the anchor reset the button versions never did. */ a.detail-series-item, a.detail-similar-card, a.detail-cast-card { text-decoration: none; color: inherit; } /* Product polish: retain the category palette and existing page structure, with quiet surfaces, legible controls and the same rhythm at every width. */ html { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } button, input, select, textarea { font-family: inherit; } a { color: var(--accent-light); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; } .navbar { border-color: var(--border-subtle); border-radius: var(--radius-lg); box-shadow: none; } .nav-icon-btn, .nav-menu-trigger { min-width: 44px; min-height: 44px; } .nav-tab, .nav-link, .nav-cta { min-height: 44px; align-content: center; } .nav-tab.active::before { box-shadow: none; } .nav-menu-pop { max-width: min(320px, calc(100vw - 32px)); } .btn { transition: background-color .15s, border-color .15s, color .15s, opacity .15s; } .btn-primary, .btn-danger, .btn-success, .btn-warning { box-shadow: none; } .search-container .btn-primary, .search-bar .btn-primary { box-shadow: none; } .btn-primary, .nav-cta, .search-container .btn-primary, .search-bar .btn-primary, .pagination #nextPageBtn { background: color-mix(in srgb, var(--accent) 72%, #000); } body[data-page="games"] .btn-primary, body[data-page="games"] .nav-cta, body[data-page="games"] .pagination #nextPageBtn { background: var(--cat-game); color: var(--cat-game-ink); } .btn-success { background: #047857; } .modal, .update-modal, .remove-modal, .close-btn, .cl-modal-overlay, .cl-game-modal-overlay, .cl-game-modal-close-btn { backdrop-filter: none; } .btn:hover:not(:disabled) { transform: none; box-shadow: none; } .btn:not([class*="btn-"]) { background: var(--bg-deep); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .form-input::placeholder, .form-textarea::placeholder, .form-group input::placeholder { color: var(--text-muted); } .page-header { text-align: left; margin: 4px 0 24px; } .page-header-sub { margin: 8px 0 0; } .page-header-title { font-size: clamp(1.6rem, 3vw, 2rem); } .search-container { margin-bottom: 16px; } .filter-section { border-color: var(--border-subtle); box-shadow: none; margin-bottom: 16px; } .browse-filter-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .browse-filter-field > span { font-size: .8rem; font-weight: 600; color: var(--text-muted); } .browse-filter-field .filter-select { width: 100%; margin: 0; min-width: 0; } #filterBtn[aria-expanded="true"] { border-color: var(--accent-light); color: var(--accent-light); background: var(--accent-dim); } .browse-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; min-height: 28px; } .browse-result-count { color: var(--text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; } .browse-result-count:empty { display: none; } .browse-tokens { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .browse-token { min-height: 44px; padding: 8px 12px; border: 1px solid var(--accent-border); border-radius: var(--radius-sm); background: var(--accent-dim); color: var(--text-primary); cursor: pointer; font-size: .8rem; overflow-wrap: anywhere; text-align: left; } .browse-token:hover { border-color: var(--accent-light); } .browse-clear { margin-left: auto; font-size: .85rem; } .query-state-notice { flex-basis: 100%; grid-column: 1 / -1; color: var(--text-muted); font-size: .85rem; line-height: 1.5; } .game-card { position: relative; min-width: 0; } .game-title-link { text-decoration: none; } .game-title-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-md); } .game-title-link:focus-visible { outline: none; } .game-title-link:focus-visible::after { outline: 2px solid var(--accent-light); outline-offset: 4px; } .game-card:hover .game-image-wrapper { transform: none; box-shadow: none; } .game-image-wrapper { aspect-ratio: 2 / 3; border-radius: var(--radius-md); box-shadow: none; transition: border-color .15s; } body[data-page="games"] .game-image { object-fit: contain; object-position: center; } .game-title { min-height: 2.7em; margin-bottom: 0; overflow-wrap: anywhere; } .game-info { padding: 10px 0 0; gap: 5px; } .card-quick-add { z-index: 2; width: 44px; height: 44px; border-radius: var(--radius-md); background: #101722; color: #e2e8f0; } .card-rating { background: #101722; color: #e2e8f0; border-color: #475569; font-variant-numeric: tabular-nums; } .rating-scale { opacity: .75; font-size: .7rem; margin-left: 2px; } .skel-poster { aspect-ratio: 2 / 3; border-radius: var(--radius-md); } .skeleton-card { background: none; border: 0; box-shadow: none; } .empty-state { grid-column: 1 / -1; padding: 40px 20px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg-deep); } .empty-state h2 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 8px; } .empty-state p { max-width: 52ch; margin: 0 auto 20px; font-size: .95rem; line-height: 1.6; color: var(--text-muted); } .pagination .btn { width: auto; min-width: 100px; border-radius: var(--radius-md); font-size: .9rem; padding: 10px 16px; gap: 8px; } .pagination .btn::before { content: none !important; } .gsearch-box { max-height: min(760px, 85dvh); } .gsearch-bar input { min-width: 0; } .gsearch-esc { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .gsearch-status { padding: 12px 18px; color: var(--text-muted); font-size: .85rem; line-height: 1.5; } .gsearch-status:empty { display: none; } .gsearch-results { overscroll-behavior: contain; } .quick-add-panel { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; } .quick-add-backdrop { display: none; } @media (max-width: 560px) { .quick-add-backdrop { display: block; position: fixed; inset: 0; z-index: 209; background: var(--bg-overlay); } .quick-add-panel { z-index: 210; } body.qa-sheet-open { overflow: hidden; } } .qa-close { min-width: 44px; min-height: 44px; } .score-slider { min-height: 44px; padding-block: 19px; } .score-meter-clear { min-height: 44px; min-width: 44px; border-radius: var(--radius-md); } .title-page .add-to-list { border-radius: var(--radius-lg); } .title-hero-poster { border-radius: var(--radius-md); } .title-hero-head, .game-detail-title, .person-name, .person-fact dd { overflow-wrap: anywhere; } .detail-info-grid { min-width: 0; } .media-tab, .status-tab, .pf-chip { min-height: 44px; } .media-tab { border-radius: var(--radius-md); } .overview-toggle { display: none; } .media-tab[data-media="all"]::before { background: var(--text-muted); } .profile-header, .profile-content, .cl-overview-header, .list-header { min-width: 0; } .profile-header h2, .list-header h2, .cl-overview-header h2, .cl-card h3, .cl-default-info, .activity-text { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .coll-empty-state { padding: 36px 20px; } .coll-item-img { aspect-ratio: 2 / 3; object-fit: cover; } .dash-row-link, .person-back { min-height: 44px; display: inline-flex; align-items: center; } .dash-card-poster { border-radius: var(--radius-md); } @media (min-width: 720px) { .title-page .add-to-list:has(.atl-score-row) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; } .title-page .add-to-list > h2, .title-page .atl-owned-note, .title-page .atl-note, .title-page .atl-msg { grid-column: 1 / -1; margin: 0; } .title-page .atl-list-row { grid-column: 1; margin: 0; } .title-page .atl-score-row { grid-column: 2; grid-row: span 2; margin: 0; } .title-page .atl-controls { grid-column: 1; } .profile-content { padding: 28px; } .profile-avatar { width: 112px; height: 112px; } .profile-avatar-section { margin-bottom: 24px; } } @media (max-width: 900px) { .navbar { grid-template-columns: minmax(0, 1fr) auto; } .nav-primary { grid-column: 1 / -1; grid-row: 2; } } @media (max-width: 600px) { .navbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto 44px; padding: 8px; gap: 4px; margin-bottom: 20px; } .nav-brand { grid-area: 1 / 1; font-size: 1.05rem; } .nav-right { display: contents; } .nav-right > .nav-menu, .nav-right > .nav-cta { grid-area: 1 / 3; } .nav-cta { padding-inline: 10px; font-size: .8rem; } .nav-toggle { grid-area: 1 / 4; } .navbar .nav-right > #navSearchBtn { display: inline-flex; grid-area: 1 / 2; width: 44px; height: 44px; padding: 0; justify-content: center; } .navbar #navSearchBtn::after { content: none; } .navbar .nav-primary, .navbar.is-open .nav-primary { display: grid; grid-area: 2 / 1 / auto / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; width: 100%; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--border-subtle); } .navbar .nav-tab { width: 100%; justify-content: center; padding: 8px 2px; font-size: .82rem; gap: 5px; } .navbar.is-open #navPeopleBtn { grid-area: 3 / 1 / auto / 3; width: 100%; gap: 8px; } .navbar.is-open #navPeopleBtn::after { content: 'People'; font-size: .85rem; } .navbar.is-open #navThemeBtn { grid-area: 3 / 3 / auto / 5; width: 100%; gap: 8px; } .navbar.is-open #navThemeBtn::after { content: 'Theme'; font-size: .85rem; } .page-header { padding: 0; margin-bottom: 18px; } .page-header-sub { max-width: none; line-height: 1.5; } .search-container { margin-bottom: 12px; } .filter-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } .browse-filter-field .filter-select { padding-left: 10px; } .browse-summary { margin-bottom: 16px; gap: 6px 10px; } .browse-tokens:not(:empty) { order: 2; width: 100%; } .games-grid { gap: 22px 12px; } .game-info { padding: 9px 0 0; } .card-quick-add { opacity: 1; transform: none; } .gsearch { padding: 8px; } .gsearch-box { max-height: calc(100dvh - 16px); } .gsearch-bar { padding: 10px; gap: 8px; } .gsearch-bar > svg { display: none; } .gsearch-esc { display: inline-flex; } .gsearch-status { padding: 10px 12px; } .quick-add-panel { bottom: max(12px, env(safe-area-inset-bottom)); } .media-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; gap: 6px; } .media-tab { grid-column: span 2; min-width: 0; justify-content: center; padding-inline: 4px; gap: 4px; } .media-tab:nth-last-child(2) { grid-column: 2 / span 2; } .media-tab:last-child { grid-column: 4 / span 2; } .media-tab .mt-count { padding-inline: 3px; } #collectionOverview { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 20px; } #collectionOverview .stats-title { font-size: 1rem; margin: 0; } .overview-toggle { display: inline-flex; padding-inline: 10px; font-size: .8rem; } #collectionOverview .overview-split { flex-basis: 100%; } #collectionOverview.is-collapsed .overview-split { display: none; } .container .my-games-section .status-tabs, .container .cl-acc-status-tabs { flex-wrap: wrap; padding: 6px; gap: 2px; } .container .status-tab { flex: 1 1 30%; padding: 8px 6px; font-size: .8rem; min-height: 44px; border-radius: var(--radius-sm); margin: 0; } .title-page .add-to-list { padding: 16px; } .title-hero { column-gap: 14px; } .title-hero-head .game-detail-title { font-size: 1.5rem; } .title-page .game-detail-desc .desc-short { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .profile-actions .btn { white-space: normal; } } .private-notice, .pf-bio, .cl-acc-desc, .game-detail-info-value { overflow-wrap: anywhere; } @media (max-width: 360px) { .navbar { grid-template-columns: minmax(0, 1fr) 40px auto 40px; padding-inline: 6px; gap: 2px; } .nav-brand { font-size: .93rem; } .nav-cta { padding-inline: 7px; } .navbar .nav-right > #navSearchBtn, .nav-toggle { width: 40px; min-width: 40px; } .title-hero { grid-template-columns: 96px minmax(0, 1fr); } .title-hero-poster { width: 96px; height: 144px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }