:root {
            --gold: #d4af37;
            --bg-dark: #020617; 
            --white: #ffffff;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--gold);
            font-family: 'Sawarabi Mincho', serif;
            margin: 0; padding: 0;
            overflow: hidden; 
            height: 100dvh;
            touch-action: none; 
            user-select: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .fade-in {
            animation: fadeIn 2.5s ease-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .gate-button {
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            border: 1px solid rgba(212, 175, 55, 0.15);
        }

        .gate-button:active {
            background-color: rgba(212, 175, 55, 0.08);
            transform: scale(0.98);
            border-color: var(--gold);
        }

        /* モーダル表示のアニメーション */
        #about-modal {
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
            background-color: rgba(2, 6, 23, 0.98);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        #about-modal.hidden-el {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .modal-content-inner {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .modal-content-inner::-webkit-scrollbar {
            display: none;
        }

        /* PWA固有のバウンス防止 */
        html, body {
            overscroll-behavior: none;
        }