無題

Pasted Oct 3, 2026, 4:11 AM1 file693 lines

Scan to open on your phone

Point a camera at the QR code - it opens this exact paste, no app needed.

https://codepastes.com/zzgt538f3nq3dar9
無題
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>グローアップ5 - LIGHTWEIGHT REALISTIC HORROR</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Creepster&display=swap" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }

        body {
            background-color: #030305;
            color: #10b981;
            font-family: 'Share Tech Mono', monospace;
            height: 100vh;
            height: 100dvh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }

        .font-creepster {
            font-family: 'Creepster', cursive;
        }

        /* CRT Overlay Filter */
        .crt-overlay {
            background: linear-gradient(
                rgba(18, 16, 16, 0) 50%, 
                rgba(0, 0, 0, 0.25) 50%
            );
            background-size: 100% 4px;
            pointer-events: none;
        }

        @keyframes pulse-red {
            0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
            50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.7); }
        }

        .glow-red {
            animation: pulse-red 2s infinite;
        }

        .bg-noise {
            background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0);
            background-size: 8px 8px;
        }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: #09090b; }
        ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 2px; }
    </style>
</head>
<body class="bg-black text-gray-200">

    <div id="game-app" class="relative w-full h-full max-w-5xl max-h-[750px] bg-zinc-950 border border-zinc-800 shadow-2xl flex flex-col overflow-hidden rounded-lg">

        <!-- CRT Overlay -->
        <div class="crt-overlay absolute inset-0 z-40"></div>

        <!-- ========================================== -->
        <!-- MENU SCREEN                                -->
        <!-- ========================================== -->
        <div id="screen-menu" class="absolute inset-0 z-50 bg-zinc-950 flex flex-col justify-between p-6 bg-noise">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="font-creepster text-5xl md:text-7xl text-red-600 tracking-wider drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]">
                        GLOW UP 5
                    </h1>
                    <p class="text-xs text-red-500/80 tracking-widest mt-1">LIGHTWEIGHT DOLL AUTOMATON EDITION</p>
                </div>
                <div class="text-right text-xs text-zinc-500 font-mono">
                    <div>SECURITY VER: 6.5.1-LITE</div>
                    <div>STATUS: OPTIMIZED</div>
                </div>
            </div>

            <div class="flex flex-col md:flex-row items-center justify-around my-2 gap-6">
                <div class="relative w-60 h-60 border-2 border-amber-900/60 rounded-xl bg-black overflow-hidden shadow-[0_0_25px_rgba(180,83,9,0.4)] flex flex-col items-center justify-center">
                    <canvas id="cvs-menu-preview" class="w-full h-full"></canvas>
                    <div id="menu-monster-label" class="absolute bottom-2 left-0 right-0 text-center text-[10px] text-amber-400 bg-black/80 py-1 font-mono tracking-wider">
                        SUBJECT 01: GLOW (AUTOMATON DOLL)
                    </div>
                </div>

                <!-- Night Selection & Options -->
                <div class="flex flex-col gap-3 w-full max-w-xs">
                    <div class="bg-zinc-900/90 border border-zinc-800 p-3 rounded-lg text-xs space-y-2">
                        <div class="flex justify-between items-center text-zinc-300">
                            <span>選択ナイト:</span>
                            <select id="select-night" class="bg-black text-amber-400 border border-zinc-700 rounded px-2 py-1 font-bold outline-none focus:border-amber-500">
                                <option value="1">Night 1 (グロー 人形 出現)</option>
                                <option value="2">Night 2 (+ テーピィ人形)</option>
                                <option value="3">Night 3 (+ シャープ人形)</option>
                                <option value="4">Night 4 (+ クレヨン人形)</option>
                                <option value="5">Night 5 (全5体の人形・狂乱)</option>
                                <option value="custom">CUSTOM NIGHT (AI難易度)</option>
                            </select>
                        </div>
                        <p id="night-desc" class="text-[11px] text-zinc-400 leading-tight">
                            不気味な関節人形「GLOW」たちの接近を防ぎ朝を迎えろ。
                        </p>
                    </div>

                    <button id="btn-start" class="w-full py-4 bg-red-800 hover:bg-red-700 active:bg-red-900 text-white font-bold text-lg rounded-lg border border-red-600 transition shadow-lg glow-red tracking-wider">
                        シフト開始 (START)
                    </button>

                    <div class="flex gap-2">
                        <button id="btn-custom-night-modal" class="flex-1 py-2 bg-zinc-800 hover:bg-zinc-700 text-xs rounded border border-zinc-700">
                            ⚙ AI難易度設定
                        </button>
                        <button id="btn-how-to" class="flex-1 py-2 bg-zinc-800 hover:bg-zinc-700 text-xs rounded border border-zinc-700">
                            📖 人形の対処法
                        </button>
                    </div>
                </div>
            </div>

            <div class="flex justify-between items-center text-[11px] text-zinc-600 border-t border-zinc-900 pt-3">
                <span>⚠️ 軽量高精細モード稼働中</span>
                <span>GLOW NIGHTS STUDIO © 2026</span>
            </div>
        </div>

        <!-- ========================================== -->
        <!-- CUSTOM NIGHT MODAL                         -->
        <!-- ========================================== -->
        <div id="modal-custom" class="hidden absolute inset-0 z-55 bg-black/90 backdrop-blur-md flex flex-col items-center justify-center p-6">
            <div class="bg-zinc-900 border border-zinc-700 p-5 rounded-xl w-full max-w-md space-y-4">
                <h2 class="text-lg font-bold text-amber-400 border-b border-zinc-800 pb-2 flex justify-between items-center">
                    <span>⚙️ 5体人形のAI難易度 (0 - 20)</span>
                    <button id="btn-close-custom" class="text-zinc-500 hover:text-white">✖</button>
                </h2>

                <div class="space-y-2.5 text-xs">
                    <div class="space-y-0.5">
                        <div class="flex justify-between text-red-400 font-bold">
                            <span>🎩 GLOW 人形 (左廊下):</span>
                            <span id="val-ai-glow">10</span>
                        </div>
                        <input id="slider-ai-glow" type="range" min="0" max="20" value="10" class="w-full accent-red-600">
                    </div>

                    <div class="space-y-0.5">
                        <div class="flex justify-between text-emerald-400 font-bold">
                            <span>巻 TAPEY 人形 (右廊下):</span>
                            <span id="val-ai-tapey">8</span>
                        </div>
                        <input id="slider-ai-tapey" type="range" min="0" max="20" value="8" class="w-full accent-emerald-600">
                    </div>

                    <div class="space-y-0.5">
                        <div class="flex justify-between text-cyan-400 font-bold">
                            <span>📦 SHARPIE 人形 (ダクト):</span>
                            <span id="val-ai-sharpie">5</span>
                        </div>
                        <input id="slider-ai-sharpie" type="range" min="0" max="20" value="5" class="w-full accent-cyan-600">
                    </div>

                    <div class="space-y-0.5">
                        <div class="flex justify-between text-amber-400 font-bold">
                            <span>🖍️ CRAYON 人形 (CAM 3):</span>
                            <span id="val-ai-crayon">5</span>
                        </div>
                        <input id="slider-ai-crayon" type="range" min="0" max="20" value="5" class="w-full accent-amber-500">
                    </div>

                    <div class="space-y-0.5">
                        <div class="flex justify-between text-purple-400 font-bold">
                            <span>🧪 GLUEY 人形 (警備室):</span>
                            <span id="val-ai-gluey">5</span>
                        </div>
                        <input id="slider-ai-gluey" type="range" min="0" max="20" value="5" class="w-full accent-purple-600">
                    </div>
                </div>

                <div class="flex gap-3 pt-2">
                    <button id="btn-preset-20" class="flex-1 py-2 bg-red-950 text-red-400 border border-red-800 rounded hover:bg-red-900 font-bold text-xs">
                        ALL 20 (地獄モード)
                    </button>
                    <button id="btn-apply-custom" class="flex-1 py-2 bg-emerald-700 text-white rounded font-bold hover:bg-emerald-600 text-xs">
                        決定 & 開始
                    </button>
                </div>
            </div>
        </div>

        <!-- ========================================== -->
        <!-- HOW TO PLAY MODAL                          -->
        <!-- ========================================== -->
        <div id="modal-howto" class="hidden absolute inset-0 z-55 bg-black/90 backdrop-blur-md flex flex-col items-center justify-center p-6">
            <div class="bg-zinc-900 border border-zinc-700 p-6 rounded-xl w-full max-w-lg space-y-3 text-xs">
                <h2 class="text-xl font-bold text-emerald-400 border-b border-zinc-800 pb-2 flex justify-between items-center">
                    <span>📖 人形5体の完全攻略法</span>
                    <button id="btn-close-howto" class="text-zinc-500 hover:text-white">✖</button>
                </h2>
                <div class="space-y-3 text-zinc-300 leading-relaxed max-h-[60vh] overflow-y-auto pr-2">
                    <div class="bg-red-950/40 border border-red-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-red-400 text-sm mb-1">🎩 1. グロー人形 (GLOW) - 左廊下</div>
                        <p class="text-[11px]">シルクハットとCCTVカメラ目を備えた自動機械人形。左ドアを閉めて防げ。</p>
                    </div>
                    <div class="bg-emerald-950/40 border border-emerald-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-emerald-400 text-sm mb-1">巻 2. テーピィ人形 (TAPEY) - 右廊下</div>
                        <p class="text-[11px]">ガムテープが巻き付いた不気味なアンティークドール。右ドアを閉めて防げ。</p>
                    </div>
                    <div class="bg-cyan-950/40 border border-cyan-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-cyan-400 text-sm mb-1">📦 3. シャープ人形 (SHARPIE) - 換気ダクト</div>
                        <p class="text-[11px]">鋭利なペン先を持つマリオネット人形。監視カメラの「ダクト再起動」で追い払え。</p>
                    </div>
                    <div class="bg-amber-950/40 border border-amber-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-amber-400 text-sm mb-1">🖍 4. クレヨン人形 (CRAYON) - CAM 3</div>
                        <p class="text-[11px]">落書きされたピエロ人形。オルゴールのゼンマイを巻いてなだめろ。</p>
                    </div>
                    <div class="bg-purple-950/40 border border-purple-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-purple-400 text-sm mb-1">🧪 5. グルーイ人形 (GLUEY) - 警備室侵入</div>
                        <p class="text-[11px]">ワックスが溶け落ちた蝋人形。警備室に現れたらライトやカメラ操作で消滅させろ。</p>
                    </div>
                </div>
                <button id="btn-ok-howto" class="w-full py-2.5 bg-zinc-800 hover:bg-zinc-700 text-white font-bold rounded-lg border border-zinc-600 transition">
                    了解した
                </button>
            </div>
        </div>

        <!-- HUD TOP BAR -->
        <div class="relative z-50 bg-zinc-900/90 border-b border-zinc-800 px-4 py-2 flex justify-between items-center text-xs">
            <!-- Power Usage -->
            <div class="flex items-center gap-3">
                <div>
                    <span class="text-zinc-500">POWER: </span>
                    <span id="txt-power" class="text-emerald-400 font-bold text-sm">100%</span>
                </div>
                <div class="flex items-center gap-1">
                    <span class="text-[10px] text-zinc-500">USAGE:</span>
                    <div id="power-usage-bars" class="flex gap-0.5">
                        <div class="w-2 h-3 bg-emerald-500 rounded-sm"></div>
                        <div class="w-2 h-3 bg-zinc-800 rounded-sm"></div>
                        <div class="w-2 h-3 bg-zinc-800 rounded-sm"></div>
                        <div class="w-2 h-3 bg-zinc-800 rounded-sm"></div>
                    </div>
                </div>
            </div>

            <!-- Music Box HUD Indicator -->
            <div id="hud-musicbox-container" class="flex items-center gap-2 bg-black/80 px-3 py-1 rounded border border-amber-900/80 shadow-md">
                <span class="text-[11px] text-amber-400 font-bold flex items-center gap-1">
                    <span id="hud-mb-icon" class="text-xs">🎵</span> BOX:
                </span>
                <div class="w-20 sm:w-28 h-3.5 bg-zinc-800 rounded overflow-hidden border border-zinc-700 relative">
                    <div id="hud-musicbox-bar" class="h-full bg-amber-500 w-full transition-all duration-150"></div>
                    <span id="hud-musicbox-text" class="absolute inset-0 text-[9px] font-bold text-center text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.9)] leading-3 flex items-center justify-center">100%</span>
                </div>
                <span id="hud-mb-warning" class="hidden text-[10px] text-red-500 font-bold animate-ping">⚠️ 切迫!</span>
            </div>

            <!-- Time & Night -->
            <div class="flex items-center gap-4">
                <div>
                    <span class="text-xs text-zinc-500">NIGHT </span>
                    <span id="txt-night" class="text-white font-bold">1</span>
                </div>
                <div class="bg-black/60 px-3 py-1 rounded border border-zinc-800">
                    <span id="txt-time" class="text-amber-400 font-bold text-base tracking-widest">12 AM</span>
                </div>
            </div>
        </div>

        <!-- MAIN OFFICE VIEW -->
        <div id="office-viewport" class="relative flex-1 bg-black overflow-hidden flex flex-col justify-between p-2">
            
            <canvas id="cvs-office" class="absolute inset-0 w-full h-full object-cover"></canvas>

            <!-- Office Door & Camera Buttons -->
            <div class="relative z-20 flex justify-between items-stretch h-full pointer-events-none p-2 sm:p-4">
                
                <!-- Left Door Control -->
                <div class="flex flex-col justify-end gap-2 pointer-events-auto bg-zinc-950/80 p-2 rounded-xl border border-zinc-800 backdrop-blur-sm self-center">
                    <div class="text-[10px] text-zinc-400 text-center font-bold">LEFT DOOR</div>
                    <button id="btn-ldoor" class="w-16 h-12 sm:w-20 sm:h-14 bg-red-950/80 hover:bg-red-900 text-red-400 border border-red-800 rounded-lg font-bold text-xs flex flex-col items-center justify-center transition active:scale-95">
                        <span>ドア</span>
                        <span id="lbl-ldoor" class="text-[10px] text-zinc-400">開</span>
                    </button>
                    <button id="btn-llight" class="w-16 h-12 sm:w-20 sm:h-14 bg-amber-950/80 hover:bg-amber-900 text-amber-400 border border-amber-800 rounded-lg font-bold text-xs flex flex-col items-center justify-center transition active:scale-95">
                        <span>ライト</span>
                        <span id="lbl-llight" class="text-[10px] text-zinc-400">OFF</span>
                    </button>
                </div>

                <!-- Center Security Monitor Button -->
                <div class="self-end pointer-events-auto pb-1">
                    <button id="btn-toggle-cam" class="px-6 py-3 bg-emerald-950/90 hover:bg-emerald-900 text-emerald-400 border border-emerald-700 rounded-xl font-bold text-sm shadow-lg flex items-center gap-2 transition hover:scale-105 active:scale-95">
                        <span>監視カメラ</span>
                        <span class="text-lg">📱</span>
                    </button>
                </div>

                <!-- Right Door Control -->
                <div class="flex flex-col justify-end gap-2 pointer-events-auto bg-zinc-950/80 p-2 rounded-xl border border-zinc-800 backdrop-blur-sm self-center">
                    <div class="text-[10px] text-zinc-400 text-center font-bold">RIGHT DOOR</div>
                    <button id="btn-rdoor" class="w-16 h-12 sm:w-20 sm:h-14 bg-red-950/80 hover:bg-red-900 text-red-400 border border-red-800 rounded-lg font-bold text-xs flex flex-col items-center justify-center transition active:scale-95">
                        <span>ドア</span>
                        <span id="lbl-rdoor" class="text-[10px] text-zinc-400">開</span>
                    </button>
                    <button id="btn-rlight" class="w-16 h-12 sm:w-20 sm:h-14 bg-amber-950/80 hover:bg-amber-900 text-amber-400 border border-amber-800 rounded-lg font-bold text-xs flex flex-col items-center justify-center transition active:scale-95">
                        <span>ライト</span>
                        <span id="lbl-rlight" class="text-[10px] text-zinc-400">OFF</span>
                    </button>
                </div>

            </div>
        </div>

        <!-- ========================================== -->
        <!-- SECURITY MONITOR OVERLAY                   -->
        <!-- ========================================== -->
        <div id="monitor-overlay" class="hidden absolute inset-0 z-40 bg-zinc-950 flex flex-col p-3 border-4 border-zinc-800">
            
            <div class="flex justify-between items-center bg-zinc-900 px-3 py-2 border border-zinc-700 rounded-t-lg">
                <div class="flex items-center gap-2">
                    <span class="w-2.5 h-2.5 bg-red-600 rounded-full animate-ping"></span>
                    <span id="txt-cam-title" class="font-bold text-red-500 text-xs sm:text-sm font-mono">CAM 1A : 工作部屋 (STAGE)</span>
                </div>
                <div class="flex items-center gap-2 sm:gap-3">
                    <button id="btn-wind-box" class="px-3 py-1.5 bg-amber-950 hover:bg-amber-900 text-amber-300 border border-amber-600 text-xs rounded font-bold flex items-center gap-1 active:scale-95 transition select-none cursor-pointer">
                        <span>🎵 ゼンマイを巻く</span>
                    </button>

                    <button id="btn-audio-lure" class="px-3 py-1 bg-amber-950/70 hover:bg-amber-900 text-amber-400 border border-amber-800 text-xs rounded font-bold flex items-center gap-1 active:scale-95 transition">
                        <span>🔊 おとりボイス</span>
                    </button>
                    <button id="btn-vent-reboot" class="px-3 py-1 bg-cyan-950 hover:bg-cyan-900 text-cyan-400 border border-cyan-700 text-xs rounded font-bold flex items-center gap-1 active:scale-95 transition">
                        ```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>グローアップ5 - LIGHTWEIGHT REALISTIC HORROR</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Creepster&display=swap" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }

        body {
            background-color: #030305;
            color: #10b981;
            font-family: 'Share Tech Mono', monospace;
            height: 100vh;
            height: 100dvh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }

        .font-creepster {
            font-family: 'Creepster', cursive;
        }

        /* CRT Overlay Filter */
        .crt-overlay {
            background: linear-gradient(
                rgba(18, 16, 16, 0) 50%, 
                rgba(0, 0, 0, 0.25) 50%
            );
            background-size: 100% 4px;
            pointer-events: none;
        }

        @keyframes pulse-red {
            0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
            50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.7); }
        }

        .glow-red {
            animation: pulse-red 2s infinite;
        }

        .bg-noise {
            background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0);
            background-size: 8px 8px;
        }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: #09090b; }
        ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 2px; }
    </style>
</head>
<body class="bg-black text-gray-200">

    <div id="game-app" class="relative w-full h-full max-w-5xl max-h-[750px] bg-zinc-950 border border-zinc-800 shadow-2xl flex flex-col overflow-hidden rounded-lg">

        <!-- CRT Overlay -->
        <div class="crt-overlay absolute inset-0 z-40"></div>

        <!-- ========================================== -->
        <!-- MENU SCREEN                                -->
        <!-- ========================================== -->
        <div id="screen-menu" class="absolute inset-0 z-50 bg-zinc-950 flex flex-col justify-between p-6 bg-noise">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="font-creepster text-5xl md:text-7xl text-red-600 tracking-wider drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]">
                        GLOW UP 5
                    </h1>
                    <p class="text-xs text-red-500/80 tracking-widest mt-1">LIGHTWEIGHT DOLL AUTOMATON EDITION</p>
                </div>
                <div class="text-right text-xs text-zinc-500 font-mono">
                    <div>SECURITY VER: 6.5.1-LITE</div>
                    <div>STATUS: OPTIMIZED</div>
                </div>
            </div>

            <div class="flex flex-col md:flex-row items-center justify-around my-2 gap-6">
                <div class="relative w-60 h-60 border-2 border-amber-900/60 rounded-xl bg-black overflow-hidden shadow-[0_0_25px_rgba(180,83,9,0.4)] flex flex-col items-center justify-center">
                    <canvas id="cvs-menu-preview" class="w-full h-full"></canvas>
                    <div id="menu-monster-label" class="absolute bottom-2 left-0 right-0 text-center text-[10px] text-amber-400 bg-black/80 py-1 font-mono tracking-wider">
                        SUBJECT 01: GLOW (AUTOMATON DOLL)
                    </div>
                </div>

                <!-- Night Selection & Options -->
                <div class="flex flex-col gap-3 w-full max-w-xs">
                    <div class="bg-zinc-900/90 border border-zinc-800 p-3 rounded-lg text-xs space-y-2">
                        <div class="flex justify-between items-center text-zinc-300">
                            <span>選択ナイト:</span>
                            <select id="select-night" class="bg-black text-amber-400 border border-zinc-700 rounded px-2 py-1 font-bold outline-none focus:border-amber-500">
                                <option value="1">Night 1 (グロー 人形 出現)</option>
                                <option value="2">Night 2 (+ テーピィ人形)</option>
                                <option value="3">Night 3 (+ シャープ人形)</option>
                                <option value="4">Night 4 (+ クレヨン人形)</option>
                                <option value="5">Night 5 (全5体の人形・狂乱)</option>
                                <option value="custom">CUSTOM NIGHT (AI難易度)</option>
                            </select>
                        </div>
                        <p id="night-desc" class="text-[11px] text-zinc-400 leading-tight">
                            不気味な関節人形「GLOW」たちの接近を防ぎ朝を迎えろ。
                        </p>
                    </div>

                    <button id="btn-start" class="w-full py-4 bg-red-800 hover:bg-red-700 active:bg-red-900 text-white font-bold text-lg rounded-lg border border-red-600 transition shadow-lg glow-red tracking-wider">
                        シフト開始 (START)
                    </button>

                    <div class="flex gap-2">
                        <button id="btn-custom-night-modal" class="flex-1 py-2 bg-zinc-800 hover:bg-zinc-700 text-xs rounded border border-zinc-700">
                            ⚙ AI難易度設定
                        </button>
                        <button id="btn-how-to" class="flex-1 py-2 bg-zinc-800 hover:bg-zinc-700 text-xs rounded border border-zinc-700">
                            📖 人形の対処法
                        </button>
                    </div>
                </div>
            </div>

            <div class="flex justify-between items-center text-[11px] text-zinc-600 border-t border-zinc-900 pt-3">
                <span>⚠️ 軽量高精細モード稼働中</span>
                <span>GLOW NIGHTS STUDIO © 2026</span>
            </div>
        </div>

        <!-- ========================================== -->
        <!-- CUSTOM NIGHT MODAL                         -->
        <!-- ========================================== -->
        <div id="modal-custom" class="hidden absolute inset-0 z-55 bg-black/90 backdrop-blur-md flex flex-col items-center justify-center p-6">
            <div class="bg-zinc-900 border border-zinc-700 p-5 rounded-xl w-full max-w-md space-y-4">
                <h2 class="text-lg font-bold text-amber-400 border-b border-zinc-800 pb-2 flex justify-between items-center">
                    <span>⚙️ 5体人形のAI難易度 (0 - 20)</span>
                    <button id="btn-close-custom" class="text-zinc-500 hover:text-white">✖</button>
                </h2>

                <div class="space-y-2.5 text-xs">
                    <div class="space-y-0.5">
                        <div class="flex justify-between text-red-400 font-bold">
                            <span>🎩 GLOW 人形 (左廊下):</span>
                            <span id="val-ai-glow">10</span>
                        </div>
                        <input id="slider-ai-glow" type="range" min="0" max="20" value="10" class="w-full accent-red-600">
                    </div>

                    <div class="space-y-0.5">
                        <div class="flex justify-between text-emerald-400 font-bold">
                            <span>巻 TAPEY 人形 (右廊下):</span>
                            <span id="val-ai-tapey">8</span>
                        </div>
                        <input id="slider-ai-tapey" type="range" min="0" max="20" value="8" class="w-full accent-emerald-600">
                    </div>

                    <div class="space-y-0.5">
                        <div class="flex justify-between text-cyan-400 font-bold">
                            <span>📦 SHARPIE 人形 (ダクト):</span>
                            <span id="val-ai-sharpie">5</span>
                        </div>
                        <input id="slider-ai-sharpie" type="range" min="0" max="20" value="5" class="w-full accent-cyan-600">
                    </div>

                    <div class="space-y-0.5">
                        <div class="flex justify-between text-amber-400 font-bold">
                            <span>🖍️ CRAYON 人形 (CAM 3):</span>
                            <span id="val-ai-crayon">5</span>
                        </div>
                        <input id="slider-ai-crayon" type="range" min="0" max="20" value="5" class="w-full accent-amber-500">
                    </div>

                    <div class="space-y-0.5">
                        <div class="flex justify-between text-purple-400 font-bold">
                            <span>🧪 GLUEY 人形 (警備室):</span>
                            <span id="val-ai-gluey">5</span>
                        </div>
                        <input id="slider-ai-gluey" type="range" min="0" max="20" value="5" class="w-full accent-purple-600">
                    </div>
                </div>

                <div class="flex gap-3 pt-2">
                    <button id="btn-preset-20" class="flex-1 py-2 bg-red-950 text-red-400 border border-red-800 rounded hover:bg-red-900 font-bold text-xs">
                        ALL 20 (地獄モード)
                    </button>
                    <button id="btn-apply-custom" class="flex-1 py-2 bg-emerald-700 text-white rounded font-bold hover:bg-emerald-600 text-xs">
                        決定 & 開始
                    </button>
                </div>
            </div>
        </div>

        <!-- ========================================== -->
        <!-- HOW TO PLAY MODAL                          -->
        <!-- ========================================== -->
        <div id="modal-howto" class="hidden absolute inset-0 z-55 bg-black/90 backdrop-blur-md flex flex-col items-center justify-center p-6">
            <div class="bg-zinc-900 border border-zinc-700 p-6 rounded-xl w-full max-w-lg space-y-3 text-xs">
                <h2 class="text-xl font-bold text-emerald-400 border-b border-zinc-800 pb-2 flex justify-between items-center">
                    <span>📖 人形5体の完全攻略法</span>
                    <button id="btn-close-howto" class="text-zinc-500 hover:text-white">✖</button>
                </h2>
                <div class="space-y-3 text-zinc-300 leading-relaxed max-h-[60vh] overflow-y-auto pr-2">
                    <div class="bg-red-950/40 border border-red-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-red-400 text-sm mb-1">🎩 1. グロー人形 (GLOW) - 左廊下</div>
                        <p class="text-[11px]">シルクハットとCCTVカメラ目を備えた自動機械人形。左ドアを閉めて防げ。</p>
                    </div>
                    <div class="bg-emerald-950/40 border border-emerald-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-emerald-400 text-sm mb-1">巻 2. テーピィ人形 (TAPEY) - 右廊下</div>
                        <p class="text-[11px]">ガムテープが巻き付いた不気味なアンティークドール。右ドアを閉めて防げ。</p>
                    </div>
                    <div class="bg-cyan-950/40 border border-cyan-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-cyan-400 text-sm mb-1">📦 3. シャープ人形 (SHARPIE) - 換気ダクト</div>
                        <p class="text-[11px]">鋭利なペン先を持つマリオネット人形。監視カメラの「ダクト再起動」で追い払え。</p>
                    </div>
                    <div class="bg-amber-950/40 border border-amber-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-amber-400 text-sm mb-1">🖍 4. クレヨン人形 (CRAYON) - CAM 3</div>
                        <p class="text-[11px]">落書きされたピエロ人形。オルゴールのゼンマイを巻いてなだめろ。</p>
                    </div>
                    <div class="bg-purple-950/40 border border-purple-800/60 p-2.5 rounded-lg">
                        <div class="font-bold text-purple-400 text-sm mb-1">🧪 5. グルーイ人形 (GLUEY) - 警備室侵入</div>
                        <p class="text-[11px]">ワックスが溶け落ちた蝋人形。警備室に現れたらライトやカメラ操作で消滅させろ。</p>
                    </div>
                </div>
                <button id="btn-ok-howto" class="w-full py-2.5 bg-zinc-800 hover:bg-zinc-700 text-white font-bold rounded-lg border border-zinc-600 transition">
                    了解した
                </button>
            </div>
        </div>

        <!-- HUD TOP BAR -->
        <div class="relative z-50 bg-zinc-900/90 border-b border-zinc-800 px-4 py-2 flex justify-between items-center text-xs">
            <!-- Power Usage -->
            <div class="flex items-center gap-3">
                <div>
                    <span class="text-zinc-500">POWER: </span>
                    <span id="txt-power" class="text-emerald-400 font-bold text-sm">100%</span>
                </div>
                <div class="flex items-center gap-1">
                    <span class="text-[10px] text-zinc-500">USAGE:</span>
                    <div id="power-usage-bars" class="flex gap-0.5">
                        <div class="w-2 h-3 bg-emerald-500 rounded-sm"></div>
                        <div class="w-2 h-3 bg-zinc-800 rounded-sm"></div>
                        <div class="w-2 h-3 bg-zinc-800 rounded-sm"></div>
                        <div class="w-2 h-3 bg-zinc-800 rounded-sm"></div>
                    </div>
                </div>
            </div>

            <!-- Music Box HUD Indicator -->
            <div id="hud-musicbox-container" class="flex items-center gap-2 bg-black/80 px-3 py-1 rounded border border-amber-900/80 shadow-md">
                <span class="text-[11px] text-amber-400 font-bold flex items-center gap-1">
                    <span id="hud-mb-icon" class="text-xs">🎵</span> BOX:
                </span>
                <div class="w-20 sm:w-28 h-3.5 bg-zinc-800 rounded overflow-hidden border border-zinc-700 relative">
                    <div id="hud-musicbox-bar" class="h-full bg-amber-500 w-full transition-all duration-150"></div>
                    <span id="hud-musicbox-text" class="absolute inset-0 text-[9px] font-bold text-center text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.9)] leading-3 flex items-center justify-center">100%</span>
                </div>
                <span id="hud-mb-warning" class="hidden text-[10px] text-red-500 font-bold animate-ping">⚠️ 切迫!</span>
            </div>

            <!-- Time & Night -->
            <div class="flex items-center gap-4">
                <div>
                    <span class="text-xs text-zinc-500">NIGHT </span>
                    <span id="txt-night" class="text-white font-bold">1</span>
                </div>
                <div class="bg-black/60 px-3 py-1 rounded border border-zinc-800">
                    <span id="txt-time" class="text-amber-400 font-bold text-base tracking-widest">12 AM</span>
                </div>
            </div>
        </div>

        <!-- MAIN OFFICE VIEW -->
        <div id="office-viewport" class="relative flex-1 bg-black overflow-hidden flex flex-col justify-between p-2">
            
            <canvas id="cvs-office" class="absolute inset-0 w-full h-full object-cover"></canvas>

            <!-- Office Door & Camera Buttons -->
            <div class="relative z-20 flex justify-between items-stretch h-full pointer-events-none p-2 sm:p-4">
                
                <!-- Left Door Control -->
                <div class="flex flex-col justify-end gap-2 pointer-events-auto bg-zinc-950/80 p-2 rounded-xl border border-zinc-800 backdrop-blur-sm self-center">
                    <div class="text-[10px] text-zinc-400 text-center font-bold">LEFT DOOR</div>
                    <button id="btn-ldoor" class="w-16 h-12 sm:w-20 sm:h-14 bg-red-950/80 hover:bg-red-900 text-red-400 border border-red-800 rounded-lg font-bold text-xs flex flex-col items-center justify-center transition active:scale-95">
                        <span>ドア</span>
                        <span id="lbl-ldoor" class="text-[10px] text-zinc-400">開</span>
                    </button>
                    <button id="btn-llight" class="w-16 h-12 sm:w-20 sm:h-14 bg-amber-950/80 hover:bg-amber-900 text-amber-400 border border-amber-800 rounded-lg font-bold text-xs flex flex-col items-center justify-center transition active:scale-95">
                        <span>ライト</span>
                        <span id="lbl-llight" class="text-[10px] text-zinc-400">OFF</span>
                    </button>
                </div>

                <!-- Center Security Monitor Button -->
                <div class="self-end pointer-events-auto pb-1">
                    <button id="btn-toggle-cam" class="px-6 py-3 bg-emerald-950/90 hover:bg-emerald-900 text-emerald-400 border border-emerald-700 rounded-xl font-bold text-sm shadow-lg flex items-center gap-2 transition hover:scale-105 active:scale-95">
                        <span>監視カメラ</span>
                        <span class="text-lg">📱</span>
                    </button>
                </div>

                <!-- Right Door Control -->
                <div class="flex flex-col justify-end gap-2 pointer-events-auto bg-zinc-950/80 p-2 rounded-xl border border-zinc-800 backdrop-blur-sm self-center">
                    <div class="text-[10px] text-zinc-400 text-center font-bold">RIGHT DOOR</div>
                    <button id="btn-rdoor" class="w-16 h-12 sm:w-20 sm:h-14 bg-red-950/80 hover:bg-red-900 text-red-400 border border-red-800 rounded-lg font-bold text-xs flex flex-col items-center justify-center transition active:scale-95">
                        <span>ドア</span>
                        <span id="lbl-rdoor" class="text-[10px] text-zinc-400">開</span>
                    </button>
                    <button id="btn-rlight" class="w-16 h-12 sm:w-20 sm:h-14 bg-amber-950/80 hover:bg-amber-900 text-amber-400 border border-amber-800 rounded-lg font-bold text-xs flex flex-col items-center justify-center transition active:scale-95">
                        <span>ライト</span>
                        <span id="lbl-rlight" class="text-[10px] text-zinc-400">OFF</span>
                    </button>
                </div>

            </div>
        </div>

        <!-- ========================================== -->
        <!-- SECURITY MONITOR OVERLAY                   -->
        <!-- ========================================== -->
        <div id="monitor-overlay" class="hidden absolute inset-0 z-40 bg-zinc-950 flex flex-col p-3 border-4 border-zinc-800">
            
            <div class="flex justify-between items-center bg-zinc-900 px-3 py-2 border border-zinc-700 rounded-t-lg">
                <div class="flex items-center gap-2">
                    <span class="w-2.5 h-2.5 bg-red-600 rounded-full animate-ping"></span>
                    <span id="txt-cam-title" class="font-bold text-red-500 text-xs sm:text-sm font-mono">CAM 1A : 工作部屋 (STAGE)</span>
                </div>
                <div class="flex items-center gap-2 sm:gap-3">
                    <button id="btn-wind-box" class="px-3 py-1.5 bg-amber-950 hover:bg-amber-900 text-amber-300 border border-amber-600 text-xs rounded font-bold flex items-center gap-1 active:scale-95 transition select-none cursor-pointer">
                        <span>🎵 ゼンマイを巻く</span>
                    </button>

                    <button id="btn-audio-lure" class="px-3 py-1 bg-amber-950/70 hover:bg-amber-900 text-amber-400 border border-amber-800 text-xs rounded font-bold flex items-center gap-1 active:scale-95 transition">
                        <span>🔊 おとりボイス</span>
                    </button>
                    <button id="btn-vent-reboot" class="px-3 py-1 bg-cyan-950 hover:bg-cyan-900 text-cyan-400 border border-cyan-700 text-xs rounded font-bold flex items-center gap-1 active:scale-95 transition">
                        

40,000 chars · codepastes.com