/* フォント定義 */
    .font-press-start {
        font-family: 'Press Start 2P', cursive;
    }

    .font-dot {
        font-family: 'DotGothic16', sans-serif;
    }

    .font-mono-tech {
        font-family: 'Share Tech Mono', monospace;
    }

    .font-sans-modern {
        font-family: 'Space Grotesk', sans-serif;
    }

    /* --------------------------------------------------
     * 奥行きのある3Dパースペクティブ・グリッド背景
     * -------------------------------------------------- */
    .grid-perspective-container {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
    }

    .grid-perspective-floor {
        position: absolute;
        width: 300%;
        height: 300%;
        top: -100%;
        left: -100%;
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
        background-size: 50px 50px;
        transform: perspective(350px) rotateX(68deg) translateY(0);
        transform-origin: 50% 50%;
        mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 80%);
        -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 80%);
        animation: gridScroll 1.8s linear infinite;
    }

    @keyframes gridScroll {
        0% {
            background-position: 0 0;
        }

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

    /* --------------------------------------------------
     * ブラウン管 (CRT) 電源ON / OFF モーション
     * -------------------------------------------------- */

    /* CRTスクリーンコンテナ（画面全体） */
    .crt-screen-wrapper {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-color: #050505;
        transition: filter 0.3s ease;
    }

    /* 画面湾曲効果（曲面ブラウン管風） */
    .crt-curved {
        transform: scale(0.99, 0.98);
        border-radius: 12px;
    }

    /* --- Keyframes: 電源オン (約1.4秒) --- */
    .crt-turn-on {
        animation: crtPowerOn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes crtPowerOn {
        0% {
            transform: scale(0.0001, 0.0001);
            filter: brightness(50) contrast(10) saturate(0);
            opacity: 0;
        }

        /* 15%: 細い水平光線として一瞬点滅 */
        15% {
            transform: scale(1, 0.002);
            filter: brightness(30) contrast(8) saturate(0);
            opacity: 1;
        }

        /* 35%: 縦方向に急激に拡大開始 & 輝度が高まる */
        40% {
            transform: scale(1, 0.05);
            filter: brightness(15) contrast(3);
            opacity: 1;
        }

        /* 70%: 全画面に拡大するが一瞬オーバーシュート＆強烈なフラッシュ */
        75% {
            transform: scale(1.02, 1.02);
            filter: brightness(2.8) contrast(1.4);
        }

        /* 100%: 正常な画面に着地 */
        100% {
            transform: scale(1, 1);
            filter: brightness(1) contrast(1);
            opacity: 1;
        }
    }

    /* --------------------------------------------------
     * 走査線・ノイズ・質感オーバーレイ
     * -------------------------------------------------- */

    /* 走査線 (Scanlines) */
    .scanline-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 30;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%,
                rgba(0, 0, 0, 0.3) 50%);
        background-size: 100% 4px;
        opacity: 0.6;
    }

    /* 画面の微かなチラつき (Flicker) */
    .crt-flicker {
        animation: flicker 0.15s infinite;
    }

    @keyframes flicker {
        0% {
            opacity: 0.97;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0.98;
        }
    }

    /* ガラス反射 ＆ 周辺減光 (Vignette) */
    .crt-vignette {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 31;
        background: radial-gradient(circle at 50% 50%,
                transparent 65%,
                rgba(0, 0, 0, 0.75) 100%),
            linear-gradient(135deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(255, 255, 255, 0.01) 30%,
                transparent 40%);
    }

    /* ネオン風テキストドロップシャドウ */
    .glow-yellow {
        text-shadow: 0 0 10px rgba(250, 204, 21, 0.8), 0 0 20px rgba(234, 179, 8, 0.5);
    }

    .glow-cyan {
        text-shadow: 0 0 10px rgba(34, 211, 238, 0.8), 0 0 20px rgba(6, 182, 212, 0.5);
    }

    @media screen and (max-width: 639px) {
        .text-lg {
            font-size: 4vw !important;
        }
    }