/* --------------- */
/* Header nav(通常時は横並び常時表示。768px以下はcommon.cssでドロワー化) */
/* --------------- */
.nav-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* 1段の中の項目を上下中央にそろえる(「遊び方」・言語のボタンが浮いて見えたため、2026-10-22) */
    align-items: center;
    gap: 5px;
}

.nav-menu .menu-btn {
    width: fit-content;
    justify-content: start;
    /* 高さを変えるときは、下の「プルダウンの幅」の grid-template-rows も同じ値にする */
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
}

.nav-menu .menu-btn:hover {
    transform: none;
}

.nav-menu .menu-btn span {
    font-size: 0.8rem;
}

/* お問い合わせ・プライバシーポリシー・特商法(2026-10-21)。768px超は幅いっぱいの行にして2段目に落とす。
   768px以下は下のメディアクエリで display:contents にし、ドロワーの縦1列に混ぜる */
.nav-sub {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

/* 「遊び方」プルダウン(768px超はボタンの下に重ねて表示。768px以下は下のメディアクエリでアコーディオン化) */
/* 包みの中のボタンも、外のボタンと同じく flex の子として並べる(2026-10-22)。
   中身の .nav-dropdown-menu は position: absolute なので、flex の並びには入らない。
   768px以下は下のメディアクエリで block に戻す */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    /* 対局画面の盤(駒・着手の点は998/999)より上に出すため1002にしている。
       ポップアップの暗幕(1000〜)より上になるが、暗幕を出すボタンを押した時点で
       外側クリックとしてプルダウンは閉じるため、重なって見えることは無い */
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    /* 開いているあいだだけ見えるので、常に明るい色にしておく(2026-10-22) */
    background: var(--color-beige-bright);
    width: fit-content;
}

.nav-dropdown-menu[hidden] {
    display: none;
}

/* 開いたボタンと中の項目も、中身と同じ明るい色にして、1つのパネルに見せる(2026-10-22)。
   開閉は base.js が aria-expanded を切り替える。どちらも .menu-btn.white(common.css)より強い。
   準備中(disabled)の項目は、disabled 用の色のままにする */
.nav-dropdown>.menu-btn[aria-expanded="true"],
.nav-menu .nav-dropdown-menu .menu-btn.white:not(:disabled) {
    background-color: var(--color-beige-bright);
    border-radius: 0%;
}

.nav-menu .nav-dropdown-menu .menu-btn {
    width: 100%;
    gap: 8px;
    white-space: nowrap;
}

.nav-dropdown-menu .menu-btn:disabled {
    cursor: default;
    background-color: var(--color-beige-light);
    color: var(--color-beige-dark)
}

/* 準備中の項目(disabled + .coming-soon)。2026-10-18に全項目のチュートリアルができたため今は使っていないが、
   項目を足すときのために残す */
/* 薄くするのは項目名だけにして、「準備中」の文字は読みやすいまま残す */
.nav-dropdown-menu .menu-btn:disabled .item-label {
    opacity: 0.6;
    text-decoration: line-through;
    text-decoration-style: double;
}

.nav-dropdown-menu .coming-soon {
    font-size: 0.7rem;
    color: var(--color-beige-dark);
}

.dropdown-arrow {
    line-height: 0.9;
}


/* ホーム画面に追加(PWA、2026-10-21)。追加できない環境では base.js が出さない */
.nav-install[hidden] {
    display: none;
}

/* ボタンと手順を縦1列の grid にし、手順の箱をボタンと同じ幅にそろえる(2026-10-22)。
   「遊び方」・言語と違い、幅の基準はボタン。長い文で列を広げないよう、手順の箱は contain: inline-size にする。
   [hidden] のときの display: none より強くならないよう :not([hidden]) を付ける */
.nav-dropdown.nav-install:not([hidden]) {
    display: grid;
}

.nav-menu .nav-install>.menu-btn {
    width: 100%;
}

/* iPhone・iPad の Safari 向けの手順。文はボタンの幅で折り返す。
   左右の padding はボタン(.menu-btn の 6px)と同じにして、文字の始まる位置をそろえる。
   contain: inline-size に対応していない古いブラウザ(iOS 15 以前など)では、文の長さでボタンが広がる(使えなくはならない) */
.install-ios-guide {
    contain: inline-size;
    width: auto;
    box-sizing: border-box;
    padding: 8px 6px;
    font-size: 0.8rem;
    line-height: 1.6;
    white-space: normal;
}

.install-ios-guide p {
    margin: 0;
}

/* 手順の中の共有マーク(2026-10-22)。share.png は矢印が下向きなので、180°回して iPhone の共有ボタンと同じ上向きにする */
.install-ios-guide .share-icon {
    height: 1.2em;
    width: auto;
    margin: 0 4px;
    vertical-align: middle;
    transform: rotate(180deg);
}

/* 言語の切り替え(日本語 / English / ひらがな)。今の言語のボタンと、他の言語のプルダウン(2026-10-21)。
   768px超では、プルダウンはボタンと同じ幅で左揃えにする(下の「プルダウンの幅」、2026-10-22)。
   幅がボタンと同じなので、1段目の右端にあっても画面からはみ出さない */

/* 「遊び方」・言語のプルダウンの幅(768px超、2026-10-22)。
   768.5px のような小数の幅も取りこぼさないよう、ドロワーの (max-width: 768px) の否定で書く。
   ボタンと中身を grid の同じマスに重ね、どちらも長いほう(一番長い項目)の幅にそろえる。
   閉じているときも中身は visibility: hidden で幅だけ取っておくので、開いても横のボタンは動かない。
   「ホーム画面に追加」の手順は長い文でボタンを広げないよう、ここでは対象外にし、下で別に重ねる */
@media not all and (max-width: 768px) {
    .nav-dropdown:not(.nav-install) {
        display: grid;
        /* 段の高さはボタンの高さ(.nav-menu .menu-btn の 28px)。中身はこの段からはみ出して下に出る */
        grid-template-rows: 28px;
    }

    .nav-menu .nav-dropdown:not(.nav-install)>.menu-btn {
        grid-area: 1 / 1;
        width: 100%;
    }

    .nav-dropdown:not(.nav-install)>.nav-dropdown-menu {
        grid-area: 1 / 1;
        align-self: start;
        /* grid の子の top の % はマスの高さ。ボタンのすぐ下に置き、並びは押し下げない */
        position: relative;
        top: 100%;
        left: 0;
        width: auto;
        /* 左右を 0 にして、ボタンと中の項目の文字の始まる位置をそろえる */
        padding: 4px 0;
    }

    /* 見えない・押せない・読み上げない。幅だけ取っておく。開閉は base.js が hidden 属性で切り替える */
    .nav-dropdown:not(.nav-install)>.nav-dropdown-menu[hidden] {
        display: flex;
        visibility: hidden;
    }

    /* 「ホーム画面に追加」(2026-10-22)。「遊び方」と同じく、ボタンと手順を grid の同じマスに重ね、
       手順はボタンのすぐ下に、ボタンと同じ幅で出す。並びは押し下げない */
    .nav-dropdown.nav-install:not([hidden]) {
        grid-template-rows: 28px;
    }

    .nav-menu .nav-install>.menu-btn {
        grid-area: 1 / 1;
    }

    .nav-install>.install-ios-guide {
        grid-area: 1 / 1;
        align-self: start;
        position: relative;
        top: 100%;
        left: 0;
    }
}

/* 他の言語はリンク(<a>)なので、ボタンの項目と同じ見た目(文字色もボタンの既定色)にする */
.nav-menu .nav-language-link {
    box-sizing: border-box;
    color: buttontext;
    text-decoration: none;
}


/* ハンバーガーボタン(768px超では非表示。common.cssで768px以下のみ表示に切り替え) */
.nav-toggle-btn {
    display: none;
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 24px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
}

.nav-toggle-btn span {
    display: block;
    height: 3px;
    background: var(--color-beige-deep);
    border-radius: 3px;
}


/* スマホ用（画面幅768px以下） */
@media (max-width: 768px) {

    /* header nav → 左からのスライドインドロワーに切り替え */
    .nav-toggle-btn {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: min(70vw, 280px);
        margin-top: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;
        padding: 64px 16px 16px;
        background: var(--color-beige-light);
        box-shadow: none;
        box-sizing: border-box;
        z-index: 1004;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .nav-menu.open {
        transform: translateX(0);
    }

    /* 囲んだ div が無いのと同じ扱いにし、3つのボタンを他の項目と同じ縦1列に並べる */
    .nav-sub {
        display: contents;
    }

    /* 言語とお問い合わせの間を広くする(2026-10-22)。gap の 16px と合わせて 50px */
    .nav-sub> :first-child {
        margin-top: 34px;
    }

    .nav-menu .menu-btn {
        width: 100%;
        margin-left: 12px;
    }

    .nav-dropdown {
        display: block;
        width: 100%;
    }

    .nav-dropdown-menu {
        position: static;
        margin-left: 24px;
        padding: 0;
        box-shadow: none;
    }

    /* 「ホーム画面に追加」(2026-10-22)。ボタンはほかの項目と同じ幅・左 12px にし、
       手順はボタンの下に、同じ左端・同じ幅で積む(開くと下の項目を押し下げる) */
    .nav-dropdown.nav-install {
        margin-left: 12px;
    }

    .nav-menu .nav-install>.menu-btn {
        margin-left: 0;
    }

    /* 上の .nav-dropdown-menu の margin・padding を、ボタンにそろえた値に戻す */
    .nav-install>.install-ios-guide {
        margin-left: 0;
        padding: 8px 6px;
    }

    /* ドロワーは幅が狭い(min(70vw, 280px))ので、項目名と「準備中」は折り返せるようにする */
    .nav-menu .nav-dropdown-menu .menu-btn {
        margin-left: 0;
        height: auto;
        min-height: 30px;
        flex-wrap: wrap;
        white-space: normal;
        text-align: left;
    }

    /* 「遊び方」・言語のプルダウンの幅(ドロワー、2026-10-22)。PC と同じく、ボタンと中身を同じ幅にする。
       幅は一番長い項目に合わせ、ボタンと中身の左端はほかの項目と同じ 12px にそろえる。
       PC と違って重ねずに縦に積むので、開くと下の項目を押し下げる(アコーディオン)。
       「ホーム画面に追加」の手順は対象外 */
    .nav-dropdown:not(.nav-install) {
        display: grid;
        width: fit-content;
        max-width: 100%;
        margin-left: 12px;
    }

    .nav-menu .nav-dropdown:not(.nav-install)>.menu-btn {
        width: 100%;
        margin-left: 0;
    }

    /* ボタンにくっつけ、左右の padding 0 で文字の始まる位置をそろえる */
    .nav-dropdown:not(.nav-install)>.nav-dropdown-menu {
        /* 共通の width: fit-content を外し、列(ボタン)の幅いっぱいに広げる */
        width: auto;
        margin: 0;
        padding: 4px 0;
    }

    /* 閉じているときは高さを取らず、幅だけ列に効かせる。開いてもボタンの幅が変わらない */
    .nav-dropdown:not(.nav-install)>.nav-dropdown-menu[hidden] {
        display: flex;
        visibility: hidden;
        height: 0;
        padding: 0;
        overflow: hidden;
    }

    /* 中の項目の高さをボタン(28px)とそろえる。長い項目は折り返せるよう min-height にする */
    .nav-menu .nav-dropdown:not(.nav-install)>.nav-dropdown-menu .menu-btn {
        min-height: 28px;
    }
}