/* MoGames — the all-night game parlor. One file, no build step.
   Display face: Bricolage Grotesque 800 (self-hosted, OFL). Body: system. */

@font-face {
    font-family: "Bricolage";
    src: url("../fonts/bricolage-800.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

:root {
    --bg: #0a0d16;          /* deep night blue, matches the masthead sky */
    --bg-card: #121624;
    --ink: #ede7d9;
    --ink-soft: #9a94a8;
    --accent: #ffb84d;      /* window lamplight amber */
    --accent-ink: #1a1206;
    --line: #232a3d;
    --display: "Bricolage", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
    overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

main { padding-bottom: 5rem; }

/* ---- header ---- */

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}
.has-masthead .site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    background: linear-gradient(rgba(5, 7, 12, 0.6), transparent);
}
.brand {
    font-family: var(--display);
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    color: var(--ink);
}
.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }
.site-header nav a { color: var(--ink-soft); }

/* ---- compact intro ---- */

.intro {
    text-align: center;
    padding: 1.6rem 1.25rem 0.2rem;
}
.intro .wordmark { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.intro .tag {
    font-family: var(--display);
    color: var(--ink-soft);
    margin: 0.4rem 0 0;
    font-size: clamp(1rem, 2vw, 1.2rem);
}

/* ---- masthead ---- */

.masthead { position: relative; }
.masthead img {
    display: block;
    width: 100%;
    max-height: 62vh;
    min-height: 340px;
    object-fit: cover;
    object-position: 62% 42%;   /* keep the shopfront when cropped */
}
.masthead::after {
    /* melt the painting into the page */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 32%;
    background: linear-gradient(transparent, var(--bg));
    pointer-events: none;
}
.mast-copy {
    position: absolute;
    left: clamp(1.25rem, 6vw, 6rem);
    right: 1.25rem;
    bottom: clamp(1.5rem, 7vh, 5rem);
    z-index: 2;
    text-shadow: 0 2px 30px rgba(5, 7, 12, 0.9);
}
.wordmark {
    font-family: var(--display);
    font-size: clamp(3rem, 9vw, 6.8rem);
    line-height: 0.95;
    margin: 0;
    letter-spacing: 0.01em;
    color: var(--ink);
}
.wordmark span {
    color: var(--accent);
    text-shadow: 0 0 44px rgba(255, 184, 77, 0.45);
}
.mast-copy .tag {
    font-family: var(--display);
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    color: var(--ink);
    margin: 0.7rem 0 0.2rem;
}
.mast-copy .sub {
    color: var(--ink-soft);
    margin: 0;
    font-size: clamp(0.85rem, 1.6vw, 1rem);
}

/* ---- billboard wall ---- */

.wall {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.kicker {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3.2rem 0 1.4rem;
    font-family: var(--display);
    font-size: 0.95rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
}
.kicker::before, .kicker::after {
    content: "";
    height: 1px;
    background: var(--line);
    flex: 1;
}

.billboard {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.75rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
}
.bb-art { display: block; }
.bb-art img {
    display: block;
    width: 100%;
    aspect-ratio: 2.7 / 1;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.4s ease;
}
.billboard:hover .bb-art img { transform: scale(1.025); filter: brightness(1.07); }
.billboard.coming .bb-art img { filter: saturate(0.85) brightness(0.82); }
.billboard.coming:hover .bb-art img { filter: saturate(1) brightness(0.95); }

.plate {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 2.6rem 1.4rem 1.1rem;
    background: linear-gradient(transparent, rgba(6, 8, 14, 0.55) 35%, rgba(6, 8, 14, 0.96));
}
.plate-text h3 {
    font-family: var(--display);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    margin: 0;
    line-height: 1.1;
}
.plate-text h3 a { color: var(--ink); }
.plate-text h3 a:hover { text-decoration: none; color: var(--accent); }
.plate-text p { margin: 0.15rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.plate-actions { display: flex; gap: 0.6rem; align-items: center; flex-shrink: 0; }

/* ---- chips & forms ---- */

.chip, button[type="submit"] {
    display: inline-block;
    font-family: var(--display);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    cursor: pointer;
    white-space: nowrap;
}
.chip:hover, button[type="submit"]:hover {
    text-decoration: none;
    filter: brightness(1.1);
    box-shadow: 0 0 24px rgba(255, 184, 77, 0.35);
}
.chip.ghost {
    background: transparent;
    color: var(--ink);
    border-color: rgba(237, 231, 217, 0.35);
}
.chip.ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.chip.big { font-size: 1.05rem; padding: 0.85rem 1.8rem; white-space: normal; text-align: center; }

.notify-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
input[type="email"] {
    background: rgba(10, 13, 22, 0.85);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    min-width: 200px;
}
input[type="email"]:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Honeypot: visually gone, still in the DOM for bots to find. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.flash {
    max-width: 1240px;
    margin: 1.5rem auto 0;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 0.7rem 1rem;
}
.flash.error { border-color: #e05e5e; }

/* ---- signup strip ---- */

.signup {
    max-width: 560px;
    margin: 4.5rem auto 0;
    padding: 0 1.25rem;
    text-align: center;
}
.signup h2 { font-family: var(--display); font-size: 1.6rem; margin: 0 0 0.3rem; }
.signup p { color: var(--ink-soft); margin-top: 0; }
.signup .notify-form { justify-content: center; }

/* ---- game detail ---- */

.game-hero { position: relative; }
.game-hero img {
    display: block;
    width: 100%;
    max-height: 54vh;
    object-fit: cover;
}
.game-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(transparent, var(--bg));
    pointer-events: none;
}
.game-page {
    max-width: 720px;
    margin: -3rem auto 0;
    position: relative;
    z-index: 2;
    padding: 0 1.25rem;
}
.game-page h1 {
    font-family: var(--display);
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    margin: 0;
    line-height: 1.05;
    text-shadow: 0 2px 30px rgba(5, 7, 12, 0.9);
}
.game-page .tagline { color: var(--accent); font-size: 1.15rem; margin: 0.4rem 0 1rem; }
.game-page .desc { color: var(--ink-soft); }
.game-page .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.75rem 0; }
.game-page .signup { text-align: left; margin: 3rem 0 0; padding: 0; }
.game-page .signup .notify-form { justify-content: flex-start; }

/* ---- login & prose ---- */

.login { max-width: 460px; margin: 0 auto; padding: 2.5rem 1.25rem 0; }
.login h1, .prose h1 { font-family: var(--display); }
.login .soft { color: var(--ink-soft); }
.providers { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.2rem 0; max-width: 300px; }
.provider {
    display: inline-block;
    text-align: center;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
}
.provider:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.email-login { display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px; }
.email-login label { color: var(--ink-soft); font-size: 0.92rem; }

.prose { max-width: 640px; margin: 0 auto; padding: 2.5rem 1.25rem 0; }
.prose li { margin-bottom: 0.5rem; }

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

.inline-form { display: inline; }
.link-btn {
    background: none;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}
.link-btn:hover { text-decoration: underline; }

.site-footer {
    border-top: 1px solid var(--line);
    margin-top: 2rem;
    padding: 2.2rem 1.5rem 2.8rem;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.9rem;
}
.site-footer .creed {
    font-family: var(--display);
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1.4;
}
.site-footer a { color: var(--ink-soft); }

/* ---- small screens ---- */

@media (max-width: 720px) {
    .bb-art img { aspect-ratio: 16 / 8; }
    .plate {
        position: static;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
        padding: 0.9rem 1rem 1.1rem;
        background: var(--bg-card);
    }
    .plate-actions { width: 100%; }
    .plate-actions .notify-form { width: 100%; }
    .plate-actions input[type="email"] { flex: 1; min-width: 0; }
    .masthead img { min-height: 320px; object-position: 60% 42%; }
    .game-page { margin-top: -2rem; }
}