@charset "utf-8";
/* ------------------------------------------------------------
   FPG — How to Play (/how-to-play/, views/how_to_play.php)
   2.1.02 (12 November 2026), from the design (Design/claude-design/how-to-play.dc.html).
   The band, "On this page" (.side-nav), .cta-box and the game pills are page_body.css.
------------------------------------------------------------ */
.htp-grid { align-items:flex-start; display:flex; flex-wrap:wrap; gap:clamp(32px, 4vw, 56px); }
.htp-nav { flex:1 1 240px; min-width:0; }
.htp-body { display:flex; flex:999 1 640px; flex-direction:column; gap:clamp(40px, 4.5vw, 56px); min-width:0; }

/* the list stays in view beside the copy, once there's room for both */
@media (min-width:960px) {
    .htp-nav { max-height:calc(100vh - 48px); overflow-y:auto; position:sticky; top:24px; }
}

/* --- a section --- */
.frame .htp-sect h2 { font-size:clamp(1.6rem, calc(1.3rem + 0.9vw), 1.875rem); font-weight:800; line-height:1.15; margin:0 0 14px; scroll-margin-top:16px; }
.frame #intro { font-size:clamp(1.75rem, calc(1.35rem + 1.1vw), 2.125rem); }
.frame .htp-sect p,
.frame .htp-sect li { font-size:1rem; line-height:1.7; }
.frame .htp-sect p { margin:0 0 14px; }
.frame .htp-sect > :last-child { margin-bottom:0; }
.htp-sect strong { color:var(--fpg-ink); }
.frame .htp-sect .htp-lead { color:var(--fpg-ink); font-size:1.1875rem; line-height:1.6; }
.frame .htp-sect .htp-strong { color:var(--fpg-purple); font-weight:700; }

/* Who Can Play: three cards */
.htp-cards {
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    list-style:none;
    margin:0;
    padding:0;
}
.frame .htp-cards li { border:1px solid var(--fpg-line); border-radius:18px; font-size:0.875rem; line-height:1.6; margin:0; padding:22px; }
.htp-cards strong { color:var(--fpg-purple); display:block; font-family:'Rubik', Helvetica, Arial, sans-serif; font-size:1.0625rem; font-weight:600; margin-bottom:6px; }
.htp-cards__icon {
    align-items:center;
    background:var(--fpg-purple-mid);
    border-radius:50%;
    color:var(--fpg-amber);
    display:flex;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:1.125rem;
    font-weight:900;
    height:48px;
    justify-content:center;
    margin-bottom:12px;
    width:48px;
}

/* Joining: the welcome gift */
.htp-joining { align-items:center; display:flex; flex-wrap:wrap; gap:24px; }
.htp-joining__txt { flex:1 1 380px; min-width:0; }
.frame .htp-joining__txt p { margin:0; }
.htp-gift {
    align-items:center;
    background:var(--fpg-amber);
    border-radius:20px;
    display:flex;
    flex:0 1 300px;
    gap:16px;
    padding:22px;
}
.htp-gift__num {
    align-items:center;
    background:var(--fpg-purple);
    border-radius:50%;
    color:var(--fpg-amber);
    display:flex;
    flex:none;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:1.875rem;
    font-weight:900;
    height:64px;
    justify-content:center;
    width:64px;
}
.frame .htp-sect .htp-gift p { color:var(--fpg-ink); font-size:0.9375rem; line-height:1.45; margin:0; }

/* Entering: the two kinds of draw */
.htp-ways {
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    list-style:none;
    margin:0 0 14px;
    padding:0;
}
.frame .htp-ways > li { border-radius:20px; display:flex; flex-direction:column; gap:12px; margin:0; padding:26px; }
.htp-ways__enter { background:var(--fpg-purple); }
.htp-ways__auto { background:var(--fpg-tint); }
.frame .htp-sect .htp-ways p { font-size:0.875rem; line-height:1.6; margin:0; }
.frame .htp-sect .htp-ways__enter p { color:var(--fpg-on-purple); }
.htp-ways__enter strong { color:#FFF; }

/* Free Entry Tickets */
.htp-tickets { align-items:stretch; display:flex; flex-wrap:wrap; gap:20px; margin-bottom:20px; }
.frame .htp-tile {
    background:var(--fpg-purple-mid);
    border-radius:20px;
    color:#FFF;
    display:flex;
    flex:0 1 220px;
    flex-direction:column;
    gap:4px;
    justify-content:center;
    margin:0;
    padding:24px;
}
.htp-tile b { color:var(--fpg-amber); font-family:'Rubik', Helvetica, Arial, sans-serif; font-size:4rem; font-weight:900; line-height:1; }
.htp-tile span { font-size:0.9375rem; line-height:1.4; }
.htp-tickets__list { display:flex; flex:1 1 360px; flex-direction:column; gap:12px; list-style:none; margin:0; min-width:0; padding:0; }
.frame .htp-tickets__list li { font-size:0.9375rem; line-height:1.6; margin:0; }

.htp-box { border:1px solid var(--fpg-line); border-radius:20px; padding:clamp(20px, 2.6vw, 26px); }
.frame .htp-box h3 { font-size:1.3125rem; font-weight:700; margin:0 0 12px; }
.frame .htp-sect .htp-box p { font-size:0.9375rem; line-height:1.6; }

.htp-extras { list-style:none; margin:0 0 16px; padding:0; }
.frame .htp-extras li {
    align-items:center;
    border-top:1px solid #EEEAF7;
    color:var(--fpg-ink);
    display:flex;
    font-size:0.9375rem;
    gap:6px 12px;
    justify-content:space-between;
    margin:0;
    padding:12px 0;
}
.htp-extras strong { font-weight:500; }
.htp-extras__pill {
    background:var(--fpg-tint);
    border-radius:999px;
    color:var(--fpg-purple-mid);
    flex:none;
    font-size:0.8125rem;
    font-weight:700;
    padding:4px 10px;
}
.frame .htp-sect .htp-callout {
    align-items:center;
    background:#FFF4D6;
    border-radius:14px;
    color:var(--fpg-ink);
    display:flex;
    flex-wrap:wrap;
    gap:6px 12px;
    padding:14px 18px;
}
.htp-callout b { color:var(--fpg-purple-mid); font-family:'Rubik', Helvetica, Arial, sans-serif; font-size:1.375rem; font-weight:900; }
.htp-callout span { flex:1 1 240px; }

.htp-others {
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    list-style:none;
    margin:0;
    padding:0;
}
.frame .htp-others li { background:#F7F5FC; border-radius:14px; font-size:0.875rem; line-height:1.5; margin:0; padding:16px; }
.htp-others strong { color:var(--fpg-purple); }

/* Winning: the claim reminder */
.htp-alert {
    align-items:flex-start;
    background:var(--fpg-purple);
    border-radius:18px;
    display:flex;
    gap:16px;
    margin:0 0 14px;
    padding:20px 22px;
}
.htp-alert__icon {
    align-items:center;
    background:var(--fpg-amber);
    border-radius:50%;
    color:var(--fpg-purple);
    display:flex;
    flex:none;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:1.375rem;
    font-weight:900;
    height:40px;
    justify-content:center;
    width:40px;
}
.frame .htp-sect .htp-alert p { color:var(--fpg-on-purple); font-size:0.9375rem; line-height:1.65; margin:0; }
.htp-alert strong { color:#FFF; }

/* Cash and FPG Coins: two panels */
.htp-wallet {
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    margin:0 0 14px;
}
.htp-wallet__panel { border-radius:20px; padding:26px; }
.htp-wallet__panel--cash { background:var(--fpg-purple); }
.htp-wallet__panel--coins { background:var(--fpg-amber); }
.htp-wallet__icon {
    align-items:center;
    border-radius:14px;
    display:flex;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:1.625rem;
    font-weight:900;
    height:52px;
    justify-content:center;
    margin-bottom:12px;
    width:52px;
}
.htp-wallet__panel--cash .htp-wallet__icon { background:#1E8E3E; color:#FFF; }
.htp-wallet__panel--coins .htp-wallet__icon { background:var(--fpg-purple); color:var(--fpg-amber); font-size:1.375rem; }
.frame .htp-wallet h3 { font-size:1.375rem; font-weight:800; margin:0 0 8px; }
.frame .htp-wallet__panel--cash h3 { color:#FFF; }
.frame .htp-sect .htp-wallet p,
.frame .htp-sect .htp-wallet li { font-size:0.9375rem; line-height:1.6; }
.frame .htp-sect .htp-wallet__panel--cash p { color:var(--fpg-on-purple); margin:0; }
.htp-wallet__panel--cash strong { color:#FFF; }
.frame .htp-sect .htp-wallet__panel--coins p,
.frame .htp-sect .htp-wallet__panel--coins li { color:#2E2245; }
.frame .htp-sect .htp-wallet__panel--coins p { margin:0 0 6px; }
.htp-wallet ul { margin:0; padding-left:20px; }
.frame .htp-wallet li { margin:0; }

/* The League Table */
.htp-league { align-items:center; background:var(--fpg-tint); border-radius:20px; display:flex; flex-wrap:wrap; gap:20px; padding:26px; }
.htp-league > div { flex:1 1 400px; min-width:0; }
.frame .htp-league h2 { font-size:1.5rem; margin-bottom:6px; }
.frame .htp-sect.htp-league p { font-size:0.9375rem; margin:0; }
.htp-league__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:60px;
    justify-content:center;
    width:60px;
}

/* Getting Paid: four tiles */
.htp-facts {
    display:grid;
    gap:14px;
    grid-template-columns:repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    list-style:none;
    margin:0;
    padding:0;
}
.frame .htp-facts li { border:1px solid var(--fpg-line); border-radius:18px; margin:0; padding:20px; }
.htp-facts strong {
    color:var(--fpg-purple-mid);
    display:block;
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.06em;
    line-height:1.4;
    text-transform:uppercase;
}
.htp-facts b {
    color:var(--fpg-purple);
    display:block;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:2.125rem;
    font-weight:900;
    line-height:1.2;
    margin:4px 0;
}
.htp-facts li > span { display:block; font-size:0.8125rem; line-height:1.5; }
.htp-facts li > span::first-letter { text-transform:uppercase; }   /* the 2.0.02 sentences run on from a label */

/* Keep Your Account Active: three steps */
.htp-steps {
    display:grid;
    gap:14px;
    grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    list-style:none;
    margin:0 0 16px;
    padding:0;
}
.frame .htp-steps li { border-radius:18px; display:flex; flex-direction:column; font-size:0.875rem; gap:6px; line-height:1.55; margin:0; padding:20px; }
.htp-steps b { font-family:'Rubik', Helvetica, Arial, sans-serif; font-size:1.625rem; font-weight:900; line-height:1.15; }
.htp-steps__warn { background:var(--fpg-tint); }
.htp-steps__warn b { color:var(--fpg-purple-mid); }
.htp-steps__wait { background:#FFF4D6; }
.htp-steps__wait b { color:#6B4700; }
.htp-steps__reset { background:var(--fpg-purple); color:var(--fpg-on-purple); }
.htp-steps__reset b { color:var(--fpg-amber); }

/* "Any Questions?" is a .cta-box (page_body.css) */
.frame .cta-box h2 { scroll-margin-top:16px; }