/**
 * フォニックスモード共通の下部ナビ（初級/中級/上級/鬼レベル）。
 * [phonics_mouth]・[phonics_level]の両方から読み込む想定。
 * 作業中は管理者以外に見せないため、表示自体はPHP側（current_user_can）で
 * 制御している。ここはあくまでスタイルのみ。
 */
/* v2の.v2-subsection-tabs（下部固定サブタブ）と同じ見た目に揃えたもの。ただし
   class/idはあえて別名(phonics-bottom-nav)のまま――phonics-mouth.js側のiframe埋め込み
   検出で「.v2-subsection-tabsは強制非表示」にしているため、同じクラス名にしてしまうと
   埋め込み時にこちらまで消えてしまう。 */
/* このCSS自体、phonics_render_bottom_nav()内（管理者のみ）でしかenqueueされないため、
   .entry-contentへの上書きも実質管理者にしか効かない（一般公開ビューには影響しない）。
   下部固定ナビの分だけ、ページ最下部でもう少しスクロールできる余地を増やす。 */
.entry-content {
    padding-bottom: calc(1.5em + 50px);
}

.phonics-bottom-nav {
    /* 帯（背景・境界線・影）だけは画面幅いっぱいに広げる。ボタン列自体の幅は
       .phonics-bottom-nav-inner側で#inner-contentの実測幅に合わせて中央寄せする。 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    margin: 0;
    background: #fff;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
    padding-bottom: env(safe-area-inset-bottom);
}

.phonics-bottom-nav-inner {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 auto;
}

.phonics-bottom-nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 5px 5px;
    text-decoration: none;
    color: #000;
    font-size: 15px;
    font-weight: 700;
    transition: all .3s ease;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.phonics-bottom-nav-icon {
    flex-shrink: 0;
}

/* 鬼レベルのオニ顔アイコンは他の3つ（難易度バー）より細かい絵柄のため、
   潰れて見えないよう少し大きめのサイズにする。 */
.phonics-bottom-nav-icon-oni {
    width: 32px;
    height: 32px;
}

.phonics-bottom-nav-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.phonics-bottom-nav-item:hover {
    color: #D75A30;
    background: rgba(215, 90, 48, .05);
}

.phonics-bottom-nav-item.is-active {
    color: #D75A30;
    font-weight: 700;
    border-bottom-color: #D75A30;
}

@media (max-width: 768px) {
    .phonics-bottom-nav-item {
        font-size: 13px;
        padding: 7px 5px;
    }
}

@media (max-width: 480px) {
    .phonics-bottom-nav-item {
        font-size: 12px;
        padding: 6px 5px;
        gap: 3px;
    }
    .phonics-bottom-nav-icon {
        width: 20px;
        height: 20px;
    }
    .phonics-bottom-nav-icon-oni {
        width: 28px;
        height: 28px;
    }
}

@media (min-width: 769px) {
    .phonics-bottom-nav-item {
        font-size: clamp(15px, 2.1vw, 22px);
        padding: 10px 10px;
    }
}

/* 管理者にだけ見えている作業中バッジ（誤って一般公開されていないか一目で分かるように） */
.phonics-bottom-nav-admin-badge {
    position: fixed;
    bottom: 54px;
    right: 8px;
    z-index: 999;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    pointer-events: none;
}

/* [phonics_level] の仮ページ用最低限のレイアウト */
.phonics-level-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 66px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
}

.phonics-level-header {
    background: #fff;
    padding: 12px 0;
    z-index: 30;
}

/* ページ最上部の進捗バー（挑戦済みクエスト数／このレベルの全クエスト数）。
   v2の他モジュールの.v2-progress-card相当だが、白背景ベースに合わせて独自定義。 */
.phonics-level-progress-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.phonics-level-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.phonics-level-progress-title {
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
}

.phonics-level-progress-pct {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
}

.phonics-level-progress-bar-bg {
    background: #e2e8f0;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
}

.phonics-level-progress-bar-fill {
    height: 100%;
    background: #f59e0b;
    border-radius: 6px;
    transition: width .5s ease;
}

/* カード右下の⭕/❌透かしの凡例。3パターンをそれぞれ独立したボタンとして横に
   並べる（タイトルの文字は無し）。入りきらない画面幅では横スクロールに
   フォールバックし、折り返しはしない。 */
.phonics-level-score-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    margin: 0 auto 16px;
    overflow-x: auto;
}

.phonics-level-score-legend-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 999px;
    color: #000;
    font-size: clamp(9px, 2.8vw, 13px);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.phonics-level-score-legend-btn:hover {
    border-color: #94a3b8;
}

/* 絞り込み中のボタンだけ強調する。 */
.phonics-level-score-legend-btn.is-active {
    border-color: #1e293b;
    background: #f1f5f9;
}

.phonics-level-score-legend-count {
    color: #94a3b8;
    font-weight: 700;
}

/* 凡例ボタンでの絞り込み。「さらに10個表示」機能（style.displayを直接操作）との
   競合を避けるため、こちらはクラス＋!importantで非表示にする。 */
.phonics-quiz-card.is-filtered-out {
    display: none !important;
}

/* PCはカードもゆったりしているので、文字ももう少し大きくする。 */
@media (min-width: 769px) {
    .phonics-level-score-legend-btn {
        font-size: 16px;
        padding: 10px 18px;
    }
    .phonics-level-score-legend-circle {
        width: 18px;
        height: 18px;
    }
}

.phonics-level-score-legend-circle {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.phonics-level-score-legend-btn .is-perfect {
    color: #16a34a;
}

.phonics-level-score-legend-btn .is-warn {
    color: #fb923c;
}

.phonics-level-score-legend-btn .is-bad {
    color: #f87171;
}

/* position: stickyはテーマ側の祖先要素（.entry-content.cf、#container）に
   overflow:hiddenが付いていて機能しないため使えない（DevToolsで確認済み）。
   代わりにJS(phonics_level_shortcode()内のスクリプト)がスクロール位置を見て
   .is-fixedクラスを付け外しし、position:fixedに手動で切り替える。
   left/width/topは実測してJSがインラインで設定するのでここでは指定しない。 */
.phonics-level-header.is-fixed {
    position: fixed;
}

.phonics-level-section h3.is-fixed {
    position: fixed;
}

.phonics-level-header h2 {
    font-size: 22px;
    font-weight: 900;
    color: #1e293b;
    margin: 0;
    text-align: center;
}

/* スピーキング(左)・リスニング(右)の2カラム。画面幅に関わらず常に横並びにする
   （「縦に2列」＝縦の区切り線で2カラムという意味だったので、モバイルでも
   上下に積まない）。 */
.phonics-level-columns {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.phonics-level-columns .phonics-level-section {
    flex: 1;
    min-width: 0;
}

/* スピーキング／リスニングの境目がひと目で分かるよう、2列目の左に縦線を入れる。 */
.phonics-level-columns .phonics-level-section:not(:first-child) {
    border-left: 2px solid #cbd5e1;
    padding-left: 24px;
}

/* サブセクション（レベル：ノーマル等）単位の2カラム行。「さらに10個表示」を
   1個・1カラムぶんの幅で下に置けるよう、.phonics-level-columns（ページ全体の
   スピーキング/リスニング見出し行）とは別に、サブセクションごとに区切って持つ。 */
.phonics-level-subsection-columns {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 4px;
}

.phonics-level-subsection-columns > div {
    flex: 1;
    min-width: 0;
}

.phonics-level-subsection-columns > div:not(:first-child) {
    border-left: 2px solid #cbd5e1;
    padding-left: 24px;
}

.phonics-level-section {
    margin-bottom: 32px;
}

.phonics-level-section h3 {
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
    background: #f1f5f9;
    padding: 8px 14px;
    border-radius: 8px;
    margin: 0 0 12px;
    text-align: center;
    z-index: 20;
}

/* スピーキング＝緑、リスニング＝ピンクで列を色分けする。カードの枠線も揃える。 */
.phonics-section-speaking h3 {
    background: #dcfce7;
    color: #15803d;
}

.phonics-section-speaking .phonics-quiz-card {
    border-color: #16a34a;
}

.phonics-section-listening h3 {
    background: #fce7f3;
    color: #be185d;
}

.phonics-section-listening .phonics-quiz-card {
    border-color: #db2777;
}

.phonics-level-section-placeholder {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 32px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
}

.phonics-level-subsection {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
}

.phonics-level-subsection.is-normal {
    color: #111827;
}

.phonics-level-subsection.is-hard {
    color: #ea580c;
}

/* 「ちょいムズ」内のマジックE／組み合わせ発音を、それぞれ枠で囲って区別する。 */
.phonics-level-subsection-box {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 14px 4px;
    margin-bottom: 16px;
    background: #f8fafc;
}

.phonics-level-subsection-inner {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 10px;
}

.phonics-quiz-card-grid {
    display: grid;
    /* 左右2カラム化で1カラムぶんの横幅が狭くなったため、モバイルでもカードが
       並べられるよう最小幅を150px→120pxに縮小。 */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.phonics-quiz-card {
    /* position:relativeだけだとz-index:autoのままなので、このカード自身は
       スタッキングコンテキストを作らない。すると子(.phonics-quiz-card-score-badge)の
       z-index:-1は「もっと上の祖先のスタッキングコンテキスト」を基準に評価されて
       しまい、途中にある不透明な背景の裏に回って常に見えなくなる（マウスオーバー時
       だけ:hoverのtransformが新しいスタッキングコンテキストを作るせいで、その時
       だけ正しく手前に出て見えてしまっていた）。z-index:0を明示してこのカード自身に
       常にスタッキングコンテキストを作らせ、hoverの有無に関わらず一貫して見えるようにする。 */
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px;
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s, transform .1s;
}

.phonics-quiz-card:hover {
    border-color: #1e293b;
    transform: translateY(-2px);
}

.phonics-quiz-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    /* 背面の⭕/❌透かしと重なっても文字が読めるよう、薄い白グロー（にじみ）を入れる
       （くっきりしたフチ線=-webkit-text-strokeはやめた）。 */
    text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 6px rgba(255, 255, 255, .9);
}

.phonics-quiz-card-num {
    color: #000;
    font-weight: 700;
    text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 6px rgba(255, 255, 255, .9);
}

/* プレイ済みクエストのベストスコア⭕/❌を、カード全体に対する薄い透かしとして
   中央に大きく出す。.phonics-quiz-card（position:relative）の90%サイズ
   （top/left/right/bottom:5%）に収め、中身はレスポンシブに追従する。
   透過率70%＝不透明度30%。クリックの邪魔をしないようpointer-events:noneにする。
   個々のマークはmax-width/max-heightで上限を切っているため、マーク数が少ない
   （1〜2個）クエストでも1個あたりが暴走して巨大化しないようにしている。 */
.phonics-quiz-card-score-badge {
    position: absolute;
    top: 5%;
    right: 5%;
    bottom: 5%;
    left: 5%;
    /* 負のz-indexにして、静的配置（position指定なし）のタイトルテキストより
       下（背面）に回す。 */
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6%;
    opacity: .55;
    pointer-events: none;
}

.phonics-quiz-card-score-mark {
    flex: 0 1 auto;
    width: auto;
    height: 100%;
    max-width: 30%;
    max-height: 100%;
}

.phonics-quiz-card-meta {
    font-size: 12px;
    color: #94a3b8;
}

/* 鬼レベルだけカードの左右余白を詰める（連番を出さない分、文字量が多いため）。 */
.phonics-level-oni .phonics-quiz-card {
    padding-left: 5px;
    padding-right: 5px;
}

/* 「さらに10個表示」ボタン（11枚目以降がある時だけ出る）。以前はmargin-topを
   マイナスにしてグリッドの下端と少し重ねていたが、その重なり分でカード側が
   クリックを奪ってボタンが反応しない事故があったため、普通のプラス余白に戻す。 */
.phonics-quiz-card-more-btn {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    margin: 8px 0 16px;
    padding: 10px;
    background: #fff;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}

/* スピーキング/リスニング両カラムに対応するボタンを1個にまとめた時、その1個を
   2カラムぶんの実測幅まで広げて中央の区切り線を隠す。widthはJS側
   （phonics_quiz_card_more_script_once()）が実測して都度インラインで設定する
   （固定pxの当て推量だとレイアウト崩れの元になるため）。 */
.phonics-quiz-card-more-btn.is-spanning {
    background: #fff;
}

.phonics-quiz-card-more-btn:hover {
    border-color: #1e293b;
    color: #1e293b;
}

/* スマホは横幅が窮屈なので、上下の余白は逆に控えめにしてカード自体は小さめに保ちつつ、
   タイトルは2行までのぶんだけ表示してそれ以上は…で省略する（半角10文字前後/行が
   目安に収まるようフォントサイズも縮小）。 */
@media (max-width: 768px) {
    .phonics-level-subsection-box {
        width: calc(100% - 5px);
    }
    .phonics-quiz-card {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .phonics-quiz-card-title {
        font-size: 13px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .phonics-quiz-card-num {
        font-size: 13px;
    }
}

/* 無料アカウント向けロックカード。[v2_reading_home]のロックカード
   （quiz-archive-reading-content.phpの.rq-level-card.locked）と同じ
   「黒背景＋金グラデーションの🔒アンロック文字」の見た目に揃える。 */
.phonics-quiz-card.is-locked {
    background: rgba(0, 0, 0, 0.85) !important;
    border-color: #444 !important;
    cursor: pointer;
}

.phonics-quiz-card.is-locked:hover {
    border-color: #444 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.phonics-quiz-card.is-locked .phonics-quiz-card-title,
.phonics-quiz-card.is-locked .phonics-quiz-card-num {
    color: #fff !important;
    /* 白文字用の白グロー（⭕/❌透かし対策）は黒背景のロックカードでは不要かつ
       にじんで見苦しいので消す。ロックカードはそもそもスコア透かしを出さない。 */
    text-shadow: none !important;
}

.phonics-quiz-card-lock-badge {
    display: block;
    margin-top: 2px;
    background: linear-gradient(135deg, #CFB53B 0%, #F5E5A6 25%, #D4AF37 50%, #F5E5A6 75%, #CFB53B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: bold;
    font-size: 12px;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, .5));
    white-space: nowrap;
}