@charset "utf-8";
/* ------------------------------------------------------------
   FPG — the launch strip, the header and the footer
   2.1.01 (12 November 2026): restyled to the design (Design/claude-design/home.dc.html): the
   launch strip moves above the header, Log in and the member button sit on the right, the menu
   folds into the burger below 960px, and the footer is darker. The 2.0.02 sheet is
   "header_footer - v2 (pre-2.1.01).css".
------------------------------------------------------------ */

/* --- the pre-launch strip, above the header (layouts/default.php, shown until site_vars
       games_live is on; the words are SiteGames::launchNotice()) --- */
.fpg-launch-bar { background:var(--fpg-amber); color:var(--fpg-ink); }
.frame .fpg-launch-bar p {
    font-size:0.875rem;
    font-weight:500;
    line-height:1.5;
    margin:0;
    padding:10px 0;
    text-align:center;
}
.fpg-launch-bar a { color:var(--fpg-ink); font-weight:700; text-decoration:underline; }
.fpg-launch-bar a:hover { text-decoration:none; }

/* --- header --- */
#header { background:var(--fpg-purple); }

.hd-nav {
    align-items:center;
    display:flex;
    gap:16px;
    justify-content:space-between;
    min-height:80px;
    padding:14px 0;
    position:static;        /* so the phone menu is placed against the full-width .container */
}
.hd-nav .logo { display:block; flex:0 1 auto; line-height:0; min-width:0; }
.hd-nav .logo img { height:auto; max-width:100%; width:223px; }    /* 52px tall */

.hd-nav-links {
    align-items:center;
    display:flex;
    gap:4px;
    list-style:none;
    margin:0;
    padding:0;
}
.nav-link a,
.hd-login {
    color:#FFF;
    display:block;
    font-size:0.9375rem;
    font-weight:600;
    line-height:1.3;
    padding:12px 16px;
    text-decoration:none;
    text-decoration-thickness:2px;
    text-underline-offset:6px;
}
.hd-login { padding:12px 18px; }
.nav-link a:hover,
.nav-link.selected a,
.hd-login:hover,
.hd-login.selected { text-decoration:underline; text-decoration-color:var(--fpg-amber); }

.nav-link--menu { display:none; }       /* Log in inside the burger menu: phones only */

.hd-actions { align-items:center; display:flex; flex:none; gap:10px; }

#menuBtn {
    background:none;
    border:0;
    display:none;
    padding:8px;
}
#menuBtn .bar {
    background:#FFF;
    border-radius:2px;
    display:block;
    height:3px;
    margin:5px 0;
    width:26px;
}

@media (max-width:959px) {
    .hd-nav { min-height:68px; padding:10px 0; }
    .hd-nav .logo img { width:171px; }  /* 40px tall */

    #menuBtn { display:block; }
    .hd-login { display:none; }
    .nav-link--menu { display:block; }

    .hd-nav-links {
        align-items:stretch;
        background:var(--fpg-purple);
        border-top:1px solid rgba(255, 255, 255, 0.12);
        display:none;
        flex-direction:column;
        gap:0;
        left:0;
        padding:8px clamp(24px, 4.1vw, 60px) 16px;     /* core's .padding-x */
        position:absolute;
        right:0;
        top:100%;
        z-index:10;
    }
    .hd-nav-links.is-open { display:flex; }
    .nav-link a { padding:12px 0; }
}
@media (max-width:400px) {
    .hd-actions { gap:4px; }
    .hd-actions .btn-sm { font-size:0.875em; padding:0.85em 1.2em; }
}

/* --- footer --- */
#footer {
    background:var(--fpg-footer);
    color:#D9D0F2;
    padding-top:clamp(40px, 5vw, 56px);
}
.ft-grid {
    display:grid;
    gap:clamp(28px, 4vw, 48px);
    grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    padding-bottom:32px !important;
}
.ft-about .logo { display:block; line-height:0; }
.ft-about .logo img { height:auto; max-width:100%; width:189px; }    /* 44px tall */
.frame .ft-about p { font-size:0.875rem; line-height:1.6; margin:16px 0 0; max-width:360px; }

.frame .ft-hd { color:#FFF; font-size:1rem; font-weight:700; line-height:1.3; margin:0 0 16px; }

.ft-list { list-style:none; margin:0; padding:0; }
.frame .ft-list li { font-size:0.875rem; line-height:1.5; margin:0 0 10px; }
.ft-list a,
.ft-legal a { color:#D9D0F2; text-decoration:none; }
.ft-list a:hover,
.ft-legal a:hover { color:var(--fpg-amber); }

#ftBtm { border-top:1px solid rgba(255, 255, 255, 0.12); padding:20px 0 28px; }
.ft-btm-row {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:10px 2em;
    justify-content:space-between;
}
.frame .ft-btm-row p { font-size:0.8125rem; line-height:1.6; margin:0; }
.ft-legal { display:flex; flex-wrap:wrap; gap:6px 20px; }
.frame .ft-btm-row .ft-company { color:#B9AEDB; flex:1 1 100%; font-size:0.75rem; }

@media (max-width:820px) {
    .ft-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
    .ft-about { grid-column:1 / -1; }
}
@media (max-width:480px) {
    .ft-grid { grid-template-columns:minmax(0, 1fr); }
}