/* 自定义字体: 统一引入简繁日三语种的思源黑体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&family=Noto+Sans+SC:wght@700;900&family=Noto+Sans+TC:wght@700;900&display=swap');

body {
    font-family: 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', sans-serif;
    background-color: #ffffff; /* paper */
    color: #000000; /* ink */
    overflow-x: hidden;
}

html {
    overflow-y: scroll; /* 强制显示垂直滚动条，防止页面抖动 */
}

@media (max-width: 640px) {
    /* Mobile: hide scrollbars to keep visual symmetry */
    html {
        scrollbar-width: none;
    }
    body {
        -ms-overflow-style: none;
    }
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* ============================================================
   Ultra-Wide Screen Adaptation (>16:9 / 1920px+)
   ============================================================ */
@media (min-width: 1921px) {
    html {
        background-color: #f3f4f6; /* Gray-100 background for the void */
        display: flex;
        justify-content: center;
        min-height: 100vh;
    }
    body {
        width: 1920px;
        max-width: 100%;
        margin: 0 auto;
        background-color: #ffffff;
        border-left: 4px solid #000000;
        border-right: 4px solid #000000;
        /* Double side neo-shadow effect */
        box-shadow: 8px 0 0 0 #000000, -8px 0 0 0 #000000; 
        position: relative;
    }
    /* Ensure fixed elements like modals are still usable */
    #mobile-menu, #support-modal, #policy-modal {
        position: fixed;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 1920px !important;
        max-width: 100% !important;
    }
    /* Reset transform for mobile menu when hidden/shown logic applies */
    #mobile-menu.translate-x-full {
        transform: translateX(50%) !important; /* Move out to right */
    }
}


/* 跑马灯动画 */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: inline-flex;
    animation: marquee 20s linear infinite;
}

/* 垂直滚动 (用于商品标题) */
@keyframes scroll-y {
    0%, 15% { transform: translateY(0); }
    85%, 100% { transform: translateY(calc(3rem - 100%)); } /* 3rem matches h-12 */
}

/* 仅在内容溢出容器高度时才会产生位移 (因为 min-h-full 使得短内容高度=容器高度, diff=0) */
.group:hover .animate-scroll-y {
    animation: scroll-y 3s linear alternate infinite;
}

/* 硬投影样式 - 核心灵魂 */
.neo-shadow {
    box-shadow: 6px 6px 0px 0px #000000;
    transition: all 0.2s ease;
}
.neo-shadow:hover {
    box-shadow: 2px 2px 0px 0px #000000;
    /* FIX: Use separate translate property to avoid clobbering transform (e.g. for centering) */
    translate: 4px 4px;
}

.neo-shadow-sm {
    box-shadow: 4px 4px 0px 0px #000000;
}

/* 油漆流动感形状 */
.paint-blob {
    border-radius: 64% 36% 27% 73% / 55% 58% 42% 45%;
}

/* 漫画网点背景 */
.dots-bg {
    background-image: radial-gradient(rgba(0, 0, 0, 0.1) 10%, transparent 10%);
    background-position: 0 0;
    background-size: 20px 20px;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #ffffff;
    border-left: 3px solid #000000;
}
::-webkit-scrollbar-thumb {
    background: #FFD700;
    border: 3px solid #000000;
}

/* 视觉调和滤镜 (Visual Harmony Filter) */
.harmony-filter {
    filter: sepia(0.1) saturate(1.1) contrast(1.05);
}

/* ============================================================
   FILM STRIP STYLES (胶卷样式) - NEO-BRUTALISM EDITION
   ============================================================ */

/* Horizontal Film Strip Container (Main Hero) */
.film-strip-h {
    position: relative;
    background-color: #000000 !important; /* Deep Ink Black */
    
    /* Spacing for holes + decorative lines */
    padding: 38px 0; 
    
    /* Structure: Yellow Divider Lines separating sprocket area from content */
    background-image: 
        /* Top Yellow Line */
        linear-gradient(to bottom, transparent 34px, #FFD700 34px, #FFD700 38px, transparent 38px),
        /* Bottom Yellow Line */
        linear-gradient(to top, transparent 34px, #FFD700 34px, #FFD700 38px, transparent 38px);
    
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
}

/* Horizontal Holes - Sharp White Rounded Rects */
.film-strip-h::before,
.film-strip-h::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 24px;
    /* Clean white sprocket holes */
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='24' viewBox='0 0 40 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='2' width='24' height='20' rx='4' fill='%23FFFFFF' /%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: left center;
    z-index: 30;
    opacity: 1; /* Solid, flat */
    pointer-events: none;
}
.film-strip-h::before { top: 6px; }
.film-strip-h::after { bottom: 6px; }


/* Vertical Film Strip Container (Thumbnails) */
.film-strip-v {
    position: relative;
    background-color: #000000 !important;
    
    /* Spacing */
    padding: 0 22px; 
    
    /* Vertical Yellow Lines */
    background-image: 
        /* Left Yellow Line */
        linear-gradient(to right, transparent 18px, #FFD700 18px, #FFD700 22px, transparent 22px),
        /* Right Yellow Line */
        linear-gradient(to left, transparent 18px, #FFD700 18px, #FFD700 22px, transparent 22px);

    border-left: 4px solid #000;
}

/* Vertical Holes */
.film-strip-v::before,
.film-strip-v::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 24px;
    /* Clean white sprocket holes (vertical) */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='40' viewBox='0 0 24 40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='8' width='20' height='24' rx='4' fill='%23FFFFFF' /%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: top center;
    z-index: 30;
    opacity: 1;
    pointer-events: none;
}
.film-strip-v::before { left: 2px; }
.film-strip-v::after { right: 2px; }

/* Hero nav buttons: stable positioning */
.hero-nav-btn {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-nav-btn:hover,
.hero-nav-btn:focus,
.hero-nav-btn:active {
    outline: none;
    /* DO NOT use translate here, it's handled by neo-shadow using the 'translate' property */
}


/* ============================================================
   HERO 视觉滤镜系统 (Visual Filter System) 2.0
   ============================================================ */

.hero-filter-container {
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.hero-filter-img {
    /* 统一交互时长至 1.2s，使用极顺滑的贝塞尔曲线 */
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: filter, transform;
}

/* --- 风格 A: 极硬黑白漫画 (Strong B&W Halftone) --- */
.style-halftone {
    background-color: #fff;
}
.style-halftone::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0,0,0,0.5) 15%, transparent 15%);
    background-size: 6px 6px;
    opacity: 1;
    pointer-events: none;
    z-index: 10;
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transform: scale(1);
}
.style-halftone .hero-filter-img {
    filter: grayscale(1) contrast(1.6) brightness(0.85);
}

/* 核心修复：使用容器的 hover 状态触发，并整合缩放逻辑 */
.hero-filter-container:hover.style-halftone::after { 
    opacity: 0; 
    transform: scale(1.5);
}
.hero-filter-container:hover .hero-filter-img { 
    filter: grayscale(0) contrast(1) brightness(1) saturate(1.3); 
    transform: scale(1.1); 
}

/* --- 风格 B: 精致赛璐璐 (High-End Cel-Shaded) --- */
.style-celluloid {
    background-color: #fff;
}
.style-celluloid .hero-filter-img {
    filter: contrast(1.25) brightness(1.1) saturate(0.7) sepia(0.05);
}
.style-celluloid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(255, 220, 180, 0.15) 0%, 
        rgba(255, 255, 255, 0) 50%, 
        rgba(180, 210, 255, 0.15) 100%
    );
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 10;
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.style-celluloid::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.5);
    z-index: 11;
    pointer-events: none;
    transition: opacity 1.2s;
    opacity: 1;
}
.hero-filter-container:hover.style-celluloid::after { opacity: 0; }
.hero-filter-container:hover.style-celluloid::before { opacity: 0; }
.hero-filter-container:hover .hero-filter-img { 
    filter: contrast(1) brightness(1) saturate(1.4) sepia(0); 
    transform: scale(1.1);
}

/* --- 风格 C: 波普黑黄 (Pop Art Duotone) --- */
.style-popart { background-color: #FFD700; }
.style-popart .hero-filter-img {
    filter: grayscale(1) contrast(1.8) brightness(0.7);
    mix-blend-mode: multiply;
}
.style-popart::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,215,0,0.2) 0%, transparent 100%);
    z-index: 10;
    pointer-events: none;
    transition: opacity 1.2s;
}
.hero-filter-container:hover .hero-filter-img {
    filter: grayscale(0) contrast(1) brightness(1);
    mix-blend-mode: normal;
    transform: scale(1.1);
}
.hero-filter-container:hover.style-popart::after { opacity: 0; }

/* 交互动画：分镜快门滑入 (Manga Shutter) */
@keyframes hero-shutter-in {
    0% { transform: scale(1.1); filter: blur(20px) opacity(0); }
    100% { transform: scale(1); filter: blur(0) opacity(1); }
}

.hero-animate-in {
    animation: hero-shutter-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}



/* ============================================================
   POLICY MODAL STYLES (送貨方式 / 隱私政策 弹窗)
   ============================================================ */
.policy-modal-body h4 {
    font-weight: 900;
    font-size: 18px;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 3px solid #FFD700;
    display: inline-block;
}
.policy-modal-body h4:first-child {
    margin-top: 0;
}
.policy-modal-body p {
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.8;
    font-size: 14px;
    color: #333;
}
.policy-modal-body ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}
.policy-modal-body ul li {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    padding: 0.25rem 0 0.25rem 1.2rem;
    position: relative;
}
.policy-modal-body ul li::before {
    content: '×';
    position: absolute;
    left: 0;
    font-weight: 900;
    color: #FFD700;
}
.policy-modal-body a {
    color: #FFD700;
    text-decoration: underline;
    font-weight: 700;
}
.policy-modal-body a:hover {
    color: #000;
}

/* 富文本内容样式 */
.prose img { 
    width: 100%; 
    height: auto; 
    border: 4px solid #000000; 
    margin: 2rem 0; 
    box-shadow: 8px 8px 0px 0px #000000; 
}
.prose h2 { font-weight: 900; font-size: 29px; margin-top: 2rem; border-bottom: 4px solid #FFD700; display: inline-block; padding-right: 1rem; }
.prose p { font-weight: 700; margin-bottom: 1.5rem; line-height: 1.8; }

/* Half-width images: base rule — works for both single and paired images */
.prose img[data-size="half"] {
    width: calc(50% - 0.5rem);
    display: inline-block;
    vertical-align: top;
    margin: 1rem 0;
}
/* Gap between two consecutive half-width images in the same container */
.prose img[data-size="half"] + img[data-size="half"] {
    margin-left: 1rem;
}

/* Half-width image pairs side by side (JS-created wrapper) */
.prose .prose-img-row {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
}
.prose .prose-img-row > p {
    flex: 1;
    margin: 0;
}
.prose .prose-img-row > p > img {
    width: 100%;
    height: auto;
    margin: 0;
}

/* Single half-width image floats left, text wraps right (JS-created) */
.prose .prose-img-half-float {
    float: left;
    width: calc(50% - 1rem);
    margin: 0 1.5rem 1rem 0;
}
.prose .prose-img-half-float img {
    width: 100%;
    margin: 0;
}

/* Clear floats at end of prose */
.prose::after {
    content: '';
    display: table;
    clear: both;
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
    .prose img[data-size="half"] {
        width: 100%;
        display: block;
        margin: 1rem 0;
    }
    .prose img[data-size="half"] + img[data-size="half"] {
        margin-left: 0;
    }
    .prose .prose-img-row {
        flex-direction: column;
    }
    .prose .prose-img-half-float {
        float: none;
        width: 100%;
        margin: 0 0 1.5rem 0;
    }
}

/* ============================================================
   MYSTERY EVENT TICKET (神秘票样) - REDESIGN
   ============================================================ */

/* Redaction tape effect */
.redacted-tape {
    background-color: #000;
    color: transparent !important;
    position: relative;
    display: inline-block;
    padding: 0 8px;
    user-select: none;
    overflow: hidden;
    vertical-align: middle;
}

.redacted-tape::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 215, 0, 0.2) 0px,
        rgba(255, 215, 0, 0.2) 4px,
        transparent 4px,
        transparent 8px
    );
    pointer-events: none;
}

/* Elegant blurred text for hidden info */
.text-blur {
    color: transparent !important;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    user-select: none;
}

/* Warning tape borders */
.warning-tape {
    background: repeating-linear-gradient(
        -45deg,
        #FFD700,
        #FFD700 12px,
        #000 12px,
        #000 24px
    );
}

/* Classified Stamp */
.classified-stamp {
    border: 3px solid #FF0000;
    color: #FF0000;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    padding: 4px 12px;
    transform: rotate(-10deg);
    display: inline-block;
    letter-spacing: 4px;
    box-shadow: 0 0 0 1px rgba(255,0,0,0.3);
    background: rgba(255, 255, 255, 0.9);
}

/* Premium dark background pattern for mystery cards */
.mystery-bg-pattern {
    background-color: #111;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Slow elegant pulse for the lock icon */
@keyframes secret-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

.secret-icon-pulse {
    animation: secret-pulse 3s ease-in-out infinite;
}