@charset "utf-8";
/* ------------------------------------------------------------
   FPG — a game's page (/games/<slug>/, views/game.php)
   2.1.02 (12 November 2026), from the design (Design/claude-design/game-*.dc.html).
   The game's colours are custom properties on .game-wrap (SiteGames::styleVars()): --game (icons,
   dots), --game-dark (text and buttons on white), --game-band (behind white text) and --game-tint.
   The shared pieces (.inner-head, .inner-kicker, .inner-pill, .game-dot) are page_body.css.
   ⚠ core's base.css makes every element position:relative: shapes say position:absolute, and the
   content above them gets a z-index.
------------------------------------------------------------ */

/* ------------------------------------------------------------
   The band (components/game_band.php)
------------------------------------------------------------ */
.game-band {
    background:var(--game-band, var(--fpg-purple-mid));
    color:#FFF;
    overflow:hidden;
    padding:clamp(36px, 4.5vw, 48px) 0 clamp(44px, 5.5vw, 64px);
}
.game-band::before,
.game-band::after {
    content:"";
    height:100%;
    position:absolute;
    right:-10%;
    top:0;
}
.game-band::before { background:rgba(0, 0, 0, 0.07); clip-path:polygon(30% 0, 100% 0, 100% 100%, 0 100%); width:60%; }
.game-band::after { background:rgba(0, 0, 0, 0.14); clip-path:polygon(45% 0, 100% 0, 100% 100%, 0 100%); width:34%; }

.game-band__inner { align-items:center; display:flex; flex-wrap:wrap; gap:clamp(32px, 4vw, 48px); z-index:1; }
.game-band__txt { display:flex; flex:1 1 540px; flex-direction:column; gap:18px; min-width:0; }

/* the breadcrumb's list is page_body.css's (.page-band__crumbs); white here */
.frame .game-band .page-band__crumbs li { color:#FFF; line-height:1.5; margin:0; }
.frame .game-band .page-band__crumbs li[aria-current] { font-weight:700; }
.game-band .page-band__crumbs li + li::before { content:"/"; margin-right:8px; }
.frame .game-band .page-band__crumbs a { color:#FFF; text-decoration:underline; }

.game-band__name { align-items:center; display:flex; gap:18px; }
.game-band__icon {
    align-items:center;
    background:#FFF;
    border-radius:50%;
    box-shadow:0 8px 0 rgba(0, 0, 0, 0.12);
    color:var(--game, var(--fpg-purple-mid));
    display:flex;
    flex:none;
    font-size:2rem;
    height:76px;
    justify-content:center;
    width:76px;
}
.frame .game-band__name h1 {
    color:#FFF;
    font-size:clamp(2.25rem, calc(1.3rem + 2.8vw), 3.75rem);
    font-weight:900;
    line-height:1;
    margin:0;
}
.frame .game-band__lead p { color:#FFF; font-size:1.1875rem; line-height:1.55; margin:0; max-width:600px; }
.frame .game-band__uk {
    align-self:flex-start;
    background:rgba(255, 255, 255, 0.16);
    border-radius:999px;
    color:#FFF;
    font-size:0.875rem;
    margin:0;
    padding:6px 14px;
}
.frame .game-band__btns { gap:12px; justify-content:flex-start; margin:4px 0 0; padding:0; }

/* "At a glance" */
.game-glance {
    background:#FFF;
    border-radius:24px;
    box-shadow:0 24px 48px rgba(20, 4, 60, 0.3);
    color:var(--fpg-ink);
    flex:1 1 340px;
    min-width:0;
    padding:28px;
    transform:rotate(1.5deg);
}
.frame .game-glance .inner-kicker { color:var(--game-dark, var(--fpg-purple-mid)); margin:0; }
.frame .game-glance__fig { align-items:baseline; display:flex; flex-wrap:wrap; gap:4px 10px; line-height:1; margin:10px 0 14px; }
.game-glance__fig span { color:var(--fpg-text); font-size:0.875rem; font-weight:600; }
.game-glance__fig b {
    color:var(--game-dark, var(--fpg-purple-mid));
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:clamp(2.25rem, calc(1.7rem + 1.4vw), 3rem);
    font-weight:900;
    line-height:1;
}
.game-glance dl { margin:0; }
.game-glance dl > div { border-top:1px solid var(--fpg-line); display:flex; gap:16px; justify-content:space-between; padding:12px 0; }
.game-glance dl > div:last-child { padding-bottom:0; }
.game-glance dt { color:var(--fpg-text); font-size:0.875rem; }
.game-glance dd { color:var(--fpg-ink); font-size:0.875rem; font-weight:700; margin:0; text-align:right; }

/* the pre-launch notice, just under the band */
.game-notice { padding-top:clamp(24px, 3vw, 32px); }
.game-notice .msg-box { margin:0; }


/* ------------------------------------------------------------
   "How … Works" and the game's feature
------------------------------------------------------------ */
.game-how { padding:clamp(44px, 5.5vw, 72px) 0 24px; }

.game-feature {
    background:var(--fpg-purple);
    border-radius:24px;
    color:#FFF;
    display:flex;
    flex-wrap:wrap;
    gap:clamp(24px, 3vw, 36px);
    overflow:hidden;
    padding:clamp(24px, 3vw, 36px);
}
.game-feature::before {
    background:var(--game, var(--fpg-purple-mid));
    border-radius:50%;
    content:"";
    height:220px;
    opacity:0.4;
    position:absolute;
    right:-60px;
    top:-60px;
    width:220px;
}
.game-feature--centre { align-items:center; }
.game-feature--stack { flex-direction:column; flex-wrap:nowrap; }
.game-feature.game-feature--stack > * { flex:0 0 auto; }   /* in a column, the flex-basis widths below would be heights */

.game-feature__txt { display:flex; flex:1 1 420px; flex-direction:column; gap:16px; min-width:0; z-index:1; }
.frame .game-feature__txt h2 { color:#FFF; font-size:clamp(1.6rem, calc(1.3rem + 0.9vw), 1.875rem); font-weight:800; line-height:1.15; margin:0; }
.frame .game-feature__txt p,
.frame .game-feature__txt li,
.frame .game-feature__after { color:var(--fpg-on-purple); font-size:1rem; line-height:1.6; margin:0; }
.frame .game-feature__txt ul { margin:0; padding-left:20px; }
.frame .game-feature__txt li + li { margin-top:6px; }
.game-feature__txt strong { color:#FFF; }
.frame .game-feature__txt p a:not(.btn),
.frame .game-feature__txt li a:not(.btn),
.frame .game-feature__after a:not(.btn) { color:var(--fpg-amber); }
.frame .game-feature__after { font-size:0.875rem; z-index:1; }
.game-feature .txt-amber { color:var(--fpg-amber); }

.game-feature__panel {
    background:#FFF;
    border-radius:20px;
    color:var(--fpg-ink);
    display:flex;
    flex:1 1 340px;
    flex-direction:column;
    gap:14px;
    min-width:0;
    padding:26px;
    z-index:1;
}
.frame .game-feature__panel .inner-kicker { color:var(--game-dark, var(--fpg-purple-mid)); margin:0; }
.game-feature__rules { border-top:1px solid var(--fpg-line); padding-top:14px; }
.demo-shares[hidden] + .game-feature__rules { border-top:0; padding-top:0; }
.frame .game-feature__rules h3 { font-size:1.125rem; font-weight:700; margin:0 0 8px; }
.frame .game-feature__rules p,
.frame .game-feature__rules li { font-size:0.875rem; line-height:1.55; }
.frame .game-feature__rules ul { margin:0 0 10px; padding-left:18px; }
.frame .game-feature__rules li { margin-bottom:6px; }
.frame .game-feature__rules p { margin:0 0 10px; }
.frame .game-feature__rules p:last-child { margin-bottom:0; }

/* --- the 70 shares (components/shares_chart.php) --- */
.shares-chart {
    display:grid;
    gap:6px;
    grid-template-columns:repeat(14, minmax(0, 1fr));
    max-width:460px;
}
.shares-chart span { aspect-ratio:1; background:var(--game, var(--fpg-amber)); border-radius:50%; display:block; }
.shares-chart span.is-ours,
.shares-key span.is-ours { background:#6B5A99; }
.shares-key { display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; margin:0; padding:0; }
.frame .game-feature__txt .shares-key li { align-items:center; display:flex; font-size:0.8125rem; gap:8px; margin:0; }
.shares-key span { background:var(--game, var(--fpg-amber)); border-radius:50%; flex:none; height:14px; width:14px; }

/* ------------------------------------------------------------
   The demos (assets/js/game.js shows them; without it, only the written rules show)
------------------------------------------------------------ */
.demo { display:flex; flex-direction:column; gap:14px; }
.demo[hidden],
.demo-lucky__btn[hidden],
.demo-boxes__again[hidden] { display:none; }

.demo__opts { display:flex; flex-wrap:wrap; gap:8px; }
.demo__opt {
    background:#FFF;
    border:2px solid #DDD5F2;
    border-radius:999px;
    color:var(--fpg-purple);
    cursor:pointer;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:0.9375rem;
    font-weight:700;
    min-height:44px;
    padding:0 16px;
}
.demo__opt:hover { border-color:var(--fpg-purple); }
.demo__opt[aria-pressed="true"] { background:var(--fpg-purple); border-color:var(--fpg-purple); color:#FFF; }
.demo__opt:focus-visible,
.prize-box:focus-visible { outline:3px solid var(--fpg-amber); outline-offset:2px; }

/* "Try it: if our lines win…" (components/demo_shares.php) */
.demo-shares__result {
    background:var(--game-tint, var(--fpg-tint));
    border-radius:16px;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:18px;
}
.demo-shares__sum { color:var(--fpg-text); font-size:0.875rem; }
.demo-shares__each { color:var(--fpg-text); font-size:0.8125rem; font-weight:600; margin-top:6px; }
.demo-shares__win {
    color:var(--game-dark, var(--fpg-purple-mid));
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:clamp(2.25rem, calc(1.8rem + 1.2vw), 2.75rem);
    font-weight:900;
    line-height:1.05;
}
.demo-shares__kind { color:var(--fpg-ink); font-size:0.875rem; font-weight:600; }

/* Lucky Pick (Daily Thunder) */
.demo-lucky { align-items:center; gap:18px; text-align:center; }
.lucky-line { align-items:center; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ball {
    align-items:center;
    background:var(--fpg-purple);
    border-radius:50%;
    box-shadow:inset -5px -6px 0 rgba(0, 0, 0, 0.25);
    color:#FFF;
    display:flex;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:1.375rem;
    font-weight:800;
    height:58px;
    justify-content:center;
    width:58px;
}
.ball--thunder {
    background:var(--fpg-amber);
    box-shadow:inset -5px -6px 0 rgba(0, 0, 0, 0.15), 0 0 0 4px var(--game, var(--fpg-purple-mid));
    color:var(--fpg-purple);
    font-size:1.5rem;
    font-weight:900;
    height:64px;
    width:64px;
}
.ball-plus { color:var(--fpg-text); font-family:'Rubik', Helvetica, Arial, sans-serif; font-size:1.5rem; font-weight:800; }
.frame .demo-lucky__btn { margin:0; }
.demo-lucky__btn .btn { align-items:center; display:inline-flex; gap:10px; }
.demo-lucky .is-new { animation:ball-pop 0.35s ease-out; }
@keyframes ball-pop { from { transform:scale(0.6); } to { transform:scale(1); } }

/* The prize boxes (Happy Birthdates) */
.frame .demo-boxes__try { color:var(--fpg-on-purple); font-size:1rem; margin:0; }
.demo-boxes__try strong { color:var(--fpg-amber); }
.demo-boxes__row { display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.prize-box {
    align-items:center;
    background:var(--game, var(--fpg-purple-mid));
    border:3px solid var(--game, var(--fpg-purple-mid));
    border-radius:20px;
    color:#FFF;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    font-family:'Inter', system-ui, sans-serif;
    gap:8px;
    justify-content:center;
    min-height:170px;
    padding:16px;
    transition:transform 0.2s, opacity 0.2s;
}
.prize-box:hover:not(.is-open) { transform:translateY(-3px); }
.prize-box > i { font-size:2.5rem; }
.prize-box > span { font-family:'Rubik', Helvetica, Arial, sans-serif; font-size:1rem; font-weight:700; }
.prize-box.is-open { cursor:default; opacity:0.55; }
.prize-box.is-small { background:#FFF; border-color:transparent; color:var(--fpg-purple); }
.prize-box.is-big { background:var(--fpg-amber); border-color:transparent; color:var(--fpg-purple); }
.prize-box.is-cash { background:#1E8E3E; border-color:transparent; color:#FFF; }
.prize-box.is-picked { border-color:var(--fpg-amber); box-shadow:0 0 0 6px rgba(255, 184, 0, 0.35); opacity:1; transform:scale(1.05); }
.prize-box .prize-box__tag { font-family:'Inter', system-ui, sans-serif; font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.prize-box .prize-box__amount { font-size:clamp(1.4rem, calc(1rem + 1.2vw), 1.875rem); font-weight:900; line-height:1.1; }
.prize-box .prize-box__unit { font-family:'Inter', system-ui, sans-serif; font-size:0.875rem; font-weight:600; }
.frame .demo-boxes__again { margin:0; }

/* "Try it: if you hold…" (Bonus Draw) */
.demo-coins__result { align-items:center; display:flex; flex-wrap:wrap; gap:14px; }
.demo-coins__result > i { color:var(--fpg-text); font-size:1.25rem; }
.demo-coins__hold,
.demo-coins__win { border-radius:16px; flex:1 1 120px; padding:16px; text-align:center; }
.demo-coins__hold { background:#FFF4D6; }
.demo-coins__win { background:var(--game-tint, var(--fpg-tint)); }
.demo-coins__hold span,
.demo-coins__win span { display:block; font-size:0.8125rem; }
.demo-coins__hold span:first-child { color:#6B4700; font-size:0.75rem; font-weight:700; }
.demo-coins__win span:first-child { color:var(--game-dark, var(--fpg-purple-mid)); font-size:0.75rem; font-weight:700; }
.demo-coins__hold b,
.demo-coins__win b { display:block; font-family:'Rubik', Helvetica, Arial, sans-serif; font-size:2rem; font-weight:900; line-height:1.2; }
.demo-coins__hold b { color:var(--fpg-purple); }
.demo-coins__win b { color:var(--game-dark, var(--fpg-purple-mid)); }
.frame .demo-coins__explain { color:var(--fpg-text); font-size:0.875rem; line-height:1.55; margin:0; }

/* --- Daily Thunder's prize cards --- */
.prize-cards {
    display:grid;
    gap:20px;
    grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    margin-top:28px;
}
.prize-card { border-radius:20px; display:flex; flex-direction:column; gap:8px; padding:26px; }
.prize-card--main { border:2px solid var(--game, var(--fpg-purple-mid)); }
.prize-card--bonus { background:#F7F5FC; }
.prize-card__head { align-items:center; display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:space-between; }
.frame .prize-card__head h3 { font-size:1.375rem; font-weight:800; margin:0; }
.frame .prize-card__head .inner-pill { background:var(--game-tint, var(--fpg-tint)); color:var(--game-dark, var(--fpg-purple)); font-size:0.75rem; font-weight:700; padding:4px 12px; }
.frame .prize-card--bonus .prize-card__head .inner-pill { background:#FFF; color:var(--fpg-text); }
.frame .prize-card p { font-size:0.875rem; line-height:1.6; margin:0 0 6px; }
.frame .prize-card .prize-card__foot { font-size:0.8125rem; line-height:1.55; margin:6px 0 0; }

.prize-rows { list-style:none; margin:0; padding:0; }
.frame .prize-rows li {
    align-items:center;
    border-top:1px solid #EEEAF7;
    column-gap:12px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    margin:0;
    padding:12px 0;
    row-gap:4px;
}
.prize-balls { align-items:center; display:flex; gap:4px; grid-column:1; }
.prize-balls span { background:var(--fpg-purple); border-radius:50%; height:22px; width:22px; }
.prize-balls span.tb { background:var(--fpg-amber); box-shadow:inset 0 0 0 2px var(--game, var(--fpg-purple-mid)); }
.prize-balls em { color:var(--fpg-text); font-style:normal; font-weight:800; margin-left:4px; }
.prize-rows__match { color:var(--fpg-text); font-size:0.8125rem; grid-column:1; }
.prize-rows__match strong { font-weight:600; }
.prize-rows b {
    color:var(--game-dark, var(--fpg-purple-mid));
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:1.0625rem;
    font-weight:800;
    grid-column:2;
    grid-row:1 / span 2;
    text-align:right;
}
.prize-rows b.is-coins { color:var(--fpg-text); }

/* --- Happy Birthdates' three steps --- */
.game-steps {
    display:grid;
    gap:20px;
    grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    list-style:none;
    margin:0;
    padding:0;
}
.frame .game-steps li {
    background:var(--game-tint, var(--fpg-tint));
    border-radius:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:28px 24px;
}
.game-steps__num {
    align-items:center;
    background:var(--game, var(--fpg-purple-mid));
    border-radius:50%;
    color:#FFF;
    display:flex;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:1.375rem;
    font-weight:900;
    height:48px;
    justify-content:center;
    width:48px;
}
.game-steps li:last-child .game-steps__num { background:var(--fpg-amber); color:var(--fpg-purple); }
.frame .game-steps h3 { font-size:1.3125rem; font-weight:700; margin:0; }
.frame .game-steps p { font-size:0.9375rem; line-height:1.6; margin:0; }


/* ------------------------------------------------------------
   The rules and the side column
------------------------------------------------------------ */
.game-body { padding:clamp(36px, 4vw, 48px) 0 clamp(56px, 6vw, 72px); }
.game-body__grid { align-items:flex-start; display:flex; flex-wrap:wrap; gap:48px; }
.game-main { display:flex; flex:999 1 560px; flex-direction:column; gap:44px; min-width:0; }

.frame .game-sect h2 { font-size:clamp(1.6rem, calc(1.3rem + 0.9vw), 1.875rem); font-weight:800; line-height:1.15; margin:0 0 12px; }
.frame .game-sect p,
.frame .game-sect li { font-size:1rem; line-height:1.7; }
.frame .game-sect p { margin:0 0 12px; }
.frame .game-sect ul { margin:0 0 12px; padding-left:20px; }
.frame .game-sect li { margin-bottom:8px; }
.game-sect strong { color:var(--fpg-ink); }
.frame .game-sect > :last-child,
.frame .game-sect > div > :last-child,
.frame .game-sect li:last-child { margin-bottom:0; }

.game-sect--icon { align-items:flex-start; display:flex; flex-wrap:wrap; gap:24px; }
.game-sect--icon > div { flex:1 1 400px; min-width:0; }
.game-sect__icon {
    align-items:center;
    background:var(--game-tint, var(--fpg-tint));
    border-radius:18px;
    color:var(--game-dark, var(--fpg-purple-mid));
    display:flex;
    flex:none;
    font-size:1.6rem;
    height:64px;
    justify-content:center;
    width:64px;
}

.frame .game-note { background:var(--fpg-tint); border-radius:14px; font-size:0.875rem; line-height:1.6; margin:0; padding:16px 20px; }

.game-aside { display:flex; flex:1 1 300px; flex-direction:column; gap:20px; min-width:0; }
.game-rules { border:1px solid var(--fpg-line); border-radius:20px; padding:24px; }
.frame .game-rules h2 { font-size:1.375rem; font-weight:800; margin:0 0 14px; }

.tick-list { display:flex; flex-direction:column; gap:12px; list-style:none; margin:0; padding:0; }
/* ⚠ Not flex: a line with a link in it would split into columns. The tick sits in the padding. */
.frame .tick-list li { font-size:0.875rem; line-height:1.55; margin:0; min-height:22px; padding-left:32px; }
.tick-list li::before {
    align-items:center;
    background:var(--game-dark, var(--fpg-purple-mid));
    border-radius:50%;
    color:#FFF;
    content:"\f00c";
    display:flex;
    font-family:'Font Awesome 6 Free';
    font-size:0.6875rem;
    font-weight:900;
    height:22px;
    justify-content:center;
    left:0;
    position:absolute;
    top:0;
    width:22px;
}

.game-join {
    background:var(--game-band, var(--fpg-purple-mid));
    border-radius:20px;
    color:#FFF;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:24px;
}
.frame .game-join h2 { color:#FFF; font-size:1.375rem; font-weight:800; line-height:1.2; margin:0; }
.frame .game-join p { color:#FFF; font-size:0.875rem; line-height:1.6; margin:0; }
.game-join .btn { display:flex; justify-content:center; }


/* ------------------------------------------------------------
   More Free Games (components/more_games.php)
------------------------------------------------------------ */
.more-games { background:var(--fpg-tint); padding:clamp(48px, 5vw, 64px) 0 clamp(56px, 6vw, 80px); }
.more-games__head { align-items:flex-end; }
.frame .more-games__head h2 { font-size:clamp(1.6rem, calc(1.3rem + 0.9vw), 2rem); margin:0; }
.frame .more-games__all { color:var(--fpg-purple-mid); font-size:0.9375rem; font-weight:700; text-decoration:underline; }
.frame .more-games__all:hover { color:var(--fpg-purple); }
.more-games__list {
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    list-style:none;
    margin:0;
    padding:0;
}
.frame .more-games__list li { margin:0; }
.frame .more-games .more-games__list a {
    align-items:center;
    background:#FFF;
    border:1px solid var(--fpg-line);
    border-radius:18px;
    display:flex;
    gap:14px;
    height:100%;
    padding:18px;
    text-decoration:none;
}
.more-games__list a:hover { border-color:var(--game, var(--fpg-purple-mid)); box-shadow:var(--fpg-shadow); }
.more-games__list .game-dot { font-size:1.25rem; }
.more-games__txt { display:flex; flex-direction:column; gap:2px; }
.more-games__txt b { color:var(--fpg-purple); font-family:'Rubik', Helvetica, Arial, sans-serif; font-size:1.0625rem; font-weight:700; line-height:1.25; }
.more-games__txt span { color:var(--fpg-text); font-size:0.8125rem; }


@media (max-width:600px) {
    .game-glance { padding:22px; transform:rotate(1deg); }
    .game-band__icon { font-size:1.6rem; height:60px; width:60px; }
    .ball { font-size:1.125rem; height:46px; width:46px; }
    .ball--thunder { font-size:1.25rem; height:52px; width:52px; }
    .demo-boxes__row { gap:10px; }
    .prize-box { min-height:130px; padding:12px 6px; }
    .prize-box > i { font-size:2rem; }
}
@media (prefers-reduced-motion:reduce) {
    .prize-box { transition:none; }
    .prize-box:hover:not(.is-open),
    .prize-box.is-picked { transform:none; }
    .demo-lucky .is-new { animation:none; }
}