/* Single-game pages (steam.php, xbox.php, playstation.php, retroachievements.php):
   banner header like the player page, stat tiles, slim controls, tidier achievement cards.
   Loaded after each page's inline styles; everything is scoped to body.gp. */

.gp-steam { --pc: #66c0f4; }
.gp-ra    { --pc: #e879f9; }
.gp-psn   { --pc: #3b9ae6; }
.gp-xbox  { --pc: #5dc04d; }

/* ── Header ──────────────────────────────────────────────────────── */
.gp .game-header {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 1.25rem;
}
.gp .game-header:hover { border-color: rgba(255,255,255,0.07); box-shadow: none; }
.gp .game-info { display: contents; }

/* banner: a mosaic of this game's achievement icons */
.gp .gp-banner {
    grid-column: 1 / -1; grid-row: 1;
    position: relative; height: 150px; overflow: hidden;
    background: radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--pc) 45%, transparent) 0%, transparent 60%), linear-gradient(135deg, #1e1b4b, #0f172a);
}
.gp .gp-mosaic { position: absolute; inset: -4px; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.gp .gp-mosaic img { width: 74px; height: 74px; object-fit: cover; border-radius: 6px; opacity: 0; animation: gp-in 0.5s ease forwards; }
@keyframes gp-in { to { opacity: 1; } }
.gp .gp-banner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(30,41,59,0.2) 0%, rgba(30,41,59,0.6) 55%, var(--card-bg) 100%),
                linear-gradient(to right, rgba(30,41,59,0.8) 0%, rgba(30,41,59,0.25) 50%, rgba(30,41,59,0.45) 100%);
}

/* cover overlapping the banner */
.gp .game-icon, .gp .steam-icon {
    grid-column: 1; grid-row: 2 / span 2;
    position: relative; z-index: 1; align-self: end;
    margin: -64px 0 0 2rem;
    border: 3px solid rgba(255,255,255,0.14); border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.gp .game-icon { width: 120px; height: 120px; }
.gp .game-header:hover .game-icon, .gp .game-header:hover .steam-icon { border-color: rgba(255,255,255,0.14); }

.gp .game-title {
    grid-column: 2; grid-row: 2; align-self: end;
    position: relative; z-index: 1; margin: -40px 2rem 0 1.5rem;
    font-size: 2rem; font-weight: 800; line-height: 1.15; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    overflow-wrap: anywhere; white-space: normal;
}

/* player chip under the title, links back to the profile */
.gp .user-info-strip {
    grid-column: 2; grid-row: 3; justify-self: start; align-self: start;
    display: inline-flex; align-items: center; gap: 8px;
    margin: 10px 2rem 0 1.5rem; padding: 4px 12px 4px 4px;
    background: color-mix(in srgb, var(--pc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent);
    border-radius: 999px; text-decoration: none; transition: filter 0.15s;
}
.gp .user-info-strip:hover { filter: brightness(1.25); }
.gp .user-avatar { width: 26px; height: 26px; border-radius: 50%; border: 0; object-fit: cover; }
.gp .user-name { font-size: 0.85rem; font-weight: 700; color: #e2e8f0; }
.gp .gp-back { font-size: 0.72rem; color: var(--text-muted); margin-left: 4px; }

/* stat tiles */
.gp .game-meta {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
    margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.06);
}
.gp .game-meta-item { padding: 1rem 2rem 1.1rem; gap: 6px; }
.gp .game-meta-item + .game-meta-item { border-left: 1px solid rgba(255,255,255,0.06); }
.gp .meta-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-muted); }
.gp .meta-value, .gp .gamerscore-display { font-size: 1.35rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.gp .gamerscore-display img { width: 18px; height: 18px; }

/* PlayStation trophy counts */
.gp .trophy-counts { grid-column: 1 / -1; padding: 0 2rem; margin-top: 0.25rem; }

/* progress along the bottom */
.gp .progress-container { grid-column: 1 / -1; padding: 0.25rem 2rem 1.5rem; margin: 0; }
.gp .game-meta + .progress-container, .gp .trophy-counts + .progress-container { border-top: 0; }
.gp .progress-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); }
.gp .progress-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 70%, #000), var(--pc)); border-radius: 4px; }
.gp .progress-fill.complete { background: linear-gradient(90deg, #16a34a, #4ade80); }
.gp .progress-pct { color: var(--pc); }

/* ── Controls: one slim bar ──────────────────────────────────────── */
.gp .controls-bar {
    padding: 0.6rem 1rem; margin-bottom: 1rem; border-radius: 12px;
    background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.06);
}
.gp .controls-bar label { font-size: 0.7rem; letter-spacing: 0.1em; }
.gp .controls-bar select, .gp .sort-direction-btn { border-radius: 8px; }
.gp .controls-bar input[type="checkbox"] { accent-color: var(--pc); }

/* ── Achievement / trophy cards ─────────────────────────────────── */
.gp .achievement-list, .gp .trophy-list { gap: 0.75rem; }
.gp .achievement-card, .gp .trophy-card {
    border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; position: relative;
}
.gp .achievement-card:not(.locked)::before, .gp .trophy-card:not(.locked)::before {
    content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pc);
}
.gp .achievement-card:hover, .gp .trophy-card:hover { border-color: rgba(255,255,255,0.14); }
.gp .achievement-card.locked, .gp .trophy-card.locked { opacity: 0.55; background: rgba(30,41,59,0.55); }
.gp .achievement-icon { border-radius: 10px; border-color: rgba(255,255,255,0.08); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .gp .game-header { text-align: left; }
    .gp .controls-bar, .gp .controls-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
    .gp .controls-bar { justify-content: space-between; }
    .gp .gp-banner { height: 110px; }
    .gp .game-icon { width: 84px; height: 84px; }
    .gp .game-icon, .gp .steam-icon { margin: -48px 0 0 1rem; border-radius: 14px; }
    .gp .steam-icon { max-width: 140px; height: auto; }
    .gp .game-title { grid-column: 1 / -1; grid-row: auto; margin: 0.9rem 1rem 0; font-size: 1.4rem; }
    .gp .user-info-strip { grid-column: 1 / -1; grid-row: auto; margin: 8px 1rem 0; }
    .gp .game-icon, .gp .steam-icon { grid-row: 2; }
    .gp .game-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
    .gp .game-meta-item { padding: 0.8rem 1rem; }
    .gp .game-meta-item:nth-child(odd) { border-left: 0; }
    .gp .game-meta-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.06); }
    .gp .meta-value, .gp .gamerscore-display { font-size: 1.1rem; }
    .gp .progress-container, .gp .trophy-counts { padding-left: 1rem; padding-right: 1rem; }
}

/* Xbox platform badges (PC / ONE / Series), same look as on the player page */
.gp .console-badge {
    display: inline-flex; align-items: center; margin-right: 4px; padding: 0.15rem 0.45rem;
    border-radius: 5px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff; vertical-align: middle;
}
.gp .console-xbox { background: rgba(16,124,16,0.6); }