/* V8 asset geometry overrides; loaded after V7. */
body.community-home-page .community-header__inner { width:calc(100% - clamp(32px,4vw,96px)); max-width:none; grid-template-columns:220px minmax(0,1fr) max-content; gap:clamp(14px,1.5vw,28px); }
body.community-home-page .community-brand img { width:205px; height:auto; }
body.community-home-page .community-nav { gap:clamp(7px,.72vw,13px); }
body.community-home-page .community-nav a { padding-inline:4px; }
body.community-home-page .community-header__actions { justify-self:end; margin-left:0; }
body.community-home-page .community-v7-hero { min-height:clamp(520px,36vw,590px); }
.community-v7-hero__background { object-position:center; }.community-v7-hero__title { width:min(100%,535px); }.community-v7-hero__character-wrap { height:clamp(390px,32vw,500px); }.community-v7-hero__actions a { width:205px; }
.community-v7-hero__inner { width:min(1086px,calc(100% - 40px)); grid-template-columns:minmax(0,1fr) minmax(330px,.86fr); }.community-v7-hero__content { max-width:520px; }.community-v7-hero__character-wrap { justify-self:end; }
.community-v7-hero__character-wrap img { content:url('/images/community/home-v7/custom/hero-character.png'); }
.community-v7-stats { height:94px; }.community-v7-stats__items > div { grid-template-columns:38px 1fr; }
.community-v7-panel { aspect-ratio:6 / 7; }.community-v7-panel__background { object-fit:fill; }.community-v7-panel__header { position:absolute; z-index:2; top:3%; right:4%; left:4.5%; display:block; height:11%; padding:0; }.community-v7-panel__header > img { width:58%; max-height:100%; }.community-v7-panel__header a { position:absolute; top:4%; right:0; width:22%; height:90%; }.community-v7-panel__header a img { width:100%; height:100%; object-fit:contain; }.community-v7-panel__body { position:absolute; z-index:1; top:16%; right:5%; bottom:5%; left:5%; height:auto; padding:0; }.community-v7-panel__footer-action { position:absolute; z-index:2; right:18%; bottom:5%; left:18%; width:auto; margin:0; }.community-v7-panel__footer-action img { width:100%; }
.community-v7-room-list a,.community-v7-friend-list a { min-height:48px; }.community-v7-avatar { background:transparent; }.community-v7-room-list b { width:56px; height:26px; padding:0; border:0; background:url('/images/community/home-v7/transparent/panels/popular_rooms/button_join.png') center/100% 100% no-repeat; color:transparent; font-size:0; }.community-v7-friend-list b { width:62px; height:26px; padding:0; border:0; background:url('/images/community/home-v7/transparent/panels/friend_recommendation/button_action.png') center/100% 100% no-repeat; color:transparent; font-size:0; }
.community-v7-chat__form { background:#fff; border:1px solid #c8dff0; }.community-v7-chat__form button { background:transparent; }.community-v7-task-list a { width:46px; height:23px; padding:0; background:url('/images/community/home-v7/transparent/panels/daily_tasks/button_go.png') center/100% 100% no-repeat; color:transparent; font-size:0; }.community-v7-avatar-cta { right:15%; bottom:5%; left:15%; padding:0; height:10%; background:url('/images/community/home-v7/transparent/panels/character_workshop/button_start.png') center/100% 100% no-repeat; color:transparent; font-size:0; }
.community-v7-cta { min-height:112px; background:transparent; }.community-v7-cta__banner { object-fit:fill; }.community-footer-v5 { background:#062462 url('/images/community/home-v7/transparent/footer/footer_background.jpg') center/cover no-repeat !important; }.community-footer-v5__brand img { content:url('/images/community/home-v7/transparent/footer/logo_footer.png') !important; }.community-footer-v5 .community-back-top img { content:url('/images/community/home-v7/transparent/footer/back_to_top.png'); }
/* Reserve the lower reward row and keep short chat transcripts compact. */
.community-v7-panel--missions .community-v7-panel__body { bottom:19%; }.community-v7-chat__messages { flex:0 0 auto; max-height:58%; }.community-v7-chat__form { margin-top:auto; }
/* v8 banner JPG contains composition padding; cover crops that padding instead of showing it as a black frame. */
.community-v7-cta__banner { object-fit:cover; object-position:center; }
/* Header drawer may be forced by JavaScript if its three desktop groups cannot fit. */
body.community-home-page .community-header.is-compact .community-header__inner { grid-template-columns:minmax(180px,1fr) auto auto; width:min(100% - 32px,1180px); }
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,.9); background:rgba(4,47,123,.68); }
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; padding:14px; background:rgba(5,38,109,.97); box-shadow:0 12px 20px rgba(2,22,75,.28); }
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; padding:9px; }
/* Fix the individual issues identified in visual QA. */
.community-v7-stats span img { display:block; width:34px; height:34px; object-fit:contain; }.community-v7-stats__items > div:last-child span img { display:none; }.community-v7-stats__items > div:last-child span::after { content:'★'; color:#0f4388; font-size:2rem; line-height:1; }
.community-v7-stats__items > div:not(:last-child) span img { display:none; }.community-v7-stats__items > div:nth-child(1) span::after { content:'👥'; font-size:1.8rem; }.community-v7-stats__items > div:nth-child(2) span::after { content:'💗'; font-size:1.8rem; }.community-v7-stats__items > div:nth-child(3) span::after { content:'💬'; font-size:1.8rem; }.community-v7-stats__items > div:nth-child(4) span::after { content:'🔥'; font-size:1.8rem; }
.community-v7-chat__form { min-height:34px; padding:5px 10px 5px 14px; }.community-v7-chat__form input { padding:0 4px; line-height:1.3; }.community-v7-chat__form button { flex:0 0 28px; width:28px; height:28px; }
.community-v7-chat__form button img { content:url('/images/community/home-v7/custom/chat-send.png'); }
.community-v7-workshop { grid-template-columns:18% minmax(0,1fr) 18%; gap:5px; }.community-v7-workshop__choices { display:grid; grid-template-rows:repeat(4,minmax(0,1fr)); align-content:stretch; min-height:0; gap:6px; overflow:hidden; }.community-v7-workshop__choices img { width:100%; height:100%; min-height:0; object-fit:contain; object-position:center; }.community-v7-workshop__character { width:100%; height:100%; min-height:0; max-height:none; object-fit:contain; object-position:center bottom; }
/* The v8 CTA artwork already contains its mascots and painted button; retain a real link as an invisible hit target. */
.community-v7-cta { background:url('/assets/community-v5/home/cta/cta-banner-bg.webp') center/100% 100% no-repeat; }.community-v7-cta__banner { display:none; }.community-v7-cta__mascots { display:block; content:url('/assets/community-v5/home/cta/cta-mascots.webp'); }.community-v7-cta a { position:static; width:auto; height:auto; }.community-v7-cta a img { display:block; content:url('/assets/community-v5/home/cta/cta-join-family.webp'); }.community-v7-cta a:focus-visible { outline:3px solid #fff; border-radius:999px; }
.community-v7-cta { background-color:#eafbff; background-image:url('/images/community/home-v7/custom/cta-background.png'); background-size:100% 100%; }.community-v7-streak span { display:none; }
.community-footer-v5 .community-back-top { right:24px; bottom:20px; width:56px; height:56px; }.community-footer-v5 .community-back-top img { content:url('/assets/community-v3/shared/back-to-top.svg'); display:block; width:56px; height:56px; object-fit:contain; }
@media (max-width:1279px){ body.community-home-page .community-header__inner { width:min(100% - 32px,1180px); } }
@media (max-width:767px){ 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; } }

/* Header v9: the three direct children are brand, navigation and actions. */
body.community-home-page .community-header { display:block; width:100%; padding:0; }
body.community-home-page > .community-notice { position:absolute; top:76px; right:32px; left:32px; z-index:90; width:auto; margin:0; }
body.community-home-page .community-header__inner > .community-header__brand,
body.community-home-page .community-header__inner > .community-nav,
body.community-home-page .community-header__inner > .community-header__actions { min-width:0; }
body.community-home-page .community-nav__mobile-actions { display:none; }

@media (min-width:1280px) {
    body.community-home-page .community-header__inner {
        display:grid;
        grid-template-columns:220px minmax(0,1fr) max-content;
        width:calc(100% - 64px);
        max-width:none;
        min-height:76px;
        margin-inline:auto;
        padding:0;
        gap:18px;
    }

    body.community-home-page .community-header__brand { grid-column:1; display:block; width:208px; line-height:0; }
    body.community-home-page .community-header__brand img { display:block; width:208px; height:auto; max-width:none; object-fit:contain; }
    body.community-home-page .community-nav { grid-column:2; position:static; display:flex; min-width:0; margin:0; padding:0; background:none; box-shadow:none; }
    body.community-home-page .community-menu-toggle { display:none; }
    body.community-home-page .community-nav__links { display:flex; min-width:0; align-items:center; justify-content:center; gap:clamp(7px,.72vw,13px); white-space:nowrap; }
    body.community-home-page .community-nav__links > a { position:relative; display:inline-flex; min-width:0; min-height:36px; align-items:center; justify-content:center; padding:6px 4px; border:0; border-radius:999px; color:#fff; background:transparent; font-size:clamp(.72rem,.78vw,.84rem); font-weight:900; line-height:1; text-decoration:none; text-shadow:0 2px 3px rgba(2,18,69,.85); }
    body.community-home-page .community-nav__links > a > img { display:none; }
    body.community-home-page .community-nav__links > a:hover,
    body.community-home-page .community-nav__links > a:focus-visible,
    body.community-home-page .community-nav__links > a[aria-current="page"] { padding-inline:11px; color:#243e7a; background:linear-gradient(#fff8bd,#ffc93d); text-shadow:none; }
    body.community-home-page .community-header__actions { grid-column:3; justify-self:end; display:flex; align-items:center; gap:8px; margin:0; white-space:nowrap; }
}

@media (max-width:1279px) {
    body.community-home-page .community-header__inner { grid-template-columns:minmax(0,1fr) auto auto; width:calc(100% - 32px); max-width:none; min-height:76px; margin-inline:auto; }
    body.community-home-page .community-nav { position:static; display:block; margin:0; padding:0; background:none; box-shadow:none; }
    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,.9); border-radius:10px; background:rgba(4,47,123,.68); }
    body.community-home-page .community-nav__links { position:absolute; inset:100% 0 auto; display:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:0; padding:14px max(16px,calc((100% - 960px)/2)); background:rgba(5,38,109,.97); box-shadow:0 12px 20px rgba(2,22,75,.28); }
    body.community-home-page .community-nav.is-open .community-nav__links { display:grid; }
    body.community-home-page .community-nav__links > a { display:flex; min-height:42px; align-items:center; justify-content:center; padding:9px; border-radius:10px; color:#fff; font-weight:900; text-decoration:none; }
    body.community-home-page .community-nav__links > a > img { width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(1); }
    body.community-home-page .community-nav__mobile-actions { display:flex; grid-column:1 / -1; justify-content:center; flex-wrap:wrap; gap:8px; padding-top:7px; }
    body.community-home-page .community-nav__mobile-actions a,
    body.community-home-page .community-nav__mobile-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,.96); font-size:.78rem; font-weight:900; text-decoration:none; }
    body.community-home-page .community-nav__mobile-actions form { margin:0; }
    body.community-home-page .community-nav__mobile-actions .community-admin-link { color:#fff; border-color:#62cfff; background:linear-gradient(135deg,#128fe9,#0757bd); }
    body.community-home-page .community-nav__mobile-actions .community-join-link { color:#5d3b00; border-color:#ffb716; background:linear-gradient(135deg,#ffe86c,#ffb10d); }
    body.community-home-page .community-header__actions { display:none; }
}

@media (max-width:767px) {
    body.community-home-page .community-header__inner { width:calc(100% - 24px); min-height:64px; }
    body.community-home-page > .community-notice { top:64px; right:12px; left:12px; }
    body.community-home-page .community-header__brand { width:176px; }
    body.community-home-page .community-header__brand img { width:176px; height:48px; }
    body.community-home-page .community-nav__links { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; }
}

/* Community home visual QA: use one CSS-only source for the four stats dividers. */
.community-v7-stats { overflow:hidden; border:1px solid rgba(74,168,224,.3); border-radius:28px; background:rgba(255,255,255,.92); box-shadow:0 8px 20px rgba(36,125,181,.12); }
.community-v7-stats > img { display:none; }
.community-v7-stats__items { grid-template-columns:repeat(5,1fr); gap:0; padding:12px 30px; }
.community-v7-stats__items > div { position:relative; grid-template-columns:38px minmax(0,1fr); padding:2px 20px; border:0; }
.community-v7-stats__items > div + div { border-left:1px solid rgba(39,157,223,.22); }
.community-v7-stats__items > div:last-child { border-left:1px solid rgba(39,157,223,.22); }
.community-v7-stats__items > div::before,
.community-v7-stats__items > div::after,
.community-v7-stats__items::before,
.community-v7-stats__items::after { content:none; }

/* The workshop has independent header, content and CTA rows; no bottom overlay is shared. */
.community-v7-panel--avatar { display:grid; grid-template-rows:15% minmax(0,1fr) 15%; }
.community-v7-panel--avatar .community-v7-panel__header { position:relative; z-index:2; top:auto; right:auto; bottom:auto; left:auto; grid-row:1; height:auto; padding:3% 4.5% 0; }
.community-v7-panel--avatar .community-v7-panel__body { position:relative; z-index:1; top:auto; right:auto; bottom:auto; left:auto; grid-row:2; height:auto; min-height:0; margin:0 5%; padding:0; }
.community-v7-panel--avatar .community-v7-avatar-cta { position:relative; z-index:2; inset:auto; grid-row:3; align-self:center; justify-self:center; width:70%; height:58%; margin:0; padding:0; }
.community-v7-workshop { display:grid; grid-template-columns:64px minmax(0,1fr) 64px; grid-template-rows:minmax(0,1fr); align-items:stretch; gap:10px; min-height:0; text-align:center; }
.community-v7-workshop__choices { display:grid; grid-template-rows:repeat(4,minmax(0,1fr)); align-content:stretch; min-height:0; gap:7px; overflow:visible; }
.community-v7-workshop__slot { display:grid; min-height:0; place-items:center; overflow:hidden; border-radius:12px; background:rgba(103,81,213,.18); }
.community-v7-workshop__slot img { display:block; width:86%; height:86%; min-height:0; object-fit:contain; object-position:center; }
.community-v7-workshop__stage { display:grid; min-height:0; place-items:end center; overflow:hidden; padding:4px 0 10px; border-radius:18px; background:rgba(196,184,255,.45); }
.community-v7-workshop__character { display:block; width:100%; height:100%; min-height:0; max-height:none; object-fit:contain; object-position:center bottom; opacity:1; filter:none; mix-blend-mode:normal; mask-image:none; -webkit-mask-image:none; }

@media (max-width:767px) {
    .community-v7-stats__items { grid-template-columns:repeat(2,1fr); }
    .community-v7-stats__items > div { border:0; }
    .community-v7-stats__items > div + div { border-left:1px solid rgba(39,157,223,.22); }
    .community-v7-stats__items > div:nth-child(3) { border-left:0; }
    .community-v7-stats__items > div:last-child { border-left:0; }
}