body {
            background-color: #050507;
            color: #e5e7eb;
            overflow-x: hidden;
        }

        /* Mobile Optimization: Safe area for notch & home bar */
        .safe-pt { padding-top: max(1rem, env(safe-area-inset-top)); }
        .safe-pb { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
        .safe-mb { margin-bottom: env(safe-area-inset-bottom); }

        /* Scanlines Overlay */
        .scanlines {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1));
            background-size: 100% 4px;
            pointer-events: none;
            z-index: 100;
            opacity: 0.6;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #090a0f; }
        ::-webkit-scrollbar-thumb { background: #ff5e00; }
        ::-webkit-scrollbar-thumb:hover { background: #ffcc00; }

        /* Tactical Clip Paths */
        .clip-card { clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); }
        .clip-button { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
        .clip-header { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 15px)); }

        /* Glitch Effect */
        .glitch-wrapper { position: relative; }
        .glitch::before, .glitch::after {
            content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8;
        }
        .glitch::before {
            left: 2px; text-shadow: -1px 0 red; clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim 2s infinite linear alternate-reverse;
        }
        .glitch::after {
            left: -2px; text-shadow: -1px 0 blue; clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim 2s infinite linear alternate-reverse; animation-delay: -1s;
        }
        @keyframes glitch-anim {
            0% { clip: rect(10px, 9999px, 83px, 0); }
            20% { clip: rect(61px, 9999px, 11px, 0); }
            40% { clip: rect(98px, 9999px, 56px, 0); }
            60% { clip: rect(20px, 9999px, 77px, 0); }
            80% { clip: rect(55px, 9999px, 15px, 0); }
            100% { clip: rect(31px, 9999px, 98px, 0); }
        }

        /* Glow effects */
        .neon-border {
            border: 1px solid rgba(255, 94, 0, 0.3);
            box-shadow: 0 0 10px rgba(255, 94, 0, 0.1), inset 0 0 10px rgba(255, 94, 0, 0.05);
            transition: all 0.3s ease;
        }
        .neon-border:hover {
            border-color: #ff5e00; box-shadow: 0 0 20px rgba(255, 94, 0, 0.4), inset 0 0 15px rgba(255, 94, 0, 0.2);
        }

        .tab-btn { position: relative; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; }
        .tab-btn.active { color: #ff5e00; text-shadow: 0 0 8px rgba(255, 94, 0, 0.6); }
        .tab-btn.active::after {
            content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: #ff5e00; box-shadow: 0 0 10px #ff5e00;
        }

        .fade-in-up { animation: fadeInUp 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

        .tactical-img { filter: grayscale(40%) contrast(120%) brightness(0.8); transition: filter 0.4s ease; }
        .neon-border:hover .tactical-img { filter: grayscale(0%) contrast(110%) brightness(1); }
        
        /* 玩家無 Modal 的樣式輔助：自介卷軸 */
        .bio-text-scroll { max-height: 80px; overflow-y: auto; padding-right: 4px; }
        .bio-text-scroll::-webkit-scrollbar { width: 3px; }
        .bio-text-scroll::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px;}