/* ================================================================
   FaajiBet Homepage UI v4
   Full-width, TrendBet-density layout — purple + gold music niche
   ================================================================ */

:root {
    --fb-bg:        #0d0d14;
    --fb-surface:   #13162a;
    --fb-surface2:  #1a1e35;
    --fb-surface3:  #22274a;
    --fb-border:    rgba(255,255,255,.08);
    --fb-purple:    #7c3aed;
    --fb-purple2:   #6d28d9;
    --fb-purple-g:  linear-gradient(135deg,#7c3aed,#5b21b6);
    --fb-gold:      #f5c518;
    --fb-gold2:     #d4a017;
    --fb-green:     #22c55e;
    --fb-red:       #ef4444;
    --fb-text:      #f0f2ff;
    --fb-muted:     #8891a5;
    --fb-radius:    10px;
    --fb-radius-lg: 16px;
    --fb-font-d:    'Sora','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --fb-font:      'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --fb-shadow:    0 4px 24px rgba(0,0,0,.5);
    --fb-header-h:  108px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ================================================================
   GLOBAL SCOPE — page wrapper
   ================================================================ */
.fb-page{
    background:var(--fb-bg);
    color:var(--fb-text);
    font-family:var(--fb-font);
    min-height:100vh;
    width:100%;
}
.fb-page *{font-family:inherit}
.fb-page h1,.fb-page h2,.fb-page h3,.fb-page h4{font-family:var(--fb-font-d);letter-spacing:-.01em}
.fb-page a{text-decoration:none;color:inherit}
.fb-page img{display:block;max-width:100%}

/* Inner content max-width for readability on very wide screens */
.fb-section,.fb-tiles-section,.fb-wins-strip,.fb-ticker-bar{
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
    padding-left:16px;
    padding-right:16px;
}

/* ================================================================
   ICON HELPER
   ================================================================ */
.fb-icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor;vertical-align:-2px;flex-shrink:0}
.fb-icon svg{width:1em;height:1em;display:block}
.fb-icon-xl svg{width:1.8em;height:1.8em}

/* ================================================================
   NOTICE BAR
   ================================================================ */
.fb-notice-bar{
    background:linear-gradient(90deg,var(--fb-purple),#4c1d95);
    padding:0;
    position:relative;
    z-index:1002;
    overflow:hidden;
}
.fb-notice-inner{
    max-width:1440px;
    margin:0 auto;
    padding:8px 40px 8px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    line-height:1.4;
}
.fb-notice-text{color:#fff;flex:1}
.fb-notice-link{color:var(--fb-gold);font-weight:700;text-decoration:underline;margin-left:6px}
.fb-notice-close{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;color:rgba(255,255,255,.7);
    display:flex;align-items:center;padding:4px;
    transition:color .2s;
}
.fb-notice-close:hover{color:#fff}
.fb-notice-bar.hidden{display:none}

/* ================================================================
   STICKY HEADER
   ================================================================ */
#fb-site-header{
    position:fixed;top:0;left:0;right:0;z-index:1020;
}
.fb-header{
    background:rgba(13,13,20,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--fb-border);
}
.fb-header-inner{
    max-width:1440px;
    margin:0 auto;
    padding:0 16px;
    height:56px;
    display:flex;
    align-items:center;
    gap:12px;
}

/* Logo */
.fb-logo{display:flex;align-items:center;gap:6px;text-decoration:none;flex-shrink:0}
.fb-logo-img{height:36px;width:auto}
.fb-logo-text{
    font-family:var(--fb-font-d);
    font-size:22px;
    font-weight:800;
    color:#fff;
    letter-spacing:-.03em;
}
.fb-logo-f{color:var(--fb-gold)}

/* Desktop nav */
.fb-desktop-nav{
    display:flex;
    align-items:center;
    gap:4px;
    flex:1;
    overflow-x:auto;
    scrollbar-width:none;
}
.fb-desktop-nav::-webkit-scrollbar{display:none}
.fb-dn-link{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border-radius:6px;
    font-size:13px;
    font-weight:600;
    color:var(--fb-muted);
    white-space:nowrap;
    transition:color .2s,background .2s;
}
.fb-dn-link:hover,.fb-dn-link.active{color:#fff;background:var(--fb-surface2)}

/* Header right */
.fb-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.fb-header-wallet{
    display:flex;align-items:center;gap:6px;
    background:var(--fb-surface2);border:1px solid var(--fb-border);
    border-radius:8px;padding:6px 12px;
    font-size:13px;font-weight:700;color:var(--fb-gold);
    text-decoration:none;transition:background .2s;
}
.fb-header-wallet:hover{background:var(--fb-surface3)}
.fb-wallet-bal{font-size:14px;font-weight:800}
.fb-header-wallet .fb-icon{color:var(--fb-gold)}

.fb-deposit-btn{
    background:var(--fb-purple-g);
    color:#fff;border:none;border-radius:8px;
    padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer;
    text-decoration:none;white-space:nowrap;
    transition:filter .2s,transform .1s;
    box-shadow:0 2px 12px rgba(124,58,237,.4);
}
.fb-deposit-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}

.fb-notif-wrap,.fb-user-wrap{position:relative}
.fb-notif-btn,.fb-user-btn{
    background:var(--fb-surface2);border:1px solid var(--fb-border);
    border-radius:8px;padding:6px 10px;cursor:pointer;
    display:flex;align-items:center;gap:4px;color:var(--fb-text);
    transition:background .2s;
}
.fb-notif-btn:hover,.fb-user-btn:hover{background:var(--fb-surface3)}
.fb-notif-badge{
    background:var(--fb-red);color:#fff;border-radius:999px;
    font-size:10px;font-weight:700;padding:1px 5px;
    position:absolute;top:-4px;right:-4px;min-width:16px;text-align:center;
}
.fb-avatar{
    width:26px;height:26px;border-radius:50%;
    background:var(--fb-purple-g);color:#fff;
    font-size:12px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;
}
.fb-avatar-lg{width:40px;height:40px;font-size:16px}

/* User dropdown */
.fb-user-dropdown{
    position:absolute;top:calc(100% + 8px);right:0;
    background:var(--fb-surface);border:1px solid var(--fb-border);
    border-radius:var(--fb-radius);min-width:200px;
    box-shadow:var(--fb-shadow);z-index:200;
    opacity:0;pointer-events:none;transform:translateY(-6px);
    transition:opacity .2s,transform .2s;
}
.fb-user-dropdown.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.fb-dropdown-head{padding:14px;border-bottom:1px solid var(--fb-border)}
.fb-dropdown-head strong{display:block;font-size:14px;font-weight:700;color:#fff}
.fb-dropdown-head small{font-size:12px;color:var(--fb-gold);font-weight:700}
.fb-dd-item{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;font-size:13px;color:var(--fb-muted);
    transition:background .15s,color .15s;text-decoration:none;
}
.fb-dd-item:hover{background:var(--fb-surface2);color:#fff}
.fb-dd-div{border-top:1px solid var(--fb-border);margin:4px 0}
.fb-dd-logout:hover{color:var(--fb-red)}

/* Login/Register buttons */
.fb-login-btn{
    background:none;border:1px solid var(--fb-border);border-radius:8px;
    padding:7px 14px;font-size:13px;font-weight:600;color:var(--fb-text);
    text-decoration:none;transition:border-color .2s,background .2s;
}
.fb-login-btn:hover{border-color:rgba(255,255,255,.3);background:var(--fb-surface2)}
.fb-register-btn{
    background:var(--fb-gold);color:#0d0d14;border:none;border-radius:8px;
    padding:7px 16px;font-size:13px;font-weight:800;cursor:pointer;
    text-decoration:none;white-space:nowrap;
    transition:background .2s,transform .1s;
}
.fb-register-btn:hover{background:var(--fb-gold2);transform:translateY(-1px)}

/* Hamburger */
.fb-hamburger{
    display:none;
    background:none;border:1px solid var(--fb-border);border-radius:8px;
    padding:8px;cursor:pointer;flex-direction:column;gap:4px;
}
.fb-hamburger span{display:block;width:18px;height:2px;background:var(--fb-text);border-radius:1px;transition:all .25s}
.fb-hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.fb-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.fb-hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ================================================================
   ICON NAV STRIP
   ================================================================ */
.fb-icon-nav{
    background:rgba(13,13,20,.98);
    border-bottom:1px solid var(--fb-border);
    overflow:hidden;
}
.fb-icon-nav-inner{
    max-width:1440px;
    margin:0 auto;
    padding:0 8px;
}
.fb-inav-swiper{width:100%}
.fb-inav-slide{width:auto!important}
.fb-inav-btn{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:8px 14px;white-space:nowrap;text-decoration:none;
    font-size:11.5px;font-weight:600;color:var(--fb-muted);
    transition:color .2s,border-color .2s;
    border-bottom:2px solid transparent;
    position:relative;
}
.fb-inav-btn:hover,.fb-inav-btn.active{color:#fff;border-bottom-color:var(--fb-purple)}
.fb-inav-btn.active .fb-inav-icon{color:var(--fb-purple)}
.fb-inav-icon{font-size:18px;display:flex;align-items:center;justify-content:center}
.fb-inav-label{text-transform:uppercase;letter-spacing:.4px;font-size:11px}

/* ================================================================
   MOBILE DRAWER
   ================================================================ */
.fb-mobile-drawer{
    position:fixed;top:0;right:-100%;width:min(320px,90vw);height:100%;
    background:var(--fb-surface);border-left:1px solid var(--fb-border);
    z-index:1010;transition:right .3s cubic-bezier(.2,.8,.2,1);
    overflow-y:auto;
}
.fb-mobile-drawer.open{right:0}
.fb-mobile-drawer-inner{padding:16px}
.fb-mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.fb-mobile-logo-text{font-family:var(--fb-font-d);font-size:20px;font-weight:800;color:#fff}
.fb-mobile-close{background:none;border:none;cursor:pointer;color:var(--fb-muted);font-size:20px;display:flex}
.fb-mobile-user{display:flex;align-items:center;gap:12px;padding:16px;background:var(--fb-surface2);border-radius:var(--fb-radius);margin-bottom:12px}
.fb-mobile-user strong{font-size:14px;font-weight:700;color:#fff}
.fb-mobile-user small{font-size:12px;color:var(--fb-gold);font-weight:700}
.fb-mobile-deposit{
    display:block;text-align:center;
    background:var(--fb-purple-g);color:#fff;border-radius:8px;
    padding:11px;font-size:14px;font-weight:700;margin-bottom:16px;text-decoration:none;
}
.fb-mobile-auth{display:flex;gap:8px;margin-bottom:16px}
.fb-mobile-login-btn,.fb-mobile-reg-btn{
    flex:1;text-align:center;padding:10px;border-radius:8px;
    font-size:13px;font-weight:700;text-decoration:none;
}
.fb-mobile-login-btn{border:1px solid var(--fb-border);color:#fff}
.fb-mobile-reg-btn{background:var(--fb-gold);color:#0d0d14}
.fb-mobile-nav{display:flex;flex-direction:column}
.fb-mobile-link{
    display:flex;align-items:center;gap:10px;
    padding:12px 8px;font-size:14px;color:var(--fb-muted);
    border-bottom:1px solid var(--fb-border);text-decoration:none;
    transition:color .2s;
}
.fb-mobile-link:hover{color:#fff}
.fb-mobile-logout:hover{color:var(--fb-red)}
.fb-mobile-divider{border-top:1px solid var(--fb-border);margin:8px 0}

/* Overlay */
.fb-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1009;
    opacity:0;pointer-events:none;transition:opacity .3s;
}
.fb-overlay.show{opacity:1;pointer-events:auto}

/* ================================================================
   HERO CAROUSEL
   ================================================================ */
.fb-hero-wrap{width:100%;position:relative;overflow:hidden;background:var(--fb-bg)}
.fb-hero-swiper{width:100%}
.fb-hero-slide{
    position:relative;
    width:100%;
    min-height:420px;
    display:flex;align-items:flex-end;
    overflow:hidden;
    background:linear-gradient(145deg,#150c30,#2c1157 55%,var(--fb-purple));
}
.fb-hero-slide--default{
    background:linear-gradient(145deg,#0a0415,#1a0840 40%,#4c1d95 80%,#7c3aed);
}
.fb-hero-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform 8s ease;
}
.fb-hero-swiper .swiper-slide-active .fb-hero-img{transform:scale(1.04)}
.fb-hero-scrim{
    position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(8,5,22,.94) 20%,rgba(8,5,22,.6) 55%,rgba(8,5,22,.15) 100%);
}
.fb-hero-content{
    position:relative;z-index:2;
    max-width:1440px;width:100%;
    margin:0 auto;padding:40px 24px 52px;
}
@media(min-width:768px){.fb-hero-content{padding:60px 40px 72px}}
.fb-hero-eyebrow{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11px;font-weight:700;color:var(--fb-green);
    text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;
}
.fb-hero-badge{
    display:inline-block;background:var(--fb-gold);color:#0d0d14;
    border-radius:4px;font-size:10px;font-weight:800;padding:2px 8px;
    letter-spacing:1px;margin-bottom:10px;text-transform:uppercase;margin-left:6px;
}
.fb-hero-title{
    font-family:var(--fb-font-d);
    font-size:clamp(1.9rem,5.5vw,3.4rem);
    font-weight:800;line-height:1.1;color:#fff;
    text-shadow:0 2px 16px rgba(0,0,0,.5);
    margin-bottom:14px;
    max-width:640px;
}
.fb-hero-title span{color:var(--fb-gold)}
.fb-hero-sub{
    font-size:clamp(.95rem,1.8vw,1.1rem);
    color:rgba(255,255,255,.75);max-width:480px;line-height:1.6;margin-bottom:24px;
}
.fb-hero-ctas{display:flex;flex-wrap:wrap;gap:10px}
.fb-hero-cta{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--fb-purple-g);color:#fff;
    border-radius:8px;padding:12px 24px;
    font-size:14px;font-weight:700;
    box-shadow:0 4px 20px rgba(124,58,237,.45);
    text-decoration:none;transition:filter .2s,transform .1s;
}
.fb-hero-cta:hover{filter:brightness(1.1);transform:translateY(-1px)}
.fb-hero-cta--ghost{
    background:rgba(255,255,255,.1);box-shadow:none;
    border:1px solid rgba(255,255,255,.2);
}
.fb-hero-cta--ghost:hover{background:rgba(255,255,255,.18)}
/* Swiper overrides */
.fb-hero-pagination{bottom:16px!important}
.fb-hero-pagination .swiper-pagination-bullet{background:rgba(255,255,255,.5)!important;opacity:1}
.fb-hero-pagination .swiper-pagination-bullet-active{background:var(--fb-gold)!important;width:20px;border-radius:3px}
.fb-hero-prev,.fb-hero-next{
    color:#fff!important;
    --swiper-navigation-size:18px;
    background:rgba(0,0,0,.4);border-radius:50%;
    width:36px!important;height:36px!important;
    top:50%!important;
}
.fb-hero-prev::after,.fb-hero-next::after{font-size:13px!important;font-weight:700}

/* ================================================================
   CATEGORY TILES — horizontal slider (TrendBet-style cards)
   ================================================================ */
.fb-tiles-section{padding-top:14px;padding-bottom:6px}
.fb-tiles-swiper{padding:2px 16px}
.fb-tiles-slide{width:230px}
.fb-cat-tile{
    position:relative;overflow:hidden;
    display:block;height:96px;border-radius:14px;
    text-decoration:none;cursor:pointer;
    background:linear-gradient(115deg,var(--fb-purple-dk,#2a1250) 0%,var(--fb-purple,#7c3aed) 65%,#9d5cf5 100%);
    box-shadow:0 6px 18px rgba(124,58,237,.28);
    transition:transform .18s,box-shadow .18s;
}
.fb-cat-tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(124,58,237,.4)}
.fb-tile-bg{
    position:absolute;top:0;right:-6px;bottom:0;
    height:100%;width:auto;max-width:62%;object-fit:contain;object-position:bottom right;
    filter:drop-shadow(-6px 4px 10px rgba(0,0,0,.35));
    pointer-events:none;
}
.fb-tile-content{
    position:relative;z-index:2;height:100%;
    padding:14px 12px 12px 16px;
    display:flex;flex-direction:column;justify-content:center;gap:3px;
    max-width:64%;
}
.fb-tile-icon{
    width:26px;height:26px;border-radius:7px;
    background:rgba(255,255,255,.16);
    display:flex;align-items:center;justify-content:center;
    color:var(--fb-gold);font-size:15px;margin-bottom:5px;
}
.fb-tile-label{
    font-family:var(--fb-font-d);font-size:14px;font-weight:800;
    color:#fff;line-height:1.15;
    text-transform:uppercase;letter-spacing:.3px;
    text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.fb-tile-sub{font-size:10.5px;color:rgba(255,255,255,.8);font-weight:600;margin-top:2px}

/* ================================================================
   LIVE TICKER
   ================================================================ */
.fb-ticker-bar{
    display:flex;align-items:center;gap:0;
    background:var(--fb-surface);border-top:1px solid var(--fb-border);border-bottom:1px solid var(--fb-border);
    overflow:hidden;height:38px;
    padding-left:0;padding-right:0;
    max-width:100%;
}
.fb-ticker-label{
    display:flex;align-items:center;gap:6px;flex-shrink:0;
    background:var(--fb-purple);color:#fff;
    padding:0 14px;height:100%;
    font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
}
.fb-ticker-track-wrap{flex:1;overflow:hidden;height:100%;position:relative}
.fb-ticker-track{
    display:flex;gap:0;
    animation:fb-ticker 40s linear infinite;
    white-space:nowrap;
    will-change:transform;
    height:100%;align-items:center;
}
.fb-ticker-track:hover{animation-play-state:paused}
@keyframes fb-ticker{
    from{transform:translateX(0)}
    to{transform:translateX(-33.333%)}
}
.fb-ticker-item{
    font-size:12.5px;color:var(--fb-muted);padding:0 28px;flex-shrink:0;
    border-right:1px solid var(--fb-border);
}

/* ================================================================
   RECENT WINS STRIP
   ================================================================ */
.fb-wins-strip{
    display:flex;align-items:center;gap:12px;
    padding-top:10px;padding-bottom:10px;overflow:hidden;
}
.fb-wins-label{
    display:flex;align-items:center;gap:6px;flex-shrink:0;
    font-size:11px;font-weight:800;color:var(--fb-gold);text-transform:uppercase;letter-spacing:.6px;
}
.fb-wins-scroll{
    display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;
}
.fb-wins-scroll::-webkit-scrollbar{display:none}
.fb-win-card{
    display:flex;align-items:center;gap:8px;flex-shrink:0;
    background:var(--fb-surface2);border:1px solid var(--fb-border);
    border-radius:8px;padding:6px 12px;
}
.fb-win-icon{color:var(--fb-gold)}
.fb-win-info strong{display:block;font-size:13px;font-weight:800;color:var(--fb-green)}
.fb-win-info span{font-size:11px;color:var(--fb-muted)}

/* ================================================================
   SECTION LAYOUT
   ================================================================ */
.fb-section{padding:20px 16px 4px;max-width:1440px;margin:0 auto}
.fb-section-head{
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
}
.fb-section-title{
    font-family:var(--fb-font-d);font-size:16px;font-weight:800;
    color:#fff;text-transform:uppercase;letter-spacing:.3px;flex:1;
}
.fb-section-count{
    font-size:12px;font-weight:700;color:var(--fb-muted);
    background:var(--fb-surface2);border-radius:4px;padding:2px 7px;
}
.fb-section-more{
    font-size:12px;font-weight:700;color:var(--fb-purple);
    text-decoration:none;display:flex;align-items:center;gap:2px;
    transition:color .2s;
}
.fb-section-more:hover{color:var(--fb-gold)}
.fb-live-badge{
    display:flex;align-items:center;gap:5px;
    background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);
    border-radius:4px;padding:2px 8px;color:var(--fb-red);font-size:12px;font-weight:700;
}
.fb-live-dot{
    width:7px;height:7px;border-radius:50%;background:var(--fb-red);
    animation:fb-pulse 1.4s ease-in-out infinite;
}
@keyframes fb-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* ================================================================
   CATEGORY FILTER CHIPS
   ================================================================ */
.fb-chips-wrap{margin-bottom:14px;overflow:hidden}
.fb-chips-swiper{width:100%}
.fb-chip{
    background:var(--fb-surface2);border:1px solid var(--fb-border);
    border-radius:999px;padding:6px 14px;
    font-size:12.5px;font-weight:600;color:var(--fb-muted);
    cursor:pointer;white-space:nowrap;
    transition:background .2s,color .2s,border-color .2s;
}
.fb-chip:hover,.fb-chip.active{
    background:var(--fb-purple);border-color:var(--fb-purple);color:#fff;
}

/* ================================================================
   EVENT CARDS
   ================================================================ */
.fb-event-grid{display:flex;flex-direction:column;gap:10px}
.fb-event-card{
    background:var(--fb-surface);border:1px solid var(--fb-border);
    border-radius:var(--fb-radius);overflow:hidden;
    transition:border-color .2s;
}
.fb-event-card:hover{border-color:rgba(124,58,237,.3)}
.fb-event-card-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;cursor:pointer;gap:12px;
}
.fb-event-meta{display:flex;align-items:center;gap:10px}
.fb-event-meta .fb-icon{color:var(--fb-purple);font-size:18px}
.fb-event-title{display:block;font-size:14px;font-weight:700;color:#fff}
.fb-event-cats-count{display:block;font-size:11.5px;color:var(--fb-muted)}
.fb-event-card-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.fb-timer{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--fb-gold)}
.fb-timer .fb-icon{font-size:13px}
.fb-timer-val{font-weight:700;font-family:var(--fb-font-d)}
.fb-event-closed-tag,.fb-closed-tag{
    font-size:11px;font-weight:800;color:var(--fb-red);
    background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);
    border-radius:4px;padding:2px 7px;
}
.fb-toggle-btn{
    background:var(--fb-surface2);border:1px solid var(--fb-border);
    border-radius:6px;padding:6px 12px;font-size:12px;font-weight:700;
    color:var(--fb-muted);cursor:pointer;display:flex;align-items:center;gap:4px;
    transition:background .2s,color .2s;white-space:nowrap;
}
.fb-toggle-btn:hover{background:var(--fb-surface3);color:#fff}
.fb-toggle-arrow{display:inline-flex;transition:transform .25s}
.fb-event-drawer.open .fb-toggle-arrow{transform:rotate(90deg)}

.fb-event-drawer{border-top:1px solid var(--fb-border)}
.fb-cat-section{padding:14px 16px;border-bottom:1px solid var(--fb-border)}
.fb-cat-section:last-child{border-bottom:none}
.fb-cat-section-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:12px;
}
.fb-cat-name{font-size:13px;font-weight:700;color:var(--fb-purple)}
.fb-cat-timer{font-size:12px;color:var(--fb-gold);display:flex;align-items:center;gap:4px}
.fb-cat-closed{font-size:11px;font-weight:700;color:var(--fb-red);background:rgba(239,68,68,.1);border-radius:4px;padding:2px 6px}
.fb-nominees{display:flex;flex-direction:column;gap:8px}
.fb-nominee-row{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:10px 12px;background:var(--fb-surface2);
    border-radius:8px;border:1px solid var(--fb-border);
    transition:border-color .2s;
}
.fb-nominee-row:hover:not(.is-closed){border-color:rgba(124,58,237,.3)}
.fb-nominee-row.is-closed{opacity:.6}
.fb-nominee-info{display:flex;align-items:center;gap:8px;flex:1;min-width:120px}
.fb-nominee-name{font-size:13px;font-weight:600;color:#fff}
.fb-nominee-img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.fb-nominee-odds{font-size:13px;font-weight:800;color:var(--fb-gold);white-space:nowrap}
.fb-bet-form{display:flex;align-items:center;gap:6px}
.fb-stake-input{
    background:var(--fb-bg);border:1px solid var(--fb-border);border-radius:6px;
    padding:6px 10px;font-size:13px;color:#fff;width:100px;
    transition:border-color .2s;
}
.fb-stake-input:focus{border-color:var(--fb-purple);outline:none}
.fb-bet-btn{
    background:var(--fb-purple-g);color:#fff;border:none;border-radius:6px;
    padding:7px 16px;font-size:12.5px;font-weight:800;cursor:pointer;
    display:flex;align-items:center;gap:6px;
    transition:filter .2s;
}
.fb-bet-btn:hover{filter:brightness(1.1)}
.fb-bet-btn:disabled{opacity:.5;cursor:not-allowed}
.fb-btn-spin{
    width:14px;height:14px;border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;border-radius:50%;
    animation:fb-spin .6s linear infinite;
}
@keyframes fb-spin{to{transform:rotate(360deg)}}
.fb-bet-msg{font-size:11.5px;margin-top:2px}
.fb-no-nominees{font-size:12px;color:var(--fb-muted);font-style:italic}

/* ================================================================
   GAME / EVENT RAILS
   ================================================================ */
.fb-rail-nav{display:flex;gap:4px;flex-shrink:0}
.fb-rail-prev,.fb-rail-next{
    background:var(--fb-surface2);border:1px solid var(--fb-border);
    border-radius:6px;width:30px;height:30px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:var(--fb-muted);transition:background .2s,color .2s;
}
.fb-rail-prev:hover,.fb-rail-next:hover{background:var(--fb-surface3);color:#fff}

.fb-rail-swiper{width:100%;overflow:hidden}
.fb-rail-slide{width:180px!important}
@media(max-width:600px){.fb-rail-slide{width:150px!important}}

/* Game card */
.fb-game-card{display:block;text-decoration:none;cursor:pointer}
.fb-game-thumb{
    position:relative;border-radius:var(--fb-radius);overflow:hidden;
    aspect-ratio:5/4;background:var(--fb-surface2);
}
.fb-game-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.fb-game-card:hover .fb-game-thumb img,.fb-game-card:hover .fb-game-thumb-placeholder{filter:brightness(.7)}
.fb-game-thumb-placeholder{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg,var(--fb-surface2),var(--fb-surface3));
    color:var(--fb-purple);transition:filter .3s;
}
.fb-game-badge{
    position:absolute;top:7px;left:7px;
    background:var(--fb-gold);color:#0d0d14;
    border-radius:4px;font-size:9.5px;font-weight:800;padding:2px 7px;
    letter-spacing:.5px;text-transform:uppercase;
}
.fb-badge-live{background:var(--fb-red);color:#fff}
.fb-badge-closed{background:#555;color:#fff}
.fb-game-overlay{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    gap:6px;background:rgba(124,58,237,.75);border-radius:var(--fb-radius);
    font-size:14px;font-weight:700;color:#fff;
    opacity:0;transition:opacity .25s;
}
.fb-game-card:hover .fb-game-overlay{opacity:1}
.fb-game-info{padding:8px 2px 0}
.fb-game-name{display:block;font-size:12.5px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:2px}
.fb-game-tag{display:inline-block;font-size:10px;color:var(--fb-muted);background:var(--fb-surface2);border-radius:4px;padding:1px 6px}
.fb-game-plays{display:inline-block;font-size:10px;color:var(--fb-green);margin-left:4px}

/* Event rail card */
.fb-event-rail-card{cursor:pointer;transition:border-color .2s}
.fb-event-card--highlight{animation:fb-card-flash 1.4s ease}
@keyframes fb-card-flash{
    0%,100%{box-shadow:none}
    15%,45%{box-shadow:0 0 0 3px var(--fb-purple,#7c3aed)}
}
.fb-erc-thumb{
    position:relative;border-radius:var(--fb-radius);overflow:hidden;
    aspect-ratio:5/4;background:var(--fb-surface2);
}
.fb-erc-thumb img{width:100%;height:100%;object-fit:cover}
.fb-erc-thumb-placeholder{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg,var(--fb-surface2),var(--fb-surface3));
    color:var(--fb-purple);
}
.fb-erc-info{padding:8px 2px 0}
.fb-erc-title{display:block;font-size:12.5px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-erc-meta{display:block;font-size:10.5px;color:var(--fb-muted)}
.fb-erc-timer{display:flex;align-items:center;gap:3px;font-size:10.5px;color:var(--fb-gold);margin-top:3px}

/* ================================================================
   FOOTER
   ================================================================ */
.fb-footer{
    background:var(--fb-surface);
    border-top:1px solid var(--fb-border);
    margin-top:40px;
}
.fb-footer-inner{
    max-width:1440px;margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:32px;
    padding:40px 24px 32px;
}
.fb-footer-logo{height:40px;width:auto;margin-bottom:10px}
.fb-footer-site-name{font-family:var(--fb-font-d);font-size:20px;font-weight:800;color:#fff}
.fb-footer-tagline{font-size:13px;color:var(--fb-muted);margin-top:8px;margin-bottom:16px;line-height:1.5}
.fb-footer-social{display:flex;gap:8px;margin-bottom:14px}
.fb-social-btn{
    width:34px;height:34px;border-radius:8px;
    background:var(--fb-surface2);border:1px solid var(--fb-border);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;color:var(--fb-muted);text-decoration:none;
    transition:background .2s,color .2s;
}
.fb-social-btn:hover{background:var(--fb-purple);color:#fff}
.fb-footer-18plus{font-size:11.5px;color:var(--fb-muted);background:rgba(239,68,68,.1);border-radius:6px;padding:6px 10px;border-left:3px solid var(--fb-red)}
.fb-footer-col-title{font-size:12px;font-weight:800;color:var(--fb-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.fb-footer-link{
    display:block;font-size:13px;color:var(--fb-muted);text-decoration:none;
    padding:4px 0;transition:color .2s;line-height:1.7;
}
.fb-footer-link:hover{color:#fff}
.fb-footer-badges{
    max-width:1440px;margin:0 auto;
    border-top:1px solid var(--fb-border);
    padding:24px 24px 20px;text-align:center;
}
.fb-footer-badges-label{font-size:11px;font-weight:700;color:var(--fb-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.fb-footer-badges-row{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}
.fb-footer-badge-img{height:44px;width:auto;opacity:.7;filter:grayscale(.4);transition:opacity .2s}
.fb-footer-badge-img:hover{opacity:1;filter:none}
.fb-footer-bottom{
    max-width:1440px;margin:0 auto;
    border-top:1px solid var(--fb-border);
    padding:16px 24px;
    display:flex;align-items:center;justify-content:space-between;
    font-size:12px;color:var(--fb-muted);
}
.fb-scroll-top{
    background:var(--fb-surface2);border:1px solid var(--fb-border);
    border-radius:8px;padding:6px 12px;font-size:14px;font-weight:700;
    color:var(--fb-muted);cursor:pointer;transition:background .2s,color .2s;
}
.fb-scroll-top:hover{background:var(--fb-purple);color:#fff;border-color:var(--fb-purple)}

/* ================================================================
   RESPONSIVE — TABLET
   ================================================================ */
@media(max-width:1024px){
    .fb-footer-inner{grid-template-columns:1fr 1fr;gap:24px}
    .fb-footer-brand{grid-column:1/-1}
    .fb-tiles-slide{width:210px}
    :root{--fb-header-h:100px}
}

/* ================================================================
   RESPONSIVE — MOBILE
   ================================================================ */
@media(max-width:768px){
    /* Header */
    .fb-desktop-nav{display:none}
    .fb-hamburger{display:flex}
    .fb-header-inner{padding:0 10px;height:52px;gap:6px}
    :root{--fb-header-h:92px}

    /* Free up room so notifications/avatar/hamburger stay on screen —
       these were being pushed off the right edge on mobile before. */
    .fb-header-wallet{display:none}
    .fb-deposit-btn{display:none}
    .fb-header-right{gap:5px}
    .fb-notif-btn,.fb-user-btn,.fb-search-btn{padding:6px 8px}

    /* Hero */
    .fb-hero-slide{min-height:300px}
    .fb-hero-content{padding:28px 16px 40px}
    .fb-hero-title{font-size:clamp(1.5rem,6vw,2.2rem)}

    /* Tiles */
    .fb-tiles-slide{width:188px}
    .fb-cat-tile{height:84px}

    /* Sections */
    .fb-section{padding:16px 12px 4px}

    /* Footer */
    .fb-footer-inner{grid-template-columns:1fr 1fr;padding:28px 16px 24px}
    .fb-footer-bottom{flex-direction:column;gap:10px;text-align:center}
}

@media(max-width:480px){
    .fb-tiles-slide{width:168px}
    .fb-footer-inner{grid-template-columns:1fr}
    .fb-rail-slide{width:140px!important}
    .fb-hero-slide{min-height:260px}
    .fb-hero-ctas{flex-direction:column}
    .fb-hero-cta{justify-content:center}
    .fb-notice-inner{font-size:11.5px;padding-right:32px}
}

/* ================================================================
   UPCOMING EVENTS — LOAD MORE
   ================================================================ */
.fb-event-card.fb-event-extra{display:none}
.fb-events-loadmore-wrap{display:flex;justify-content:center;margin-top:14px}
.fb-events-loadmore{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--fb-surface2);border:1px solid var(--fb-border);color:var(--fb-text);
    border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:700;cursor:pointer;
    transition:background .2s,border-color .2s;
}
.fb-events-loadmore:hover{background:var(--fb-surface3);border-color:rgba(255,255,255,.2)}
.fb-events-loadmore-count{color:var(--fb-muted);font-weight:600}
.fb-events-loadmore-arrow{display:inline-flex;transform:rotate(90deg);transition:transform .2s}
.fb-events-loadmore.fb-loaded .fb-events-loadmore-arrow{transform:rotate(-90deg)}

/* ================================================================
   SEARCH — icon button + slide-down panel
   ================================================================ */
.fb-search-btn{
    background:var(--fb-surface2);border:1px solid var(--fb-border);
    border-radius:8px;padding:6px 10px;cursor:pointer;
    display:flex;align-items:center;color:var(--fb-text);
    transition:background .2s;
}
.fb-search-btn:hover,.fb-search-btn.active{background:var(--fb-surface3)}
.fb-search-panel{
    max-height:0;overflow:hidden;
    background:var(--fb-surface);border-bottom:1px solid transparent;
    transition:max-height .22s ease,border-color .22s ease;
}
.fb-search-panel.open{max-height:90px;border-bottom-color:var(--fb-border)}
.fb-search-panel-inner{
    max-width:1440px;margin:0 auto;padding:10px 16px;
    display:flex;align-items:center;gap:10px;color:var(--fb-muted);
}
.fb-search-panel-inner svg{flex-shrink:0}
#fb-search-input{
    flex:1;background:none;border:none;outline:none;
    color:#fff;font-size:15px;font-family:var(--fb-font-b);
}
#fb-search-input::placeholder{color:var(--fb-muted)}
#fb-search-close{background:none;border:none;color:var(--fb-muted);cursor:pointer;padding:4px;display:flex}
#fb-search-close:hover{color:#fff}
.fb-search-empty{
    max-width:1440px;margin:0 auto;padding:0 16px 12px;
    color:var(--fb-muted);font-size:13px;
}
.fb-search-hidden{display:none!important}


/* ================================================================
   ADMIN BAR COMPENSATION
   ================================================================ */
@media screen and (min-width:783px){
    #wpadminbar~#fb-site-header{top:32px}
}
@media screen and (max-width:782px){
    #wpadminbar~#fb-site-header{top:46px}
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fb-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fb-tile-fx{animation:fb-rise .45s cubic-bezier(.2,.7,.2,1) both}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
    .fb-ticker-track{animation:none}
    .fb-hero-img{transition:none}
    .fb-tile-fx{animation:none}
    .fb-live-dot{animation:none}
}

/* ================================================================
   ADMIN CSS (loaded inline via wp_enqueue_style on admin pages)
   ================================================================ */
/* (Admin styles are in assets/admin.css — see below) */