:root {
    --home-blue: #0579de;
    --home-ink: #164681;
    --home-pink: #ff4e89;
    --home-panel-gap: 20px;
}

body.community-home-page {
    color: var(--home-ink);
    background: linear-gradient(#c6f5ff 0, #edfbff 36%, #c3f4ff 100%);
}

.community-home-page .community-header {
    position: relative;
    min-height: 84px;
    border: 0;
    background: linear-gradient(180deg, rgba(0, 48, 138, .92), rgba(0, 111, 216, .78));
    box-shadow: 0 4px 18px rgba(7, 65, 150, .25);
}
.community-home-page .community-nav a { font-weight: 900; text-shadow: 0 2px 3px #084485; }
.community-home-page .community-account a, .community-home-page .community-account button { border-color: #fff; background: linear-gradient(135deg, #1d9cf4, #1265d8); font-weight: 900; }
.community-home-page .community-footer { min-height: 220px; border: 0; color: #d5efff; background: linear-gradient(112deg, #062864, #004b9e 58%, #072f77); }

.community-home-hero { position: relative; min-height: min(43vw, 650px); overflow: hidden; background: #62d5ff; }
.community-home-hero__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.community-home-hero__inner { position: relative; width: min(1280px, calc(100% - 32px)); height: min(43vw, 650px); min-height: 460px; margin: auto; }
.community-home-hero__title { position: absolute; z-index: 2; top: 7%; left: 5%; width: min(53%, 650px); height: 66%; object-fit: contain; object-position: center; }
.community-home-hero__character { position: absolute; z-index: 2; right: -3%; bottom: -12%; width: min(48%, 600px); height: 110%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 18px 12px rgba(4, 71, 155, .25)); }
.community-home-hero__tagline { position: absolute; z-index: 3; top: 67%; left: 13%; margin: 0; color: #143f95; font-size: clamp(.86rem, 1.35vw, 1.15rem); font-weight: 900; letter-spacing: .08em; text-shadow: 0 2px #fff; }
.community-home-hero__actions { position: absolute; z-index: 3; bottom: 4%; left: 11%; display: flex; gap: 12px; width: 37%; }
.community-home-hero__actions a { display: block; width: 50%; transition: transform .18s ease, filter .18s ease; }
.community-home-hero__actions a:hover, .community-home-hero__actions a:focus-visible { transform: translateY(-3px) scale(1.02); filter: brightness(1.04) saturate(1.04); outline: 3px solid #fff; border-radius: 999px; }
.community-home-hero__actions img { display: block; width: 100%; height: 82px; object-fit: contain; }

.community-live-stats { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr); width: min(1260px, calc(100% - 32px)); margin: -26px auto 24px; padding: 17px 28px; border: 2px solid #fff; border-radius: 28px; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 26px rgba(28, 116, 185, .17); }
.community-live-stats > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 0 10px; padding: 0 20px; border-right: 1px solid #bfe6fa; }
.community-live-stats > div:last-child { border-right: 0; }
.community-live-stats span { grid-row: 1 / 3; font-size: 2.1rem; }
.community-live-stats strong { color: #1559b5; font-size: clamp(1rem, 1.8vw, 1.42rem); letter-spacing: .04em; }
.community-live-stats small { color: #58769a; font-weight: 800; }

.community-home-content { width: min(1280px, calc(100% - 32px)); margin: 0 auto 34px; }
.community-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--home-panel-gap); }
.community-home-card { position: relative; display: flex; min-height: 360px; flex-direction: column; padding: 30px 31px 25px; overflow: hidden; border: 1px solid rgba(80, 174, 235, .25); border-radius: 30px; background: rgba(255,255,255,.94); box-shadow: 0 12px 24px rgba(21, 117, 191, .13); }
.community-home-card::before { position: absolute; z-index: 0; inset: 0; background: center / 100% 100% no-repeat; content: ""; pointer-events: none; }
.community-home-card > * { position: relative; z-index: 1; }
.community-home-card--rooms::before { background-image: url('/assets/community-v3/home/rooms/section-frame.webp'); }
.community-home-card--friends::before { background-image: url('/assets/community-v3/home/friends/section-frame.webp'); }
.community-home-card--chat::before { background-image: url('/assets/community-v3/home/chat/section-frame.webp'); }
.community-home-card--missions::before { background-image: url('/assets/community-v3/home/missions/section-frame.webp'); }
.community-home-card--avatar::before { background-image: url('/assets/community-v3/home/avatar/section-frame.webp'); }
.community-home-card--announcements::before { background-image: url('/assets/community-v3/home/announcements/section-frame.webp'); }
.community-home-card header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px; }
.community-home-card header > span { font-size: 1.65rem; filter: drop-shadow(0 2px 1px rgba(255,255,255,.8)); }
.community-home-card h2 { margin: 0; color: #154b98; font-size: clamp(1.05rem, 1.45vw, 1.32rem); line-height: 1.1; }
.community-home-card header p { margin: 3px 0 0; color: #6e8eac; font-size: .72rem; font-weight: 700; }
.community-home-card header > a { padding: 6px 9px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #369ff0, #1573d9); font-size: .72rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.community-home-card a:hover, .community-home-card a:focus-visible { filter: brightness(1.06); outline: 2px solid #49aaf6; outline-offset: 2px; }
.community-home-card__empty { display: grid; flex: 1; place-items: center; margin: 0; color: #6684a4; font-weight: 700; text-align: center; }

.community-home-room-list, .community-home-friend-list, .community-home-announcement-list { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.community-home-room-list li, .community-home-friend-list li { border-bottom: 1px solid #d7eafa; }
.community-home-room-list a, .community-home-friend-list a { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; min-height: 46px; color: #284c79; text-decoration: none; }
.community-home-room-list__emoji { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #5ed8ff, #9383ff); font-size: 1.25rem; }
.community-home-room-list strong, .community-home-friend-list strong { display: block; font-size: .86rem; }
.community-home-room-list small, .community-home-friend-list small { display: block; color: #7792ad; font-size: .68rem; }
.community-home-room-list b, .community-home-friend-list b { padding: 5px 9px; border: 1px solid #ff719a; border-radius: 999px; color: #f03d74; font-size: .7rem; }
.community-home-friend-list img { width: 37px; height: 37px; border: 2px solid #fff; border-radius: 50%; object-fit: contain; background: #dff5ff; box-shadow: 0 1px 3px #98c5e3; }
.community-home-friend-list a { grid-template-columns: 40px 1fr auto; }
.community-home-friend-list b { border: 0; color: #fff; background: linear-gradient(135deg, #39adfa, #1874d8); }
.community-home-card__bottom-link { display: block; margin: auto 8% 0; padding: 9px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #ff7eaa, #f33770); font-size: .84rem; font-weight: 900; text-align: center; text-decoration: none; }

.community-home-chat-tabs { display: flex; gap: 5px; overflow-x: auto; margin: 4px 0 6px; padding-bottom: 3px; }
.community-home-chat-tabs a { padding: 5px 8px; border: 1px solid #d5dfef; border-radius: 999px; color: #496786; font-size: .66rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.community-home-chat-tabs .is-active { color: #fff; border-color: #1999ee; background: linear-gradient(135deg, #45c8ff, #1f82e5); }
.community-home-chat-list { display: grid; gap: 2px; flex: 1; }
.community-home-chat-list p { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; margin: 0; padding: 5px 0; border-bottom: 1px solid #e4eef8; color: #4e6b8b; font-size: .73rem; }
.community-home-chat-list strong { color: #236fc2; white-space: nowrap; }
.community-home-chat-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-home-chat-list time { color: #89a1b9; font-size: .63rem; }
.community-home-chat-input { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 8px 10px; border: 1px solid #d6e4f1; border-radius: 14px; color: #94a7b8; background: #f7fbff; font-size: .73rem; text-decoration: none; }
.community-home-chat-input span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: #2b99e7; }

.community-home-mission-list { display: grid; gap: 4px; flex: 1; }
.community-home-mission-list > div { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid #d9e9f6; }
.community-home-mission-list > div > span { font-size: 1.1rem; }
.community-home-mission-list p { display: grid; gap: 1px; margin: 0; }
.community-home-mission-list strong { font-size: .76rem; }.community-home-mission-list small { color: #7894ad; font-size: .65rem; }
.community-home-mission-list em { color: #e58916; font-size: .7rem; font-style: normal; font-weight: 900; }
.community-home-mission-list a { padding: 4px 8px; border: 1px solid #6cd3aa; border-radius: 999px; color: #15734f; background: #d8ffec; font-size: .65rem; font-weight: 900; text-decoration: none; }
.community-home-streak { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding: 7px 12px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #0073d8, #31c8ef); text-decoration: none; }.community-home-streak small { color: #dff8ff; }.community-home-streak b { font-size: 1.7rem; }

.community-home-avatar-preview { display: grid; flex: 1; place-items: center; overflow: hidden; }.community-home-avatar-preview img { width: 64%; height: 190px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 6px rgba(0, 91, 179, .18)); }.community-home-avatar-copy { margin: 1px 0 8px; color: #486c9d; font-size: .72rem; font-weight: 800; text-align: center; }.community-home-avatar-button { display: block; margin: 0 12%; padding: 9px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #ffbd23, #fa741c); font-weight: 900; text-align: center; text-decoration: none; }
.community-home-announcement-list { flex: 1; }.community-home-announcement-list li { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid #dcecf8; }.community-home-announcement-list > li > span { align-self: start; padding: 3px 6px; border-radius: 4px; color: #fff; background: #ff6e48; font-size: .64rem; font-weight: 900; }.community-home-announcement-list a { display: grid; grid-template-columns: 1fr auto; gap: 3px; color: #406384; text-decoration: none; }.community-home-announcement-list strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.community-home-announcement-list small { color: #91a6ba; font-size: .62rem; }

.community-home-family-cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; margin-top: 22px; padding: 18px 34px; border: 2px solid #fff; border-radius: 28px; color: #fff; background: linear-gradient(110deg, #0078d8, #0752c8 54%, #038ddc); box-shadow: 0 12px 25px rgba(10, 91, 181, .24); }.community-home-family-cta > div { font-size: 2.6rem; white-space: nowrap; }.community-home-family-cta p { display: grid; gap: 4px; margin: 0; }.community-home-family-cta strong { font-size: clamp(1rem, 1.65vw, 1.35rem); }.community-home-family-cta span { color: #daefff; font-size: .8rem; }.community-home-family-cta a { padding: 12px 18px; border: 2px solid #fff; border-radius: 999px; color: #15569f; background: linear-gradient(135deg, #ffe44a, #ffad19); font-weight: 900; text-decoration: none; white-space: nowrap; }

@media (max-width: 1179px) { .community-home-hero { min-height: 560px; }.community-home-hero__inner { height: 560px; }.community-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.community-live-stats { grid-template-columns: repeat(3, 1fr); gap: 14px 0; }.community-live-stats > div:nth-child(3) { border-right: 0; } }
@media (max-width: 767px) { .community-home-hero { min-height: 550px; }.community-home-hero__inner { height: 550px; min-height: 0; }.community-home-hero__title { top: 2%; left: 2%; width: 65%; height: 46%; }.community-home-hero__character { right: -20%; bottom: -4%; width: 72%; height: 77%; }.community-home-hero__tagline { top: 48%; left: 6%; width: 54%; font-size: .72rem; }.community-home-hero__actions { bottom: 5%; left: 5%; width: 64%; gap: 3px; }.community-home-hero__actions img { height: 65px; }.community-live-stats { grid-template-columns: repeat(2, 1fr); width: min(100% - 20px, 560px); margin-top: -15px; padding: 14px 7px; border-radius: 20px; }.community-live-stats > div { padding: 0 9px; border-right: 0; }.community-live-stats span { font-size: 1.6rem; }.community-live-stats small { font-size: .68rem; }.community-home-content { width: min(100% - 20px, 620px); }.community-home-grid { grid-template-columns: 1fr; gap: 14px; }.community-home-card { min-height: 340px; padding: 27px 27px 22px; }.community-home-family-cta { grid-template-columns: 1fr; gap: 8px; padding: 20px; text-align: center; }.community-home-family-cta > div { font-size: 2.1rem; }.community-home-family-cta a { justify-self: stretch; }.community-home-page .community-header { position: relative; } }
@media (max-width: 430px) { .community-home-hero { min-height: 490px; }.community-home-hero__inner { height: 490px; }.community-home-hero__tagline { display: none; }.community-home-card { padding: 24px 23px 20px; }.community-home-card h2 { font-size: 1rem; }.community-home-card header p { display: none; } }