/* =========================================================
   OCTIGAMES — CATEGORÍAS / JUEGOS SUELTOS
   Diseño moderno, limpio, sin bordes neón.
   ========================================================= */

.octi-category-page{
    --cat-accent-a: 45, 78, 120;
    --cat-accent-b: 89, 59, 112;
    background:#050608;
    color:#fff;
}

.octi-category-arcade{ --cat-accent-a:37,99,132; --cat-accent-b:95,63,126; }
.octi-category-art{ --cat-accent-a:116,68,103; --cat-accent-b:63,83,126; }
.octi-category-basketball{ --cat-accent-a:139,87,43; --cat-accent-b:75,62,92; }
.octi-category-beauty-fashion{ --cat-accent-a:126,64,96; --cat-accent-b:73,72,121; }
.octi-category-cooking{ --cat-accent-a:130,84,49; --cat-accent-b:91,68,54; }
.octi-category-fighting{ --cat-accent-a:121,55,55; --cat-accent-b:72,59,82; }
.octi-category-football{ --cat-accent-a:45,100,73; --cat-accent-b:50,72,100; }
.octi-category-heal-people{ --cat-accent-a:45,105,86; --cat-accent-b:55,82,103; }
.octi-category-puzzle-logic{ --cat-accent-a:74,71,126; --cat-accent-b:51,93,113; }
.octi-category-racing{ --cat-accent-a:102,60,69; --cat-accent-b:44,79,106; }
.octi-category-relaxation{ --cat-accent-a:55,68,115; --cat-accent-b:78,61,108; }
.octi-category-shooter{ --cat-accent-a:76,71,67; --cat-accent-b:55,76,94; }
.octi-category-simulation{ --cat-accent-a:49,88,97; --cat-accent-b:70,64,105; }
.octi-category-strategy{ --cat-accent-a:77,67,112; --cat-accent-b:92,73,50; }
.octi-category-tabletop{ --cat-accent-a:88,67,113; --cat-accent-b:61,88,92; }
.octi-category-words{ --cat-accent-a:49,82,116; --cat-accent-b:96,63,101; }

.octi-cat-shell{
    position:relative;
    width:min(1600px,100%);
    min-height:70vh;
    margin:0 auto;
    padding:22px 18px 80px;
    isolation:isolate;
}

/* Fondo ambiental: color sí, resplandor de borde no */
.octi-cat-shell::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:430px;
    z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(circle at 12% 0%,
            rgba(var(--cat-accent-a),.25),
            transparent 38%),
        radial-gradient(circle at 88% 5%,
            rgba(var(--cat-accent-b),.18),
            transparent 36%);
    mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);
}

.octi-cat-shell::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;
    opacity:.28;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size:32px 32px;
}

/* Solo nombre de categoría, sin descripción */
.octi-cat-top{
    position:relative;
    display:flex;
    align-items:center;
    min-height:74px;
    margin:0 0 16px;
    padding:0 2px;
}

.octi-cat-top::before{
    content:"";
    width:5px;
    height:36px;
    margin-right:12px;
    border-radius:999px;
    background:linear-gradient(
        to bottom,
        rgba(var(--cat-accent-a),.95),
        rgba(var(--cat-accent-b),.78)
    );
    box-shadow:none;
}

.octi-cat-top h1{
    margin:0;
    color:#f7f8fb;
    font-size:clamp(27px,3vw,42px);
    line-height:1;
    font-weight:1000;
    letter-spacing:-.035em;
    text-shadow:none;
}

/* Juegos sueltos, sin caja exterior */
.octi-cat-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
    gap:14px;
    align-items:start;
}

/* Tarjeta limpia */
.octi-cat-card{
    position:relative;
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,255,255,.085);
    border-radius:16px;
    background:rgba(22,24,30,.92);
    color:#fff;
    text-decoration:none;
    box-shadow:
        0 10px 24px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.035);
    transform:translateZ(0);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

/* una pequeña variación visual evita que parezca una grilla genérica */
.octi-cat-card:nth-child(7n+2),
.octi-cat-card:nth-child(7n+5){
    transform:translateY(5px);
}

.octi-cat-card-media{
    position:relative;
    width:100%;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:#0b0d11;
}

.octi-cat-card-media::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:38%;
    pointer-events:none;
    background:linear-gradient(to bottom,transparent,rgba(0,0,0,.22));
}

.octi-cat-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .24s ease,filter .24s ease;
}

.octi-cat-card-title{
    min-height:48px;
    margin:0;
    padding:9px 11px 10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:#f5f6f9;
    font-size:13px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.01em;
    text-shadow:none;
}

/* microdetalle moderno, no neón */
.octi-cat-card::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:0;
    height:2px;
    border-radius:999px 999px 0 0;
    opacity:.32;
    background:linear-gradient(
        90deg,
        rgba(var(--cat-accent-a),.9),
        rgba(var(--cat-accent-b),.72)
    );
    box-shadow:none;
}

@media (hover:hover){
    .octi-cat-card:hover{
        transform:translateY(-4px);
        border-color:rgba(255,255,255,.16);
        background:rgba(27,30,37,.98);
        box-shadow:
            0 16px 34px rgba(0,0,0,.38),
            inset 0 1px 0 rgba(255,255,255,.05);
    }

    .octi-cat-card:nth-child(7n+2):hover,
    .octi-cat-card:nth-child(7n+5):hover{
        transform:translateY(0);
    }

    .octi-cat-card:hover img{
        transform:scale(1.045);
        filter:saturate(1.04) contrast(1.02);
    }
}

.octi-cat-empty{
    grid-column:1 / -1;
    min-height:240px;
}

/* carga visual sin texto */
.octi-cat-skeleton{
    overflow:hidden;
    min-height:180px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.06);
    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,.025) 20%,
            rgba(255,255,255,.07) 38%,
            rgba(255,255,255,.025) 56%
        ),
        #14161b;
    background-size:220% 100%;
    animation:octiCatLoad 1.25s linear infinite;
}

@keyframes octiCatLoad{
    to{ background-position-x:-220%; }
}

@media(max-width:900px){
    .octi-cat-shell{
        padding-left:12px;
        padding-right:12px;
    }

    .octi-cat-grid{
        grid-template-columns:repeat(auto-fill,minmax(154px,1fr));
        gap:11px;
    }
}

@media(max-width:600px){
    .octi-cat-shell{
        padding:12px 8px 64px;
    }

    .octi-cat-top{
        min-height:58px;
        margin-bottom:10px;
    }

    .octi-cat-top::before{
        height:29px;
        width:4px;
        margin-right:9px;
    }

    .octi-cat-top h1{
        font-size:25px;
    }

    .octi-cat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .octi-cat-card{
        border-radius:13px;
    }

    .octi-cat-card:nth-child(7n+2),
    .octi-cat-card:nth-child(7n+5){
        transform:none;
    }

    .octi-cat-card-title{
        min-height:43px;
        padding:7px 8px 8px;
        font-size:11.5px;
        line-height:1.2;
    }
}

@media(max-width:360px){
    .octi-cat-grid{
        gap:7px;
    }

    .octi-cat-card-title{
        font-size:10.5px;
    }
}

@media(prefers-reduced-motion:reduce){
    .octi-cat-card,
    .octi-cat-card img{
        transition:none;
    }

    .octi-cat-skeleton{
        animation:none;
    }
}