@charset "utf-8";
/* ------------------------------------------------------------
   FPG — Our Games (/games/)
   2.1.02 (12 November 2026), from the design (Design/claude-design/games.dc.html).
   The band and the shared pieces are page_body.css. A game's colours are custom properties on its
   card (SiteGames::styleVars()): --game, --game-dark, --game-band, --game-tint.
------------------------------------------------------------ */

/* --- the band's two links (components/games_band_links.php) --- */
.band-chips { display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:0; padding:0; }
.frame .band-chips li { margin:0; }
.frame .page-band .band-chips a {
    align-items:center;
    background:rgba(255, 255, 255, 0.08);
    border:1px solid rgba(255, 255, 255, 0.18);
    border-radius:16px;
    color:#FFF;
    display:flex;
    gap:12px;
    padding:14px 18px;
    text-decoration:none;
}
.frame .page-band .band-chips a:hover { background:rgba(255, 255, 255, 0.16); }
.band-chips b {
    color:var(--fpg-amber);
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:2.125rem;
    font-weight:900;
    line-height:1;
}
.band-chips a > span { font-size:0.875rem; line-height:1.35; }
.band-chips a > span span { color:var(--fpg-on-purple-soft); }

/* --- the two lists --- */
.games-page { padding-top:0; }
.games-group { padding-top:clamp(40px, 5vw, 72px); }
#auto.games-group { padding-top:clamp(40px, 4.5vw, 64px); }
#beforeYouPlay.games-group { padding-top:clamp(40px, 5vw, 72px); }

.games-list { display:flex; flex-direction:column; gap:24px; }
.games-list--grid {
    display:grid;
    gap:20px;
    grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}

/* --- a game's card (components/game_overview.php) --- */
.ov-card {
    background:#FFF;
    border:1px solid var(--fpg-line);
    border-radius:24px;
    box-shadow:var(--fpg-shadow);
    display:flex;
    overflow:hidden;
}
.ov-card__panel {
    background:var(--game-band, var(--fpg-purple-mid));
    color:#FFF;
    display:flex;
    gap:24px;
    overflow:hidden;
    padding:32px;
}
.ov-card__panel::before {
    background:rgba(255, 255, 255, 0.12);
    border-radius:50%;
    content:"";
    height:160px;
    position:absolute;
    right:-40px;
    top:-40px;
    width:160px;
}
.ov-card__name { align-items:center; display:flex; gap:16px; z-index:1; }
.ov-card__icon {
    align-items:center;
    background:#FFF;
    border-radius:50%;
    color:var(--game, var(--fpg-purple-mid));
    display:flex;
    flex:none;
    font-size:1.75rem;
    height:64px;
    justify-content:center;
    width:64px;
}
.frame .ov-card__name h3 { color:#FFF; font-size:1.75rem; font-weight:800; line-height:1.1; margin:0; }
.frame .ov-card__prize { line-height:1.1; margin:0; z-index:1; }
.ov-card__prize span { color:rgba(255, 255, 255, 0.92); display:block; font-size:0.875rem; font-weight:600; margin-bottom:4px; }
.ov-card__prize b {
    display:block;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:clamp(2.25rem, calc(1.6rem + 1.6vw), 3rem);
    font-weight:900;
    line-height:1.05;
}

.ov-card__body { display:flex; flex-direction:column; gap:20px; min-width:0; padding:32px; }
.frame .ov-card__blurb { color:#2E2245; font-size:1.0625rem; line-height:1.6; margin:0; }
.ov-card__facts {
    display:grid;
    gap:14px;
    grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    margin:0;
}
.ov-card__facts > div { background:#F7F5FC; border-radius:14px; padding:14px 16px; }
.ov-card__facts dt {
    color:var(--game-dark, var(--fpg-purple-mid));
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.06em;
    margin-bottom:4px;
    text-transform:uppercase;
}
.ov-card__facts dd { color:#2E2245; font-size:0.875rem; line-height:1.5; margin:0; }
.frame .ov-card__btn { margin:auto 0 0; }
.ov-card__btn .btn { align-items:center; display:inline-flex; gap:8px; }

/* the wide card: the panel on the left, name at the top and prize at the foot */
.games-list--wide .ov-card { flex-wrap:wrap; }
.games-list--wide .ov-card__panel { flex:1 1 300px; flex-direction:column; justify-content:space-between; }
.games-list--wide .ov-card__panel::after {
    background:rgba(0, 0, 0, 0.08);
    bottom:-55%;
    content:"";
    height:100%;
    left:-20%;
    position:absolute;
    transform:rotate(-12deg);
    width:140%;
}
.games-list--wide .ov-card__body { flex:2 1 480px; }

/* the shorter card: the panel across the top, name on the left and prize on the right */
.games-list--grid .ov-card { flex-direction:column; }
.games-list--grid .ov-card__panel { align-items:center; flex-wrap:wrap; justify-content:space-between; padding:28px 32px; }
.games-list--grid .ov-card__icon { font-size:1.6rem; height:60px; width:60px; }
.frame .games-list--grid .ov-card__name h3 { font-size:1.625rem; }
.games-list--grid .ov-card__prize { text-align:right; }
.games-list--grid .ov-card__prize span { font-size:0.8125rem; }
.games-list--grid .ov-card__prize b { font-size:2.5rem; line-height:1; }
.games-list--grid .ov-card__body { flex:1; gap:18px; padding:28px 32px; }
.frame .games-list--grid .ov-card__blurb { font-size:1rem; }
.games-list--grid .ov-card__facts { gap:12px; grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

/* --- Before You Play --- */
.games-before {
    align-items:center;
    background:var(--fpg-tint);
    border-radius:24px;
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    justify-content:space-between;
    padding:clamp(26px, 3.4vw, 40px);
}
.games-before__txt { align-items:flex-start; display:flex; flex:1 1 520px; gap:20px; min-width:0; }
.games-before__icon {
    align-items:center;
    background:var(--fpg-purple-mid);
    border-radius:16px;
    color:var(--fpg-amber);
    display:flex;
    flex:none;
    font-size:1.5rem;
    height:56px;
    justify-content:center;
    width:56px;
}
.frame .games-before h2 { font-size:1.75rem; font-weight:800; line-height:1.2; margin:0 0 8px; }
.frame .games-before p { font-size:1rem; line-height:1.6; margin:0; }
.frame .games-before__btn { margin:0; }

@media (max-width:600px) {
    .ov-card__panel,
    .ov-card__body,
    .games-list--grid .ov-card__panel,
    .games-list--grid .ov-card__body { padding:24px; }
    .games-list--grid .ov-card__prize { text-align:left; }
    .games-before__txt { flex-direction:column; }
}