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無題Plain Text
```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