<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ミニさんごくし</title>
    <style>
        /* 基本設定 */
        * {
            box-sizing: border-box;
        }
        body {
            background-color: #000;
            color: #eee;
            font-family: 'MS Gothic', 'Osaka－等幅', monospace;
            font-size: 16px;
            margin: 0;
            padding: 8px;
        }

        /* ゲーム全体のコンテナ */
        #game-container {
            display: flex;
            flex-wrap: wrap;
            max-width: 800px;
            margin: 0 auto;
            border: 2px solid #666;
        }
        .header {
            width: 100%;
            text-align: center;
            padding: 10px;
            border-bottom: 2px solid #666;
        }
        h1 { margin: 0; color: #fff; font-size: 1.5em; }
        h2 { font-size: 1.2em; }

        /* パネル設定 */
        #info-panel {
            width: 40%;
            padding: 10px;
            border-right: 2px solid #666;
            min-height: 200px;
        }
        #map-panel {
            width: 60%;
            padding: 10px;
        }

        /* 国の表示ボックス */
        .country-box {
            border: 1px solid #888;
            padding: 18px; /* スマホ用に少し大きく */
            margin: 10px 0;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .country-box:hover { background-color: #333; }
        .country-box.selected { border-color: #fff; background-color: #224; }
        .country-box.player-owned { border-left: 5px solid #4a8; }
        .country-box.cpu-owned { border-left: 5px solid #c55; }
        
        /* コマンドとメッセージログ */
        #command-panel, #message-log {
            width: 100%;
            padding: 10px;
            border-top: 2px solid #666;
        }
        .button {
            display: inline-block;
            padding: 12px 18px; /* スマホ用に少し大きく */
            margin: 5px;
            background-color: #444;
            border: 1px solid #888;
            cursor: pointer;
            border-radius: 4px; /* 角を少し丸める */
        }
        .button:hover { background-color: #666; }
        .button.disabled { background-color: #222; color: #666; cursor: not-allowed; }
        ul { list-style: none; padding: 0; margin: 0; }
        #message-log {
            height: 150px;
            overflow-y: scroll;
            background-color: #111;
        }

        /* --- スマートフォン用の設定 (画面幅が640px以下の場合) --- */
        @media (max-width: 640px) {
            body {
                font-size: 14px; /* スマホでは少し文字を小さく */
                padding: 0;
            }
            #game-container {
                flex-direction: column; /* 要素を縦に並べる */
                border-left: none;
                border-right: none;
            }
            #info-panel, #map-panel {
                width: 100%; /* 幅を画面いっぱいに */
                border-right: none;
                border-bottom: 2px solid #666; /* 横の区切り線を下線に変更 */
            }
            h1 { font-size: 1.2em; }
            h2 { font-size: 1.1em; padding-left: 10px;}
        }
    </style>
</head>
<body>

<div id="game-container">
    <div class="header">
        <h1 id="game-title">ミニさんごくし</h1>
    </div>

    <div id="info-panel"><h2>情報</h2><div id="country-info">国を選択してください</div></div>
    <div id="map-panel"><h2>地図</h2><div id="map"></div></div>
    <div id="command-panel"><h2>コマンド</h2><div id="commands"></div></div>
    <div id="message-log"><p>ゲーム開始</p></div>
</div>

<script>
    const PLAYER_ID = 0;

    const gameTitle = document.getElementById('game-title');
    const infoPanel = document.getElementById('country-info');
    const mapContainer = document.getElementById('map');
    const commandContainer = document.getElementById('commands');
    const messageLog = document.getElementById('message-log');

    let gameState = {
        year: 220,
        season: '春',
        countries: [
            { id: 0, name: '魏', ownerId: 0, power: 350, neighbors: [1, 2] },
            { id: 1, name: '呉',   ownerId: 1, power: 200, neighbors: [0, 2] },
            { id: 2, name: '蜀', ownerId: 2, power: 140,  neighbors: [0, 1] }
        ],
        players: [
            { id: 0, name: '曹操', isCPU: false },
            { id: 1, name: '孫権', isCPU: true },
            { id: 2, name: '劉備', isCPU: true }
        ],
        selectedCountryId: null,
        currentPhase: 'PLAYER_TURN', // PLAYER_TURN, SELECT_TARGET, CPU_TURN
    };

    function init() {
        gameState.countries.forEach(c => {
            c.gold = Math.floor(c.power * 2.5);
            c.rice = Math.floor(c.power * 5);
            c.soldiers = c.power * 10;
            c.hasActed = false;
        });
        startPlayerTurn();
        updateDisplay();
    }

    function updateDisplay() {
        gameTitle.textContent = `ミニさんごくし - ${gameState.year}年 ${gameState.season}`;
        updateMap();
        updateInfoPanel();
        updateCommandPanel();
    }

    function updateMap() {
        mapContainer.innerHTML = '';
        gameState.countries.forEach(country => {
            const owner = gameState.players.find(p => p.id === country.ownerId);
            const countryDiv = document.createElement('div');
            countryDiv.className = 'country-box';
            countryDiv.classList.add(owner.isCPU ? 'cpu-owned' : 'player-owned');
            if (gameState.selectedCountryId === country.id) {
                countryDiv.classList.add('selected');
            }
            countryDiv.innerHTML = `<strong>${country.name}</strong> (${owner.name})`;
            countryDiv.onclick = () => onCountryClick(country.id);
            mapContainer.appendChild(countryDiv);
        });
    }

    function updateInfoPanel() {
        const countryId = gameState.selectedCountryId;
        if (countryId === null) {
            infoPanel.innerHTML = '行動済みの国、または敵国です';
            return;
        }
        const country = gameState.countries.find(c => c.id === countryId);
        const owner = gameState.players.find(p => p.id === country.ownerId);
        infoPanel.innerHTML = `
            <h3>${country.name}国（${owner.name}）</h3>
            <ul>
                <li>国力: ${country.power}</li>
                <li>金: ${country.gold}</li>
                <li>米: ${country.rice}</li>
                <li>兵: ${country.soldiers}</li>
            </ul>
        `;
    }

    function updateCommandPanel() {
        commandContainer.innerHTML = '';
        const country = gameState.countries.find(c => c.id === gameState.selectedCountryId);

        if (gameState.currentPhase === 'PLAYER_TURN' && country && country.ownerId === PLAYER_ID && !country.hasActed) {
            commandContainer.appendChild(createButton('内政', () => executeDevelop()));
            commandContainer.appendChild(createButton('軍事', () => {
                gameState.currentPhase = 'SELECT_TARGET';
                addMessage(`[${country.name}] 攻撃先の国を選択してください。`);
                updateDisplay();
            }));
        } else if (gameState.currentPhase === 'SELECT_TARGET') {
            commandContainer.appendChild(createButton('キャンセル', () => {
                gameState.currentPhase = 'PLAYER_TURN';
                updateDisplay();
            }));
        }

        const playerCountries = gameState.countries.filter(c => c.ownerId === PLAYER_ID);
        if (playerCountries.length > 0 && playerCountries.every(c => c.hasActed)) {
            commandContainer.appendChild(createButton('ターン終了', () => executeNextTurn()));
            addMessage("全ての国のコマンドが終了しました。「ターン終了」を押してください。");
        }
    }

    function createButton(text, onClick) {
        const button = document.createElement('div');
        button.className = 'button';
        button.textContent = text;
        button.onclick = onClick;
        return button;
    }

    function onCountryClick(countryId) {
        const clickedCountry = gameState.countries.find(c => c.id === countryId);

        switch (gameState.currentPhase) {
            case 'PLAYER_TURN':
                if (clickedCountry.ownerId === PLAYER_ID && !clickedCountry.hasActed) {
                    gameState.selectedCountryId = countryId;
                } else {
                    gameState.selectedCountryId = countryId; 
                }
                break;
            case 'SELECT_TARGET':
                const attacker = gameState.countries.find(c => c.id === gameState.selectedCountryId);
                if (clickedCountry.ownerId !== PLAYER_ID && attacker.neighbors.includes(countryId)) {
                    executeAttack(attacker.id, countryId);
                } else {
                    addMessage('そこへは攻撃できません。');
                }
                break;
        }
        updateDisplay();
    }
    
    function startPlayerTurn() {
        gameState.currentPhase = 'PLAYER_TURN';
        selectNextPlayerCountry();
        updateDisplay();
    }

    function selectNextPlayerCountry() {
        const nextCountry = gameState.countries.find(c => c.ownerId === PLAYER_ID && !c.hasActed);
        if (nextCountry) {
            gameState.selectedCountryId = nextCountry.id;
        } else {
            gameState.selectedCountryId = null;
        }
    }

    function executeDevelop() {
        const country = gameState.countries.find(c => c.id === gameState.selectedCountryId);
        if (country) {
            const powerIncrease = Math.floor(Math.random() * 21) + 10;
            country.power += powerIncrease;
            addMessage(`${country.name}の内政を行い、国力が${powerIncrease}上がりました。`);
            country.hasActed = true;
            selectNextPlayerCountry();
            updateDisplay();
        }
    }

    function executeAttack(attackerId, defenderId) {
        const attacker = gameState.countries.find(c => c.id === attackerId);
        const defender = gameState.countries.find(c => c.id === defenderId);

        addMessage(`${attacker.name}が${defender.name}に攻め込みました！`);
        
        const riceConsumption = Math.floor(attacker.soldiers * 0.1);
        if(attacker.rice < riceConsumption) {
            addMessage(`米が足りず、攻撃に失敗しました！`);
            attacker.hasActed = true;
            selectNextPlayerCountry();
            updateDisplay();
            return;
        }
        attacker.rice -= riceConsumption;

        let attackerPower = attacker.soldiers + Math.floor(Math.random() * attacker.power);
        let defenderPower = defender.soldiers + Math.floor(Math.random() * defender.power);

        let attackerLoss = Math.min(attacker.soldiers, Math.floor(defenderPower / 4));
        let defenderLoss = Math.min(defender.soldiers, Math.floor(attackerPower / 3));

        attacker.soldiers -= attackerLoss;
        defender.soldiers -= defenderLoss;

        addMessage(`攻撃側は${attackerLoss}の兵を失った。`);
        addMessage(`防御側は${defenderLoss}の兵を失った。`);

        if (defender.soldiers <= 0) {
            addMessage(`${attacker.name}は戦闘に勝利し、${defender.name}を制圧！`);
            defender.ownerId = attacker.ownerId;
            defender.soldiers = Math.floor(attacker.soldiers / 3);
            attacker.soldiers = Math.floor(attacker.soldiers * 2 / 3);
            
            attacker.power = Math.max(10, attacker.power - 5);
            defender.power = Math.max(10, Math.floor(defender.power / 2));
            addMessage(`${attacker.name}と旧${defender.name}の国力が低下した。`);

        } else {
            addMessage(`${defender.name}は防衛に成功した。`);
            attacker.power = Math.max(10, attacker.power - 10);
            defender.power = Math.max(10, defender.power - 15);
            addMessage(`${attacker.name}と${defender.name}の国力が低下した。`);
        }
        
        attacker.hasActed = true;
        gameState.currentPhase = 'PLAYER_TURN';
        selectNextPlayerCountry();
        updateDisplay();
        checkGameEnd();
    }

    function executeNextTurn() {
        gameState.currentPhase = 'CPU_TURN';
        commandContainer.innerHTML = '';
        addMessage("--- CPUのターン ---");
        
        setTimeout(() => {
            cpuTurn();
            advanceSeason();
            handleRandomEvents();
            gameState.countries.forEach(c => c.hasActed = false);
            checkGameEnd();
            if (gameState.currentPhase !== 'GAME_END') {
                 addMessage("--- あなたのターン ---");
                 startPlayerTurn();
            }
        }, 1000);
    }
    
    function advanceSeason() {
        const seasons = ['春', '夏', '秋', '冬'];
        let currentSeasonIndex = seasons.indexOf(gameState.season);
        currentSeasonIndex++;
        if (currentSeasonIndex >= seasons.length) {
            currentSeasonIndex = 0;
            gameState.year++;
        }
        gameState.season = seasons[currentSeasonIndex];
        
        addMessage(`${gameState.year}年 ${gameState.season}になりました。`);

        gameState.countries.forEach(c => {
             const goldIncome = Math.floor(c.power * 0.3);
             c.gold += goldIncome;
             
             if(gameState.season === '秋') {
                 const riceIncome = c.power;
                 c.rice += riceIncome;
                 addMessage(`${c.name}で米の収穫がありました(+${riceIncome})`);
             }

             const newSoldiers = Math.floor(c.power / 10);
             c.soldiers += newSoldiers;
        });
        addMessage(`各国で金の収入と募兵が行われました。`);
    }

    function cpuTurn() {
        const cpuPlayers = gameState.players.filter(p => p.isCPU);
        cpuPlayers.forEach(cpu => {
            const cpuCountries = gameState.countries.filter(c => c.ownerId === cpu.id);
            cpuCountries.forEach(country => {
                const action = Math.random();
                if (action < 0.4) {
                    const powerIncrease = Math.floor(Math.random() * 15) + 5;
                    country.power += powerIncrease;
                } else {
                    const targets = country.neighbors
                        .map(id => gameState.countries.find(c => c.id === id))
                        .filter(target => target.ownerId !== cpu.id);
                    
                    if(targets.length > 0) {
                        targets.sort((a,b) => a.soldiers - b.soldiers);
                        const target = targets[0];
                        
                        if(country.soldiers > target.soldiers) {
                            executeAttack(country.id, target.id);
                        }
                    }
                }
            });
        });
    }

    function handleRandomEvents() {
        const eventChance = Math.random();
        if (eventChance < 0.05) {
            const targetCountry = gameState.countries[Math.floor(Math.random() * gameState.countries.length)];
            addMessage(`[災害] ${targetCountry.name}で疫病が発生！`);
            targetCountry.power = Math.max(10, Math.floor(targetCountry.power * 0.8));
            targetCountry.soldiers = Math.floor(targetCountry.soldiers * 0.7);
            targetCountry.rice = Math.floor(targetCountry.rice * 0.8);
        } else if (eventChance < 0.1) {
            const targetCountry = gameState.countries[Math.floor(Math.random() * gameState.countries.length)];
            addMessage(`[災害] ${targetCountry.name}で一揆が発生！`);
            targetCountry.power = Math.max(10, Math.floor(targetCountry.power * 0.9));
            targetCountry.soldiers = Math.floor(targetCountry.soldiers * 0.8);
            targetCountry.rice = Math.floor(targetCountry.rice * 0.7);
            targetCountry.gold = Math.floor(targetCountry.gold * 0.7);
        }
    }

    function checkGameEnd() {
        const owners = new Set(gameState.countries.map(c => c.ownerId));
        if (owners.size === 1) {
            gameState.currentPhase = 'GAME_END';
            const winner = gameState.players.find(p => p.id === owners.values().next().value);
            setTimeout(() => {
                if (winner.id === PLAYER_ID) {
                    alert('天下統一！あなたの勝利です！');
                } else {
                    alert(`${winner.name}が天下を統一しました。`);
                }
                location.reload();
            }, 500);
        } else if (gameState.countries.length > 0 && !gameState.countries.some(c => c.ownerId === PLAYER_ID)) {
             gameState.currentPhase = 'GAME_END';
             setTimeout(() => {
                alert('あなたの国は滅亡しました...');
                location.reload();
             }, 500);
        }
    }

    function addMessage(text) {
        const p = document.createElement('p');
        p.textContent = `> ${text}`;
        messageLog.appendChild(p);
        messageLog.scrollTop = messageLog.scrollHeight;
    }

    init();
</script>

</body>
</html>