/* =========================================================================
   MEGAFIRE — GAME LAUNCHER  (rediseno total, child de appyn)
   SIN NINGUN recurso externo (ni fuentes, ni CDNs) — el host/LiteSpeed/CF
   cuelga con externos. Iconos = SVG data-uri + dot CSS. Fuente = system stack.
   Storefront oscuro estilo Steam/Epic + acento neon. Cambia la paleta en :root.
   Escrito para ganarle al <style> dinamico del padre (html + !important).
   Cards: markup propio .gl-card (override en template-parts/loop/app*.php).
   ========================================================================= */

:root {
    --ap-bg:        #08090e;
    --ap-bg-2:      #0c0e15;
    --ap-surface:   #12141d;
    --ap-surface-2: #1a1d29;
    --ap-border:    #212533;
    --ap-border-2:  #2d3346;
    --ap-text:      #f2f4f9;
    --ap-muted:     #8b93a7;
    --ap-faint:     #5c6479;
    --ap-accent:    #7c5cff;
    --ap-accent-2:  #22d3ee;
    --ap-pink:      #ff4d8d;
    --ap-green:     #2fe08a;
    --ap-star:      #ffc53d;
    --ap-grad:      linear-gradient(115deg,#7c5cff 0%,#22d3ee 100%);
    --ap-grad-soft: linear-gradient(115deg,rgba(124,92,255,.16),rgba(34,211,238,.16));
    --ap-radius:    14px;
    --ap-radius-lg: 20px;
    --ap-glow:      0 0 0 1px rgba(124,92,255,.5), 0 22px 44px -16px rgba(124,92,255,.5);
    --ap-font:      system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ---------------- CANVAS ---------------- */
html body, html .wrapper-page, html .wrapper-inside { background: var(--ap-bg) !important; color: var(--ap-text) !important; }
html .wrapper-inside {
    background:
        radial-gradient(1100px 500px at 82% -10%, rgba(34,211,238,.09), transparent 60%),
        radial-gradient(1100px 520px at 10% -8%, rgba(124,92,255,.13), transparent 60%),
        var(--ap-bg) !important;
    background-attachment: fixed !important;
}
body,p { color: var(--ap-text); font-family: var(--ap-font); }
a { color: var(--ap-text); text-decoration: none; }
a:hover { color: var(--ap-accent-2); }
::selection { background: rgba(124,92,255,.4); color:#fff; }
html { scrollbar-color: var(--ap-accent) transparent !important; }
h1,h2,h3,h4,h5,.title,.title-section { font-family: var(--ap-font) !important; color: var(--ap-text) !important; letter-spacing:-.01em; }
html .container { max-width: 1320px !important; }

/* ---------------- HEADER (slim sticky) ---------------- */
html #header, html body.fixed #header {
    background: rgba(8,9,14,.72) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ap-border) !important;
    box-shadow: 0 6px 26px rgba(0,0,0,.45);
}
html #header nav a { color: var(--ap-muted) !important; font-weight:500; }
html #header nav a:hover { color: var(--ap-text) !important; }
html #header nav .menu>li>a::before { background: var(--ap-grad) !important; height:2px !important; border-radius:2px; }
html #header nav ul li.current-menu-item a {
    background: var(--ap-grad) !important; color:#07080c !important; border-radius:999px; padding:6px 18px; font-weight:700;
}
html #header nav .menu>li>.sub-menu {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important;
    border-radius:14px !important; box-shadow:0 20px 50px rgba(0,0,0,.6) !important; overflow:hidden;
}
html #header nav .menu .sub-menu li a { color: var(--ap-muted) !important; }
html #header nav .menu .sub-menu li a:hover { background: var(--ap-surface-2) !important; color: var(--ap-text) !important; }
html #menu-mobile { background: var(--ap-surface) !important; border-right:1px solid var(--ap-border); }
html #menu-mobile ul li a { color: var(--ap-muted) !important; }

/* ---------------- HERO (home = #subheader + .imgbg + .subcontainer) ---------------- */
html #subheader:not(.np) {
    position: relative; overflow: hidden;
    min-height: 460px; display:flex; align-items:center;
    border-bottom: 1px solid var(--ap-border) !important;
    background: var(--ap-bg-2) !important;
}
html #subheader .imgbg { position:absolute !important; inset:0 !important; z-index:0; }
html #subheader .imgbg img, html #subheader .imgbg .bi_ll {
    width:100% !important; height:100% !important; object-fit:cover !important; object-position:center 28% !important;
    filter: saturate(1.05);
}
/* scrim cinematografico (liviano para que se lea la imagen completa) */
html #subheader:not(.np)::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        linear-gradient(180deg, rgba(8,9,14,.18) 0%, rgba(8,9,14,.30) 45%, rgba(8,9,14,.72) 82%, var(--ap-bg) 100%),
        radial-gradient(120% 90% at 50% 125%, rgba(124,92,255,.22), transparent 60%);
}
html #subheader .subcontainer {
    position: relative; z-index:2; max-width: 860px; margin:0 auto; text-align:center; padding: 40px 20px;
}
html #subheader .subcontainer h1 {
    font-weight:800 !important; font-size: clamp(30px,4.4vw,52px) !important; line-height:1.03 !important; margin:0 0 10px;
    background: linear-gradient(120deg,#fff 28%, #d5ccff 60%, #92ecf8);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    text-shadow: 0 2px 40px rgba(124,92,255,.25);
}
html #subheader .subcontainer h2 {
    font-weight:400 !important; font-size: clamp(14px,1.5vw,17px) !important; color:#c4c9d6 !important;
    max-width:640px; margin:0 auto 26px; line-height:1.5;
}
/* buscador hero = pill glass grande */
html #searchBox { max-width:660px; margin:0 auto; }
html #searchBox form {
    display:flex; align-items:center; gap:6px; background: rgba(18,20,29,.9) !important;
    border:1px solid var(--ap-border-2) !important; border-radius:999px !important;
    box-shadow: 0 14px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(124,92,255,.06) !important;
    padding:6px 6px 6px 20px !important; overflow:hidden;
}
html #searchBox form input[type=text], html #searchBox form .sb_search {
    flex:1; background:transparent !important; color:var(--ap-text) !important; border:none !important; font-size:15px !important; height:44px !important;
}
html #searchBox form input::placeholder { color: var(--ap-muted) !important; }
html #searchBox form button, html #searchBox form .sb_submit {
    flex:none; width:46px; height:46px; border-radius:999px !important; border:none !important;
    background: var(--ap-grad) !important; color:#07080c !important;
    box-shadow:0 6px 18px rgba(124,92,255,.45) !important; font-size:0;
    display:flex !important; align-items:center; justify-content:center;
}
/* lupa SVG embebida (sin FA) */
html #searchBox form button i, html #searchBox form .sb_submit i { display:none !important; }
html #searchBox form button::after, html #searchBox form .sb_submit::after {
    content:""; width:19px; height:19px; display:block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307080c' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
html #searchBox form button:hover { filter:brightness(1.1); }
html #searchBox ul { background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; border-radius:14px !important; }
html #searchBox ul li a { color: var(--ap-muted) !important; }
html #searchBox ul li a:hover { background: var(--ap-surface-2) !important; color:var(--ap-text) !important; }
/* social del hero -> chips glass */
html #subheader .social { margin-top:22px !important; }
html #subheader .social li a {
    background: rgba(255,255,255,.06) !important; border:1px solid var(--ap-border-2) !important; color:var(--ap-text) !important;
}
html #subheader .social li a:hover { background: var(--ap-grad) !important; color:#07080c !important; }

/* ---------------- FEATURED (#featured_posts .fp_box) — art tiles ---------------- */
html #featured_posts {
    display:grid !important; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)) !important;
    gap:16px !important; margin: 22px auto !important; max-width:1320px; padding:0 12px;
}
html #featured_posts .fp_box { margin:0 !important; }
html #featured_posts .fp_box a {
    display:block; position:relative; height:150px; border-radius: var(--ap-radius) !important;
    background-size:cover !important; background-position:center !important; overflow:hidden;
    border:1px solid var(--ap-border) !important; box-shadow:none !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
html #featured_posts .fp_box a:hover { transform: translateY(-4px); border-color:var(--ap-border-2) !important; box-shadow: var(--ap-glow) !important; }
html #featured_posts .fpb_a { position:absolute; inset:0; display:flex; align-items:flex-end; padding:12px;
    background: linear-gradient(180deg, transparent 40%, rgba(8,9,14,.9)); }
html #featured_posts .fpb_a img { width:44px !important; height:44px; border-radius:10px; margin-right:10px; }
html #featured_posts .fpb_title { color:#fff !important; font-weight:700 !important; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.8); }

/* ---------------- CATBAR (pills) ---------------- */
html .catbar { margin: 20px auto !important; max-width:1320px; padding:0 12px; }
html .catbar ul { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:0; }
html .catbar li a {
    display:inline-flex; align-items:center; gap:8px; background: var(--ap-surface) !important;
    border:1px solid var(--ap-border) !important; border-radius:999px; padding:9px 18px; color:var(--ap-muted) !important;
    font-weight:600; transition: all .18s;
}
html .catbar li a:hover { border-color: transparent !important; background: var(--ap-grad) !important; color:#07080c !important; transform: translateY(-2px); }
html .catbar li a .icop { color: inherit; }

/* ---------------- SECTIONS ---------------- */
html .section { margin: 42px auto !important; max-width:1320px; padding:0 12px; }
html .section .title-section {
    position:relative; text-align:left !important; width:auto !important; display:block !important;
    color:var(--ap-text) !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.05em;
    font-size: clamp(16px,2vw,22px) !important; padding:0 0 16px 18px !important; margin:0 0 22px !important;
    border-bottom:1px solid var(--ap-border) !important;
}
html .section .title-section::before { content:""; position:absolute; left:0; top:3px; width:5px; height:22px; background:var(--ap-grad); border-radius:3px; }
html .section .title-section::after { content:""; position:absolute; left:0; bottom:-1px; width:72px; height:2px; background:var(--ap-grad); }

/* ---------------- GRID (.baps) -> poster grid responsive ---------------- */
html .baps {
    display:grid !important; grid-template-columns: repeat(auto-fill,minmax(168px,1fr)) !important;
    gap:18px !important; padding:0 !important;
}
@media (min-width:1100px){ html .baps[data-cols="6"]{ grid-template-columns: repeat(6,1fr) !important; } }

/* ---------------- CARD POSTER (.gl-card) ---------------- */
html .gl-card { position:relative; }
html .gl-card__link {
    display:flex; flex-direction:column; height:100%;
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important; overflow:hidden; color:var(--ap-text) !important;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s;
}
html .gl-card__link:hover { transform: translateY(-6px); border-color: var(--ap-border-2) !important; box-shadow: var(--ap-glow) !important; }
/* barra de acento arriba en hover */
html .gl-card__link::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-grad); transform:scaleX(0); transform-origin:left; transition:transform .25s; z-index:3; }
html .gl-card__link:hover::before { transform:scaleX(1); }

/* caja de arte: MISMO tamano (3/4) para poster e icono -> grid parejo */
html .gl-card__art { position:relative; margin:0 !important; aspect-ratio: 3/4; overflow:hidden; background: var(--ap-bg-2); }
/* neutralizamos el wrapper .bloque-imagen.w75 del padre (float + 75x75 fijo) */
html .gl-card__art .bloque-imagen {
    position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
    float:none !important; margin:0 !important; display:block !important;
}

/* POSTER (PC/MAC): box-art llena la caja */
html .gl-card--poster .gl-card__art .bloque-imagen img {
    width:100% !important; height:100% !important; object-fit:cover !important; display:block;
    border-radius:0 !important; transition: transform .35s ease;
}
html .gl-card--poster .gl-card__link:hover .gl-card__art img { transform: scale(1.06); }

/* ICON (APK/MOD): icono cuadrado centrado en un tile con gradiente (no vacio negro) */
html .gl-card--icon .gl-card__art {
    background: radial-gradient(120% 100% at 50% 30%, var(--ap-surface-2), var(--ap-bg-2) 75%);
    display:flex; align-items:center; justify-content:center;
}
html .gl-card--icon .gl-card__art .bloque-imagen {
    position:static !important; inset:auto !important; width:auto !important; height:auto !important;
    display:flex !important; align-items:center; justify-content:center;
}
html .gl-card--icon .gl-card__art .bloque-imagen img {
    width:58% !important; height:auto !important; max-height:58% !important; object-fit:contain !important;
    border-radius:24% !important; box-shadow: 0 14px 34px rgba(0,0,0,.55); transition: transform .3s ease;
}
html .gl-card--icon .gl-card__link:hover .gl-card__art img { transform: translateY(-3px) scale(1.03); }

/* ribbon de estado (new/update) dentro del arte -> badge esquina */
html .gl-card__art .bloque-status {
    position:absolute !important; top:8px !important; left:8px !important; right:auto !important;
    width:auto !important; margin:0 !important; transform:none !important; z-index:4;
    border-radius:8px !important; font-size:9px !important; padding:3px 8px !important;
}
html .gl-card__scrim { position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(8,9,14,.55)); pointer-events:none; }
html .gl-card__cta {
    position:absolute; left:50%; bottom:14px; transform: translate(-50%,12px);
    display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px;
    background: var(--ap-grad); color:#07080c; font-weight:700; font-size:12px; white-space:nowrap;
    box-shadow:0 8px 20px rgba(124,92,255,.5); opacity:0; transition: opacity .22s, transform .22s; pointer-events:none;
}
html .gl-card__link:hover .gl-card__cta { opacity:1; transform: translate(-50%,0); }
/* icono descarga SVG embebido (sin FA) */
html .gl-card__cta i { display:none !important; }
html .gl-card__cta::before {
    content:""; width:13px; height:13px; display:inline-block; flex:none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307080c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat;
}

html .gl-card__body { padding:12px 13px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
html .gl-card__title { font-size:14px !important; font-weight:700 !important; line-height:1.25; margin:0 !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ap-text) !important; }
html .gl-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12px; color:var(--ap-muted) !important; margin-top:auto; }
html .gl-card__meta .version { display:inline-flex; align-items:center; gap:4px; color:var(--ap-muted) !important; }
html .gl-card__meta .developer { color:var(--ap-faint) !important; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .gl-card__rating .box-rating { padding:0 !important; }

/* chip PC/APK/MOD (px_post_mod, inline styles del padre -> !important) */
html .b-type { background:transparent !important; padding:0 !important; margin:0 !important; border-radius:6px !important; display:inline-flex !important; }
html .b-type > span { background: var(--ap-surface-2) !important; color:var(--ap-text) !important; border:1px solid var(--ap-border-2) !important;
    border-radius:6px !important; padding:1px 7px !important; font-weight:700 !important; font-size:10px !important; letter-spacing:.05em; }
/* puntito del chip dibujado con CSS (sin depender de Font Awesome).
   currentColor = el color inline del padre (verde APK / azul PC / MOD). */
html .b-type .fa-circle {
    display:inline-block !important; width:8px; height:8px; border-radius:50%;
    background: currentColor !important; font-size:0 !important; line-height:0;
    box-shadow: 0 0 5px currentColor;
}

/* rating stars */
html .box-rating .rating, html .rating .fa-star, html .box-rating .fas { color: var(--ap-star) !important; }

/* ---------------- CARRUSEL (mq / #slidehome .px-carousel) ---------------- */
html .px-carousel-item { padding: 4px !important; }
html .px-carousel-item .gl-card__link { width: 180px; }
html .px-carousel-nav button, html #slideimages .px-prev, html #slideimages .px-next {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border-2) !important; color:var(--ap-text) !important;
    border-radius:999px !important; width:40px; height:40px;
}
html .px-carousel-nav button:hover { background: var(--ap-grad) !important; color:#07080c !important; }

/* ---------------- SIDEBAR (rank list) ---------------- */
html #sidebar .widget, html .widget {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; border-radius: var(--ap-radius) !important;
    box-shadow:none !important; overflow:hidden;
}
html .widget .widget-title, html .widget_block h2 {
    color:var(--ap-text) !important; background:transparent !important; border-bottom:1px solid var(--ap-border) !important;
    font-weight:800 !important; text-transform:uppercase; letter-spacing:.05em;
}
html #sidebar .widget ul li { border-color: var(--ap-border) !important; }
html #sidebar .widget ul li:hover { background: var(--ap-surface-2) !important; }
html #sidebar .bghover { background: linear-gradient(180deg,transparent,rgba(124,92,255,.22)) !important; }
html #sidebar .bav.wb .title, html #sidebar .widget a { color:var(--ap-text) !important; }
html #sidebar .widget a:hover { color:var(--ap-accent-2) !important; }
html #sidebar .version, html #sidebar .developer, html #sidebar .app-date { color:var(--ap-muted) !important; }

/* ---------------- BLOG CARDS ---------------- */
html .bloque-blog {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; border-radius: var(--ap-radius) !important;
    box-shadow:none !important; overflow:hidden; position:relative; transition: transform .2s, border-color .2s, box-shadow .2s;
}
html .bloque-blog::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-grad); transform:scaleX(0); transform-origin:left; transition:transform .25s; z-index:2; }
html .bloque-blog:hover { transform: translateY(-6px); border-color:var(--ap-border-2) !important; box-shadow: var(--ap-glow) !important; }
html .bloque-blog:hover::before { transform:scaleX(1); }
html .bloque-blog a.title { color:var(--ap-text) !important; font-weight:700 !important; }
html .bloque-blog .excerpt, html .bloque-blog .date { color:var(--ap-muted) !important; }

/* ---------------- CTA "VER MAS" ---------------- */
html .section a.more, html p a.more {
    display:inline-block; background: var(--ap-grad) !important; color:#07080c !important; border:none !important;
    border-radius:999px !important; padding:13px 40px !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 12px 30px -8px rgba(124,92,255,.55) !important; transition: filter .18s, transform .18s !important;
}
html .section a.more:hover, html p a.more:hover { filter:brightness(1.08); transform: translateY(-2px); opacity:1 !important; }
html .buttond:not(.danv) { background: var(--ap-grad) !important; color:#07080c !important; border:none !important; border-radius:10px !important; font-weight:700 !important; }

/* paginador */
html .pagination a, html .pagination .page-numbers { background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; color:var(--ap-muted) !important; border-radius:8px !important; }
html .pagination .page-numbers.current, html .pagination a:hover { background: var(--ap-grad) !important; color:#07080c !important; }

/* ---------------- FOOTER ---------------- */
html #footer { background: var(--ap-bg-2) !important; border-top:1px solid var(--ap-border) !important; color:var(--ap-muted) !important; position:relative; }
html #footer::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-grad); opacity:.85; }
html #footer a { color:var(--ap-muted) !important; }
html #footer a:hover { color:var(--ap-accent-2) !important; }
html #footer .widget-title, html #footer .widget .widget-title { color:var(--ap-text) !important; }

/* ---------------- SUBHEADER single (barra .np) ---------------- */
html #subheader.np { background: var(--ap-surface) !important; border-bottom:1px solid var(--ap-border) !important; box-shadow:none !important; }

/* ---------------- SCROLLBAR ---------------- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background: var(--ap-bg); }
::-webkit-scrollbar-thumb { background: var(--ap-surface-2); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ap-accent); }