/**
 * Allyono File Layout - Premium Red & Gold Theme
 * WHITE body, WHITE cards, GOLD highlights, RED header, GOLD download buttons
 */

/* ===== CORE DESIGN SYSTEM ===== */
.layout-allyonofile {
    --header-height: 58px;
    --nav-height: 68px;
    --primary-red: #8f1a2b;       /* Premium Ruby Red, desaturated */
    --primary-red-hover: #711421;
    --primary-red-light: rgba(143, 26, 43, 0.05);
    --primary-gold: #c9a24b;      /* Metallic Gold, desaturated */
    --primary-gold-dark: #a3812f;
    --primary-gold-light: rgba(201, 162, 75, 0.1);
    --ink: #0b0c10;              /* Deep near-black for dark surfaces */
    --ink-soft: #14161c;
    --body-bg: #faf9f7;          /* Warm off-white body background */
    --card-bg: #ffffff;          /* WHITE cards */
    --nav-bg: #ffffff;           /* White nav bar */
    --page-outer: #faf9f7;
    --text-dark: #14141a;        /* Near black text, warm tint */
    --text-medium: #3c3c46;      /* Medium dark text */
    --text-muted: #6b6b76;       /* Muted text */
    --border-color: #ece9e4;     /* Warm light border */
    --border-gold: #d9c07f;      /* Gold accent border */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    /* Neutral, low-contrast resting shadow (not tinted to the brand
       color) reads calmer and more "big-tech premium" than a colored
       glow on every card - reserve the warm glow for genuine hover/focus
       interaction instead of ambient decoration. */
    --shadow-card: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
    --shadow-hover: 0 8px 28px rgba(16,24,40,0.10);
    --shadow-gold-glow: 0 0 0 3px rgba(201, 162, 75, 0.22);
    --container-max: 1200px;
}

/* Subtle grain overlay for a less "flat AI" surface.
   Positioned relative to .af-main (not fixed to the viewport) so it can
   never be the widest box on the page and drag mobile's layout viewport
   wider than the device — a real cross-device bug fixed-inset overlays
   can cause on some mobile engines. */
.layout-allyonofile .af-main {
    position: relative;
}
.layout-allyonofile .af-main::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== BASE BODY ===== */
body.layout-allyonofile {
    font-family: var(--site-font, 'Inter', 'Segoe UI', -apple-system, sans-serif) !important;
    background-color: var(--body-bg) !important;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
}

/* Root bug fix: the base .app-container is hard-capped at 480px for the
   legacy mobile-only layouts. This theme manages its own width via
   .af-container, so the outer wrapper must be freed to full width. */
body.layout-allyonofile .app-container {
    max-width: none !important;
    overflow-x: visible;
}

/* ===== HIDE OLD TEMPLATES ===== */
.layout-allyonofile .main-nav,
.layout-allyonofile .main-header,
.layout-allyonofile .mobile-menu,
.layout-allyonofile .telegram-float,
.layout-allyonofile .main-footer,
.layout-allyonofile .main-content > .featured-section,
.layout-allyonofile .main-content > .category-section {
    display: none !important;
}

.layout-allyonofile .layout-wrapper {
    padding-top: 0 !important;
}

/* ===== RED HEADER ===== */
.layout-allyonofile .af-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: linear-gradient(135deg, var(--primary-red) 0%, #5c0f1a 100%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 2.5px solid var(--primary-gold);
    box-shadow: 0 4px 20px rgba(20,4,7,0.28);
}

.layout-allyonofile .af-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: 1;
}

.layout-allyonofile .af-logo-box {
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1.5px solid var(--primary-gold);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.layout-allyonofile .af-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layout-allyonofile .af-logo-fallback i {
    color: var(--primary-red);
    font-size: 18px;
}

.layout-allyonofile .af-header-title {
    color: #fff;
    font-family: var(--site-font, 'Outfit', 'Inter', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.layout-allyonofile .af-menu-btn {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 9px;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.layout-allyonofile .af-menu-btn:hover {
    background: rgba(255,255,255,0.28);
}

/* ===== WHITE ICON NAVIGATION BAR ===== */
.layout-allyonofile .af-icon-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 4px 14px rgba(20,10,10,0.05);
}

.layout-allyonofile .af-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: #999999;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 5px 6px;
    border-radius: 10px;
    transition: all 0.2s ease;
    min-width: 48px;
}

.layout-allyonofile .af-nav-item i {
    font-size: 15px;
    width: 30px;
    height: 30px;
    background: #f4f4f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaaaaa;
    transition: all 0.2s ease;
}

/* Active Nav State */
.layout-allyonofile .af-nav-item.active {
    color: var(--primary-red);
}

.layout-allyonofile .af-nav-item.active i {
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-hover));
    color: var(--primary-gold);
    border: 1.5px solid var(--primary-gold);
    box-shadow: 0 2px 6px rgba(153,27,27,0.25);
}

.layout-allyonofile .af-nav-item:hover:not(.active) {
    color: #555;
}

.layout-allyonofile .af-nav-item:hover:not(.active) i {
    background: #ebebeb;
    color: #666;
}

/* ===== MAIN CONTAINER ===== */
/* flex column + margin-top:auto on the footer pins it to the bottom edge
   exactly, with no leftover whitespace when page content is short */
.layout-allyonofile .af-main {
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--header-height) + var(--nav-height));
    padding-bottom: 0;
    min-height: 100vh;
    background: var(--body-bg);
}

.layout-allyonofile .af-main > .af-container:first-child {
    padding-bottom: 40px;
}

.layout-allyonofile .af-footer {
    margin-top: auto;
}

.layout-allyonofile .af-container {
    max-width: 560px;
    margin: 0 auto;
    padding: 12px 14px 0;
    position: relative;
    z-index: 2;
}

/* Tablet - container widens (grid columns are finalized in the
   RESPONSIVE GRID OVERRIDE block at the end of this file, so they win
   the cascade against the later unconditional .af-games/.af-game-item rules) */
@media (min-width: 640px) {
    .layout-allyonofile .af-container {
        max-width: 680px;
    }
}

/* Desktop - wider, side-padded */
@media (min-width: 769px) {
    .layout-allyonofile .af-container {
        max-width: 900px;
        padding: 24px 24px 0;
    }
    .layout-allyonofile .af-main {
        padding-top: calc(var(--header-height) + var(--nav-height) + 8px);
    }
    .layout-allyonofile .af-header {
        padding: 0 32px;
    }
    .layout-allyonofile .af-icon-nav {
        justify-content: center;
        gap: 40px;
    }
    .layout-allyonofile .af-nav-item {
        min-width: 70px;
        font-size: 0.78rem;
    }
    .layout-allyonofile .af-seo-card {
        padding: 32px 36px;
    }
    .layout-allyonofile .af-seo-card h2 {
        font-size: 1.7rem;
    }
    .layout-allyonofile .af-tabs {
        max-width: 460px;
        margin-left: 0;
    }
    .layout-allyonofile .gp-choose-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .layout-allyonofile .gp-pop-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Large desktop */
@media (min-width: 1100px) {
    .layout-allyonofile .af-container {
        max-width: var(--container-max);
        padding: 32px 40px 0;
    }
    .layout-allyonofile .af-seo-card {
        padding: 40px 48px;
    }
    .layout-allyonofile .gp-choose-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== DEEP RED HERO / SEO CARD ===== */
.layout-allyonofile .af-seo-card {
    background:
        radial-gradient(circle at 15% 15%, rgba(201,162,75,0.16) 0%, transparent 45%),
        linear-gradient(135deg, #6e1620 0%, #2c0509 100%);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--primary-gold);
    padding: 20px 18px;
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 6px 24px rgba(20,4,7,0.24), 0 4px 12px rgba(201,162,75,0.08);
    position: relative;
    overflow: hidden;
}

.layout-allyonofile .af-seo-card h2 {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--primary-gold);
}

.layout-allyonofile .af-seo-card p {
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0;
    opacity: 0.97;
}

/* ===== HERO STAT CHIPS =====
   Real, computed numbers (total apps, categories, top bonus) rendered
   as a compact chip row - the kind of at-a-glance credibility signal a
   generic AI-styled hero skips, without inventing fake stats. */
.layout-allyonofile .af-hero-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

.layout-allyonofile .af-hero-chip {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
}

.layout-allyonofile .af-hero-chip b {
    display: block;
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-gold);
    line-height: 1.2;
}

.layout-allyonofile .af-hero-chip span {
    display: block;
    font-size: 0.66rem;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}

@media (max-width: 420px) {
    .layout-allyonofile .af-hero-chip b {
        font-size: 0.92rem;
    }
    .layout-allyonofile .af-hero-chip span {
        font-size: 0.6rem;
    }
}

/* ===== SEARCH BAR ===== */
.layout-allyonofile .af-search-section {
    margin: 12px 0;
}

.layout-allyonofile .af-search {
    position: relative;
    width: 100%;
}

.layout-allyonofile .af-search input {
    width: 100%;
    height: 50px;
    border: 1.5px solid #dddddd;
    border-radius: 50px;
    padding: 0 56px 0 20px;
    font-size: 0.9rem;
    background: #ffffff;
    color: #111111;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}

.layout-allyonofile .af-search input:focus {
    border-color: var(--primary-gold);
    box-shadow: var(--shadow-gold-glow);
}

.layout-allyonofile .af-search input::placeholder {
    color: #bbbbbb;
}

.layout-allyonofile .af-search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--primary-gold);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.layout-allyonofile .af-search-btn:hover {
    background: var(--primary-gold-dark);
}

/* ===== SECTION TITLE ===== */
.layout-allyonofile .af-section-title {
    text-align: center;
    margin: 16px 0 12px;
}

.layout-allyonofile .af-section-title h2 {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: #111111;  /* Dark text on white background */
    letter-spacing: -0.2px;
}

/* ===== CAPSULE CATEGORY TABS ===== */
.layout-allyonofile .af-tabs {
    display: flex;
    gap: 8px;
    background: #f0f0f0;
    padding: 5px;
    border-radius: 50px;
    margin-bottom: 14px;
    border: 1px solid #e0e0e0;
}

.layout-allyonofile .af-tab {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 50px;
    font-size: 0.92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--site-font, 'Inter', sans-serif);
    background: transparent;
    color: #777777;
}

.layout-allyonofile .af-tab i {
    font-size: 0.88rem;
    color: #999999;
}

.layout-allyonofile .af-tab.active {
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-hover));
    color: #ffffff;
    border: 1px solid var(--primary-gold);
    box-shadow: 0 4px 12px rgba(153,27,27,0.25);
}

.layout-allyonofile .af-tab.active i {
    color: #ffeb3b;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ===== WHITE GAME CARDS (HOMEPAGE) ===== */
.layout-allyonofile .af-games {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.layout-allyonofile .af-game-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;               /* WHITE card */
    border-radius: var(--radius-lg);
    padding: 14px 14px;
    border: 1px solid #e8e8e8;
    box-shadow: var(--shadow-card);
    transition: all 0.22s ease;
}

.layout-allyonofile .af-game-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
    border-color: #cccccc;
}

/* Red Circle Rank Badge */
.layout-allyonofile .af-game-rank-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 22px;
    height: 22px;
    background: var(--primary-red);
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    z-index: 10;
}

/* Game Icon */
.layout-allyonofile .af-game-icon-wrap {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.layout-allyonofile .af-game-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.layout-allyonofile .af-game-icon-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
}

/* Game Info */
.layout-allyonofile .af-game-info {
    flex: 1;
    min-width: 0;
}

.layout-allyonofile .af-game-name {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: #111111;               /* Dark text on white card */
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-allyonofile .af-game-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.layout-allyonofile .af-game-meta span {
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.layout-allyonofile .meta-bonus {
    color: #e60000;
}

.layout-allyonofile .meta-bonus i {
    color: #e60000;
}

.layout-allyonofile .meta-withdraw {
    color: #555555;
}

.layout-allyonofile .meta-withdraw i {
    color: #777777;
}

/* Action Wrap */
.layout-allyonofile .af-action-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Premium Gold Download Button */
.layout-allyonofile .af-get-btn {
    height: 38px;
    padding: 0 16px;
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-dark));
    color: #ffffff;
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    font-size: 0.84rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(170,132,30,0.25);
    white-space: nowrap;
}

.layout-allyonofile .af-get-btn:hover {
    background: linear-gradient(135deg, var(--primary-gold-dark), var(--primary-gold));
    box-shadow: 0 4px 16px rgba(170,132,30,0.4);
    transform: translateY(-1px);
}

.layout-allyonofile .af-get-btn i {
    font-size: 0.78rem;
}

/* CTR Badge - hidden (removed per design) */
.layout-allyonofile .af-game-ctr-badge {
    display: none !important;
}

/* ===== FEATURED SECTION HEADER ===== */
.layout-allyonofile .af-featured-header {
    display: flex;
    align-items: center;
    margin: 16px 0 8px;
}

.layout-allyonofile .af-featured-header span {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: #111111;
    display: flex;
    align-items: center;
    gap: 7px;
}

.layout-allyonofile .af-featured-header span i {
    color: #ff5722;
}

/* Featured item gold crown badge */
.layout-allyonofile .af-feat-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 22px;
    height: 22px;
    background: #f59e0b;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.6rem;
    z-index: 10;
}

/* Featured card gold left border */
.layout-allyonofile .af-featured-item {
    border-left: 3px solid #f59e0b !important;
}

/* Divider between featured and all games */
.layout-allyonofile .af-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
    color: #aaaaaa;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.layout-allyonofile .af-divider::before,
.layout-allyonofile .af-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}

/* ===== QUERY KEYWORD SLIDER ===== */
.layout-allyonofile .af-queries-slider-wrap {
    overflow: hidden;
    margin: 12px 0 20px;
    position: relative;
    max-width: 100%;
    contain: layout paint;
}

.layout-allyonofile .af-queries-slider {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding-bottom: 4px;
    contain: layout paint;
}

.layout-allyonofile .af-queries-slider::-webkit-scrollbar {
    display: none;
}

.layout-allyonofile .af-queries-slider .query-pill {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
}

/* Mobile: wrap the pills onto multiple lines instead of an unbounded
   horizontal scroll strip. A single-row nowrap strip with 15-20 pills
   has a scrollWidth many times the viewport width, which some mobile
   browser engines use to size the page's layout viewport itself,
   dragging the ENTIRE site wider than the device and clipping every
   other section on the right edge. Wrapping keeps the pills' natural
   content width bounded to the viewport. */
@media (max-width: 639px) {
    .layout-allyonofile .af-queries-slider {
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
        cursor: auto;
    }
    .layout-allyonofile .af-queries-slider .query-pill {
        flex-shrink: 1;
        white-space: normal;
    }
}

/* ===== WHITE SEO CONTENT BLOCK ===== */
.layout-allyonofile .af-bottom-seo-content {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 22px 18px;
    border: 1px solid #e8e8e8;
    box-shadow: var(--shadow-card);
    margin-top: 16px;
}

.layout-allyonofile .af-bottom-seo-content h2 {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 1.2rem;
    font-weight: 800;
    color: #111111;
    margin: 0 0 10px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px;
}

.layout-allyonofile .af-bottom-seo-content h3 {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 0.98rem;
    font-weight: 700;
    color: #111111;
    margin: 18px 0 6px;
}

.layout-allyonofile .af-bottom-seo-content h3 a {
    color: #0078ff;
    text-decoration: none;
}

.layout-allyonofile .af-bottom-seo-content h3 a:hover {
    text-decoration: underline;
}

.layout-allyonofile .af-bottom-seo-content p {
    font-size: 0.865rem;
    line-height: 1.65;
    color: #555555;
    margin: 0 0 8px;
}

.layout-allyonofile .af-bottom-seo-content p a {
    color: #0078ff;
    text-decoration: none;
}

/* Featured links paragraph */
.layout-allyonofile .featured-links-p {
    font-size: 0.865rem;
    line-height: 1.8;
    color: #555555;
    margin: 0 0 10px;
}

.layout-allyonofile .featured-links-p a {
    color: #0078ff !important;
    text-decoration: none;
    font-weight: 600;
}

.layout-allyonofile .featured-links-p a:hover {
    text-decoration: underline;
}

/* Queries / Keyword Pills */
.layout-allyonofile .queries-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 20px;
}

.layout-allyonofile .query-pill {
    background: var(--primary-red);
    color: #ffffff;
    border: 1px solid var(--primary-gold);
    padding: 7px 16px;
    border-radius: 40px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: default;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(153,27,27,0.15);
}

.layout-allyonofile .query-pill:hover {
    background: var(--primary-red-hover);
}

/* Tips List */
.layout-allyonofile .af-tips-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.layout-allyonofile .af-tips-list li {
    position: relative;
    padding-left: 18px;
    font-size: 0.865rem;
    line-height: 1.65;
    color: #555555;
}

.layout-allyonofile .af-tips-list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--primary-red);
    font-size: 1.1rem;
    top: -1px;
}

.layout-allyonofile .af-tips-list li strong {
    color: #111111;
    font-weight: 700;
}

/* ===== PREMIUM DARK FOOTER ===== */
.layout-allyonofile .af-footer {
    background:
        radial-gradient(circle at 85% 0%, rgba(201,162,75,0.09) 0%, transparent 50%),
        linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
    color: #b7b7c2;
    padding: 0;
    border-top: 2.5px solid var(--primary-gold);
}

.layout-allyonofile .af-footer-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 32px;
}

.layout-allyonofile .af-footer-section {
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.layout-allyonofile .af-footer-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.layout-allyonofile .af-footer-title {
    font-family: var(--site-font, 'Outfit', sans-serif);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.layout-allyonofile .af-footer-title i {
    color: var(--primary-gold);
    font-size: 0.9rem;
}

.layout-allyonofile .af-footer-text {
    font-size: 0.86rem;
    line-height: 1.7;
    color: #9d9da8;
    margin: 0;
}

.layout-allyonofile .af-footer-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.layout-allyonofile .af-footer-list li {
    font-size: 0.86rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #9d9da8;
}

.layout-allyonofile .af-footer-list li i {
    color: var(--primary-gold);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Desktop - three-column footer instead of a stacked wall of text */
@media (min-width: 769px) {
    .layout-allyonofile .af-footer-grid {
        display: grid;
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 48px;
        padding-top: 56px;
        padding-bottom: 44px;
    }
    .layout-allyonofile .af-footer-section {
        border-bottom: none;
        padding-bottom: 0;
        border-right: 1px solid rgba(255,255,255,0.07);
        padding-right: 32px;
    }
    .layout-allyonofile .af-footer-section:last-child {
        border-right: none;
        padding-right: 0;
    }
}

/* ===== PREMIUM DARK COPYRIGHT BAR (same surface as footer, no seam) ===== */
.layout-allyonofile .af-copyright-bar {
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(201, 162, 75, 0.18);
    padding: 16px 16px;
    margin-top: 0;
}

.layout-allyonofile .af-copyright-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: #75757f;
    max-width: 520px;
    margin: 0 auto;
}

@media (min-width: 769px) {
    .layout-allyonofile .af-copyright-content {
        max-width: var(--container-max);
    }
}

.layout-allyonofile .af-copyright-content p {
    margin: 0;
}

.layout-allyonofile .af-copyright-links {
    display: flex;
    gap: 14px;
}

.layout-allyonofile .af-copyright-links a {
    color: #9d9da8 !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.layout-allyonofile .af-copyright-links a:hover {
    color: var(--primary-gold) !important;
}

/* ===== TELEGRAM FLOAT ===== */
.layout-allyonofile .af-telegram-float {
    position: fixed;
    bottom: 22px;
    right: 18px;
    width: 52px;
    height: 52px;
    background: #0088cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,136,204,0.45);
    z-index: 998;
    transition: all 0.22s ease;
}

.layout-allyonofile .af-telegram-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,136,204,0.55);
}

/* ===== GAME SLUG DETAIL PAGE ===== */

/* gp-main sits inside af-main > af-container — no own padding-top needed */
.layout-allyonofile .gp-main {
    padding-top: 0 !important;
    padding-bottom: 50px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
}

/* WHITE Info Card - the game detail hero */
.layout-allyonofile .gp-hero {
    margin-bottom: 12px;
}

.layout-allyonofile .gp-info-card {
    background: #ffffff !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px 16px !important;
    box-shadow: var(--shadow-card) !important;
    border: 1px solid #e8e8e8 !important;
}

.layout-allyonofile .gp-info-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.layout-allyonofile .gp-small-icon {
    width: 76px;
    height: 76px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.layout-allyonofile .gp-small-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layout-allyonofile .gp-small-icon-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
}

.layout-allyonofile .gp-title-block {
    flex: 1;
    min-width: 0;
}

.layout-allyonofile .gp-title {
    font-family: var(--site-font, 'Outfit', sans-serif) !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #111111 !important;   /* Dark text on white */
    margin: 0 0 4px !important;
}

.layout-allyonofile .gp-verified {
    color: #059669 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

.layout-allyonofile .gp-verified i {
    color: #059669 !important;
}

.layout-allyonofile .gp-meta-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.layout-allyonofile .gp-meta-item {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

.layout-allyonofile .gp-meta-item.gift {
    color: #e60000 !important;
}

.layout-allyonofile .gp-meta-item.gift i {
    color: #e60000 !important;
}

.layout-allyonofile .gp-meta-item.bank {
    color: #555555 !important;
}

.layout-allyonofile .gp-meta-item.bank i {
    color: #777777 !important;
}

/* Referral Code Box */
.layout-allyonofile .gp-referral {
    background: #fff5f0 !important;
    border: 1.5px dashed #ff6b35 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.layout-allyonofile .gp-referral > i {
    color: #ff6b35 !important;
}

.layout-allyonofile .gp-ref-label {
    font-size: 0.72rem;
    color: #999;
    white-space: nowrap;
}

.layout-allyonofile .gp-ref-code {
    color: #e84c0b !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    flex: 1;
}

.layout-allyonofile .gp-copy-btn {
    color: #ff6b35 !important;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

.layout-allyonofile .gp-copy-btn:hover {
    color: #e84c0b !important;
}

/* Action Buttons */
.layout-allyonofile .gp-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.layout-allyonofile .gp-btn-install {
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-dark)) !important;
    color: #fff !important;
    border: 1px solid var(--border-gold) !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    padding: 15px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 14px rgba(170,132,30,0.25) !important;
    transition: all 0.2s !important;
}

.layout-allyonofile .gp-btn-install:hover {
    background: linear-gradient(135deg, var(--primary-gold-dark), var(--primary-gold)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(170,132,30,0.4) !important;
}

.layout-allyonofile .gp-btn-tg {
    background: #ffffff !important;
    color: var(--primary-red) !important;
    border: 2px solid var(--primary-red) !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    padding: 14px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 12px rgba(153, 27, 27, 0.05) !important;
    transition: all 0.22s ease !important;
}

.layout-allyonofile .gp-btn-tg:hover {
    background: var(--primary-red) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(153, 27, 27, 0.25) !important;
}

/* Description */
.layout-allyonofile .gp-desc {
    font-size: 0.84rem !important;
    color: #555555 !important;
    line-height: 1.65 !important;
    padding-top: 14px !important;
    border-top: 1px solid #eeeeee !important;
    margin-top: 14px !important;
}

/* Popular Apps Section */
.layout-allyonofile .gp-popular {
    padding: 6px 0 0;
}

.layout-allyonofile .gp-section-title {
    font-family: var(--site-font, 'Outfit', sans-serif) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #111111 !important;    /* Dark title on white bg */
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.layout-allyonofile .gp-pop-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* WHITE Popular Game Rows */
.layout-allyonofile .gp-pop-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    border-radius: var(--radius-lg) !important;
    padding: 12px !important;
    text-decoration: none !important;
    color: #111111 !important;
    box-shadow: var(--shadow-card) !important;
    border: 1px solid #e8e8e8 !important;
    transition: all 0.2s ease !important;
}

.layout-allyonofile .gp-pop-row:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-hover) !important;
    border-color: #cccccc !important;
}

.layout-allyonofile .gp-pop-img-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.layout-allyonofile .gp-pop-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layout-allyonofile .gp-pop-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.layout-allyonofile .gp-new-tag {
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--primary-red);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
}

.layout-allyonofile .gp-pop-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.layout-allyonofile .gp-pop-name {
    font-family: var(--site-font, 'Outfit', sans-serif) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
}

.layout-allyonofile .gp-pop-bonus {
    font-size: 0.78rem !important;
    color: #e60000 !important;
    font-weight: 600 !important;
}

/* BLACK download button on popular rows */
.layout-allyonofile .gp-pop-dl {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-dark)) !important;
    color: #fff !important;
    border: 1px solid var(--border-gold) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(170,132,30,0.2) !important;
    transition: all 0.2s !important;
}

.layout-allyonofile .gp-pop-dl:hover {
    background: linear-gradient(135deg, var(--primary-gold-dark), var(--primary-gold)) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .layout-allyonofile {
        --header-height: 52px;
        --nav-height: 62px;
    }

    .layout-allyonofile .af-header-title {
        font-size: 1rem;
    }

    .layout-allyonofile .af-logo-box {
        width: 34px;
        height: 34px;
    }

    .layout-allyonofile .af-seo-card {
        padding: 16px 14px;
    }

    .layout-allyonofile .af-seo-card h2 {
        font-size: 1.15rem;
    }

    .layout-allyonofile .af-game-item {
        padding: 12px 10px;
        gap: 10px;
    }

    .layout-allyonofile .af-game-icon-wrap {
        width: 58px;
        height: 58px;
    }

    .layout-allyonofile .af-get-btn {
        height: 34px;
        padding: 0 10px;
        font-size: 0.78rem;
    }

    .layout-allyonofile .af-nav-item {
        padding: 4px 3px;
        font-size: 0.63rem;
        min-width: 38px;
    }

    .layout-allyonofile .af-nav-item i {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .layout-allyonofile .af-section-title h2 {
        font-size: 1rem;
    }

    .layout-allyonofile .af-tab {
        font-size: 0.84rem;
        height: 40px;
    }

    .layout-allyonofile .af-copyright-content {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }
}

/* ===== PREMIUM ADDITIONAL SECTIONS (APP DETAIL & HOMEPAGE) ===== */
.layout-allyonofile .gp-overview-sec,
.layout-allyonofile .gp-choose-sec,
.layout-allyonofile .gp-install-sec,
.layout-allyonofile .gp-faq-sec,
.layout-allyonofile .gp-alert-sec {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 22px 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    margin-top: 18px;
    box-sizing: border-box;
}

.layout-allyonofile .gp-sec-title {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #111111;
    margin: 0 0 16px;
    border-bottom: 2px solid var(--primary-gold-light);
    padding-bottom: 8px;
}

/* Overview Table */
.layout-allyonofile .gp-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
}

.layout-allyonofile .gp-overview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}

.layout-allyonofile .gp-overview-table th,
.layout-allyonofile .gp-overview-table td {
    padding: 12px 16px;
    border-bottom: 1.5px solid var(--border-color);
}

.layout-allyonofile .gp-overview-table th {
    background-color: #fafafa;
    color: #111111;
    font-weight: 700;
    width: 40%;
}

.layout-allyonofile .gp-overview-table td {
    color: var(--text-medium);
    font-weight: 600;
}

.layout-allyonofile .gp-overview-table tr:last-child th,
.layout-allyonofile .gp-overview-table tr:last-child td {
    border-bottom: none;
}

/* Feature Cards Grid */
.layout-allyonofile .gp-choose-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.layout-allyonofile .gp-choose-card {
    background: #fafafa;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: all 0.22s ease;
}

.layout-allyonofile .gp-choose-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-gold);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.08);
    background: #ffffff;
}

.layout-allyonofile .gp-card-title {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 0.95rem;
    font-weight: 800;
    color: #111111;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.layout-allyonofile .gp-card-title i {
    color: var(--primary-gold);
}

.layout-allyonofile .gp-card-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

/* Installation Steps */
.layout-allyonofile .gp-steps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.layout-allyonofile .gp-step-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.layout-allyonofile .gp-step-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-hover));
    border: 1.5px solid var(--primary-gold);
    color: var(--primary-gold);
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.84rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(153, 27, 27, 0.15);
}

.layout-allyonofile .gp-step-content {
    flex: 1;
    font-size: 0.865rem;
    line-height: 1.6;
    color: var(--text-medium);
}

.layout-allyonofile .gp-step-content strong {
    color: #111111;
    font-weight: 700;
}

/* FAQ Accordion */
.layout-allyonofile .faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.layout-allyonofile .faq-item {
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fafafa;
    transition: all 0.2s ease;
}

.layout-allyonofile .faq-item.active {
    background: #ffffff;
    border-color: var(--primary-gold);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.05);
}

.layout-allyonofile .faq-header {
    width: 100%;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
    gap: 12px;
}

.layout-allyonofile .faq-question {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 0.92rem;
    font-weight: 750;
    color: #111111;
    margin: 0;
}

.layout-allyonofile .faq-icon {
    font-size: 0.84rem;
    color: var(--text-muted);
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

.layout-allyonofile .faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: var(--primary-red);
}

.layout-allyonofile .faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

.layout-allyonofile .faq-body {
    padding: 0 16px 14px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-medium);
}

/* Alert warnings */
.layout-allyonofile .gp-alert-box {
    background: #fffdf5;
    border-left: 4px solid var(--primary-gold);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.layout-allyonofile .gp-alert-box.danger {
    background: #fef2f2;
    border-left-color: var(--primary-red);
}

.layout-allyonofile .gp-alert-box p {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

.layout-allyonofile .gp-alert-box strong {
    color: #111111;
}

/* Responsive grid for mobile */
@media (max-width: 580px) {
    .layout-allyonofile .gp-choose-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .layout-allyonofile .gp-overview-sec,
    .layout-allyonofile .gp-choose-sec,
    .layout-allyonofile .gp-install-sec,
    .layout-allyonofile .gp-faq-sec,
    .layout-allyonofile .gp-alert-sec {
        padding: 16px 14px;
    }
}

/* ===== RESPONSIVE GRID OVERRIDE =====
   Placed last on purpose: an earlier unconditional rule sets
   .af-games { display:flex } and .af-game-item { flex-direction:row }.
   Same-specificity selectors resolve by source order, so these grid
   rules must come after that rule to win at tablet/desktop widths. */
@media (min-width: 640px) {
    .layout-allyonofile .af-games {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .layout-allyonofile .af-divider,
    .layout-allyonofile .af-featured-header,
    .layout-allyonofile .af-section-title {
        grid-column: 1 / -1;
    }
}

@media (min-width: 769px) {
    .layout-allyonofile .af-games {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .layout-allyonofile .af-game-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .layout-allyonofile .af-game-item > .af-game-icon-wrap {
        align-self: flex-start;
    }
    .layout-allyonofile .af-game-info,
    .layout-allyonofile .af-action-wrap {
        width: 100%;
    }
    .layout-allyonofile .af-action-wrap {
        align-items: stretch;
    }
    .layout-allyonofile .af-get-btn {
        justify-content: center;
        width: 100%;
    }
    .layout-allyonofile .af-game-icon-wrap {
        width: 72px;
        height: 72px;
    }
    .layout-allyonofile .af-game-name {
        font-size: 1.05rem;
        white-space: normal;
    }
}

@media (min-width: 1100px) {
    .layout-allyonofile .af-games {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* ===== BREADCRUMB, BADGE PILL & STATS GRID FOR GAME PAGE ===== */
.layout-allyonofile .gp-breadcrumb {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 0.82rem;
    color: #64748b;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

.layout-allyonofile .gp-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.layout-allyonofile .gp-breadcrumb a:hover {
    color: var(--primary-red);
}

.layout-allyonofile .gp-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--primary-red), #7f1d1d);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid var(--primary-gold);
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(153, 27, 27, 0.15);
}

.layout-allyonofile .gp-badge-pill i {
    color: var(--primary-gold);
    font-size: 0.75rem;
}

.layout-allyonofile .gp-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.layout-allyonofile .gp-stat-box {
    border: 1.5px solid #f1f5f9;
    border-radius: 14px;
    padding: 12px 10px;
    text-align: center;
    background: #fbfcfd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.layout-allyonofile .gp-stat-box:hover {
    border-color: var(--primary-gold-light);
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.layout-allyonofile .gp-stat-val {
    font-family: var(--site-font, 'Outfit', sans-serif);
    font-size: 1.15rem;
    font-weight: 850;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 4px;
}

.layout-allyonofile .gp-stat-lbl {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    text-transform: capitalize;
}