/* The lobby.
 *
 * GAME UI, NOT A DOCUMENT. The front page is a hero and one button; everything a
 * player can actually do lives here, as plates and a roster rather than as
 * sections and paragraphs. Tokens and the set come from style.css and play.css,
 * so this file only has the lobby's own furniture in it.
 */

.lobby { min-height: 100vh; }

/* The set is shared with the run screen (play.css), so the lobby is a place in
 * the show rather than a menu floating over a flat colour. */
.lobby .set { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lobby .set-canyon {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(46, 21, 18, 0.78) 0%, rgba(46, 21, 18, 0.9) 55%, rgba(46, 21, 18, 0.97) 100%),
        url('https://prodmedia.tyga.host/public/tyga.cloud/landing/crashola.com/rivals/8-the-canyon.jpg');
    background-size: cover, cover;
    background-position: center, center 28%;
}
.lobby .set-bunting {
    position: absolute; top: 0; left: -5%; width: 110%; height: 26px;
    background: repeating-linear-gradient(90deg,
        var(--magenta) 0 26px, var(--corn) 26px 52px, var(--cream) 52px 78px, var(--sky) 78px 104px);
    clip-path: polygon(0 0, 100% 0, 100% 35%, 97% 100%, 94% 35%, 91% 100%, 88% 35%, 85% 100%, 82% 35%, 79% 100%,
        76% 35%, 73% 100%, 70% 35%, 67% 100%, 64% 35%, 61% 100%, 58% 35%, 55% 100%, 52% 35%, 49% 100%,
        46% 35%, 43% 100%, 40% 35%, 37% 100%, 34% 35%, 31% 100%, 28% 35%, 25% 100%, 22% 35%, 19% 100%,
        16% 35%, 13% 100%, 10% 35%, 7% 100%, 4% 35%, 1% 100%, 0 35%);
    opacity: 0.9;
}
.lobby .brandbar, .lobbywrap, .lobby .site { position: relative; z-index: 1; }

.lobbywrap { max-width: var(--measure); margin: 0 auto; padding: 1.5rem 16px 3rem; }

/* ── The ride plate ──────────────────────────────────────────────────────────
 * Its own row, not a tile in the grid. Everything else in the lobby is optional
 * and this is not.
 */
.ride {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 1.5rem; align-items: center;
    padding: 1.5rem;
    border: 1px solid var(--card-line); border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}
.ride-art { width: 100%; height: auto; display: block; }
.ride .kicker {
    font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--corn); margin-bottom: 0.4rem;
}
.ride h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.1; margin-bottom: 0.6rem; }
.ride .sub { color: var(--text-dim); max-width: 46ch; margin-bottom: 1.2rem; }

/* ── The roster ───────────────────────────────────────────────────────────── */
.roster { margin-top: 2.5rem; }
.roster h2, .plates h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.roster .sub { color: var(--text-dim); max-width: 60ch; margin-bottom: 1.2rem; }

.rivals {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rivals li {
    position: relative;
    border: 1px solid var(--card-line); border-radius: var(--radius);
    background: var(--card); overflow: hidden;
    padding-bottom: 0.9rem;
}
/* 3:4 portraits cropped to 4:3 here. object-position is high because a centred
 * crop of a head-and-shoulders portrait cuts most of these faces at the mouth. */
.rivals img {
    display: block; width: 100%; aspect-ratio: 4 / 3;
    object-fit: cover; object-position: center 18%;
    background: var(--grape-deep);
}
.rivals .n {
    position: absolute; top: 0.6rem; left: 0.6rem;
    font-family: 'Alfa Slab One', serif; font-size: 1.1rem; line-height: 1;
    color: var(--asphalt); background: var(--corn);
    padding: 0.3rem 0.55rem; border-radius: 6px;
    box-shadow: var(--shadow-tight);
}
.rivals .who {
    display: block; margin: 0.7rem 0.9rem 0.25rem;
    font-family: 'Alfa Slab One', serif; font-size: 1rem; line-height: 1.2;
    color: var(--cream);
}
.rivals .what { display: block; margin: 0 0.9rem; font-size: 0.88rem; color: var(--text-dim); }

/* Show 8 is not a person. Canyon red rather than gold, and the crop drops to the
 * rim instead of to a face that is not there. */
.rivals .finale { border-color: var(--tangerine); }
.rivals .finale img { object-position: center 55%; }
.rivals .finale .n { background: var(--tangerine); color: var(--cream); }
.rivals .finale .who { color: var(--tangerine); }

/* ── The plates ───────────────────────────────────────────────────────────── */
.plates { margin-top: 2.5rem; }
.plategrid {
    display: grid; gap: 1rem; margin-top: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.plate {
    display: block; text-decoration: none;
    padding: 1.2rem;
    border: 1px solid var(--card-line); border-radius: var(--radius);
    background: var(--card); color: var(--text);
    transition: transform 120ms ease, border-color 120ms ease;
}
.plate:hover { transform: translateY(-2px); border-color: var(--corn); }
.plate-ico { display: block; width: 64px; height: 64px; margin-bottom: 0.8rem; }
.plate-ico img { width: 100%; height: 100%; object-fit: contain; }
.plate-name {
    display: block; font-family: 'Alfa Slab One', serif;
    font-size: 1.1rem; color: var(--corn); margin-bottom: 0.3rem;
}
.plate-note { display: block; font-size: 0.9rem; color: var(--text-dim); }

/* LOCKED, NOT HIDDEN AND NOT A DEAD LINK. lobby.js strips the href and sets
 * aria-disabled, so it stops being a link for a screen reader too, not only
 * visually. */
.plate.locked { opacity: 0.55; cursor: default; }
.plate.locked:hover { transform: none; border-color: var(--card-line); }
.plate.locked .plate-name::after {
    content: ' LOCKED';
    font-family: 'Outfit', system-ui, sans-serif; font-size: 0.65rem;
    letter-spacing: 0.12em; color: var(--dust); vertical-align: middle;
}

@media (max-width: 760px) {
    .ride { grid-template-columns: 1fr; text-align: center; }
    .ride .sub { margin-left: auto; margin-right: auto; }
    .ride-art { max-width: 320px; margin: 0 auto; }
    .plate-ico { margin-left: auto; margin-right: auto; }
    .plate { text-align: center; }
}