/* Shared game chrome: the site header and footer that wrap every game page.
 *
 * The problem this solves: a game needs its own world — Timeliner: Movies is a
 * dark auditorium, and the next game will be something else entirely — but a
 * player who is inside one should still be able to see that they are on
 * ComePlayAlong, reach their account and get back out. Before this, the game
 * pages had a hand-rolled mini logo, no navigation and no footer, so they read
 * as a stray prototype rather than as part of the site.
 *
 * The bars are the same on every game and are not themeable. An earlier draft
 * let each game recolour them, so Timeliner wore a near-black header; the
 * effect was that the one part of the screen meant to say "you are still on
 * ComePlayAlong" was the part that changed most from game to game. The game
 * owns everything between the bars; the bars stay the light site chrome, so
 * they read the same whether you arrive from the homepage or from a game.
 */

/* --- page frame --------------------------------------------------------- */

/* Published for the games: how much vertical space the two bars take between
   them. A game screen that wants to fill the window needs to know what is left
   of it, and the alternative is every game hard-coding these numbers and one of
   them being wrong the next time the header changes. Custom properties resolve
   at computed-value time, so a game may read this from a stylesheet that loaded
   before this one. */
:root {
    --chrome-height: 160px;
    --chrome-foot: 92px;
}

/* A game screen is often shorter than the window — a join form is three fields
   — and a footer stranded halfway up the page looks like a rendering fault.
   Making the body a column lets the footer take up the slack. Overlays in the
   games are position: fixed, so they are out of flow and unaffected. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- bars --------------------------------------------------------------- */

.game-chrome,
.game-foot {
    background: #ffffff;
    /* The game pages paint fixed curtains and grain behind everything at
       z-index -1; the bars have to sit above that, not inside it. */
    position: relative;
    z-index: 20;
}

.game-chrome {
    position: sticky;
    top: 0;
    border-bottom: 1px solid rgba(16, 44, 43, .14);
}

/* Pushed to the bottom on a short page. The gap above it on a long page comes
   from the game's own trailing padding, not from a margin here, because a
   margin would fight the auto and reintroduce the stranded footer. */
.game-foot {
    margin-top: auto;
    border-top: 1px solid rgba(16, 44, 43, .14);
}

.chrome-inner,
.foot-inner {
    width: min(calc(100% - 36px), 1120px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 26px;
}

.chrome-inner { min-height: 68px; }
.foot-inner { min-height: 92px; gap: 22px; }

/* --- logo, identical to the homepage ------------------------------------ */

.game-chrome .logo,
.game-foot .logo {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #102c2b;
    font-family: "Space Grotesk", sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.055em;
    white-space: nowrap;
    text-decoration: none;
}

.game-chrome .logo-name,
.game-foot .logo-name { display: inline-flex; align-items: baseline; }
.game-chrome .logo-name strong,
.game-foot .logo-name strong { color: inherit; font: inherit; }
.game-chrome .logo-name em,
.game-foot .logo-name em {
    margin-left: 3px;
    color: #ff6046;
    font: 700 11px "DM Sans", sans-serif;
    font-style: normal;
    letter-spacing: -.01em;
}

.game-chrome .logo-dice,
.game-foot .logo-dice {
    --pip: 6px;
    width: 33px;
    height: 33px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    place-items: center;
    gap: 2px;
    padding: 5px;
    border-radius: 10px;
    background: #102c2b;
    transform: rotate(-8deg);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16);
}

.game-chrome .logo-dice i,
.game-foot .logo-dice i {
    width: var(--pip);
    height: var(--pip);
    border-radius: 50%;
    position: static;
}
.game-chrome .logo-dice i:nth-child(3n+1),
.game-foot .logo-dice i:nth-child(3n+1) { background: #ffd457; }
.game-chrome .logo-dice i:nth-child(3n+2),
.game-foot .logo-dice i:nth-child(3n+2) { background: #ff6046; }
.game-chrome .logo-dice i:nth-child(3n+3),
.game-foot .logo-dice i:nth-child(3n+3) { background: #26b8ae; }

/* --- navigation --------------------------------------------------------- */

.chrome-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}
.chrome-nav a {
    color: #6a7773;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.chrome-nav a:hover { color: #102c2b; }

.chrome-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Context for the screen you are on: "Table", "Board". Carried over from the
   old per-page headers, which is where the only clue used to live. */
.chrome-tag {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(16, 44, 43, .14);
    color: #6a7773;
    font-size: 12.5px;
    font-weight: 700;
}

.chrome-account {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(16, 44, 43, .3);
    color: #102c2b;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* --- footer ------------------------------------------------------------- */

.foot-links {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.foot-links a {
    color: #6a7773;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}
.foot-links a:hover { color: #102c2b; }

.foot-note {
    color: #6a7773;
    font-size: 13.5px;
    opacity: .8;
}

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 860px) {
    .chrome-nav { display: none; }
}

@media (max-width: 640px) {
    /* Shorter header, but the footer stacks into a column and more than makes
       the difference back. */
    :root { --chrome-height: 208px; }
    .chrome-inner { min-height: 60px; gap: 12px; }
    .chrome-tag { display: none; }
    .foot-inner {
        padding: 24px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .foot-links { margin: 0; }
}

/* Host public/private switch on the waiting-to-start lobby. Games style the
   segmented control; this only places it under the lede. */
.lobby-vis-switch {
    max-width: 28rem;
    margin: 4px auto 28px;
    text-align: center;
}
.lobby-vis-switch .segmented { justify-content: center; }
.kicker { flex-wrap: wrap; }

/* While the live-online page is asking "join this table or start your
   own?", the leftover setup chrome is noise: a line confirming they are
   hosting, a change-mode link, and picture credits that belong on the
   landing page. .mode-chosen is display:flex, so [hidden] cannot hide it. */
body.is-choosing-room .mode-chosen,
body.is-choosing-room .note:has(a[href="credits.php"]),
body.is-choosing-room .setup-credits {
    display: none !important;
}

/* The join-or-start choice. Start-your-own comes first so a long list of
   open rooms cannot push it off the page. Buttons use each game's own
   .button-primary / .button-dark, so Who Noticed stays teal and Timeliner
   stays coral instead of a second palette being invented here. */
.existing-rooms {
    max-width: 460px;
    margin: 48px auto 24px;
    text-align: center;
}
.existing-rooms-own {
    margin: 8px 0 12px;
}
.existing-rooms-own-btn {
    min-height: 56px;
    font-size: 17px;
}
.existing-rooms-or {
    margin: 40px 0 36px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--muted, rgba(247, 239, 227, .55));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.existing-rooms-or::before,
.existing-rooms-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line, rgba(247, 239, 227, .16));
}
.existing-rooms-live {
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green, #35c98a);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.existing-rooms-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green, #35c98a);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--green, #35c98a) 18%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
    .existing-rooms-dot {
        animation: existing-rooms-pulse 1.8s ease-out infinite;
    }
}
@keyframes existing-rooms-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green, #35c98a) 45%, transparent); }
    70% { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.existing-rooms-copy h2 {
    margin: 0 0 12px;
    font-size: clamp(26px, 4.6vw, 36px);
    line-height: 1.1;
    letter-spacing: -.03em;
}
.existing-rooms-copy p {
    margin: 0 auto 28px;
    max-width: 36ch;
    color: var(--muted, rgba(247, 239, 227, .68));
    font-size: 17px;
    line-height: 1.45;
}
.existing-rooms-list {
    display: grid;
    gap: 22px;
}
.existing-room {
    padding: 28px 26px 24px;
    border-radius: 24px;
    border: 1px solid var(--line, rgba(247, 239, 227, .16));
    background: var(--surface, #1a1518);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .22);
    text-align: left;
}
.existing-room-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.existing-room-top h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}
.existing-room-wait {
    margin: 2px 0 0;
    flex: 0 0 auto;
    color: var(--muted, rgba(247, 239, 227, .6));
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: right;
    text-transform: uppercase;
}
.existing-room-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}
.existing-room-chips span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(247, 239, 227, .08);
    color: var(--paper, var(--ink, #f7efe3));
    font-size: 13px;
    font-weight: 800;
}
.existing-room-join {
    min-height: 52px;
    font-size: 17px;
}

/* --- lobby invite cards ------------------------------------------------- */
/* Shared by every game table and board. The four-letter code is gone; the
   invite URL is a copyable field, the QR is a small companion, and the
   seats sit in a matching card so the two jobs have equal weight. */

#screen-lobby.setup .shell {
    width: min(calc(100% - 36px), 980px);
}

#screen-lobby .lobby-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: 28px;
    text-align: left;
}

#screen-lobby .lobby-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 20px 18px;
    border-radius: 20px;
    border: 1px solid var(--line, rgba(247, 239, 227, .14));
    background: var(--surface, #1a1518);
}

#screen-lobby .lobby-card-title {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-soft, var(--yellow, #d9a441));
}

#screen-lobby .invite-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

#screen-lobby .invite-url {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--line, rgba(247, 239, 227, .14));
    border-radius: 14px;
    background: var(--bg, var(--dark, #0d0a0c));
    color: var(--paper, var(--ink, #f7efe3));
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    cursor: text;
    user-select: all;
}

#screen-lobby .invite-url:focus-visible {
    outline: 2px solid var(--yellow, #f0b429);
    outline-offset: 2px;
}

#screen-lobby .invite-row .button {
    flex: none;
    min-width: 92px;
    min-height: 52px;
    padding: 0 18px;
}

#screen-lobby .invite-scan {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

#screen-lobby .qr-box {
    margin: 0;
    flex: none;
}

#screen-lobby .qr-box img {
    display: block;
    width: 128px;
    height: 128px;
    border-radius: 12px;
    border: 1px solid var(--line, rgba(247, 239, 227, .14));
    background: #fff;
}

#screen-lobby .lobby-share.is-tv .qr-box img {
    width: 188px;
    height: 188px;
}

#screen-lobby .invite-scan .note,
#screen-lobby .lobby-card .note {
    margin: 0;
    max-width: none;
}

#screen-lobby .lobby-people .lobby-seats {
    flex: 1;
}

#screen-lobby .lobby-share,
#screen-lobby .lobby-people {
    text-align: left;
}

#screen-lobby .lobby-people .note {
    margin-top: 12px;
}

#screen-lobby .lobby-people .note:empty {
    display: none;
}

#screen-lobby .lobby-actions {
    justify-content: center;
}

@media (max-width: 800px) {
    #screen-lobby .lobby-cols {
        grid-template-columns: 1fr;
    }
    #screen-lobby .invite-row {
        flex-wrap: wrap;
    }
    #screen-lobby .invite-row .button {
        width: 100%;
    }
}