@charset "utf-8";
/* ------------------------------------------------------------
   FPG — the inner pages: the page band, the white content boxes (join, log in, contact, account,
   the 404 page), and the pieces the redesigned pages share.
   2.1.02 (12 November 2026): the design's page band (components/page_header.php) moved here from
   main.css, plus the shared pieces below it. The 2.0.04 sheet is "page_body - v2 (pre-2.1.02).css".
   ⚠ core's base.css makes every element position:relative, so a decorative shape says
   position:absolute itself, and content that must sit above a later shape gets a z-index.
   ⚠ main.css colours links in a main p or li (.frame main p a:not(.btn) — two classes and three
   elements), so a link on a dark background needs three classes to win.
------------------------------------------------------------ */

/* ------------------------------------------------------------
   The page band (components/page_header.php)
------------------------------------------------------------ */
.page-band {
    background:var(--fpg-purple-mid);
    color:#FFF;
    overflow:hidden;
    padding:clamp(36px, 4.5vw, 48px) 0 clamp(40px, 5vw, 56px);
}
.page-band::before,
.page-band::after {
    content:"";
    height:100%;
    position:absolute;
    right:-10%;
    top:0;
}
.page-band::before { background:var(--fpg-purple-shape); clip-path:polygon(30% 0, 100% 0, 100% 100%, 0 100%); width:60%; }
.page-band::after { background:var(--fpg-purple-shape2); clip-path:polygon(45% 0, 100% 0, 100% 100%, 0 100%); width:34%; }

.page-band__inner {
    align-items:flex-end;
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    justify-content:space-between;
    z-index:1;
}
.page-band__txt {
    display:flex;
    flex:1 1 560px;
    flex-direction:column;
    gap:14px;
    min-width:0;
}
.page-band__crumbs ol {
    display:flex;
    flex-wrap:wrap;
    font-size:0.875rem;
    gap:0 8px;
    list-style:none;
    margin:0;
    padding:0;
}
.frame .page-band__crumbs li { color:#FFF; line-height:1.5; margin:0; }
.page-band__crumbs li + li::before { color:var(--fpg-on-purple-soft); content:"/"; margin-right:8px; }
.frame .page-band .page-band__crumbs a { color:var(--fpg-on-purple-soft); text-decoration:underline; }
.frame .page-band .page-band__crumbs a:hover { color:#FFF; }

.frame .page-band__title {
    color:#FFF;
    font-size:clamp(2.25rem, calc(1.4rem + 2.6vw), 3.5rem);
    font-weight:900;
    line-height:1.05;
    margin:0;
}
.page-band__title span { color:var(--fpg-amber); }
.frame .page-band__intro { color:var(--fpg-on-purple); font-size:1.125rem; line-height:1.55; margin:0; max-width:680px; }
.frame .page-band__note { color:var(--fpg-on-purple-soft); font-size:0.9375rem; line-height:1.5; margin:0; }
.page-band__aside { flex:0 1 auto; min-width:0; }

/* The legal pages: flat, no shapes, a smaller H1 */
.page-band--legal { background:var(--fpg-purple); padding:clamp(32px, 4vw, 40px) 0 clamp(34px, 4.2vw, 44px); }
.page-band--legal::before,
.page-band--legal::after { display:none; }
.frame .page-band--legal .page-band__title { font-size:clamp(2rem, calc(1.3rem + 2.1vw), 3rem); }


/* ------------------------------------------------------------
   Shared by the redesigned pages (Our Games, the game pages, How to Play, FAQs, legal, About)
------------------------------------------------------------ */
/* the white page under the band */
.inner-page { padding:clamp(44px, 5.5vw, 72px) 0 clamp(56px, 6.5vw, 88px); }

/* the small uppercase label: "On this page", "Topics", "At a glance" */
.frame .inner-kicker {
    color:var(--fpg-purple-mid);
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.08em;
    line-height:1.4;
    margin:0 0 8px;
    text-transform:uppercase;
}

/* a section heading with an optional line under it */
.inner-head { margin-bottom:clamp(20px, 2.4vw, 28px); }
.frame .inner-head h2 {
    font-size:clamp(1.85rem, calc(1.3rem + 1.6vw), 2.375rem);
    font-weight:800;
    line-height:1.12;
    margin:0 0 8px;
}
.frame .inner-head p { font-size:1.0625rem; line-height:1.6; margin:0; max-width:820px; }
.inner-head--split {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:space-between;
}

/* a rounded label: "1 entry = 1 Free Entry Ticket", "Must match the Thunderball" */
.frame .inner-pill {
    align-items:center;
    background:var(--fpg-tint);
    border-radius:999px;
    color:var(--fpg-purple);
    display:inline-flex;
    font-size:0.875rem;
    font-weight:600;
    gap:10px;
    line-height:1.3;
    margin:0;
    padding:10px 16px;
}
.frame .inner-pill--amber { background:#FFF4D6; color:#5A3B00; }

/* "On this page" (How to Play, the legal pages) */
.side-nav {
    background:var(--fpg-tint);
    border-radius:20px;
    padding:24px;
}
.side-nav ul { list-style:none; margin:0; padding:0; }
.frame .side-nav li { line-height:1.4; margin:0; }
.frame .inner-page .side-nav a {
    color:var(--fpg-purple);
    display:block;
    font-size:0.9375rem;
    font-weight:600;
    padding:8px 0;
    text-decoration:none;
}
.frame .inner-page .side-nav a:hover { color:var(--fpg-purple-mid); text-decoration:underline; }

/* the purple box at the foot of a page: "Any questions?", "Still got a question?", "Get in touch" */
.cta-box {
    align-items:center;
    background:var(--fpg-purple-mid);
    border-radius:24px;
    color:#FFF;
    display:flex;
    flex-wrap:wrap;
    gap:20px 24px;
    justify-content:space-between;
    overflow:hidden;
    padding:clamp(26px, 3.4vw, 40px);
}
.cta-box::after {
    background:var(--fpg-purple-shape);
    border-radius:50%;
    content:"";
    height:260px;
    position:absolute;
    right:-60px;
    top:-80px;
    width:260px;
}
.cta-box__txt { flex:1 1 360px; min-width:0; z-index:1; }
.frame .cta-box h2 { color:#FFF; font-size:clamp(1.5rem, calc(1.2rem + 0.9vw), 1.75rem); font-weight:800; line-height:1.2; margin:0 0 8px; }
.frame .cta-box p { color:var(--fpg-on-purple); font-size:0.9375rem; line-height:1.6; margin:0; }
.frame .inner-page .cta-box p a:not(.btn) { color:#FFF; }
.frame .cta-box .btn-row { gap:12px; margin:0; padding:0; z-index:1; }

/* the game icon in a circle: --game from SiteGames::styleVars() */
.game-dot {
    align-items:center;
    background:var(--game, var(--fpg-purple-mid));
    border-radius:50%;
    color:#FFF;
    display:flex;
    flex:none;
    height:52px;
    justify-content:center;
    width:52px;
}

/* game names as coloured links (components/game_pills.php) */
.game-pills { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.frame .game-pills li { line-height:1; margin:0; }
.frame .inner-page .game-pills a,
.game-pills span {
    align-items:center;
    background:var(--game-band, var(--fpg-purple-mid));
    border-radius:999px;
    color:#FFF;
    display:inline-flex;
    font-size:0.8125rem;
    font-weight:700;
    min-height:28px;
    padding:4px 12px;
    text-decoration:none;
}
.frame .inner-page .game-pills a { font-size:0.875rem; min-height:40px; padding:0 16px; }
.frame .inner-page .game-pills a:hover { box-shadow:inset 0 0 0 999px rgba(0, 0, 0, 0.15); }


/* ------------------------------------------------------------
   The white content boxes (join, log in, contact, account, subscribe, the 404 page)
------------------------------------------------------------ */
.section { margin:0 0 1.5em; }

.section-box {
    background:#FFF;
    border-radius:var(--fpg-radius);
    box-shadow:var(--fpg-shadow);
    padding:clamp(1.4em, 3vw, 2.2em);
}
.section-box h2 { font-size:1.6em; margin:0 0 0.6em; }
.section-box h3 { font-size:1.25em; margin:1.4em 0 0.4em; }
.section-box h4 { font-size:1em; margin:1.4em 0 0.4em; }
.section-box > :last-child { margin-bottom:0; }
.section-box ul,
.section-box ol { padding-left:1.3em; }
.section-box li { margin-bottom:0.45em; }

.fpg-page .btn-row { justify-content:flex-start; margin:1.5em 0 0; }

/* --- forms: the box and fields are core's (form.css) --- */
.form-box {
    background:#FFF;
    border-radius:var(--fpg-radius);
    box-shadow:var(--fpg-shadow);
    padding:clamp(1.4em, 3vw, 2.2em);
}

/* --- My Account (2.0.04): the member's details --- */
.account-details { display:grid; grid-template-columns:max-content 1fr; gap:0.5em 1.5em; margin:0 0 1em; }
.account-details dt { font-weight:700; }
.account-details dd { margin:0; overflow-wrap:anywhere; }