.community-home-page.community-site { background:#eafbff; }.community-home-page .community-home-hero { position:relative; min-height:clamp(500px,39vw,560px); overflow:hidden; background:#086ed6; }.community-hero__background,.community-hero__background img { position:absolute; inset:0; width:100%; height:100%; }.community-hero__background img { object-fit:cover; object-position:center top; }.community-hero__inner { position:relative; z-index:2; display:grid; grid-template-columns:minmax(480px,.95fr) minmax(540px,1.05fr); align-items:center; width:min(1440px,calc(100% - 48px)); min-height:inherit; margin-inline:auto; }.community-hero__content { z-index:4; align-self:center; padding:92px 0 40px 34px; }.community-hero__title-art { display:block; width:min(100%,620px); height:auto; }.community-hero__subtitle { margin:-62px 0 12px 79px; color:#073873; font-size:clamp(15px,1.25vw,20px); font-weight:900; text-shadow:0 2px 0 rgba(255,255,255,.88); }.community-hero__actions { display:flex; gap:8px; width:min(100%,430px); margin-left:64px; }.community-hero-btn { display:block; width:50%; transition:transform .18s ease,filter .18s ease; }.community-hero-btn:hover,.community-hero-btn:focus-visible { outline:3px solid #fff; border-radius:999px; filter:brightness(1.05) saturate(1.08); transform:translateY(-3px); }.community-hero-btn img { display:block; width:100%; height:auto; }.community-hero__character-wrap { position:relative; align-self:end; height:100%; }.community-hero__character { position:absolute; right:-12px; bottom:-38px; width:min(50vw,650px); max-height:650px; object-fit:contain; object-position:right bottom; }
.community-live-stats { position:relative; z-index:5; display:grid; grid-template-columns:repeat(5,1fr); width:min(1260px,calc(100% - 32px)); min-height:116px; margin:-30px auto 28px; padding:20px 34px; border:0; border-radius:28px; background:#fff url('/images/community/home/stats-panel-glass.webp') center / 100% 100% no-repeat; box-shadow:var(--c-shadow); }.community-live-stats > div { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:0 8px; padding:0 18px; border-right:1px solid #bce5fb; }.community-live-stats > div:last-child { border:0; }.community-live-stats span { grid-row:1 / 3; font-size:1.9rem; }.community-live-stats strong { color:#1559b5; font-size:clamp(1rem,1.8vw,1.42rem); letter-spacing:.03em; }.community-live-stats small { color:#58769a; font-weight:800; }
.community-home-card--rooms::before { background-image:url('/assets/community-v4/sections/rooms-frame.webp'); }.community-home-card--friends::before { background-image:url('/assets/community-v4/sections/friends-frame.webp'); }.community-home-card--chat::before { background-image:url('/assets/community-v4/sections/chat-frame.webp'); }.community-home-card--missions::before { background-image:url('/assets/community-v4/sections/missions-frame.webp'); }.community-home-card--avatar::before { background-image:url('/assets/community-v4/sections/avatar-frame.webp'); }.community-home-card--announcements::before { background-image:url('/assets/community-v4/sections/announcements-frame.webp'); }.community-home-family-cta { position:relative; grid-template-columns:200px 1fr 310px; min-height:116px; overflow:hidden; background:#0878e8 url('/images/community/home/footer-top-banner-bg.webp') center / 100% 100% no-repeat; }.community-home-family-cta::after { display:none; }.community-home-family-cta__mascots { position:relative; z-index:1; width:174px; max-height:112px; object-fit:contain; }.community-home-family-cta > * { position:relative; z-index:1; }.community-home-family-cta a { display:block; padding:0; border:0; background:transparent; }.community-home-family-cta a img { display:block; width:100%; height:auto; }
@media (max-width:1179px) { .community-home-page .community-home-hero { min-height:560px; }.community-home-page .community-header { background:linear-gradient(180deg,rgba(3,30,103,.62),rgba(3,30,103,0)); }.community-hero__inner { grid-template-columns:minmax(390px,.9fr) minmax(400px,1.1fr); }.community-hero__content { padding-left:0; }.community-hero__subtitle { margin-left:22px; }.community-hero__actions { margin-left:12px; }.community-hero__character { right:-45px; width:min(58vw,650px); }.community-live-stats { grid-template-columns:repeat(3,1fr); gap:12px 0; min-height:150px; }.community-live-stats > div:nth-child(3) { border-right:0; }.community-home-family-cta { grid-template-columns:170px 1fr 260px; } }
@media (max-width:767px) { .community-home-page .community-home-hero { min-height:610px; }.community-home-page .community-header { background:linear-gradient(180deg,rgba(3,30,103,.68),rgba(3,30,103,0)); }.community-hero__inner { display:block; width:min(100% - 24px,580px); }.community-hero__content { position:relative; z-index:4; padding:74px 0 0; }.community-hero__title-art { width:min(100%,420px); }.community-hero__subtitle { width:min(70%,310px); margin:0 0 13px 7px; font-size:.89rem; line-height:1.55; }.community-hero__actions { position:absolute; z-index:6; bottom:22px; left:0; width:min(100%,340px); margin:0; gap:4px; }.community-hero__character-wrap { position:absolute; inset:0; }.community-hero__character { right:-76px; bottom:32px; width:min(89vw,450px); max-height:450px; }.community-live-stats { grid-template-columns:repeat(2,1fr); width:min(100% - 20px,560px); min-height:202px; margin-top:-17px; padding:15px 7px; background-size:cover; }.community-live-stats > div { padding:0 9px; border-right:0; }.community-live-stats span { font-size:1.55rem; }.community-live-stats small { font-size:.68rem; }.community-home-family-cta { grid-template-columns:1fr; gap:5px; padding:14px 18px; text-align:center; }.community-home-family-cta__mascots { display:none; }.community-home-family-cta a { width:min(100%,310px); justify-self:center; } }

/* Homepage header must come after the legacy home stylesheet so it remains the final cascade. */
body.community-home-page .community-header { position:absolute; inset:0 0 auto; z-index:100; min-height:76px; padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
body.community-home-page .community-header__inner { display:grid; grid-template-columns:220px minmax(0,1fr) max-content; align-items:center; column-gap:18px; width:min(1440px,calc(100% - 40px)); min-height:76px; margin-inline:auto; }
body.community-home-page .community-brand { min-width:0; } body.community-home-page .community-brand img { width:210px; height:54px; object-fit:contain; object-position:left center; }
body.community-home-page .community-nav { display:flex; min-width:0; flex-wrap:nowrap; align-items:center; justify-content:center; gap:clamp(5px,.7vw,12px); }
body.community-home-page .community-nav a { position:relative; min-width:0; min-height:38px; padding:7px clamp(5px,.55vw,9px); border:1px solid transparent; border-radius:999px; color:#fff; background:transparent; font-size:clamp(.72rem,.85vw,.86rem); font-weight:900; line-height:1; text-decoration:none; text-shadow:0 2px 4px rgba(1,21,79,.9); white-space:nowrap; }
body.community-home-page .community-nav img { width:18px; height:18px; filter:brightness(0) invert(1) drop-shadow(0 2px 3px rgba(1,21,79,.85)); } body.community-home-page .community-nav a:hover,body.community-home-page .community-nav a:focus-visible,body.community-home-page .community-nav a[aria-current="page"] { border-color:#ffd964; color:#0b3b91; background:linear-gradient(180deg,#fff5ae,#ffc930); outline:0; text-shadow:none; } body.community-home-page .community-nav a[aria-current="page"] img { filter:none; }
body.community-home-page .community-nav__badge { position:absolute; top:-7px; right:-4px; display:grid; width:18px; height:18px; place-items:center; border:2px solid #fff; border-radius:50%; color:#fff; background:#fb3b61; font-size:.66rem; font-weight:900; line-height:1; text-shadow:none; }
body.community-home-page .community-header__actions { display:flex; flex-wrap:nowrap; align-items:center; gap:7px; white-space:nowrap; } body.community-home-page .community-header__actions a,body.community-home-page .community-header__actions button { display:inline-flex; min-height:36px; align-items:center; justify-content:center; padding:7px 12px; border:1px solid rgba(255,255,255,.92); border-radius:999px; color:#0c4a9b; background:rgba(255,255,255,.93); box-shadow:0 3px 10px rgba(1,24,89,.28); font-size:.78rem; font-weight:900; text-decoration:none; cursor:pointer; } body.community-home-page .community-header__actions form { margin:0; } body.community-home-page .community-header__actions .community-admin-link { color:#fff; border-color:#66cfff; background:linear-gradient(135deg,#0b8df2,#0750ba); } body.community-home-page .community-header__actions .community-join-link { border-color:#f6ad16; color:#5b3900; background:linear-gradient(135deg,#ffe767,#ffb312); }
@media (max-width:1279px) and (min-width:768px) { body.community-home-page .community-header__inner { grid-template-columns:minmax(200px,1fr) auto auto; width:min(100% - 32px,1180px); column-gap:10px; } body.community-home-page .community-menu-toggle { display:grid; width:42px; height:40px; place-items:center; padding:0; color:#fff; border:1px solid rgba(255,255,255,.85); border-radius:10px; background:rgba(4,47,123,.58); } body.community-home-page .community-nav { position:absolute; top:100%; left:0; right:0; display:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:14px; background:rgba(5,38,109,.94); box-shadow:0 12px 20px rgba(2,22,75,.28); } body.community-home-page .community-nav.is-open { display:grid; } body.community-home-page .community-nav a { justify-content:center; } }
@media (max-width:767px) { body.community-home-page .community-header { background:linear-gradient(180deg,rgba(3,30,103,.48),rgba(3,30,103,0)); } body.community-home-page .community-header__inner { grid-template-columns:minmax(150px,1fr) auto auto; width:min(100% - 24px,680px); min-height:64px; column-gap:8px; } body.community-home-page .community-brand img { width:176px; height:48px; } body.community-home-page .community-header__actions .community-login-link,body.community-home-page .community-header__actions .community-profile-link,body.community-home-page .community-header__actions form { display:none; } body.community-home-page .community-header__actions a { min-height:34px; padding:6px 9px; font-size:.71rem; } body.community-home-page .community-header__actions .community-admin-link { display:none; } body.community-home-page .community-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } body.community-home-page .community-nav a { justify-content:flex-start; } }