/* ══════════════════════════════════════════════════════════════════════
   css/game-page.css — game-detail page redesign (game.php, body.page-game)
   Loaded AFTER main.css via $page_styles, so it layers on top of the
   existing game-page rules (frame sizing, faux-fullscreen, ads) without
   replacing them.

   Stacking rule — do NOT add transform / filter / z-index / isolation to
   .gp-stage, .game-stack or any ancestor of #game-frame-wrap: faux-
   fullscreen pins the frame with position:fixed, which a transformed or
   filtered ancestor would trap inside itself.
   ══════════════════════════════════════════════════════════════════════ */

body.page-game {
    --gp-bg: #f7f7f8;
    --gp-surface: #fff;
    --gp-primary: #ff4f64;
    --gp-primary-dk: #f0364d;
    --gp-soft: #ffe6e8;
    --gp-text: #111827;
    --gp-muted: #1e293b;
    --gp-border: #eceef1;
    --gp-radius: 18px;
    --gp-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 6px 20px rgba(17, 24, 39, .04);
    background: var(--gp-bg);
}

/* ── Icons ─────────────────────────────────────────────────────────── */
.gp .gp-i, .gp-backgame .gp-i { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.gp-i--fill   { fill: currentColor; }
.gp-i--accent { color: var(--gp-primary); }

/* ── Back link + title ─────────────────────────────────────────────── */
/* The 80px .layout reserve was sized for the player sitting right under the
   header; the back link + title now come first, so less air is needed. */
body.page-game .layout { padding-top: 0 !important; margin-top: 0 !important; width: 100% !important; max-width: 100vw !important; }
body.page-game:not(.page-index):not(.game-playing) .layout > .main,
body.page-game .layout > .main,
body.page-game .main { padding-top: 4px !important; margin-top: 0 !important; }
.gp-back { margin: 0 0 6px; }
.gp-back__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 8px; margin-left: -8px;
    border-radius: 999px;
    color: var(--gp-muted); font-size: 14px; font-weight: 600; text-decoration: none;
    transition: color .15s, background-color .15s;
}
.gp-back__link .gp-i { width: 18px; height: 18px; transition: transform .2s; }
.gp-back__link:hover { color: var(--gp-primary); background: var(--gp-soft); }
.gp-back__link:hover .gp-i { transform: translateX(-3px); }

.gp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 14px; }
.gp-title {
    margin: 0; color: var(--gp-text);
    font-size: clamp(22px, 2.3vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.gp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.gp-tag {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    background: var(--gp-surface); border: 1px solid var(--gp-border);
    color: var(--gp-muted); font-size: 12.5px; font-weight: 600; text-decoration: none; text-transform: capitalize;
    transition: color .15s, border-color .15s, background-color .15s;
}
a.gp-tag:hover { color: var(--gp-primary); border-color: #ffc2c9; background: var(--gp-soft); }

/* ── Top grid: stage column + sidebar ─────────────────────────────── */
.gp-top { margin-bottom: 0; }
.gp-main { min-width: 0; }
/* Side by side, the main column must stay at its CONTENT height. Stretched
   (the grid default) the Up Next sidebar — always the taller cell — pinned
   its box height, which broke the sidebar fit in two ways: every change to
   the game's own content stopped reaching the ResizeObserver that re-fits
   the sidebar, and js/game-page.js could read the stretched box back as the
   line to end on, settling the column ~200px past the comments and
   Play-on-mobile cards. align-self:start keeps box height == content. */
@media (min-width: 1024px) {
    body.page-game .gp-main { align-self: start; }
}

/* ── GAME STAGE ────────────────────────────────────────────────────── */
.gp-stage {
    position: relative;                 /* no z-index — see stacking rule above */
    overflow: hidden;
    padding: clamp(8px, 1.6vw, 22px);
    border-radius: 22px;
    background: radial-gradient(120% 90% at 50% 0%, #1b1f3a 0%, #0b0d17 62%);
    box-shadow: 0 18px 50px -18px rgba(11, 13, 23, .55);
    animation: gp-fade .5s ease-out;    /* opacity only, no fill-mode */
}
.gp-stage__art {
    position: absolute; inset: -60px;
    background: var(--gp-art) center / cover no-repeat;
    filter: blur(46px) saturate(1.4);
    opacity: .7;
    pointer-events: none;
}
.gp-stage__art::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(70% 70% at 50% 45%, rgba(11, 13, 23, 0) 0%, rgba(11, 13, 23, .7) 100%);
}
.gp-stage .game-stack { position: relative; }
.gp-stage .game-stack > .game-frame-wrap {
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 60px -20px rgba(0, 0, 0, .8);
}

/* Loader / splash */
.gp-stage .game-loader h2 { letter-spacing: -.01em; }
.gp-loader__by { opacity: .75; font-size: 13px; margin: 0; }
.gp-loader__warn { opacity: .8; font-size: 13px; color: #ffb4b4; max-width: 460px; text-align: center; line-height: 1.5; margin: 12px auto; }
.gp-stage .game-loader .play-now {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gp-primary);
    box-shadow: 0 10px 30px -8px rgba(255, 79, 100, .7);
    transition: transform .15s, background-color .15s, box-shadow .15s;
}
.gp-stage .game-loader .play-now .gp-i { width: 18px; height: 18px; }

/* Game loader app promotion pill */
.gp-loader__promo {
    margin-top: clamp(6px, 1.8dvh, 14px);
    z-index: 10;
    position: relative;
}
.gp-loader__promo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 5px 14px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: clamp(11px, 1.8dvh, 13px);
    font-weight: 600;
    backdrop-filter: blur(8px);
    transition: all .2s ease;
}
.gp-loader__promo-link:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: translateY(-1px);
}
.gp-loader__promo-badge {
    color: #ff4f64;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}
.gp-loader__promo-badge .gp-i {
    width: 13px;
    height: 13px;
}
.gp-loader__promo-text {
    color: #cbd5e1;
}

/* Fullscreen button inside the frame: SVG swap driven by .is-fs */
.game-fullscreen-btn { display: inline-flex; align-items: center; justify-content: center; }
.game-fullscreen-btn .gp-i { width: 18px; height: 18px; }
.gp .gp-i--fs-off, .gp .is-fs .gp-i--fs-on { display: none; }
.gp .is-fs .gp-i--fs-off { display: inline-block; }

/* ── CONTROLS (COMPACT DOWN ROW) ──────────────────────────────────── */
.gp-controls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 6px 10px;
    margin: 6px 0 0 !important;
    padding: 6px 10px;
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    border-radius: 12px;
    box-shadow: var(--gp-shadow);
}
.gp-controls__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.gp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 11px;
    border-radius: 8px;
    border: 1px solid var(--gp-border);
    background: var(--gp-surface);
    color: var(--gp-text);
    font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1;
    text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.gp-btn .gp-i { width: 15px; height: 15px; }
.gp-btn:hover { border-color: #ffc2c9; color: var(--gp-primary); transform: translateY(-1px); }
.gp-btn:active { transform: translateY(0) scale(.97); }
.gp-btn:focus-visible, .gp-share__item:focus-visible, .gp-rail-btn:focus-visible,
.gp-back__link:focus-visible, .gp-more:focus-visible, .gp-tag:focus-visible {
    outline: 2px solid var(--gp-primary); outline-offset: 2px;
}
.gp-btn--icon { width: 32px; height: 32px; padding: 0; }
.gp-btn--primary {
    background: var(--gp-primary); border-color: var(--gp-primary); color: #fff;
    padding: 0 13px; font-size: 12.5px;
}
.gp-btn--primary:hover { background: var(--gp-primary-dk); border-color: var(--gp-primary-dk); color: #fff; box-shadow: 0 6px 16px -6px rgba(255, 79, 100, .7); }
.gp-btn--ghost { background: transparent; }
.gp-btn:disabled { cursor: default; }

/* Like / dislike / save active states */
.gp-btn.active { background: var(--gp-soft); border-color: #ffc2c9; color: var(--gp-primary); }
.gp .gp-btn--like .ab-btn__count {
    display: inline; color: inherit; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gp-btn--like.liked-pop .gp-i, .gp-btn--save.is-pop .gp-save__ico { animation: gp-pop .45s ease; }

.gp-save__ico { position: relative; display: inline-flex; }
.gp .gp-i--check { display: none; }
.gp-btn--save.active .gp-i--heart { fill: currentColor; }

/* Sound: aria-pressed="true" means muted */
.gp .gp-i--vol-off, .gp .gp-btn--sound[aria-pressed="true"] .gp-i--vol-on { display: none; }
.gp .gp-btn--sound[aria-pressed="true"] .gp-i--vol-off { display: inline-block; }
.gp-btn--sound[aria-pressed="true"] { color: var(--gp-muted); background: var(--gp-bg); }

/* Share popover */
.gp-share { position: relative; }
.gp-share__panel {
    position: absolute; top: calc(100% + 8px); left: 50%;
    min-width: 210px;
    padding: 6px;
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px -12px rgba(17, 24, 39, .25);
    z-index: 60;
    translate: calc(-50% + var(--gp-shift, 0px)) 0;
    animation: gp-pop-in .16s ease-out;
}
.gp-share__panel[hidden] { display: none; }
.gp-share__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: 10px;
    background: none; color: var(--gp-text);
    font: inherit; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none;
    cursor: pointer;
}
.gp-share__item .gp-i { width: 18px; height: 18px; color: var(--gp-muted); }
.gp-share__item:hover { background: var(--gp-bg); color: var(--gp-primary); }
.gp-share__item:hover .gp-i { color: var(--gp-primary); }
.gp-share__item.is-done, .gp-share__item.is-done .gp-i { color: #16a34a; }

/* ── Below-game ad: breathing room, fixed height (no layout shift) ── */
body.page-game .gp .below-game-banner { margin: var(--section-gap, 12px) auto 4px !important; }

/* ── CARDS (identity / about / how-to / leaderboard / comments) ───── */
.gp-card {
    margin-top: var(--section-gap, 12px) !important;
    padding: clamp(16px, 2vw, 24px);
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-shadow);
}
.gp-h2 {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 var(--heading-gap, 8px) !important;
    color: var(--gp-text);
    font-size: 18px; font-weight: 800; letter-spacing: -.01em;
}
.gp-h2 > .gp-i { color: var(--gp-primary); }
.gp-card > .gp-h2:first-child::first-letter { text-transform: uppercase; }

/* Identity */
.gp-identity { display: flex; align-items: center; gap: 16px; }
.gp-identity__art {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 14px; object-fit: cover;
    background: var(--gp-bg);
    box-shadow: 0 0 0 1px var(--gp-border);
}
.gp-identity__main { min-width: 0; flex: 1; }
.gp-identity__name { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--gp-text); overflow-wrap: anywhere; }
.gp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gp-stats li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--gp-bg);
    color: var(--gp-muted); font-size: 13px; font-weight: 600;
}
.gp-stats li .gp-i { width: 16px; height: 16px; }
.gp-stats b { color: var(--gp-text); font-weight: 800; }
.gp-stats a { color: var(--gp-text); text-decoration: none; text-transform: capitalize; }
.gp-stats a:hover { color: var(--gp-primary); }

/* About */
.gp-about__text p { margin: 0; color: #374151; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.gp-about__text.is-clamped {
    max-height: 8.75em; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 60%, transparent);
            mask-image: linear-gradient(#000 60%, transparent);
}
.gp-more {
    margin-top: 10px; padding: 0; border: 0; background: none;
    color: var(--gp-primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.gp-more:hover { text-decoration: underline; }

/* How to play */
.gp-steps {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
    margin: 0; padding: 0; list-style: none; counter-reset: none;
}
.gp-step {
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px;
    border-radius: 14px;
    background: var(--gp-bg);
    border: 1px solid transparent;
    transition: transform .2s ease, border-color .2s, background-color .2s;
}
.gp-step:hover { transform: translateY(-2px); border-color: #ffd3d8; background: #fff; }
.gp-step__ico {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--gp-soft); color: var(--gp-primary);
}
.gp-step__num { color: var(--gp-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.gp-step__text { color: var(--gp-text); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.gp-howto__single { margin: 0; color: #374151; font-size: 15px; line-height: 1.7; }

/* HOW TO PLAY — 6 STEPS (game.php): at ≥1096px box width the steps sit
   5 per row, so step 6 is alone on row 2 with 4 empty cells beside it.
   The ad fills exactly those cells. Narrower boxes lay the 6 steps out
   in full rows already, so the ad stays hidden (it is never requested
   while hidden — main.js only fills slots that have a width). */
.gp-howto { container-type: inline-size; }
.gp-step-ad { display: none; }
.gp-step-ad .adbox { width: 100%; max-width: 760px; margin: 0; }
/* 5 per row → row 2 = step 6 + 4 empty cells: the ad takes those 4 */
@container (min-width: 1096px) {
    .gp-steps--six { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .gp-steps--six .gp-step-ad {
        display: flex; align-items: center; justify-content: center;
        grid-column: 2 / -1;
        min-width: 0;
    }
}
/* 4 per row → row 2 = steps 5–6 + 2 empty cells: the ad takes those 2 */
@container (min-width: 836px) and (max-width: 1095.98px) {
    .gp-steps--six { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gp-steps--six .gp-step-ad {
        display: flex; align-items: center; justify-content: center;
        grid-column: 3 / -1;
        min-width: 0;
    }
}
/* 3, 2 or 1 per row: 6 steps fill their rows exactly — no gap, no ad. */

/* Leaderboard host (js/leaderboard-game.js fills it) */
.gp-leaderboard .lbg-panel--inline { margin: 0; }

/* ── SIDEBAR ───────────────────────────────────────────────────────── */
.gp-side__title {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 0 12px; font-size: 16px; font-weight: 800; color: var(--gp-text);
}
/* The sidebar ad stays in place: with the page scrolling normally (sticky
   header fixed) a sticky ad would float over the Up Next cards. */
body.page-game .gp-side .adbox--sidebar { position: static; margin-bottom: var(--section-gap, 12px) !important; }
/* Up Next: a compact list — one game per row, small landscape thumbnail
   with the name beside it (full-width cards were far too big).
   The 6px row gap is the base value only: js/game-page.js ("fitSide") eases
   it wider (inline, `important`) when a whole extra row doesn't fit, so the
   column ends exactly on the line the cards below the game end on. */
body.page-game .gp-side .gp-side__grid { grid-template-columns: 1fr !important; gap: 6px !important; }
body.page-game .gp-side .gcard {
    aspect-ratio: auto !important;
    display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 12px;
    padding: 6px;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    overflow: visible; contain: none;
    color: var(--gp-text); text-decoration: none;
    transition: background-color .15s ease;
}
body.page-game .gp-side .gcard > picture {
    position: relative; inset: auto;
    display: block; width: 132px; aspect-ratio: 512 / 310;
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .1);
}
body.page-game .gp-side .gcard img { transition: transform .25s ease; }
body.page-game .gp-side .gcard .gcard-title {
    position: static;
    opacity: 1; transform: none;
    padding: 0; background: none;
    color: var(--gp-text);
    font: 700 14px/1.35 var(--ff-display, inherit);
    text-align: left; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    pointer-events: none;
}
body.page-game .gp-side .gcard .badge { transform: scale(.75); transform-origin: top left; top: 9px; left: 9px; }
body.page-game .gp-side .gcard-video,
body.page-game .gp-side .gcard::after { display: none !important; }
body.page-game .gp-side .gcard:hover { transform: none; box-shadow: none; background: var(--gp-surface); }
body.page-game .gp-side .gcard:hover .gcard-title { color: var(--gp-primary); }
body.page-game .gp-side .gcard:hover img { transform: scale(1.06); }
/* Last tile kept by js/game-page.js: without its 6px bottom padding the tile
   ends where its thumbnail ends, so the Up Next column finishes on exactly
   the same line as the comments / Play-on-mobile cards beside it. */
body.page-game .gp-side .gcard.is-flush { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    body.page-game .gp-side .gcard:hover img { transform: none; }
}
@media (max-width: 1023px) {
    /* Stacked layout: the rails below already cover "Up Next"; the ad stays. */
    .gp-side__title, .gp-side__grid { display: none !important; }
    .gp-side { margin-top: 0 !important; }
}

/* ── RAILS ─────────────────────────────────────────────────────────── */
.gp-rail-sec { margin-top: var(--section-gap, 12px) !important; }
/* One heading gap (--head-gap, css/main.css): heading → content = 12px.
   Rails start 4px lower than their box (hover room), so their head keeps 8px. */
.gp-head,
.gp-card > .gp-h2,
.gp .game-comments__title,
.gp-side__title { margin-bottom: var(--heading-gap, 8px) !important; }
.gp-rail-sec__head { margin-bottom: var(--heading-gap, 8px) !important; }
/* main.css gives #also-like / #similar-games / #for-you
   `content-visibility: auto` (built for the old full-grid rows). That adds
   paint containment, which CLIPS everything at the section's edge — the
   hovered first/last card lost its left/bottom. These rows are now 12 lazy
   cards each, so there is little to defer; render them normally. */
body.page-game #also-like.gp-rail-sec,
body.page-game #similar-games.gp-rail-sec,
body.page-game #for-you.gp-rail-sec { content-visibility: visible; contain-intrinsic-size: none; }
.gp-rail-sec--quiet { margin-top: var(--section-gap, 12px) !important; }
.gp-rail-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--heading-gap, 8px) !important; }
.gp-rail-sec__head .gp-h2 { margin: 0; min-width: 0; text-transform: none; }
.gp-rail-sec__head .gp-h2::first-letter { text-transform: uppercase; }
.gp-rail-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* ‹ › arrows — same as the homepage rails (css/home.css "HORIZONTAL RAIL
   NAVIGATION"): js/game-page.js moves them out of the heading onto the
   rail's left/right edges (inside .gp-rail-wrap), centred on the card
   artwork. Invisible until the section is hovered; an arrow that can't
   scroll further stays hidden. Touch screens just swipe. */
.gp-rail-wrap { position: relative; }
.gp-rail-btn {
    position: absolute;
    top: var(--gp-nav-top, 50%);
    z-index: 6;
    width: 44px; height: 44px; padding: 0;
    margin-top: -22px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: var(--gp-text);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(17, 24, 39, .22);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease, background-color .15s ease, color .15s ease;
}
.gp-rail-btn--prev { left: 8px; }
.gp-rail-btn--next { right: 8px; }
.gp-rail-btn .gp-i { width: 20px; height: 20px; stroke-width: 2.2; }
.gp-rail-sec:hover .gp-rail-btn,
.gp-rail-btn:focus-visible { opacity: 1; visibility: visible; }
.gp-rail-btn:hover { background: var(--gp-primary); color: #fff; }
.gp-rail-sec:hover .gp-rail-btn:disabled,
.gp-rail-btn:disabled { opacity: 0; visibility: hidden; cursor: default; }
.gp-rail-btn[hidden] { display: none; }
.gp-viewall {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 4px;
    color: var(--gp-primary); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.gp-viewall .gp-i { width: 16px; height: 16px; transition: transform .2s; }
.gp-viewall:hover .gp-i { transform: translateX(3px); }

.gp-rail {
    --gp-cols: 6; --gp-gap: 14px;
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--gp-cols) - 1) * var(--gp-gap)) / var(--gp-cols));
    gap: var(--gp-gap);
    overflow-x: auto; overscroll-behavior-x: contain;
    /* Free scrolling like the homepage rails (no scroll-snap): the arrows
       glide with scrollBy({behavior:'smooth'}), touch swipes freely. */
    scrollbar-width: none;
    /* Room inside the scroll box so a hovered card's 1.18× pop isn't
       clipped (same trick as the homepage .hrail). */
    /* A card grows 9% of its size per side (≈24px for the ~260px cards on
       a 1920px screen), so the room must be at least that or the end
       cards' corners get clipped by the scroll box. */
    padding: 18px 28px 22px; margin: -14px -28px -18px;
}
.gp-rail::-webkit-scrollbar { display: none; }
.gp-rail > * { min-width: 0; margin: 0 !important; }
/* Cards per row = the homepage rails (css/home.css .hrail --n). */
.gp-rail { --gp-cols: 7; --gp-gap: 8px; }
@media (max-width: 1279px) { .gp-rail { --gp-cols: 5; } }
@media (max-width: 1023px) { .gp-rail { --gp-cols: 4.2; } }
@media (max-width: 767px)  { .gp-rail { --gp-cols: 3.2; } }
@media (max-width: 479px)  { .gp-rail { --gp-cols: 2.15; --gp-gap: 6px; } }
@media (hover: none), (max-width: 767px) { .gp-rail-btn { display: none !important; } }

.gp-ad { margin: var(--section-gap, 12px) 0 0 !important; }

/* ── BOTTOM: comments + play on mobile ─────────────────────────────── */
/* This row has to FINISH ON ONE LINE together with the Up Next column
   beside it: no card whose bottom edge sits a few pixels above (or below)
   its neighbour's. So the two cards keep the default `align-items: stretch`
   — the shorter one (usually the comments card) grows to the height of the
   taller one instead of ending early — and js/game-page.js ("fitSide") eases
   the Up Next rows apart until the last tile ends on that same line. */
.gp-bottom { display: grid; gap: 0 20px; margin-top: var(--section-gap, 12px) !important; }
@media (min-width: 1024px) {
    .gp-bottom { grid-template-columns: minmax(0, 1fr) 360px; }
}
body.page-game .gp .game-comments { margin-top: var(--section-gap, 12px) !important; }
.gp .game-comments__title { margin-bottom: var(--heading-gap, 8px) !important; }
.gp .game-comments__count {
    display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px;
    border-radius: 999px; background: var(--gp-soft); color: var(--gp-primary); font-size: 12px; font-weight: 800;
}
.gp .cmt-signin { border-radius: 14px; }
.gp .cmt-signin__icon { display: inline-flex; color: var(--gp-primary); }
.gp .cmt-signin__icon .gp-i { width: 28px; height: 28px; }
.gp .cmt-star .gp-i { width: 20px; height: 20px; }
.gp .cmt-star.on .gp-i { fill: currentColor; }
.gp .cmt-form__text { border-radius: 12px; }
.gp .cmt-form__text:focus { border-color: var(--gp-primary); box-shadow: 0 0 0 3px var(--gp-soft); outline: none; }
.gp .cmt-form__submit { border-radius: 12px; background: var(--gp-primary); }
.gp .cmt-form__submit:hover { background: var(--gp-primary-dk); }
.gp .cmt { border-radius: 14px; }
.gp .cmt__avatar { background: var(--gp-soft); color: var(--gp-primary); }

.gp-mobile { display: flex; align-items: center; gap: 20px; }
.gp-mobile__qr {
    flex-shrink: 0; width: 132px; height: 132px; padding: 6px;
    border-radius: 14px; border: 1px solid var(--gp-border); background: #fff;
}
.gp-mobile__qr img { display: block; width: 100%; height: 100%; }
.gp-mobile__text { min-width: 0; }
.gp-mobile__text .gp-h2 { margin-bottom: 8px; }
.gp-mobile__text p { margin: 0 0 12px; color: var(--gp-muted); font-size: 14px; line-height: 1.6; }
.gp-mobile__text .gp-btn.is-done { color: #16a34a; border-color: #bbf7d0; }
@media (min-width: 1024px) {
    /* Column layout. `justify-content: center` only matters when the comments
       card is the taller one and stretches this card — then the QR + text +
       button stay centred instead of hanging at the top with a hole below. */
    .gp-mobile { flex-direction: column; justify-content: center; text-align: center; }
    .gp-mobile__text .gp-h2 { justify-content: center; }
}

/* ── FLOATING "BACK TO GAME" BUTTON ────────────────────────────────
   Shown (js/game-page.js adds .is-on) once "Play next" has scrolled into
   view; springs up from the bottom-right corner. While visible the arrow
   bobs upward and a soft ring pulses out of the button, so it reads as
   "tap me to go back up". Click → smooth scroll to the player. */
.gp-backgame {
    position: fixed;
    left: 50%;
    translate: -50% 0;                   /* centred; `transform` stays free for the animations */
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 6px;
    border: 0; border-radius: 999px;
    background: linear-gradient(135deg, #ff4f64 0%, #f0364d 100%);
    color: #fff;
    font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 14px 34px -10px rgba(240, 54, 77, .75), 0 4px 12px rgba(17, 24, 39, .15);
    /* hidden state */
    opacity: 0;
    transform: translateY(140%) scale(.85);
    pointer-events: none;
    transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, box-shadow .2s ease;
}
.gp-backgame[hidden] { display: none; }
.gp-backgame.is-on {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Pulse ring */
.gp-backgame::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(255, 79, 100, .55);
    pointer-events: none;
}
.gp-backgame.is-on::after { animation: gp-bg-pulse 2.4s ease-out .6s infinite; }

.gp-backgame__art {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .85);
    background: #fff;
}
.gp-backgame__label { white-space: nowrap; padding-right: 2px; }
.gp-backgame__arrow {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    background: #fff; color: #f0364d;
}
.gp-backgame__arrow .gp-i { width: 18px; height: 18px; stroke-width: 2.4; }
.gp-backgame.is-on .gp-backgame__arrow .gp-i { animation: gp-bg-bob 1.4s ease-in-out infinite; }

.gp-backgame:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 20px 40px -10px rgba(240, 54, 77, .85), 0 6px 16px rgba(17, 24, 39, .18);
}
.gp-backgame:hover .gp-backgame__arrow .gp-i { animation-duration: .7s; }
.gp-backgame:active { transform: translateY(-1px) scale(.97); }
.gp-backgame:focus-visible { outline: 3px solid #111827; outline-offset: 3px; }

@media (max-width: 520px) {
    .gp-backgame { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); font-size: 13px; gap: 8px; }
    .gp-backgame__art { display: none; }
    .gp-backgame__label { padding-left: 10px; }
}

@keyframes gp-bg-bob {
    0%, 100% { transform: translateY(2px); }
    50%      { transform: translateY(-3px); }
}
@keyframes gp-bg-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 79, 100, .55); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 79, 100, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 79, 100, 0); }
}

/* Arrival cue: the stage glows briefly after "Back to game" lands. */
.gp-stage.is-arrived { animation: gp-arrive 1.1s ease-out; }
@keyframes gp-arrive {
    0%   { box-shadow: 0 0 0 0 rgba(255, 79, 100, .7), 0 18px 50px -18px rgba(11, 13, 23, .55); }
    100% { box-shadow: 0 0 0 18px rgba(255, 79, 100, 0), 0 18px 50px -18px rgba(11, 13, 23, .55); }
}

/* ── Fullscreen (faux) — hide everything that isn't the game ───────── */
body.faux-fs .gp-back, body.faux-fs .gp-head, body.faux-fs .gp-controls,
body.faux-fs .gp-card, body.faux-fs .gp-rail-sec, body.faux-fs .gp-ad,
body.faux-fs .gp-bottom, body.faux-fs .gp-backgame, body.faux-fs .gp .below-game-banner {
    display: none !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .gp-controls { justify-content: center; }
}
@media (max-width: 720px) {
    .gp-stage { border-radius: 14px; margin: 0 !important; }
    .gp-head { margin-bottom: 8px; }
    .gp-controls { padding: 6px 8px; gap: 6px; border-radius: 10px; margin: 6px 0 0 !important; }
    .gp-controls__group { gap: 5px; }
    .gp-btn { height: 32px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
    .gp-btn--icon { width: 32px; height: 32px; padding: 0; }
    .gp-card { border-radius: 16px; }
}
@media (max-width: 520px) {
    /* Three tidy rows: rate · save/share/fullscreen · tools */
    .gp-controls { flex-direction: column; align-items: stretch; }
    .gp-controls__group { justify-content: center; }
    .gp-controls__main .gp-btn { flex: 1 1 0; min-width: 0; }
    .gp-controls__main .gp-share { flex: 1 1 0; min-width: 0; display: flex; }
    .gp-controls__main .gp-share > .gp-btn { flex: 1; }
    .gp-controls__rate { order: 2; }
    .gp-controls__main { order: 1; }
    .gp-controls__tools { order: 3; }
    .gp-identity { align-items: flex-start; gap: 12px; }
    .gp-identity__art { width: 52px; height: 52px; border-radius: 12px; }
    .gp-stats li { padding: 5px 10px; font-size: 12.5px; }
    .gp-steps { grid-template-columns: 1fr; }
    .gp-step { flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px; }
    .gp-step__num { display: none; }
    .gp-mobile { flex-direction: column; text-align: center; }
    .gp-mobile__text .gp-h2 { justify-content: center; }
    .gp-viewall { font-size: 13px; }
    .gp-h2 { font-size: 17px; }
}
@media (max-width: 360px) {
    .gp-btn__label { font-size: 12px; }
    .gp-controls__main .gp-btn { padding: 0 6px; gap: 4px; }
    .gp-controls__tools .gp-btn--icon { width: 30px; height: 30px; }
}

/* ── Motion ────────────────────────────────────────────────────────── */
@keyframes gp-fade   { from { opacity: 0; } }
@keyframes gp-pop    { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes gp-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
    .gp-stage, .gp-share__panel,
    .gp-btn--like.liked-pop .gp-i, .gp-btn--save.is-pop .gp-save__ico { animation: none !important; }
    .gp-btn, .gp-step, .gp-rail-btn, .gp-back__link .gp-i, .gp-viewall .gp-i, .gp-backgame,
    .gp-stage .game-loader .play-now { transition: none !important; }
    .gp-backgame.is-on::after,
    .gp-backgame.is-on .gp-backgame__arrow .gp-i,
    .gp-stage.is-arrived { animation: none !important; }
    .gp-btn:hover, .gp-step:hover, .gp-rail-btn:hover:not(:disabled),
    .gp-stage .game-loader .play-now:hover { transform: none; }
    .gp-rail { scroll-behavior: auto; }
}
/* =========================================================
   GAME STAGE & THEATER SCREEN SIZING (FULL-WIDTH EDGE-TO-EDGE, NO GAPS)
========================================================= */

body.page-game .layout {
    padding-top: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
}

body.page-game:not(.page-index):not(.game-playing) .layout > .main,
body.page-game .layout > .main,
body.page-game .main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 24px !important;
    padding-left: clamp(10px, 1.2vw, 16px) !important;
    padding-right: clamp(10px, 1.2vw, 16px) !important;
    box-sizing: border-box !important;
}

body.page-game .game-layout,
body.page-game .gp-top {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: clamp(12px, 1.5vw, 24px) !important;
}

body.page-game .gp-main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gp-stage {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

.gp-stage__art {
    display: none !important;
}

.gp-stage .game-stack {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Big, cinematic, immersive black screen spanning full column width */
.gp-stage .game-frame-wrap {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: var(--game-aspect, 16 / 9);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
    border-radius: 16px;
    overflow: hidden;
}

/* Sidebar adheres to the right edge with clean ad container */
body.page-game .game-sidebar,
body.page-game .gp-side {
    width: 100% !important;
    max-width: 340px !important;
    margin-top: 0 !important;
}

body.page-game .adbox--sidebar,
body.page-game .ad-slot--sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    box-sizing: border-box !important;
}

@media (min-width: 721px) {
    .gp .gp-stage .game-stack {
        width: 100% !important;
        max-width: 100% !important;
    }
    .gp .gp-stage .game-frame-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-height: clamp(380px, 48vh, 540px);
        max-height: min(880px, calc(100dvh - 80px));
    }
}

@media (min-width: 1280px) {
    .gp .gp-stage .game-frame-wrap {
        min-height: clamp(440px, 52vh, 600px);
        max-height: min(900px, calc(100dvh - 80px));
    }
}

/* ── RESPONSIVE PASS: TABLET & MOBILE (NO SIDE OR TOP GAPS) ── */
@media (max-width: 1024px) {
    body.page-game .game-layout,
    body.page-game .gp-top {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    body.page-game .game-sidebar,
    body.page-game .gp-side {
        max-width: 100% !important;
        margin-top: 14px !important;
    }
}

@media (max-width: 720px) {
    body.page-game:not(.page-index):not(.game-playing) .layout > .main,
    body.page-game .layout > .main,
    body.page-game .main {
        padding-top: 4px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    body.page-game .game-layout,
    body.page-game .gp-top {
        gap: 10px !important;
        margin-bottom: 14px !important;
    }
    .gp-stage {
        margin: 0 !important;
    }
    .gp-stage .game-frame-wrap {
        border-radius: 10px !important;
        min-height: auto !important;
        max-height: calc(100dvh - 60px) !important;
    }
}

@media (max-width: 480px) {
    body.page-game:not(.page-index):not(.game-playing) .layout > .main,
    body.page-game .layout > .main,
    body.page-game .main {
        padding-top: 2px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* =========================================================
   GAME CONTROLS AD
   Game → Save / Share / Fullscreen → full-width AD STRIP
   (#gp-promo-top, css/promo-strip.css) → Game information.
   Second strip (#gp-promo-bottom) below "Play next".
========================================================= */
.gp {
    /* Strip height on the game page (no homepage card to copy from). */
    --gp-strip-h: clamp(90px, 7vw, 130px);
}
.gp .hpromo { --hpromo-h: var(--gp-strip-h); width: 100% !important; max-width: 100% !important; }
#gp-promo-top    { width: 100% !important; max-width: 100% !important; margin: 10px 0 0 !important; }
#gp-promo-bottom { width: 100% !important; max-width: 100% !important; margin: 24px 0 0 !important; }

@media (max-width: 720px) {
    #gp-promo-top { width: 100% !important; max-width: 100% !important; margin-top: 10px !important; }
    #gp-promo-bottom { width: 100% !important; max-width: 100% !important; margin-top: 18px !important; }
}

/* =========================================================
   GAME FAQ / AEO ACCORDION (Answers & Generative Search)
========================================================= */
.gp-faq {
    margin-top: 16px;
}
.gp-faq__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.gp-faq__item {
    background: var(--gp-bg);
    border: 1px solid var(--gp-border);
    border-radius: 12px;
    overflow: hidden;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gp-faq__item[open] {
    background: #fff;
    border-color: #ffd3d8;
    box-shadow: 0 4px 12px rgba(230, 35, 39, 0.05);
}
.gp-faq__question {
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gp-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
}
.gp-faq__question::-webkit-details-marker {
    display: none;
}
.gp-faq__question::after {
    content: '+';
    font-size: 18px;
    font-weight: 700;
    color: var(--gp-primary);
    line-height: 1;
    transition: transform .2s ease;
}
.gp-faq__item[open] .gp-faq__question::after {
    content: '−';
}
.gp-faq__answer {
    padding: 0 16px 14px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.65;
}
.gp-faq__answer p {
    margin: 0;
}