/* ---------------------------------------------------------------------------
   The games shelf

   Two games, one page. Deliberately not the landing page's tile grid: a tile
   is a signpost, and somebody who has never played either needs to know what
   the game IS and how a session of it goes before the link is worth pressing.
   So each one gets a panel with room to say so.
   --------------------------------------------------------------------------- */

.games-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.games-head {
    text-align: center;
    margin: 0.5rem 0 2rem;
}

.games-head h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.9rem, 5vw, 2.7rem);
}

.games-lede {
    margin: 0 auto;
    max-width: 46rem;
    color: var(--muted, #9aa3b2);
    line-height: 1.55;
}

.games-shelf {
    display: grid;
    gap: 1.5rem;
}

.game-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* Wide enough for the art to sit beside the words rather than above them. */
@media (min-width: 860px) {
    .game-card { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
}

.game-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: 0.75rem;
    border-radius: 12px;
    overflow: hidden;
    background: #10131a;
}

/* Each game's own weather. No screenshot: a still of either one says less
   than its own sky does, and a stale screenshot is worse than none. */
.game-art.is-wildy { background: linear-gradient(160deg, #2b3350, #6b4a4a 70%, #241820); }
.game-art.is-pyro { background: linear-gradient(170deg, #3a1410, #94301c 60%, #ff8a3c); }
/* No scenery band on this one: there is no tileable art to build one from,
   and an empty band is just a lighter rectangle. The dots stand in for the
   answer buttons, which is the only picture a quiz really has. */
.game-art.is-party {
    background:
        radial-gradient(circle at 18% 30%, rgba(240, 128, 128, 0.5) 0 8px, transparent 9px),
        radial-gradient(circle at 80% 26%, rgba(224, 162, 68, 0.55) 0 7px, transparent 8px),
        radial-gradient(circle at 60% 70%, rgba(192, 132, 252, 0.5) 0 9px, transparent 10px),
        radial-gradient(circle at 28% 78%, rgba(95, 184, 122, 0.45) 0 6px, transparent 7px),
        linear-gradient(160deg, #2a1f33, #3a2a4a 60%, #14161c);
}

.game-art.is-cah {
    background: radial-gradient(120% 90% at 50% 10%, rgba(224, 162, 68, 0.12), transparent 60%), linear-gradient(160deg, #1b1d24, #0d0e12);
    display: flex; align-items: center; justify-content: center; gap: 0;
}
.cah-mini {
    font: 700 0.95rem/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 7.5rem; height: 9rem; padding: 0.7rem; border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.cah-mini.is-black { background: #0b0b0d; color: #fff; border: 1px solid #2c2f38; transform: rotate(-7deg) translateX(1.2rem); }
.cah-mini.is-white { background: #fafafa; color: #111; transform: rotate(6deg) translate(-1rem, 0.9rem); }

.game-art.is-trivia {
    background:
        radial-gradient(circle at 22% 28%, rgba(224, 162, 68, 0.5) 0 6px, transparent 7px),
        radial-gradient(circle at 78% 34%, rgba(122, 162, 247, 0.42) 0 6px, transparent 7px),
        radial-gradient(circle at 32% 74%, rgba(95, 184, 122, 0.42) 0 6px, transparent 7px),
        radial-gradient(circle at 70% 78%, rgba(217, 88, 79, 0.42) 0 6px, transparent 7px),
        linear-gradient(160deg, #1d2331, #2f3a52 65%, #14161c);
}

/* The game's own scenery, tiled along the bottom like a horizon. */
.game-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    image-rendering: pixelated;
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto 100%;
    opacity: 0.9;
}

.is-wildy .game-band {
    background-image: url('/games/wildernessreborn/art/scene/wilderness-near.png');
}

/* The icon is drawn at 256 and shown at 256 wherever there is room, so it
   is pixel-for-pixel rather than a shrunken thumbnail. Below that it is a
   plain downscale -- nearest-neighbour on a non-integer shrink is worse than
   the browser's own filtering. */
.game-mark {
    position: relative;
    width: 100%;
    max-width: 256px;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65));
}

.game-art b {
    position: relative;
    padding: 0.2rem 0.6rem;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff3d8;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.game-body h2 {
    margin: 0 0 0.15rem;
    font-size: 1.55rem;
}

.game-kicker {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold, #d9a441);
}

.game-body > p {
    margin: 0 0 1rem;
    line-height: 1.6;
}

.game-how {
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.game-how li {
    position: relative;
    padding-left: 1.35rem;
    line-height: 1.5;
    color: var(--muted, #9aa3b2);
}

.game-how li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold, #d9a441);
}

.game-how b { color: var(--text, #e8ecf3); font-weight: 600; }

.game-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.game-play {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    background: var(--gold, #d9a441);
    color: #1a1206;
    font-weight: 700;
    text-decoration: none;
}

.game-play:hover { filter: brightness(1.08); }

.game-note {
    font-size: 0.82rem;
    color: var(--muted, #9aa3b2);
}

.games-foot {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted, #9aa3b2);
}

.games-foot a { color: inherit; }