/* ===========================================================
 * Site Footer — Shared Component (m202606)
 * Extracted from home-extra.css for cross-page reuse.
 * Static (non-animated) variant: sits at the end of page flow.
 * =========================================================== */

.site-footer {
    position: relative;
    left: 0;
    right: 0;
    /* +1px 右溢出（被父级 overflow:hidden 裁切）：round3 向下取整使 10.8rem ≤ stage 宽度，
       元素右边缘的亚像素缺口会在非整数 DPR 下透出底色形成白线 */
    width: calc(100% + 1px);
    height: calc(6.06rem + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    justify-content: center;
    color: #b2b2b2;
    background: url('/m/assets/images/footer/bg.png') center bottom / 100% 5.15rem no-repeat;
    box-sizing: border-box;
}

.site-footer__top {
    position: absolute;
    top: .28rem;
    right: .76rem;
    z-index: 30;
    width: 1.42rem;
    height: 1.44rem;
    border: 0;
    padding: 0;
    background: url('/m/assets/images/copyright/top-arrow.png') 50% 50% / 100% 100% no-repeat;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.1, 0, .23, 1), filter .18s cubic-bezier(.1, 0, .23, 1);
}

.site-footer__top:hover,
.site-footer__top:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-.02rem);
}

.site-footer__top:focus-visible {
    outline: .03rem solid rgba(243, 238, 226, .55);
    outline-offset: .04rem;
}

.site-footer__top:active {
    transform: translateY(0) scale(.96);
}

.site-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 3.2rem;
    z-index: 5;
    width: .16rem;
    height: .16rem;
    background: url('/m/assets/images/footer/star.png') 50% 50% / 100% 100% no-repeat;
    pointer-events: none;
    user-select: none;
    animation: site-footer-star-rotate 6s linear infinite forwards;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: .7rem;
    left: 2.64rem;
    z-index: 5;
    width: 1rem;
    height: 1rem;
    background: url('/m/assets/images/footer/star.png') 50% 50% / 100% 100% no-repeat;
    pointer-events: none;
    user-select: none;
    animation: site-footer-star-rotate 9s linear infinite forwards;
}

@keyframes site-footer-star-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.site-footer__inner {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 2rem;
    margin-top: 2.58rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.site-footer__studio-links {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-footer__studio {
    display: block;
    flex-shrink: 0;
}

.site-footer__studio span {
    display: block;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.site-footer__studio--tencent {
    width: 1.64rem;
    height: .75rem;
    margin-right: .55rem;
}

.site-footer__studio--tencent span {
    background-image: url('/m/assets/images/topBar/new-logo-en.png');
}

[data-lang="ja"] .site-footer__studio--tencent span {
    background-image: url('/m/assets/images/topBar/new-logo-ja.png');
}

.site-footer__studio--morefun {
    width: 1.87rem;
    height: .6rem;
    transform: translateY(.02rem);
}

.site-footer__studio--morefun span {
    background-image: url('/m/assets/images/copyright/mofang.png');
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: .34rem;
    color: #a6a399;
    font-size: .2rem;
    line-height: .18rem;
    text-align: center;
    opacity: .6;
}

.site-footer__link-row {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin-top: .17rem;
}

.site-footer__link {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
}

.site-footer__link:not(:last-child)::after {
    content: "|";
    display: inline-block;
    margin: 0 .1rem;
    color: inherit;
}

.site-footer__copy {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: center;
    white-space: nowrap;
}

.site-footer__community {
    margin-top: .39rem;
    color: #a6a399;
    text-align: center;
    /* opacity: .72; */
}

.site-footer__community-title {
    display: block;
    margin: 0 0 .23rem;
    color: inherit;
    font-size: .21rem;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
}

.site-footer__community-title::after {
    content: "";
    display: block;
    width: 4.36rem;
    height: .03rem;
    margin: .06rem auto 0;
    background: url('/m/assets/images/footer/line.png') 50% 50% / 100% 100% no-repeat;
}

.site-footer__community-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .21rem;
}

/* [gap-fallback:iOS13] .site-footer__community-socials */
.site-footer__community-socials > * + * { margin-left: .21rem; }
@supports (inset-inline: 0) {
  .site-footer__community-socials { gap: .21rem; }
  .site-footer__community-socials > * + * { margin-left: 0; }
}

.site-footer__community-social {
    --icon-url: none;
    --icon-width: .24rem;
    --icon-height: .24rem;
    display: grid;
    place-items: center;
    width: .74rem;
    height: .74rem;
    border: .02rem solid rgba(166, 163, 153, .72);
    border-radius: 50%;
    color: #f5efdf;
    text-decoration: none;
    transition: background-color .18s cubic-bezier(.1, 0, .23, 1), border-color .18s cubic-bezier(.1, 0, .23, 1), color .18s cubic-bezier(.1, 0, .23, 1), transform .18s cubic-bezier(.1, 0, .23, 1);
}

.site-footer__community-social::before {
    content: "";
    display: block;
    width: var(--icon-width);
    height: var(--icon-height);
    background-color: currentColor;
    -webkit-mask: var(--icon-url) 50% 50% / contain no-repeat;
    mask: var(--icon-url) 50% 50% / contain no-repeat;
}

.site-footer__community-social:hover,
.site-footer__community-social:focus-visible {
    border-color: rgba(222, 219, 210, .95);
    background-color: rgba(255, 255, 255, .08);
    color: #fff8e6;
    transform: translateY(-.02rem);
}

.site-footer__community-social:focus-visible {
    outline: .02rem solid rgba(222, 219, 210, .45);
    outline-offset: .03rem;
}

.site-footer__community-social--discord {
    --icon-url: url('/m/assets/images/footer/icons/discord.png');
    --icon-width: .52rem;
    --icon-height: .4rem;
}

.site-footer__community-social--x {
    --icon-url: url('/m/assets/images/footer/icons/x.png');
    --icon-width: .39rem;
    --icon-height: .39rem;
}

.site-footer__community-social--youtube {
    --icon-url: url('/m/assets/images/footer/icons/youtube.png');
    --icon-width: .44rem;
    --icon-height: .31rem;
}

.site-footer__community-social--facebook {
    --icon-url: url('/m/assets/images/footer/icons/facebook.png');
    --icon-width: .25rem;
    --icon-height: .44rem;
}

.site-footer__community-social--tiktok {
    --icon-url: url('/m/assets/images/footer/icons/tiktok.png');
    --icon-width: .43rem;
    --icon-height: .5rem;
}

.site-footer__community-social--reddit {
    --icon-url: url('/m/assets/images/footer/icons/reddit.png');
    --icon-width: .51rem;
    --icon-height: .44rem;
}

.site-footer__community-social--twitch {
    --icon-url: url('/m/assets/images/footer/icons/twitch.png');
    --icon-width: .37rem;
    --icon-height: .43rem;
}

.site-footer__community-social--instagram {
    --icon-url: url('/m/assets/images/footer/icons/instagram.svg');
    --icon-width: .46rem;
    --icon-height: .46rem;
}