:root { /* Blue-shifted depth: backgrounds carry a whisper of indigo so cards and borders separate by warmth, not just brightness — calmer, richer. */ --bg: #0e1016; --bg2: #151822; --card: #1a1e28; --card-hover: #212634; --border: #292e3b; --border-strong: #3c4253; --text: #f4f5f8; --muted: #a7adbb; --primary: #f2f3f5; /* neutral light buttons */ --primary-text: #101114; --accent: #a5b4fc; /* restrained indigo for highlights */ --up: #4ade80; --down: #f87171; --flat: #989da8; --radius: 14px; --shadow: 0 10px 36px rgba(0, 0, 0, 0.42); --ease: cubic-bezier(0.22, 0.7, 0.3, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* overflow-x must be `clip`, NOT `hidden`: hidden turns into a scroll container that captures mousewheel events — and with overscroll-behavior set, never hands them up to the page. clip kills sideways overflow without creating a scroller, so the wheel always reaches the real page scroll. */ html { overflow-x: clip; overscroll-behavior-y: none; } body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100vw; background: radial-gradient(900px 480px at 80% -10%, rgba(165, 180, 252, 0.09) 0%, transparent 60%), radial-gradient(700px 420px at 10% 10%, rgba(255, 255, 255, 0.03) 0%, transparent 55%), var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } /* Slim, theme-matched scrollbars */ ::-webkit-scrollbar { width: 10px; height: 6px; } ::-webkit-scrollbar-thumb { background: #2b3040; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #3a4153; } ::-webkit-scrollbar-track { background: transparent; } * { scrollbar-width: thin; scrollbar-color: #2b3040 transparent; } /* Keyboard/tap focus lands a clean indigo ring — never the browser default. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Images ease in instead of popping */ @keyframes imgIn { from { opacity: 0; } } .auction-img img, .char-thumb, .mover-thumb, .nav-brand { animation: imgIn 0.35s var(--ease); } .hidden { display: none !important; } .muted { color: var(--muted); font-size: 0.9rem; } .error { color: var(--down); font-size: 0.9rem; } /* Smooth, consistent interaction feel everywhere (incl. touch) */ button, select, input, a { -webkit-tap-highlight-color: transparent; } button, select { touch-action: manipulation; } .btn:active, .chip:active, .fbtn:active, .game-btn:active, .win-btn:active, .nav-link:active, .tab:active, .sort-sel:active { transform: scale(0.96); } select.sort-sel, .chip, .fbtn, .win-btn, .game-btn { transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); } /* ---------- Motion ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } } @keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } } @keyframes pulseSoft { 50% { opacity: 0.5; } } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); } 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } /* Switching tabs glides in instead of snapping (display toggles restart the animation, so every Search ⇄ Selections ⇄ Watchlist hop feels intentional). */ .tabpane { animation: fadeUp 0.32s var(--ease); } /* Touch devices: hover states otherwise STICK after a tap (a lifted card stays lifted, a tinted button stays tinted) — kill them where there's no real pointer so mobile feels precise instead of glitchy. */ @media (hover: none) { .auction:hover { transform: none; box-shadow: none; border-color: var(--border); } .char-card:hover { transform: none; box-shadow: none; border-color: var(--border); } .btn:not(.btn-primary):hover { transform: none; background: var(--card); border-color: var(--border); } .track-mini:hover { transform: none; background: var(--bg2); border-color: var(--border); } .heart-btn:hover { transform: none; border-color: var(--border); } .nav-brand:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } /* The homepage demo's pieces animate in from invisible — without motion, pin them visible so the demo reads as a static mockup. */ .demo-card, .demo-verdict, .demo-alert { opacity: 1 !important; transform: none !important; } .demo-type { width: auto !important; } } /* ---------- Banner ---------- */ .banner { background: var(--bg2); color: var(--muted); text-align: center; padding: 8px 16px; font-size: 0.83rem; border-bottom: 1px solid var(--border); } /* ---------- Nav ---------- */ .nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 28px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(11, 12, 14, 0.8); backdrop-filter: blur(12px); z-index: 50; } .nav-logo { cursor: pointer; display: flex; align-items: center; flex: 1; } .nav-brand { height: 84px; /* the artwork has built-in padding; pull margins in so the header stays slim */ margin: -16px 0; transition: transform 0.15s ease; } .nav-brand:hover { transform: scale(1.06); } /* ---------- Nav page links ---------- */ .nav-links { display: flex; gap: 4px; } .nav-link { background: none; border: 1px solid transparent; color: var(--muted); padding: 8px 16px; border-radius: 9px; font-weight: 600; font-size: 0.92rem; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .nav-link:hover { color: var(--text); background: var(--card); } .nav-link.active { color: var(--text); background: var(--card); border-color: var(--border); } .count-badge { background: rgba(248, 113, 113, 0.14); color: var(--down); border-radius: 999px; padding: 1px 7px; font-size: 0.72rem; font-weight: 800; } .nav-logo span:not(.logo-mark) { color: var(--muted); font-weight: 700; } .logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, #23262d, #15171b); border: 1px solid var(--border-strong); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; color: var(--text); } .nav-right { display: flex; gap: 10px; align-items: center; flex: 1; justify-content: flex-end; } .nav-email { color: var(--muted); font-size: 0.85rem; margin-right: 6px; } /* ---------- Buttons ---------- */ .btn { border: 1px solid var(--border); background: var(--card); color: var(--text); padding: 9px 18px; border-radius: 10px; cursor: pointer; font-size: 0.95rem; font-weight: 600; white-space: nowrap; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .btn:hover { background: var(--card-hover); border-color: var(--border-strong); transform: translateY(-1px); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled { opacity: 0.55; cursor: default; transform: none; } .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); } .btn-primary:hover { background: #ffffff; border-color: #ffffff; box-shadow: 0 4px 18px rgba(242, 243, 245, 0.12); } .btn-ghost { background: transparent; } .btn-lg { padding: 14px 28px; font-size: 1.02rem; border-radius: 12px; } .btn-demo { margin-top: 10px; border-style: dashed; color: var(--muted); } .btn-track { background: rgba(165, 180, 252, 0.1); border-color: rgba(165, 180, 252, 0.35); color: var(--accent); } .btn-track:hover { background: rgba(165, 180, 252, 0.16); border-color: var(--accent); } /* ---------- Views ---------- */ .view { max-width: 1180px; width: 100%; margin: 0 auto; padding: 24px 28px 80px; flex: 1; animation: fadeUp 0.35s ease; } /* ---------- Hero ---------- */ .hero { text-align: center; padding-top: 64px; } .hero-badge { display: inline-flex; align-items: center; gap: 9px; background: var(--bg2); border: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; font-weight: 600; padding: 7px 16px; border-radius: 999px; margin-bottom: 26px; animation: fadeUp 0.5s ease backwards; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); animation: livePulse 2.2s infinite; } .hero h1 { font-size: 3.3rem; line-height: 1.12; letter-spacing: -1.5px; max-width: 780px; margin: 0 auto; animation: fadeUp 0.55s 0.06s ease backwards; } .grad { background: linear-gradient(100deg, #ffffff 10%, var(--accent) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .sub { color: var(--muted); font-size: 1.13rem; max-width: 620px; margin: 22px auto 0; line-height: 1.65; animation: fadeUp 0.55s 0.12s ease backwards; } .hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 34px; animation: fadeUp 0.55s 0.18s ease backwards; } /* ---------- Animated homepage mini-demo ---------- */ .demo-frame { max-width: 520px; margin: 46px auto 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; text-align: left; animation: fadeUp 0.6s 0.3s var(--ease) backwards; } .demo-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg2); border-bottom: 1px solid var(--border); } .ddot { width: 9px; height: 9px; border-radius: 50%; background: #3e434e; } .demo-url { margin-left: 8px; font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.3px; } .demo-search { margin: 14px 14px 12px; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; min-height: 38px; } .demo-type { display: inline-block; overflow: hidden; white-space: nowrap; animation: demoType 9s steps(23) infinite; } @keyframes demoType { 0% { width: 0ch; } 20%, 92% { width: 23ch; } 100% { width: 0ch; } } .demo-caret { width: 2px; height: 15px; background: var(--accent); margin-left: 3px; animation: caretBlink 1s steps(1) infinite; } @keyframes caretBlink { 50% { opacity: 0; } } .demo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 14px; } .demo-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 9px; opacity: 0; animation: demoCard 9s var(--ease) infinite; } .demo-card:nth-child(2) { animation-delay: 0.18s; } .demo-card:nth-child(3) { animation-delay: 0.36s; } @keyframes demoCard { 0%, 22% { opacity: 0; transform: translateY(10px); } 28%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } } .demo-img { height: 54px; border-radius: 7px; background: linear-gradient(145deg, #272c36, #1b1f26); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 7px; } .demo-bdg { font-size: 0.58rem; font-weight: 800; color: var(--accent); letter-spacing: 0.3px; } .demo-price { font-weight: 800; font-size: 0.88rem; margin-top: 2px; } .demo-cd { font-size: 0.62rem; color: var(--down); font-weight: 700; margin-top: 2px; } .demo-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 14px 15px; } .demo-verdict { background: rgba(74, 222, 128, 0.12); color: var(--up); font-weight: 800; font-size: 0.85rem; padding: 6px 13px; border-radius: 9px; opacity: 0; animation: demoVerdict 9s var(--ease) infinite; } .demo-verdict small { font-size: 0.62rem; opacity: 0.7; } @keyframes demoVerdict { 0%, 38% { opacity: 0; transform: scale(0.85); } 45%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } } .demo-alert { background: var(--card); border: 1px solid rgba(248, 113, 113, 0.5); color: var(--down); font-size: 0.7rem; font-weight: 800; padding: 6px 12px; border-radius: 9px; opacity: 0; animation: demoAlert 9s var(--ease) infinite; } @keyframes demoAlert { 0%, 58% { opacity: 0; transform: translateX(14px); } 64%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } } /* ---------- Load more ---------- */ .load-more-wrap { display: flex; justify-content: center; margin-top: 20px; } .hero-stats { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 54px; flex-wrap: wrap; animation: fadeUp 0.55s 0.24s ease backwards; } .stat { text-align: center; } .stat b { display: block; font-size: 1.02rem; letter-spacing: -0.2px; } .stat span { color: var(--muted); font-size: 0.83rem; } .stat-divider { width: 1px; height: 30px; background: var(--border); } /* ---------- How it works ---------- */ .how { margin-top: 72px; } .how-title { font-size: 1.5rem; letter-spacing: -0.5px; margin-bottom: 22px; } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; text-align: left; } .step { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); } .step:hover { transform: translateY(-5px); border-color: rgba(165, 180, 252, 0.45); background: var(--card); box-shadow: var(--shadow); } .step-n { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: var(--primary-text); font-weight: 800; font-size: 0.95rem; margin-bottom: 14px; transition: transform 0.25s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } .step:hover .step-n { transform: scale(1.15) rotate(-6deg); background: var(--accent); color: #16181f; } .step h3 { margin-bottom: 8px; font-size: 1.02rem; } .step p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 64px; text-align: left; } .feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: transform 0.2s ease, border-color 0.2s ease; animation: fadeUp 0.55s ease backwards; } .feature:nth-child(1) { animation-delay: 0.28s; } .feature:nth-child(2) { animation-delay: 0.36s; } .feature:nth-child(3) { animation-delay: 0.44s; } .feature:hover { transform: translateY(-5px); border-color: rgba(165, 180, 252, 0.45); box-shadow: var(--shadow); } .f-icon { font-size: 1.7rem; margin-bottom: 12px; display: inline-block; transition: transform 0.25s var(--ease); } .feature:hover .f-icon { transform: scale(1.2) rotate(-6deg); } .feature h3 { margin-bottom: 8px; font-size: 1.05rem; } .feature p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; } /* ---------- Paywall ---------- */ .paywall-card { max-width: 480px; margin: 70px auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 42px 40px; text-align: center; box-shadow: var(--shadow); animation: scaleIn 0.4s ease; } .paywall-logo { height: 62px; margin: 0 auto 18px; display: block; } .paywall-card h2 { font-size: 1.65rem; margin-bottom: 10px; letter-spacing: -0.5px; } .paywall-card p { color: var(--muted); margin-bottom: 18px; } .paywall-list { list-style: none; text-align: left; margin: 0 0 24px; } .paywall-list li { padding: 7px 0; font-size: 0.95rem; color: var(--text); } .paywall-card .btn { width: 100%; } /* ---------- Pages ---------- */ .tabpane { animation: fadeUp 0.3s ease; padding-top: 8px; } .pane-title { margin-bottom: 6px; letter-spacing: -0.4px; } .tabpane > .muted { margin-bottom: 18px; } /* ---------- Search bar ---------- */ .search-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .game-toggle { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg2); } .game-btn { background: transparent; border: none; color: var(--muted); padding: 11px 18px; cursor: pointer; font-weight: 700; font-size: 0.9rem; transition: background 0.15s ease, color 0.15s ease; } .game-btn:hover { color: var(--text); } .game-btn.active { background: var(--primary); color: var(--primary-text); } #searchInput { flex: 1; min-width: 240px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 12px 16px; font-size: 1rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #searchInput:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.08); } #searchInput::placeholder { color: #5d626d; } /* ---------- Search aux row: chips + character quick-track ---------- */ .search-aux { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; } .search-aux .chips { margin-top: 0; } .quick-track { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 11px; padding: 5px 6px 5px 14px; } .qt-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); white-space: nowrap; } .qt-game { padding: 7px 10px; font-size: 0.8rem; } .selections-qt { margin-bottom: 16px; animation: fadeUp 0.3s var(--ease); } .selections-qt #qtInput { flex: 1; width: auto; min-width: 90px; } /* Glow highlight when a character was just added */ @keyframes justAdded { 0% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.7); } 35% { box-shadow: 0 0 0 6px rgba(165, 180, 252, 0.25); } 100% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0); } } .char-card.just-added { border-color: var(--accent); animation: justAdded 1.3s var(--ease) 2; } #qtInput { background: transparent; border: none; outline: none; color: var(--text); width: 110px; font-size: 0.9rem; padding: 6px 2px; } #qtInput::placeholder { color: #5d626d; } /* ---------- Quick chips ---------- */ .chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; } .chips-label { color: #5d626d; font-size: 0.82rem; font-weight: 600; } .chip { background: var(--bg2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--card); } .search-refresh { font-size: 1.05rem; padding: 9px 14px; } .search-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; flex-wrap: wrap; gap: 10px; animation: fadeUp 0.3s ease; } #searchSummary { color: var(--muted); font-size: 0.92rem; } /* ---------- Typical closes + filters ---------- */ .typical { margin-top: 16px; padding: 10px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; font-size: 0.86rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; animation: fadeUp 0.3s ease; } .typical-label { font-weight: 700; color: var(--text); } .typical-item b { color: var(--accent); } .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; animation: fadeUp 0.3s ease; } /* Mobile-only dropdown trigger for the filter bar (hidden on desktop) */ .filters-toggle { display: none; } .ft-chev { transition: transform 0.25s var(--ease); display: inline-block; } .filters-toggle.open .ft-chev { transform: rotate(180deg); } .fgroup { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg2); } .fbtn { background: transparent; border: none; color: var(--muted); padding: 8px 13px; cursor: pointer; font-weight: 600; font-size: 0.84rem; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .fbtn:hover { color: var(--text); } .fbtn.active { background: var(--primary); color: var(--primary-text); } .ends-group { margin-left: auto; } .sort-sel { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 0.84rem; font-weight: 600; cursor: pointer; outline: none; } /* ---------- Exact / related results divider ---------- */ .results-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; color: #5d626d; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin: 6px 0 -4px; } .results-divider::before, .results-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ---------- Card badges ---------- */ .badge-row { display: flex; gap: 6px; flex-wrap: wrap; } .bdg { font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--border); color: var(--muted); letter-spacing: 0.3px; } .bdg-top { color: var(--accent); border-color: rgba(165, 180, 252, 0.4); } .bdg-hot { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.07); } .bdg-deal { color: var(--up); border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.07); } .bdg-closed { color: var(--text); border-color: var(--border-strong); background: var(--bg2); } /* Unhearted watchlist cards glide out instead of lingering until a reload. */ .auction.removing { opacity: 0; transform: scale(0.93); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none; } /* Closed watchlist auctions: kept forever with their final price. */ .auction.ended-card { opacity: 0.88; } .auction.ended-card .auction-img { filter: saturate(0.7); } .closed-lbl { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } .was-saved { font-size: 0.74rem; color: var(--muted); font-weight: 600; } /* ---------- Auction grid ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 20px; } .auction { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; animation: fadeUp 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; /* Offscreen cards skip layout & paint entirely — keeps scrolling through hundreds of live auctions perfectly smooth. */ content-visibility: auto; contain-intrinsic-size: auto 340px; } .auction:nth-child(1) { animation-delay: 0.02s; } .auction:nth-child(2) { animation-delay: 0.05s; } .auction:nth-child(3) { animation-delay: 0.08s; } .auction:nth-child(4) { animation-delay: 0.11s; } .auction:nth-child(5) { animation-delay: 0.14s; } .auction:nth-child(6) { animation-delay: 0.17s; } .auction:nth-child(7) { animation-delay: 0.2s; } .auction:nth-child(8) { animation-delay: 0.23s; } .auction:nth-child(9) { animation-delay: 0.26s; } .auction:nth-child(10) { animation-delay: 0.29s; } .auction:nth-child(11) { animation-delay: 0.32s; } .auction:nth-child(12) { animation-delay: 0.35s; } .auction:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); } .auction-img { height: 170px; background: linear-gradient(145deg, #1b1d23, #121318); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #34373f; font-weight: 800; } .auction-img img { width: 100%; height: 100%; object-fit: contain; background: #0e0f12; } .auction-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .auction-title { font-size: 0.86rem; line-height: 1.4; font-weight: 600; min-height: 2.4em; } .auction-row { display: flex; justify-content: space-between; align-items: center; } .price { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.4px; } .bids { color: var(--muted); font-size: 0.82rem; } .countdown { font-size: 0.85rem; font-weight: 700; color: var(--up); } .countdown.urgent { color: var(--down); animation: pulseSoft 1.1s infinite; } .countdown.ended { color: var(--muted); animation: none; } .auction-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; } .heart-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-size: 1.05rem; padding: 7px 12px; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .heart-btn:hover { transform: scale(1.12); border-color: var(--border-strong); } @keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-6deg); } 100% { transform: scale(1); } } .heart-btn.pop { animation: heartPop 0.35s var(--ease); } .track-mini { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; padding: 7px 11px; cursor: pointer; transition: transform 0.12s var(--ease), border-color 0.12s var(--ease), background 0.12s var(--ease); } .track-mini:hover { transform: scale(1.1); border-color: rgba(165, 180, 252, 0.45); background: rgba(165, 180, 252, 0.08); } .track-mini:active { transform: scale(0.92); } .track-mini:disabled { opacity: 0.8; cursor: default; transform: none; } /* Tracked! The checkmark lands on a SOLID green chip with a glow and a pop — visible from across the room, zero doubt the card is in My Selections. */ .track-mini.tracked-ok { color: #0b2113; border-color: var(--up); background: var(--up); font-weight: 900; opacity: 1; box-shadow: 0 0 14px rgba(74, 222, 128, 0.5); animation: checkPop 0.5s var(--ease); } @keyframes checkPop { 0% { transform: scale(0.5) rotate(-12deg); } 55% { transform: scale(1.3) rotate(4deg); } 100% { transform: scale(1); } } .heart-btn.on { border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.08); } .ebay-link { flex: 1; text-align: center; text-decoration: none; color: var(--text); background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-size: 0.85rem; font-weight: 600; transition: background 0.15s ease, border-color 0.15s ease; } .ebay-link:hover { background: var(--card-hover); border-color: var(--border-strong); } /* ---------- Skeleton loading ---------- */ .skeleton { pointer-events: none; } .skeleton .auction-img, .sk-line { background: linear-gradient(90deg, var(--card) 25%, #1f2127 50%, var(--card) 75%); background-size: 400px 100%; animation: shimmer 1.2s infinite linear; } .sk-line { height: 12px; border-radius: 6px; } .sk-line.w80 { width: 80%; } .sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } /* ---------- Characters toolbar ---------- */ .char-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .char-toolbar .muted { margin-bottom: 0; } .char-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .char-controls .sort-sel { margin-left: 0; } .window-toggle { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg2); } .win-btn { background: transparent; border: none; color: var(--muted); padding: 9px 14px; cursor: pointer; font-weight: 700; font-size: 0.85rem; transition: background 0.15s ease, color 0.15s ease; } .win-btn:hover { color: var(--text); } .win-btn.active { background: var(--primary); color: var(--primary-text); } @keyframes spin { to { transform: rotate(360deg); } } .refresh-icon { display: inline-block; font-size: 1rem; } .refreshing .refresh-icon { animation: spin 0.9s linear infinite; } /* ---------- Biggest movers ---------- */ .movers { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 0; margin-bottom: 20px; animation: fadeUp 0.35s ease; } .movers-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; padding: 14px 18px 10px; } .movers-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.2px; } .movers-sub { font-size: 0.8rem; font-weight: 600; color: var(--muted); } .movers-tabs { display: flex; gap: 6px; } .mtab { background: transparent; border: 1px solid transparent; color: var(--muted); font-size: 0.9rem; font-weight: 800; padding: 6px 13px; border-radius: 9px; cursor: pointer; letter-spacing: -0.2px; transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); } .mtab:hover { color: var(--text); } .mtab.active { background: var(--bg2); border-color: var(--border); color: var(--text); } .active-list { border-top: 1px solid var(--border); } .active-list .mover:first-child { border-top: none; } .movers-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); } .movers-grid.three { grid-template-columns: 1fr 1fr 1fr; } .ms-hot { color: #fbbf24; } .mover-vol { font-size: 0.78rem; font-weight: 600; color: var(--muted); white-space: nowrap; text-align: right; } .mover-vol b { color: var(--text); font-size: 0.9rem; } @media (max-width: 980px) { .movers-grid.three { grid-template-columns: 1fr; } .movers-grid.three .mover-col + .mover-col { border-left: none; border-top: 1px solid var(--border); } } .mover-col { min-width: 0; } .mover-col + .mover-col { border-left: 1px solid var(--border); } .mover-col-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 10px 18px 4px; } .mover-col .mover:first-of-type { border-top: none; } .mover-empty { padding: 10px 18px 14px; color: #5d626d; font-size: 0.8rem; line-height: 1.5; } @media (max-width: 700px) { .movers-grid { grid-template-columns: 1fr; } .mover-col + .mover-col { border-left: none; border-top: 1px solid var(--border); } } .mover { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-top: 1px solid var(--border); cursor: pointer; transition: background 0.15s var(--ease); animation: fadeUp 0.35s var(--ease) backwards; } .mover:nth-child(2) { animation-delay: 0.03s; } .mover:nth-child(3) { animation-delay: 0.06s; } .mover:nth-child(4) { animation-delay: 0.09s; } .mover:nth-child(5) { animation-delay: 0.12s; } .mover:nth-child(6) { animation-delay: 0.15s; } .mover:hover { background: var(--card-hover); } .mover-rank { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 800; background: var(--bg2); border: 1px solid var(--border); color: var(--muted); flex-shrink: 0; } .mover-rank.r1 { color: #fbbf24; border-color: rgba(251, 191, 36, 0.45); } .mover-rank.r2 { color: #cbd5e1; border-color: rgba(203, 213, 225, 0.4); } .mover-rank.r3 { color: #d8a47f; border-color: rgba(216, 164, 127, 0.4); } .mover-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .mover-name { font-weight: 800; text-transform: capitalize; line-height: 1.25; } .mover-game { font-size: 0.72rem; color: var(--muted); } .mover-spark { width: 72px; height: 24px; flex-shrink: 0; opacity: 0.9; } .mover-pct { font-weight: 800; font-size: 0.95rem; min-width: 76px; text-align: right; } .mover-pct.up { color: var(--up); } .mover-pct.down { color: var(--down); } .mover-pct.flat { color: var(--flat); } .conf-low { color: #8a8064; } /* ---------- Selection sections (Characters vs Specific Cards) ---------- */ .sel-section { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 2px 12px; animation: fadeUp 0.3s var(--ease); } .sel-section:first-child { margin-top: 6px; } .sel-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.3px; } .sel-hint { font-size: 0.78rem; color: var(--muted); font-weight: 600; } .sel-empty { background: var(--bg2); border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px; color: var(--muted); font-size: 0.88rem; } /* ---------- Character cards ---------- */ /* align-items: start is CRITICAL — without it, expanding one card stretches its row-mates to the same height, making neighbors look like empty opened drop-downs (THE long-running "all boxes open" report). */ .char-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; } .char-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; animation: fadeUp 0.4s ease backwards; } .char-card:nth-child(2) { animation-delay: 0.05s; } .char-card:nth-child(3) { animation-delay: 0.1s; } .char-card:nth-child(4) { animation-delay: 0.15s; } .char-card:nth-child(5) { animation-delay: 0.2s; } .char-card:nth-child(6) { animation-delay: 0.25s; } .char-card:nth-child(7) { animation-delay: 0.3s; } .char-card:nth-child(8) { animation-delay: 0.35s; } .char-card:nth-child(9) { animation-delay: 0.4s; } .char-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); } .char-card { cursor: pointer; } .char-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); } /* Press feedback: the box you're tapping visibly responds — no guessing which card the tap landed on. */ .char-card:active { transform: scale(0.985); } .heart-btn:active { transform: scale(0.9); } .bd-chip:active { transform: scale(0.93); } .char-head { display: flex; align-items: center; gap: 10px; } .char-name { font-size: 1.05rem; font-weight: 800; text-transform: capitalize; letter-spacing: -0.3px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Canonical card identity from the TCG databases: set name + the term. */ .char-set { display: block; font-size: 0.7rem; font-weight: 700; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "+ Add" flashes the tracking widget so the button visibly points there. */ @keyframes qtFlash { 0%, 100% { box-shadow: none; border-color: var(--border); } 30%, 70% { box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.35); border-color: var(--accent); } } .quick-track.qt-flash { animation: qtFlash 1.6s var(--ease); } .remove-btn { background: none; border: 1px solid transparent; color: #5d626d; font-size: 0.8rem; font-weight: 700; padding: 4px 7px; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease); } .remove-btn:hover { color: var(--down); background: rgba(248, 113, 113, 0.08); } .remove-btn.confirm { color: var(--down); border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.1); font-size: 0.74rem; } .char-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; border: 1px solid var(--border); background: #0e0f12; flex-shrink: 0; } .char-thumb-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #34373f; background: linear-gradient(145deg, #1b1d23, #121318); } .mover-thumb { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; border: 1px solid var(--border); background: #0e0f12; flex-shrink: 0; } .char-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .filter-chips { font-size: 0.72rem; font-weight: 700; color: var(--accent); letter-spacing: 0.2px; } .head-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .chev { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: var(--primary-text); margin-left: 8px; flex-shrink: 0; transition: transform 0.25s var(--ease), filter 0.15s var(--ease); } .chev svg { display: block; } .char-card:hover .chev { filter: brightness(1.15); } .char-card.expanded .chev { transform: rotate(180deg); } .char-live { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 0.74rem; font-weight: 600; color: var(--muted); } /* Tap-to-expand details (smooth height animation via grid rows) */ .char-details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); } .char-details-inner { min-height: 0; overflow: hidden; } .char-card.expanded .char-details { grid-template-rows: 1fr; } .game-badge { font-size: 0.62rem; font-weight: 800; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .trend-badge { font-size: 0.98rem; font-weight: 800; padding: 6px 14px; border-radius: 10px; white-space: nowrap; } .tb-win { font-size: 0.68rem; font-weight: 800; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.4px; margin-left: 2px; } .trend-badge.up { background: rgba(74, 222, 128, 0.1); color: var(--up); } .trend-badge.down { background: rgba(248, 113, 113, 0.1); color: var(--down); } .trend-badge.flat { background: rgba(152, 157, 168, 0.1); color: var(--flat); } .trend-badge.unknown { background: rgba(152, 157, 168, 0.1); color: var(--flat); font-size: 0.85rem; } .spark-vol { fill: #3a3f4b; } /* Compact (collapsed) summary row inside character cards */ .char-compact { display: flex; align-items: center; gap: 10px; margin-top: 13px; min-height: 30px; } .char-compact .trend-badge { font-size: 0.85rem; padding: 5px 11px; } .char-compact .mover-spark { width: 60px; height: 22px; flex-shrink: 1; } .compact-today { margin-left: auto; font-size: 0.76rem; color: var(--muted); white-space: nowrap; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-weight: 600; } .compact-today b { color: var(--text); font-size: 0.84rem; } /* Expanded market chart */ .chart-lg { width: 100%; height: auto; margin: 4px 0 2px; } .ch-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; } .ch-val { fill: var(--text); font-size: 10px; font-weight: 700; } .ch-date { fill: #6c717d; font-size: 8.5px; font-weight: 600; letter-spacing: 0.3px; } .char-daily { margin-top: 10px; padding: 8px 12px; background: rgba(165, 180, 252, 0.05); border: 1px solid rgba(165, 180, 252, 0.18); border-radius: 9px; font-size: 0.82rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .char-daily b { color: var(--text); } .cd-label { font-weight: 800; color: var(--accent); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.6px; } .cd-vs { color: #6c717d; } .cd-pct { color: var(--muted); font-weight: 700; } .cg-label { font-weight: 700; color: #6c717d; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px; } .gfall { color: #6c717d; font-size: 0.72rem; } /* ---------- Card-level breakdown (hottest cards per character) ---------- */ .breakdown { margin-top: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } .bd-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 9px 12px 6px; color: var(--text); } .bd-title span { color: #6c717d; font-weight: 700; margin-left: 4px; text-transform: none; letter-spacing: 0; } .bd-chips { display: flex; gap: 6px; padding: 0 12px 9px; flex-wrap: wrap; } .bd-chip { background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: 0.7rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); } .bd-chip:hover { color: var(--text); } .bd-chip.active { background: var(--primary); color: var(--primary-text); border-color: var(--primary); } .bd-sold { font-size: 0.72rem; color: var(--muted); font-weight: 700; } .bd-sold b { color: var(--text); } .bd-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-top: 1px solid var(--border); } .bd-name { font-size: 0.76rem; font-weight: 600; line-height: 1.3; } .bd-meta { font-size: 0.68rem; color: var(--muted); font-weight: 600; } .bd-right { display: flex; gap: 10px; align-items: baseline; margin-top: 2px; } .bd-pct { font-weight: 800; font-size: 0.82rem; } .bd-pct.up { color: var(--up); } .bd-pct.down { color: var(--down); } .bd-last { font-size: 0.72rem; color: var(--muted); font-weight: 700; } .bd-empty { padding: 10px 12px; font-size: 0.76rem; color: #6c717d; line-height: 1.5; } /* ---------- Narratives: leader/laggard momentum baskets ---------- */ .narratives { margin-top: 14px; } .nr-group { border-top: 1px solid var(--border); padding: 10px 0 4px; } .nr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 18px 6px; } .nr-title { font-weight: 800; font-size: 0.92rem; letter-spacing: -0.2px; } .nr-meta { color: var(--muted); font-size: 0.74rem; font-weight: 700; white-space: nowrap; } .nr-signal { margin: 0 18px 8px; padding: 8px 12px; background: rgba(165, 180, 252, 0.08); border: 1px solid rgba(165, 180, 252, 0.3); border-radius: 9px; font-size: 0.78rem; line-height: 1.45; color: var(--text); } .nr-member { display: flex; align-items: center; gap: 10px; padding: 7px 18px; cursor: pointer; transition: background 0.15s var(--ease); } .nr-member:hover { background: var(--card-hover); } .nr-thumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .nr-name { font-size: 0.82rem; font-weight: 600; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .nr-lead { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.5px; color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 999px; padding: 1px 7px; flex-shrink: 0; } .nr-right { margin-left: auto; display: flex; gap: 10px; align-items: baseline; flex-shrink: 0; } .nr-live { color: var(--muted); font-size: 0.7rem; font-weight: 700; } .nr-pct { font-weight: 800; font-size: 0.82rem; } .nr-pct.up { color: var(--up); } .nr-pct.down { color: var(--down); } .nr-pct.flat { color: var(--flat); font-weight: 700; font-size: 0.74rem; } /* Inline narrative editor (replaces the 🏷 button while typing) */ .narr-input { background: var(--bg2); border: 1px solid var(--accent); border-radius: 8px; color: var(--text); font-size: 0.82rem; padding: 6px 10px; width: 200px; max-width: 60vw; } /* ---------- Sales ledger (eBay-research-style daily closes) ---------- */ .ledger { margin-top: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } .ledger:empty { display: none; } .lg-days { padding: 0 0 4px; } .lg-day { display: grid; grid-template-columns: 78px 1fr 1fr auto; gap: 8px; align-items: baseline; padding: 6px 12px; border-top: 1px solid var(--border); font-size: 0.78rem; } .lg-day.lg-zero { color: #565b66; } .lg-day.lg-headrow { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #6c717d; padding: 5px 12px 3px; } .lg-day.lg-headrow .lg-median, .lg-day.lg-headrow .lg-high { color: #6c717d; font-weight: 800; } .lg-label { font-weight: 800; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.4px; color: var(--muted); } .lg-median { color: var(--text); font-variant-numeric: tabular-nums; } .lg-median b { font-size: 0.84rem; } .lg-high { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; } .lg-delta { text-align: right; } .lg-pct { font-weight: 800; font-size: 0.76rem; } .lg-pct.up { color: var(--up); } .lg-pct.down { color: var(--down); } .lg-pct.flat { color: #565b66; font-weight: 700; } .lg-subtitle { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #6c717d; padding: 8px 12px 4px; border-top: 1px solid var(--border); } .lg-sale { display: flex; gap: 10px; align-items: baseline; padding: 5px 12px; font-size: 0.76rem; } .lg-sale b { font-variant-numeric: tabular-nums; } .lg-sale .lg-meta { color: var(--muted); font-weight: 600; font-size: 0.7rem; } .lg-when { color: #6c717d; font-size: 0.7rem; margin-left: auto; white-space: nowrap; } .lg-link { color: var(--accent); text-decoration: none; font-weight: 800; } .lg-link:hover { text-decoration: underline; } @media (max-width: 760px) { .lg-day { grid-template-columns: 68px 1fr 1fr auto; font-size: 0.74rem; } } .char-grades { margin-top: 10px; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; font-size: 0.82rem; color: var(--muted); } .char-grades b { color: var(--accent); } .char-grades .dot { color: #4a4e58; } .ms-up { color: var(--up); } .ms-down { color: var(--down); } .ms-flat { color: var(--flat); } .char-stats { color: var(--muted); font-size: 0.83rem; margin-top: 8px; line-height: 1.6; } .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .sg { background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sg-v { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg-l { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conf-low-line { margin-top: 8px; font-size: 0.78rem; color: #8a8064; } .char-actions { margin-top: 14px; display: flex; gap: 8px; } .btn-sm { padding: 6px 12px; font-size: 0.82rem; } .btn-danger:hover { color: var(--down); border-color: rgba(248, 113, 113, 0.4); } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--border); padding: 22px 28px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; color: var(--muted); font-size: 0.85rem; } .footer b { color: var(--text); } .footer-fine { font-size: 0.74rem; color: #5d626d; } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(5px); } .modal { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 34px; width: 380px; max-width: 92vw; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); animation: scaleIn 0.25s ease; } .modal h2 { margin-bottom: 6px; letter-spacing: -0.5px; } .modal input { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 12px 14px; font-size: 0.98rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .modal input:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.08); } .modal .muted { text-align: center; } .or-divider { display: flex; align-items: center; gap: 12px; color: #5d626d; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; } .or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; border-color: #fff; color: #1a1a1a; } .btn-google:hover { background: #f1f3f5; border-color: #f1f3f5; } .modal .muted a { color: var(--accent); cursor: pointer; } .empty-state { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 60px 20px; font-size: 0.95rem; line-height: 1.7; animation: fadeUp 0.3s ease; } /* ---------- Toasts ---------- */ @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } } #toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; } .toast { background: var(--card); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 18px; font-size: 0.9rem; font-weight: 600; box-shadow: var(--shadow); animation: toastIn 0.25s var(--ease); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); max-width: 90vw; } .toast.out { opacity: 0; transform: translateY(10px); } .toast.error { border-left: 3px solid var(--down); } .toast.ok { border-left: 3px solid var(--up); } /* ---------- Responsive ---------- */ @media (max-width: 920px) { .nav { flex-wrap: wrap; padding: 8px 16px; gap: 6px; } .nav-links { order: 3; width: 100%; justify-content: center; padding-bottom: 4px; } .nav-email { display: none; } .nav-brand { height: 64px; margin: -10px 0; } } @media (max-width: 640px) { .hero h1 { font-size: 2.2rem; } .view { padding: 16px 14px 60px; } .hero-cta { flex-direction: column; align-items: center; } .hero-stats { gap: 16px; } .stat-divider { display: none; } .nav-brand { height: 54px; margin: -8px 0; } .nav-link { padding: 7px 11px; font-size: 0.85rem; gap: 5px; } .nav-right .btn { padding: 8px 14px; font-size: 0.88rem; } /* Search controls stack cleanly; game toggle swipes instead of squeezing. Snap points + a lock-in scroll (JS) mean tapping One Piece settles it crisply into view instead of resting half-scrolled. */ .search-bar { flex-direction: column; align-items: stretch; } .game-toggle { width: 100%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 4px; scroll-behavior: smooth; } .game-toggle::-webkit-scrollbar { display: none; } .game-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 0.84rem; scroll-snap-align: start; } #searchInput { min-width: 0; } .search-bar .btn-primary { width: 100%; } .search-refresh { width: 100%; } .char-toolbar { align-items: stretch; flex-direction: column; gap: 10px; } /* Two-column shopping grid — denser, app-like browsing */ .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .auction-img { height: 132px; } .auction-body { padding: 10px; gap: 6px; } .auction-title { font-size: 0.76rem; min-height: 2.2em; } .price { font-size: 1.02rem; } .bids { font-size: 0.72rem; } .countdown { font-size: 0.76rem; } .bdg { font-size: 0.58rem; padding: 2px 7px; } .heart-btn, .track-mini { padding: 6px 9px; font-size: 0.88rem; } .ebay-link { font-size: 0.72rem; padding: 7px 4px; } .paywall-card { padding: 32px 22px; margin: 40px auto; } .footer { padding: 18px 14px; } } /* ---------- Watchlist ending-soon alerts ---------- */ @keyframes alertIn { from { opacity: 0; transform: translateX(24px); } } #alerts { position: fixed; top: 78px; right: 16px; z-index: 220; display: flex; flex-direction: column; gap: 10px; max-width: min(330px, calc(100vw - 32px)); } .alert-pop { background: var(--card); border: 1px solid rgba(248, 113, 113, 0.5); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); animation: alertIn 0.3s var(--ease); } .alert-sub { color: var(--accent); font-weight: 800; font-size: 0.78rem; margin-bottom: 4px; } .char-live-wait { color: #6c717d; } .char-live-none { color: #6c717d; } .alert-head { color: var(--down); font-weight: 800; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .alert-title { font-size: 0.84rem; font-weight: 600; line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .alert-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .alert-actions { display: flex; gap: 8px; } .alert-bid { flex: 1; text-align: center; text-decoration: none; } /* Alerts fade themselves out after a while instead of stacking forever. */ @keyframes alertOut { to { opacity: 0; transform: translateY(-10px) scale(0.97); } } .alert-pop.fade { animation: alertOut 0.5s var(--ease) forwards; } /* ---------- Mobile flow: swipeable rows instead of wrapped clutter ---------- */ @media (max-width: 760px) { /* Alerts: clean centered banner under the header, full usable width. */ #alerts { top: 64px; left: 16px; right: 16px; max-width: none; align-items: center; } .alert-pop { width: 100%; max-width: 380px; } .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .chips::-webkit-scrollbar { display: none; } /* Selections controls WRAP on phones — the 1d/3d/7d window and Refresh must always be visible, never hidden down a sideways scroll. */ .char-controls { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; } /* Filter bar collapses behind the Filters & sort dropdown */ .filters-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 14px; } .filter-bar { display: none; } .filter-bar.open { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; animation: fadeUp 0.25s var(--ease); } .filter-bar.open .fgroup { display: flex; width: 100%; margin: 0; } .filter-bar.open .fbtn { flex: 1; text-align: center; padding: 10px 6px; } .filter-bar.open .sort-sel { width: 100%; } .filter-bar.open .ends-group { margin-left: 0; } .chips { justify-content: flex-start; margin-top: 10px; } .chips-label { display: none; } .search-aux { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; } .search-aux .chips { margin-top: 0; } .quick-track { width: 100%; flex-wrap: wrap; } .qt-game { flex: 1; } #qtInput { flex: 2; width: auto; min-width: 110px; } .load-more-wrap .btn { width: 100%; } .demo-frame { margin-top: 34px; } .demo-cards { gap: 8px; padding: 0 10px; } /* Even vertical rhythm on the search page: every block 12px apart */ .search-bar { gap: 10px; } .search-meta { margin-top: 12px; } .typical { margin-top: 12px; padding: 9px 14px; } .filters-toggle { margin-top: 12px; } .grid { margin-top: 14px; } .tabpane { padding-top: 4px; } .pane-title { font-size: 1.3rem; } /* Summary + track button stack cleanly */ .search-meta { flex-direction: column; align-items: stretch; gap: 8px; } #searchSummary { font-size: 0.85rem; } .search-meta .btn-track { width: 100%; } .chip, .fgroup, .sort-sel, .char-controls .btn, .window-toggle { flex-shrink: 0; } .ends-group { margin-left: 0; } .typical { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 12px; } .typical::-webkit-scrollbar { display: none; } .typical-label, .typical-item { white-space: nowrap; flex-shrink: 0; } .movers-head { padding: 12px 14px 8px; } .movers-sub { display: none; } /* redundant on small screens */ .mover { padding: 10px 14px; gap: 10px; flex-wrap: wrap; } .mover-spark { width: 52px; } .mover-info { min-width: 0; flex: 1 1 60%; } .mover-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .mover-vol { white-space: normal; text-align: left; flex-basis: 100%; margin-left: 40px; font-size: 0.72rem; } .mover-pct { min-width: 0; } /* Belt & suspenders: nothing may widen the page itself on phones */ .view, .tabpane, .movers, .char-list { max-width: 100%; overflow-x: clip; } }