/* 新デザインのヘッダー/フッター/共通変数だけ（2026-09-17 play.css から切り出し）。
   読む側は2つ:
     1. play/base.html（遊ぶ側）: play-chrome.css → play.css の順で読む。切り出し前と規則の順序は同じ。
     2. front/base_legacy.html（旧ページを新ヘッダー/フッターに載せ替えた土台）: このファイルだけを読む。
   ★ここにクラス無しの全体規則（html・body・img・a・見出し など）を書かない。旧ページの本文へ漏れる。
     書いてよいのは :root の --pl- 変数と * {box-sizing}（旧側と同値）だけ。app/test_legacy_chrome.py が見張る。
   正本の計画: docs/計画_旧ページ載せ替えと閉鎖_2026-09-17.md §1-3 */

:root {
    /* 2026-09-17 オーナー指摘「カテゴリとか周辺の色、もっと暗く」。見本の実測値に寄せた
       （カテゴリ枠の地 0,17,33／ヘッダー 0,6,19／タイルの枠 148,159,172） */
    --pl-navy: #07111f;
    --pl-navy-deep: #020a16;
    --pl-navy-tile: #001122;
    --pl-navy-line: #8f9bab;
    --pl-navy-line-soft: #1d2b3e;
    --pl-gold: #f2c94c;
    --pl-gold-dark: #b8862b;
    --pl-parch: #f3e4bd;
    --pl-parch-light: #fbf3df;
    --pl-parch-dark: #e2c98f;
    --pl-wood: #7b4a22;
    --pl-wood-light: #9a6233;
    --pl-wood-dark: #3f2410;
    --pl-ink: #3a2a14;
    --pl-ink-soft: #6b5638;
    --pl-white: #f8f4ea;
    --pl-muted: #b9c3da;
    --pl-blue: #1e4a8f;
    --pl-blue-light: #2c6fd6;
    --pl-red: #d64545;
    /* 羊皮紙の上の赤い字（必須・入力の誤り）。--pl-red は羊皮紙の上で 3.5:1 しかないので、字にはこちら（5.3:1）。2026-09-25 */
    --pl-red-deep: #a8322d;
    --pl-green: #3f9d5a;
    /* 2026-09-17 オーナー「フォントはできるだけ視認性を高めて」。ドット文字（DotGothic16）は小さい字で読みにくいのでやめ、
       見出し・ボタン・札も丸ゴシックの太字にする。ドット感はロゴ・見出しの画像と絵で出す */
    --pl-dot: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
    --pl-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
    --pl-outline: 2px 0 0 var(--pl-navy-deep), -2px 0 0 var(--pl-navy-deep), 0 2px 0 var(--pl-navy-deep), 0 -2px 0 var(--pl-navy-deep),
        2px 2px 0 var(--pl-navy-deep), -2px 2px 0 var(--pl-navy-deep), 2px -2px 0 var(--pl-navy-deep), -2px -2px 0 var(--pl-navy-deep);
}

* {
    box-sizing: border-box;
}

.pl-wrap {
    max-width: 1480px;
    margin: 0 auto;
    padding-inline: 24px;
}

.pl-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------ ヘッダー */

.pl-header {
    background: var(--pl-navy-deep);
    border-bottom: 3px solid var(--pl-navy-line-soft);
    position: sticky;
    top: 0;
    z-index: 20;
}

.pl-header-in {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 68px;
}

.pl-brand {
    display: grid;
    gap: 2px;
    text-decoration: none;
    color: var(--pl-white);
}

.pl-brand-logo {
    display: block;
    width: auto;
    height: 44px;
}

.pl-brand-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pl-white);
}

.pl-brand--footer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-brand-text {
    display: grid;
    gap: 2px;
}

.pl-brand--footer .pl-brand-logo {
    height: 32px;
}

.pl-nav {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pl-nav > a {
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    padding: 8px 14px;
    border-left: 1px solid var(--pl-navy-line-soft);
}

.pl-nav > a:first-child {
    border-left: 0;
}

.pl-nav > a:hover,
.pl-nav > a[aria-current="page"] {
    color: var(--pl-gold);
}

.pl-nav-search {
    display: flex;
    margin-left: 10px;
    border: 2px solid var(--pl-navy-line);
    background: var(--pl-navy);
}

.pl-nav-search input {
    width: 150px;
    border: 0;
    background: transparent;
    color: var(--pl-white);
    font: inherit;
    font-size: 13px;
    padding: 5px 10px;
}

.pl-nav-search input:focus-visible {
    outline: 2px solid var(--pl-gold);
    outline-offset: -2px;
}

.pl-nav-search button {
    border: 0;
    border-left: 2px solid var(--pl-navy-line);
    background: var(--pl-navy-tile);
    color: var(--pl-gold);
    font-size: 18px;
    padding: 0 10px;
    cursor: pointer;
}

.pl-nav-toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 40px;
    border: 2px solid var(--pl-navy-line);
    background: var(--pl-navy-tile);
    cursor: pointer;
    padding: 8px 9px;
    flex-direction: column;
    justify-content: space-between;
}

.pl-nav-toggle span {
    display: block;
    height: 3px;
    background: var(--pl-gold);
}

/* ------------------------------------------------------------ 音のトグル（スピーカー） */
/* 効果音とBGMのON/OFF（templates/play/_sound_toggle.html・play/js/sound.js）。ヘッダーの右端と、ゲーム画面（ノベルの帯・ドラフトの舞台）に置く。
   絵は html[data-sound="on"] のときだけONの絵（play/base.html の先頭で localStorage から写すので、最初の描画からちらつかない）。
   ★ここ（play-chrome.css）に置くのは、旧ページの土台（front/base_legacy.html）が同じヘッダーを読むから（判断票18回目 g6=a: 旧い適職診断も共通のトグルに従う）。
     旧ページ側でトグルを出すときは、_sound_toggle.html を include し、play/js/sound.js と html[data-sound] を写す1行（play/base.html の先頭と同じ）を足すだけでよい。
   ★html[data-sound] の条件は :where() の中に書く（クラス無しの規則を増やさない。app/test_legacy_chrome.py が見張る）。
   ★絵の出し分けのクラスは -on / -off（BEM の --on にすると `--on:` が CSS変数の宣言に見え、変数の命名のテストに引っかかる）。 */

.pl-sound {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 40px;
    padding: 0;
    border: 2px solid var(--pl-navy-line);
    background: var(--pl-navy-tile);
    cursor: pointer;
}

.pl-sound:hover,
.pl-sound:focus-visible {
    border-color: var(--pl-gold);
    outline: none;
}

.pl-sound[aria-pressed="true"] {
    border-color: var(--pl-gold);
    box-shadow: inset 0 0 0 2px var(--pl-gold-dark);
}

.pl-sound-icon {
    grid-area: 1 / 1;
    display: block;
    width: 32px;
    height: 32px;
}

/* html[data-sound] は :where() の中に書く（play.css のクラス無しの規則を増やさない。app/test_legacy_chrome.py が見張る） */
.pl-sound-icon-on,
.pl-sound-icon-off:where([data-sound="on"] *) {
    visibility: hidden;
}

.pl-sound-icon-on:where([data-sound="on"] *) {
    visibility: visible;
}

/* PC: 検索の右（ナビは左右 auto の余白で真ん中に寄るので、order で最後に回す） */
.pl-sound--header {
    order: 1;
}

/* ノベル画面の帯: ✕（.pl-game-close）と同じ大きさ */
.pl-sound--game {
    width: 38px;
    height: 38px;
}

/* ヘッダーがハンバーガーになる幅（play-chrome.css の 1024px と同じ）では、ハンバーガーの左に並べる */
@media (max-width: 1024px) {
    .pl-sound--header {
        order: 0;
        margin-left: auto;
    }

    .pl-sound--header + .pl-nav-toggle {
        margin-left: -8px;
    }
}

/* ------------------------------------------------------------ フッター */

.pl-footer {
    background: var(--pl-navy-deep);
    padding-bottom: 24px;
}

/* フッターの上の、夜の森と村の帯 */
.pl-forest {
    display: flex;
    align-items: flex-end;
    height: 170px;
    background: var(--pl-navy) url("../img/forest-strip.webp") center bottom / auto 100% repeat-x;
    border-bottom: 3px solid var(--pl-navy-line-soft);
    image-rendering: pixelated;
}

.pl-forest-tagline {
    width: 100%;
    margin: 0 auto 10px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--pl-white);
    text-shadow: var(--pl-outline);
}

.pl-footer-in {
    padding-top: 18px;
}

.pl-footer-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.pl-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-inline: auto;
}

.pl-footer-links a {
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    color: var(--pl-white);
}

.pl-footer-links a:hover {
    color: var(--pl-gold);
}

.pl-footer-x {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 2px solid var(--pl-navy-line);
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    color: var(--pl-white);
}

/* BGM素材曲のクレジット（表示必須・docs/計画_SEとBGM_全診断_2026-09-17.md §7-10） */
.pl-footer-credit {
    max-width: 1480px;
    margin: 16px auto 0;
    padding-inline: 24px;
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.6;
    color: var(--pl-muted);
}

.pl-footer-credit a {
    color: var(--pl-muted);
    text-decoration: underline;
}

.pl-footer-credit a:hover,
.pl-footer-credit a:focus-visible {
    color: var(--pl-white);
}

.pl-footer-copy {
    max-width: 1480px;
    margin: 6px auto 0;
    padding-inline: 24px;
    font-family: var(--pl-dot);
    font-weight: 700;
    font-size: 12px;
    color: var(--pl-muted);
}

/* ------------------------------------------------------------ 画面幅（ヘッダー/フッターの分だけ） */

/* ヘッダーのメニューは1024px以下で折りたたむ（720pxまで横に並べていて、768pxで「人気ラ/ンキング」と1字ずつ折れていた・2026-09-17） */
@media (max-width: 1024px) {
    .pl-nav-toggle {
        display: flex;
    }

    .pl-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--pl-navy-deep);
        border-bottom: 3px solid var(--pl-navy-line-soft);
        padding: 6px 20px 14px;
    }

    .pl-nav.is-open {
        display: flex;
    }

    .pl-nav > a {
        border-left: 0;
        border-bottom: 1px solid var(--pl-navy-line-soft);
        padding: 12px 4px;
    }

    .pl-nav-search {
        margin: 12px 0 0;
    }

    .pl-nav-search input {
        width: 100%;
    }

    .pl-brand-tag {
        display: none;
    }
}

@media (max-width: 480px) {
    .pl-wrap {
        padding-inline: 12px;
    }

    .pl-footer-credit,
    .pl-footer-copy {
        padding-inline: 16px;
    }
}

/* 旧い側の土台（front/base_legacy.html）から読まれるときは body.play が無い。
   ヘッダー/フッターの文字色と書体をここで持つ（play側では body.play から継承する値と同じなので何も変わらない）。
   旧ページの body は濃い文字色・明朝なので、これが無いと紺地に黒い明朝になる。 */
.pl-header,
.pl-footer {
    color: var(--pl-white);
    font-family: var(--pl-round);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    font-feature-settings: "palt" 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.pl-header a,
.pl-footer a {
    text-decoration: none;
}