/**
 * ============================================================
 * Free Fire Vietnam - Custom Homepage Styles v4.0.1
 * All overrides for the homepage only
 * Loaded after main style.css
 * ============================================================
 */

/* ============================================================
   0. SKIP TO CONTENT LINK (Accessibility)
   ============================================================ */
/* Hidden by default, only shows when focused with Tab key */
.ff-skip-link,
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #FF6B00;
    color: white;
    padding: 8px 16px;
    z-index: 99999;
    transition: top 0.3s;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}
.ff-skip-link:focus,
.skip-link:focus {
    top: 0;
    outline: 3px solid #FF3D00;
    outline-offset: -3px;
}

/* ============================================================
   SECTION 1: PAGE BACKGROUND & GLOBAL LAYER
   ============================================================ */
body {
    background-color: #fef9f5 !important;
}

/* ============================================================
   GLOBAL SECTION SYSTEM — consistent 24px spacing
   ============================================================ */
.ff-section {
    padding: 24px 0;
}

.ff-section--last {
    padding-bottom: 48px;
}

.ff-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Hero banner — full bleed */
.ff-hero-banner {
    margin-bottom: 0;
}

/* ── Section titles: bolder and larger ── */
.ff-sec-title {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #1F2937 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* ── Section spacing: 24px between all sections ── */
.ff-lookup-sec,
.ff-carousel-sec,
.ff-gift-sec,
.ff-articles-sec,
.ff-quick-sec,
.ff-popguides-sec,
.ff-top3-sec,
.ff-season-sec {
    padding: 24px 0 !important;
}

/* White card inner for stats-card */
.ff-lookup-sec .ff-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-width: 720px;
}

/* Gift section — has its own warm bg */
.ff-gift-sec {
    background: #fef9f5 !important;
}
.ff-gift-sec > .ff-container > .ff-wrap,
.ff-gift-sec .ff-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 24px 24px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Articles */
.ff-articles-sec .ff-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 24px 24px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Quick actions */
.ff-quick-sec .ff-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 24px 24px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ============================================================
   SECTION 2: HERO BANNER
   ============================================================ */
.ff-hero-banner {
    background:
        linear-gradient(135deg, #FF6B00 0%, #FF3D00 100%) !important;
    position: relative;
    overflow: hidden;
    min-height: 180px !important;
}

/* ── Core Banner (above lookup) ── */
.ff-core-banner {
    background: linear-gradient(135deg, #FF6B00 0%, #E55A00 50%, #CC3300 100%);
    padding: 28px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ff-core-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.15) 0%, transparent 70%),
                radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}
.ff-core-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%);
    animation: ff_banner_shimmer 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ff_banner_shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.ff-core-banner__inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}
.ff-core-banner__title {
    font-size: 1.65rem;
    font-weight: 900;
    color: white;
    margin: 0 0 8px;
    line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
    animation: ff_banner_fadein 0.6s ease-out;
}
.ff-core-banner__sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
    animation: ff_banner_fadein 0.6s ease-out 0.15s both;
}
@keyframes ff_banner_fadein {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Quick Tags (below search bar) ── */
.ff-quick-tags {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.ff-quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    background: rgba(255,107,0,0.08);
    border: 1.5px solid rgba(255,107,0,0.2);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #FF6B00;
    cursor: pointer;
    font-family: var(--ff-font, 'Be Vietnam Pro', sans-serif);
    transition: all 0.25s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.ff-quick-tag:hover {
    background: #FF6B00;
    color: white;
    border-color: #FF6B00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,107,0,0.3);
}
.ff-quick-tag:active {
    transform: scale(0.96);
    transition-duration: 0.1s;
}

/* ============================================================
   INTERNAL LINK STYLES (SEO)
   ============================================================ */
.ff-inlink {
    color: #FF6B00;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,107,0,0.3);
    transition: all 0.2s ease;
    cursor: pointer;
}
.ff-inlink:hover {
    color: #E55A00;
    border-bottom-color: #E55A00;
    text-decoration: none;
}
.ff-inlink--gc { color: #22C55E; border-bottom-color: rgba(34,197,94,0.3); }
.ff-inlink--gc:hover { color: #16A34A; border-bottom-color: #16A34A; }
.ff-inlink--stats { color: #3B82F6; border-bottom-color: rgba(59,130,246,0.3); }
.ff-inlink--stats:hover { color: #2563EB; border-bottom-color: #2563EB; }
.ff-inlink--rank { color: #F59E0B; border-bottom-color: rgba(245,158,11,0.3); }
.ff-inlink--rank:hover { color: #D97706; border-bottom-color: #D97706; }
.ff-inlink--esports { color: #8B5CF6; border-bottom-color: rgba(139,92,246,0.3); }
.ff-inlink--esports:hover { color: #7C3AED; border-bottom-color: #7C3AED; }
.ff-inlink--tier { color: #EF4444; border-bottom-color: rgba(239,68,68,0.3); }
.ff-inlink--tier:hover { color: #DC2626; border-bottom-color: #DC2626; }
.ff-inlink--weapon { color: #FF6B00; border-bottom-color: rgba(255,107,0,0.3); }
.ff-inlink--weapon:hover { color: #E55A00; border-bottom-color: #E55A00; }
.ff-inlink--char { color: #8B5CF6; border-bottom-color: rgba(139,92,246,0.3); }
.ff-inlink--char:hover { color: #7C3AED; border-bottom-color: #7C3AED; }
.ff-inlink--guide { color: #10B981; border-bottom-color: rgba(16,185,129,0.3); }
.ff-inlink--guide:hover { color: #059669; border-bottom-color: #059669; }
.ff-inlink--dl { color: #FF6B00; border-bottom-color: rgba(255,107,0,0.3); }
.ff-inlink--dl:hover { color: #E55A00; border-bottom-color: #E55A00; }
.ff-inlink--home { color: #FF6B00; border-bottom-color: rgba(255,107,0,0.3); }
.ff-inlink--home:hover { color: #E55A00; border-bottom-color: #E55A00; }
.ff-article-content .ff-inlink { font-weight: 600; }

/* Noise texture overlay */
.ff-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* Corner decorative icons */
.ff-hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* Top-left: gun */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 8h-3V6h-2V4h-1V3h-2v1h-1v2H9V3H7v1H6V3H4v1H3v2H2v2H1v8h1v2h1v2h18v-2h1v-2h1V8zM6 13H4v-3h2v3zm14 0h-2v-3h2v3z'/%3E%3C/svg%3E") no-repeat 12px 10px,
        /* Top-right: helmet */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 2.76 1.12 5.26 2.93 7.07L12 12l7.07 7.07A9.953 9.953 0 0 0 22 12c0-5.52-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) 10px,
        /* Bottom-left: backpack */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17 4h-1V2h-2v2h-4V2H8v2H7C5.9 4 5 4.9 5 6v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E") no-repeat 12px calc(100% - 10px),
        /* Bottom-right: bullet/ammo */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 5h10v14H7zM9 3h6v2H9zM12 3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) calc(100% - 10px);
    background-size: 28px 28px, 24px 24px, 26px 26px, 22px 22px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 2;
}

.ff-hero-inner {
    position: relative;
    z-index: 3;
}

.ff-hero-slogan {
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2) !important;
    letter-spacing: -0.5px;
    line-height: 1.2 !important;
}

.ff-hero-sub {
    font-size: 1.05rem !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500 !important;
}

.ff-hero-game-name {
    font-size: 1.2rem !important;
    letter-spacing: 3px !important;
}

/* ============================================================
   SECTION 3: LOOKUP CARD
   ============================================================ */

/* The outer section gets white card from Section 1 */

/* The inner stats card */
.ff-stats-card {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 32px 36px !important;
    border: none !important;
    box-shadow:
        0 0 0 1px rgba(255,107,0,0.35),
        0 10px 40px rgba(255,107,0,0.15) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    transition: all 0.3s ease !important;
}

.ff-stats-card:hover {
    box-shadow:
        0 0 0 1.5px rgba(255,61,0,0.4),
        0 14px 48px rgba(255,107,0,0.18) !important;
    transform: translateY(-3px) !important;
}

/* Gradient border via outline trick */
.ff-stats-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(135deg, #FF6B00, #FF3D00);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.ff-stats-card h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

.ff-stats-card > p {
    color: #9CA3AF !important;
    font-size: 0.85rem !important;
    margin-bottom: 22px !important;
}

/* Search bar */
.ff-search-bar {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    background: #fff;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 14px !important;
    padding: 8px 8px 8px 8px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.ff-search-bar:focus-within {
    border-color: #FF6B00 !important;
    box-shadow: 0 0 0 4px rgba(255,107,0,0.12) !important;
}

.ff-search-bar input[type="text"],
.ff-search-bar input {
    flex: 1 !important;
    padding: 16px 18px !important;
    font-size: 1.15rem !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    border: none !important;
    background: transparent !important;
    color: #1F2937 !important;
    outline: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: none !important;
}

.ff-search-bar input::placeholder {
    color: #9CA3AF !important;
}

/* Lookup button */
.ff-search-bar button,
#ff-lookup-btn,
.ff-lookup-btn {
    background: linear-gradient(135deg, #FF6B00, #E55A00) !important;
    color: #fff !important;
    border: none !important;
    padding: 16px 32px !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px rgba(255,107,0,0.35) !important;
    min-height: 52px;
    min-width: 52px;
}

.ff-search-bar button:hover,
#ff-lookup-btn:hover,
.ff-lookup-btn:hover {
    background: linear-gradient(135deg, #FF8533, #FF6B00) !important;
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(255,107,0,0.45) !important;
}

.ff-search-bar button:active,
#ff-lookup-btn:active,
.ff-lookup-btn:active {
    transform: scale(0.97) !important;
    transition-duration: 0.1s !important;
    box-shadow: 0 2px 8px rgba(255,107,0,0.25) !important;
}

/* ============================================================
   SECTION 4: GIFT CODE CARDS — Complete rewrite
   ============================================================ */

/* Card base */
.ff-gift-sec .ff-gc-card {
    border-radius: 12px !important;
    border: none !important;
    padding: 16px 14px 14px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ff-gift-sec .ff-gc-card:hover {
    transform: translateY(-5px) !important;
}

/* ── Per-type gradient backgrounds ── */
.ff-gift-sec .ff-gc-card[data-type="Sự kiện"],
.ff-gift-sec .ff-gc-card[data-type="Garena"] {
    background: linear-gradient(145deg, #FF6B00, #FF3D00) !important;
    box-shadow: 0 4px 16px rgba(255,107,0,0.28) !important;
}
.ff-gift-sec .ff-gc-card:hover[data-type="Sự kiện"],
.ff-gift-sec .ff-gc-card:hover[data-type="Garena"] {
    box-shadow: 0 12px 28px rgba(255,61,0,0.38) !important;
}

.ff-gift-sec .ff-gc-card[data-type="Lễ hội"] {
    background: linear-gradient(145deg, #8E2DE2, #4A00E0) !important;
    box-shadow: 0 4px 16px rgba(142,45,226,0.28) !important;
}
.ff-gift-sec .ff-gc-card:hover[data-type="Lễ hội"] {
    box-shadow: 0 12px 28px rgba(142,45,226,0.38) !important;
}

.ff-gift-sec .ff-gc-card[data-type="Free"],
.ff-gift-sec .ff-gc-card[data-type="VIP"] {
    background: linear-gradient(145deg, #00B4DB, #0083B0) !important;
    box-shadow: 0 4px 16px rgba(0,180,219,0.28) !important;
}
.ff-gift-sec .ff-gc-card:hover[data-type="Free"],
.ff-gift-sec .ff-gc-card:hover[data-type="VIP"] {
    box-shadow: 0 12px 28px rgba(0,180,219,0.38) !important;
}

/* ── Top row: type badge + countdown ── */
.ff-gift-sec .ff-gc-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    min-height: 22px !important;
}

/* Type badge — semi-transparent white pill */
.ff-gift-sec .ff-gc-type {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    border: none !important;
    line-height: 1.6 !important;
}

/* Countdown — yellow bold */
.ff-gift-sec .ff-gc-exp {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #FFD700 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    /* Show clock emoji before text */
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.ff-gift-sec .ff-gc-exp::before {
    content: '' !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin-right: 4px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFB800'/%3E%3Cstop offset='100%25' stop-color='%23D97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='18' fill='none' stroke='url(%23g)' stroke-width='4'/%3E%3Cpath d='M32 20 V32 L42 38' stroke='url(%23g)' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    vertical-align: middle !important;
}

/* "Hoạt động" and "Hết hạn" */
.ff-gift-sec .ff-gc-ok {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.ff-gift-sec .ff-gc-expired {
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
}

/* ── Reward icon ── */
.ff-gift-sec .ff-gc-reward-icon-wrap {
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

.ff-gift-sec .ff-gc-reward-icon-inner {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;
    background: rgba(255,255,255,0.22) !important;
    backdrop-filter: blur(6px) !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* ── Code box + copy button ── */
.ff-gift-sec .ff-gc-box {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(0,0,0,0.28) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 9px !important;
    padding: 7px 7px 7px 10px !important;
    margin-bottom: 8px !important;
}

.ff-gift-sec .ff-gc-code {
    flex: 1 !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    font-family: monospace !important;
    letter-spacing: 1px !important;
    word-break: break-all !important;
    line-height: 1.3 !important;
}

/* Copy button — fits inside box, full width on mobile */
.ff-gift-sec .ff-gc-copy {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 7px !important;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 80px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    box-shadow: none !important;
}

.ff-gift-sec .ff-gc-copy:hover {
    background: rgba(255,255,255,0.5) !important;
    transform: none !important;
    box-shadow: none !important;
}

.ff-gift-sec .ff-gc-copy:active {
    transform: scale(0.96) !important;
}

.ff-gift-sec .ff-copy-label {
    pointer-events: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

/* ── Reward text ── */
.ff-gift-sec .ff-gc-reward {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.95) !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

/* ── Footer row ── */
.ff-gift-sec .ff-gc-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.65rem !important;
    color: rgba(255,255,255,0.65) !important;
    gap: 4px !important;
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
    .ff-gift-sec .ff-gc-card {
        padding: 14px 12px 12px !important;
    }

    .ff-gift-sec .ff-gc-reward-icon-wrap {
        height: 60px !important;
    }

    .ff-gift-sec .ff-gc-reward-icon-inner {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.5rem !important;
    }

    .ff-gift-sec .ff-gc-copy {
        padding: 8px 8px !important;
        min-width: 76px !important;
        font-size: 0.7rem !important;
        border-radius: 6px !important;
    }
}

/* ============================================================
   SECTION 5: ARTICLE & TOURNAMENT CARDS
   ============================================================ */

/* Consistent 12px radius on all cards */
.ff-art-card {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1.5px solid #f0f0f0 !important;
    transition: all 0.3s ease !important;
}

.ff-art-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
    border-color: transparent !important;
}

/* Article image hover zoom */
.ff-art-img {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.ff-art-img img {
    transition: transform 0.3s ease !important;
}

.ff-art-card:hover .ff-art-img img {
    transform: scale(1.05) !important;
}

/* Article title — bold 600, dark gray */
.ff-art-title {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    line-height: 1.45 !important;
}

/* Hot article badge */
.ff-art-hot {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #FF6B00, #E55A00);
    color: white;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(255,107,0,0.4);
    letter-spacing: 0.3px;
}

/* Tournament carousel slide radius */
.ff-tour-slide {
    border-radius: 12px !important;
}

/* Carousel dots — orange */
.ff-carousel-dot {
    background: #E5E7EB !important;
    transition: all 0.3s ease !important;
}

.ff-carousel-dot.active {
    background: #FF6B00 !important;
    width: 22px !important;
    border-radius: 4px !important;
}

/* Carousel slide fade transition */
.ff-tour-slide {
    opacity: 0;
    transition: opacity 0.5s ease !important;
}

.ff-tour-slide.active {
    opacity: 1;
}

/* LIVE indicator — pulsing red */
.ff-live-dot {
    background: #fff !important;
    animation: ff_live_pulse 1.2s ease-in-out infinite !important;
}

.ff-live-overlay-badge {
    background: rgba(220,38,38,0.9) !important;
    animation: ff_live_pulse 1.5s ease-in-out infinite !important;
}

@keyframes ff_live_pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.88); }
}

/* ============================================================
   SECTION 6: MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
    /* Body background */
    body {
        background-color: #fef9f5 !important;
    }

    /* Sections: consistent 16px vertical padding on mobile, full width */
    .ff-section {
        padding: 16px 0;
    }
    .ff-section--last {
        padding-bottom: 32px;
    }

    /* Container: no margin constraints, use section padding */
    .ff-container {
        padding: 0;
    }

    /* All section cards: full width, rounded top/bottom only on first/last */
    .ff-section > .ff-container > .ff-wrap,
    .ff-lookup-sec .ff-wrap,
    .ff-gift-sec .ff-wrap,
    .ff-gift-sec > .ff-container > .ff-wrap,
    .ff-articles-sec .ff-wrap,
    .ff-articles-sec > .ff-container > .ff-wrap,
    .ff-quick-sec .ff-wrap,
    .ff-quick-sec > .ff-container > .ff-wrap,
    .ff-popguides-sec .ff-wrap,
    .ff-popguides-sec > .ff-container > .ff-wrap,
    .ff-top3-sec .ff-wrap,
    .ff-top3-sec > .ff-container > .ff-wrap {
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 20px 16px !important;
        box-shadow: none !important;
    }

    /* Hero banner mobile */
    .ff-hero-banner {
        min-height: 120px !important;
    }

    .ff-hero-inner {
        padding: 14px 16px !important;
        gap: 12px !important;
    }

    .ff-hero-deco {
        display: none !important;
    }

    .ff-hero-slogan {
        font-size: 1.4rem !important;
    }

    .ff-hero-sub {
        font-size: 0.88rem !important;
    }

    /* Section titles on mobile */
    .ff-sec-title {
        font-size: 1.2rem !important;
    }

    .ff-hero-badges {
        gap: 5px !important;
    }

    .ff-hero-badge {
        font-size: 0.62rem !important;
        padding: 3px 8px !important;
    }

    /* Stats card mobile — stacked layout */
    .ff-stats-card {
        padding: 20px 18px !important;
        border-radius: 14px !important;
    }

    .ff-stats-card h2 {
        font-size: 1.15rem !important;
    }

    .ff-search-bar {
        flex-direction: column !important;
        border-radius: 10px !important;
        padding: 8px !important;
        gap: 8px !important;
    }

    .ff-search-bar input[type="text"],
    .ff-search-bar input {
        width: 100% !important;
        padding: 13px 14px !important;
        font-size: 0.95rem !important;
        border-radius: 8px !important;
    }

    .ff-search-bar button,
    #ff-lookup-btn,
    .ff-lookup-btn {
        width: 100% !important;
        padding: 15px !important;
        font-size: 0.98rem !important;
        min-height: 48px !important;
        border-radius: 8px !important;
    }

    /* Gift cards mobile */
    .ff-gc-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .ff-gc-card {
        padding: 14px 12px 12px !important;
    }

    .ff-gc-copy {
        width: 100% !important;
        min-width: unset !important;
        padding: 10px 12px !important;
        font-size: 0.75rem !important;
        min-height: 44px !important;
    }

    .ff-gc-reward-icon-wrap {
        height: 60px !important;
    }

    .ff-gc-reward-icon-inner {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.6rem !important;
    }

    /* Articles grid mobile — single column */
    .ff-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ff-art-img {
        height: 140px !important;
    }

    .ff-art-body {
        padding: 12px !important;
    }

    .ff-art-title {
        font-size: 0.88rem !important;
    }

    /* Tournament carousel mobile */
    .ff-tour-slide {
        min-height: 170px !important;
        padding: 18px 18px !important;
    }

    .ff-tour-slide-title {
        font-size: 1.15rem !important;
    }

    /* Quick actions mobile */
    .ff-quick-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* All buttons min 48px height on mobile */
    .ff-sec-link {
        padding: 12px 16px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .ff-filter-tab {
        padding: 10px 14px !important;
        min-height: 44px !important;
        font-size: 0.78rem !important;
    }
}

@media (max-width: 400px) {
    .ff-gc-grid {
        grid-template-columns: 1fr !important;
    }

    .ff-hero-slogan {
        font-size: 1.1rem !important;
    }
}

/* ============================================================
   GLOBAL: ALL HOVER EFFECTS SMOOTH
   ============================================================ */

/* Apply smooth transition to everything interactive */
.ff-art-card a,
.ff-art-card,
.ff-gc-card,
.ff-gc-copy,
.ff-sec-link,
.ff-filter-tab,
.ff-tour-slide,
.ff-hero-btn,
.ff-poster-btn,
.ff-poster-dl-btn,
.ff-share-btn,
.ff-quick-card {
    transition: all 0.3s ease !important;
}

/* ============================================================
   NAV: WORDPRESS CURRENT-MENU-ITEM HIGHLIGHT
   WP automatically adds these classes to the correct items
   ============================================================ */

/* Current page link — orange text */
.ff-desktop-nav__item.current-menu-item > .ff-desktop-nav__link,
.ff-desktop-nav__item.current-menu-ancestor > .ff-desktop-nav__link {
    color: var(--ff-primary) !important;
    font-weight: 700;
}

/* Gift Code pill: when active, fill with orange */
.ff-desktop-nav__item--highlight.current-menu-item .ff-desktop-nav__link,
.ff-desktop-nav__item--highlight.current-menu-ancestor .ff-desktop-nav__link {
    background: var(--ff-primary) !important;
    color: #fff !important;
    border-radius: var(--ff-radius-full) !important;
}

/* Dropdown parent when child is active — keep arrow & color */
.ff-desktop-nav__item--has-sub.current-menu-ancestor > .ff-desktop-nav__link--dropdown,
.ff-desktop-nav__item--has-sub.current-menu-parent > .ff-desktop-nav__link--dropdown {
    color: var(--ff-primary) !important;
}

/* Submenu item active */
.ff-desktop-nav__sublink.current-menu-item {
    background: rgba(255,107,0,0.08) !important;
    color: var(--ff-primary) !important;
}

/* Mobile nav — current item highlight */
.ff-mob-nav .current-menu-item > .ff-mob-nav__link,
.ff-mob-nav__link:hover {
    color: var(--ff-primary) !important;
    background: rgba(255,107,0,0.08) !important;
}

.ff-mob-nav__link--primary.current-menu-item {
    background: var(--ff-primary) !important;
    color: #fff !important;
}

/* Hamburger menu animation */
.ff-nav-toggle,
.ff-mob-hamburger {
    transition: all 0.3s ease !important;
}

.ff-mob-nav {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ============================================================
   TOP 3 PLAYERS SECTION
   ============================================================ */
.ff-top3-sec-wrap {
    padding: 0 0 28px;
}

.ff-top3-sec .ff-wrap {
    max-width: 900px;
}

.ff-top3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ff-top3-card {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ff-top3-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.ff-top3-card--top {
    border: 2px solid #FF6B00;
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
}

.ff-top3-card--top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF6B00, #FF3D00);
}

.ff-top3-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
}

.ff-top3-medal {
    font-size: 2rem;
    line-height: 1;
}

.ff-top3-pos {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6B7280;
}

.ff-top3-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ff-top3-avatar-icon {
    font-size: 1.6rem;
    font-weight: 900;
    color: white;
    line-height: 1;
}

.ff-top3-rank-badge {
    font-size: 0.5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ff-top3-info {
    width: 100%;
}

.ff-top3-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1F2937;
    margin: 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-top3-stats {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.ff-top3-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.ff-top3-stat-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ff-top3-stat-val {
    font-size: 0.8rem;
    font-weight: 800;
    color: #FF6B00;
}

.ff-top3-rank-name {
    font-size: 0.65rem;
    color: #6B7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-top3-link {
    position: absolute;
    inset: 0;
    z-index: 5;
}

/* ============================================================
   QUICK GUIDES SECTION
   ============================================================ */
.ff-quick-guides-sec-wrap {
    padding: 0 0 28px;
}

.ff-guides-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ff-guide-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: white;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    border: 1.5px solid transparent;
}

.ff-guide-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: #FF6B00;
}

.ff-guide-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.ff-guide-body {
    flex: 1;
    min-width: 0;
}

.ff-guide-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1F2937;
    margin: 0 0 5px;
    line-height: 1.3;
}

.ff-guide-desc {
    font-size: 0.78rem;
    color: #6B7280;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ff-guide-arrow {
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    opacity: 0.6;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.ff-guide-card:hover .ff-guide-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}

/* ============================================================
   RESPONSIVE - NEW SECTIONS
   ============================================================ */
@media (max-width: 768px) {
    .ff-top3-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .ff-top3-card {
        padding: 14px 10px;
    }

    .ff-top3-avatar {
        width: 48px;
        height: 48px;
    }

    .ff-top3-avatar-icon {
        font-size: 1.2rem;
    }

    .ff-top3-name {
        font-size: 0.8rem;
    }

    .ff-top3-stat-val {
        font-size: 0.72rem;
    }

    .ff-guides-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .ff-top3-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .ff-top3-card {
        padding: 12px 8px;
    }

    .ff-top3-medal {
        font-size: 1.5rem;
    }

    .ff-top3-avatar {
        width: 40px;
        height: 40px;
    }

    .ff-top3-avatar-icon {
        font-size: 1rem;
    }

    .ff-top3-rank-badge {
        display: none;
    }

    .ff-top3-name {
        font-size: 0.72rem;
    }

    .ff-top3-stat-label {
        display: none;
    }

    .ff-top3-stat-val {
        font-size: 0.7rem;
    }

    .ff-top3-stats {
        flex-direction: column;
        gap: 2px;
    }

    .ff-top3-pos {
        font-size: 0.55rem;
    }
}

@media (max-width: 380px) {
    .ff-top3-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ============================================================
   SEASON STATS SECTION
   ============================================================ */
.ff-season-sec-wrap {
    padding: 0 0 28px;
}

.ff-season-sec .ff-wrap {
    max-width: 960px;
}

.ff-season-subhead {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ff-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0 12px;
    display: flex;
    align-items: center;
}

/* Weapons Grid */
.ff-season-weapons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.ff-season-weapon-card {
    background: white;
    border-radius: 12px;
    padding: 14px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    border: 1.5px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ff-season-weapon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-color: var(--ff-primary);
}

.ff-season-weapon-card--top {
    border-color: #FFD700;
    background: linear-gradient(135deg, #fffdf0 0%, #ffffff 100%);
}

.ff-season-rank-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 900;
    color: white;
    letter-spacing: 0;
}

.ff-season-wicon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ff-season-wicon-img {
    width: 60px !important;
    height: 60px !important;
}

.ff-season-weapon-name {
    font-size: 0.8rem;
    font-weight: 800;
    color: #1F2937;
    line-height: 1.2;
}

.ff-season-tier-badge {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

.ff-season-wstats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.68rem;
    color: var(--ff-text-muted);
}

.ff-season-wstats strong {
    font-weight: 700;
}

/* Characters Grid */
.ff-season-chars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ff-season-char-card {
    background: white;
    border-radius: 14px;
    padding: 20px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    border: 1.5px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ff-season-char-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    border-color: var(--ff-primary);
}

.ff-season-char-card--top {
    border-color: #FFD700;
    background: linear-gradient(135deg, #fffdf5 0%, #ffffff 100%);
}

.ff-season-cicon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ff-season-cicon-img {
    width: 72px !important;
    height: 72px !important;
}

.ff-season-char-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1F2937;
}

.ff-season-char-skill {
    font-size: 0.72rem;
    color: var(--ff-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.ff-season-cstats {
    font-size: 0.72rem;
    color: var(--ff-text-muted);
    margin-top: 2px;
}

.ff-season-cstats strong {
    font-weight: 700;
}

/* Scroll reveal for new grids */
.ff-season-weapons,
.ff-season-chars,
.ff-top3-grid,
.ff-guides-grid {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ff-season-weapons.ff-visible,
.ff-season-chars.ff-visible,
.ff-top3-grid.ff-visible,
.ff-guides-grid.ff-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .ff-season-weapons {
        grid-template-columns: repeat(3, 1fr);
    }

    .ff-season-chars {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .ff-season-char-card {
        padding: 14px 8px;
    }
}

@media (max-width: 640px) {
    .ff-season-weapons {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .ff-season-wicon {
        width: 48px;
        height: 48px;
    }

    .ff-season-wicon-img {
        width: 48px !important;
        height: 48px !important;
    }

    .ff-season-char-card {
        padding: 12px 6px;
    }

    .ff-season-cstats,
    .ff-season-char-skill {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .ff-season-chars {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .ff-season-cicon {
        width: 56px;
        height: 56px;
    }

    .ff-season-cicon-img {
        width: 56px !important;
        height: 56px !important;
    }

    .ff-season-char-name {
        font-size: 0.78rem;
    }
}

/* ============================================================
   MODE BREAKDOWN SECTION (stats-card.php)
   ============================================================ */
.ff-mode-section {
    margin-top: 20px;
    background: white;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.ff-mode-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ff-mode-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.ff-mode-tab {
    padding: 7px 16px;
    border: 1.5px solid #E5E7EB;
    border-radius: 999px;
    background: white;
    color: var(--ff-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--ff-font);
}

.ff-mode-tab.active,
.ff-mode-tab:hover {
    background: var(--ff-primary);
    color: white;
    border-color: var(--ff-primary);
}

.ff-mode-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ff-mode-card {
    background: #F9FAFB;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    transition: all 0.25s ease;
    border: 1px solid #F3F4F6;
}

.ff-mode-card:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #E5E7EB;
}

.ff-mode-card__icon {
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.ff-mode-card__val {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--ff-primary);
}

.ff-mode-card__label {
    font-size: 0.65rem;
    color: var(--ff-text-muted);
    font-weight: 600;
    margin-top: 4px;
}

/* ============================================================
   WEAPONS SECTION (stats-card.php)
   ============================================================ */
.ff-weapons-section {
    margin-top: 16px;
    background: white;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.ff-weapons-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ff-weapons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ff-weapon-card {
    background: #F9FAFB;
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid #F3F4F6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ff-weapon-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    border-color: var(--ff-primary);
}

.ff-weapon-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 900;
    color: white;
}

.ff-weapon-icon-wrap {
    width: 56px;
    height: 56px;
}

.ff-weapon-icon-wrap img {
    width: 56px !important;
    height: 56px !important;
}

.ff-weapon-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1F2937;
}

.ff-weapon-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.68rem;
    color: var(--ff-text-muted);
}

.ff-weapon-stats strong {
    font-weight: 700;
}

/* ============================================================
   GEAR SECTION (stats-card.php) - Character & Pet
   ============================================================ */
.ff-gear-section {
    margin-top: 16px;
    background: white;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.ff-gear-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ff-gear-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ff-gear-card {
    background: #F9FAFB;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.25s ease;
    border: 1px solid #F3F4F6;
}

.ff-gear-card:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #E5E7EB;
}

.ff-gear-card__icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.ff-gear-card__icon img {
    width: 56px !important;
    height: 56px !important;
}

.ff-gear-card__info {
    flex: 1;
    min-width: 0;
}

.ff-gear-card__name {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1F2937;
}

.ff-gear-card__desc {
    font-size: 0.7rem;
    color: var(--ff-text-muted);
    margin-top: 2px;
}

.ff-gear-card__label {
    font-size: 0.62rem;
    font-weight: 700;
    color: white;
    background: var(--ff-primary);
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Responsive for stats sections */
@media (max-width: 640px) {
    .ff-mode-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .ff-weapons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ff-gear-grid {
        grid-template-columns: 1fr;
    }

    .ff-mode-card__val {
        font-size: 1.1rem;
    }
}

/* ============================================================
   GLOBAL UPGRADE: Floating Quick Actions
   ============================================================ */
.ff-float-actions {
    position: fixed;
    right: 20px;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.35s ease;
    pointer-events: none;
}
.ff-float-actions.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.ff-float-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    text-decoration: none;
    color: #1F2937;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--ff-font, 'Be Vietnam Pro', sans-serif);
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1.5px solid #F3F4F6;
}
.ff-float-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    border-color: rgba(255,107,0,0.3);
    color: #FF6B00;
}
.ff-float-btn:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}
.ff-float-btn svg {
    flex-shrink: 0;
}

/* ============================================================
   GLOBAL UPGRADE: Live Activity Ticker
   ============================================================ */
.ff-activity-ticker {
    background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
    padding: 10px 0;
    overflow: hidden;
    position: relative;
}
.ff-activity-ticker::before,
.ff-activity-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.ff-activity-ticker::before {
    left: 0;
    background: linear-gradient(90deg, #1F2937, transparent);
}
.ff-activity-ticker::after {
    right: 0;
    background: linear-gradient(270deg, #1F2937, transparent);
}
.ff-activity-ticker__inner {
    overflow: hidden;
    width: 100%;
}
.ff-activity-ticker__track {
    display: flex;
    gap: 60px;
    animation: ff_ticker_scroll 30s linear infinite;
    width: max-content;
}
.ff-activity-item {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
    flex-shrink: 0;
}
@keyframes ff_ticker_scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   GLOBAL UPGRADE: Unified Card Effects
   ============================================================ */
.ff-gc-card,
.ff-tour-card,
.ff-top3-card,
.ff-art-card,
.ff-season-weapon-card,
.ff-season-char-card,
.ff-faq-item {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}
.ff-gc-card:hover,
.ff-tour-card:hover,
.ff-top3-card:hover,
.ff-art-card:hover,
.ff-season-weapon-card:hover,
.ff-season-char-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

/* Button press effect */
.ff-gc-copy-btn,
.ff-quick-tag,
.ff-top3-btn,
.ff-faq-feedback__btn,
.ff-gc-subscribe-btn,
#ff-lookup-btn,
.ff-float-btn,
.ff-tour-card__link {
    transition: all 0.3s ease !important;
}
.ff-gc-copy-btn:active,
.ff-quick-tag:active,
.ff-top3-btn:active,
.ff-faq-feedback__btn:active,
.ff-gc-subscribe-btn:active,
#ff-lookup-btn:active,
.ff-float-btn:active {
    transform: scale(0.95) !important;
    transition-duration: 0.1s !important;
}

/* ============================================================
   GLOBAL UPGRADE: Card Stagger Fade-in
   ============================================================ */
.ff-gc-card,
.ff-tour-card,
.ff-top3-card,
.ff-art-card,
.ff-season-weapon-card,
.ff-season-char-card {
    opacity: 0;
    animation: ff_card_fadein 0.5s ease forwards;
}
.ff-gc-card:nth-child(1), .ff-tour-card:nth-child(1), .ff-top3-card:nth-child(1), .ff-art-card:nth-child(1) { animation-delay: 0.05s; }
.ff-gc-card:nth-child(2), .ff-tour-card:nth-child(2), .ff-top3-card:nth-child(2), .ff-art-card:nth-child(2) { animation-delay: 0.1s; }
.ff-gc-card:nth-child(3), .ff-tour-card:nth-child(3), .ff-top3-card:nth-child(3), .ff-art-card:nth-child(3) { animation-delay: 0.15s; }
.ff-gc-card:nth-child(4), .ff-art-card:nth-child(4) { animation-delay: 0.2s; }
.ff-gc-card:nth-child(5), .ff-art-card:nth-child(5) { animation-delay: 0.25s; }
.ff-gc-card:nth-child(6), .ff-art-card:nth-child(6) { animation-delay: 0.3s; }
.ff-gc-card:nth-child(7), .ff-art-card:nth-child(7) { animation-delay: 0.35s; }
.ff-gc-card:nth-child(8), .ff-art-card:nth-child(8) { animation-delay: 0.4s; }

@keyframes ff_card_fadein {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GLOBAL UPGRADE: Mobile Optimization
   ============================================================ */
@media (max-width: 768px) {
    .ff-core-banner {
        padding: 22px 16px;
    }
    .ff-core-banner__title {
        font-size: 1.2rem;
    }
    .ff-core-banner__sub {
        font-size: 0.82rem;
    }
    .ff-search-bar {
        flex-direction: column;
        border-radius: 12px !important;
        padding: 6px !important;
    }
    .ff-search-bar input[type="text"],
    .ff-search-bar input {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 1rem !important;
    }
    .ff-search-bar button,
    #ff-lookup-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        min-height: 48px;
        font-size: 1rem !important;
    }
    .ff-quick-tags {
        gap: 6px;
    }
    .ff-quick-tag {
        padding: 6px 10px;
        font-size: 0.72rem;
    }
    .ff-section {
        margin-bottom: 20px !important;
    }
    .ff-float-actions {
        right: 12px;
        bottom: 70px;
    }
    .ff-float-btn {
        padding: 8px 12px;
        font-size: 0.72rem;
        gap: 5px;
    }
    .ff-float-btn svg {
        width: 16px;
        height: 16px;
    }
    .ff-activity-item {
        font-size: 0.72rem;
    }
    .ff-sec-head {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }
    .ff-sec-head__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .ff-core-banner__title {
        font-size: 1.05rem;
    }
    .ff-quick-tags {
        flex-direction: column;
        align-items: stretch;
    }
    .ff-quick-tag {
        justify-content: center;
    }
    .ff-float-btn span {
        display: none;
    }
    .ff-float-btn {
        padding: 10px;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        justify-content: center;
    }
}

/* ============================================================
   GLOBAL MOBILE RESPONSIVE - ALL PAGES
   ============================================================ */

/* Tablet: 768px and below */
@media (max-width: 768px) {
    /* Breadcrumb - smaller on mobile */
    nav[style*="font-size:0.78rem"],
    .wk-breadcrumb,
    nav[style*="padding:12px"] {
        padding: 8px 12px !important;
        font-size: 0.7rem !important;
    }

    /* SEO Internal Links grid - 2 columns on tablet */
    div[style*="grid-template-columns:repeat(auto-fill,minmax(180px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Character detail page - weapon grid */
    .ff-cd-related div[style*="grid-template-columns:repeat(3"],
    .ff-cd-related div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Single post - related articles grid */
    .ff-article-related div[style*="grid-template-columns:repeat(3"],
    div[style*="grid-template-columns:repeat(3,1fr)"][class] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Core links grid on homepage */
    .ff-core-links__grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Weapon detail page - two column layout */
    .wk-layout {
        flex-direction: column !important;
    }
    .wk-main {
        width: 100% !important;
    }
    .wk-side {
        width: 100% !important;
        position: static !important;
    }

    /* Download page info items */
    .ff-dl-info-items {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Esports center links grid */
    .ff-ec-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tournament detail related grid */
    .ff-td-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Team detail merch grid */
    .ff-team-merch {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Player detail links */
    .ff-pd-links {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Gift code archive grid */
    .ff-gc-archive-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Category page grids */
    .gh-mode-grid,
    .gh-weapon-grid,
    .gh-map-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Landing page info grids */
    .landing-info-grid,
    .landing-features,
    .landing-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Landing page hero */
    .landing-hero__inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
    }
    .landing-hero__logo {
        width: 90px !important;
        height: 90px !important;
    }
    .landing-hero__logo img {
        width: 72px !important;
        height: 72px !important;
    }
    .landing-hero__actions {
        justify-content: center !important;
    }

    /* Landing page guide steps */
    .landing-guide__steps {
        grid-template-columns: 1fr !important;
    }

    /* Landing page CTA */
    .landing-cta__actions {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 404 page grid */
    .ff-404__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Weapon list quick links */
    .wl-quick-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Guild lookup, Ban check, Tra cuu forms */
    .ff-lookup-form,
    .ff-guild-form,
    .ff-ban-form {
        padding: 16px !important;
    }
}

/* Mobile: 640px and below */
@media (max-width: 640px) {
    /* SEO Internal Links grid - 2 columns */
    div[style*="grid-template-columns:repeat(auto-fill,minmax(180px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Character detail page - weapon grid - single column */
    .ff-cd-related div[style*="grid-template-columns:repeat(3"],
    .ff-cd-related div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* Single post - related articles - single column */
    div[style*="grid-template-columns:repeat(3,1fr);gap:16px"] {
        grid-template-columns: 1fr !important;
    }

    /* Core links grid on homepage */
    .ff-core-links__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .ff-core-links__item {
        padding: 12px 6px !important;
    }
    .ff-core-links__name {
        font-size: 0.7rem !important;
    }
    .ff-core-links__desc {
        font-size: 0.58rem !important;
    }

    /* Download page info items - single column */
    .ff-dl-info-items {
        grid-template-columns: 1fr !important;
    }

    /* Esports center links - 2 columns */
    .ff-ec-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tournament detail related - single column */
    .ff-td-related-grid {
        grid-template-columns: 1fr !important;
    }

    /* Team detail merch - single column */
    .ff-team-merch {
        grid-template-columns: 1fr !important;
    }

    /* Player detail links - 2 columns */
    .ff-pd-links {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Category page grids - single column */
    .gh-mode-grid,
    .gh-weapon-grid,
    .gh-map-grid {
        grid-template-columns: 1fr !important;
    }

    /* Landing page info grids - single column */
    .landing-info-grid,
    .landing-features,
    .landing-related-grid {
        grid-template-columns: 1fr !important;
    }

    /* 404 page grid - 2 columns */
    .ff-404__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Weapon list quick links - single column */
    .wl-quick-grid {
        grid-template-columns: 1fr !important;
    }

    /* Character list page cards */
    .pcl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Archive page article grid */
    .ff-articles-grid {
        grid-template-columns: 1fr !important;
    }

    /* Gift code archive grid - single column */
    .ff-gc-archive-grid {
        grid-template-columns: 1fr !important;
    }

    /* Weapon detail page stats grid */
    .wk-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .wk-rates {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .wk-sens {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Mẹo leo rank page */
    .meo-rank-cta__btns {
        flex-direction: column !important;
    }
    .meo-rank-cta__btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Guild lookup, Ban check, Tra cuu forms */
    .ff-lookup-form,
    .ff-guild-form,
    .ff-ban-form {
        padding: 12px !important;
    }

    /* Top 100 table responsive */
    .ff-top100-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Tier list page */
    .tl-filters {
        flex-wrap: wrap !important;
    }
    .tl-filter-btn {
        font-size: 0.72rem !important;
        padding: 6px 10px !important;
    }

    /* General: all inline 3-column grids become 1 column */
    div[style*="grid-template-columns:repeat(3,1fr)"]:not(.ff-top3-grid):not(.ff-season-chars) {
        grid-template-columns: 1fr !important;
    }
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
    /* SEO Internal Links grid - single column */
    div[style*="grid-template-columns:repeat(auto-fill,minmax(180px"] {
        grid-template-columns: 1fr !important;
    }

    /* Core links grid - 2 columns */
    .ff-core-links__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Esports center links - single column */
    .ff-ec-links-grid {
        grid-template-columns: 1fr !important;
    }

    /* Player detail links - single column */
    .ff-pd-links {
        grid-template-columns: 1fr !important;
    }

    /* 404 page grid - 2 columns */
    .ff-404__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .ff-404__link {
        padding: 10px !important;
        font-size: 0.78rem !important;
    }

    /* Character list page cards - 2 columns */
    .pcl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Weapon detail page stats grid - single column */
    .wk-stats-grid {
        grid-template-columns: 1fr !important;
    }
    .wk-rates {
        grid-template-columns: 1fr !important;
    }
    .wk-sens {
        grid-template-columns: 1fr !important;
    }

    /* Landing page content padding */
    .landing-content {
        padding: 24px 12px 40px !important;
    }
    .landing-hero {
        padding: 36px 12px !important;
    }

    /* Mẹo leo rank step cards */
    .meo-step-grid {
        grid-template-columns: 1fr !important;
    }

    /* Download page game cards */
    .ff-dl-grid {
        grid-template-columns: 1fr !important;
    }

    /* Guild lookup, Ban check, Tra cuu forms */
    .ff-lookup-form,
    .ff-guild-form,
    .ff-ban-form {
        padding: 10px !important;
    }

    /* Tier list filter buttons */
    .tl-filter-btn {
        font-size: 0.65rem !important;
        padding: 5px 8px !important;
    }

    /* General: all inline 2-column grids become 1 column */
    div[style*="grid-template-columns:repeat(2,1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* Extra small mobile: 380px and below */
@media (max-width: 380px) {
    /* Core links grid - 2 columns */
    .ff-core-links__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 404 page grid - single column */
    .ff-404__grid {
        grid-template-columns: 1fr !important;
    }

    /* Character list page cards - 2 columns */
    .pcl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Search bar input smaller */
    .ff-search-bar input {
        font-size: 0.88rem !important;
        padding: 12px !important;
    }

    /* Section titles smaller */
    .ff-sec-title {
        font-size: 1rem !important;
    }
}

/* ============================================================
   GLOBAL: TABLE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .ff-top100-table-wrap,
    .ff-guild-table-wrap,
    .wk-table-wrap,
    div[style*="overflow-x"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        min-width: 500px;
    }

    /* Weapon detail page - full width on mobile */
    .wk-layout {
        flex-direction: column !important;
    }
    .wk-main {
        width: 100% !important;
        max-width: 100% !important;
    }
    .wk-side {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   GLOBAL: TOUCH-FRIENDLY BUTTONS (min 44px tap target)
   ============================================================ */
@media (max-width: 768px) {
    a, button, input[type="submit"], .ff-sec-link, .ff-gc-copy, .ff-filter-tab,
    .ff-quick-tag, .wl-filter-btn, .tl-filter-btn, .ff-ec-link-card,
    .ff-td-btn, .ff-pd-link-card, .ff-merch-card, .meo-rank-cta__btn,
    .ff-dl-card__btn, .ff-gc-subscribe-btn {
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    input[type="text"], input[type="number"], input[type="search"] {
        min-height: 44px;
        font-size: 16px !important;
    }
}

/* ============================================================
   GLOBAL: PREVENT HORIZONTAL OVERFLOW
   ============================================================ */
html, body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

div, section, main, article, aside, nav, header, footer {
    max-width: 100vw;
    box-sizing: border-box;
}

/* Fix inline style grids that might overflow */
div[style*="grid-template-columns"] {
    box-sizing: border-box;
}