/*
 * Shared lobby base styles.
 *
 * Loaded BEFORE the per-template stylesheet. Holds the reset, the
 * viewport mechanics (mobile-first), and the universal grid /
 * accessibility primitives. Each template's CSS scopes its visual
 * design to `.lobby-template--<id>` and overrides what it needs.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: #0a0a0a;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--pe-tpl-font-stack, var(--pe-platform-font-body, system-ui,
        -apple-system, "Segoe UI", Roboto, sans-serif));
    line-height: 1.5;
    color: #fafafa;
    background: #0a0a0a;
    overflow-x: hidden;
}

img,
picture {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
}

/* ───────────────────────── Layout primitives ──────────────────────── */

.lobby-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.lobby-hero {
    padding: 4rem 1.5rem 3rem;
    text-align: center;
}

.lobby-hero__title {
    margin: 0 0 0.5rem;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.lobby-hero__tagline {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.85;
}

.lobby-logo {
    display: inline-block;
}

.lobby-logo--img {
    max-height: 96px;
    width: auto;
    margin: 0 auto 1rem;
}

.lobby-logo--text {
    font-weight: 800;
    font-size: clamp(1.25rem, 3vw, 2rem);
    letter-spacing: -0.01em;
}

.lobby-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.875rem;
}

.lobby-stats__sep {
    opacity: 0.4;
}

.lobby-tables {
    flex: 1;
    padding: 1rem 1.5rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.lobby-tables__heading {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.lobby-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.lobby-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.lobby-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.18);
}

.lobby-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.lobby-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.lobby-card__variant {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.lobby-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.lobby-card__stats div {
    display: flex;
    flex-direction: column;
}

.lobby-card__stats dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
    margin: 0;
}

.lobby-card__stats dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.lobby-card__cta {
    display: inline-block;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 600;
    border-radius: 8px;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.lobby-card__cta:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.lobby-empty {
    text-align: center;
    padding: 3rem 1rem;
    opacity: 0.6;
    font-size: 0.95rem;
}

.lobby-footer {
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.5;
}

/* ────────────────────────── Accessibility ─────────────────────────── */

.lobby-card__cta:focus-visible,
.lobby-card:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .lobby-card,
    .lobby-card__cta,
    .lobby-card:hover {
        transition: none;
        transform: none;
    }
}

/* ─── Layout toggles (data-attrs on .lobby-template root body) ────── */
/* Drives 4 visual combinations × N templates = 36 looks via data attrs.
   Each template's CSS may override these to fine-tune visual hierarchy
   for its specific aesthetic. */

/* Display guard: !important guards against
   per-template `display: flex/grid` rules on the same element
   (`.lobby-template--<id> .lobby-stats { display: flex }` etc.) that
   would otherwise win on equal-or-higher specificity. The toggles
   must beat ALL template variants regardless of selector wars. */
.lobby-template[data-show-header="false"] .lobby-hero {
    display: none !important;
}

.lobby-template[data-show-stats="false"] .lobby-stats {
    display: none !important;
}

.lobby-template[data-show-footer="false"] .lobby-footer {
    display: none !important;
}

.lobby-template[data-view="list"] .lobby-grid,
.lobby-template[data-view="cards"] .lobby-list-wrapper {
    display: none !important;
}

.lobby-template[data-view="list"] .lobby-list-wrapper {
    display: block;
}

/* Element-level hide toggles. The body
   root carries `data-hide-<key>="true"` for each hidden element, and
   the shared CSS turns these into `display: none !important`. Each
   selector is the canonical class shared by all 9 templates (defined
   in template HTMLs); per-template CSS may add aesthetic flourishes
   but the hide toggle wins thanks to !important. */
.lobby-template[data-hide-section-heading="true"] .lobby-tables__heading,
/* Layout-section facing alias for the same node.
   `tablesHeading` is exposed in the admin Layout toggles fieldset
   alongside showHeader/showFooter ; `sectionHeading` lives in the
   granular Hide elements grid. Either toggle hides the heading. */
.lobby-template[data-hide-tables-heading="true"] .lobby-tables__heading {
    display: none !important;
}
.lobby-template[data-hide-section-rule="true"] .lobby-tables__heading::after,
.lobby-template[data-hide-section-rule="true"] .lobby-section-rule {
    display: none !important;
}
.lobby-template[data-hide-card-variant-pill="true"] .lobby-card__variant,
.lobby-template[data-hide-card-variant-pill="true"] .lobby-list__variant {
    display: none !important;
}
.lobby-template[data-hide-card-stats="true"] .lobby-card__stats {
    display: none !important;
}
.lobby-template[data-hide-join-button="true"] .lobby-card__cta,
.lobby-template[data-hide-join-button="true"] .lobby-list__cta {
    display: none !important;
}
.lobby-template[data-hide-hero-ornament="true"] .lobby-hero__divider,
.lobby-template[data-hide-hero-ornament="true"] .lobby-hero__ornament,
.lobby-template[data-hide-hero-ornament="true"] .lobby-hero__suits {
    display: none !important;
}
.lobby-template[data-hide-footer-rule="true"] .lobby-footer__rule {
    display: none !important;
}

/* Embed-mode margin polish.
   Per-template rules push the tables grid ~56px below the hero
   ornament for standalone marketing flair. In an iframe that gap
   reads as "wasted space" between the buyer's site chrome and the
   table list. !important wins over the 9 per-template
   `.lobby-template--<id> .lobby-tables` rules without requiring
   any per-template touch.

   The "auto-hide heading in embed"
   rule that originally lived here was reverted because it
   silently broke the tables-heading toggle in the admin live preview
   iframe (the iframe loads `/lobby/:slug/embed` with mode=embed,
   so an unconditional rule made the toggle state unreflectable).
   The default-hide intent for demo lobbies is now expressed at
   the seed layer (server/db/seeds/demo.js sets
   `hideElements.tablesHeading: true` on the 18 demo lobbies) ;
   buyers' new lobbies inherit DEFAULT_HIDE_ELEMENTS (= visible)
   and can flip the toggle from the admin Layout fieldset. */
.lobby-template[data-lobby-mode="embed"] .lobby-tables {
    margin-top: 1.5rem !important;
    padding-top: 0 !important;
}
@media (max-width: 600px) {
    .lobby-template[data-lobby-mode="embed"] .lobby-tables {
        margin-top: 1rem !important;
    }
}

/* footerContent custom line — appended to the existing footer markup
   in every template. Templates may override font/color via their own
   `.lobby-footer__custom` selector; defaults to muted style consistent
   with each footer's typography. */
.lobby-footer__custom {
    margin-top: 0.5rem;
    opacity: 0.75;
    font-size: 0.85em;
    line-height: 1.45;
}

/* Transparent background guard: each template paints decorative
   backgrounds on .lobby-shell, .lobby-hero (and ::before overlays),
   .lobby-tables, .lobby-footer — not just the body root. The shared
   transparent toggle must override ALL layout-level containers so the
   embedding page bg shows through on `transparentBackground = true`.
   Card-level surfaces (.lobby-card, .lobby-list rows) keep their own
   background so the table list stays legible against the host page. */
/* transparentBackground only applies in embed mode — the embedder's
   page bg should show through. Standalone /lobby/<slug> always keeps
   the template's intended bg, otherwise dark/light templates render
   their hero text against the browser's default white viewport (e.g.
   Black Diamond white-on-white, Midnight Pro white-on-white, Velvet
   Lounge champagne-on-champagne) on mobile. */
.lobby-template[data-lobby-mode="embed"][data-transparent="true"],
.lobby-template[data-lobby-mode="embed"][data-transparent="true"] .lobby-shell,
.lobby-template[data-lobby-mode="embed"][data-transparent="true"] .lobby-hero,
.lobby-template[data-lobby-mode="embed"][data-transparent="true"] .lobby-hero::before,
.lobby-template[data-lobby-mode="embed"][data-transparent="true"] .lobby-hero::after,
.lobby-template[data-lobby-mode="embed"][data-transparent="true"] .lobby-tables,
.lobby-template[data-lobby-mode="embed"][data-transparent="true"] .lobby-footer {
    background: transparent !important;
    background-image: none !important;
}

/* Embed+transparent : neutralize the body 100vh
   floor (line 24) AND the .lobby-shell 100vh floor (line 53) so the
   iframe parent can size to actual content via the lobbyHeight
   postMessage instead of always reporting at least one viewport.
   .lobby-shell was the actual scroll-height
   driver — body min-height alone left the shell as a 100vh inner
   container, so document.documentElement.scrollHeight in postHeight()
   still reported viewport-floor and the iframe parent kept inflating
   to a viewport (dead transparent gap below the table list on short
   lobbies). */
.lobby-template[data-lobby-mode="embed"][data-transparent="true"],
.lobby-template[data-lobby-mode="embed"][data-transparent="true"] .lobby-shell {
    min-height: 0 !important;
}

/* List view base styles (templates may override colours/spacing) */

.lobby-list-wrapper {
    overflow-x: auto;
}

.lobby-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.lobby-list thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

.lobby-list tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.lobby-list tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.lobby-list td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
}

.lobby-list__name {
    font-weight: 600;
}

.lobby-list__variant {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

.lobby-list__blinds,
.lobby-list__stack,
.lobby-list__seated {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.lobby-list__cta-cell {
    text-align: right;
}

.lobby-list__cta {
    display: inline-block;
    padding: 0.4rem 0.875rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: filter 0.15s ease;
    /* Default visible-button styling so list view CTAs always look
       like buttons even when a template doesn't override .lobby-list__
       cta. Honors custom palette slots — owners can
       restyle per-lobby via the admin Advanced palette panel. */
    background: var(--lobby-join-bg, var(--lobby-primary, rgba(255, 255, 255, 0.12)));
    color: var(--lobby-join-text-color, var(--lobby-secondary, #fff));
}

.lobby-list__cta:hover {
    filter: brightness(1.1);
}

/* Mobile list view : reflow each <tr> into ONE compact, dense row
   (app-style list), not a tall stacked card. data-label attrs on the
   td drive the micro labels via `::before { content: attr(data-label) }`.
   Templates inherit these defaults; per-template CSS can re-skin
   colours/borders. !important guards against per-template rules with
   higher specificity (templates often scope to
   `.lobby-template--<id> .lobby-list-wrapper td` which beats the shared
   selector on equal media-rule cascade).

   A prior reflow (name header → 4 stacked label/value rows →
   full-width JOIN) was too tall : ~1 table per screen, heavy scroll.
   This pass lays each row out as a 2-line CSS grid :
     line 1 : table name (ellipsis) ............ Join (right, centered)
     line 2 : variant · blinds · stack · seated  (inline meta run)
   The Join cell spans both rows so it stays vertically centered. Cuts
   row height ~3x → many more tables visible per screen. The grid uses
   explicit per-cell placement (cells are direct <td> children of <tr>,
   so they can't be wrapped in a container without breaking the desktop
   table / invalid markup) — each meta value owns its own auto column. */
@media (max-width: 600px) {
    .lobby-list thead {
        display: none !important;
    }
    .lobby-list,
    .lobby-list tbody {
        display: block !important;
        width: 100% !important;
    }
    .lobby-list tr {
        display: grid !important;
        grid-template-columns: auto auto auto 1fr auto;
        grid-template-rows: auto auto;
        align-items: center !important;
        column-gap: 0.5rem !important;
        row-gap: 0.15rem !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.55rem 0.875rem !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    .lobby-list tr:last-child {
        border-bottom: 0 !important;
    }
    /* Reset the desktop table-cell box so cells behave as grid items. */
    .lobby-list td {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        width: auto !important;
        white-space: nowrap;
    }
    /* Line 1 left : table name claims the row width and ellipsizes. It
       spans the meta columns AND the flexible spacer — a long name's
       overflow is absorbed by the 1fr spacer track (infinite growth
       limit), so it can't inflate the content-sized meta columns. */
    .lobby-list td.lobby-list__name {
        grid-row: 1 !important;
        grid-column: 1 / 5 !important;
        min-width: 0 !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .lobby-list td.lobby-list__name::before {
        display: none;
    }
    /* Line 2 : compact inline meta values, each in its own auto column.
       Shows the join-decision trio (variant / blinds / seated) — the same
       key fields the owner called out. Stack is hidden in this compact
       mobile view (still shown on desktop list + on cards mode) to keep
       the row to a single, comfortably-fitting meta line. */
    .lobby-list td.lobby-list__variant { grid-row: 2 !important; grid-column: 1 !important; }
    .lobby-list td.lobby-list__blinds  { grid-row: 2 !important; grid-column: 2 !important; }
    .lobby-list td.lobby-list__seated  { grid-row: 2 !important; grid-column: 3 !important; }
    .lobby-list td.lobby-list__stack   { display: none !important; }
    .lobby-list td.lobby-list__variant,
    .lobby-list td.lobby-list__blinds,
    .lobby-list td.lobby-list__seated {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        opacity: 0.85;
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
    }
    /* Variant can be long ("No-Limit Hold'em") — clamp so it never blows
       the single meta line; no micro label (it's self-evident). */
    .lobby-list td.lobby-list__variant {
        max-width: 7.5rem;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        opacity: 0.7;
    }
    .lobby-list td.lobby-list__variant::before {
        display: none;
    }
    /* Tiny dim label prefix keeps the numeric values legible at a glance. */
    .lobby-list td.lobby-list__blinds::before,
    .lobby-list td.lobby-list__seated::before {
        content: attr(data-label);
        font-weight: 600;
        opacity: 0.5;
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: 0.3rem;
    }
    /* Join : compact, right-aligned, vertically centered across both lines. */
    .lobby-list td.lobby-list__cta-cell {
        grid-row: 1 / span 2 !important;
        grid-column: 5 !important;
        align-self: center !important;
        justify-self: end !important;
        text-align: right !important;
    }
    .lobby-list td.lobby-list__cta-cell::before {
        display: none;
    }
    .lobby-list__cta {
        display: inline-block !important;
        width: auto !important;
        min-height: 40px !important;
        padding: 0.55rem 1.05rem !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
}

/* ────────────────────────── Mobile breakpoint ─────────────────────── */
/* Universal mobile polish — applies to ALL 9 templates. Per-template
   tweaks layer on top of these defaults: tighter hero, fluid type,
   single-row stats, readable footer. */

@media (max-width: 600px) {
    .lobby-hero {
        padding: 2rem 1rem 1.5rem;
    }
    .lobby-hero h1,
    .lobby-hero .lobby-hero__title,
    .lobby-hero .lobby-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        line-height: 1.15;
    }
    .lobby-hero p,
    .lobby-hero .lobby-hero__tagline,
    .lobby-hero .lobby-tagline {
        font-size: clamp(0.875rem, 3.4vw, 1rem);
    }
    .lobby-tables {
        padding: 0.5rem 1rem 2.5rem;
    }
    .lobby-section__heading {
        font-size: 1.1rem;
    }
    .lobby-grid {
        gap: 0.875rem;
        grid-template-columns: 1fr;
    }
    /* Card stats : on very narrow screens, stack vertically rather
       than cramming 3 columns of small numbers. Templates can opt out
       by re-declaring at higher specificity. */
    .lobby-card__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1rem;
    }
    .lobby-card__stat-label {
        font-size: 0.65rem;
    }
    .lobby-card__stat-value {
        font-size: 1.05rem;
    }
    .lobby-footer {
        padding: 1.5rem 1rem 2rem;
        font-size: 0.8rem;
    }
    /* Don't cram tagline against ornaments on narrow viewports. */
    .lobby-hero__ornament,
    .lobby-hero__ornament-left,
    .lobby-hero__ornament-right {
        display: none;
    }
}

/* Extra-narrow phones (iPhone SE class). */
@media (max-width: 380px) {
    .lobby-hero {
        padding: 1.5rem 0.875rem 1.25rem;
    }
    .lobby-card,
    .lobby-card__body {
        padding: 1rem 0.875rem;
    }
}