@charset "UTF-8";

@font-face {
  font-family: 'Fusion Pixel';
  src: url('fusion-pixel-subset.woff2') format('woff2'),
       url('fusion-pixel-subset.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
    font-family: 'Fusion Pixel', 'Noto Sans SC', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;

    /* Set default text to dark for light background */
    overflow-x: hidden;

    /* --- Aura of a Gensokyo Dawn Background --- */
    --grid-color: rgb(0 0 0 / 4%);
    --grid-size: 50px;
    --bg-color-1: #f5f7fa;

    /* Base light color */
    --bg-color-2: rgb(255 182 193 / 25%);

    /* Soft Pink */
    --bg-color-3: rgb(175 238 238 / 25%);

    /* Pale Cyan */
    --bg-color-4: rgb(255 255 224 / 35%);

    /* Light Yellow */

    background-color: var(--bg-color-1);
    background-image:
        /* Bottom Layer: Animated Gradient */
        radial-gradient(circle at 100% 100%, var(--bg-color-2) 0%, var(--bg-color-3) 50%, var(--bg-color-4) 100%);
    background-size: 400% 400%;

    /* Make the gradient huge to be subtle */
    animation: gradient-flow 35s ease-in-out infinite;
}

#background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: -1;

    /* Place it truly behind all other content */
    pointer-events: none;

    /* Make it unclickable */
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%, 0% 50%, 0% 50%;
    }

    50% {
        background-position: 0% 50%, 0% 50%, 100% 50%;
    }

    100% {
        background-position: 0% 50%, 0% 50%, 0% 50%;
    }
}

/* --- Nav Rules Panel --- */

/* 1. Container & Layout */
.navrules-container {
    display: none;

    /* Initially hidden, controlled by JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.navrules {
    background: rgb(239 239 239 / 97%);

    /* Light background with high transparency */
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 30%);
    box-shadow: 0 8px 32px 0 rgb(0 0 0 / 37%);
    border-radius: 10px;
    width: 80%;
    max-width: 900px;
    height: 80%;
    overflow-y: auto;
    position: relative;
    padding: 2vw 3vw;
    animation: navrulesShow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes navrulesShow {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 2. Typography & Hierarchy */
.navrules .about-text {
    padding: 1rem 2rem;

    /* Add more breathing room */
}

.navrules hr {
    border: none;
    border-top: 1px solid rgb(0 0 0 / 10%);
    margin: 2rem 0;
}

/* --- Typography & Hierarchy --- */
.navrules .title {
    color: #333;
    font-size: 2rem;

    /* Use rem for better scalability */
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.navrules .title2 {
    color: #555;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.navrules .section-title {
    color: #d3333edd;

    /* Retained red for emphasis */
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.navrules .titlerule {
    color: #666;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.navrules p {
    color: #444;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.navrules .rules-list>li {
    list-style: none;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    border-left: 3px solid #d3333edd;
    line-height: 1.8;
    color: #444;
}

.payimg {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 2rem;
}

.payimg img {
    max-width: 25%;
    height: auto;
}

.prevButton::before {
    transform: rotate(-135deg);
}

.nextButton::before {
    transform: rotate(45deg);
}

/* 3. Button Styles - NEW */
.nav-arrow {
    position: absolute;
    bottom: 20px;
    width: 44px;
    height: 44px;
    background-color: rgb(0 0 0 / 15%);
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;

    /* Override default button padding */
}

.nav-arrow:hover {
    background-color: rgb(0 0 0 / 30%);
    border-color: rgb(255 255 255 / 50%);
}

.nav-arrow.next {
    right: 20px;
}

.nav-arrow.prev {
    right: 75px;

    /* Position next to the next button */
}

/* Arrow shape using pseudo-element */
.nav-arrow::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transition: border-color 0.3s ease;
}

.nav-arrow.next::before {
    transform: translateX(-2px) rotate(45deg);
}

.nav-arrow.prev::before {
    transform: translateX(2px) rotate(-135deg);
}

/* 4. Page Transition Animation */
.navrules .page {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}


/* --- Language Switcher --- */
.language-switcher {
    position: relative;
    display: inline-block;
    margin-right: 40px;

    /* Spacing between switcher and social icons */
    vertical-align: middle;

    /* Align with social icons */
}

.language-button {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;

    /* Match social icon size */
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.language-button:hover {
    color: #ffffff67;

    /* Same hover color as social icons */
    background-color: transparent;

    /* Override global button hover style */
}

.language-dropdown {
    display: none;
    position: absolute;
    top: 100%;

    /* Position below the button */
    right: 0;
    background-color: rgb(12 12 12 / 41%);

    /* Semi-transparent dark background */
    backdrop-filter: blur(5px);
    border: 1px solid #fff8;
    border-radius: 4px;
    list-style: none;
    padding: 5px 0;

    /* 10px top padding + 5px original padding */
    margin-top: -10px;

    /* Pull up to create hover bridge */
    margin: 0;
    min-width: 100px;
    z-index: 15;

    /* Ensure it's above other content */
}

.language-switcher:hover .language-dropdown {
    display: block;
}

.language-dropdown li a {
    display: block;
    padding: 8px 15px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.language-dropdown li a:hover {
    background-color: #4dd3e85a;
    color: #000;
}

.language-dropdown li a.active {
    font-weight: bold;
    color: #d3333eac;
}

button {
    width: 100%;
    background-color: transparent;
    border: none;
    color: rgb(255 255 255);
    font: inherit;
    cursor: pointer;
    outline: none;
    padding: 1vh;

    /* 根据需要调整 */
    margin: 0;

    /* 根据需要调整 */
}

button:hover {
    background-color: #ffffff68;

    /* 悬停时的背景颜色 */
}

.announcement a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 0.5em;

    /* 图标和文字的间距 */
}

.announcement p {
    margin: 0;

    /* 移除 p 标签的默认边距 */
    animation: shake 2.5s ease-in-out infinite;
}

@keyframes shake {
    0%,
    40%,
    100% {
        transform: translateX(0);
    }

    /* 在40%处结束抖动，开始停顿 */
    10%,
    30% {
        transform: translateX(-2px);
    }

    20% {
        transform: translateX(2px);
    }
}

/* --- Pixel Dissolve Effect --- */
.main-imglass {
    display: flex;
    flex-wrap: wrap;
    backdrop-filter: blur(3px);
    transition: backdrop-filter 0.8s ease;

    /* Add transition for the blur effect */
}

.main-imglass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    justify-content: center;
}

.main-imglass.clear {
    backdrop-filter: blur(0);
}

.pixel {
    background-color: rgb(255 255 255 / 5%);
    transition: transform 0.8s ease, opacity 0.8s ease;
    margin: -1px;

    /* Collapse borders to maintain seamless layout */
    will-change: transform, opacity;

    /* Performance optimization */
    transform: scale(1);
    opacity: 1;
}

.pixel.dissolve {
    transform: scale(0);
    opacity: 0;
}

/* 全新落地頁樣式 */
#loadingCard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at bottom, #1b27354c 0%, #090a0f47 100%);
    color: #e0e0e0;
    z-index: 9999;
    overflow: hidden;
    transition: opacity 0.5s ease-out, transform 0.5s ease-in-out;
}

#loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 3; /* Above content, below announcement */
    cursor: pointer;
}

#loadingCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(10 10 26 / 60%), rgb(10 10 26 / 90%));
    z-index: 1;
}

/* New wrapper for content that should be under the overlay */
.loading-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* All animated elements are inside the wrapper now */
.loading-content-wrapper > div {
    position: absolute;
    opacity: 0;
    animation-fill-mode: forwards;
}

/* 1. 裝飾線 */
.retro-line {
    top: 0;
    left: 55%;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, rgb(0 255 255 / 0%), rgb(0 255 255 / 50%) 50%, rgb(0 255 255 / 0%) 100%);
    animation: slide-in-down 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

/* 2. Logo */
.loadimg {
    top: 0;
    left: 0;
    animation: slide-in-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}

.loadimg img {
    width: 80vw;
    filter: drop-shadow(0 0 10px rgb(0 255 255 / 50%));
}

/* 3. 介紹文字 */
.intro-text {
    top: 60%;
    left: 57%;
    line-height: 2.0;
    transform: translate(-50%, -50%);
    text-align: left;
    animation: fade-in-up 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s;
}

.intro-text p {
    font-size: 1.8vw;
    color: #a0a0a0;
    margin: 10px 0 0 2px;
}

/* 4. 公告 */
.announcement {
    position: absolute; /* Needs to be positioned */
    bottom: 8vh;
    left: 8vw;
    border: 1px solid rgb(255 255 255 / 60%);
    padding: 10px 15px;
    font-size: 1vw;
    border-radius: 12px;
    color: rgb(255 255 255 / 80%);
    animation: fade-in-up 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s;
    z-index: 4; /* On top of everything */
    opacity: 0; /* Match other elements' initial state */
    animation-fill-mode: forwards; /* Match other elements' initial state */
}

.announcement p {
    margin: 0;
}

/* 5. 提示文字 */
.hint-text {
    bottom: 8vh;
    right: 8vw;
    animation: fade-in 1.5s ease-in-out 1.4s;
}

.hint-text p {
    margin: 0;
    font-size: 1.2vw;
    color: #a0a0a0;
    position: relative;
    padding-right: 12px;

    /* 為光標留出空間 */
}

.hint-text p::after {
    content: '';
    position: absolute;
    right: 0;
    top: 2px;
    width: 8px;
    height: 1.2em;
    background-color: rgb(255 255 255);
    animation: blink-cursor 1.2s step-end infinite;
}

/* 隱藏動畫 */
#loadingCard.hidden {
    opacity: 0;
    transform: translateY(-20px);

    /* 輕微上移 */
    pointer-events: none;
}

/* 入場動畫 Keyframes */
@keyframes slide-in-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-up {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 光標閃爍動畫 */
@keyframes blink-cursor {
    0%,
    100% {
        background-color: transparent;
    }

    50% {
        background-color: rgb(255 255 255);
    }
}

/* LOGO样式 */
.logo-riot {
    background-image: url("icon/logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 160px;
    height: 49px;
    display: inline-block;
}

/* 导航栏样式 */
.comm-head {
    width: calc(100% - 20px);
    height: 78px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
    margin: 3px 10px 1px;
    background-image: url('img/top.jpg');
    box-sizing: border-box;
    animation: slideDown 0.6s forwards ease-out;
    box-shadow: 5px 5px 5px #0000006e;
    z-index: 10;
}

.head-logo {
    height: 49px;
    margin-top: 5px;
}

.head-normal {
    width: 90%;
    height: 78px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.head-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
    width: calc(55% - 30px);
    height: 78px;
    box-sizing: border-box;
    position: relative;
    margin-left: -10vh;
}

.head-nav>li {
    list-style: none;
    width: 25%;
    height: 78px;
    text-align: center;
    position: relative;
}

.head-nav>li>a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.head-nav-title {
    display: block;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 78px;
}

.head-nav-subtitle {
    display: block;
    color: #aeaeae;
    font-size: 12px;
    margin-top: -25px;
    letter-spacing: 1px;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.head-nav>li {
    float: left;
    list-style: none;
    width: 25%;
    height: 78px;
    text-align: center;
    position: relative;
}

.head-nav>li>a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.head-nav-title {
    display: block;
    color: #fff;
    font-weight: 550;
    font-size: 1.2vw;
    letter-spacing: 1px;
    line-height: 78px;
}

.head-nav-subtitle {
    display: block;
    color: #ddd;
    font-size: 12px;
    margin-top: -25px;
    letter-spacing: 1px;
}

/* 社交图标样式 */
.social-icons {
    float: right;
    height: 78px;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.social-icons a {
    color: #fff;
    font-size: 4vh;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #00aced;
}

.header-right-side {
    display: flex;
    align-items: center;
}

/* 子菜单样式 */
.dropdown {
    font-size: 12px;
    border-radius: 0 0 10px 10px;
    min-height: 200px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 78px;
    left: 0;
    width: 100%;
    background: linear-gradient(#393939e1, #39393900);
    text-align: center;
    z-index: 10;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.dropdown a {
    display: block;
    color: #fff;
    padding: 10px;
    text-decoration: none;
}

.dropdown a:hover {
    background-color: #ffffff68;
}

.head-nav:hover .dropdown {
    opacity: 1;
    visibility: visible;
}

/* 视觉图样式 */
.main-image {
    border-radius: 6px;
    width: calc(100% - 20px);
    height: auto;
    overflow: hidden;
    aspect-ratio: 16 / 5.5;
    margin: 3px 10px 1px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 40px;
    margin-top: 12vh;
    animation: slideUp 0.6s forwards ease-out;
    box-shadow: 5px 5px 5px #0000006e;
    z-index: 1;
}

/* 入场动画 */
@keyframes slideDown {
    0% {
        transform: translateY(-78px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);

        /* Final position */
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }

    100% {
        transform: translateY(20px);

        /* Final position */
        opacity: 1;
    }
}

/* 轮播图样式 */
.slideshow {
    position: absolute;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fade 25s infinite;
}

/* 添加关键帧动画 */
@keyframes fade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.slide:nth-child(1) {
    animation-delay: 0s;
}

.slide:nth-child(2) {
    animation-delay: 5s;
}

.slide:nth-child(3) {
    animation-delay: 10s;
}

.slide:nth-child(4) {
    animation-delay: 15s;
}

.slide:nth-child(5) {
    animation-delay: 20s;
}

/* 按钮样式 */
.button {
    font-family: 'Noto Sans', Helvetica, sans-serif;
    font-weight: bold;
    display: inline-block;
    padding: 2% 5%;
    border: 2px solid #a0e6a277;
    color: #ffffff81;
    text-align: center;
    text-decoration: none;
    font-size: 3.4vh;
    cursor: pointer;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.2s ease;
    opacity: 1;
    box-shadow: 0 0 0 0.5vh #00000007, inset 0 0 100px rgb(255 255 255 / 16.2%);
}

.button::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 80vw;
    height: 60vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s, opacity 0.5s;
    pointer-events: none;
}

.button:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
}



.buttlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 24.5%);
    opacity: 0;
    transition: opacity 0.5s;
    border-radius: 10px;
    display: block;
    z-index: 1;
    pointer-events: auto;
    overflow: hidden;
}

.downs:hover .buttlay {
    opacity: 1;
}

.buttlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: rgb(255 255 255 / 50%);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    animation: wave 1s infinite;
}

/* 弹窗样式 */
.modal-container {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: hsl(0deg 0% 100% / 53.2%);
    animation: modalShow 0.6s ease-out;
    animation-fill-mode: forwards;
}

.modal {
    width: 60%;
    padding: 4rem 2rem;
    border-radius: 0.8rem;
    color: var(--light);
    background: var(--background);
    box-shadow: 0.4rem 0.4rem 2.4rem 0.2rem hsl(0deg 0% 30% / 21.5%);
    position: relative;
    overflow: hidden;
}

@keyframes modalShow {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }

    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes modalHide {
    from {
        opacity: 1;
        transform: translateY(0%);
    }

    to {
        opacity: 0;
        transform: translateY(-50%);
    }
}

.modal__details {
    text-align: center;
    margin-bottom: 0.1rem;
    padding-bottom: 0.1rem;
    border-bottom: 1px solid hsl(0deg 0% 100% / 40%);
}

.modal__title {
    position: relative;
    top: -20px;
    font-size: 2vw;
    color: #000000b3;
}

.modal__description {
    position: relative;
    font-size: 1rem;
    top: -16px;
    color: #00000079;
}

.modal-text2 {
    font-family: 'fusion-pixel-subset', Helvetica, sans-serif;
    font-size: 1.5vw;
}

/* 下载图标样式 */
.icon {
    width: 6.0vw;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    margin-top: 1vh;
}

/* 下载框样式 */
.down {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    place-content: center center;
    gap: 10px;
}

/* 下载按钮样式 */
.downs {
    display: flex;
    flex-direction: column;
    border: 0.5px solid;
    border-radius: 10px;
    padding: 5px;
    margin: 2px;
    text-align: center;
    align-items: center;
    position: relative;
}

.downs p {
    font-size: 2vh;
    margin-top: 12px;
}

.mochat-container {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    animation: mochatShow 0.6s ease-out;
    animation-fill-mode: forwards;
}

.mochat {
    display: flex;
    flex-direction: column;
    width: 50vw;
    background-color: #efefeff8;
    padding: 1vw 0 1vw 2vw;
    border-radius: 10px;
    font-family: 'fusion-pixel-subset', Helvetica, sans-serif;
}

.mochat__title {
    color: #393939;
    text-align: left;
    font-size: 2vw;
    font-weight: bold;
    margin-bottom: 5px;
}

.mochat__title2 {
    text-align: left;
    color: #0000006e;
    font-size: 1.3vw;
    margin-bottom: 10px;
}

.mochat__channels {
    display: flex;
    flex-direction: column;
}

/* 調整 .mochat__group 的 justify-content */
.mochat__group {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /* 垂直居中 */
}

.mochat__channel {
    position: relative;

    /* 添加这行 */
    width: 16vw;

    /* 调整宽度 */
    height: auto;

    /* 高度自适应 */
    background-color: rgb(255 255 255 / 43.9%);
    padding: 10px;

    /* 调整内边距 */
    border: 1px solid #d2d2d26c;
    border-radius: 10px;
    cursor: pointer;
    display: flex;

    /* 使用 flex 布局 */
    align-items: center;

    /* 垂直居中对齐 */
    overflow: hidden;
    margin-right: 10px;
}

.mochat__channel.channel-1::before {
    content: "";
    display: block;
    width: 7vw;
    height: 7vw;
    background-image: url("icon/qq1.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
    position: relative;
}

.full-tag {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgb(255 0 0 / 70%);
    color: white;
    padding: 2px 5px;
    font-size: 0.8vw;
    border-radius: 3px;
    z-index: 1;
}

.mochat__channel.channel-2::before {
    content: "";
    display: block;
    width: 7vw;
    height: 7vw;
    background-image: url("icon/qq2.webp");

    /* Second image */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
}


.mochat__channel:last-child {
    margin-right: 0;
}

.mochat__text {
    display: flex;
    flex-direction: column;

    /* 垂直排列文字 */
    justify-content: center;

    /* 垂直居中对齐 */
}

.mochat__text-line1,
.mochat__text-line2 {
    text-align: left;

    /* 左对齐 */
    font-size: 1vw;

    /* 设置文字大小 */
    color: #393939;

    /* 设置文字颜色 */
}

.mochat__text-line2 {
    color: #0000006e;

    /* 设置第二行文字颜色 */
    font-size: 0.9vw;

    /* 调整第二行文字大小 */
}


@keyframes mochatShow {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }

    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes mochatHide {
    from {
        opacity: 1;
        transform: translateY(0%);
    }

    to {
        opacity: 0;
        transform: translateY(-50%);
    }
}

.main-info {
    display: flex;
    flex-direction: row;
    border-radius: 12px;
    background-color: #fff0;
    margin: 5vh 10px 1px;
    box-sizing: border-box;
    width: calc(100% - 20px);
    justify-content: space-between;
    position: relative;
    opacity: 0;
    top: 50px;
    transition: opacity 1s ease, top 1s ease;
    z-index: 10;
}

.main-info.visible {
    opacity: 1;
    top: 0;
}

/* 新动态 */
.news {
    width: 42vw;
    display: flex;
    border-radius: 20px;
    margin-top: 5px;
    box-shadow: 0 5px 6px 0.5vh #0003;
}

.carouselnews {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
}

.carousel-item {
    visibility: visible;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: #ffffff10;
    flex-shrink: 0;
    position: absolute;
    z-index: 0;
    transition: 0.6s all linear;
}

.carousel-item__info {
    height: 64%;
    display: flex;
    justify-content: left;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 25px 10px 10px;
    position: absolute;

    /* 由relative改为absolute */
    bottom: 20px;

    /* 距离底部20px */
    left: 20px;

    /* 距离左侧20px */
    background: rgb(255 255 255 / 0%);
    border-radius: 10px;
    z-index: 1;
    width: 50%;

}

.carousel-item__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    opacity: 0;
    border-radius: 10px;
    transition: 0.6s all ease-in-out;
    mask-image: linear-gradient(to right, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 100%) 100%);
}

.carousel-item__image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: 0.6s all ease-in-out;
}

.carousel-item__subtitle {
    font-family: 'fusion-pixel-subset', Helvetica, sans-serif;
    letter-spacing: 3px;
    font-size: 14px;
    text-transform: uppercase;
    margin-top: -1.3rem;
    color: #7E7E7E;
    font-weight: 700;
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s all ease-in-out;
}

.carousel-item__title {
    text-transform: uppercase;
    font-family: 'fusion-pixel-subset', Helvetica, sans-serif;
    font-size: 2.4rem;
    line-height: 45px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #2C2C2C;
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
}

.carousel-item__description {
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
    margin-top: 1rem;
    font-family: 'fusion-pixel-subset', Helvetica, sans-serif;
    font-size: 14px;
    color: #383838;
    line-height: 1.4rem;
    margin-bottom: 35px;
}

.carousel-item--1 .carousel-item__image {
    background-image: url('img/main/main2.webp');
}

.carousel-item--2 .carousel-item__image {
    background-image: url('img/main/main2.webp');
}

.carousel-item--3 .carousel-item__image {
    background-image: url('img/main/main6.webp');
}

.carousel-item--4 .carousel-item__image {
    background-image: url('img/main/main3.webp');
}

.carousel-item--5 .carousel-item__image {
    background-image: url('https://wiki.gensoukyo.moe/wiki/images/d/d6/%E5%B7%A8%E5%A4%A7%E9%98%B4%E9%98%B3%E7%8E%89%E5%89%AF%E6%9C%AC.png');
}



.carousel-item__btn {
    width: auto;
    white-space: nowrap;
    color: #313131;
    font-family: 'fusion-pixel-subset', Helvetica, sans-serif;
    letter-spacing: 3px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
}

.carousel__nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.carousel__arrow {
    cursor: pointer;
    display: inline-block;
    padding: 11px 15px;
    position: relative;
    background-color: #ffffff72;
    border-radius: 50%;
    z-index: 999;
    pointer-events: all;
}

.carousel__arrow:nth-child(1) {
    left: 10px;

    /* 左侧按钮距离carousel的左侧10px */
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.carousel__arrow:nth-child(2) {
    right: 20px;

    /* 右侧按钮距离carousel的右侧10px */
}

.carousel__icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    fill: #5d5d5d;
}

.active {
    z-index: 1;
    display: flex;
    visibility: visible;
}

.active .carousel-item__subtitle,
.active .carousel-item__title,
.active .carousel-item__description,
.active .carousel-item__btn {
    transform: translateY(0);
    opacity: 1;
    transition: 1.5s all ease-in-out;
    visibility: visible;
}

.active .carousel-item__image {
    opacity: 1;
    transition: 1s all ease-in-out;
    transform: translateX(0);
}

@keyframes glow {
    0% {
        box-shadow: 0 0 5px #007bff;
    }

    50% {
        box-shadow: 0 0 20px #007bff;
    }

    100% {
        box-shadow: 0 0 5px #007bff;
    }
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.shop {
    width: 53%;
    background: #fff0;
    border-radius: 12px;
    display: flex;
    text-align: center;
    height: 60vh;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 6px 0.5vh #0003;
    position: relative;

    /* 确保子元素可以相对于此容器定位 */
}

.shop-imglass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 29.7%);
    backdrop-filter: blur(0.5px);
    display: flex;
    justify-content: center;
}

.shopgall {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5vh;
    position: absolute;
    width: 100%;
    height: 100%;
}

.shopgall img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20vw;
    height: auto;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    transition: opacity 1s;
    opacity: 0;
}

.shopgall img.active {
    opacity: 1;
    z-index: 2;
    width: 20vw;
    height: auto;
    margin-top: -5vh;
    box-shadow: 10px 5px 5px rgb(0 0 0 / 26.5%);
}

.shopgall img.left,
.shopgall img.right {
    z-index: 1;
    opacity: 0.7;
    width: 16vw;
}

.shopgall img.left {
    left: 28%;
}

.shopgall img.right {
    left: 73%;
}

.shopgall img.fade-out {
    opacity: 0 !important;
}

.shopgist {
    margin-top: 46vh;
    font-size: 18px;
    color: #333;
}

.main-info2 {
    display: flex;
    flex-direction: row;
    border-radius: 12px;
    background-color: #fff0;
    margin: 5vh 10px 1px;
    box-sizing: border-box;
    width: calc(100% - 20px);
    justify-content: space-between;
    opacity: 0;

    /* 默认隐藏 */
    position: relative;

    /* 相对定位，用于子元素的绝对定位 */
    top: 10vh;

    /* 初始向上偏移 */
    transition: opacity 1s ease, top 1s ease;
    z-index: 10;
}

.main-info2.visible {
    opacity: 1;
    top: 0;
}

.guide {
    display: flex;
    width: 42vw;
    flex-direction: column;
    border-radius: 12px;
    margin-right: 0;
    height: 60vh;
    background: linear-gradient(45deg,
            rgb(255 0 149 / 7.7%),
            rgb(0 204 255 / 23.2%),
            rgb(0 255 204 / 23.3%),
            rgb(255 255 0 / 26.2%));
    background-size: cover;
    position: relative;
    box-shadow: 0 5px 6px 0.5vh #0003;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    font-family: 'fusion-pixel-subset', Helvetica, sans-serif;
    transition: background-image 0.35s ease;
}

.video {
    width: 53%;
    background: #fff0;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    position: relative;
    height: 60vh;
    box-shadow: 0 5px 6px 0.5vh #0003;
    justify-content: center;
    align-items: center;
}

.video-gist {
    width: 42vw;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.guide-content {
    padding: 20px;
    justify-content: center;
    align-items: center;
    position: relative;

    /* 确保内容在毛玻璃效果之上 */
    z-index: 1;

    /* 确保内容在毛玻璃效果之上 */
}

.video-gist iframe {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.guide-item-title {
    font-size: 2.5vh;
    font-weight: 700;
    margin-bottom: 0.4vh;
    color: rgb(46 46 46);
    padding-left: 0.4vw;
    padding-top: 0.9vh;
}

.guide-item-text {
    font-size: 1.9vh;
    line-height: 1.6;
    color: #333;
    padding-left: 1.4vw;
}

.guide-item1,
.guide-item2,
.guide-item3 {
    margin-bottom: 1.5rem;
    border-radius: 10px;
    background-color: rgb(255 255 255 / 28.9%);
    width: 35vw;
    transition: opacity 0.35s ease;
}

.guide-1,
.guide-2,
.guide-3 {
    text-decoration: none;
    color: inherit;
}

/* 画廊 */
.portgall {
    width: calc(100% - 20px);
    opacity: 0;
    position: relative;
    top: 10vh;
    transition: opacity 1s ease, top 1s ease;
    margin: 5vh 10px 1px;
    box-sizing: border-box;
}

.portgall.visible {
    opacity: 1;
    top: 0;
}

.map-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 35%;
    margin-top: 5vh;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
    border: 1px solid rgb(255 255 255 / 20%);

    --feather-width: 50px;
    --border-radius: 15px;

    mask-image:
        radial-gradient(circle at 0 0, transparent var(--border-radius), black calc(var(--border-radius) + 1px)),
        radial-gradient(circle at 100% 0, transparent var(--border-radius), black calc(var(--border-radius) + 1px)),
        radial-gradient(circle at 0 100%, transparent var(--border-radius), black calc(var(--border-radius) + 1px)),
        radial-gradient(circle at 100% 100%, transparent var(--border-radius), black calc(var(--border-radius) + 1px)),
        linear-gradient(to right, transparent, black var(--feather-width)),
        linear-gradient(to left, transparent, black var(--feather-width)),
        linear-gradient(to bottom, transparent, black var(--feather-width)),
        linear-gradient(to top, transparent, black var(--feather-width));
    mask-composite: source-in;
    mask-composite: intersect;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main-gist {
    border-radius: 6px;
    margin: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 3vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #7d7d7d;
    font-size: 1.6vw;
    background-color: #ffffff31;
}

.main-gist p {
    position: relative;
    text-align: center;
    margin: 0;
    opacity: 0;
    line-height: 2;
    top: 3vh;
    transform: translateY(20vh);
    transition: opacity 2s ease-in, transform 2s ease-in;
    z-index: 1;
}

#sineCanvas {
    width: 100vw;
    height: 20vh;
}

.main-gist p.visible {
    opacity: 1;

    /* 添加visible类时文字显现 */
    transform: translateY(0);

    /* 添加visible类时文字恢复到原位 */
}

/* 中荧幕适配 */
@media (width <=1230px) {
    .head-nav-title {
        font-size: 1.45vw;
    }

    .down {
        grid-template-columns: repeat(2, 2fr);
    }

    .downs {
        height: auto;
    }

    .icon {
        width: 60px;
        height: auto;
        object-fit: cover;
        aspect-ratio: 1 / 1;
        margin-top: 0;
    }

    .news-item1 {
        margin-bottom: 0.6rem;

        /* 设置 news-item1 和下一个元素之间的间距 */
    }

    .news-item2 {
        margin-bottom: 0.6rem;

        /* 设置 news-item2 和下一个元素之间的间距 */
    }
}


.guide-item-title {
    font-size: 2.5vh;
    font-weight: 700;
    margin-bottom: 0.4vh;
    color: rgb(46 46 46);
    padding-left: 0.4vw;
    padding-top: 0.9vh;
}

.guide-item-text {
    font-size: 1.9vh;
    line-height: 1.6;
    color: #333;
    padding-left: 1.4vw;
}

.guide-item1,
.guide-item2,
.guide-item3 {
    margin-bottom: 1.5rem;
    border-radius: 10px;
    background-color: rgb(255 255 255 / 28.9%);
    width: 35vw;
    transition: opacity 0.35s ease;
}

.guide-item1:hover,
.guide-item2:hover,
.guide-item3:hover {
    opacity: 0.8;
}

/* 鼠标悬停在.news-item上时，不透明度加深 */
.guide-item1:hover,
.guide-item2:hover,
.guide-item3:hover {
    opacity: 0.6;
}

.guide-imglass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 49.6%);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
}

/* 鼠標懸停效果 */
.news {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.news:hover {
    transform: scale(1.02);

    /* 略微放大 */
    box-shadow: 0 8px 15px rgb(0 0 0 / 20%);

    /* 加深陰影 */
}

.shop {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.shop:hover {
    transform: scale(1.02);

    /* 略微放大 */
    box-shadow: 0 8px 15px rgb(0 0 0 / 20%);

    /* 加深陰影 */
}

.guide {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.guide:hover {
    transform: scale(1.02);

    /* 略微放大 */
    box-shadow: 0 8px 15px rgb(0 0 0 / 20%);

    /* 加深陰影 */
}

.video {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.video:hover {
    transform: scale(1.02);

    /* 略微放大 */
    box-shadow: 0 8px 15px rgb(0 0 0 / 20%);

    /* 加深陰影 */
}

/* Landing Page Styles */
.landing-page-content {
    background-color: rgb(0 0 0 / 50%);

    /* 半透明背景，方便區分 */
    padding: 20px;
    border-radius: 10px;
    color: white;
    text-align: center;
    max-width: 500px;

    /* 限制最大寬度 */
    margin: 20px;

    /* 避免貼邊 */
    position: relative;

    /* 確保 z-index 生效 */
    z-index: 1001;

    /* 比 loading-card 的背景高一點 */
}

/* Map Interaction Overlay Styles */
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 13.9%);
    z-index: 2;

    /* Ensure it's above the iframe */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 15px;

    /* Match the container's border-radius */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.map-container.active .map-overlay {
    opacity: 0;
    pointer-events: none;

    /* When hidden, clicks go to the map */
}

.map-overlay-text {
    color: white;
    font-size: 2vw;
    font-weight: bold;
    text-shadow: 0 0 8px rgb(255 255 255 / 70%), 0 0 12px rgb(0 191 255 / 50%);
    animation: pulse 2.5s infinite ease-in-out;
    text-align: center;
    pointer-events: none; /* Text itself shouldn't block clicks to the overlay */
}