/* Per-game maps hub — card grid with live counts */

body .wrap:has(.ml-page){max-width:1320px}

.ml-page .sv-stats-inline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ml-page .sv-si{font-size:.72rem;color:var(--muted);font-weight:500;white-space:nowrap}
.ml-page .sv-si b{font-family:var(--mono);font-weight:800;color:var(--text);font-size:.74rem}
.ml-page .sv-si.on b{color:var(--green)}
.ml-page .sv-si.ac b{color:var(--ac)}
.ml-page .sv-si-sep{color:var(--muted);opacity:.35;font-size:.6rem}

.ml-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
}

.ml-card{
    display:flex;
    flex-direction:column;
    background:var(--bg1);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    color:inherit;
    text-decoration:none;
    min-width:0;
    transition:border-color .18s, transform .18s, box-shadow .18s;
}
.ml-card:hover{
    border-color:var(--ac15);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.ml-card:hover .ml-shot img{
    opacity:.72;
    transform:scale(1.03);
}

.ml-shot{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
}
.ml-shot::before{
    content:'';
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
    background-size:28px 28px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.12), transparent 60%);
}
.ml-shot::after{
    content:'';
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 100%);
}
.ml-shot img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;display:block;
    opacity:.58;
    filter:saturate(.72) brightness(.88);
    transition:opacity .2s ease, transform .25s ease;
}

.ml-no-preview{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    z-index:2;
    font-family:var(--mono);
    font-size:.72rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:var(--muted);
    opacity:.5;
    pointer-events:none;
    user-select:none;
    white-space:nowrap;
}

.ml-live{
    position:absolute;
    top:8px;right:8px;
    z-index:2;
    display:flex;align-items:center;gap:5px;
    font-size:.62rem;font-weight:700;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    backdrop-filter:blur(6px);
}
.ml-live.on{
    color:var(--green);
    border-color:var(--green-border);
    background:var(--green-bg);
}
.ml-live-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--muted);
    flex-shrink:0;
}
.ml-live.on .ml-live-dot{
    background:var(--green);
    box-shadow:0 0 6px rgba(92,184,138,.35);
}

.ml-meta{
    padding:10px 12px 12px;
    display:flex;flex-direction:column;gap:4px;
    min-width:0;
}
.ml-name{
    font-family:var(--mono);
    font-size:.82rem;
    font-weight:700;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ml-sub{
    font-size:.68rem;
    color:var(--muted);
}

@media(max-width:1100px){
    .ml-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media(max-width:720px){
    .ml-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px}
    .ml-name{font-size:.74rem}
    .ml-live{font-size:.58rem;padding:2px 6px;top:6px;right:6px}
}
@media(max-width:420px){
    .ml-grid{grid-template-columns:1fr}
}
.ml-card.is-hidden{display:none!important}
.ml-page .sv-rst{cursor:pointer;font:inherit}