/* Theme Layer 4 — card style variants for lobby and my-games screens.
   classic = base styles (no block needed).
   mock1   = "panel" card from mock 1: avatar head, labeled meta row, full-width action.
   mock2   = compact single-line row from mock 2: host left, tag pills right, 44px tall.
   The m1-*/m2-* classes only exist in their variant's <template>, so their rules can be
   unscoped; only overrides of page base classes (.room-card/.card) need attribute scoping. */

/* ── Lobby: mock1 (panel) ─────────────────────────────────────── */

html[data-theme-layout-lobby="mock1"] #rooms-list-container .room-card {
    border-left-width: 1px;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.6);
}

.m1-head { display: flex; align-items: center; gap: 13px; }
.m1-avatar {
    width: 46px; height: 46px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--outline-variant); border-radius: 10px;
}
.m1-id { min-width: 0; }
.m1-name { font-weight: 600; font-size: 16px; color: var(--on-surface); }
.m1-sub { font-size: 11.5px; color: var(--on-surface-variant); margin-top: 3px; }
.m1-badge {
    margin-left: auto; flex: none;
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
    color: var(--primary-container); border: 1px solid var(--primary-container);
    background: color-mix(in srgb, var(--primary-container) 8%, transparent);
}
.m1-meta {
    display: flex; gap: 22px; margin-top: 15px; padding-top: 14px;
    border-top: 1px solid var(--outline-variant);
}
.m1-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m1-k {
    font-size: 9px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--on-surface-variant);
}
.m1-v {
    font-size: 12.5px; font-weight: 600; color: var(--on-surface);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m1-mono { font-family: ui-monospace, monospace; color: var(--primary-container); }
/* Status badge (mock 1 RoomCard statusMap): tinted pill + pulsing dot, colored by status */
.m1-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
}
.m1-status .m1-dot { width: 6px; height: 6px; border-radius: 50%; }
.m1-status.waiting { color: #34d399; background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.35); }
.m1-status.waiting .m1-dot { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.6); animation: m1-pulse 2s ease-in-out infinite; }
.m1-status.playing { color: var(--on-surface-variant); background: rgba(255,255,255,.05); border: 1px solid var(--outline-variant); }
.m1-status.playing .m1-dot { background: currentColor; }
@keyframes m1-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .m1-status .m1-dot { animation: none; } }
.m1-foot { display: flex; gap: 10px; margin-top: 14px; }
.m1-btn {
    flex: 1; padding: 12px;
    background: var(--role-btn-primary-bg, var(--primary-container));
    color: var(--role-btn-primary-fg, #111);
    border: none; border-radius: 8px; cursor: pointer;
    font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

/* ── Lobby: mock2 (compact row) ───────────────────────────────── */

html[data-theme-layout-lobby="mock2"] #rooms-list-container .room-card {
    width: 100%; box-sizing: border-box;
    display: flex; flex-direction: row; align-items: center;
    justify-content: space-between; gap: 12px;
    min-height: 44px; padding: 8px 12px; margin-bottom: 6px;
    border-left-width: 1px; border-radius: 8px;
    font-family: inherit; text-align: left; cursor: pointer;
}
html[data-theme-layout-lobby="mock2"] #rooms-list-container .room-card:hover {
    border-color: var(--primary-container);
}

.m2-host { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m2-name { font-size: 13px; font-weight: 500; color: var(--on-surface); }
.m2-sub {
    font-size: 11px; font-family: ui-monospace, monospace; color: var(--on-surface-variant);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m2-tags { display: flex; align-items: center; gap: 4px; flex: none; }
.m2-tag {
    padding: 2px 6px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.05); color: var(--on-surface-variant);
    font-family: ui-monospace, monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.m2-cta {
    color: var(--primary-container);
    background: color-mix(in srgb, var(--primary-container) 10%, transparent);
}

/* ── My-games: mock1 (panel) ──────────────────────────────────── */

html[data-theme-layout-my-games="mock1"] #matches-grid {
    display: flex; flex-direction: column; gap: 14px;
}
html[data-theme-layout-my-games="mock1"] #matches-grid .card {
    border-radius: 14px; padding: 18px;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.6);
}

.m1g-head { display: flex; align-items: center; gap: 13px; }
.m1g-avatar {
    width: 46px; height: 46px; flex: none; overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    color: var(--on-surface-variant);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--outline-variant); border-radius: 10px;
}
.m1g-id { min-width: 0; }
.m1g-name { font-weight: 600; font-size: 16px; color: var(--on-surface); }
.m1g-sub { font-size: 11.5px; color: var(--on-surface-variant); margin-top: 3px; }
.m1g-pill { margin-left: auto; flex: none; }
.m1g-meta {
    display: flex; gap: 22px; margin-top: 15px; padding-top: 14px;
    border-top: 1px solid var(--outline-variant);
}
.m1g-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Room name gets a constant-width column; long names truncate via .m1g-v ellipsis. */
.m1g-room { flex: 0 0 150px; width: 150px; max-width: 150px; }
/* Time sits at the far right of the row so it never crowds the Visibility column. */
.m1g-time { margin-left: auto; padding-left: 22px; text-align: right; }
.m1g-time .m1g-v { text-align: right; }
.m1g-k {
    font-size: 9px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--on-surface-variant);
}
.m1g-v {
    font-size: 12.5px; font-weight: 600; color: var(--on-surface);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m1g-mono { font-family: ui-monospace, monospace; color: var(--primary-container); }
.m1g-foot { display: flex; gap: 10px; margin-top: 14px; }
/* width:auto cancels the base .btn width:100% — a non-growing flex item with
   flex-basis:auto would otherwise demand 100% and overflow the card. */
.m1g-foot .btn { flex: 1; width: auto; min-width: 0; }
.m1g-foot .btn-remove { flex: 0 0 auto; width: auto; }

/* Short screens: shrink mock1 match cards (padding, gaps, avatar, fonts, buttons) so more fit. */
@media (max-height: 760px) {
    html[data-theme-layout-my-games="mock1"] #matches-grid { gap: 8px; }
    html[data-theme-layout-my-games="mock1"] #matches-grid .card { padding: 12px 14px; }
    .m1g-head { gap: 10px; }
    .m1g-avatar { width: 36px; height: 36px; font-size: 1.05rem; }
    .m1g-name { font-size: 14px; }
    .m1g-sub { font-size: 10.5px; margin-top: 2px; }
    .m1g-meta { margin-top: 10px; padding-top: 10px; gap: 16px; }
    .m1g-v { font-size: 11.5px; }
    .m1g-foot { margin-top: 10px; }
    .m1g-foot .btn { padding: 9px 12px; font-size: 12px; }
}

/* ── My-games: mock2 (compact row) ────────────────────────────── */

html[data-theme-layout-my-games="mock2"] #matches-grid {
    display: flex; flex-direction: column; gap: 8px;
}
html[data-theme-layout-my-games="mock2"] #matches-grid .card {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    min-height: 44px; padding: 10px 14px; border-radius: 12px;
}

.m2g-dot {
    width: 8px; height: 8px; flex: none; border-radius: 50%;
    border: 1px solid var(--outline);
}
html[data-theme-layout-my-games="mock2"] #matches-grid .card.active .m2g-dot {
    background: var(--primary-container); border-color: var(--primary-container);
}
.m2g-label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.m2g-title { font-size: 13px; font-weight: 500; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2g-vs {
    font-size: 11px; color: var(--on-surface-variant);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m2g-tag {
    flex: none; padding: 2px 6px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.05); color: var(--on-surface-variant);
    font-family: ui-monospace, monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.m2g-cta { flex: none; width: auto; }
.m2g-rm { flex: none; width: auto; }