/* Games screen. Intentionally shares the streams feed's shape - circular rail on top,
   wide cards below - so Home and Games read as one app rather than two designs. The rail
   and card metrics are kept in step with streams.css on purpose, and so are its
   colours: both read the partner's theme rather than the dark palette they were drawn
   against. Each fallback is the value that was here before. */

.games {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
    background: var(--wx-ground, #111);
    color: var(--wx-ink, #fff);
    box-sizing: border-box;
}

/* ---------- rail ---------- */

.games-rail {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    overflow-x: auto;
    background: var(--wx-surface, #161616);
    border-bottom: 1px solid var(--wx-line, #2c2c2c);
    /* Sides match the cards below it, so the rail and the list share a left edge. */
    /* Hidden because a phone swipes it. With a mouse there is nothing to swipe, so
       rails.js makes it draggable - hence the cursor. */
    scrollbar-width: none;
    cursor: grab;
}

.games-rail::-webkit-scrollbar {
    display: none;
}

.games-rail-item {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--wx-surface-2, #262626);
    color: var(--wx-muted, #ddd);
    overflow: hidden;
    cursor: pointer;
}

.games-rail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.games-rail-item.is-selected {
    border-color: var(--wx-signal, #e5841e);
}

.games-rail-all {
    font-size: 0.8rem;
    font-weight: 700;
}

/* ---------- body ---------- */

/* Not a scroller itself: the games list is short, and when a game is selected it renders
   in here and manages its own height. AppChrome's body does the scrolling. */
.games-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.games-card {
    padding: 12px 14px 4px;
}

/* The whole card is the hit target - a small Play link would be a poor phone target, and
   the user should be able to tap anywhere on the artwork. */
.games-card-hit {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

/* Quiet under the pointer. The partner site's own stylesheet fills every button with
   the accent on hover, which lit the whole card up; here the pointer is the only tell. */
.games-card-hit:hover,
.games-card-hit:active,
.games-card-hit:focus {
    background: none;
    color: inherit;
}

/* Same 16:9 box as a feed post's media, so the two lists line up visually and the slot is
   the right size before any art loads. */
.games-card-media {
    aspect-ratio: 16 / 9;
    background: var(--wx-surface-2, #1d1d1d);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.games-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.games-card-placeholder {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wx-muted-dim, #6f6f6f);
    padding: 0 12px;
    text-align: center;
}

/* Set in a touch from the artwork's edge: text flush with a rounded corner reads as
   spilling out of it. */
.games-card-text {
    padding: 0 6px;
}

.games-card-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
}

.games-card-desc {
    margin: 0 0 8px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--wx-muted, #c9c9c9);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.games-card-cta { align-self: flex-start; }

/* ---------- coming soon ---------- */

/* Age and state, or a state the games are not offered in. Above the list, once. */
.games-gate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--wx-signal, #d4af37);
    border-radius: 10px;
    background: rgba(212, 175, 55, .08);
}

.games-gate p { margin: 0; font-size: .92rem; }

.games-gate.is-blocked {
    border-color: var(--wx-line, #2c2c2c);
    background: var(--wx-surface-2, #151515);
    color: var(--wx-muted, #9a9a9a);
}

.games-soon {
    padding: 28px 20px;
    text-align: center;
    color: var(--wx-muted, #c9c9c9);
}

.games-soon h2 {
    margin: 0 0 10px;
    color: var(--wx-ink, #fff);
}

.games-soon-note {
    color: var(--wx-muted-dim, #9a9a9a);
    font-size: 0.9rem;
}

/* ---------- wider screens ---------- */

@media (min-width: 820px) {
    .games-card {
        max-width: 640px;
        margin: 0 auto;
    }

    /* Left, not centred. A centred rail floats away from the left edge everything
       below it lines up on, and reads as a separate ornament rather than as the
       control for the list underneath. */
}

.games-rail.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.games-rail.is-dragging img { pointer-events: none; }

.games-rail img {
    /* See home.css: the native image drag has to be off before a press turns
       into a scroll, not after. */
    -webkit-user-drag: none;
    user-select: none;
}

/* ---------- wide: a browser window, from 900px ----------

   GamesScreen Wide, set only by the website. The list goes two across, three from
   1200px; a game being played stays one thing at its own width. */
@media (min-width: 900px) {
    /* The page's own frame is the one frame: no second, darker panel inside it. */
    .games.is-wide { background: none; }

    .games.is-wide .games-body.is-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 18px;
        align-content: start;
    }

    .games.is-wide .games-body.is-list > .wx-empty,
    .games.is-wide .games-body.is-list > .wx-loading { grid-column: 1 / -1; }

    .games.is-wide .games-card { max-width: none; margin: 0; }
}

@media (min-width: 1200px) {
    .games.is-wide .games-body.is-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}