/* =========================================================================
   CS-THEME-04 — the game page.

   Loaded after tokens.css, shell.css and home.css. It reuses the card grid
   from home.css for related games rather than defining a second one.

   Logical properties only, same rule as the rest of the theme.
   ========================================================================= */

/* ---- breadcrumb --------------------------------------------------------- */
.gp-crumbs {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-block-end: var(--space-4);
}
.gp-crumbs a { color: var(--color-muted); text-decoration: none; }
.gp-crumbs a:hover { color: var(--color-text); text-decoration: underline; }
.gp-crumbs .current { color: var(--color-text); font-weight: 700; }

/* ---- layout -------------------------------------------------------------
   One column on phone and tablet: the game is the reason for the page and
   it gets the full width. Two zones only from 1024 up, and the side column
   is deliberately the narrower one — the audit's complaint about the old
   page was that everything competed with the game. */
.gp { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.gp__main { min-inline-size: 0; }
.gp__side { min-inline-size: 0; display: grid; gap: var(--space-5); align-content: start; }

/* ---- header -------------------------------------------------------------- */
.gp__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-3);
}
.gp__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.25;
    min-inline-size: 0;
    /* a title mixing Arabic and English keeps each run in its own
       direction instead of scrambling at the boundary */
    unicode-bidi: plaintext;
    text-align: start;
}
.gp__cat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
}
.gp__cat:hover { color: var(--color-text); }

/* ---- the stage -----------------------------------------------------------
   The box exists before the iframe does. --game-ratio comes from the
   game's own w/h columns, so the frame never resizes when it loads and
   nothing below it moves. */
.gp__stage {
    position: relative;
    aspect-ratio: var(--game-ratio, 4 / 3);
    inline-size: 100%;
    background: #0b0d13;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    /* On a short phone in landscape an unbounded 4:3 box would push the
       controls off-screen entirely. */
    max-block-size: 78vh;
}
.gp__frame {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    display: block;
}

/* ---- action bar ----------------------------------------------------------
   Sits BELOW the stage, never over it, so no control can be covered by the
   game and no ad can be placed over a control. */
.gp__bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
}
.gp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    min-inline-size: var(--tap-min);
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.gp__btn:hover { background: var(--color-surface-2); }
.gp__btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.gp__btn--primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
}
.gp__btn .i { inline-size: 18px; block-size: 18px; }

/* ---- account placeholders ------------------------------------------------ */
.gp__account {
    margin-block-start: var(--space-4);
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.gp__account .placeholder-note { flex: 1 0 100%; margin: 0 0 var(--space-2); }

/* ---- info blocks --------------------------------------------------------- */
.gp__info {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.gp__h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 800; }

.gp__desc {
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--leading);
    unicode-bidi: plaintext;
    text-align: start;
    /* A long description must not shove the related games down the page
       after the fact. It is capped and scrolls inside its own box, so the
       page height is known from the first paint. */
    max-block-size: 22em;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.gp__desc :where(p, ul, ol) { margin-block: 0 var(--space-3); }
.gp__desc a { color: var(--color-accent); }
.gp__desc img { max-inline-size: 100%; block-size: auto; }

/* ---- tags ---------------------------------------------------------------- */
.gp__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gp__tag {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding-inline: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
}
.gp__tag:hover { color: var(--color-text); }
.gp__tag:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.gp__related { margin-block-start: var(--space-6); }

/* =======================================================================
   BREAKPOINTS
   ======================================================================= */

@media (min-width: 768px) {
    .gp__title { font-size: var(--text-2xl); }
    .gp__stage { max-block-size: 70vh; }
}

@media (min-width: 1024px) {
    /* Two zones. 1fr / 340px keeps the game clearly the larger thing —
       the side column informs, it does not compete. */
    .gp { grid-template-columns: minmax(0, 1fr) 340px; }
    .gp__stage { max-block-size: 66vh; }
}

@media (min-width: 1280px) {
    .gp { grid-template-columns: minmax(0, 1fr) 380px; }
}