/* ballrunner.css — Ball Runner 3D game page */
.videos{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.video{
    position:relative;
    aspect-ratio:16/9;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;background:#000;
}

.video iframe{
    position:absolute;
    inset:0;width:100%;
    height:100%;border:0;
}

.detail{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:20px;
    align-items:start;
}

.detail .card p{
    max-width:none;
    margin-bottom:0;
}

.detail .card p+p{
    margin-top:14px;
}

.detail h3.sub{
    font-size:15px;
    margin-bottom:16px;
    letter-spacing:.04em;
}

.meta--stack{
    grid-template-columns:1fr;
}

.meta--stack div,.meta--stack div:nth-child(odd){
    border-right:0;
    border-bottom:1px solid var(--line);
}

.meta--stack div:last-child{
    border-bottom:0;
}

.meta--stack div:nth-last-child(2){
    border-bottom:1px solid var(--line);
}

.stores{
    display:flex;
    flex-wrap:wrap;
    gap:10px;margin-top:18px;
}

.stores .btn[aria-disabled="true"]{
    opacity:.55;
    cursor:default;
    pointer-events:none;
}

.gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.gallery button{
    padding:0;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:#000;
    cursor:zoom-in;
    transition:border-color .2s;
}

.gallery button:hover{
    border-color:rgba(233,185,90,.5);
}

.gallery img{
    width:100%;
    aspect-ratio:2/1;
    object-fit:cover;
}

.lightbox{
    position:fixed;
    inset:0;
    z-index:250;
    display:none;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:rgba(3,4,5,.92);
}

.lightbox.open{
    display:flex;
}

.lightbox img{
    max-height:86vh;
    width:auto;
    border:1px solid var(--line);
    border-radius:var(--radius);
}

.lightbox button{
    position:absolute;
    top:18px;
    right:20px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--text);
    font-size:22px;
    cursor:pointer;
}

.social{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}


.stores--flush{margin-top:0}
@media (max-width:960px){
    .detail{
        grid-template-columns:1fr;
    }
}
@media (max-width:640px){
    .videos{
        grid-template-columns:1fr;
    }

    .gallery{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}