:root{
    --S: 4px;
    --M: 8px;
    --Primary-400: #000080;
    --Primary-300: #0000BD;
    --Primary-200: #4F49FF;
    --Primary-100: #8B8BFF;
    --Primary-50: #D1D1FF;
    --Neutral-400: #08082B;
    --Neutral-300: #242447;
    --neutral-30060: rgba(36,36,71,0.6);
    --neutral-30080: rgba(36,36,71,0.8);
    --Neutral-200: #373763;
    --Neutral-100: #8080B1;
    --Neutral-50: #DFDFF0;
    --Text-00: #FFFFFF;
    --Text-400: #999999;
    --Text-300: #BFBFBF;
    --Text-200: #DBDBDB;
    --Text-100: #F0F0F0;
    --Accent-600: #FF761A;
    --Accent-500: #16CBDF;
    --Accent-400: #FF81FF;
    --Accent-300: #F7F714;
    --Accent-200: #7100EA;
    --Accent-100: #FF4D88;
}

*{box-sizing:border-box;outline:none}
html{scroll-behavior:smooth}
body{
    background-color:var(--Neutral-400);
    color:var(--Text-200);
    margin-top:72px; /* header height offset */
}
a{color:var(--Primary-100);text-decoration:none}
a:hover{text-decoration:underline}


.paf0d524-btn{
    font: inherit;
    font-weight: 700;
    border-radius: var(--S);
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}
.paf0d524-btn--primary{
    color: var(--Text-00);
    background: var(--Primary-200);
    border-color: var(--Primary-200);
}
.paf0d524-btn--primary:hover{
    filter: brightness(1.05);
    box-shadow: 0 0 0 3px rgba(79,73,255,.35);
}
.paf0d524-btn--outline{
    color: var(--Text-100);
    background: var(--neutral-30060);
    border-color: var(--Primary-200);
    backdrop-filter: blur(8px);
}
.paf0d524-btn--outline:hover{
    background: var(--Primary-200);
    color: var(--Text-00);
}
.paf0d524-btn--p-xs{ padding: 6px 12px; font-size: 12px; }


.toc-link{
    background-color: var(--Neutral-300);
    color: var(--Text-300);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
.toc-link:hover{
    background-color: var(--Neutral-200);
    color: var(--Text-100);
}


.category-chip{
    border-radius: var(--S);
    border: 1px solid var(--Primary-200);
    background: var(--neutral-30060);
    color: var(--Text-100);
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.category-chip:hover{ background: var(--neutral-30080); }
.category-chip.is-active{ background: var(--Primary-200); color: var(--Text-00); }


.game-card{
    position: relative;
    border-radius: var(--S);
    overflow: hidden;
    background: var(--Neutral-300);
    border: 1px solid var(--Neutral-200);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.game-card:hover{
    transform: translateY(-2px);
    border-color: var(--Primary-200);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.game-card .thumb{
    aspect-ratio: 1/1;
    width: 100%;
    object-fit: cover;
}
.game-card .content{
    padding: 8px 10px 10px;
}
.game-title{
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: var(--Text-100);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}
.provider{
    font-size: 12px;
    color: var(--Text-400);
    margin-top: 4px;
}
.info-btn{
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--Neutral-100);
    background: rgba(0,0,0,.25);
    display: grid;
    place-items: center;
    color: var(--Text-300);
}
.tooltip{
    position: absolute;
    right: -12px;
    top: 32px;
    z-index: 5;
    width: 170px;
    border-radius: 8px;
    border: 1px solid var(--Neutral-200);
    background: var(--Neutral-300);
    color: var(--Text-100);
    padding: 10px;
    font-size: 12px;
    display: none;
}
.tooltip .row{
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin: 2px 0;
}
.tooltip .label{ color: var(--Text-300); }
.rating{
    margin-top: 6px;
    height: 16px;
    background: rgba(255,255,255,.15);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.rating .bar{
    height: 100%;
    background: linear-gradient(90deg, #FFBB00, #FFD166);
    width: 0%;
    transition: width .3s ease;
}


.faq-item:hover .chev{ transform: rotate(180deg); }
.faq-title{ cursor:pointer; }


.is-hidden{ display:none !important; }


@media (prefers-reduced-motion: reduce){
    *{transition:none!important;animation:none!important}
}