<!DOCTYPE html>
<html lang="ja">
<head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LLZX3KXMVF"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-LLZX3KXMVF');
    </script>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
         crossorigin="anonymous"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Floordry Ver.1</title>
    <style>
        :root {
            --main-color: #44ff44;
            --bg-color: #050505;
            --ui-bg: #001100;
            --accent: #ffff33;
            --danger: #ff3333;
            --wall-texture: #228822;
            --corner-line: #115511;
        }

        body {
            background-color: var(--bg-color);
            color: var(--main-color);
            font-family: 'Courier New', monospace;
            margin: 0;
            /* 広告を表示するためにスクロールを許可し、高さを自動調整に変更 */
            min-height: 100dvh;
            height: auto; 
            width: 100vw;
            overflow-y: auto; /* 縦スクロール許可 */
            overflow-x: hidden;
            touch-action: pan-y; /* 縦スクロールのみ許可（ボタン類は無効化済み） */
            display: flex;
            flex-direction: column; /* 縦並びに変更して広告を下に配置 */
            align-items: center;
            user-select: none;
            -webkit-user-select: none;
        }

        #game-wrapper {
            display: flex;
            width: 100%;
            max-width: 1200px;
            /* 高さを固定せず、コンテンツに合わせるが、PC画面内には収まるように調整 */
            height: 100dvh; 
            max-height: 100dvh;
            padding: 5px;
            box-sizing: border-box;
            gap: 5px;
            position: relative;
            flex-shrink: 0; /* ゲーム画面が広告に圧迫されて潰れないようにする */
        }

        #title-screen {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: rgba(0,0,0,0.95);
            z-index: 2000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--main-color);
            cursor: pointer;
        }
        .title-large {
            font-size: 60px;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 0 0 10px var(--main-color);
            text-align: center;
        }

        /* ストーリースクロール */
        .story-container {
            width: 90%;
            max-width: 600px;
            height: 180px;
            overflow: hidden;
            position: relative;
            margin-bottom: 20px;
            border-top: 1px dashed var(--main-color);
            border-bottom: 1px dashed var(--main-color);
            background: rgba(0, 20, 0, 0.5);
            mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
        }
        .story-text {
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: 16px;
            line-height: 1.8;
            color: var(--main-color);
            animation: scroll-up 20s linear infinite;
        }
        @keyframes scroll-up {
            0% { transform: translateY(180px); }
            100% { transform: translateY(-110%); }
        }

        .blink-text {
            font-size: 20px;
            animation: blink 1s infinite;
        }
        @keyframes blink { 50% { opacity: 0; } }

        #damage-flash {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: var(--danger);
            opacity: 0;
            pointer-events: none;
            z-index: 1500;
            transition: opacity 0.1s;
        }

        .pc-layout { flex-direction: row; align-items: flex-start; }

        #info-section {
            display: flex; flex-direction: column; flex: 1;
            background-color: var(--ui-bg); border: 2px solid var(--main-color);
            padding: 4px; gap: 4px; min-width: 250px;
        }

        #main-section {
            display: flex; flex-direction: column; flex: 2;
            height: 100%; min-height: 0; gap: 5px; position: relative;
        }

        #viewport-container {
            position: relative; border: 2px solid var(--main-color); background: #000;
            flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
        }
        canvas#viewport {
            max-width: 100%; max-height: 100%; width: auto; height: auto; image-rendering: pixelated;
        }

        #game-title-text {
            position: absolute; top: 10px; left: 10px;
            font-size: 24px; font-weight: bold; color: var(--main-color);
            text-shadow: 0 0 5px var(--main-color); pointer-events: none; z-index: 10;
            /* テキストが重ならないように調整 */
            display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
        }
        #item-display {
            position: absolute; top: 45px; left: 10px;
            font-size: 18px; font-weight: bold; color: var(--accent);
            text-shadow: 0 0 2px #000; pointer-events: none; z-index: 10;
            opacity: 0; transition: opacity 0.5s;
        }

        #bottom-section {
            display: flex; flex-direction: column; gap: 5px; flex-shrink: 0;
        }

        #message-box {
            background-color: var(--ui-bg); border: 1px solid var(--main-color);
            padding: 4px; overflow-y: auto; font-size: 14px; line-height: 1.3;
            height: 120px; min-height: 120px;
        }

        #status-panel {
            display: grid; grid-template-columns: 1fr 1fr;
            font-size: 14px; font-weight: bold;
            border-bottom: 1px solid var(--main-color); padding-bottom: 4px; margin-bottom: 0;
        }
        .warning-val { color: var(--danger); animation: blink 0.5s infinite; }

        #map-container {
            flex: 1; display: flex; justify-content: center; align-items: center;
            background: #000; overflow: hidden; min-height: 0;
        }
        canvas#minimap { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

        #controls {
            display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto;
            gap: 6px; padding: 5px; background-color: var(--ui-bg);
            border-top: 2px solid var(--main-color);
            padding-bottom: max(5px, env(safe-area-inset-bottom));
        }

        .btn {
            background: #000; color: var(--main-color);
            border: 2px solid var(--main-color); border-radius: 6px;
            padding: 12px 0; font-size: 16px; font-weight: bold;
            text-align: center; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            touch-action: none; /* ボタン上のスクロール無効化 */
        }
        .btn:active, .btn.active-state {
            background: var(--main-color); color: #000; transform: scale(0.96);
        }
        
        .btn-up { grid-column: 2; grid-row: 1; }
        .btn-map-toggle { grid-column: 3; grid-row: 1; font-size: 14px; }
        .btn-left { grid-column: 1; grid-row: 2; }
        .btn-light { grid-column: 2; grid-row: 2; border-color: var(--accent); color: var(--accent); }
        .btn-right { grid-column: 3; grid-row: 2; }
        
        #enemy-overlay {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.8); display: none;
            flex-direction: column; align-items: center; justify-content: center;
            z-index: 100; color: var(--danger); border: 2px solid var(--danger);
        }
        #enemy-art {
            white-space: pre; font-size: 12px; margin-bottom: 10px;
            text-align: center; line-height: 12px; transform: scale(1.5);
        }
        .shake { animation: shake 0.5s; }
        @keyframes shake {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(-5px, 5px); }
            75% { transform: translate(5px, -5px); }
        }

        /* 広告コンテナ用スタイル */
        #ad-container {
            width: 100%;
            max-width: 1200px;
            margin-top: 10px;
            text-align: center;
            min-height: 100px; /* 広告が出るまでのスペース確保 */
            padding-bottom: 20px;
        }

        @media (max-width: 768px) {
            body { height: auto; overflow-y: auto; }
            #game-wrapper { flex-direction: column; gap: 4px; padding: 4px; height: auto; max-height: none; }
            #info-section { flex: none; height: 100px; flex-direction: row; order: 1; }
            #status-panel { display: flex; flex-direction: column; justify-content: space-evenly; border-bottom: none; border-right: 1px solid var(--main-color); padding-right: 4px; width: 75px; font-size: 11px; }
            #map-container { border-left: 1px solid var(--main-color); }
            
            /* モバイルではメイン画面の高さを制限して画面に収める努力をする */
            #main-section { flex: none; height: 60vh; order: 2; overflow: hidden; }
            
            #viewport-container { border-width: 1px; }
            #bottom-section { order: 3; }
            #message-box { height: 60px; min-height: 60px; font-size: 11px; }
            .btn { font-size: 18px; padding: 10px 0; }
            .title-large { font-size: 40px; }
        }

        .scanlines {
            background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 4px);
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none; z-index: 999;
        }
    </style>
</head>
<body>

    <div id="title-screen">
        <div class="title-large">Floordry</div>
        
        <div class="story-container">
            <div class="story-text">
                あなたは、耐震診断士。<br>
                木造住宅の床下にもぐっています。<br><br>
                床下をくまなく移動して、<br>
                床下のマップを作成してください。<br><br>
                ネズミやハクビシンがいたら、<br>
                ライトで追っ払います。<br>
                ライトは使い過ぎると<br>
                バッテリー切れを起こします。<br><br>
                制限時間内に全マップを完成させ、<br>
                ゴール（Gマーク）まで移動してください。<br>
                全３面あります。<br><br>
                ライトをつけるとアイテムが<br>
                発見できることもあります。<br><br>
                無事に床下の調査を終えてください！<br>
                健闘を祈る！<br><br>
　　　　　　　　製作 Catfishなおうち
            </div>
        </div>

        <div class="blink-text">CLICK TO START</div>
        <div style="margin-top:20px; font-size:12px;">(OR PRESS SPACE KEY)</div>
    </div>

    <div id="damage-flash"></div>

    <div id="game-wrapper" class="pc-layout">
        
        <div id="info-section">
            <div id="status-panel">
                <div>TIME:<span id="time-val">300</span></div>
                <div>BAT :<span id="bat-val">30</span></div>
                <div>HP  :<span id="hp-val">30</span></div>
                <div>FL  :<span id="floor-val">B1</span></div>
                <div>MAP :<span id="rate-val">0%</span></div>
            </div>
            <div id="map-container">
                <canvas id="minimap" width="300" height="300"></canvas>
            </div>
        </div>

        <div id="main-section">
            <div id="viewport-container">
                <div id="game-title-text">
                    Floordry
                    <span style="font-size: 12px; font-weight: normal; opacity: 0.8;">presented by Catfish na ouchi</span>
                </div>
                <div id="item-display"></div>
                <canvas id="viewport" width="640" height="360"></canvas>
                
                <div id="enemy-overlay">
                    <div style="font-size:20px; font-weight:bold; margin-bottom:10px;">!! DANGER !!</div>
                    <div id="enemy-art"></div>
                    <div id="enemy-name" style="margin-bottom:5px; font-weight:bold;"></div>
                    <div class="blink-text" style="color:var(--accent); margin-top:10px;">SPACEキーでライト照射！</div>
                </div>
            </div>

            <div id="bottom-section">
                <div id="message-box">
                    <div>システム準備完了...</div>
                </div>

                <div id="controls">
                    <div id="btn-up" class="btn btn-up">▲ 前進</div>
                    <div id="btn-map" class="btn btn-map-toggle">MAP</div>
                    
                    <div id="btn-left" class="btn btn-left">↺ 左</div>
                    <div id="btn-light" class="btn btn-light">☀ ライト(Space)</div>
                    <div id="btn-right" class="btn btn-right">右 ↻</div>
                </div>
            </div>
        </div>

    </div>

    <div id="ad-container">
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-format="fluid"
             data-ad-layout-key="-gw-3+1f-3d+2z"
             data-ad-client="ca-pub-7855061578893179"
             data-ad-slot="8574377639"></ins>
        <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <div class="scanlines"></div>

    <script>
        // --- マップデータ ---
        const mapDataText = `
#LEVEL 1
1111111111
1000100001
1010101111
1010000001
1011111101
1000010001
1111010101
1000000101
1011111101
1111111111
TIME=150

#LEVEL 2
1111111111
1000000001
1011111101
1010000101
1010110101
1010100101
1010111101
1010000001
1011111111
1111111111
TIME=80

#LEVEL 3
1111111111
1000000001
1011101101
1000001001
1011101011
1010001001
1010111101
1010000001
1011111111
1111111111
TIME=120
`;

        // --- 設定変数 ---
        const VIEW_DEPTH = 4;
        const CANVAS = document.getElementById('viewport');
        const CTX = CANVAS.getContext('2d');
        const WIDTH = 640;
        const HEIGHT = 360;
        const WALL_COLOR = '#44ff44';
        const WALL_TEXTURE_COLOR = '#228822';
        const CORNER_LINE_COLOR = '#115511';
        const MAP_CANVAS = document.getElementById('minimap');
        const MAP_CTX = MAP_CANVAS.getContext('2d');
        const MAP_CELL_SIZE = 28;

        // --- ゲーム状態管理 ---
        let gameStarted = false;
        let currentLevelIndex = 0;
        let levels = [];
        let levelConfigs = [];
        let currentMap = [];
        let visited = [];
        let goalPos = { x: -1, y: -1 };
        let goalActive = false;
        
        let player = { x: 1, y: 1, dir: 1, hp: 30, maxHp: 30, battery: 30 };
        let gameTime = 300;
        let gameTimerId = null;
        let isMapVisible = true;
        let itemDisplayTimer = null;
        let isEncounter = false;
        let attackIntervalId = null;
        let currentEnemy = null;

        const DIRS = [
            { x: 0, y: -1, label: 'N' },
            { x: 1, y: 0, label: 'E' },
            { x: 0, y: 1, label: 'S' },
            { x: -1, y: 0, label: 'W' }
        ];
        const enemies = [
            { id: 1, name: "シロアリ", atk: 2, art: ` \\/ \n OO \n(..)` },
            { id: 2, name: "ムカデ", atk: 4, art: ` O_O \n//|\\\\\n \\|/ ` },
            { id: 3, name: "ネズミ", atk: 6, art: ` __QQ\n(_)_">` },
            { id: 4, name: "ハクビシン", atk: 10, art: ` /\\ /\\\n( O O )\n ( ^ )` }
        ];

        // --- キー入力ハンドラ（グローバル）---
        document.addEventListener('keydown', function(e) {
            // スペースキー(32) または エンターキー(13)
            if (e.keyCode === 32 || e.code === 'Space' || e.key === ' ' || e.keyCode === 13) {
                e.preventDefault(); // スクロール防止
                if (!gameStarted) {
                    startGame();
                } else {
                    useLight();
                }
            } else if (gameStarted) {
                if (e.key === 'ArrowUp') moveForward();
                else if (e.key === 'ArrowLeft') rotate(-1);
                else if (e.key === 'ArrowRight') rotate(1);
                else if (e.key === 'm' || e.key === 'M') toggleMap();
            }
        });

        // --- マウス/タッチハンドラ ---
        function setupButton(id, action) {
            const btn = document.getElementById(id);
            if (!btn) return;
            const handler = (e) => {
                // e.preventDefault() はボタン内でのタッチスクロールを防ぐため必須
                if(e.cancelable) e.preventDefault();
                highlightBtn(btn);
                action();
            };
            btn.addEventListener('mousedown', handler);
            btn.addEventListener('touchstart', handler, {passive: false});
        }

        // --- 初期化処理 ---
        window.onload = function() {
            // マップ解析
            parseMapData(mapDataText);
            
            // タイトル画面クリックでスタート
            document.getElementById('title-screen').addEventListener('click', startGame);
            document.getElementById('title-screen').addEventListener('touchstart', function(e){
                if(e.cancelable) e.preventDefault();
                startGame();
            }, {passive: false});

            // ボタン設定
            setupButton('btn-up', moveForward);
            setupButton('btn-left', () => rotate(-1));
            setupButton('btn-right', () => rotate(1));
            setupButton('btn-light', useLight);
            setupButton('btn-map', toggleMap);

            // 初期描画（裏で）
            startLevel(0, false);
            window.addEventListener('resize', () => drawMap());
            requestAnimationFrame(gameLoop);
        };

        function highlightBtn(btn) {
            btn.classList.add('active-state');
            setTimeout(() => btn.classList.remove('active-state'), 100);
        }

        // --- ゲーム進行 ---
        function startGame() {
            if(gameStarted) return;
            gameStarted = true;
            document.getElementById('title-screen').style.display = 'none';
            log("ゲームスタート！");
            startLevel(0, true);
        }

        function parseMapData(text) {
            const rawLevels = text.split('#LEVEL');
            levels = [];
            levelConfigs = [];
            rawLevels.forEach(chunk => {
                if(!chunk.trim()) return;
                const lines = chunk.trim().split('\n');
                const mapData = [];
                let config = { time: 300 };
                for(let i=0; i<lines.length; i++) {
                    const rowStr = lines[i].trim();
                    if (rowStr.match(/^[01]+$/)) {
                        mapData.push(rowStr.split('').map(Number));
                    } else if (rowStr.startsWith("TIME=")) {
                        config.time = parseInt(rowStr.split('=')[1]);
                    }
                }
                if(mapData.length > 0) {
                    levels.push(mapData);
                    levelConfigs.push(config);
                }
            });
        }

        function startLevel(index, active = true) {
            currentLevelIndex = index;
            if (index >= levels.length) {
                alert("全ステージクリア！おめでとう！");
                location.reload();
                return;
            }
            
            currentMap = levels[currentLevelIndex];
            gameTime = levelConfigs[currentLevelIndex].time;
            
            visited = currentMap.map(row => row.map(() => false));
            player.x = 1; player.y = 1; 
            player.battery = 30; // バッテリーリセット
            
            if(currentMap[1][1] === 1) {
                 for(let y=0; y<10; y++) for(let x=0; x<10; x++) if(currentMap[y][x]===0) { player.x = x; player.y = y; break; }
            }
            player.dir = 1; 
            goalActive = false;
            setRandomGoal();
            
            document.getElementById('floor-val').textContent = `B${currentLevelIndex + 1}`;
            updateVisited(player.x, player.y);
            renderScene();
            updateStatus();
            
            if (active) {
                log(`B${currentLevelIndex+1} 探索開始`);
                if(gameTimerId) clearInterval(gameTimerId);
                gameTimerId = setInterval(updateTimer, 1000);
            }
        }

        function updateTimer() {
            gameTime--;
            updateStatus();
            if(gameTime <= 0) {
                gameOver("時間切れだ...");
            }
        }

        function gameOver(reason) {
            clearInterval(gameTimerId);
            if(attackIntervalId) clearInterval(attackIntervalId);
            alert(`GAME OVER\n${reason}`);
            location.reload();
        }

        function setRandomGoal() {
            const candidates = [];
            for(let y=0; y<10; y++) for(let x=0; x<10; x++) {
                if (currentMap[y][x] === 0 && (x !== player.x || y !== player.y)) candidates.push({x, y});
            }
            if(candidates.length > 0) goalPos = candidates[Math.floor(Math.random() * candidates.length)];
        }

        // --- アクション ---
        function toggleMap() {
            isMapVisible = !isMapVisible;
            drawMap();
            log(isMapVisible ? "マップを表示" : "マップ非表示");
        }

        function moveForward() {
            if(!gameStarted || isEncounter) return;
            const nx = player.x + DIRS[player.dir].x;
            const ny = player.y + DIRS[player.dir].y;
            if (nx < 0 || nx >= 10 || ny < 0 || ny >= 10 || currentMap[ny][nx] === 1) {
                log("壁だ。"); return;
            }
            if (goalActive && nx === goalPos.x && ny === goalPos.y) {
                alert("脱出成功！"); startLevel(currentLevelIndex + 1, true); return;
            }
            player.x = nx; player.y = ny; updateVisited(nx, ny);
            if(Math.random() < 0.15) triggerEncounter();
            renderScene(); updateStatus();
        }

        function rotate(d) {
            if(!gameStarted || isEncounter) return;
            player.dir += d; 
            if (player.dir < 0) player.dir = 3; 
            if (player.dir > 3) player.dir = 0;
            renderScene(); drawMap(); updateStatus();
        }

        function useLight() {
            if (!gameStarted) return;

            // バッテリーチェック
            if (player.battery <= 0) {
                log("電池切れだ！");
                return;
            }

            // バッテリー消費
            player.battery--;
            updateStatus();

            // 戦闘中
            if (isEncounter) {
                escapeEncounter();
                return;
            }

            // 通常探索
            log("ライト照射！");
            const fx = player.x + DIRS[player.dir].x;
            const fy = player.y + DIRS[player.dir].y;
            
            if(fx < 0 || fx >= 10 || fy < 0 || fy >= 10 || currentMap[fy][fx] === 1) {
                const roll = Math.random();
                if(roll < 0.25) { 
                    player.hp = Math.min(player.hp + 5, player.maxHp);
                    log("食料発見！");
                    showItem("食料発見！(+5HP)");
                    updateStatus();
                } else if(roll < 0.5) {
                    player.battery = Math.min(player.battery + 5, 50);
                    log("電池発見！");
                    showItem("電池発見！(+5BAT)");
                    updateStatus();
                } else {
                    log("何もなかった。");
                }
            } else {
                 if(fx>=0 && fx<10 && fy>=0 && fy<10 && !visited[fy][fx]) {
                    visited[fy][fx] = true; checkCompletion(); drawMap();
                }
                if (goalActive && fx === goalPos.x && fy === goalPos.y) log("出口がある！");
                else log("通路だ。");
            }
        }

        // --- 戦闘 ---
        function triggerEncounter() {
            isEncounter = true;
            currentEnemy = enemies[Math.floor(Math.random()*enemies.length)];
            document.getElementById('enemy-art').textContent = currentEnemy.art;
            document.getElementById('enemy-name').textContent = currentEnemy.name;
            document.getElementById('enemy-overlay').style.display = 'flex';
            log(`【敵襲】${currentEnemy.name}！Spaceで撃退せよ！`);
            if(attackIntervalId) clearInterval(attackIntervalId);
            attackIntervalId = setInterval(enemyAttack, 1500);
        }

        function enemyAttack() {
            if(!isEncounter) return;
            player.hp -= currentEnemy.atk;
            updateStatus();
            const flash = document.getElementById('damage-flash');
            flash.style.opacity = 0.5;
            setTimeout(() => flash.style.opacity = 0, 100);
            document.getElementById('viewport').classList.add('shake');
            setTimeout(() => document.getElementById('viewport').classList.remove('shake'), 500);
            log(`攻撃を受けた！ HP-${currentEnemy.atk}`);
            if(player.hp <= 0) gameOver("力尽きた...");
        }

        function escapeEncounter() {
            clearInterval(attackIntervalId);
            log(`ライトで${currentEnemy.name}を撃退した！`);
            isEncounter = false;
            currentEnemy = null;
            document.getElementById('enemy-overlay').style.display = 'none';
        }

        // --- 描画系 ---
        function gameLoop() {
            if (goalActive) renderScene(); // ゴール演出用
            requestAnimationFrame(gameLoop);
        }

        function renderScene() {
            CTX.fillStyle = '#000500'; CTX.fillRect(0, 0, WIDTH, HEIGHT);
            if(!currentMap || currentMap.length === 0) return;
            for (let d = VIEW_DEPTH; d >= 0; d--) {
                const tx = player.x + (DIRS[player.dir].x * d);
                const ty = player.y + (DIRS[player.dir].y * d);
                let cell = 1;
                if (tx >= 0 && tx < 10 && ty >= 0 && ty < 10) cell = currentMap[ty][tx];
                drawCell(d, cell, tx, ty);
            }
        }

        function drawCell(depth, cellType, tx, ty) {
            const c = getPerspective(depth); const n = getPerspective(depth + 1);
            CTX.strokeStyle = WALL_COLOR; CTX.lineWidth = 2;
            if (cellType === 1) { 
                CTX.fillStyle = '#000'; CTX.fillRect(c.x, c.y, c.w, c.h); CTX.strokeRect(c.x, c.y, c.w, c.h);
                for (let i = 1; i < 6; i++) { let lx = c.x + (c.w / 6) * i; drawLine(lx, c.y, lx, c.y + c.h, WALL_TEXTURE_COLOR, 1); }
            } else { 
                drawLine(c.x, c.y+c.h, n.x, n.y+n.h, WALL_COLOR, 1); drawLine(c.x+c.w, c.y+c.h, n.x+n.w, n.y+n.h, WALL_COLOR, 1);
                drawLine(c.x, c.y, n.x, n.y, WALL_COLOR, 1); drawLine(c.x+c.w, c.y, n.x+n.w, n.y, WALL_COLOR, 1);
                if (goalActive && tx === goalPos.x && ty === goalPos.y) drawGoal(c);
                checkSide(depth, tx, ty);
            }
        }
        function drawLine(x1, y1, x2, y2, color, width) {
            CTX.strokeStyle = color; CTX.lineWidth = width;
            CTX.beginPath(); CTX.moveTo(x1, y1); CTX.lineTo(x2, y2); CTX.stroke();
        }
        function drawGoal(c) {
            CTX.fillStyle = '#ffff33'; CTX.font = `bold ${c.h * 0.7}px monospace`;
            CTX.textAlign = 'center'; CTX.textBaseline = 'middle';
            CTX.fillText("G", c.x + c.w/2, c.y + c.h/2 + Math.sin(Date.now()/200)*10);
        }
        function checkSide(depth, tx, ty) {
            const c = getPerspective(depth); const n = getPerspective(depth + 1);
            const lDir = (player.dir + 3) % 4; const lx = tx + DIRS[lDir].x; const ly = ty + DIRS[lDir].y;
            if (lx < 0 || lx >= 10 || ly < 0 || ly >= 10 || currentMap[ly][lx] !== 0) {
                CTX.fillStyle = '#000'; CTX.beginPath(); CTX.moveTo(c.x, c.y); CTX.lineTo(n.x, n.y); CTX.lineTo(n.x, n.y+n.h); CTX.lineTo(c.x, c.y+c.h); CTX.fill(); CTX.stroke();
                for(let i=1; i<=4; i++){
                    const r = i/5;
                    drawLine(c.x+(n.x-c.x)*r, c.y+(n.y-c.y)*r, c.x+(n.x-c.x)*r, (c.y+c.h)+((n.y+n.h)-(c.y+c.h))*r, WALL_TEXTURE_COLOR, 1);
                }
            } else { drawLine(n.x, n.y, n.x, n.y + n.h, CORNER_LINE_COLOR, 2); }
            const rDir = (player.dir + 1) % 4; const rx = tx + DIRS[rDir].x; const ry = ty + DIRS[rDir].y;
            if (rx < 0 || rx >= 10 || ry < 0 || ry >= 10 || currentMap[ry][rx] !== 0) {
                CTX.fillStyle = '#000'; CTX.beginPath(); CTX.moveTo(c.x+c.w, c.y); CTX.lineTo(n.x+n.w, n.y); CTX.lineTo(n.x+n.w, n.y+n.h); CTX.lineTo(c.x+c.w, c.y+c.h); CTX.fill(); CTX.stroke();
                for(let i=1; i<=4; i++){
                    const r = i/5;
                    const tx = (c.x+c.w)+((n.x+n.w)-(c.x+c.w))*r;
                    const tyTop = c.y+(n.y-c.y)*r;
                    const tyBot = (c.y+c.h)+((n.y+n.h)-(c.y+c.h))*r;
                    drawLine(tx, tyTop, tx, tyBot, WALL_TEXTURE_COLOR, 1);
                }
            } else { drawLine(n.x + n.w, n.y, n.x + n.w, n.y + n.h, CORNER_LINE_COLOR, 2); }
        }
        function getPerspective(depth) {
            const cx = WIDTH / 2; const cy = HEIGHT / 2;
            const horizonOffset = HEIGHT * 0.1; 
            const scale = 1 / (depth + 1); 
            const w = WIDTH * scale * 0.8; const h = HEIGHT * scale * 0.5;
            return { x: cx - w / 2, y: cy - h / 2 + horizonOffset * scale, w: w, h: h, scale: scale };
        }

        // --- UI ---
        function log(msg) {
            const box = document.getElementById('message-box');
            const div = document.createElement('div'); div.textContent = `> ${msg}`;
            box.appendChild(div); box.scrollTop = box.scrollHeight;
        }
        function updateStatus() {
            document.getElementById('hp-val').textContent = player.hp;
            document.getElementById('bat-val').textContent = player.battery;
            const timeEl = document.getElementById('time-val');
            timeEl.textContent = gameTime;
            if(gameTime < 60) timeEl.classList.add('warning-val'); else timeEl.classList.remove('warning-val');
        }
        function showItem(text) {
            const el = document.getElementById('item-display');
            el.textContent = text;
            el.style.opacity = 1;
            if(itemDisplayTimer) clearTimeout(itemDisplayTimer);
            itemDisplayTimer = setTimeout(() => { el.style.opacity = 0; }, 2000);
        }
        function updateVisited(x, y) {
            if (x >= 0 && x < 10 && y >= 0 && y < 10 && !visited[y][x]) {
                visited[y][x] = true;
                for(let dy=-1; dy<=1; dy++) for(let dx=-1; dx<=1; dx++) {
                    const nx = x+dx; const ny = y+dy;
                    if(nx>=0 && nx<10 && ny>=0 && ny<10 && currentMap[ny][nx]===1) visited[ny][nx]=true;
                }
                checkCompletion();
            }
            drawMap();
        }
        function checkCompletion() {
            let total = 0; let done = 0;
            for(let y=0; y<10; y++) for(let x=0; x<10; x++) if(currentMap[y][x]===0) { total++; if(visited[y][x]) done++; }
            const rate = Math.floor((done/total)*100);
            document.getElementById('rate-val').textContent = `${rate}%`;
            if (done === total && !goalActive) { goalActive = true; log("出口が出現！"); renderScene(); }
        }
        function drawMap() {
            MAP_CTX.fillStyle = '#001100'; MAP_CTX.fillRect(0, 0, MAP_CANVAS.width, MAP_CANVAS.height);
            if (!isMapVisible) return;
            const offsetX = (MAP_CANVAS.width - (10 * MAP_CELL_SIZE)) / 2;
            const offsetY = (MAP_CANVAS.height - (10 * MAP_CELL_SIZE)) / 2;
            for (let y = 0; y < 10; y++) {
                for (let x = 0; x < 10; x++) {
                    if (!visited[y][x]) continue;
                    const px = offsetX + x * MAP_CELL_SIZE; const py = offsetY + y * MAP_CELL_SIZE;
                    if (currentMap[y][x] === 1) {
                        MAP_CTX.fillStyle = '#005500'; MAP_CTX.fillRect(px, py, MAP_CELL_SIZE, MAP_CELL_SIZE);
                    } else {
                        MAP_CTX.strokeStyle = '#228822'; MAP_CTX.strokeRect(px+4, py+4, MAP_CELL_SIZE-8, MAP_CELL_SIZE-8);
                    }
                }
            }
            const px = offsetX + player.x * MAP_CELL_SIZE + MAP_CELL_SIZE/2;
            const py = offsetY + player.y * MAP_CELL_SIZE + MAP_CELL_SIZE/2;
            MAP_CTX.save(); MAP_CTX.translate(px, py); MAP_CTX.rotate(player.dir * 90 * Math.PI / 180);
            MAP_CTX.fillStyle = '#ffff33'; MAP_CTX.beginPath(); MAP_CTX.moveTo(0, -8); MAP_CTX.lineTo(6, 6); MAP_CTX.lineTo(-6, 6); MAP_CTX.fill(); MAP_CTX.restore();
        }
    </script>
</body>
</html>