/* ═══ HOLOGRAPHIC CARD EFFECT ═══ */
.listing-card-img,.browse-card-img,.card-wall-item img{position:relative}
.holo-wrap{position:relative;overflow:hidden}
.holo-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,0.03) 30%,rgba(218,165,32,0.08) 38%,rgba(255,255,255,0.04) 42%,transparent 50%,rgba(59,130,246,0.05) 68%,rgba(218,165,32,0.06) 76%,transparent 85%);background-size:200% 200%;pointer-events:none;opacity:0;transition:opacity .3s;z-index:1}
@media(hover:hover){.holo-wrap:hover::after{opacity:1;animation:holoShift 2.5s ease-in-out infinite}}
@keyframes holoShift{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
/* Rainbow edge glow on high-value cards */
.listing-card.card-rare{border-image:linear-gradient(135deg,#daa520,#c44040,#4e9a3e,#3b82f6,#daa520) 1;animation:rareGlow 4s ease-in-out infinite}
@keyframes rareGlow{0%,100%{box-shadow:0 0 8px rgba(218,165,32,.2)}50%{box-shadow:0 0 20px rgba(218,165,32,.35)}}

/* ═══ ACHIEVEMENT BADGES ═══ */
.badge-shelf{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.achievement{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid var(--border);background:var(--bg-header);color:var(--text-mid);transition:.2s;cursor:default;position:relative}
.achievement:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.achievement .ach-icon{font-size:14px}
.achievement.ach-gold{border-color:var(--gold);background:linear-gradient(135deg,rgba(218,165,32,.1),rgba(218,165,32,.05));color:var(--gold)}
.achievement.ach-platinum{border-color:#a0b0c0;background:linear-gradient(135deg,rgba(160,176,192,.12),rgba(160,176,192,.05));color:#c0d0e0;text-shadow:0 0 8px rgba(160,176,192,.3)}
.achievement.ach-diamond{border-image:linear-gradient(135deg,#58d0f0,#a855f7,#ec4899,#58d0f0) 1;background:linear-gradient(135deg,rgba(88,208,240,.08),rgba(168,85,247,.06));color:#a0d8f0;animation:diamondGlow 3s ease-in-out infinite}
@keyframes diamondGlow{0%,100%{box-shadow:0 0 6px rgba(88,208,240,.15)}50%{box-shadow:0 0 16px rgba(168,85,247,.25)}}
.achievement .ach-tooltip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:10px;font-weight:400;color:var(--text);white-space:nowrap;box-shadow:var(--shadow-lg);z-index:50;pointer-events:none}
.achievement:hover .ach-tooltip{display:block}

/* ═══ WIDGETS — Premium treatment ═══ */
.widget{background:linear-gradient(170deg,var(--bg-panel) 0%,var(--bg-raised) 100%);border:1px solid var(--border-accent,rgba(218,165,32,.1));border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(218,165,32,.05);transition:border-color .2s;flex-shrink:0}
.widget:hover{border-color:rgba(218,165,32,.18)}
.widget-header{background:linear-gradient(180deg,var(--bg-header) 0%,rgba(34,26,18,.3) 100%);border-bottom:1px solid var(--border-accent,rgba(218,165,32,.08));padding:10px 14px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mid);position:relative}
.widget-header::after{content:'';position:absolute;bottom:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(218,165,32,.15),transparent)}
.widget-body{padding:10px 14px}
.widget-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(218,165,32,.06);font-size:12px;transition:all .15s}
.widget-row:last-child{border-bottom:0}
.widget-row:hover{padding-left:4px}
/* Light mode widgets */
html[data-theme="light"] .widget{background:linear-gradient(170deg,var(--bg-panel),var(--bg-raised));border-color:var(--border);box-shadow:var(--shadow);inset:none}
html[data-theme="light"] .widget:hover{border-color:var(--border-light)}
html[data-theme="light"] .widget-header{background:var(--bg-header);border-bottom-color:var(--border)}
html[data-theme="light"] .widget-header::after{background:linear-gradient(90deg,transparent,var(--border),transparent)}
html[data-theme="light"] .widget-row{border-bottom-color:var(--border)}

.section-title{font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--text);display:flex;align-items:center;gap:8px}

.pagination{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin:16px 0}
.pg-btn{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--bg-panel);border:1px solid var(--border);color:var(--text-mid);border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:.15s;padding:0 8px}
.pg-btn:hover{background:var(--bg-hover);border-color:var(--accent);color:var(--text);text-decoration:none}
.pg-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pg-ellipsis{color:var(--text-dim);padding:0 4px}

.stars{color:var(--gold);letter-spacing:1px;font-size:14px}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-dim)}
.empty-state .empty-icon{font-size:40px;margin-bottom:10px}

.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:16px;gap:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:10px 16px;font-size:12px;font-weight:700;color:var(--text-mid);cursor:pointer;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s;white-space:nowrap;min-height:42px;display:flex;align-items:center;letter-spacing:.03em}
.tab:hover{color:var(--text);background:var(--bg-hover)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

.cat-bar{width:4px;border-radius:2px;flex-shrink:0}
.cat-sports{background:var(--accent)}.cat-pokemon{background:var(--gold)}.cat-market{background:var(--green)}
.cat-grading{background:var(--accent-dim)}.cat-showoff{background:var(--red)}.cat-general{background:var(--text-dim)}

#site-footer{background:var(--bg-raised);border-top:1px solid var(--border);padding:24px 20px;text-align:center;color:var(--text-dim);font-size:12px;margin-top:40px}
#site-footer a{color:var(--accent)}

.theme-toggle{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;background:var(--bg-panel);border:1px solid var(--border);box-shadow:var(--shadow);flex-shrink:0;position:relative;overflow:hidden;transition:all .15s}
.theme-toggle:hover{border-color:var(--accent);background:var(--bg-hover)}
.theme-toggle:active{transform:scale(.95)}
.theme-toggle::after{content:var(--theme-icon);display:flex;align-items:center;justify-content:center}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
#page-wrap{grid-template-columns:1fr}
.listings-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
#sidebar{display:none!important}
}
@media(max-width:768px){
/* ═══ TAPATALK-STYLE MOBILE REDESIGN ═══ */

/* -- Core Layout -- */
#hamburger{display:flex}#zen-navbar{display:none}#bottom-nav{display:flex;flex-direction:column}
/* Hamburger — shrink to match icons */
#hamburger{width:34px;height:34px;left:max(8px,var(--safe-left));top:max(6px,var(--safe-top))}
#hamburger span{width:15px}
/* Banner controls — pin top-right, small icons */
.banner-controls{top:max(6px,var(--safe-top));right:max(8px,var(--safe-right));gap:4px}
.banner-controls .zen-bell{width:30px;height:30px;font-size:11px}
.banner-controls .zen-bell i{width:14px!important;height:14px!important}
.banner-controls .theme-toggle{width:30px;height:30px;font-size:10px}
/* Collapse user chip to avatar-only on mobile */
.ub-chip{padding:2px;border-radius:50%;background:transparent;border-color:transparent}
.ub-chip:hover{border-color:var(--accent);background:transparent}
.ub-info{display:none!important}
.ub-avatar{width:30px;height:30px}
/* Shrink logo — leave room for hamburger + controls */
.zen-banner-logo{max-width:160px;padding:8px 0}
.zen-banner-logo img{max-height:85px}
/* User dropdown — slide up from bottom as full-width sheet */
.user-dropdown{position:fixed!important;top:auto!important;bottom:var(--bottom-nav-h,56px)!important;right:0!important;left:0!important;width:100%!important;max-width:100%!important;border-radius:16px 16px 0 0!important;max-height:60vh!important;z-index:9999!important;-webkit-transform:translateZ(0);transform:translateZ(0)}
.user-dropdown.open{display:block!important}
.user-dropdown a{min-height:44px;font-size:15px}
.user-menu{position:static!important}
#user-drop-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;-webkit-tap-highlight-color:transparent}
#page-wrap{padding:10px;gap:10px}

/* -- Stats bar: compact single-line -- */
#stats-bar{background:var(--bg-raised)}
#stats-bar-inner{font-size:10px;gap:10px;padding:4px 12px}
#stats-bar-inner span:nth-child(n+4){display:none}

/* -- Category blocks: card-style on mobile -- */
.cat-block{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:6px}
.cat-head{padding:10px 14px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.cat-head-cols{display:none}
.cat-head-title{font-size:13px}

/* -- Forum rows: Tapatalk card style -- */
.forum-row{padding:12px 14px;gap:12px;border-bottom:1px solid var(--border);min-height:64px;display:flex;align-items:center}
.forum-row:active{background:var(--bg-hover)}
.fr-icon{width:40px;height:40px;font-size:18px;border-radius:10px;flex-shrink:0}
.fr-info{flex:1;min-width:0}
.fr-name{font-size:14px;font-weight:700}
.fr-name a{color:var(--text)}
.fr-desc{font-size:11px;line-height:1.4;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fr-stat{display:none}
.fr-last{display:none}
.fr-subs{margin-top:4px;gap:4px}
.fr-sub-link{font-size:10px;padding:2px 6px}

/* -- Chevron indicator for forum rows -- */
.forum-row::after{content:'›';font-size:18px;color:var(--text-dim);font-weight:300;flex-shrink:0;margin-left:4px}

/* -- Quick Access: scrollable horizontal strip -- */
.quick-row{display:flex;overflow-x:auto;gap:8px;margin-bottom:12px;padding:2px 0;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.quick-row::-webkit-scrollbar{display:none}
.ql-card{min-width:100px;max-width:120px;flex-shrink:0;padding:10px 8px;border-radius:12px}
.ql-icon{font-size:20px;margin-bottom:1px}
.ql-label{font-size:10px;white-space:nowrap}
.ql-sub{display:none}

/* -- Posts: compact mobile layout -- */
.post{grid-template-columns:1fr;border-radius:var(--radius-lg);margin-bottom:8px}
.post-sidebar{flex-direction:row;justify-content:flex-start;padding:10px 14px;gap:10px;border-right:none;border-bottom:1px solid var(--border)}
.post-avatar{width:36px;height:36px}
.post-stats{display:none}
.post-content{padding:12px 14px}
.post-footer{padding:8px 14px}

/* -- Forms: full-width mobile -- */
.form-row-3{grid-template-columns:1fr 1fr}
.form-row-2{grid-template-columns:1fr}

/* -- Listings grid: 2 columns -- */
.listings-grid{grid-template-columns:repeat(2,1fr);gap:8px}

/* -- Thread list on forum.php: touch-friendly rows -- */
.thread-row,.forum-thread-row{padding:12px 14px;min-height:60px}
.thread-row:active,.forum-thread-row:active{background:var(--bg-hover)}

/* -- Bottom nav: enhanced with pill indicator -- */
#bottom-nav{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(22,19,16,.92);border-top:1px solid rgba(255,255,255,.06)}
#bottom-nav-inner{height:56px}
.bnav-item{gap:3px;font-size:9px;letter-spacing:.02em;position:relative;transition:color .2s,transform .15s}
.bnav-item:active{transform:scale(.9)}
.bnav-item .bnav-icon{font-size:22px;transition:transform .2s}
.bnav-item.active .bnav-icon{transform:scale(1.1)}
.bnav-item.active::before{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);width:32px;height:3px;background:var(--accent);border-radius:2px}

/* -- Pull-to-refresh indicator -- */
#ptr-indicator{display:none;position:fixed;top:0;left:0;right:0;z-index:600;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent));background-size:200% 100%;animation:ptrShimmer 1s linear infinite}
@keyframes ptrShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* -- Mobile drawer: wider, app-like -- */
#mobile-drawer{width:min(320px,88vw);padding-top:max(16px,var(--safe-top))}
.drawer-profile{padding:20px 18px 16px}
.drawer-avatar{width:52px;height:52px;box-shadow:0 0 0 3px var(--accent-soft)}
.drawer-username{font-size:16px}
.drawer-link{padding:14px 18px;font-size:15px;gap:14px;min-height:52px;border-radius:0}
.drawer-link:active{background:var(--accent-soft)}
.drawer-section-title{font-size:9px;padding:10px 18px 4px;letter-spacing:.12em}
.drawer-actions-grid{padding:10px 18px;gap:8px}

/* -- Forum rows: inline thread/post badges on mobile -- */
.fr-info::after{content:attr(data-meta);display:none;font-size:10px;color:var(--text-dim);margin-top:2px}
@media(max-width:768px){.fr-info::after{display:block}}

/* -- Collapsible categories on mobile -- */
.cat-head{cursor:pointer;position:relative;padding-right:36px;-webkit-tap-highlight-color:transparent}
.cat-head::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--text-dim);transition:transform .2s}
.cat-block.collapsed .cat-head::after{transform:translateY(-50%) rotate(-90deg)}
.cat-block.collapsed .forum-row{display:none}

/* -- Swipe hint for new users -- */
.mobile-swipe-hint{display:block;text-align:center;font-size:10px;color:var(--text-dim);padding:8px;animation:fadeHint 3s ease forwards}
@keyframes fadeHint{0%,80%{opacity:1}100%{opacity:0;display:none}}

/* -- Bottom nav glow effect on active item -- */
.bnav-item.active{color:var(--accent)}
.bnav-item.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--accent);border-radius:1px;box-shadow:0 0 8px var(--accent-glow)}

/* -- Smooth page entry animation -- */
@keyframes pageSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.vb-main,.vb-wrap,#page-wrap{animation:pageSlideIn .3s ease}

/* -- Mobile search bar on homepage -- */
.mobile-search-bar{display:flex;gap:8px;margin-bottom:12px;padding:0}
.mobile-search-bar input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:24px;color:var(--text);padding:10px 16px;font-size:16px;-webkit-appearance:none}
.mobile-search-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(218,165,32,.25);outline:2px solid var(--accent);outline-offset:1px}
.mobile-search-bar input::placeholder{color:var(--text-dim)}

/* -- Light theme mobile fixes -- */
html[data-theme="light"] #bottom-nav{background:rgba(255,255,255,.95);border-top-color:var(--border)}
html[data-theme="light"] #mobile-drawer{background:var(--bg-panel);box-shadow:4px 0 24px rgba(0,0,0,.1)}
html[data-theme="light"] .drawer-profile{background:linear-gradient(180deg,var(--bg-header) 0%,var(--bg-panel) 100%)}
html[data-theme="light"] .drawer-qs{background:var(--bg-raised)}
html[data-theme="light"] .drawer-action{background:var(--bg-raised)}

/* -- Breadcrumb: compact -- */
.breadcrumb{font-size:11px;padding:6px 0;margin-bottom:4px}

/* -- Panels and widgets on mobile -- */
.panel{border-radius:var(--radius-lg);margin-bottom:8px}
.panel-header{padding:10px 14px;font-size:12px}
.widget{border-radius:var(--radius-lg)}

/* -- Section titles on mobile -- */
.section-title{font-size:15px}

/* -- Hide things that waste mobile space -- */
.tp-cover:not(.has-img){height:60px!important;min-height:60px!important}

/* -- Make alerts full-bleed on mobile -- */
.alert{border-radius:var(--radius);font-size:13px;padding:10px 14px}

/* -- Touch targets: 44px minimum -- */
.btn{min-height:44px}
.like-btn{min-height:44px}
.pg-btn{min-width:44px;height:44px}

/* -- Footer: compact -- */
.vb-stats-block{font-size:11px}
.vb-stats-grid{gap:8px}
.vb-footer-wrap{padding:0 8px}
#site-footer{font-size:11px}
#site-footer p{font-size:10px}
}

/* ═══ SMALL PHONES ═══ */
@media(max-width:400px){
.forum-row{padding:10px 10px}
.fr-icon{width:34px;height:34px;font-size:15px;border-radius:8px}
.fr-name{font-size:13px}
.fr-desc{display:none}
.ql-card{min-width:88px;padding:8px 6px}
.ql-icon{font-size:18px}
.ql-label{font-size:9px}
.listings-grid{grid-template-columns:repeat(2,1fr);gap:6px}
.listing-card-body{padding:8px}
.listing-card-price{font-size:16px}
.drawer-actions-grid{grid-template-columns:repeat(4,1fr);gap:4px}
.drawer-action{padding:8px 2px;font-size:8px}
.drawer-action span{font-size:16px}
}

body.theme-transitioning,body.theme-transitioning *,body.theme-transitioning *::before,body.theme-transitioning *::after{transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease!important}

/* ═══ FOOTER STYLES ═══ */
/* ═══ MODERN FOOTER ═══ */
.zen-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-panel);
    margin-top: 60px;
}
.zen-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 24px;
}
.zen-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.zen-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.zen-footer-brand img {
    width: 140px;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(218,165,32,.2));
}
.zen-footer-tagline {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.6;
    max-width: 280px;
}
.zen-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.zen-footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-header);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mid);
    transition: all .2s;
    text-decoration: none;
}
.zen-footer-social a:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-soft);
}
.zen-footer-col h4 {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text);
    margin: 0 0 16px;
}
.zen-footer-col a {
    display: block;
    font-size: 13px;
    color: var(--text-mid);
    text-decoration: none;
    padding: 4px 0;
    transition: color .15s;
}
.zen-footer-col a:hover {
    color: var(--gold);
}
.footer-pulse-link {
    color: #b060ff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 6px rgba(160,80,255,.3);
    animation: footerPulse 2s ease-in-out infinite;
}
.footer-pulse-link:hover {
    color: #d4b0ff !important;
    text-shadow: 0 0 12px rgba(160,80,255,.5);
}
@keyframes footerPulse {
    0%,100% { text-shadow: 0 0 4px rgba(160,80,255,.2); }
    50% { text-shadow: 0 0 10px rgba(160,80,255,.5); }
}
.footer-battle-link {
    color: #e04050 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 6px rgba(224,64,80,.3);
    animation: footerBattle 2s ease-in-out infinite;
}
.footer-battle-link:hover {
    color: #ff6070 !important;
    text-shadow: 0 0 12px rgba(224,64,80,.5);
}
@keyframes footerBattle {
    0%,100% { text-shadow: 0 0 4px rgba(224,64,80,.2); }
    50% { text-shadow: 0 0 10px rgba(224,64,80,.5); }
}
.footer-packs-link {
    color: #daa520 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 6px rgba(218,165,32,.3);
    animation: footerPacks 2s ease-in-out infinite;
}
.footer-packs-link:hover {
    color: #f0d060 !important;
    text-shadow: 0 0 12px rgba(218,165,32,.5);
}
@keyframes footerPacks {
    0%,100% { text-shadow: 0 0 4px rgba(218,165,32,.2); }
    50% { text-shadow: 0 0 10px rgba(218,165,32,.5); }
}
@media (prefers-reduced-motion: reduce) {
    .footer-pulse-link, .footer-battle-link, .footer-packs-link, .footer-collection-link { animation: none !important; }
}
.footer-collection-link {
    color: #f0ece4 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 6px rgba(240,236,228,.3);
    animation: footerCollection 2s ease-in-out infinite;
}
.footer-collection-link:hover {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(255,255,255,.6);
}
@keyframes footerCollection {
    0%,100% { text-shadow: 0 0 4px rgba(240,236,228,.15); }
    50% { text-shadow: 0 0 12px rgba(255,255,255,.45); }
}
.zen-footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.zen-footer-copy {
    font-size: 12px;
    color: var(--text-dim);
}
.zen-footer-legal {
    display: flex;
    gap: 16px;
    font-size: 12px;
}
.zen-footer-legal a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color .15s;
}
.zen-footer-legal a:hover {
    color: var(--gold);
}
.zen-footer-disclaimer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 20px;
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.7;
    opacity: .7;
}

/* Light mode */
html[data-theme="light"] .zen-footer {
    background: var(--bg-panel);
}
html[data-theme="light"] .zen-footer-brand img {
    content: url('/assets/logo-light-opt.png');
}

/* Responsive */
@media (max-width: 768px) {
    .zen-footer { margin-top: 30px; }
    .zen-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .zen-footer-brand {
        grid-column: 1 / -1;
        text-align: center;
        align-items: center;
    }
    .zen-footer-tagline {
        max-width: 100%;
        text-align: center;
    }
    .zen-footer-social {
        justify-content: center;
    }
    .zen-footer-inner {
        padding: 32px 16px 16px;
    }
    .zen-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .zen-footer-legal {
        justify-content: center;
    }
    .zen-footer-col h4 {
        margin-bottom: 10px;
    }
    .zen-footer-col a {
        padding: 3px 0;
    }
    /* Shrink the version stamp on mobile so it doesn't overlap the copyright line.
       !important overrides the inline styles set on .zen-footer-build in footer.php. */
    .zen-footer-build {
        font-size: 9px !important;
        letter-spacing: .6px !important;
        padding: 1px 5px !important;
        white-space: nowrap;
    }
    .zen-footer-copy {
        line-height: 1.6;
    }
}
@media (max-width: 480px) {
    .zen-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .zen-footer-brand {
        grid-column: 1 / -1;
    }
    .zen-footer-brand img {
        width: 110px;
    }
    .zen-footer-tagline {
        font-size: 12px;
    }
    .zen-footer-col h4 {
        font-size: 11px;
    }
    .zen-footer-col a {
        font-size: 12px;
    }
    .zen-footer-disclaimer {
        font-size: 9px;
        padding: 0 16px 16px;
    }
}

/* ═══ PWA INSTALL BAR ANIMATION ═══ */
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ═══ SKELETON LOADING STATES ═══ */
.skeleton{background:var(--bg-panel);border-radius:var(--radius);overflow:hidden;position:relative}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,var(--bg-hover) 50%,transparent 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:14px;border-radius:4px;margin-bottom:8px;width:80%}
.skeleton-text.short{width:40%}
.skeleton-text.medium{width:60%}
.skeleton-card{aspect-ratio:3/4;border-radius:var(--radius-lg)}
.skeleton-avatar{width:40px;height:40px;border-radius:50%}
.skeleton-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.skeleton-row .skeleton-text{margin-bottom:0;flex:1}
/* ============================================================
   TCG ZEN — Unified Design System
   Merged from zen-premium.css + zen-unified.css
   ============================================================ */

/* ═══ PREMIUM ENHANCEMENTS ═══ */
/* ═══════════════════════════════════════════════════════════════
   TCG ZEN — PREMIUM OVERLAY
   Loaded AFTER header.php inline CSS. Enhances, never replaces.
   Inspired by: Collectr (glass UI), TCGPlayer (marketplace),
   PokeBeach (wide header), Pokemon Center (brand feel)
   ═══════════════════════════════════════════════════════════════ */

/* ── SMOOTH GLOBAL DEFAULTS ── */
::selection { background: rgba(218,165,32,.3); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── ENHANCED BANNER — PokeBeach-style full-width ── */
#site-banner {
  background: radial-gradient(ellipse 80% 120% at 50% 40%, rgba(30,22,12,.95) 0%, var(--bg) 70%) !important;
  border-bottom: 2px solid rgba(218,165,32,.15) !important;
  position: relative;
  overflow: hidden;
}
#site-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 80%, rgba(218,165,32,.06) 0%, transparent 60%);
  pointer-events: none;
}
#site-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(218,165,32,.3) 50%, transparent 90%);
}
.zen-banner-logo img {
  filter: drop-shadow(0 4px 20px rgba(218,165,32,.15));
  transition: filter .4s, transform .4s !important;
}
.zen-banner-logo:hover img {
  filter: drop-shadow(0 8px 30px rgba(218,165,32,.25));
}

/* ── ENHANCED NAVBAR — Polished tab bar ── */
#zen-navbar {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(20,16,10,.92) !important;
  border-bottom-width: 2px !important;
  transition: box-shadow .3s, background .3s !important;
}
#zen-navbar.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
#zen-navbar-inner a {
  position: relative;
  transition: color .2s, background .2s !important;
}
#zen-navbar-inner a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width .25s, left .25s;
}
#zen-navbar-inner a:hover::after,
#zen-navbar-inner a.active::after {
  width: 100%;
  left: 0;
}

/* ── ENHANCED PANELS — Glass Morphism (Collectr-style) ── */
.panel {
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-raised) 100%) !important;
  transition: border-color .25s, box-shadow .25s, transform .25s !important;
}
.panel:hover {
  border-color: var(--border-light) !important;
}
.panel-header {
  background: linear-gradient(180deg, var(--bg-header) 0%, rgba(34,26,18,.5) 100%) !important;
  position: relative;
}
.panel-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

/* ── ENHANCED BUTTONS — Shine + Press ── */
.btn-primary, .btn-gold {
  position: relative !important;
  overflow: hidden !important;
}
.btn-primary::before, .btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.btn-primary:hover::before, .btn-gold:hover::before {
  opacity: 1;
}
.btn-primary:active, .btn-gold:active {
  transform: scale(.97) translateY(0) !important;
}
.btn-ghost {
  transition: all .2s !important;
}
.btn-ghost:hover {
  border-color: var(--border-light) !important;
  box-shadow: 0 0 0 1px var(--border-light);
}

/* ── ENHANCED BADGES — Pill Shape ── */
.badge {
  border-radius: 20px !important;
  padding: 2px 10px !important;
  letter-spacing: .04em !important;
}
.grade-badge {
  border-radius: 6px !important;
  letter-spacing: .05em !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* ── ENHANCED FORM CONTROLS ── */
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(218,165,32,.12) !important;
}

/* ── ENHANCED FORUM ROWS — Smooth hover ── */
.forum-row, .fg-cell, .forum-table tbody tr {
  transition: background .15s, transform .15s !important;
}
@media(hover:hover) {
  .forum-row:hover .fr-icon, .fg-cell:hover .fg-icon, .forum-icon-wrap:hover {
    border-color: var(--accent) !important;
    transform: scale(1.05);
    transition: all .2s !important;
  }
  .forum-name-link:hover, .fg-cell:hover .fg-title {
    color: var(--accent) !important;
  }
}

/* ── ENHANCED THREAD ROWS ── */
.thread-row, .forum-thread-row {
  transition: background .15s !important;
}
.thread-title-link {
  transition: color .15s !important;
}
.thread-title-link:hover {
  color: var(--accent) !important;
}

/* ── ENHANCED POSTS — Premium feel ── */
.post {
  border-radius: var(--radius-lg) !important;
  margin-bottom: 12px !important;
  transition: border-color .2s !important;
}
.post:hover {
  border-color: var(--border-light) !important;
}
.post-avatar {
  transition: border-color .2s, transform .2s !important;
}
.post-avatar:hover {
  border-color: var(--accent) !important;
  transform: scale(1.05);
}
.post-username:hover, .post-username a:hover {
  color: var(--accent) !important;
}

/* ── ENHANCED REACTION BUTTONS ── */
.reaction-chip, .like-btn {
  border-radius: 20px !important;
  transition: all .2s !important;
}
.reaction-chip:hover, .like-btn:hover {
  transform: scale(1.05);
}
.reaction-chip.mine, .like-btn.liked {
  box-shadow: 0 0 8px rgba(218,165,32,.2);
}

/* ── ENHANCED LISTING CARDS — TCGPlayer-style ── */
.listing-card {
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}
@media(hover:hover) {
  .listing-card:hover {
    border-color: rgba(218,165,32,.4) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 20px rgba(218,165,32,.08) !important;
    transform: translateY(-4px) !important;
  }
}
.listing-card-price {
  text-shadow: 0 0 12px rgba(218,165,32,.2);
  transition: text-shadow .2s !important;
}
.listing-card:hover .listing-card-price {
  text-shadow: 0 0 20px rgba(218,165,32,.4);
}
.listing-card-title:hover {
  color: var(--accent) !important;
}

/* ── HOLOGRAPHIC ENHANCEMENT — Stronger effect ── */
.holo-wrap::after {
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(255,255,255,.05) 28%,
    rgba(218,165,32,.12) 36%,
    rgba(255,255,255,.06) 40%,
    transparent 48%,
    rgba(74,143,212,.08) 65%,
    rgba(218,165,32,.1) 74%,
    rgba(138,92,212,.06) 82%,
    transparent 90%
  ) !important;
  background-size: 300% 300% !important;
}

/* ── RARE CARD GLOW — Enhanced ── */
.listing-card.card-rare {
  border-image: linear-gradient(135deg, #daa520, #c44040, #4e9a3e, #3b82f6, #8a5cd4, #daa520) 1 !important;
}

/* ── ENHANCED WIDGETS — Sidebar polish ── */
.widget {
  transition: border-color .2s, box-shadow .2s !important;
}
.widget:hover {
  border-color: var(--border-light) !important;
}
.widget-row {
  transition: background .15s, padding .15s !important;
}
.widget-row:hover {
  background: var(--bg-hover);
  padding-left: 4px;
}
.widget-header {
  position: relative;
}
.widget-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

/* ── ENHANCED TABS ── */
.tab {
  transition: color .2s, background .2s, border-color .2s !important;
  position: relative;
}

/* ── ENHANCED PAGINATION ── */
.pg-btn {
  transition: all .2s !important;
}
.pg-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(218,165,32,.08) !important;
}
.pg-btn.active {
  box-shadow: 0 2px 8px rgba(218,165,32,.25) !important;
}

/* ── TOAST NOTIFICATIONS ── */
#zen-toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.zen-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  min-width: 280px;
  max-width: 400px;
  pointer-events: auto;
  animation: zenToastIn .4s cubic-bezier(.34,1.56,.64,1);
  font-size: 13px;
  color: var(--text);
}
.zen-toast.success { border-left: 3px solid var(--green); }
.zen-toast.error { border-left: 3px solid var(--red); }
.zen-toast.info { border-left: 3px solid var(--accent); }
.zen-toast .zen-toast-close {
  cursor: pointer;
  color: var(--text-dim);
  background: none;
  border: none;
  font-size: 16px;
  padding: 2px 6px;
  margin-left: auto;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.zen-toast .zen-toast-close:hover { color: var(--text); background: var(--bg-hover); }
.zen-toast.removing { animation: zenToastOut .3s ease-in forwards; }
@keyframes zenToastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes zenToastOut { to { opacity: 0; transform: translateX(40px); } }

/* ── MODAL SYSTEM ── */
.zen-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all .25s;
}
.zen-modal-overlay.open { opacity: 1; visibility: visible; }
.zen-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.95);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 9999;
  max-width: 480px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: all .25s;
}
.zen-modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.zen-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: 15px;
}
.zen-modal-body { padding: 20px; }
.zen-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.zen-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--bg-hover);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all .15s;
}
.zen-modal-close:hover { background: var(--red-soft); color: var(--red); }

/* ── LOADING SKELETON ── */
.zen-skeleton {
  background: linear-gradient(90deg, var(--bg-raised) 25%, var(--bg-hover) 50%, var(--bg-raised) 75%);
  background-size: 200% 100%;
  animation: zenShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}
@keyframes zenShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── ACHIEVEMENT BADGES ENHANCEMENT ── */
.achievement {
  transition: all .2s !important;
}
.achievement:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.3) !important;
}

/* ── COLLECTR-STYLE STATS CARDS ── */
.vb-sg-item {
  transition: transform .2s, box-shadow .2s;
  border-radius: var(--radius);
  padding: 8px !important;
}
.vb-sg-item:hover {
  transform: translateY(-2px);
  background: var(--bg-hover);
}

/* ── QUICK ACTION CARDS ENHANCEMENT ── */
.ql-card {
  transition: all .25s !important;
  position: relative;
  overflow: hidden;
}
.ql-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(218,165,32,.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
}
.ql-card:hover::before {
  opacity: 1;
}
.ql-card:hover {
  border-color: var(--accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 12px rgba(218,165,32,.08);
}

/* ── TRAINER HUB ENHANCEMENT ── */
.hp-hub {
  position: relative;
  overflow: hidden;
}
.hp-hub::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(218,165,32,.06) 0%, transparent 50%);
  pointer-events: none;
}

/* ── PROFILE COVER ENHANCEMENT ── */
.tp-cover {
  position: relative;
}
.tp-cover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, var(--bg-panel), transparent);
  pointer-events: none;
}

/* ── ONLINE DOT ENHANCEMENT ── */
.online-dot, #stats-bar .online-dot {
  box-shadow: 0 0 6px rgba(78,154,62,.4);
}

/* ── EMPTY STATE ENHANCEMENT ── */
.empty-state .empty-icon {
  animation: zenFloat 3s ease-in-out infinite;
}
@keyframes zenFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── MOBILE BOTTOM NAV ENHANCEMENT ── */
@media(max-width:768px) {
  #bottom-nav {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    background: rgba(20,16,10,.88) !important;
  }
  .bnav-item.active .bnav-icon {
    filter: drop-shadow(0 0 6px rgba(218,165,32,.4));
  }
  /* Mobile drawer polish */
  #mobile-drawer {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .drawer-avatar {
    box-shadow: 0 0 0 3px rgba(218,165,32,.2) !important;
  }
}

/* ── FOOTER ENHANCEMENT ── */
#site-footer {
  position: relative;
}
#site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218,165,32,.2), transparent);
}

/* ── TEXT GRADIENT UTILITY ── */
.text-gradient-gold {
  background: linear-gradient(135deg, var(--accent), var(--accent-h));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── STAGGER ANIMATION UTILITY ── */
.zen-animate {
  animation: zenSlideUp .4s ease-out both;
}
.zen-animate:nth-child(1) { animation-delay: 0ms; }
.zen-animate:nth-child(2) { animation-delay: 50ms; }
.zen-animate:nth-child(3) { animation-delay: 100ms; }
.zen-animate:nth-child(4) { animation-delay: 150ms; }
.zen-animate:nth-child(5) { animation-delay: 200ms; }
.zen-animate:nth-child(6) { animation-delay: 250ms; }
@keyframes zenSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── ACCESSIBILITY — Reduced Motion Override ── */
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══ UNIFIED OVERRIDES (wins where conflicts exist) ═══ */
/* ═══════════════════════════════════════════════════════════════
   ZEN TCG — UNIFIED DESIGN SYSTEM
   One file to rule them all. Loaded LAST via header.php.
   Brings every component into the same premium TCG card family.

   Design tokens:
     Container bg: linear-gradient(170deg, rgba(26,21,14,.95), rgba(14,10,6,.98))
     Border: rgba(218,165,32,.10)  →  hover: rgba(218,165,32,.25)
     Border-radius: 16px (containers) / 10px (icons) / 6px (badges)
     Shadow: 0 2px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(218,165,32,.05)
     Glow: 0 0 20px rgba(218,165,32,.1)
     Gold accent: #daa520 / var(--gold)
     Separator: rgba(218,165,32,.06)
   ═══════════════════════════════════════════════════════════════ */

/* ── GLOBAL RESETS ── */
::selection{background:rgba(218,165,32,.25);color:#fff}
*{scrollbar-width:thin;scrollbar-color:rgba(218,165,32,.15) rgba(10,8,6,.5)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:rgba(10,8,6,.5)}
::-webkit-scrollbar-thumb{background:rgba(218,165,32,.2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(218,165,32,.35)}

/* ── NAVBAR — Unified glass treatment ── */
#zen-navbar{
  background:linear-gradient(180deg,rgba(20,16,10,.96) 0%,rgba(14,10,6,.98) 100%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(218,165,32,.2);
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
#zen-navbar-inner a{transition:color .2s,background .2s}
#zen-navbar-inner a:hover{background:rgba(218,165,32,.06)}
#zen-navbar-inner a.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ── STATS BAR — Subtle gold separators ── */
#stats-bar{
  background:linear-gradient(180deg,rgba(14,10,6,.9),rgba(10,8,6,.95));
  border-bottom:1px solid rgba(218,165,32,.08);
}

/* ── ALL PANELS — Unified premium card style ── */
.panel{
  background:linear-gradient(170deg,rgba(26,21,14,.95) 0%,rgba(14,10,6,.98) 100%);
  border:1px solid rgba(218,165,32,.1);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(218,165,32,.05);
  transition:border-color .25s,box-shadow .25s;
}
.panel:hover{border-color:rgba(218,165,32,.18)}
.panel-header{
  background:linear-gradient(180deg,rgba(34,26,18,.6) 0%,rgba(26,21,14,.3) 100%);
  border-bottom:1px solid rgba(218,165,32,.08);
  position:relative;
}
.panel-header::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(218,165,32,.12),transparent);
}

/* ── ALL WIDGETS — Same family as panels ── */
.widget{
  background:linear-gradient(170deg,rgba(26,21,14,.95) 0%,rgba(14,10,6,.98) 100%);
  border:1px solid rgba(218,165,32,.1);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(218,165,32,.05);
  transition:border-color .25s;
  flex-shrink:0;
}
.widget:hover{border-color:rgba(218,165,32,.18)}
.widget-header{
  background:linear-gradient(180deg,rgba(34,26,18,.6) 0%,rgba(26,21,14,.3) 100%);
  border-bottom:1px solid rgba(218,165,32,.08);
  padding:10px 14px;
  position:relative;
}
.widget-header::after{
  content:'';position:absolute;bottom:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(218,165,32,.12),transparent);
}
.widget-body{padding:10px 14px}
.widget-row{border-bottom-color:rgba(218,165,32,.06);transition:padding .15s}
.widget-row:hover{padding-left:4px}

/* ── ALL FORUM GRIDS — Unified card container ── */
.forum-grid{
  background:linear-gradient(170deg,rgba(26,21,14,.95) 0%,rgba(14,10,6,.98) 100%);
  border:1px solid rgba(218,165,32,.1);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(218,165,32,.05);
}
.fg-cell{border-bottom-color:rgba(218,165,32,.06);transition:background .2s}
.fg-cell:hover{background:rgba(218,165,32,.04)!important}
.fg-cell:hover .fg-name{color:var(--gold)}
.fg-icon{
  background:linear-gradient(135deg,rgba(218,165,32,.06),rgba(10,8,6,.4));
  border:1px solid rgba(218,165,32,.12);
  border-radius:10px;
  transition:all .25s;
}
.fg-cell:hover .fg-icon{border-color:rgba(218,165,32,.25);box-shadow:0 0 12px rgba(218,165,32,.1);transform:scale(1.05)}
.fg-last-avatar{border-color:rgba(218,165,32,.2)}
.fg-cell:hover .fg-last-avatar{border-color:rgba(218,165,32,.5);box-shadow:0 0 6px rgba(218,165,32,.2)}

/* ── TRAINER HUB ── */
.hp-hub{
  background:linear-gradient(170deg,rgba(26,21,14,.95) 0%,rgba(14,10,6,.98) 100%);
  border:1px solid rgba(218,165,32,.12);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(218,165,32,.06);
}
.hp-hub-xp{background:rgba(46,36,24,.5)}
.hp-hub-xp-fill{box-shadow:0 0 8px rgba(218,165,32,.3)}
.hp-hub-links{border-top-color:rgba(218,165,32,.08)}
.hp-hub-link{border-right-color:rgba(218,165,32,.06);transition:background .2s}
.hp-hub-link:hover{background:rgba(218,165,32,.04)}
.hp-hub-arrow{filter:drop-shadow(0 0 4px rgba(218,165,32,.3))}

/* ── BUTTONS — Unified premium ── */
.btn-primary,.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--accent-dim,#b88c18));
  color:var(--text-inv,#0a0806);
  box-shadow:0 2px 8px rgba(218,165,32,.25);
  border:none;position:relative;overflow:hidden;
}
.btn-primary::before,.btn-gold::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 50%);
  pointer-events:none;opacity:0;transition:opacity .2s;
}
.btn-primary:hover::before,.btn-gold:hover::before{opacity:1}
.btn-primary:hover,.btn-gold:hover{
  box-shadow:0 4px 16px rgba(218,165,32,.4);
  transform:translateY(-1px);
}
.btn-primary:active,.btn-gold:active{transform:scale(.97)}

.btn-ghost{
  background:linear-gradient(170deg,rgba(26,21,14,.8),rgba(14,10,6,.9));
  border:1px solid rgba(218,165,32,.12);
  transition:all .2s;
}
.btn-ghost:hover{
  border-color:rgba(218,165,32,.25);
  background:rgba(218,165,32,.06);
  box-shadow:0 0 8px rgba(218,165,32,.08);
}

/* ── BADGES — Pill shape with glow ── */
.badge{border-radius:20px;letter-spacing:.04em}
.badge-pin,.badge-new,.badge-active,.badge-auction{box-shadow:0 0 6px rgba(218,165,32,.15)}
.badge-hot{box-shadow:0 0 6px rgba(249,115,22,.15)}
.badge-lock,.badge-sold{box-shadow:0 0 6px rgba(196,64,64,.15)}
.grade-badge{border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* ── POSTS — Unified card feel ── */
.post{
  background:linear-gradient(170deg,rgba(26,21,14,.95) 0%,rgba(14,10,6,.98) 100%);
  border:1px solid rgba(218,165,32,.1);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(218,165,32,.05);
  margin-bottom:14px;
  transition:border-color .25s;
}
.post:hover{border-color:rgba(218,165,32,.18)}
.post-sidebar{
  background:linear-gradient(180deg,rgba(34,26,18,.5),rgba(20,16,10,.3));
  border-right-color:rgba(218,165,32,.08);
}
.post-avatar{border-color:rgba(218,165,32,.15);transition:all .2s}
.post-avatar:hover{border-color:rgba(218,165,32,.4);transform:scale(1.05)}

/* ── LISTING CARDS — Premium marketplace ── */
.listing-card{
  background:linear-gradient(170deg,rgba(26,21,14,.95) 0%,rgba(14,10,6,.98) 100%);
  border:1px solid rgba(218,165,32,.1);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.listing-card:hover{
  border-color:rgba(218,165,32,.3);
  box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 20px rgba(218,165,32,.08);
  transform:translateY(-4px);
}
.listing-card-price{text-shadow:0 0 12px rgba(218,165,32,.2)}
.listing-card:hover .listing-card-price{text-shadow:0 0 20px rgba(218,165,32,.4)}

/* ── TABS — Gold underline treatment ── */
.tabs{border-bottom-color:rgba(218,165,32,.12)}
.tab{transition:all .2s}
.tab:hover{background:rgba(218,165,32,.04)}
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ── PAGINATION — Unified ── */
.pg-btn{
  background:linear-gradient(170deg,rgba(26,21,14,.8),rgba(14,10,6,.9));
  border-color:rgba(218,165,32,.1);
  transition:all .2s;
}
.pg-btn:hover{border-color:rgba(218,165,32,.3);color:var(--gold);box-shadow:0 0 8px rgba(218,165,32,.1)}
.pg-btn.active{background:linear-gradient(135deg,var(--gold),var(--accent-dim,#b88c18));border-color:transparent;color:var(--text-inv);box-shadow:0 2px 8px rgba(218,165,32,.3)}

/* ── ALERTS ── */
.alert{border-radius:12px}

/* ── FORM CONTROLS — Gold focus ring ── */
.form-control:focus,input:focus,textarea:focus,select:focus{
  border-color:rgba(218,165,32,.4);
  box-shadow:0 0 0 3px rgba(218,165,32,.1);
}

/* ── BREADCRUMB — Subtle ── */
.breadcrumb a{transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}

/* ── USER CONTROLS — Unified glass ── */
.zen-bell,.theme-toggle{
  background:linear-gradient(170deg,rgba(26,21,14,.8),rgba(14,10,6,.9));
  border-color:rgba(218,165,32,.12);
  transition:all .2s;
}
.zen-bell:hover,.theme-toggle:hover{
  border-color:rgba(218,165,32,.3);
  box-shadow:0 0 10px rgba(218,165,32,.1);
}
.ub-chip{background:linear-gradient(135deg,rgba(26,21,14,.9),rgba(18,14,8,.95));border-color:rgba(218,165,32,.2);transition:all .2s}
.ub-chip:hover{border-color:rgba(218,165,32,.5);box-shadow:0 0 12px rgba(218,165,32,.15)}
.user-dropdown{
  background:linear-gradient(170deg,rgba(26,21,14,.98),rgba(14,10,6,.99));
  border-color:rgba(218,165,32,.15);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 32px rgba(0,0,0,.6);
}
.user-dropdown-header{background:rgba(34,26,18,.5);border-bottom-color:rgba(218,165,32,.08)}
.user-dropdown a:hover{background:rgba(218,165,32,.06)}

/* ── MOBILE DRAWER — Unified ── */
#mobile-drawer{
  background:linear-gradient(180deg,rgba(26,21,14,.98) 0%,rgba(10,8,6,.99) 100%);
  border-right-color:rgba(218,165,32,.1);
}
.drawer-profile{background:linear-gradient(180deg,rgba(34,26,18,.6),rgba(26,21,14,.3));border-bottom-color:rgba(218,165,32,.08)}
.drawer-qs{background:rgba(34,26,18,.4);border-color:rgba(218,165,32,.1)}
.drawer-qs:hover{border-color:rgba(218,165,32,.3);background:rgba(218,165,32,.08)}
.drawer-action{background:rgba(34,26,18,.4);border-color:rgba(218,165,32,.1)}
.drawer-action:active{border-color:rgba(218,165,32,.3);background:rgba(218,165,32,.08)}
.drawer-section{border-bottom-color:rgba(218,165,32,.06)}
.drawer-link:hover,.drawer-link:active{background:rgba(218,165,32,.06)}

/* ── BOTTOM NAV — Glass gold ── */
#bottom-nav{
  background:linear-gradient(180deg,rgba(20,16,10,.94),rgba(10,8,6,.97));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(218,165,32,.1);
}
.bnav-item.active .bnav-icon{filter:drop-shadow(0 0 6px rgba(218,165,32,.4))}

/* ── FOOTER — Premium base ── */
#site-footer{
  background:linear-gradient(180deg,rgba(14,10,6,.95),rgba(10,8,6,.98));
  border-top:1px solid rgba(218,165,32,.1);
  position:relative;
}
#site-footer::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(218,165,32,.2),transparent);
}
.vb-footer-wrap .vb-stats-block{
  background:linear-gradient(170deg,rgba(26,21,14,.95),rgba(14,10,6,.98));
  border-color:rgba(218,165,32,.1);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.vb-stats-head{border-bottom-color:rgba(218,165,32,.1)}

/* ── ACHIEVEMENTS — Gold glow family ── */
.achievement{
  background:linear-gradient(135deg,rgba(34,26,18,.5),rgba(20,16,10,.5));
  border-color:rgba(218,165,32,.12);
  transition:all .25s;
}
.achievement:hover{
  border-color:rgba(218,165,32,.3);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}

/* ── HOLO EFFECT — Enhanced ── */
.holo-wrap::after{
  background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.05) 28%,rgba(218,165,32,.12) 36%,rgba(255,255,255,.06) 40%,transparent 48%,rgba(74,143,212,.08) 65%,rgba(218,165,32,.1) 74%,rgba(138,92,212,.06) 82%,transparent 90%);
  background-size:300% 300%;
}

/* ── CATEGORY LABELS — Gold treatment ── */
.cat-label-title a img{border:1px solid rgba(218,165,32,.15);box-shadow:0 0 8px rgba(218,165,32,.08);border-radius:6px}
.cat-label-title a:hover img{border-color:rgba(218,165,32,.3)}

/* ── FOCUS-VISIBLE — Keyboard accessibility ── */
.fg-cell:focus-within,.listing-card:focus-visible,.tab:focus-visible,.pg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — Override ALL dark hardcoded values
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] #zen-navbar{
  background:linear-gradient(180deg,var(--bg-panel),var(--bg-raised))!important;
  border-bottom-color:var(--border)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:none!important;
}
html[data-theme="light"] #stats-bar{background:var(--bg-raised)!important;border-bottom-color:var(--border)!important}

html[data-theme="light"] .panel,
html[data-theme="light"] .widget,
html[data-theme="light"] .forum-grid,
html[data-theme="light"] .hp-hub,
html[data-theme="light"] .post,
html[data-theme="light"] .listing-card,
html[data-theme="light"] .vb-footer-wrap .vb-stats-block{
  background:linear-gradient(170deg,var(--bg-panel),var(--bg-raised))!important;
  border-color:var(--border)!important;
  box-shadow:var(--shadow)!important;
}
html[data-theme="light"] .panel:hover,
html[data-theme="light"] .widget:hover,
html[data-theme="light"] .post:hover{border-color:var(--border-light)!important}
html[data-theme="light"] .listing-card:hover{border-color:var(--accent)!important;box-shadow:var(--shadow-lg)!important}

html[data-theme="light"] .panel-header,
html[data-theme="light"] .widget-header{background:var(--bg-header)!important;border-bottom-color:var(--border)!important}
html[data-theme="light"] .panel-header::after,
html[data-theme="light"] .widget-header::after{background:linear-gradient(90deg,transparent,var(--border),transparent)}
html[data-theme="light"] .widget-row{border-bottom-color:var(--border)!important}

html[data-theme="light"] .fg-cell{border-bottom-color:var(--border)!important}
html[data-theme="light"] .fg-cell:hover{background:var(--bg-hover)!important}
html[data-theme="light"] .fg-icon{background:var(--bg-raised)!important;border-color:var(--border)!important}
html[data-theme="light"] .fg-cell:hover .fg-icon{border-color:var(--accent)!important;box-shadow:0 0 8px var(--accent-soft)!important}
html[data-theme="light"] .fg-last-avatar{border-color:var(--border)!important}

html[data-theme="light"] .hp-hub-xp{background:var(--border)!important}
html[data-theme="light"] .hp-hub-xp-fill{box-shadow:none!important}
html[data-theme="light"] .hp-hub-links{border-top-color:var(--border)!important}
html[data-theme="light"] .hp-hub-link{border-right-color:var(--border)!important}
html[data-theme="light"] .hp-hub-link:hover{background:var(--bg-hover)!important}
html[data-theme="light"] .hp-hub-arrow{filter:none}

html[data-theme="light"] .post-sidebar{background:var(--bg-header)!important;border-right-color:var(--border)!important}
html[data-theme="light"] .post-avatar{border-color:var(--border)!important}
html[data-theme="light"] .post-avatar:hover{border-color:var(--accent)!important}

html[data-theme="light"] .btn-ghost{background:var(--bg-panel)!important;border-color:var(--border)!important}
html[data-theme="light"] .btn-ghost:hover{background:var(--bg-hover)!important;border-color:var(--border-light)!important;box-shadow:none!important}

html[data-theme="light"] .zen-bell,
html[data-theme="light"] .theme-toggle{background:var(--bg-panel)!important;border-color:var(--border)!important}
html[data-theme="light"] .zen-bell:hover,
html[data-theme="light"] .theme-toggle:hover{border-color:var(--accent)!important;box-shadow:none!important}
html[data-theme="light"] .ub-chip{background:var(--bg-panel)!important;border-color:var(--border)!important}
html[data-theme="light"] .ub-chip:hover{border-color:var(--accent)!important}
html[data-theme="light"] .ub-name{color:var(--text)!important}
html[data-theme="light"] .ub-dd-xp{background:var(--bg)!important;border-color:var(--border)!important}
html[data-theme="light"] .user-dropdown{background:var(--bg-panel)!important;border-color:var(--border)!important;box-shadow:var(--shadow-xl)!important}
html[data-theme="light"] .user-dropdown-header{background:var(--bg-header)!important;border-bottom-color:var(--border)!important}
html[data-theme="light"] .user-dropdown a:hover{background:var(--accent-soft)!important}

html[data-theme="light"] #mobile-drawer{background:var(--bg-panel)!important;border-right-color:var(--border)!important}
html[data-theme="light"] .drawer-profile{background:var(--bg-header)!important;border-bottom-color:var(--border)!important}
html[data-theme="light"] .drawer-qs{background:var(--bg-raised)!important;border-color:var(--border)!important}
html[data-theme="light"] .drawer-action{background:var(--bg-raised)!important;border-color:var(--border)!important}
html[data-theme="light"] .drawer-section{border-bottom-color:var(--border)!important}
html[data-theme="light"] .drawer-link:hover{background:var(--accent-soft)!important}

html[data-theme="light"] #bottom-nav{background:rgba(253,250,244,.95)!important;border-top-color:var(--border)!important;backdrop-filter:blur(8px)!important}
html[data-theme="light"] .bnav-item.active .bnav-icon{filter:none}

html[data-theme="light"] #site-footer{background:var(--bg-raised)!important;border-top-color:var(--border)!important}
html[data-theme="light"] #site-footer::before{background:linear-gradient(90deg,transparent,var(--border),transparent)}
html[data-theme="light"] .vb-stats-head{border-bottom-color:var(--border)!important}

html[data-theme="light"] .pg-btn{background:var(--bg-panel)!important;border-color:var(--border)!important}
html[data-theme="light"] .pg-btn:hover{border-color:var(--accent)!important;box-shadow:none!important}

html[data-theme="light"] .achievement{background:var(--bg-raised)!important;border-color:var(--border)!important}
html[data-theme="light"] .achievement:hover{border-color:var(--accent)!important}

html[data-theme="light"] .cat-label-title a img{border-color:var(--border)!important;box-shadow:none!important}

html[data-theme="light"] .tabs{border-bottom-color:var(--border)!important}

/* ═══ HOMEPAGE VISUAL ENHANCEMENTS ═══ */

/* Section title accent bar */
.hp-section-title{position:relative;display:inline-block;letter-spacing:-.005em!important}
.hp-section-title::before{content:'';position:absolute;left:50%;top:-.16em;transform:translateX(-50%);width:40px;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:2px}

/* Stats number glow */
.hp-stat-num{text-shadow:0 0 30px rgba(218,165,32,.25),0 0 60px rgba(218,165,32,.08)!important}

/* Activity items hover accent */
.hp-activity-item{border-left:3px solid transparent;transition:background .15s,border-color .2s!important}
.hp-activity-item:hover{border-left-color:rgba(218,165,32,.4)!important;background:rgba(218,165,32,.04)!important}

/* Set tile hover enhancement */
.hp-set-tile{transition:border-color .2s,transform .2s,box-shadow .2s!important}
.hp-set-tile:hover{transform:translateY(-3px)!important;box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 1px rgba(218,165,32,.12)!important;border-color:rgba(218,165,32,.3)!important}

/* Trending card gold glow on hover */
.hp-trending-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 20px rgba(218,165,32,.1),0 0 0 1px rgba(218,165,32,.2)!important}

/* Search bar enhanced focus */
.hp-search-bar:focus-within{box-shadow:0 0 0 3px rgba(218,165,32,.12),0 8px 32px rgba(218,165,32,.1),inset 0 1px 0 rgba(255,255,255,.03)!important}

/* Mobile homepage polish */
@media(max-width:768px){
  .hp-section-title::before{width:28px!important}
  .hp-activity-item{border-left-width:2px!important}
  .hp-activity-text{font-size:13px!important}
  .hp-activity-time{font-size:11px!important}
  .hp-trending-card-name{font-size:12px!important}
  .hp-trending-card-price{font-size:13px!important}
}
@media(max-width:480px){
  .hp-section-title{font-size:20px!important}
  .hp-section-sub{font-size:12px!important;margin-bottom:18px!important}
  .hp-search-bar input{padding:12px 14px!important;font-size:14px!important}
  .hp-search-bar button{padding:12px 16px!important;font-size:13px!important}
  .hp-search-popular{font-size:11px!important}
}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ═══════════════════════════════════════════════════════════════
   TCGZen — Cinematic Card Engine 2.0
   Holographic shine, 3D tilt, particle canvas, rarity effects
   ═══════════════════════════════════════════════════════════════ */

/* ── Card Tilt Container ── */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .15s ease-out, box-shadow .3s ease;
}
[data-tilt].tilt-active {
  will-change: transform;
}
[data-tilt]:not(.tilt-active) {
  transition: transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}

/* ── Holographic Shine Overlay ── */
.ce-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .3s ease;
  mix-blend-mode: screen;
  overflow: hidden;
}
[data-tilt]:hover .ce-shine,
[data-tilt].touch-active .ce-shine {
  opacity: 1;
}

/* Shine by rarity */
.ce-shine.ce-shine-holo {
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(218,165,32,.14) 0%,
    rgba(218,165,32,.06) 30%,
    transparent 60%
  );
}
.ce-shine.ce-shine-ultra {
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(168,85,247,.16) 0%,
    rgba(218,165,32,.08) 25%,
    rgba(168,85,247,.04) 45%,
    transparent 65%
  );
}
.ce-shine.ce-shine-secret {
  background:
    radial-gradient(
      circle at var(--shine-x, 50%) var(--shine-y, 50%),
      rgba(255,215,0,.18) 0%,
      rgba(196,64,64,.1) 20%,
      rgba(168,85,247,.12) 40%,
      rgba(64,144,224,.08) 55%,
      transparent 70%
    );
  animation: ce-rainbow-shift 3s linear infinite;
}

@keyframes ce-rainbow-shift {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ── Tilt Glow (border glow that follows tilt) ── */
[data-tilt].tilt-active {
  box-shadow:
    0 var(--tilt-shadow-y, 8px) calc(var(--tilt-shadow-spread, 20px)) rgba(0,0,0,.4),
    0 0 calc(var(--glow-size, 0px)) var(--glow-color, transparent);
}
[data-tilt][data-rarity="holo"].tilt-active {
  --glow-color: rgba(218,165,32,.2);
  --glow-size: 20px;
}
[data-tilt][data-rarity="ultra"].tilt-active {
  --glow-color: rgba(168,85,247,.2);
  --glow-size: 25px;
}
[data-tilt][data-rarity="secret"].tilt-active {
  --glow-color: rgba(218,165,32,.25);
  --glow-size: 30px;
}

/* ── Particle Canvas ── */
#ce-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
}

/* ── Cinematic Dim Overlay (for ultra reveals) ── */
.ce-cinema-dim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9980;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.ce-cinema-dim.active {
  opacity: 1;
}

/* ── Cinematic Pack Rip Enhancements ── */
@keyframes ce-pack-shake {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-2px, 1px) rotate(-0.5deg); }
  20% { transform: translate(2px, -1px) rotate(0.5deg); }
  30% { transform: translate(-1px, -2px) rotate(-0.3deg); }
  40% { transform: translate(1px, 2px) rotate(0.3deg); }
  50% { transform: translate(-1px, 1px); }
  60% { transform: translate(1px, -1px); }
  70% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
  90% { transform: translate(0, -1px); }
}

.ce-rip-anticipation {
  animation: ce-pack-shake .3s ease-in-out;
}

@keyframes ce-light-burst {
  0%   { box-shadow: 0 0 0 rgba(218,165,32,0); opacity: 1; }
  30%  { box-shadow: 0 0 60px rgba(218,165,32,.5), 0 0 120px rgba(218,165,32,.2); }
  100% { box-shadow: 0 0 0 rgba(218,165,32,0); opacity: 0; }
}

.ce-light-burst {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  animation: ce-light-burst .8s ease-out forwards;
}

/* ── Cinematic Stacked Reveal ── */
@keyframes ce-card-emerge {
  0%   { transform: translateY(60px) scale(.85) rotate(3deg); opacity: 0; }
  50%  { transform: translateY(-8px) scale(1.02) rotate(-0.5deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}

.ce-card-enter {
  animation: ce-card-emerge .6s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Ultra/Secret spotlight effect */
@keyframes ce-spotlight {
  0%   { box-shadow: 0 0 0 rgba(168,85,247,0); }
  40%  { box-shadow: 0 0 80px rgba(168,85,247,.4), 0 0 160px rgba(218,165,32,.15); }
  100% { box-shadow: 0 0 30px rgba(168,85,247,.2); }
}

.ce-spotlight-ultra {
  animation: ce-spotlight 1s ease-out;
}

/* God pack chromatic aberration */
@keyframes ce-chromatic {
  0%, 100% { text-shadow: -1px 0 rgba(255,0,0,.3), 1px 0 rgba(0,100,255,.3); }
  25%  { text-shadow: -2px 0 rgba(255,0,0,.4), 2px 0 rgba(0,100,255,.4); }
  50%  { text-shadow: -1px 1px rgba(255,0,0,.3), 1px -1px rgba(0,100,255,.3); }
  75%  { text-shadow: -2px -1px rgba(255,0,0,.4), 2px 1px rgba(0,100,255,.4); }
}

.ce-god-chromatic {
  animation: ce-chromatic .5s ease-in-out infinite;
}

/* God pack star rain container */
@keyframes ce-star-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* ── Elastic Grid Settle ── */
@keyframes ce-grid-settle {
  0%   { transform: translateY(20px) scale(.9); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.ce-grid-enter {
  animation: ce-grid-settle .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Continuous Aura (ultra/secret cards in grid) ── */
@keyframes ce-aura-pulse {
  0%, 100% { box-shadow: 0 0 15px var(--aura-color, rgba(168,85,247,.15)); }
  50%      { box-shadow: 0 0 30px var(--aura-color, rgba(168,85,247,.25)), 0 0 60px rgba(218,165,32,.08); }
}

.ce-aura {
  animation: ce-aura-pulse 3s ease-in-out infinite;
}
.ce-aura-gold { --aura-color: rgba(218,165,32,.2); }
.ce-aura-purple { --aura-color: rgba(168,85,247,.2); }
.ce-aura-rainbow { --aura-color: rgba(218,165,32,.25); animation-name: ce-aura-pulse, ce-rainbow-shift; animation-duration: 3s, 4s; }

/* ═══ LIGHT MODE ═══ */
html[data-theme="light"] .ce-shine.ce-shine-holo {
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(150,100,20,.08) 0%, transparent 55%);
}
html[data-theme="light"] .ce-shine.ce-shine-ultra {
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(120,60,180,.1) 0%, transparent 55%);
}
html[data-theme="light"] [data-tilt].tilt-active {
  box-shadow: 0 var(--tilt-shadow-y, 6px) calc(var(--tilt-shadow-spread, 16px)) rgba(0,0,0,.12);
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
  .ce-shine { display: none !important; }
  #ce-particles { display: none !important; }
  .ce-card-enter, .ce-grid-enter, .ce-spotlight-ultra, .ce-god-chromatic, .ce-aura {
    animation: none !important;
  }
  .ce-rip-anticipation { animation: none !important; }
}
html.a11y-reduce-motion [data-tilt] { transform: none !important; }
html.a11y-reduce-motion .ce-shine { display: none !important; }
html.a11y-reduce-motion #ce-particles { display: none !important; }

/* ============================================================
   HEADER USER BAR — Trainer ID Card (Option A)
   Premium chiclets · tier-colored avatar XP ring · Lv coin
   · holo sweep on pill hover · gold-rim breath badge
   · animated theme-toggle moon · accessibility moved into bar
   ============================================================ */

/* Premium chiclet finish for theme + bell + mail buttons */
.banner-controls .theme-toggle,
.banner-controls .zen-bell {
  background: linear-gradient(170deg, #221a10 0%, #15100a 100%);
  border: 1px solid rgba(218,165,32,.18);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.08), 0 1px 2px rgba(0,0,0,.4);
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .2s, border-color .2s, color .2s;
}
/* Animated underline on hover (added to zen-bell via ::before so we don't
   collide with .theme-toggle's existing ::after content rule) */
.banner-controls .zen-bell::before {
  content: ''; position: absolute;
  left: 50%; bottom: 4px; height: 2px; width: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-50%);
  transition: width .25s ease;
  border-radius: 2px;
  pointer-events: none;
}
.banner-controls .theme-toggle:hover,
.banner-controls .zen-bell:hover {
  color: var(--accent);
  border-color: rgba(218,165,32,.5);
  box-shadow: inset 0 1px 0 rgba(255,220,150,.18), 0 6px 14px rgba(218,165,32,.12), 0 0 0 1px rgba(218,165,32,.15);
  transform: translateY(-1px);
}
.banner-controls .zen-bell:hover::before { width: 60%; }
.banner-controls .theme-toggle:focus-visible,
.banner-controls .zen-bell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.banner-controls .theme-toggle:active,
.banner-controls .zen-bell:active { transform: translateY(0) scale(.96); }

/* Theme-toggle icon rotates on hover (existing rule uses ::after content) */
.banner-controls .theme-toggle::after {
  transition: transform .5s cubic-bezier(.5,1.5,.5,1);
}
.banner-controls .theme-toggle:hover::after {
  transform: rotate(-25deg);
}

/* Notification badge — gold-rim breath pulse */
.notif-badge, .pm-badge {
  background: linear-gradient(180deg, #e8404f 0%, #a82832 100%);
  border: 1.5px solid #ffe080;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 10px rgba(232,64,79,.5);
  animation: ub-breath 3.5s ease-in-out infinite;
}
@keyframes ub-breath {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 8px rgba(232,64,79,.4); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 16px rgba(232,64,79,.7); }
}

/* User pill — Trainer ID with holo sweep */
.banner-controls .ub-chip {
  gap: 10px;
  padding: 4px 12px 4px 4px;
  background: linear-gradient(135deg, rgba(26,21,14,.95), rgba(18,14,8,.98));
  border: 1px solid rgba(218,165,32,.3);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.1), 0 2px 8px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
}
.banner-controls .ub-chip::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,220,150,.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s ease;
  pointer-events: none;
}
.banner-controls .ub-chip:hover {
  border-color: rgba(218,165,32,.55);
  box-shadow: inset 0 1px 0 rgba(255,220,150,.18), 0 4px 16px rgba(218,165,32,.22), 0 0 0 1px rgba(218,165,32,.25);
  transform: translateY(-1px);
}
.banner-controls .ub-chip:hover::before { transform: translateX(100%); }

/* Avatar with tier-colored XP arc ring */
.ub-avatar-wrap {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
}
.ub-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.ub-ring circle {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.ub-ring-bg { stroke: rgba(0,0,0,.5); }
.ub-ring-fg {
  stroke: var(--tier, #daa520);
  filter: drop-shadow(0 0 3px var(--tier, #daa520));
  transition: stroke-dashoffset .5s ease;
}
.banner-controls .ub-avatar-wrap .ub-avatar {
  position: absolute; inset: 3px;
  width: 30px; height: 30px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(0,0,0,.6);
}

/* Hide the old inline Lv. text and show new circular Lv coin */
.ub-lvl { display: none; }
.ub-lvl-circle {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe080, #daa520 60%, #8a6610);
  color: #1a150e;
  font: 900 9px/18px 'JetBrains Mono', monospace;
  text-align: center;
  border: 1px solid #5a3e08;
  box-shadow: 0 0 6px rgba(218,165,32,.4), inset 0 1px 0 rgba(255,255,255,.4);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* XP bar — taller, gradient, shimmer */
.banner-controls .ub-xp-track {
  height: 6px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(218,165,32,.18);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  min-width: 60px; max-width: 90px;
  overflow: hidden;
  position: relative;
}
.banner-controls .ub-xp-fill {
  background: linear-gradient(90deg, #ff7020 0%, #f0a020 30%, #f0c040 60%, #ffe080 100%);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(240,180,40,.7), inset 0 1px 0 rgba(255,255,255,.3);
  position: relative;
  overflow: hidden;
}
.banner-controls .ub-xp-fill::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 4px,
    rgba(255,255,255,.22) 4px, rgba(255,255,255,.22) 7px
  );
  animation: ub-shimmer 2s linear infinite;
}
@keyframes ub-shimmer {
  0% { transform: translateX(-12px); }
  100% { transform: translateX(0); }
}
.banner-controls .ub-xp-num {
  font-size: 9.5px;
  color: #d0b878;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(218,165,32,.3);
}

/* Rank badge — metallic shine sweep */
.ub-name-row .rank-badge {
  position: relative;
  overflow: hidden;
}
.ub-name-row .rank-badge::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: ub-shine 4s ease-in-out infinite 1s;
  pointer-events: none;
}
@keyframes ub-shine {
  0%, 80%, 100% { transform: translateX(-100%); }
  90%           { transform: translateX(100%); }
}

/* Accessibility menu — dropdown anchored to header button
   Uses position:fixed (not absolute) to escape #site-banner's overflow:clip
   and its z-index:200 stacking context. Anchor coords are set by JS on open. */
.a11y-menu { position: relative; display: inline-flex; }
.a11y-menu #a11y-panel {
  position: fixed;
  top: 60px;            /* JS overwrites on open based on button rect */
  right: 12px;
  bottom: auto;
  left: auto;
  z-index: 1000;        /* above navbar (199), banner (200), modals etc. */
}
/* Hide the OLD floating button if any cached page still references it */
#a11y-toggle { display: none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .notif-badge, .pm-badge,
  .banner-controls .ub-xp-fill::after,
  .ub-name-row .rank-badge::after,
  .banner-controls .ub-chip::before,
  .banner-controls .theme-toggle::after {
    animation: none !important;
    transition: none !important;
  }
}
html.a11y-reduce-motion .notif-badge,
html.a11y-reduce-motion .pm-badge,
html.a11y-reduce-motion .banner-controls .ub-xp-fill::after,
html.a11y-reduce-motion .ub-name-row .rank-badge::after,
html.a11y-reduce-motion .banner-controls .ub-chip::before {
  animation: none !important;
}

/* Mobile — keep avatar XP ring visible since username/XP-bar collapse */
@media (max-width: 768px) {
  .banner-controls .ub-chip {
    padding: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .banner-controls .ub-chip::before { display: none; }
  .banner-controls .ub-avatar-wrap { width: 40px; height: 40px; }
  .banner-controls .ub-avatar-wrap .ub-avatar {
    inset: 3px;
    width: 34px; height: 34px;
  }
  .banner-controls .ub-ring circle { stroke-width: 3; }
  /* a11y panel positioning on mobile — full-width sheet */
  .a11y-menu #a11y-panel {
    position: fixed;
    top: auto;
    right: 8px;
    left: 8px;
    width: auto;
    max-width: 320px;
    margin: 0 auto;
    top: 70px;
  }
}