<!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">
    <title>レトロテキスト競馬 - NAMAZU STAKES</title>
    <style>
        /* --- 基本設定 --- */
        body {
            background-color: #004400;
            color: #eeeeee;
            font-family: "Courier New", Courier, monospace;
            text-align: center;
            margin: 0;
            padding: 10px;
            overscroll-behavior-y: none;
        }

        h1 { 
            margin: 10px 0; 
            font-size: 20px; 
            text-shadow: 2px 2px #000; 
            line-height: 1.4;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #002200;
            padding: 15px;
            border: 2px solid #88aa88;
            border-radius: 5px;
            box-sizing: border-box;
        }

        /* --- ボタン --- */
        .btn {
            background-color: #333;
            color: #fff;
            border: 1px solid #fff;
            padding: 12px 24px;
            margin: 8px 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 16px;
            border-radius: 4px;
            touch-action: manipulation;
        }
        .btn:hover { background-color: #555; }
        .btn:disabled { background-color: #222; color: #555; border-color: #555; }

        /* --- 画面切り替え --- */
        .screen { display: none; }
        .active { display: block; }

        /* --- テーブル（オッズ表・結果） --- */
        .table-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 15px;
            border: 1px solid #446644;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            white-space: nowrap;
        }
        th, td { border: 1px solid #446644; padding: 8px 5px; text-align: center; }
        th { background-color: #113311; color: #88ff88; }
        .horse-name { text-align: left; padding-left: 10px; min-width: 120px; }

        /* --- 入力フォーム --- */
        input[type="number"] {
            font-family: inherit;
            font-size: 16px;
            padding: 8px;
            background: #000;
            color: #fff;
            border: 1px solid #888;
            border-radius: 4px;
            width: 60px;
            text-align: right;
        }
        /* 単勝と複勝の入力欄の色分け */
        .input-win { border-color: #ff8888; background-color: #220000; }
        .input-place { border-color: #88ff88; background-color: #002200; }

        /* --- レース描画エリア --- */
        #track {
            background-color: #000;
            color: #fff;
            padding: 10px;
            border: 1px solid #fff;
            text-align: left;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            white-space: pre;
            line-height: 1.3;
            font-size: 12px;
            margin-bottom: 10px;
            min-height: 150px;
        }
        .lane { margin-bottom: 4px; height: 1.2em; }
        
        /* --- 情報表示 --- */
        .info-box {
            border: 1px dashed #fff;
            padding: 15px;
            margin: 10px 0;
            background-color: rgba(0,0,0,0.3);
        }
        .money { color: #ffff00; font-size: 1.2em; font-weight: bold; }
        
        #status-bar {
            display: none;
            justify-content: space-between;
            margin-bottom: 15px;
            background: #113311;
            padding: 10px;
            border-radius: 4px;
            font-size: 14px;
        }

        /* --- リンク --- */
        a.manual-link {
            color: #88ff88;
            text-decoration: none;
            border-bottom: 1px dashed #88ff88;
            font-size: 14px;
            padding: 10px;
            display: inline-block;
        }

        /* --- スマホ向け調整 (画面幅 600px以下) --- */
        @media (max-width: 600px) {
            body { padding: 0; }
            .container {
                border: none;
                border-radius: 0;
                padding: 10px;
                min-height: 100vh;
            }
            h1 { font-size: 18px; }
            
            .btn-group-vertical .btn {
                display: block;
                width: 100%;
                margin: 10px 0;
                box-sizing: border-box;
            }
            
            #status-bar { flex-direction: column; gap: 5px; }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>🐎 レトロテキスト競馬<br>NAMAZU STAKES</h1>
    
    <div id="status-bar">
        <span id="day-display">第1レース</span>
        <span>所持金: <span id="current-money" class="money">0</span>円</span>
    </div>

    <div id="screen-title" class="screen active">
        <a href="readme.html" target="_blank" class="manual-link">
            [ 📖 遊び方マニュアルを見る ]
        </a>
        <br><br>

        <p>本日の軍資金コースを選んでください</p>
        <div class="info-box" style="font-size:12px; text-align:left;">
            ※ 全10レース / 単勝・複勝あり<br>
            ※ お金が0になるとゲームオーバー<br>
            ※ 最終レース後に残金があればクリア
        </div>
        
        <div class="btn-group-vertical">
            <button class="btn" onclick="startGame(10000)">1万円コース (上級)</button>
            <button class="btn" onclick="startGame(30000)">3万円コース (中級)</button>
            <button class="btn" onclick="startGame(50000)">5万円コース (初級)</button>
            <button class="btn" onclick="startGame(100000)">10万円コース (接待)</button>
        </div>
    </div>

    <div id="screen-betting" class="screen">
        <h2 id="race-title" style="font-size:16px; margin:10px 0;">第1レース パドック</h2>
        <p style="font-size:13px;">枚数を入力してください(1枚100円)</p>
        
        <div class="table-scroll">
            <table id="odds-table">
                <thead>
                    <tr>
                        <th>番</th>
                        <th>馬名</th>
                        <th>オッズ</th>
                        <th style="color:#ffaaaa">単勝(枚)</th>
                        <th style="color:#aaffaa">複勝(枚)</th>
                    </tr>
                </thead>
                <tbody id="odds-list">
                    </tbody>
            </table>
        </div>
        <div class="info-box">
            <p>合計ベット額: <span id="total-bet">0</span>円</p>
            <div class="btn-group-vertical">
                <button class="btn" onclick="submitBet()" style="background:#cc4444; border-color:#ff8888;">投票して出走！</button>
                <button class="btn" onclick="skipBet()" style="background:#444;">見（ケン）して出走</button>
            </div>
        </div>
    </div>

    <div id="screen-race" class="screen">
        <h2>レース中...</h2>
        <p style="font-size:12px; color:#aaa;">(横にスクロールしてゴールを確認できます)</p>
        <div id="track">
            </div>
        <p id="race-commentary">各馬いっせいにスタート！</p>
    </div>

    <div id="screen-result" class="screen">
        <h2>レース結果</h2>
        <div id="result-message" class="info-box"></div>
        <div class="table-scroll">
            <table id="result-table">
                <thead>
                    <tr><th>着順</th><th>番</th><th>馬名</th></tr>
                </thead>
                <tbody id="result-list"></tbody>
            </table>
        </div>
        <br>
        <div class="btn-group-vertical">
            <button class="btn" id="next-race-btn" onclick="nextRace()">次のレースへ</button>
        </div>

        <div id="final-share" style="display:none;">
            <h3>全レース終了！</h3>
            <p id="final-score" style="font-size:1.5em; color:#ff8;"></p>
            <div class="btn-group-vertical">
                <a id="twitter-share-btn" href="#" target="_blank" class="btn" style="background:#1da1f2; text-decoration:none; display:block; box-sizing:border-box;">X (Twitter)に投稿</a>
                <button class="btn" onclick="location.reload()">タイトルに戻る</button>
            </div>
        </div>
    </div>
    
    <div id="screen-gameover" class="screen">
        <h2 style="color:red; font-size:2em;">破産...</h2>
        <p>所持金がなくなりました。</p>
        <p>ゲームオーバーです。</p>
        <br>
        <button class="btn" onclick="location.reload()">再挑戦</button>
    </div>

</div>

<script>
    // --- 定数・辞書データ ---
    const NAME_PARTS_1 = ['イナズマ','ブラック','スーパー','ミスター','ホワイト','レッド','カミナリ','ハヤテ','ドリーム','ワンダー','グレート','シャイニー','マッハ','レトロ','デジタル','サイバー','ネオ','ワイルド'];
    const NAME_PARTS_2 = ['ボーイ','キング','クイーン','トップ','オー','エース','キャップ','インパクト','スター','ラッシュ','サン','ムーン','ホーク','タイガー','ホース','シップ','チケット','テック'];
    
    // --- グローバル変数 ---
    let money = 0;
    let currentRace = 1;
    let maxRaces = 10;
    let horses = [];
    let bets = [];
    let raceInterval = null;
    let raceDistance = 60; // 画面上の距離(文字数)

    // --- ゲーム開始 ---
    function startGame(initialMoney) {
        money = initialMoney;
        currentRace = 1;
        updateMoneyDisplay();
        document.getElementById('status-bar').style.display = 'flex';
        showScreen('screen-betting');
        setupRace();
    }

    // --- 画面切り替え ---
    function showScreen(screenId) {
        document.querySelectorAll('.screen').forEach(el => el.classList.remove('active'));
        document.getElementById(screenId).classList.add('active');
        window.scrollTo(0, 0);
    }

    // --- レース準備（馬生成） ---
    function setupRace() {
        document.getElementById('race-title').innerText = `第${currentRace}レース パドック`;
        document.getElementById('day-display').innerText = `第${currentRace}レース`;
        
        // 馬の数をランダム決定 (5-18)
        const horseCount = Math.floor(Math.random() * 14) + 5;
        horses = [];

        for (let i = 0; i < horseCount; i++) {
            let power = Math.random() * 100;
            let name = NAME_PARTS_1[Math.floor(Math.random() * NAME_PARTS_1.length)] + 
                       NAME_PARTS_2[Math.floor(Math.random() * NAME_PARTS_2.length)];
            if(horses.some(h => h.name === name)) name += "Ⅱ";

            horses.push({
                id: i + 1,
                name: name,
                power: power,
                stamina: Math.random() * 100,
                position: 0,
                finished: false,
                rank: 0,
                displayStr: `(${i+1})♞`,
                odds: 0
            });
        }

        // オッズ計算
        const totalPower = horses.reduce((sum, h) => sum + (h.power * h.power), 0);
        horses.forEach(h => {
            let winProb = (h.power * h.power) / totalPower;
            let rawOdds = (1 / winProb) * 0.8;
            if(rawOdds < 1.1) rawOdds = 1.1;
            if(rawOdds > 99.9) rawOdds = 99.9;
            rawOdds = rawOdds * (0.9 + Math.random() * 0.2); 
            h.odds = parseFloat(rawOdds.toFixed(1));
        });

        // 投票テーブル描画 (修正: 単勝と複勝の列を分ける)
        const tbody = document.getElementById('odds-list');
        tbody.innerHTML = '';
        horses.forEach((h, idx) => {
            const tr = document.createElement('tr');
            // 複勝オッズ目安計算
            let pOdds = h.odds > 2.0 ? h.odds / 2.5 : 1.1;
            if(pOdds < 1.1) pOdds = 1.1;
            
            tr.innerHTML = `
                <td>${h.id}</td>
                <td class="horse-name">${h.name}</td>
                <td style="color:${h.odds < 5.0 ? '#ff8' : '#fff'}">
                    ${h.odds.toFixed(1)}<br>
                    <span style="font-size:0.8em; color:#aaa;">(複${pOdds.toFixed(1)})</span>
                </td>
                <td>
                    <input type="number" id="bet-win-${idx}" class="input-win" min="0" placeholder="単" onchange="calcTotalBet()">
                </td>
                <td>
                    <input type="number" id="bet-place-${idx}" class="input-place" min="0" placeholder="複" onchange="calcTotalBet()">
                </td>
            `;
            tbody.appendChild(tr);
        });
        
        calcTotalBet();
    }

    // --- ベット合計計算 ---
    function calcTotalBet() {
        let total = 0;
        horses.forEach((h, idx) => {
            const winVal = document.getElementById(`bet-win-${idx}`).value;
            const placeVal = document.getElementById(`bet-place-${idx}`).value;
            if(winVal > 0) total += parseInt(winVal) * 100;
            if(placeVal > 0) total += parseInt(placeVal) * 100;
        });
        document.getElementById('total-bet').innerText = total.toLocaleString();
        return total;
    }

    // --- 投票処理 ---
    function submitBet() {
        const total = calcTotalBet();
        if (total > money) {
            alert('資金が足りません！');
            return;
        }
        if (total === 0) {
            if(!confirm('賭け金が0円ですが、見（ケン）してよろしいですか？')) return;
        }

        money -= total;
        updateMoneyDisplay();
        bets = [];
        
        horses.forEach((h, idx) => {
            const winAmount = parseInt(document.getElementById(`bet-win-${idx}`).value);
            const placeAmount = parseInt(document.getElementById(`bet-place-${idx}`).value);

            // 単勝ベット
            if (winAmount > 0) {
                bets.push({
                    horseId: h.id,
                    horseName: h.name,
                    odds: h.odds,
                    type: 'win',
                    amount: winAmount,
                    cost: winAmount * 100
                });
            }
            // 複勝ベット
            if (placeAmount > 0) {
                bets.push({
                    horseId: h.id,
                    horseName: h.name,
                    odds: h.odds, // 複勝オッズは判定時に計算
                    type: 'place',
                    amount: placeAmount,
                    cost: placeAmount * 100
                });
            }
        });

        startRaceAnim();
    }

    function skipBet() {
        bets = [];
        startRaceAnim();
    }

    // --- レース実行 ---
    function startRaceAnim() {
        showScreen('screen-race');
        const track = document.getElementById('track');
        track.scrollLeft = 0;
        
        let finishedCount = 0;
        let rankCounter = 1;

        const renderTrack = () => {
            let html = '';
            let header = 'START' + ' '.repeat(raceDistance - 5) + 'GOAL\n';
            header += '+' + '-'.repeat(raceDistance) + '+\n';
            html += header;

            horses.forEach(h => {
                let pos = Math.floor(h.position);
                if(pos > raceDistance) pos = raceDistance;
                
                let lane = ` ${h.id < 10 ? '0'+h.id : h.id}. `;
                let trackStr = ' '.repeat(pos) + h.displayStr;
                let remaining = raceDistance - pos;
                if(remaining < 0) remaining = 0;
                trackStr += ' '.repeat(remaining);
                
                if(h.finished) {
                    trackStr += ` [${h.rank}着]`;
                }
                html += `<div class="lane">${lane}${trackStr}</div>`;
            });
            track.innerHTML = html;
        };

        raceInterval = setInterval(() => {
            let stillRunning = false;
            
            horses.forEach(h => {
                if (!h.finished) {
                    stillRunning = true;
                    let baseSpeed = 0.5 + (h.power / 200); 
                    let luck = (Math.random() - 0.2); 
                    let fatigue = 0;
                    if(h.position > raceDistance * 0.7) {
                        if(h.stamina < 30) fatigue = -0.3;
                        else if(h.stamina > 80) fatigue = 0.3;
                    }
                    h.position += baseSpeed + luck + fatigue;

                    if (h.position >= raceDistance) {
                        h.position = raceDistance;
                        h.finished = true;
                        h.rank = rankCounter++;
                        finishedCount++;
                    }
                }
            });

            renderTrack();

            if (!stillRunning) {
                clearInterval(raceInterval);
                setTimeout(showResult, 1000);
            }
        }, 100);
    }

    // --- 結果処理 ---
    function showResult() {
        showScreen('screen-result');
        
        const sortedHorses = [...horses].sort((a, b) => a.rank - b.rank);
        const tbody = document.getElementById('result-list');
        tbody.innerHTML = '';
        sortedHorses.forEach(h => {
            const tr = document.createElement('tr');
            tr.innerHTML = `<td>${h.rank}着</td><td>${h.id}</td><td style="text-align:left">${h.name} (${h.odds}倍)</td>`;
            if(h.rank <= 3) tr.style.color = '#ffff88';
            tbody.appendChild(tr);
        });

        let totalPayout = 0;
        let resultMsg = '<ul style="text-align:left; padding-left:20px;">';
        
        const firstId = sortedHorses[0].id;
        const placeIds = sortedHorses.slice(0, 3).map(h => h.id);

        bets.forEach(bet => {
            let payout = 0;
            let hit = false;
            let finalOdds = bet.odds;

            if (bet.type === 'win' && bet.horseId === firstId) {
                hit = true;
                payout = Math.floor(bet.cost * finalOdds);
            }
            else if (bet.type === 'place' && placeIds.includes(bet.horseId)) {
                hit = true;
                // 複勝オッズ計算
                let placeOdds = bet.odds > 2.0 ? bet.odds / 2.5 : 1.1; 
                if(placeOdds < 1.1) placeOdds = 1.1;
                finalOdds = placeOdds; // 表示用に保存
                payout = Math.floor(bet.cost * placeOdds);
            }

            if (hit) {
                totalPayout += payout;
                let typeStr = bet.type === 'win' ? '単' : '複';
                resultMsg += `<li>的中! ${bet.horseName}(${typeStr}):+${payout.toLocaleString()} <span style="font-size:0.8em; color:#aaa">(@${finalOdds.toFixed(1)})</span></li>`;
            }
        });

        if (totalPayout === 0 && bets.length > 0) resultMsg += "<li>的中なし...</li>";
        else if (bets.length === 0) resultMsg += "<li>見（ケン）しました</li>";
        resultMsg += '</ul>';

        if(totalPayout > 0) {
            money += totalPayout;
            document.getElementById('result-message').innerHTML = `<h3 style="color:#ff8">払戻: ${totalPayout.toLocaleString()}円</h3>` + resultMsg;
        } else {
            document.getElementById('result-message').innerHTML = resultMsg;
        }

        updateMoneyDisplay();

        const nextBtn = document.getElementById('next-race-btn');
        const finalShare = document.getElementById('final-share');

        if (money <= 0) {
            setTimeout(() => { showScreen('screen-gameover'); }, 2000);
        } else if (currentRace >= maxRaces) {
            nextBtn.style.display = 'none';
            finalShare.style.display = 'block';
            document.getElementById('final-score').innerText = `${money.toLocaleString()}円`;
            
            const text = `レトロテキスト競馬【NAMAZU STAKES】をクリア！%0a最終所持金: ${money.toLocaleString()}円%0a%23レトロテキスト競馬`;
            const url = "https://namazu-honpo.com/apri/keiba/keiba.html";
            const twitterUrl = `https://twitter.com/intent/tweet?text=${text}&url=${url}`;
            document.getElementById('twitter-share-btn').href = twitterUrl;
        } else {
            nextBtn.style.display = 'block';
            finalShare.style.display = 'none';
        }
    }

    function nextRace() {
        currentRace++;
        setupRace();
        showScreen('screen-betting');
    }

    function updateMoneyDisplay() {
        document.getElementById('current-money').innerText = money.toLocaleString();
    }

</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
     crossorigin="anonymous"></script>
<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>
<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>
</body>
</html>