<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>モジロジ</title>
    <link rel="icon" href="モジロジ＿hyoshi_favicon.jpg">
<meta name="description" content="毎日1問言葉パズル">

   <style>
body {
    font-family: sans-serif;
    margin: 20px;
    overflow-y: scroll;
}

.secret-words {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    margin-top: -25px;
    margin-bottom: 30px;
}

h1 {
    font-size: 36px;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.secret-word {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.secret-row {
    display: flex;
    align-items: center;
}

.secret-word strong {
    width: auto;
    margin-right: 8px;
}

.secret-cell {
    width: 32px;
    height: 32px;
    border: 1px solid black;
    background-color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 18px;
}

.secret-cell.found {
    background-color: lightgreen;
    font-weight: bold;
}

.secret-original {
    text-align: center;
    margin-top: 6px;
    font-size: 0.9em;
}

.memo-tools {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.kana-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.kana-cell {
    aspect-ratio: 1;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 18px;
    background-color: white;
    position: relative;
}

.kana-cell.empty {
    background-color: black;
}

.kana-character {
    font-size: 14px;
}

.kana-number {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 21px;
    font-weight: bold;
}

.kana-number.number-0 { color: rgb(255, 40, 237); }
.kana-number.number-1 { color: #0d6eff; }
.kana-number.number-2 { color: #00b400; }
.kana-number.number-3 { color: #ff1616; }
.kana-number.number-4 { color: #0e0edd; }
.kana-number.number-5 { color: #ff962c; }
.kana-number.number-6 { color: #33b9fc; }
.kana-number.number-7 { color: #000000; }
.kana-number.number-8 { color: #777777; }

.memo-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: bold;
    line-height: 1;
    transform: translateY(-2px);
    pointer-events: none;
    z-index: 2;
}

.kana-cell.memo-x {
    background-color: #bdbdbd;
}

.kana-cell.memo-x .memo-mark,
.kana-cell.memo-check .memo-mark {
    color: #000;
    opacity: 0.45;
}

.kana-cell.memo-check {
    background-color: #fff59d;
}

.kana-cell.secret-found {
    background-color: lightgreen;
}

.kana-cell.secret-found .memo-mark {
    color: rgba(0, 100, 0, 0.45);
    font-size: 30px;
    font-weight: 900;
    text-shadow:
        1px 0 0 currentColor,
        -1px 0 0 currentColor,
        0 1px 0 currentColor,
        0 -1px 0 currentColor;
}

.memo-tools button {
    width: 44px;
    height: 44px;
    font-size: 24px;
    background-color: white;
    border: 1px solid #888;
}

.memo-tools button.selected {
    background-color: #d0d0d0;
}

.play-history {
    text-align: center;
    margin-bottom: 12px;
}

.history-row {
    line-height: 1.4;
    font-size: 24px;
    margin-bottom: 7PX;
}

.history-secret,
.history-normal {
    display: inline-flex;
    width: 32px;
    height: 32px;
    margin: 0 2px;
    background: #d9d9d9;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
}

.history-secret {
    background: #8fd694;
}

.history-normal small {
    position: absolute;
    right: 2px;
    bottom: 0;
    font-size: 11px;
    font-weight: bold;
}

.history-normal small.number-0 { color: rgb(255, 40, 237); }
.history-normal small.number-1 { color: #0d6eff; }
.history-normal small.number-2 { color: #00b400; }
.history-normal small.number-3 { color: #ff1616; }
.history-normal small.number-4 { color: #0e0edd; }
.history-normal small.number-5 { color: #ff962c; }
.history-normal small.number-6 { color: #33b9fc; }
.history-normal small.number-7 { color: #000000; }
.history-normal small.number-8 { color: #777777; }

.input-message {
    text-align: center;
    min-height: 1.5em;
    margin-bottom: 4px;
}

.input-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

#word {
    width: 180px;
    height: 38px;
    box-sizing: border-box;
    font-size: 18px;
    padding: 4px 8px;
}

.input-area button {
    height: 38px;
    padding: 0 14px;
    font-size: 16px;
}

#turn {
    text-align: center;
}

#result {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

#info-button {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 22px;
    background: white;
    border: 1px solid #888;
    border-radius: 50%;
    cursor: pointer;
}

#info-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#info-content {
    width: min(94%, 560px);
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 30px 28px;
    background: white;
    text-align: center;
}

#info-content p {
    text-align: center;
    line-height: 1.7;
}

#info-content h2 {
    margin-top: 0;
}

#info-content > button:not(#info-close) {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 12px;
    font-size: 16px;
    background: white;
    border: 1px solid #888;
    cursor: pointer;
}

#info-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
}

#info-content h3 {
    margin-top: 1.5em;
    margin-bottom: -1em;
}

.howto-image {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 16px auto;
}

.howto-small {
    font-size: 12px;
    color: #181717;
    margin-top: -20px;
}

@media screen and (max-width: 600px) {
    .kana-character {
        font-size: 12px;
    }

    .kana-number {
        font-size: 12px;
        right: 1px;
        bottom: 0.5px;
    }

    .secret-words {
        gap: 4px;
    }

    .secret-cell {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .secret-word strong {
        margin-right: 3px;
    }
}
</style>
</head>

<body>

    <button id="info-button" onclick="openInfo()">i</button>

<div id="info-modal">
    <div id="info-content">

        <h2>モジロジ</h2>

        <button onclick="showInfoPage('howto')">
            遊び方
        </button>

        <button onclick="showInfoPage('boardgame')">
            ボードゲーム版について
        </button>

        <button onclick="showInfoPage('license')">
            ライセンス
        </button>

        <button onclick="showInfoPage('unidic')">
            UniDicについて
        </button>

        <button onclick="showInfoPage('bug')">
            バグ・収録単語の報告はこちら
        </button>

    </div>
</div>

<h1>モジロジ</h1>

<div id="play-history" class="play-history"></div>

<div id="input-message" class="input-message"></div>

<div class="input-area">
   <input type="text" id="word" maxlength="4"
       placeholder="ひらがな4文字"
       onkeydown="if(event.key === 'Enter') checkWord()">
    <button onclick="checkWord()">決定</button>
</div>

<div style="display: flex; justify-content: center; gap: 8px; margin: 12px auto;">
    <button
        id="share-button"
        onclick="openShareWindow()"
        style="display: none;"
    >
        Ｘ（Twitter）
    </button>

    <button
        id="random-button"
        onclick="startRandomGame()"
        style="display: none;"
    >
        ランダム出題
    </button>
</div>

   <div class="memo-tools">
    <button onclick="selectMemo('x')">✕</button>
    <button onclick="selectMemo('check')">✓</button>
</div>

    <div class="kana-grid">

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">わ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ら</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">や</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ま</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">は</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">な</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">た</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">さ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">か</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">あ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>


    <div class="kana-cell empty"></div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">り</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell empty"></div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">み</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ひ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">に</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ち</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">し</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">き</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">い</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>


    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ん</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">る</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ゆ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">む</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ふ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ぬ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">つ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">す</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">く</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">う</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>


    <div class="kana-cell empty"></div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">れ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell empty"></div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">め</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">へ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ね</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">て</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">せ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">け</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">え</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>


    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ー</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ろ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">よ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">も</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">ほ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">の</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">と</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">そ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">こ</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

    <div class="kana-cell" onclick="toggleMemo(this)">
        <span class="kana-character">お</span>
        <span class="kana-number"></span>
        <span class="memo-mark"></span>
    </div>

 </div>

<div class="secret-words">

 <div class="secret-word">
    <div class="secret-row">
        <strong>A</strong>
        <span class="secret-cell" id="A-1"></span>
        <span class="secret-cell" id="A-2"></span>
        <span class="secret-cell" id="A-3"></span>
        <span class="secret-cell" id="A-4"></span>
    </div>
    <div class="secret-original" id="A-original"></div>
</div>

<div class="secret-word">
    <div class="secret-row">
        <strong>B</strong>
        <span class="secret-cell" id="B-1"></span>
        <span class="secret-cell" id="B-2"></span>
        <span class="secret-cell" id="B-3"></span>
        <span class="secret-cell" id="B-4"></span>
    </div>
    <div class="secret-original" id="B-original"></div>
</div>

    </div>

</div>

    <p id="turn">手数：0</p>

    <p id="result"></p>

 <script src="words.js" charset="UTF-8"></script>
<script src="answers.js" charset="UTF-8"></script>

    <script>

let gameCleared = false;

// =========================
// 秘密単語をランダム選出
// =========================

// =========================
// 日替わり問題
//
// 同じ日なら常に同じA/Bになる
// =========================

function getDailyDateKey() {

    const now = new Date();

    const jst = new Date(
        now.toLocaleString("en-US", {
            timeZone: "Asia/Tokyo"
        })
    );

    const year = jst.getFullYear();
    const month = String(jst.getMonth() + 1).padStart(2, "0");
    const day = String(jst.getDate()).padStart(2, "0");

    return year + "-" + month + "-" + day;
}


// =========================
// 日替わり問題のクリア状態
// =========================

function isDailyCleared() {

    return localStorage.getItem("mojiroji-daily-cleared")
        === getDailyDateKey();
}

function saveDailyProgress() {

    if (isRandomGame || gameCleared) {
        return;
    }

    const memoState = {};

    document.querySelectorAll(".kana-cell").forEach(cell => {

        const characterElement =
            cell.querySelector(".kana-character");

        if (!characterElement) {
            return;
        }

        const character = characterElement.textContent;

        const numberElement =
            cell.querySelector(".kana-number");

        const mark =
            cell.querySelector(".memo-mark");

        memoState[character] = {
            number: numberElement
                ? numberElement.textContent
                : "",
            memoX: cell.classList.contains("memo-x"),
            memoCheck: cell.classList.contains("memo-check"),
            autoX: cell.classList.contains("auto-x"),
            secretFound: cell.classList.contains("secret-found"),
            mark: mark
                ? mark.textContent
                : ""
        };
    });

    const state = {
        date: getDailyDateKey(),
        turnCount: turnCount,
        discovered: discovered,
        memoState: memoState,
        playHistory: playHistory
    };

    localStorage.setItem(
        "mojiroji-daily-progress",
        JSON.stringify(state)
    );
}

// =========================
// 日替わり問題のクリア状態を復元
// =========================

function restoreDailyClear() {

    if (isRandomGame || !isDailyCleared()) {
        return;
    }

    gameCleared = true;

    const savedTurnCount =
        localStorage.getItem("mojiroji-daily-turn-count");

    if (savedTurnCount !== null) {
        turnCount = Number(savedTurnCount);
    }

    for (let i = 0; i < normalizedSecretA.length; i++) {

        revealPosition(
            "A-" + (i + 1),
            normalizedSecretA[i]
        );
    }

    for (let i = 0; i < normalizedSecretB.length; i++) {

        revealPosition(
            "B-" + (i + 1),
            normalizedSecretB[i]
        );
    }

    const secretCharacters = new Set();

    for (const char of normalizedSecretA) {
        secretCharacters.add(char);
    }

    for (const char of normalizedSecretB) {
        secretCharacters.add(char);
    }

    for (const char of secretCharacters) {
        markSecretCharacter(char);
    }

    document.getElementById("turn").textContent =
        "手数：" + turnCount;

    document.getElementById("result").innerHTML =
        "<strong>クリア！</strong><br>" +
        turnCount +
        "手でクリアしました。";

    document.getElementById("share-button").style.display = "block";
    document.getElementById("random-button").style.display = "block";
}


function getDailySeed() {

    const now = new Date();

    const jst = new Date(
        now.toLocaleString("en-US", {
            timeZone: "Asia/Tokyo"
        })
    );

    const base = new Date(2026, 0, 1);

    const today = new Date(
        jst.getFullYear(),
        jst.getMonth(),
        jst.getDate()
    );

    return Math.floor(
        (today - base) / (1000 * 60 * 60 * 24)
    );
}


function getDailyAnswerIndex(seed) {

    const x = Math.sin(seed) * 10000;

    return Math.floor(
        (x - Math.floor(x)) * ANSWERS.length
    );
}

function getDailyAnswersUntil(targetSeed) {

    const dailyAnswers = [];

    for (let seed = 0; seed <= targetSeed; seed++) {

        const used = new Set();

        const startSeed = Math.max(0, seed - 100);

        for (let i = startSeed; i < seed; i++) {
            used.add(dailyAnswers[i].A.normalized);
            used.add(dailyAnswers[i].B.normalized);
        }

        // Aを選ぶ
        let answerAIndex =
            getDailyAnswerIndex(seed);

        while (
            used.has(ANSWERS[answerAIndex].normalized)
        ) {
            answerAIndex++;

            if (answerAIndex >= ANSWERS.length) {
                answerAIndex = 0;
            }
        }

        const answerA =
            ANSWERS[answerAIndex];

        // Bを選ぶ
        let answerBIndex =
            getDailyAnswerIndex(seed + 1);

        while (
            used.has(ANSWERS[answerBIndex].normalized) ||
            ANSWERS[answerBIndex].normalized ===
                answerA.normalized
        ) {
            answerBIndex++;

            if (answerBIndex >= ANSWERS.length) {
                answerBIndex = 0;
            }
        }

        const answerB =
            ANSWERS[answerBIndex];

        dailyAnswers.push({
            A: answerA,
            B: answerB
        });
    }

    return dailyAnswers[targetSeed];
}

function getRandomAnswer() {

    return ANSWERS[
        Math.floor(Math.random() * ANSWERS.length)
    ];
}

// =========================
// 出題方法
//
// 通常 → 日替わり
// ランダムボタン → ランダム
// =========================

const isRandomGame =
    sessionStorage.getItem("randomGame") === "1";

sessionStorage.removeItem("randomGame");


let answerA;
let answerB;


if (isRandomGame) {

    // ランダム出題

    answerA = getRandomAnswer();

    do {
        answerB = getRandomAnswer();
    } while (
        answerB.normalized === answerA.normalized
    );

} else {

    // 日替わり出題

    const dailySeed = getDailySeed();

    const dailyAnswers =
        getDailyAnswersUntil(dailySeed);

    answerA = dailyAnswers.A;
    answerB = dailyAnswers.B;
}

// =========================
// 秘密単語
//
// normalized = ゲーム内で判定する表記
// original   = クリア時に表示する本来の表記
// =========================

const secretA = answerA.originals[0];

const secretB = answerB.originals[0];

const normalizedSecretA = [...answerA.normalized];

const normalizedSecretB = [...answerB.normalized];

function startRandomGame() {

    sessionStorage.setItem("randomGame", "1");

    location.reload();
}

        // 発見した秘密文字
        let discovered = [];


        // 手数
        let turnCount = 0;
     
        let playHistory = [];   

        // =========================
        // 推理表
        // =========================

        const grid = [
            ["わ", "ら", "や", "ま", "は", "な", "た", "さ", "か", "あ"],
            [null, "り", null, "み", "ひ", "に", "ち", "し", "き", "い"],
            ["ん", "る", "ゆ", "む", "ふ", "ぬ", "つ", "す", "く", "う"],
            [null, "れ", null, "め", "へ", "ね", "て", "せ", "け", "え"],
            ["ー", "ろ", "よ", "も", "ほ", "の", "と", "そ", "こ", "お"]
        ];


        // =========================
        // 周囲8マスを取得
        // =========================

        function getNeighbors(char) {

            for (let row = 0; row < grid.length; row++) {

                for (let col = 0; col < grid[row].length; col++) {

                    if (grid[row][col] === char) {

                        let neighbors = [];

                        for (let rowOffset = -1; rowOffset <= 1; rowOffset++) {

                            for (let colOffset = -1; colOffset <= 1; colOffset++) {

                                if (rowOffset === 0 && colOffset === 0) {
                                    continue;
                                }

                                const newRow = row + rowOffset;
                                const newCol = col + colOffset;

                                if (
                                    newRow >= 0 &&
                                    newRow < grid.length &&
                                    newCol >= 0 &&
                                    newCol < grid[newRow].length
                                ) {

                                    const neighbor = grid[newRow][newCol];

                                    if (neighbor !== null) {
                                        neighbors.push(neighbor);
                                    }

                                }
                            }
                        }

                        return neighbors;
                    }
                }
            }

            return [];
        }


        // =========================
        // 文字を基本形に変換
        // =========================

        function normalizeChar(char) {

    const map = {

        // ひらがな：旧仮名
        "ゐ": "い",
        "ゑ": "え",

        // ひらがな：濁音
        "が": "か", "ぎ": "き", "ぐ": "く", "げ": "け", "ご": "こ",
        "ざ": "さ", "じ": "し", "ず": "す", "ぜ": "せ", "ぞ": "そ",
        "だ": "た", "ぢ": "ち", "づ": "つ", "で": "て", "ど": "と",
        "ば": "は", "び": "ひ", "ぶ": "ふ", "べ": "へ", "ぼ": "ほ",

        // ひらがな：半濁音
        "ぱ": "は", "ぴ": "ひ", "ぷ": "ふ", "ぺ": "へ", "ぽ": "ほ",

        // ひらがな：ゔ
        "ゔ": "う",

        // ひらがな：小文字
        "ぁ": "あ", "ぃ": "い", "ぅ": "う", "ぇ": "え", "ぉ": "お",
        "ゃ": "や", "ゅ": "ゆ", "ょ": "よ",
        "ゎ": "わ",
        "っ": "つ",

        // ひらがな：小書き
        "ゕ": "か",
        "ゖ": "け",

        // カタカナ → ひらがな
        "ア": "あ", "イ": "い", "ウ": "う", "エ": "え", "オ": "お",
        "カ": "か", "キ": "き", "ク": "く", "ケ": "け", "コ": "こ",
        "サ": "さ", "シ": "し", "ス": "す", "セ": "せ", "ソ": "そ",
        "タ": "た", "チ": "ち", "ツ": "つ", "テ": "て", "ト": "と",
        "ナ": "な", "ニ": "に", "ヌ": "ぬ", "ネ": "ね", "ノ": "の",
        "ハ": "は", "ヒ": "ひ", "フ": "ふ", "ヘ": "へ", "ホ": "ほ",
        "マ": "ま", "ミ": "み", "ム": "む", "メ": "め", "モ": "も",
        "ヤ": "や", "ユ": "ゆ", "ヨ": "よ",
        "ラ": "ら", "リ": "り", "ル": "る", "レ": "れ", "ロ": "ろ",
        "ワ": "わ", "ヰ": "い", "ヱ": "え", "ヲ": "を", "ン": "ん",

        // カタカナ：濁音・半濁音
        "ガ": "か", "ギ": "き", "グ": "く", "ゲ": "け", "ゴ": "こ",
        "ザ": "さ", "ジ": "し", "ズ": "す", "ゼ": "せ", "ゾ": "そ",
        "ダ": "た", "ヂ": "ち", "ヅ": "つ", "デ": "て", "ド": "と",
        "バ": "は", "ビ": "ひ", "ブ": "ふ", "ベ": "へ", "ボ": "ほ",
        "パ": "は", "ピ": "ひ", "プ": "ふ", "ペ": "へ", "ポ": "ほ",
        "ヴ": "う",

        // カタカナ：小文字
        "ァ": "あ", "ィ": "い", "ゥ": "う", "ェ": "え", "ォ": "お",
        "ャ": "や", "ュ": "ゆ", "ョ": "よ",
        "ヮ": "わ",
        "ッ": "つ",
        "ヵ": "か",
        "ヶ": "け",

        // カタカナ：特殊
        "ヷ": "わ",
        "ヸ": "い",
        "ヹ": "え",
        "ヺ": "を",

        // 長音
        "ー": "ー"
    };

    return map[char] || char;
}

        // =========================
        // 秘密文字の位置を開く
        // =========================

function revealPosition(position, normalizedChar) {

    const cell = document.getElementById(position);

    if (!cell) {
        return;
    }

    const parts = position.split("-");
    const wordName = parts[0];

    // 発見途中は正規化後の文字を表示
    cell.textContent = normalizedChar;
    cell.classList.add("found");

    // その単語の4文字すべてが発見済みなら、
    // 元の秘密単語を表示
    revealOriginalWordIfComplete(wordName);
}


function revealOriginalWordIfComplete(wordName) {

    const secretWord =
    wordName === "A" ? secretA : secretB;

const normalizedSecret =
    wordName === "A"
        ? normalizedSecretA
        : normalizedSecretB;

let complete = true;

for (let i = 0; i < normalizedSecret.length; i++) {

        const cell =
            document.getElementById(
                wordName + "-" + (i + 1)
            );

        if (!cell || !cell.classList.contains("found")) {
            complete = false;
            break;
        }
    }

    if (!complete) {
        return;
    }

    const originalElement =
        document.getElementById(wordName + "-original");

    if (originalElement) {
        originalElement.textContent = secretWord;
    }
}
let memoMode = "x";

function selectMemo(mode) {
    memoMode = mode;

    const xButton = document.querySelector(".memo-tools button:nth-child(1)");
    const checkButton = document.querySelector(".memo-tools button:nth-child(2)");

    xButton.classList.remove("selected");
    checkButton.classList.remove("selected");

    if (mode === "x") {
        xButton.classList.add("selected");
    }

    if (mode === "check") {
        checkButton.classList.add("selected");
    }
}

selectMemo("x");

function findKanaCell(char) {

    const cells = document.querySelectorAll(".kana-cell");

    for (const cell of cells) {

        const character = cell.querySelector(".kana-character");

        if (character && character.textContent === char) {
            return cell;
        }
    }

    return null;
}

function toggleMemo(cell) {

    if (cell.classList.contains("secret-found")) {
        return;
    }

    // 自動×はプレイヤーが解除できない
    if (cell.classList.contains("auto-x")) {
        return;
    }

    const mark = cell.querySelector(".memo-mark");
    const isX = cell.classList.contains("memo-x");
    const isCheck = cell.classList.contains("memo-check");

    if (memoMode === "x") {

        if (isX) {
            mark.textContent = "";
            cell.classList.remove("memo-x");
        } else {
            mark.textContent = "✕";
            cell.classList.add("memo-x");
            cell.classList.remove("memo-check");
        }
    }

    if (memoMode === "check") {

        if (isCheck) {
            mark.textContent = "";
            cell.classList.remove("memo-check");
        } else {
            mark.textContent = "✓";
            cell.classList.add("memo-check");
            cell.classList.remove("memo-x");
        }
    }
    saveDailyProgress();
}

function showNumber(char, number) {
    const cell = findKanaCell(char);

    if (!cell) {
        return;
    }

    const numberElement = cell.querySelector(".kana-number");

    if (numberElement) {
        numberElement.textContent = number;

        // 数字ごとの色を適用
        numberElement.className =
            "kana-number number-" + number;
    }

    // 数字が表示されたら自動で×メモを付ける
    const mark = cell.querySelector(".memo-mark");

    if (mark) {
        mark.textContent = "×";
    }

    // 自動×であることを記録
    cell.classList.add("memo-x");
    cell.classList.add("auto-x");
    cell.classList.remove("memo-check");
}

function markSecretCharacter(char) {

    const cell = findKanaCell(char);

    if (!cell) {
        return;
    }

    cell.classList.add("secret-found");

    const mark = cell.querySelector(".memo-mark");

    if (mark) {
        mark.textContent = "○";
    }

    cell.classList.remove("memo-x");
    cell.classList.remove("memo-check");
    cell.classList.remove("auto-x");
}

function checkWord() {

    if (gameCleared) {
        return;
    }

    const word = document.getElementById("word").value;
    document.getElementById("word").value = "";

    // =========================
    // 4文字か確認
    // =========================

    if ([...word].length !== 4) {

        document.getElementById("input-message").textContent =
            "ひらがな入力してください";

        return;
    } 

// =========================
// 辞書に存在するか確認
// =========================
//// words.jsには正規化前のひらがな表記が入っている

if (!WORDS.includes(word)) {
    document.getElementById("input-message").textContent =
        "辞書にない言葉です";
    return;
}

// =========================
// 手数を増やす
// =========================
turnCount++;

let result = "";

document.getElementById("input-message").textContent = "";

    // =========================
    // 4文字を1文字ずつ調べる
    // =========================

    for (const char of word) {

        const normalizedChar = normalizeChar(char);

        let positions = [];

        // =========================
        // Aを調べる
        // =========================

        for (let i = 0; i < normalizedSecretA.length; i++) {

            if (normalizedSecretA[i] === normalizedChar) {

                positions.push("A-" + (i + 1));
            }
        }

        // =========================
        // Bを調べる
        // =========================

        for (let i = 0; i < normalizedSecretB.length; i++) {

            if (normalizedSecretB[i] === normalizedChar) {

                positions.push("B-" + (i + 1));
            }
        }

        // =========================
        // 秘密文字だった場合
        // =========================

        if (positions.length > 0) {

            // 発見済みにする

            if (!discovered.includes(normalizedChar)) {

                discovered.push(normalizedChar);
            }

            // A・Bの該当マスを開く

            for (const position of positions) {

                revealPosition(position, normalizedChar);
            }

            markSecretCharacter(normalizedChar);

        }

        // =========================
        // 秘密文字ではなかった場合
        // =========================

        else {

            const neighbors = getNeighbors(normalizedChar);

            const secretCharacters = new Set();

            for (const secretChar of normalizedSecretA) {
                secretCharacters.add(secretChar);
            }

            for (const secretChar of normalizedSecretB) {
                secretCharacters.add(secretChar);
            }

            let secretCount = 0;

            for (const neighbor of neighbors) {

                const normalizedNeighbor =
                    normalizeChar(neighbor);

                if (secretCharacters.has(normalizedNeighbor)) {

                    secretCount++;
                }
            }

            showNumber(normalizedChar, secretCount);
        }
    }

        // =========================
    // プレイ履歴を追加
    // =========================

    let historyRow = "";

    for (const char of word) {
        const normalizedChar = normalizeChar(char);
        const cell = findKanaCell(normalizedChar);

        let number = "";

        if (cell) {
            const numberElement = cell.querySelector(".kana-number");

            if (numberElement) {
                number = numberElement.textContent;
            }
        }

        if (
            normalizedSecretA.includes(normalizedChar) ||
            normalizedSecretB.includes(normalizedChar)
        ) {
            historyRow += `<span class="history-secret">${char}</span>`;
        } else {
            historyRow += `<span class="history-normal">${char}<small class="number-${number}">${number}</small></span>`;
        }
    }

    playHistory.push(historyRow);

    document.getElementById("play-history").innerHTML =
        playHistory
            .map(row => `<div class="history-row">${row}</div>`)
            .join("");

    // =========================
    // 返答を表示
    // =========================

    document.getElementById("result").innerHTML =
        result;

    // =========================
    // 手数を表示
    // =========================

    document.getElementById("turn").textContent =
        "手数：" + turnCount;

   
    // =========================
    // クリア判定
    // =========================

    const allCells =
        document.querySelectorAll(".secret-cell");

    let allFound = true;

    for (const cell of allCells) {

        if (!cell.classList.contains("found")) {

            allFound = false;
            break;
        }
    }

    if (allFound) {

        document.querySelector(".input-area").style.display = "none";
    
        document.getElementById("input-message").innerHTML =
            turnCount +
            "手でクリアしました！";

        gameCleared = true;

        // 日替わり問題だけクリア状態を保存
        if (!isRandomGame) {

            localStorage.setItem(
                "mojiroji-daily-cleared",
                getDailyDateKey()
            );

            localStorage.setItem(
                "mojiroji-daily-turn-count",
                String(turnCount)
            );
        }

        if (!isRandomGame) {
            document.getElementById("share-button").style.display = "block";
        }

        document.getElementById("random-button").style.display = "block";
    }

    saveDailyProgress();
}

function restoreDailyProgress() {

    if (isRandomGame || isDailyCleared()) {
        return;
    }

    const saved = localStorage.getItem(
        "mojiroji-daily-progress"
    );

    if (!saved) {
        return;
    }

    let state;

    try {
        state = JSON.parse(saved);
    } catch (e) {
        return;
    }

    // 別の日のデータなら復元しない
    if (state.date !== getDailyDateKey()) {
        return;
    }

    turnCount = state.turnCount || 0;
    discovered = state.discovered || [];

    playHistory = state.playHistory || [];

    document.getElementById("play-history").innerHTML =
        playHistory
            .map(row => `<div class="history-row">${row}</div>`)
            .join("");

        for (const char of discovered) {

    for (let i = 0; i < normalizedSecretA.length; i++) {

        if (normalizedSecretA[i] === char) {
            revealPosition(
                "A-" + (i + 1),
                char
            );
        }
    }

    for (let i = 0; i < normalizedSecretB.length; i++) {

        if (normalizedSecretB[i] === char) {
            revealPosition(
                "B-" + (i + 1),
                char
            );
        }
    }

    markSecretCharacter(char);
}

    // 数字・×・✓を復元
    const memoState = state.memoState || {};

    document.querySelectorAll(".kana-cell").forEach(cell => {

        const characterElement =
            cell.querySelector(".kana-character");

        if (!characterElement) {
            return;
        }

        const character = characterElement.textContent;
        const savedCell = memoState[character];

        if (!savedCell) {
            return;
        }

        const numberElement =
            cell.querySelector(".kana-number");

        if (savedCell.number && numberElement) {
            numberElement.textContent =
                savedCell.number;

            numberElement.className =
                "kana-number number-" +
                savedCell.number;
        }

        if (savedCell.autoX) {
            cell.classList.add("memo-x");
            cell.classList.add("auto-x");
        } else if (savedCell.memoX) {
            cell.classList.add("memo-x");
        } else if (savedCell.memoCheck) {
            cell.classList.add("memo-check");
        }

        const mark =
            cell.querySelector(".memo-mark");

        if (mark) {
            mark.textContent = savedCell.mark || "";
        }
    });

    document.getElementById("turn").textContent =
        "手数：" + turnCount;
}

function openShareWindow() {

    // 今日が何日目か
    const startDate = new Date("2026-09-03T00:00:00+09:00");
    const now = new Date();

    const jstNow = new Date(
        now.toLocaleString("en-US", {
            timeZone: "Asia/Tokyo"
        })
    );

    const jstStart = new Date(
        startDate.toLocaleString("en-US", {
            timeZone: "Asia/Tokyo"
        })
    );

    const diffTime = jstNow - jstStart;

    const dayNumber =
        Math.floor(diffTime / (1000 * 60 * 60 * 24)) + 1;


    // 手数を絵文字数字に変換
    const emojiNumbers = [
        "0️⃣",
        "1️⃣",
        "2️⃣",
        "3️⃣",
        "4️⃣",
        "5️⃣",
        "6️⃣",
        "7️⃣",
        "8️⃣",
        "9️⃣"
    ];

    const turnText = String(turnCount)
        .split("")
        .map(number => emojiNumbers[Number(number)])
        .join("");

const historyText = playHistory
    .map(row => {
        const cells = row.match(/history-secret|history-normal/g) || [];
        return cells
            .map(cell => cell === "history-secret" ? "🟩" : "⬜")
            .join("");
    })
    .join("\n");
    
    const text =
        "#モジロジ　" +
        dayNumber +
        "\n" +
        historyText +
        "\n" +
        turnText +
        "手でクリアしました！\n";


    const url =
        "https://twitter.com/intent/tweet?text=" +
        encodeURIComponent(text) +
        "&url=" +
        encodeURIComponent(location.href);


    window.open(url, "_blank");
}

function openInfo() {

    showInfoMenu();

    document.getElementById("info-modal").style.display = "flex";
}


function closeInfo() {

    document.getElementById("info-modal").style.display = "none";
}

function showInfoPage(page) {

    const content = document.getElementById("info-content");

    if (page === "howto") {

    content.innerHTML = `

        <h2>遊び方</h2>

        <p>
            秘密の単語AとBを構成する「秘密文字」を<br>
            全て発見してください。
        </p>

        <p>
            ひらがな4文字の単語を入力すると、<br>
            50音表にヒントが表示されます。
        </p>

         <h3>秘密文字だった場合</h3>

        <p>
            発見済みになります。
        </p>
        <img
            src="スクリーンショット 2026-09-02 004433.png"
            class="howto-image"
            alt="秘密文字を発見した状態の図解"
        >

        <h3>秘密文字でない場合</h3>

        <p>
            周囲8マスにある秘密文字の数が表示されます。
        </p>
         <img
            src="スクリーンショット 2026-09-03 213045.png"
            class="howto-image"
            alt="秘密文字でない文字を調べた状態の図解"
        >
         <p class="howto-small">   
            「か」の周囲にある「あ」「い」「き」「さ」のうち、<br>
            2文字が未発見の秘密文字です。<br>
            「し」は発見済みです。
        </p>

        <h3>文字について</h3>

        <p>
            濁音、半濁音、小さい文字は元の文字として扱います。<br>
        </p>
        <p class="howto-small">
             例）こっかい / こづかい → こつかい
        </p>

        <p>
            同じ秘密文字が複数使われていることがあります。
        </p>

        <h3>メモ機能</h3>

        <p>
            50音表の文字をタップすると、<br>
            ✕や✓を付けてメモできます。
        </p>

        <button onclick="showInfoMenu()">戻る</button>
    `;
}

    if (page === "boardgame") {

    content.innerHTML = `

        <h2>ボードゲーム版について</h2>

        <img
            src="20260823_015636_モジロジ＿hyousi.jpg"
            class="howto-image"
            alt="モジロジのボードゲーム版"
        >

        <p>
            モジロジはボードゲーム版もあります。
        </p>

        <p>
            相手の決めた秘密単語をいち早く当てる<br>
            2人対戦ゲームです。
        </p>

        <p>
            2vs2で相談しながらのチーム戦もおすすめです。
        </p>

        <p>
            ゲームを手元に持っていれば、<br>
            離れた場所でも通話しながら対戦できます。
        </p>

        <p>
            東京ゲームマーケット2026秋で発売予定です。
        </p>

        <p>
            <a
                href="https://gamemarket.jp/game/188762"
                target="_blank"
                rel="noopener noreferrer"
            >
                モジロジ｜ゲームマーケット公式サイト
            </a>
        </p>

        <p>
            <a href="https://docs.google.com/forms/d/e/1FAIpQLSfZmPOsv2RRZmBz_IWsxvqVuisFzPpGYJv8lg7YaS27w82g8A/viewform?usp=header" target="_blank" rel="noopener">
                東京ゲームマーケット2026秋で購入予約はこちら
            </a>
        </p>

        <button onclick="showInfoMenu()">戻る</button>
    `;
}

   if (page === "license") {

    content.innerHTML = `

        <h2>ライセンス・使用データ</h2>

        <p>
            制作：<a href="https://x.com/iizuka_owner" target="_blank" rel="noopener noreferrer">イイヅカ</a>
        </p>

        <p>
            本アプリケーションは、以下のデータを使用しています。
        </p>

        <p>
            <strong>The UniDic Consortium「UniDic-cwj_3.1.0」</strong><br>
            GPL v2.0 / LGPL v2.1 / 修正BSD
        </p>

        <p>
            <strong>国立国語研究所（2004）<br>
            『分類語彙表増補改訂版データベース』（ver.1.0）</strong><br>
            CC BY-NC-SA 3.0
        </p>

        <button onclick="showInfoMenu()">戻る</button>
    `;
}

    if (page === "bug") {

        content.innerHTML = `

            <h2>バグ・収録単語の報告はこちら</h2>

            <p>
                不具合や未収録の単語がある場合は、<br>
                X（Twitter）のアカウントからご連絡ください。
            </p>

            <p>
                <a href="https://x.com/iizuka_owner">
                    X（Twitter）で報告する
                </a>
            </p>

            <button onclick="showInfoMenu()">戻る</button>
        `;
    }
}

function showInfoMenu() {

    const content = document.getElementById("info-content");

    content.innerHTML = `
        <h2>モジロジ</h2>

        <button onclick="showInfoPage('howto')">
            遊び方
        </button>

        <button onclick="showInfoPage('boardgame')">
            ボードゲーム版について
        </button>

        <button onclick="showInfoPage('license')">
            ライセンス・使用データ
        </button>

        <button onclick="showInfoPage('bug')">
            バグ・収録単語の報告はこちら
        </button>

        <button onclick="closeInfo()">閉じる</button>
    `;
}


// =========================
// 起動時に日替わりクリア状態を復元
// =========================

restoreDailyClear();

// =========================
// 起動時に日替わり途中状態を復元
// =========================

restoreDailyProgress();

    </script>

</body>
</html>