/* ===========================================================
* PathBinder — extracted inline styles (auto-generated)
* Source: index.html blocks: 4
* Concatenated in document order.
* Do NOT edit by hand — re-run the extraction.
* =========================================================== */
/* ── Block 1 ────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0F0D0A;--surface:#1C1810;--surface2:#241C10;--surface3:#2C2218;--border:#3D3020;
--accent:#FF5C00;--accent2:#FFD23F;--green:#D2783A;--red:#C8002A;
--yellow:#FFD23F;--gold:#FFD23F;--orange:#FF5C00;--teal:#1AC7A0;
--copper:#B87333;--copper-dim:rgba(184,115,51,.55);--copper-glow:rgba(184,115,51,.18);
--text:#F2ECD8;--muted:#A8957A;--text-on-accent:#1a1a1a;
--shadow:#1E1408;--premium:#C8002A;--premium-txt:#F2ECD8;
--sb-w:198px;--sb-w-coll:54px;
}
/* Disable the iOS rubber-band overscroll bounce so the fixed bottom
mobile-nav doesn't ride up when you reach the end of a page. Harmless
on desktop. */
html,body{overscroll-behavior:none;}
body{font-family:'Space Mono','Share Tech Mono',monospace;background:var(--bg);color:var(--text);min-height:100vh;padding-left:var(--sb-w);transition:background .2s,color .2s,padding-left .25s,padding-right .25s}
body.nav-collapsed{padding-left:var(--sb-w-coll)}
/* Landing page: keep sidebar, hide binder top bar only */
body.on-landing #binderSidebar{display:none!important}
@keyframes scanlines{0%{transform:translateY(0)}100%{transform:translateY(10px)}}
/* SIDEBAR NAV */
nav{background:var(--surface);border-right:2px solid var(--border);position:fixed;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);left:0;top:0;bottom:0;width:var(--sb-w);height:100vh;display:flex;flex-direction:column;z-index:9999;overflow:hidden;transition:width .25s;box-shadow:none}
nav.sb-collapsed{width:var(--sb-w-coll)}
.nav-header{height:52px;display:flex;align-items:center;padding:0 8px 0 10px;border-bottom:2px solid var(--border);flex-shrink:0;gap:6px}
.logo-img-btn{background:none!important;border:none!important;padding:0!important;cursor:pointer;line-height:0;box-shadow:none!important;min-width:0!important;letter-spacing:0;flex:1;overflow:hidden}
.logo-img-btn:hover{opacity:.85}
.nav-logo-img{height:28px;width:auto;display:block;object-fit:contain;image-rendering:auto;max-width:140px}
nav.sb-collapsed .nav-logo-img{max-width:26px;height:26px;object-fit:cover;object-position:left}
/* Logo split: full PathBinder lockup when expanded, PB monogram when
collapsed. CSS-only toggle keyed off the nav.sb-collapsed class. */
.nav-logo-full{display:block}
.nav-logo-mark{display:none}
nav.sb-collapsed .nav-logo-full{display:none}
nav.sb-collapsed .nav-logo-mark{display:block;height:26px;width:26px;object-fit:contain}
.nav-collapse-btn{width:26px;height:26px;border:1.5px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all .12s;background:transparent;padding:0}
.nav-collapse-btn:hover{border-color:var(--accent);color:var(--accent)}
.nav-collapse-btn svg{width:12px;height:12px;transition:transform .25s}
nav.sb-collapsed .nav-collapse-btn svg{transform:rotate(180deg)}
.nav-section{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0 4px}
.nav-group-label{font-family:'Press Start 2P',monospace;font-size:7.5px;color:var(--copper-dim);letter-spacing:.14em;padding:10px 12px 3px;white-space:nowrap;overflow:hidden;text-transform:uppercase}
nav.sb-collapsed .nav-group-label{color:transparent;padding-top:12px;padding-bottom:2px}
.nav-right{display:contents}
.nav-tabs{display:flex;flex-direction:column;gap:1px}
button{font-family:'Space Mono','Share Tech Mono',monospace}
.nav-tab{display:flex;align-items:center;gap:9px;padding:7px 12px;border:none;border-left:3px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:10px;letter-spacing:.08em;text-transform:uppercase;width:100%;transition:all .1s;position:relative;white-space:nowrap;text-align:left;margin-bottom:1px}
.nav-tab:hover{color:var(--text);background:var(--surface2);border-left-color:var(--border)}
.nav-tab.active{color:var(--copper);background:var(--copper-glow);border-left-color:var(--copper)}
.nav-tab.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--copper);box-shadow:0 0 10px var(--copper)}
.nav-tab .badge-count{background:var(--red);color:#fff;border-radius:0;width:15px;height:15px;display:flex;align-items:center;justify-content:center;font-size:.48rem;font-weight:700;border:1px solid var(--border);flex-shrink:0;margin-left:auto}
.nav-tab[data-page="admin"]{display:none}
.nav-tab[data-page="admin"].admin-visible{display:flex;align-items:center}
.nav-tab-ico{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nav-tab-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Branded multicolor icons (copper + teal) live as separate files
under /icons. Use object-fit:contain so the slightly-wider viewBox
(14.95×13.5) centers inside the square container without crop. */
.nav-tab-ico img{width:20px;height:20px;object-fit:contain;display:block}
.nav-tab-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
nav.sb-collapsed .nav-tab{justify-content:center;padding:9px 0}
nav.sb-collapsed .nav-tab-lbl{display:none}
nav.sb-collapsed .nav-tab .badge-count{display:none}
nav.sb-collapsed .nav-group-label{height:0;padding:0;overflow:hidden}
nav.sb-collapsed .nav-tab.active::before{width:2px}
nav.sb-collapsed .nav-tab:hover::after{content:attr(data-label);position:fixed;left:calc(var(--sb-w-coll) + 6px);background:#000;border:1.5px solid var(--accent);color:var(--accent);padding:4px 9px;font-size:9.5px;letter-spacing:.1em;white-space:nowrap;box-shadow:3px 3px 0 #000;z-index:10001;pointer-events:none;font-family:'Space Mono',monospace;text-transform:uppercase}
/* Sidebar avatar — fills the dead space above the footer with the
user's full-body PFP. Desktop only; the mobile media query at
the bottom of this stylesheet hides it. Capped via max-height
so it never pushes menu items (Marketplace, Dashboard, Trade
Analyzer) out of view on shorter viewports. */
.sidebar-avatar-wrap{
flex:0 1 auto;
min-height:0;
max-height:clamp(120px, 33vh, 330px);
display:flex;
align-items:flex-end;
justify-content:center;
padding:4px 6px 0;
pointer-events:none;
overflow:hidden;
}
.sidebar-avatar-img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
image-rendering:auto;
filter:drop-shadow(0 4px 12px rgba(26,199,160,.18));
}
nav.sb-collapsed .sidebar-avatar-wrap{ display:none !important; }
@media (max-width: 780px){ .sidebar-avatar-wrap{ display:none !important; } }
/* DESKTOP-ONLY: flip the sidebar to the right edge. At ≤900px the
sidebar collapses to icons-only AND the bottom mobile-nav appears,
so we leave the original left-side layout intact for mobile to
avoid disrupting that compact layout. */
@media (min-width: 901px) {
body{padding-left:0;padding-right:var(--sb-w)}
body.nav-collapsed{padding-left:0;padding-right:var(--sb-w-coll)}
nav{left:auto;right:0;border-right:none;border-left:2px solid var(--border)}
nav.sb-collapsed .nav-tab:hover::after{left:auto;right:calc(var(--sb-w-coll) + 6px)}
.avatar-dropdown{left:auto;right:var(--sb-w)}
#binderSidebar{left:0;right:var(--sb-w)}
body.nav-collapsed #binderSidebar{left:0;right:var(--sb-w-coll)}
}
.nav-foot{border-top:1.5px solid var(--border);padding:8px 8px 10px;display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.nav-foot-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
nav.sb-collapsed .nav-foot{padding:6px 4px 8px;align-items:center}
nav.sb-collapsed .nav-foot-row{justify-content:center;gap:3px}
.auth-buttons{display:flex;flex-direction:column;gap:5px}
.auth-btn{background:transparent;border:2px solid var(--border);color:var(--muted);padding:6px 10px;border-radius:0;font-size:.58rem;cursor:pointer;transition:all .1s;letter-spacing:.04em;width:100%;text-align:center}
.auth-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:2px 2px 0 var(--shadow)}
nav.sb-collapsed .auth-buttons{flex-direction:row;gap:3px;justify-content:center}
nav.sb-collapsed .auth-btn{width:auto;flex:1;max-width:22px;height:26px;padding:0;font-size:0;border-width:1.5px;overflow:hidden;white-space:nowrap}
nav.sb-collapsed #loginBtn::after{content:'L';font-size:7px;display:block;font-family:'Space Mono',monospace;color:var(--muted)}
nav.sb-collapsed #registerBtn::after{content:'J';font-size:7px;display:block;font-family:'Space Mono',monospace;color:var(--muted)}
.user-avatar{display:flex;align-items:center;gap:8px;background:var(--surface2);border:2px solid var(--border);border-radius:var(--r-sm,6px);padding:5px 8px;cursor:pointer;transition:all .1s}
.user-avatar:hover{border-color:var(--accent);box-shadow:2px 2px 0 var(--shadow)}
nav.sb-collapsed .user-avatar #userName{display:none}
nav.sb-collapsed .user-avatar{padding:4px;justify-content:center;gap:0}
.avatar-circle{width:26px;height:26px;border-radius:var(--r-pill,999px);background:var(--accent);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.6rem;border:1.5px solid var(--shadow);overflow:hidden}
/* Avatar dropdown — shrunk ~30% from its prior footprint. Was
min-width:220px / max-width:92vw with 36px badge tiles + 10px
padding which on wide desktops looked oversized. New shape:
fixed 170px wide, 4×4 mini badge grid at 24px tiles, tighter
padding. Pops out of the sidebar like a sticker rather than
a sub-page.
Positioning: anchored to the RIGHT edge (right:var(--sb-w))
because the sidebar moved to the right side of the viewport
in the desktop layout. Previously the base rule used
left:var(--sb-w) and the desktop override at line ~137 tried
to flip it, but source-order tiebreak meant left always won
and the dropdown popped out on the OPPOSITE side from the
avatar trigger. */
.avatar-dropdown{display:none;position:fixed;right:var(--sb-w);left:auto;bottom:8px;top:auto;background:var(--surface);border:2px solid var(--border);border-radius:0;padding:5px 0;width:170px;z-index:10001;box-shadow:4px 4px 0 var(--shadow)}
.avatar-dropdown.open{display:block}
.dd-badge-section{padding:7px 9px 4px;border-bottom:2px solid var(--border)}
.dd-badge-label{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--muted);letter-spacing:.08em;margin-bottom:6px;text-transform:uppercase}
.dd-badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.dd-badge-pip{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.dd-badge-pip .dd-hex{width:24px;height:24px;clip-path:polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);background:#0a0a0a;border:none;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .15s}
.dd-badge-pip .dd-hex svg{width:24px;height:24px}
.dd-badge-pip .dd-hex.dd-locked{opacity:.22;filter:grayscale(1) brightness(.5)}
.dd-badge-pip .dd-bname{font-family:'Press Start 2P',monospace;font-size:6px;color:#8a8a8a;text-align:center;line-height:1.35;max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-badge-pip .dd-bname.earned{color:#1AC7A0}
.dd-badge-pip:hover .dd-hex{transform:scale(1.1)}
@media(max-width:480px){.dd-badge-grid{grid-template-columns:repeat(3,1fr);gap:4px}.dd-badge-pip .dd-hex{width:24px;height:24px}.dd-badge-pip .dd-hex svg{width:24px;height:24px}.dd-badge-pip .dd-bname{font-size:5px;max-width:46px}}
/* Mobile: anchor dropdown under the top-bar user chip since the
sidebar is hidden. */
@media(max-width:900px){.avatar-dropdown{left:auto;right:8px;bottom:auto;top:92px}}
.dropdown-item{padding:6px 12px;color:var(--text);cursor:pointer;font-size:.55rem;transition:background .1s;display:flex;align-items:center;gap:6px;letter-spacing:.04em}
.dropdown-item:hover{background:var(--surface2)}
.dropdown-divider{height:2px;background:var(--border);margin:4px 0}
.member-chip{display:inline-flex;align-items:center;gap:5px;background:var(--premium);border:2px solid var(--border);border-radius:0;padding:4px 8px;font-size:.56rem;font-weight:700;color:var(--premium-txt);cursor:pointer;transition:all .1s;letter-spacing:.04em;box-shadow:2px 2px 0 var(--shadow);width:100%;justify-content:center}
.member-chip:hover{box-shadow:3px 3px 0 var(--shadow);transform:translate(-1px,-1px)}
nav.sb-collapsed .member-chip{width:auto;padding:4px 5px}
nav.sb-collapsed .member-chip .mc-lbl{display:none}
.join-btn{background:var(--premium);color:var(--premium-txt);border:2px solid var(--border);border-radius:0;padding:6px 12px;font-size:.6rem;font-weight:700;cursor:pointer;transition:all .1s;box-shadow:2px 2px 0 var(--shadow)}
.join-btn:hover{box-shadow:3px 3px 0 var(--shadow);transform:translate(-1px,-1px)}
/* THEME TOGGLE */
/* PAGES */
.page{display:none;padding:32px 24px;max-width:1160px;margin:0 auto}
.page.active{display:block}
h2{font-size:1rem;font-weight:700;margin-bottom:6px;color:var(--copper);letter-spacing:.06em}
.subtitle{color:var(--muted);margin-bottom:20px;font-size:.95rem}
/* PAGE-LEVEL BACKGROUND ART */
/* Per-page background images painted on BODY (not the page element)
so the artwork covers everything including the social footer +
any below-content padding. Without painting on body, the bg
would stop at the bottom of the page element. Stamped + cleared
via body[data-page-bg=...] in switchAccountTab() / showPage().
Values: dashboard / myListings / myOrders / salesArchive /
watchlist / history / tradeHistory → account tabs (desktop-only,
hidden on mobile because the wide landscape art doesn't read on
portrait viewports — to be revisited);
sets → Sets page artwork (sets.webp), works on mobile + desktop. */
body[data-page-bg="dashboard"],
body[data-page-bg="myListings"],
body[data-page-bg="myOrders"],
body[data-page-bg="salesArchive"],
body[data-page-bg="payments"],
body[data-page-bg="watchlist"],
body[data-page-bg="history"],
body[data-page-bg="tradeHistory"],
body[data-page-bg="sets"] {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
}
body[data-page-bg="dashboard"] { background-image: url('dashboard.webp'); }
body[data-page-bg="myListings"],
body[data-page-bg="myOrders"],
body[data-page-bg="salesArchive"],
body[data-page-bg="payments"],
body[data-page-bg="watchlist"],
body[data-page-bg="history"],
body[data-page-bg="tradeHistory"] { background-image: url('dash2.webp'); }
body[data-page-bg="sets"] { background-image: url('sets.webp'); }
/* The page element itself is transparent so body's bg shows through.
(The element-level bg approach would clip at the page's bottom
edge.) Footer transparent for the same reason. */
body[data-page-bg] #accountPage,
body[data-page-bg] #setsPage { background: transparent; }
body[data-page-bg] .social-footer { background: transparent; }
/* Mobile tuning. Dashboard / dash2 art doesn't read on portrait
viewports — wide landscape gets cropped to an unrecognizable
middle slice — so we strip those bgs entirely on mobile and
fall back to the default surface. The Sets bg DOES read well
on mobile, so it stays — just switched to scroll attachment
(iOS Safari can't render fixed bgs without flicker) and shifted
off-center to bias toward one side. */
@media (max-width: 900px) {
body[data-page-bg="dashboard"],
body[data-page-bg="myListings"],
body[data-page-bg="myOrders"],
body[data-page-bg="salesArchive"],
body[data-page-bg="payments"],
body[data-page-bg="watchlist"],
body[data-page-bg="history"],
body[data-page-bg="tradeHistory"] {
background-image: none;
/* Fall back to the app's dark surface, NOT transparent — html
has no background by default, so transparent here would
show the browser's white default (visible-bug repro on
iPhone Safari, Dashboard / My Listings / Orders / Sales
Archive tabs). var(--bg) keeps everything consistent. */
background-color: var(--bg);
}
body[data-page-bg="sets"] {
background-attachment: scroll;
/* Shift right so the focal element of the artwork stays in
the visible portrait slice rather than getting center-cropped
into a flat region. 75% biases toward the right edge. */
background-position: 75% center;
}
}
/* The default .page rule caps width at 1160px — which means
#accountPage itself is only 1160px wide, and the background
image (painted on that element) can never extend past that
column. Backgrounded tabs override that: #accountPage stretches
to fill the full available viewport (everything left of the
fixed-position sidebar), then the inner children are centered
at 1160px so the layout stays the same as the rest of the app.
Result: bg art reads edge-to-edge, content stays in column. */
#accountPage[data-tab="dashboard"],
#accountPage[data-tab="myListings"],
#accountPage[data-tab="myOrders"],
#accountPage[data-tab="salesArchive"],
#accountPage[data-tab="payments"],
#accountPage[data-tab="watchlist"],
#accountPage[data-tab="history"],
#accountPage[data-tab="tradeHistory"] {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
/* min-height: viewport so the fixed-position bg is never clipped
by a short element box. With this, content shorter than the
viewport still paints the full bg; content taller than the
viewport paints the bg the whole way down. */
min-height: 100vh;
}
/* Center the inner children at the standard column width so the
page contents don't stretch corner-to-corner — only the bg art
does. Targets the header bar, tab strip, and every tab body. */
#accountPage[data-tab="dashboard"] > .pb-page-hdr,
#accountPage[data-tab="dashboard"] > .account-tabs,
#accountPage[data-tab="dashboard"] > .account-content,
#accountPage[data-tab="myListings"] > .pb-page-hdr,
#accountPage[data-tab="myListings"] > .account-tabs,
#accountPage[data-tab="myListings"] > .account-content,
#accountPage[data-tab="myOrders"] > .pb-page-hdr,
#accountPage[data-tab="myOrders"] > .account-tabs,
#accountPage[data-tab="myOrders"] > .account-content,
#accountPage[data-tab="salesArchive"] > .pb-page-hdr,
#accountPage[data-tab="salesArchive"] > .account-tabs,
#accountPage[data-tab="salesArchive"] > .account-content,
#accountPage[data-tab="payments"] > .pb-page-hdr,
#accountPage[data-tab="payments"] > .account-tabs,
#accountPage[data-tab="payments"] > .account-content,
#accountPage[data-tab="watchlist"] > .pb-page-hdr,
#accountPage[data-tab="watchlist"] > .account-tabs,
#accountPage[data-tab="watchlist"] > .account-content,
#accountPage[data-tab="history"] > .pb-page-hdr,
#accountPage[data-tab="history"] > .account-tabs,
#accountPage[data-tab="history"] > .account-content,
#accountPage[data-tab="tradeHistory"] > .pb-page-hdr,
#accountPage[data-tab="tradeHistory"] > .account-tabs,
#accountPage[data-tab="tradeHistory"] > .account-content {
max-width: 1160px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
/* Restore .page top padding to the inner children — we pushed
#accountPage's padding to 0 above so the bg reaches the top. */
#accountPage[data-tab="dashboard"] > .pb-page-hdr,
#accountPage[data-tab="myListings"] > .pb-page-hdr,
#accountPage[data-tab="myOrders"] > .pb-page-hdr,
#accountPage[data-tab="salesArchive"] > .pb-page-hdr,
#accountPage[data-tab="payments"] > .pb-page-hdr,
#accountPage[data-tab="watchlist"] > .pb-page-hdr,
#accountPage[data-tab="history"] > .pb-page-hdr,
#accountPage[data-tab="tradeHistory"] > .pb-page-hdr {
padding-top: 32px;
}
@media (max-width: 900px) {
#accountPage[data-tab="dashboard"] > .pb-page-hdr,
#accountPage[data-tab="dashboard"] > .account-tabs,
#accountPage[data-tab="dashboard"] > .account-content,
#accountPage[data-tab="myListings"] > .pb-page-hdr,
#accountPage[data-tab="myListings"] > .account-tabs,
#accountPage[data-tab="myListings"] > .account-content,
#accountPage[data-tab="myOrders"] > .pb-page-hdr,
#accountPage[data-tab="myOrders"] > .account-tabs,
#accountPage[data-tab="myOrders"] > .account-content,
#accountPage[data-tab="salesArchive"] > .pb-page-hdr,
#accountPage[data-tab="salesArchive"] > .account-tabs,
#accountPage[data-tab="salesArchive"] > .account-content,
#accountPage[data-tab="payments"] > .pb-page-hdr,
#accountPage[data-tab="payments"] > .account-tabs,
#accountPage[data-tab="payments"] > .account-content,
#accountPage[data-tab="watchlist"] > .pb-page-hdr,
#accountPage[data-tab="watchlist"] > .account-tabs,
#accountPage[data-tab="watchlist"] > .account-content,
#accountPage[data-tab="history"] > .pb-page-hdr,
#accountPage[data-tab="history"] > .account-tabs,
#accountPage[data-tab="history"] > .account-content,
#accountPage[data-tab="tradeHistory"] > .pb-page-hdr,
#accountPage[data-tab="tradeHistory"] > .account-tabs,
#accountPage[data-tab="tradeHistory"] > .account-content {
padding-left: 14px;
padding-right: 14px;
}
}
.account-tabs{display:flex;gap:6px;margin-bottom:20px}
.account-tab{padding:7px 14px;border-radius:0;border:2px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:.6rem;font-weight:400;transition:all .1s;letter-spacing:.04em}
/* Sales source filter chips (inside the unified Sales tab) */
.sales-chip{padding:5px 12px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Space Mono','Share Tech Mono',monospace;font-size:.66rem;letter-spacing:.06em;cursor:pointer;border-radius:4px;transition:all .12s;display:inline-flex;align-items:center;gap:6px}
.sales-chip:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.sales-chip.is-active{border-color:var(--accent);color:var(--accent);background:rgba(26,199,160,.08)}
.sales-chip:disabled,.sales-chip.is-locked{opacity:.55;cursor:not-allowed}
.sales-chip-tier{font-size:.5rem;letter-spacing:.08em;padding:1px 5px;border:1px solid var(--copper,#d97e3e);color:var(--copper,#d97e3e);border-radius:3px}
.account-tab:hover{border-color:var(--accent);color:var(--text)}
.account-tab.active{background:var(--accent);border-color:var(--accent);color:var(--surface);box-shadow:3px 3px 0 var(--shadow)}
.account-content{display:none}
.account-content.active{display:block}
.slot-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.slot-card-header{display:flex;justify-content:space-between;align-items:start}
.slot-card-title{font-weight:600;color:var(--text)}
.slot-card-meta{font-size:.8rem;color:var(--muted)}
.slot-card-stats{display:flex;gap:16px;font-size:.82rem;color:var(--muted)}
.slot-card-actions{display:flex;gap:6px;flex-wrap:wrap}
.mini-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s}
.mini-btn:hover{border-color:var(--accent);color:var(--accent2)}
.mini-btn.danger:hover{border-color:var(--red);color:var(--red)}
.offer-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px}
.offer-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:10px}
.offer-from{font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.offer-badge{display:inline-block;background:var(--copper-glow);border:1px solid var(--copper-dim);color:var(--copper);padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:700}
.offer-details{font-size:.82rem;color:var(--muted);margin-bottom:10px;line-height:1.5}
.offer-actions{display:flex;gap:8px;flex-wrap:wrap}
.offer-actions .mini-btn{flex:1;min-width:100px}
.tx-table{width:100%;border-collapse:collapse;font-size:.82rem}
.tx-table th{text-align:left;padding:10px 12px;color:var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border);letter-spacing:.04em}
.tx-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.tx-table tr:hover td{background:var(--surface2)}
.tx-type-badge{display:inline-block;padding:3px 8px;border-radius:4px;font-size:.7rem;font-weight:700;text-transform:uppercase}
.tx-type-buy{background:rgba(26,199,160,.12);color:var(--teal)}
.tx-type-sell{background:rgba(251,146,60,.15);color:var(--orange)}
.tx-type-trade{background:rgba(124,92,252,.15);color:var(--accent2)}
.tx-type-cashout{background:rgba(239,68,68,.15);color:var(--red)}
/* NOTICES */
.grade-notice{display:inline-flex;align-items:center;gap:8px;background:rgba(240,192,64,.1);border:1px solid rgba(240,192,64,.3);border-radius:8px;padding:8px 14px;font-size:.82rem;color:var(--gold);font-weight:600;margin-bottom:20px}
/* MEMBERSHIP HERO BANNER */
.member-banner{background:linear-gradient(135deg,rgba(124,92,252,.15),rgba(240,192,64,.1));border:1px solid rgba(240,192,64,.25);border-radius:16px;padding:20px 24px;margin-bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.member-banner.active-member{background:linear-gradient(135deg,rgba(210,120,40,.1),rgba(240,192,64,.08));border-color:rgba(210,120,40,.3)}
.mb-left h3{font-size:1.05rem;font-weight:700;margin-bottom:4px}
.mb-left p{color:var(--muted);font-size:.85rem}
.mb-perks{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.mb-perk{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.mb-perk span{color:var(--gold)}
.mb-right{display:flex;gap:8px;align-items:center;flex-shrink:0}
.price-pill{background:var(--surface);border:1px solid var(--copper-dim);border-radius:10px;padding:8px 14px;text-align:center;box-shadow:0 0 8px var(--copper-glow)}
.price-pill .pp-price{font-size:1.1rem;font-weight:800;color:var(--copper)}
.price-pill .pp-label{font-size:.7rem;color:var(--muted);margin-top:1px}
/* SECTION TABS */
.section-tabs{display:flex;gap:6px;margin-bottom:20px}
.section-tab{padding:6px 14px;border-radius:0;border:2px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:.62rem;font-weight:400;transition:all .1s;letter-spacing:.04em}
.section-tab:hover{border-color:var(--accent);color:var(--text)}
.section-tab.active{background:var(--accent);border-color:var(--accent);color:var(--surface);box-shadow:3px 3px 0 var(--shadow)}
.section-tab .tab-count{display:inline-block;background:var(--accent);color:var(--text-on-accent);border-radius:99px;font-size:.65rem;padding:1px 6px;margin-left:5px;font-weight:700}
.section-tab .tab-gold{display:inline-block;background:var(--gold);color:#000;border-radius:99px;font-size:.65rem;padding:1px 6px;margin-left:5px;font-weight:700}
/* CARD GRID */
.card-section{display:none}
.card-section.active{display:block}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
/* ── Gap rails ────────────────────────────────────────────────────
Personalised curation feathered INTO the browse grid rather than
stacked above it: the grid is the marketplace, and a rail band just
pushes real listings below the fold. Each rail is a full-width child
of .card-grid (same grid-column:1/-1 the empty state uses), so there
is no second scroll container and no DOM restructuring.
Built by _featherGapRails() in pb-app.js. */
.gap-rail{
grid-column:1/-1;
border-top:2px solid var(--border);
border-bottom:2px solid var(--border);
background:var(--surface2);
padding:14px 0 12px;
margin:6px 0;
opacity:0; transform:translateY(8px);
transition:opacity .32s ease, transform .32s ease;
}
.gap-rail.gr-seen{opacity:1;transform:none}
/* Stage 1 asks for nothing — it just mirrors what they're already doing.
No fill, no bottom rule: a soft interruption, not furniture. */
.gap-rail.gr-mirror{background:transparent;border-bottom:none;padding-bottom:4px}
.gap-rail.gr-term{background:var(--surface);border-bottom:none;padding-bottom:18px}
.gap-rail .gr-head{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;
padding:0 2px 7px;
}
.gap-rail .gr-kicker{
font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--copper);font-weight:700;
}
.gap-rail .gr-more{
font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent);cursor:pointer;white-space:nowrap;
}
.gap-rail .gr-more:hover{text-decoration:underline}
.gap-rail .gr-title{
font-size:.8rem;font-weight:700;letter-spacing:.04em;padding:0 2px 6px;
}
.gap-rail .gr-title span{
color:var(--muted);font-weight:400;letter-spacing:.06em;margin-left:8px;font-size:.68rem;
font-variant-numeric:tabular-nums;
}
.gap-rail .gr-bar{height:3px;background:var(--border);margin:0 2px 7px;overflow:hidden}
.gap-rail .gr-fill{height:100%;background:var(--accent)}
.gap-rail .gr-sub{
font-size:.62rem;color:var(--muted);letter-spacing:.05em;padding:0 2px 9px;
font-variant-numeric:tabular-nums;
}
/* The honest number. "10 cheapest gaps — $6.09" is true; "close it for
$6.09" would be a lie (that buys 10 of 42). Do not overpromise here. */
.gap-rail .gr-sub strong{color:var(--accent);font-weight:700}
.gap-rail .gr-scroll{
display:flex;gap:8px;overflow-x:auto;padding:0 2px 4px;
scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gap-rail .gr-scroll::-webkit-scrollbar{display:none}
.gap-rail .gr-item{flex:0 0 88px;scroll-snap-align:start;cursor:pointer}
.gap-rail .gr-thumb{
position:relative;aspect-ratio:245/342;background:var(--surface);
border:1px solid var(--border);overflow:hidden;
}
/* A gap is a card they do NOT own — dim it, so the ones they hold stand
apart. Lights up on hover: it becomes ownable. */
.gap-rail .gr-thumb img{
width:100%;height:100%;object-fit:cover;display:block;
opacity:.62;filter:saturate(.55);transition:opacity .15s, filter .15s;
}
.gap-rail .gr-item:hover .gr-thumb img{opacity:1;filter:saturate(1)}
.gap-rail .gr-item:hover .gr-thumb{border-color:var(--accent)}
.gap-rail .gr-price{
font-size:.66rem;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;
}
.gap-rail .gr-none{
font-size:.46rem;letter-spacing:.06em;text-transform:uppercase;color:var(--copper);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gap-rail .gr-termcopy{
font-size:.66rem;line-height:1.65;color:var(--muted);padding:0 2px 8px;max-width:56ch;
}
.gap-rail.gr-term .gap-rail{
border:none;background:transparent;padding:8px 0 0;margin:0;opacity:1;transform:none;
}
@media(prefers-reduced-motion:reduce){
.gap-rail{opacity:1;transform:none;transition:none}
}
/* LISTING CARD */
.listing-card{background:var(--surface);border:2px solid var(--border);border-radius:0;overflow:hidden;cursor:pointer;transition:all .1s;position:relative;box-shadow:4px 4px 0 var(--shadow)}
.listing-card:hover{transform:translate(-2px,-2px);border-color:var(--accent);box-shadow:6px 6px 0 var(--shadow)}
.listing-card.early-access-card{border-color:rgba(240,192,64,.35)}
.listing-card.early-access-card:hover{border-color:var(--gold)}
.listing-card.locked-card{position:relative}
.listing-card.locked-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.ea-ribbon{position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,rgba(240,192,64,.95),rgba(251,146,60,.95));color:#000;font-size:.7rem;font-weight:800;text-align:center;padding:5px 0;text-transform:uppercase;letter-spacing:.06em;z-index:2}
.ea-lock-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;border-radius:11px;gap:6px}
.ea-lock-overlay .ea-lock-icon{font-size:2rem}
.ea-lock-overlay p{color:#fff;font-size:.8rem;font-weight:600;margin:0;text-align:center;padding:0 12px}
.ea-lock-overlay button{background:linear-gradient(135deg,var(--gold),#e8a020);color:#000;border:none;padding:6px 14px;border-radius:6px;font-size:.78rem;font-weight:700;cursor:pointer;margin-top:4px}
.lock-overlay{position:absolute;top:8px;right:8px;background:rgba(15,15,19,.9);display:flex;align-items:center;justify-content:center;flex-direction:row;gap:6px;z-index:4;border-radius:6px;padding:6px 10px;border:1px solid rgba(255,255,255,.2)}
.lock-overlay .lock-icon{font-size:1rem}
.lock-overlay p{font-size:.75rem;color:var(--muted);text-align:center;padding:0;margin:0}
.lock-overlay .unlock-btn{background:linear-gradient(135deg,var(--gold),#e8a020);color:#000;border:none;border-radius:8px;padding:7px 16px;font-size:.82rem;font-weight:700;cursor:pointer}
.thumb-wrap{position:relative}
.card-thumb{width:100%;height:210px;object-fit:contain;background:var(--surface2);padding:16px;display:block;filter:sepia(.15) hue-rotate(80deg)}
/* ── CONDENSED LISTING CARD (marketplace) ──────────────────────────
Replaces the old tall card+text layout with a half-size card that
overlays text on the image so the photo dominates. Image fills
the card at card-aspect; condition + watch button float at the
top corners; name + ask price ride a gradient at the bottom of
the image; market-price strip stays as a thin sub-row below.
Seller line moved to the detail view (clicking the card opens
it) so the card itself stays compact. */
.listing-card .lc-thumb-wrap{
position:relative;
aspect-ratio: 245 / 342;
overflow:hidden;
background:var(--surface2);
}
.listing-card .lc-thumb{
width:100%; height:100%;
object-fit:cover;
display:block;
padding:0;
background:var(--surface2);
transition:transform .35s var(--r404-glide), filter .25s;
filter:contrast(1.08) saturate(1.25);
}
.listing-card:hover .lc-thumb{ transform:scale(1.03); filter:contrast(1.15) saturate(1.4); }
/* Top-left chips (condition, sealed/vendor) + top-right watch button */
.listing-card .lc-overlay-top{
position:absolute; top:5px; left:5px; right:5px;
display:flex; justify-content:space-between; align-items:flex-start; gap:5px;
z-index:3; pointer-events:none;
}
.listing-card .lc-overlay-top > *{ pointer-events:auto; }
.listing-card .lc-chips{ display:flex; flex-wrap:wrap; gap:3px; max-width:75%; }
.listing-card .lc-chip{
background:rgba(0,0,0,.75);
border:1px solid currentColor;
padding:1.5px 5px;
font-size:.52rem;
font-family:'Space Mono',monospace;
letter-spacing:.06em;
font-weight:700;
text-transform:uppercase;
line-height:1.3;
}
.listing-card .lc-chip.lc-cond-nm { color:var(--accent); }
.listing-card .lc-chip.lc-cond-lp { color:var(--yellow,#FFD93D); }
.listing-card .lc-chip.lc-cond-hp { color:var(--red); }
.listing-card .lc-chip.lc-cond-graded { color:var(--gold,#FFD700); }
.listing-card .lc-chip.lc-sealed { color:var(--copper); }
.listing-card .lc-chip.lc-vendor { color:var(--accent); }
.listing-card .lc-watch{
width:24px; height:24px; flex-shrink:0;
background:rgba(0,0,0,.65);
border:1px solid rgba(255,255,255,.25);
color:#fff;
display:grid; place-items:center;
cursor:pointer;
padding:0;
transition:background .12s, border-color .12s;
}
.listing-card .lc-watch:hover{ background:rgba(0,0,0,.85); border-color:var(--accent); color:var(--accent); }
.listing-card .lc-watch.watched{ background:var(--accent); color:#000; border-color:var(--accent); }
.listing-card .lc-watch svg{ width:14px; height:14px; display:block; }
/* Photo count tucked into bottom-right of the image, above the gradient */
.listing-card .lc-photo-count{
position:absolute; bottom:38px; right:6px;
background:rgba(0,0,0,.7);
color:#fff;
font-size:.52rem;
font-family:'Space Mono',monospace;
letter-spacing:.06em;
padding:1.5px 5px;
z-index:3;
}
/* Bottom gradient holds the card name + ask price overlaid on image */
.listing-card .lc-overlay-bottom{
position:absolute; bottom:0; left:0; right:0;
padding:24px 8px 6px;
background:linear-gradient(to top, rgba(0,0,0,.95) 35%, rgba(0,0,0,.65) 70%, transparent);
display:flex; flex-direction:column; gap:1px;
z-index:2;
}
.listing-card .lc-name{
font-family:'Space Mono',monospace;
font-size:.68rem;
color:#fff;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
line-height:1.25;
}
.listing-card .lc-price-row{
display:flex; justify-content:space-between; align-items:baseline; gap:6px; margin-top:2px;
}
.listing-card .lc-price{
font-family:'Space Mono',monospace;
font-size:.92rem;
font-weight:800;
color:var(--accent);
text-shadow:1px 1px 0 #000;
letter-spacing:-.01em;
}
.listing-card .lc-status-pill{
font-size:.5rem;
letter-spacing:.06em;
padding:1px 5px;
border:1px solid currentColor;
text-transform:uppercase;
font-family:'Space Mono',monospace;
font-weight:700;
line-height:1.3;
white-space:nowrap;
}
.listing-card .lc-status-pill.lc-own { color:var(--accent); }
.listing-card .lc-status-pill.lc-sold { color:var(--red); }
/* Market-price strip — focal sub-row below the image. Reuses the
same border-left accent treatment as before but compacted. */
.listing-card .lc-market{
display:flex; justify-content:space-between; align-items:baseline;
padding:5px 8px;
background:var(--surface);
border-top:1px solid var(--border);
border-left:3px solid var(--accent);
font-family:'Space Mono','Share Tech Mono',monospace;
font-size:.62rem;
color:var(--muted);
}
.listing-card .lc-market strong{ color:var(--text); font-weight:700; }
.listing-card .lc-market .lc-diff{ font-weight:800; font-size:.7rem; letter-spacing:.04em; }
.listing-card .lc-market .lc-diff.pos{ color:var(--green); }
.listing-card .lc-market .lc-diff.neg{ color:var(--red); }
/* Compact Buy Now bar — slim band at the bottom of the card.
Clicking the card itself also opens the detail view, so this is
redundant; kept because the explicit CTA helps casual shoppers. */
.listing-card .lc-buy{
display:block;
padding:6px 8px;
background:var(--accent);
color:var(--surface);
border:none;
font-family:'Space Mono','Share Tech Mono',monospace;
font-size:.68rem;
font-weight:700;
letter-spacing:.08em;
cursor:pointer;
text-align:center;
width:100%;
text-transform:uppercase;
}
.listing-card .lc-buy:hover{ background:var(--accent2,var(--accent)); }
/* Admin flag button in condensed view — smaller, top-left edge. */
.listing-card .lc-flag{
position:absolute; top:6px; left:6px; z-index:4;
background:rgba(0,0,0,.7);
border:1px solid var(--copper);
color:var(--copper);
padding:2px 6px;
font-size:.5rem;
font-family:'Space Mono',monospace;
letter-spacing:.06em;
cursor:pointer;
}
.listing-card .lc-flag.flagged{
background:var(--copper);
color:#1a0a00;
}
.photo-count{position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;padding:2px 7px;border-radius:99px}
.card-info{padding:14px 16px}
.card-name{font-weight:700;font-size:1rem;margin-bottom:3px}
.card-meta{color:var(--muted);font-size:.8rem;margin-bottom:8px}
.card-stats{display:flex;justify-content:space-between;align-items:center}
.price-tag{font-size:.85rem;color:var(--accent2);font-weight:600}
.slots-bar-wrap{width:100%;margin-top:8px}
.slots-bar-label{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-bottom:4px}
.slots-bar{height:6px;background:var(--border);border-radius:99px;overflow:hidden}
.slots-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px}
/* COUNTDOWN */
.countdown-wrap{background:rgba(240,192,64,.08);border-top:1px solid rgba(240,192,64,.2);padding:8px 14px;display:flex;align-items:center;justify-content:space-between;font-size:.78rem}
.countdown-label{color:var(--gold);font-weight:600}
.countdown-timer{font-family:monospace;color:var(--text);font-weight:700;font-size:.85rem}
/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.badge-open{background:rgba(210,120,40,.15);color:var(--green)}
.badge-full{background:rgba(239,68,68,.15);color:var(--red)}
.badge-hot{background:rgba(245,158,11,.15);color:var(--yellow)}
.badge-grade{background:rgba(240,192,64,.15);color:var(--gold);border:1px solid rgba(240,192,64,.3)}
.badge-forsale{background:rgba(251,146,60,.15);color:var(--orange)}
.badge-ea{background:rgba(240,192,64,.2);color:var(--gold);border:1px solid rgba(240,192,64,.4)}
/* DETAIL */
.detail-back{color:var(--muted);cursor:pointer;font-size:.9rem;margin-bottom:20px;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.detail-back:hover{color:var(--text)}
.detail-layout{display:grid;grid-template-columns:380px 1fr;gap:28px;align-items:start}
@media(max-width:760px){.detail-layout{grid-template-columns:1fr}}
/* GALLERY */
.gallery-wrap{background:var(--surface);border:2px solid var(--border);border-radius:0;overflow:hidden;box-shadow:4px 4px 0 var(--shadow)}
.gallery-main{position:relative;background:var(--surface2);display:flex;align-items:center;justify-content:center;height:320px;cursor:zoom-in;overflow:hidden}
.gallery-main img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s}
.gallery-main:hover img{transform:scale(1.03)}
.gallery-zoom-hint{position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,.6);color:#ccc;font-size:.7rem;padding:3px 8px;border-radius:99px;pointer-events:none}
.gallery-nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);border:none;color:#fff;font-size:1.2rem;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2}
.gallery-nav-btn:hover{background:rgba(124,92,252,.8)}
.gallery-nav-btn.prev{left:8px}.gallery-nav-btn.next{right:8px}.gallery-nav-btn.hidden{display:none}
.gallery-thumbs{display:flex;gap:6px;padding:10px;background:var(--surface);overflow-x:auto;scrollbar-width:thin}
.gallery-thumb{flex-shrink:0;width:60px;height:76px;border-radius:7px;object-fit:contain;background:var(--surface2);padding:4px;border:2px solid transparent;cursor:pointer;transition:all .12s;opacity:.6}
.gallery-thumb:hover{opacity:1;border-color:var(--border)}.gallery-thumb.active{border-color:var(--accent);opacity:1}
.grade-badge-detail{display:inline-flex;align-items:center;gap:6px;background:rgba(240,192,64,.12);border:1px solid rgba(240,192,64,.35);border-radius:8px;padding:5px 12px;font-size:.82rem;color:var(--gold);font-weight:700;margin-bottom:14px}
.detail-right h1{font-size:1.55rem;margin-bottom:5px}
.detail-right .detail-meta{color:var(--muted);font-size:.88rem;margin-bottom:12px}
.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.stat-box{background:var(--surface);border:2px solid var(--border);border-radius:0;padding:12px 14px;box-shadow:3px 3px 0 var(--shadow)}
.stat-box .stat-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat-box .stat-val{font-size:1.1rem;font-weight:700;margin-top:2px}
/* SLOT GRID */
.slot-grid-section{margin-top:20px}
.slot-grid-section h3{font-size:1rem;font-weight:600;margin-bottom:10px}
.slot-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px;font-size:.8rem;color:var(--muted)}
.legend-dot{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}
.ld-available{background:var(--surface2);border:1px solid var(--border)}
.ld-selected{background:rgba(26,199,160,.32);border:1px solid var(--teal)}
.ld-taken{background:var(--accent)}.ld-yours{background:var(--green)}.ld-forsale{background:var(--orange)}
.slot-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.slot-cell{aspect-ratio:1;border-radius:0;background:var(--surface2);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--muted);transition:all .12s;position:relative}
.slot-cell:hover:not(.taken):not(.yours){background:rgba(26,199,160,.15);border-color:var(--teal);color:var(--teal)}
.slot-cell.selected{background:rgba(26,199,160,.28);border-color:var(--teal);color:var(--teal)}
.slot-cell.taken{background:rgba(124,92,252,.35);border-color:var(--accent);cursor:default;color:var(--accent2)}
.slot-cell.yours{background:rgba(210,120,40,.25);border-color:var(--green);color:var(--green)}
.slot-cell.forsale{background:rgba(251,146,60,.25);border-color:var(--orange);color:var(--orange)}
.slot-cell.forsale:hover{background:rgba(251,146,60,.4)}
.tooltip{display:none;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:#000;color:var(--text);font-size:.7rem;padding:4px 8px;border-radius:5px;white-space:nowrap;z-index:10;pointer-events:none}
.slot-cell:hover .tooltip{display:block}
/* CART BAR */
.cart-bar{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:2px solid var(--accent);padding:14px 24px;display:none;align-items:center;justify-content:space-between;gap:16px;z-index:9999;box-shadow:0 -3px 0 var(--shadow);flex-wrap:wrap}
.cart-bar.visible{display:flex}
.cart-info{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cart-count{font-weight:700;color:var(--teal);font-size:1rem}
.cart-breakdown{font-size:.82rem;color:var(--muted)}
.cart-slots-preview{display:flex;gap:4px;flex-wrap:wrap;max-width:280px}
.cart-slot-tag{background:rgba(26,199,160,.15);border:1px solid var(--teal);color:var(--teal);border-radius:5px;padding:2px 7px;font-size:.7rem;font-weight:600}
.cart-actions{display:flex;gap:8px;align-items:center}
.cart-clear{background:none;border:1px solid var(--border);color:var(--muted);padding:7px 14px;border-radius:8px;font-size:.82rem;cursor:pointer;transition:all .15s}
.cart-clear:hover{border-color:var(--red);color:var(--red)}
.batch-action-bar{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--gold);padding:14px 24px;display:none;align-items:center;justify-content:space-between;gap:16px;z-index:150;box-shadow:0 -4px 20px rgba(240,192,64,.15);flex-wrap:wrap}
.batch-action-bar.visible{display:flex}
.batch-info{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.batch-count{font-weight:700;color:var(--gold);font-size:1rem}
.batch-breakdown{font-size:.82rem;color:var(--muted)}
.batch-actions{display:flex;gap:8px;align-items:center}
.cart-buy-btn{background:var(--teal);color:#000;border:none;padding:10px 22px;border-radius:9px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .15s}
.cart-buy-btn:hover{background:#0891b2}
/* OWNERS / TX */
.owners-panel{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}
.owners-panel h3{font-size:.95rem;font-weight:600;margin-bottom:10px}
.owner-list{font-size:.82rem}
.owner-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);color:var(--muted);align-items:center;gap:8px}
.owner-row:last-child{border-bottom:none}
.owner-row .owner-name{color:var(--text);flex:1}
.owner-row .owner-badge{font-size:.7rem;background:rgba(251,146,60,.15);color:var(--orange);padding:2px 6px;border-radius:3px}
.empty-state{text-align:center;color:var(--muted);padding:28px;font-size:.9rem}
.tx-history{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}
.tx-history h3{font-size:.95rem;font-weight:600;margin-bottom:10px}
.tx-row{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.8rem;align-items:center}
.tx-row:last-child{border-bottom:none}
.tx-type{width:70px;flex-shrink:0}
.tx-type.primary-tx{color:var(--accent2)}.tx-type.resale-tx{color:var(--orange)}.tx-type.multi-tx{color:var(--teal)}
.tx-detail{flex:1;color:var(--muted)}
.tx-price{font-weight:600;color:var(--text)}
.tx-fee{font-size:.72rem;color:var(--yellow)}
/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:10002;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
/* Mobile scroll hardening: lock the page behind an open modal, and keep
a modal's own scroll from chaining into the dashboard once it hits its
end (the iOS scroll-escape that let taps fall through to the page). */
body.pb-modal-open{overflow:hidden}
.modal-overlay,.modal{overscroll-behavior:contain}
.modal{background:var(--surface);border:2px solid var(--border);border-radius:0;padding:26px;width:100%;max-width:460px;position:relative;max-height:92vh;overflow-y:auto;box-shadow:5px 5px 0 var(--shadow)}
.modal h3{font-size:1.1rem;font-weight:700;margin-bottom:4px}
/* Owned-card edit menu — the pencil-on-image popover (details/photo/copies). */
.pb-cardedit-menu{background:var(--surface);border:1px solid var(--accent);border-radius:var(--r-md,10px);overflow:hidden;min-width:152px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.pb-cardedit-item{display:block;width:100%;text-align:left;padding:11px 14px;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);font-family:'Space Mono','Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.03em;cursor:pointer;transition:background .12s,color .12s}
.pb-cardedit-item:last-child{border-bottom:none}
.pb-cardedit-item:hover{background:var(--surface2);color:var(--accent)}
/* Binder picker selects — custom teal chevron so it reads as a dropdown
(the selects use appearance:none + an inline background colour, so the
arrow needs !important to survive the background shorthand). */
select.pb-binder-select,select.atc-input,.form-group select{-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231AC7A0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;background-position:right 11px center !important;background-size:11px 8px !important;
padding-right:30px !important}
.modal .modal-sub{color:var(--muted);font-size:.82rem;margin-bottom:18px}
.modal-close{position:absolute!important;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1;z-index:10}
.modal-close:hover{color:var(--text)}
.form-group{margin-bottom:13px}
.form-group label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:5px}
.form-group input,.form-group select{width:100%;padding:9px 12px;background:var(--surface2);border:2px solid var(--border);border-radius:0;color:var(--text);font-size:.7rem;outline:none;transition:all .1s;font-family:'Space Mono','Share Tech Mono',monospace}
.form-group input:focus,.form-group select:focus{border-color:var(--accent);box-shadow:3px 3px 0 var(--shadow)}
.form-error{color:var(--red);font-size:.75rem;margin-top:3px}
.purchase-summary{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:.85rem}
.ps-row{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--muted)}
.ps-row.fee{color:var(--yellow)}.ps-row.total{margin-bottom:0;color:var(--text);font-weight:700;border-top:1px solid var(--border);padding-top:8px;margin-top:4px}
.ps-note{font-size:.75rem;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.slot-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.slot-chip{background:rgba(26,199,160,.12);border:1px solid var(--teal);color:var(--teal);border-radius:5px;padding:2px 8px;font-size:.72rem;font-weight:600}
.btn{display:inline-block;padding:10px 20px;border-radius:0;border:2px solid var(--border);font-size:.7rem;font-weight:700;cursor:pointer;transition:all .1s;font-family:'Space Mono','Share Tech Mono',monospace;letter-spacing:.04em;box-shadow:3px 3px 0 var(--shadow)}
.btn:hover{box-shadow:2px 2px 0 var(--shadow);transform:translate(1px,1px)}
.btn-primary{background:var(--accent);color:var(--text-on-accent);width:100%;padding:12px;font-size:.7rem;border-color:var(--border)}
.btn-primary:hover{background:var(--accent2);color:var(--surface)}
.btn-secondary{background:transparent;border:2px solid var(--border);color:var(--muted);width:100%;padding:12px;font-size:.7rem;margin-top:8px;box-shadow:3px 3px 0 var(--shadow)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-teal{background:var(--accent2);color:var(--surface);width:100%;padding:12px;font-size:.7rem;font-weight:700;border-color:var(--border)}
.btn-teal:hover{background:var(--accent)}
.btn-orange{background:var(--orange);color:var(--surface);width:100%;padding:12px;font-size:.7rem;border-color:var(--border)}
.btn-orange:hover{opacity:.88}
.btn-red{background:var(--premium);color:var(--premium-txt);width:100%;padding:12px;font-size:.7rem;border-color:var(--border);box-shadow:3px 3px 0 var(--shadow)}
.btn-red:hover{opacity:.88}
.btn-gold{background:var(--gold);color:var(--surface);width:100%;padding:12px;font-size:.7rem;font-weight:800;border-color:var(--border)}
.btn-gold:hover{background:var(--accent)}
.btn-ghost{background:transparent;border:2px solid var(--border);color:var(--muted);padding:8px 14px;font-size:.65rem;border-radius:0;cursor:pointer;box-shadow:2px 2px 0 var(--shadow)}
.btn-ghost:hover{border-color:var(--premium);color:var(--premium)}
.success-banner{display:none;background:rgba(210,120,40,.12);border:1px solid rgba(210,120,40,.3);border-radius:10px;padding:14px;text-align:center;margin-bottom:14px}
.success-banner.show{display:block}
.success-banner .success-icon{font-size:1.8rem;margin-bottom:6px}
.success-banner p{color:var(--green);font-size:.9rem}
/* MEMBERSHIP MODAL */
.billing-toggle{display:flex;background:var(--surface2);border-radius:10px;padding:4px;margin-bottom:18px;gap:4px}
/* Both buttons sit dark by default — explicit background so the
browser's UA white button style doesn't leak through on the
inactive one. Active state flips to copper so the selection is
obvious without one button looking like a completely different
UI element. */
.billing-opt{flex:1;text-align:center;padding:8px;border-radius:7px;cursor:pointer;font-size:.85rem;font-weight:600;background:var(--surface);color:var(--muted);border:1px solid var(--border);transition:all .15s}
.billing-opt.active{background:var(--copper);color:#0a0a0a;border-color:var(--copper);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.perks-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.perk-item{display:flex;align-items:flex-start;gap:10px;font-size:.85rem}
.perk-icon{color:var(--gold);font-size:1rem;flex-shrink:0;margin-top:1px}
.perk-text{color:var(--muted)}
.perk-text strong{color:var(--text)}
.savings-pill{display:inline-block;background:rgba(210,120,40,.15);border:1px solid rgba(210,120,40,.3);border-radius:99px;color:var(--green);font-size:.72rem;font-weight:700;padding:2px 8px;margin-left:6px}
/* LIGHTBOX */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,3,0,.95);z-index:10004;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox-inner{position:relative;max-width:700px;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox-img{max-width:100%;max-height:72vh;object-fit:contain;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.7)}
.lightbox-close{position:fixed;top:18px;right:22px;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:1.4rem;width:38px;height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lightbox-close:hover{background:rgba(255,255,255,.25)}
.lightbox-thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lightbox-thumb{width:54px;height:68px;object-fit:contain;background:rgba(255,255,255,.05);border-radius:6px;padding:3px;border:2px solid transparent;cursor:pointer;opacity:.55;transition:all .12s}
.lightbox-thumb:hover{opacity:1}.lightbox-thumb.active{border-color:var(--accent2);opacity:1}
.lightbox-counter{color:rgba(255,255,255,.45);font-size:.8rem}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;font-size:1.3rem;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2}
.lightbox-nav:hover{background:rgba(124,92,252,.7)}
.lightbox-nav.lb-prev{left:-56px}.lightbox-nav.lb-next{right:-56px}
@media(max-width:700px){.lightbox-nav.lb-prev{left:-12px}.lightbox-nav.lb-next{right:-12px}}
/* ADMIN */
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent2);padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s}
.btn-outline:hover{background:var(--accent);color:var(--text-on-accent)}
.admin-table{width:100%;border-collapse:collapse;font-size:.88rem}
.admin-table th{text-align:left;padding:10px 14px;color:var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border)}
.admin-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--surface2)}
.admin-card-img{width:40px;height:52px;object-fit:contain;background:var(--surface2);border-radius:5px;padding:3px}
.action-btn{background:none;border:1px solid var(--border);color:var(--muted);padding:4px 10px;border-radius:6px;font-size:.78rem;cursor:pointer;margin-right:4px;transition:all .12s}
.action-btn:hover{border-color:var(--accent);color:var(--accent2)}
.action-btn.danger:hover{border-color:var(--red);color:var(--red)}
.add-form-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:28px;display:none}
.add-form-wrap.open{display:block}
.add-form-wrap h3{margin-bottom:16px;font-size:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
/* PHOTO MANAGER */
.photo-manager{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px}
.photo-preview-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;min-height:20px}
.photo-preview-item{position:relative;width:72px;height:88px;border-radius:7px;overflow:hidden;border:2px solid var(--border);flex-shrink:0}
.photo-preview-item img{width:100%;height:100%;object-fit:contain;background:var(--surface);padding:4px}
.photo-preview-rm{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.75);border:none;color:#fff;width:18px;height:18px;border-radius:50%;font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .12s}
.photo-preview-rm:hover{background:var(--red)}
.photo-preview-item.primary-photo{border-color:var(--accent)}
.photo-preview-item .primary-chip{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--text-on-accent);font-size:.55rem;padding:1px 5px;border-radius:99px;white-space:nowrap;font-weight:700}
.photo-actions-row{display:flex;gap:8px;flex-wrap:wrap}
.photo-upload-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--text-on-accent);border:none;border-radius:8px;padding:7px 14px;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s}
.photo-upload-btn:hover{background:#6b4fdb}
.photo-url-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:7px 14px;font-size:.82rem;cursor:pointer;transition:all .15s}
.photo-url-btn:hover{border-color:var(--accent);color:var(--accent2)}
.photo-url-row{display:flex;gap:7px;align-items:center;margin-top:8px}
.photo-url-row input{flex:1;padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.85rem;outline:none}
.photo-url-row input:focus{border-color:var(--accent)}
.photo-url-add{background:var(--accent);border:none;color:#fff;padding:7px 12px;border-radius:7px;font-size:.82rem;font-weight:600;cursor:pointer}
.photo-url-add:hover{background:#6b4fdb}
.photo-hint{font-size:.74rem;color:var(--muted);margin-top:8px}
.photo-empty{color:var(--muted);font-size:.8rem;font-style:italic;padding:4px 0}
.revenue-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:24px}
.revenue-panel h3{font-size:.95rem;font-weight:600;margin-bottom:14px}
.revenue-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:700px){.revenue-grid{grid-template-columns:repeat(2,1fr)}}
.rev-box{background:var(--surface2);border-radius:10px;padding:12px}
.rev-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.rev-val{font-size:1.1rem;font-weight:700;margin-top:4px;color:var(--gold)}
.admin-settings{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:24px}
.admin-settings h3{font-size:.95rem;font-weight:600;margin-bottom:14px}
.settings-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.settings-row label{color:var(--muted);font-size:.85rem;width:160px}
.settings-row input{padding:7px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.88rem;width:120px;outline:none}
.settings-row input:focus{border-color:var(--accent)}
.save-btn{background:var(--accent);color:var(--text-on-accent);border:none;border-radius:7px;padding:7px 14px;font-size:.82rem;font-weight:600;cursor:pointer}
.save-btn:hover{background:#6b4fdb}
/* TRADE BROWSE */
.trade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-height:400px;overflow-y:auto;margin-bottom:16px}
.trade-listing-group{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px}
.trade-listing-name{font-weight:600;color:var(--text);font-size:.85rem;margin-bottom:8px}
.trade-slot-item{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:8px;cursor:pointer;transition:all .15s;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.8rem}
.trade-slot-item:hover{background:var(--surface2);border-color:var(--accent)}
.trade-slot-item.selected{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.trade-slot-num{color:var(--muted)}.trade-slot-item.selected .trade-slot-num{color:#fff}
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* MOBILE & RESPONSIVE */
@media(max-width:900px) {
/* Mobile: hide the main sidebar entirely. The mobile-nav at the
bottom handles primary navigation; only the binder page keeps
its own vertical strip (#binderSidebar) for switching binders. */
nav{display:none !important}
body{padding-left:0;padding-right:0}
#binderSidebar{left:0}
}
@media(max-width:768px) {
.card-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.detail-layout{grid-template-columns:1fr}
.page{padding:20px 14px}
h2{font-size:.85rem}
.detail-right h1{font-size:.9rem}
.modal{max-width:94%;padding:18px}
.auth-btn{font-size:.52rem;padding:4px 8px}
.btn,.btn-primary,.btn-secondary,.btn-teal,.btn-orange,.btn-red,.btn-gold{font-size:.6rem}
.form-group input,.form-group select{font-size:.6rem;padding:8px 10px}
.member-chip{font-size:.5rem;padding:3px 7px}
}
@media(max-width:600px) {
.card-grid{grid-template-columns:1fr 1fr}
body{font-size:12px}
.auth-btn{padding:4px 8px;font-size:.5rem}
.member-chip{font-size:.48rem;padding:3px 6px}
.btn,.btn-primary,.btn-secondary,.btn-teal,.btn-orange,.btn-red,.btn-gold{min-height:44px;padding:10px 12px;font-size:.58rem}
.mini-btn{min-height:44px;padding:7px 10px;font-size:.56rem}
.form-row{grid-template-columns:1fr}
.form-group input,.form-group select{font-size:.58rem;padding:8px 10px}
.detail-stats{grid-template-columns:1fr}
.card-name{font-size:.75rem}
h2{font-size:.78rem}
h1{font-size:.82rem}
.modal{margin:10px;padding:16px;font-size:.62rem}
.modal h3{font-size:.75rem}
/* bcd-* classes no longer used — card detail is always single-column */
.cart-bar,.batch-action-bar{padding:10px 14px}
.revenue-grid{grid-template-columns:1fr 1fr}
.page{padding-bottom:80px;padding-left:12px;padding-right:12px}
.cart-bar{bottom:64px}
.stat-box .stat-val{font-size:.85rem}
.listing-card{box-shadow:3px 3px 0 var(--shadow)}
.listing-card:hover{box-shadow:4px 4px 0 var(--shadow)}
/* Account tabs — horizontal scroll */
.account-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:6px;gap:4px;scrollbar-width:none}
.account-tabs::-webkit-scrollbar{display:none}
.account-tab{white-space:nowrap;flex-shrink:0;padding:6px 10px;font-size:.52rem}
/* Offer/action stacking */
.offer-actions{flex-direction:column}
.offer-actions .mini-btn{width:100%}
/* Table scroll */
.tx-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tx-table{font-size:.58rem}
/* Sales Archive → Shop Analytics: collapse the 2-col Top Cards /
Channel Breakdown grid to single column so the 5-col Monthly
Breakdown table inside Channel Breakdown isn't squashed into
a 170px-wide column with horizontal overflow. */
.tx-shop-analytics-grid{grid-template-columns:1fr !important}
.holdings-grid{grid-template-columns:1fr !important}
/* Search + filters */
.search-and-filters{grid-template-columns:1fr !important}
#gameTypePills{gap:5px}
.game-pill{font-size:.56rem;padding:5px 8px}
/* Section tabs scroll */
.section-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.section-tabs::-webkit-scrollbar{display:none}
.section-tab{white-space:nowrap;flex-shrink:0;font-size:.54rem;padding:5px 9px}
#browsePage > h2{margin-bottom:10px;font-size:.78rem}
.subtitle{font-size:.58rem}
.coll-btn-primary,.coll-btn-secondary{font-size:.54rem}
}
/* MOBILE BOTTOM NAV */
/* Bottom mobile nav — sticky, shown on mobile */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:2px solid var(--border);z-index:9999;align-items:stretch;box-shadow:0 -3px 0 var(--shadow)}
.mobile-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.56rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;transition:color .15s;padding:0 1px;position:relative;}
.mobile-nav-btn svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mobile-nav-btn img{width:30px;height:30px;object-fit:contain;display:block}
.mobile-nav-btn.active{color:var(--accent)}
.mobile-nav-badge{position:absolute;top:6px;right:calc(50% - 18px);background:var(--red);color:#fff;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700}
@media(max-width:900px){.mobile-nav{display:flex}.page{padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}#mobileUserChip{display:flex!important}#legalFooter{margin-bottom:calc(60px + env(safe-area-inset-bottom,0px))}}
/* ── TOP NAV (mobile only, not sticky) ──────────────────────────────────── */
.top-nav{display:none;flex-direction:column;background:var(--surface);border-bottom:2px solid var(--border);width:100%;box-sizing:border-box;z-index:100}
.top-nav-row1{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;gap:10px;height:48px;box-sizing:border-box}
.top-nav-logo{height:26px;width:auto;display:block;object-fit:contain;cursor:pointer}
.top-nav-auth-btns{display:flex;gap:6px;align-items:center}
.top-nav-auth-btns .auth-btn{width:auto;padding:4px 10px;font-size:.56rem}
.top-nav-user-chip{display:flex;align-items:center;gap:7px;cursor:pointer;padding:3px 8px;border:1px solid var(--border);border-radius:var(--r-sm,6px)}
.top-nav-user-chip .avatar-circle{width:26px;height:26px;border-radius:var(--r-pill,999px);font-size:.6rem;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}
.top-nav-username{font-family:'Space Mono',monospace;font-size:.58rem;color:var(--text)}
.top-nav-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--border);padding:0 4px}
.top-nav-tabs::-webkit-scrollbar{display:none}
.top-nav-tab{display:flex;align-items:center;gap:5px;padding:8px 12px;border:none;background:transparent;color:var(--muted);font-family:'Space Mono',monospace;font-size:.56rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all .12s;flex-shrink:0}
.top-nav-tab svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.top-nav-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.top-nav-tab:hover{color:var(--text)}
.top-nav-premium{font-family:'Orbitron',monospace;font-weight:800;font-size:.5rem;padding:3px 7px;background:var(--premium);color:var(--premium-txt);border:none;cursor:pointer;letter-spacing:.06em}
@media(max-width:900px){
.top-nav{display:none}
nav{display:none!important}
body{padding-left:0!important}
body.nav-collapsed{padding-left:0!important}
}
/* GAME TYPE PILLS */
.game-pill { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: .8rem; cursor: pointer; transition: all .15s; color: var(--text); }
.game-pill:hover { border-color: var(--accent); color: var(--accent); }
.game-pill.active { background: var(--accent); border-color: var(--accent); color: white; }
/* TOAST */
.toast{
position:fixed;bottom:20px;left:20px;
background:var(--surface);border:2px solid var(--accent);
border-radius:0;padding:12px 16px;
color:var(--accent);font-size:.65rem;
/* z-index 100040 keeps the toast above the scan preview sheet
(100010), scan camera modal (100020), and variant picker
(100030) — without this lift, POS "Out of stock" messages
and other scanner-time errors render UNDER the modal and
the user never sees them. */
z-index:100040;box-shadow:4px 4px 0 var(--shadow);
animation:slideInLeft .35s cubic-bezier(0.16,1,0.3,1) both;max-width:300px
}
/* Lift toast above mobile nav bar */
@media(max-width:600px){
.toast{bottom:calc(72px + env(safe-area-inset-bottom,0px));left:12px;right:12px;max-width:none;font-size:.7rem}
}
/* Toast STACK — concurrent toasts flow vertically instead of piling on the
same fixed bottom-left anchor. Before this, two toasts fired together
(e.g. "card added" + "limit reached") drew on top of each other into an
unreadable smear. The container owns the fixed anchor; each .toast inside
is in normal flow. flex-direction:column + a bottom anchor means the
newest toast (last child) sits closest to the screen edge and older ones
stack upward. pointer-events:none lets taps fall through the gaps; each
toast re-enables its own so tap-to-dismiss still works. */
#pbToastStack{
position:fixed;bottom:20px;left:20px;z-index:100040;
display:flex;flex-direction:column;gap:10px;
max-width:300px;pointer-events:none;
}
#pbToastStack .toast{
position:static !important;left:auto !important;right:auto !important;
bottom:auto !important;top:auto !important;max-width:none;pointer-events:auto;
/* Depth fade: JS sets a per-toast opacity by stack position (newest =
full, older = dimmer). Transition makes the dim/brighten smooth as
toasts arrive and expire. */
transition:opacity .28s ease;
}
@media(max-width:600px){
#pbToastStack{left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom,0px));max-width:none;}
}
@keyframes slideInLeft{
from{transform:translateX(-110%) scale(0.96);opacity:0}
to {transform:translateX(0) scale(1); opacity:1}
}
/* ── HERO LANDING ─────────────────────────────── */
#heroSection {
padding: 3.5rem 2rem 2rem;
text-align: center;
border-bottom: 2px solid var(--border);
background: var(--surface);
position: relative;
z-index: 2;
}
.hero-title {
font-size: clamp(.9rem, 3vw, 1.5rem);
color: var(--accent2);
margin-bottom: .75rem;
letter-spacing: 3px;
line-height: 1.6;
}
.hero-title .ht-b { color: var(--accent); }
.hero-title::before { content: ''; }
.hero-title::after { content: ''; }
.hero-tagline {
font-size: .62rem;
color: var(--muted);
margin: .75rem 0 1.75rem;
letter-spacing: 2px;
}
.hero-cursor {
display: inline-block;
width: 8px;
height: .9em;
background: var(--accent);
margin-left: 4px;
animation: cur-blink 1s steps(2) infinite;
vertical-align: middle;
}
@keyframes cur-blink {
0%,49% { background: var(--accent); }
50%,100%{ background: transparent; }
}
.hero-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
max-width: 560px;
margin: 0 auto 1.75rem;
}
.hero-stat-box {
padding: 1.25rem;
border: 2px solid var(--border);
background: var(--surface2);
box-shadow: 4px 4px 0 var(--shadow);
text-align: center;
}
.hero-stat-label {
font-size: .58rem;
color: var(--muted);
letter-spacing: .5px;
margin-bottom: .6rem;
white-space: nowrap;
}
.hero-stat-value {
font-size: 1.5rem;
color: var(--accent);
font-weight: bold;
}
.hero-cta {
display: inline-block;
padding: .8rem 2.2rem;
background: var(--premium);
color: var(--premium-txt);
font-family: 'Space Mono', 'Share Tech Mono', monospace;
font-size: .75rem;
letter-spacing: 2px;
border: 2px solid var(--border);
cursor: pointer;
box-shadow: 4px 4px 0 var(--shadow);
transition: all .1s;
}
.hero-cta:hover {
box-shadow: 6px 6px 0 var(--shadow);
transform: translate(-2px,-2px);
}
.hero-footer-line {
margin-top: 1.6rem;
font-size: .58rem;
color: var(--muted);
letter-spacing: 2px;
opacity: .7;
}
input,textarea,select{text-transform:none}
/* ── MOBILE HERO / LANDING ──────────────────────── */
@media(max-width:768px) {
#heroSection { padding: 2.5rem 1.5rem 1.75rem; }
.hero-stats { gap: 1rem; }
.hero-stat-value { font-size: 1.75rem; }
}
@media(max-width:600px) {
#heroSection { padding: 2rem 1.2rem 1.5rem; }
#landingPage { padding-bottom: 80px !important; }
.hero-title {
font-size: clamp(1rem, 5.5vw, 1.5rem);
letter-spacing: 1.5px;
line-height: 1.5;
}
.hero-title::before, .hero-title::after { display: none; }
.hero-tagline { font-size: .72rem; letter-spacing: 1px; word-spacing: 2px; }
.hero-stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
.hero-stat-box { padding: .9rem .6rem; }
.hero-stat-label { font-size: .68rem; }
.hero-stat-value { font-size: 1.4rem; }
.hero-cta {
display: block;
width: 100%;
max-width: 300px;
margin: 0 auto;
font-size: .82rem;
letter-spacing: 1.5px;
padding: .75rem 1rem;
}
.hero-footer-line {
font-size: .62rem;
letter-spacing: 1px;
word-spacing: 2px;
line-height: 1.6;
}
}
/* ── COLLECTION PAGE ─────────────────────────────── */
.coll-search-bar{width:100%;padding:10px 14px;border:2px solid var(--border);background:var(--surface2);color:var(--text);font-family:'Space Mono','Share Tech Mono',monospace;font-size:.7rem;letter-spacing:.03em;outline:none;transition:border-color .1s}
.coll-search-bar:focus{border-color:var(--accent);box-shadow:3px 3px 0 var(--shadow)}
.coll-search-bar::placeholder{color:var(--muted)}
.card-result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:16px}
.card-result{background:var(--surface);border:1px solid var(--border);cursor:pointer;padding:8px;transition:all .15s;text-align:center}
.card-result:hover{border-color:var(--accent);box-shadow:3px 3px 0 var(--shadow);transform:translate(-1px,-1px)}
.card-result img{width:100%;height:auto;display:block;margin-bottom:6px;border:1px solid var(--border)}
.card-result-name{font-size:.72rem;color:var(--text);margin-bottom:2px;line-height:1.3}
.card-result-set{font-size:.64rem;color:var(--muted)}
/* ── CRT power-on effect for card result grid ── */
.crt-grid-wrap{
transform-origin:center center;
transform:scaleY(0.001);
filter:brightness(14) blur(5px) saturate(0);
will-change:transform,filter;
}
.crt-grid-wrap.crt-powered{
animation:crt-grid-on .85s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes crt-grid-on{
0% {transform:scaleY(0.001);filter:brightness(14) blur(5px) saturate(0)}
5% {transform:scaleY(0.005);filter:brightness(16) blur(3px) saturate(0)}
18% {transform:scaleY(0.04); filter:brightness(8) blur(1px) saturate(.1)}
40% {transform:scaleY(.42); filter:brightness(3.2)blur(0) saturate(.4)}
62% {transform:scaleY(1.04); filter:brightness(1.4) saturate(.9)}
76% {transform:scaleY(.97); filter:brightness(1.06)}
90% {transform:scaleY(1.01)}
100%{transform:scaleY(1); filter:brightness(1) saturate(1)}
}
/* scanline overlay inside results */
.crt-grid-wrap::after{
content:'';pointer-events:none;
position:absolute;inset:0;
background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 1px,transparent 1px,transparent 3px);
z-index:2;opacity:0;transition:opacity .6s .4s;
}
.crt-grid-wrap.crt-powered::after{opacity:1}
/* LED blink on add-card header */
.addcard-led{
display:inline-block;width:8px;height:8px;
border-radius:50%;vertical-align:middle;margin-left:8px;
animation:ac-led-blink 1.4s ease-in-out infinite;
}
@keyframes ac-led-blink{
0%,40% {background:rgba(210,120,40,.72);box-shadow:0 0 8px 2px rgba(210,120,40,.48),0 0 3px rgba(230,140,50,.8)}
55%,100%{background:rgba(60,25,5,.22); box-shadow:0 0 2px rgba(210,120,40,.05)}
}
/* ══ ADD CARD DEVICE PAGE ═══════════════════════════════════════════════ */
#addCardPage.page{padding:12px 0;background:var(--bg);min-height:calc(100vh - 56px)}
#addCardPage.page.active{display:flex;align-items:flex-start;justify-content:center}
/* New mobile shell — phondex backdrop dropped. Renders as a
hologram-bordered card with a 2×2 button grid + CRT results
area beneath it. The dim layer already comes from the overlay
backdrop in `body.pb-addcard-overlay::before`. */
.ac-mob-clean .ac-mob-shell{
position:relative;
width:min(420px, 92vw);
max-height:calc(100svh - 80px);
padding:18px 16px 14px;
background:linear-gradient(180deg, rgba(15,26,40,.96), rgba(10,18,28,.96));
border:1.5px solid var(--accent);
border-radius:var(--r-md,12px);
box-shadow:0 0 24px rgba(26,199,160,.22), 0 8px 28px rgba(0,0,0,.6);
overflow:hidden;
display:flex;flex-direction:column;gap:12px;
}
.ac-mob-clean .ac-mob-title{
font-family:'Orbitron', monospace;
font-weight:900;
font-size:.95rem;
letter-spacing:.16em;
color:var(--accent);
text-align:center;
padding-bottom:8px;
border-bottom:1px solid rgba(26,199,160,.25);
}
.ac-mob-clean .ac-nav-grid{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:10px;
}
.ac-mob-clean .ac-nav-grid .ac-ni{
display:flex;flex-direction:column;align-items:center;justify-content:center;
/* Tightened ~20% vertically vs the previous 18px/6px pass —
buttons are square-ish now rather than chunky tiles, so the
results grid below them gets more room without sacrificing
tap-target size. */
gap:4px;padding:12px 10px;
border:1px solid rgba(26,199,160,.45);
background:rgba(26,199,160,.08);
border-radius:var(--r-sm,8px);
color:var(--accent);
cursor:pointer;
transition:background .12s, transform .12s, border-color .12s;
}
.ac-mob-clean .ac-nav-grid .ac-ni:hover,
.ac-mob-clean .ac-nav-grid .ac-ni.on{
background:rgba(26,199,160,.18);
border-color:var(--accent);
}
.ac-mob-clean .ac-nav-grid .ac-ni:active{ transform:scale(.97); }
.ac-mob-clean .ac-nav-grid .ac-ni-ico{
font-size:1.4rem; line-height:1;
}
.ac-mob-clean .ac-nav-grid .ac-ni-lbl{
font-family:'Space Mono', monospace;
font-size:.7rem; letter-spacing:.08em;
font-weight:700;
}
/* Compact (label-only) variant. The icon span was dropped from the
4 nav buttons, so the row no longer needs vertical room for two
lines. Cuts padding ~50% and shrinks the row by ~24px, giving
the card results grid below more usable area. */
.ac-mob-clean .ac-nav-grid.ac-nav-compact .ac-ni{
padding:8px 10px;
gap:0;
}
.ac-mob-clean .ac-nav-grid.ac-nav-compact .ac-ni-lbl{
font-size:.72rem;
}
.ac-mob-clean #acCrtMob{
flex:1;min-height:140px;
background:rgba(0,0,0,.5);
border:1px solid rgba(26,199,160,.25);
border-radius:var(--r-sm,8px);
overflow:hidden;
position:relative;
}
.ac-mob-clean #acMobGrid{
padding:8px;
max-height:100%;
overflow-y:auto;
}
/* Hide the new clean shell on desktop — desktop still uses the
pdex layout. */
@media (min-width: 769px){
.ac-mob-clean{ display:none !important; }
}
/* And on mobile, hide the desktop pdex variant + the legacy
phondex mobile container (we kept it disabled rather than
deleted so any deep-linking script that touched it doesn't 500). */
@media (max-width: 768px){
.ac-pdex-wrap{ display:none !important; }
}
/* Overlay mode — Add Card pops up on top of the current page
(binder, dashboard, etc.) instead of replacing it. The existing
pdex CRT visual already lives inside #addCardPage; we just
reposition the page as a fixed overlay and dim the backdrop. */
body.pb-addcard-overlay::before{
content:'';position:fixed;inset:0;z-index:8998;background:rgba(0,0,0,.78);
}
#addCardPage.pb-overlay{
position:fixed!important;inset:0!important;z-index:8999!important;
display:flex!important;align-items:center!important;justify-content:center!important;
background:transparent!important;min-height:0!important;padding:0!important;
animation:pbAddCardOverlayIn .22s ease-out;
}
@keyframes pbAddCardOverlayIn{
from{opacity:0;transform:scale(.96)}
to {opacity:1;transform:scale(1)}
}
.pb-addcard-overlay-close{
position:fixed;top:16px;right:16px;z-index:9001;
width:38px;height:38px;border-radius:var(--r-pill,999px);
background:rgba(0,0,0,.85);border:1.5px solid var(--accent);
color:var(--accent);font-size:1.2rem;font-weight:700;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.pb-addcard-overlay-close:hover{ background:var(--accent); color:var(--text-on-accent); }
.ac-pdex-wrap{display:flex;align-items:center;justify-content:center;width:100%}
.ac-mob-wrap{display:none;align-items:flex-start;justify-content:center;width:100%}
/* Device sizing — DO NOT change these to fix scroll issues.
Explicit width + height ensures .ac-phone-screen percentage heights resolve correctly.
The img is absolutely positioned so it cannot push the device div taller than intended.
acFitDevice() applies a scale() transform to fill any remaining gap after CSS sizing. */
.ac-mob-wrap .ac-device{
width: min(calc((100svh - 60px) * 1920 / 3712), 100vw);
height: min(calc(100svh - 60px), calc(100vw * 3712 / 1920));
position:relative;flex-shrink:0;overflow:hidden;transform-origin:top center}
.ac-mob-wrap .ac-device-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
@media(max-width:900px){
.ac-pdex-wrap{display:none}
/* Lock the page and wrap to available viewport height (minus 60px fixed bottom nav) */
#addCardPage.page{min-height:unset!important;height:calc(100svh - 60px)!important;overflow:hidden!important;padding:0!important}
.ac-mob-wrap{display:flex;height:calc(100svh - 60px);overflow:hidden;align-items:flex-start}
}
/* device base */
.ac-device{position:relative;font-family:'Courier New',Courier,monospace}
.ac-device-img{width:100%;display:block;user-select:none;pointer-events:none}
/* scanlines */
.ac-scanlines{position:absolute;inset:0;pointer-events:none;z-index:40;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.045) 3px,rgba(0,0,0,.045) 4px)}
/* LEDs */
.ac-led-d{position:absolute;left:89.81%;top:14.7%;width:1.3%;padding-top:1.3%;border-radius:50%;z-index:60;pointer-events:none;animation:ac-led-blink 1.35s ease-in-out infinite}
.ac-led-m{position:absolute;left:17%;top:8%;width:2.5%;padding-top:2.5%;border-radius:50%;z-index:60;pointer-events:none;animation:ac-led-blink 1.35s ease-in-out infinite}
/* CRT */
.ac-crt{width:100%;height:100%;display:flex;flex-direction:column;transform-origin:center;will-change:transform,filter;position:relative}
.ac-crt.ac-on{animation:ac-crt-on .88s cubic-bezier(.4,0,.2,1) forwards}
@keyframes ac-crt-on{
0% {transform:scaleY(.001);filter:brightness(14) blur(5px) saturate(0)}
5% {transform:scaleY(.005);filter:brightness(16) blur(3px) saturate(0)}
16% {transform:scaleY(.04); filter:brightness(8) blur(1px) saturate(.12)}
40% {transform:scaleY(.42); filter:brightness(3.2)blur(0) saturate(.4)}
62% {transform:scaleY(1.04);filter:brightness(1.4) saturate(.9)}
76% {transform:scaleY(.97); filter:brightness(1.06)}
90% {transform:scaleY(1.01)}
100%{transform:scaleY(1); filter:brightness(1) saturate(1)}
}
/* pdex screens */
.ac-left-screen{position:absolute;left:3.6%;top:22.8%;width:14.8%;height:57.5%;overflow:hidden;border-radius:4px}
.ac-right-screen{position:absolute;left:22.1%;top:12.5%;width:63.0%;height:67.5%;overflow:hidden;border-radius:4px}
/* phondex screen */
.ac-phone-screen{position:absolute;left:6.5%;top:12.41%;width:88.6%;height:82.92%;overflow:hidden;display:flex;flex-direction:column;border-radius:8px 8px 10px 10px}
/* ── left panel ── */
.ac-lp{width:100%;height:100%;display:flex;flex-direction:column;padding:7% 9%;gap:.4em}
.ac-lp::before{content:'';display:block;height:2px;background:#1AC7A0;box-shadow:0 0 8px rgba(26,199,160,.45);margin-bottom:.3em;flex-shrink:0}
.ac-lp-title{font-size:.82em;letter-spacing:.18em;color:#1AC7A0;text-align:center;padding:.2em 0;flex-shrink:0;border-bottom:1px solid rgba(26,199,160,.14);margin-bottom:.25em;text-shadow:0 0 12px rgba(26,199,160,.4)}
.ac-fl{font-size:.52em;letter-spacing:.1em;color:rgba(26,199,160,.65);margin-bottom:.15em;display:block;flex-shrink:0}
.ac-fi{-webkit-appearance:none;appearance:none;width:100%;background:#060d14;border:1px solid rgba(26,199,160,.22);border-radius:3px;color:rgba(228,240,255,.92);font-family:inherit;font-size:.58em;padding:.42em .5em;outline:none;letter-spacing:.03em;flex-shrink:0;margin-bottom:.4em;box-sizing:border-box;transition:border-color .18s,box-shadow .18s}
.ac-fi:focus{border-color:rgba(26,199,160,.6);box-shadow:0 0 0 1px rgba(26,199,160,.1),0 0 8px rgba(26,199,160,.15)}
.ac-fi::placeholder{color:rgba(65,85,105,.55)}
/* Kill browser autofill white flash + black text on autocomplete select */
.ac-fi:-webkit-autofill,
.ac-fi:-webkit-autofill:hover,
.ac-fi:-webkit-autofill:focus,
.ac-fi:-webkit-autofill:active{
-webkit-box-shadow:0 0 0 100px #060d14 inset!important;
-webkit-text-fill-color:rgba(228,240,255,.92)!important;
caret-color:rgba(228,240,255,.92);
/* delay background transition so the autofill color never flashes through */
transition:background-color 9999s ease-in-out 0s!important;
}
.ac-chips{display:flex;flex-wrap:wrap;gap:.2em;margin-bottom:.38em;flex-shrink:0}
.ac-chip{padding:.18em .45em;font-size:.44em;letter-spacing:.06em;border:1px solid rgba(26,199,160,.2);border-radius:20px;color:rgba(80,105,130,.9);cursor:pointer;transition:all .18s;white-space:nowrap}
.ac-chip:hover,.ac-chip.on{border-color:#1AC7A0;color:#1AC7A0;background:rgba(26,199,160,.08)}
.ac-ctabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.12em;margin-bottom:.3em;flex-shrink:0}
.ac-ctab{text-align:center;padding:.28em 0;font-size:.47em;letter-spacing:.07em;border-bottom:2px solid transparent;color:rgba(65,85,105,.6);cursor:pointer;transition:all .18s}
.ac-ctab.on{border-bottom-color:#1AC7A0;color:#1AC7A0}
.ac-sp{flex:1;min-height:.2em}
.ac-btn{display:block;width:100%;padding:.55em;background:#1AC7A0;color:#060810;font-family:inherit;font-weight:bold;font-size:.6em;letter-spacing:.12em;border:none;cursor:pointer;border-radius:3px;transition:filter .2s;flex-shrink:0;margin-bottom:.22em}
/* Search-panel language dropdown — compact port of the Sets-page
sets-lang dropdown. Scoped to .ac-lang-* so it can't accidentally
affect the Sets-page styles. Sized to match the search panel's
tiny font scale (the parent #acDeskLangRow runs at 0.5em). */
.ac-lang-trigger{
display:flex;align-items:center;justify-content:space-between;gap:6px;
width:100%;padding:5px 8px;
background:rgba(26,199,160,.10);
border:1px solid rgba(26,199,160,.32);
color:#1AC7A0;
font-family:inherit;font-size:1em;letter-spacing:.08em;
cursor:pointer;border-radius:3px;
transition:background-color .15s, border-color .15s;
}
.ac-lang-trigger:hover{
background:rgba(26,199,160,.18);
border-color:rgba(26,199,160,.55);
}
.ac-lang-trigger.is-open{
background:rgba(26,199,160,.22);
border-color:rgba(26,199,160,.7);
box-shadow:0 0 10px rgba(26,199,160,.35);
}
.ac-lang-caret{font-size:.8em;line-height:1;transition:transform .15s}
.ac-lang-trigger.is-open .ac-lang-caret{transform:rotate(180deg)}
.ac-lang-popover{
position:absolute;top:calc(100% + 4px);left:0;right:0;
background:rgba(8,12,20,.97);
border:1px solid rgba(26,199,160,.55);
box-shadow:0 0 18px rgba(26,199,160,.35), 0 0 40px rgba(26,199,160,.15);
padding:3px;z-index:1000;
display:flex;flex-direction:column;gap:1px;
animation:acLangPopIn .12s ease-out;
}
@keyframes acLangPopIn{
from{opacity:0;transform:translateY(-3px)}
to {opacity:1;transform:translateY(0)}
}
.ac-lang-opt{
padding:6px 10px;background:transparent;border:1px solid transparent;
color:rgba(26,199,160,.78);
font-family:inherit;font-size:1em;letter-spacing:.06em;
cursor:pointer;text-align:left;
transition:background-color .12s, color .12s;
}
.ac-lang-opt:hover{
background:rgba(26,199,160,.12);
color:#1AC7A0;
}
.ac-lang-opt.is-selected{
background:rgba(26,199,160,.18);
color:#1AC7A0;
border-color:rgba(26,199,160,.4);
}
.ac-btn:hover{filter:brightness(1.1)}
.ac-ghost{display:block;width:100%;padding:.36em;text-align:center;background:rgba(26,199,160,.05);border:1px solid rgba(26,199,160,.28);border-radius:3px;color:rgba(26,199,160,.75);font-family:inherit;font-size:.52em;letter-spacing:.08em;cursor:pointer;transition:all .18s;flex-shrink:0;margin-bottom:.15em}
.ac-ghost:hover{border-color:rgba(26,199,160,.6);color:#1AC7A0;background:rgba(26,199,160,.09)}
/* ── right panel ── */
.ac-rp{width:100%;height:100%;display:flex;flex-direction:column}
.ac-rp-hdr{display:flex;justify-content:space-between;align-items:center;padding:.55% 1.1% .45%;flex-shrink:0;border-bottom:1px solid rgba(26,199,160,.09)}
.ac-rp-title{font-size:.8em;letter-spacing:.16em;color:#1AC7A0;text-shadow:0 0 10px rgba(26,199,160,.35)}
.ac-rp-count{font-size:.45em;letter-spacing:.08em;color:rgba(65,85,105,.75)}
.ac-rp-status{font-size:.52em;letter-spacing:.05em;color:rgba(26,199,160,.55);padding:.35em 1.1%;flex-shrink:0;display:none}
/* card results inside device - override default .card-result styles */
#acDeskGrid{flex:1;overflow-y:scroll;overflow-x:hidden;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:min-content;gap:.5%;padding:.6% .8%;min-height:0;scroll-behavior:smooth}
/* d-pad hit areas */
.ac-dpad-up,.ac-dpad-dn{position:absolute;width:5%;padding-top:5%;border-radius:50%;cursor:pointer;z-index:70;background:transparent;transition:background .15s}
.ac-dpad-up:hover,.ac-dpad-dn:hover{background:rgba(26,199,160,.12)}
#acDeskGrid .card-result{background:transparent;border:none;box-shadow:inset 0 0 0 1px rgba(26,199,160,.15);border-radius:6px 0 6px 6px;overflow:hidden;padding:0;display:flex;flex-direction:column;cursor:pointer;position:relative;transition:box-shadow .2s;transform:none}
#acDeskGrid .card-result::after{content:'';position:absolute;top:0;right:0;width:9px;height:9px;background:linear-gradient(135deg,transparent 48%,rgba(26,199,160,.2) 48%,rgba(26,199,160,.2) 52%,transparent 52%);pointer-events:none;z-index:5}
#acDeskGrid .card-result:hover{box-shadow:inset 0 0 0 1px rgba(26,199,160,.45);transform:none}
#acDeskGrid .card-result img{width:100%;height:auto;flex-shrink:0;display:block;border:none;margin:0}
#acDeskGrid .card-result-name{font-size:.48em;color:rgba(215,228,240,.9);padding:4% 6% 1%;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acDeskGrid .card-result-set{font-size:.38em;color:rgba(65,85,105,.78);padding:0 6% 2%}
#acDeskGrid button[title="Add to Wishlist"]{display:none}
/* ── mobile nav ── */
.ac-nav{display:flex;flex-shrink:0;background:rgba(5,12,18,.98);border-bottom:1px solid rgba(26,199,160,.22)}
.ac-ni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.6em 0 .4em;gap:.2em;cursor:pointer;position:relative;transition:background .2s}
.ac-ni:hover{background:rgba(26,199,160,.05)}
.ac-ni.on{background:rgba(26,199,160,.07)}
.ac-ni.on::after{content:'';position:absolute;bottom:0;left:22%;right:22%;height:2px;background:#1AC7A0;box-shadow:0 0 8px #1AC7A0}
.ac-ni-ico{font-size:1.1em;color:rgba(26,199,160,.65);transition:all .2s}
.ac-ni.on .ac-ni-ico{color:#1AC7A0;text-shadow:0 0 10px rgba(26,199,160,.8)}
.ac-ni-lbl{font-size:.52em;letter-spacing:.11em;color:rgba(26,199,160,.55);font-weight:bold;text-transform:uppercase;transition:color .2s}
.ac-ni.on .ac-ni-lbl{color:#1AC7A0}
/* ── mobile scrollable results grid ── */
/* flex:1 + min-height:0 lets .ac-crt fill .ac-phone-screen without JS measurement */
.ac-mob-wrap .ac-crt{width:100%;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
/* Grid fills whatever height remains after the nav tab bar */
.ac-mob-grid{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:.6%;padding:.8% 1%;scroll-behavior:smooth}
.ac-mc{position:relative;display:flex;flex-direction:column;border-radius:9px 0 9px 9px;box-shadow:inset 0 0 0 1px rgba(26,199,160,.18);overflow:hidden;cursor:pointer;transition:box-shadow .2s}
.ac-mc:hover{box-shadow:inset 0 0 0 1px rgba(26,199,160,.48)}
.ac-mc::after{content:'';position:absolute;top:0;right:0;width:14px;height:14px;background:linear-gradient(135deg,transparent 48%,rgba(26,199,160,.22) 48%,rgba(26,199,160,.22) 52%,transparent 52%);pointer-events:none;z-index:5}
.ac-mc-img{width:100%;aspect-ratio:240/336;object-fit:cover;display:block}
.ac-mc-ph{width:100%;aspect-ratio:240/336;background:rgba(26,199,160,.03);display:flex;align-items:center;justify-content:center}
.ac-mc-name{font-size:.63em;color:rgba(215,228,240,.9);padding:3% 5% 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-mc-sub{font-size:.5em;color:rgba(65,85,105,.85);padding:0 5% 1%}
.ac-mc-add{text-align:center;padding:2.5% 0;flex-shrink:0;border-top:1px solid rgba(26,199,160,.08);font-size:.5em;letter-spacing:.1em;color:rgba(26,199,160,.42);transition:color .2s}
.ac-mc:hover .ac-mc-add{color:rgba(26,199,160,.82)}
/* ── mobile hologram search panel — absolute overlay, no layout shift ── */
.ac-search-panel{position:absolute;left:3%;right:3%;z-index:80;background:rgba(3,12,20,.96);border:1px solid rgba(26,199,160,.52);border-radius:3px;box-shadow:0 0 0 1px rgba(26,199,160,.08),0 0 18px rgba(26,199,160,.22),0 0 50px rgba(26,199,160,.07),inset 0 0 40px rgba(26,199,160,.03);transform-origin:top center;transform:scaleY(0.01);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .22s cubic-bezier(.4,0,.2,1);overflow:hidden}
.ac-search-panel::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(26,199,160,.022) 2px,rgba(26,199,160,.022) 3px);pointer-events:none;z-index:0}
/* projection beam below panel */
.ac-search-panel::after{content:'';position:absolute;bottom:-40px;left:15%;width:70%;height:40px;background:linear-gradient(to bottom,rgba(26,199,160,.08) 0%,transparent 100%);clip-path:polygon(10% 0%,90% 0%,100% 100%,0% 100%);pointer-events:none;z-index:-1}
.ac-search-panel.open{transform:scaleY(1);opacity:1;pointer-events:auto}
.ac-search-inner{position:relative;z-index:1}
.ac-search-inner{padding:4% 6% 5%;position:relative;z-index:1}
.ac-drag{width:28%;height:3px;background:rgba(26,199,160,.18);border-radius:2px;margin:.85em auto .55em}
.ac-sh-title{text-align:center;font-size:.9em;letter-spacing:.2em;color:#1AC7A0;padding:.15em 0 .45em;border-bottom:1px solid rgba(26,199,160,.1);margin-bottom:.65em}
.ac-sf-label{font-size:.5em;letter-spacing:.12em;color:rgba(26,199,160,.55);margin-bottom:.28em;display:block}
.ac-sf-input{-webkit-appearance:none;appearance:none;width:100%;background:#060d14;border:1px solid rgba(26,199,160,.22);border-radius:3px;color:rgba(225,238,252,.88);font-family:inherit;font-size:.66em;padding:.45em .5em;outline:none;margin-bottom:.75em;letter-spacing:.03em;box-sizing:border-box;transition:border-color .18s,box-shadow .18s}
.ac-sf-input:focus{border-color:rgba(26,199,160,.6);box-shadow:0 0 0 1px rgba(26,199,160,.1),0 0 8px rgba(26,199,160,.15)}
.ac-sf-input::placeholder{color:rgba(65,85,105,.62)}
.ac-sf-input:-webkit-autofill,
.ac-sf-input:-webkit-autofill:hover,
.ac-sf-input:-webkit-autofill:focus,
.ac-sf-input:-webkit-autofill:active{
-webkit-box-shadow:0 0 0 100px #060d14 inset!important;
-webkit-text-fill-color:rgba(225,238,252,.88)!important;
transition:background-color 9999s ease-in-out 0s!important;
}
.ac-sf-chips{display:flex;flex-wrap:wrap;gap:.28em;margin-bottom:.72em}
.ac-sf-chip{padding:.22em .7em;font-size:.52em;letter-spacing:.07em;border:1px solid rgba(26,199,160,.18);border-radius:20px;color:rgba(65,85,105,.85);cursor:pointer;transition:all .18s;white-space:nowrap}
.ac-sf-chip:hover,.ac-sf-chip.on{border-color:#1AC7A0;color:#1AC7A0;background:rgba(26,199,160,.09)}
.ac-sf-cotabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.25em;margin-bottom:.5em}
.ac-sf-cotab{text-align:center;padding:.32em 0;font-size:.56em;letter-spacing:.09em;border-bottom:2px solid transparent;color:rgba(65,85,105,.65);cursor:pointer;transition:all .18s}
.ac-sf-cotab.on{border-bottom-color:#1AC7A0;color:#1AC7A0}
.ac-sf-btn{display:block;width:100%;padding:.65em;margin-top:.85em;margin-bottom:.38em;background:#1AC7A0;color:#060810;font-family:inherit;font-weight:bold;font-size:.74em;letter-spacing:.13em;border:none;cursor:pointer;border-radius:4px;transition:filter .2s}
.ac-sf-btn:hover{filter:brightness(1.1)}
.ac-sf-ghost{display:block;width:100%;padding:.45em;text-align:center;background:transparent;border:1px solid rgba(26,199,160,.13);border-radius:4px;color:rgba(65,85,105,.72);font-family:inherit;font-size:.57em;letter-spacing:.1em;cursor:pointer;transition:all .18s}
.ac-sf-ghost:hover{border-color:rgba(26,199,160,.3);color:rgba(100,130,160,.9)}
/* ══ END ADD CARD DEVICE PAGE ══════════════════════════════════════════ */
.coll-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.coll-stat-box{background:var(--surface);border:1px solid var(--border);padding:16px;text-align:center}
.coll-stat-label{font-size:.7rem;color:var(--muted);margin-bottom:6px;letter-spacing:.08em}
.coll-stat-value{font-size:1.15rem;color:var(--accent);letter-spacing:.04em;font-weight:700}
.coll-table-wrap{overflow-x:auto}
.coll-table{width:100%;border-collapse:collapse;font-size:.82rem}
.coll-table th{text-align:left;padding:10px 12px;color:var(--accent);font-size:.72rem;letter-spacing:.1em;border-bottom:1px solid var(--border);letter-spacing:.04em;white-space:nowrap}
.coll-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.coll-table tr:hover td{background:var(--surface2)}
.grade-badge{display:inline-block;padding:2px 8px;border-radius:2px;font-size:.66rem;font-weight:700;background:var(--surface2);border:1.5px solid var(--accent);color:var(--accent);letter-spacing:.04em}
.raw-badge{display:inline-block;padding:2px 8px;border-radius:2px;font-size:.66rem;color:var(--muted);border:1px solid var(--border);letter-spacing:.04em}
.coll-gain-pos{color:var(--green)}
.coll-gain-neg{color:var(--red)}
.coll-add-section{background:var(--surface);border:1px solid var(--border);padding:20px;margin-bottom:24px}
.coll-add-title{font-size:.85rem;color:var(--accent);margin-bottom:14px;letter-spacing:.06em;letter-spacing:.04em}
.coll-add-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.coll-btn-primary{padding:9px 22px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-family:'Space Mono','Share Tech Mono',monospace;font-size:.82rem;cursor:pointer;letter-spacing:.04em;transition:all .15s}
.coll-btn-primary:hover{background:var(--surface2)}
.coll-btn-secondary{padding:9px 22px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Space Mono','Share Tech Mono',monospace;font-size:.82rem;cursor:pointer;letter-spacing:.04em;transition:all .15s}
.coll-btn-secondary:hover{border-color:var(--accent);color:var(--text)}
.coll-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.coll-empty{text-align:center;padding:48px;color:var(--muted);font-size:.88rem;line-height:1.8}
/* ATC Modal inputs */
.atc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.atc-input{width:100%;padding:8px 12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:'Space Mono','Share Tech Mono',monospace;font-size:.82rem;outline:none;transition:border-color .15s}
/* Global: kill native number-input spinner arrows. They look out of
place against the hologram/cyberpunk aesthetic and on touch they
hijack vertical scroll. Keyboard up/down still works for power
users — only the visual chrome is hidden. See CLAUDE.md note. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.atc-input:focus{border-color:var(--accent)}
.atc-input::placeholder{color:var(--muted)}
@media(max-width:600px){
.atc-grid{grid-template-columns:1fr}
.card-result-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.coll-table th:nth-child(2),.coll-table td:nth-child(2),
.coll-table th:nth-child(6),.coll-table td:nth-child(6){display:none}
}
/* ── CONDITION BADGES ──────────────────────────────── */
.cond-nm{background:rgba(210,120,40,.1);border:1px solid rgba(210,120,40,.3);color:var(--green)}
.cond-lp{background:rgba(255,221,68,.1);border:1px solid rgba(255,221,68,.3);color:var(--yellow)}
.cond-hp{background:rgba(255,68,85,.1);border:1px solid rgba(255,68,85,.3);color:var(--red)}
.cond-graded{background:var(--surface2);border:1.5px solid var(--accent);color:var(--accent)}
.cond-badge{display:inline-block;padding:2px 8px;border-radius:2px;font-size:.66rem;font-weight:700;letter-spacing:.06em}
/* ── BETA TESTER BADGES ────────────────────────────── */
.beta-badge{
display:inline-flex;align-items:center;gap:2px;
font-family:'Space Mono','Share Tech Mono',monospace;
font-size:.55rem;font-weight:700;letter-spacing:.08em;
padding:1px 5px;margin-left:4px;
vertical-align:middle;text-transform:uppercase;
background:var(--surface2);
}
.beta-badge.founding{border:1.5px solid var(--copper);color:var(--copper);text-shadow:0 0 4px rgba(184,115,51,.4)}
.beta-badge.collector{border:1.5px solid var(--accent);color:var(--accent);text-shadow:0 0 4px rgba(26,199,160,.4)}
.beta-badge .bb-glyph{font-size:.6rem;line-height:1}
/* Compact dot variant for tight spaces like the nav chip */
.beta-dot{
display:inline-block;width:6px;height:6px;border-radius:50%;
margin-left:5px;vertical-align:middle;
}
.beta-dot.founding{background:var(--copper);box-shadow:0 0 5px rgba(184,115,51,.7)}
.beta-dot.collector{background:var(--accent);box-shadow:0 0 5px rgba(26,199,160,.7)}
/* ── MARKET PRICE DIFF ─────────────────────────────── */
/* Market price strip — focal point on listing cards. Sits between
the ask price and the seller line so buyers see the comp value +
above/below indicator immediately. Boxed treatment makes it read
as a deliberate panel rather than a muted footnote. Was 0.72rem
muted text; now mono numerals + colored % diff badge. */
.market-price-line{
font-size:.85rem;
color:var(--text);
margin-top:8px;
padding:6px 10px;
background:var(--surface);
border:1px solid var(--border);
border-left:3px solid var(--accent);
letter-spacing:.02em;
font-family:'Space Mono','Share Tech Mono',monospace;
display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.price-diff-pos{color:var(--green);font-size:.92rem;font-weight:800;letter-spacing:.04em}
.price-diff-neg{color:var(--red); font-size:.92rem;font-weight:800;letter-spacing:.04em}
/* ── STAR RATING ────────────────────────────────────── */
.star-btn{background:transparent;border:none;font-size:1.8rem;color:var(--border);cursor:pointer;transition:color .1s;padding:0 2px}
.star-btn.active,.star-btn:hover{color:var(--gold)}
/* ── PHOTO PREVIEW ──────────────────────────────────── */
.lc-photo-thumb{position:relative;width:72px;height:72px;border:1px solid var(--border);overflow:hidden}
.lc-photo-thumb img{width:100%;height:100%;object-fit:cover}
.lc-photo-thumb .rm-btn{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.7);border:none;color:#fff;font-size:.7rem;width:18px;height:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%}
/* ── COLLECTION PANEL TRANSITION ───────────────────── */
#collectionPanel.open{max-height:600px!important}
/* ── FAIR TRADE — card stack viewer + side panels ──── */
.ft-side-panel{background:var(--surface2);border:1px solid var(--border);padding:14px;display:flex;flex-direction:column;gap:0}
.ft-side-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;margin-bottom:10px}
/* Card stack viewer — stretches to fill the side panel; extra right padding for fan */
.ft-card-viewer{display:flex;flex-direction:column;align-items:stretch;padding:10px 42px 8px 14px;position:relative}
.ft-card-empty{text-align:center;color:var(--muted);font-size:.72rem;line-height:1.8;padding:30px 20px;border:1px dashed var(--border);width:100%;box-sizing:border-box}
.ft-card-empty small{font-size:.65rem;opacity:.7}
/* Stack wrap — fills viewer width; overflow:visible so fanned back cards show */
.ft-stack-wrap{position:relative;width:100%;overflow:visible;cursor:pointer;touch-action:pan-y}
/* Back layers: same footprint as front, rotated around bottom-center to fan right */
.ft-stack-back{position:absolute;inset:0;border-radius:10px;overflow:hidden;transform-origin:50% 92%}
.ft-stack-back img{width:100%;display:block}
.ft-stack-back-1{z-index:2;transform:rotate(5deg);box-shadow:0 4px 14px rgba(0,0,0,.32)}
.ft-stack-back-2{z-index:1;transform:rotate(9deg);box-shadow:0 3px 10px rgba(0,0,0,.25)}
.ft-stack-back-3{z-index:0;transform:rotate(13deg);box-shadow:0 2px 8px rgba(0,0,0,.18)}
/* Front card — position:relative drives the container height */
.ft-stack-front{position:relative;z-index:3;border-radius:10px;overflow:hidden;box-shadow:0 10px 32px rgba(0,0,0,.5)}
.ft-stack-front img{width:100%;display:block}
.ft-card-no-img{width:100%;aspect-ratio:63/88;background:var(--surface);display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:.8rem;color:var(--muted);text-align:center;padding:12px;box-sizing:border-box}
/* True card-shuffle animation. The front card translates fully off
the screen with a slight rotation. The back cards smoothly rotate
forward by one position (back-1 → 0deg, back-2 → 5deg, back-3 →
9deg) so what was "second from top" becomes the new visible top
— no fade-in needed because that card was already there. After
the swipe, content updates and positions reset; the swiped card
reappears subtly at back-1 so the visible deck stays full.
Phase 1 (0% → 100%): the front card flies off-screen entirely.
The "slide-next" class triggers exit-left (card goes left, ie.
advancing to the next card visually slides current off to the
left); "slide-prev" goes right. */
@keyframes ftSwipeOffLeft {
0% { transform: translateX(0) rotate(0deg); }
100% { transform: translateX(-180%) rotate(-12deg); }
}
@keyframes ftSwipeOffRight {
0% { transform: translateX(0) rotate(0deg); }
100% { transform: translateX(180%) rotate(12deg); }
}
.ft-stack-front.swipe-out-left { animation: ftSwipeOffLeft .36s cubic-bezier(0.45,0,0.55,1) forwards; }
.ft-stack-front.swipe-out-right { animation: ftSwipeOffRight .36s cubic-bezier(0.45,0,0.55,1) forwards; }
/* While the front is swiping, the back cards smoothly rotate
forward by one slot, so the user sees the second-from-top card
straighten up into the front position. No fade — pure transform. */
/* Only back-1 transitions forward (rotate 5°→0°) during a swipe —
this is the "next card revealed" effect that makes 2-card swipes
feel seamless. Back-2 and back-3 fade out during the swipe so
that their content swap (which has to happen because the deck
cycles forward) is invisible. They fade back in at their default
rotations after the swipe completes. */
.ft-stack-wrap.is-shuffling .ft-stack-back-1 { transform: rotate(0deg); z-index: 2; }
.ft-stack-wrap.is-shuffling .ft-stack-back-2,
.ft-stack-wrap.is-shuffling .ft-stack-back-3 { opacity: 0; }
/* ─── Per-unit card stack (Vendor+ binder detail) ───────────────
Reuses the trade analyzer's ft-stack pattern. Each "unit" of a
qty>1 collection_items row is one slide; the user swipes / taps
arrows to navigate. The corner badge shows that unit's
individual condition. */
.pb-unit-stack-wrap{position:relative;width:100%;max-width:300px;margin:0 auto 14px;touch-action:pan-y}
.pb-unit-stack-frame{position:relative;width:100%;aspect-ratio:245/342}
.pb-unit-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;background:var(--surface2);box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .25s ease, opacity .25s ease}
/* Stack navigation slide animations — arrows trigger exit + render
new front + animate enter. CSS handles motion; JS only schedules
the index change at the midpoint. */
@keyframes pbStackExitLeft { to { transform: translateX(-110%) rotate(-4deg); opacity: 0; } }
@keyframes pbStackExitRight { to { transform: translateX( 110%) rotate( 4deg); opacity: 0; } }
@keyframes pbStackEnterLeft { from { transform: translateX(-110%) rotate(-4deg); opacity: 0; } to { transform: translateX(0) rotate(0); opacity: 1; } }
@keyframes pbStackEnterRight { from { transform: translateX( 110%) rotate( 4deg); opacity: 0; } to { transform: translateX(0) rotate(0); opacity: 1; } }
.pb-unit-slide.is-exit-left { animation: pbStackExitLeft .25s cubic-bezier(.5,0,.6,1) forwards }
.pb-unit-slide.is-exit-right { animation: pbStackExitRight .25s cubic-bezier(.5,0,.6,1) forwards }
.pb-unit-slide.is-enter-left { animation: pbStackEnterLeft .28s cubic-bezier(.2,.7,.3,1) }
.pb-unit-slide.is-enter-right { animation: pbStackEnterRight .28s cubic-bezier(.2,.7,.3,1) }
.pb-unit-slide img{width:100%;height:100%;object-fit:contain;display:block}
.pb-unit-slide.is-back-1{transform:translate(7px,7px) rotate(3deg);opacity:.5;z-index:1}
.pb-unit-slide.is-back-2{transform:translate(14px,14px) rotate(6deg);opacity:.25;z-index:0}
.pb-unit-slide.is-front{z-index:3}
.pb-unit-badge{position:absolute;top:8px;left:8px;z-index:4;padding:3px 8px;background:rgba(0,0,0,.78);color:var(--accent);font-family:'Space Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.08em;border:1px solid var(--accent);border-radius:4px;text-transform:uppercase}
.pb-unit-badge.is-graded{color:var(--gold);border-color:var(--gold)}
.pb-unit-ordinal{position:absolute;top:8px;right:8px;z-index:4;padding:3px 8px;background:rgba(0,0,0,.78);color:var(--muted);font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.06em;border:1px solid var(--border);border-radius:4px}
.pb-unit-edit{position:absolute;bottom:8px;right:8px;z-index:4;padding:5px 10px;background:rgba(0,0,0,.78);color:var(--accent);font-family:'Space Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.08em;border:1px solid var(--accent);border-radius:4px;cursor:pointer}
.pb-unit-edit:hover{background:var(--accent);color:var(--text-on-accent)}
/* Floating circular nav buttons — overlap the left/right edges
of the stack at vertical center, teal-filled. Hover scales the
button slightly so taps feel responsive. Disabled state dims
so the user knows when they've hit the end of the stack. */
.pb-unit-nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--text-on-accent);border:none;font-family:'Space Mono',monospace;font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.5);transition:transform .12s, background .12s, opacity .12s;padding:0;line-height:1}
.pb-unit-nav-arrow.pb-unit-nav-prev{left:-12px}
.pb-unit-nav-arrow.pb-unit-nav-next{right:-12px}
.pb-unit-nav-arrow:hover:not(:disabled){transform:translateY(-50%) scale(1.08)}
.pb-unit-nav-arrow:active:not(:disabled){transform:translateY(-50%) scale(.95)}
.pb-unit-nav-arrow:disabled{background:var(--surface2);color:var(--muted);cursor:not-allowed;opacity:.4;box-shadow:none}
.pb-unit-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.pb-unit-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .15s}
.pb-unit-dot.is-active{background:var(--accent)}
.pb-unit-dot.is-sold{background:var(--red,#FF4D3D)}
.pb-unit-dot.is-listed{background:var(--copper,#d97e3e)}
/* Back-1 transition matches the front's swipe duration so they
arrive together. Back-2/3 transition opacity (transform stays
constant), and the JS snap cleanup leaves their opacity transition
intact so they fade back in cleanly. */
.ft-stack-back-1 { transition: transform .36s cubic-bezier(0.45,0,0.55,1); }
.ft-stack-back-2,
.ft-stack-back-3 { transition: opacity .22s ease; }
/* After the swipe + content swap, the front element re-appears
at back-1 position with a brief fade so it slots in cleanly
behind the new top. */
@keyframes ftAppearAtBack {
0% { transform: translateX(0) rotate(5deg); opacity: 0; }
100% { transform: translateX(0) rotate(5deg); opacity: 1; }
}
.ft-stack-front.appear-at-back { animation: ftAppearAtBack .22s ease-out forwards; }
/* Nav arrows — float just outside the card edges */
.ft-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:background .15s;line-height:1}
.ft-nav-btn:hover{background:rgba(0,0,0,.85)}
.ft-nav-prev{left:-16px}
.ft-nav-next{right:-16px}
/* Remove button + qty badge */
.ft-card-remove{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.65);border:none;color:#fff;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:6;line-height:1}
.ft-card-qty-badge{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:3px;z-index:6}
/* Card metadata below stack */
.ft-card-meta{margin-top:10px;text-align:center}
.ft-card-meta-name{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-card-meta-set{font-size:.65rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-card-counter{font-size:.65rem;color:var(--muted);font-family:monospace;margin-top:5px;text-align:center}
/* Add controls */
.ft-add-controls{margin-top:10px;border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.ft-search-row{display:flex;gap:6px}
.ft-search-input{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:7px 10px;font-family:inherit;min-width:0}
.ft-search-btn,.ft-scan-btn{padding:7px 10px;background:transparent;font-family:inherit;font-size:.72rem;cursor:pointer;white-space:nowrap;letter-spacing:.03em}
.ft-btn-accent{border:1px solid var(--accent);color:var(--accent)}
.ft-btn-teal{border:1px solid var(--teal);color:var(--teal);flex:1}
.ft-btn-gold{border:1px solid var(--gold);color:var(--gold);flex:1}
.ft-scan-status{display:none;font-size:.7rem;color:var(--muted);padding:2px 0}
.ft-dropdown-results{display:none;max-height:200px;overflow-y:auto;background:var(--surface);border:1px solid var(--border)}
.ft-binder-btn{width:100%;padding:6px;border:1px dashed var(--border);background:transparent;color:var(--muted);font-family:inherit;font-size:.7rem;cursor:pointer;letter-spacing:.04em;text-align:left}
.ft-cash-row{display:flex;align-items:center;gap:8px;margin-top:8px;border-top:1px solid var(--border);padding-top:8px}
.ft-cash-label{font-size:.72rem;color:var(--muted)}
.ft-cash-input{width:80px;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:5px 8px;font-family:inherit;-moz-appearance:textfield}
.ft-cash-input::-webkit-outer-spin-button,
.ft-cash-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* PathBinder gauge — gauge.webp + needle.webp overlay rotated by JS.
Needle pivot is ~50% horizontal / ~59% vertical of the 1000×1000 image. */
.ft-gauge-wrap{
position:relative;
width:min(320px,90vw);
aspect-ratio:1/1;
margin:0 auto;
user-select:none;
-webkit-user-select:none;
}
.ft-gauge-bg,
.ft-gauge-needle{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
pointer-events:none;
-webkit-user-drag:none;
}
/* Soft cyan glow centered on the "PB" emblem in gauge.webp. Layered
between the gauge background (z-index 1) and the needle (z-index 3)
so the needle still sweeps cleanly over the top. Pulses gently for
a subtle "live readout" feel. */
.ft-gauge-bg { z-index:1; }
.ft-gauge-wrap::after{
content:'';
position:absolute;
left:50%;
top:55%;
width:24%;
height:24%;
transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle,
rgba(26,199,160,.42) 0%,
rgba(26,199,160,.18) 45%,
rgba(26,199,160,.05) 70%,
transparent 82%);
mix-blend-mode:screen;
filter:blur(2px);
pointer-events:none;
z-index:2;
animation:ftPbGlow 3.6s ease-in-out infinite;
}
@keyframes ftPbGlow{
0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
50% { opacity:.95; transform:translate(-50%,-50%) scale(1.06); }
}
.ft-gauge-needle{
transform-origin:50% 59%;
will-change:transform;
transition:transform 0.6s cubic-bezier(.34,1.56,.64,1);
z-index:3;
}
.ft-gauge-info{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
max-width:min(320px,90vw);
margin:6px auto 0;
padding:0 4px;
font-size:.7rem;
letter-spacing:.06em;
}
.ft-gauge-side{
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.ft-gauge-side > span:first-child{
font-weight:700;
font-size:.65rem;
color:var(--muted);
text-transform:uppercase;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:140px;
}
.ft-gauge-side > span:last-child{
font-weight:700;
font-size:.85rem;
}
.ft-gauge-side-a{align-items:flex-start;text-align:left}
.ft-gauge-side-a > span:last-child{color:var(--teal,#5fb6c0)}
.ft-gauge-side-b{align-items:flex-end;text-align:right}
.ft-gauge-side-b > span:last-child{color:var(--gold,#D2783A)}
/* ── TRADE ANALYZER — cyberpunk artwork stage ────────── */
/* Stage is the wrapper that carries the artwork background on desktop.
Interactive elements (SIDE A/B panels, action buttons, etc.) are
layered ON TOP of the artwork — the PNG sits at z-index 1 and content
at z-index 2. Mobile drops the artwork backdrop to a cleaner stack. */
/* The stage maintains the PNG's exact aspect ratio so absolute-positioned
overlays use percentages that map 1:1 to PNG coordinates we measured.
Three-layer stacking on desktop:
z-index 1: side panels (under the PNG)
z-index 2: PNG art (pipes + graffiti cover the panel edges)
z-index 3: hero text, action buttons, trade-code row (on top of PNG)
PNG has pointer-events:none so clicks pass through where elements
beneath need to be interactive. */
.ft-stage{
position:relative;
max-width:1280px;
margin:0 auto;
aspect-ratio: 2400 / 1786;
isolation:isolate;
}
.ft-stage-art{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:fill;
z-index:2;
pointer-events:none;
user-select:none;
}
/* Default: desktop PNG visible, mobile PNG hidden. */
.ft-stage-art-mobile{ display:none; }
/* Content layer is a plain absolute box — NO z-index of its own — so
children's explicit z-indices participate in .ft-stage's stacking. */
.ft-stage-content{
position:absolute;
inset:0;
}
/* ── MOBILE: 9:16 portrait stage with trade_mobile.png ─────────
Source PNG is 7424×13312 (~9:16). We switch image, switch the
stage aspect-ratio, and keep absolute positioning so the
cyberpunk pipe frames in the PNG align with the side panels,
action buttons, etc. Per-element overrides for the mobile
slots live further down in their own block. */
@media(max-width:780px){
.ft-stage{
aspect-ratio: 7424 / 13312;
max-width:100%;
margin:0;
}
.ft-stage-art-desktop{ display:none; }
.ft-stage-art-mobile { display:block; }
.ft-stage-content{ position:absolute; inset:0; }
/* ── Mobile element slots ──────────────────────────────────
First-pass percentages assume the PNG stacks the two side
panels vertically with action buttons + code row at the
bottom. Tune these against the actual artwork once you can
eyeball it. Hero is across the top, Side A in upper third,
Side B in middle, action buttons below, code row at bottom. */
/* Hero — compact two-row title plus a tucked-in Japanese
subtitle. Tagline still hidden. Nudged up to top:1% so it
clears the cat graffiti by a hair more. */
.ft-stage .ft-hero{
top:1%; left:5%; right:18%;
flex-direction:column; gap:0;
}
.ft-stage .ft-hero > div:first-child{ max-width:55%; }
.ft-stage .ft-hero-title{
font-size:.95rem !important;
line-height:1.05;
white-space:normal;
letter-spacing:.04em;
}
.ft-stage .ft-hero-jp{
display:block !important;
font-size:.5rem !important;
letter-spacing:.18em;
margin-top:1px;
opacity:.8;
}
.ft-stage .ft-hero-sub{ display:none !important; }
/* ? HOW IT WORKS — on mobile this collapses to a square low-
opacity cyan glyph button anchored to the top-right. */
.ft-stage .ft-hero-how{
position:absolute !important;
top:10% !important;
right:-17.5% !important;
left:auto !important;
width:25px !important;
height:25px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:0 !important;
background:transparent !important;
border:none !important;
color:var(--ft-cyan) !important;
font-size:0 !important; /* hide existing "? HOW IT WORKS" text */
white-space:nowrap;
cursor:pointer;
z-index:4;
}
.ft-stage .ft-hero-how::before{
content:'';
font-family:'Orbitron','Space Mono',monospace;
font-size:1.4rem;
font-weight:800;
line-height:1;
color:var(--ft-cyan);
}
/* Hover + active states match the analyze/create/reset buttons —
translucent white wash on hover, grey wash on press. */
.ft-stage .ft-hero-how:hover { background:rgba(255,255,255,.08) !important; }
.ft-stage .ft-hero-how:active{ background:rgba(120,120,120,.32) !important; }
/* SIDE A + B — stretched another 6px downward from the previous
pass (≈1% on a ~640px stage). The inner card viewer +
SEARCH/SCAN/MY BINDER/+$ action row have full headroom and
the action row no longer clips. */
.ft-stage .ft-side-a.ft-pink{
left:6%; right:6%; top:11%; bottom:52%;
padding:8px 10px 32px;
}
.ft-stage .ft-side-b.ft-cyan{
/* Shifted ~10px (≈1.5%) downward from the previous pass so
the panel sits inside its own pipe-frame slot, not the
inter-frame gap. */
left:6%; right:6%; top:48%; bottom:17%;
padding:8px 10px 32px;
}
/* Lock-in buttons sit INSIDE their respective trade window,
in the middle of each panel — ABOVE the SEARCH/SCAN/BINDER
action row at the panel's bottom. Previous positions
(top:34% / top:65.5%) overlapped the action rows and
blocked the joiner from tapping their own controls during
an active session — z-index:3 lock-in was covering the
action row buttons underneath.
Doubled #id selector below pushes specificity past the
identical desktop rule further down in this stylesheet —
without it, the desktop side-by-side layout wins on mobile
too because of source order. */
.ft-stage #ftLockBtnA#ftLockBtnA{ left:14%; right:14%; top:42%; bottom:55%; }
.ft-stage #ftLockBtnB#ftLockBtnB{ left:14%; right:14%; top:77%; bottom: 20%; }
/* Action buttons — STACKED VERTICALLY at the bottom of the PNG.
Each is ~5% tall with 1% gap, all spanning ~80% of the stage
width. Transparent + opacity feedback inherited from desktop
(.ft-action-btn :hover / :active rules) so the PNG's colored
shapes provide the visible fill underneath. */
/* Force black text on the mobile analyze / create / reset
buttons — overrides any inherited browser-default button text
color on iOS Safari + the disabled-state .45 alpha. */
.ft-stage .ft-action-btn,
.ft-stage .ft-action-btn .ft-en,
.ft-stage .ft-action-btn .ft-jp{
color:#000 !important;
-webkit-text-fill-color:#000 !important;
}
/* Disabled state on mobile: drop the grey wash and grayscale —
the QR slam already covers the analyze + create-link slots
during an active session, so the "you can't use these"
message is already visually obvious. Keep them unclickable. */
.ft-stage .ft-action-btn.ft-disabled{
background:transparent !important;
color:#000 !important;
filter:none !important;
}
/* Action buttons — nudged +4px (~0.6%) down from previous pass. */
.ft-stage .ft-action-row .ft-action-analyze{
left:10.7%; right:12.5%; top:81.6%; bottom:13%;
}
.ft-stage .ft-action-row .ft-action-create{
left:10.7%; right:12.5%; top:88%; bottom:7%;
}
.ft-stage .ft-action-row .ft-action-reset{
left:10.7%; right:12.5%; top:93.6%; bottom:1%;
}
/* Code row — input + JOIN side-by-side, the "HAVE A TRADE
CODE?" label hidden. Sits just below the reset button.
Nudged down 2px from previous pass; both controls a couple
px shorter so they don't crowd the reset above. */
.ft-stage .ft-code-row{
position:absolute;
left:6%; right:6%; bottom:auto; top:97%;
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
gap:6px;
align-items:center;
}
.ft-stage .ft-code-row .ft-code-label{ display:none !important; }
.ft-stage .ft-code-row .ft-code-input{
flex:1 1 auto;
min-width:0;
font-size:.7rem;
padding:3px 8px;
}
.ft-stage .ft-code-row button{
flex:0 0 auto;
padding:4px 14px !important;
font-size:.65rem !important;
}
/* QR slam target — shrunk and positioned over the upper two
action buttons (analyze + create link). Sits at the top of
the action stack so it visually replaces those two buttons
while a session is hosting.
The doubled id selector below pushes specificity past the
identical desktop rule that sits LATER in this stylesheet —
without it the desktop's 118px wins on mobile too because
source order breaks specificity ties. */
.ft-stage #ftQrContainer#ftQrContainer{
width:69px !important;
height:69px !important;
padding:4px !important;
left:50% !important; top:82% !important;
transform:translate(-50%,0) rotate(-7deg) !important;
}
/* Full session banner is too dense for mobile — hide entirely.
A minimal #ftMobileSessionCode replaces it below the reset
button (rendered by _ftRenderSessionBanner). */
#ftSessionBanner{ display:none !important; }
/* Mobile session code — vertical column of 3 stacked code
repeats anchored to the right of the QR slam target. The
QR sits centered at left:50% top:75% with ~10% height, so
this column hugs its right edge.
(Desktop default below the @media block keeps it hidden when
not on mobile — _ftRenderSessionBanner clears the inline
display:none unconditionally, so without that default the
element renders as block on desktop with the code stacked 3x.) */
.ft-stage #ftMobileSessionCode{
position:absolute;
left:58%; right:10%;
top:84%; bottom:24%;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
gap:3px;
font-family:'Space Mono',monospace;
z-index:3;
pointer-events:none;
}
.ft-stage #ftMobileSessionCode .mlabel{ display:none; }
.ft-stage #ftMobileSessionCode .mcode{
font-size:.7rem;
font-weight:700;
letter-spacing:.15em;
color:var(--ft-pink);
line-height:1;
white-space:nowrap;
}
.ft-stage #ftMobileSessionCode .mcode:nth-child(1){ opacity:.5; }
.ft-stage #ftMobileSessionCode .mcode:nth-child(2){ opacity:1; }
.ft-stage #ftMobileSessionCode .mcode:nth-child(3){ opacity:.5; }
/* Hologram modals (SEARCH / SCAN / MY BINDER pickers) — each
modal vertically centers over its OWN side panel so the
picker appears anchored to the trade window it's filtering.
Modal A → Side A (12–43%). Modal B → Side B (43.5–74.5%). */
.ft-stage .ft-modal-A{
left:5% !important; right:5% !important;
width:auto !important;
transform:none !important;
top:13% !important;
max-height:32% !important;
}
.ft-stage .ft-modal-B{
left:5% !important; right:5% !important;
width:auto !important;
transform:none !important;
top:45% !important;
max-height:32% !important;
}
/* Mobile side-panel layout: 3-column grid framing the card image
with a slim button rail on each side. The action-row container
dissolves via display:contents so its four children sit as
direct grid items of the panel, each placed by row/column. */
.ft-stage .ft-side-panel.ft-side-a,
.ft-stage .ft-side-panel.ft-side-b{
display:grid !important;
grid-template-columns:18% 1fr 18% !important;
/* Four rows: rows 1 + 4 are 1fr spacers (equal top and bottom
padding), rows 2 + 3 hold the two button rows with a clear
gap. Equal 1fr above and below pins the button pair to the
vertical center of each rail. */
grid-template-rows:1fr auto auto 1fr !important;
column-gap:4px !important;
row-gap:12px !important;
justify-items:stretch !important;
}
/* Card viewer fills column 2 across all rows. Kids
(.ft-stack-back, .ft-card-empty) are position:absolute inset:0
so the viewer needs explicit dimensions. 160 × 222 = ~0.72
card aspect. */
.ft-stage .ft-card-viewer{
grid-column:2 !important;
grid-row:1 / -1 !important;
align-self:center !important;
justify-self:center !important;
width:100% !important;
max-width:160px !important;
height:222px !important;
max-height:222px !important;
min-height:0 !important;
padding:0 !important;
}
/* Empty-state pinned inside the viewer. */
.ft-stage .ft-card-empty{
left:0 !important;
right:0 !important;
font-size:.55rem !important;
padding:8px !important;
}
.ft-stage .ft-card-empty small{
font-size:.5rem !important;
}
/* Action-row spans the full panel grid (cols 1-3, rows 1-4) and
becomes its OWN grid with the same column/row templates as the
panel. This puts each button into a real grid cell that lines
up with the rail positions, instead of relying on
display:contents (which Brave/iOS doesn't honor for grid item
placement). Background/border stripped so the wrapper is
visually invisible; pointer-events:none lets clicks fall
through to the card-viewer underneath, and the children
re-enable their own clickability. */
.ft-stage .ft-side-action-row{
grid-column:1 / -1 !important;
grid-row:1 / -1 !important;
display:grid !important;
grid-template-columns:18% 1fr 18% !important;
grid-template-rows:1fr auto auto 1fr !important;
column-gap:4px !important;
row-gap:12px !important;
width:auto !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:none !important;
pointer-events:none !important;
}
.ft-stage .ft-side-action-row > *{
pointer-events:auto !important;
align-self:stretch !important;
justify-self:stretch !important;
}
/* Left rail — col 1. SEARCH on row 2, SCAN on row 3. */
.ft-stage .ft-side-action-row > .ft-side-btn:nth-of-type(1){
grid-column:1 !important;
grid-row:2 !important;
}
.ft-stage .ft-side-action-row > .ft-side-btn:nth-of-type(2){
grid-column:1 !important;
grid-row:3 !important;
}
/* Right rail — col 3. BINDER on row 2, CASH on row 3. */
.ft-stage .ft-side-action-row > .ft-side-btn:nth-of-type(3){
grid-column:3 !important;
grid-row:2 !important;
}
.ft-stage .ft-side-action-row > .ft-cash-mini{
grid-column:3 !important;
grid-row:3 !important;
}
/* Slim button styling — narrower targets sitting outside the card.
Half the previous height, smaller font, and no forced word-break
so single-word labels (SEARCH / SCAN / BINDER) stay on one line. */
.ft-stage .ft-side-btn{
width:100% !important;
padding:4px 4px !important;
font-size:.42rem !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* Cash mini matches the button pill dimensions: same horizontal
padding, same font, same line-height. We strip the wrapper's
own vertical padding and let the inner contribute the
4px top/bottom that the buttons have — that's what gets the
heights to line up. */
.ft-stage .ft-cash-mini{
width:100% !important;
padding:0 4px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
gap:2px !important;
font-size:.42rem !important;
line-height:1 !important;
min-height:0 !important;
}
.ft-stage .ft-cash-mini .ft-cash-label{
font-size:.42rem !important;
line-height:1 !important;
padding:0 !important;
}
.ft-stage .ft-cash-input{
width:100% !important;
min-width:0 !important;
font-size:.42rem !important;
padding:4px 2px !important;
line-height:1 !important;
text-align:center !important;
}
}
/* Cyberpunk colors used by the mockup */
:root{
--ft-pink: #FF3D7F;
--ft-cyan: #1AC7A0;
--ft-yellow: #FFE94A;
--ft-pink-glow: rgba(255,61,127,.14);
--ft-cyan-glow: rgba(26,199,160,.10);
}
/* Header: positioned in the PNG's top-left negative space. */
.ft-hero{
position:absolute;top:4%;left:5%;right:3%;
display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
z-index:3;
}
.ft-hero > div:first-child{max-width:45%}
.ft-hero-title{
font-family:'Orbitron','Space Mono',monospace;
font-size:clamp(1.1rem, 2vw, 1.7rem);
font-weight:800;letter-spacing:.04em;
color:var(--text);line-height:1.05;text-transform:uppercase;
}
.ft-hero-jp{
font-family:'Orbitron','Space Mono',monospace;
font-size:clamp(.75rem, 1.3vw, 1.05rem);color:var(--ft-cyan);letter-spacing:.16em;
margin-top:4px;opacity:.85;
}
.ft-hero-sub{
font-family:'Space Mono','Share Tech Mono',monospace;
font-size:clamp(.5rem, .75vw, .62rem);color:var(--muted);margin-top:4px;
}
.ft-hero-how{
align-self:flex-start;
font-family:'Space Mono','Share Tech Mono',monospace;
font-size:.65rem;letter-spacing:.1em;
padding:6px 14px;border:1px solid var(--ft-cyan);
background:rgba(0,0,0,.5);color:var(--ft-cyan);cursor:pointer;
white-space:nowrap;transition:all .15s;
}
.ft-hero-how:hover{background:var(--ft-cyan-glow)}
/* SIDE A / SIDE B panels: recentered inside the visible pipe-frame
interiors. Pipe interiors measured at roughly x=12-43% and x=57-88%
from the PNG; panels narrowed to fit comfortably inside them. */
.ft-sides-grid{display:contents !important}
/* Trade windows — rounded corners + extra bottom padding so the action
row clears the PNG's bottom pipe artwork instead of getting clipped. */
.ft-side-a.ft-pink{
position:absolute;left:4%;right:56%;top:17%;bottom:29%;
border:none;background:transparent;padding:6px 10px 28px;
border-radius:14px;
display:flex;flex-direction:column;gap:4px;align-items:center;
z-index:1;overflow:hidden;
}
.ft-side-b.ft-cyan{
position:absolute;left:54%;right:3%;top:17%;bottom:29%;
border:none;background:transparent;padding:6px 10px 28px;
border-radius:14px;
display:flex;flex-direction:column;gap:4px;align-items:center;
z-index:1;overflow:hidden;
}
/* Action row floats to the bottom of each side panel */
.ft-stage .ft-side-action-row{margin-top:auto}
.ft-side-a .ft-side-label,
.ft-side-b .ft-side-label{display:none}
.ft-side-tag{display:none}
.ft-vs-mark{display:none}
/* Card preview now 200% larger — gives the user a clear, readable look
at the card they've added. Bounding box (.ft-card-viewer) is 25%
wider than the card itself for a bit of framing breathing room, and
5% shorter so the controls below stay in view. */
.ft-stage .ft-card-viewer{
flex:0 0 205px;
min-height:0;
width:195px; /* card width × 1.25 framing */
max-width:195px;
max-height:205px;
margin:0 auto;
padding:0;
position:relative;
}
/* Single front card only — back-stack hidden in the constrained stage */
.ft-stage .ft-stack-back-2,
.ft-stage .ft-stack-back-3{display:none}
.ft-stage .ft-stack-back-1,
.ft-stage .ft-stack-back{
position:absolute;inset:0;border-radius:8px;overflow:hidden;
transform:none !important;box-shadow:0 0 18px rgba(26,199,160,.18);
}
.ft-stage .ft-stack-back img{
width:100%;height:100%;object-fit:contain;display:block;
}
/* Empty placeholder fills the same box with hologram-styled text */
.ft-stage .ft-card-empty{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;flex-direction:column;
font-size:.78rem;padding:14px;line-height:1.5;color:var(--text);
border:1px dashed rgba(255,255,255,.22);
background:rgba(0,0,0,.28);
border-radius:10px;
width:auto;
}
.ft-stage .ft-card-empty small{font-size:.62rem;margin-top:6px;color:var(--muted)}
/* Side panel action row: SEARCH / SCAN / BINDER + Cash all on one line.
Width set to 80% so each pill ends up 20% narrower than full-width;
parent's align-items:center keeps the row horizontally centered. */
.ft-stage .ft-side-action-row{
display:flex;align-items:stretch;gap:6px;width:80%;margin-top:auto;
}
.ft-stage .ft-side-btn{
flex:1 1 0;min-width:0;
display:flex;flex-direction:row;align-items:center;justify-content:center;
padding:1px 4px;cursor:pointer;
background:rgba(0,0,0,.5);
font-family:'Orbitron','Space Mono',monospace;
font-weight:700;letter-spacing:.05em;text-transform:uppercase;
font-size:.55rem;line-height:1; /* fallback for when JS overrides span content */
transition:background .12s, transform .08s;
}
.ft-stage .ft-side-btn:hover{background:rgba(0,0,0,.7)}
.ft-stage .ft-side-btn:active{transform:translateY(1px)}
.ft-stage .ft-side-btn .ft-en{font-size:.55rem;line-height:1}
/* Hide JP labels on the compact side buttons — they'd double the
button height. JP still shows in the hologram modal titles. */
.ft-stage .ft-side-btn .ft-jp{display:none}
/* Color-coded buttons per side */
.ft-stage .ft-side-a .ft-side-btn{border:1px solid var(--ft-pink);color:var(--ft-pink)}
.ft-stage .ft-side-b .ft-side-btn{border:1px solid var(--ft-cyan);color:var(--ft-cyan)}
/* Cash input — same height as buttons (1px vertical padding + stretch) */
.ft-stage .ft-cash-mini{
flex:0 0 84px;
display:flex;align-items:center;gap:4px;
padding:1px 6px;background:rgba(0,0,0,.5);
border:1px solid rgba(255,255,255,.18);
}
.ft-stage .ft-cash-mini .ft-cash-label{
font-size:.7rem;font-family:'Space Mono','Share Tech Mono',monospace;
color:var(--muted);letter-spacing:.04em;
}
.ft-stage .ft-cash-mini .ft-cash-input{
flex:1;min-width:0;width:100%;
background:transparent;border:none;padding:2px 4px;
color:var(--text);font-family:inherit;font-size:.7rem;
}
/* Inner search row inside the hologram modal */
.ft-stage .ft-search-row{display:flex;gap:6px;margin-bottom:8px}
.ft-stage .ft-search-input{
flex:1;font-size:.85rem;padding:8px 12px;
background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);color:var(--text);
}
.ft-stage .ft-search-btn{
padding:8px 16px;font-size:.78rem;letter-spacing:.06em;
background:transparent;border:1px solid var(--ft-cyan);color:var(--ft-cyan);
cursor:pointer;font-family:inherit;
}
.ft-stage .ft-side-a + #ftHoloModalA .ft-search-btn,
.ft-stage #ftHoloModalA .ft-search-btn{
border-color:var(--ft-pink);color:var(--ft-pink);
}
/* HOLOGRAM MODAL — outer container per side */
.ft-hologram-modal{
position:absolute;
width:36%;max-height:60%;
background:rgba(8,12,20,.96);
border:1.5px solid var(--ft-cyan);
box-shadow:0 0 30px rgba(26,199,160,.4),0 0 80px rgba(26,199,160,.18);
padding:16px;border-radius:4px;
z-index:100;
flex-direction:column;
overflow:hidden;
}
/* Center each modal on its respective side panel's horizontal
center. Side A spans 4%–44% (center 24%); Side B spans 54%–97%
(center 75.5%). translateX(-50%) does the centering. */
.ft-stage .ft-modal-A{
left:24%;top:14%;width:44%;
transform:translateX(-50%);
border-color:var(--ft-pink);
box-shadow:0 0 30px rgba(255,61,127,.4),0 0 80px rgba(255,61,127,.18);
}
.ft-stage .ft-modal-B{
left:75.5%;top:14%;width:44%;
transform:translateX(-50%);
border-color:var(--ft-cyan);
}
.ft-modal-close{
position:absolute;top:6px;right:8px;
background:transparent;border:none;color:var(--muted);
font-size:1.4rem;line-height:1;cursor:pointer;padding:2px 8px;
z-index:2;
}
.ft-modal-close:hover{color:var(--text)}
.ft-modal-title{
font-family:'Orbitron','Space Mono',monospace;
font-size:.78rem;letter-spacing:.1em;font-weight:700;
color:var(--ft-cyan);margin-bottom:10px;padding-right:30px;
text-transform:uppercase;
}
.ft-modal-A .ft-modal-title{color:var(--ft-pink)}
.ft-modal-mode{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}
/* Dropdown results inside the modal — flow naturally, no extra border */
.ft-stage .ft-dropdown-results{
position:static;left:auto;top:auto;right:auto;bottom:auto;
transform:none;
background:transparent;border:none;box-shadow:none;padding:0;
width:100%;max-height:none;overflow:visible;z-index:auto;
}
.ft-stage .ft-dropdown-results img{max-width:48px;max-height:66px}
/* Action buttons positioned ON TOP of the PNG (z-index 3). Transparent
backgrounds with visible black text — the PNG's colored button shapes
show through as the visual, and the labels read clearly on top.
Measured PNG slots:
YELLOW (ANALYZE): x=11-35%
CYAN (CREATE): x=38-62%
PINK (RESET): x=68-83%
Y range: y=77-89% */
.ft-action-row{display:contents !important}
.ft-action-btn{
position:absolute;
padding:6px 8px;border:none;cursor:pointer;
font-family:'Orbitron','Space Mono',monospace;
font-weight:800;letter-spacing:.06em;text-transform:uppercase;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
background:transparent;color:#000;
transition:background .12s;
z-index:3;
}
.ft-action-btn{border-radius:14px}
.ft-action-btn:hover{background:rgba(255,255,255,.08)}
.ft-action-btn:active{background:rgba(120,120,120,.32)}
/* Disabled state: greyed-out look during session so ANALYZE TRADE +
CREATE TRADE LINK aren't blank under the PNG colored shapes. */
.ft-action-btn.ft-disabled{
background:rgba(40,40,40,.6);
color:rgba(0,0,0,.45);
pointer-events:none;
cursor:not-allowed;
filter:grayscale(.5);
}
.ft-action-btn .ft-en{font-size:clamp(.6rem, 1.1vw, .9rem)}
.ft-action-btn .ft-jp{font-size:clamp(.45rem, .7vw, .6rem);opacity:.85;letter-spacing:.08em;font-weight:700}
/* Analyze + Create at the +50% width (24% each). Reset stretched again
+25% on top of previous (14% → 17.5%). All same y range. */
.ft-action-analyze{left:9%;right:64.9%;top:77.5%;bottom:14.5%}
.ft-action-create {left:37.8%;right:37%;top:77.5%;bottom:14.5%}
.ft-action-reset {left:66%;right:15.6%;top:77.5%;bottom:14.5%}
/* Lock-in buttons appear when a trade session is active. JS uses the
pattern `el.style.display = inSession ? '' : 'none'` — clearing the
inline display falls back to this CSS rule (display:flex), showing
the button. HTML has inline display:none as the initial hidden state.
Positioned absolutely so they sit just above the action button row. */
.ft-stage #ftLockBtnA,
.ft-stage #ftLockBtnB{
position:absolute;
top:68%;bottom:23%;
padding:0 8px;
font-family:'Orbitron','Space Mono',monospace;font-weight:800;
font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
background:rgba(0,0,0,.6);
cursor:pointer;
z-index:3;
display:flex;
align-items:center;justify-content:center;
}
/* SESSION BANNER — positioned at the very BOTTOM of the stage, below
the action button row and above the social links footer. The trade
ID (PB-XXXX-XXXX) sits prominently inside, no longer obscured by the
PNG header artwork. z-index:4 keeps it above PNG but below modals. */
.ft-stage #ftSessionBanner{
position:absolute !important;
bottom:-6%; /* pushed below the stage bottom for clear separation from action buttons */
top:auto;
left:50%;
transform:translateX(-50%);
z-index:4;
width:64%;
max-width:760px;
padding:6px 14px !important;
background:rgba(8,12,20,.92) !important;
border:1.5px solid var(--ft-cyan) !important;
box-shadow:0 0 18px rgba(26,199,160,.32);
margin:0 !important;
font-size:.7rem;
}
/* When a session is active, hide the trade-code "join" input row —
the banner is showing the session state instead. */
.ft-stage.ft-in-session .ft-code-row{display:none}
/* QR CODE: when rendered for the trade-link host, the QR container is
repositioned to slam down ON TOP of the Create Trade Link button slot
at a crooked tilt. Hides the underlying button visually. */
.ft-stage #ftQrContainer{
position:absolute !important;
left:43.5%;
top:15%;
width:118px !important;
height:118px !important;
padding:6px !important;
background:#fff !important;
border:2px solid #0a0a0a;
box-shadow:0 8px 28px rgba(0,0,0,.7), 0 0 26px rgba(26,199,160,.45);
z-index:6;
transform:rotate(-7deg);
transform-origin:center;
animation:ftQrSlam .68s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
}
.ft-stage #ftQrContainer img,
.ft-stage #ftQrContainer canvas{
width:100% !important;height:100% !important;display:block;
}
@keyframes ftQrSlam{
0%{
opacity:0;
transform:rotate(38deg) scale(2.6) translateY(-260px);
filter:blur(5px);
}
55%{
opacity:1;
transform:rotate(-4deg) scale(.88) translateY(6px);
filter:blur(0);
}
78%{
transform:rotate(-12deg) scale(1.1);
}
100%{
transform:rotate(-7deg) scale(1);
opacity:1;
filter:blur(0);
}
}
/* Lock-in buttons sit ABOVE the side action row, inside the panel area.
y=53-60% places them just above the panel's bottom-anchored action
row (which lands around y=60-65% inside the shrunk panel). */
/* Lock-in buttons: width matches the action row below (80% of panel,
centered). Height shrunk ~30% from previous (was 7% tall, now ~5%). */
.ft-stage #ftLockBtnA{
left:8%;right:60%;top:57%;bottom:38%;
border:1px solid var(--ft-pink);color:var(--ft-pink);
}
.ft-stage #ftLockBtnB{
left:58%;right:7%;top:57%;bottom:38%;
border:1px solid var(--ft-cyan);color:var(--ft-cyan);
}
.ft-stage #ftLockBtnA:hover{background:var(--ft-pink-glow)}
.ft-stage #ftLockBtnB:hover{background:var(--ft-cyan-glow)}
/* Mobile action buttons follow the desktop pattern — transparent,
absolutely positioned over the PNG's colored button shapes, with
opacity tints for hover/active feedback. The actual mobile
positions live in the @media(max-width:780px) block earlier in
this stylesheet (under "Mobile element slots"). */
/* Trade-code join row — positioned over the PNG's bottom strip, on top */
.ft-code-row{
position:absolute;
left:25%;right:25%;top:95%;
display:flex;align-items:center;justify-content:center;gap:8px;
font-family:'Space Mono','Share Tech Mono',monospace;font-size:.66rem;
z-index:3;
}
.ft-code-input{
background:rgba(0,0,0,.5);border:1px solid var(--ft-cyan);color:var(--text);
padding:4px 10px;font-family:inherit;font-size:.72rem;
letter-spacing:.12em;text-transform:uppercase;width:120px;text-align:center;
}
/* Mobile: trade-code row reverts to normal flow */
@media(max-width:780px){
.ft-code-row{position:static;left:auto;right:auto;top:auto;margin-top:14px;flex-wrap:wrap;font-size:.72rem}
.ft-code-input{font-size:.78rem;padding:6px 12px}
}
/* ── FAIR TRADE — mobile layout ─────────────────────── */
/* Two-column sides stack to single column on small screens */
.ft-sides-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:600px){
.ft-sides-grid{grid-template-columns:1fr;gap:10px}
/* Session banner: stack QR + buttons below the code */
#ftSessionBanner > div{flex-direction:column !important;align-items:flex-start !important}
/* Analyze button row: full-width buttons */
#ftInputState > div[style*="justify-content:center"] button{
flex:1 1 100%;min-width:0
}
/* Join-by-code row */
#ftJoinCodeInput{width:100px}
/* Scan/search button rows inside each side: allow wrap */
.ft-side-search-row{flex-wrap:wrap}
.ft-side-search-row input{min-width:0;flex:1 1 120px}
/* Results state gauge: a bit smaller */
.ft-gauge-wrap{width:min(280px,88vw)}
.ft-gauge-info{max-width:min(280px,88vw)}
/* Breakdown tables: allow horizontal scroll */
#ftBreakdownContent table{font-size:.68rem}
#ftBreakdownContent td,#ftBreakdownContent th{padding:4px 5px}
/* Balance scale labels: larger hit targets */
#ftVerdict{font-size:.8rem;padding:0 8px;text-align:center}
}
@media(max-width:380px){
.ft-sides-grid{gap:8px}
#ftSessionBanner{padding:10px 12px}
}
/* Loading animation — PathBinder magnifying glass over both cards.
Layout primitives only — JS (_ftStartMagAnim) drives the motion
and computes the layout vars to sync the lens with the magglass
image, so the price-fetch end-of-cycle can be timed to it. */
.ft-mag-scene{
position:relative;
width:100%;
max-width:560px;
aspect-ratio:1061/714;
background:#0a0d1a;
border:1px solid #1e293b;
border-radius:8px;
overflow:hidden;
margin:0 auto;
font-family:'Space Mono','Share Tech Mono',ui-monospace,monospace;
}
@media(max-width:600px){.ft-mag-scene{max-width:480px}}
/* Real ![]()
for the cards — sized 60% of the scene width and
centered. Dodges iOS Safari's quirks with background-size:60% auto */
img.ft-mag-base{position:absolute;left:50%;top:50%;width:60%;height:auto;transform:translate(-50%,-50%);pointer-events:none;-webkit-user-drag:none;user-select:none}
.ft-mag-lens{position:absolute;left:0;top:0;width:var(--ftmg-w);height:var(--ftmg-h);pointer-events:none;will-change:transform;transform:translate(-9999px,-9999px)}
.ft-mag-lens-zoom{position:absolute;left:var(--ftmg-lens-l);top:var(--ftmg-lens-t);width:var(--ftmg-lens-d);height:var(--ftmg-lens-d);border-radius:50%;overflow:hidden;background:#0a0d1a}
.ft-mag-lens-zoom::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 50%),radial-gradient(circle at 50% 50%, transparent 55%, rgba(26,199,160,.18) 78%, rgba(0,0,0,.45) 100%);mix-blend-mode:screen}
/* Lens zoom-source: a real ![]()
sized to 1.2× the scene by JS each
frame (matches the base image at 60% × 2× zoom). Real ![]()
sidesteps iOS Safari's calc(var()*N) and background-size quirks
that left the lens blank on mobile. */
img.ft-mag-lens-img{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform,width,height;filter:saturate(1.15) contrast(1.05);max-width:none;max-height:none;-webkit-user-drag:none;user-select:none;pointer-events:none}
.ft-mag-lens-frame{position:absolute;left:0;top:0;width:var(--ftmg-w);height:var(--ftmg-h);background-image:url('/mag_glass.webp');background-size:100% 100%;pointer-events:none}
.ft-mag-label-top{position:absolute;top:12px;left:16px;font-size:10px;letter-spacing:.18em;font-weight:700;color:var(--teal);text-shadow:1px 1px 0 #000;z-index:5}
.ft-mag-label-bot{position:absolute;bottom:12px;left:16px;font-size:11px;letter-spacing:.1em;color:#94a3b8;z-index:5}
/* ── CINEMATIC ANALYZE OVERLAY ──────────────────────────────────
Loading + results states promote to fullscreen takeover when the
.ft-cinema-active class is applied by _ftShowState. !important
is required because the mobile media query at the top of the
trade analyzer aggressively resets positioning on every
.ft-stage-content child. */
#ftLoadingState.ft-cinema-active,
#ftResultsState.ft-cinema-active{
position:fixed !important;
inset:0 !important;
top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
width:auto !important; height:auto !important;
z-index:9999;
background:radial-gradient(ellipse at center,
rgba(8,12,28,.97) 0%, rgba(2,4,12,.99) 70%, #000 100%);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
padding:24px !important;
overflow:auto;
animation:ftCinemaFadeIn .35s ease-out both;
}
@keyframes ftCinemaFadeIn{
from{opacity:0}
to {opacity:1}
}
/* Cinema mode: blow the mag scene up bigger and recolor the chrome */
#ftLoadingState.ft-cinema-active .ft-mag-scene{
max-width:min(880px,94vw);
width:100%;
border:1px solid var(--teal);
box-shadow:0 0 50px rgba(26,199,160,.18), inset 0 0 30px rgba(0,0,0,.6);
}
/* Hide the legacy fetch-status text — the scene already labels itself */
#ftLoadingState.ft-cinema-active #ftLoadingMsg,
#ftLoadingState.ft-cinema-active #ftLoadingProgress{
color:var(--teal);
letter-spacing:.18em;
text-transform:uppercase;
font-family:'Space Mono','Share Tech Mono',monospace;
}
/* Two-card halves — clip the single trade_cards.webp so each side is
its own animatable element. JS triggers fly-apart by adding
.ft-fly-left / .ft-fly-right classes. EXPLOSION: smooth fast-start
ease so the cards launch the instant the slam lands. Opacity is
on a delayed transition so the cards stay fully visible until
they reach the edge of the window, then fade out as they cross. */
.ft-mag-half{
position:absolute;
left:50%; top:50%;
width:60%; height:auto;
transform:translate(-50%,-50%);
pointer-events:none;
-webkit-user-drag:none;
user-select:none;
will-change:transform,opacity;
transition:transform 1.06s cubic-bezier(.2,.6,.3,1),
opacity .38s ease-out .68s;
}
.ft-mag-half-l{ clip-path:inset(0 50% 0 0); }
.ft-mag-half-r{ clip-path:inset(0 0 0 50%); }
/* Explosion path: bottom-outward with multi-rotation spin (slam came
from above-center, so debris radiates down-and-outward). Scale > 1
to feel like they're flying toward the camera. */
.ft-mag-half.ft-fly-left {
transform:translate(-440%, 80%) rotate(-540deg) scale(1.6);
opacity:0;
}
.ft-mag-half.ft-fly-right{
transform:translate(380%, 85%) rotate(495deg) scale(1.6);
opacity:0;
}
/* Mag lens kicked upward + sideways with heavy spin (it was on top,
takes the brunt of the slam and bounces away in its own vector).
Same delayed-opacity treatment so the lens stays solid until it
reaches the edge. */
.ft-mag-lens.ft-fly-out{
transition:transform 1.06s cubic-bezier(.2,.6,.3,1),
opacity .38s ease-out .68s;
opacity:0 !important;
}
.ft-mag-lens.ft-fly-out .ft-mag-lens-zoom{
opacity:0;
transition:opacity .18s ease-out;
}
/* Breakdown reveal — CRT tube-television power-on. Same keyframe
used by .ac-crt.ac-on and .crt-grid-wrap.crt-powered: starts as
a bright thin horizontal line, expands vertically with a flash,
overshoots, and settles. */
#ftBreakdown{
transform-origin:center center;
will-change:transform,filter;
}
#ftBreakdown.ft-breakdown-hidden{
transform:scaleY(.001);
filter:brightness(14) blur(5px) saturate(0);
opacity:0;
pointer-events:none;
}
#ftBreakdown.ft-breakdown-power{
pointer-events:auto;
animation:ftBreakdownCrtOn .88s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ftBreakdownCrtOn{
0% {opacity:0;transform:scaleY(.001);filter:brightness(14) blur(5px) saturate(0)}
5% {opacity:1;transform:scaleY(.005);filter:brightness(16) blur(3px) saturate(0)}
16% {transform:scaleY(.04); filter:brightness(8) blur(1px) saturate(.12)}
40% {transform:scaleY(.42); filter:brightness(3.2)blur(0) saturate(.4)}
62% {transform:scaleY(1.04);filter:brightness(1.4) saturate(.9)}
76% {transform:scaleY(.97); filter:brightness(1.06)}
90% {transform:scaleY(1.01)}
100%{transform:scaleY(1); filter:brightness(1) saturate(1);opacity:1}
}
/* Gauge slam — identical to #ftQrContainer's ftQrSlam (falls from
above, big-and-tilted, lands small, bounces big, settles). Same
duration, easing, and keyframe structure; final rotate eased back
to 0 so the gauge sits straight when the needle plays. */
@keyframes ftGaugeWarpIn{
0%{
opacity:0;
transform:rotate(38deg) scale(2.6) translateY(-260px);
filter:blur(5px);
}
55%{
opacity:1;
transform:rotate(-4deg) scale(.88) translateY(6px);
filter:blur(0);
}
78%{
transform:rotate(-12deg) scale(1.1);
}
100%{
transform:rotate(0deg) scale(1) translateY(0);
opacity:1;
filter:blur(0);
}
}
.ft-gauge-warp{
transform-origin:center 55%;
animation:ftGaugeWarpIn .68s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
}
/* Transparent cinema variant — during the overlap when loading +
results are both visible, the results overlay needs to be
see-through so the cards/glass exploding behind it remain
visible. Loading's backdrop is providing the dark fill. */
#ftResultsState.ft-cinema-active.ft-cinema-transparent{
background:transparent !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
/* ── Copper glow ring AROUND the gauge border ────────────────
Sits right at the gauge's circular edge — outer + inner box
shadows give a soft copper rim. Fades in after the slam
settles and breathes gently. */
.ft-gauge-wrap::before{
content:'';
position:absolute;
/* Dial in gauge.webp occupies ~3.7% inside the wrap horizontally
and ~2% vertically. Setting inset to match shrinks the ring's
inner diameter so it hugs the dial's actual circular edge. */
inset:2% 3.7%;
border-radius:50%;
background:transparent;
pointer-events:none;
opacity:0;
z-index:0;
transition:opacity 1.1s ease-out;
box-shadow:
0 0 22px 3px rgba(210,120,58,.55),
0 0 48px 10px rgba(210,120,58,.22),
inset 0 0 22px rgba(210,120,58,.32);
}
.ft-gauge-wrap.ft-glow-on::before{
opacity:1;
animation:ftCopperHaloPulse 4.5s ease-in-out infinite 1.1s;
}
@keyframes ftCopperHaloPulse{
0%,100%{ opacity:.7; }
50% { opacity:1; }
}
/* Results cinema layout — flow from the top with a comfortable
offset so the gauge isn't clipped above the fold and the
breakdown table can scroll naturally beneath it. */
#ftResultsState.ft-cinema-active{
justify-content:flex-start !important;
padding-top:10vh !important;
animation:ftCinemaFadeIn .25s ease-out both;
}
#ftResultsState.ft-cinema-active > div{
width:100%;
max-width:min(680px,94vw);
}
/* Pull the price breakdown closer to the gauge in cinema mode —
collapses dead space between the verdict/coin-flip block and
the breakdown table. */
#ftResultsState.ft-cinema-active > div:first-child{
margin-bottom:0 !important;
}
#ftResultsState.ft-cinema-active #ftCoinFlipWrap{
margin-top:8px !important;
}
#ftResultsState.ft-cinema-active #ftCoinResult{
min-height:0 !important;
}
#ftResultsState.ft-cinema-active #ftBreakdown{
margin-top:6px;
}
/* Mobile: center-justify the price breakdown so the SIDE A/B
section labels + side totals + footer note sit in the middle
of the screen. Card-name cells stay left-aligned for
readability; QTY column stays centered; price columns stay
right-aligned (their inline text-align beats the inherited
center via specificity). */
@media(max-width:780px){
#ftResultsState.ft-cinema-active #ftBreakdown{
text-align:center;
}
#ftBreakdownContent > div{
text-align:center !important;
}
#ftBreakdownContent td:first-child{
text-align:left !important;
}
}
/* Cinematic verdict pill — strip the global !important navy bg/
border (defined further down in section 10) so the empty verdict
doesn't paint as a dark bar between the gauge info and coin flip
during the transition. */
#ftResultsState.ft-cinema-active #ftVerdict{
font-family:'Orbitron','Space Mono',monospace;
font-size:1rem;
letter-spacing:.08em;
text-transform:uppercase;
background:transparent !important;
border-color:transparent !important;
}
/* ── HOW IT WORKS modal ─────────────────────────────────────────
Persistent overlay (stays open until the user closes it). */
.ft-howto-overlay{
position:fixed; inset:0;
background:rgba(2,6,16,.78);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
animation:ftCinemaFadeIn .2s ease-out both;
}
.ft-howto-card{
position:relative;
width:min(560px,100%);
max-height:88vh;
overflow:auto;
background:linear-gradient(180deg, #0b1224 0%, #050811 100%);
border:1px solid var(--ft-cyan);
box-shadow:0 0 40px rgba(26,199,160,.25), inset 0 0 20px rgba(26,199,160,.05);
padding:28px 26px 22px;
font-family:'Space Mono','Share Tech Mono',monospace;
color:var(--text);
border-radius:6px;
}
.ft-howto-card::before{
content:'';
position:absolute; left:0; top:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, var(--ft-cyan), transparent);
}
.ft-howto-title{
font-family:'Orbitron','Space Mono',monospace;
font-size:1.05rem;
letter-spacing:.14em;
color:var(--ft-cyan);
margin:0 0 4px;
text-transform:uppercase;
}
.ft-howto-jp{
font-size:.7rem;
color:var(--ft-cyan);
opacity:.75;
letter-spacing:.2em;
margin-bottom:18px;
}
.ft-howto-card h4{
font-family:'Orbitron','Space Mono',monospace;
font-size:.78rem;
letter-spacing:.12em;
color:var(--copper,#D2783A);
margin:14px 0 6px;
text-transform:uppercase;
}
.ft-howto-card p{
font-size:.78rem;
line-height:1.55;
color:var(--text);
margin:0 0 10px;
}
.ft-howto-card .ft-howto-tag{
display:inline-block;
padding:1px 7px;
border:1px solid var(--ft-cyan);
color:var(--ft-cyan);
font-size:.62rem;
letter-spacing:.1em;
margin-right:6px;
vertical-align:middle;
}
.ft-howto-close{
position:absolute; top:10px; right:10px;
width:32px; height:32px;
border:1px solid var(--ft-cyan);
background:transparent;
color:var(--ft-cyan);
font-family:inherit;
font-size:1.1rem;
cursor:pointer;
transition:background .15s,color .15s;
line-height:1;
}
.ft-howto-close:hover{ background:var(--ft-cyan); color:#000; }
.ft-howto-done{
margin-top:18px;
display:block;
width:100%;
padding:10px;
border:1px solid var(--ft-cyan);
background:transparent;
color:var(--ft-cyan);
font-family:inherit;
font-size:.78rem;
letter-spacing:.14em;
cursor:pointer;
transition:background .15s,color .15s;
}
.ft-howto-done:hover{ background:var(--ft-cyan); color:#000; }
/* ── FAIR TRADE — session join notification ── */
@keyframes ftJoinPulse{
0% {box-shadow:0 0 0 0 rgba(26,199,160,.5);border-color:var(--teal)}
60% {box-shadow:0 0 0 10px rgba(26,199,160,0);border-color:var(--teal)}
100%{box-shadow:none;border-color:var(--teal)}
}
.ft-session-joined{animation:ftJoinPulse .9s ease 3;border-color:var(--teal)!important}
/* ── BINDER FRAME — constrained width on desktop, full-width on mobile ── */
.binder-frame{width:100%;position:relative;max-width:860px;margin-left:auto;margin-right:auto}
.binder-frame.all-cards-wide{max-width:1160px}
/* ── BINDER SIDE NAV ARROWS (desktop only) ── */
.binder-nav-arrow{
display:none;position:absolute;top:50%;transform:translateY(-50%);
width:44px;height:80px;background:var(--surface2);border:1px solid var(--border);
color:var(--muted);font-size:1.6rem;cursor:pointer;align-items:center;
justify-content:center;transition:border-color .15s,color .15s,background .15s;
z-index:10;line-height:1;font-family:monospace;padding:0;user-select:none
}
.binder-nav-arrow:hover{border-color:var(--accent);color:var(--accent);background:var(--surface2)}
.binder-nav-arrow:disabled{opacity:.25;cursor:default;pointer-events:none}
@media(min-width:900px){
.binder-nav-arrow{display:flex}
.binder-nav-left{left:-56px}
.binder-nav-right{right:-56px}
}
/* ── BINDER VIEW TOGGLE ── */
.binder-view-toggle{display:flex;gap:6px}
.binder-view-btn{padding:6px 14px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Space Mono','Share Tech Mono',monospace;font-size:.78rem;cursor:pointer;letter-spacing:.04em;transition:all .15s}
.binder-view-btn.active,.binder-view-btn:hover{border-color:var(--accent);color:var(--accent)}
/* ── Compact popover (view-toggle + overflow menu on binder page) ──
z-index intentionally large: the binder body below the controls strip
contains rendered cards / overlays that can reach the 50-100 range
and would otherwise stack over an absolutely-positioned popover. */
.binder-pop{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:170px;background:var(--surface);border:2px solid var(--border);padding:6px 0;z-index:9000;box-shadow:4px 4px 0 var(--shadow,rgba(0,0,0,.5))}
.binder-pop.binder-pop-right{left:auto;right:0}
.binder-pop.open{display:block}
.binder-pop-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;border:none;background:transparent;color:var(--text);font-family:'Space Mono','Share Tech Mono',monospace;font-size:.74rem;letter-spacing:.04em;cursor:pointer;text-align:left;transition:background .1s,color .1s}
.binder-pop-item:hover{background:var(--surface2);color:var(--accent)}
.binder-pop-item.active{color:var(--accent);background:rgba(26,199,160,.06)}
.binder-pop-item.active::after{content:'●';margin-left:auto;font-size:.6rem;color:var(--accent)}
.binder-pop-ico{display:inline-block;width:16px;text-align:center;color:var(--muted);font-size:.85rem;line-height:1}
.binder-pop-item:hover .binder-pop-ico,.binder-pop-item.active .binder-pop-ico{color:inherit}
.binder-pop-empty{padding:10px 14px;color:var(--muted);font-family:'Space Mono','Share Tech Mono',monospace;font-size:.7rem;text-align:center}
/* Trigger affordance — clearly reads as a dropdown. SVG inside the
trigger gets pointer-events:none so clicks always register on the
host