/* Global Settings */
body {
    font-family: 'Noto Sans TC', sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    
    /* Background: Black White Gray Irregular Cross/Intersect */
    background-color: #ffffff;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(0,0,0,0.08) 15px, rgba(0,0,0,0.08) 17px),
        repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,0,0,0.05) 20px, rgba(0,0,0,0.05) 25px),
        repeating-linear-gradient(60deg, transparent, transparent 35px, rgba(0,0,0,0.03) 35px, rgba(0,0,0,0.03) 36px),
        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.02) 2px, transparent 2.5px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 20px 20px;
    background-attachment: fixed; /* 讓背景固定，滾動時更有層次感 */
    
    color: #000;
}

/* Scrollbar Hidden */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- Neo-Brutalism / Pop Art Style System --- */

/* 1. 核心容器：極粗框 + 深硬陰影 */
.comic-box {
    background-color: #fff;
    border: 4px solid #000000;
    box-shadow: 6px 6px 0px 0px #000000;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s;
}

.comic-box:active {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0px 0px #000000 !important;
}

/* 2. 巨大按鈕 (Brutalist Button) */
.btn-brutal {
    border: 4px solid #000;
    box-shadow: 8px 8px 0px 0px #000;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-brutal:active {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px 0px #000;
}

/* 3. 無限跑馬燈 (Infinite Marquee) */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 10s linear infinite;
}

/* 4. 漫畫放射線背景 (Sunburst) */
.comic-sunburst {
    background-image: repeating-conic-gradient(
        #FCD34D 0deg 15deg,
        #F59E0B 15deg 30deg
    );
    opacity: 0.4;
}

/* 5. 視覺張力文字 (Impact Typography) */
.text-stroke-white {
    -webkit-text-stroke: 4px #fff;
    paint-order: stroke fill;
}
.text-stroke-white-2 {
    -webkit-text-stroke: 2px #fff;
    paint-order: stroke fill;
}
.text-stroke-black {
    -webkit-text-stroke: 1.5px #000;
}
.text-shadow-hard {
    text-shadow: 3px 3px 0 #000;
}

/* 6. 氣喘式震動 (Wheeze Animation) - 霸軒專屬 */
@keyframes wheeze {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-2px, 2px) rotate(-1deg); }
    50% { transform: translate(2px, -2px) rotate(1deg); }
    75% { transform: translate(-2px, -2px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
.animate-wheeze-constant {
    animation: wheeze 0.3s infinite linear;
}

/* Utilities */
.pb-safe {
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}
.pt-safe {
    padding-top: env(safe-area-inset-top);
}
.scroll-container {
    -webkit-overflow-scrolling: touch;
}

/* Tab Bar Animation */
.nav-item-active {
    background-color: #000;
    color: #FCD34D;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 #fff; /* 反白陰影 */
    transform: translateY(-12px) rotate(-3deg);
}
.nav-item-inactive {
    background-color: #fff;
    border: 3px solid #000;
}

/* Entrance Animation */
@keyframes popIn {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop-in {
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Hand Drawn Border Radius mix - 手繪不規則感 */
.rounded-hand {
    border-radius: 4px 16px 6px 12px;
}