/* ---------------------------------------------------------
   The Parlor (games/index.php) — page styles.

   The Parlor now lives in the family dark scheme: the page pulls its
   background, text colours and buttons from app_core.css + common.css
   like every other page. This sheet only lays out the Parlor-specific
   furniture (the crown header, the games grid, the featured table and
   the tag chips), coloured from the shared tokens — no private palette.
--------------------------------------------------------- */

/* page width */
.parlor-main { max-width: 66rem; margin: 0 auto; padding: 0 1.5rem; }

/* the constant line at the top (2026-10-23): the greeting with the name; the rejoin line and
   its button when a live Bonzai seat is waiting (.is-rejoin, set by the page's script) */
.parlor-line {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: var(--space-sm, .75rem);
    margin: 0 0 1rem; padding: .7rem 1rem; border-radius: .5rem;
    border: 1px solid var(--border, #30363d); background: rgba(0, 0, 0, .25);
    color: var(--text-soft, #c3ccd8); font-size: .95rem;
}
.parlor-line.is-rejoin { border-color: rgba(244, 201, 93, .55); color: var(--text, #e6edf3); }
.parlor-line .btn { flex: 0 0 auto; white-space: nowrap; }
.parlor-line .parlor-line-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }

/* ---- crown header (kept: the colourful title art) ---- */
.parlor-crown {
    display: block;
    width: 100%;
    max-width: min(38rem, 88%);
    height: auto;
    margin: 0 auto 0.25rem;
    filter: drop-shadow(0 0.4rem 1.1rem rgba(0,0,0,.55));
}

/* ---- family navbar on the Parlor ----
   The Parlor's own buttons (Guided tour / How to Play / House Rules /
   Sign in) render as .btn.btn-tertiary in a .global-nav bar, exactly
   like the shared nav. When a signed-in player also gets the shared
   global_nav include, flatten its wrapper so its buttons flow into the
   same centred row instead of forming a second bar. */
.parlor-nav .global-nav,
.parlor-nav .global-nav .global-nav-inner { display: contents; }
.parlor-nav .global-nav-inner {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

/* ---- section shell ---- */
.parlor-main section { padding: 1.75rem 0; }
.sechead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.25rem; text-align: left;
}
.kicker {
    font-size: 1.35rem; font-weight: 700; color: var(--text);
    margin: 0; letter-spacing: 0.01em;
}
.subkick { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

/* ---- featured table (Bonzai) ---- */
.feature {
    position: relative; overflow: hidden;
    border-radius: 1rem; border: 1px solid var(--border);
    background: #161b22;
    padding: 1.9rem 2rem;
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.6rem;
    align-items: center; text-align: left;
    box-shadow: 0 0.75rem 2rem rgba(0,0,0,.3);
}
.feature .flag {
    display: inline-block; font-size: 0.7rem; font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--accent); margin: 0 0 0.75rem;
}
.feature h3 { margin: 0 0 0.75rem; }
.feature h3 img {
    height: 4.6rem; width: auto; display: block;
    filter: drop-shadow(0 0.375rem 1rem rgba(0,0,0,.5));
}
.feature p {
    font-size: 0.95rem; line-height: 1.62; margin: 0 0 1.1rem;
    color: var(--text-soft); max-width: 46ch;
}
.feature .tags { margin: 0 0 1.25rem; }
.feature .art { display: flex; align-items: center; justify-content: center; }

/* fanned cards flourish (depicts real playing cards) */
.fan { position: relative; width: 100%; height: 12.5rem; }
.pcard {
    position: absolute; top: 0.375rem; left: 50%;
    width: 6.5rem; height: 9.4rem; border-radius: 0.7rem; margin-left: -3.25rem;
    background: linear-gradient(160deg, #fbf8f1 0%, #e9e2d2 100%);
    box-shadow: 0 0.75rem 1.6rem rgba(0,0,0,.5); transform-origin: 50% 118%;
}
.pcard .corner {
    position: absolute; top: 0.5rem; left: 0.7rem; line-height: 1;
    font-weight: 800; font-size: 1.5rem;
}
.pcard .corner small { display: block; font-size: 1.125rem; }
.pcard .pip { position: absolute; bottom: 0.5rem; right: 0.75rem; font-size: 2.5rem; }
.pcard.red { color: #c0392b; }
.pcard.ink { color: #28241e; }
.pcard.back {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-legacy) 100%);
    border: 0.2rem solid #fbf8f1;
}
.pcard.back::after {
    content: 'B'; position: absolute; inset: 0; display: grid; place-items: center;
    color: rgba(255,255,255,.9); font-size: 2.5rem; font-weight: 900;
}

/* ---- tag chips ---- */
.tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tag {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-soft); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.25rem 0.7rem;
    background: rgba(255,255,255,0.04);
}

/* ---- games grid ---- */
.gamegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.game {
    border-radius: 0.9rem; padding: 1.5rem; border: 1px solid var(--border);
    background: #161b22; text-align: left;
    display: flex; flex-direction: column; gap: 0.75rem;
    transition: transform .14s, border-color .2s, box-shadow .2s;
}
.game:hover {
    transform: translateY(-0.2rem); border-color: var(--accent);
    box-shadow: 0 0.9rem 1.9rem rgba(0,0,0,.34);
}
.game .toprow { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.game h3 { margin: 0; }
.game h3 img {
    height: 3.375rem; width: auto; display: block;
    filter: drop-shadow(0 0.3125rem 0.75rem rgba(0,0,0,.5));
}
.game .badge {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent);
}
.game p { font-size: 0.88rem; line-height: 1.58; margin: 0; flex: 1; color: var(--text-soft); }
.game .foot { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.15rem; }
.feature .btnrow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.parlor-main .go {
    font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
    text-decoration: none; white-space: nowrap;
    color: #fff; background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.55); border-radius: 0.45rem;
    padding: 0.55rem 1.15rem; transition: background .18s, border-color .18s;
}
.parlor-main .go:hover { background: rgba(0,0,0,0.78); border-color: var(--accent-hover); }

/* ---- House Rules cards (used on games/house.php) ---- */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; text-align: left; }
.rule {
    background: #161b22; border: 1px solid var(--border);
    border-radius: 0.85rem; padding: 1.4rem;
}
.rule h3 { font-size: 1.05rem; color: var(--text); margin: 0 0 0.5rem; }
.rule p { font-size: 0.86rem; line-height: 1.6; margin: 0; color: var(--text-soft); }

@media (max-width: 52rem) {
    .feature { grid-template-columns: 1fr; padding: 1.6rem 1.5rem; }
    .feature .art { order: -1; }
    .fan { height: 10.6rem; }
}
@media (max-width: 38rem) {
    .gamegrid { grid-template-columns: 1fr; }
    .rules { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- How to Play page (games/rules.php) — family-scheme rule cards ---- */
.grule { background: #161b22; border: 1px solid var(--border); border-radius: 1rem;
    padding: 1.6rem 1.75rem; scroll-margin-top: 1.5rem; text-align: left; }
.grule + .grule { margin-top: 1.1rem; }
.grule .rhead { display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.grule h3 { font-size: 1.35rem; font-weight: 700; color: var(--text); margin: 0; letter-spacing: .01em; }
.grule h3 span { color: var(--accent); }
.grule .tagline { font-size: 0.8rem; color: var(--text-muted); }
.grule h4 { font-size: 0.92rem; font-weight: 700; color: var(--accent);
    margin: 1.1rem 0 0.25rem; letter-spacing: .02em; }
.grule p { font-size: 0.9rem; line-height: 1.64; margin: 0; color: var(--text-soft); }
.grule .rec { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
    font-size: 0.84rem; color: var(--text-soft); }
.grule .rec b { color: var(--text); }
.grule .rfoot { margin-top: 1.25rem; display: flex; gap: 1rem; align-items: center; }
.grule .rfoot a.play {
    font-weight: 600; font-size: 0.85rem; letter-spacing: .02em; text-decoration: none;
    color: #fff; background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.55);
    border-radius: 0.45rem; padding: 0.55rem 1.15rem; transition: background .18s, border-color .18s; }
.grule .rfoot a.play:hover { background: rgba(0,0,0,0.78); border-color: var(--accent-hover); }
.grule .rfoot a.games {
    font-weight: 600; font-size: 0.85rem; letter-spacing: .02em; text-decoration: none;
    color: var(--text); background: transparent; border: 1px solid rgba(255,255,255,0.35);
    border-radius: 0.45rem; padding: 0.55rem 1.15rem; transition: background .18s, border-color .18s; }
.grule .rfoot a.games:hover { border-color: var(--accent-hover); background: rgba(255,255,255,0.06); }

/* The gap between the tagline and the navbar was 116px - the tagline's own
   20px, the .gap-hg spacer (32px) and the nav's 64px top margin, stacked -
   against 8px between the crown and the tagline (Leslie, 2026-10-10:
   "unacceptable gap"). Now about 28px: the tagline's margin plus a thin
   spacer, no nav margin. Parlor pages only (games list, How to Play,
   House Rules). */
.site-header + .gap-hg { margin-top: 0.5rem; }
nav.parlor-nav { margin-top: 0; }

/* ---- THE CARDS 20% SMALLER (Leslie, 2026-10-22: "shrunk a bit, let's try
   20% to start ... bring the cards into alignment with the navbar width and
   not have to scroll to see the entire page"). The games block narrows from
   66rem to 52.8rem and everything inside it - padding, wordmarks, the card
   fan, text - steps down with it. Button rows are the site's .button-row
   (css/core/app_core.css), as on every other page. ---- */
#games { max-width: 52.8rem; margin: 0 auto; padding-top: 1.25rem; }
.feature { padding: 1.5rem 1.6rem; gap: 1.3rem; }
.feature .flag { margin-bottom: 0.6rem; }
.feature h3 { margin-bottom: 0.6rem; }
.feature h3 img { height: 3.7rem; }
.feature p { font-size: 0.9rem; line-height: 1.55; margin-bottom: 0.9rem; }
.feature .tags { margin-bottom: 0; }
.fan { height: 10rem; transform: scale(0.8); transform-origin: 50% 40%; }
.game { padding: 1.2rem; gap: 0.6rem; }
.game h3 img { height: 2.7rem; }
.game p { font-size: 0.85rem; line-height: 1.5; }
@media (max-width: 52rem) { .fan { height: 8.5rem; } }