@charset "UTF-8"; /*! GENERATED FILE — edit scss/ partials, not this file. Rebuild: npm run build:css */ /* Font Face Declarations */ @font-face { font-family: "Bender"; src: url("/fonts/Bender.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Bender"; src: url("/fonts/Bender-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* ======================================================================== DESIGN TOKENS (consolidated Jul 2026 - 68 tokens) Spacing and radius are strictly divisible by 4. Live reference: /design-tokens (admin). ======================================================================== */ --font-primary: "Bender", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Spacing - 4px base in rem, 12 steps (number = px/4 at 16px root). The whole scale shrinks fluidly with the root font-size below 2560px viewports - see the html rule right after :root. */ --space-1: 0.25rem; /* 4px @16 */ --space-2: 0.5rem; /* 8px @16 */ --space-3: 0.75rem; /* 12px @16 */ --space-4: 1rem; /* 16px @16 */ --space-5: 1.25rem; /* 20px @16 */ --space-6: 1.5rem; /* 24px @16 */ --space-8: 2rem; /* 32px @16 */ --space-10: 2.5rem; /* 40px @16 */ --space-12: 3rem; /* 48px @16 */ --space-16: 4rem; /* 64px @16 */ --space-20: 5rem; /* 80px @16 */ --space-30: 7.5rem; /* 120px @16 */ /* Type scale - 7 sizes */ --fs-xs: 0.7rem; /* ~11px - badges, fine print */ --fs-sm: 0.75rem; /* 12px - captions, secondary UI */ --fs-base: 0.875rem; /* 14px - body default */ --fs-lg: 1rem; /* 16px - emphasized body */ --fs-xl: 1.25rem; /* 20px - headings */ --fs-2xl: 1.5rem; /* 24px - page headings */ --fs-3xl: 2rem; /* 32px - hero/display */ --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; /* Layout - scale with the root like everything else */ --header-h: 4.25rem; /* 68px @16 root, ~60px @1920 */ --sidebar-w: clamp(300px, 25rem, 400px); /* 400px @2K, ~350px @1920 */ --content-max: 75rem; /* 1200px @16 */ /* Radius - all divisible by 4 */ --radius-sm: 0.25rem; /* 4px @16 */ --radius-md: 0.5rem; /* 8px @16 */ --radius-lg: 0.75rem; /* 12px @16 */ --radius-full: 9999px; /* Color primitives */ --white: #fff; --black: #000; /* ACCENT THEME - the whole brand color lives in these 9 tokens. Character-driven (Jul 2026): the root default is GOLD (canon), used for PVP characters and all logged-out pages. The active character sets data-theme on (see updateCharacterSwitcher in script.js) - "silver" for PVE, "green" for Seasonal - which swaps all 9 tokens below. */ --accent-300: #d4b574; --accent-400: #c7aa6a; --accent-500: #a89a7a; --accent-rgb: 212, 181, 116; /* accent-300 base for alpha tints */ --accent-2-rgb: 199, 170, 106; /* accent-400 base for alpha tints */ --accent-deep-rgb: 168, 138, 70; /* dark CTA gradient stop */ --accent-hi-rgb: 255, 220, 150; /* glow/highlight base */ --accent-cta-fg: #1a1308; /* text on accent CTA */ --accent-cta-fg-hover: #0d0904; --neutral-200: #ccc; --neutral-300: #a3a3a3; --neutral-400: #888; --neutral-500: #555; --neutral-700: #333; --neutral-800: #1a1a1a; --neutral-850: #111213; --neutral-900: #0d0d0f; --neutral-950: #0a0a0b; --red-100: #ffd4d4; --red-500: #ef4444; --red-600: #dc2626; --green-200: #a8e6b8; --green-500: #22c55e; --orange-500: #ff9800; --orange-600: #f57c00; --amber-400: #ffc107; --purple-200: #c9b8ff; --twitch-purple: #9146ff; --medal-gold: #ffd700; --medal-silver: #c0c0c0; --medal-bronze: #cd7f32; /* Alpha ladders */ --white-a03: rgba(255, 255, 255, 0.03); --white-a05: rgba(255, 255, 255, 0.05); --white-a10: rgba(255, 255, 255, 0.1); --white-a15: rgba(255, 255, 255, 0.15); --white-a20: rgba(255, 255, 255, 0.2); --white-a30: rgba(255, 255, 255, 0.3); --black-a30: rgba(0, 0, 0, 0.3); --black-a50: rgba(0, 0, 0, 0.5); --black-a80: rgba(0, 0, 0, 0.8); --accent-a10: rgba(var(--accent-rgb), 0.1); --accent-a20: rgba(var(--accent-rgb), 0.2); --accent-a30: rgba(var(--accent-rgb), 0.3); --accent-a40: rgba(var(--accent-rgb), 0.4); --accent-glow: rgba(var(--accent-hi-rgb), 0.4); --scrim: rgba(13, 13, 15, 0.85); /* Semantic: surfaces */ --bg-content: var(--neutral-850); --bg-surface: var(--neutral-950); --bg-input: var(--white-a05); --background: var(--neutral-850); --background-tertiary: var(--neutral-950); --header-bg: var(--neutral-850); --post-bg: var(--neutral-950); --post-bg-secondary: var(--neutral-950); --surface-elevated: var(--neutral-950); /* Semantic: text */ --text-primary: var(--accent-300); --text-secondary: var(--neutral-300); /* non-title text is neutral; accent is for titles/highlights */ --text-muted: #6a6a6c; --header-text: var(--text-primary); --text: var(--text-secondary); --text-highlight: var(--text-primary); --text-alt-highlight: var(--accent-400); --subtext: var(--text-muted); /* Semantic: borders */ --post-border: var(--white-a05); --border-subtle: var(--white-a03); --border-medium: var(--white-a05); --border-strong: var(--white-a10); --border-accent: var(--accent-a20); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-glow: 0 0 20px rgba(var(--accent-rgb), 0.06); /* Motion */ --transition-fast: 150ms ease; --transition-normal: 180ms ease; --transition-slow: 250ms ease; } /* GREEN accent theme - active while tracking a Seasonal character. A greener evolution of the old teal experiment (emerald family). */ :root[data-theme=green] { --accent-300: #6ee7b7; --accent-400: #34d399; --accent-500: #5fa287; --accent-rgb: 110, 231, 183; --accent-2-rgb: 52, 211, 153; --accent-deep-rgb: 4, 120, 87; --accent-hi-rgb: 167, 243, 208; --accent-cta-fg: #041a10; --accent-cta-fg-hover: #020f09; } /* SILVER accent theme - active while tracking a PVE character. Cool steel/slate family: PVE is the relaxed, co-op mode without hostile players - the calm, low-stakes color of the three. */ :root[data-theme=silver] { --accent-300: #cbd5e1; --accent-400: #aebbc9; --accent-500: #8e99a5; --accent-rgb: 203, 213, 225; --accent-2-rgb: 174, 187, 201; --accent-deep-rgb: 71, 85, 105; --accent-hi-rgb: 226, 232, 240; --accent-cta-fg: #0f1216; --accent-cta-fg-hover: #07090c; } /* ============================================================================ FLUID ROOT SCALING (Jul 2026) The site was designed on a 2560px monitor. Every token above is rem-based, so scaling the root font-size zooms the ENTIRE layout proportionally: 2560px viewport -> 16px root (100%, reference design) 1920px viewport -> 14px root (87.5%) <=1600px -> 13px root (81%, floor) Gated at >=769px (the desktop-layout band) so the phone layout below the 768px breakpoint keeps its untouched 16px base. ============================================================================ */ @media (min-width: 769px) { html { font-size: clamp(13px, 0.3125vw + 8px, 16px); } } body { font-family: var(--font-primary); font-weight: var(--fw-semibold); background: var(--background-tertiary); color: var(--text); min-height: 100vh; height: 100vh; line-height: 1.65; letter-spacing: 0.01em; display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Hide entire page until JS is ready - prevents font swap and layout shift flashes */ opacity: 0; transition: opacity 0.2s ease-out; } body.content-ready { opacity: 1; } /* Mobile Warning Overlay */ .mobile-warning-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.95); z-index: 99999; align-items: center; justify-content: center; padding: var(--space-5); backdrop-filter: blur(10px); } .mobile-warning-overlay.show { display: flex; } .mobile-warning-content { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); max-width: 31.25rem; width: 100%; text-align: center; box-shadow: var(--shadow-lg); } /* ============================================================================ BUTTON SYSTEM (Jul 2026) One base + color variants via custom-property knobs. New markup: .btn .btn- [.btn-sm|.btn-lg] [.btn-block] Legacy button classes are mapped onto the system in the grouped selectors below - keep them in markup for JS behavior hooks, styling comes from here. Live reference: /design-tokens ============================================================================ */ .btn, .complete-btn, .uncomplete-btn, .dialog-btn, .support-btn, .sidebar-action-btn, .profile-save-btn, .reset-btn, .collector-btn, .kappa-overview-btn, .mobile-warning-btn { /* variant knobs - neutral by default */ --btn-grad-a: rgba(60, 60, 60, 0.95); --btn-grad-b: rgba(40, 40, 40, 0.98); --btn-fg: var(--neutral-200); --btn-fg-hover: var(--white); --btn-border: var(--white-a10); --btn-border-top: var(--white-a20); --btn-glow: var(--white-a20); --btn-hover-shadow: var(--black-a30); --btn-x: 50%; --btn-y: 50%; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: linear-gradient(180deg, var(--btn-grad-a) 0%, var(--btn-grad-b) 100%); color: var(--btn-fg); border: 1px solid var(--btn-border); border-top: 1px solid var(--btn-border-top); border-radius: 0; font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; box-shadow: inset 0 1px 0 var(--white-a10), 0 2px 8px var(--black-a30); } /* top gloss */ .btn::before, .complete-btn::before, .uncomplete-btn::before, .dialog-btn::before, .support-btn::before, .sidebar-action-btn::before, .profile-save-btn::before, .reset-btn::before, .collector-btn::before, .kappa-overview-btn::before, .mobile-warning-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, var(--white-a10) 0%, transparent 100%); pointer-events: none; z-index: 2; } /* cursor-tracking hover glow */ .btn::after, .complete-btn::after, .uncomplete-btn::after, .dialog-btn::after, .support-btn::after, .sidebar-action-btn::after, .profile-save-btn::after, .reset-btn::after, .collector-btn::after, .kappa-overview-btn::after, .mobile-warning-btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle 250px at var(--btn-x) var(--btn-y), var(--btn-glow) 0%, transparent 100%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 1; } .btn:hover::after, .complete-btn:hover::after, .uncomplete-btn:hover::after, .dialog-btn:hover::after, .support-btn:hover::after, .sidebar-action-btn:hover::after, .profile-save-btn:hover::after, .reset-btn:hover::after, .collector-btn:hover::after, .kappa-overview-btn:hover::after, .mobile-warning-btn:hover::after { opacity: 1; } .btn:hover, .complete-btn:hover, .uncomplete-btn:hover, .dialog-btn:hover, .support-btn:hover, .sidebar-action-btn:hover, .profile-save-btn:hover, .reset-btn:hover, .collector-btn:hover, .kappa-overview-btn:hover, .mobile-warning-btn:hover { color: var(--btn-fg-hover); box-shadow: inset 0 1px 0 var(--white-a15), 0 4px 16px var(--btn-hover-shadow); } .btn:disabled, .complete-btn:disabled, .uncomplete-btn:disabled, .dialog-btn:disabled, .profile-save-btn:disabled { opacity: 0.4; cursor: not-allowed; --btn-grad-a: rgba(60, 60, 60, 0.95); --btn-grad-b: rgba(40, 40, 40, 0.98); --btn-fg: var(--neutral-400); --btn-fg-hover: var(--neutral-400); --btn-border: rgba(100, 100, 100, 0.3); --btn-hover-shadow: transparent; } .btn:disabled:hover::after, .complete-btn:disabled:hover::after, .uncomplete-btn:disabled:hover::after { opacity: 0; } /* ---------------- color variants ---------------- */ .btn-green, .complete-btn, .complete-all-action { --btn-grad-a: rgba(34, 120, 60, 0.95); --btn-grad-b: rgba(20, 80, 40, 0.98); --btn-fg: var(--green-200); --btn-fg-hover: var(--green-200); --btn-border: rgba(34, 197, 94, 0.3); --btn-border-top: rgba(100, 200, 130, 0.4); --btn-glow: rgba(120, 255, 160, 0.6); --btn-hover-shadow: rgba(34, 197, 94, 0.25); } .btn-red, .uncomplete-btn, .reset-btn, .reset-action, .complete-btn.confirm-state { --btn-grad-a: rgba(120, 40, 40, 0.95); --btn-grad-b: rgba(80, 25, 25, 0.98); --btn-fg: var(--red-100); --btn-fg-hover: var(--red-100); --btn-border: rgba(239, 68, 68, 0.3); --btn-border-top: rgba(200, 100, 100, 0.4); --btn-glow: rgba(255, 150, 150, 0.6); --btn-hover-shadow: rgba(239, 68, 68, 0.25); } .btn-gold, .confirm-btn, .collector-btn, .kappa-overview-btn, .prestige-action, .profile-save-btn-gold, .mobile-warning-btn { --btn-grad-a: rgba(var(--accent-rgb), 0.95); --btn-grad-b: rgba(var(--accent-deep-rgb), 0.98); --btn-fg: var(--accent-cta-fg); --btn-fg-hover: var(--accent-cta-fg-hover); --btn-border: rgba(var(--accent-rgb), 0.5); --btn-border-top: rgba(var(--accent-hi-rgb), 0.6); --btn-glow: rgba(var(--accent-hi-rgb), 0.6); --btn-hover-shadow: rgba(var(--accent-rgb), 0.35); } .btn-twitch, .support-btn.twitch-btn, .profile-save-btn-twitch { --btn-grad-a: rgba(145, 70, 255, 0.95); --btn-grad-b: rgba(100, 40, 200, 0.98); --btn-fg: var(--white); --btn-fg-hover: var(--white); --btn-border: rgba(145, 70, 255, 0.5); --btn-border-top: rgba(180, 120, 255, 0.6); --btn-glow: rgba(200, 150, 255, 0.5); --btn-hover-shadow: rgba(145, 70, 255, 0.5); } /* ---------------- sizes ---------------- */ .btn-sm, .reset-btn, .collector-btn, .kappa-overview-btn { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); } .btn-lg, .mobile-warning-btn { padding: var(--space-4) var(--space-8); font-size: var(--fs-lg); } .btn-block { width: 100%; } /* ---------------------------------------------------------------------- Interactive controls are not selectable text - prevents ugly text selection when clicking fast on buttons/tabs/toggles. Content areas (quest text, chat, help docs, tables, code blocks) stay selectable. ---------------------------------------------------------------------- */ .btn, .complete-btn, .uncomplete-btn, .dialog-btn, .support-btn, .sidebar-action-btn, .profile-save-btn, .reset-btn, .collector-btn, .kappa-overview-btn, .mobile-warning-btn, .kappa-prestige-btn, .kappa-action-btn, .fix-quest-btn, .wiki-link, .quest-images-btn, .quest-fix-btn, .quest-item-hide-btn, .nav-link, .dropdown-item, .dropdown-toggle, .mobile-nav-item, .mobile-nav-subitem, .mobile-menu-toggle, .map-tab, .trader-tab, .mode-seg-btn, .header-brand, .quest-mode-toggle, .switch, .checkbox-group, .endings-dropdown-trigger, .endings-option, .pagination-wrapper button, .page-number, .global-chat-btn, .close-chat-btn, .purge-chat-btn, .load-more-chat-btn, .pin-btn, .delete-btn, .copy-btn, .lurk-button, .context-menu-item, .collector-context-menu button, .dialog-close-btn, .ce-btn, .ce-align-btn, .ce-sel-align-btn, .ce-del-btn, .ce-eye-btn, .ce-center-canvas-btn, .ce-add-text-btn, .objectives-toggle-icon, .shopping-toggle-icon { user-select: none; -webkit-user-select: none; } /* ---------------- legacy layout (non-visual) overrides ---------------- */ .complete-btn, .uncomplete-btn { width: 100%; margin-top: auto; flex-shrink: 0; } .support-btn { width: 100%; margin-bottom: var(--space-2); } .sidebar-action-btn { width: 100%; border: none; } .dialog-btn { min-width: 6.25rem; padding: var(--space-3) var(--space-6); } /* Custom Scrollbar Styling - Minimal & Refined */ * { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; border-radius: var(--radius-sm); } *::-webkit-scrollbar-thumb { background: var(--accent-a20); border-radius: var(--radius-sm); border: 2px solid transparent; background-clip: padding-box; transition: background var(--transition-normal); } *::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.35); background-clip: padding-box; } *::-webkit-scrollbar-corner { background: transparent; } /* Main Header */ .main-header { width: 100%; height: var(--header-h); background: var(--neutral-850); /* matches cards */ border-bottom: 1px solid var(--border-medium); padding: 0 var(--space-6); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; flex-shrink: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .header-left { display: flex; align-items: center; align-self: stretch; /* lets the nav tabs span the full header height */ gap: var(--space-6); min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* scroll the nav strip instead of breaking layout */ } .header-left::-webkit-scrollbar { display: none; } .header-right { display: flex; align-items: center; gap: var(--space-3); } /* Tarkov Time Timers */ .tarkov-time-container { display: flex; align-items: center; gap: var(--space-2); } .tarkov-time-box { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2); background: var(--white-a05); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: "Consolas", "Monaco", monospace; font-size: var(--fs-sm); color: var(--text-secondary); transition: all var(--transition-normal); } .tarkov-time-box:hover { background: var(--white-a05); border-color: var(--border-medium); } .tarkov-time-box i { font-size: var(--fs-sm); } .tarkov-time-left i { color: var(--accent-300); } .tarkov-time-right i { color: #6088c0; } .tarkov-time-value { min-width: 2.5rem; text-align: center; } .user-info { display: flex; align-items: center; padding: var(--space-2) var(--space-4); background: var(--white-a03); border: none; border-radius: var(--radius-sm); transition: all var(--transition-normal); } .user-info:hover { background: var(--white-a05); } .user-welcome { color: var(--subtext); font-size: var(--fs-base); } .user-welcome #user-display-name { color: var(--text-highlight); font-weight: var(--fw-semibold); } /* App Container */ .app-container { display: flex; flex: 1 1 auto; overflow: hidden; min-height: 0; } /* Sidebar */ .sidebar { width: var(--sidebar-w); background-color: var(--neutral-950); border-right: 1px solid var(--border-medium); display: none; /* Hidden by default, JS shows it for quests/finished views */ flex-direction: column; height: 100%; min-height: 0; position: relative; } .sidebar-content { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1 1 auto; overflow-y: auto; scrollbar-gutter: stable; min-height: 0; } /* Sidebar Sections - Card Style */ .sidebar-section { padding: var(--space-4); background: var(--neutral-850); border: none; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; position: relative; overflow: hidden; transition: all 0.15s; min-height: fit-content; } /* Player Stats section needs visible overflow for dropdown */ .sidebar-section-player-stats { overflow: visible; } /* Gradient top border */ .sidebar-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-a30), transparent); transition: all 0.15s; } .sidebar-section:hover::before { background: linear-gradient(90deg, transparent, rgba(var(--accent-2-rgb), 0.6), transparent); } .sidebar-section-kappa-progress { padding: var(--space-4); border-bottom: none; background: var(--neutral-850); } /* Kappa progress gets full gold top border */ .sidebar-section-kappa-progress::before { background: linear-gradient(90deg, transparent, var(--accent-400), transparent); } .sidebar-section-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 1.2px; color: var(--white); margin-bottom: var(--space-4); text-transform: uppercase; opacity: 0.9; } .sidebar-section-title i { font-size: var(--fs-sm); color: var(--text-primary); opacity: 0.8; } .sidebar-section-kappa-progress .sidebar-section-title i { opacity: 1; color: var(--text-primary); } /* Support Section in Sidebar - Fixed at bottom above footer */ .sidebar-section-support { background: #1c1c2d; margin: 0 var(--space-5) var(--space-3); flex-shrink: 0; } /* Support section gets pink/purple gradient */ .sidebar-section-support::before { background: linear-gradient(90deg, transparent, var(--purple-200), transparent) !important; } .sidebar-section-support .sidebar-section-title { color: var(--accent-400); } .sidebar-section-support .sidebar-section-title i { color: var(--accent-400); opacity: 1; } .support-card { text-align: center; } .support-card .support-tagline { font-size: var(--fs-base); color: var(--text-primary); margin-bottom: var(--space-2); font-weight: var(--fw-semibold); } .support-card .support-details { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-secondary); margin-bottom: var(--space-4); } /* Hover glow overlay - fades in */ /* Twitch follow section - purple theme */ .sidebar-section-support:has(.twitch-btn) { background: #1f1a2e; } .sidebar-section-support:has(.twitch-btn)::before { background: linear-gradient(90deg, transparent, var(--twitch-purple), transparent) !important; } .sidebar-section-support:has(.twitch-btn) .sidebar-section-title, .sidebar-section-support:has(.twitch-btn) .sidebar-section-title i, .sidebar-section-support:has(.twitch-btn) .support-tagline, .sidebar-section-support:has(.twitch-btn) .support-details, .sidebar-section-support:has(.twitch-btn) .support-credit, .sidebar-section-support:has(.twitch-btn) .support-credit a { color: var(--white); } .sidebar-section-support:has(.twitch-btn) .sidebar-section-title i { color: var(--twitch-purple); opacity: 1; } /* Profile Save Buttons */ /* Hover glow overlay - fades in */ .support-card .support-credit { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-secondary); margin-top: var(--space-4); } .support-card .support-credit i { color: #ff6b8a; font-size: var(--fs-sm); } .support-card .support-credit a { color: var(--text-primary); text-decoration: none; font-weight: var(--fw-bold); } .support-card .support-credit a:hover { color: var(--text-alt-highlight); text-decoration: underline; } /* Sidebar Footer */ .sidebar-footer { padding: var(--space-4); background: var(--neutral-850); /* matches header */ border-top: 1px solid var(--border-medium); display: flex; flex-direction: row; gap: var(--space-3); flex-shrink: 0; } /* Hover glow overlay - fades in */ /* Main Content */ .main-content { flex: 1; padding: var(--space-6); background-color: var(--neutral-950); overflow-y: auto; scrollbar-gutter: stable; position: relative; } /* Hide all sections by default - JS will show the correct one. View switching is an instant display toggle (no fade) so sections feel like real pages. */ .main-content > section { display: none; } /* Content with Sidebar Layout */ .content-with-sidebar { display: flex; gap: var(--space-6); height: 100%; } .main-quests-area { flex: 1; min-width: 0; } /* Right Sidebar */ .right-sidebar { width: 20rem; background: var(--bg-surface); border: none; border-radius: var(--radius-md); flex-shrink: 0; overflow-y: auto; scrollbar-gutter: stable; } .right-sidebar-content { padding: var(--space-6); } .right-sidebar-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: 1px; color: var(--text-highlight); margin-bottom: var(--space-4); text-transform: uppercase; padding-bottom: var(--space-3); border-bottom: none; } /* ============================================================================ HEADER NAVIGATION (Jul 2026) Squared full-height tabs in the button/input family: uppercase, bold, 0.5px tracking, and the signature 2px gold edge (bottom here, echoing the input system's left focus edge). Active tab = gold text + solid gold edge sitting flush on the header's bottom border. No pills, no radii. ============================================================================ */ .nav { display: flex; align-self: stretch; /* tabs span the full header height */ align-items: stretch; gap: var(--space-1); } .nav-link { position: relative; display: flex; align-items: center; padding: 0 var(--space-4); background: transparent; border: none; border-radius: 0; color: var(--text-muted); text-decoration: none; font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.5px; transition: color var(--transition-normal), background var(--transition-normal); white-space: nowrap; flex-shrink: 0; } /* 2px bottom edge - the nav's take on the input system's gold focus edge */ .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; /* same gradient shape as .quest-card::before, but with a full-strength peak - at tab width the a40 peak was nearly invisible */ background: linear-gradient(90deg, transparent, var(--accent-400), transparent); opacity: 0; transition: opacity var(--transition-normal); pointer-events: none; } .nav-link:hover { color: var(--accent-300); background: linear-gradient(180deg, transparent 30%, var(--accent-a10) 100%); } .nav-link:hover::after { opacity: 1; } /* Only show active nav styling after content is ready - prevents flash on page load */ body.content-ready .nav-link.active { color: var(--accent-300); background: linear-gradient(180deg, transparent 30%, var(--accent-a10) 100%); } body.content-ready .nav-link.active::after { opacity: 1; } /* Navigation Dropdown */ .nav-dropdown { position: relative; } /* dropdown wrappers inside the nav stretch so their trigger stays a full-height tab */ .nav .nav-dropdown { display: flex; align-items: stretch; flex-shrink: 0; } /* Shared panel look for every dropdown menu (popover-based since Jul 2026) */ .dropdown-menu { background: var(--bg-surface); border: 1px solid var(--border-medium); border-top: 2px solid var(--accent-a30); /* gold top edge ties the panel to the tab underline */ border-radius: 0; min-width: 13.75rem; box-shadow: var(--shadow-lg); overflow: hidden; padding: var(--space-2) 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Native [popover] menus: top-layer, light dismiss, ESC - all free. Geometry comes from anchor positioning (Chromium) or the JS fallback in src/shared/menus.ts; both use position:fixed coordinates. */ .dropdown-menu[popover] { position: fixed; inset: auto; margin: var(--space-1) 0 0; color: var(--text-primary); /* enter/exit animation (display/overlay need allow-discrete) */ opacity: 0; translate: 0 -4px; transition: opacity 150ms ease, translate 150ms ease, display 150ms allow-discrete, overlay 150ms allow-discrete; } .dropdown-menu[popover]:popover-open { opacity: 1; translate: 0 0; } @starting-style { .dropdown-menu[popover]:popover-open { opacity: 0; translate: 0 -4px; } } /* Legacy class-toggled dropdowns (nothing in the main app anymore - kept so not-yet-converted pages behave until they are migrated) */ .dropdown-menu:not([popover]) { display: none; position: absolute; top: 100%; left: 0; margin-top: var(--space-1); z-index: 1000; } .dropdown-menu:not([popover]).show { display: block; animation: dropdownFadeIn 150ms ease-out; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .dropdown-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-left: 2px solid transparent; /* reserves the input-system edge, no shift on hover */ color: var(--text-secondary); text-decoration: none; font-size: var(--fs-base); font-weight: var(--fw-semibold); transition: all var(--transition-fast); } .dropdown-item:hover { background: var(--white-a05); border-left-color: var(--accent-400); color: var(--text-primary); } .dropdown-item i { font-size: var(--fs-base); width: 1rem; text-align: center; order: -1 !important; margin-right: auto; } /* Ensure text content is on the right */ .dropdown-item:not(:has(i)) { justify-content: flex-end; } /* Admin-only dropdown section (site red - matches the other admin accents) */ .admin-links-divider { display: flex; align-items: center; padding: var(--space-2) var(--space-3) var(--space-1); margin-top: var(--space-2); border-top: 1px solid rgba(239, 68, 68, 0.3); } .admin-links-divider span { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--red-500); } .dropdown-item.admin-only-link { border-left: 2px solid var(--red-500); background: rgba(239, 68, 68, 0.05); padding-left: var(--space-2); } .dropdown-item.admin-only-link:hover { background: rgba(239, 68, 68, 0.12); } .dropdown-item.admin-only-link i { color: var(--red-500); } /* User dropdown in header */ .user-dropdown { position: relative; } .user-nav-link { display: flex; align-items: center; gap: var(--space-2); } .user-avatar-link { display: flex; align-items: center; cursor: pointer; transition: opacity 0.2s; } .user-avatar-link:hover { opacity: 0.8; } .user-avatar-header { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; border: none; transition: all var(--transition-normal); } .user-avatar-header:hover { opacity: 0.85; } .default-avatar-initial { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent-a20); color: var(--text-highlight); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-xl); border: none; transition: all var(--transition-normal); } .default-avatar-initial:hover { background: var(--accent-a20); } /* legacy right-alignment helper - popover menus align via anchor positioning (wireMenuPopover align:'end'), explicit insets would fight it */ .dropdown-menu-right:not([popover]) { right: 0; left: auto; } .title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-highlight); letter-spacing: 0.02em; margin: 0; } /* Header Brand Logo — doubles as the character switcher (opens /characters) */ .header-brand { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; } .header-brand:hover .header-brand-icon { border-color: var(--accent-400); box-shadow: 0 0 12px var(--accent-glow); } .header-brand:hover .header-brand-title { text-shadow: 0 0 14px var(--accent-glow); animation: brand-glitch 0.35s steps(1, end) 1; } /* One-shot chromatic-split jitter when the hover starts, settling into the glow. steps(1) snaps between frames - glitch, not a smooth wobble. */ @keyframes brand-glitch { 0%, 100% { transform: none; } 15% { transform: translate(-1px, 1px); text-shadow: 2px 0 rgba(255, 80, 80, 0.5), -2px 0 rgba(80, 200, 255, 0.5); } 35% { transform: translate(1px, -1px) skewX(-3deg); text-shadow: -2px 0 rgba(255, 80, 80, 0.4), 2px 0 rgba(80, 200, 255, 0.4); } 55% { transform: translate(-1px, 0); text-shadow: 1px 0 rgba(255, 80, 80, 0.35), -1px 0 rgba(80, 200, 255, 0.35), 0 0 14px var(--accent-glow); } 75% { transform: none; text-shadow: 0 0 14px var(--accent-glow); } } @media (prefers-reduced-motion: reduce) { .header-brand:hover .header-brand-title { animation: none; } } .header-brand-icon { width: 2.5rem; height: 2.5rem; background: var(--accent-a10); border: 1px solid var(--accent-a30); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; transition: border-color 0.15s ease, box-shadow 0.2s ease; } .header-brand-icon::before { content: ""; position: absolute; top: -1px; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-400), transparent); } .header-brand-icon i { font-size: var(--fs-xl); color: var(--accent-400); } .header-brand-icon img { width: 100%; height: 100%; object-fit: contain; } .header-brand-text { display: flex; flex-direction: column; } .header-brand-title { font-size: var(--fs-xl); color: var(--accent-400); text-transform: uppercase; letter-spacing: 4px; font-weight: var(--fw-bold); white-space: nowrap; transition: text-shadow 0.2s ease; } .level-section { display: flex; flex-direction: column; gap: var(--space-3); } .level-sections-inline { display: flex; gap: var(--space-3); } .level-sections-inline .level-section { flex: 1; } /* Inline layout for player stats - all 3 inputs in one row */ .level-sections-vertical { display: grid; grid-template-columns: 1fr 1fr; /* 4 stat inputs as 2x2 */ gap: var(--space-2); position: relative; } .level-section-row { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; } .level-section-row label { font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--text-muted); } /* Ensure all inputs in player stats have same height */ .level-section-row .level-input, .level-section-row .endings-dropdown-trigger { height: 2.75rem; box-sizing: border-box; } /* Endings Multiselect Dropdown */ .endings-multiselect { position: relative; width: 100%; } .endings-dropdown-trigger { background: var(--white-a05); border: 1px solid var(--white-a05); border-left: 2px solid var(--neutral-700); color: var(--white); padding: 0 var(--space-2); border-radius: 0; font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-semibold); width: 100%; height: 2.75rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.15s ease; box-sizing: border-box; overflow: hidden; } .endings-dropdown-trigger:hover { border-left-color: var(--text-highlight); background: var(--white-a05); } .endings-dropdown-trigger i { transition: transform 0.2s ease; font-size: var(--fs-sm); color: var(--neutral-400); } .endings-multiselect.open .endings-dropdown-trigger i { transform: rotate(180deg); } .endings-placeholder { color: var(--neutral-400); flex: 1; text-align: center; font-size: var(--fs-sm); } .endings-dropdown-trigger .fa-chevron-down { flex-shrink: 0; margin-left: var(--space-1); } .endings-selected-icons { display: flex; gap: var(--space-1); align-items: center; flex: 1; min-width: 0; justify-content: center; } .endings-selected-icons img { width: 1.75rem; height: 1.75rem; object-fit: contain; flex-shrink: 0; } .endings-selected-count { flex: 1; text-align: center; color: var(--white); font-family: inherit; font-size: var(--fs-base); } /* Endings multiselect panel: a native [popover] anchored to its trigger (src/shared/menus.ts, matchWidth) - same mechanics as the nav menus */ .endings-dropdown-menu { background: #1a1a1c; border: 1px solid var(--white-a15); overflow-y: auto; scrollbar-gutter: stable; border-radius: var(--radius-sm); box-shadow: 0 4px 16px var(--black-a50); max-height: 12.5rem; padding: 0; } .endings-dropdown-menu[popover] { position: fixed; inset: auto; margin: var(--space-1) 0 0; opacity: 0; translate: 0 -4px; transition: opacity 150ms ease, translate 150ms ease, display 150ms allow-discrete, overlay 150ms allow-discrete; } .endings-dropdown-menu[popover]:popover-open { opacity: 1; translate: 0 0; } @starting-style { .endings-dropdown-menu[popover]:popover-open { opacity: 0; translate: 0 -4px; } } .endings-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); cursor: pointer; transition: background 0.15s ease; color: var(--neutral-200); font-size: var(--fs-base); } .endings-option:hover { background: var(--white-a05); } /* ============================================================================ CHARACTER SELECTION PAGE (Jul 2026) Full-page character swap (header brand -> /characters): one card per game mode, active character highlighted. ============================================================================ */ /* Content fills the section and centers vertically; the auto margins collapse to 0 when the content is taller than the viewport, so the section's normal scrolling still works. */ .character-select { display: flex; flex-direction: column; } #character-select-content { width: 100%; margin-top: auto; margin-bottom: auto; padding-bottom: var(--space-16); } /* Centered header without the divider, like the in-game profile selection screen */ .character-select .page-header { text-align: center; border-bottom: none; } .character-select .page-header .page-title { justify-content: center; } .character-select-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); max-width: 62rem; margin: 0 auto; } /* Each card previews the accent theme its character switches the site to. The accent tokens are re-declared locally so the card's Select button (.btn-gold resolves its knobs against them) always wears the theme it applies, regardless of the site's current theme. */ .char-card.char-accent-gold { --card-accent: #d4b574; --card-accent-rgb: 212, 181, 116; --accent-rgb: 212, 181, 116; --accent-deep-rgb: 168, 138, 70; --accent-hi-rgb: 255, 220, 150; --accent-cta-fg: #1a1308; --accent-cta-fg-hover: #0d0904; } .char-card.char-accent-green { --card-accent: #6ee7b7; --card-accent-rgb: 110, 231, 183; --accent-rgb: 110, 231, 183; --accent-deep-rgb: 4, 120, 87; --accent-hi-rgb: 167, 243, 208; --accent-cta-fg: #041a10; --accent-cta-fg-hover: #020f09; } .char-card.char-accent-silver { --card-accent: #cbd5e1; --card-accent-rgb: 203, 213, 225; --accent-rgb: 203, 213, 225; --accent-deep-rgb: 71, 85, 105; --accent-hi-rgb: 226, 232, 240; --accent-cta-fg: #0f1216; --accent-cta-fg-hover: #07090c; } /* Wrapper exists so the ending medals can straddle the card edge: .char-card clips (overflow:hidden, for the oversized portrait), so the half-outside icons live on the wrapper instead. */ .char-card-wrap { position: relative; display: flex; } /* 3D tilt toward the cursor (values fed by wireCardTilt in script.js) with a glossy sheen tracking the pointer. Hover-capable devices only. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .char-card-wrap { transform: perspective(56rem) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 0.12s ease-out; will-change: transform; } .char-card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(40rem circle at var(--gloss-x, 50%) var(--gloss-y, 50%), rgba(var(--card-accent-rgb), 0.12), transparent 45%); opacity: 0; transition: opacity 0.25s ease; } .char-card-wrap:hover .char-card::before { opacity: 1; } } .char-card-wrap .char-card { flex: 1; min-width: 0; } /* Ending medals pinned on the card's bottom edge - half in, half out */ .char-card-endings { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); display: flex; gap: var(--space-2); } .char-card-endings img { width: 2.5rem; height: 2.5rem; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } .char-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--neutral-850); border-radius: var(--radius-lg); box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; overflow: hidden; } .char-card-active-badge { position: absolute; top: var(--space-4); right: var(--space-4); padding: var(--space-1) var(--space-2); background: rgba(var(--card-accent-rgb), 0.1); border-radius: var(--radius-sm); color: var(--card-accent); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 1px; text-transform: uppercase; } .char-card-header { display: flex; align-items: center; gap: var(--space-3); } .char-card-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background: rgba(var(--card-accent-rgb), 0.1); color: var(--card-accent); font-size: var(--fs-lg); } /* Prestige patch worn instead of the mode icon */ .char-card-icon img { width: 100%; height: 100%; object-fit: contain; } .char-card-title { margin: 0; color: var(--card-accent); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: 1px; text-transform: uppercase; } .char-card-sub { color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: 1.5px; text-transform: uppercase; } /* Character render over a big washed-out rank badge, like the in-game profile selection screen. The render is DELIBERATELY taller than its figure box: it overflows down behind the stats/blurb/button (which sit on z-index 1) and the card's overflow:hidden crops it around the knees. */ .char-card-figure { position: relative; display: flex; justify-content: center; height: 16rem; } /* Far-away backdrop: the mode's ending wallpaper, zoomed past the card width at its natural aspect (no object-fit cropping); the card's overflow clips the excess. Fills the figure zone; the dark bottom fade takes over below. */ .char-card-bg { position: absolute; top: 0; left: 50%; width: 195%; max-width: none; height: auto; transform: translateX(-50%) scale(1.2); opacity: 0.4; pointer-events: none; /* Fade the image itself out toward its own bottom edge (the img is shorter than the card, so a card-level fade wouldn't line up) */ -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); } .char-card-portrait { position: absolute; top: -1.25rem; left: 50%; transform: translateX(-50%); height: 34rem; max-width: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); } /* Depth parallax while the card tilts (--par-x/y fed by wireCardTilt): the UI stays put in front, the PMC drifts slightly behind it, the rank emblem drifts more, and the blurred ending backdrop - furthest away - drifts the most, opposite the cursor. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .char-card-portrait { transform: translateX(-50%) translate(calc(var(--par-x, 0) * -0.25rem), calc(var(--par-y, 0) * -0.1875rem)); transition: transform 0.12s ease-out; } .char-card-bg { transform: translateX(-50%) scale(1.2) translate(calc(var(--par-x, 0) * -1rem), calc(var(--par-y, 0) * -0.625rem)); transition: transform 0.12s ease-out; } } /* Fade the lower body into the card surface so the text stays readable */ .char-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65%; background: linear-gradient(180deg, transparent, rgb(17, 18, 19) 55%); pointer-events: none; } /* Everything below the figure renders above the overflowing character */ .char-card-stats, .char-card-blurb, .char-card-new, .char-card .char-card-select { position: relative; z-index: 1; } .char-card-blurb { flex-grow: 1; margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; text-align: center; } /* Stats and the "new character" note share a fixed-height slot so the Select buttons line up across cards regardless of played state */ .char-card-stats, .char-card-new { min-height: 2.75rem; } .char-card-stats { display: flex; justify-content: center; gap: var(--space-6); } .char-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); } .char-stat-value { color: var(--neutral-200); font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: 1; } .char-stat-label { color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: 0.5px; text-transform: uppercase; } .char-card-new { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--fs-sm); } .char-card .char-card-select { width: 100%; } /* Kappa celebration reuses the character card, standalone and centered (sizing on the wrap so the bottom-edge ending medals can overhang) */ .kappa-complete-wrap { width: 100%; max-width: 21rem; margin: 0 auto; /* The celebration section is text-align:center - undo it inside the card so the header reads left-aligned like the character cards */ text-align: left; } /* Seasonal card links to the Season Modifiers page */ .char-card-season-link { position: relative; z-index: 1; color: var(--card-accent, var(--accent-300)); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-align: center; text-decoration: none; } .char-card-season-link:hover { text-decoration: underline; } /* ============================================================================ HALL OF FAME (Jul 2026) Frozen monument to the EFT 1.0 wipe's 12 most dedicated players (P6 + all 4 endings). Full-bleed Justice-League hero poster: title overlaid at the top, one front-facing row of equal-height PMCs anchored to the bottom, shoulders overlapping (center ranks stack on top via z-index), radiant burst backdrop. Name + rank always visible; medals reveal on hover. ============================================================================ */ .hall-of-fame { height: 100%; padding: 0; overflow: hidden; } .hall-of-fame > div, .hof-scene { height: 100%; } .hof-scene { position: relative; overflow: hidden; /* Size container: lets the renders be sized in cqh (% of scene height) */ container-type: size; } /* Radiant burst rising from behind the lineup */ .hof-scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 80%, rgba(var(--accent-rgb), 0.16), transparent 70%), repeating-conic-gradient(from 0deg at 50% 80%, rgba(var(--accent-rgb), 0.04) 0deg 5deg, transparent 5deg 12deg); -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 70%, #000 45%, transparent 85%); mask-image: radial-gradient(ellipse 90% 90% at 50% 70%, #000 45%, transparent 85%); pointer-events: none; } /* Title lives inside the poster, vertically centered in the empty band between the scene top and where the PMC renders begin (renders are 75cqh tall + ~4rem of nameplate/gap/bottom offset above/below them) */ .hof-title { position: absolute; top: 0; left: 0; right: 0; height: calc(25cqh - 4rem); display: flex; flex-direction: column; justify-content: center; text-align: center; z-index: 25; pointer-events: none; } .hof-title h2 { margin: 0; color: var(--text-primary); font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: 2px; text-transform: uppercase; } .hof-title h2 i { color: var(--accent-400); margin-right: var(--space-2); } .hof-title p { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--fs-base); } .hof-lineup { position: absolute; bottom: var(--space-6); left: 0; right: 0; display: flex; justify-content: center; align-items: flex-end; } a.hof-pmc { text-decoration: none; } /* Equal size for all 12; each slot cedes 2.5rem per side to its neighbors. The overlapping renders steal each other's pointer, so the PMC itself is inert - only the nameplate is interactive (hover + Twitch click). */ .hof-pmc { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: calc(8.3333333333% + 5rem); margin: 0 -2.5rem; flex-shrink: 0; pointer-events: none; } .hof-pmc .hof-nameplate { pointer-events: auto; cursor: default; } /* Spotlight: hovering a PMC's nameplate dims everyone else */ .hof-pmc { transition: filter 0.25s ease; } .hof-lineup:has(.hof-nameplate:hover) .hof-pmc:not(:has(.hof-nameplate:hover)) { filter: brightness(0.5); } a.hof-pmc .hof-nameplate { cursor: pointer; } /* Subtle glow on the username when hovering the nameplate (shadow color omitted = currentColor, i.e. the player's own color) */ .hof-name { transition: text-shadow 0.2s ease; } .hof-nameplate:hover .hof-name { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 14px; } .hof-render { height: 75cqh; /* always 75% of the scene height, whatever the screen */ width: auto; max-width: none; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6)); } /* Fade the legs into the page background, like the character cards */ .hof-scene::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 11rem; background: linear-gradient(180deg, transparent, var(--neutral-950) 80%); z-index: 31; /* over every PMC, hovered ones included */ pointer-events: none; } /* The champion gets the glow */ .hof-first .hof-render { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 32px rgba(var(--accent-rgb), 0.3)); } .hof-first .hof-name { font-size: var(--fs-lg); } .hof-nameplate { position: relative; width: 100%; height: 100%; text-align: center; } .hof-rank { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 1px; } .hof-name { font-size: var(--fs-base); font-weight: var(--fw-bold); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); white-space: nowrap; } /* The render + its chest patch share a wrapper for absolute positioning. Shrink-wraps the render so the patch percentages track the body exactly regardless of viewport size. */ .hof-figure { position: relative; display: flex; justify-content: center; } /* Prestige 6 worn over the heart, like a shirt print. The render is 150% of the figure width and centered, so 50% = body center; the heart sits on the wearer's left = slightly viewer-right of center. */ .hof-prestige-patch { position: absolute; top: 24%; left: 41%; width: 12%; opacity: 0.9; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); pointer-events: none; } @media (max-width: 768px) { .hof-scene { overflow-x: auto; } /* The scene scrolls horizontally - keep the title pinned instead of letting it scroll away with the lineup */ .hof-title { position: sticky; left: 0; width: 100%; } .hof-lineup { justify-content: flex-start; padding: 0 var(--space-6); } .hof-pmc { width: 10rem; margin: 0 -1.5rem; } } @media (max-width: 768px) { .character-select-cards { grid-template-columns: 1fr; } } /* Subtle active-mode tag (next to the PMC Level label) */ .mode-tag { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-1); background: var(--accent-a10); border: 1px solid var(--accent-a20); color: var(--accent-300); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.8px; text-transform: uppercase; vertical-align: middle; line-height: 1.4; } /* ============================================================================ MODE SEGMENTED CONTROL (Jul 2026) PVP | PVE | SEASONAL leaderboard selector - nav-tab language: squared, accent-filled active segment. ============================================================================ */ .mode-segmented { display: inline-flex; background: var(--neutral-900); border: 1px solid var(--white-a05); } .mode-seg-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: transparent; border: none; color: var(--subtext); font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all var(--transition-normal); } .mode-seg-btn + .mode-seg-btn { border-left: 1px solid var(--white-a05); } .mode-seg-btn:hover { background: var(--white-a03); color: var(--text); } .mode-seg-btn.active { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-deep-rgb), 0.98) 100%); color: var(--accent-cta-fg); box-shadow: inset 0 1px 0 var(--white-a15), 0 2px 8px var(--black-a30); } /* ============================================================================ FORM CONTROLS (Jul 2026) Checkboxes, switches, range sliders and color pickers - one gold-accented family matching the button/input systems. Live reference: /design-tokens ============================================================================ */ /* ---------------- checkbox ---------------- */ input[type=checkbox] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 1.125rem; height: 1.125rem; border: 1px solid var(--white-a15); border-radius: var(--radius-sm); background-color: var(--white-a05); cursor: pointer; position: relative; transition: all var(--transition-fast); flex-shrink: 0; } input[type=checkbox]:hover { border-color: var(--accent-a40); background-color: var(--white-a10); } input[type=checkbox]:checked { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-deep-rgb), 0.98) 100%); border-color: var(--accent-a40); } input[type=checkbox]:checked::after { content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--accent-cta-fg); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; } input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-a30); } .endings-option input[type=checkbox] { width: 1rem; height: 1rem; } /* ---------------- switch (toggle) ---------------- */ /* markup: legacy: .quest-mode-toggle / .quest-mode-checkbox / .quest-mode-slider */ .switch-track, .quest-mode-slider { position: relative; display: inline-block; width: 2.875rem; height: 1.5rem; background: var(--white-a10); border: 1px solid var(--white-a15); border-radius: var(--radius-full); transition: all var(--transition-normal); flex-shrink: 0; } .switch-track::before, .quest-mode-slider::before { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--neutral-400); box-shadow: 0 1px 3px var(--black-a30); transition: all var(--transition-normal); } .switch input:checked + .switch-track, .quest-mode-checkbox:checked + .quest-mode-slider { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-deep-rgb), 0.98) 100%); border-color: var(--accent-a40); box-shadow: inset 0 1px 0 var(--white-a20), 0 0 8px var(--accent-a20); } .switch input:checked + .switch-track::before, .quest-mode-checkbox:checked + .quest-mode-slider::before { transform: translateX(1.375rem); background: var(--neutral-900); box-shadow: 0 1px 3px var(--black-a50); } .switch:hover .switch-track, .quest-mode-toggle:hover .quest-mode-slider { border-color: var(--accent-400); } .switch input:focus-visible + .switch-track, .quest-mode-checkbox:focus-visible + .quest-mode-slider { box-shadow: 0 0 0 2px var(--accent-a30); } /* the switch's native checkbox stays invisible (legacy rule: .quest-mode-checkbox) */ .switch input { display: none; } /* ---------------- range slider ---------------- */ input[type=range] { appearance: none; -webkit-appearance: none; height: 1.25rem; background: transparent; cursor: pointer; } input[type=range]::-webkit-slider-runnable-track { height: 0.25rem; background: var(--white-a10); border-radius: var(--radius-full); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 0.875rem; height: 0.875rem; margin-top: -0.3125rem; border-radius: 50%; background: var(--accent-300); border: 1px solid var(--accent-400); box-shadow: 0 1px 3px var(--black-a50); transition: background var(--transition-fast); } input[type=range]::-webkit-slider-thumb:hover { filter: brightness(1.15); } input[type=range]::-moz-range-track { height: 0.25rem; background: var(--white-a10); border-radius: var(--radius-full); } input[type=range]::-moz-range-thumb { width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--accent-300); border: 1px solid var(--accent-400); box-shadow: 0 1px 3px var(--black-a50); } input[type=range]:focus-visible { outline: none; } /* ---------------- color picker ---------------- */ input[type=color] { height: 2.125rem; padding: 2px; background: var(--white-a05); border: 1px solid var(--white-a15); border-radius: 0; cursor: pointer; transition: border-color var(--transition-fast); } input[type=color]:hover { border-color: var(--accent-a40); } .ce-prop-row input[type=color] { width: 100%; } .ending-icon-small { width: 1.75rem; height: 1.75rem; object-fit: contain; } .endings-option span { text-transform: capitalize; } .level-section label { font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--text-highlight); } /* ============================================================================ INPUT SYSTEM (Jul 2026) One base for all text-like fields, driven by custom-property knobs. Signature look: subtle fill, 2px left edge that turns gold on focus. Legacy classes (.level-input, .quest-items-search, #global-chat-input) keep only layout overrides below. Live reference: /design-tokens ============================================================================ */ .input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea { --input-bg: var(--white-a05); --input-border: var(--white-a05); --input-edge: var(--neutral-700); --input-edge-focus: var(--accent-400); width: 100%; padding: var(--space-3) var(--space-4); background: var(--input-bg); border: 1px solid var(--input-border); border-left: 2px solid var(--input-edge); border-radius: 0; color: var(--white); font-family: inherit; font-size: var(--fs-base); transition: all 0.15s; } .input:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=url]:focus, input[type=search]:focus, select:focus, textarea:focus { outline: none; border-left-color: var(--input-edge-focus); } .input::placeholder, input[type=text]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder, input[type=number]::placeholder, input[type=url]::placeholder, input[type=search]::placeholder, textarea::placeholder { color: var(--neutral-500); font-weight: var(--fw-semibold); } .input:disabled, input[type=text]:disabled, input[type=email]:disabled, input[type=password]:disabled, input[type=number]:disabled, input[type=url]:disabled, input[type=search]:disabled, select:disabled, textarea:disabled { background: var(--black-a30); color: var(--neutral-500); cursor: not-allowed; border-left-color: var(--neutral-800); } /* read-only fields in dialogs (e.g. locked quest names) */ .dialog-body input:read-only { background: var(--black-a30); color: var(--neutral-500); border-left-color: var(--neutral-800); cursor: not-allowed; } /* ---------------------------------------------------------------------- Interactive controls are not selectable text - prevents ugly text selection when clicking fast on buttons/tabs/toggles. Content areas (quest text, chat, help docs, tables, code blocks) stay selectable. ---------------------------------------------------------------------- */ .btn, .complete-btn, .uncomplete-btn, .dialog-btn, .support-btn, .sidebar-action-btn, .profile-save-btn, .reset-btn, .collector-btn, .kappa-overview-btn, .mobile-warning-btn, .kappa-prestige-btn, .kappa-action-btn, .fix-quest-btn, .wiki-link, .quest-images-btn, .quest-fix-btn, .quest-item-hide-btn, .nav-link, .dropdown-item, .dropdown-toggle, .mobile-nav-item, .mobile-nav-subitem, .mobile-menu-toggle, .map-tab, .trader-tab, .mode-seg-btn, .header-brand, .quest-mode-toggle, .switch, .checkbox-group, .endings-dropdown-trigger, .endings-option, .pagination-wrapper button, .page-number, .global-chat-btn, .close-chat-btn, .purge-chat-btn, .load-more-chat-btn, .pin-btn, .delete-btn, .copy-btn, .lurk-button, .context-menu-item, .collector-context-menu button, .dialog-close-btn, .ce-btn, .ce-align-btn, .ce-sel-align-btn, .ce-del-btn, .ce-eye-btn, .ce-center-canvas-btn, .ce-add-text-btn, .objectives-toggle-icon, .shopping-toggle-icon { user-select: none; -webkit-user-select: none; } /* ---------------- legacy layout (non-visual) overrides ---------------- */ .level-input { height: 2.75rem; text-align: center; font-weight: var(--fw-semibold); cursor: pointer; } .quest-items-search { padding-left: var(--space-10); /* room for the search icon */ font-size: var(--fs-lg); } #global-chat-input { flex: 1; resize: none; min-height: 2.5rem; max-height: 6.25rem; } /* Hide default number input spinners and add custom styling */ .level-input[type=number] { -moz-appearance: textfield; appearance: textfield; } .level-input[type=number]::-webkit-inner-spin-button, .level-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .progress-section { display: flex; flex-direction: column; gap: var(--space-3); color: var(--text-muted); } .progress-label { font-weight: var(--fw-bold); margin-bottom: var(--space-2); font-size: var(--fs-base); opacity: 0.8; } .progress-bar { background: var(--white-a05); border-radius: var(--radius-sm); height: 2px; overflow: hidden; position: relative; border: none; width: 100%; min-width: 12.5rem; } .progress-fill { background: linear-gradient(90deg, var(--text-alt-highlight), var(--text-highlight)); height: 100%; width: 0%; border-radius: var(--radius-sm); transition: width 0.4s ease-out; } .progress-text { font-size: var(--fs-base); } /* Quest Mode Toggle Section */ .quest-mode-section { display: flex; align-items: center; } .quest-mode-toggle { display: inline-flex; align-items: center; cursor: pointer; user-select: none; gap: var(--space-3); } .quest-mode-checkbox { display: none; } .quest-mode-label { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--subtext); } .quest-mode-toggle:hover .quest-mode-label { color: var(--text); } /* Checkbox Styles */ /* Text Input, Select, Textarea Styles */ select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: var(--space-8); } select option { background: var(--bg-surface); color: var(--text); } textarea { resize: vertical; min-height: 6.25rem; } /* Checkbox Group Styles */ .checkbox-group { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; } .checkbox-group label { cursor: pointer; color: var(--text); font-weight: var(--fw-semibold); margin: 0; } .checkbox-group:hover label { color: var(--text-highlight); } /* Lurk Button */ .lurk-button { --btn-x: 50%; --btn-y: 50%; padding: var(--space-3) var(--space-6); background: linear-gradient(180deg, rgba(120, 60, 200, 0.95) 0%, rgba(80, 40, 140, 0.98) 100%); color: var(--purple-200); border: 1px solid rgba(145, 70, 255, 0.3); border-top: 1px solid rgba(180, 120, 255, 0.4); border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); transition: color 0.25s ease, box-shadow 0.25s ease; box-shadow: inset 0 1px 0 var(--white-a10), 0 2px 8px var(--black-a30); position: relative; overflow: hidden; } .lurk-button::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle 250px at var(--btn-x) var(--btn-y), rgba(200, 150, 255, 0.6) 0%, transparent 100%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .lurk-button:hover::after { opacity: 1; } .lurk-button:hover { color: var(--white); box-shadow: inset 0 1px 0 var(--white-a15), 0 4px 16px rgba(145, 70, 255, 0.3); } .lurk-button:active { transform: scale(0.98); } .lurk-button i { font-size: var(--fs-lg); } /* Main content styling is now handled by .main-content */ /* Map Overview Section */ .map-overview { margin-bottom: 0; } .overview-stats { display: flex; flex-direction: column; gap: var(--space-3); } .stat-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-3); background: var(--white-a03); border: none; border-radius: var(--radius-sm); font-size: var(--fs-base); gap: var(--space-3); transition: all var(--transition-normal); } .stat-item:hover { background: var(--white-a05); } .stat-label { font-size: var(--fs-sm); color: var(--subtext); font-weight: var(--fw-semibold); flex-shrink: 0; } .stat-value { font-weight: var(--fw-semibold); color: var(--text-highlight); font-size: var(--fs-base); text-align: right; } /* Keys List Styling */ .keys-list-item, .fir-list-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .stat-header { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-2); } .keys-list, .fir-list { display: flex; flex-wrap: wrap; gap: var(--space-1); width: 100%; } .key-item { background: var(--white-a05); border: none; color: var(--subtext); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; flex-grow: 1; } .fir-item { background: var(--white-a05); border: none; color: var(--subtext); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; flex-grow: 1; text-wrap: auto; } /* Map Tabs Section */ .map-tabs-section { margin-bottom: var(--space-5); } .map-tabs-wrapper { display: flex; align-items: flex-end; gap: var(--space-2); margin-bottom: var(--space-4); } .map-tabs { display: flex; gap: 0; overflow-x: auto; flex: 1; } /* Quest Requirements Dialog Stats */ .map-tab { background: var(--neutral-900); border: 1px solid var(--white-a05); color: var(--subtext); padding: var(--space-3) var(--space-4); cursor: pointer; font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-bold); display: flex; align-items: center; white-space: nowrap; position: relative; transition: all var(--transition-normal); } .map-tab::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: transparent; transition: all 0.15s; } .map-tab:hover { background: #111113; color: var(--text); } .map-tab.active { --btn-x: 50%; --btn-y: 50%; background: radial-gradient(circle 200px at var(--btn-x) var(--btn-y), var(--accent-glow) 0%, transparent 100%), linear-gradient(180deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-deep-rgb), 0.98) 100%); color: var(--accent-cta-fg); border: 1px solid var(--accent-a30); border-top: 1px solid var(--accent-glow); border-bottom: none; box-shadow: inset 0 1px 0 var(--white-a15), 0 2px 8px var(--black-a30); } .map-tab.active::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, var(--white-a10) 0%, transparent 100%); pointer-events: none; } .map-tab.active::after { background: linear-gradient(90deg, transparent, var(--text-highlight), transparent); } .map-tab-notification { position: absolute; top: 2px; right: 2px; background: var(--red-500); color: var(--white); font-size: var(--fs-xs); font-weight: var(--fw-bold); width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pulse 2s infinite; z-index: 10; pointer-events: none; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } .quests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); gap: var(--space-4); } .quest-card { background: var(--neutral-850); border: none; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding: var(--space-6); position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 12.5rem; transition: all 0.15s; } /* Gradient top border */ .quest-card::before, .quest-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; } .quest-card::before { background: linear-gradient(90deg, transparent, var(--accent-a40), transparent); } .quest-card::after { background: linear-gradient(90deg, transparent, var(--accent-400), transparent); opacity: 0; transition: opacity 0.25s ease; } .quest-card:hover::after { opacity: 1; } .quest-card.completed { opacity: 0.5; } .quest-card.completed:hover { opacity: 0.6; } /* NEW badge for newly unlocked quests */ .quest-new-badge { position: absolute; top: -2px; left: -0.25rem; background: linear-gradient(135deg, var(--red-500), var(--red-600)); color: var(--white); font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 3px var(--space-4); border-radius: var(--radius-sm); padding-bottom: 1px; } @keyframes newBadgePulse { 0%, 100% { transform: rotate(3deg) scale(1); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4); } 50% { transform: rotate(3deg) scale(1.05); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6); } } /* Quest card colors removed - using neutral colors for all cards */ .quest-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-2); } .quest-name { font-weight: var(--fw-semibold); font-size: var(--fs-xl); color: var(--white); flex: 1; line-height: 1.3; display: flex; align-items: center; gap: var(--space-2); } .quest-unlock-timer { display: inline-flex; align-items: center; padding: 2px var(--space-2); background: rgba(255, 193, 7, 0.2); border: 1px solid var(--amber-400); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--amber-400); white-space: nowrap; } .quest-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-3); } .quest-trader { font-size: var(--fs-base); color: var(--subtext); margin-bottom: var(--space-2); text-transform: uppercase; font-weight: var(--fw-semibold); } .quest-objectives { margin-top: var(--space-3); margin-bottom: var(--space-3); } .quest-objectives-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: var(--space-2) var(--space-3); background: var(--white-a03); border: none; border-radius: var(--radius-sm); transition: all var(--transition-normal); } .quest-objectives-header:hover { background: var(--white-a05); } .quest-objectives-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text); display: flex; align-items: center; gap: var(--space-2); } .objectives-toggle-icon { font-size: var(--fs-sm); color: var(--subtext); } .objectives-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); max-height: 31.25rem; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; opacity: 1; margin-top: var(--space-3); } .objectives-list.collapsed { max-height: 0; opacity: 0; margin-top: 0; } .objectives-list li { font-size: var(--fs-base); color: var(--subtext); line-height: 1.4; padding-left: var(--space-4); position: relative; } /* Quest Notes Section */ .quest-notes { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); background: var(--accent-a10); border: none; border-left: 2px solid var(--accent-300); /* slim tip style, matches .help-note / input edge */ border-radius: 0; display: flex; gap: var(--space-3); align-items: flex-start; } .quest-notes-icon { color: var(--accent-400); font-size: var(--fs-lg); flex-shrink: 0; margin-top: 2px; } .quest-notes-text { color: var(--text-secondary); font-size: var(--fs-base); line-height: 1.5; flex: 1; font-weight: var(--fw-semibold); } /* Quest Shopping List Section */ .quest-shopping-list { margin-top: var(--space-3); margin-bottom: var(--space-3); background: var(--white-a03); border: none; border-radius: var(--radius-sm); overflow: hidden; } .shopping-list-header { background: transparent; padding: var(--space-2) var(--space-3); border-bottom: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all var(--transition-normal); } .shopping-list-header:hover { background: var(--white-a03); } .shopping-list-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-highlight); display: flex; align-items: center; gap: var(--space-2); } .shopping-toggle-icon { font-size: var(--fs-sm); color: var(--subtext); } .shopping-list-items { padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); max-height: 31.25rem; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; opacity: 1; } .shopping-list-items.collapsed { max-height: 0; opacity: 0; padding: 0 var(--space-2); } .shopping-list-item { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-2); background: var(--white-a03); border-radius: var(--radius-sm); transition: background 0.2s ease; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .shopping-list-item:hover { background: var(--white-a05); } .shopping-item-name { color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-semibold); flex: 1; font-weight: var(--fw-bold); } .shopping-item-trader { color: var(--text-highlight); font-size: var(--fs-sm); font-weight: var(--fw-semibold); background: var(--accent-a10); padding: 3px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; } .objectives-list li::before { content: "•"; position: absolute; left: 0; color: var(--text-highlight); font-weight: var(--fw-bold); } .quest-items { margin-top: var(--space-2); margin-bottom: var(--space-2); border-top: none; } .quest-items-title { font-size: var(--fs-sm); color: var(--subtext); font-weight: var(--fw-bold); margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); } .items-list { display: flex; flex-wrap: wrap; gap: var(--space-1); } .item-tag { background: var(--white-a05); color: var(--subtext); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-semibold); border: none; white-space: nowrap; transition: all var(--transition-fast); } .item-tag:hover { background: var(--white-a10); } /* Quest Unlocks Section */ .quest-unlocks { margin-top: var(--space-2); margin-bottom: var(--space-3); padding-top: var(--space-2); border-top: none; } .quest-unlocks-title { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-semibold); margin-bottom: var(--space-1); display: flex; align-items: center; gap: var(--space-2); } .unlocks-text { font-size: var(--fs-sm); color: var(--text); font-style: italic; line-height: 1.3; margin-bottom: var(--space-3); } .unlock-link { color: var(--text-highlight); text-decoration: none; font-style: normal; font-weight: var(--fw-semibold); } .unlock-link:hover { text-decoration: underline; } /* Quest Auto-Complete Section */ .quest-autocomplete { margin-top: var(--space-2); margin-bottom: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--post-border); } .quest-autocomplete-title { font-size: var(--fs-sm); color: var(--accent-400); font-weight: var(--fw-semibold); margin-bottom: var(--space-1); display: flex; align-items: center; gap: var(--space-2); } .autocomplete-text { font-size: var(--fs-sm); color: var(--text); font-style: italic; line-height: 1.3; margin-bottom: var(--space-3); } .quest-locked { background: rgba(239, 68, 68, 0.12); /* --red-500 tint */ border: none; border-left: 2px solid var(--red-500); border-radius: 0; padding: var(--space-2) var(--space-4); margin: var(--space-3) 0; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--red-100); display: flex; align-items: center; gap: var(--space-2); } .quest-locked i { color: var(--red-500); } .quest-locked i { font-size: var(--fs-base); } .wiki-link, .quest-images-btn, .quest-fix-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-1) var(--space-2); width: 2.25rem; height: 1.5rem; background: var(--white-a05); border: none; border-radius: var(--radius-sm); color: var(--subtext); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: all var(--transition-fast); gap: var(--space-1); } .wiki-link:hover, .quest-images-btn:hover, .quest-fix-btn:hover { background: var(--text-highlight); color: var(--header-bg); } .quest-level-req { background: var(--white-a05); border: 1px solid var(--border-medium); color: var(--text-muted); padding: 2px var(--space-2); border-radius: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); border: 1px solid var(--post-border); white-space: nowrap; } .loading { grid-column: 1/-1; text-align: center; padding: var(--space-16) var(--space-10); font-size: var(--fs-xl); opacity: 0.7; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 12.5rem; } .completed-quest { opacity: 0.8; } /* Mobile Menu Toggle Button */ .mobile-menu-toggle { display: none; background: var(--text-highlight); border: none; border-radius: var(--radius-md); width: 2.75rem; height: 2.75rem; color: var(--black); font-size: var(--fs-xl); cursor: pointer; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 1001; } .mobile-menu-toggle:hover { background: var(--text-alt-highlight); transform: scale(1.05); } .mobile-menu-toggle:active { transform: scale(0.95); } /* Mobile Menu Overlay */ .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 999; backdrop-filter: blur(4px); } .mobile-menu-overlay.active { display: block; } /* Prevent body scroll when menu is open */ body.menu-open { overflow: hidden; } /* Desktop-only elements */ .desktop-only { display: block; } .mobile-only { display: none; } /* Profile Cards Container */ .profile-cards-container { display: flex; flex-direction: column; gap: var(--space-5); } /* Profile Card */ .profile-card { background: var(--neutral-900); border: 1px solid var(--white-a05); padding: var(--space-6); transition: all 0.15s; position: relative; overflow: hidden; } /* Gradient top border */ .profile-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-a40), transparent); transition: all 0.15s; } .profile-card:hover::before { background: linear-gradient(90deg, transparent, var(--accent-400), transparent); } .profile-card h3, .profile-card h4 { color: var(--text-highlight); margin-bottom: var(--space-4); } .profile-card h3 { font-size: var(--fs-xl); border-bottom: none; padding-bottom: var(--space-3); } .profile-card h4 { font-size: var(--fs-lg); } .profile-card-info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); } /* Username change warning - tip/note language: 2px left edge + subtle fill, squared */ .username-warning { background: var(--accent-a10); border-left: 2px solid var(--amber-400); border-radius: 0; padding: var(--space-3) var(--space-4); color: var(--amber-400); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--space-4); } .username-warning i { margin-right: var(--space-2); } /* ---------------- Profile page layout & fields ---------------- */ .profile-page { padding: var(--space-8) var(--space-5); display: flex; justify-content: center; } .profile-page-inner { max-width: 50rem; width: 100%; } /* Loading / error full-section states */ .profile-state { padding: var(--space-16); text-align: center; } .profile-state-error { color: var(--red-500); } /* Field label + value (Account Information card) */ .profile-field-label { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); } .profile-field-value { color: var(--white); font-size: var(--fs-lg); font-weight: var(--fw-semibold); } /* Flex row for email / input+button groups */ .profile-field-row, .profile-input-row { display: flex; align-items: center; gap: var(--space-3); } /* Stacked input rows (e.g. Change Email card) get breathing room */ .profile-input-row + .profile-input-row { margin-top: var(--space-3); } .profile-input-row input[type=text], .profile-input-row input[type=email], .profile-input-row input[type=password] { flex: 1; } /* Email reveal */ .profile-email { font-size: var(--fs-lg); color: var(--white); } .profile-email.is-masked { color: var(--text-muted); } .profile-email-toggle { background: var(--white-a05); border: none; color: var(--text-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: var(--fs-sm); transition: all var(--transition-fast); } .profile-email-toggle:hover { background: var(--white-a10); color: var(--white); } /* Descriptions & hints */ .profile-desc { color: var(--text-muted); font-size: var(--fs-base); margin-bottom: var(--space-4); line-height: 1.5; } .profile-hint { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); } /* Profile colour picker */ .profile-color-swatch { width: 5rem; height: 2.5rem; flex: 0 0 auto; cursor: pointer; border: 1px solid var(--white-a10); border-radius: var(--radius-sm); background: transparent; padding: 0; } .profile-color-hex { flex: 1; font-family: monospace; } /* Success confirmation line + links */ .profile-success { margin-top: var(--space-3); color: var(--green-500); font-size: var(--fs-base); } .profile-success a { color: var(--accent-400); text-decoration: none; font-weight: var(--fw-semibold); } .profile-success a.is-twitch { color: var(--twitch-purple); } /* Full-width button inside a profile card */ .profile-save-btn-block { width: 100%; } /* Inline spinner while editor list loads */ .profile-loading { text-align: center; padding: var(--space-5); } .profile-loading i { font-size: var(--fs-2xl); color: var(--accent-400); } /* Danger Zone card (account deletion) - red top edge + heading */ .profile-card-danger::before, .profile-card-danger:hover::before { background: linear-gradient(90deg, transparent, var(--red-500), transparent); } .profile-card-danger h4 { color: var(--red-500); } /* ============================================ RANKINGS TABLE - TACTICAL STYLED ============================================ */ #rankings-table-wrapper > div { background: var(--neutral-850); /* matches .quest-card */ border: 1px solid var(--accent-a10); border-radius: var(--radius-lg); box-shadow: 0 4px 24px var(--black-a50), 0 0 40px rgba(var(--accent-rgb), 0.03), inset 0 1px 0 var(--white-a03); } #rankings-table-wrapper thead tr { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(var(--accent-rgb), 0.02) 50%, rgba(var(--accent-rgb), 0.06) 100%); border-bottom: 1px solid var(--accent-a20); } #rankings-table-wrapper th { color: var(--accent-500) !important; font-weight: var(--fw-bold) !important; font-size: var(--fs-sm) !important; text-transform: uppercase !important; letter-spacing: 1px !important; } /* Row styling */ #rankings-table-wrapper tbody tr { transition: background 0.2s ease !important; } #rankings-table-wrapper tbody tr:hover { background: linear-gradient(90deg, var(--accent-a10) 0%, rgba(var(--accent-rgb), 0.02) 50%, transparent 100%) !important; box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), 0.6); } /* Current user row styling */ #rankings-table-wrapper tbody tr.current-user-row { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 50%, var(--accent-a10) 100%) !important; box-shadow: inset 3px 0 0 var(--accent-300); } /* Rank cell glow */ #rankings-table-wrapper td[data-label=Rank] { text-shadow: 0 0 10px currentColor; } /* Player name hover effect */ #rankings-table-wrapper td[data-label=Player] a:hover { text-shadow: 0 0 12px currentColor; filter: brightness(1.2); } /* Prestige images: no glow (removed Jul 2026 by request) */ /* Avatar styling */ #rankings-table-wrapper td[data-label=Player] img { border: 2px solid var(--accent-a20) !important; box-shadow: 0 2px 8px var(--black-a30); } #rankings-table-wrapper tbody tr:hover td[data-label=Player] img { border-color: var(--accent-a40) !important; } /* Verified checkmark glow */ #rankings-table-wrapper td[data-label=Verified] i.fa-circle-check { filter: drop-shadow(0 0 6px rgba(33, 150, 243, 0.5)); } /* Medal effects: classes set by renderRankingsTable from the GLOBAL rank, so they only appear on the page that actually contains ranks 1-3 */ /* Gold rank 1 */ #rankings-table-wrapper tbody tr.medal-gold { background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.02) 30%, transparent 70%) !important; box-shadow: inset 3px 0 0 var(--medal-gold); } /* Silver rank 2 */ #rankings-table-wrapper tbody tr.medal-silver { background: linear-gradient(90deg, rgba(192, 192, 192, 0.06) 0%, rgba(192, 192, 192, 0.02) 30%, transparent 70%) !important; box-shadow: inset 3px 0 0 var(--medal-silver); } /* Bronze rank 3 */ #rankings-table-wrapper tbody tr.medal-bronze { background: linear-gradient(90deg, rgba(205, 127, 50, 0.06) 0%, rgba(205, 127, 50, 0.02) 30%, transparent 70%) !important; box-shadow: inset 3px 0 0 var(--medal-bronze); } /* ============================================ END RANKINGS TABLE STYLES ============================================ */ /* ============================================ RESPONSIVE STYLES FOR HD/FHD RESOLUTIONS ============================================ */ /* For screens 1400px and below (covers 1280x720 and similar) */ /* For screens 1200px and below (smaller HD monitors) */ /* For 1024px and below - compact mode for small laptops */ /* Height-based adjustments for 720p screens */ @media (max-height: 800px) { .sidebar-content { padding: var(--space-3); } .sidebar-section { padding: var(--space-2); margin-bottom: var(--space-1); } .sidebar-section-kappa-progress { padding: var(--space-2); } .sidebar-section-title { font-size: var(--fs-xs); margin-bottom: var(--space-2); } .level-sections-vertical { gap: var(--space-2); } .level-section-row { gap: var(--space-1); } .level-section-row label { font-size: var(--fs-xs); } .level-input { padding: var(--space-1) var(--space-2); font-size: var(--fs-sm); } .quest-mode-section { margin-top: var(--space-2) !important; } .quest-mode-label { font-size: var(--fs-sm); } .quest-mode-slider { width: 36px; height: 18px; } .quest-mode-slider::before { width: 14px; height: 14px; } .support-card .support-tagline { font-size: var(--fs-sm); margin-bottom: var(--space-1); } .support-card .support-details { font-size: var(--fs-xs); margin-bottom: var(--space-2); } .support-btn { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); } .sidebar-section-support { margin: 0 var(--space-2); padding: var(--space-2); } .sidebar-footer .reset-progress-btn { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); } } /* ============================================ END RESPONSIVE HD/FHD STYLES ============================================ */ @media (max-width: 768px) { /* Show mobile elements */ .mobile-menu-toggle { display: flex; } .mobile-only { display: block; } /* Hide desktop-only elements */ .desktop-only, .fix-quest-section, [href*=kappa-overview] { display: none !important; } /* Header Adjustments */ .main-header { flex-direction: row; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); gap: var(--space-3); flex-wrap: nowrap; } .header-left { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; } .header-left .nav { display: none; } .title { font-size: var(--fs-2xl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-brand-icon { width: 32px; height: 32px; } .header-brand-icon i { font-size: var(--fs-base); } .header-brand-title { font-size: var(--fs-base); letter-spacing: 2px; } .header-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .tarkov-time-container { display: none; } .user-info { display: none; } /* Hide dropdown on mobile, keep avatar */ .user-dropdown { position: relative; } /* App Container & Sidebar */ .app-container { flex-direction: column; } .sidebar { position: fixed; top: 0; left: -100%; width: 280px; height: 100vh; background: var(--post-bg); border-right: 2px solid var(--post-border); z-index: 1000; transition: left 0.3s ease; overflow-y: auto; scrollbar-gutter: stable; padding: 0; } .sidebar.mobile-active { left: 0; } .sidebar-content { flex-direction: column; gap: 0; padding: var(--space-6); } /* Add close button area to sidebar */ .sidebar::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: var(--fw-bold); position: sticky; top: 0; display: flex; align-items: center; justify-content: flex-end; padding: var(--space-4) var(--space-5); background: var(--header-bg); border-bottom: 1px solid var(--post-border); font-size: var(--fs-2xl); color: var(--text-highlight); z-index: 1001; cursor: pointer; } .sidebar::before:hover { color: var(--text-alt-highlight); } .sidebar-section { padding: var(--space-4); margin-bottom: var(--space-2); } .sidebar-section-kappa-progress { padding: var(--space-4); } .sidebar-section-title { margin-top: 0; margin-bottom: var(--space-3); } .support-btn { padding: var(--space-3) var(--space-4); font-size: var(--fs-base); } /* Mobile Navigation in Sidebar */ .mobile-nav-section { padding-top: 0 !important; padding-bottom: var(--space-5); } .mobile-sidebar-nav { display: flex; flex-direction: column; gap: var(--space-2); } .mobile-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-4); background: var(--white-a03); border: 1px solid var(--border-medium); border-left: 2px solid var(--neutral-700); /* input-system edge */ border-radius: 0; color: var(--subtext); text-decoration: none; font-size: var(--fs-base); font-weight: var(--fw-bold); transition: all var(--transition-normal); text-transform: uppercase; letter-spacing: 0.5px; } .mobile-nav-item:hover { background: var(--white-a05); color: var(--text-primary); border-left-color: var(--accent-400); transform: translateX(4px); } /* active = the gold CTA gradient from the button system */ body.content-ready .mobile-nav-item.active { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-deep-rgb), 0.98) 100%); border-color: var(--accent-a40); border-left-color: var(--accent-300); color: var(--accent-cta-fg); /* matches .btn-gold --btn-fg */ } .mobile-nav-item i { font-size: var(--fs-lg); width: 20px; text-align: center; } /* Mobile Help Submenu */ .mobile-help-submenu { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding-left: var(--space-4); } .mobile-nav-subitem { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--white-a03); border: 1px solid var(--border-medium); border-left: 2px solid var(--neutral-700); /* input-system edge */ border-radius: 0; color: var(--subtext); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: all var(--transition-normal); } .mobile-nav-subitem:hover { background: var(--white-a05); color: var(--text-primary); border-left-color: var(--accent-400); transform: translateX(4px); } .mobile-nav-subitem i { font-size: var(--fs-base); width: 16px; text-align: center; } /* Level sections */ .level-sections-inline { flex-direction: column; gap: var(--space-3); } .level-section { flex-direction: column; align-items: stretch; gap: var(--space-2); } .level-input { width: 100%; } .progress-section { min-width: auto; width: 100%; } .progress-bar { width: 100%; min-width: auto; } /* Main Content */ .main-content { padding: var(--space-4); overflow-y: auto; scrollbar-gutter: stable; } .content-with-sidebar { flex-direction: column; gap: var(--space-4); } .main-quests-area { width: 100%; } /* Right Sidebar */ .right-sidebar { width: 100%; order: -1; margin-bottom: var(--space-4); background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; } .right-sidebar-content { padding: 0 !important; } /* Quest Grid */ .quests-grid { grid-template-columns: 1fr; gap: var(--space-3); } .quest-card { padding: var(--space-4); min-height: auto; } .quest-name { font-size: var(--fs-lg); } .quest-trader { font-size: var(--fs-base); } .quest-objectives-title, .shopping-list-title { font-size: var(--fs-sm); } /* Map Tabs */ .map-tabs-wrapper { flex-wrap: nowrap; } .map-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .map-tab { padding: var(--space-2) var(--space-4); font-size: var(--fs-base); white-space: nowrap; } /* Navigation */ .nav { flex-direction: column; gap: var(--space-2); width: 100%; } .nav-link { width: 100%; justify-content: center; padding: var(--space-3) var(--space-4); } /* Dropdown Menus: popover menus anchor to their triggers on mobile just like desktop - only cap their width. (The old center-of-screen rule stays for legacy non-popover menus.) */ .dropdown-menu[popover] { max-width: calc(100vw - 1rem); } .dropdown-menu:not([popover]) { position: fixed !important; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 300px; z-index: 10001 !important; } .dropdown-menu:not([popover]).show { z-index: 10001 !important; } /* Hide desktop-only dropdown items on mobile */ .dropdown-menu .dropdown-item[id=fix-quests-tab], .dropdown-menu .dropdown-item[id=admin-dashboard-link] { display: none !important; } /* Collector Items */ .collector-grid { grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: var(--space-2); } .collector-item { padding: var(--space-2); } .collector-item-image { height: 60px; } .collector-item-name { font-size: var(--fs-xs); } /* Global Chat - Full Screen on Mobile */ .global-chat-box { width: 100vw; height: 100vh; max-height: 100vh; right: 0; bottom: 0; border-radius: 0; border: none; } .global-chat-btn { bottom: 20px; right: 20px; width: 56px; height: 56px; font-size: var(--fs-2xl); } .global-chat-messages { padding: var(--space-3); } .global-chat-input-area { padding: var(--space-3); } #global-chat-input { font-size: var(--fs-lg); } /* Dialogs */ .dialog-content { width: 95%; margin: var(--space-5); max-height: 85vh; } .dialog-header, .dialog-body, .dialog-footer { padding: var(--space-4); } .dialog-footer { flex-direction: column; gap: var(--space-2); } .dialog-btn { width: 100%; } /* Sidebar Footer Actions */ .sidebar-footer { padding: var(--space-3); } .sidebar-action-btn { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); } /* Buttons */ .complete-btn, .uncomplete-btn { padding: var(--space-2) var(--space-4); font-size: var(--fs-base); } .reset-btn, .collector-btn, .kappa-overview-btn { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); } /* User Avatar in Header */ .user-avatar-header, .default-avatar-initial { width: 40px; height: 40px; font-size: var(--fs-xl); } /* Site Banner - Hide on Mobile */ .site-banner { display: none !important; } /* Help Section (document pages) */ .help-section h3 { font-size: var(--fs-lg); } /* Rankings Section - Mobile */ /* Rankings header section */ .main-content > div[style*="padding: 20px"] > div[style*="display: flex"] { flex-direction: column !important; align-items: center !important; text-align: center !important; } .main-content > div[style*="padding: 20px"] > div[style*="display: flex"] > div:first-child { width: 100%; text-align: center; } .main-content > div[style*="padding: 20px"] > div[style*="display: flex"] > div:first-child h2 { text-align: center; font-size: var(--fs-2xl) !important; } .main-content > div[style*="padding: 20px"] > div[style*="display: flex"] > div:last-child { width: 100%; flex-direction: column !important; gap: var(--space-2) !important; } .main-content > div[style*="padding: 20px"] > div[style*="display: flex"] .quest-mode-toggle { width: 100%; justify-content: center; } /* Hide Lurk button on mobile */ .lurk-button, #lurk-button, .main-content .lurk-button, .main-content > div[style*="padding: 20px"] > div[style*="display: flex"] .lurk-button { display: none !important; } /* Rankings Table - Remove all default styling */ #rankings-table-wrapper > div { background: none !important; border: none !important; border-radius: 0 !important; overflow: visible !important; } #rankings-table-wrapper table { display: block; overflow-x: visible; background: none !important; border: none !important; } #rankings-table-wrapper thead { display: none; } #rankings-table-wrapper tbody { display: block; } #rankings-table-wrapper tr { display: flex !important; flex-direction: column; margin-bottom: var(--space-3); background: var(--neutral-950) !important; border: none !important; border-radius: var(--radius-md) !important; padding: var(--space-3) !important; } #rankings-table-wrapper td { display: flex !important; justify-content: space-between; align-items: center; padding: var(--space-2) 0 !important; border-bottom: 1px solid var(--white-a03) !important; width: 100% !important; } #rankings-table-wrapper td:last-child { border-bottom: none !important; } #rankings-table-wrapper td::before { content: attr(data-label); font-weight: var(--fw-semibold); color: rgba(255, 255, 255, 0.4); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.5px; } /* Rankings specific column styling */ #rankings-table-wrapper td:nth-child(1) { font-size: var(--fs-2xl) !important; padding: var(--space-3) 0 !important; } /* Player column - special layout */ #rankings-table-wrapper td:nth-child(3) { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: var(--space-3) !important; padding: var(--space-3) 0 !important; } /* Show "Player" label on mobile - left side */ #rankings-table-wrapper td:nth-child(3)::before { flex-shrink: 0; } #rankings-table-wrapper td:nth-child(3) > div { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: var(--space-2) !important; } /* Avatar on the far right */ #rankings-table-wrapper td:nth-child(3) img, #rankings-table-wrapper td:nth-child(3) > div > div:first-child { width: 40px !important; height: 40px !important; font-size: var(--fs-xl) !important; } /* Username and badges left of avatar (single-row player cell since Jul 2026) */ #rankings-table-wrapper td:nth-child(3) > div > div:last-child { justify-content: flex-end; flex-wrap: wrap; } /* Hide Tarkov.dev icon link + its separator on mobile */ #rankings-table-wrapper .tarkov-dev-sep, #rankings-table-wrapper .tarkov-dev-link { display: none !important; } /* Pagination on mobile */ .pagination-wrapper { flex-direction: column-reverse !important; gap: var(--space-4) !important; align-items: stretch !important; margin-top: var(--space-5) !important; } /* Pagination info text - move below buttons */ .pagination-info { text-align: center !important; order: 2; margin-top: var(--space-2); font-size: var(--fs-base) !important; } /* Pagination buttons container */ .pagination-buttons { display: flex !important; flex-wrap: nowrap !important; gap: var(--space-2) !important; justify-content: center !important; align-items: center !important; order: 1; } /* All pagination buttons */ .pagination-btn { padding: var(--space-3) var(--space-4) !important; font-size: var(--fs-lg) !important; min-width: 44px !important; flex-shrink: 0 !important; } /* Previous and Next buttons - hide text, show only icons */ .pagination-prev, .pagination-next { width: 50px !important; min-width: 50px !important; max-width: 50px !important; padding: var(--space-3) !important; overflow: hidden !important; text-indent: -9999px !important; position: relative !important; } /* Show icons in Previous/Next buttons */ .pagination-prev i, .pagination-next i { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; font-size: var(--fs-xl) !important; text-indent: 0 !important; } /* Center titles and subtitles for all sections */ .main-content h2, .main-content h3, .how-to-use h2, .nightbot-commands h2, .collector-items-tracker h2 { text-align: center !important; } /* Right Sidebar - Quest Requirements Collapsible on Mobile */ .right-sidebar-title { cursor: pointer; user-select: none; padding: var(--space-3) 0 !important; background: none !important; border: none !important; border-radius: 0 !important; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .right-sidebar-title::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text-highlight); transition: transform 0.3s; } .right-sidebar-title.collapsed::after { transform: rotate(-90deg); } .map-overview { max-height: 2000px; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; opacity: 1; margin-top: var(--space-3); background: none !important; border: none !important; padding: 0 !important; } .map-overview.collapsed { max-height: 0; opacity: 0; margin-top: 0; } /* Remove styling from overview-stats */ .right-sidebar .overview-stats { background: none !important; border: none !important; padding: 0 !important; } .right-sidebar .stat-item { background: none !important; border: 1px solid var(--post-border) !important; padding: var(--space-2) !important; margin-bottom: var(--space-2); } /* Quest Requirements in Cards - Make Foldable */ .quest-items { position: relative; } .quest-items-title { cursor: pointer; user-select: none; padding: var(--space-2); background: var(--post-bg-secondary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; } .quest-items-title::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: var(--fw-bold); font-size: var(--fs-xs); color: var(--text-highlight); transition: transform 0.3s; } .quest-items-title.collapsed::after { transform: rotate(-90deg); } .items-list { max-height: 500px; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; opacity: 1; margin-top: var(--space-2); } .items-list.collapsed { max-height: 0; opacity: 0; margin-top: 0; } /* Admin Panels - Show mobile message */ .admin-container { display: none; } .admin-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); } .nav-links { flex-direction: column; width: 100%; gap: var(--space-2); } .nav-links a { width: 100%; text-align: center; } /* Forms - Login/Register */ .auth-split-container { flex-direction: column; } .auth-info-side { padding: var(--space-8) var(--space-5); } .auth-brand h1 { font-size: var(--fs-2xl); } .auth-tagline { font-size: var(--fs-lg); } .auth-form-side { padding: var(--space-8) var(--space-5); } .feature-item { padding: var(--space-3); gap: var(--space-3); } /* Profile Content (Account Section) on Mobile */ #profile-content > div { padding: var(--space-4) !important; } #profile-content > div > div { max-width: 100% !important; } #profile-content h2 { font-size: var(--fs-2xl) !important; text-align: center !important; } #profile-content h3 { font-size: var(--fs-lg) !important; } #profile-content h4 { font-size: var(--fs-base) !important; } /* Profile Cards on Mobile */ .profile-cards-container { gap: var(--space-3) !important; } .profile-card { padding: var(--space-4) !important; } /* Account Information Grid on Mobile */ .profile-card-info { grid-template-columns: 1fr !important; gap: var(--space-3) !important; } /* Input groups with flex display */ #profile-content .profile-input-row, #profile-content .profile-field-row { flex-direction: column !important; align-items: stretch !important; gap: var(--space-2) !important; } /* Color picker */ #profile-color-picker { width: 100% !important; height: 60px !important; } /* Text inputs */ #profile-content input[type=text], #profile-content input[type=url], #profile-content textarea, #profile-content select { font-size: var(--fs-lg) !important; padding: var(--space-3) var(--space-4) !important; } /* Save buttons */ #profile-content button { width: 100% !important; padding: var(--space-4) var(--space-5) !important; font-size: var(--fs-lg) !important; margin-top: var(--space-2); } /* Specific buttons that should stay in flex */ #save-profile-color-btn, #save-twitch-btn, #save-tarkovdev-btn { width: 100% !important; } /* Profile Page */ .profile-split-container { flex-direction: column; } /* Utility Classes */ .text-center-mobile { text-align: center; } .full-width-mobile { width: 100%; } .hide-mobile { display: none !important; } /* ================= Mobile audit fixes (Jul 2026) ================= */ /* Collector Items: the desktop split-pane (absolute fill + inner scroll panes) collapsed to 0 height on mobile, hiding the whole item grid. Stack the panes and let the page scroll naturally. The panes carry inline styles, hence the !importants. */ /* (id-scoped: _mobile.scss compiles BEFORE _collector-items.scss, so plain class selectors here lose to the desktop base rules) */ /* NOTE: no display override here - the view switcher's inline display must keep working (section stays a flex column when shown) */ #collector-items.collector-items { position: static; overflow: visible; height: auto; } #collector-items .collector-split-container { display: block !important; /* inline style is a 2-col grid */ flex: none; /* desktop flex:1 1 0 collapses to 0 height here */ overflow: visible; max-height: none; } #collector-items .collector-needed, #collector-items .collector-found { overflow: visible !important; /* inline overflow-y:auto trapped the grid */ max-height: none; margin-bottom: var(--space-4); } /* Rankings header: the desktop 3-column grid (inline style) collapsed, squeezing the title to one word per line and clipping the Hall of Fame / Lurk buttons offscreen (which zoomed the whole page out). Stack it. */ #rankings-content .page-header { display: flex !important; flex-direction: column; align-items: stretch; } #rankings-content .page-header .mode-segmented { align-self: center; } #rankings-content .page-header > div:last-child { justify-content: center !important; } /* Player stats: the 2x2 input grid overlaps itself at drawer width (mode tag over the character button) - single column */ .level-sections-vertical { grid-template-columns: 1fr; } /* Drawer: one scroller (the drawer itself) instead of a nested scrollbar inside .sidebar-content, and hide the scrollbar */ .sidebar { scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } .sidebar-content { overflow-y: visible; flex: none; } /* Hall of Fame: 75cqh figures were near full-screen; smaller so the lineup reads as a row (initial scroll centers rank #1, see hall-of-fame.ts) */ .hof-render { height: 55cqh; } /* Chat: a long pinned message could eat half the panel - clamp it and scroll internally */ #global-chat-pinned-container .global-chat-bubble { max-height: 8rem; overflow-y: auto; } /* Map tab rows: fade hint that more tabs are scrollable to the right */ .map-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); } } /* Reset Button Styles */ /* Report Bug button - red theme */ .report-bug { background: linear-gradient(180deg, rgba(140, 50, 50, 0.95) 0%, rgba(100, 35, 35, 0.98) 100%); color: var(--red-100); border: 1px solid rgba(244, 67, 54, 0.3); border-top: 1px solid rgba(255, 120, 120, 0.4); } .report-bug::after { background: radial-gradient(circle 250px at var(--btn-x) var(--btn-y), rgba(255, 150, 150, 0.6) 0%, transparent 100%); } .report-bug:hover { color: var(--red-100); } /* Request Feature button - green theme */ .request-feature { background: linear-gradient(180deg, rgba(50, 130, 60, 0.95) 0%, rgba(35, 100, 45, 0.98) 100%); color: var(--green-200); border: 1px solid rgba(76, 175, 80, 0.3); border-top: 1px solid rgba(100, 200, 130, 0.4); } .request-feature::after { background: radial-gradient(circle 250px at var(--btn-x) var(--btn-y), rgba(120, 255, 160, 0.6) 0%, transparent 100%); } .request-feature:hover { color: var(--green-200); } /* Dialog Styles - native elements since Jul 2026. The dialog element itself is a transparent full-viewport flex wrapper (the existing .dialog-content markup stays untouched, and clicking outside the panel targets the dialog = light dismiss in src/shared/menus.ts); ::backdrop carries the dim. ESC and focus trapping are native. */ dialog.dialog-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; padding: 0; margin: 0; border: none; background: transparent; display: none; justify-content: center; align-items: center; overflow: hidden; } dialog.dialog-overlay[open] { display: flex; animation: dialogOverlayFadeIn 180ms ease-out; } dialog.dialog-overlay::backdrop { /* Heavier than --scrim: dialogs nearly black out the page behind them */ background: rgba(13, 13, 15, 0.97); } @keyframes dialogOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } } .dialog-content { background: var(--neutral-850); border: 1px solid var(--white-a05); max-width: 31.25rem; width: 90%; max-height: 80vh; overflow-y: auto; scrollbar-gutter: stable; animation: dialogContentSlideIn 200ms ease-out; position: relative; } /* Gradient top border for dialogs */ .dialog-content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-400), transparent); z-index: 1; } @keyframes dialogContentSlideIn { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .dialog-header { padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--border-medium); background: transparent; display: flex; justify-content: space-between; align-items: center; } .dialog-close-btn { background: none; border: none; color: var(--subtext); font-size: var(--fs-lg); cursor: pointer; padding: var(--space-2); border-radius: var(--radius-sm); transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; } .dialog-close-btn:hover { background: var(--accent-a10); color: var(--text-highlight); } .dialog-header h3 { color: var(--text-primary); font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0; text-align: left; } .dialog-header h3 i { color: var(--accent-400); margin-right: var(--space-2); } .dialog-body { padding: var(--space-6); line-height: 1.6; color: var(--text-secondary); } .dialog-body p { margin-bottom: var(--space-4); color: var(--neutral-200); line-height: 1.7; } .dialog-body ul { margin: var(--space-4) 0; padding-left: var(--space-6); color: var(--neutral-200); } .dialog-body li { margin-bottom: var(--space-2); line-height: 1.6; } .dialog-body strong { color: var(--text-highlight); font-weight: var(--fw-bold); } .dialog-footer { padding: var(--space-4) var(--space-6) var(--space-6); display: flex; gap: var(--space-3); justify-content: flex-end; border-top: 1px solid var(--white-a05); background: var(--black-a30); } /* Bulk Complete Prerequisites Dialog */ .bulk-prereq-list { max-height: 18.75rem; overflow-y: auto; scrollbar-gutter: stable; margin: var(--space-4) 0; border: 1px solid var(--white-a10); border-radius: var(--radius-md); background: var(--black-a30); } .bulk-prereq-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--white-a05); } .bulk-prereq-item:last-child { border-bottom: none; } .bulk-prereq-trader-icon { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); object-fit: cover; } .bulk-prereq-name { flex: 1; color: #e8e6e3; font-size: var(--fs-base); } .bulk-prereq-level { color: var(--accent-500); font-size: var(--fs-sm); padding: 2px var(--space-2); background: rgba(157, 139, 110, 0.15); border-radius: var(--radius-sm); } /* Form Fields in Dialogs */ .form-field { margin-bottom: var(--space-4); } .form-label { display: block; color: var(--text-highlight); font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); } .form-error { color: var(--red-500); font-size: var(--fs-sm); margin-bottom: var(--space-2); } .form-success { color: var(--green-500); font-size: var(--fs-sm); margin-bottom: var(--space-2); } .suggestions-dropdown { max-height: 9.375rem; overflow-y: auto; scrollbar-gutter: stable; background: var(--black-a50); border: 1px solid var(--white-a10); margin-top: var(--space-2); } /* Dialog Input Overrides - High Contrast */ .dialog-body label { color: var(--neutral-400) !important; } .dialog-body h4 { color: var(--text-highlight) !important; border-color: var(--white-a10) !important; } /* Quest name display in dialog */ .quest-name-display { font-size: var(--fs-xl); color: var(--text-highlight); font-weight: var(--fw-semibold); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--post-bg-secondary); border-left: 3px solid var(--text-highlight); border-radius: var(--radius-sm); } /* Mobile Responsiveness for Dialog */ @media (max-width: 768px) { .dialog-content { width: 95%; margin: var(--space-5); } .dialog-header, .dialog-body, .dialog-footer { padding: var(--space-4); } .dialog-footer { flex-direction: column; } .dialog-btn { width: 100%; margin-bottom: var(--space-2); } .dialog-btn:last-child { margin-bottom: 0; } } /* Collector Items Styles */ .collector-items { padding: var(--space-8) var(--space-5); position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; } .collector-items > div:first-child { flex-shrink: 0; } .collector-split-container { flex: 1 1 0; min-height: 0; max-height: 100%; overflow: hidden; } .collector-needed, .collector-found { min-height: 0; max-height: 100%; } .collector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: var(--space-2); margin-top: var(--space-4); } .collector-item { background: var(--neutral-900); border: 1px solid var(--white-a05); padding: var(--space-2); cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); position: relative; overflow: hidden; } /* Gradient top border */ .collector-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-a30), transparent); transition: all 0.15s; } .collector-item:hover { transform: translateY(-2px); } .collector-item:hover::before { background: linear-gradient(90deg, transparent, var(--accent-400), transparent); } .collector-item.found { background: rgba(34, 197, 94, 0.03); } .collector-item.found::before { background: linear-gradient(90deg, transparent, var(--green-500), transparent); } .collector-item.needed { border-color: var(--white-a05); } .collector-item-image { width: 100%; height: 4.375rem; object-fit: contain; background: var(--black-a30); border-radius: var(--radius-sm); padding: var(--space-1); } .collector-item-name { font-size: var(--fs-xs); color: var(--text); text-align: center; line-height: 1.1; font-weight: var(--fw-semibold); max-height: 2.2rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .collector-item-count { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--black-a80); color: var(--text-highlight); padding: 2px var(--space-2); border-radius: var(--radius-lg); font-size: var(--fs-xs); font-weight: var(--fw-semibold); } .collector-item-check { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(34, 197, 94, 0.9); color: var(--white); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); } .collector-context-menu { position: fixed; background: var(--bg-surface); border: 1px solid var(--border-medium); border-top: 2px solid var(--accent-a30); border-radius: 0; padding: var(--space-2) 0; z-index: 10000; box-shadow: 0 4px 16px var(--black-a50); min-width: 15.625rem; } .context-menu-item { padding: var(--space-3) var(--space-4); cursor: pointer; display: flex; align-items: center; gap: var(--space-3); color: var(--text); transition: all 0.2s; font-size: var(--fs-base); font-weight: var(--fw-bold); } .context-menu-item:hover { background: var(--accent-a10); color: var(--text-highlight); } .context-menu-item i { width: 1rem; text-align: center; color: var(--text-highlight); } /* Fix Quest Card Styles */ .fix-quest-card { background: var(--neutral-900); border: 1px solid var(--white-a05); padding: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; min-height: auto; gap: var(--space-2); transition: all 0.15s; position: relative; overflow: hidden; } /* Gradient top border - use ::after for animated hover state */ .fix-quest-card::before, .fix-quest-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; } .fix-quest-card::before { background: linear-gradient(90deg, transparent, var(--accent-a30), transparent); } .fix-quest-card::after { background: linear-gradient(90deg, transparent, var(--accent-400), transparent); opacity: 0; transition: opacity 0.25s ease; } .fix-quest-card:hover::after { opacity: 1; } .fix-quest-card.completed { opacity: 0.6; } .fix-quest-card.completed::before { background: linear-gradient(90deg, transparent, var(--green-500), transparent); } .fix-quest-card.completed::after { background: linear-gradient(90deg, transparent, var(--green-500), transparent); } .fix-quest-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-highlight); line-height: 1.4; word-wrap: break-word; width: 100%; margin-bottom: var(--space-2); } .fix-quest-card .level-badge, .fix-quest-card .trader-badge, .fix-quest-card .map-badge, .fix-quest-card .kappa-badge { padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); white-space: nowrap; } .fix-quest-btn { width: 100%; padding: var(--space-3); font-size: var(--fs-base); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.5px; margin-top: auto; background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-deep-rgb), 0.98) 100%); /* .btn-gold */ border: 1px solid var(--accent-a30); border-top: 1px solid var(--accent-glow); border-radius: 0; color: var(--accent-cta-fg); cursor: pointer; transition: box-shadow 0.25s ease, filter 0.25s ease; box-shadow: inset 0 1px 0 var(--white-a20), 0 2px 8px var(--black-a30); } .fix-quest-btn:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 var(--white-a20), 0 4px 16px var(--accent-a30); } /* (An earlier mobile fix for the collector split-pane lived here - it never took effect because the pane's flex-basis 0 kept the height at 0, and its max-height:400px overrode the working rules. The real mobile handling is in _mobile.scss under "Mobile audit fixes".) */ /* Quest Items Page Styles */ .quest-items { overflow-y: auto; scrollbar-gutter: stable; height: 100%; } .quest-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--space-3); } .quest-item { background: var(--post-bg-secondary); border: 1px solid var(--white-a05); border-radius: 0; padding: var(--space-2); padding-top: var(--space-3); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; transition: background 0.2s ease; } .quest-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--text-highlight), transparent); } .quest-item:hover { background: var(--white-a03); } .quest-item-image { width: 100%; height: 5rem; object-fit: contain; background: var(--black-a30); border-radius: var(--radius-sm); padding: var(--space-1); } .quest-item-name { font-size: var(--fs-xs); color: var(--text); text-align: center; line-height: 1.2; font-weight: var(--fw-semibold); max-height: 2.4rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .quest-item-count { position: absolute; top: 0.375rem; right: 0.375rem; background: rgba(var(--accent-2-rgb), 0.9); color: var(--black); padding: 3px var(--space-2); border-radius: var(--radius-lg); font-size: var(--fs-sm); font-weight: var(--fw-bold); } @media (max-width: 768px) { .quest-items { padding: var(--space-4); } .quest-items-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; gap: var(--space-2); } .quest-item { padding: var(--space-2); } .quest-item-image { height: 60px; } .quest-item-name { font-size: var(--fs-xs); } .quest-item-count { padding: 2px var(--space-2); font-size: var(--fs-xs); } } /* Quest Item clickable styling */ .quest-item { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .quest-item:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(var(--accent-2-rgb), 0.25); } .quest-item-hidden { opacity: 0.4; border-color: var(--border-subtle); } .quest-item-hidden-badge { position: absolute; top: 0.375rem; left: 0.375rem; background: rgba(239, 68, 68, 0.9); color: var(--white); width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); } /* Quest Item Dialog */ .quest-item-dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: var(--space-5); backdrop-filter: blur(4px); } .quest-item-dialog { background: var(--post-bg); border: 2px solid var(--post-border); border-radius: var(--radius-lg); max-width: 28.125rem; width: 100%; padding: var(--space-6); position: relative; box-shadow: 0 10px 40px var(--black-a50); } .quest-item-dialog-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--subtext); font-size: var(--fs-xl); cursor: pointer; padding: var(--space-2); transition: color 0.2s; } .quest-item-dialog-close:hover { color: var(--text-highlight); } .quest-item-dialog-header { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--accent-a20); } .quest-item-dialog-image { width: 5rem; height: 5rem; object-fit: contain; background: var(--black-a30); border-radius: var(--radius-md); padding: var(--space-2); border: 1px solid var(--post-border); } .quest-item-dialog-info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .quest-item-dialog-info h3 { color: var(--text-highlight); font-size: var(--fs-xl); margin: 0 0 var(--space-2) 0; } .quest-item-dialog-count { color: var(--subtext); font-size: var(--fs-base); margin: 0; } .quest-item-dialog-count strong { color: var(--text-highlight); } .quest-item-dialog-quests h4 { color: var(--text); font-size: var(--fs-base); margin: 0 0 var(--space-3) 0; display: flex; align-items: center; gap: var(--space-2); } .quest-item-dialog-quests h4 i { color: var(--text-highlight); } .quest-item-dialog-quests ul { list-style: none; padding: 0; margin: 0; max-height: 12.5rem; overflow-y: auto; scrollbar-gutter: stable; } .quest-item-dialog-quests li { color: var(--subtext); padding: var(--space-2) var(--space-3); background: var(--black-a30); border-radius: var(--radius-md); margin-bottom: var(--space-2); font-size: var(--fs-base); display: flex; align-items: center; gap: var(--space-2); } .quest-item-dialog-quests li i { color: var(--text-highlight); font-size: var(--fs-xs); } .quest-item-dialog-admin { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--accent-a20); } .quest-item-hide-btn { width: 100%; padding: var(--space-3) var(--space-4); background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.5); border-radius: var(--radius-md); color: var(--red-500); font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--space-2); transition: all 0.2s; } .quest-item-hide-btn:hover { background: rgba(239, 68, 68, 0.3); } .quest-item-hide-btn.unhide { background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.5); color: var(--green-500); } .quest-item-hide-btn.unhide:hover { background: rgba(34, 197, 94, 0.3); } .quest-item-admin-note { color: var(--subtext); font-size: var(--fs-sm); margin: var(--space-2) 0 0 0; text-align: center; } .quest-item-admin-note i { margin-right: var(--space-1); } @media (max-width: 768px) { .quest-item-dialog { max-width: 100%; margin: var(--space-2); padding: var(--space-5); } .quest-item-dialog-header { flex-direction: column; align-items: center; text-align: center; } .quest-item-dialog-image { width: 100px; height: 100px; } } /* How to Use / Nightbot Commands - document-style reading pages Plain single-column documents: no card-in-card, no per-subsection backgrounds or borders. Sections are separated by whitespace and a subtle top rule; only code blocks and slim tip notes stay distinct. */ /* Document-style pages share ONE padding/scroll treatment */ .how-to-use, .nightbot-commands, .boss-spawns, .changelog, .character-select, .rankings { padding: var(--space-8) var(--space-5); overflow-y: auto; scrollbar-gutter: stable; height: 100%; } /* Single comfortable reading column, left-aligned under the page header */ .help-doc { max-width: 52rem; margin: 0 auto; width: 100%; } /* Subsections are plain document blocks - no boxes */ .help-section { margin-bottom: var(--space-5); } /* Subtle rule between top-level subsections instead of card borders */ .help-section + .help-section { border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); } .help-section h3 { color: var(--text-highlight); font-size: var(--fs-xl); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); } .help-section h4 { color: var(--text-highlight); font-size: var(--fs-lg); margin-top: var(--space-4); margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); } .help-section p { color: var(--text-secondary); font-size: var(--fs-base); line-height: 1.6; margin-bottom: var(--space-3); } .help-section ul, .help-section ol { color: var(--text-secondary); font-size: var(--fs-base); line-height: 1.6; margin-left: var(--space-5); margin-bottom: var(--space-3); } .help-section li { margin-bottom: var(--space-1); } /* Lighter list lead-ins - keep gold but drop the heavy bold weight */ .help-section strong { color: var(--text-primary); font-weight: var(--fw-semibold); } .help-section code { background: var(--white-a05); padding: 2px var(--space-2); border-radius: var(--radius-sm); color: var(--text-primary); font-family: "Courier New", monospace; font-size: var(--fs-base); } /* Plain document block - no card, no top gradient */ .help-subsection { margin: var(--space-4) 0; } /* Slim tip note: a 2px gold left edge + faint fill, not a heavy box */ .help-note { background: var(--accent-a10); border-left: 2px solid var(--accent-300); padding: var(--space-2) var(--space-3); margin-top: var(--space-3); display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-base); line-height: 1.6; color: var(--text-secondary); } .help-note i { color: var(--text-highlight); font-size: var(--fs-base); margin-top: 3px; } .help-note strong { color: var(--text-primary); font-weight: var(--fw-semibold); } /* Page credit line - plain, separated by a subtle rule */ .help-footer { text-align: center; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); } @media (max-width: 768px) { .help-section h3 { font-size: var(--fs-lg); } } /* ============================================================================ STANDARD PAGE HEADER (Jul 2026) One header component for every page section so they all read the same: left-aligned Font Awesome icon + title on one line, an optional (count) meta suffix, an optional subtitle line, and a subtle bottom divider. Markup:

Title (0/41)

...

============================================================================ */ .page-header { margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-medium); } .page-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.2; color: var(--text-primary); } .page-title i { color: var(--accent-400); } .page-title-meta { color: var(--text-muted); font-size: var(--fs-lg); font-weight: var(--fw-regular); } .page-subtitle { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-base); line-height: 1.5; } /* Changelog Section Styles */ .changelog-container { max-width: 56.25rem; margin: 0 auto; } .changelog-entries { display: flex; flex-direction: column; gap: var(--space-5); } .changelog-entry { display: flex; gap: var(--space-5); background: var(--neutral-900); border: 1px solid var(--white-a05); padding: var(--space-5); position: relative; overflow: hidden; } /* Gradient left border accent */ .changelog-entry::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, rgba(var(--accent-2-rgb), 0.6), var(--accent-a20)); } .changelog-date { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 3.75rem; padding-top: var(--space-1); } .changelog-month { color: var(--text-highlight); font-size: var(--fs-base); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; } .changelog-day { color: var(--text-highlight); font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1; margin: var(--space-1) 0; } .changelog-year { color: var(--subtext); font-size: var(--fs-sm); } .changelog-content { flex: 1; } .changelog-version { color: var(--text-highlight); font-size: var(--fs-xl); margin-bottom: var(--space-3); font-weight: var(--fw-semibold); } .changelog-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .changelog-item { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--subtext); font-size: var(--fs-lg); line-height: 1.5; } .changelog-item i { margin-top: 3px; font-size: var(--fs-base); flex-shrink: 0; } /* Feature - green */ .changelog-item.changelog-feature i { color: var(--green-500); } /* Fix - orange/amber */ .changelog-item.changelog-fix i { color: var(--amber-400); } /* Improvement - blue */ .changelog-item.changelog-improvement i { color: #3b82f6; } /* Removal - red */ .changelog-item.changelog-removal i { color: var(--red-500); } @media (max-width: 768px) { .changelog { padding: var(--space-5) var(--space-4); } .changelog-entry { flex-direction: column; gap: var(--space-3); padding: var(--space-4); } .changelog-date { flex-direction: row; gap: var(--space-2); align-items: baseline; } .changelog-day { font-size: var(--fs-2xl); margin: 0; } .changelog-month, .changelog-year { font-size: var(--fs-base); } .changelog-version { font-size: var(--fs-xl); } } /* Global Chat Styles */ .global-chat-btn { position: fixed; bottom: 1.875rem; right: 1.875rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--text-highlight); color: var(--header-bg); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); cursor: pointer; box-shadow: var(--shadow-lg); transition: all var(--transition-normal); z-index: 1000; border: none; } .global-chat-btn:hover { transform: scale(1.05); background: var(--text-alt-highlight); box-shadow: var(--shadow-lg), var(--shadow-glow); } .chat-unread-badge { position: absolute; top: -0.3125rem; right: -0.3125rem; background: var(--red-500); color: var(--white); border-radius: 50%; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); box-shadow: 0 2px 8px rgba(244, 67, 54, 0.5); } .global-chat-box { position: fixed; bottom: 6.25rem; right: 1.875rem; width: 37.5rem; height: calc(100vh - 10rem); max-height: calc(100vh - 10rem); background: var(--bg-surface); border: 1px solid var(--white-a05); border-radius: var(--radius-md); display: flex; flex-direction: column; box-shadow: 0 8px 32px var(--black-a50); z-index: 999; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .global-chat-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); background: transparent; border-bottom: none; color: var(--text-highlight); font-weight: var(--fw-semibold); font-size: var(--fs-lg); flex-shrink: 0; } .close-chat-btn, .purge-chat-btn { background: none; border: none; color: var(--text); font-size: var(--fs-lg); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: all var(--transition-fast); } .close-chat-btn:hover, .purge-chat-btn:hover { background: var(--accent-a10); color: var(--text-highlight); } .purge-chat-btn:hover { color: var(--red-500); } .global-chat-messages { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; } .global-chat-message { display: flex; gap: var(--space-2); align-items: flex-start; } .global-chat-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); color: var(--black); flex-shrink: 0; font-size: var(--fs-lg); overflow: hidden; } .global-chat-bubble { background: var(--white-a03); border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); flex: 1; min-width: 0; } .global-chat-header-info { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } .global-chat-name { font-weight: var(--fw-semibold); font-size: var(--fs-base); } .global-chat-time { font-size: var(--fs-xs); color: var(--neutral-500); } .global-chat-text { color: var(--neutral-200); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; } .global-chat-input-area { display: flex; gap: var(--space-3); padding: var(--space-4); background: rgba(0, 0, 0, 0.15); border-top: none; flex-shrink: 0; } #global-chat-send-btn { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--text-highlight); color: var(--black); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); transition: all 0.2s; flex-shrink: 0; } #global-chat-send-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px var(--accent-a40); } /* Site Banner */ .site-banner { background: var(--scrim); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--accent-400); padding: var(--space-4) var(--space-5); padding-bottom: var(--space-4); text-align: center; font-weight: var(--fw-semibold); font-size: var(--fs-base); position: sticky; top: 0; z-index: 1001; border-bottom: 2px solid transparent; background-image: linear-gradient(var(--scrim), var(--scrim)), linear-gradient(90deg, transparent 10%, var(--accent-400) 50%, transparent 90%); background-origin: padding-box, border-box; background-clip: padding-box, border-box; } .site-banner.alert-level-alert { color: var(--red-500); background-image: linear-gradient(var(--scrim), var(--scrim)), linear-gradient(90deg, transparent 10%, var(--red-500) 50%, transparent 90%); } .site-banner.alert-level-warning { color: #ffb347; background-image: linear-gradient(var(--scrim), var(--scrim)), linear-gradient(90deg, transparent 10%, var(--orange-500) 50%, transparent 90%); } .site-banner.alert-level-success { color: var(--green-200); background-image: linear-gradient(var(--scrim), var(--scrim)), linear-gradient(90deg, transparent 10%, var(--green-500) 50%, transparent 90%); } .site-banner-content { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: 0 auto; } .site-banner-content i { font-size: var(--fs-xl); opacity: 0.9; } /* Pinned message container */ .global-chat-pinned-container { border-bottom: 1px solid var(--post-border); background: var(--black-a30); flex-shrink: 0; display: none; } /* Load More button */ .load-more-chat-btn { width: 100%; padding: var(--space-2) var(--space-4); background: var(--accent-a10); border: none; border-bottom: 1px solid var(--post-border); color: var(--text-highlight); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--space-2); transition: all 0.2s; flex-shrink: 0; } .load-more-chat-btn:hover { background: var(--accent-a20); } .load-more-chat-btn:disabled { opacity: 0.5; cursor: not-allowed; } .load-more-chat-btn i { font-size: var(--fs-sm); } /* Pinned message */ .pinned-message { margin-bottom: var(--space-2); border: 1px solid var(--accent-a30); border-radius: var(--radius-md); overflow: hidden; min-height: fit-content; } /* Admin action buttons */ .pin-btn, .delete-btn { background: none; border: none; color: var(--neutral-400); cursor: pointer; padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); transition: color 0.2s; } .pin-btn:hover { color: var(--text-highlight); } .delete-btn:hover { color: var(--red-500); } @media (max-width: 768px) { .global-chat-box { width: calc(100vw - 40px); height: calc(100vh - 10rem); max-height: calc(100vh - 10rem); right: 20px; bottom: 80px; } .global-chat-btn { right: 20px; bottom: 20px; } } /* Twitch Live Pulse Animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Context Menu */ .context-menu { background: var(--bg-surface); border: 1px solid var(--border-medium); border-top: 2px solid var(--accent-a30); border-radius: 0; box-shadow: 0 4px 20px var(--black-a50); min-width: 11.25rem; backdrop-filter: blur(10px); overflow: hidden; } .context-menu-item { padding: var(--space-3) var(--space-4); color: var(--white); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); } .context-menu-item:hover { background: var(--accent-a20); color: var(--text-highlight); } .context-menu-item i { width: 1rem; text-align: center; color: var(--orange-500); } /* Warning Dialog - For Users Receiving Warnings */ .warning-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: var(--space-5); backdrop-filter: blur(10px); } .warning-dialog { background: rgba(30, 30, 30, 0.98); border: 3px solid var(--orange-500); border-radius: var(--radius-lg); max-width: 31.25rem; width: 100%; box-shadow: 0 10px 40px rgba(255, 152, 0, 0.3); } .warning-header { background: linear-gradient(135deg, rgba(255, 152, 0, 0.2), rgba(255, 152, 0, 0.1)); padding: var(--space-5); border-bottom: 2px solid rgba(255, 152, 0, 0.3); display: flex; align-items: center; gap: var(--space-3); } .warning-header i { color: var(--orange-500); font-size: var(--fs-2xl); } .warning-header h3 { color: var(--orange-500); font-size: var(--fs-xl); margin: 0; font-weight: var(--fw-bold); } .warning-body { padding: var(--space-6); } .warning-from { color: var(--subtext); font-size: var(--fs-sm); margin-bottom: var(--space-1); } .warning-date { color: var(--neutral-400); font-size: var(--fs-sm); margin-bottom: var(--space-4); } .warning-message { background: rgba(255, 152, 0, 0.05); border: 1px solid rgba(255, 152, 0, 0.2); border-radius: var(--radius-md); padding: var(--space-4); color: var(--white); font-size: var(--fs-base); line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; } .warning-footer { padding: var(--space-5); border-top: 2px solid var(--neutral-700); display: flex; justify-content: center; } .warning-btn-acknowledge { background: linear-gradient(135deg, var(--orange-500), var(--orange-600)); color: var(--white); border: none; padding: var(--space-3) var(--space-8); border-radius: var(--radius-md); font-size: var(--fs-lg); font-weight: var(--fw-semibold); cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: var(--space-2); } .warning-btn-acknowledge:hover { background: linear-gradient(135deg, var(--orange-600), var(--orange-600)); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4); } /* Warn User Dialog - For Admins Sending Warnings (native ) */ dialog.warn-user-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: none; background: transparent; display: none; align-items: center; justify-content: center; padding: var(--space-5); } dialog.warn-user-overlay[open] { display: flex; } dialog.warn-user-overlay::backdrop { background: var(--black-a80); backdrop-filter: blur(8px); } .warn-user-dialog { background: rgba(30, 30, 30, 0.98); border: 2px solid var(--orange-500); border-radius: var(--radius-lg); max-width: 31.25rem; width: 100%; box-shadow: 0 8px 32px var(--black-a50); } .warn-user-header { background: rgba(255, 152, 0, 0.1); padding: var(--space-5); border-bottom: 2px solid rgba(255, 152, 0, 0.3); display: flex; align-items: center; justify-content: space-between; } .warn-user-header h3 { color: var(--orange-500); font-size: var(--fs-xl); margin: 0; font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--space-2); } .warn-close-btn { background: none; border: none; color: var(--neutral-400); font-size: var(--fs-xl); cursor: pointer; padding: var(--space-1) var(--space-2); transition: color 0.2s; } .warn-close-btn:hover { color: var(--orange-500); } .warn-user-body { padding: var(--space-6); } .warn-user-footer { padding: var(--space-5); border-top: 2px solid var(--neutral-700); display: flex; justify-content: flex-end; gap: var(--space-3); } .warn-btn-cancel { background: rgba(60, 60, 60, 0.5); color: var(--white); border: 1px solid var(--neutral-700); padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; transition: all 0.2s; } .warn-btn-cancel:hover { background: rgba(80, 80, 80, 0.5); } .warn-btn-send { background: linear-gradient(135deg, var(--orange-500), var(--orange-600)); color: var(--white); border: none; padding: var(--space-2) var(--space-6); border-radius: var(--radius-md); font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: var(--space-2); } .warn-btn-send:hover { background: linear-gradient(135deg, var(--orange-600), var(--orange-600)); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4); } /* ========================================== TRADER RESETS SECTION STYLES ========================================== */ .trader-resets { padding: var(--space-5); } .trader-resets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr)); gap: var(--space-4); padding: var(--space-4); } .trader-card { background: var(--post-bg); border: 2px solid var(--post-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; align-items: center; } .trader-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--black-a50); border-color: var(--text-highlight); } .trader-image { width: 8rem; height: 8rem; background: linear-gradient(135deg, var(--accent-a10) 0%, var(--black-a30) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: var(--space-3); border-radius: var(--radius-md); } .trader-image img { width: 8rem; height: 8rem; object-fit: cover; } .trader-info { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; width: 100%; } .trader-name { color: var(--text-highlight); font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0; text-align: center; font-family: "Bender", sans-serif; } .trader-reset-timer { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2); background: var(--black-a50); border-radius: var(--radius-md); border: 1px solid var(--accent-a20); } .trader-reset-timer i { color: var(--text-highlight); font-size: var(--fs-lg); } .trader-reset-timer .timer-value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--green-500); font-family: "Consolas", "Monaco", monospace; letter-spacing: 1px; } .trader-reset-timer .timer-value.urgent { color: var(--red-500); } .trader-reset-timer .timer-value.resetting { color: var(--amber-400); font-size: var(--fs-base); letter-spacing: 0; } .trader-nightbot-hint { text-align: center; padding: var(--space-2); background: var(--accent-a10); border-radius: var(--radius-md); margin-top: auto; } .trader-nightbot-hint code { background: var(--black-a50); padding: 3px var(--space-2); border-radius: var(--radius-sm); color: var(--text-highlight); font-size: var(--fs-base); font-weight: var(--fw-semibold); } /* Nightbot Commands Section */ .trader-nightbot-commands { margin-top: var(--space-8); padding: var(--space-5); background: var(--post-bg); border: 2px solid var(--post-border); border-radius: var(--radius-lg); } .trader-nightbot-commands h3 { color: var(--text-highlight); font-size: var(--fs-xl); margin: 0 0 var(--space-4) 0; display: flex; align-items: center; gap: var(--space-2); } .trader-nightbot-commands p { color: var(--subtext); font-size: var(--fs-base); margin-bottom: var(--space-4); } .nightbot-commands-list { display: flex; flex-direction: column; gap: var(--space-2); } .nightbot-command-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--black-a30); border-radius: var(--radius-md); font-family: "Consolas", "Monaco", monospace; font-size: var(--fs-base); } .nightbot-command-row code { color: var(--green-500); flex: 1; word-break: break-all; } .nightbot-command-row .copy-btn { background: var(--accent-a20); border: 1px solid var(--text-highlight); color: var(--text-highlight); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); transition: all 0.2s; } .nightbot-command-row .copy-btn:hover { background: var(--text-highlight); color: var(--black); } /* Responsive adjustments for trader resets */ @media (max-width: 768px) { .trader-resets-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding: var(--space-2); } .trader-image { width: 100px; height: 100px; margin-top: var(--space-2); } .trader-image img { width: 100px; height: 100px; } .trader-info { padding: var(--space-2); gap: var(--space-2); } .trader-name { font-size: var(--fs-lg); } .trader-reset-timer { padding: var(--space-2); gap: var(--space-1); } .trader-reset-timer i { font-size: var(--fs-base); } .trader-reset-timer .timer-value { font-size: var(--fs-xl); letter-spacing: 0; } .trader-nightbot-hint { padding: var(--space-2); } .trader-nightbot-hint code { font-size: var(--fs-sm); padding: 2px var(--space-2); } .nightbot-command-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .nightbot-command-row .copy-btn { align-self: flex-end; } } @media (max-width: 480px) { .trader-resets-grid { grid-template-columns: repeat(2, 1fr); } .trader-image { width: 80px; height: 80px; } .trader-image img { width: 80px; height: 80px; } } /* ============================================ LANDING PAGE STYLES ============================================ */ .landing-page { overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; height: auto; min-height: 100vh; opacity: 1; /* Landing page doesn't need JS loading system */ } /* Hero Section */ .landing-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-16) var(--space-6); overflow: hidden; } .landing-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-a20), transparent), radial-gradient(ellipse 60% 40% at 70% 100%, var(--accent-a10), transparent), linear-gradient(180deg, var(--neutral-950) 0%, var(--neutral-850) 50%, var(--neutral-950) 100%); z-index: -2; } .landing-hero-overlay { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px); z-index: -1; } .landing-hero-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.03; z-index: -1; pointer-events: none; } .landing-hero-content { max-width: 50rem; text-align: center; z-index: 1; } .landing-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--accent-a10); border: 1px solid var(--accent-a20); border-radius: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--space-8); text-transform: uppercase; letter-spacing: 1.5px; } .landing-badge i { color: var(--accent-300); } .landing-title { margin-bottom: var(--space-6); } .landing-title-sub { display: block; font-size: clamp(14px, 2.5vw, 18px); font-weight: var(--fw-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 4px; margin-bottom: var(--space-3); } .landing-title-main { display: block; font-size: clamp(64px, 15vw, 140px); font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: 0.1em; line-height: 1; text-shadow: 0 0 60px var(--accent-a40), 0 0 120px var(--accent-a20); } .landing-subtitle { font-size: clamp(16px, 2.5vw, 20px); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-10); max-width: 37.5rem; margin-left: auto; margin-right: auto; } .landing-cta-group { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-16); } .landing-cta-primary { --btn-x: 50%; --btn-y: 50%; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-8); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-deep-rgb), 0.98) 100%); /* .btn-gold */ color: var(--accent-cta-fg); /* .btn-gold --btn-fg */ font-size: var(--fs-base); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; border-radius: 0; border: 1px solid rgba(var(--accent-rgb), 0.5); /* .btn-gold --btn-border */ border-top: 1px solid rgba(var(--accent-hi-rgb), 0.6); /* .btn-gold --btn-border-top */ transition: color 0.25s ease, box-shadow 0.25s ease; box-shadow: inset 0 1px 0 var(--white-a20), 0 2px 8px var(--black-a30); position: relative; overflow: hidden; } .landing-cta-primary::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, var(--white-a10) 0%, transparent 100%); pointer-events: none; z-index: 2; } .landing-cta-primary::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle 250px at var(--btn-x) var(--btn-y), rgba(var(--accent-hi-rgb), 0.6) 0%, transparent 100%); /* .btn-gold --btn-glow */ opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 1; } .landing-cta-primary:hover::after { opacity: 1; } .landing-cta-primary:hover { color: var(--accent-cta-fg-hover); /* .btn-gold --btn-fg-hover */ box-shadow: inset 0 1px 0 var(--white-a20), 0 4px 16px rgba(var(--accent-rgb), 0.35); /* .btn-gold --btn-hover-shadow */ } .landing-cta-primary:active { transform: scale(0.98); } .landing-cta-primary i, .landing-cta-primary span { position: relative; z-index: 3; } .landing-cta-secondary { --btn-x: 50%; --btn-y: 50%; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-8); background: linear-gradient(180deg, rgba(60, 60, 60, 0.95) 0%, rgba(40, 40, 40, 0.98) 100%); /* .btn base */ color: var(--neutral-200); /* .btn base --btn-fg */ font-size: var(--fs-base); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; border-radius: 0; border: 1px solid var(--white-a10); border-top: 1px solid var(--white-a20); transition: color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; box-shadow: inset 0 1px 0 var(--white-a05), 0 2px 8px var(--black-a30); position: relative; overflow: hidden; } .landing-cta-secondary::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, var(--white-a10) 0%, transparent 100%); pointer-events: none; z-index: 2; } .landing-cta-secondary::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle 250px at var(--btn-x) var(--btn-y), var(--white-a20) 0%, transparent 100%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 1; } .landing-cta-secondary:hover::after { opacity: 1; } .landing-cta-secondary:hover { color: var(--white); border-color: var(--white-a20); box-shadow: inset 0 1px 0 var(--white-a15), 0 4px 16px var(--black-a50); } .landing-cta-secondary:active { transform: scale(0.98); } .landing-cta-secondary i, .landing-cta-secondary span { position: relative; z-index: 3; } .landing-stats { display: flex; align-items: center; justify-content: center; gap: var(--space-8); flex-wrap: wrap; } .landing-stat { position: relative; overflow: hidden; text-align: center; background: var(--neutral-900); border: 1px solid var(--white-a05); border-radius: 0; padding: var(--space-5) var(--space-8); } /* Gradient top edge - matches .quest-card::before */ .landing-stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-a40), transparent); pointer-events: none; } .landing-stat-value { display: block; font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1.2; } .landing-stat-label { display: block; font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: var(--space-1); } .landing-stat-divider { width: 1px; height: 2.5rem; background: var(--accent-a20); } /* Prestige Stats */ .landing-prestige-stats { display: none; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-8); opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; } .landing-prestige-stats.visible { display: flex; opacity: 1; transform: translateY(0); } .landing-prestige-label { font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; } .landing-prestige-badges { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: center; } .landing-prestige-badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--white-a03); border: 1px solid var(--accent-a20); border-radius: 0; transition: all 0.25s ease; } .landing-prestige-badge:hover { background: var(--white-a05); border-color: var(--accent-a30); transform: translateY(-2px); } .landing-prestige-badge img { width: 2rem; height: 2rem; object-fit: contain; filter: drop-shadow(0 2px 4px var(--black-a30)); } .landing-prestige-badge span { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-primary); } .landing-scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: color var(--transition-normal); animation: landing-bounce 2s ease-in-out infinite; } .landing-scroll-indicator:hover { color: var(--text-primary); } @keyframes landing-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* Features Section */ .landing-features { padding: var(--space-30) var(--space-6); background: var(--background); } .landing-section-header { text-align: center; margin-bottom: var(--space-16); } .landing-section-tag { display: inline-block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); text-transform: uppercase; letter-spacing: 3px; margin-bottom: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--accent-a10); border-radius: 0; } .landing-section-title { font-size: clamp(32px, 5vw, 48px); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-4); letter-spacing: 0.02em; } .landing-section-subtitle { font-size: var(--fs-xl); color: var(--text-muted); } .landing-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: var(--space-6); max-width: 75rem; margin: 0 auto; } .landing-feature-card { position: relative; overflow: hidden; background: var(--neutral-900); border: 1px solid var(--white-a05); border-radius: 0; padding: var(--space-8); transition: all var(--transition-normal); } /* Gradient top edge - matches .quest-card::before */ .landing-feature-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-a40), transparent); pointer-events: none; } .landing-feature-card:hover { border-color: var(--accent-a20); transform: translateY(-4px); box-shadow: 0 12px 40px var(--black-a30); } .landing-feature-icon { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; background: var(--accent-a10); border-radius: 0; margin-bottom: var(--space-5); font-size: var(--fs-2xl); color: var(--text-primary); } .landing-feature-card h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-3); } .landing-feature-card p { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.6; } /* How It Works Section */ .landing-how-it-works { padding: var(--space-30) var(--space-6); background: linear-gradient(180deg, var(--background) 0%, var(--bg-surface) 100%); } .landing-steps { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-6); max-width: 56.25rem; margin: 0 auto; flex-wrap: wrap; } .landing-step { position: relative; overflow: hidden; text-align: center; flex: 1; min-width: 12.5rem; max-width: 16.25rem; background: var(--neutral-900); border: 1px solid var(--white-a05); border-radius: 0; padding: var(--space-8) var(--space-5); } /* Gradient top edge - matches .quest-card::before */ .landing-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-a40), transparent); pointer-events: none; } .landing-step-number { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); background: linear-gradient(135deg, var(--accent-a20) 0%, transparent 100%); border: 2px solid var(--accent-a30); border-radius: var(--radius-full); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-primary); } .landing-step h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-2); } .landing-step p { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.5; } .landing-step-connector { width: 3.75rem; height: 2px; background: linear-gradient(90deg, var(--accent-a30), var(--accent-a10)); margin-top: var(--space-16); /* aligns to step-number circle center (card padding-top + half circle) */ flex-shrink: 0; } /* Final CTA Section */ .landing-final-cta { padding: var(--space-30) var(--space-6); background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--accent-a10), transparent), var(--bg-surface); text-align: center; } .landing-final-cta-content { max-width: 37.5rem; margin: 0 auto; } .landing-final-cta h2 { font-size: clamp(28px, 5vw, 40px); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-4); } .landing-final-cta p { font-size: var(--fs-xl); color: var(--text-secondary); margin-bottom: var(--space-8); } .landing-cta-large { padding: var(--space-5) var(--space-12); font-size: var(--fs-lg); } /* Footer */ .landing-footer { padding: var(--space-12) var(--space-6) var(--space-8); background: var(--neutral-950); border-top: 1px solid var(--border-subtle); } .landing-footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 75rem; margin: 0 auto var(--space-8); flex-wrap: wrap; gap: var(--space-6); } .landing-footer-brand { text-align: left; } .landing-footer-logo { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: 2px; display: block; margin-bottom: var(--space-2); } .landing-footer-brand p { font-size: var(--fs-base); color: var(--text-muted); } .landing-footer-brand a { color: var(--text-primary); text-decoration: none; transition: color var(--transition-normal); } .landing-footer-brand a:hover { color: var(--accent-300); } .landing-footer-links { display: flex; gap: var(--space-6); } .landing-footer-links a { font-size: var(--fs-base); color: var(--text-secondary); text-decoration: none; transition: color var(--transition-normal); } .landing-footer-links a:hover { color: var(--text-primary); } .landing-footer-disclaimer { max-width: 75rem; margin: 0 auto; padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); } .landing-footer-disclaimer p { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; line-height: 1.6; } /* Landing Page Responsive */ @media (max-width: 768px) { .landing-hero { padding: var(--space-20) var(--space-5) var(--space-16); } .landing-title-main { letter-spacing: 0.05em; } .landing-stats { gap: var(--space-5); } .landing-stat-divider { display: none; } .landing-stat { min-width: 5rem; } .landing-scroll-indicator { display: none; } .landing-features, .landing-how-it-works, .landing-final-cta { padding: var(--space-20) var(--space-5); } .landing-features-grid { grid-template-columns: 1fr; } .landing-step-connector { display: none; } .landing-steps { flex-direction: column; align-items: center; } .landing-step { max-width: 100%; } .landing-footer-content { flex-direction: column; text-align: center; } .landing-footer-brand { text-align: center; } .landing-cta-group { flex-direction: column; align-items: center; } .landing-cta-primary, .landing-cta-secondary { width: 100%; max-width: 17.5rem; justify-content: center; } } /* ============================================ KAPPA COMPLETE CELEBRATION ============================================ */ .kappa-complete-celebration { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-10) var(--space-6); position: relative; width: 100%; min-height: calc(100vh - var(--header-h) - 2 * var(--space-6)); text-align: center; overflow: hidden; } /* The celebration replaces the quest grid - switch the grid to a plain block so it isn't squeezed into a grid column, and hide the map tabs */ .quests-grid:has(.kappa-complete-celebration) { display: block; } .main-content:has(.kappa-complete-celebration) .map-tabs-section { display: none !important; } /* Ending showcase */ .kappa-ending-showcase { position: relative; margin-bottom: var(--space-10); animation: ending-reveal 1s ease-out; } @keyframes ending-reveal { from { opacity: 0; transform: scale(0.8) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } } .kappa-ending-image-container { position: relative; width: 12.5rem; height: 12.5rem; margin: 0 auto; } .kappa-ending-image { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 30px var(--accent-a40)); animation: ending-glow 3s ease-in-out infinite; } @keyframes ending-glow { 0%, 100% { filter: drop-shadow(0 0 20px var(--accent-a30)); } 50% { filter: drop-shadow(0 0 40px rgba(var(--accent-rgb), 0.6)); } } /* Golden ring around ending image */ .kappa-ending-ring { position: absolute; inset: -0.9375rem; border: 2px solid var(--text-primary); border-radius: 50%; opacity: 0.3; animation: ring-pulse 2s ease-in-out infinite; } .kappa-ending-ring:nth-child(2) { inset: -1.5625rem; animation-delay: 0.5s; opacity: 0.2; } .kappa-ending-ring:nth-child(3) { inset: -2.1875rem; animation-delay: 1s; opacity: 0.1; } @keyframes ring-pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.05); opacity: 0.5; } } /* Multiple endings display */ .kappa-endings-multi { display: flex; gap: var(--space-5); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-10); } .kappa-ending-mini { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); background: rgba(var(--accent-rgb), 0.05); border: 1px solid var(--accent-a20); border-radius: var(--radius-lg); animation: ending-reveal 0.8s ease-out backwards; transition: transform 0.3s ease, border-color 0.3s ease; } .kappa-ending-mini:nth-child(1) { animation-delay: 0.1s; } .kappa-ending-mini:nth-child(2) { animation-delay: 0.2s; } .kappa-ending-mini:nth-child(3) { animation-delay: 0.3s; } .kappa-ending-mini:nth-child(4) { animation-delay: 0.4s; } .kappa-ending-mini:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.5); } .kappa-ending-mini img { width: 5rem; height: 5rem; object-fit: contain; filter: drop-shadow(0 0 15px var(--accent-a30)); } .kappa-ending-mini .ending-name { font-size: var(--fs-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; } /* No ending - show kappa icon */ .kappa-icon-showcase { position: relative; width: 10rem; height: 10rem; margin: 0 auto var(--space-10); display: flex; align-items: center; justify-content: center; animation: ending-reveal 1s ease-out; } .kappa-icon-showcase i { font-size: 5rem; background: linear-gradient(135deg, var(--accent-300), var(--accent-300), var(--accent-500)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 20px var(--accent-a40)); animation: icon-glow 3s ease-in-out infinite; } @keyframes icon-glow { 0%, 100% { filter: drop-shadow(0 0 15px var(--accent-a30)); transform: scale(1); } 50% { filter: drop-shadow(0 0 30px rgba(var(--accent-rgb), 0.6)); transform: scale(1.05); } } /* Title and text */ .kappa-complete-title { font-size: clamp(32px, 6vw, 48px); font-weight: var(--fw-bold); background: linear-gradient(135deg, var(--accent-300), var(--accent-300), var(--accent-400)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-3); animation: title-shine 3s ease-in-out infinite; position: relative; z-index: 1; } @keyframes title-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .kappa-complete-subtitle { font-size: var(--fs-lg); color: var(--text-secondary); margin-bottom: var(--space-8); max-width: 25rem; line-height: 1.6; position: relative; z-index: 1; animation: fade-in 1s ease-out 0.3s backwards; } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Prestige badge display */ .kappa-prestige-display { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); background: var(--accent-a10); border: 1px solid var(--accent-a20); border-radius: var(--radius-full); margin-bottom: var(--space-6); animation: fade-in 1s ease-out 0.5s backwards; position: relative; z-index: 1; } .kappa-prestige-display img { width: 2.25rem; height: 2.25rem; object-fit: contain; } .kappa-prestige-display span { font-size: var(--fs-base); color: var(--text-primary); font-weight: var(--fw-semibold); letter-spacing: 1px; } /* Stats row */ .kappa-complete-stats { display: flex; gap: var(--space-8); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); animation: fade-in 1s ease-out 0.7s backwards; position: relative; z-index: 1; } .kappa-stat { text-align: center; } .kappa-stat-value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-primary); } .kappa-stat-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } /* Action buttons */ .kappa-complete-actions { display: flex; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; justify-content: center; animation: fade-in 1s ease-out 0.9s backwards; position: relative; z-index: 1; } .kappa-action-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); background: var(--accent-a10); border: 1px solid var(--accent-a30); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; transition: all 0.2s ease; } .kappa-action-btn:hover { background: var(--accent-a20); border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-2px); } .kappa-action-btn i { font-size: var(--fs-base); } /* Prestige Button */ .kappa-prestige-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-8); background: linear-gradient(135deg, var(--accent-a20), var(--accent-a10)); border: 2px solid rgba(var(--accent-rgb), 0.5); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--fs-base); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; position: relative; margin-top: var(--space-8); animation: fade-in 1s ease-out 1s backwards; } .kappa-prestige-btn:not(:disabled):hover { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), var(--accent-a20)); border-color: rgba(var(--accent-rgb), 0.8); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.25); } .kappa-prestige-btn:not(:disabled):active { transform: translateY(-1px); } .kappa-prestige-btn i { font-size: var(--fs-xl); } .kappa-prestige-btn:disabled { cursor: not-allowed; background: rgba(100, 100, 100, 0.15); border-color: rgba(100, 100, 100, 0.4); color: var(--text-muted); } .kappa-prestige-btn .prestige-tooltip { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); padding: var(--space-3) var(--space-4); background: rgba(10, 10, 12, 0.95); border: 1px solid var(--accent-a30); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.5px; text-transform: none; white-space: nowrap; color: var(--text-secondary); opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; z-index: 100; } .kappa-prestige-btn .prestige-tooltip::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--accent-a30); } .kappa-prestige-btn:disabled:hover .prestige-tooltip { opacity: 1; visibility: visible; } .kappa-prestige-btn .prestige-tooltip i { color: var(--red-600); margin-right: var(--space-2); font-size: var(--fs-sm); } /* Max prestige state */ .kappa-prestige-btn.max-prestige { background: linear-gradient(135deg, rgba(50, 200, 72, 0.15), rgba(50, 200, 72, 0.05)); border-color: rgba(50, 200, 72, 0.4); color: var(--green-200); cursor: default; } .kappa-prestige-btn.max-prestige:hover { transform: none; box-shadow: none; } /* Responsive */ @media (max-width: 600px) { .kappa-complete-celebration { padding: var(--space-8) var(--space-4); } .kappa-ending-image-container { width: 150px; height: 150px; } .kappa-endings-multi { gap: var(--space-3); } .kappa-ending-mini { padding: var(--space-3); } .kappa-ending-mini img { width: 60px; height: 60px; } .kappa-icon-showcase { width: 120px; height: 120px; } .kappa-icon-showcase i { font-size: 60px; } .kappa-complete-stats { gap: var(--space-6); } .kappa-stat-value { font-size: var(--fs-2xl); } .kappa-complete-actions { flex-direction: column; align-items: center; } .kappa-action-btn { width: 100%; max-width: 250px; justify-content: center; } } /* Smooth section transitions */ .section-transitioning { opacity: 0.7; pointer-events: none; transition: opacity 0.15s ease-in-out; } /* Prevent layout shift during section loads */ #rankings-table-wrapper, #collector-needed-grid, .data-table { width: 100%; border-collapse: collapse; } .data-table th { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border-bottom: 1px solid var(--border-medium); } .data-table td { padding: var(--space-3) var(--space-4); font-size: var(--fs-base); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); } .data-table .cell-center { text-align: center; } .data-table .cell-primary { color: var(--text-primary); font-weight: var(--fw-semibold); } .data-table .cell-accent { color: var(--accent-300); font-weight: var(--fw-semibold); } .data-table .cell-muted { color: var(--text-muted); } .data-table tbody tr.row-clickable { cursor: pointer; transition: background var(--transition-fast); } .data-table tbody tr.row-clickable:hover { background: var(--white-a03); } #boss-spawns-container { min-height: 12.5rem; background: var(--neutral-850); /* matches .quest-card */ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } /* ============================================================================ OVERLAY STYLE GALLERY (Jul 2026) Premade collector overlay styles (replaced the drag-and-drop editor). Cards: Default (Classic) + the presets from config/collector-presets.json, each with a live 16:9 preview auto-zoomed to its elements' bounding box. ============================================================================ */ .overlay-style { padding: var(--space-8) var(--space-5); max-width: var(--content-max); margin: 0 auto; } /* Setup steps: 1. choose style, 2. copy the OBS browser source URL */ .os-step { margin-bottom: var(--space-8); } .os-step-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .os-step-num { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--accent-400); color: var(--neutral-950); font-weight: var(--fw-bold); font-size: var(--fs-lg); flex-shrink: 0; } .os-step-title { color: var(--text-primary); font-size: var(--fs-xl); font-weight: var(--fw-bold); } .os-step-desc { color: var(--text-secondary); margin-bottom: var(--space-4); } .os-source-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); } .os-source-input { flex: 1; min-width: 20rem; font-family: monospace; font-size: var(--fs-sm); } .os-source-size { color: var(--text-secondary); font-size: var(--fs-base); } .os-source-size code { color: var(--text-primary); background: var(--white-a05); padding: 0 var(--space-1); border-radius: var(--radius-sm); } .os-source-size i { margin-right: var(--space-1); } .overlay-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: var(--space-5); } /* Quest-card surface language: neutral-850 lifted on shadow, gold top edge on the active card */ .os-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: var(--space-4); background: var(--neutral-850); border-radius: var(--radius-md); box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; } .os-card.active::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-400), transparent); pointer-events: none; } /* 16:9 preview surface: a 1920x1080 render scaled/zoomed via transform */ .os-preview { position: relative; width: 100%; aspect-ratio: 16/9; background-color: var(--neutral-900); background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 16px 16px; border: 1px solid var(--white-a10); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-3); } .os-preview-inner { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: top left; pointer-events: none; } .os-preview-el { position: absolute; white-space: nowrap; font-weight: var(--fw-bold); text-shadow: 0 2px 6px var(--black-a80); } .os-name { color: var(--text-primary); font-weight: var(--fw-bold); font-size: var(--fs-lg); margin-bottom: var(--space-1); } /* Admin-only geometry tuner button, floated over the preview corner */ .os-tune-btn { position: absolute; top: var(--space-5); right: var(--space-5); opacity: 0.55; } .os-tune-btn:hover { opacity: 1; } /* ---- Admin style tuner dialog (near-fullscreen working surface) ---- */ .os-tuner-dialog { width: 96vw; max-width: none; height: 94vh; max-height: none; overflow: hidden; display: flex; flex-direction: column; } .os-tuner-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* The 16:9 canvas is sized by JS to the largest fit inside this area */ .os-tuner-canvas-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; } .os-tuner-canvas { position: relative; background-color: var(--neutral-900); background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); border: 1px solid var(--white-a10); border-radius: var(--radius-sm); overflow: hidden; outline: none; } /* Tuner elements are interactive (previews keep pointer-events: none) */ .os-tuner-inner .os-preview-el { pointer-events: auto; cursor: move; user-select: none; } .os-tuner-inner .os-preview-el.selected { outline: 2px dashed var(--accent-400); outline-offset: 4px; } .os-tuner-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); } .os-tuner-props { display: flex; align-items: center; gap: var(--space-3); min-height: 2.25rem; } .os-tuner-el-name { color: var(--text-primary); font-weight: var(--fw-semibold); text-transform: capitalize; margin-right: var(--space-1); } .os-tuner-empty { color: var(--text-secondary); font-size: var(--fs-sm); } .os-tuner-field { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--fs-sm); } .os-tuner-field input { width: 4.5rem; } .os-tuner-align { display: flex; gap: var(--space-1); } .os-tuner-align .btn { padding-left: var(--space-3); padding-right: var(--space-3); } .os-tuner-actions { display: flex; gap: var(--space-2); } .os-tuner-hint { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--fs-sm); } .os-desc { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--space-4); flex: 1; } /* ============================================================================ SEASON MODIFIERS (Jul 2026) Kord Breach loadout builder: positives (cost points) left, negatives (earn points) right, sticky total bar enforcing the <= 0 rule, community loadouts below. Catalog + validation live server-side. ============================================================================ */ /* Scrolls with .main-content (no own scroller) so the sticky total bar pins exactly where the page meets the site header */ .season-modifiers { padding: var(--space-8) var(--space-5); } /* !perks Nightbot command setup (above community loadouts) */ .smod-nightbot { margin-bottom: var(--space-8); } .smod-nightbot-desc { color: var(--text-secondary); margin-bottom: var(--space-3); } .smod-nightbot-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .smod-nightbot-row code { flex: 1; min-width: 20rem; background: rgba(0, 0, 0, 0.6); color: var(--text-primary); padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); word-break: break-all; user-select: all; } /* Quest-card language like the modifier cards: neutral-850 on shadow, 2px gradient top edge that flips green/red with validity */ .smod-totalbar-actions { display: flex; align-items: center; gap: var(--space-3); } .smod-totalbar { position: sticky; top: 0; z-index: 10; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); padding: var(--space-3) var(--space-5); background: var(--neutral-850); border: none; box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; } .smod-totalbar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--green-500), transparent); pointer-events: none; transition: opacity 0.25s ease; } .smod-totalbar.invalid::before { background: linear-gradient(90deg, transparent, var(--red-500), transparent); } .smod-total { display: flex; align-items: baseline; gap: var(--space-3); } .smod-total-label { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 1px; text-transform: uppercase; } .smod-total-value { color: var(--green-500); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; } .smod-totalbar.invalid .smod-total-value { color: var(--red-500); } .smod-total-status { color: var(--text-secondary); font-size: var(--fs-sm); } .smod-section-title { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-8) 0 var(--space-4); color: var(--text-primary); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: 1px; text-transform: uppercase; } .smod-section-title span { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); letter-spacing: 0.5px; } .smod-section-positive i { color: var(--green-500); } .smod-section-negative i { color: var(--red-500); } /* Collapsible section title (globals) */ .smod-toggle { cursor: pointer; user-select: none; } .smod-toggle-caret { margin-left: var(--space-1); color: var(--text-muted); font-size: var(--fs-xs); transition: transform 0.15s ease; } .smod-toggle:not(.collapsed) .smod-toggle-caret { transform: rotate(180deg); } /* Apply scrolls here; keep clear of the sticky total bar */ .smod-columns { scroll-margin-top: 5rem; } .smod-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; } .smod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .smod-grid-globals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } /* Quest-card language: neutral-850 surface on shadow, no borders, 2px gradient top edge - tinted green/red per stack instead of accent */ .smod-card { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--neutral-850); border: none; box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; transition: background 0.15s ease; } .smod-card::before, .smod-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; } .smod-card::before { background: linear-gradient(90deg, transparent, var(--accent-a40), transparent); } .smod-card::after { opacity: 0; transition: opacity 0.25s ease; } .smod-positive::before { background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.4), transparent); } .smod-positive::after { background: linear-gradient(90deg, transparent, var(--green-500), transparent); } .smod-negative::before { background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.4), transparent); } .smod-negative::after { background: linear-gradient(90deg, transparent, var(--red-500), transparent); } .smod-card[data-id] { cursor: pointer; } .smod-card[data-id]:hover { background: var(--neutral-800); } /* Selected: tinted surface + full-strength gradient edge */ .smod-card[data-id]:hover::after, .smod-card.selected::after { opacity: 1; } .smod-positive.selected { background: rgba(34, 197, 94, 0.08); } .smod-negative.selected { background: rgba(239, 68, 68, 0.08); } .smod-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background: var(--white-a05); color: var(--neutral-200); font-size: var(--fs-lg); } .smod-positive.selected .smod-icon { color: var(--green-500); } .smod-negative.selected .smod-icon { color: var(--red-500); } .smod-name { color: var(--text-highlight); font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: 0.5px; text-transform: uppercase; } .smod-value { color: var(--text-muted); font-weight: var(--fw-regular); } .smod-positive .smod-value { color: var(--green-500); } .smod-negative .smod-value { color: var(--red-500); } .smod-effects { margin: var(--space-1) 0 0; padding-left: var(--space-4); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; } /* Community loadouts: compact one-line rows in a responsive grid; expanding a row reveals the picks and Apply */ .smod-community-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .smod-community-header .smod-section-title { margin-bottom: 0; } .smod-community-search { width: 16rem; max-width: 100%; } .smod-community { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); align-items: stretch; margin: var(--space-4) 0 var(--space-8); } .smod-community-empty { color: var(--text-muted); font-size: var(--fs-sm); } .smod-loadout { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--neutral-850); box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; } .smod-loadout::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-a40), transparent); pointer-events: none; } .smod-loadout-own { padding: 1px var(--space-1); background: var(--accent-a10); border-radius: var(--radius-sm); color: var(--accent-400); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.5px; text-transform: uppercase; vertical-align: middle; } .smod-loadout-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-size: var(--fs-lg); font-weight: var(--fw-bold); } .smod-loadout-rank { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); } .smod-loadout-meta { color: var(--text-secondary); font-size: var(--fs-sm); } .smod-loadout-meta strong { color: var(--neutral-200); } .smod-loadout-actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); } /* Compact buttons for the small community cards */ .smod-loadout-actions .btn { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); } /* Compare dialog: your picks vs theirs, one column each side */ .smod-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-5); align-items: start; } .smod-compare-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .smod-compare-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--white-a05); color: var(--text-highlight); font-size: var(--fs-base); font-weight: var(--fw-bold); } .smod-compare-title span { color: var(--neutral-200); font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .smod-compare-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); background: var(--white-a03); border-radius: var(--radius-sm); font-size: var(--fs-sm); } .smod-compare-item i { width: 1rem; flex-shrink: 0; text-align: center; } .smod-compare-item.positive i { color: var(--green-500); } .smod-compare-item.negative i { color: var(--red-500); } .smod-compare-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--neutral-200); } .smod-compare-value { margin-left: auto; flex-shrink: 0; font-weight: var(--fw-semibold); } .smod-compare-item.positive .smod-compare-value { color: var(--green-500); } .smod-compare-item.negative .smod-compare-value { color: var(--red-500); } .smod-compare-empty { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); } @media (max-width: 768px) { .smod-compare { grid-template-columns: 1fr; } } @media (max-width: 768px) { .smod-columns, .smod-grid, .smod-grid-globals { grid-template-columns: 1fr; } .smod-totalbar { flex-wrap: wrap; } }