.home-tables-band {
    padding-block: 2.5rem;
    background: var(--mt-bg-secondary, #131E32);
    border-block: 1px solid var(--mt-border);
}
.home-tables-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.home-tables-intro { color: var(--mt-text-secondary); margin: 0; font-size: .9rem; }
.home-tables-tools, .home-tables-scroll { display: flex; align-items: center; gap: .5rem; }
.home-tables-scroll[hidden] { display: none; }
.home-tables-all, .home-tables-scroll button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    border: 1px solid var(--mt-border);
    border-radius: .65rem;
    background: var(--mt-surface);
    color: var(--mt-text);
    font-size: .8rem;
}
.home-tables-scroll button { width: 2.75rem; }
.home-tables-scroll svg { width: 1.1rem; height: 1.1rem; }
.home-tables-scroll button[aria-disabled="true"] { opacity: .45; cursor: default; }
.home-tables-all:hover, .home-tables-scroll button:not([aria-disabled="true"]):hover {
    border-color: rgb(170 200 255 / .32);
    color: var(--mt-text);
    background: var(--mt-surface-hover);
}
.home-tables-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max(16rem, calc((100% - 3rem) / 4));
    gap: 1rem;
    margin: 1.35rem 0 0;
    padding: .5rem .25rem 1rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--mt-border) transparent;
}

/* Table card (Halo, 2026-11-10): a compact ticket. The state colour only lights live tables (open: success,
   playing: info); finished games stay quiet. Players are small chips, winners are marked in violet, and the
   whole card leads to its main action. */
.home-table-card {
    --home-table-accent: var(--mt-text-secondary);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto 1fr auto;
    gap: .65rem .75rem;
    min-width: 0;
    padding: 1rem 1.05rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    background: var(--mt-tile-fill, var(--mt-surface)) padding-box, var(--mt-tile-frame, linear-gradient(var(--mt-border), var(--mt-border))) border-box;
    box-shadow: var(--mt-elev-1, none);
    scroll-snap-align: start;
    transition: transform .25s ease, box-shadow .25s ease;
}
.home-table-card > * { grid-column: 1 / -1; min-width: 0; }
.home-table-card:is([data-state="open"], [data-state="playing"]) {
    background:
        radial-gradient(120% 70% at 0 0, color-mix(in srgb, var(--home-table-accent) 16%, transparent), transparent 62%) padding-box,
        var(--mt-tile-fill, var(--mt-surface)) padding-box,
        linear-gradient(180deg, color-mix(in srgb, var(--home-table-accent) 60%, transparent), var(--mt-border-soft, var(--mt-border)) 45%) border-box;
}
.home-table-card[data-state="open"] { --home-table-accent: var(--mt-success); }
.home-table-card[data-state="playing"] { --home-table-accent: var(--mt-info); }
.home-table-card:is(:hover, :focus-within) {
    background: var(--mt-tile-fill, var(--mt-surface)) padding-box, var(--mt-gradient) border-box;
    box-shadow: var(--mt-elev-3, 0 14px 32px rgba(0,0,0,.35));
}
@media (hover: hover) { .home-table-card:hover { transform: translateY(-4px); } }

.home-table-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.home-table-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .18rem .55rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--home-table-accent) 13%, transparent);
    color: var(--home-table-accent);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.home-table-state::before { content: ""; width: .42rem; height: .42rem; background: currentColor; border-radius: 50%; }
.home-table-card:is([data-state="open"], [data-state="playing"]) .home-table-state::before { box-shadow: 0 0 8px 1px currentColor; }
.home-table-card[data-state="playing"] .home-table-state::before { animation: home-table-live 2.4s ease-in-out infinite; }
@keyframes home-table-live { 50% { box-shadow: 0 0 2px 0 currentColor; opacity: .55; } }
.home-table-engine { color: var(--mt-text-secondary); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }

.home-table-card h3 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
.home-table-card h3 a { position: relative; z-index: 2; color: var(--mt-text); text-decoration: none; }
.home-table-card h3 a:hover { color: var(--mt-primary-hover); }

.home-table-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: -.2rem; }
.home-table-tags > span { padding: .12rem .5rem; border-radius: 99px; background: rgb(255 255 255 / .05); color: var(--mt-text-secondary); font-size: .66rem; }
.home-table-tags .home-table-variant { background: color-mix(in srgb, var(--mt-violet, #A78BFA) 14%, transparent); color: var(--mt-violet, #A78BFA); }

/* Players: chips with a round avatar; the avatar markup carries inline sizes, hence the overrides. */
.home-table-players { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .35rem; list-style: none; padding: 0; margin: .1rem 0 0; }
.home-table-players li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .18rem .6rem .18rem .2rem;
    border: 1px solid var(--mt-border-soft, var(--mt-border));
    border-radius: 99px;
    background: rgb(255 255 255 / .035);
    font-size: .74rem;
    line-height: 1.2;
}
.home-table-players li > :first-child { width: 22px !important; height: 22px !important; flex: 0 0 22px; border-radius: 50% !important; line-height: 22px !important; font-size: .7rem; }
.home-table-initials { display: grid; place-items: center; background: var(--mt-surface-hover); color: var(--mt-primary); font-weight: 700; }
.home-table-players li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-table-players small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-table-players li:has(small) {
    border-color: color-mix(in srgb, var(--mt-violet, #A78BFA) 55%, transparent);
    background: color-mix(in srgb, var(--mt-violet, #A78BFA) 13%, transparent);
    color: var(--mt-violet-hover, #C4B5FD);
}
.home-table-players li:has(small) > :first-child { box-shadow: 0 0 0 2px var(--mt-violet, #A78BFA), 0 0 10px -1px var(--mt-violet, #A78BFA); }
.home-table-no-players { margin: 0; color: var(--mt-text-secondary); font-size: .8rem; }

/* Last row: the result on the left, the action on the right. */
.home-table-summary {
    grid-column: 1;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    padding-top: .75rem;
    border-top: 1px solid var(--mt-border-soft, var(--mt-border));
}
.home-table-summary strong { font-size: .8rem; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.home-table-card[data-state="closed"] .home-table-summary strong { color: var(--mt-text); }
.home-table-card:is([data-state="open"], [data-state="playing"]) .home-table-summary strong { color: var(--home-table-accent); }
.home-table-summary > span, .home-table-wait { font-size: .7rem; color: var(--mt-text-secondary); }
.home-table-action {
    grid-column: 2;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.4rem;
    padding: .4rem .8rem;
    border-radius: .65rem;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
/* The whole card opens the main action; the title keeps its own link above this layer. */
.home-table-action::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 1rem; }
.home-table-arrow { transition: transform .2s ease; }
.home-table-card:hover .home-table-arrow { transform: translateX(3px); }
.home-table-action.btn-outline-light { border-color: var(--mt-border-soft, var(--mt-border)); color: var(--mt-text); }
.home-table-card:hover .home-table-action.btn-outline-light { border-color: rgb(170 200 255 / .32); background-color: var(--mt-surface-hover); }
.home-tables-band :is(a, button, .home-tables-row):focus-visible { outline: 2px solid var(--mt-primary); outline-offset: 2px; }
@media (max-width: 575.98px) {
    .home-tables-band { padding-block: 1.75rem; }
    .home-tables-row { grid-auto-columns: min(84%, 18rem); }
    .home-table-card { padding: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .home-table-card, .home-table-arrow { transition: none; }
    .home-table-card:hover { transform: none; }
    .home-table-card[data-state="playing"] .home-table-state::before { animation: none; }
}