/* 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; }

/* 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; }
}