/* ==========================================================================
   oto.chat/games — catalog styled after the Android app's games screen:
   lavender star-and-bar drifting backdrop, plum ink, candy-gradient cards,
   Continue / Most popular rails + All games grid, press-scale cards.
   ========================================================================== */

/* ---- Panels and state messages shared with the gallery (were in
   oto-otomates-light.css, which loaded just before this file). ---- */
.oto-page-kicker {
    color: #8693a8;
}

.browse-toolbar.oto-surface-panel {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(215, 223, 234, 0.92);
    box-shadow: 0 10px 24px rgba(18, 31, 45, 0.04);
}

.oto-surface-panel.oto-surface-panel-light {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(215, 223, 234, 0.92);
    box-shadow: 0 10px 24px rgba(18, 31, 45, 0.04);
    backdrop-filter: none;
}

.state-panel {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 24px;
    text-align: center;
    color: #5e6778;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(215, 223, 234, 0.92);
    border-radius: 22px;
}

.state-panel p {
    margin: 0;
    max-width: 420px;
    font-size: 15px;
    color: #5e6778;
}

.state-panel i {
    color: #8792a4;
    font-size: 28px;
}

.state-panel h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

@media (max-width: 460px) {
    .state-panel h2 {
        font-size: 24px;
    }
}


:root {
    --gp-ink: #4a3a55;
    --gp-muted: #8a7d95;
    --gp-backdrop: #fbf8fe;
    --gp-card: #ffffff;
    --gp-candy-a: #9bd9ff;
    --gp-candy-b: #ff6fae;
    --gp-shadow: 0 10px 26px rgba(74, 58, 85, 0.12);
    --gp-shadow-hover: 0 16px 34px rgba(74, 58, 85, 0.18);
    --gp-radius: 16px;
}

.games-page {
    min-height: 100vh;
    background: var(--gp-backdrop);
}

.games-main {
    min-width: 0;
    position: relative;
    isolation: isolate;
}

/* ---------- animated backdrop: drifting stars + slanted bars ---------- */
.gp-backdrop {
    position: fixed;
    inset: -460px;
    z-index: 0;
    pointer-events: none;
    background-color: var(--gp-backdrop);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cg fill='%23e7dcf4'%3E%3Cpath d='M70 34l4.23 10.17 10.99.89-8.37 7.16 2.55 10.72L70 57.2l-9.4 5.74 2.55-10.72-8.37-7.16 10.99-.89z'/%3E%3Cpath d='M300 254l4.23 10.17 10.99.89-8.37 7.16 2.55 10.72-9.4-5.74-9.4 5.74 2.55-10.72-8.37-7.16 10.99-.89z'/%3E%3Cpath d='M170 374l4.23 10.17 10.99.89-8.37 7.16 2.55 10.72-9.4-5.74-9.4 5.74 2.55-10.72-8.37-7.16 10.99-.89z'/%3E%3C/g%3E%3Cg fill='%23ede5f7'%3E%3Crect x='207' y='84' width='66' height='12' rx='6' transform='rotate(45 240 90)'/%3E%3Crect x='27' y='314' width='66' height='12' rx='6' transform='rotate(45 60 320)'/%3E%3Crect x='347' y='174' width='66' height='12' rx='6' transform='rotate(45 380 180)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 460px 460px;
    animation: gp-drift 24s linear infinite;
    will-change: transform;
}

@keyframes gp-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(460px, 460px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .gp-backdrop { animation: none; will-change: auto; }
    .gp-curtain { display: none; }
}

/* ---------- curtain wipe entry (JP-style, like the app) ---------- */
.gp-curtain {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: linear-gradient(135deg, #cdb5ec, #9bd9ff);
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: gp-curtain-open 520ms cubic-bezier(0.4, 0, 0.2, 1) 80ms forwards;
}

@keyframes gp-curtain-open {
    to { clip-path: polygon(130% 0, 130% 0, 100% 100%, 100% 100%); }
}

/* ---------- layout ---------- */
.games-content {
    position: relative;
    z-index: 1;
    width: min(var(--oto-shell-width, 1180px), calc(100% - 8px));
    margin: 0 auto;
    padding: 26px 12px 60px;
}

.gp-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 2px 18px;
}

.gp-hero-copy {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.gp-hero-title {
    margin: 0;
    color: var(--gp-ink);
    font-size: 36px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.gp-hero-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.gp-hero-count {
    color: var(--gp-muted);
    font-size: 14px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(74, 58, 85, 0.08);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}

.gp-badges-open {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    color: var(--gp-ink);
    background: #fff;
    border: 1px solid rgba(74, 58, 85, 0.12);
    border-radius: 999px;
    box-shadow: var(--gp-shadow);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.gp-badges-open:hover { transform: translateY(-1px); box-shadow: var(--gp-shadow-hover); }
.gp-badges-open:active { transform: scale(.97); }
.gp-badges-open:focus-visible { outline: 3px solid #9bd9ff; outline-offset: 2px; }
.gp-badges-open-icon { font-size: 21px; }
.gp-badges-open strong {
    min-width: 42px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #6c5ce7;
    background: rgba(108, 92, 231, .1);
    text-align: center;
    font-size: 12px;
}

/* Daily pill: the prize spinners that are ready to spin (ready/total). */
.gp-daily-open {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 4px 6px 4px 12px;
    color: #6c5ce7;
    background: rgba(108, 92, 231, .1);
    border: 1px solid rgba(108, 92, 231, .16);
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.gp-daily-open:hover { transform: translateY(-1px); background: rgba(108, 92, 231, .15); box-shadow: var(--gp-shadow); }
.gp-daily-open:active { transform: scale(.97); }
.gp-daily-open:focus-visible { outline: 3px solid #9bd9ff; outline-offset: 2px; }
.gp-daily-open-icon { font-size: 17px; line-height: 1; }
.gp-daily-open strong {
    min-width: 34px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    background: #6c5ce7;
    text-align: center;
    font-size: 12px;
}

.gp-daily-open.is-ready strong { background: #ff7a45; }
.gp-daily-open.is-empty { color: var(--gp-muted); background: rgba(255, 255, 255, 0.75); border-color: rgba(74, 58, 85, 0.08); }
.gp-daily-open.is-empty strong { background: rgba(74, 58, 85, .28); }

.gp-section {
    margin: 0 0 26px;
}

.gp-section-title {
    margin: 0 0 12px;
    color: var(--gp-ink);
    font-size: 24px;
    line-height: 27px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gp-section-subtitle {
    margin-left: 10px;
    color: var(--gp-ink-soft, rgba(74, 58, 85, 0.62));
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---------- rails (horizontal scroll + snap) ---------- */
.gp-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    /* Keep the same 2px horizontal alignment as game thumbnails, but leave
       enough vertical room for the avatar ring's 26px shadow so scrolling
       does not clip its bottom edge. */
    padding: 4px 2px 24px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 58, 85, 0.22) transparent;
}

.gp-rail::-webkit-scrollbar { height: 8px; }
.gp-rail::-webkit-scrollbar-thumb {
    background: rgba(74, 58, 85, 0.18);
    border-radius: 99px;
}
.gp-rail::-webkit-scrollbar-track { background: transparent; }

.gp-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ---------- all-games grid ---------- */
.gp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 16px;
    padding: 4px 2px;
}

/* Skip rendering offscreen grid cards while preserving stable grid geometry.
   Horizontal rails stay fully rendered for smooth swipe tracking. */
.gp-grid .gp-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 236px;
}

/* ---------- cards ---------- */
.gp-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    background: var(--gp-card);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-shadow);
    cursor: pointer;
    overflow: hidden;
    transition: transform 140ms ease, box-shadow 140ms ease;
    font-family: inherit;
}

.gp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gp-shadow-hover);
}

.gp-card:active {
    transform: scale(0.96);
    transition-duration: 80ms;
}

.gp-card:focus-visible {
    outline: 3px solid #9bd9ff;
    outline-offset: 2px;
}

.gp-card-art {
    position: relative;
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--gp-candy-a), var(--gp-candy-b));
    overflow: hidden;
}

.gp-card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gp-card-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 34px;
    text-shadow: 0 4px 14px rgba(74, 58, 85, 0.3);
}

.gp-card-art.has-thumbnail .gp-card-icon { display: none; }

.gp-card-pills {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
}

/* Launch-window ribbon: shown while a game's releasedAt is under 14 days
   old (isNewRelease in games.js) — the stale catalog `status` is ignored. */
.gp-new-ribbon {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 9px;
    background: linear-gradient(135deg, #ff8a3d, #f5576c);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(245, 87, 108, 0.35);
    pointer-events: none;
}

/* Admins get the analytics button in the same corner — drop the ribbon
   underneath it rather than overlapping. */
.gp-card-art:has(.gp-analytics-btn) .gp-new-ribbon { top: 56px; }

.gp-play-pill,
.gp-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: rgba(30, 20, 40, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.gp-live-pill {
    background: rgba(13, 96, 86, 0.68);
}

.gp-play-pill i,
.gp-live-pill i { font-size: 9px; }

.gp-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 13px;
    flex: 1 1 auto;
}

.gp-card-title {
    color: var(--gp-ink);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gp-card-copy {
    color: var(--gp-muted);
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}

.gp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gp-ink);
    background: #f3ecfa;
    border-radius: 999px;
}

.gp-chip-multi {
    color: #1f6dbb;
    background: #e2f1ff;
}

/* card size variants */
.gp-card-featured { width: 300px; }
.gp-card-featured .gp-card-art { height: 180px; }
.gp-card-featured .gp-card-title { font-size: 17px; }

.gp-card-continue { width: 178px; }
.gp-card-continue .gp-card-art { height: 104px; }
.gp-card-continue .gp-card-copy { display: none; }
.gp-card-continue .gp-card-title { font-size: 13.5px; }

.gp-card-standard .gp-card-art { height: 132px; }

/* HOT: the newest releases as a row of big cards (hotGames in games.js
   picks them) - three across on desktop, a swipeable rail on phones. */
.gp-hot-flame { color: #f5576c; }
.gp-hot-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 4px 2px;
}
.gp-card-hot {
    border: 2px solid #ffb199;
    box-shadow: 0 12px 30px rgba(245, 87, 108, 0.16);
}
.gp-card-hot .gp-card-art { aspect-ratio: 16 / 9; height: auto; }
.gp-card-hot .gp-card-body { gap: 8px; padding: 13px 15px 15px; }
.gp-card-hot .gp-card-title { font-size: 20px; line-height: 1.15; font-weight: 900; }
.gp-card-hot .gp-card-copy { font-size: 13px; }
.gp-card-hot .gp-card-icon { font-size: 48px; }
/* No blur over the playing preview video. */
.gp-card-hot .gp-play-pill,
.gp-card-hot .gp-live-pill { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(30, 20, 40, 0.7); }

.gp-hot-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gp-hot-cta {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #ff8a3d, #f5576c);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(245, 87, 108, 0.3);
}
.gp-hot-cta i { font-size: 12px; }

/* ---------- state panels ---------- */
.games-state-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 70px 20px;
    color: var(--gp-muted);
    text-align: center;
}

.games-state-panel i { font-size: 30px; color: #b8a6cc; }

.games-state-panel h2 {
    margin: 0;
    color: var(--gp-ink);
    font-size: 20px;
    font-weight: 800;
}

.games-state-copy { margin: 0; font-size: 14px; }

/* ---------- player ---------- */
.platform-game-player {
    position: relative;
    z-index: 1;
    margin: 10px 0 40px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(74, 58, 85, 0.08);
    box-shadow: var(--gp-shadow);
    overflow: hidden;
}

.platform-game-player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
}

.platform-game-player-kicker {
    margin: 0 0 2px;
    color: var(--gp-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.platform-game-player-title {
    margin: 0;
    color: var(--gp-ink);
    font-size: 22px;
    font-weight: 900;
}

.platform-game-player-status {
    margin: 2px 0 0;
    color: var(--gp-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.platform-game-actions { display: flex; gap: 8px; }

.platform-game-frame-shell {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 420px;
    background: #14101b;
}

/* Portrait games get their own shape. 14 of the 33 games in the catalog
   declare orientation: portrait, and forcing those into 16/9 renders a
   phone-shaped layout at desktop width, where everything below the fold is
   simply cut off. On a wide screen the height leads and the width follows it,
   so the frame lands phone-sized and centred rather than filling the column;
   the Android host has always done the equivalent in applyGameOrientation(). */
.platform-game-frame-shell.is-portrait:not(:fullscreen) {
    aspect-ratio: auto;
    height: min(78vh, 720px);
    /* Explicit, not `width: auto` — the shell is a block box, so auto would
       fill the column and aspect-ratio would never get to derive the width. */
    width: calc(min(78vh, 720px) * 9 / 16);
    min-height: 0;
    margin-inline: auto;
}

/* fullscreen viewer: let the shell fill the screen instead of keeping 16:9 */
.platform-game-frame-shell:fullscreen,
.platform-game-frame-shell:-webkit-full-screen {
    aspect-ratio: auto;
    min-height: 100%;
    width: 100%;
    height: 100%;
}

#platform-game-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Guest gate: the sign-in card over a guest's game at their first break
   (showGuestGate in games.js). A flat scrim, no backdrop-filter - the game
   canvas is still live underneath. */
.gp-guest-gate {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 14, 30, 0.78);
    overflow-y: auto;
}
.gp-guest-gate-card {
    width: 100%;
    max-width: 340px;
    padding: 22px 20px 16px;
    border-radius: 20px;
    background: #fff;
    color: var(--gp-ink);
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.gp-guest-gate-kicker {
    margin: 0 0 4px;
    color: #f5576c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.gp-guest-gate-title {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
}
.gp-guest-gate-copy {
    margin: 0 0 16px;
    color: var(--gp-muted);
    font-size: 13.5px;
    line-height: 1.45;
}
.gp-guest-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gp-guest-gate-actions .oto-btn {
    height: 46px;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
}
.gp-guest-gate-google {
    color: var(--gp-ink);
    background: #fff;
    border: 1px solid rgba(74, 58, 85, 0.22);
}
.gp-guest-gate-google svg { width: 18px; height: 18px; flex: 0 0 auto; }
.gp-guest-gate-inapp {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff6ec;
    border: 1px solid #ffd7b0;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
}
.gp-guest-gate-inapp a { font-weight: 800; color: #f5576c; }
.gp-guest-gate-back {
    margin-top: 12px;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: var(--gp-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.gp-guest-gate-back:hover { color: var(--gp-ink); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
    .gp-backdrop { animation: none; will-change: auto; }
    .gp-curtain { display: none; }
    .gp-card {
        box-shadow: 0 3px 10px rgba(74, 58, 85, 0.10);
        transition: none;
    }
    .gp-card:hover {
        transform: none;
        box-shadow: 0 3px 10px rgba(74, 58, 85, 0.10);
    }
    .gp-play-pill,
    .gp-live-pill {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .games-content { padding: 18px 8px 50px; }
    /* Title and badges share the first row; the count + Daily pills get the
       full width underneath (the copy wrapper dissolves into the grid). */
    .gp-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 10px; }
    .gp-hero-copy { display: contents; }
    .gp-hero-title { grid-column: 1; grid-row: 1; }
    .gp-badges-open { grid-column: 2; grid-row: 1; justify-self: end; }
    .gp-hero-pills { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
    .gp-hero-title { font-size: 30px; }
    .gp-badges-open { min-height: 40px; padding-left: 9px; }
    .gp-badges-open > span:not(.gp-badges-open-icon) { display: none; }
    .gp-section-title { font-size: 21px; }
    .gp-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
    .gp-card-standard .gp-card-art { height: 104px; }
    .gp-card-featured { width: 252px; }
    .gp-card-featured .gp-card-art { height: 150px; }
    .gp-hot-row {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 4px 2px 14px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .gp-hot-row::-webkit-scrollbar { display: none; }
    .gp-hot-row > .gp-card-hot { flex: 0 0 84%; scroll-snap-align: start; }
    .platform-game-frame-shell { min-height: 300px; }
    /* Narrow screens are already the shape these games want: let the column
       set the width and derive the height, rather than a height cap that
       would leave the frame narrower than the phone holding it. */
    .platform-game-frame-shell.is-portrait:not(:fullscreen) {
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 16;
        max-height: 78vh;
    }
    .platform-game-player-head { flex-wrap: wrap; }
}

/* ---------- friends bar (Roblox-style row above the games grid) ---------- */
.gp-friends-bar {
    position: relative;
    z-index: 1;
    margin: 2px 0 18px;
}

.gp-friends-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 58, 85, 0.22) transparent;
    -webkit-overflow-scrolling: touch;
}

.gp-friends-row > * { scroll-snap-align: start; }

.gp-friend-tile {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 74px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    color: var(--gp-ink);
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease;
}

.gp-friend-tile:hover { transform: translateY(-2px); }
.gp-friend-tile:active { transform: scale(0.95); }
.gp-friend-tile:focus-visible { outline: 3px solid #9bd9ff; outline-offset: 3px; border-radius: 10px; }

.gp-hero-title[data-friend-card-fallback]:focus {
    outline: 3px solid #9bd9ff;
    outline-offset: 4px;
    border-radius: 5px;
}

.gp-friend-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    padding: 3px;
    background: #cfc4dc;
    box-shadow: var(--gp-shadow);
}

.gp-friend-tile.online .gp-friend-ring {
    background: linear-gradient(135deg, #35d07f, #1fae66);
}

.gp-friend-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gp-card);
    display: block;
}

.gp-friend-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: var(--gp-muted);
}

.gp-friend-tile.offline .gp-friend-avatar { filter: grayscale(0.9); opacity: 0.65; }
.gp-friend-tile.offline .gp-friend-name { color: var(--gp-muted); }

.gp-friend-name {
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.gp-friend-game {
    max-width: 74px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gp-muted);
    text-align: center;
}

/* Green game label = tap to join; non-joinable sessions stay muted. */
.gp-friend-tile.joinable .gp-friend-game { color: #1fae66; }

.gp-friend-tile.joinable .gp-friend-ring {
    box-shadow: 0 0 0 2px rgba(31, 174, 102, 0.25), var(--gp-shadow);
}

.gp-friend-add .gp-friend-ring {
    background: none;
    border: 2px dashed #cfc4dc;
    padding: 2px;
    box-shadow: none;
}

.gp-friend-add .gp-friend-avatar-fallback { font-size: 18px; }
.gp-friend-add .gp-friend-name { color: var(--gp-muted); }

@media (max-width: 760px) {
    /* Four complete friend slots per mobile viewport. Fixed 74px tiles left a
       narrow remainder that exposed the next avatar as a clipped sliver. */
    .gp-friends-row {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
    }

    .gp-friend-tile {
        width: calc((100% - 42px) / 4);
        scroll-snap-stop: always;
    }

    .gp-friend-name,
    .gp-friend-game {
        max-width: 100%;
    }
}

/* ── Search toolbar (mirrors the /otomates browse toolbar, themed to the
   games page's own tokens since the otomates stylesheet isn't linked here) ── */
.gp-toolbar.browse-toolbar {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--gp-card);
    border: 1px solid rgba(74, 58, 85, 0.10);
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-shadow);
}

.gp-toolbar .browse-toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gp-toolbar .search-field {
    flex: 1 1 420px;
    min-width: min(420px, 100%);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--gp-backdrop);
    border: 1px solid rgba(74, 58, 85, 0.12);
    border-radius: 12px;
}

.gp-toolbar .search-field:focus-within {
    border-color: var(--gp-candy-b);
    box-shadow: 0 0 0 3px rgba(255, 111, 174, 0.16);
}

.gp-toolbar .search-icon {
    color: var(--gp-muted);
    font-size: 14px;
}

.gp-toolbar .search-input {
    width: 100%;
    min-width: 0;
    color: var(--gp-ink);
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
}

.gp-toolbar .search-input::placeholder { color: var(--gp-muted); }

.gp-toolbar .clear-filters-btn {
    margin-left: auto;
    min-height: 40px;
    padding: 0 16px;
    color: var(--gp-ink);
    background: var(--gp-backdrop);
    border: 1px solid rgba(74, 58, 85, 0.14);
    border-radius: 12px;
    font: inherit;
    cursor: pointer;
}

.gp-toolbar .clear-filters-btn:hover { border-color: var(--gp-candy-b); }

.gp-all-empty {
    /* Sits above the grid now: when a search finds nothing, the grid below it
       holds the suggestions this line introduces. */
    margin: 0 2px 14px;
    color: var(--gp-muted);
}

.gp-analytics-btn { position:absolute; right:12px; top:12px; z-index:4; width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:#6c5ce7; background:rgba(255,255,255,.94); border:1px solid rgba(108,92,231,.3); border-radius:50%; box-shadow:0 6px 18px rgba(30,22,72,.14); cursor:pointer; }
.game-analytics-overlay { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(20,25,34,.52); backdrop-filter:blur(8px); }
.game-analytics-overlay[hidden] { display:none; }
.game-analytics-panel { width:min(900px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:22px; border-radius:14px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.24); }
.game-analytics-header,.game-analytics-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.game-analytics-header p { margin:0 0 3px; color:#6c5ce7; font-size:11px; font-weight:700; text-transform:uppercase; }
.game-analytics-header h2 { margin:0; }
.game-analytics-header button { width:36px; height:36px; border:1px solid rgba(0,0,0,.12); border-radius:8px; background:#fff; cursor:pointer; }
.game-analytics-tools { margin-top:18px; }
.game-analytics-tools select { padding:8px 12px; border:1px solid rgba(0,0,0,.12); border-radius:8px; background:#fff; }
#game-analytics-chart svg { width:100%; height:260px; display:block; margin-top:12px; }
#game-analytics-status { margin:8px 0 0; color:rgba(0,0,0,.58); font-size:13px; }
.game-analytics-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; margin-top:16px; }
.game-analytics-metrics > div { padding:12px 14px; border:1px solid rgba(108,92,231,.15); border-radius:10px; background:#f8f7ff; }
.game-analytics-metrics span { display:block; color:rgba(0,0,0,.58); font-size:12px; }
.game-analytics-metrics strong { display:block; margin-top:4px; font-size:20px; }
.game-analytics-breakdown h3 { margin:22px 0 4px; font-size:15px; }
.game-analytics-breakdown > h3:first-child, .game-analytics-breakdown > div > h3:first-child { margin-top:8px; }
.game-analytics-breakdown p { margin:0 0 10px; color:rgba(0,0,0,.58); font-size:12.5px; }
#game-analytics-web-wrap[hidden] { display:none; }
.game-analytics-table-wrap { overflow-x:auto; border:1px solid rgba(0,0,0,.08); border-radius:10px; }
.game-analytics-breakdown table { width:100%; border-collapse:collapse; font-size:13px; }
.game-analytics-breakdown th,.game-analytics-breakdown td { padding:9px 11px; text-align:right; border-bottom:1px solid rgba(0,0,0,.07); white-space:nowrap; }
.game-analytics-breakdown th:first-child,.game-analytics-breakdown td:first-child { text-align:left; }
.game-analytics-breakdown tbody tr:last-child td { border-bottom:0; }
.game-analytics-breakdown tr.gp-analytics-total-row td { font-weight:700; border-top:1px solid rgba(0,0,0,.12); background:#faf9ff; }
@media (max-width:640px) { .game-analytics-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- lifetime badge collection ---------- */
.gp-badges-overlay {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(35, 27, 43, .72);
}

.gp-badges-overlay[hidden] { display: none; }

.gp-badges-panel {
    width: min(900px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 22px;
    border-radius: 20px;
    background: #fbf8fe;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.gp-badges-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gp-badges-header p {
    margin: 0 0 3px;
    color: #6c5ce7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gp-badges-header h2 { margin: 0; color: var(--gp-ink); font-size: 28px; }
.gp-badges-header button {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(74, 58, 85, .14);
    border-radius: 12px;
    color: var(--gp-ink);
    background: #fff;
    cursor: pointer;
}

.gp-badges-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 18px;
    margin-top: 16px;
    color: var(--gp-muted);
    font-size: 13px;
}

.gp-badges-summary strong { color: var(--gp-ink); font-size: 15px; }
.gp-badges-status { min-height: 18px; margin: 8px 0 0; color: #6c5ce7; font-size: 12px; font-weight: 700; }
.gp-badges-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.gp-badge-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    min-width: 0;
    padding: 13px;
    color: var(--gp-ink);
    background: #fff;
    border: 1px solid rgba(74, 58, 85, .11);
    border-radius: 16px;
    text-align: left;
    font: inherit;
    box-shadow: 0 7px 18px rgba(74, 58, 85, .07);
}

button.gp-badge-card { cursor: pointer; }
button.gp-badge-card:hover { border-color: rgba(108, 92, 231, .4); transform: translateY(-1px); }
button.gp-badge-card:focus-visible { outline: 3px solid #9bd9ff; outline-offset: 2px; }
.gp-badge-card.locked { color: rgba(74, 58, 85, .62); background: rgba(255, 255, 255, .62); box-shadow: none; }
.gp-badge-card.pinned { border-color: rgba(108, 92, 231, .46); box-shadow: 0 0 0 2px rgba(108, 92, 231, .1); }

.gp-badge-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 28px;
    background: var(--badge-gradient);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}

.gp-badge-card.locked .gp-badge-icon { filter: grayscale(1); opacity: .46; }
.gp-badge-copy { min-width: 0; }
.gp-badge-kicker { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #6c5ce7; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.gp-badge-pin { color: #6c5ce7; font-size: 13px; }
.gp-badge-title { display: block; margin-top: 3px; font-size: 14px; font-weight: 900; line-height: 1.25; }
.gp-badge-description { display: block; margin-top: 3px; min-height: 30px; color: var(--gp-muted); font-size: 11px; line-height: 1.35; }
.gp-badge-progress { grid-column: 1 / -1; }
.gp-badge-progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(74, 58, 85, .09); }
.gp-badge-progress-fill { height: 100%; border-radius: inherit; background: var(--badge-gradient); }
.gp-badge-progress-label { display: block; margin-top: 5px; color: var(--gp-muted); font-size: 10px; font-weight: 700; text-align: right; }

/* ---------- daily bonuses (prize spinners) ---------- */
.gp-daily-panel { width: min(1080px, 100%); }
.gp-daily-header { align-items: flex-start; }
.gp-daily-heading { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.gp-daily-emblem {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: rgba(108, 92, 231, .1);
    font-size: 28px;
}
.gp-daily-subtitle { display: block; margin-top: 4px; color: var(--gp-muted); font-size: 13px; font-weight: 600; }

.gp-daily-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.gp-daily-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(74, 58, 85, .11);
    border-radius: 18px;
    box-shadow: 0 7px 18px rgba(74, 58, 85, .07);
}

.gp-daily-art {
    position: relative;
    display: block;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    border-radius: 13px;
    background: rgba(108, 92, 231, .1);
}
.gp-daily-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-daily-card.is-cooldown .gp-daily-art img { filter: saturate(.55); opacity: .82; }

.gp-daily-copy { display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; padding: 12px 4px 2px; }
.gp-daily-title { margin: 0; color: var(--gp-ink); font-size: 19px; font-weight: 900; line-height: 1.2; }
.gp-daily-blurb { margin: 0; color: var(--gp-muted); font-size: 13px; line-height: 1.35; }
.gp-daily-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #6c5ce7;
    font-size: 12px;
    font-weight: 800;
}
.gp-daily-card.is-cooldown .gp-daily-meta { color: var(--gp-muted); }
.gp-daily-meta-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46, 204, 113, .18); }
.gp-daily-card.is-cooldown .gp-daily-meta-dot { background: rgba(74, 58, 85, .3); box-shadow: none; }

.gp-daily-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 10px;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(135deg, #8b7cf6, #6c5ce7);
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(108, 92, 231, .28);
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.gp-daily-play:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(108, 92, 231, .34); }
.gp-daily-play:active { transform: scale(.98); }
.gp-daily-play:focus-visible { outline: 3px solid #9bd9ff; outline-offset: 2px; }
.gp-daily-card.is-cooldown .gp-daily-play {
    color: #6c5ce7;
    background: rgba(108, 92, 231, .1);
    box-shadow: none;
}

@media (max-width: 760px) {
    .gp-badges-overlay { padding: 0; align-items: flex-end; }
    .gp-daily-panel { padding-top: 16px; }
    .gp-daily-emblem { width: 44px; height: 44px; font-size: 22px; border-radius: 13px; }
    .gp-badges-header.gp-daily-header h2 { font-size: 24px; }
    .gp-daily-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
    .gp-daily-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: none; gap: 12px; align-items: center; padding: 10px; }
    .gp-daily-art { width: 100%; min-width: 0; aspect-ratio: 4 / 3; }
    .gp-daily-copy { min-width: 0; padding: 4px 2px 4px 0; }
    .gp-daily-blurb { font-size: 12px; }
    .gp-daily-cost { display: inline; }
    .gp-daily-title { font-size: 18px; }
    .gp-daily-play { min-height: 42px; margin-top: 8px; }
    .gp-badges-panel { width: 100%; max-height: 88vh; padding: 18px 14px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; }
    .gp-badges-grid { grid-template-columns: 1fr; }
    .gp-badges-summary { display: grid; }
    .gp-badge-description { min-height: 0; }
}