/* v5 community-home composition: loaded last to replace legacy home presentation. */
body.community-home-page { background:linear-gradient(180deg,#e7fbff 0%,#dff8ff 74%,#f8fdff 100%); }
.community-home-page .community-header { position:absolute; inset:0 0 auto; z-index:100; min-height:76px; border:0; background:linear-gradient(180deg,rgba(2,21,88,.42),rgba(2,21,88,0)); box-shadow:none; backdrop-filter:none; }
.community-home-page .community-header__inner { grid-template-columns:220px minmax(0,1fr) max-content; gap:12px; width:min(1440px,calc(100% - 40px)); min-height:76px; }
.community-home-page .community-brand img { width:210px; height:62px; }
.community-home-page .community-nav { flex-wrap:nowrap; gap:2px; }
.community-home-page .community-nav a { min-height:39px; gap:4px; padding:6px clamp(3px,.34vw,7px); color:#fff; font-size:clamp(.68rem,.76vw,.79rem); text-shadow:0 2px 3px rgba(1,19,76,.9); }
.community-home-page .community-nav img { width:17px; height:17px; filter:brightness(0) invert(1) drop-shadow(0 2px 2px rgba(1,19,76,.8)); }
.community-home-page .community-nav a:hover,.community-home-page .community-nav a:focus-visible,.community-home-page .community-nav a[aria-current="page"] { color:#123a80; border-color:#ffd764; background:linear-gradient(180deg,#fff9be,#ffc92e); text-shadow:none; }
.community-home-page .community-nav a[aria-current="page"] img { filter:none; }
.community-home-page .community-nav__badge { top:-6px; right:-2px; }
.community-home-page .community-header__actions { gap:6px; }
.community-home-page .community-header__actions a,.community-home-page .community-header__actions button { min-height:37px; padding:6px 11px; font-size:.76rem; border-color:rgba(255,255,255,.9); color:#0a438f; background:rgba(255,255,255,.94); box-shadow:0 3px 9px rgba(0,18,74,.28); }
.community-home-page .community-header__actions .community-admin-link { color:#fff; border-color:#55c9ff; background:linear-gradient(135deg,#0e98ef,#075ec8); }
.community-home-page .community-header__actions .community-join-link { border-color:#f4ad12; color:#654000; background:linear-gradient(135deg,#ffe96e,#ffb40d); }

.community-home-page .community-home-hero { position:relative; isolation:isolate; min-height:clamp(500px,38vw,560px); overflow:hidden; }
.community-home-page .community-hero__background,.community-home-page .community-hero__background img { position:absolute; inset:0; width:100%; height:100%; }
.community-home-page .community-hero__background { z-index:-1; }
.community-home-page .community-hero__background img { display:block; object-fit:cover; object-position:center; }
.community-home-page .community-hero__inner { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(370px,.9fr); align-items:end; width:min(1260px,calc(100% - 48px)); min-height:inherit; margin-inline:auto; }
.community-home-page .community-hero__content { align-self:center; max-width:590px; padding-top:72px; padding-bottom:38px; }
.community-home-page .community-hero__title-art { display:block; width:min(100%,555px); height:auto; filter:drop-shadow(0 8px 7px rgba(0,24,103,.2)); }
.community-home-page .community-hero__subtitle { margin:-7px 0 16px 7%; color:#072b73; font-size:clamp(.9rem,1.2vw,1.15rem); font-weight:900; letter-spacing:.06em; text-shadow:0 1px 0 #fff; }
.community-home-page .community-hero__actions { display:flex; gap:12px; margin-left:5%; }
.community-home-page .community-hero-btn { display:block; width:clamp(155px,15vw,210px); transition:transform .18s ease; }
.community-home-page .community-hero-btn:hover,.community-home-page .community-hero-btn:focus-visible { transform:translateY(-3px) scale(1.02); }
.community-home-page .community-hero-btn img { display:block; width:100%; height:auto; }
.community-home-page .community-hero__character-wrap { align-self:end; justify-self:center; height:clamp(410px,34vw,520px); }
.community-home-page .community-hero__character { display:block; width:auto; height:100%; max-width:none; object-fit:contain; object-position:center bottom; }

.community-home-page .community-live-stats { position:relative; z-index:3; display:grid; grid-template-columns:repeat(5,1fr); width:min(1260px,calc(100% - 48px)); min-height:82px; margin:-25px auto 18px; padding:13px 26px; border:0; border-radius:29px; background:url('/assets/community-v5-precise/transparent/stats/stats-strip.png') center/100% 100% no-repeat; box-shadow:none; }
.community-home-page .community-live-stats > div { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:3px 22px; border-right:1px solid rgba(42,163,224,.23); }
.community-home-page .community-live-stats > div:last-child { border-right:0; }
.community-home-page .community-live-stats span { grid-row:1 / 3; font-size:2rem; line-height:1; }.community-home-page .community-live-stats strong { color:#123d93; font-size:1.3rem; line-height:1.1; }.community-home-page .community-live-stats small { color:#5571a0; font-weight:800; }

.community-home-page .community-home-content { width:min(1260px,calc(100% - 48px)); margin:0 auto 40px; }
.community-home-page .community-home-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.community-home-page .community-home-card { isolation:isolate; aspect-ratio:1190 / 1322; min-height:0; padding:20% 10% 10%; overflow:hidden; border:0; border-radius:0; background:transparent; box-shadow:none; }
.community-home-page .community-home-card::before { z-index:-1; inset:0; opacity:1; border-radius:0; background-position:center; background-size:100% 100%; background-repeat:no-repeat; }
.community-home-page .community-home-card--rooms::before { background-image:url('/assets/community-v5-precise/transparent/panels/rooms/panel-full.png'); }
.community-home-page .community-home-card--friends::before { background-image:url('/assets/community-v5-precise/transparent/panels/friends/panel-full.png'); }
.community-home-page .community-home-card--chat::before { background-image:url('/assets/community-v5-precise/transparent/panels/chat/panel-full.png'); }
.community-home-page .community-home-card--missions::before { background-image:url('/assets/community-v5-precise/transparent/panels/missions/panel-full.png'); }
.community-home-page .community-home-card--avatar::before { background-image:url('/assets/community-v5-precise/transparent/panels/avatar/panel-full.png'); }
.community-home-page .community-home-card--announcements::before { background-image:url('/assets/community-v5-precise/transparent/panels/announcements/panel-full.png'); }
.community-home-page .community-home-card header { position:absolute; inset:0; z-index:2; min-height:0; margin:0; padding:0; pointer-events:none; }.community-home-page .community-home-card header > span,.community-home-page .community-home-card header > div { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }.community-home-page .community-home-card header > a { position:absolute; top:6%; right:8%; width:27%; height:11%; padding:0; border:0; border-radius:999px; background:transparent; box-shadow:none; font-size:0; pointer-events:auto; }
.community-home-page .community-home-card__empty { display:grid; min-height:225px; place-items:center; padding:22px; border-radius:15px; color:#55759d; background:rgba(255,255,255,.72); text-align:center; }
.community-home-page .community-home-card--avatar { text-align:center; }.community-home-page .community-home-avatar-preview { height:195px; margin-top:4px; }.community-home-page .community-home-avatar-preview img { width:auto; height:100%; object-fit:contain; }.community-home-page .community-home-avatar-copy { margin:0 0 9px; color:#526b9d; font-size:.78rem; }.community-home-page .community-home-avatar-button { background:linear-gradient(135deg,#ffcf31,#ff841a); }
.community-home-page .community-home-card__bottom-link { background:linear-gradient(135deg,#ff77a6,#f52d76); }

.community-home-page .community-home-family-cta { display:grid; grid-template-columns:170px 1fr 285px; align-items:center; gap:18px; min-height:112px; margin-top:24px; padding:11px 25px; overflow:hidden; border:0; border-radius:0; background:url('/assets/community-v5-precise/transparent/cta/banner.png') center/100% 100% no-repeat; box-shadow:none; }.community-home-page .community-home-family-cta__mascots { width:165px; }.community-home-page .community-home-family-cta p { color:#fff; }.community-home-page .community-home-family-cta strong { color:#fff6a3; text-shadow:0 2px 3px #07347e; }.community-home-page .community-home-family-cta a { display:block; }.community-home-page .community-home-family-cta a img { display:block; width:100%; height:auto; }

.community-home-page .community-footer-v5 { position:relative; padding:44px 0 22px; overflow:hidden; color:#deefff; border:0; background:#062462 url('/assets/community-v5/home/footer/footer-starry-bg.webp') center/cover no-repeat; }.community-footer-v5__inner { display:grid; grid-template-columns:1.55fr repeat(3,1fr) 1.15fr; gap:28px; width:min(1260px,calc(100% - 48px)); margin:auto; }.community-footer-v5__brand img { width:205px; height:auto; }.community-footer-v5 p { margin:12px 0 0; line-height:1.7; }.community-footer-v5 h2 { margin:4px 0 12px; color:#fff; font-size:.92rem; }.community-footer-v5 nav { display:grid; align-content:start; gap:8px; }.community-footer-v5 a { color:#cce8ff; text-decoration:none; }.community-footer-v5 a:hover,.community-footer-v5 a:focus-visible { color:#fff49a; }.community-footer-v5__social div { display:flex; gap:9px; }.community-footer-v5__social a { display:grid; width:31px; height:31px; place-items:center; border-radius:50%; color:#083b85; background:#c9eeff; font-weight:900; }.community-footer-v5__copyright { width:min(1260px,calc(100% - 48px)); margin:28px auto 0; padding-top:18px; border-top:1px solid rgba(194,230,255,.25); text-align:center; font-size:.82rem; }.community-footer-v5 .community-back-top { position:absolute; right:28px; bottom:22px; display:block; width:55px; }.community-footer-v5 .community-back-top img { display:block; width:100%; height:auto; }

@media (max-width:1279px) { .community-home-page .community-header__inner { grid-template-columns:minmax(200px,1fr) auto auto; }.community-home-page .community-menu-toggle { display:grid; color:#fff; border-color:rgba(255,255,255,.65); background:rgba(4,51,139,.45); }.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:13px max(20px,calc((100% - 960px)/2)); border:0; background:rgba(3,28,103,.94); box-shadow:0 10px 22px rgba(2,17,77,.25); }.community-home-page .community-nav.is-open { display:grid; }.community-home-page .community-nav a { justify-content:center; }.community-home-page .community-home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.community-footer-v5__inner { grid-template-columns:1.5fr repeat(3,1fr); }.community-footer-v5__social { grid-column:1 / -1; } }
@media (max-width:767px) { .community-home-page .community-header__inner { grid-template-columns:minmax(145px,1fr) auto auto; min-height:64px; width:calc(100% - 24px); }.community-home-page .community-brand img { width:170px; height:50px; }.community-home-page .community-header__actions .community-login-link,.community-home-page .community-header__actions .community-profile-link,.community-home-page .community-header__actions form,.community-home-page .community-header__actions .community-admin-link { display:none; }.community-home-page .community-nav { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; }.community-home-page .community-nav a { justify-content:flex-start; }.community-home-page .community-home-hero { min-height:570px; }.community-home-page .community-hero__inner { display:block; width:calc(100% - 28px); }.community-home-page .community-hero__content { position:relative; z-index:2; max-width:285px; padding-top:85px; }.community-home-page .community-hero__title-art { width:290px; }.community-home-page .community-hero__subtitle { margin:0 0 12px; font-size:.78rem; }.community-home-page .community-hero__actions { gap:7px; margin:0; }.community-home-page .community-hero-btn { width:132px; }.community-home-page .community-hero__character-wrap { position:absolute; right:-29px; bottom:0; height:360px; }.community-home-page .community-live-stats { grid-template-columns:repeat(2,1fr); width:calc(100% - 28px); margin-top:-18px; padding:11px 10px; border-radius:22px; background-size:cover; }.community-home-page .community-live-stats > div { padding:7px 10px; }.community-home-page .community-live-stats > div:nth-child(2) { border-right:0; }.community-home-page .community-live-stats > div:last-child { grid-column:1 / -1; justify-content:center; }.community-home-page .community-live-stats span { font-size:1.5rem; }.community-home-page .community-live-stats strong { font-size:1.1rem; }.community-home-page .community-home-content { width:calc(100% - 28px); }.community-home-page .community-home-grid { grid-template-columns:1fr; gap:15px; }.community-home-page .community-home-card { min-height:360px; padding:24px 22px 20px; }.community-home-page .community-home-family-cta { grid-template-columns:90px 1fr; gap:9px; min-height:135px; padding:10px 13px; background-size:cover; }.community-home-page .community-home-family-cta__mascots { width:90px; }.community-home-page .community-home-family-cta a { grid-column:1 / -1; width:210px; margin:auto; }.community-footer-v5__inner { grid-template-columns:repeat(2,1fr); gap:22px; width:calc(100% - 32px); }.community-footer-v5__brand { grid-column:1 / -1; }.community-footer-v5__copyright { width:calc(100% - 32px); padding-right:55px; text-align:left; }.community-footer-v5 .community-back-top { right:14px; bottom:16px; width:45px; } }

/* At desktop width the logo owns the left edge; the complete navigation/action group is anchored to the right. */
@media (min-width:1280px) {
    body.community-home-page .community-header__inner {
        display:grid;
        grid-template-columns:220px minmax(0,1fr) max-content;
        width:100%;
        max-width:none;
        box-sizing:border-box;
        padding-inline:28px;
        column-gap:12px;
    }
    body.community-home-page .community-brand { min-width:0; }
    body.community-home-page .community-nav {
        min-width:0;
        margin-left:0;
        justify-content:flex-end;
        gap:clamp(3px,.38vw,8px);
    }
    body.community-home-page .community-header__actions { margin-left:0; }
}

/* Use the precisely cut package without changing data-bearing Razor markup. */
body.community-home-page .community-home-family-cta__mascots { content:url('/assets/community-v5-precise/transparent/cta/mascots.png'); }
body.community-home-page .community-home-family-cta > a > img { content:url('/assets/community-v5-precise/transparent/cta/join-family.png'); }
body.community-home-page .community-home-card { min-height:0; }
body.community-home-page .community-footer-v5__brand img { content:url('/assets/community-v5-precise/transparent/header/logo.png'); }

/* The artwork already supplies its primary action buttons. Keep the original links as transparent hit areas only. */
body.community-home-page .community-home-card__bottom-link,
body.community-home-page .community-home-avatar-button {
    position:absolute;
    z-index:3;
    bottom:7%;
    left:20%;
    width:60%;
    height:11%;
    margin:0;
    padding:0;
    border:0;
    border-radius:999px;
    background:transparent;
    box-shadow:none;
    color:transparent;
    font-size:0;
}
body.community-home-page .community-home-avatar-copy { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
body.community-home-page .community-home-family-cta { background-color:transparent; }

/* The layout switches to a drawer whenever the measured header cannot hold all three groups. */
body.community-home-page .community-header.is-compact .community-header__inner { grid-template-columns:minmax(200px,1fr) auto auto; }
body.community-home-page .community-header.is-compact .community-menu-toggle { display:grid; width:42px; height:40px; place-items:center; padding:0; color:#fff; border-color:rgba(255,255,255,.72); background:rgba(4,51,139,.6); }
body.community-home-page .community-header.is-compact .community-nav { position:absolute; top:100%; left:0; right:0; display:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:0; padding:13px max(20px,calc((100% - 960px)/2)); border:0; background:rgba(3,28,103,.96); box-shadow:0 10px 22px rgba(2,17,77,.3); }
body.community-home-page .community-header.is-compact .community-nav.is-open { display:grid; }
body.community-home-page .community-header.is-compact .community-nav a { justify-content:center; }

@media (max-width:767px) {
    body.community-home-page .community-home-card { min-height:0; padding:20% 10% 10%; }
    body.community-home-page .community-header.is-compact .community-nav { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; }
    body.community-home-page .community-header.is-compact .community-nav a { justify-content:flex-start; }
}
